e104d1b47c
UX/UI 개편 Phase A-7. uiState와 결합한 layer/dialog 컴포넌트. 신규 컴포넌트 (lib/components/ui/) - Drawer.svelte: 단일 slot drawer (id: 'sidebar' | 'meta'). ui.isDrawerOpen(id)로 표시 여부 결정. 새 drawer 열면 이전 drawer 자동 close. side(left/right) + width(sidebar/rail). backdrop 클릭으로 close. z-drawer 사용. 8대 원칙 #2. - Modal.svelte: stack 지원 modal (5대 원칙 #2 — confirm 위에 nested 가능). native <dialog> 대신 div 기반 — top-layer가 단일이라 <dialog>로는 stack 불가. z-index = z-modal + (stackIndex * 2): backdrop과 panel을 별개의 stacking context로 두기 위해 *2. 최상단 modal만 focus trap + 키보드 nav 활성, 아래는 inert 처리. 수동 Tab/Shift+Tab cycling. closable + IconButton(X) 헤더, footer snippet 지원. - ConfirmDialog.svelte: Modal 위 얇은 wrapper. 삭제/되돌릴 수 없는 작업에 사용. tone(danger/primary), confirmLabel/cancelLabel, onconfirm 콜백. ui.openModal(id)로 호출. - Tabs.svelte: ARIA tablist + tab + tabpanel. 좌우 화살표 / Home / End 키 nav, \$props.id() 기반 SSR-safe ID. tabs: { id, label, disabled? }[], value \$bindable. children snippet은 (activeId) => UI 시그니처 — DocumentViewer 편집/미리보기 토글 등 단일 컨테이너 레이아웃에 쓰기 좋게 설계. 이로써 Phase A 프리미티브 13종 완비: Button, IconButton, Card, Badge, Skeleton, EmptyState, TextInput, Textarea, Select, Drawer, Modal, ConfirmDialog, Tabs. 모든 컴포넌트는 Svelte 5 runes mode strict, @theme 토큰만 사용, focus-visible ring 통일, slot은 {@render children?.()}로 작성. svelte-check: 0 errors / 8 warnings (전부 기존 latent, 새 코드 무관) build: 2.07s 무경고 남은 Phase A: - A-8 토큰 swap (Sidebar/TagPill/UploadDropzone/PreviewPanel/DocumentCard/ DocumentTable/+layout toast — baseline 421건 → 0건) - A-9 __styleguide 라우트 (전체 시각 검증 + Modal stack 데모) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
53 lines
1.3 KiB
Svelte
53 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
// 삭제/되돌릴 수 없는 작업의 확인 dialog. Modal 위 얇은 wrapper.
|
|
// 사용처에서 ui.openModal(id) 호출하면 표시됨.
|
|
import { ui } from '$lib/stores/uiState.svelte';
|
|
import Modal from './Modal.svelte';
|
|
import Button from './Button.svelte';
|
|
|
|
type Tone = 'danger' | 'primary';
|
|
|
|
interface Props {
|
|
id: string;
|
|
title: string;
|
|
message: string;
|
|
confirmLabel?: string;
|
|
cancelLabel?: string;
|
|
tone?: Tone;
|
|
loading?: boolean;
|
|
onconfirm: () => void | Promise<void>;
|
|
}
|
|
|
|
let {
|
|
id,
|
|
title,
|
|
message,
|
|
confirmLabel = '확인',
|
|
cancelLabel = '취소',
|
|
tone = 'danger',
|
|
loading = false,
|
|
onconfirm,
|
|
}: Props = $props();
|
|
|
|
function cancel() {
|
|
ui.closeModal(id);
|
|
}
|
|
|
|
async function confirm() {
|
|
await onconfirm();
|
|
// onconfirm이 닫지 않으면 우리가 닫는다 (멱등하게 처리됨)
|
|
if (ui.isModalOpen(id)) ui.closeModal(id);
|
|
}
|
|
</script>
|
|
|
|
<Modal {id} {title} size="sm">
|
|
<p class="text-sm text-dim leading-relaxed">{message}</p>
|
|
|
|
{#snippet footer()}
|
|
<Button variant="ghost" size="sm" onclick={cancel}>{cancelLabel}</Button>
|
|
<Button variant={tone === 'danger' ? 'danger' : 'primary'} size="sm" {loading} onclick={confirm}>
|
|
{confirmLabel}
|
|
</Button>
|
|
{/snippet}
|
|
</Modal>
|