ahn-sujin / react-jeaon6-jjeaom

🍖 육류를 주력으로 판매하는 웹 커머스 서비스

정육쩜 프로젝트 소개

• 정육쩜은 초신선 육류를 주력으로 판매하는 쇼핑몰입니다.
• 프로젝트 기간동안 메인, 회원가입, 로그인, 리스트, 상세, 장바구니, 주문 페이지를 구현했습니다.
• 개발은 초기 세팅부터 전부 직접 구현했으며, 아래 데모 영상에서 보이는 기능은 모두 백앤드와 연결하여 구현했습니다.

개발 인원 및 기간

• 개발기간 : 2022/9/19 ~ 2022/9/30
• 개발 인원 : 프론트엔드 3명, 백엔드 2명
• 백엔드 github 링크

프로젝트 선정이유

• UI가 군더더기 없이 깔끔했고, 기능 구현에 집중할 수 있을 것 같았기 때문입니다.

데모 영상(이미지 클릭)

적용 기술 및 구현 기능

적용 기술

Front-End : React.js, sass

Back-End : My SQL, Bcrypt, Node.js

Common : RESTful API, Git, GitHub

내가 구현한 기능

1) header 👉🏻 자세히 보기

• 페이지별 공통 컴포넌트인 header레이아웃을 잡았습니다.
• nav 메뉴 아이콘을 클릭 이벤트를 구현했습니다.
• 사용자가 로그인했을 때, localstorage에 저장된 token을 가져와서 header 로그인/회원가입 메뉴를 로그아웃/마이페이지 로 바뀌도록 구현했습니다.

2) footer 👉🏻 자세히 보기

• 페이지별 공통 컴포넌트인 footer레이아웃을 잡았습니다.

3) 장바구니 👉🏻 자세히 보기

3-1) 체크박스 구현

• 체크박스 기능을 구현 했습니다.
• 선택한 상품만 삭제되는 기능을 구현 했습니다.(백엔드와의 통신(DELETE)을 통해서 구현)
• 선택한 상품의 가격만 총 합계 금액에 표시되도록 구현했습니다.

3-2) 수량 조절 기능 구현

• 장바구니에 있는 수량을 조절할 수 있도록 구현했습니다.
• 수량이 1이하로 떨어지지 않도록 설정해두었습니다.
• 변경된 수량이 서버에 저장되는 것은 백엔드와의 통신(PATCH)을 통해서 구현했습니다.

3-3) 장바구나에 담긴 상품이 없을 때

• 장바구니에 담긴 상품이 없을 때 보여질 화면을 따로 만들어 담긴 상품이 없을 때 보여지도록 구현했습니다.

Reference

• 이 프로젝트는 정육각 사이트를 참조하여 학습목적으로 만들었습니다.
• 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
• 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.