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

## SCQA

**S**: 대시보드 프로젝트뷰가 안건과 태스크를 세로 나열 방식으로 표시하여 6개 프로젝트(ThreadAuto, InsuWiki, InsuRo, Dashboard, DevSystem, 기타)의 442건 작업을 한눈에 파악할 수 있는 구조가 아님.

**C**: 스크롤이 길어져 프로젝트 간 비교가 어렵고, ANU 시스템(DevSystem) 인프라 태스크와 실제 프로젝트 태스크가 혼재되어 구분이 불가.

**Q**: 그리드 레이아웃과 프로젝트 분류 로직을 적용하여 한눈에 프로젝트별 현황을 파악 가능한 구조로 개선할 수 있는가?

**A**: PROJECT_MAP 키워드 매칭 기반 분류 + 2영역(ANU 상단/프로젝트 그리드) 레이아웃 적용 완료. 반응형 그리드(1/2/3열), 프로젝트별 컬러 accent, 안건·작업 통합 카드로 리디자인. JS 에러 0건, 전 탭 정상 동작.

---

## 작업 내용

### 수정 파일
- `/home/jay/workspace/dashboard/index.html` (line 537~771, ProjectView 컴포넌트 교체)

### 변경 상세

1. **PROJECT_MAP 분류 로직 추가** (line 541-575)
   - 6개 프로젝트 분류: ThreadAuto, InsuWiki, InsuRo, Dashboard, DevSystem, 기타
   - `classifyByDescription(desc)`: 태스크 description 소문자 키워드 매칭
   - `classifyTodoProject(project)`: todoData의 project 필드 매칭

2. **2영역 레이아웃 구현** (line 714-758)
   - **A. ANU 시스템 섹션 (상단)**: DevSystem 분류 태스크/안건 컴팩트 표시, 최근 5건 + 안건 배지
   - **B. 프로젝트 그리드 (메인)**: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4`

3. **ProjectCard 내부 컴포넌트** (line 632-703)
   - 프로젝트별 컬러 accent 헤더 (blue/emerald/purple/amber/slate/gray)
   - 안건 배지 + 작업 요약(진행/완료/전체) 배지
   - IssueItem 재사용 (기존 컴포넌트)
   - 최근 작업 5건 (TaskRow, 클릭 시 TaskDetailModal 연동)
   - `min-h-[200px]`, `max-h-[320px] overflow-y-auto`

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

5. **데이터 없는 프로젝트 카드 필터링** (line 755-757)
   - 태스크 또는 안건이 0건인 프로젝트는 그리드에서 제외

### 기존 기능 영향
- 조직뷰: 영향 없음 (스크린샷 확인)
- 시스템뷰: 영향 없음 (스크린샷 확인)
- 기록 탭: 영향 없음
- TaskDetailModal: 정상 동작 (selectedTaskId 유지)
- IssueItem: 정상 동작 (기존 컴포넌트 재사용)
- SSE 실시간 업데이트: 정상 (props 리렌더링)

---

## 테스트 결과

- 데스크탑(1400px): 3열 그리드, 6개 프로젝트 카드 렌더링 ✅
- 태블릿(768px): 2열 그리드 ✅
- 모바일(375px): 1열 스택 ✅
- JS 에러: 0건 ✅
- HTTP 응답: 200 OK ✅
- 조직뷰/시스템뷰/기록 탭: 정상 동작 ✅

---

## 발견 이슈 (3건)

1. **[수정 완료]** 데이터 없는 프로젝트 카드 렌더링 문제
   - 원인: mainProjects 배열에 5개 고정 프로젝트가 포함되어 데이터 없는 카드도 "데이터 없음"으로 표시
   - 조치: `.filter()` 추가하여 데이터 있는 프로젝트만 렌더링

2. **[WARN]** 'qc' 키워드 false positive 가능성
   - DevSystem 분류 키워드 중 'qc'가 2글자로 짧아, "Quick"처럼 qc를 포함하는 비관련 설명에서 false positive 가능
   - 현재 데이터에서는 문제없음. 향후 description에 "qc"가 아닌 단어 포함 시 주의 필요

3. **[WARN]** 프로젝트 카드 overflow 시 안건/작업 구분
   - `max-h-[320px] overflow-y-auto` 적용 시, 안건이 많은 프로젝트에서 최근 작업 목록이 스크롤 아래 숨겨질 수 있음
   - "최근 작업" 레이블은 표시되나, 카드가 길어지면 사용자가 스크롤해야 함

---

## 검증 증거

- 데스크탑 스크린샷: 3열 그리드 렌더링 확인
- 모바일 스크린샷: 1열 레이아웃 확인
- 태블릿 스크린샷: 2열 레이아웃 확인
- Playwright JS 에러 캡처: 0건
- 조직뷰/시스템뷰 스크린샷: 기존 기능 유지 확인