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:
@@ -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: 파이프라인 + 도메인 분포 ─── -->
|
||||
|
||||
Reference in New Issue
Block a user