diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index f36c3c4b..9892ee75 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -4,92 +4,225 @@
-
### 기본과제
-#### 1) 라우팅 구현:
-- [ ] History API를 사용하여 SPA 라우터 구현
- - [ ] '/' (홈 페이지)
- - [ ] '/login' (로그인 페이지)
- - [ ] '/profile' (프로필 페이지)
-- [ ] 각 라우트에 해당하는 컴포넌트 렌더링 함수 작성
-- [ ] 네비게이션 이벤트 처리 (링크 클릭 시 페이지 전환)
-- [ ] 주소가 변경되어도 새로고침이 발생하지 않아야 한다.
-
-#### 2) 사용자 관리 기능:
-- [ ] LocalStorage를 사용한 간단한 사용자 데이터 관리
- - [ ] 사용자 정보 저장 (이름, 간단한 소개)
- - [ ] 로그인 상태 관리 (로그인/로그아웃 토글)
-- [ ] 로그인 폼 구현
- - [ ] 사용자 이름 입력 및 검증
- - [ ] 로그인 버튼 클릭 시 LocalStorage에 사용자 정보 저장
-- [ ] 로그아웃 기능 구현
- - [ ] 로그아웃 버튼 클릭 시 LocalStorage에서 사용자 정보 제거
-
-#### 3) 프로필 페이지 구현:
-- [ ] 현재 로그인한 사용자의 정보 표시
- - [ ] 사용자 이름
- - [ ] 간단한 소개
-- [ ] 프로필 수정 기능
- - [ ] 사용자 소개 텍스트 수정 가능
- - [ ] 수정된 정보 LocalStorage에 저장
-
-#### 4) 컴포넌트 기반 구조 설계:
-- [ ] 재사용 가능한 컴포넌트 작성
- - [ ] Header 컴포넌트
- - [ ] Footer 컴포넌트
-- [ ] 페이지별 컴포넌트 작성
- - [ ] HomePage 컴포넌트
- - [ ] ProfilePage 컴포넌트
- - [ ] NotFoundPage 컴포넌트
-
-#### 5) 상태 관리 초기 구현:
-- [ ] 간단한 상태 관리 시스템 설계
- - [ ] 전역 상태 객체 생성 (예: 현재 로그인한 사용자 정보)
-- [ ] 상태 변경 함수 구현
- - [ ] 상태 업데이트 시 관련 컴포넌트 리렌더링
-
-#### 6) 이벤트 처리 및 DOM 조작:
-- [ ] 사용자 입력 처리 (로그인 폼, 프로필 수정 등)
-- [ ] 동적 컨텐츠 렌더링 (사용자 정보 표시, 페이지 전환 등)
-
-#### 7) 라우팅 예외 처리:
-- [ ] 잘못된 라우트 접근 시 404 페이지 표시
+#### 상품목록
+
+**상품 목록 로딩**
+
+- [ ] 페이지 접속 시 로딩 상태가 표시된다
+- [ ] 데이터 로드 완료 후 상품 목록이 렌더링된다
+- [ ] 로딩 실패 시 에러 상태가 표시된다
+- [ ] 에러 발생 시 재시도 버튼이 제공된다
+
+**상품 목록 조회**
+
+- [ ] 각 상품의 기본 정보(이미지, 상품명, 가격)가 카드 형태로 표시된다
+
+**한 페이지에 보여질 상품 수 선택**
+
+- [ ] 드롭다운에서 10, 20, 50, 100개 중 선택할 수 있으며 기본 값은 20개 이다.
+- [ ] 선택 변경 시 즉시 목록에 반영된다
+
+**상품 정렬 기능**
+
+- [ ] 상품을 가격순/이름순으로 오름차순/내림차순 정렬을 할 수 있다.
+- [ ] 드롭다운을 통해 정렬 기준을 선택할 수 있다
+- [ ] 정렬 변경 시 즉시 목록에 반영된다
+
+**무한 스크롤 페이지네이션**
+
+- [ ] 페이지 하단 근처 도달 시 다음 페이지 데이터가 자동 로드된다
+- [ ] 스크롤에 따라 계속해서 새로운 상품들이 목록에 추가된다
+- [ ] 새 데이터 로드 중일 때 로딩 인디케이터와 스켈레톤 UI가 표시된다
+- [ ] 홈 페이지에서만 무한 스크롤이 활성화된다
+
+**상품을 장바구니에 담기**
+
+- [ ] 각 상품에 장바구니 추가 버튼이 있다
+- [ ] 버튼 클릭 시 해당 상품이 장바구니에 추가된다
+- [ ] 추가 완료 시 사용자에게 알림이 표시된다
+
+**상품 검색**
+
+- [ ] 상품명 기반 검색을 위한 텍스트 입력 필드가 있다
+- [ ] Enter 키로 검색이 수행된다
+- [ ] 검색어와 일치하는 상품들만 목록에 표시된다
+
+**카테고리 선택**
+
+- [ ] 사용 가능한 카테고리들을 선택할 수 있는 UI가 제공된다
+- [ ] 선택된 카테고리에 해당하는 상품들만 표시된다
+- [ ] 전체 상품 보기로 돌아갈 수 있다
+- [ ] 2단계 카테고리 구조를 지원한다 (1depth, 2depth)
+
+**카테고리 네비게이션**
+
+- [ ] 현재 선택된 카테고리 경로가 브레드크럼으로 표시된다
+- [ ] 브레드크럼의 각 단계를 클릭하여 상위 카테고리로 이동할 수 있다
+- [ ] "전체" > "1depth 카테고리" > "2depth 카테고리" 형태로 표시된다
+
+**현재 상품 수 표시**
+
+- [ ] 현재 조건에서 조회된 총 상품 수가 화면에 표시된다
+- [ ] 검색이나 필터 적용 시 상품 수가 실시간으로 업데이트된다
+
+#### 장바구니
+
+**장바구니 모달**
+
+- [ ] 장바구니 아이콘 클릭 시 모달 형태로 장바구니가 열린다
+- [ ] X 버튼이나 배경 클릭으로 모달을 닫을 수 있다
+- [ ] ESC 키로 모달을 닫을 수 있다
+- [ ] 모달에서 장바구니의 모든 기능을 사용할 수 있다
+
+**장바구니 수량 조절**
+
+- [ ] 각 장바구니 상품의 수량을 증가할 수 있다
+- [ ] 각 장바구니 상품의 수량을 감소할 수 있다
+- [ ] 수량 변경 시 총 금액이 실시간으로 업데이트된다
+
+**장바구니 삭제**
+
+- [ ] 각 상품에 삭제 버튼이 배치되어 있다
+- [ ] 삭제 버튼 클릭 시 해당 상품이 장바구니에서 제거된다
+
+**장바구니 선택 삭제**
+
+- [ ] 각 상품에 선택을 위한 체크박스가 제공된다
+- [ ] 선택 삭제 버튼이 있다
+- [ ] 체크된 상품들만 일괄 삭제된다
+
+**장바구니 전체 선택**
+
+- [ ] 모든 상품을 한 번에 선택할 수 있는 마스터 체크박스가 있다
+- [ ] 전체 선택 시 모든 상품의 체크박스가 선택된다
+- [ ] 전체 해제 시 모든 상품의 체크박스가 해제된다
+
+**장바구니 비우기**
+
+- [ ] 장바구니에 있는 모든 상품을 한 번에 삭제할 수 있다
+
+#### 상품 상세
+
+**상품 클릭시 상세 페이지 이동**
+
+- [ ] 상품 목록에서 상품 이미지나 상품 정보 클릭 시 상세 페이지로 이동한다
+- [ ] URL이 `/product/{productId}` 형태로 변경된다
+- [ ] 상품의 자세한 정보가 전용 페이지에서 표시된다
+
+**상품 상세 페이지 기능**
+
+- [ ] 상품 이미지, 설명, 가격 등의 상세 정보가 표시된다
+- [ ] 전체 화면을 활용한 상세 정보 레이아웃이 제공된다
+
+**상품 상세 - 장바구니 담기**
+
+- [ ] 상품 상세 페이지에서 해당 상품을 장바구니에 추가할 수 있다
+- [ ] 페이지 내에서 수량을 선택하여 장바구니에 추가할 수 있다
+- [ ] 수량 증가/감소 버튼이 제공된다
+
+**관련 상품 기능**
+
+- [ ] 상품 상세 페이지에서 관련 상품들이 표시된다
+- [ ] 같은 카테고리(category2)의 다른 상품들이 관련 상품으로 표시된다
+- [ ] 관련 상품 클릭 시 해당 상품의 상세 페이지로 이동한다
+- [ ] 현재 보고 있는 상품은 관련 상품에서 제외된다
+
+**상품 상세 페이지 내 네비게이션**
+
+- [ ] 상품 상세에서 상품 목록으로 돌아가는 버튼이 제공된다
+- [ ] 브레드크럼을 통해 카테고리별 상품 목록으로 이동할 수 있다
+- [ ] SPA 방식으로 페이지 간 이동이 부드럽게 처리된다
+
+#### 사용자 피드백 시스템
+
+**토스트 메시지**
+
+- [ ] 장바구니 추가 시 성공 메시지가 토스트로 표시된다
+- [ ] 장바구니 삭제, 선택 삭제, 전체 삭제 시 알림 메시지가 표시된다
+- [ ] 토스트는 3초 후 자동으로 사라진다
+- [ ] 토스트에 닫기 버튼이 제공된다
+- [ ] 토스트 타입별로 다른 스타일이 적용된다 (success, info, error)
### 심화과제
-#### 1) 해시 라우터 구현
-- [ ] location.hash를 이용하여 SPA 라우터 구현
- - [ ] '/#/' (홈 페이지)
- - [ ] '/#/login' (로그인 페이지)
- - [ ] '/#/profile' (프로필 페이지)
-
-#### 2) 라우트 가드 구현
-- [ ] 로그인 상태에 따른 접근 제어
-- [ ] 비로그인 사용자의 특정 페이지 접근 시 로그인 페이지로 리다이렉션
+#### SPA 네비게이션 및 URL 관리
+
+**페이지 이동**
+
+- [ ] 어플리케이션 내의 모든 페이지 이동(뒤로가기/앞으로가기를 포함)은 하여 새로고침이 발생하지 않아야 한다.
+
+**상품 목록 - URL 쿼리 반영**
+
+- [ ] 검색어가 URL 쿼리 파라미터에 저장된다
+- [ ] 카테고리 선택이 URL 쿼리 파라미터에 저장된다
+- [ ] 상품 옵션이 URL 쿼리 파라미터에 저장된다
+- [ ] 정렬 조건이 URL 쿼리 파라미터에 저장된다
+- [ ] 조건 변경 시 URL이 자동으로 업데이트된다
+- [ ] URL을 통해 현재 검색/필터 상태를 공유할 수 있다
+
+**상품 목록 - 새로고침 시 상태 유지**
+
+- [ ] 새로고침 후 URL 쿼리에서 검색어가 복원된다
+- [ ] 새로고침 후 URL 쿼리에서 카테고리가 복원된다
+- [ ] 새로고침 후 URL 쿼리에서 옵션 설정이 복원된다
+- [ ] 새로고침 후 URL 쿼리에서 정렬 조건이 복원된다
+- [ ] 복원된 조건에 맞는 상품 데이터가 다시 로드된다
+
+**장바구니 - 새로고침 시 데이터 유지**
+
+- [ ] 장바구니 내용이 브라우저에 저장된다
+- [ ] 새로고침 후에도 이전 장바구니 내용이 유지된다
+- [ ] 장바구니의 선택 상태도 함께 유지된다
+
+**상품 상세 - URL에 ID 반영**
+
+- [ ] 상품 상세 페이지 이동 시 상품 ID가 URL 경로에 포함된다 (`/product/{productId}`)
+- [ ] URL로 직접 접근 시 해당 상품의 상세 페이지가 자동으로 로드된다
+
+**상품 상세 - 새로고침시 유지**
-#### 3) 이벤트 위임
+- [ ] 새로고침 후에도 URL의 상품 ID를 읽어서 해당 상품 상세 페이지가 유지된다
-- [ ] 이벤트 위임 방식으로 이벤트를 관리하고 있다.
+**404 페이지**
+
+- [ ] 존재하지 않는 경로 접근 시 404 에러 페이지가 표시된다
+- [ ] 홈으로 돌아가기 버튼이 제공된다
+
+#### AI로 한 번 더 구현하기
+
+- [ ] 기존에 구현한 기능을 AI로 다시 구현한다.
+- [ ] 이 과정에서 직접 가공하는 것은 최대한 지양한다.
## 과제 셀프회고
### 기술적 성장
+
-### 코드 품질
+### 자랑하고 싶은 코드
+
+
+
+### 개선이 필요하다고 생각하는 코드
+
### 학습 효과 분석
+
### 과제 피드백
+
+### AI 활용 경험 공유하기
+
+
+
## 리뷰 받고 싶은 내용
+-->
\ No newline at end of file
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 041962e7..6bd23783 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,17 +11,6 @@ on:
jobs:
basic:
- runs-on: ubuntu-latest
- steps:
- - uses: actions/checkout@v3
- with:
- fetch-depth: 0
- ref: ${{ github.event.pull_request.head.sha }}
- - name: test basic
- run: |
- npm install
- npm run test:basic
- advacned:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
@@ -33,13 +22,12 @@ jobs:
version: latest
- uses: actions/setup-node@v4
with:
- node-version: 20
+ node-version: 22
cache: 'pnpm'
- - name: advanced-test
- run: |
+ - run: |
pnpm install
- pnpm run test:advanced
- e2e:
+ pnpm run test:e2e:basic
+ advanced:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
@@ -52,10 +40,10 @@ jobs:
version: latest
- uses: actions/setup-node@v4
with:
- node-version: 20
+ node-version: 22
cache: 'pnpm'
- name: Install dependencies
run: |
pnpm install
npx playwright install --with-deps
- pnpm run test:e2e
+ pnpm run test:e2e:advanced
diff --git a/.gitignore b/.gitignore
index e76379da..7cff355f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,5 @@ dist-ssr
*.sw?
/test-results/
/playwright-report/
+coverage
+.coverage
diff --git a/.prettierrc b/.prettierrc
index c3fef9a3..8df5c5c9 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
{
"tabWidth": 2,
"semi": true,
- "singleQuote": false
+ "singleQuote": false,
+ "printWidth": 80
}
diff --git a/README.md b/README.md
index 6b476381..4e3865c5 100644
--- a/README.md
+++ b/README.md
@@ -1,115 +1,383 @@
-# 상세 기능 요구사항 명세서
+## 과제 체크포인트
-## 1. 상품 목록
+### 배포 링크
-### 1.1 상품 목록 로딩
-- **초기 로딩**: 페이지 접속 시 로딩 상태 표시
-- **로딩 완료**: 데이터 로드 후 상품 목록 렌더링
-- **로딩 실패**: 에러 발생 시 재시도 옵션 제공
+
-### 1.3 한 페이지에 보여질 상품 수 선택 (10, 20, 50, 100)
-- **선택 옵션**: 드롭다운 또는 라디오 버튼으로 10, 20, 50, 100개 중 선택
-- **기본값**: 특정 개수를 기본값으로 설정
-- **적용**: 선택 변경 시 즉시 목록에 반영
+### 기본과제
-### 1.4 무한 스크롤을 이용한 페이지네이션
-- **스크롤 감지**: 페이지 하단 근처 도달 시 다음 페이지 데이터 자동 로드
-- **연속 로딩**: 스크롤에 따라 계속해서 새로운 상품들을 목록에 추가
-- **로딩 표시**: 새 데이터 로드 중일 때 로딩 인디케이터 표시
+#### 상품목록
-### 1.5 상품을 장바구니에 담을 수 있음
-- **장바구니 버튼**: 각 상품에 장바구니 추가 버튼 배치
-- **추가 동작**: 버튼 클릭 시 해당 상품이 장바구니에 추가됨
-- **피드백**: 추가 완료 시 사용자에게 알림
+**상품 목록 로딩**
-### 1.6 상품 검색
-- **검색 입력창**: 상품명 기반 검색을 위한 텍스트 입력 필드
-- **검색 실행**: 입력 후 검색 버튼 클릭 또는 Enter 키로 검색 수행
-- **검색 결과**: 검색어와 일치하는 상품들만 목록에 표시
+- [x] 페이지 접속 시 로딩 상태가 표시된다
+- [x] 데이터 로드 완료 후 상품 목록이 렌더링된다
+- [x] 로딩 실패 시 에러 상태가 표시된다
+- [x] 에러 발생 시 재시도 버튼이 제공된다
-### 1.7 카테고리 선택
-- **카테고리 목록**: 사용 가능한 카테고리들을 선택할 수 있는 UI 제공
-- **필터링**: 선택된 카테고리에 해당하는 상품들만 표시
-- **카테고리 해제**: 전체 상품 보기로 돌아갈 수 있는 옵션
+**상품 목록 조회**
-### 1.8 현재 상품 수
-- **상품 개수 표시**: 현재 조건에서 조회된 총 상품 수를 화면에 표시
-- **실시간 업데이트**: 검색이나 필터 적용 시 상품 수도 함께 업데이트
+- [x] 각 상품의 기본 정보(이미지, 상품명, 가격)가 카드 형태로 표시된다
-## 2. 장바구니
+**한 페이지에 보여질 상품 수 선택**
-### 2.1 장바구니 수량 조절
-- **수량 변경**: 각 장바구니 상품의 수량을 증가/감소할 수 있는 버튼 또는 입력 필드
-- **즉시 반영**: 수량 변경 시 총 금액 등 관련 정보가 실시간으로 업데이트
+- [x] 드롭다운에서 10, 20, 50, 100개 중 선택할 수 있으며 기본 값은 20개 이다.
+- [x] 선택 변경 시 즉시 목록에 반영된다
-### 2.2 장바구니 삭제
-- **개별 삭제**: 각 상품에 대해 장바구니에서 제거하는 기능
-- **삭제 버튼**: 각 상품 항목에 삭제 버튼 배치
+**상품 정렬 기능**
-### 2.3 장바구니 선택 삭제
-- **체크박스**: 각 상품에 선택을 위한 체크박스 제공
-- **선택 삭제 버튼**: 체크된 상품들을 일괄 삭제하는 버튼
-- **선택된 항목만 삭제**: 체크된 상품들만 장바구니에서 제거
+- [x] 상품을 가격순/이름순으로 오름차순/내림차순 정렬을 할 수 있다.
+- [x] 드롭다운을 통해 정렬 기준을 선택할 수 있다
+- [x] 정렬 변경 시 즉시 목록에 반영된다
-### 2.4 장바구니 전체 선택
-- **전체 선택 체크박스**: 모든 상품을 한 번에 선택/해제할 수 있는 마스터 체크박스
-- **일괄 선택**: 전체 선택 시 모든 상품의 체크박스가 선택됨
-- **일괄 해제**: 전체 해제 시 모든 상품의 체크박스가 해제됨
+**무한 스크롤 페이지네이션**
-### 2.5 장바구니 비우기
-- **전체 삭제**: 장바구니에 있는 모든 상품을 한 번에 삭제하는 기능
-- **확인 절차**: 전체 삭제 전 사용자 확인 과정
+- [x] 페이지 하단 근처 도달 시 다음 페이지 데이터가 자동 로드된다
+- [x] 스크롤에 따라 계속해서 새로운 상품들이 목록에 추가된다
+- [x] 새 데이터 로드 중일 때 로딩 인디케이터와 스켈레톤 UI가 표시된다
+- [x] 홈 페이지에서만 무한 스크롤이 활성화된다
-## 3. 상품 상세
+**상품을 장바구니에 담기**
-### 3.1 상품 클릭시 모달로 조회 가능
-- **모달 오픈**: 상품 목록에서 상품을 클릭하면 상세 정보를 보여주는 모달 창 열림
-- **상세 정보**: 모달 내에서 상품의 자세한 정보 표시
+- [x] 각 상품에 장바구니 추가 버튼이 있다
+- [x] 버튼 클릭 시 해당 상품이 장바구니에 추가된다
+- [x] 추가 완료 시 사용자에게 알림이 표시된다
-### 3.2 모달
-- **모달 창**: 상품 상세 정보를 담은 오버레이 형태의 팝업 창
-- **상세 내용**: 상품 이미지, 설명, 가격 등의 상세 정보 표시
+**상품 검색**
-## 4. 편의성
+- [x] 상품명 기반 검색을 위한 텍스트 입력 필드가 있다
+- [x] Enter 키로 검색이 수행된다
+- [x] 검색어와 일치하는 상품들만 목록에 표시된다
-### 4.1 상품 목록 - URL 쿼리 반영
-- **검색 조건 저장**: 검색어, 카테고리 선택, 상품 옵션을 URL 쿼리 파라미터에 저장
-- **URL 업데이트**: 사용자가 조건을 변경할 때마다 URL이 자동으로 업데이트됨
-- **공유 가능**: URL을 통해 현재 검색/필터 상태를 다른 사람과 공유 가능
+**카테고리 선택**
-### 4.2 상품 목록 - 새로고침 시 상태 유지
-- **상태 복원**: 새로고침 후 URL 쿼리를 읽어서 이전의 검색어, 카테고리, 옵션 설정을 복원
-- **데이터 복원**: 복원된 조건에 맞는 상품 데이터를 다시 로드하여 표시
+- [x] 사용 가능한 카테고리들을 선택할 수 있는 UI가 제공된다
+- [x] 선택된 카테고리에 해당하는 상품들만 표시된다
+- [x] 전체 상품 보기로 돌아갈 수 있다
+- [x] 2단계 카테고리 구조를 지원한다 (1depth, 2depth)
-### 4.3 장바구니 - 새로고침 시 데이터 유지
-- **데이터 저장**: 장바구니 내용을 브라우저에 저장 (로컬스토리지 등)
-- **데이터 복원**: 새로고침 후에도 이전 장바구니 내용을 그대로 유지
+**카테고리 네비게이션**
-### 4.4 상품 상세 - URL 쿼리에 ID 반영
-- **상품 ID 저장**: 상품 상세 모달 열릴 때 해당 상품의 ID를 URL 쿼리에 추가
-- **직접 접근**: URL로 직접 접근 시 해당 상품의 상세 모달이 자동으로 열림
+- [x] 현재 선택된 카테고리 경로가 브레드크럼으로 표시된다
+- [x] 브레드크럼의 각 단계를 클릭하여 상위 카테고리로 이동할 수 있다
+- [x] "전체" > "1depth 카테고리" > "2depth 카테고리" 형태로 표시된다
-### 4.5 상품 상세 - 새로고침시 유지
-- **모달 상태 유지**: 새로고침 후에도 URL의 상품 ID를 읽어서 해당 상품 모달을 다시 열어줌
+**현재 상품 수 표시**
-### 4.6 상품 상세 - ESC로 닫기
-- **키보드 제어**: ESC 키를 누르면 열린 상품 상세 모달이 닫힘
+- [x] 현재 조건에서 조회된 총 상품 수가 화면에 표시된다
+- [x] 검색이나 필터 적용 시 상품 수가 실시간으로 업데이트된다
-### 4.7 상품 상세 - 배경 클릭시 닫기
-- **마우스 제어**: 모달 외부 배경 영역을 클릭하면 모달이 닫힘
+#### 장바구니
-### 4.8 상품 상세 - 방향키로 다음 상품 선택
-- **키보드 네비게이션**: 좌우 방향키를 사용해서 이전/다음 상품의 상세 모달로 이동
-- **순차 이동**: 현재 상품 목록 순서에 따라 이전/다음 상품으로 전환
+**장바구니 모달**
-### 4.9 상품 상세 - 다음 페이지 상품 접근 시 페이지네이션 실행
-- **자동 페이지 로드**: 현재 페이지의 마지막 상품에서 다음 상품으로 이동 시, 다음 페이지를 자동으로 로드
-- **연속 탐색**: 페이지 경계를 넘나들며 연속적으로 상품 상세를 탐색 가능
+- [x] 장바구니 아이콘 클릭 시 모달 형태로 장바구니가 열린다
+- [x] X 버튼이나 배경 클릭으로 모달을 닫을 수 있다
+- [x] ESC 키로 모달을 닫을 수 있다
+- [x] 모달에서 장바구니의 모든 기능을 사용할 수 있다
-### 4.10 상품 상세 - 장바구니 담기
-- **모달 내 장바구니**: 상품 상세 모달 안에서도 해당 상품을 장바구니에 추가할 수 있는 기능
-- **수량 선택**: 모달 내에서 수량을 선택하여 장바구니에 추가
+**장바구니 수량 조절**
+
+- [x] 각 장바구니 상품의 수량을 증가할 수 있다
+- [x] 각 장바구니 상품의 수량을 감소할 수 있다
+- [x] 수량 변경 시 총 금액이 실시간으로 업데이트된다
+
+**장바구니 삭제**
+
+- [x] 각 상품에 삭제 버튼이 배치되어 있다
+- [x] 삭제 버튼 클릭 시 해당 상품이 장바구니에서 제거된다
+
+**장바구니 선택 삭제**
+
+- [x] 각 상품에 선택을 위한 체크박스가 제공된다
+- [x] 선택 삭제 버튼이 있다
+- [x] 체크된 상품들만 일괄 삭제된다
+
+**장바구니 전체 선택**
+
+- [x] 모든 상품을 한 번에 선택할 수 있는 마스터 체크박스가 있다
+- [x] 전체 선택 시 모든 상품의 체크박스가 선택된다
+- [x] 전체 해제 시 모든 상품의 체크박스가 해제된다
+
+**장바구니 비우기**
+
+- [x] 장바구니에 있는 모든 상품을 한 번에 삭제할 수 있다
+
+#### 상품 상세
+
+**상품 클릭시 상세 페이지 이동**
+
+- [x] 상품 목록에서 상품 이미지나 상품 정보 클릭 시 상세 페이지로 이동한다
+- [x] URL이 `/product/{productId}` 형태로 변경된다
+- [x] 상품의 자세한 정보가 전용 페이지에서 표시된다
+
+**상품 상세 페이지 기능**
+
+- [x] 상품 이미지, 설명, 가격 등의 상세 정보가 표시된다
+- [x] 전체 화면을 활용한 상세 정보 레이아웃이 제공된다
+
+**상품 상세 - 장바구니 담기**
+
+- [x] 상품 상세 페이지에서 해당 상품을 장바구니에 추가할 수 있다
+- [x] 페이지 내에서 수량을 선택하여 장바구니에 추가할 수 있다
+- [x] 수량 증가/감소 버튼이 제공된다
+
+**관련 상품 기능**
+
+- [x] 상품 상세 페이지에서 관련 상품들이 표시된다
+- [x] 같은 카테고리(category2)의 다른 상품들이 관련 상품으로 표시된다
+- [x] 관련 상품 클릭 시 해당 상품의 상세 페이지로 이동한다
+- [x] 현재 보고 있는 상품은 관련 상품에서 제외된다
+
+**상품 상세 페이지 내 네비게이션**
+
+- [x] 상품 상세에서 상품 목록으로 돌아가는 버튼이 제공된다
+- [x] 브레드크럼을 통해 카테고리별 상품 목록으로 이동할 수 있다
+- [x] SPA 방식으로 페이지 간 이동이 부드럽게 처리된다
+
+#### 사용자 피드백 시스템
+
+**토스트 메시지**
+
+- [x] 장바구니 추가 시 성공 메시지가 토스트로 표시된다
+- [x] 장바구니 삭제, 선택 삭제, 전체 삭제 시 알림 메시지가 표시된다
+- [x] 토스트는 3초 후 자동으로 사라진다
+- [x] 토스트에 닫기 버튼이 제공된다
+- [x] 토스트 타입별로 다른 스타일이 적용된다 (success, info, error)
+
+### 심화과제
+
+#### SPA 네비게이션 및 URL 관리
+
+**페이지 이동**
+
+- [x] 어플리케이션 내의 모든 페이지 이동(뒤로가기/앞으로가기를 포함)은 하여 새로고침이 발생하지 않아야 한다.
+
+**상품 목록 - URL 쿼리 반영**
+
+- [x] 검색어가 URL 쿼리 파라미터에 저장된다
+- [x] 카테고리 선택이 URL 쿼리 파라미터에 저장된다
+- [x] 상품 옵션이 URL 쿼리 파라미터에 저장된다
+- [x] 정렬 조건이 URL 쿼리 파라미터에 저장된다
+- [x] 조건 변경 시 URL이 자동으로 업데이트된다
+- [x] URL을 통해 현재 검색/필터 상태를 공유할 수 있다
+
+**상품 목록 - 새로고침 시 상태 유지**
+
+- [x] 새로고침 후 URL 쿼리에서 검색어가 복원된다
+- [x] 새로고침 후 URL 쿼리에서 카테고리가 복원된다
+- [x] 새로고침 후 URL 쿼리에서 옵션 설정이 복원된다
+- [x] 새로고침 후 URL 쿼리에서 정렬 조건이 복원된다
+- [x] 복원된 조건에 맞는 상품 데이터가 다시 로드된다
+
+**장바구니 - 새로고침 시 데이터 유지**
+
+- [x] 장바구니 내용이 브라우저에 저장된다
+- [x] 새로고침 후에도 이전 장바구니 내용이 유지된다
+- [x] 장바구니의 선택 상태도 함께 유지된다
+
+**상품 상세 - URL에 ID 반영**
+
+- [x] 상품 상세 페이지 이동 시 상품 ID가 URL 경로에 포함된다 (`/product/{productId}`)
+- [x] URL로 직접 접근 시 해당 상품의 상세 페이지가 자동으로 로드된다
+
+**상품 상세 - 새로고침시 유지**
+
+- [x] 새로고침 후에도 URL의 상품 ID를 읽어서 해당 상품 상세 페이지가 유지된다
+
+**404 페이지**
+
+- [x] 존재하지 않는 경로 접근 시 404 에러 페이지가 표시된다
+- [x] 홈으로 돌아가기 버튼이 제공된다
+
+#### AI로 한 번 더 구현하기
+
+- [] 기존에 구현한 기능을 AI로 다시 구현한다.
+- [] 이 과정에서 직접 가공하는 것은 최대한 지양한다.
+
+## 과제 셀프회고
+
+### v1에서 v2로: 두 번의 구현을 통한 깊은 학습
+
+이번 과제는 두 번에 걸쳐 완전히 다른 방식으로 구현했습니다. 첫 번째 시도(v1)에서는 Tagged Template Literal 방식으로, 두 번째(현재 버전)에서는 JSX와 Virtual DOM 방식으로 프레임워크를 만들었습니다.
+
+#### v1: Tagged Template Literal 방식의 시도와 한계
+
+**v1에서 구현했던 방식**
+
+처음에는 Lit이나 hyperHTML에서 영감을 받아 Tagged Template Literal 기반으로 프레임워크를 만들었습니다:
+
+```typescript
+const Counter = component(() => {
+ const $count = useState(0);
+
+ return html`
+
+
Count: ${$count}
+
+
+ `;
+});
+```
+
+**v1에서 마주친 문제들**
+
+1. **타입 안정성 부족**
+
+ - Template literal 내부는 문자열로 취급되어 TypeScript의 타입 체크를 받을 수 없었습니다
+ - props나 children의 타입을 명확하게 추론하기 어려웠습니다
+ - 오타나 잘못된 속성명을 런타임에서야 발견할 수 있었습니다
+
+2. **컴포넌트 합성의 어려움**
+
+ - Children을 받는 컴포넌트를 만들 때 문법이 복잡해졌습니다
+ - `Card({ title: 'Title' }).html`...`` 같은 이상한 문법이 필요했습니다
+ - 필연적으로 표현식을 많이 사용하게 되면서 코드의 depth가 과도하게 깊어졌습니다
+ - 컴포넌트를 중첩하거나 조합할 때 직관적이지 않았습니다
+
+3. **디버깅의 어려움**
+
+ - 모든 것이 문자열로 처리되어 에러 발생 시 정확한 위치를 찾기 힘들었습니다
+ - 상태 변화를 추적하기가 복잡했습니다
+
+4. **성능 최적화의 한계**
+
+ - innerHTML을 사용한 전체 DOM 교체 방식이었습니다
+ - 일부만 변경되어도 전체를 다시 렌더링해야 했습니다
+ - Virtual DOM 없이는 효율적인 업데이트가 불가능했습니다
+
+5. **기존에 사용하던 방식과의 차이**
+
+ - v1에서 구현한 코드를 사용하는 문법은 가장 기본적인 html은 물론 기존에 리액트나 다른 프론트엔드 프레임워크와도 너무 다른 방식이었습니다
+ - 또한 리렌더링 발생 시 컴포넌트 함수가 새로 호출되는 것이 아니라, tagged template만 다시 해석되는 방식이었어서 추후 라우터나 다른 로직을 추가할 때 정상적으로 동작할 지 예측하기가 너무 어려웠습니다
+
+#### v2: JSX와 Virtual DOM으로의 전환
+
+**왜 다시 작성하기로 결심했는가**
+
+v1으로 기본 기능은 동작했지만, 위의 한계점들이 명확했고 특히 동작의 흐름을 예측하기가 어렵다는 게 결정적이었습니다. "지금 되돌리지 않으면 큰일이 날 것 같다"는 직감이 들었고, 아예 처음부터 다시 설계하기로 결심했습니다.
+
+**v2에서 달라진 점**
+
+1. **JSX 도입**: TypeScript의 타입 체크를 온전히 활용할 수 있게 되었습니다
+2. **Virtual DOM 구현**: 효율적인 부분 업데이트가 가능해졌습니다
+3. **React 유사 API**: 익숙한 패턴으로 컴포넌트 작성이 더 직관적이 되었습니다
+
+**두 번 구현하며 얻은 것**
+
+솔직히 처음부터 다시 만드는 게 시간이 더 걸렸지만, 덕분에 "왜 React가 이렇게 설계되었는지"를 몸소 깨달았습니다. 특히 훅들을 구현하면서 왜 훅을 조건부로 호출되는 것을 리액트 측에서 금지하는 지도 알 것 같았습니다. Tagged Template Literal의 간결함도 좋지만, 복잡한 UI를 다루기에는 JSX와 Virtual DOM이 필수적이라는 걸 체감했습니다.
+
+### 기술적 성장
+
+**커스텀 리액트 프레임워크 구현**
+
+두 가지 다른 방식(Template Literal vs JSX)으로 프레임워크를 구현하면서 각 접근법의 장단점을 직접 경험했습니다. useState, useEffect, useMemo 같은 핵심 훅들을 직접 만들어보니, "아, 그래서 React가 이런 규칙을 만들었구나" 하는 순간들이 많았습니다. 현재는 key를 사용한 재조정과 같은 알고리즘은 구현하지 못하고 특정 컴포넌트가 리렌더링 되면 하위 DOM을 통째로 리렌더링 하는 방식으로 구현했는데, 디버깅 과정에서 엄청나게 많은 리렌더링이 발생하는 것을 보면서 왜 React가 key prop을 요구하는지 뼈저리게 느꼈습니다.
+
+**SPA 라우팅 시스템 구현**
+
+History API를 처음 제대로 써봤는데, 생각보다 까다로웠습니다. 특히 뒤로가기/앞으로가기 버튼을 눌렀을 때 상태를 올바르게 복원하는 부분이 어려웠습니다. URL 쿼리 파라미터를 파싱하고 관리하는 시스템도 직접 만들어보니, Next.js나 React Router 같은 라이브러리가 얼마나 많은 엣지 케이스를 처리하고 있는지 실감했습니다.
+
+**E2E 테스트 주도 개발**
+
+Playwright로 E2E 테스트를 처음 작성해봤는데, 테스트 코드가 곧 명세서라는 말이 실감났습니다. 테스트가 "장바구니 아이콘은 `#cart-icon-btn` id를 가져야 한다"고 명시하니까, 마크업을 대충 짤 수가 없더라고요. 덕분에 테스트 가능한 코드를 작성하는 습관이 생겼습니다.
+
+### 자랑하고 싶은 코드
+
+**반응형 상태 관리 시스템**
+
+아주 잘 동작하고 있는 게 맞는 지는 조금 의심스럽지만 리액트와 매우 유사한 문법의 코드를 만들어 냈다는 게 그래도 뿌듯합니다. 특히 멀티패러다임 프로그래밍을 적용하여 함수가 유리한 부분은 함수로, 클래스가 유리한 부분은 클래스로 구현하고자 하였던 부분이 초반에 방향을 잡는데에 도움이 많이 되었던 것 같습니다.
+
+**가독성을 챙길 수 있는 유틸리티들**
+
+토스의 useOverlay나 Sonner의 toast와 같은 문법들을 유사하게 구현해내어 관련된 코드들을 작성할 때 가독성을 챙길 수 있었던 것 같아 좋았습니다.
+
+### 개선이 필요하다고 생각하는 코드
+
+**타입 안정성**
+
+솔직히 급하게 작성하다 보니 `any` 타입을 몇 군데 써버렸습니다. 특히 이벤트 핸들러 부분에서 타입을 제대로 추론하지 못해 `as` 캐스팅을 남발한 게 아쉽습니다. 제네릭을 좀 더 활용했으면 타입 안정성을 높일 수 있었을 텐데, 시간에 쫓겨 타협한 부분이 많습니다.
+
+**에러 바운더리**
+
+현재는 Router 안에서 에러를 처리하고 있어서 컴포넌트에서 에러가 발생하면 앱 전체가 뻗어버립니다. React의 Error Boundary 같은 걸 구현하려다가 시간이 부족해서 못했는데, 실제 서비스라면 필수였을 것 같습니다.
+
+**Context API**
+
+현재 useRouter라던지, 장바구니 데이터 등을 전역 상태를 사용하여 구현하였고, 그 과정에서 전역 상태가 업데이트 되면 앱 전체가 리렌더링 되는 형태인데, Context API를 구현했다면 훨씬 더 효율적인 앱을 구현할 수 있었을 것 같습니다.
+
+**성능 최적화**
+
+Virtual DOM을 구현하긴 했지만, 모든 컴포넌트가 부모가 리렌더링되면 같이 리렌더링됩니다. 또한, 리렌더링 시 업데이트 대상 노드를 찾는 로직이 너무 비효율적이라고 생각합니다. React의 `memo`나 `useMemo` 같은 최적화 기능을 추가하고 싶었는데 시간이 부족했습니다. 특히 상품 목록 페이지에서 필터를 바꿀 때마다 전체가 다시 그려지는 게 눈에 보여서 찝찝합니다.
+
+**직관적이지 않은 렌더링 로직**
+
+처음에 단순히 상태 없이 JSX를 DOM으로 렌더링 하는 것은 너무 쉽게 잘 되어서 조금... 자만했습니다. 그런데 상태나, useEffect 같은 것들이 들어가기 시작하니까 갑자기 복잡도가 확 올라갔고, 중간부터는 스스로도 로직을 제대로 파악하지 못한 채로 개발을 이어나가게 되었습니다. 초반에 설계를 좀 더 탄탄하게 했다면 더 직관적인 렌더링 로직을 구현할 수 있었을 것 같습니다.
+
+**테스트 커버리지**
+
+E2E 테스트만 있고 단위 테스트가 전혀 없습니다. 특히 라우터나 상태 관리 로직 같은 핵심 기능은 단위 테스트가 필요한데, 시간 관계상 건너뛰었습니다. 나중에 리팩토링할 때 테스트가 없으면 불안할 것 같습니다.
+
+### 학습 효과 분석
+
+**가장 큰 배움**
+
+"React 쓰면 되는데 왜 직접 만들어야 하나" 싶었는데, 만들어보니 완전히 다른 세상이 보였습니다. 왜 React 훅에 규칙이 있는지, 왜 key가 필요한지, 왜 불변성을 지켜야 하는지... 이런 것들이 이제야 이해가 됩니다. 특히 상태가 바뀔 때 어떤 컴포넌트만 다시 그려야 하는지 판단하는 게 얼마나 복잡한지 깨달았습니다.
+
+**추가 학습 필요 영역**
+
+아직도 모르는 게 산더미입니다. Context API처럼 props drilling을 피하는 패턴도 구현해보고 싶고, Reducer 패턴으로 복잡한 상태를 관리하는 것도 공부해야 할 것 같습니다.
+
+성능 프로파일링도 제대로 해보고 싶습니다. 지금은 "느린 것 같은데?" 하는 감으로만 판단하는데, 실제로 어디가 병목인지 측정하고 개선하는 경험이 필요합니다.
+
+접근성(a11y)은 완전히 간과했습니다. 키보드만으로 조작할 수 있는지, 스크린 리더 사용자는 어떻게 쓸지 전혀 고려하지 못했는데, 실무에서는 필수라고 들어서 꼭 공부하려고 합니다.
+
+### 과제 피드백
+
+**좋았던 부분**
+
+E2E 테스트 코드를 미리 주신 게 정말 좋았습니다. "이런 기능이 필요하다"는 추상적인 설명보다 실제 테스트 코드를 보니 "아, 이렇게 동작해야 하는구나"가 명확했습니다. 특히 헤맸을 때 테스트 코드를 다시 읽으면 힌트가 있어서 큰 도움이 됐습니다.
+
+위에서 언급한 것과 같이 엉성하긴 하지만 그래도 처음 다뤄보는 JSX를 사용해서 끝까지 과제를 완수해서 뿌듯합니다. 또한 클래스 형태의 컴포넌트를 구현했다면 좀 더 수월했을 것 같은데, 챌린지 한 목표임을 알면서 함수형 컴포넌트를 구현한 것도 좋았습니다.
+
+과제를 통해 프론트엔트 프레임워크들이 어떤 과정을 통해 동작하는 지, 개발되면서 어떤 고민들을 거쳤을 지 더 잘 알게 된 것 같아서 좋았습니다.
+
+**아쉬웠던 부분**
+
+테스트 코드도 작성하지 못 하고 검증하지 못 한 부분들이 너무 많아서 아직 불안정한 코드 상태인 것이 아쉽습니다. 중간까지는 그래도 나름 여유를 가지고 작업하였는데 점점 분량에 쫒기면서 날림 코드가 된 것 같아서 너무 아쉽습니다. 또한 직접 구현하기는 하였지만 뭔가 하나 터지면 땜빵하고 또 터지면 메꾸고 하는 식으로 작업을 진행해서 코드의 흐름이라던지 어떻게 구현했었는지가 머리속에 잘 안 남아서 아쉬웠습니다.
+
+### AI 활용 경험 공유하기
+
+AI를 헤비하게 사용하지는 못했는데, 그래도 한번씩 무한 리렌더링 같은 현상이 발생할 때 같이 디버깅 하면서 도움이 되긴 한 것 같았습니다. 또한 v1 작업을 할 때에는 레퍼런스가 없는 코드라 잘 못 할 줄 알았는데 생각보다 코드를 잘 파악하고 코드를 잘 작성해줘서 의외였습니다.
+
+다만 JSX 버전을 작업할 때에는 자꾸만 React 코드를 사용하려고 하는 경향이 있었어서, 역시 AI는 데이터베이스를 학습한 것이라는 한계가 있다는 것을 다시 한번 느낀 것 같습니다.
+
+## 리뷰 받고 싶은 내용
+
+
+
+- JSX 작업을 시작하면서 리액트의 fiber tree에 대해 조금 찾아봤었는데 잘 이해가 되진 않아서 적용은 못 한 것 같습니다. 특히, fiber tree가 어떤 문제를 메인으로 해결하는 것인지를 잘 이해하지 못 했습니다. 혹시 알고 계신 내용이 있으신가요??
+- JSX를 개발하는 과정에서 코드의 흐름을 파악하는 게 생각보다 어렵다는 느낌을 받았습니다. JSX -> 함수로 변환해주는 과정이 추상화 되어 있어서 그런 것일까 생각도 해보았는데요, 혹시 비슷한 어려움을 느낀 적이 있으신 지, 어떤 방법으로 도움을 얻으셨는 지 궁금합니다.
\ No newline at end of file
diff --git a/cart-modal.html b/cart-modal.html
new file mode 100644
index 00000000..66455103
--- /dev/null
+++ b/cart-modal.html
@@ -0,0 +1,320 @@
+
+
+
+
+
+
+ 상품 쇼핑몰
+
+
+
+
+
+
+