{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "현재 작업 위에 떠서 사용자의 입력이나 확인을 받는 모달입니다.", "registryDependencies": [ "@atom/tokens", "@atom/button", "@atom/icons", "@atom/lib-cn", "@atom/lib-context" ], "files": [ { "path": "poc/design-system/implement/src/components/dialog.tsx", "content": "\"use client\";\n\nimport {\n Children,\n type HTMLAttributes,\n type KeyboardEvent as ReactKeyboardEvent,\n type ReactNode,\n type Ref,\n type RefObject,\n isValidElement,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { createStrictContext } from \"../lib/context\";\nimport { Button } from \"./button\";\nimport { CloseIcon } from \"./icons\";\n\n/* -------------------------------------------------------------------------- */\n/* Dialog (components/dialog.md, styles/atom/elements/dialog.css) */\n/* */\n/* */\n/* */\n/* */\n/* */\n/* */\n/* -------------------------------------------------------------------------- */\n\nexport type DialogSize = \"medium\" | \"large\";\nexport type DialogRole = \"dialog\" | \"alertdialog\";\n\nconst B = \"atom-dialog\";\n\nconst [DialogContext, useDialogContext] = createStrictContext<{ stackActions: boolean }>(\"Dialog\");\n\nexport type DialogProps = Omit, \"title\" | \"role\"> & {\n ref?: Ref;\n /** 열림 상태입니다. Scrim 의 `data-state` 로 내려갑니다. */\n open?: boolean;\n /** 제목입니다. `

` 로 렌더하고 aria-labelledby 가 가리킵니다. */\n title: ReactNode;\n /** 제목 아래 설명입니다. Body 첫 문단(atom-dialog__description)이 됩니다. */\n description?: ReactNode;\n /** 최대 폭 480 · 800px 입니다. */\n size?: DialogSize;\n /** 확인이 강제되는 경고면 `alertdialog`. */\n role?: DialogRole;\n /** 헤더 닫기 버튼입니다. `alertdialog` 는 `false`. */\n showClose?: boolean;\n /** Scrim 클릭으로 닫습니다. 파괴적 작업과 `alertdialog` 는 `false`. */\n dismissOnScrim?: boolean;\n /** `Esc` 로 닫습니다. */\n dismissOnEsc?: boolean;\n /** Footer 를 세로로 쌓습니다. 주요 액션이 맨 아래로 갑니다. */\n stackActions?: boolean;\n /** 열림 상태가 바뀔 때 호출됩니다. */\n onOpenChange?: (open: boolean) => void;\n /** Scrim 을 뷰포트가 아니라 가장 가까운 positioned 조상 안에 가둡니다(`atom-dialog-scrim--contained`). 포털을 쓰지 않습니다. */\n contained?: boolean;\n};\n\nconst FOCUSABLE =\n 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), iframe, [contenteditable=\"true\"], [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusables(root: HTMLElement): HTMLElement[] {\n return [...root.querySelectorAll(FOCUSABLE)].filter((el) => !el.closest(\"[inert]\"));\n}\n\n/**\n * 모달 진입/퇴장: 트리거를 기억 → (포털 모드면) 배경 inert + 스크롤 잠금 → Panel 로 포커스.\n * 닫을 때는 inert 를 먼저 풀고 트리거로 포커스를 돌립니다(inert 요소는 포커스를 받지 못함).\n */\nfunction useModal(\n active: boolean,\n isolate: boolean,\n scrim: RefObject,\n panel: RefObject,\n) {\n useEffect(() => {\n if (!active) return;\n const returnTo = document.activeElement as HTMLElement | null;\n const changed: Element[] = [];\n let overflow: string | null = null;\n if (isolate) {\n const node = scrim.current;\n for (const el of document.body.children) {\n if ((node && el.contains(node)) || el.hasAttribute(\"inert\") || el.tagName === \"SCRIPT\") continue;\n el.setAttribute(\"inert\", \"\");\n changed.push(el);\n }\n overflow = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n }\n panel.current?.focus({ preventScroll: true });\n return () => {\n for (const el of changed) el.removeAttribute(\"inert\");\n if (overflow !== null) document.body.style.overflow = overflow;\n if (returnTo && returnTo.isConnected && returnTo !== document.body) returnTo.focus();\n };\n }, [active, isolate, scrim, panel]);\n}\n\nfunction DialogRoot({\n ref,\n open = false,\n title,\n description,\n size = \"medium\",\n role = \"dialog\",\n showClose = true,\n dismissOnScrim = true,\n dismissOnEsc = true,\n stackActions = false,\n onOpenChange,\n contained = false,\n className,\n children,\n onKeyDown,\n ...rest\n}: DialogProps) {\n const id = useId();\n const titleId = `${id}-title`;\n const bodyId = `${id}-desc`;\n const scrimRef = useRef(null);\n const panelRef = useRef(null);\n const bodyRef = useRef(null);\n const pressedOnScrim = useRef(false);\n const [bodyScroll, setBodyScroll] = useState(false);\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => setMounted(true), []);\n\n const close = () => onOpenChange?.(false);\n const closeRef = useRef(close);\n useLayoutEffect(() => {\n closeRef.current = close;\n });\n\n useModal(open && mounted, !contained, scrimRef, panelRef);\n\n // Esc — 포커스가 어디 있든(스크림 클릭 직후 등) 받습니다.\n useEffect(() => {\n if (!open || !dismissOnEsc) return;\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\" && !e.defaultPrevented) {\n e.preventDefault();\n closeRef.current();\n }\n };\n document.addEventListener(\"keydown\", onKey);\n return () => document.removeEventListener(\"keydown\", onKey);\n }, [open, dismissOnEsc]);\n\n // Body 가 실제로 넘칠 때만 data-body-scroll\n useEffect(() => {\n const body = bodyRef.current;\n if (!open || !body) return;\n const measure = () => setBodyScroll(body.scrollHeight > body.clientHeight + 1);\n measure();\n if (typeof ResizeObserver === \"undefined\") return;\n const ro = new ResizeObserver(measure);\n ro.observe(body);\n for (const child of body.children) ro.observe(child);\n return () => ro.disconnect();\n }, [open, mounted, children, description]);\n\n const trapTab = (e: ReactKeyboardEvent) => {\n onKeyDown?.(e);\n if (e.key !== \"Tab\" || e.defaultPrevented || !panelRef.current) return;\n const list = focusables(panelRef.current);\n if (list.length === 0) {\n e.preventDefault();\n panelRef.current.focus();\n return;\n }\n const first = list[0]!;\n const last = list[list.length - 1]!;\n const active = document.activeElement;\n if (e.shiftKey && (active === first || active === panelRef.current)) {\n e.preventDefault();\n last.focus();\n } else if (!e.shiftKey && active === last) {\n e.preventDefault();\n first.focus();\n }\n };\n\n // children 중 Footer 는 Panel 끝으로, 나머지는 Body 로\n let footer: ReactNode = null;\n const bodyContent: ReactNode[] = [];\n Children.forEach(children, (child) => {\n if (isValidElement(child) && child.type === DialogFooter) footer = child;\n else if (child !== null && child !== undefined && child !== false) bodyContent.push(child);\n });\n const hasBody = description !== undefined || bodyContent.length > 0;\n\n const scrim = (\n