[클린코드 리액트 3기 정수현] 장바구니 미션 Step2

[sasha1107]

민경님 안녕하세요 :)
일이 많아서 이제야 pr을 올립니다.ㅜㅜ
늦었지만 step2도 잘 부탁드립니다 ☺️

1. 가이드

1-1. 배포

• 배포페이지

1-2. 로컬 환경

# install
npm install

# run
npm run dev

2. 질문있어요 🙋

step1 진행하면서 생겼던 고민은 대부분 step 2를 구현하면서 해결된 것 같습니다. (장바구니에 기존에 담은 상품이 존재할 때 어떻게 할지 등등)
그래서 코드에 대한 질문보다는 민경님의 아이디어를 듣고 싶은 부분에 대해 질문드리겠습니다. ☺️
선택 요구사항 중 흐름을 고려한 맞춤 큐레이팅 상품 추천 기능이 흥미로웠지만, 감도 잘 안잡히고 시간도 오래 걸릴 것 같아서 구현하지 못했는데요. 민경 님이라면 어떠한 방법으로 연관된 상품을 추천하도록 구현하셨을지 궁금합니다. 🤔

3. 요구 사항 ✅

3.1 필수 요구사항

• TanStack Query를 기반으로 상태 분리
  • 낙관적 업데이트를 활용하여 UX/UI 증진
  • refetch() 사용 금지 있다면 제거
• MSW를 활용한 API mocking
• Endpoint만 변경하면 언제든 Real API를 바라볼 수 있다고 가정하고 상상한다.
  • Real API 없이 로컬에서만 동작하는 상태로 리뷰 받는 것이 기본 원칙
• 상태 관리 라이브러리가 필요하다면 추가적으로 선택하고 적용한다.
  • 전략을 세우고 PR 본문에 내용을 작성한다.
• 선택한 상태 관리 라이브러리에 대응되는 테스트 전략을 세우고 PR 본문에 내용을 작성한다.
  • 없다면 React Testing Library & Jest를 활용해 자유로운 단위의 테스트라도 진행한다.

상품목록

• 페이징 혹은 인피니티 스크롤 적용
  • 뒤로가기 및 페이지 전환시 기존 페이지 및 스크롤 위치 기억

장바구니

• 해당 상품의 수량을 변경할 수 있다.
  • 상품의 수량은 항상 1이상, 20이하여야 한다
    • 상품의 수량이 1이면 상품 수량 감소할 수 없다.
    • 상품의 수량이 20이면 상품 수량 증가할 수 없다.
  • 해당 상품의 총 금액이 변경된다.
  • 해당 상품이 체크되어있으면, 결제예상금액도 변경된다.
• 모두선택 버튼이 체크되면, 상품들이 모두 선택된다.
  • 모두선택 버튼이 체크가 풀리면, 상품들의 선택이 모두 해제된다.
• 상품 삭제 버튼을 누르면, confirm 메시지가 보여진다.
  • 확인을 누르면, 선택된 상품이 모두 삭제된다.
  • 결제예상금액이 0원이 된다.
• 🗑 버튼을 누르면 confirm 메시지가 보여진다.
  • 확인을 누르면, 해당 상품이 삭제된다.
• 체크된 상품 개수에 따라 주문하기 버튼 내부에 수량이 변경된다.
• 주문하기 버튼을 누르면, confirm 메시지가 보여진다.
  • 확인을 누르면, 주문/결제 페이지로 이동한다.
  • 확인을 누르면, 장바구니에서 선택된 상품들이 삭제된다.
  • 확인을 누르면, 체크된 상품들을 데이터베이스에서 제거한다.
• 주문할 상품이 0개이면 버튼이 비활성화된다.

3-2. 선택 요구사항 (심화)

• 상품상세
  • 페이지에는 상품 사진, 이름, 금액 정보가 보여진다.
  • 장바구니 버튼을 클릭하면 장바구니 페이지로 이동한다.
  • 장바구니 버튼을 클릭하면 해당 상품이 장바구니에 담긴다.
• 주문 상세
  • 주문 정보가 보여진다.
  • 장바구니 버튼을 클릭하면, 해당 상품이 장바구니에 담기고 장바구니 이동 선택 모달이 보여진다.
    • 장바구니 이동 버튼을 누르면 장바구니 페이지로 이동한다.
• UX/UI
  • 반응형 레이아웃을 구현한다.
  • 사용성 개선
    • 사용자를 위한 로딩 환경 개선
    • 상품이 없을 때와 같은 다양한 Edge Case 대응
    • 반응형 레이아웃 구현
    • 별도의 모바일 레이아웃 추가 제공
  • 매출 증대 및 마케팅을 위해 별도의 기능 구현 (별도의 API 없음)
    • 브라우저 새로고침시 모든 상태 유지
    • 흐름을 고려한 맞춤 큐레이팅 상품 추천 기능
    • 구매 유도를 위한 상품 찜 페이지
  • 매출 증대 및 마케팅을 위한 별도의 도구 추가
    • Google Analytics
    • Google Tag Manager