@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Word/ContrastFilterPanel.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import FilterPanel from '../FilterPanel';
+import FilterSectionInfo from '../FilterSectionInfo';
+/**
+ * 대립쌍(최소대립쌍) 검색 방식을 고르는 FilterPanel — 대립 방식/입력 음절 위치/입력 음절 갯수/입력 방식,
+ * 4개 모두 단일 선택 세그먼트. WordPairsPage의 [대립 설정] 패널이 원 출처.
+ * @public
+ */
+export default function ContrastFilterPanel({ title, mode, onModeChange, matchMode, onMatchModeChange, positionCount, onPositionCountChange, inputMode, onInputModeChange, className, }) {
+    const { t } = useTranslation();
+    const labels = {
+        searchMode: t('wordPairs.filter.searchModeLabel', '대립 방식'),
+        phonemeOrder: t('wordPairs.filter.phonemeOrder', '입력 음절 위치'),
+        count: t('wordPairs.filter.countLabel', '입력 음절 갯수'),
+        inputMode: t('wordPairs.filter.inputModeLabel', '입력 방식'),
+        orderAny: t('wordPairs.filter.orderAny', '무관'),
+        orderMatch: t('wordPairs.filter.orderMatch', '일치'),
+        include: t('wordPairs.mode.include', '음소 포함'),
+        pick: t('wordPairs.mode.pick', '음소 대립'),
+        explicit: t('wordPairs.mode.contrast', '음소 대립 지정'),
+        charInput: t('wordPairs.input.char', '글자 선택'),
+        pronInput: t('wordPairs.input.pron', '발음 선택'),
+    };
+    const countLabelFor = (n) => t('wordPairs.count', { n });
+    const sections = [
+        {
+            label: labels.searchMode,
+            items: [labels.include, labels.pick, labels.explicit],
+            display: 'segmented',
+            labelAction: _jsx(FilterSectionInfo, { title: t('wordPairs.mode.infoTitle', '대립 방식'), items: [t('wordPairs.mode.infoInclude', '음소 포함 — 선택한 음소가 모두 들어간 단어와 그 대립쌍을 찾아요.'), t('wordPairs.mode.infoPick', '음소 대립 — 선택한 음소가 대립쌍 두 단어의 실제 차이점일 때만 매칭돼요.'), t('wordPairs.mode.infoContrast', '음소 대립 지정 — 기준 단어와 대립 단어의 음소를 각각 직접 선택해 대립쌍을 찾아요.')] }),
+        },
+        {
+            label: labels.phonemeOrder,
+            items: [labels.orderAny, labels.orderMatch],
+            display: 'segmented',
+            labelAction: _jsx(FilterSectionInfo, { items: t('wordPairs.filter.phonemeOrderInfo', { returnObjects: true }) }),
+        },
+        { label: labels.count, items: [countLabelFor(1), countLabelFor(2)], display: 'segmented' },
+        {
+            label: labels.inputMode,
+            items: [labels.charInput, labels.pronInput],
+            display: 'segmented',
+            labelAction: _jsx(FilterSectionInfo, { title: t('wordPairs.input.infoTitle', '입력 방식'), items: [t('wordPairs.input.infoChar', '글자 선택 — 선택한 음소로 단어(글자 기준)를 찾은 후, 단어의 표준 발음 대립쌍을 찾습니다.'), t('wordPairs.input.infoPron', '발음 선택 — 선택한 음소로 표준 발음 대립쌍을 찾습니다.')] }),
+        },
+    ];
+    const selected = {
+        [labels.searchMode]: mode === 'explicit' ? labels.explicit : mode === 'pick' ? labels.pick : labels.include,
+        [labels.phonemeOrder]: matchMode === 'ordered' ? labels.orderMatch : labels.orderAny,
+        [labels.count]: countLabelFor(positionCount),
+        [labels.inputMode]: inputMode === 'phoneme' ? labels.pronInput : labels.charInput,
+    };
+    const onSelect = (value, sectionLabel) => {
+        if (sectionLabel === labels.searchMode) {
+            onModeChange(value === labels.explicit ? 'explicit' : value === labels.pick ? 'pick' : 'include');
+        }
+        else if (sectionLabel === labels.phonemeOrder) {
+            onMatchModeChange(value === labels.orderMatch ? 'ordered' : 'unordered');
+        }
+        else if (sectionLabel === labels.count) {
+            onPositionCountChange(value === countLabelFor(2) ? 2 : 1);
+        }
+        else if (sectionLabel === labels.inputMode) {
+            onInputModeChange(value === labels.pronInput ? 'phoneme' : 'word');
+        }
+    };
+    return (_jsx(FilterPanel, { className: className, title: title ?? t('wordPairs.filter.searchOptionsTitle', '대립 설정'), sections: sections, selected: selected, onSelect: onSelect, align: "inline" }));
+}

