[클린코드 리액트 3기 임대호] 장바구니 미션 Step2

[ingdaeho]

안녕하세요 태은님
한 달여 만에 두번째 미션으로 왔습니다
일 끝나고 틈틈이 작업했는데 계속 미루다 이제야 올리네요
잘 부탁드립니다

1. 가이드

1-1. 배포

• 배포
• 스토리북

1-2. 로컬 환경

# install
pnpm install

# run
pnpm dev

2. 리뷰 요청 ✍️

2-1. 상태관리 전략

클라이언트 상태는 zustand를 사용했습니다. api 의존적인 상태들이 많아서 클라이언트 상태는 관리할게 많지 않았습니다.
기본적로 장바구니 추가, 수량 변경, 선택 정도만 상태 관리하고 테스트 코드를 작성했습니다.

2-2. 새로운 시도 혹은 미션을 통해 도전한 점

세션때 현석님께서 소개해주신 @tanstack/react-virtual이 기억에 남아 상품 리스트 페이지와 인피니티 스크롤을 구현해봤습니다.
이런 가상 리스트 라이브러리는 처음 사용해봤는데, 렌더링 최적화가 잘 되어있기도 한 부분도 좋았고,
뒤로가기 및 페이지 전환시 스크롤 위치 기억 같은 기능도 기본적으로 구현되어 있어서 좋았습니다.

그리고 장바구니 추가, 결제까지 프로세스가 이어질 수 있도록 mocking 데이터를 메모리에 저장하도록 구현했습니다.

3. 질문있어요 🙋

4. 요구 사항 ✅

4-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개이면 버튼이 비활성화된다.

선택 요구사항 (심화)

상품상세

• 페이지에는 상품 사진, 이름, 금액 정보가 보여진다.
• 장바구니 버튼을 클릭하면 장바구니 페이지로 이동한다.
• 장바구니 버튼을 클릭하면 해당 상품이 장바구니에 담긴다.

주문 상세

• 주문 정보가 보여진다.
• 장바구니 버튼을 클릭하면, 해당 상품이 장바구니에 담기고 장바구니 이동 선택 모달이 보여진다.
  • 장바구니 이동 버튼을 누르면 장바구니 페이지로 이동한다.

UX/UI

• 반응형 레이아웃을 구현한다.
• 사용성 개선
  • 사용자를 위한 로딩 환경 개선
  • 상품이 없을 때와 같은 다양한 Edge Case 대응
  • 반응형 레이아웃 구현
  • 별도의 모바일 레이아웃 추가 제공
• 매출 증대 및 마케팅을 위해 별도의 기능 구현 (별도의 API 없음)
  • 브라우저 새로고침시 모든 상태 유지
  • 흐름을 고려한 맞춤 큐레이팅 상품 추천 기능
  • 구매 유도를 위한 상품 찜 페이지
• 매출 증대 및 마케팅을 위한 별도의 도구 추가
  • Google Analytics
  • Google Tag Manager