hanghae-plus · jun17183 · Jul 26, 2025 · Jul 28, 2025 · Jul 29, 2025 · Jul 29, 2025
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,32 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
diff --git a/README.md b/README.md
@@ -1,5 +1,25 @@
 # Chapter 2-1. 클린코드와 리팩토링
 
+## 🚀 Live Demo
+
+- **Basic Version**: [https://jun17183.github.io/front_6th_chapter2-1/index.basic.html](https://jun17183.github.io/front_6th_chapter2-1/index.basic.html)
+- **Advanced Version**: [https://jun17183.github.io/front_6th_chapter2-1/index.advanced.html](https://jun17183.github.io/front_6th_chapter2-1/index.advanced.html)
+
+## 📋 프로젝트 개요
+
+이 프로젝트는 더티코드를 클린코드로 개선하고, React + TypeScript로 고도화하는 리팩토링 과제입니다.
+
+### 🏗️ 프로젝트 구조
+
+```
+├── src/
+│   ├── basic/          # 바닐라 JavaScript 버전 (클린코드로 리팩토링)
+│   └── advanced/       # React + TypeScript 버전 (고도화 리팩토링)
+├── docs/               # 프로젝트 문서
+├── index.basic.html    # Basic 버전 실행 파일
+└── index.advanced.html # Advanced 버전 실행 파일
+```
+
 ## 기본과제: 더티코드 개선
 
 이번 과제는 더티코드를 클린코드의 형태로 개선을 하는 과제입니다. 주어진 테스트를 통과하면서 원래 기능과 동일한 동작을 하는 코드를 만들어주세요. basic과제는 제공되는 더티코드를 클린코드와 리팩토링 원칙에 입각해서 더 나은 코드로 만들어보세요. 주어진 테스트를 참고삼아 좋은 이름, 좋은 모양, 좋은 구조를 가지는 코드로 만들어 보세요.
@@ -37,6 +57,49 @@
 - Typescript가 어떻게 유지보수하기 좋은 코드로 만들어주는지 이해하기
 - 내가 추구하는 좋은 코드와 React가 추구하는 코드와 어떻게 다른지 이해하기
 
+## 🛠️ 개발 환경 설정
+
+### 설치 및 실행
+
+```bash
+# 의존성 설치
+npm install
+
+# 개발 서버 실행 (Basic 버전)
+npm run start:basic
+
+# 개발 서버 실행 (Advanced 버전)
+npm run start:advanced
+
+# 테스트 실행
+npm test
+
+# 빌드
+npm run build
+```
+
+### 배포
+
+```bash
+# GitHub Pages에 배포
+npm run deploy
+```
+
+## 📚 주요 개선사항
+
+### Basic 버전 (바닐라 JavaScript)
+- ✅ 함수 분리 및 단일 책임 원칙 적용
+- ✅ 상수 분리 및 하드코딩 제거
+- ✅ HTML 템플릿에 `/*html*/` 주석 추가
+- ✅ 내부 함수와 외부 함수 분리
+- ✅ JSDoc 주석 추가
+
+### Advanced 버전 (React + TypeScript)
+- ✅ 컴포넌트 분리 및 재사용성 향상
+- ✅ TypeScript 타입 안정성 확보
+- ✅ 커스텀 훅을 통한 로직 분리
+- ✅ 유틸리티 함수 모듈화
+- ✅ 테스트 커버리지 유지
 
 ## 요청사항
 

diff --git a/index.advanced.html b/index.advanced.html
@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Hanghae Shopping Cart</title>
-  <!-- Note: Tailwind CDN is for development only. For production, use PostCSS or Tailwind CLI -->
+  <title>Hanghae Shopping Cart - Advanced (React + TypeScript)</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 = {
@@ -24,9 +24,9 @@
   </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 id="app">
+  <!-- React App will be mounted here -->
 </div>
-<script type="module" src="./src/advanced/main.advanced.js"></script>
+<script type="module" src="./src/advanced/main.advanced.tsx"></script>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -4,29 +4,70 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Hanghae Shopping Cart</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%)',}
-      }
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      margin: 0;
+      padding: 20px;
+      background: #f5f5f5;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
     }
-  }
-  </script>
+    .container {
+      background: white;
+      padding: 40px;
+      border-radius: 12px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      text-align: center;
+      max-width: 500px;
+    }
+    h1 {
+      color: #333;
+      margin-bottom: 20px;
+    }
+    .links {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      margin-top: 30px;
+    }
+    a {
+      display: inline-block;
+      padding: 12px 24px;
+      background: #007bff;
+      color: white;
+      text-decoration: none;
+      border-radius: 6px;
+      transition: background 0.3s;
+    }
+    a:hover {
+      background: #0056b3;
+    }
+    .description {
+      color: #666;
+      line-height: 1.6;
+      margin-bottom: 20px;
+    }
+  </style>
 </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/main.original.js"></script>
+<body>
+  <div class="container">
+    <h1>🛒 Hanghae Shopping Cart</h1>
+    <p class="description">
+      클린코드와 리팩토링을 연습하는 쇼핑카트 프로젝트입니다.<br>
+      아래 버전 중 하나를 선택하여 사용해보세요. 
+    </p>
+
+    <div class="links">
+      <a href="./index.basic.html">📱 Basic Version (Vanilla JavaScript)</a>
+      <a href="./index.advanced.html">⚛️ Advanced Version (React + TypeScript)</a>
+    </div>
+
+    <p style="margin-top: 30px; color: #999; font-size: 14px;">
+      Chapter 2-1. 클린코드와 리팩토링
+    </p>
+  </div>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "homepage": "https://jun17183.github.io/front_6th_chapter2-1",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -12,14 +13,26 @@
     "test": "vitest",
     "test:basic": "vitest basic.test.js",
     "test:advanced": "vitest advanced.test.js",
-    "test:ui": "vitest --ui"
+    "test:ui": "vitest --ui",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist --repo https://github.com/jun17183/front_6th_chapter2-1.git"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@vitejs/plugin-react": "^4.7.0",
     "@vitest/ui": "^3.2.4",
+    "gh-pages": "^6.1.1",
     "jsdom": "^26.1.0",
     "vite": "^7.0.5",
     "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "^5.8.3"
   }
 }