package/dist/packages/core/src/components/Word/PhonemeFilterPanel.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { type FilterPanelSection } from '../FilterPanel';
+/** @public */
+export interface PhonemeFilterPanelProps {
+    /** 패널 제목. 미지정 시 i18n(training.filter.phonemeGroup) 기본값 사용. */
+    title?: ReactNode;
+    /** 패널 헤더 우측 액션 — 보통 글자 입력/발음 입력 SegmentedControl(호출부가 값 변환까지 처리하는 콜백으로 구성). */
+    headerAction?: ReactNode;
+    /**
+     * 미리 구성된 초성/모음/종성 섹션(과, 필요하면 위치 등 추가 섹션) — 훈련 타입별 caps(제한 없음 노출 여부,
+     * 종성 '제외' 고정/금지, 발음클러스터 등)에 따라 형태가 달라(useWordTrainingFilter.ts) 섹션 자체는
+     * 호출부가 만든다. 이 컴포넌트는 그 결과를 일관된 제목·레이아웃으로 렌더링만 담당한다.
+     */
+    sections: FilterPanelSection[];
+    selected: Record<string, string | string[]>;
+    onSelect: (value: string, sectionLabel: string) => void;
+    className?: string;
+}
+/**
+ * 훈련할 음절(초성/모음/종성)을 고르는 FilterPanel 셸(shell) — 섹션 자체는 훈련 타입별 조건(caps)에
+ * 따라 호출부(useWordTrainingFilter)가 구성해 넘긴다. WordTrainingFilterPanels의 [훈련 음절] 패널이 원 출처.
+ * @public
+ */
+export default function PhonemeFilterPanel({ title, headerAction, sections, selected, onSelect, className }: PhonemeFilterPanelProps): import("react").JSX.Element | null;

package/dist/packages/core/src/components/Word/PhonemeFilterPanel.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import FilterPanel from '../FilterPanel';
+/**
+ * 훈련할 음절(초성/모음/종성)을 고르는 FilterPanel 셸(shell) — 섹션 자체는 훈련 타입별 조건(caps)에
+ * 따라 호출부(useWordTrainingFilter)가 구성해 넘긴다. WordTrainingFilterPanels의 [훈련 음절] 패널이 원 출처.
+ * @public
+ */
+export default function PhonemeFilterPanel({ title, headerAction, sections, selected, onSelect, className }) {
+    const { t } = useTranslation();
+    if (sections.length === 0)
+        return null;
+    return (_jsx(FilterPanel, { className: className, title: title ?? t('training.filter.phonemeGroup', { defaultValue: '훈련 음절' }), headerAction: headerAction, sections: sections, selected: selected, onSelect: onSelect, align: "newline" }));
+}

package/dist/packages/core/src/components/Word/PhonemeSelectBlock.css

