feat: Layer 프리미티브 (Drawer / Modal / ConfirmDialog / Tabs)
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>
This commit is contained in:
Hyungi Ahn
52
frontend/src/lib/components/ui/ConfirmDialog.svelte
Normal file
52
frontend/src/lib/components/ui/ConfirmDialog.svelte
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<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>
|
||||||
62
frontend/src/lib/components/ui/Drawer.svelte
Normal file
62
frontend/src/lib/components/ui/Drawer.svelte
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
// 사이드 슬라이드 패널. uiState의 단일 drawer slot과 결합.
|
||||||
|
// - id: 'sidebar' | 'meta' (동시에 둘 다 열리지 않음)
|
||||||
|
// - 새 drawer 열면 ui.openDrawer(id)가 자동으로 이전 drawer를 치움
|
||||||
|
// - 모바일/태블릿에서 메타 패널을 표시하는 폴백 경로 (xl+에서는 inline rail 사용)
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
import { ui } from '$lib/stores/uiState.svelte';
|
||||||
|
|
||||||
|
type Side = 'left' | 'right';
|
||||||
|
type Width = 'sidebar' | 'rail';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
id: 'sidebar' | 'meta';
|
||||||
|
side?: Side;
|
||||||
|
width?: Width;
|
||||||
|
children?: Snippet;
|
||||||
|
'aria-label'?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
id,
|
||||||
|
side = 'left',
|
||||||
|
width = 'sidebar',
|
||||||
|
children,
|
||||||
|
'aria-label': ariaLabel = '드로어',
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
let open = $derived(ui.isDrawerOpen(id));
|
||||||
|
|
||||||
|
let widthClass = $derived(width === 'sidebar' ? 'w-sidebar' : 'w-rail');
|
||||||
|
let sideClass = $derived(side === 'left' ? 'left-0' : 'right-0');
|
||||||
|
let translateClosed = $derived(side === 'left' ? '-translate-x-full' : 'translate-x-full');
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
ui.closeDrawer();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if open}
|
||||||
|
<!-- backdrop -->
|
||||||
|
<div class="fixed inset-0 z-drawer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick={close}
|
||||||
|
class="absolute inset-0 bg-scrim transition-opacity"
|
||||||
|
aria-label="드로어 닫기"
|
||||||
|
></button>
|
||||||
|
|
||||||
|
<!-- panel -->
|
||||||
|
<aside
|
||||||
|
class={[
|
||||||
|
'absolute top-0 bottom-0 z-drawer bg-sidebar shadow-xl transition-transform',
|
||||||
|
sideClass,
|
||||||
|
widthClass,
|
||||||
|
open ? 'translate-x-0' : translateClosed,
|
||||||
|
].join(' ')}
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
>
|
||||||
|
{@render children?.()}
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
137
frontend/src/lib/components/ui/Modal.svelte
Normal file
137
frontend/src/lib/components/ui/Modal.svelte
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
// Modal stack 지원 — confirm 위에 nested 모달을 쌓을 수 있다.
|
||||||
|
// z-index = z-modal + (stack 인덱스 * 2). backdrop / panel 둘 다 한 칸씩.
|
||||||
|
// 최상단 modal만 focus trap 활성, 아래는 inert 처리.
|
||||||
|
// native <dialog>를 쓰지 않는 이유: top-layer가 단일이라 stack을 지원하지 않음.
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
import { X } from 'lucide-svelte';
|
||||||
|
import { ui } from '$lib/stores/uiState.svelte';
|
||||||
|
import IconButton from './IconButton.svelte';
|
||||||
|
|
||||||
|
type Size = 'sm' | 'md' | 'lg';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
id: string;
|
||||||
|
title?: string;
|
||||||
|
size?: Size;
|
||||||
|
closable?: boolean;
|
||||||
|
children?: Snippet;
|
||||||
|
footer?: Snippet;
|
||||||
|
'aria-label'?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
id,
|
||||||
|
title,
|
||||||
|
size = 'md',
|
||||||
|
closable = true,
|
||||||
|
children,
|
||||||
|
footer,
|
||||||
|
'aria-label': ariaLabel,
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
let open = $derived(ui.isModalOpen(id));
|
||||||
|
let stackIndex = $derived(ui.modalIndex(id));
|
||||||
|
let isTop = $derived(stackIndex === ui.modalStack.length - 1);
|
||||||
|
|
||||||
|
// z-index 계산: backdrop과 panel을 별개의 stacking context로 두기 위해 *2
|
||||||
|
let backdropZ = $derived(`calc(var(--z-modal) + ${stackIndex * 2})`);
|
||||||
|
let panelZ = $derived(`calc(var(--z-modal) + ${stackIndex * 2 + 1})`);
|
||||||
|
|
||||||
|
const sizeClass: Record<Size, string> = {
|
||||||
|
sm: 'max-w-sm',
|
||||||
|
md: 'max-w-md',
|
||||||
|
lg: 'max-w-2xl',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 패널 ref + focus trap
|
||||||
|
let panelEl: HTMLDivElement | undefined = $state();
|
||||||
|
|
||||||
|
// open 토글 시: 열릴 때 패널 안 첫 focusable로 포커스 이동
|
||||||
|
$effect(() => {
|
||||||
|
if (!open || !isTop || !panelEl) return;
|
||||||
|
const focusables = panelEl.querySelectorAll<HTMLElement>(
|
||||||
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||||
|
);
|
||||||
|
const first = focusables[0];
|
||||||
|
if (first) first.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
if (closable) ui.closeModal(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 최상단 modal 안에서만 Tab 사이클을 가둔다
|
||||||
|
function onKeydown(e: KeyboardEvent) {
|
||||||
|
if (!isTop || !panelEl) return;
|
||||||
|
if (e.key !== 'Tab') return;
|
||||||
|
const focusables = Array.from(
|
||||||
|
panelEl.querySelectorAll<HTMLElement>(
|
||||||
|
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
|
||||||
|
)
|
||||||
|
);
|
||||||
|
if (focusables.length === 0) return;
|
||||||
|
const first = focusables[0];
|
||||||
|
const last = focusables[focusables.length - 1];
|
||||||
|
if (e.shiftKey && document.activeElement === first) {
|
||||||
|
e.preventDefault();
|
||||||
|
last.focus();
|
||||||
|
} else if (!e.shiftKey && document.activeElement === last) {
|
||||||
|
e.preventDefault();
|
||||||
|
first.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if open}
|
||||||
|
<!-- backdrop -->
|
||||||
|
<div
|
||||||
|
class="fixed inset-0 bg-scrim transition-opacity"
|
||||||
|
style="z-index: {backdropZ}"
|
||||||
|
aria-hidden="true"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<!-- panel container (centers modal) -->
|
||||||
|
<div
|
||||||
|
class="fixed inset-0 flex items-center justify-center p-4"
|
||||||
|
style="z-index: {panelZ}"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label={ariaLabel ?? title}
|
||||||
|
inert={!isTop ? true : undefined}
|
||||||
|
onkeydown={onKeydown}
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
bind:this={panelEl}
|
||||||
|
class={[
|
||||||
|
'w-full bg-surface border border-default rounded-card shadow-xl',
|
||||||
|
'flex flex-col max-h-[90vh]',
|
||||||
|
sizeClass[size],
|
||||||
|
].join(' ')}
|
||||||
|
>
|
||||||
|
{#if title || closable}
|
||||||
|
<header class="flex items-center justify-between px-5 py-3 border-b border-default shrink-0">
|
||||||
|
{#if title}
|
||||||
|
<h2 class="text-sm font-semibold text-text">{title}</h2>
|
||||||
|
{:else}
|
||||||
|
<span></span>
|
||||||
|
{/if}
|
||||||
|
{#if closable}
|
||||||
|
<IconButton icon={X} aria-label="닫기" onclick={close} size="sm" />
|
||||||
|
{/if}
|
||||||
|
</header>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="flex-1 min-h-0 overflow-y-auto px-5 py-4 text-sm text-text">
|
||||||
|
{@render children?.()}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if footer}
|
||||||
|
<footer class="flex items-center justify-end gap-2 px-5 py-3 border-t border-default shrink-0">
|
||||||
|
{@render footer()}
|
||||||
|
</footer>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
111
frontend/src/lib/components/ui/Tabs.svelte
Normal file
111
frontend/src/lib/components/ui/Tabs.svelte
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
// ARIA tablist + tab + tabpanel. 좌우 화살표 키 nav.
|
||||||
|
// children snippet은 (activeId: string) => UI 시그니처로 받는다.
|
||||||
|
// 사용처:
|
||||||
|
// <Tabs tabs={[{id:'edit',label:'편집'},{id:'preview',label:'미리보기'}]} bind:value={mode}>
|
||||||
|
// {#snippet children(activeId)}
|
||||||
|
// {#if activeId === 'edit'}<EditPanel />{/if}
|
||||||
|
// {#if activeId === 'preview'}<PreviewPanel />{/if}
|
||||||
|
// {/snippet}
|
||||||
|
// </Tabs>
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
|
||||||
|
export interface Tab {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
tabs: Tab[];
|
||||||
|
value?: string;
|
||||||
|
children?: Snippet<[string]>;
|
||||||
|
class?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { tabs, value = $bindable(tabs[0]?.id ?? ''), children, class: className = '' }: Props = $props();
|
||||||
|
|
||||||
|
const autoId = $props.id();
|
||||||
|
|
||||||
|
function tabId(id: string) {
|
||||||
|
return `tab-${autoId}-${id}`;
|
||||||
|
}
|
||||||
|
function panelId(id: string) {
|
||||||
|
return `panel-${autoId}-${id}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function select(id: string) {
|
||||||
|
if (tabs.find((t) => t.id === id)?.disabled) return;
|
||||||
|
value = id;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeydown(e: KeyboardEvent) {
|
||||||
|
const enabled = tabs.filter((t) => !t.disabled);
|
||||||
|
const idx = enabled.findIndex((t) => t.id === value);
|
||||||
|
if (idx === -1) return;
|
||||||
|
if (e.key === 'ArrowRight') {
|
||||||
|
e.preventDefault();
|
||||||
|
const next = enabled[(idx + 1) % enabled.length];
|
||||||
|
select(next.id);
|
||||||
|
document.getElementById(tabId(next.id))?.focus();
|
||||||
|
} else if (e.key === 'ArrowLeft') {
|
||||||
|
e.preventDefault();
|
||||||
|
const prev = enabled[(idx - 1 + enabled.length) % enabled.length];
|
||||||
|
select(prev.id);
|
||||||
|
document.getElementById(tabId(prev.id))?.focus();
|
||||||
|
} else if (e.key === 'Home') {
|
||||||
|
e.preventDefault();
|
||||||
|
const first = enabled[0];
|
||||||
|
select(first.id);
|
||||||
|
document.getElementById(tabId(first.id))?.focus();
|
||||||
|
} else if (e.key === 'End') {
|
||||||
|
e.preventDefault();
|
||||||
|
const last = enabled[enabled.length - 1];
|
||||||
|
select(last.id);
|
||||||
|
document.getElementById(tabId(last.id))?.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class={className}>
|
||||||
|
<div
|
||||||
|
role="tablist"
|
||||||
|
tabindex="-1"
|
||||||
|
class="flex items-center gap-1 border-b border-default"
|
||||||
|
onkeydown={onKeydown}
|
||||||
|
>
|
||||||
|
{#each tabs as tab (tab.id)}
|
||||||
|
{@const active = tab.id === value}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
role="tab"
|
||||||
|
id={tabId(tab.id)}
|
||||||
|
aria-selected={active}
|
||||||
|
aria-controls={panelId(tab.id)}
|
||||||
|
tabindex={active ? 0 : -1}
|
||||||
|
disabled={tab.disabled}
|
||||||
|
onclick={() => select(tab.id)}
|
||||||
|
class={[
|
||||||
|
'px-3 h-9 text-sm font-medium border-b-2 -mb-px transition-colors',
|
||||||
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring rounded-t',
|
||||||
|
active
|
||||||
|
? 'text-accent border-accent'
|
||||||
|
: 'text-dim border-transparent hover:text-text',
|
||||||
|
tab.disabled ? 'opacity-50 cursor-not-allowed' : '',
|
||||||
|
].join(' ')}
|
||||||
|
>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
role="tabpanel"
|
||||||
|
id={panelId(value)}
|
||||||
|
aria-labelledby={tabId(value)}
|
||||||
|
tabindex="0"
|
||||||
|
class="focus-visible:outline-none"
|
||||||
|
>
|
||||||
|
{@render children?.(value)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user