hanghae-plus · hyunzsu · Jul 28, 2025 · Jul 28, 2025 · Jul 28, 2025 · Jul 28, 2025
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -30,7 +30,6 @@
 - [ ] 변경한 구조와 코드가 기존의 모든 기능은 그대로 유지했는가?
 - [ ] (핵심!) 변경한 구조와 코드를 새로운 한번에 새로만들지 않고 점진적으로 개선했는가?
 
-
 ## 과제 셀프회고
 
 <!-- 과제에 대한 회고를 작성해주세요 -->

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/404.html b/404.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hanghae Shopping Cart - Advanced</title>
+    <!-- Note: Tailwind CDN is for development only. For production, use PostCSS or Tailwind CLI -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: [
+                '-apple-system',
+                'BlinkMacSystemFont',
+                'Helvetica Neue',
+                'Arial',
+                'sans-serif',
+              ],
+            },
+            letterSpacing: {
+              'extra-wide': '0.3em',
+              'super-wide': '0.25em',
+            },
+            fontSize: { '2xs': '0.625rem' },
+            maxHeight: { 800: '800px' },
+            backgroundImage: {
+              'gradient-black': 'linear-gradient(135deg, #000 0%, #333 100%)',
+            },
+          },
+        },
+      };
+    </script>
+  </head>
+  <body
+    class="bg-gray-50 text-black antialiased overflow-hidden h-screen text-sm"
+  >
+    <div
+      id="app"
+      class="max-w-screen-xl h-screen max-h-800 mx-auto p-8 flex flex-col"
+    >
+      <!-- Content will be dynamically generated here -->
+    </div>
+    <script type="module" src="./src/advanced/main.tsx"></script>
+  </body>
+</html>
diff --git a/README.md b/README.md
@@ -5,6 +5,7 @@
 이번 과제는 더티코드를 클린코드의 형태로 개선을 하는 과제입니다. 주어진 테스트를 통과하면서 원래 기능과 동일한 동작을 하는 코드를 만들어주세요. basic과제는 제공되는 더티코드를 클린코드와 리팩토링 원칙에 입각해서 더 나은 코드로 만들어보세요. 주어진 테스트를 참고삼아 좋은 이름, 좋은 모양, 좋은 구조를 가지는 코드로 만들어 보세요.
 
 [목표]
+
 - /basic 디렉토리에 있는 더티코드를 클린코드로 리팩토링
 - 바닐라스크립트를 사용해서 작성된 코드를 클린코드와 리팩토링 원칙에 입각해서 더 나은 코드로 개선
 - 추후 React + Typescript로 고도화 리팩토링을 할 예정이니 이를 꼭 염두에 두고 React로 바꿔도 코드가 많이 변경되지 않도록 리팩토링
@@ -17,27 +18,28 @@
 - = 어플리케이션 요구사항을 모두 만족할 것 (/docs/PRD.md 참고)
 
 [과제의 취지]
+
 - 나쁜 코드를 몸으로 충분히 느껴보고, 왜 나쁜 코드를 쓰는 것이 나쁜지 이해하기
 - 나쁘지 않은 코드만으로 충분하지 않다는 것을 이해하기
 - 더 좋은 코드란 무엇인지를 고민하며 나의 코드 취향과 코드 감각 이해하기
 
-
 ## 심확과제: 유지보수 하기 좋은 코드만들기
 
 심화과제는 **기본과제에서 작성한 코드를 기술고도화를 하는 것입니다.** 바닐라 자바스크립트로 되어 있는 코드를 유지보수하기에 유리한 기술스택(React + Typescript)으로 고도화 리팩토링을 진행해주세요.
 우리의 목표는 앞으로 유지보수를 더 잘할 수 있도록 하기 위함입니다. 최소 React와 Typescript를 이용한 코드로 개선해주세요. 그 밖의 기술선택과 폴더/파일 구조, 테스트 코드등은 자유입니다.
 
 [목표]
+
 - /advanced 디렉토리에 있는 기본과제 코드를 React + Typescript로 고도화 리팩토링
 - /basic 기본과제에서 작성한 코드를 복사해서 /advanced 디렉토리에서 고도화 리팩토링 진행
 - 기본과제에서 작성한 코드를 React + Typescript로 고도화 리팩토링
 
 [과제의 취지]
+
 - React가 어떻게 유지보수하기 좋은 코드로 만들어주는지 이해하기
 - Typescript가 어떻게 유지보수하기 좋은 코드로 만들어주는지 이해하기
 - 내가 추구하는 좋은 코드와 React가 추구하는 코드와 어떻게 다른지 이해하기
 
-
 ## 요청사항
 
 과제를 진행할 떄 AI를 쓰는 것은 자유입니다. 오히려 AI를 활용하는 연습을 해야하는게 시대의 흐름이겠지요.

diff --git a/docs/01-PRD.md b/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 @@
 - 장바구니 저장 기능
 - 결제 시스템 연동
 - 상품 리뷰 및 평점
-- 위시리스트 기능
+- 위시리스트 기능