[7팀 윤지훈] Chapter2-1. 프레임워크 없이 SPA 만들기

.github/pull_request_template.md

@@ -16,190 +16,191 @@
 
 **상품 목록 로딩**
 
-- [ ] 페이지 접속 시 로딩 상태가 표시된다
-- [ ] 데이터 로드 완료 후 상품 목록이 렌더링된다
-- [ ] 로딩 실패 시 에러 상태가 표시된다
-- [ ] 에러 발생 시 재시도 버튼이 제공된다
+- [x] 페이지 접속 시 로딩 상태가 표시된다
+- [x] 데이터 로드 완료 후 상품 목록이 렌더링된다
+- [x] 로딩 실패 시 에러 상태가 표시된다
+- [x] 에러 발생 시 재시도 버튼이 제공된다
 
 **상품 목록 조회**
 
-- [ ] 각 상품의 기본 정보(이미지, 상품명, 가격)가 카드 형태로 표시된다
+- [x] 각 상품의 기본 정보(이미지, 상품명, 가격)가 카드 형태로 표시된다
 
 **한 페이지에 보여질 상품 수 선택**
 
-- [ ] 드롭다운에서 10, 20, 50, 100개 중 선택할 수 있으며 기본 값은 20개 이다.
-- [ ] 선택 변경 시 즉시 목록에 반영된다
+- [x] 드롭다운에서 10, 20, 50, 100개 중 선택할 수 있으며 기본 값은 20개 이다.
+- [x] 선택 변경 시 즉시 목록에 반영된다
 
 **상품 정렬 기능**
 
-- [ ] 상품을 가격순/이름순으로 오름차순/내림차순 정렬을 할 수 있다.
-- [ ] 드롭다운을 통해 정렬 기준을 선택할 수 있다
-- [ ] 정렬 변경 시 즉시 목록에 반영된다
+- [x] 상품을 가격순/인기순으로 오름차순/내림차순 정렬을 할 수 있다.
+- [x] 드롭다운을 통해 정렬 기준을 선택할 수 있다
+- [x] 정렬 변경 시 즉시 목록에 반영된다
 
 **무한 스크롤 페이지네이션**
 
-- [ ] 페이지 하단 근처 도달 시 다음 페이지 데이터가 자동 로드된다
-- [ ] 스크롤에 따라 계속해서 새로운 상품들이 목록에 추가된다
-- [ ] 새 데이터 로드 중일 때 로딩 인디케이터와 스켈레톤 UI가 표시된다
-- [ ] 홈 페이지에서만 무한 스크롤이 활성화된다
+- [x] 페이지 하단 근처 도달 시 다음 페이지 데이터가 자동 로드된다
+- [x] 스크롤에 따라 계속해서 새로운 상품들이 목록에 추가된다
+- [x] 새 데이터 로드 중일 때 로딩 인디케이터와 스켈레톤 UI가 표시된다
+- [x] 홈 페이지에서만 무한 스크롤이 활성화된다
 
 **상품을 장바구니에 담기**
 
-- [ ] 각 상품에 장바구니 추가 버튼이 있다
-- [ ] 버튼 클릭 시 해당 상품이 장바구니에 추가된다
-- [ ] 추가 완료 시 사용자에게 알림이 표시된다
+- [x] 각 상품에 장바구니 추가 버튼이 있다
+- [x] 버튼 클릭 시 해당 상품이 장바구니에 추가된다
+- [x] 추가 완료 시 사용자에게 알림이 표시된다
 
 **상품 검색**
 
-- [ ] 상품명 기반 검색을 위한 텍스트 입력 필드가 있다
-- [ ] Enter 키로 검색이 수행된다
-- [ ] 검색어와 일치하는 상품들만 목록에 표시된다
+- [x] 상품명 기반 검색을 위한 텍스트 입력 필드가 있다
+- [x] 검색 버튼 클릭으로 검색이 수행된다
+- [x] Enter 키로 검색이 수행된다
+- [x] 검색어와 일치하는 상품들만 목록에 표시된다
 
 **카테고리 선택**
 
-- [ ] 사용 가능한 카테고리들을 선택할 수 있는 UI가 제공된다
-- [ ] 선택된 카테고리에 해당하는 상품들만 표시된다
-- [ ] 전체 상품 보기로 돌아갈 수 있다
-- [ ] 2단계 카테고리 구조를 지원한다 (1depth, 2depth)
+- [x] 사용 가능한 카테고리들을 선택할 수 있는 UI가 제공된다
+- [x] 선택된 카테고리에 해당하는 상품들만 표시된다
+- [x] 전체 상품 보기로 돌아갈 수 있다
+- [x] 2단계 카테고리 구조를 지원한다 (1depth, 2depth)
 
 **카테고리 네비게이션**
 
