@ihabdevteam/core 0.189.0 → 0.191.0

package/dist/ihabdevteam-core.d.ts

@@ -1617,7 +1617,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.189.0";
+export declare const CORE_VERSION = "0.191.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -3217,7 +3217,14 @@ export declare interface LineChartProps {
         x: number;
         label: string;
     }[];
-    /** 세로축 이름. **재는 것이 정답률이 아니면 반드시 준다** — 이름이 없으면 보는 사람이 정답률로 읽는다 */
+    /**
+     * 세로축 이름 — **안 주면 아무것도 안 그린다**(코어는 부르는 쪽의 사전을 모른다).
+     *
+     * **재는 것이 정답률이 아니면 반드시 준다.** 이름이 없으면 보는 사람이 정답률로 읽는다
+     * (말귀 실측: 순서화는 '전부 맞힘' 비율인데 정답률로 읽혀 "문장별로는 정답률이 낮은데 왜
+     * 전체 정답률은 높아?" 라는 물음이 나왔다 — 2026-09-17). 늘 같은 말이 붙는 화면이라면
+     * 감싸개에서 기본값을 들어 주는 편이 낫다.
+     */
     axisTitle?: ReactNode;
     /** 선·점 색. 안 주면 주 색 */
     color?: string;
@@ -3999,6 +4006,10 @@ declare type PanelRowInput = Base & {
     /** Enter로 확정(제출 등). TextField가 IME 조합 중 Enter는 걸러 주므로 한글 입력에서도 안전하다. */
     onEnter?: () => void;
     placeholder?: string;
+    /** 비추기만 하는 추천값 — Tab(앞으로)·Space 로 받는다. 자세한 것은 `TextField` 의 `ghostText`. */
+    ghostText?: string;
+    /** 추천값 뒤 꼬리말 — 안 주면 코어 사전의 것 */
+    ghostHint?: string;
     inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     readOnly?: boolean;
     disabled?: boolean;
@@ -4704,6 +4715,22 @@ export declare interface PopupProps {
     };
     /** 커스텀 footer 래퍼에 추가할 클래스 (정렬·간격 override용) */
     footerClassName?: string;
+    /**
+     * 바닥 줄 **왼쪽 덩이** — 보조 단추(아이콘 단추 여럿)가 서는 자리.
+     *
+     * `footerLayout: 'between'` 은 **직계 자식만** 양끝으로 민다. 그래서 "왼쪽 여럿 · 오른쪽 여럿" 을
+     * 만들려면 부르는 쪽이 덩이 둘을 손수 지어야 했고, 그 규칙이 창마다 한 벌씩 생겼다(말귀 다섯 쌍,
+     * 쌍마다 한 글자도 안 달랐다 — 2026-09-24). 바닥 줄의 자리 잡기는 **창의 일**이라 여기로 들인다.
+     *
+     * 덩이 안쪽 간격은 코어가 정한다 — 왼쪽은 촘촘히(`--spacing-xs`), 오른쪽은 한 눈금 넓게(`--spacing-s`),
+     * 두 덩이 사이는 그보다 넓게(`--spacing-l`). 그래야 좁아져 줄이 바뀌어도 **두 덩이가 섞여 보이지 않는다.**
+     * 좁으면 덩이째 줄을 바꾸고 오른쪽 덩이는 그 줄에서도 오른쪽 끝에 선다.
+     *
+     * 둘 중 하나만 줘도 된다. 주면 `footer`·`buttons` 보다 이쪽이 그려진다.
+     */
+    footerStart?: ReactNode | ((opts: PopupOptions) => ReactNode);
+    /** 바닥 줄 **오른쪽 덩이** — 주 단추가 서는 자리. 자세한 것은 `footerStart`. */
+    footerEnd?: ReactNode | ((opts: PopupOptions) => ReactNode);
     /** 바닥 줄의 가로 배치 — `'center'`(기본) · `'fill'` · `'between'`.
      *
      *  - `'center'`: 지금까지와 같다(가운데 모음).
@@ -7156,6 +7183,27 @@ export declare interface TextFieldProps {
     required?: boolean;
     /** placeholder 텍스트 */
     placeholder?: string;
+    /**
+     * **비추기만 하는 추천값**(ghost-text) — 규칙으로 유도한 값을 자리표시로 비추고, 칸이 비어 있을 때
+     * **Tab(앞으로) · Space** 로 받아 적는다.
+     *
+     * 자동으로 채우지 않는다 — 규칙 변환은 완벽하지 않아 **사람이 보고 확정한다.** 그래서 값이 아니라
+     * 자리표시로만 있다가, 사람이 "받겠다" 는 키를 눌러야 값이 된다.
+     *
+     * 받는 때는 셋이 다 맞을 때뿐이다:
+     * - **Tab(앞으로) 이거나 Space.** `Shift+Tab` 은 안 받는다 — 뒤 칸으로 가려던 사람이 값을 얻는다.
+     * - **칸이 비어 있다**(공백만 친 것도 빈 것으로 본다). 손으로 적은 것을 덮지 않는다.
+     * - 비출 추천이 있다.
+     *
+     * 받은 키는 **이 칸이 먹는다**(`preventDefault`) — 그래서 그 Tab 으로 초점이 옮겨 가지 않고,
+     * 그 눌림은 `onKeyDown` 으로도 안 간다. 한 번 더 누르면 칸이 찼으므로 평소대로 넘어간다.
+     *
+     * 앱마다 이 세 줄이 손으로 적혀 있었다(말귀 두 자리 — 훈련 이름·표준 발음, 2026-09-25).
+     * 무엇을 비추고 어떻게 받는지는 **칸의 행동**이지 그 칸을 놓는 화면의 일이 아니다.
+     */
+    ghostText?: string;
+    /** 추천값 뒤에 붙는 꼬리말 — 안 주면 코어 사전의 " (Tab 또는 space 입력시 자동 입력)" */
+    ghostHint?: string;
     /** 입력 타입 */
     type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
     /** 비활성 상태 */

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

@@ -40,7 +40,14 @@ export interface LineChartProps {
         x: number;
         label: string;
     }[];
-    /** 세로축 이름. **재는 것이 정답률이 아니면 반드시 준다** — 이름이 없으면 보는 사람이 정답률로 읽는다 */
+    /**
+     * 세로축 이름 — **안 주면 아무것도 안 그린다**(코어는 부르는 쪽의 사전을 모른다).
+     *
+     * **재는 것이 정답률이 아니면 반드시 준다.** 이름이 없으면 보는 사람이 정답률로 읽는다
+     * (말귀 실측: 순서화는 '전부 맞힘' 비율인데 정답률로 읽혀 "문장별로는 정답률이 낮은데 왜
+     * 전체 정답률은 높아?" 라는 물음이 나왔다 — 2026-09-17). 늘 같은 말이 붙는 화면이라면
+     * 감싸개에서 기본값을 들어 주는 편이 낫다.
+     */
     axisTitle?: ReactNode;
     /** 선·점 색. 안 주면 주 색 */
     color?: string;

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

@@ -90,6 +90,10 @@ export type PanelRowInput = Base & {
     /** Enter로 확정(제출 등). TextField가 IME 조합 중 Enter는 걸러 주므로 한글 입력에서도 안전하다. */
     onEnter?: () => void;
     placeholder?: string;
+    /** 비추기만 하는 추천값 — Tab(앞으로)·Space 로 받는다. 자세한 것은 `TextField` 의 `ghostText`. */
+    ghostText?: string;
+    /** 추천값 뒤 꼬리말 — 안 주면 코어 사전의 것 */
+    ghostHint?: string;
     inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     readOnly?: boolean;
     disabled?: boolean;

package/dist/packages/core/src/components/PanelRow.js

@@ -111,7 +111,7 @@ export function PanelRow(props) {
     }
     else if (variant === 'input') {
         const p = props;
-        right = (_jsxs("div", { className: `panel-row__input-wrap${useFullWidth ? ' panel-row__input-wrap--full' : ''}`, children: [_jsx(TextField, { value: p.value, onChange: p.onChange ?? noop, onKeyDown: p.onKeyDown, onEnter: p.onEnter, placeholder: p.placeholder, inputMode: p.inputMode, readOnly: p.readOnly, disabled: p.disabled, type: p.type, autoComplete: p.autoComplete, maxLength: p.maxLength, showCount: p.showCount, multiline: p.multiline, rows: p.rows, fullWidth: useFullWidth, error: error, ariaLabel: label, required: required }), p.helperText && _jsx("div", { className: "panel-row__helper caption-1", children: p.helperText })] }));
+        right = (_jsxs("div", { className: `panel-row__input-wrap${useFullWidth ? ' panel-row__input-wrap--full' : ''}`, children: [_jsx(TextField, { value: p.value, onChange: p.onChange ?? noop, onKeyDown: p.onKeyDown, onEnter: p.onEnter, placeholder: p.placeholder, ghostText: p.ghostText, ghostHint: p.ghostHint, inputMode: p.inputMode, readOnly: p.readOnly, disabled: p.disabled, type: p.type, autoComplete: p.autoComplete, maxLength: p.maxLength, showCount: p.showCount, multiline: p.multiline, rows: p.rows, fullWidth: useFullWidth, error: error, ariaLabel: label, required: required }), p.helperText && _jsx("div", { className: "panel-row__helper caption-1", children: p.helperText })] }));
     }
     else if (variant === 'custom') {
         const p = props;

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

@@ -110,6 +110,44 @@
    `flex: 1` 의 기본 바닥(min-width: auto)은 글자 길이만큼 버틴다 — 0 으로 내려 줄이 바뀌기 전에
    먼저 줄어들게 하고, 그래도 모자라면 위의 `flex-wrap` 이 아랫줄로 내린다. */
 .popup-footer--buttons > * { max-width: 200px; flex: 1 1 auto; min-width: 0; }
+
+/* **바닥 줄의 두 덩이**(`footerStart` · `footerEnd`) — 왼쪽 보조, 오른쪽 주 단추.
+   창마다 한 벌씩 베껴 적히던 규칙이다(말귀 다섯 쌍, 쌍마다 한 글자도 안 달랐다 — 2026-09-24).
+
+   간격은 **안쪽보다 사이가 넓다**(xs·s < l). 좁아져 줄이 바뀌어도 두 덩이가 한 덩이로 섞여
+   보이지 않게 하는 것이 이 차이의 일이다. 줄은 바꾸되(넘쳐 잘리는 것보다 낫다 — 0.185.0 에서
+   바닥이 잘려 못 누르던 자리를 겪었다) 오른쪽 덩이는 새 줄에서도 오른쪽 끝에 선다. */
+.popup-footer--bar {
+  justify-content: space-between;
+  gap: var(--spacing-l);
+  flex-wrap: wrap;
+}
+.popup-footer__start {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+  /* 글자가 길어도 줄이 바뀌기 전에 먼저 줄어들게 — 기본값(auto)은 글자 길이만큼 버틴다 */
+  min-width: 0;
+}
+.popup-footer__end {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  flex-wrap: wrap;
+  /* 왼쪽이 비었거나 줄이 바뀌어도 오른쪽 끝에 선다 */
+  margin-left: auto;
+  justify-content: flex-end;
+  min-width: 0;
+}
+/* **덩이째 줄을 바꾸고도 넘치면 안쪽에서 한 번 더 바꾼다.** 단추는 제 최소 폭(120px)으로 버티므로
+   덩이에 `flex-shrink: 0` 을 두면 그대로 창 밖으로 나가 잘린다 — 375px 에서 오른쪽 단추 둘이
+   25px 넘쳐 잘렸다(실측 2026-09-24). 0.185.0 에서 바닥이 잘려 못 누르던 그 꼴이다.
+   최소 폭을 0 으로 내려, 줄이 바뀌든 줄어들든 **잘리지는 않게** 한다. */
+.popup-footer__start > *,
+.popup-footer__end > * {
+  min-width: 0;
+}
 .popup--closing { opacity: 0; transition: opacity 260ms ease }
 
 @media (max-width: 767px) {

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

@@ -52,6 +52,22 @@ export interface PopupProps {
     };
     /** 커스텀 footer 래퍼에 추가할 클래스 (정렬·간격 override용) */
     footerClassName?: string;
+    /**
+     * 바닥 줄 **왼쪽 덩이** — 보조 단추(아이콘 단추 여럿)가 서는 자리.
+     *
+     * `footerLayout: 'between'` 은 **직계 자식만** 양끝으로 민다. 그래서 "왼쪽 여럿 · 오른쪽 여럿" 을
+     * 만들려면 부르는 쪽이 덩이 둘을 손수 지어야 했고, 그 규칙이 창마다 한 벌씩 생겼다(말귀 다섯 쌍,
+     * 쌍마다 한 글자도 안 달랐다 — 2026-09-24). 바닥 줄의 자리 잡기는 **창의 일**이라 여기로 들인다.
+     *
+     * 덩이 안쪽 간격은 코어가 정한다 — 왼쪽은 촘촘히(`--spacing-xs`), 오른쪽은 한 눈금 넓게(`--spacing-s`),
+     * 두 덩이 사이는 그보다 넓게(`--spacing-l`). 그래야 좁아져 줄이 바뀌어도 **두 덩이가 섞여 보이지 않는다.**
+     * 좁으면 덩이째 줄을 바꾸고 오른쪽 덩이는 그 줄에서도 오른쪽 끝에 선다.
+     *
+     * 둘 중 하나만 줘도 된다. 주면 `footer`·`buttons` 보다 이쪽이 그려진다.
+     */
+    footerStart?: ReactNode | ((opts: PopupOptions) => ReactNode);
+    /** 바닥 줄 **오른쪽 덩이** — 주 단추가 서는 자리. 자세한 것은 `footerStart`. */
+    footerEnd?: ReactNode | ((opts: PopupOptions) => ReactNode);
     /** 바닥 줄의 가로 배치 — `'center'`(기본) · `'fill'` · `'between'`.
      *
      *  - `'center'`: 지금까지와 같다(가운데 모음).

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

@@ -16,7 +16,7 @@ const ANIM_MS = 260;
 /** @public */
 export default function Popup(props) {
     const { t } = useTranslation();
-    const { title, subtitle, headerActions, headerSegment, children, buttons, footer, footerClassName = "", footerLayout = 'center', onClose, closeDisabled = false, beforeClose, closeOnBackdrop = true, className = "", ariaLabel, useTitle = true, inline = false, size, layer = 'modal', height, fillBody = false, resetScrollKey } = props || {};
+    const { title, subtitle, headerActions, headerSegment, children, buttons, footer, footerStart, footerEnd, footerClassName = "", footerLayout = 'center', onClose, closeDisabled = false, beforeClose, closeOnBackdrop = true, className = "", ariaLabel, useTitle = true, inline = false, size, layer = 'modal', height, fillBody = false, resetScrollKey } = props || {};
     const [closing, setClosing] = useState(false);
     // 닫힘 애니메이션 중(260ms)엔 버튼이 시각적으로만 흐려질 뿐 클릭은 계속 가능해,
     // 그 사이 같은 버튼을 연타하면 cb(확인/완료 콜백)가 여러 번 예약되어 중복 실행된다.
@@ -212,7 +212,10 @@ export default function Popup(props) {
             e.preventDefault(); }, children: _jsxs("div", { ref: panelRef, className: `popup-panel${size ? ` popup-panel--${size}` : ''}${height != null ? ' popup-panel--has-height' : ''}${fillBody ? ' popup-panel--fill-body' : ''}`, 
             /* 높이는 **CSS 변수로** 넘긴다 — 인라인 height 로 박으면 앱의 미디어 규칙(좁은 화면만 다른 높이)이 못 이겼다.
                max-height(CSS)가 height 보다 이기므로 화면보다 크게 줘도 화면에 맞춰진다 */
-            style: height != null ? { '--popup-height': typeof height === 'number' ? `${height}px` : height } : undefined, tabIndex: -1, role: inline ? undefined : 'dialog', "aria-modal": inline ? undefined : true, "aria-labelledby": !inline && useTitle && title ? titleId : undefined, "aria-label": !inline && !(useTitle && title) ? (ariaLabel ?? (typeof title === 'string' ? title : undefined)) : undefined, children: [!useTitle && (headerActions || onClose) ? (_jsxs("div", { className: "popup-close-float", children: [headerActions, onClose && _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') })] })) : (title || headerActions || onClose) ? (_jsxs("div", { className: `popup-header${subtitle ? ' popup-header--with-subtitle' : ''}`, children: [_jsxs("div", { className: "popup-header-main", children: [_jsx("span", { id: titleId, className: "popup-title popup-title--left h2", children: title }), subtitle && _jsx("span", { className: "popup-subtitle body-3", children: subtitle })] }), headerSegment && (_jsx("div", { className: "popup-header-segment", children: _jsx(SegmentedControl, { size: 40, ariaLabel: headerSegment.ariaLabel, options: headerSegment.options.map(o => ({ key: o.key, label: o.label, disabled: o.disabled })), value: headerSegment.value, onChange: headerSegment.onChange }) })), _jsxs("div", { className: "popup-header-actions", children: [headerActions, onClose && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') }))] })] })) : null, _jsx("div", { className: "popup-content", ref: contentRef, tabIndex: contentScrollable ? 0 : undefined, children: _jsx("div", { className: "popup-content__inner", children: typeof children === 'function' ? children({ animateThen, closeWithAnimation }) : children }) }), buttons?.length ? (_jsx("div", { className: `popup-footer popup-footer--buttons${footerLayout !== 'center' ? ` popup-footer--${footerLayout}` : ''}`, children: buttons.map((btn, i) => (_jsx(Button, { htmlType: "button", size: 48, variant: btn.variant ?? 'default', label: btn.label, disabled: btn.disabled, onClick: () => btn.onClick?.({ animateThen, closeWithAnimation }) }, i))) })) : footer ? (_jsx("div", { className: `popup-footer${footerLayout !== 'center' ? ` popup-footer--${footerLayout}` : ''}${footerClassName ? ` ${footerClassName}` : ''}`, children: typeof footer === 'function' ? footer({ animateThen, closeWithAnimation }) : footer })) : null] }) }));
+            style: height != null ? { '--popup-height': typeof height === 'number' ? `${height}px` : height } : undefined, tabIndex: -1, role: inline ? undefined : 'dialog', "aria-modal": inline ? undefined : true, "aria-labelledby": !inline && useTitle && title ? titleId : undefined, "aria-label": !inline && !(useTitle && title) ? (ariaLabel ?? (typeof title === 'string' ? title : undefined)) : undefined, children: [!useTitle && (headerActions || onClose) ? (_jsxs("div", { className: "popup-close-float", children: [headerActions, onClose && _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') })] })) : (title || headerActions || onClose) ? (_jsxs("div", { className: `popup-header${subtitle ? ' popup-header--with-subtitle' : ''}`, children: [_jsxs("div", { className: "popup-header-main", children: [_jsx("span", { id: titleId, className: "popup-title popup-title--left h2", children: title }), subtitle && _jsx("span", { className: "popup-subtitle body-3", children: subtitle })] }), headerSegment && (_jsx("div", { className: "popup-header-segment", children: _jsx(SegmentedControl, { size: 40, ariaLabel: headerSegment.ariaLabel, options: headerSegment.options.map(o => ({ key: o.key, label: o.label, disabled: o.disabled })), value: headerSegment.value, onChange: headerSegment.onChange }) })), _jsxs("div", { className: "popup-header-actions", children: [headerActions, onClose && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, onClick: closeWithAnimation, disabled: closeDisabled, ariaLabel: t('common.close', '닫기') }))] })] })) : null, _jsx("div", { className: "popup-content", ref: contentRef, tabIndex: contentScrollable ? 0 : undefined, children: _jsx("div", { className: "popup-content__inner", children: typeof children === 'function' ? children({ animateThen, closeWithAnimation }) : children }) }), (footerStart || footerEnd) ? (
+                /* 왼쪽·오른쪽 덩이 — 빈 덩이도 그린다(자리를 지켜야 오른쪽이 끝에 선다).
+                   `footerLayout` 은 보지 않는다: 이 줄 자체가 배치다. */
+                _jsxs("div", { className: `popup-footer popup-footer--bar${footerClassName ? ` ${footerClassName}` : ''}`, children: [_jsx("div", { className: "popup-footer__start", children: typeof footerStart === 'function' ? footerStart({ animateThen, closeWithAnimation }) : footerStart }), _jsx("div", { className: "popup-footer__end", children: typeof footerEnd === 'function' ? footerEnd({ animateThen, closeWithAnimation }) : footerEnd })] })) : buttons?.length ? (_jsx("div", { className: `popup-footer popup-footer--buttons${footerLayout !== 'center' ? ` popup-footer--${footerLayout}` : ''}`, children: buttons.map((btn, i) => (_jsx(Button, { htmlType: "button", size: 48, variant: btn.variant ?? 'default', label: btn.label, disabled: btn.disabled, onClick: () => btn.onClick?.({ animateThen, closeWithAnimation }) }, i))) })) : footer ? (_jsx("div", { className: `popup-footer${footerLayout !== 'center' ? ` popup-footer--${footerLayout}` : ''}${footerClassName ? ` ${footerClassName}` : ''}`, children: typeof footer === 'function' ? footer({ animateThen, closeWithAnimation }) : footer })) : null] }) }));
     if (inline || typeof document === 'undefined')
         return el;
     return createPortal(el, document.body);

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

