# task-1368.1 완료 보고서: InsuRo 네비게이션 라우트 매핑 수정

## SCQA

**S**: InsuRo 대시보드의 유저 드롭다운에서 마이페이지/개인설정/플랜&구독/관리자 메뉴 클릭 시 해당 페이지로 이동은 정상 작동한다.

**C**: 그러나 이동 후 상단 탭이 "고객관리"로 하이라이트되고 좌측 서브메뉴가 CRM 메뉴로 표시된다. 원인은 `getActiveTabFromPath()` 함수가 매핑되지 않는 경로를 무조건 "crm"으로 폴백 처리하기 때문이다 (navigationConfig.ts:89).

**Q**: /mypage, /settings, /pricing, /admin/* 경로에서 올바른 탭 하이라이트 및 서브메뉴를 표시할 수 있는가?

**A**: `getActiveTabFromPath()` 함수에 명시적 경로 매핑 추가 + info-settings 탭에 계정 메뉴 3개 추가 + ContextSubMenu에 관리자 전용 서브메뉴 렌더링 추가로 해결. 수정 파일 2개, TypeScript 에러 0건, 빌드 성공, vite preview 서버 HTTP 200 정상 응답.

## 수정 내역

### navigationConfig.ts
- `DomainTabId` 타입에 `"admin"` 추가
- `SubMenuItem` 인터페이스에 `separatorBefore?: boolean` 필드 추가
- `info-settings` 탭 items에 마이페이지/개인설정/플랜&구독 3개 항목 추가 (구분선 포함)
- `getActiveTabFromPath()` 함수에 `/admin/*` → "admin", `/mypage`/`/settings`/`/pricing` → "info-settings" 명시적 매핑 추가 (루프 전 우선 처리)

### ContextSubMenu.tsx
- `adminMenuItems` import 추가
- `activeTab === "admin"` 분기: adminMenuItems 11개로 별도 사이드바 렌더링
- `tab.items.slice(0, 5)` 제거 → 전체 items 렌더링
- `separatorBefore` 플래그 기반 구분선 렌더링 추가

### TopNavBar.tsx
- 변경 불필요: `activeTab === "admin"`이면 어떤 탭도 하이라이트 안 됨 (기존 로직 호환)

## 발견 이슈 및 해결

### 자체 해결 (3건)
1. **CRM `/mypage#namecard` 우선 매칭 버그** — `/mypage` 경로가 CRM 탭의 디지털 명함(`/mypage#namecard`) 항목과 먼저 매칭되어 여전히 CRM으로 폴백됨. `getActiveTabFromPath()` 루프 전에 `/mypage`, `/settings`, `/pricing` 명시적 체크 추가로 해결 (navigationConfig.ts:88-90)
2. **ContextSubMenu slice(0,5) 제한** — 기존 코드가 5개 항목만 렌더링하여 추가된 3개 항목이 표시 안 됨. `slice(0,5)` 제거하여 전체 items 렌더링으로 수정 (ContextSubMenu.tsx:72)
3. **React fragment key 이슈** — separator + item을 fragment로 감싸면 key 경고 발생. div 래퍼로 변경 (ContextSubMenu.tsx:77,98)

### 범위 외 미해결 (1건)
1. **MobileBottomNav drawer slice(0,5)** — 모바일 드로어에서도 5개 제한이 있으나, 모바일에서는 좌측 서브메뉴가 없고 유저 드롭다운에서 직접 접근하므로 현재 작업 범위 외. 추후 모바일 UX 개선 시 반영 권장.

## 산출물

- `/home/jay/projects/InsuRo/.worktrees/task-1368.1-dev2/src/components/navigation/navigationConfig.ts`
- `/home/jay/projects/InsuRo/.worktrees/task-1368.1-dev2/src/components/navigation/ContextSubMenu.tsx`

## 테스트 결과

- TypeScript 타입 체크: 에러 0건 (`tsc --noEmit`)
- Vite 빌드: 성공 (7.08s, 132 precache entries)
- 서버 재시작: HTTP 200 정상 응답 (localhost:5173)

## 셀프 QC 체크리스트

- [x] 1. 영향 파일: DashboardLayout.tsx (DomainTabId 타입 확장 호환), MobileBottomNav.tsx (변경 불필요)
- [x] 2. 엣지 케이스: /mypage#namecard CRM 매칭 우선순위 해결, /admin 단독 접속 처리
- [x] 3. 작업 지시와 정확히 일치: 4개 경로 매핑 수정 + 구분선 + 관리자 서브메뉴
- [x] 4. 에러 처리/보안: premiumOnly/adminOnly 로직 보존 확인
- [x] 5. 테스트: TypeScript 타입 체크 + 빌드 + 서버 응답 확인
- [x] 6. 발견 이슈 3건 모두 자체 해결
- [x] 7. SOLID/DRY 확인: 기존 패턴 유지, 중복 코드 없음
- [x] 8. 인터페이스 변경: SubMenuItem에 optional field 추가 (하위 호환)

## 머지 판단

- **머지 필요**: Yes
- **브랜치**: task/task-1368.1-dev2
- **워크트리 경로**: /home/jay/projects/InsuRo/.worktrees/task-1368.1-dev2
- **머지 의견**: TypeScript 에러 0건, 빌드 성공, 기존 4탭 동작에 영향 없음 (union type 확장 + optional field 추가는 하위 호환). 충돌 가능성 낮음 (navigationConfig.ts, ContextSubMenu.tsx만 변경).

## 모델 사용 기록

- 팀원: 프레이야 / 작업 내용: navigationConfig.ts + ContextSubMenu.tsx 수정 / 사용 모델: sonnet / 정당성: -
- 팀장 직접 개입: getActiveTabFromPath() /mypage 우선 매칭 버그 수정 (셀프 QC 중 발견)