fix(frontend): mobile responsive document list — hide table columns + card padding

- DocumentTable: 분류/타입/크기 컬럼 모바일 숨김 (hidden md:flex/block)
- DocumentCard: gap/padding 축소 (gap-2 p-2 sm:gap-3 sm:p-3), data_origin 모바일 숨김, 태그 모바일 1개
- 검색바: 검색모드 select 모바일 숨김, AI답변 텍스트 모바일 숨김

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-04-13 15:17:29 +09:00
parent 141eb77938
commit 7fb093884a
3 changed files with 15 additions and 15 deletions
@@ -104,7 +104,7 @@
<div class="w-1 shrink-0 rounded-l-lg" style="background: {domainColor}"></div>
<!-- 콘텐츠 -->
<div class="flex items-start gap-3 p-3 flex-1 min-w-0 {selectable ? 'pl-8' : ''}">
<div class="flex items-start gap-2 p-2 sm:gap-3 sm:p-3 flex-1 min-w-0 {selectable ? 'pl-8' : ''}">
<!-- 포맷 아이콘 -->
<div class="shrink-0 mt-0.5 text-dim group-hover:text-accent">
<FormatIcon format={doc.file_format} size={18} />
@@ -126,7 +126,7 @@
{/if}
{#if doc.ai_tags?.length}
<div class="flex gap-1">
{#each doc.ai_tags.slice(0, 3) as tag}
{#each doc.ai_tags.slice(0, isDesktop ? 3 : 1) as tag}
<TagPill {tag} />
{/each}
</div>
@@ -143,7 +143,7 @@
<span class="text-accent font-medium">{(doc.score * 100).toFixed(0)}%</span>
{/if}
{#if doc.data_origin}
<span class="px-1.5 py-0.5 rounded {doc.data_origin === 'work' ? 'bg-blue-900/30 text-blue-400' : 'bg-gray-800 text-gray-400'}">
<span class="hidden sm:inline px-1.5 py-0.5 rounded {doc.data_origin === 'work' ? 'bg-blue-900/30 text-blue-400' : 'bg-gray-800 text-gray-400'}">
{doc.data_origin}
</span>
{/if}
@@ -108,9 +108,9 @@
const columns = [
{ key: 'title', label: '이름', flex: 'flex-1' },
{ key: 'ai_domain', label: '분류', width: 'w-48' },
{ key: 'document_type', label: '타입', width: 'w-24' },
{ key: 'file_size', label: '크기', width: 'w-20' },
{ key: 'ai_domain', label: '분류', width: 'w-48', hideOnMobile: true },
{ key: 'document_type', label: '타입', width: 'w-24', hideOnMobile: true },
{ key: 'file_size', label: '크기', width: 'w-20', hideOnMobile: true },
{ key: 'created_at', label: '등록일', width: 'w-20' },
];
</script>
@@ -124,7 +124,7 @@
{#each columns as col}
<button
onclick={() => toggleSort(col.key)}
class="flex items-center gap-1 {col.flex || col.width || ''} px-1 hover:text-text transition-colors text-left"
class="{col.hideOnMobile ? 'hidden md:flex' : 'flex'} items-center gap-1 {col.flex || col.width || ''} px-1 hover:text-text transition-colors text-left"
>
{col.label}
{#if sortKey === col.key}
@@ -168,16 +168,16 @@
<FormatIcon format={doc.file_format} size={14} />
<span class="{rowTextClass} truncate group-hover:text-accent">{doc.title || '제목 없음'}</span>
</div>
<!-- 분류 -->
<div class="w-48 text-[10px] text-dim truncate">
<!-- 분류 (모바일 숨김) -->
<div class="hidden md:block w-48 text-[10px] text-dim truncate">
{doc.ai_domain?.replace('Industrial_Safety/', 'IS/') || '-'}
</div>
<!-- 타입 -->
<div class="w-24 text-[10px] text-dim">
<!-- 타입 (모바일 숨김) -->
<div class="hidden md:block w-24 text-[10px] text-dim">
{doc.document_type || doc.file_format?.toUpperCase() || '-'}
</div>
<!-- 크기 -->
<div class="w-20 text-[10px] text-dim text-right">
<!-- 크기 (모바일 숨김) -->
<div class="hidden md:block w-20 text-[10px] text-dim text-right">
{formatSize(doc.file_size)}
</div>
<!-- 등록일 -->
+2 -2
View File
@@ -434,7 +434,7 @@
<select
bind:value={searchMode}
onchange={() => { if (searchQuery) submitSearch(); }}
class="px-2 py-1.5 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-xs"
class="hidden sm:block px-2 py-1.5 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-xs"
>
<option value="hybrid">하이브리드</option>
<option value="fts">전문검색</option>
@@ -447,7 +447,7 @@
class="flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-default text-dim hover:text-accent hover:border-accent transition-colors text-xs"
title="이 쿼리로 AI 답변 보기"
>
<Sparkles size={14} /> AI 답변
<Sparkles size={14} /> <span class="hidden sm:inline">AI 답변</span>
</a>
{/if}
<button