# 세션 요약: task-2304

## 기본 정보
- 작업 ID: task-2304
- 팀: dev1-team
- 생성 시각: 20260429T101547
- 토큰 사용량: 4,468,880 / 200,000 (2234.4%)
- 레벨: CRITICAL

## 원래 작업 설명
# InsuRo 모바일 카드 허브 수정 — 첫 터치부터 표시 + 2열 카드 그리드

## 작업 레벨: Lv.1

## 프로젝트
- InsuRo: `/home/jay/projects/InsuRo`

## 버그 설명
task-2303에서 토스 스타일 카드 허브를 구현했으나 2가지 문제:
1. **첫 터치 시 허브가 안 뜨고 기존처럼 페이지 이동** → 재터치해야 바텀시트 표시
2. **바텀시트 리스트 형태** → 2열 카드 그리드가 아님

## 수정 사항

### 1. 첫 터치부터 카드 허브 표시
`src/components/DashboardLayout.tsx` 라인 35~51:

현재:
```tsx
// 모바일: 첫 터치 시 같은 탭이면 페이지 이동, 다른 탭이면 허브 표시
```

변경:
```tsx
const handleTabChange = useCallback((tabId: DomainTabId) => {
  // 데스크탑: 기존 동작 유지
  if (window.innerWidth >= 768) {
    const tab = domainTabs.find((t) => t.id === tabId);
    if (tab && tab.items.length > 0) navigate(tab.items[0].url);
    return;
  }
  
  // 모바일: 항상 카드 허브 표시 (첫 터치든 재터치든)
  if (showMobileHub && selectedHubTab === tabId) {
    setShowMobileHub(false);  // 같은 탭 재터치 = 닫기
  } else {
    setShowMobileHub(true);   // 다른 탭 또는 첫 터치 = 열기
    setSelectedHubTab(tabId);
  }
}, [showMobileHub, selectedHubTab, navigate]);
```

★ 핵심: 모바일에서 `navigate(tab.items[0].url)` 호출을 제거. 항상 허브를 표시.

### 2. MobileCategoryHub를 2열 카드 그리드로 변경
`src/components/MobileCategoryHub.tsx`:

현재 바텀시트 리스트를 **전체 화면 2열 카드 그리드**로 변경:

```tsx
<div className="p-4 space-y-4">
  <h2 className="text-lg font-bold">{tab.label}</h2>
  <p className="text-sm text-muted-foreground">{tab.description}</p>
  
  <div className="grid grid-cols-2 gap-3">
    {tab.items.map((item) => (
      <button
        key={item.url}
        onClick={() => onItemClick(item.url)}
        className="flex flex-col items-center gap-2 p-4 rounded-xl border bg-card hover:bg-accent transition-colors"
      >
        <item.icon size={28} className="text-primary" />
        <span className="text-sm font-medium text-center">{item.title}</span>
        {item.premiumOnly && (
          <span className="text-[10px] px-1.5 py-0.5 rounded bg-primary/10 text-primary">PREMIUM</span>
        )}
      </button>
    ))}
  </div>
</div>
```

바텀시트/드로어 제거 → **콘텐츠 영역 전체에** 카드 그리드 표시 (main content 대체).

### 3. 허브 표시 시 기존 콘텐츠 숨김
DashboardLayout에서 `showMobileHub=true`이면 `<main>` 영역을 숨기고 MobileCategoryHub를 전체 화면으로 표시. 현재 코드 라인 93의 `hidden md:block` 조건이 이 역할.

## affected_files
- `src/components/DashboardLayout.tsx` (수정 — 첫 터치부터 허브 표시)
- `src/components/MobileCategoryHub.tsx` (수정 — 2열 카드 그리드)

## 검증 시나리오
1. 모바일 → 하단 "AI 마케팅" 첫 터치 → 카드 허브 전체 화면 표시 (페이지 이동 X)
2. 카드 2열 그리드 (아이콘 + 기능명)
3. 카드 터치 → 해당 페이지 이동 + 허브 닫힘
4. 같은 탭 재터치 → 허브 닫힘 (토글)
5. PC → 기존 동작 유지 (사이드바)
6. npm run build 성공

## 자동 요약
세션 task-2304이 CRITICAL 임계값(85%)에 도달하여 자동으로 요약되었습니다.
토큰 사용량: 2234.4%

## 재시작 안내
이 요약 파일을 기반으로 새 세션이 자동 시작됩니다.
팀: dev1-team