# 작업: 대시보드 모바일 UI 최적화 (3건)

## 파일
- `/home/jay/workspace/dashboard/index.html`

## 수정 사항

### 1. 탭 메뉴 모바일 최적화 (라인 1603-1609, 1899-1916)

**문제**: 5개 탭이 `flex-1`로 균등 분할되어 모바일에서 "프로젝트뷰" 등 긴 텍스트가 두 줄로 깨짐

**해결**:
- 모바일(sm 미만)에서 탭 라벨을 축약: "조직뷰"→"조직", "프로젝트뷰"→"프로젝트", "시스템뷰"→"시스템", "기록"→"기록", "집단지성"→"지성"
- 또는 탭 컨테이너에 `overflow-x-auto whitespace-nowrap` 적용하여 가로 스크롤 가능하게
- 어느 방식이든 모바일에서 한 줄로 유지되어야 함
- **추천 방식**: 라벨 축약이 더 깔끔. `tab.label` 대신 모바일용 `tab.shortLabel` 추가하고 `sm:` 미만에서 shortLabel 사용

```javascript
const tabs = [
    { id: 'org', label: '조직뷰', shortLabel: '조직' },
    { id: 'project', label: '프로젝트뷰', shortLabel: '프로젝트' },
    { id: 'system', label: '시스템뷰', shortLabel: '시스템' },
    { id: 'archive', label: '기록', shortLabel: '기록' },
    { id: 'groupchat', label: '집단지성', shortLabel: '지성' },
];
```

렌더링:
```jsx
<span className="hidden sm:inline">{tab.label}</span>
<span className="sm:hidden">{tab.shortLabel}</span>
```

### 2. "활성" 상태 표시 통일 (라인 80-98)

**문제**: `StatusDot` 컴포넌트에서 `active` 상태가 "활성"으로 표시됨. 다른 에이전트는 "유휴"/"대기"/"작업중" 등으로 표시되어 불일치.

**해결**: `active` 상태를 `idle` 또는 제거하거나, 표시를 통일
- `active` 항목(라인 86)의 label을 "유휴"로 변경하고 색상도 `bg-slate-300`으로 변경
- 또는 `active` → `idle`과 동일하게 매핑

```javascript
// 변경 전
active:   { color: 'bg-blue-500',    label: '활성' },
// 변경 후 - idle과 동일하게
active:   { color: 'bg-slate-300',    label: '유휴' },
```

### 3. 작업내용 표기 2줄 제한 (라인 140-145, 248-250, 310-312)

**문제**: 작업 내용(currentTask)이 에이전트 이름 옆에 한 줄 `truncate`로 표시되어, 길면 내용 파악 어렵고, 짧은 칸에 끼여 디자인 깨짐 가능

**해결**: 작업 내용을 이름 아래 별도 줄에 표시, 최대 2줄까지만 표시 (line-clamp-2)

**MemberRow (라인 117-154) 수정:**
기존 (라인 140-145):
```jsx
<div className="flex items-center gap-1.5">
    <span className="text-sm font-medium text-slate-800">{shortName}</span>
    {isLead && <span className="text-[10px] px-1 py-0.5 rounded bg-blue-50 text-blue-600 font-medium">팀장</span>}
    <ModelBadge model={member.model} />
    {currentTask && (
        <span className="text-[10px] text-slate-400 truncate max-w-[160px] sm:max-w-[200px]" title={currentTask}>{currentTask}</span>
    )}
</div>
```

변경 후:
```jsx
<div className="flex items-center gap-1.5">
    <span className="text-sm font-medium text-slate-800">{shortName}</span>
    {isLead && <span className="text-[10px] px-1 py-0.5 rounded bg-blue-50 text-blue-600 font-medium">팀장</span>}
    <ModelBadge model={member.model} />
</div>
{currentTask && (
    <span className="text-[10px] text-slate-400 mt-0.5 block overflow-hidden" style={{display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical'}} title={currentTask}>{currentTask}</span>
)}
```

**CenterCard (라인 248-250)도 동일 패턴 적용:**
currentTask를 이름과 같은 줄에서 빼고 아래 줄로 이동, 2줄 제한

**FlexTeamCard (라인 310-312)도 동일 패턴 적용:**
currentTask를 아래 줄로 이동, 2줄 제한

## 검증
1. 모바일 뷰포트(375px 기준)에서 탭이 한 줄로 표시되는지 확인
2. "활성" 상태가 사라지고 "유휴"로 통일되는지 확인
3. 작업내용이 에이전트 카드 내에서 2줄 이내로 표시되는지 확인
4. pyright, 기존 테스트 회귀 없음

## 산출물
- index.html 수정
- 보고서: `/home/jay/workspace/memory/reports/task-603.1.md`