cakoo 프로젝트

케이쿠는 꾸까를 모티브로 한 케이크를 판매하는 이커머스 사이트로, 구매하기까지의 로직에 집중하여 진행하였습니다. 원하는 케이크 조건 검색, 케이크 리스트 조회, 케이크 상세 페이지, 상품 장바구니 넣기, 수량 선택, 주문까지 하나의 플로우를 구현했습니다.

🚀 개발 인원 및 기간

개발 기간 : 2022/2/28 ~ 2022/3/11 (2주간)
프론트엔드 3명, 백엔드 3명
- Back-end
  - 김기현 - Modeling, SignUp, Product List API, Order API
  - 이지원 - Modeling, Cart API
  - 박건규 - Modeling, SignIn, Product Detail API, Order API
- Front-end
  - 신윤숙 - Login, Order
  - 전슬기 - Product List, Product Detail
  - 김준영 - Sign Up, Cart
- 프론트 github 링크

📍 데모 영상

🌷 Target site

사이트 소개

Site Link

꽃을 일상에서 가볍게 즐기는 핀란드의 문화를 한국에 전파하는 것이 목표

우리는 한국에도 멋진 ‘꽃 브랜드’가 생길 수 있다고 믿고 행동하는 사람들이 모인 곳
사이트 선정 이유
- 깔끔한 UI
- 이커머스의 기본 기능인 로그인, 회원가입, 상품 조회, 옵션 선택, 장바구니, 주문 기능을 모두 담고 있음

💡 초기기획 & ERD

ERD

User flow

초기기획 및 구현 목표

짧은 기간동안 기능구현에 집중해야하므로 사이트의 디자인과 기획만 클론
개발은 초기세팅부터 전부 직접 구현
사이트 카테고리 중 '꽃다발'만 구현
필수 구현 사항을 회원가입, 로그인, 상품 조회, 장바구니, 주문기능으로 설정
한 상품에 여러 옵션(사이즈)이 적용될 수 있게 기획

📝 적용 기술 및 구현 기능

기술 스택
- Front-end
- Back-end
- Common
- Communication
구현기능
- 회원가입 / 로그인
  - 유효성 검사 : input에 사용자가 입력한 값이 주어진 조건을 만족할 때만 버튼을 활성화
  - 백엔드와 통신을 통해 input으로 받은 값을 전달하고, 로그인 시 token을 받아 localStorage에 저장
  - token이 있을 때, 조건부 렌더링을 이용하여 페이지 상단 nav의 로그인/회원가입이 로그아웃/장바구니로 전환
- 상품 리스트 페이지
  - query parameter를 이용해 판매 상품의 분류(크기)에 따른 filtering과 가격 및 출시순에 따른 sorting 적용
  - 페이지 하단의 "더보기" 버튼 클릭 시, 백엔드로부터 상품 정보를 더 받아와 보여주는 pagination 구현
- 상품 상세 페이지
  - path parameter로 상품 id를 백엔드에 전달하여 상품 상세페이지에 필요한 데이터를 받아와 그려냄
  - 크기와 수량 옵션을 선택하여 장바구니로 저장
  - 로그인이 되어있을 때만 장바구니 담기 가능
  - 이미 담은 크기 옵션을 다시 선택할 시, alert로 사용자에게 알려주며 담을 수 없게 함
- 장바구니
  - 백엔드와 통신하여 해당 사용자의 장바구니에 담긴 상품 정보 불러오기
  - 선택한 상품 즉시 삭제(백엔드 데이터베이스에까지 삭제됨)
- 주문
  - 장바구니에 저장된 상품정보와 사용자 정보를 넘겨받아 그려냄
  - 백엔드에 주문서의 상품을 주문하는 요청을 보냄