-- [ ] 현재 선택된 카테고리 경로가 브레드크럼으로 표시된다
-- [ ] 브레드크럼의 각 단계를 클릭하여 상위 카테고리로 이동할 수 있다
-- [ ] "전체" > "1depth 카테고리" > "2depth 카테고리" 형태로 표시된다
+- [x] 현재 선택된 카테고리 경로가 브레드크럼으로 표시된다
+- [x] 브레드크럼의 각 단계를 클릭하여 상위 카테고리로 이동할 수 있다
+- [x] "전체" > "1depth 카테고리" > "2depth 카테고리" 형태로 표시된다
 
 **현재 상품 수 표시**
 
-- [ ] 현재 조건에서 조회된 총 상품 수가 화면에 표시된다
-- [ ] 검색이나 필터 적용 시 상품 수가 실시간으로 업데이트된다
+- [x] 현재 조건에서 조회된 총 상품 수가 화면에 표시된다
+- [x] 검색이나 필터 적용 시 상품 수가 실시간으로 업데이트된다
 
 #### 장바구니
 
 **장바구니 모달**
 
-- [ ] 장바구니 아이콘 클릭 시 모달 형태로 장바구니가 열린다
-- [ ] X 버튼이나 배경 클릭으로 모달을 닫을 수 있다
-- [ ] ESC 키로 모달을 닫을 수 있다
-- [ ] 모달에서 장바구니의 모든 기능을 사용할 수 있다
+- [x] 장바구니 아이콘 클릭 시 모달 형태로 장바구니가 열린다
+- [x] X 버튼이나 배경 클릭으로 모달을 닫을 수 있다
+- [x] ESC 키로 모달을 닫을 수 있다
+- [x] 모달에서 장바구니의 모든 기능을 사용할 수 있다
 
 **장바구니 수량 조절**
 
-- [ ] 각 장바구니 상품의 수량을 증가할 수 있다
-- [ ] 각 장바구니 상품의 수량을 감소할 수 있다
-- [ ] 수량 변경 시 총 금액이 실시간으로 업데이트된다
+- [x] 각 장바구니 상품의 수량을 증가할 수 있다
+- [x] 각 장바구니 상품의 수량을 감소할 수 있다
+- [x] 수량 변경 시 총 금액이 실시간으로 업데이트된다
 
 **장바구니 삭제**
 
-- [ ] 각 상품에 삭제 버튼이 배치되어 있다
-- [ ] 삭제 버튼 클릭 시 해당 상품이 장바구니에서 제거된다
+- [x] 각 상품에 삭제 버튼이 배치되어 있다
+- [x] 삭제 버튼 클릭 시 해당 상품이 장바구니에서 제거된다
 
 **장바구니 선택 삭제**
 
-- [ ] 각 상품에 선택을 위한 체크박스가 제공된다
-- [ ] 선택 삭제 버튼이 있다
-- [ ] 체크된 상품들만 일괄 삭제된다
+- [x] 각 상품에 선택을 위한 체크박스가 제공된다
+- [x] 선택 삭제 버튼이 있다
+- [x] 체크된 상품들만 일괄 삭제된다
 
 **장바구니 전체 선택**
 
-- [ ] 모든 상품을 한 번에 선택할 수 있는 마스터 체크박스가 있다
-- [ ] 전체 선택 시 모든 상품의 체크박스가 선택된다
-- [ ] 전체 해제 시 모든 상품의 체크박스가 해제된다
+- [x] 모든 상품을 한 번에 선택할 수 있는 마스터 체크박스가 있다
+- [x] 전체 선택 시 모든 상품의 체크박스가 선택된다
+- [x] 전체 해제 시 모든 상품의 체크박스가 해제된다
 
 **장바구니 비우기**
 
-- [ ] 장바구니에 있는 모든 상품을 한 번에 삭제할 수 있다
+- [x] 장바구니에 있는 모든 상품을 한 번에 삭제할 수 있다
 
 #### 상품 상세
 
 **상품 클릭시 상세 페이지 이동**
 
-- [ ] 상품 목록에서 상품 이미지나 상품 정보 클릭 시 상세 페이지로 이동한다
-- [ ] URL이 `/product/{productId}` 형태로 변경된다
-- [ ] 상품의 자세한 정보가 전용 페이지에서 표시된다
+- [x] 상품 목록에서 상품 이미지나 상품 정보 클릭 시 상세 페이지로 이동한다
+- [x] URL이 `/product/{productId}` 형태로 변경된다
+- [x] 상품의 자세한 정보가 전용 페이지에서 표시된다
 
 **상품 상세 페이지 기능**
 
