From 451c2181a004c99224e57268b7ea7d6c4bff63ec Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Tue, 7 Apr 2026 11:44:29 +0900
Subject: [PATCH] =?UTF-8?q?refactor(tokens):=20A-8=20Batch=201=20=E2=80=94?=
 =?UTF-8?q?=20TagPill=20/=20UploadDropzone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

색상 시스템을 의미 토큰으로 swap. Phase A 디자인 시스템 정착의 첫
mechanical refactor batch (8 파일 중 2 파일).

TagPill: 4가지 prefix별 색상을 의미 토큰화
- @상태/  amber → warning
- #주제/  blue  → accent
- $유형/  green → success
- !우선순위/ red → error
- fallback bg-[var(--border)] → bg-default,
           text-[var(--text-dim)] → text-dim

UploadDropzone: 드래그 오버레이 + 업로드 진행 영역
- bg-[var(--accent)]/10 → bg-accent/10
- bg-[var(--surface)]   → bg-surface
- border-[var(--border)] → border-default
- text-[var(--text-dim)] → text-dim
- 상태별 텍스트: text-success / text-error / text-accent / text-dim

검증:
- npm run lint:tokens : 421 → 407 (-14, B1 파일 0 hit)
- npm run build       : ✅
- npx svelte-check    : ✅ 0 errors
- ⚠ 3-risk grep       : hover/border-border/var() 잔여 0건

플랜: ~/.claude/plans/compressed-churning-dragon.md §A.4 Batch 1
참고: 본 plan은 161ff18(search Phase 0.5 commit)에 styleguide 2개 파일이
의도와 다르게 묶여 main에 들어왔음. 기능 영향 0 — Option A 결정으로
commit history 미수정.
---
 frontend/src/lib/components/TagPill.svelte    | 12 +++++------
 .../src/lib/components/UploadDropzone.svelte  | 20 +++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/TagPill.svelte b/frontend/src/lib/components/TagPill.svelte
index 8c401d3..166343e 100644
--- a/frontend/src/lib/components/TagPill.svelte
+++ b/frontend/src/lib/components/TagPill.svelte
@@ -4,13 +4,13 @@
 
   let { tag = '', clickable = true } = $props();
 
-  // 계층별 색상
+  // 계층별 색상 (의미 토큰)
   function getColor(t) {
-    if (t.startsWith('@상태/') || t.startsWith('@')) return { bg: 'bg-amber-900/30', text: 'text-amber-400' };
-    if (t.startsWith('#주제/') || t.startsWith('#')) return { bg: 'bg-blue-900/30', text: 'text-blue-400' };
-    if (t.startsWith('$유형/') || t.startsWith('$')) return { bg: 'bg-emerald-900/30', text: 'text-emerald-400' };
-    if (t.startsWith('!우선순위/') || t.startsWith('!')) return { bg: 'bg-red-900/30', text: 'text-red-400' };
-    return { bg: 'bg-[var(--border)]', text: 'text-[var(--text-dim)]' };
+    if (t.startsWith('@상태/') || t.startsWith('@')) return { bg: 'bg-warning/30', text: 'text-warning' };
+    if (t.startsWith('#주제/') || t.startsWith('#')) return { bg: 'bg-accent/30', text: 'text-accent' };
+    if (t.startsWith('$유형/') || t.startsWith('$')) return { bg: 'bg-success/30', text: 'text-success' };
+    if (t.startsWith('!우선순위/') || t.startsWith('!')) return { bg: 'bg-error/30', text: 'text-error' };
+    return { bg: 'bg-default', text: 'text-dim' };
   }
 
   function handleClick(e) {
diff --git a/frontend/src/lib/components/UploadDropzone.svelte b/frontend/src/lib/components/UploadDropzone.svelte
index 7229380..6c44e6b 100644
--- a/frontend/src/lib/components/UploadDropzone.svelte
+++ b/frontend/src/lib/components/UploadDropzone.svelte
@@ -98,27 +98,27 @@
 
 <!-- 전체 페이지 드래그 오버레이 -->
 {#if dragging}
-  <div class="fixed inset-0 z-50 bg-[var(--accent)]/10 border-2 border-dashed border-[var(--accent)] flex items-center justify-center">
-    <div class="bg-[var(--surface)] rounded-xl px-8 py-6 shadow-xl text-center">
-      <Upload size={32} class="mx-auto mb-2 text-[var(--accent)]" />
-      <p class="text-sm font-medium text-[var(--accent)]">여기에 파일을 놓으세요</p>
+  <div class="fixed inset-0 z-50 bg-accent/10 border-2 border-dashed border-accent flex items-center justify-center">
+    <div class="bg-surface rounded-xl px-8 py-6 shadow-xl text-center">
+      <Upload size={32} class="mx-auto mb-2 text-accent" />
+      <p class="text-sm font-medium text-accent">여기에 파일을 놓으세요</p>
     </div>
   </div>
 {/if}
 
 <!-- 업로드 진행 상태 -->
 {#if uploading && uploadFiles.length > 0}
-  <div class="mb-3 bg-[var(--surface)] border border-[var(--border)] rounded-lg p-3">
-    <p class="text-xs text-[var(--text-dim)] mb-2">업로드 중...</p>
+  <div class="mb-3 bg-surface border border-default rounded-lg p-3">
+    <p class="text-xs text-dim mb-2">업로드 중...</p>
     <div class="space-y-1 max-h-32 overflow-y-auto">
       {#each uploadFiles as f}
         <div class="flex items-center justify-between text-xs">
           <span class="truncate">{f.name}</span>
           <span class={
-            f.status === 'done' ? 'text-[var(--success)]' :
-            f.status === 'failed' ? 'text-[var(--error)]' :
-            f.status === 'uploading' ? 'text-[var(--accent)]' :
-            'text-[var(--text-dim)]'
+            f.status === 'done' ? 'text-success' :
+            f.status === 'failed' ? 'text-error' :
+            f.status === 'uploading' ? 'text-accent' :
+            'text-dim'
           }>
             {f.status === 'done' ? '✓' : f.status === 'failed' ? '✗' : f.status === 'uploading' ? '↑' : '…'}
           </span>