WESTORCYCLE
1. 🏍️ 서비스 소개
Westorcycle은 사용자 친화적인 인터페이스로 구매가 쉽고 편리한 오토바이 전문 커머스 웹사이트입니다.
배포 URL : https://westorcycle.shop/
Gitbook URL : https://west-s-organization.gitbook.io/westorcycle-commerce-website/
⭐️ 프로젝트의 자세한 내용은 Gitbook 참고 부탁드립니다 ⭐️
✋ Westorcycle 테스트 계정
ID : west@test.com (판매자)
PW : Rhkdans97!
ID : east2@test.com (구매자)
PW : Rhkdans97!2. 📜 요구사항 명세
| 1주차 | 2주차 | 3주차 | 4주차 |
|---|---|---|---|
| 페이지 라우팅 설계 | 상품 CRUD | 상품 구매 | SEO 개선 |
| 로그인 / 회원가입 | 장바구니 CRUD | 구매 내역 페이지 | 번들 사이즈 줄이기 |
| 판매자 페이지 - 상품 CRUD | 이미지 최적화 | 상품 구매 취소 | 렌더링 최적화 |
| 소셜 로그인 구현 | 주문정보 확인 및 주문 상태 변경 | 테스트 코드 | |
| Lazy Loading | Compound component |
3. 🛠️ 서비스 아키텍처
4. 🔧 기술적 의사결정
5. ✨ 주요 기능
- 회원가입 / 로그인/ 프로필 편집
- 상품 CRUD
- 장바구니 CRUD
- 상품 구매
- E2E 테스트
6. 💥 트러블 슈팅
- 장바구니 선택 상품 수량 증감
- 비동기 함수 반복문
- Authentication 최신화
7. ♻️ 리팩토링 / 기능 추가
- 대규모 데이터셋 렌더링 최적화 (예정)
- React-Window 라이브러리 가상 리스트 구현
- E2E 테스트 - 유저 플로우 및 서비스 로직 테스트 (완료)
- Cypress 라이브러리 E2E 테스트 적용
- 커스텀 훅 재사용
8. 📦 파일 구조
📦 WESTORCYCLE
├─ public
│ ├─ mainTest.webp
│ └─ sitemap.xml
├─ src
│ ├─ main.tsx
│ ├─ App.css
│ ├─ App.tsx
│ ├─ firebase.ts
│ ├─ vite-env.d.ts
│ ├─ index.css
│ ├─ assets
│ ├─ contexts
│ ├─ components
│ │ ├─ button
│ │ ├─ card
│ │ ├─ container
│ │ ├─ form
│ │ ├─ header
│ │ ├─ modal
│ │ ├─ nav
│ │ └─ ui
│ ├─ hook
│ │ ├─ cart
│ │ ├─ image
│ │ ├─ order
│ │ ├─ product
│ │ ├─ useChangeInput.tsx
│ │ └─ user
│ ├─ lib
│ ├─ models
│ ├─ page
│ │ ├─ Home.tsx
│ │ ├─ Login.tsx
│ │ ├─ Seller
│ │ ├─ SignUp.tsx
│ │ ├─ consumer
│ │ ├─ product
│ │ └─ user
│ ├─ query
│ │ ├─ cart
│ │ ├─ order
│ │ ├─ product
│ │ └─ user
│ ├─ routes
│ └─ utils
├─ index.html
├─ robots.txt
├─ sitemap.js
└─ README.md