@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Popup/LoadTablePopup.css

@@ -0,0 +1,248 @@
+.popup--load-table .popup-panel { width: fit-content; min-width: 320px; max-width: calc(100% - 40px); }
+.popup--load-table .popup-content { flex: 0 1 auto; }
+.popup--load-table .popup-footer { gap: var(--spacing-l); }
+
+.load-table-popup__body {
+  padding: 0 20px;
+}
+
+.load-table-popup__footer-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.load-table-popup__empty {
+  margin: 0;
+  color: var(--color-lightGray);
+  text-align: center;
+  padding: 32px 0;
+}
+
+/* ── 그리드 ── */
+.load-table-popup__grid {
+  list-style: none;
+  margin: 0;
+  padding: 2px;
+  display: grid;
+  grid-template-columns: repeat(4, 180px);
+  gap: var(--spacing-s);
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  max-height: calc(100vh - 280px);
+}
+
+/* ── 카드 ── */
+.load-table-popup__card {
+  position: relative;
+  border: 1.5px solid var(--color-whiteLine);
+  border-radius: var(--radius-card);
+  background: var(--color-deepWhite);
+  cursor: pointer;
+  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.load-table-popup__card:not(.load-table-popup__card--selected):hover {
+  background: var(--color-white);
+  border-color: var(--color-main);
+  box-shadow: 0 0 0 1px var(--color-main);
+}
+
+.load-table-popup__card--selected {
+  border-color: var(--color-main);
+  background: var(--color-white);
+  box-shadow: 0 0 0 2px var(--color-main);
+}
+
+/* ── 삭제 버튼 (공통) ── */
+.load-table-popup__delete {
+  opacity: 0;
+  transition: opacity 0.12s;
+  flex-shrink: 0;
+}
+
+/* 그리드 카드에서는 absolute */
+.load-table-popup__card .load-table-popup__delete {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 1;
+}
+
+/* 키보드 대응 — hover만으로 드러나면 Tab 사용자는 보이지 않는 삭제 버튼을 만난다 */
+.load-table-popup__card:not(.load-table-popup__card--selected):focus-within .load-table-popup__delete,
+.load-table-popup__delete:focus-within,
+.load-table-popup__delete:focus-visible,
+.load-table-popup__card:not(.load-table-popup__card--selected):hover .load-table-popup__delete {
+  opacity: 1;
+}
+
+/* ── 썸네일: 컨테이너 배경을 구분선 색으로, 셀은 흰색으로 gap이 격자선 역할 ── */
+.load-table-popup__thumb {
+  display: grid;
+  gap: 1px;
+  background: var(--color-whiteLine);
+  border-bottom: 1px solid var(--color-whiteLine);
+  height: 140px;
+  grid-auto-rows: 1fr;
+}
+
+.load-table-popup__thumb-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: var(--color-white);
+  gap: 1px;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.load-table-popup__thumb-cell--empty {
+  background: var(--color-deepWhite);
+}
+
+.load-table-popup__thumb-word {
+  font-weight: 600;
+  color: var(--color-black);
+  line-height: 1;
+}
+
+.load-table-popup__thumb-sub {
+  font-size: 9px;
+  color: var(--color-gray);
+  line-height: 1;
+}
+
+.load-table-popup__thumb-divider {
+  display: block;
+  width: 30%;
+  height: 1px;
+  background: var(--color-whiteLine);
+  margin: 4px 0;
+}
+
+/* ── 카드 하단 정보 ── */
+.load-table-popup__card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 12px;
+}
+
+.load-table-popup__card-name {
+  color: var(--color-black);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.load-table-popup__card-meta {
+  color: var(--color-lightGray);
+}
+
+/* ── 리스트 뷰 ── */
+.load-table-popup__list {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  max-height: calc(100vh - 280px);
+}
+
+.load-table-popup__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  padding: 10px 12px;
+  border-radius: var(--radius-s);
+  cursor: pointer;
+  transition: background 0.12s;
+  border: 1.5px solid transparent;
+}
+
+.load-table-popup__row:hover {
+  background: var(--color-deepWhite);
+}
+
+.load-table-popup__row--selected {
+  background: var(--color-white);
+  border-color: var(--color-main);
+  box-shadow: 0 0 0 1px var(--color-main);
+}
+
+.load-table-popup__row-check {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-main);
+}
+
+.load-table-popup__row-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.load-table-popup__row-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-black);
+  font-weight: 600;
+  text-align: left;
+}
+
+.load-table-popup__row-words {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  max-height: calc((1.6em + 4px) * 2);
+  overflow: hidden;
+}
+
+.load-table-popup__row-word {
+  padding: 2px 8px;
+  border-radius: var(--radius-m);
+  background: var(--color-deepWhite);
+  color: var(--color-gray);
+  border: 1px solid var(--color-whiteLine);
+  white-space: nowrap;
+}
+
+.load-table-popup__row-count {
+  flex-shrink: 0;
+  color: var(--color-gray);
+  min-width: 40px;
+  text-align: right;
+}
+
+.load-table-popup__row-date {
+  flex-shrink: 0;
+  color: var(--color-lightGray);
+  min-width: 90px;
+  text-align: right;
+}
+
+.load-table-popup__row .load-table-popup__delete {
+  position: static;
+}
+
+.load-table-popup__row:focus-within .load-table-popup__delete,
+.load-table-popup__row:hover .load-table-popup__delete {
+  opacity: 1;
+}