-- [ ] 상품 이미지, 설명, 가격 등의 상세 정보가 표시된다
-- [ ] 전체 화면을 활용한 상세 정보 레이아웃이 제공된다
+- [x] 상품 이미지, 설명, 가격 등의 상세 정보가 표시된다
+- [x] 전체 화면을 활용한 상세 정보 레이아웃이 제공된다
 
 **상품 상세 - 장바구니 담기**
 
-- [ ] 상품 상세 페이지에서 해당 상품을 장바구니에 추가할 수 있다
-- [ ] 페이지 내에서 수량을 선택하여 장바구니에 추가할 수 있다
-- [ ] 수량 증가/감소 버튼이 제공된다
+- [x] 상품 상세 페이지에서 해당 상품을 장바구니에 추가할 수 있다
+- [x] 페이지 내에서 수량을 선택하여 장바구니에 추가할 수 있다
+- [x] 수량 증가/감소 버튼이 제공된다
 
 **관련 상품 기능**
 
-- [ ] 상품 상세 페이지에서 관련 상품들이 표시된다
-- [ ] 같은 카테고리(category2)의 다른 상품들이 관련 상품으로 표시된다
-- [ ] 관련 상품 클릭 시 해당 상품의 상세 페이지로 이동한다
-- [ ] 현재 보고 있는 상품은 관련 상품에서 제외된다
+- [x] 상품 상세 페이지에서 관련 상품들이 표시된다
+- [x] 같은 카테고리(category2)의 다른 상품들이 관련 상품으로 표시된다
+- [x] 관련 상품 클릭 시 해당 상품의 상세 페이지로 이동한다
+- [x] 현재 보고 있는 상품은 관련 상품에서 제외된다
 
 **상품 상세 페이지 내 네비게이션**
 
-- [ ] 상품 상세에서 상품 목록으로 돌아가는 버튼이 제공된다
-- [ ] 브레드크럼을 통해 카테고리별 상품 목록으로 이동할 수 있다
-- [ ] SPA 방식으로 페이지 간 이동이 부드럽게 처리된다
+- [x] 상품 상세에서 상품 목록으로 돌아가는 버튼이 제공된다
+- [x] 브레드크럼을 통해 카테고리별 상품 목록으로 이동할 수 있다
+- [x] SPA 방식으로 페이지 간 이동이 부드럽게 처리된다
 
 #### 사용자 피드백 시스템
 
 **토스트 메시지**
 
-- [ ] 장바구니 추가 시 성공 메시지가 토스트로 표시된다
-- [ ] 장바구니 삭제, 선택 삭제, 전체 삭제 시 알림 메시지가 표시된다
-- [ ] 토스트는 3초 후 자동으로 사라진다
-- [ ] 토스트에 닫기 버튼이 제공된다
-- [ ] 토스트 타입별로 다른 스타일이 적용된다 (success, info, error)
+- [x] 장바구니 추가 시 성공 메시지가 토스트로 표시된다
+- [x] 장바구니 삭제, 선택 삭제, 전체 삭제 시 알림 메시지가 표시된다
+- [x] 토스트는 3초 후 자동으로 사라진다
+- [x] 토스트에 닫기 버튼이 제공된다
+- [x] 토스트 타입별로 다른 스타일이 적용된다 (success, info, error)
 
 ### 심화과제
 
 #### SPA 네비게이션 및 URL 관리
 
 **페이지 이동**
 
-- [ ] 어플리케이션 내의 모든 페이지 이동(뒤로가기/앞으로가기를 포함)은 하여 새로고침이 발생하지 않아야 한다.
+- [x] 어플리케이션 내의 모든 페이지 이동(뒤로가기/앞으로가기를 포함)은 하여 새로고침이 발생하지 않아야 한다.
 
 **상품 목록 - URL 쿼리 반영**
 
-- [ ] 검색어가 URL 쿼리 파라미터에 저장된다
-- [ ] 카테고리 선택이 URL 쿼리 파라미터에 저장된다
-- [ ] 상품 옵션이 URL 쿼리 파라미터에 저장된다
-- [ ] 정렬 조건이 URL 쿼리 파라미터에 저장된다
-- [ ] 조건 변경 시 URL이 자동으로 업데이트된다
-- [ ] URL을 통해 현재 검색/필터 상태를 공유할 수 있다
+- [x] 검색어가 URL 쿼리 파라미터에 저장된다
+- [x] 카테고리 선택이 URL 쿼리 파라미터에 저장된다
+- [x] 상품 옵션이 URL 쿼리 파라미터에 저장된다
+- [x] 정렬 조건이 URL 쿼리 파라미터에 저장된다
+- [x] 조건 변경 시 URL이 자동으로 업데이트된다
+- [x] URL을 통해 현재 검색/필터 상태를 공유할 수 있다
 
 **상품 목록 - 새로고침 시 상태 유지**
 
