@ihabdevteam/core 0.179.0 → 0.180.0

package/dist/ihabdevteam-core.d.ts

@@ -1594,7 +1594,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.179.0";
+export declare const CORE_VERSION = "0.180.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -3788,6 +3788,15 @@ declare type PanelRowChildren = {
     children?: ReactNode;
     align?: 'horizontal' | 'vertical';
     icon?: ReactNode;
+    /** 라벨을 고정 폭으로 두고 **오른쪽이 남는 폭을 채운다** — 그 안의 입력칸도 함께 늘어난다.
+     *
+     *  기본은 오른쪽이 **제 폭만** 차지한다(`flex: 0 0 auto`). 그래서 `TextField`·`Dropdown`·`form-input` 을
+     *  children 으로 넣으면 줄마다 오른쪽 끝이 들쭉날쭉했고, 소비자가 `.panel-row__right { display: flex }` +
+     *  `> * { flex: 1 }` 을 손으로 붙여 왔다 — 같은 한 줄이 말귀 앱 넷 · 어드민 셋에 흩어져 있었다(2026-09-18 전수).
+     *
+     *  `variant='input'`·`'dropdown'` 행은 늘 이 꼴이고, `'text'`·`'custom'` 은 같은 이름의 prop 으로 켠다 —
+     *  children 모드에만 통로가 없었다. 라벨 폭은 `Panel labelWidth` 로 정한다(기본 120px). */
+    useFullWidth?: boolean;
 };
 
 declare type PanelRowCustom = Base & {
@@ -5750,7 +5759,7 @@ export declare interface SearchSummaryProps {
 export declare type SearchSummaryStatus = 'ready' | 'guide' | 'error';
 
 /** @public */
-export declare function Section({ type, title, headingLevel, icon, action, disc, children, className, style }: SectionProps): JSX.Element;
+export declare function Section({ type, title, headingLevel, icon, action, disc, children, inGrid, className, style }: SectionProps): JSX.Element;
 
 /**
  * 섹션·페이지의 머리 — 머리말 · 제목 · 설명.
@@ -5798,6 +5807,17 @@ export declare interface SectionProps {
     action?: ReactNode;
     disc?: ReactNode;
     children?: ReactNode;
+    /**
+     * CSS 격자(한 줄에 여러 칸) 안에 세울 때 켠다 — 아래 여백(`--spacing-page`)을 푼다.
+     *
+     * `Section` 은 **세로로 이어 놓는 것**을 전제로 아래 여백을 두고, 마지막 것만 `:last-child` 로 뺀다.
+     * 격자에 넣으면 그 규칙이 **마지막 칸에만** 걸려 넷 중 셋만 여백을 달고 선다 — 카드 바닥선이 어긋나고
+     * 줄 사이 간격도 달라 보인다(말귀 문장훈련 분석 2×2 실측 2026-09-18: 카드 506 vs 566px).
+     * 격자에서는 칸 사이를 `gap` 이 맡으므로 이 여백은 할 일이 없다.
+     *
+     * `ChartSection inGrid` 와 같은 뜻이다(그쪽은 최소 폭·바닥 맞춤도 함께 푼다).
+     */
+    inGrid?: boolean;
     className?: string;
     style?: CSSProperties;
 }
@@ -9742,7 +9762,7 @@ export declare type WordTableOrientation = 'landscape' | 'portrait';
  * 표 내부에는 제목을 두지 않아 팝업 헤더 제목과 중복되지 않는다.
  * @public
  */
-export declare function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, printFileName, showSettings, autoPrint, className, onClose, scoring, onScoreChange, printHeader, beforeClose }: WordTablePopupProps): JSX.Element;
+export declare function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, footerLayout, printFileName, showSettings, autoPrint, className, onClose, scoring, onScoreChange, printHeader, beforeClose }: WordTablePopupProps): JSX.Element;
 
 /** @public */
 export declare interface WordTablePopupActions {
@@ -9774,6 +9794,10 @@ export declare interface WordTablePopupProps {
     renderFooter?: (actions: WordTablePopupActions) => PopupProps['footer'];
     /** renderFooter 사용 시 footer 래퍼에 추가할 클래스(정렬·간격 override용). */
     footerClassName?: string;
+    /** 바닥 줄의 가로 배치 — `Popup footerLayout` 을 그대로 내려보낸다(`'center'` 기본 · `'fill'` · `'between'`).
+     *  이 감싸개만 `footerClassName` 을 소비자에게 열고 있어, 여기 없으면 **이 창만** 앱 CSS 로 정렬을 칠해야 했다
+     *  (말귀 단어표 미리보기 창, 2026-09-18). */
+    footerLayout?: PopupProps['footerLayout'];
     /** 지정하면 하단에 "인쇄하기"·"새 창으로 보기" 버튼을 추가하고, 이 값을 PDF 저장 기본 파일명으로 쓴다. */
     printFileName?: string;
     /** 표 위에 '표 설정'(구성·용지 방향·외곽선 등) FilterPanel을 노출한다. */

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

@@ -236,6 +236,25 @@
   flex: 1;
   min-width: 0;
 }
+/* 오른쪽 칸이 남은 폭을 채우는 줄(useFullWidth) — **그 안의 것도 함께 늘어난다.**
+   오른쪽 칸만 늘리면 입력칸은 제 폭에 머물러 줄마다 끝이 들쭉날쭉했고, 소비자 일곱 자리가 이
+   `flex: 1` 한 줄을 각자 붙이고 있었다(말귀 앱 넷 · 어드민 셋, 2026-09-18 전수).
+   직계만 본다 — 안쪽 어디까지 늘릴지는 그 입력칸이 정한다(`TextField` 는 제 감싸개를 채운다). */
+.panel-row--fill .panel-row__right {
+  display: flex;
+  align-items: center;
+}
+.panel-row--fill .panel-row__right > * {
+  flex: 1;
+  min-width: 0;
+}
+/* 입력칸을 감싸개 없이 줄에 바로 넣는 자리도 같이 본다(앱이 `.panel-row > .text-field` 를 덮던 꼴) */
+.panel-row--fill > .text-field,
+.panel-row--fill > .dropdown,
+.panel-row--fill > .form-input {
+  flex: 1;
+  min-width: 0;
+}
 .panel-row--clickable {
   cursor: pointer;
   transition: background 0.1s, box-shadow 0.1s;

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

@@ -130,6 +130,15 @@ export type PanelRowChildren = {
     children?: ReactNode;
     align?: 'horizontal' | 'vertical';
     icon?: ReactNode;
+    /** 라벨을 고정 폭으로 두고 **오른쪽이 남는 폭을 채운다** — 그 안의 입력칸도 함께 늘어난다.
+     *
+     *  기본은 오른쪽이 **제 폭만** 차지한다(`flex: 0 0 auto`). 그래서 `TextField`·`Dropdown`·`form-input` 을
+     *  children 으로 넣으면 줄마다 오른쪽 끝이 들쭉날쭉했고, 소비자가 `.panel-row__right { display: flex }` +
+     *  `> * { flex: 1 }` 을 손으로 붙여 왔다 — 같은 한 줄이 말귀 앱 넷 · 어드민 셋에 흩어져 있었다(2026-09-18 전수).
+     *
+     *  `variant='input'`·`'dropdown'` 행은 늘 이 꼴이고, `'text'`·`'custom'` 은 같은 이름의 prop 으로 켠다 —
+     *  children 모드에만 통로가 없었다. 라벨 폭은 `Panel labelWidth` 로 정한다(기본 120px). */
+    useFullWidth?: boolean;
 };
 export type PanelRowProps = PanelRowToggle | PanelRowSegmented | PanelRowDropdown | PanelRowButton | PanelRowText | PanelRowInput | PanelRowCustom | PanelRowDescription | PanelRowEmpty | PanelRowLoading | PanelRowChildren;
 export declare function PanelRow(props: PanelRowProps): import("react").JSX.Element;

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

@@ -27,7 +27,7 @@ export function PanelRow(props) {
     const uid = useId();
     // children 기반 하위 호환 모드
     if (!('variant' in props)) {
-        const { label, sub, onClick, children, align = 'horizontal', icon } = props;
+        const { label, sub, onClick, children, align = 'horizontal', icon, useFullWidth = false } = props;
         const handleKeyDown = (e) => {
             if (!onClick)
                 return;
@@ -40,7 +40,7 @@ export function PanelRow(props) {
                 onClick();
             }
         };
-        return (_jsxs("div", { className: cx('panel-row', align === 'vertical' ? 'panel-row--vertical' : '', onClick ? 'panel-row--clickable' : ''), onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [icon != null && _jsx("div", { className: "panel-row__icon", children: icon }), label != null && (_jsxs("div", { className: "panel-row__left", children: [_jsx("div", { className: "panel-row__label body-3", children: label }), sub && _jsx("div", { className: "panel-row__sub caption-1", children: sub })] })), _jsx("div", { className: "panel-row__right", children: children })] }));
+        return (_jsxs("div", { className: cx('panel-row', align === 'vertical' ? 'panel-row--vertical' : '', useFullWidth ? 'panel-row--label-fixed panel-row--fill' : '', onClick ? 'panel-row--clickable' : ''), onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [icon != null && _jsx("div", { className: "panel-row__icon", children: icon }), label != null && (_jsxs("div", { className: "panel-row__left", children: [_jsx("div", { className: "panel-row__label body-3", children: label }), sub && _jsx("div", { className: "panel-row__sub caption-1", children: sub })] })), _jsx("div", { className: "panel-row__right", children: children })] }));
     }
     // 설명 전용 행 — 라벨/우측 구조 없이 문단만 렌더
     if (props.variant === 'description') {

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

@@ -12,6 +12,10 @@
 
 .section:last-child { padding-bottom: 0; }
 
+/* 격자 칸 안(inGrid) — 아래 여백을 푼다. `:last-child` 는 격자에서 **마지막 칸에만** 걸려
+   넷 중 셋만 여백을 달고 선다(카드 바닥선이 어긋난다). 칸 사이는 격자의 gap 이 맡는다. */
+.section--in-grid { padding-bottom: 0; }
+
 .section {
 }
 

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

@@ -15,8 +15,19 @@ export interface SectionProps {
     action?: ReactNode;
     disc?: ReactNode;
     children?: ReactNode;
+    /**
+     * CSS 격자(한 줄에 여러 칸) 안에 세울 때 켠다 — 아래 여백(`--spacing-page`)을 푼다.
+     *
+     * `Section` 은 **세로로 이어 놓는 것**을 전제로 아래 여백을 두고, 마지막 것만 `:last-child` 로 뺀다.
+     * 격자에 넣으면 그 규칙이 **마지막 칸에만** 걸려 넷 중 셋만 여백을 달고 선다 — 카드 바닥선이 어긋나고
+     * 줄 사이 간격도 달라 보인다(말귀 문장훈련 분석 2×2 실측 2026-09-18: 카드 506 vs 566px).
+     * 격자에서는 칸 사이를 `gap` 이 맡으므로 이 여백은 할 일이 없다.
+     *
+     * `ChartSection inGrid` 와 같은 뜻이다(그쪽은 최소 폭·바닥 맞춤도 함께 푼다).
+     */
+    inGrid?: boolean;
     className?: string;
     style?: CSSProperties;
 }
 /** @public */
-export default function Section({ type, title, headingLevel, icon, action, disc, children, className, style }: SectionProps): import("react").JSX.Element;
+export default function Section({ type, title, headingLevel, icon, action, disc, children, inGrid, className, style }: SectionProps): import("react").JSX.Element;

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

@@ -8,7 +8,7 @@ const TITLE_CLASS = {
     popup: 'h5',
 };
 /** @public */
-export default function Section({ type = 'page', title, headingLevel, icon, action, disc, children, className, style }) {
+export default function Section({ type = 'page', title, headingLevel, icon, action, disc, children, inGrid = false, className, style }) {
     const titleClass = TITLE_CLASS[type];
     // action·icon 만 줘도 머리를 그린다 — 제목·설명이 없으면 추가 단추가 조용히 버려졌다
     const hasHeader = title || disc || action || icon;
@@ -16,5 +16,5 @@ export default function Section({ type = 'page', title, headingLevel, icon, acti
        부르는 쪽이 정한다 — 안 주면 예전 그대로 div. 모양은 클래스(h3/h4/h5)가 정하고
        제목 태그의 기본 여백은 .section__title 의 margin:0 이 지운다. */
     const TitleTag = headingLevel ? `h${headingLevel}` : 'div';
-    return (_jsxs("div", { className: cx('section', `section--${type}`, className), style: style, children: [hasHeader && (_jsxs("div", { className: "section__header", children: [_jsxs("div", { className: "section__title-row", children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "section__icon" })), _jsxs("div", { className: "section__title-group", children: [title && _jsx(TitleTag, { className: `section__title ${titleClass}`, children: title }), disc && _jsx("div", { className: "section__disc body-3", children: disc })] })] }), action && _jsx("div", { className: "section__action", children: action })] })), children] }));
+    return (_jsxs("div", { className: cx('section', `section--${type}`, inGrid && 'section--in-grid', className), style: style, children: [hasHeader && (_jsxs("div", { className: "section__header", children: [_jsxs("div", { className: "section__title-row", children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "section__icon" })), _jsxs("div", { className: "section__title-group", children: [title && _jsx(TitleTag, { className: `section__title ${titleClass}`, children: title }), disc && _jsx("div", { className: "section__disc body-3", children: disc })] })] }), action && _jsx("div", { className: "section__action", children: action })] })), children] }));
 }

