[1팀 강승훈] Chapter2-1. 프레임워크 없이 SPA 만들기

.github/pull_request_template.md

@@ -32,7 +32,11 @@
 
 **상품 정렬 기능**
 
+<<<<<<< HEAD
 - [ ] 상품을 가격순/이름순으로 오름차순/내림차순 정렬을 할 수 있다.
+=======
+- [ ] 상품을 가격순/인기순으로 오름차순/내림차순 정렬을 할 수 있다.
+>>>>>>> caecb93 (feat: 기본 코드 추가)
 - [ ] 드롭다운을 통해 정렬 기준을 선택할 수 있다
 - [ ] 정렬 변경 시 즉시 목록에 반영된다
 
@@ -52,6 +56,10 @@
 **상품 검색**
 
 - [ ] 상품명 기반 검색을 위한 텍스트 입력 필드가 있다
+<<<<<<< HEAD
+=======
+- [ ] 검색 버튼 클릭으로 검색이 수행된다
+>>>>>>> caecb93 (feat: 기본 코드 추가)
 - [ ] Enter 키로 검색이 수행된다
 - [ ] 검색어와 일치하는 상품들만 목록에 표시된다
 

.github/workflows/deploy.yml

@@ -0,0 +1,66 @@
+name: Deploy to GitHub Pages
+
+on: 
+  push: # push trigger
+    branches:
+      - main
+      - feature-*  # Feature 브랜치도 배포
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./dist"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+      - name: Output deployment URL
+        run: |
+          REPO_NAME=$(echo ${{ github.repository }} | cut -d'/' -f2)
+          OWNER=$(echo ${{ github.repository }} | cut -d'/' -f1)
+
+          echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+          echo "🚀 GitHub Pages Deployment Complete"
+          echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+          echo "✅ Status: Success"
+          echo "📄 Live URL: https://${OWNER}.github.io/${REPO_NAME}/"
+          echo "📌 Repository: ${{ github.repository }}"
+          echo "📝 Branch: ${{ github.ref_name }}"
+          echo "🔗 Commit: ${{ github.sha }}"
+          echo "👤 Author: ${{ github.actor }}"
+          echo "⏰ Time: $(date)"
+          echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"

.prettierrc

@@ -2,5 +2,6 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": false,
-  "printWidth": 120
+  "printWidth": 120,
+  "trailingComma": "all"
 }

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "packageManager": "[email protected]",
   "scripts": {
     "dev": "vite",
     "dev:hash": "vite --open ./index.hash.html",
@@ -40,7 +41,6 @@
     "jsdom": "^25.0.1",
     "lint-staged": "^15.2.11",
     "msw": "^2.10.2",
-    "prettier": "^3.4.2",
     "vite": "npm:rolldown-vite@latest",
     "vitest": "latest"
   },

public/mockServiceWorker.js

@@ -100,10 +100,7 @@ addEventListener("fetch", function (event) {
 
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
-  if (
-    event.request.cache === "only-if-cached" &&
-    event.request.mode !== "same-origin"
-  ) {
+  if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
     return;
   }
 
@@ -219,9 +216,7 @@ async function getResponse(event, client, requestId) {
     const acceptHeader = headers.get("accept");
     if (acceptHeader) {
       const values = acceptHeader.split(",").map((value) => value.trim());
-      const filteredValues = values.filter(
-        (value) => value !== "msw/passthrough",
-      );
+      const filteredValues = values.filter((value) => value !== "msw/passthrough");
 
       if (filteredValues.length > 0) {
         headers.set("accept", filteredValues.join(", "));
@@ -291,10 +286,7 @@ function sendToClient(client, message, transferrables = []) {
       resolve(event.data);
     };
 
-    client.postMessage(message, [
-      channel.port2,
-      ...transferrables.filter(Boolean),
-    ]);
+    client.postMessage(message, [channel.port2, ...transferrables.filter(Boolean)]);
   });
 }
 

requirement.md

@@ -20,7 +20,11 @@
 
 ### 상품 정렬 기능
 
+<<<<<<< HEAD
 - 상품을 가격순/이름순으로 오름차순/내림차순 정렬을 할 수 있다.
+=======
+- 상품을 가격순/인기순으로 오름차순/내림차순 정렬을 할 수 있다.
+>>>>>>> caecb93 (feat: 기본 코드 추가)
 - 드롭다운을 통해 정렬 기준을 선택할 수 있다
 - 정렬 변경 시 즉시 목록에 반영된다