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

## SCQA 요약
- **Situation**: InsuWiki wiki/my 탭에서 카드 상세 진입 시 다음 카드를 보려면 매번 뒤로가기→클릭을 반복해야 함. 또한 브라우저 뒤로가기 시 활성 탭 정보가 URL에 없어 항상 wiki 첫 화면으로 리셋됨.
- **Complication**: 탭 상태가 클라이언트 메모리에만 있고 URL에 없음 → 뒤로가기 손실. 카드 리스트 정렬 순서를 상세 페이지에서 알 수 없음 → 좌우 네비 불가.
- **Question**: 상세 페이지에서 좌우 화살표/스와이프로 인접 카드 이동, 뒤로가기 시 원래 탭 복귀를 어떻게 구현?
- **Answer**:
  1. `page.tsx`에서 탭 변경 시 `router.replace('/?tab=...')` 동기화, 카드 리스트 ID 배열을 sessionStorage에 저장, 카드 Link href에 `?from=${tab}` 추가
  2. `DocumentClient.tsx`에서 `from` 파라미터 + sessionStorage로 prev/next id 계산 → 화살표/스와이프 UI 추가, "목록으로" 버튼이 `from` 사용
  3. `useDocumentState.ts`의 `router.push('/')` 3개 위치를 `backToList()`로 교체하여 탭 정보 보존

## 작업 레벨
Lv.2 (worktree + PR 가능 자동 머지 파이프라인 적용)

## 수정/생성 파일
- `nextapp/src/app/page.tsx` — 탭 ↔ URL 동기화, sessionStorage 카드 리스트 저장, Link href에 `from` 추가 (+23/-4)
- `nextapp/src/app/docs/[id]/DocumentClient.tsx` — 좌우 네비 UI(PC 화살표 + 모바일 스와이프), 목록으로 버튼 from 적용 (+76/-6)
- `nextapp/src/app/docs/[id]/useDocumentState.ts` — `backToList()` 헬퍼 + 3곳 적용 (+7/-3)
- `nextapp/package.json` — `react-swipeable@^7.0.2` 추가
- `nextapp/package-lock.json` — 의존성 잠금 갱신

## 모델 사용 기록
- **이리스(프론트엔드)**: sonnet — 5개 파일에 걸친 통합 프론트엔드 변경(라우팅+상태+UI) 의존성이 강해 분할 위험. 단일 sonnet 위임으로 처리.
- **헤르메스(팀장)**: opus — 설계/검토/통합/L1 검증만 수행. 직접 코딩 0건.
- haiku 미사용. 정당성 명시 불필요.

## 페르소나 고정 준수
- 백엔드/DB 변경 없음. 불칸(백엔드), 아테나(UX/UI), 아르고스(테스터) 호출 안 함. 프론트 단일 도메인 작업이므로 이리스만 활성화.

## 마이크로태스크 분해 (실제 실행 단위)
- MT-1 (이리스): page.tsx 탭 동기화 + sessionStorage + Link href — 커밋 fac9121
- MT-2 (이리스): useDocumentState.ts backToList 적용 — 커밋 abeb22b
- MT-3 (이리스): DocumentClient.tsx 네비게이션 UI + 목록으로 버튼 — 커밋 fc4bcdc

## grep 검증 결과 (모두 ✅)
| 키워드 | 파일 | 매칭 |
|---|---|---|
| `handleTabChange` | page.tsx | 3곳 (60, 68, 262) |
| `insuwiki_card_list_${activeTab}` | page.tsx | 1곳 (203) |
| `from=${activeTab}` | page.tsx | 2곳 (492 리스트, 523 카드) |
| `useSwipeable` | DocumentClient.tsx | 2곳 (14 import, 116 사용) |
| `fromTab` | DocumentClient.tsx | 다수 (85, 93, 108, 360, 408, 633 등) |
| `prevId/nextId` | DocumentClient.tsx | 다수 (89-90, 112-113, 637, 647) |
| `backToList` | useDocumentState.ts | 3곳 (220, 650, 711) |
| `fromTab` | useDocumentState.ts | 1곳 (45) |

## 빌드 결과
- **TypeScript**: 수정한 3개 파일에 신규 타입 에러 0건. 기타 에러는 모두 pre-existing 테스트 파일(`useReviewQueueListener.test.ts`, `roles.test.ts`)에 한정됨.
- **`npm run build`**: ✅ 성공 (`.env.local` 복사 후). 정적 페이지 prerender 완료, dynamic 라우트 정상 등록 (`/docs/[id]` 포함). 환경 미설정 시 Firebase auth 에러는 빌드 환경 이슈로 별도.

## L1 스모크테스트 결과
- **서버 재시작**: ✅ 성공 (`PORT=3000 npm run dev`, "Ready in 341ms")
- **브라우저 접속 (Playwright)**:
  - `http://localhost:3000/?tab=wiki` → 미로그인 상태 → `/login` 리다이렉트 정상 (1차 스크린샷: `task-2334-1-home-redirect.png`)
  - `http://localhost:3000/docs/test-doc?from=wiki` → 비로그인 가드 화면 정상 노출 (2차 스크린샷: `task-2334-2-doc-detail-with-from.png`)
  - "메인으로 돌아가기" 클릭 → `router.push('/?tab=wiki')` 호출 → 미인증 → `/login`. 라우팅 체인 정상.
