From 7fb093884a096cf142bb97cf34de3ddf80542286 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Mon, 13 Apr 2026 15:17:29 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20mobile=20responsive=20document?=
 =?UTF-8?q?=20list=20=E2=80=94=20hide=20table=20columns=20+=20card=20paddi?=
 =?UTF-8?q?ng?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../src/lib/components/DocumentCard.svelte    |  6 +++---
 .../src/lib/components/DocumentTable.svelte   | 20 +++++++++----------
 frontend/src/routes/documents/+page.svelte    |  4 ++--
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/DocumentCard.svelte b/frontend/src/lib/components/DocumentCard.svelte
index 39b7347..4afd64b 100644
--- a/frontend/src/lib/components/DocumentCard.svelte
+++ b/frontend/src/lib/components/DocumentCard.svelte
@@ -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}
diff --git a/frontend/src/lib/components/DocumentTable.svelte b/frontend/src/lib/components/DocumentTable.svelte
index a052010..b8fbdff 100644
--- a/frontend/src/lib/components/DocumentTable.svelte
+++ b/frontend/src/lib/components/DocumentTable.svelte
@@ -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>
       <!-- 등록일 -->
diff --git a/frontend/src/routes/documents/+page.svelte b/frontend/src/routes/documents/+page.svelte
index b4d7f46..ea42fca 100644
--- a/frontend/src/routes/documents/+page.svelte
+++ b/frontend/src/routes/documents/+page.svelte
@@ -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