@@ -0,0 +1,272 @@
+.phoneme-select-block {
+    align-items: flex-start;
+    width: 100%;
+    flex: 1 1 auto;
+}
+
+.phoneme-select-block__cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.phoneme-select-block__controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-xs);
+    width: 100%;
+}
+
+@media (max-width: 767px) {
+  .phoneme-select-block__controls {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.phoneme-select-block__count-control {
+    align-self: center;
+}
+
+.phoneme-select-block__cell-group {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+}
+
+.phoneme-select-block__cell-vs {
+    color: var(--color-lightGray);
+    align-self: center;
+    margin-bottom: 22px;
+    padding: 0 16px;
+}
+
+.phoneme-select-block__pair-panels {
+    display: flex;
+    gap: var(--spacing-s);
+    width: 100%;
+}
+
+.phoneme-select-block__panel-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    flex: 1;
+}
+
+.phoneme-select-block__cells {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    gap: var(--spacing-xs);
+    width: 100%;
+    padding: var(--spacing-m) 0;
+}
+
+.phoneme-select-block__cell-circle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 240px;
+    height: 80px;
+    border-radius: var(--radius-m);
+    background: var(--color-white);
+    border: 1px solid var(--color-whiteLine);
+    box-shadow: var(--shadow-tooltip);
+}
+
+.phoneme-select-block__cell-index {
+    /* 음절/자모 위치를 알려주는 라벨 — lightGray는 2.42:1로 AA 미달이었다 */
+    color: var(--color-gray);
+    line-height: 1;
+}
+
+.phoneme-select-block__cell-jamo {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.phoneme-select-block__cell-jamo-part {
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    /* 상하 여백이 수치상 대칭이어도 한글 자모 글자의 시각적 무게중심이
+       위쪽에 있어 위로 쏠려 보인다 — 위쪽에 여백을 더 줘서 의도적으로
+       아래로 내린다(라벨이 함께 있을 때 기준). */
+    padding-top: 3px;
+    color: var(--color-black);
+}
+
+/* 라벨이 없으면(빈 슬롯, 종성 제외) 글자 하나만 남으므로 위 보정이 오히려
+   아래로 치우쳐 보이게 한다 — 보정을 빼고 순수 중앙 정렬한다. */
+.phoneme-select-block__cell-jamo-part--no-label {
+    padding-top: 0;
+}
+
+.phoneme-select-block__cell-jamo-char.h1 {
+    /* .h1의 line-height(44px)가 그대로 남아있으면 글자 위아래로 보이지 않는
+       여백이 커져 라벨과 묶었을 때 전체가 위로 치우쳐 보인다 — 명시적으로
+       덮어써서 실제 글자 높이만큼만 차지하게 한다(specificity를 올려
+       .h1보다 확실히 우선 적용). */
+    line-height: 1;
+}
+
+.phoneme-select-block__cell-jamo-char--excluded {
+    color: var(--color-whiteLine);
+    /* 박스 중앙 정렬 수치는 다른 자모와 동일하지만, 'x' 글자 자체의 잉크가
+       한글 글자보다 아래쪽에 몰려 있어 시각적으로 처져 보인다 — 수동 보정. */
+    transform: translateY(-2px);
+}
+
+/* placeholder('-')도 같은 이유로 처져 보여 excluded와 동일하게 보정한다. */
+.phoneme-select-block__cell-jamo-part--empty .phoneme-select-block__cell-jamo-char {
+    transform: translateY(-2px);
+}
+
+.phoneme-select-block__cell-jamo-label {
+    color: var(--color-lightGray);
+    line-height: 1;
+}
+
+.phoneme-select-block__cell-jamo-part--empty .phoneme-select-block__cell-jamo-label {
+    color: var(--color-darkWhite);
+}
+
+.phoneme-select-block__cell-jamo-part + .phoneme-select-block__cell-jamo-part::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 20px;
+    background: var(--color-whiteLine);
+}
+
+.phoneme-select-block__cell-jamo-part--empty {
+    color: var(--color-darkWhite);
+}
+
+.phoneme-select-block__panels {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-m);
+    align-self: stretch;
+    width: 100%;
+}
+
+.phoneme-select-block__detail {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: center;
+    gap: var(--spacing-s);
+}
+
+.phoneme-select-block__detail > .filter-panel {
+    flex: 1;
+}
+
+/* Section에 직접 얹은 대립 설정(beforeContent)·단어 검색 설정(afterContent) 패널은
+   섹션이 align-items: flex-start라 콘텐츠 폭으로 줄어든다 — 카드 폭을 꽉 채우게 한다. */
+.phoneme-select-block > .filter-panel {
+    align-self: stretch;
+    width: 100%;
+}
+
+
+.phoneme-select-block__controls .button38--bar {
+    min-width: 96px;
+}
+
+.phoneme-select-block__required {
+    color: var(--color-main);
+    line-height: 1;
+    margin-left: 2px;
+}
+
+.phoneme-select-block__before-search {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    text-align: center;
+}
+
+.phoneme-select-block__search-row {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-xs);
+    width: 100%;
+}
+
+.phoneme-select-block__checking {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    height: 60px;
+    min-width: 198px;
+    padding: 0 28px;
+    border-radius: var(--radius-m);
+    border: 1px solid var(--color-whiteLine);
+    background: transparent;
+    color: var(--color-disabled);
+    cursor: default;
+}
+
+.phoneme-select-block__checking-label {
+    white-space: nowrap;
+}
+
+.phoneme-select-block__spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid var(--color-whiteLine);
+    border-top-color: var(--color-disabled);
+    border-radius: 50%;
+    animation: phonemeSpinner 0.7s linear infinite;
+    flex-shrink: 0;
+}
+
+@keyframes phonemeSpinner {
+    to { transform: rotate(360deg); }
+}
+
+@media (max-width: 767px) {
+  .phoneme-select-block__pair-panels {
+    flex-direction: column;
+  }
+  .phoneme-select-block__detail {
+    flex-direction: column;
+  }
+  .phoneme-select-block__detail > .filter-panel {
+    width: 100%;
+  }
+  .phoneme-select-block__cell-vs {
+    align-self: center;
+    margin-bottom: 0;
+    padding: 4px 0;
+  }
+  .phoneme-select-block__cells {
+    flex-wrap: wrap;
+  }
+  .phoneme-select-block__cell-circle {
+    width: min(240px, 100%);
+    height: 64px;
+  }
+  .phoneme-select-block__cell-jamo-part {
+    font-size: 24px;
+  }
+}

