/react-shopping-cart

⚛️ React 장바구니 애플리케이션 🛒

Primary LanguageTypeScript

Level2 - 장바구니

React & Recoil 데스크탑 장바구니 애플리케이션

결과물: 장바구니🛒

🚀 학습 목표

다수의 컴포넌트를 페이지로 구성하고 복잡해진 상태를 관리합니다.

✔️ 데스크탑 타겟의 웹 앱을 구현하며 구매로 이어지는 것에 끊김이 없고 재방문을 고려한 UI/UX에 대해 고민해봅니다.
✔️ 상태 관리를 위해 Recoil을 활용합니다. ✔️ Router를 활용해 여러 페이지 전환을 고려합니다.
✔️ 배민상회 서비스 참고

📝 1단계 기능 목록

  1. 상품 목록 페이지
    • 상품 목록 페이지에 필요한 UI 마크업
    • header의 숫자 표시를 통해 장바구니에 담긴 상품 종류의 갯수 표시
  2. 전역 상태 관리
    • recoil을 사용하여 전역 상태 관리
  3. mock 데이터 활용
    • Mock 데이터를 활용하여 상품 데이터를 처리한다. 협업 미션을 고려하여 장바구니 API 예상 명세 참고
  4. 테스트 도구 선정
    • 적합한 테스트 도구를 선택하여 사용하고, 중요한 테스트 케이스를 정의하여 테스트 진행

💻 페어프로그래밍
타미 클린

🌲 파일 구조

📦src
 ┣ 📂api
 ┃ ┗ 📜index.ts
 ┣ 📂components
 ┃ ┣ 📂@common
 ┃ ┃ ┣ 📂ContentLayout
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂Svg
 ┃ ┃ ┃ ┣ 📜SvgSprite.tsx
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┗ 📂Toast
 ┃ ┃ ┃ ┣ 📂hooks
 ┃ ┃ ┃ ┃ ┗ 📜useToast.tsx
 ┃ ┃ ┃ ┣ 📜Toast.stories.tsx
 ┃ ┃ ┃ ┣ 📜Toast.styles.ts
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂Counter
 ┃ ┃ ┣ 📜Counter.stories.tsx
 ┃ ┃ ┣ 📜Counter.styles.ts
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂Header
 ┃ ┃ ┣ 📜Header.styles.ts
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┗ 📂ProductItem
 ┃ ┃ ┣ 📜ProductItem.stories.tsx
 ┃ ┃ ┣ 📜ProductItem.styles.ts
 ┃ ┃ ┗ 📜index.tsx
 ┣ 📂hooks
 ┃ ┣ 📜useFetch.ts
 ┃ ┗ 📜useProductSelect.ts
 ┣ 📂pages
 ┃ ┗ 📜ProductList.tsx
 ┣ 📂recoil
 ┃ ┗ 📜cartList.ts
 ┣ 📂router
 ┃ ┗ 📜index.tsx
 ┣ 📂styles
 ┃ ┣ 📜GlobalStyle.ts
 ┃ ┣ 📜styles.d.ts
 ┃ ┗ 📜theme.ts
 ┣ 📂types
 ┃ ┗ 📜index.ts
 ┣ 📜App.tsx
 ┗ 📜index.tsx