package/dist/packages/core/src/components/Training/WordTablePopup.d.ts

@@ -32,6 +32,10 @@ export interface WordTablePopupProps {
     renderFooter?: (actions: WordTablePopupActions) => PopupProps['footer'];
     /** renderFooter 사용 시 footer 래퍼에 추가할 클래스(정렬·간격 override용). */
     footerClassName?: string;
+    /** 바닥 줄의 가로 배치 — `Popup footerLayout` 을 그대로 내려보낸다(`'center'` 기본 · `'fill'` · `'between'`).
+     *  이 감싸개만 `footerClassName` 을 소비자에게 열고 있어, 여기 없으면 **이 창만** 앱 CSS 로 정렬을 칠해야 했다
+     *  (말귀 단어표 미리보기 창, 2026-09-18). */
+    footerLayout?: PopupProps['footerLayout'];
     /** 지정하면 하단에 "인쇄하기"·"새 창으로 보기" 버튼을 추가하고, 이 값을 PDF 저장 기본 파일명으로 쓴다. */
     printFileName?: string;
     /** 표 위에 '표 설정'(구성·용지 방향·외곽선 등) FilterPanel을 노출한다. */
@@ -58,4 +62,4 @@ export interface WordTablePopupProps {
  * 표 내부에는 제목을 두지 않아 팝업 헤더 제목과 중복되지 않는다.
  * @public
  */
-export default function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, printFileName, showSettings, autoPrint, className, onClose, scoring, onScoreChange, printHeader, beforeClose }: WordTablePopupProps): import("react").JSX.Element;
+export default function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, footerLayout, printFileName, showSettings, autoPrint, className, onClose, scoring, onScoreChange, printHeader, beforeClose }: WordTablePopupProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Training/WordTablePopup.js