-- [ ] 새로고침 후 URL 쿼리에서 검색어가 복원된다
-- [ ] 새로고침 후 URL 쿼리에서 카테고리가 복원된다
-- [ ] 새로고침 후 URL 쿼리에서 옵션 설정이 복원된다
-- [ ] 새로고침 후 URL 쿼리에서 정렬 조건이 복원된다
-- [ ] 복원된 조건에 맞는 상품 데이터가 다시 로드된다
+- [x] 새로고침 후 URL 쿼리에서 검색어가 복원된다
+- [x] 새로고침 후 URL 쿼리에서 카테고리가 복원된다
+- [x] 새로고침 후 URL 쿼리에서 옵션 설정이 복원된다
+- [x] 새로고침 후 URL 쿼리에서 정렬 조건이 복원된다
+- [x] 복원된 조건에 맞는 상품 데이터가 다시 로드된다
 
 **장바구니 - 새로고침 시 데이터 유지**
 
-- [ ] 장바구니 내용이 브라우저에 저장된다
-- [ ] 새로고침 후에도 이전 장바구니 내용이 유지된다
-- [ ] 장바구니의 선택 상태도 함께 유지된다
+- [x] 장바구니 내용이 브라우저에 저장된다
+- [x] 새로고침 후에도 이전 장바구니 내용이 유지된다
+- [x] 장바구니의 선택 상태도 함께 유지된다
 
 **상품 상세 - URL에 ID 반영**
 
-- [ ] 상품 상세 페이지 이동 시 상품 ID가 URL 경로에 포함된다 (`/product/{productId}`)
-- [ ] URL로 직접 접근 시 해당 상품의 상세 페이지가 자동으로 로드된다
+- [x] 상품 상세 페이지 이동 시 상품 ID가 URL 경로에 포함된다 (`/product/{productId}`)
+- [x] URL로 직접 접근 시 해당 상품의 상세 페이지가 자동으로 로드된다
 
 **상품 상세 - 새로고침시 유지**
 
-- [ ] 새로고침 후에도 URL의 상품 ID를 읽어서 해당 상품 상세 페이지가 유지된다
+- [x] 새로고침 후에도 URL의 상품 ID를 읽어서 해당 상품 상세 페이지가 유지된다
 
 **404 페이지**
 
-- [ ] 존재하지 않는 경로 접근 시 404 에러 페이지가 표시된다
-- [ ] 홈으로 돌아가기 버튼이 제공된다
+- [x] 존재하지 않는 경로 접근 시 404 에러 페이지가 표시된다
+- [x] 홈으로 돌아가기 버튼이 제공된다
 
 #### AI로 한 번 더 구현하기
 
-- [ ] 기존에 구현한 기능을 AI로 다시 구현한다.
-- [ ] 이 과정에서 직접 가공하는 것은 최대한 지양한다.
+- [x] 기존에 구현한 기능을 AI로 다시 구현한다.
+- [x] 이 과정에서 직접 가공하는 것은 최대한 지양한다.
 
 ## 과제 셀프회고
 

.github/workflows/ci.yml

@@ -47,4 +47,4 @@ jobs:
         run: |
           pnpm install
           pnpm exec playwright install
-          pnpm run test:e2e:advanced
+          pnpm run test:e2e:advanced

.github/workflows/deploy.yml

@@ -0,0 +1,51 @@
+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@v4
+        with:
+          version: 9.0.0
+
+      - 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

e2e/E2EHelpers.js

@@ -14,10 +14,12 @@ export class E2EHelpers {
 
   // 상품을 장바구니에 추가
   async addProductToCart(productName) {
+    await this.page.waitForTimeout(500);
     await this.page.click(
       `text=${productName} >> xpath=ancestor::*[contains(@class, 'product-card')] >> .add-to-cart-btn`,
     );
-    await this.page.waitForSelector("text=장바구니에 추가되었습니다", { timeout: 5000 });
+    await this.page.waitForTimeout(500);
+    await this.page.waitForSelector("text=장바구니에 상품이 추가되었습니다", { timeout: 5000 });
   }
 
   // 장바구니 모달 열기