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

refactor(tokens): A-8 Batch 1 — TagPill / UploadDropzone

Browse Source 
색상 시스템을 의미 토큰으로 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 미수정.
This commit is contained in:
Hyungi Ahn
2026-04-07 11:44:29 +09:00
parent fcce764e9d
commit 451c2181a0
2 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/lib/components/TagPill.svelte
View File

@@ -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) {

20
frontend/src/lib/components/UploadDropzone.svelte
View File

@@ -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>