From 8742367bc25a9305ecc2bf4ded2b88043044b6b3 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Tue, 7 Apr 2026 08:26:11 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20stores=20=EB=B6=84=EB=A6=AC=20?=
 =?UTF-8?q?=E2=80=94=20toast=20/=20uiState=20=EB=8B=A8=EC=9D=BC=20?=
 =?UTF-8?q?=EC=B1=85=EC=9E=84=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UX/UI 개편 Phase A-2. lib/stores/ui.ts에 섞여 있던 toast 시스템과
UI layer 상태(미사용 dead export 포함)를 의미 단위로 분리한다.
한 파일이 비대해지는 시나리오를 처음부터 차단(plan 8대 원칙 #7).

- lib/stores/toast.ts 신규 — toasts/addToast/removeToast (Toast interface export)
- lib/stores/uiState.svelte.ts 신규 — drawer 단일 slot + modal stack 클래스 (5대 원칙 #2)
  · openDrawer/closeDrawer/isDrawerOpen
  · openModal/closeTopModal/isModalOpen/modalIndex/topModal
  · handleEscape (modal stack 우선 → drawer)
- lib/stores/ui.ts 삭제 — sidebarOpen/selectedDocId는 어디서도 import되지 않은 dead export였음
- 11개 파일 import 경로 갱신: \$lib/stores/ui → \$lib/stores/toast

uiState는 아직 어디서도 사용 안 함 — Phase B에서 sidebar/meta drawer가 전환될 때
ui.openDrawer('sidebar') 형태로 채택. 동작 변경 0.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/DocumentViewer.svelte  |  2 +-
 .../src/lib/components/PreviewPanel.svelte    |  2 +-
 .../src/lib/components/UploadDropzone.svelte  |  2 +-
 frontend/src/lib/stores/{ui.ts => toast.ts}   | 11 ++--
 frontend/src/lib/stores/uiState.svelte.ts     | 57 +++++++++++++++++++
 frontend/src/routes/+layout.svelte            |  2 +-
 frontend/src/routes/+page.svelte              |  2 +-
 frontend/src/routes/documents/+page.svelte    |  2 +-
 .../src/routes/documents/[id]/+page.svelte    |  2 +-
 frontend/src/routes/inbox/+page.svelte        |  2 +-
 frontend/src/routes/login/+page.svelte        |  2 +-
 frontend/src/routes/news/+page.svelte         |  2 +-
 frontend/src/routes/settings/+page.svelte     |  2 +-
 13 files changed, 72 insertions(+), 18 deletions(-)
 rename frontend/src/lib/stores/{ui.ts => toast.ts} (63%)
 create mode 100644 frontend/src/lib/stores/uiState.svelte.ts

diff --git a/frontend/src/lib/components/DocumentViewer.svelte b/frontend/src/lib/components/DocumentViewer.svelte
index 457cac9..a0387d1 100644
--- a/frontend/src/lib/components/DocumentViewer.svelte
+++ b/frontend/src/lib/components/DocumentViewer.svelte
@@ -1,6 +1,6 @@
 <script>
   import { api, getAccessToken } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { marked } from 'marked';
   import DOMPurify from 'dompurify';
   import { ExternalLink, Save, RefreshCw } from 'lucide-svelte';
diff --git a/frontend/src/lib/components/PreviewPanel.svelte b/frontend/src/lib/components/PreviewPanel.svelte
index 5b085d1..2739fb3 100644
--- a/frontend/src/lib/components/PreviewPanel.svelte
+++ b/frontend/src/lib/components/PreviewPanel.svelte
@@ -1,7 +1,7 @@
 <script>
   import { X, ExternalLink, Plus, Save, Trash2 } from 'lucide-svelte';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import FormatIcon from './FormatIcon.svelte';
   import TagPill from './TagPill.svelte';
 
diff --git a/frontend/src/lib/components/UploadDropzone.svelte b/frontend/src/lib/components/UploadDropzone.svelte
index 9234736..7229380 100644
--- a/frontend/src/lib/components/UploadDropzone.svelte
+++ b/frontend/src/lib/components/UploadDropzone.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { Upload } from 'lucide-svelte';
 
   let { onupload = () => {} } = $props();
diff --git a/frontend/src/lib/stores/ui.ts b/frontend/src/lib/stores/toast.ts
similarity index 63%
rename from frontend/src/lib/stores/ui.ts
rename to frontend/src/lib/stores/toast.ts
index 0261fcd..dfdc267 100644
--- a/frontend/src/lib/stores/ui.ts
+++ b/frontend/src/lib/stores/toast.ts
@@ -1,10 +1,7 @@
 import { writable } from 'svelte/store';
 
-export const sidebarOpen = writable(true);
-export const selectedDocId = writable<number | null>(null);
-
-// Toast 시스템
-interface Toast {
+// Toast 시스템 — UI state(drawer/modal)와 분리된 알림 전용 store
+export interface Toast {
   id: number;
   type: 'success' | 'error' | 'warning' | 'info';
   message: string;
@@ -15,7 +12,7 @@ export const toasts = writable<Toast[]>([]);
 
 export function addToast(type: Toast['type'], message: string, duration = 5000) {
   const id = ++toastId;
-  toasts.update(t => [...t, { id, type, message }]);
+  toasts.update((t) => [...t, { id, type, message }]);
   if (duration > 0) {
     setTimeout(() => removeToast(id), duration);
   }
@@ -23,5 +20,5 @@ export function addToast(type: Toast['type'], message: string, duration = 5000)
 }
 
 export function removeToast(id: number) {
-  toasts.update(t => t.filter(toast => toast.id !== id));
+  toasts.update((t) => t.filter((toast) => toast.id !== id));
 }
diff --git a/frontend/src/lib/stores/uiState.svelte.ts b/frontend/src/lib/stores/uiState.svelte.ts
new file mode 100644
index 0000000..2cdc75d
--- /dev/null
+++ b/frontend/src/lib/stores/uiState.svelte.ts
@@ -0,0 +1,57 @@
+// 중앙 UI layer 상태 — drawer는 단일 slot, modal은 stack.
+// drawer/modal/toast 동시 오픈 시 focus/scroll/Esc 충돌을 차단하기 위한 single source.
+// (toast는 별도 store. drawer가 persistent inline panel(예: xl+ meta rail)일 때는
+//  여기 시스템 밖이다 — 그저 레이아웃의 일부.)
+
+type Drawer = { id: 'sidebar' | 'meta' } | null;
+type Modal = { id: string };
+
+class UIState {
+  drawer = $state<Drawer>(null);
+  modalStack = $state<Modal[]>([]);
+
+  // ── Drawer (단일 slot) ──────────────────────────────
+  openDrawer(id: 'sidebar' | 'meta') {
+    // 새 drawer 열면 이전 drawer는 자동으로 사라진다 (단일 slot)
+    this.drawer = { id };
+  }
+  closeDrawer() {
+    this.drawer = null;
+  }
+  isDrawerOpen(id: 'sidebar' | 'meta') {
+    return this.drawer?.id === id;
+  }
+
+  // ── Modal (stack — confirm 위에 nested 가능) ─────────
+  openModal(id: string) {
+    this.modalStack = [...this.modalStack, { id }];
+  }
+  closeTopModal() {
+    this.modalStack = this.modalStack.slice(0, -1);
+  }
+  closeModal(id: string) {
+    this.modalStack = this.modalStack.filter((m) => m.id !== id);
+  }
+  isModalOpen(id: string) {
+    return this.modalStack.some((m) => m.id === id);
+  }
+  // 특정 modal의 stack 인덱스 (z-index 계산용; 없으면 -1)
+  modalIndex(id: string) {
+    return this.modalStack.findIndex((m) => m.id === id);
+  }
+  get topModal() {
+    return this.modalStack[this.modalStack.length - 1] ?? null;
+  }
+
+  // ── 글로벌 Esc 핸들러 ────────────────────────────────
+  // 우선순위: 가장 위 modal → drawer
+  handleEscape() {
+    if (this.modalStack.length > 0) {
+      this.closeTopModal();
+    } else if (this.drawer) {
+      this.closeDrawer();
+    }
+  }
+}
+
+export const ui = new UIState();
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 05862c2..271db07 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { isAuthenticated, user, tryRefresh, logout } from '$lib/stores/auth';
-  import { toasts, removeToast } from '$lib/stores/ui';
+  import { toasts, removeToast } from '$lib/stores/toast';
   import Sidebar from '$lib/components/Sidebar.svelte';
   import '../app.css';
 
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index ea2f3a6..752d522 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
 
   let dashboard = null;
   let loading = true;
diff --git a/frontend/src/routes/documents/+page.svelte b/frontend/src/routes/documents/+page.svelte
index 4c95469..ee0e7f2 100644
--- a/frontend/src/routes/documents/+page.svelte
+++ b/frontend/src/routes/documents/+page.svelte
@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { Info } from 'lucide-svelte';
   import { List, LayoutGrid } from 'lucide-svelte';
   import DocumentCard from '$lib/components/DocumentCard.svelte';
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 13704d3..c362af3 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import { api, getAccessToken } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { marked } from 'marked';
   import DOMPurify from 'dompurify';
   import TagPill from '$lib/components/TagPill.svelte';
diff --git a/frontend/src/routes/inbox/+page.svelte b/frontend/src/routes/inbox/+page.svelte
index ebf9d8f..0c74b1c 100644
--- a/frontend/src/routes/inbox/+page.svelte
+++ b/frontend/src/routes/inbox/+page.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
 
   let documents = [];
   let loading = true;
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index be295d4..ada0cc9 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -1,7 +1,7 @@
 <script>
   import { goto } from '$app/navigation';
   import { login } from '$lib/stores/auth';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
 
   let username = '';
   let password = '';
diff --git a/frontend/src/routes/news/+page.svelte b/frontend/src/routes/news/+page.svelte
index f05f79b..2289e77 100644
--- a/frontend/src/routes/news/+page.svelte
+++ b/frontend/src/routes/news/+page.svelte
@@ -3,7 +3,7 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { marked } from 'marked';
   import DOMPurify from 'dompurify';
 
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 000ba48..dd61600 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { user } from '$lib/stores/auth';
 
   let currentPassword = '';