package/dist/packages/core/src/components/Popup/LoadTablePopup.d.ts

@@ -0,0 +1,12 @@
+import { type SavedWordTable } from '../../utils/savedWordTables';
+import './LoadTablePopup.css';
+interface LoadTablePopupProps {
+    onLoad: (table: SavedWordTable) => void;
+    onCancel: () => void;
+    /** 외부에서 테이블 목록을 주입할 때 사용. 없으면 localStorage에서 로드. */
+    tables?: SavedWordTable[];
+    /** 외부에서 삭제를 처리할 때 사용. 없으면 localStorage에서 삭제. */
+    onDelete?: (id: string) => void;
+}
+export default function LoadTablePopup({ onLoad, onCancel, tables: tablesProp, onDelete: onDeleteProp }: LoadTablePopupProps): import("react").JSX.Element;
+export {};

package/dist/packages/core/src/components/Popup/LoadTablePopup.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import Popup from './Popup';
+import Button from '../Button';
+import Dropdown from '../Dropdown';
+import { getSavedTables, deleteTable as localDeleteTable } from '../../utils/savedWordTables';
+import { formatYmd } from '../../utils/date';
+import './LoadTablePopup.css';
+function formatDate(iso) { return formatYmd(iso, { sep: '. ', pad: false, trailingDot: true }); }
+// value 는 정렬·보기 키(로직용)라 그대로 두고, 화면에 보이는 label 만 번역한다.
+// 예전엔 label 도 여기 박아 둬서 영어 로케일에서 이 드롭다운만 한국어로 남았다.
+const SORT_OPTION_KEYS = [
+    { value: 'newest', i18nKey: 'wordTable.loadTable.sort.newest', fallback: '최신순' },
+    { value: 'oldest', i18nKey: 'wordTable.loadTable.sort.oldest', fallback: '오래된순' },
+    { value: 'name', i18nKey: 'wordTable.loadTable.sort.name', fallback: '이름순' },
+    { value: 'count', i18nKey: 'wordTable.loadTable.sort.count', fallback: '단어 수' },
+];
+const VIEW_OPTION_KEYS = [
+    { value: 'grid', i18nKey: 'wordTable.loadTable.view.grid', fallback: '표로 보기' },
+    { value: 'list', i18nKey: 'wordTable.loadTable.view.list', fallback: '리스트로 보기' },
+];
+function TableThumbnail({ table }) {
+    const n = table.items.length;
+    const rows = n <= 3 ? 1 : 2;
+    const cols = Math.ceil(n / rows) || 1;
+    const total = cols * rows;
+    return (_jsx("div", { className: "load-table-popup__thumb", style: { gridTemplateColumns: `repeat(${cols}, 1fr)` }, children: Array.from({ length: total }, (_, i) => {
+            const item = table.items[i];
+            if (!item)
+                return _jsx("div", { className: "load-table-popup__thumb-cell load-table-popup__thumb-cell--empty" }, i);
+            return (_jsx("div", { className: "load-table-popup__thumb-cell", children: item.words.length >= 2 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "load-table-popup__thumb-word body-3", children: item.words[0].label }), _jsx("span", { className: "load-table-popup__thumb-divider" }), _jsx("span", { className: "load-table-popup__thumb-word body-3", children: item.words[1].label })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "load-table-popup__thumb-word body-3", children: item.words[0]?.label ?? item.id }), item.words[0]?.subLabel && (_jsx("span", { className: "load-table-popup__thumb-sub", children: item.words[0].subLabel }))] })) }, i));
+        }) }));
+}
+const DeleteButton = ({ onClick, ariaLabel }) => {
+    /* 화면낭독기가 읽는 이름이라 사전에서 온다 — 여기 박아 두면 영어로 쓰는 사람에게
+       이 버튼만 '삭제' 로 읽힌다. */
+    const { t } = useTranslation();
+    return (_jsx(Button, { size: 32, type: "dot", icon: "x", variant: "transparent-lightGray", className: "load-table-popup__delete", onClick: onClick, ariaLabel: ariaLabel ?? t('common.delete', '삭제'), showTooltipInfo: true }));
+};
+export default function LoadTablePopup({ onLoad, onCancel, tables: tablesProp, onDelete: onDeleteProp }) {
+    const { t } = useTranslation();
+    const SORT_OPTIONS = useMemo(() => SORT_OPTION_KEYS.map(o => ({ value: o.value, label: t(o.i18nKey, o.fallback) })), [t]);
+    const VIEW_OPTIONS = useMemo(() => VIEW_OPTION_KEYS.map(o => ({ value: o.value, label: t(o.i18nKey, o.fallback) })), [t]);
+    const [localTables, setLocalTables] = useState(() => getSavedTables());
+    const tables = tablesProp ?? localTables;
+    const [selected, setSelected] = useState(null);
+    const [sortKey, setSortKey] = useState('newest');
+    const [viewMode, setViewMode] = useState('grid');
+    const sorted = useMemo(() => {
+        const copy = [...tables];
+        if (sortKey === 'newest')
+            return copy.sort((a, b) => b.savedAt.localeCompare(a.savedAt));
+        if (sortKey === 'oldest')
+            return copy.sort((a, b) => a.savedAt.localeCompare(b.savedAt));
+        if (sortKey === 'name')
+            return copy.sort((a, b) => a.name.localeCompare(b.name, 'ko'));
+        if (sortKey === 'count')
+            return copy.sort((a, b) => b.items.length - a.items.length);
+        return copy;
+    }, [tables, sortKey]);
+    const handleDelete = useCallback((id, e) => {
+        e.stopPropagation();
+        if (onDeleteProp) {
+            onDeleteProp(id);
+        }
+        else {
+            localDeleteTable(id);
+            setLocalTables(getSavedTables());
+        }
+        if (selected === id)
+            setSelected(null);
+    }, [selected, onDeleteProp]);
+    const handleSetViewMode = useCallback((v) => setViewMode(v), []);
+    const handleSetSortKey = useCallback((v) => setSortKey(v), []);
+    const handleLoadSelected = useCallback((animateThen) => {
+        const table = tables.find(t => t.id === selected);
+        if (table)
+            animateThen(() => onLoad(table));
+    }, [tables, selected, onLoad]);
+    const headerActions = useMemo(() => tables.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: VIEW_OPTIONS, value: viewMode, onChange: handleSetViewMode }), _jsx(Dropdown, { options: SORT_OPTIONS, value: sortKey, onChange: handleSetSortKey })] })) : undefined, [tables.length, viewMode, sortKey, handleSetViewMode, handleSetSortKey, VIEW_OPTIONS, SORT_OPTIONS]);
+    return (_jsx(Popup, { className: "popup--load-table", title: t('wordTable.loadTable.title', '저장된 단어 표 불러오기'), headerActions: headerActions, onClose: onCancel, footer: ({ animateThen, closeWithAnimation }) => (_jsxs("div", { className: "load-table-popup__footer-actions", children: [_jsx(Button, { size: 48, type: "bar", label: t('common.cancel', '취소'), onClick: closeWithAnimation, width: "fit-content" }), _jsx(Button, { size: 48, type: "bar", variant: "main", label: t('wordTable.loadTable.loadButton', '불러오기'), width: "fit-content", disabled: !selected, onClick: () => handleLoadSelected(animateThen) })] })), children: _jsx("div", { className: "load-table-popup__body", children: tables.length === 0 ? (_jsx("p", { className: "load-table-popup__empty body-2", children: t('wordTable.loadTable.empty', '저장된 단어 표가 없습니다.') })) : (_jsxs(_Fragment, { children: [viewMode === 'grid' && (_jsx("ul", { className: "load-table-popup__grid", children: sorted.map(table => (_jsxs("li", { className: `load-table-popup__card${selected === table.id ? ' load-table-popup__card--selected' : ''}`, onClick: () => setSelected(table.id), children: [_jsx(DeleteButton, { onClick: e => handleDelete(table.id, e), ariaLabel: t('wordTable.loadTable.deleteAriaLabel', '삭제') }), _jsx(TableThumbnail, { table: table }), _jsxs("div", { className: "load-table-popup__card-info", children: [_jsx("span", { className: "load-table-popup__card-name body-2", children: table.name }), _jsxs("span", { className: "load-table-popup__card-meta caption-1", children: [formatDate(table.savedAt), " \u00B7 ", table.items.length, "\uAC1C"] })] })] }, table.id))) })), viewMode === 'list' && (_jsx("ul", { className: "load-table-popup__list", children: sorted.map(table => (_jsxs("li", { className: `load-table-popup__row${selected === table.id ? ' load-table-popup__row--selected' : ''}`, onClick: () => setSelected(table.id), children: [_jsx("span", { className: "load-table-popup__row-check", children: selected === table.id && (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: _jsx("polyline", { points: "4 13 9 18 20 6", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), _jsxs("div", { className: "load-table-popup__row-main", children: [_jsx("span", { className: "load-table-popup__row-name body-2", children: table.name }), _jsx("div", { className: "load-table-popup__row-words", children: table.items.map((item, i) => (_jsx("span", { className: "load-table-popup__row-word caption-1", children: item.words.length >= 2
+                                                    ? `${item.words[0].label} · ${item.words[1].label}`
+                                                    : item.words[0]?.label ?? item.id }, i))) })] }), _jsxs("span", { className: "load-table-popup__row-count caption-1", children: [table.items.length, "\uAC1C"] }), _jsx("span", { className: "load-table-popup__row-date caption-1", children: formatDate(table.savedAt) }), _jsx(DeleteButton, { onClick: e => handleDelete(table.id, e), ariaLabel: t('wordTable.loadTable.deleteAriaLabel', '삭제') })] }, table.id))) }))] })) }) }));
+}

package/dist/packages/core/src/components/Popup/Popup.css

@@ -0,0 +1,136 @@
+.popup {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal);
+  background: var(--color-popupBlock, rgba(16, 24, 32, 0.6));
+}
+/* inline 모드 — portal 없이 부모(position:relative) 컨테이너 안에 갇힘 */
+.popup.popup--inline {
+  position: relative;
+  background: transparent;
+  z-index: 5;
+  align-items: stretch;
+  justify-content: stretch;
+}
+.popup.popup--inline .popup-panel {
+  width: 100%;
+}
+.popup-panel {
+  position: relative;
+  background: var(--color-white);
+  border-radius: 28px;
+  box-shadow: var(--shadow-popup);
+  max-width: 820px;
+  width: calc(100% - 40px);
+  max-height: calc(100% - 60px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+/* size별 최대 가로폭 — 미지정 시 위의 기본(820px) 유지. 앱의 기존 팝업 폭(480/680/880)에 정렬 */
+.popup-panel--small  { max-width: 480px; }
+.popup-panel--medium { max-width: 680px; }
+.popup-panel--large  { max-width: 1080px; }
+.popup-close-float {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.popup-title { padding: var(--spacing-l); display: block; text-align: center; flex-shrink: 0; }
+.popup-header { padding: var(--spacing-l) var(--spacing-l) 0; display: flex; align-items: center; gap: var(--spacing-s); flex-shrink: 0; }
+.popup-header--with-subtitle { align-items: flex-start; }
+.popup-header-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.popup-title--left { padding: 0; text-align: left; flex: 1; min-width: 0; }
+.popup-header-main .popup-title--left { flex: none; }
+.popup-header .popup-title--left { margin: 0; }
+.popup-subtitle { text-align: left; color: var(--color-gray); margin: 0; }
+.popup-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+.popup-content {
+  padding: 20px 20px 0;
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  touch-action: pan-y;
+}
+.popup-content__inner {
+  padding-bottom: 20px;
+}
+.popup-footer { padding: 0 20px 20px; display:flex; gap:8px; justify-content:center }
+/* 표준 buttons 배열만 폭/정렬 제약 — 커스텀 footer는 자유 배치 */
+.popup-footer--buttons > * { max-width: 200px; flex: 1; }
+.popup--closing { opacity: 0; transition: opacity 260ms ease }
+
+@media (max-width: 767px) {
+  .popup-panel {
+    max-height: calc(100% - 60px - 72px - env(safe-area-inset-bottom));
+  }
+}
+
+/* ── 날짜/시간 입력 행 (공용) ──────────────────────────────── */
+.form-date-row {
+  display: flex;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+/* 날짜 드롭다운이 과도하게 줄어 "2..."로 잘리지 않도록 최소폭 보장.
+   72px 로는 여전히 "8..." · "3..." 으로 잘렸다(실측) — 트리거가 좌우 패딩과 화살표로
+   ~50px 를 먹어 "12월"·"31일" 세 글자에 22px 밖에 안 남는다. 90px 로 올린다. */
+.form-date-row > div { min-width: 90px; }
+/* 연(3)·월(2)·일(2) */
+.form-date-row--ymd > div:nth-child(1) { flex: 3; }
+.form-date-row--ymd > div:nth-child(2) { flex: 2; }
+.form-date-row--ymd > div:nth-child(3) { flex: 2; }
+/* 시(1)·분(1) */
+.form-date-row--hm > div { flex: 1; }
+/* 간격 오버라이드 */
+.form-date-row--gap-8 { gap: 8px; }
+/* 아주 좁은 화면(≤360px)에선 연·월·일이 한 줄에 못 들어간다 — 실측: 행 폭 240px에
+   드롭다운 트리거 하나가 패딩+화살표로 50px를 먹어 연도 텍스트에 30px밖에 안 남고
+   "2000년"이 "20…"으로 잘렸다(min-width 72px 가드로도 부족). 연도만 한 줄 차지하게
+   내리면 연도 240px, 월·일이 다음 줄을 반씩 나눠 갖는다. */
+@media (max-width: 360px) {
+  .form-date-row--ymd { flex-wrap: wrap; }
+  .form-date-row--ymd > div:nth-child(1) { flex: 1 0 100%; }
+}
+
+/* ── 폼 공용 오류 메시지 ──────────────────────────────────── */
+.form-field-error {
+  color: var(--color-error);
+  font-size: 13px;
+  margin-bottom: 8px;
+  padding: 6px 0;
+}
+.form-inline-error {
+  color: var(--color-error);
+  margin-top: 4px;
+  display: block;
+}
+
+
+.confirm-popup__message {
+  padding: 8px 0;
+  margin: 0 auto;
+  width: fit-content;
+  max-width: 100%;
+  text-align: left;
+}
+/* 확인 팝업은 본문 위/아래 여백을 20px씩 더(기본 20 → 40) */
+.confirm-popup .popup-content { padding-top: 40px; }
+.confirm-popup .popup-content__inner { padding-bottom: 40px; }
+/* details Panel과 아래 메시지 사이 간격 */
+.confirm-popup .panel + .confirm-popup__message { margin-top: 16px; }
+/* 최상단 미리보기(카드 등) — 가운데 정렬 + 아래 여백 */
+.confirm-popup__top { display: flex; justify-content: center; margin-bottom: 20px; }

package/dist/packages/core/src/components/Popup/Popup.d.ts

@@ -0,0 +1,77 @@
+import { type ReactNode } from "react";
+import { type ButtonVariant } from "../Button";
+import "./Popup.css";
+/** @public */
+export type PopupOptions = {
+    animateThen: (cb?: () => void) => void;
+    closeWithAnimation: () => void;
+};
+/** footer buttons 배열로 전달할 때 사용하는 버튼 설정 */
+export type PopupButtonConfig = {
+    label: string;
+    variant?: ButtonVariant;
+    onClick?: (opts: PopupOptions) => void;
+    disabled?: boolean;
+};
+/** @public */
+export interface PopupProps {
+    title?: ReactNode;
+    /** 제목 아래 보조 설명(부제). title이 있을 때만 렌더된다. */
+    subtitle?: ReactNode;
+    headerActions?: ReactNode;
+    children?: ReactNode | ((opts: PopupOptions) => ReactNode);
+    /**
+     * 하단 버튼 배열. 제공하면 footer보다 우선 적용되며
+     * Popup이 size/layout을 통일해서 렌더합니다.
+     */
+    buttons?: PopupButtonConfig[];
+    /** 복잡한 커스텀 footer가 필요할 때 사용. buttons가 없을 때만 렌더됩니다.
+     * buttons와 달리 기본 폭/정렬 제약(.popup-footer--buttons)이 적용되지 않아 자유 배치 가능. */
+    footer?: ReactNode | ((opts: PopupOptions) => ReactNode);
+    /** 커스텀 footer 래퍼에 추가할 클래스 (정렬·간격 override용) */
+    footerClassName?: string;
+    onClose?: () => void;
+    /** true면 X 버튼/ESC로 닫는 것을 막는다 — 이미 시작된 서버 요청(확인 버튼 클릭 등)이
+     * 진행 중일 때, "취소했다고 믿었는데 요청은 계속 진행돼 완료 후 결과가 반영되는" 상황을
+     * 막기 위한 것. footer buttons의 개별 disabled와는 별개로 팝업 자체의 닫기 경로를 잠근다. */
+    closeDisabled?: boolean;
+    /**
+     * 닫기 직전에 불린다. false를 반환하면 닫기를 중단한다(닫힘 애니메이션도 시작하지 않음).
+     *
+     * "입력 중인데 정말 닫을까요?" 같은 확인 절차용. onClose에서 막으면 안 되는 이유 —
+     * onClose는 이미 애니메이션이 시작된 뒤(animateThen의 setTimeout 안)에 불리므로,
+     * 거기서 닫기를 취소해도 팝업은 closingRef=true인 채로 남아 이후 ESC·X가 전부
+     * 무시된다(영구히 못 닫는 상태). 그래서 판단은 반드시 이 시점에 해야 한다.
+     *
+     * 미지정이면 기존 동작과 완전히 동일하다.
+     */
+    beforeClose?: () => boolean;
+    className?: string;
+    /**
+     * 다이얼로그 접근명 — `title`이 없는 팝업(useTitle=false 등)에서 쓴다.
+     * title이 있으면 그쪽이 `aria-labelledby`로 연결되므로 이 값은 무시된다.
+     * (없으면 스크린리더가 "대화상자"라고만 읽어 무슨 창인지 알 수 없다.)
+     */
+    ariaLabel?: string;
+    /** false면 헤더의 title 영역을 렌더하지 않음. 타이틀 없이 닫기 버튼만 필요할 때 사용. 기본값 true */
+    useTitle?: boolean;
+    /** true면 portal/배경 스크롤 잠금 없이 부모 컨테이너 안에 제자리 렌더 (목업/데모용) */
+    inline?: boolean;
+    /**
+     * 패널 최대 가로폭 제한. 미지정 시 기본(820px) 유지.
+     * - `small`  480px (확인/알림류)
+     * - `medium` 680px (입력 폼)
+     * - `large`  880px (리스트/다중 콘텐츠)
+     * 더 넓거나 무제한이 필요하면 className으로 `.popup-panel` max-width를 직접 override.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * 이 값이 바뀌면 본문(.popup-content) 스크롤을 맨 위로 되돌린다.
+     * 탭/모드 전환처럼 내부 콘텐츠가 통째로 바뀌는 팝업에서, 스크롤을 내린 채
+     * 전환하면 새로 렌더된 짧은 콘텐츠가 화면 밖(아래)에 가려 빈 화면처럼 보이는
+     * 문제를 막기 위한 것. 필요한 경우에만 전달(예: 탭 key 값).
+     */
+    resetScrollKey?: string | number;
+}
+/** @public */
+export default function Popup(props: PopupProps): import("react").JSX.Element;