[1팀 신희원] Chapter 2-1. 클린코드와 리팩토링

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm exec lint-staged

.prettierrc

@@ -0,0 +1,11 @@
+{
+    "semi": true,
+    "trailingComma": "all",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "printWidth": 100,
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "useTabs": false,
+    "endOfLine": "lf"
+}

docs/01-PRD.md

@@ -3,73 +3,86 @@
 ## 1. 프로젝트 개요
 
 ### 1.1 제품명
+
 🛒 Hanghae Online Store - Shopping Cart
 
 ### 1.2 목적
+
 개발자를 위한 전문 용품 온라인 쇼핑몰의 장바구니 기능 구현
 
 ### 1.3 핵심 가치
+
 - 실시간 할인 정책 적용으로 최적의 구매 혜택 제공
 - 포인트 적립 시스템을 통한 고객 로열티 강화
 - 직관적인 UI/UX로 편리한 쇼핑 경험 제공
 
 ## 2. 상품 정보
 
 ### 2.1 상품 목록
-| ID | 상품명 | 기본 가격 | 초기 재고 | 개별 할인율 |
-|---|---|---|---|---|
-| p1 | 버그 없애는 키보드 | 10,000원 | 50개 | 10개 이상 시 10% |
-| p2 | 생산성 폭발 마우스 | 20,000원 | 30개 | 10개 이상 시 15% |
-| p3 | 거북목 탈출 모니터암 | 30,000원 | 20개 | 10개 이상 시 20% |
-| p4 | 에러 방지 노트북 파우치 | 15,000원 | 0개 (품절) | 10개 이상 시 5% |
-| p5 | 코딩할 때 듣는 Lo-Fi 스피커 | 25,000원 | 10개 | 10개 이상 시 25% |
+
+| ID  | 상품명                      | 기본 가격 | 초기 재고  | 개별 할인율      |
+| --- | --------------------------- | --------- | ---------- | ---------------- |
+| p1  | 버그 없애는 키보드          | 10,000원  | 50개       | 10개 이상 시 10% |
+| p2  | 생산성 폭발 마우스          | 20,000원  | 30개       | 10개 이상 시 15% |
+| p3  | 거북목 탈출 모니터암        | 30,000원  | 20개       | 10개 이상 시 20% |
+| p4  | 에러 방지 노트북 파우치     | 15,000원  | 0개 (품절) | 10개 이상 시 5%  |
+| p5  | 코딩할 때 듣는 Lo-Fi 스피커 | 25,000원  | 10개       | 10개 이상 시 25% |
 
 ### 2.2 재고 관리
+
 - 재고가 5개 미만인 상품은 "재고 부족" 표시
 - 재고가 0개인 상품은 "품절" 표시 및 선택 불가
 - 전체 재고가 50개 미만일 경우 상품 선택 드롭다운 테두리 색상 변경 (orange)
 
 ## 3. 할인 정책
 
 ### 3.1 개별 상품 할인
+
 - 각 상품별로 10개 이상 구매 시 지정된 할인율 적용
 - 할인된 상품은 굵은 글씨로 표시
 
 ### 3.2 전체 수량 할인
+
 - 장바구니 내 전체 상품 수량이 30개 이상일 경우 25% 할인
 - 개별 상품 할인과 중복 적용 불가 (더 큰 할인율 적용)
 
 ### 3.3 특별 할인
 
 #### 3.3.1 화요일 할인
+
 - 매주 화요일 10% 추가 할인
 - 다른 할인과 중복 적용 가능
 - 화요일에만 특별 할인 배너 표시
 
 #### 3.3.2 번개세일 (⚡)
+
 - 무작위 시간(0~10초 사이)에 시작
 - 30초마다 무작위 상품 선택하여 20% 할인
 - 재고가 있는 상품에만 적용
 - 알림창으로 세일 시작 공지
 - 선택 드롭다운에 ⚡ 아이콘 표시
 
 #### 3.3.3 추천할인 (💝)
+
 - 무작위 시간(0~20초 사이)에 시작
 - 60초마다 마지막 선택한 상품과 다른 상품 추천
 - 5% 추가 할인 제공
 - 알림창으로 추천 상품 공지
 - 선택 드롭다운에 💝 아이콘 표시
 
 #### 3.3.4 할인 중복
+
 - ⚡번개세일 + 💝추천할인 = 25% SUPER SALE
 - 화요일 할인은 모든 할인과 중복 가능
 
 ## 4. 포인트 적립 시스템
 
 ### 4.1 기본 적립
+
 - 최종 결제 금액의 0.1% (1,000원당 1포인트)
 
 ### 4.2 추가 적립
