fix(dashboard): 카드 레이아웃 모바일 반응형 개선

모바일 2열×3행 / md 3열×2행 / lg 6열×1행 그리드.
아이콘을 라벨 옆으로 이동, "오늘 +0" 숨김, 카드 높이 통일.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-14 09:23:40 +09:00
parent fa0175058a
commit e43ea137b6
+51 -69
View File
@@ -175,80 +175,62 @@
</div>
{:else if summary}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4">
<!-- ─── 행 1: 카테고리별 카운트 (6칸) ─── -->
<a href="/documents" class="lg:col-span-2 block">
<Card interactive>
<div class="flex items-start justify-between">
<p class="text-sm text-dim">문서함</p>
<FileText size={16} class="text-faint" />
</div>
<p class="text-2xl font-bold mt-1 text-text">
{(summary.documents_count ?? 0).toLocaleString()}
</p>
<p class="text-xs text-dim mt-0.5">오늘 +{summary.today_added}</p>
</Card>
</a>
<!-- ─── 행 1: 카테고리별 카운트 ─── -->
<!-- 모바일 2열×3행 / md 3열×2행 / lg 6열×1행 -->
<div class="col-span-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
<a href="/documents" class="block">
<Card interactive class="h-full">
<p class="text-xs text-dim flex items-center gap-1"><FileText size={12} /> 문서함</p>
<p class="text-2xl font-bold mt-1 text-text">{(summary.documents_count ?? 0).toLocaleString()}</p>
{#if summary.today_added > 0}
<p class="text-[11px] text-accent mt-0.5">+{summary.today_added} 오늘</p>
{/if}
</Card>
</a>
<a href="/memos" class="lg:col-span-2 block">
<Card interactive>
<div class="flex items-start justify-between">
<p class="text-sm text-dim">메모</p>
<StickyNote size={16} class="text-faint" />
</div>
<p class="text-2xl font-bold mt-1 text-text">
{(summary.memos_count ?? 0).toLocaleString()}
</p>
</Card>
</a>
<a href="/memos" class="block">
<Card interactive class="h-full">
<p class="text-xs text-dim flex items-center gap-1"><StickyNote size={12} /> 메모</p>
<p class="text-2xl font-bold mt-1 text-text">{(summary.memos_count ?? 0).toLocaleString()}</p>
</Card>
</a>
<a href="/news" class="lg:col-span-2 block">
<Card interactive>
<div class="flex items-start justify-between">
<p class="text-sm text-dim">뉴스</p>
<Newspaper size={16} class="text-faint" />
</div>
<p class="text-2xl font-bold mt-1 text-text">
{(summary.news_count ?? 0).toLocaleString()}
</p>
</Card>
</a>
<a href="/news" class="block">
<Card interactive class="h-full">
<p class="text-xs text-dim flex items-center gap-1"><Newspaper size={12} /> 뉴스</p>
<p class="text-2xl font-bold mt-1 text-text">{(summary.news_count ?? 0).toLocaleString()}</p>
</Card>
</a>
<a href="/inbox" class="lg:col-span-2 block">
<Card interactive>
<div class="flex items-start justify-between">
<p class="text-sm text-dim">승인 대기</p>
<Inbox size={16} class="text-faint" />
</div>
<p class="text-2xl font-bold mt-1 {summary.inbox_count > 0 ? 'text-warning' : 'text-text'}">
{summary.inbox_count}
</p>
</Card>
</a>
<a href="/inbox" class="block">
<Card interactive class="h-full">
<p class="text-xs text-dim flex items-center gap-1"><Inbox size={12} /> 승인 대기</p>
<p class="text-2xl font-bold mt-1 {summary.inbox_count > 0 ? 'text-warning' : 'text-text'}">{summary.inbox_count}</p>
{#if summary.inbox_count > 0}
<p class="text-[11px] text-accent mt-0.5">분류하기 →</p>
{/if}
</Card>
</a>
<div class="lg:col-span-2">
<Card>
<div class="flex items-start justify-between">
<p class="text-sm text-dim">법령 알림</p>
<Scale size={16} class="text-faint" />
</div>
<p class="text-2xl font-bold mt-1 text-text">{summary.law_alerts}</p>
<p class="text-xs text-dim mt-0.5">오늘 변경</p>
</Card>
</div>
<div>
<Card class="h-full">
<p class="text-xs text-dim flex items-center gap-1"><Scale size={12} /> 법령 알림</p>
<p class="text-2xl font-bold mt-1 text-text">{summary.law_alerts}</p>
{#if summary.law_alerts > 0}
<p class="text-[11px] text-dim mt-0.5">오늘 변경</p>
{/if}
</Card>
</div>
<div class="lg:col-span-2">
<Card>
<div class="flex items-start justify-between">
<p class="text-sm text-dim">시스템</p>
<Activity size={16} class="text-faint" />
</div>
{#if systemView}
<p class="text-2xl font-bold mt-1 {TONE_TEXT[systemView.tone]}">
{systemView.label}
</p>
<p class="text-xs text-dim mt-0.5">{systemView.sub}</p>
{/if}
</Card>
<div>
<Card class="h-full">
<p class="text-xs text-dim flex items-center gap-1"><Activity size={12} /> 시스템</p>
{#if systemView}
<p class="text-2xl font-bold mt-1 {TONE_TEXT[systemView.tone]}">{systemView.label}</p>
<p class="text-[11px] text-dim mt-0.5">{systemView.sub}</p>
{/if}
</Card>
</div>
</div>
<!-- ─── 행 2: 파이프라인 + 도메인 분포 ─── -->