package/dist/packages/core/src/components/Word/PhonemeSelectBlock.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+import './PhonemeSelectBlock.css';
+import { type FilterPanelSection } from '../FilterPanel';
+import { type PhonemeSelectBlockSection } from './phonemeSelectBlockUtils';
+export type { PhonemeSelectBlockSection };
+/** @public */
+export interface PhonemeSelectBlockProps {
+    sections: (PhonemeSelectBlockSection | string)[];
+    selectedList: Record<string, string>[];
+    count: number;
+    onCountChange: (count: number) => void;
+    maxCount?: number;
+    minCount?: number;
+    combinationSections?: FilterPanelSection[];
+    combinationSectionsForSlot?: (selected: Record<string, string>, index: number) => FilterPanelSection[];
+    onSelect?: (index: number) => (value: string, sectionLabel: string) => void;
+    placeholder?: string;
+    className?: string;
+    title?: ReactNode;
+    titleIcon?: string;
+    disc?: ReactNode;
+    onClearPhoneme?: () => void;
+    onSearch?: () => void;
+    onSearchEmpty?: () => void;
+    searchDisabled?: boolean;
+    searchLabel?: string;
+    searchChecking?: boolean;
+    pairMode?: boolean;
+    showInfoButton?: boolean;
+    /** 검색 버튼 바로 위에 표시할 내용(예: 현재 검색 조건 요약 Badge) */
+    beforeSearchContent?: ReactNode;
+    /** Section 맨 위(카운트 컨트롤보다도 위)에 넣을 내용 — 예: 대립 설정 FilterPanel. 같은 Section 안에서
+     *  gap 간격을 공유하게 하려는 용도(호출부가 별도 카드로 쌓지 않도록). */
+    beforeContent?: ReactNode;
+    /** Section 맨 아래(검색 버튼보다도 아래)에 넣을 내용 — 예: 단어 검색 설정 FilterPanel. */
+    afterContent?: ReactNode;
+    /** true면 내부 1개/2개 SegmentedControl을 숨긴다(호출부가 count를 외부 FilterPanel 등에서 대신 관리할 때) */
+    hideCountControl?: boolean;
+    /** 섹션 타입: 기본 page, 팝업 페이지 pagePopup, 팝업 내 popup */
+    sectionType?: 'page' | 'pagePopup' | 'popup';
+    /** true면 슬롯 라벨을 "1번 음절" 대신 "첫번째 음절"로 표시(음절 위치가 '일치'일 때처럼 순서가 실제 의미를 가질 때) */
+    ordinal?: boolean;
+}
+/** @public */
+export default function PhonemeSelectBlock({ sections, selectedList, count, onCountChange, maxCount, minCount, combinationSections, combinationSectionsForSlot, onSelect, placeholder, className, title, titleIcon, disc, showInfoButton, onClearPhoneme, onSearch, onSearchEmpty, searchDisabled, searchLabel, searchChecking, pairMode, sectionType, beforeSearchContent, beforeContent, afterContent, hideCountControl, ordinal, }: PhonemeSelectBlockProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Word/PhonemeSelectBlock.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../utils/cx';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import useMediaQuery from '../../hooks/useMediaQuery';
+import { useHoverAnchor } from '../../hooks/useHoverAnchor';
+import './PhonemeSelectBlock.css';
+import Section from '../Section';
+import SegmentedControl from '../SegmentedControl';
+import FilterPanel from '../FilterPanel';
+import Button from '../Button';
+import DescriptionTooltip from '../Tooltip/DescriptionTooltip';
+import { sectionValues } from './phonemeSelectBlockUtils';
+/** @public */
+export default function PhonemeSelectBlock({ sections, selectedList, count, onCountChange, maxCount = 4, minCount = 1, combinationSections, combinationSectionsForSlot, onSelect, placeholder = '-', className, title, titleIcon, disc, showInfoButton = false, onClearPhoneme, onSearch, onSearchEmpty, searchDisabled = false, searchLabel, searchChecking = false, pairMode = false, sectionType = 'page', beforeSearchContent, beforeContent, afterContent, hideCountControl = false, ordinal = false, }) {
+    const { t } = useTranslation();
+    const infoNotes = useMemo(() => t('wordPairs.infoNotes', { returnObjects: true }), [t]);
+    const countOptions = useMemo(() => Array.from({ length: maxCount - minCount + 1 }, (_, i) => {
+        const n = minCount + i;
+        return { key: String(n), label: t('wordPairs.count', { n }) };
+    }), [t, maxCount, minCount]);
+    const ordinals = useMemo(() => t('wordPairs.ordinals', { returnObjects: true }), [t]);
+    // count===1이면 슬롯이 하나뿐이라 번호를 매길 이유가 없다 — "1번 음소" 대신 그냥 "음소".
+    const phonemeLabel = useCallback((n) => {
+        if (ordinal)
+            return t('wordPairs.phonemeOrdinalLabel', { ordinal: ordinals[n - 1] ?? n });
+        if (count === 1)
+            return t('wordPairs.phonemeSingleLabel', '음절');
+        return t('wordPairs.phonemeN', { n });
+    }, [ordinal, ordinals, count, t]);
+    const phonemeContrastLabel = useCallback((n) => {
+        if (ordinal)
+            return t('wordPairs.phonemeContrastOrdinalLabel', { ordinal: ordinals[n - 1] ?? n });
+        if (count === 1)
+            return t('wordPairs.phonemeContrastSingleLabel', '대립 음절');
+        return t('wordPairs.phonemeContrast', { n });
+    }, [ordinal, ordinals, count, t]);
+    // 검색을 시작하려면 최소 한 슬롯은 음소를 선택해야 하므로, 맨 처음 슬롯에만 필수 표시를 붙인다.
+    const panelTitle = useCallback((label, isFirst) => isFirst ? _jsxs(_Fragment, { children: [label, _jsx("span", { className: "phoneme-select-block__required", children: "*" })] }) : label, []);
+    const { anchorRect: infoAnchorRect, toggleAt: toggleInfo, close: handleCloseInfo } = useHoverAnchor();
+    const handleCountChange = useCallback((v) => onCountChange(Number(v)), [onCountChange]);
+    const isMobile = useMediaQuery('(max-width: 767px)');
+    const renderJamoParts = useCallback((selected) => sectionValues(selected, sections).map(({ label, value, displayLabel }) => {
+        const hasLabel = !!value && value !== '없음';
+        return (_jsxs("span", { className: cx('phoneme-select-block__cell-jamo-part', value ? '' : 'phoneme-select-block__cell-jamo-part--empty', hasLabel ? '' : 'phoneme-select-block__cell-jamo-part--no-label'), children: [_jsx("span", { className: `phoneme-select-block__cell-jamo-char h1${value === '없음' ? ' phoneme-select-block__cell-jamo-char--excluded' : ''}`, children: value === '없음' ? 'x' : (value || placeholder) }), hasLabel && _jsx("span", { className: "phoneme-select-block__cell-jamo-label caption-2", children: displayLabel ?? label })] }, label));
+    }), [sections, placeholder]);
+    const infoButton = (_jsxs(_Fragment, { children: [_jsx("div", { "data-tooltip-ignore": true, children: _jsx(Button, { size: 40, type: isMobile ? 'dot' : undefined, icon: "info", label: isMobile ? undefined : t('wordPairs.caution', '유의사항'), selected: !!infoAnchorRect, onClick: (e) => toggleInfo(e.currentTarget) }) }), infoAnchorRect && (_jsx(DescriptionTooltip, { title: t('wordPairs.caution', '유의사항'), items: infoNotes, anchorRect: infoAnchorRect, onClose: handleCloseInfo }))] }));
+    return (_jsxs(Section, { type: sectionType, title: title, icon: titleIcon, disc: disc, action: infoButton, className: cx('phoneme-select-block', className), children: [beforeContent, (!hideCountControl || (showInfoButton && !(title || disc))) && (_jsxs("div", { className: "phoneme-select-block__controls", children: [!hideCountControl && (_jsx(SegmentedControl, { options: countOptions, value: String(count), onChange: handleCountChange, size: 40, className: "phoneme-select-block__count-control" })), showInfoButton && !(title || disc) && infoButton] })), _jsx("div", { className: "phoneme-select-block__cells", children: pairMode
+                    ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "phoneme-select-block__cell-group", children: Array.from({ length: count }).map((_, pairIdx) => {
+                                    const sel = selectedList[pairIdx * 2] ?? {};
+                                    return (_jsxs("div", { className: "phoneme-select-block__cell", children: [_jsx("div", { className: "phoneme-select-block__cell-circle", children: _jsx("div", { className: "phoneme-select-block__cell-jamo", children: renderJamoParts(sel) }) }), _jsx("span", { className: "phoneme-select-block__cell-index caption-1", children: phonemeLabel(pairIdx + 1) })] }, pairIdx));
+                                }) }), _jsx("span", { className: "phoneme-select-block__cell-vs h3", children: t('wordPairs.phonemeSelect.vs', '대') }), _jsx("div", { className: "phoneme-select-block__cell-group", children: Array.from({ length: count }).map((_, pairIdx) => {
+                                    const sel = selectedList[pairIdx * 2 + 1] ?? {};
+                                    return (_jsxs("div", { className: "phoneme-select-block__cell", children: [_jsx("div", { className: "phoneme-select-block__cell-circle", children: _jsx("div", { className: "phoneme-select-block__cell-jamo", children: renderJamoParts(sel) }) }), _jsx("span", { className: "phoneme-select-block__cell-index caption-1", children: phonemeContrastLabel(pairIdx + 1) })] }, pairIdx));
+                                }) })] }))
+                    : selectedList.map((selected, i) => (_jsxs("div", { className: "phoneme-select-block__cell", children: [_jsx("div", { className: "phoneme-select-block__cell-circle", children: _jsx("div", { className: "phoneme-select-block__cell-jamo", children: renderJamoParts(selected) }) }), _jsx("span", { className: "phoneme-select-block__cell-index caption-1", children: phonemeLabel(i + 1) })] }, i))) }), (combinationSections || combinationSectionsForSlot) && (_jsx("div", { className: "phoneme-select-block__panels", children: _jsx("div", { className: "phoneme-select-block__detail", children: pairMode
+                        ? (_jsxs("div", { className: "phoneme-select-block__pair-panels", children: [_jsx("div", { className: "phoneme-select-block__panel-group", children: Array.from({ length: count }).map((_, pairIdx) => {
+                                        const sel = selectedList[pairIdx * 2] ?? {};
+                                        return (_jsx(FilterPanel, { title: panelTitle(phonemeLabel(pairIdx + 1), pairIdx === 0), sections: combinationSectionsForSlot ? combinationSectionsForSlot(sel, pairIdx * 2) : combinationSections, selected: sel, onSelect: onSelect?.(pairIdx * 2), align: "newline" }, pairIdx));
+                                    }) }), _jsx("div", { className: "phoneme-select-block__panel-group", children: Array.from({ length: count }).map((_, pairIdx) => {
+                                        const sel = selectedList[pairIdx * 2 + 1] ?? {};
+                                        return (_jsx(FilterPanel, { title: phonemeContrastLabel(pairIdx + 1), sections: combinationSectionsForSlot ? combinationSectionsForSlot(sel, pairIdx * 2 + 1) : combinationSections, selected: sel, onSelect: onSelect?.(pairIdx * 2 + 1), align: "newline" }, pairIdx));
+                                    }) })] }))
+                        : selectedList.map((selected, i) => (_jsx(FilterPanel, { title: panelTitle(phonemeLabel(i + 1), i === 0), sections: combinationSectionsForSlot ? combinationSectionsForSlot(selected, i) : combinationSections, selected: selected, onSelect: onSelect?.(i), align: "newline" }, i))) }) })), beforeSearchContent && (_jsx("div", { className: "phoneme-select-block__before-search", children: beforeSearchContent })), (onClearPhoneme || onSearch || searchChecking) && (() => {
+                // 종성 '제외'(없음)만 선택된 슬롯은 실제 음소를 고른 것으로 치지 않는다 —
+                // "받침 없음"은 단독으로는 검색 조건이 되기엔 너무 느슨한 보조 조건이라서다.
+                const isEmpty = selectedList.every(sel => Object.entries(sel).every(([k, v]) => !v || (k === '종성' && v === '없음')));
+                return (_jsxs("div", { className: "phoneme-select-block__search-row", onClick: isEmpty ? onSearchEmpty : undefined, children: [onClearPhoneme && (_jsx(Button, { size: "56", type: "bar", label: t('wordPairs.resetOptions', '검색 옵션 초기화'), selected: false, disabled: isEmpty, onClick: isEmpty ? undefined : onClearPhoneme })), searchChecking ? (_jsxs("div", { className: "phoneme-select-block__checking", children: [_jsx("div", { className: "phoneme-select-block__spinner" }), _jsx("span", { className: "button-1 phoneme-select-block__checking-label", children: searchLabel ?? t('wordSearch.searchButton', '검색하기') })] })) : onSearch && (_jsx(Button, { size: "56", type: "bar", variant: "main", label: searchLabel ?? t('wordSearch.searchButton', '검색하기'), disabled: isEmpty || searchDisabled, onClick: isEmpty || searchDisabled ? undefined : onSearch }))] }));
+            })(), afterContent] }));
+}