+
 - 화요일 구매: 기본 포인트 2배
 - 키보드+마우스 세트 구매: +50p
 - 키보드+마우스+모니터암 풀세트 구매: +100p
@@ -79,18 +92,21 @@
   - 30개 이상: +100p
 
 ### 4.3 포인트 표시
+
 - 적립 예정 포인트 실시간 계산 및 표시
 - 포인트 적립 내역 상세 표시
 
 ## 5. UI/UX 요구사항
 
 ### 5.1 레이아웃
+
 - 반응형 디자인 (모바일/데스크톱)
 - 좌측: 상품 선택 및 장바구니
 - 우측: 주문 요약 정보
 - 우측 상단: 도움말 버튼 (고정 위치)
 
 ### 5.2 상품 선택 영역
+
 - 드롭다운 메뉴로 상품 선택
 - 할인 중인 상품 강조 표시:
   - ⚡번개세일: 빨간색 굵은 글씨
@@ -100,6 +116,7 @@
 - 재고 현황 실시간 표시
 
 ### 5.3 장바구니 영역
+
 - 상품별 카드 형식 표시
 - 각 상품 정보:
   - 상품 이미지 (그라디언트 배경)
@@ -112,6 +129,7 @@
 - 마지막 상품은 하단 테두리 없음
 
 ### 5.4 주문 요약 영역
+
 - 검은색 배경, 흰색 텍스트
 - 표시 항목:
   - 소계 (Subtotal)
@@ -124,54 +142,64 @@
 - 하단 안내 문구
 
 ### 5.5 도움말 모달
+
 - 우측 상단 고정 버튼
 - 클릭 시 슬라이드 형식으로 표시
 - 할인 정책 및 포인트 적립 안내
 - 배경 클릭 또는 X 버튼으로 닫기
 
 ### 5.6 애니메이션 및 전환 효과
+
 - 버튼 호버 효과
 - 모달 슬라이드 애니메이션
 - 수량 변경 시 부드러운 전환
 
 ## 6. 기능 요구사항
 
 ### 6.1 상품 추가
+
 - 선택한 상품을 장바구니에 추가
 - 이미 있는 상품은 수량 증가
 - 재고 초과 시 알림 표시
 - 품절 상품은 선택 불가
 
 ### 6.2 수량 변경
+
 - +/- 버튼으로 수량 조절
 - 재고 한도 내에서만 증가 가능
 - 수량 0이 되면 자동 제거
 
 ### 6.3 상품 제거
+
 - Remove 버튼 클릭 시 즉시 제거
 - 제거된 수량만큼 재고 복구
 
 ### 6.4 실시간 계산
+
 - 수량 변경 시 즉시 재계산
 - 할인 정책 자동 적용
 - 포인트 실시간 업데이트
 
 ### 6.5 상태 관리
+
 - 장바구니 상품 수 표시 (헤더)
 - 재고 부족/품절 상태 표시
 - 마지막 선택 상품 기억 (추천할인용)
 
 ## 7. 기술적 요구사항
 
 ### 7.1 성능
+
 - 모든 계산은 클라이언트 사이드에서 처리
 - 실시간 업데이트 시 깜빡임 없이 부드럽게 전환
 
 ### 7.2 브라우저 호환성
+
 - 모던 브라우저 지원 (Chrome, Firefox, Safari, Edge)
 - ES6+ 문법 사용 가능
 
 ### 7.3 스타일링
+
 - Tailwind CSS 사용 (CDN)
 - 커스텀 유틸리티 클래스:
   - tracking-extra-wide
@@ -180,21 +208,25 @@
   - bg-gradient-black
 
 ### 7.4 접근성
+
 - 시맨틱 HTML 사용
 - 버튼에 적절한 aria-label
 - 키보드 네비게이션 지원
 
 ## 8. 예외 처리
 
 ### 8.1 재고 부족
+
 - 장바구니 추가/수량 증가 시 재고 확인
 - 부족 시 "재고가 부족합니다." 알림
 
 ### 8.2 빈 장바구니
+
 - 장바구니가 비어있을 때 포인트 섹션 숨김
 - 주문 요약에 기본값 표시
 
 ### 8.3 동시성 이슈
+
 - 번개세일과 추천할인이 같은 상품에 적용될 수 있음
 - 할인율은 누적되어 최대 25% 적용
 
@@ -212,4 +244,4 @@
 - 장바구니 저장 기능
 - 결제 시스템 연동
 - 상품 리뷰 및 평점
-- 위시리스트 기능
+- 위시리스트 기능