@@ -19,7 +19,7 @@ import { useToastState } from '../../hooks/useToastState';
  * 표 내부에는 제목을 두지 않아 팝업 헤더 제목과 중복되지 않는다.
  * @public
  */
-export default function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, printFileName, showSettings, autoPrint, className, onClose, scoring = false, onScoreChange, printHeader, beforeClose }) {
+export default function WordTablePopup({ items, words, title, subtitle, emptyText, buttons, renderButtons, renderFooter, footerClassName, footerLayout, printFileName, showSettings, autoPrint, className, onClose, scoring = false, onScoreChange, printHeader, beforeClose }) {
     const { t } = useTranslation();
     // items 우선, 없으면 문자열 words → 한 단어=한 칸으로 매핑
     const tableItems = useMemo(() => {
@@ -115,5 +115,5 @@ export default function WordTablePopup({ items, words, title, subtitle, emptyTex
         }, 100);
         return () => window.clearTimeout(id);
     }, [autoPrint]);
-    return (_jsxs(Popup, { title: title ?? t('keyWords.title', '주요 단어'), subtitle: subtitle, size: "large", className: cx('word-table-popup', className), buttons: footerButtons, footer: customFooter, footerClassName: footerClassName, beforeClose: beforeClose, onClose: onClose, children: [tableItems.length > 0 ? (_jsxs("div", { className: "word-table-popup__body", children: [showSettings && (_jsx(TableFilterPanel, { sections: filterSections, selected: filterSelected, onSelect: handleSelect })), isPaginated ? (_jsx("div", { className: "word-table-popup__pages", children: pages.map((page, i) => (_jsx(WordTable, { items: page, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: el => { pageRefs.current[i] = el; }, pageNumber: { current: i + 1, total: pages.length }, pageNumberPosition: pageNumberPosition, scoring: scoring, scoreIndexOffset: pageStart[i], marks: 표에줄채점, onMarkClick: handleMarkClick }, i))) })) : (_jsx("div", { className: "word-table-popup__table", children: _jsx(WordTable, { items: tableItems, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: contentRef, fitHeight: true, scoring: scoring, marks: 표에줄채점, onMarkClick: handleMarkClick }) }))] })) : (_jsx("p", { className: "word-table-popup__empty body-3", children: emptyText ?? t('keyWords.empty', '추출된 주요 단어가 없습니다.') })), _jsx(Toast, { message: toastMsg, position: "top", onClose: handleToastClose }, toastKey)] }));
+    return (_jsxs(Popup, { title: title ?? t('keyWords.title', '주요 단어'), subtitle: subtitle, size: "large", className: cx('word-table-popup', className), buttons: footerButtons, footer: customFooter, footerClassName: footerClassName, footerLayout: footerLayout, beforeClose: beforeClose, onClose: onClose, children: [tableItems.length > 0 ? (_jsxs("div", { className: "word-table-popup__body", children: [showSettings && (_jsx(TableFilterPanel, { sections: filterSections, selected: filterSelected, onSelect: handleSelect })), isPaginated ? (_jsx("div", { className: "word-table-popup__pages", children: pages.map((page, i) => (_jsx(WordTable, { items: page, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: el => { pageRefs.current[i] = el; }, pageNumber: { current: i + 1, total: pages.length }, pageNumberPosition: pageNumberPosition, scoring: scoring, scoreIndexOffset: pageStart[i], marks: 표에줄채점, onMarkClick: handleMarkClick }, i))) })) : (_jsx("div", { className: "word-table-popup__table", children: _jsx(WordTable, { items: tableItems, orientation: settings.orientation, contentTypes: settings.contentTypes, cutLine: settings.cutLine, showOutline: settings.showOutline, showDivLine: settings.showDivLine, count: settings.count, contentRef: contentRef, fitHeight: true, scoring: scoring, marks: 표에줄채점, onMarkClick: handleMarkClick }) }))] })) : (_jsx("p", { className: "word-table-popup__empty body-3", children: emptyText ?? t('keyWords.empty', '추출된 주요 단어가 없습니다.') })), _jsx(Toast, { message: toastMsg, position: "top", onClose: handleToastClose }, toastKey)] }));
 }

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

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

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

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