# 대시보드 프로젝트뷰 그리드 레이아웃 리디자인

## 목표
프로젝트뷰를 세로 나열에서 **그리드(2x3 또는 3x3)** 레이아웃으로 변경.
ANU 시스템과 프로젝트들을 시각적으로 구분하여 한눈에 파악 가능하게 개선.

## 프로젝트 경로
`/home/jay/workspace/dashboard/index.html`의 `ProjectView` 컴포넌트 (line 538~)

## 현재 문제
- 프로젝트 안건(InsuRo, ThreadAuto)과 태스크 그룹(task-493, task-492...)이 **위아래 세로로만 나열**
- 스크롤이 길어져 한눈에 파악 어려움

## 변경 요구사항

### 1. 레이아웃 구조
프로젝트뷰를 **2개 영역**으로 나눈다:

**A. ANU 시스템 (상단)**
- 개발 인프라(dev_workspace) 관련 태스크들
- 한 줄 또는 작은 섹션으로 표시

**B. 프로젝트 그리드 (메인)**
- **그리드 레이아웃**: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4`
- 각 프로젝트가 카드 1개 = 그리드 셀 1개
- 프로젝트 카드 안에 해당 프로젝트의 **안건 + 작업 히스토리** 모두 포함

### 2. 프로젝트 분류 로직
현재 태스크들의 `desc`(description)나 `task-file` 내용에서 프로젝트를 추출해야 함.
간단한 매핑:

```javascript
const PROJECT_MAP = {
    'ThreadAuto': ['threadauto', 'threads', '스레드', 'thread auto', '승인 워크플로우'],
    'InsuWiki': ['insuwiki', '인슈위키', '보험 위키'],
    'InsuRo': ['insuro', '인슈로'],
    'Dashboard': ['대시보드', 'dashboard', '유실 기능'],
    'DevSystem': ['cf-crawl', 'cloudflare', '개발환경', 'dev-environment', 'agency-agents', 'QC', '고도화'],
};
```

태스크의 description을 소문자로 변환 후 키워드 매칭.
매칭 안 되는 것들은 "기타" 또는 "ANU 시스템"으로.

### 3. 프로젝트 카드 디자인
각 프로젝트 카드에 포함할 것:
- **프로젝트명** (큰 글씨)
- **안건 배지**: 미완료 안건 수 (todo.json 기반)
- **작업 요약**: 진행 중 / 완료 / 전체 건수
- **안건 목록**: IssueItem 컴포넌트로 펼침/접힘 (기존 구현 활용)
- **최근 작업 3~5건**: 축약 표시 (task_id + 상태 + 1줄 설명)
- 카드 높이 통일: `min-h-[200px]` 정도, 내용 많으면 `max-h-[400px] overflow-y-auto`

### 4. 반응형
- 모바일(sm): 1열
- 태블릿(md): 2열
- 데스크탑(lg): 3열

### 5. 기존 기능 유지
- TaskDetailModal: 작업 클릭 시 모달 기존대로 동작
- IssueItem: sub_items 펼침/접힘 기존대로 동작
- SSE 실시간 업데이트 기존대로 동작

## 참고: 현재 코드 위치
- ProjectView 컴포넌트: index.html line 538~
- IssueItem 컴포넌트: index.html line 485~
- TaskDetailModal 컴포넌트: index.html 내
- 데이터: tasksData (작업 목록), todoData (안건 목록)

## 주의사항
- **기존 컴포넌트(IssueItem, TaskDetailModal)를 재사용**할 것. 새로 만들지 말 것.
- index.html만 수정. server.py 수정 불필요.
- 기존 탭(조직뷰, 시스템뷰, 기록) 영향 없어야 함.
- Tailwind CSS 클래스만 사용 (CDN 기반).
- pyright 해당 없음 (HTML/JS 파일)
- 수정 후 서버 재시작하여 실제 화면 확인: `http://localhost:8000/dashboard/`