# 대시보드 시스템뷰 탭 — 디자인MD 섹션 추가

## 배경
- task-1507에서 58개 사이트의 DESIGN.md 레퍼런스 라이브러리 구축 완료
- 경로: `/home/jay/workspace/resources/design-md/`
- 인덱스: `/home/jay/workspace/resources/design-md/INDEX.md`
- 제이회장님이 대시보드에서 직관적으로 확인 원함

## 수정 대상
- 대시보드 시스템뷰 관련 컴포넌트 (SystemView.js 또는 유사 파일)
- server.py — API 엔드포인트 추가 (필요 시)

## 요구사항

### 1. 시스템뷰 탭에 2개 섹션 토글
현재 시스템뷰 탭 → 상단에 2개 섹션 선택 버튼:
- **시스템상태** (기존 시스템뷰 내용 그대로)
- **디자인MD** (신규)

기본 선택: 시스템상태 (기존 동작 유지)

### 2. 디자인MD 섹션 구성
INDEX.md의 내용을 파싱하여 시각적으로 표시:

#### 2-1. 카테고리 필터
- AI (14개), DevTool (20개), Enterprise/SaaS, Fintech, Mobility, Creator, eCommerce 등
- 카테고리 칩/탭으로 필터링

#### 2-2. 사이트 카드 목록
각 사이트를 카드로 표시:
- **사이트명** (볼드)
- **한줄 설명** (INDEX.md에서 파싱)
- **컬러 스와치** — 메인 2색을 원형 배지로 표시 (HEX 코드 기반)
- **태그** — #따뜻한 #서체중심 등 칩으로 표시
- 카드 클릭 시 → 해당 사이트의 DESIGN.md 전문을 모달/확장 패널로 표시

#### 2-3. 검색
- 사이트명, 설명, 태그로 검색 가능한 검색창

### 3. API 엔드포인트
```
GET /api/design-md/index — INDEX.md 파싱 결과 (카테고리별 사이트 목록)
GET /api/design-md/{site} — 특정 사이트의 DESIGN.md 전문
```

### 4. INDEX.md 파싱 로직
INDEX.md 구조:
```
### 카테고리명 (N개)
- **사이트명** — 설명 | `#color1` `#color2` | 태그1, 태그2, ...
```
이 구조를 파싱하여 JSON 반환:
```json
{
  "categories": [
    {
      "name": "AI",
      "count": 14,
      "sites": [
        {
          "id": "claude",
          "name": "claude",
          "description": "따뜻한 파치먼트 배경의 인문학적 AI UI",
          "colors": ["#c96442", "#f5f4ed"],
          "tags": ["따뜻한", "서체중심", "테라코타", "에디토리얼"]
        }
      ]
    }
  ]
}
```

## 보고서
`/home/jay/workspace/memory/reports/task-1582.md`에 작성