# InsuWiki 카드 상세 — 좌우 네비게이션 + 브라우저 뒤로가기 정상화

## 작업 레벨: Lv.2

## 프로젝트
- InsuWiki: `/home/jay/projects/insuwiki/nextapp` (Next.js App Router)

## 배경
1. wiki/my 탭 카드 상세 조회 시 좌우 네비게이션 부재 → 다음 카드 보려면 뒤로가기 → 카드 클릭 반복
2. 브라우저 뒤로가기 시 탭 정보가 URL에 없어서 첫 화면(wiki 탭 기본)으로 리셋됨

## 수정 사항

### 1. 좌우 < > 네비게이션 추가

**대상 파일**: `src/app/docs/[id]/DocumentClient.tsx` (또는 상세 페이지 컴포넌트)

**PC (md 이상):**
- 화면 좌우 가장자리 세로 중앙 고정 (`position: fixed; top: 50%; transform: translateY(-50%)`)
- 56~64px 원형 버튼
- 반투명 배경 + glassmorphism:
  ```css
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-radius: 50%;
  ```
- 화살표 아이콘 (lucide-react ChevronLeft/ChevronRight) 24~28px
- hover: opacity 0.7 → 0.95, scale 1.05
- 첫/마지막 카드: opacity 0.3, pointer-events none, disabled
- z-index: 콘텐츠 위에 떠 있되 헤더보다 낮게

**모바일 (md 미만):**
- 화살표 버튼 숨김
- 스와이프 제스처: 좌→우 = prev, 우→좌 = next
- 라이브러리: `react-swipeable` 사용 (npm install)
- 스와이프 임계값: 50px 이상 + 속도 0.3 이상

**카드 리스트 확보 방법:**
- 목록 페이지에서 사용한 filteredDocuments 정렬 순서를 sessionStorage에 저장
- 저장 키: `insuwiki_card_list_${tab}` → JSON 배열 [id1, id2, ...]
- 상세 페이지 진입 시 sessionStorage에서 리스트 로드
- 현재 카드의 인덱스 찾기 → prev = index-1, next = index+1
- 리스트 없으면 (외부 링크 진입) 좌우 버튼/스와이프 비활성화

### 2. 브라우저 뒤로가기 = "목록으로" 효과

**대상 파일**: `src/app/page.tsx`, `DocumentClient.tsx`, `useDocumentState.ts`

**원인**: 탭 정보가 URL 쿼리에 없어서 뒤로가기 시 손실됨

**수정 방법**:

(A) 탭 전환 시 URL 동기화 (page.tsx):
- 현재: 클라이언트 상태로만 활성 탭 관리
- 수정: 탭 변경 시 `router.replace('/?tab=wiki')` 또는 `router.push('/?tab=wiki')`로 URL 업데이트
- 초기 로드 시 `searchParams.get('tab') || 'wiki'`로 활성 탭 결정 (이미 있음, 정상)

(B) 카드 Link href에 탭 정보 포함:
- 카드 클릭 → `/docs/${id}?from=wiki` (현재 탭을 from으로 전달)
- 상세 페이지에서 from 파라미터 읽어서 "목록으로" 버튼이 `/?tab=${from}`으로 이동

(C) router.push('/') 호출 정리:
- `useDocumentState.ts`, `DocumentClient.tsx`에서 `router.push('/')` 사용 부분 모두 검색
- 탭 정보 보존하도록 `router.push('/?tab=${currentTab}')`로 수정
- 문서 삭제/404 처리도 동일

(D) 검증:
- wiki 탭에서 카드 클릭 → 상세 → 브라우저 뒤로가기 → wiki 탭 목록으로 정상 복귀
- my 탭에서 카드 클릭 → 상세 → 뒤로가기 → my 탭 목록으로 복귀
- 검색/필터 상태도 가능하면 보존 (선택, 어려우면 Phase 2로)

## affected_files
- `src/app/page.tsx` (수정 — 탭 전환 시 URL 동기화)
- `src/app/docs/[id]/DocumentClient.tsx` (수정 — 좌우 네비게이션 + 목록으로 from 파라미터)
- `src/app/docs/[id]/useDocumentState.ts` (수정 — router.push 탭 정보 보존)
- 카드 리스트 컴포넌트 (수정 — sessionStorage 저장 + Link href에 from 추가)
- `package.json` (수정 — react-swipeable 추가)

## 검증 시나리오
1. wiki 탭에서 5번째 카드 클릭 → 상세 페이지에 좌우 < > 화살표 표시
2. 우측 > 클릭 → 6번째 카드로 이동
3. 좌측 < 클릭 → 5번째 카드로 복귀
4. 첫 카드(0번)에서 좌측 < 비활성화
5. 마지막 카드에서 우측 > 비활성화
6. 모바일 사이즈 → 화살표 안 보임, 스와이프 동작
7. 카드 상세 → 브라우저 뒤로가기 → **해당 탭(wiki/my) 목록으로 정상 복귀**
8. my 탭에서 동일 시나리오 검증
9. npm run build 성공