package/dist/packages/core/src/components/Word/TableFilterPanel.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import { type FilterPanelSection } from '../FilterPanel';
+import type { WordTableOrientation, WordTableCutLine, WordTableContentType } from '../WordTable';
+import { type TableSettingsSetters } from './wordTableSettings';
+interface TableFilterPanelBaseProps {
+    /** 패널 제목. 미지정 시 i18n(wordTable.filterTitle) 기본값 사용. */
+    title?: ReactNode;
+    className?: string;
+}
+/**
+ * 셸(shell) 모드 — 이미 같은 5개 wordTableSettings.ts 빌더로 섹션을 직접 만든 호출부
+ * (예: useWordTableDisplaySettings)가 그 결과를 그대로 넘길 때 쓴다.
+ * @public
+ */
+export interface TableFilterPanelShellProps extends TableFilterPanelBaseProps {
+    sections: FilterPanelSection[];
+    selected: Record<string, string | string[]>;
+    onSelect: (value: string, sectionLabel: string) => void;
+}
+/**
+ * 스마트 모드 — 원시 상태+setter로부터 구성/용지 방향/외곽선(+옵션)을 이 컴포넌트가 직접 조립한다.
+ * @public
+ */
+export interface TableFilterPanelSmartProps extends TableFilterPanelBaseProps {
+    hasImage: boolean;
+    hasColloquial: boolean;
+    contentTypes: WordTableContentType[];
+    orientation: WordTableOrientation;
+    showOutline: boolean;
+    cutLine: WordTableCutLine;
+    showDivLine: boolean;
+    /** 기본 5개 설정(구성·용지 방향·외곽선·절취선·구분선) 상태 setter 묶음. */
+    setters: TableSettingsSetters;
+    /** 절취선 섹션 노출 여부 — 칸 수가 1개보다 많을 때만(호출부가 판단). */
+    showCutLine?: boolean;
+    /** 구분선 섹션 노출 여부 — 대립쌍표 등 짝이 있는 표에서만(호출부가 판단). */
+    showDivLine2?: boolean;
+    /** 용지 방향과 외곽선 사이에 끼워 넣을 추가 섹션 — 칸 수/페이지당 개수/페이지 번호 등, 호출부 전용이라 직접 구성해 넘긴다. */
+    middleSections?: FilterPanelSection[];
+    /** middleSections의 현재 선택값. */
+    extraSelected?: Record<string, string | string[]>;
+    /** middleSections의 select 처리 — 기본 5개 섹션이 아닐 때만 호출된다. */
+    onExtraSelect?: (value: string, sectionLabel: string) => void;
+}
+/** @public */
+export type TableFilterPanelProps = TableFilterPanelShellProps | TableFilterPanelSmartProps;
+/**
+ * 단어표 인쇄/표시 옵션을 고르는 FilterPanel — 구성(이미지/단어/표준 발음/구어체 발음)·용지 방향·외곽선은
+ * 항상 노출, 절취선·구분선은 옵션. wordTableSettings.ts의 공용 빌더를 그대로 써서 WordTableBlock의
+ * [표 설정] 패널과 동일한 매칭 규칙(값·라벨)을 유지한다. 칸 수 등 호출부 전용 섹션은 middleSections로 끼워 넣는다.
+ * `sections`를 직접 넘기면(셸 모드) 내부 조립을 건너뛰고 그대로 렌더링만 한다 — 이미 같은 빌더로
+ * 섹션을 직접 만든 훅(useWordTableDisplaySettings 등)을 위한 경로다.
+ * @public
+ */
+export default function TableFilterPanel(props: TableFilterPanelProps): import("react").JSX.Element;
+export {};

