Biskit Frontend

요리키트를 판매하는 이커머스 플랫폼인 CJ COOKIT를 모티브로 한 프로젝트

프로젝트 계획 및 기간

📆 2021.6.7 ~ 6.18

• 1st Sprint : 개발환경 초기세팅, 전체 레이아웃, 컴포넌트화
• 2nd Sprint : 컴포넌트 별 기능 구현, 프론트-백 통신, 코드 리팩토링, conflict 수정 작업

시연 영상 확인

---

페이지별 기능 Demo 및 구현 기능 상세

0. 공통

• React 기반의 커머스 홈페이지 제작
• CRA를 사용한 초기 세팅
• 3명의 팀원들이 공통 Common.scss, Reset.scss 사용
• 공통부분인 Nav, Footer 컴포넌트 제작

1. 제품 상세 페이지

• fecth를 이용해 백엔드와 통신하여 페이지 데이터 렌더링
• 상품 이미지 캐러셀 노출 기능 구현
• 상세설명/정보/리뷰/배송,환불,문의 탭 기능 구현
• 상품 찜하기 기능 구현
• 장바구니 담기: fetch (post)를 이용해 장바구니 페이지로 데이터 전달

2. 장바구니

• 장바구니 페이지 UI 구현
• 제품별 삭제, 선택 삭제 기능 구현
• 개별 상품 수량 증감 버튼 기능 구현
• 제품 장바구니 삭제, 수량 증감에 따라 총 결제 금액 변동 구현
• 제품의 장바구니가 비어있을 경우 다른 UI가 나오도록 구현
  
  

🛠 사용한 기술

🛠 사용한 툴

👥 팀원

• 프론트 : 권오현, 신미영, 전건우
• 벡엔드 : 김민규, 박창현, 송준, 이아란 (비스킷 벡앤드팀 깃허브)

Reference

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