- **sessionStorage 쓰기 확인**: ✅ `insuwiki_card_list_wiki` 키가 `"[]"`로 실제 set됨 (페이지 마운트 시 useEffect 동작 검증).
- **콘솔 에러 0건** (Firebase auth 가드 메시지는 정상 동작상의 에러).
- **스크린샷 경로**:
  - `/home/jay/.cokacdir/workspace/62A53E2C/.playwright-mcp/task-2334-1-home-redirect.png`
  - `/home/jay/.cokacdir/workspace/62A53E2C/.playwright-mcp/task-2334-2-doc-detail-with-from.png`
- **Playwright 정리**: ✅ `browser_close` 호출, dev 서버 종료 (lsof | xargs -r kill -9).

### L1 한계 명시
- 좌우 화살표 클릭/스와이프 동작 검증은 **인증된 카드 목록이 있어야** UI가 활성화되므로 익명 환경에서 직접 검증 불가.
- 대안 검증: (1) 코드 컴파일 ✅ (2) 빌드 성공 ✅ (3) sessionStorage 쓰기 로직 실행 ✅ (4) `from` 파라미터를 router.push가 정상 전파 ✅. 핵심 코드 경로는 모두 통과.
- 사용자 환경(로그인 후)에서의 시각적 동작 검증은 PR 머지 후 production hand-off에서 확인 권장.

## 검증 시나리오 매핑 (task spec 9개)
| # | 시나리오 | 코드 검증 |
|---|---|---|
| 1 | wiki 5번 카드 → 좌우 화살표 표시 | ✅ DocumentClient.tsx 633: `{fromTab && (...)}` 조건부 렌더 |
| 2 | > 클릭 → 6번 카드 | ✅ goNext: `router.push(/docs/${nextId}?from=${fromTab})` |
| 3 | < 클릭 → 5번 카드 | ✅ goPrev: 동일 로직 |
| 4 | 첫 카드: < 비활성 | ✅ `disabled={!prevId}` + `opacity-30 pointer-events-none` |
| 5 | 마지막 카드: > 비활성 | ✅ `disabled={!nextId}` 동일 |
| 6 | 모바일: 화살표 숨김, 스와이프 동작 | ✅ `hidden md:flex` + useSwipeable 컨테이너 |
| 7 | 뒤로가기 → 원래 탭 복귀 | ✅ page.tsx URL 동기화 + 상세 진입 시 from 파라미터 사용 |
| 8 | my 탭에서도 동일 | ✅ activeTab 변수 기반이라 wiki/my/daily 모두 동작 |
| 9 | npm run build 성공 | ✅ 위 빌드 결과 참조 |

## 머지 판단
- **머지 필요**: Yes
- **브랜치**: `task/task-2334-dev1`
- **워크트리 경로**: `/home/jay/projects/insuwiki/.worktrees/task-2334-dev1`
- **머지 의견**: 빌드/타입 모두 통과. 변경 범위가 라우팅·상태·UI에 국한되며 다른 도메인(에디터/검토/AI)에 영향 없음. PR 자동화 파이프라인(`worktree finish --action pr`)으로 진행 권장.

## 발견 이슈 및 해결
- **이슈 1**: 워크트리에 `.env.local`이 없어 `npm run build`가 Firebase 키 에러로 실패.
  - **해결**: 메인 작업 디렉토리(`/home/jay/projects/insuwiki/nextapp/.env.local`)에서 워크트리로 복사 후 빌드 성공. `.env.local`은 `.gitignore`에 있어 커밋되지 않음(올바른 동작).
- **이슈 2**: lucide-react 미설치 — task spec은 lucide-react 사용 권장이었으나, 기존 컴포넌트는 모두 inline SVG 패턴 사용 중.
  - **해결**: 기존 패턴 유지, ChevronLeft/Right path를 inline `<svg>`로 작성.
- **이슈 3**: pre-existing TS 에러 4건 (useDocumentState.ts unused imports `deleteDoc/addDoc/updateDoc/formatAuthorName`).
  - **결정**: 본 작업 범위 외이므로 수정하지 않음. 별도 cleanup task 권장.

## 비고
- 다음 단계로 사용자 환경에서 다음 시나리오 검증 권장:
  1. 로그인 후 wiki 탭 → 임의 카드 클릭 → URL `?from=wiki` 확인
  2. 좌우 화살표 노출 + 클릭 → 인접 카드 이동
  3. 브라우저 뒤로가기 → wiki 탭 그대로 복귀
  4. my 탭에서 동일 검증
  5. 모바일 viewport (375x667) → 화살표 숨김, 스와이프로 이동

## 세션 통계
- 총 도구 호출: 0회


## 세션 통계
- 총 도구 호출: 0회


## 세션 통계
- 총 도구 호출: 0회


## 세션 통계
- 총 도구 호출: 0회


## 세션 통계
- 총 도구 호출: 0회


## 세션 통계
- 총 도구 호출: 0회


## 세션 통계
- 총 도구 호출: 0회


## 세션 통계
- 총 도구 호출: 0회