# 대시보드 기록(History) 탭 검색 기능 추가

## 레벨: Lv.2
## 한정승인: 끝까지 진행

---

## 배경

대시보드의 기록(History) 탭에 검색 기능이 없어서, 과거 작업을 찾으려면 스크롤로 일일이 확인해야 한다.
인슈위키(InsuWiki)에 이미 구현된 검색 로직을 참고하여, 대시보드 상황에 맞게 적용한다.

---

## 참고할 InsuWiki 검색 로직

InsuWiki의 일반 검색(Normal Search)은 한국어 초성(초성) 퍼지 매칭을 지원한다.

**핵심 파일 (읽어서 로직 파악할 것):**
- `/home/jay/projects/insuwiki/nextapp/src/lib/utils/korean.ts` — `searchKorean()` 함수: 한국어 퍼지 매칭
- `/home/jay/projects/insuwiki/nextapp/src/lib/utils/hangul.ts` — `getChoseong()` 함수: 한글 초성 추출
- `/home/jay/projects/insuwiki/nextapp/src/components/search/SearchInput.tsx` — 검색 입력 UI (debounce 300ms 등)

**대시보드에 카피할 핵심:**
1. `getChoseong()` — 한글 초성 추출 로직 (JavaScript로 변환)
2. `searchKorean()` — 제목/내용 기반 퍼지 매칭 (초성 + exact substring)
3. Debounce 패턴 (300ms)

---

## 작업 내용

### 1. 서버 사이드: 검색 가능한 작업 목록 API 확장

현재 `/api/tasks`는 이미 전체 작업 목록을 반환한다. `/api/history`는 팀별 집계 통계만 반환한다.

**방법:** `/api/history`를 확장하거나, `/api/tasks`에 검색 쿼리 파라미터를 추가하여 개별 작업을 검색할 수 있도록 한다.
- `/api/tasks?q=검색어` — 서버 사이드 필터링 (task_id, description, team_id 대상)
- 또는 클라이언트 사이드 검색으로 구현 (작업 수가 많지 않으므로 클라이언트에서 처리 가능)

**권장:** 클라이언트 사이드 검색 (task-timers.json 전체 데이터를 `/api/tasks`로 받아서 프론트에서 필터링)

### 2. 프론트엔드: HistoryView.js에 검색 UI 추가

**현재 HistoryView 구조:**
- `/home/jay/workspace/dashboard/components/HistoryView.js` (약 190줄)
- 현재: 팀별 QC 통과율 + 팀별 평균 소요시간만 표시 (집계 통계)
- `/api/history` 호출 → 팀별 aggregate 데이터

**변경사항:**
1. 검색 입력 필드 추가 (상단에 배치)
   - 플레이스홀더: "작업 ID, 설명, 팀 이름으로 검색..."
   - Ctrl+K / Cmd+K 키보드 단축키로 포커스 (선택사항)
   - 디바운스 300ms

2. `/api/tasks` 데이터도 추가 호출하여 개별 작업 목록 표시
   - 기존 집계 통계 카드 아래에 **개별 작업 검색 결과 테이블/리스트** 추가
   - 각 작업: task_id, 설명, 팀, 상태(status), QC 결과, 소요시간, 시작/종료 시각
   - 클릭 시 `/api/task-detail/{task_id}` 호출로 상세 확인 (이미 있으면 활용)

3. 검색 로직 (클라이언트 사이드):
   - InsuWiki의 `searchKorean()` + `getChoseong()` 로직을 JavaScript로 대시보드 utils.js에 이식
   - 검색 대상 필드: task_id, description, team_id
   - 초성 검색 지원: "ㅂㅎ" → "불칸, 백엔드" 등 매칭

4. UI 스타일:
   - 기존 대시보드 디자인 톤 유지 (Tailwind CSS)
   - 검색 결과 리스트는 기존 카드와 같은 `bg-white rounded-xl shadow-sm` 스타일
   - QC 결과 배지: PASS(초록), WARN(노랑), FAIL(빨강)
   - 페이지네이션 또는 무한 스크롤 (작업 수에 따라)

### 3. 한글 검색 유틸리티

`/home/jay/workspace/dashboard/components/utils.js`에 한글 초성 검색 유틸 함수 추가:
- `getChoseong(str)` — 한글 초성 추출
- `searchKorean(items, query, fields)` — 초성 + substring 매칭

---

## 참고 파일
- HistoryView.js: `/home/jay/workspace/dashboard/components/HistoryView.js`
- utils.js: `/home/jay/workspace/dashboard/components/utils.js`
- server.py: `/home/jay/workspace/dashboard/server.py` (API 엔드포인트)
- InsuWiki korean.ts: `/home/jay/projects/insuwiki/nextapp/src/lib/utils/korean.ts`
- InsuWiki hangul.ts: `/home/jay/projects/insuwiki/nextapp/src/lib/utils/hangul.ts`

## 검증
- 대시보드 기록 탭에서 검색 입력 필드 표시 확인
- task ID 검색 (예: "1200") → 해당 작업만 필터링
- 한글 초성 검색 (예: "ㅂㄱ") → 백엔드, 불칸 등 매칭
- 팀 이름 검색 (예: "1팀") → 해당 팀 작업만 필터링
- 빈 검색어 시 전체 목록 표시
- 기존 집계 통계 카드는 그대로 유지