package/dist/packages/core/src/components/Word/TableFilterPanel.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import FilterPanel from '../FilterPanel';
+import { buildCompositionSection, buildOrientationSection, buildBorderSection, buildCutLineSection, buildDivLineSection, buildTableSettingsSelected, applyTableSettingsSelect, } from './wordTableSettings';
+function isShellProps(props) {
+    return 'sections' in props;
+}
+/**
+ * 단어표 인쇄/표시 옵션을 고르는 FilterPanel — 구성(이미지/단어/표준 발음/구어체 발음)·용지 방향·외곽선은
+ * 항상 노출, 절취선·구분선은 옵션. wordTableSettings.ts의 공용 빌더를 그대로 써서 WordTableBlock의
+ * [표 설정] 패널과 동일한 매칭 규칙(값·라벨)을 유지한다. 칸 수 등 호출부 전용 섹션은 middleSections로 끼워 넣는다.
+ * `sections`를 직접 넘기면(셸 모드) 내부 조립을 건너뛰고 그대로 렌더링만 한다 — 이미 같은 빌더로
+ * 섹션을 직접 만든 훅(useWordTableDisplaySettings 등)을 위한 경로다.
+ * @public
+ */
+export default function TableFilterPanel(props) {
+    const { t } = useTranslation();
+    const { title, className } = props;
+    if (isShellProps(props)) {
+        return (_jsx(FilterPanel, { className: className, title: title ?? t('wordTable.filterTitle', '표 설정'), sections: props.sections, selected: props.selected, onSelect: props.onSelect, align: "inline" }));
+    }
+    const { hasImage, hasColloquial, contentTypes, orientation, showOutline, cutLine, showDivLine, setters, showCutLine = false, showDivLine2 = false, middleSections = [], extraSelected = {}, onExtraSelect, } = props;
+    const sections = [
+        buildCompositionSection(t, { hasImage, hasColloquial }),
+        buildOrientationSection(t),
+        ...middleSections,
+        buildBorderSection(t),
+        ...(showCutLine ? [buildCutLineSection(t)] : []),
+        ...(showDivLine2 ? [buildDivLineSection(t)] : []),
+    ];
+    const selected = {
+        ...buildTableSettingsSelected(t, { contentTypes, orientation, showOutline, cutLine, showDivLine }),
+        ...extraSelected,
+    };
+    const onSelect = (value, sectionLabel) => {
+        if (applyTableSettingsSelect(t, value, sectionLabel, setters))
+            return;
+        onExtraSelect?.(value, sectionLabel);
+    };
+    return (_jsx(FilterPanel, { className: className, title: title ?? t('wordTable.filterTitle', '표 설정'), sections: sections, selected: selected, onSelect: onSelect, sectionAlign: "horizontal" }));
+}

