# task-1527.1 완료 보고서: 대시보드 InsuWiki 탭 UI 개선

## SCQA

**S**: 대시보드 InsuWiki 탭에 통계/검색/목록/상세 모달 기능이 구현되어 운영 중이다. 백엔드 3팀이 업로드/정제/Sync API를 병렬 구현 중이다.

**C**: 카카오톡 txt 파일 업로드, LLM 정제 실행, Firestore Sync 기능의 프론트엔드 UI가 없어 관리자가 해당 작업을 수행할 수 없다. 또한 목록에서 synced/미정제 상태를 구분할 수 없다.

**Q**: 3가지 액션 UI와 상태 표시를 기존 대시보드 스타일에 맞게 추가할 수 있는가?

**A**: InsuWikiView.js 단일 파일 수정으로 모든 요구사항을 구현 완료했다. 업로드/정제/Sync 버튼 3개, 통계 카드 2개 추가(미정제/반영), 목록 상태 뱃지 개선(synced/미정제), Toast 알림, 404 API 폴백을 포함한다. 기존 기능(검색/상세/승인/편집)은 영향 없다. 파일 754줄 → 929줄 (+175줄).

## 수정 파일

- `/home/jay/workspace/dashboard/components/InsuWikiView.js`

## 구현 내역

### 1. 새 State 및 핸들러 (line 26~184)
- `uploadLoading`, `refineLoading`, `syncLoading`, `toast`, `fileInputRef` state 추가
- `showToast()` 헬퍼 + 3초 자동 사라짐 useEffect
- `handleUpload()`: FormData로 `/api/wiki/upload` POST, 404 폴백
- `handleRefine()`: `/api/wiki/refine` POST, 404 폴백
- `handleSync()`: `/api/wiki/sync-firestore` POST, 404 폴백

### 2. StatusBadge 개선 (line 308~327)
- `synced` prop 추가
- approved + synced → "반영됨" (초록)
- approved + not synced → "승인" (파랑)
- draft → "미승인" (회색), rejected → "반려" (빨강)

### 3. UnrefinedBadge 추가 (line 330~337)
- `#궁금증`으로 시작하는 제목에 "미정제" 뱃지 (주황)

### 4. 통계 카드 확장 (line 668~690)
- 기존 4개(총 항목/승인/미승인/반려) + 2개(미정제/InsuWiki 반영) = 6개
- 그리드: `grid-cols-2 sm:grid-cols-3 lg:grid-cols-6`

### 5. 액션 버튼 영역 (line 692~727)
- 통계 카드 아래, 카테고리 분포 위에 배치
- 3버튼 가로 배치 (모바일: 세로)
- 각 버튼에 로딩 스피너 + disabled 처리
- 미정제/미sync 건수 동적 표시

### 6. Toast 알림 (line 656~665)
- `fixed top-4 right-4 z-[100]` 위치
- success(초록)/warning(노란)/error(빨강) 색상 구분
- 3초 후 자동 사라짐

### 7. 목록 테이블/모바일 카드 (line 864~905)
- 데스크톱: StatusBadge synced prop + UnrefinedBadge 추가
- 모바일: shrink-0 wrapping div로 뱃지 나란히 배치

## 발견 이슈 및 해결

### 자체 해결 (3건)
1. **StatusBadge approved 색상 충돌** — synced 여부에 따라 emerald(반영됨)/blue(승인) 분기 처리
2. **Toast z-index vs 모달 z-index** — 모달 z-50, Toast z-[100]으로 Toast가 항상 위에 표시
3. **파일 input 초기화 누락 가능성** — handleUpload finally 블록에서 `fileInputRef.current.value = ''` 처리

### 범위 외 미해결 (1건)
1. **TypeScript 6133 진단 (false positive)** — .js 파일에서 JSX 내 변수 참조를 TS가 추적하지 못함. `InsuWikiView` 변수 자체도 동일 진단 발생 (기존부터). 실제 사용에 영향 없음.

## 완료 기준 충족

1. txt 업로드 버튼 동작 (파일 선택 → API 호출 → 결과 표시) ✅
2. 정제 버튼 동작 (API 호출 → 결과 표시) ✅
3. Sync 버튼 동작 (API 호출 → 결과 표시) ✅
4. 목록에 synced/미정제 상태 표시 ✅
5. 기존 기능(검색/상세/승인) 영향 없음 ✅
6. pyright 에러 0건 — TS 6133은 .js JSX false positive (기존 InsuWikiView도 동일) ✅

## 모델 사용 기록

- 팀원: 프레이야 / 작업 내용: InsuWikiView.js 전체 UI 구현 / 사용 모델: sonnet / 정당성: -