hyungi/hyungi_document_server
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(dashboard): 카드 균등 비율 + 모바일 3열×2행 레이아웃

Browse Source 
모바일 3열×2행, 데스크탑 6열×1행. 텍스트 중앙 정렬,
보조 텍스트 높이 통일 (투명 placeholder), 카드 크기 균등.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-14 09:33:14 +09:00
parent e43ea137b6
commit e0d92a3a28
1 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+page.svelte
+32 -30
View File
@@ -176,58 +176,60 @@
{:else if summary}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4">
<!-- ─── 행 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">
<!-- 모바일 3열×2행 / lg 6열×1행, 균등 분할 -->
<div class="col-span-full grid 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 interactive class="h-full text-center">
<p class="text-[11px] text-dim flex items-center justify-center gap-1"><FileText size={11} /> 문서함</p>
<p class="text-xl font-bold mt-1 text-text">{(summary.documents_count ?? 0).toLocaleString()}</p>
<p class="text-[10px] mt-0.5 {summary.today_added > 0 ? 'text-accent' : 'text-transparent'}">
{summary.today_added > 0 ? `+${summary.today_added} 오늘` : '-'}
</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 interactive class="h-full text-center">
<p class="text-[11px] text-dim flex items-center justify-center gap-1"><StickyNote size={11} /> 메모</p>
<p class="text-xl font-bold mt-1 text-text">{(summary.memos_count ?? 0).toLocaleString()}</p>
<p class="text-[10px] text-transparent mt-0.5">-</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 interactive class="h-full text-center">
<p class="text-[11px] text-dim flex items-center justify-center gap-1"><Newspaper size={11} /> 뉴스</p>
<p class="text-xl font-bold mt-1 text-text">{(summary.news_count ?? 0).toLocaleString()}</p>
<p class="text-[10px] text-transparent mt-0.5">-</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 interactive class="h-full text-center">
<p class="text-[11px] text-dim flex items-center justify-center gap-1"><Inbox size={11} /> 승인 대기</p>
<p class="text-xl font-bold mt-1 {summary.inbox_count > 0 ? 'text-warning' : 'text-text'}">{summary.inbox_count}</p>
<p class="text-[10px] mt-0.5 {summary.inbox_count > 0 ? 'text-accent' : 'text-transparent'}">
{summary.inbox_count > 0 ? '분류하기 →' : '-'}
</p>
</Card>
</a>
<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 class="h-full text-center">
<p class="text-[11px] text-dim flex items-center justify-center gap-1"><Scale size={11} /> 법령 알림</p>
<p class="text-xl font-bold mt-1 text-text">{summary.law_alerts}</p>
<p class="text-[10px] mt-0.5 {summary.law_alerts > 0 ? 'text-dim' : 'text-transparent'}">
{summary.law_alerts > 0 ? '오늘 변경' : '-'}
</p>
</Card>
</div>
<div>
<Card class="h-full">
<p class="text-xs text-dim flex items-center gap-1"><Activity size={12} /> 시스템</p>
<Card class="h-full text-center">
<p class="text-[11px] text-dim flex items-center justify-center gap-1"><Activity size={11} /> 시스템</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>
<p class="text-xl font-bold mt-1 {TONE_TEXT[systemView.tone]}">{systemView.label}</p>
<p class="text-[10px] text-dim mt-0.5">{systemView.sub}</p>
{/if}
</Card>
</div>