@@ -20,6 +20,27 @@ export interface TextFieldProps {
     required?: boolean;
     /** placeholder 텍스트 */
     placeholder?: string;
+    /**
+     * **비추기만 하는 추천값**(ghost-text) — 규칙으로 유도한 값을 자리표시로 비추고, 칸이 비어 있을 때
+     * **Tab(앞으로) · Space** 로 받아 적는다.
+     *
+     * 자동으로 채우지 않는다 — 규칙 변환은 완벽하지 않아 **사람이 보고 확정한다.** 그래서 값이 아니라
+     * 자리표시로만 있다가, 사람이 "받겠다" 는 키를 눌러야 값이 된다.
+     *
+     * 받는 때는 셋이 다 맞을 때뿐이다:
+     * - **Tab(앞으로) 이거나 Space.** `Shift+Tab` 은 안 받는다 — 뒤 칸으로 가려던 사람이 값을 얻는다.
+     * - **칸이 비어 있다**(공백만 친 것도 빈 것으로 본다). 손으로 적은 것을 덮지 않는다.
+     * - 비출 추천이 있다.
+     *
+     * 받은 키는 **이 칸이 먹는다**(`preventDefault`) — 그래서 그 Tab 으로 초점이 옮겨 가지 않고,
+     * 그 눌림은 `onKeyDown` 으로도 안 간다. 한 번 더 누르면 칸이 찼으므로 평소대로 넘어간다.
+     *
+     * 앱마다 이 세 줄이 손으로 적혀 있었다(말귀 두 자리 — 훈련 이름·표준 발음, 2026-09-25).
+     * 무엇을 비추고 어떻게 받는지는 **칸의 행동**이지 그 칸을 놓는 화면의 일이 아니다.
+     */
+    ghostText?: string;
+    /** 추천값 뒤에 붙는 꼬리말 — 안 주면 코어 사전의 " (Tab 또는 space 입력시 자동 입력)" */
+    ghostHint?: string;
     /** 입력 타입 */
     type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
     /** 비활성 상태 */

package/dist/packages/core/src/components/TextField.js

@@ -13,7 +13,7 @@ import { useIsoLayoutEffect } from '../hooks/useIsoLayoutEffect';
 import './TextField.css';
 /** @public */
 export default function TextField(props) {
-    const { value, defaultValue, name, inputRef, onChange, label, ariaLabel, required, placeholder, type = 'text', disabled = false, readOnly = false, error, helperText, maxLength, size = 48, variant = 'input', fullWidth = false, newline = false, multiline = false, rows = 3, leftIcon, rightIcon, clearable = false, list, showCount = true, className = '', onFocus, onBlur, onKeyDown, onEnter, inputMode, autoComplete, autoFocus, suggestions: suggestionsProp, openOnFocus = false, } = props;
+    const { value, defaultValue, name, inputRef, onChange, label, ariaLabel, required, placeholder, ghostText, ghostHint, type = 'text', disabled = false, readOnly = false, error, helperText, maxLength, size = 48, variant = 'input', fullWidth = false, newline = false, multiline = false, rows = 3, leftIcon, rightIcon, clearable = false, list, showCount = true, className = '', onFocus, onBlur, onKeyDown, onEnter, inputMode, autoComplete, autoFocus, suggestions: suggestionsProp, openOnFocus = false, } = props;
     // 읽기 전용·꺼진 칸은 후보로 값을 바꾸지 못한다 — 전에는 ↓·Enter·후보 누름으로 onChange 가 나갔다
     const suggestions = readOnly || disabled ? undefined : suggestionsProp;
     const { t } = useTranslation();
@@ -93,6 +93,11 @@ export default function TextField(props) {
             inputRef.current = node;
     }, [inputRef]);
     /* eslint-enable react-hooks/immutability */
+    /* 추천이 있으면 자리표시가 **추천 + 받는 법**이 된다. 추천이 없으면 그 칸의 평소 자리표시로 물러선다.
+       (네이티브 자리표시는 칸이 비었을 때만 보이므로 "비었을 때만" 은 따로 가릴 것이 없다.) */
+    const 자리표시 = ghostText
+        ? `${ghostText}${ghostHint ?? t('wordTable.save.autoFillHint', ' (Tab 또는 space 입력시 자동 입력)')}`
+        : placeholder;
     const isControlled = value !== undefined;
     /* 비밀번호는 value 를 React 에 넘기지 않는다 — 위 useEffect 주석 참고 */
     const isPasswordControlled = isControlled && type === 'password';
@@ -141,7 +146,7 @@ export default function TextField(props) {
         // 단 비밀번호는 둘 다 넘기지 않는다 — 어느 쪽이든 HTML value 속성에 평문이 박힌다
         ...(isPasswordControlled ? {} : isControlled ? { value } : { defaultValue }),
         ref: setNodeRef,
-        placeholder,
+        placeholder: 자리표시,
         name,
         disabled,
         readOnly,
@@ -202,6 +207,21 @@ export default function TextField(props) {
             /* 후보를 가리킨 채 누른 Enter 는 **후보를 고르는** 키다(아래 combobox.handleKeyDown
                과 같은 조건). 예전에는 그 Enter 가 onEnter 까지 불러, 후보를 고르는 순간 검색·제출이
                한 번 더 나갔다. 고르는 Enter 는 폼 제출도 막는다. */
+            /* **비추던 추천을 받아 적는다.** Tab(앞으로)·Space 이고, 칸이 비었고(공백만 친 것도 빈 것),
+               비출 추천이 있을 때만. 받은 키는 이 칸이 먹으므로 초점이 옮겨 가지 않고 `onKeyDown` 으로도
+               안 간다 — 한 번 더 누르면 칸이 찼으니 평소대로 넘어간다. 조합 중(한글 중간 글자)에는 손대지
+               않는다: 그때의 Space 는 글자를 맺는 키다. */
+            const 추천받는키 = ((e.key === 'Tab' && !e.shiftKey) || e.key === ' ') && !e.nativeEvent.isComposing;
+            if (ghostText && 추천받는키 && !readOnly && !disabled && !(e.currentTarget.value ?? '').trim()) {
+                e.preventDefault();
+                const node = e.currentTarget;
+                if (!isControlled) {
+                    node.value = ghostText;
+                    setInnerLen(ghostText.length);
+                }
+                onChange?.(ghostText);
+                return;
+            }
             const 후보고르는엔터 = !!suggestions && e.key === 'Enter' && !e.nativeEvent.isComposing && combobox.activeIdx >= 0;
             if (후보고르는엔터)
                 e.preventDefault();
@@ -229,8 +249,8 @@ export default function TextField(props) {
     // variant="display"는 값과 placeholder 글자 크기가 크게 달라 네이티브 ::placeholder로는
     // 세로 중앙을 못 맞춘다. 전용 오버레이 div를 flex로 정중앙 정렬하고,
     // 값이 있으면(:placeholder-shown 해제) CSS로 숨긴다.
-    const showPlaceholderOverlay = variant === 'display' && !newline && !multiline && !!placeholder;
-    const renderInputArea = () => (_jsxs(_Fragment, { children: [renderInput(), showPlaceholderOverlay && (_jsx("span", { className: "text-field__placeholder", "aria-hidden": "true", children: placeholder }))] }));
+    const showPlaceholderOverlay = variant === 'display' && !newline && !multiline && !!자리표시;
+    const renderInputArea = () => (_jsxs(_Fragment, { children: [renderInput(), showPlaceholderOverlay && (_jsx("span", { className: "text-field__placeholder", "aria-hidden": "true", children: 자리표시 }))] }));
     return (_jsxs("div", { ref: rootRef, className: cls, children: [label && (_jsxs("label", { htmlFor: inputId, className: "text-field__label caption-1", children: [label, required && _jsx("span", { className: "text-field__required", children: "*" })] })), _jsxs("div", { className: "text-field__wrap", children: [leftIcon && (_jsx("span", { className: "text-field__icon text-field__icon--left", children: _jsx(Icon, { icon: leftIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) })), renderInputArea(), maxLength != null && showCount && (_jsxs("span", { className: `text-field__count caption-2${isOver ? ' text-field__count--over' : ''}`, children: [len, "/", maxLength] })), showClear && (_jsx(Button, { size: 24, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, className: "text-field__clear", ariaLabel: t('textField.clearAriaLabel', '입력값 지우기'), 
                         // 폼 안에서 쓰일 때 기본값(submit)으로 눌려 폼이 제출되지 않도록.
                         htmlType: "button", 

package/dist/packages/core/src/version.d.ts

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.189.0";
+export declare const CORE_VERSION = "0.191.0";

package/dist/packages/core/src/version.js

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.189.0';
+export const CORE_VERSION = '0.191.0';