package/dist/packages/core/src/components/Word/WordSearchFilterPanel.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { type FilterPanelSection } from '../FilterPanel';
+/** @public */
+export interface WordSearchFilterPanelProps {
+    /** 패널 제목. 미지정 시 i18n(wordSearch.filterTitle) 기본값 사용. */
+    title?: ReactNode;
+    /**
+     * 미리 구성된 섹션들(등급/품사/어종/음절 수/선택 등) — 호출부마다 노출 섹션·순서·옵션이 달라(예:
+     * WordSearchPage는 고정 5섹션, WordTrainingFilterPanels는 훈련 타입별 caps로 가변) 섹션 자체는
+     * 호출부가 만든다. 이 컴포넌트는 그 결과를 일관된 제목·레이아웃으로 렌더링만 담당한다.
+     */
+    sections: FilterPanelSection[];
+    selected: Record<string, string | string[]>;
+    onSelect: (value: string, sectionLabel: string) => void;
+    className?: string;
+}
+/**
+ * 단어를 어떤 조건으로 좁힐지 고르는 FilterPanel 셸(shell) — 등급/품사/어종/음절 수/선택 섹션 자체는
+ * 호출부가 구성해 넘긴다. WordSearchPage의 [단어 검색 설정] 패널과 WordTrainingFilterPanels의
+ * [단어 선정] 패널이 원 출처(섹션 구성은 다르지만 같은 셸을 공용).
+ * @public
+ */
+export default function WordSearchFilterPanel({ title, sections, selected, onSelect, className }: WordSearchFilterPanelProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Word/WordSearchFilterPanel.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import FilterPanel from '../FilterPanel';
+/**
+ * 단어를 어떤 조건으로 좁힐지 고르는 FilterPanel 셸(shell) — 등급/품사/어종/음절 수/선택 섹션 자체는
+ * 호출부가 구성해 넘긴다. WordSearchPage의 [단어 검색 설정] 패널과 WordTrainingFilterPanels의
+ * [단어 선정] 패널이 원 출처(섹션 구성은 다르지만 같은 셸을 공용).
+ * @public
+ */
+export default function WordSearchFilterPanel({ title, sections, selected, onSelect, className }) {
+    const { t } = useTranslation();
+    return (_jsx(FilterPanel, { className: className, title: title ?? t('wordSearch.filterTitle', '단어 검색 설정'), sections: sections, selected: selected, onSelect: onSelect, align: "inline" }));
+}