@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,126 @@
+/**
+ * 단어표 채점 — 표의 한 **칸**에 매기는 표시와 그 셈.
+ *
+ * 치료사가 표를 보여 주고 칸마다 맞았는지 표시한다(대립쌍표는 쌍 하나가 한 시행이다). 종이에 하던 일을 화면에서
+ * 그대로 하게 하는 것이라, 표시는 셋뿐이다.
+ *
+ *   O   맞음
+ *   △   반응은 했으나 정확하지 않음(다시 들려주면 맞히는 정도)
+ *   X   틀림
+ *
+ * 이 파일에는 **화면이 없다.** 표시가 어떤 순서로 도는지, 몇 개가 맞았는지만 안다.
+ * 그래야 표 없이 표로 확인할 수 있다.
+ */
+/**
+ * 표의 한 **칸**을 가리키는 열쇠.
+ *
+ * 낱말 하나가 아니라 칸 하나다. **대립쌍표에서 한 칸은 낱말 둘이지만 시행은 한 번**이다 —
+ * 듣고 둘 중 하나를 고르는 것이라, 맞았는지 틀렸는지는 쌍에 대해 매긴다. 낱말마다
+ * 매기게 하면 '가게'는 맞고 '가재'는 틀렸다는, 이 과제에 없는 답이 만들어진다.
+ * 단어표(칸당 낱말 하나)에서는 칸과 낱말이 같으므로 규칙이 하나로 통한다.
+ *
+ * 같은 낱말이 표에 여러 번 나오므로(대립쌍표의 '가다'는 여섯 번) 낱말이 아니라 자리로 센다.
+ */
+export function scoreKey(cellIndex) {
+    return String(cellIndex);
+}
+/** 매길 수 있는 표시 — 화면에 이 순서로 늘어놓는다(맞음 → 애매 → 틀림) */
+export const MARKS = ['o', 'triangle', 'x'];
+/**
+ * 어떤 표시를 눌렀을 때 그 칸이 갖게 될 값.
+ *
+ * **이미 매겨진 것을 다시 누르면 지운다.** 지울 길이 없으면 잘못 누른 표시를 없애려고
+ * 치료사가 팝업을 닫았다 다시 열게 되고, 그러면 그때까지 매긴 것이 전부 사라진다.
+ * 세 단추를 늘어놓는 방식이라 "다른 표시로 바꾸기"는 그 단추를 누르면 되고,
+ * "지우기"만 따로 길을 내 주면 된다.
+ */
+export function markAfterClick(current, clicked) {
+    return current === clicked ? null : clicked;
+}
+/** 표시마다 쓰는 아이콘 이름(lucide). 저장소가 쓰는 아이콘 체계를 그대로 따른다. */
+export const MARK_ICON = {
+    o: 'circle',
+    triangle: 'triangle',
+    x: 'x',
+};
+/**
+ * 표시마다 쓰는 단추 변형.
+ *
+ * **모양(아이콘)이 이미 셋을 가르고 색은 거들 뿐이다** — 색만으로 구분하게 두면
+ * 색을 잘 못 가리는 사람에게는 세 표시가 같아진다.
+ */
+/**
+ * 고른 표시의 단추 변형.
+ *
+ * △ 는 `sub`(청록)였는데 **파랑 옆에서 '좋음' 계열로 읽혔다** — ○ 와 △ 가 나란히
+ * 있으면 둘 다 통과한 것처럼 보인다. 애매함은 주의색이 맞다.
+ *
+ * `Button` 에 warn 변형이 없어 이름만 여기서 정하고, 색은 `WordTable.css` 가
+ * `--color-warn` 으로 입힌다(변형을 새로 만들면 앱 전체 단추에 영향이 간다).
+ */
+export const MARK_VARIANT = {
+    o: 'main',
+    triangle: 'warn',
+    x: 'danger',
+};
+/**
+ * 표시들을 센다.
+ *
+ * △ 를 **반 점으로 친다.** 맞음도 틀림도 아닌 것을 어느 한쪽에 몰아넣으면 그 표시를
+ * 두는 뜻이 없어진다. (다르게 세고 싶으면 이 함수만 고치면 된다 — 화면은 여기 결과만 쓴다.)
+ */
+export function summarize(marks) {
+    let o = 0, triangle = 0, x = 0;
+    for (const v of Object.values(marks)) {
+        if (v === 'o')
+            o++;
+        else if (v === 'triangle')
+            triangle++;
+        else if (v === 'x')
+            x++;
+    }
+    const marked = o + triangle + x;
+    return { marked, o, triangle, x, rate: marked === 0 ? null : (o + triangle * 0.5) / marked };
+}
+/**
+ * 저장에 실을 표시들만 남긴다.
+ *
+ * 화면 쪽 상태에는 **지운 칸이 `null` 로 남는다** — 한 번 매겼다 지우면 그 열쇠가
+ * 사라지지 않고 값만 비는 식이다(`markAfterClick` 참고). 그대로 서버에 보내면
+ * `{"3": null}` 같은 것이 저장되고, 나중에 "3번 칸은 채점했는데 값이 없다"는,
+ * 있지도 않은 상태를 읽게 된다. 안 매긴 칸은 **아예 없어야** 한다.
+ */
+export function marksForSave(marks) {
+    const out = {};
+    for (const [k, v] of Object.entries(marks)) {
+        if (v === 'o' || v === 'triangle' || v === 'x')
+            out[k] = v;
+    }
+    return out;
+}
+/**
+ * 쪽마다 **첫 칸이 표 전체에서 몇 번째인가.**
+ *
+ * 표가 여러 쪽으로 나뉘면 쪽마다 표 컴포넌트가 따로 뜨고 칸 번호를 0부터 다시 센다.
+ * 그대로 두면 1쪽 0번과 2쪽 0번이 같은 열쇠가 되어 **채점이 서로를 덮어쓴다** —
+ * 8칸짜리 두 쪽을 매기면 뒤쪽 8칸이 앞쪽을 지운다. 쪽의 시작 번호를 더해 유일하게 만든다.
+ */
+export function pageStartIndexes(pageLengths) {
+    const out = [];
+    let n = 0;
+    for (const len of pageLengths) {
+        out.push(n);
+        n += len;
+    }
+    return out;
+}
+/**
+ * 채점 화면을 떠나려 할 때 **물어봐야 하는가.**
+ *
+ * 채점은 저장하기 전까지 화면에만 있다. 훈련 한 시간을 매긴 뒤 닫기를 스치면 그대로
+ * 사라졌다(실측: 두 칸을 매기고 X 를 누르니 아무 말 없이 닫혔다). 잃을 것이 있을 때만
+ * 붙잡는다 — 아무것도 안 매겼거나 이미 저장했으면 묻는 것이 방해일 뿐이다.
+ */
+export function shouldConfirmDiscard(markedCount, alreadySaved) {
+    return !alreadySaved && markedCount > 0;
+}

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

@@ -0,0 +1,56 @@
+import type { TFunction } from 'i18next';
+import { type FilterPanelSection } from '../FilterPanel';
+import type { WordTableOrientation, WordTableContentType, WordTableCutLine, PageNumberPosition } from '../WordTable';
+/**
+ * '표 설정'(단어표 표시 옵션) 공용 섹션 빌더·선택상태·핸들러.
+ * 표시 전용 훅(useWordTableDisplaySettings)과 편집/페이지분할까지 있는 WordTableBlock이 기본 5개 설정
+ * (구성·용지 방향·외곽선·절취선·구분선)을 여기서 공용으로 조립한다. 각 소비처는 자신의 표시 조건
+ * (절취선=칸>1, 구분선=대립쌍 등)에 따라 섹션 포함 여부만 결정하고, WordTableBlock은 칸 수·페이지당
+ * 개수·페이지 번호 섹션을 그 사이에 끼워 넣는다.
+ */
+/** @public 구성(이미지/단어/표준발음/구어체발음) 다중 토글 섹션. */
+export declare function buildCompositionSection(t: TFunction, opts: {
+    hasImage: boolean;
+    hasColloquial: boolean;
+}): FilterPanelSection;
+/** @public 용지 방향(가로/세로) 세그먼트 섹션. */
+export declare function buildOrientationSection(t: TFunction): FilterPanelSection;
+/** @public 외곽선(표시/미표시) 세그먼트 섹션. */
+export declare function buildBorderSection(t: TFunction): FilterPanelSection;
+/** @public 절취선(표시/점선/코너/미표시) 세그먼트 섹션. */
+export declare function buildCutLineSection(t: TFunction): FilterPanelSection;
+/** @public 구분선(대립선, 표시/미표시) 세그먼트 섹션 — 대립쌍표에만 노출. */
+export declare function buildDivLineSection(t: TFunction): FilterPanelSection;
+/** @public 페이지당 대립쌍/단어 수 세그먼트 섹션. 첫 옵션은 항상 전체(itemCount=한 페이지에 전부), 나머지는 그보다 작은 표준 분할값. */
+export declare function buildItemsPerPageSection(t: TFunction, opts: {
+    hasPairs: boolean;
+    itemCount: number;
+}): FilterPanelSection;
+/** @public 페이지 번호 위치(왼쪽/중앙/오른쪽/미표시) 세그먼트 섹션 — 실제 2페이지 이상일 때만 노출. */
+export declare function buildPageNumberSection(t: TFunction): FilterPanelSection;
+/** @public 페이지 번호 위치 → filterSelected 표시값. */
+export declare const PAGE_NUM_POSITION_VALUE: Record<PageNumberPosition, string>;
+/** @public FilterPanel 선택값 → 페이지 번호 위치. */
+export declare function parsePageNumberPosition(value: string): PageNumberPosition;
+/** @public 기본 5개 설정의 filterSelected 엔트리(호출부가 자신의 추가 섹션과 spread). */
+export declare function buildTableSettingsSelected(t: TFunction, v: {
+    contentTypes: WordTableContentType[];
+    orientation: WordTableOrientation;
+    showOutline: boolean;
+    cutLine: WordTableCutLine;
+    showDivLine: boolean;
+}): Record<string, string | string[]>;
+/** @public 기본 5개 설정 상태 setter 묶음. */
+export interface TableSettingsSetters {
+    setContentTypes: (updater: (prev: WordTableContentType[]) => WordTableContentType[]) => void;
+    setOrientation: (v: WordTableOrientation) => void;
+    setShowOutline: (v: boolean) => void;
+    setCutLine: (v: WordTableCutLine) => void;
+    setShowDivLine: (v: boolean) => void;
+}
+/**
+ * @public 기본 5개 설정 섹션의 FilterPanel select 처리. 처리했으면 true, 아니면(추가 섹션 라벨) false를
+ * 반환하니, 호출부는 false일 때만 자신의 추가 섹션(칸 수·페이지 등)을 처리하면 된다.
+ * '전체' 버튼은 로케일 무관 FILTER_ALL_VALUE를 방출하므로 t('common.all', '전체')과 비교하지 않는다.
+ */
+export declare function applyTableSettingsSelect(t: TFunction, value: string, sectionLabel: string, s: TableSettingsSetters): boolean;

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

@@ -0,0 +1,140 @@
+import { FILTER_ALL_VALUE } from '../FilterPanel';
+import { ITEMS_PER_PAGE_OPTIONS } from './wordTableBlockTypes';
+/**
+ * '표 설정'(단어표 표시 옵션) 공용 섹션 빌더·선택상태·핸들러.
+ * 표시 전용 훅(useWordTableDisplaySettings)과 편집/페이지분할까지 있는 WordTableBlock이 기본 5개 설정
+ * (구성·용지 방향·외곽선·절취선·구분선)을 여기서 공용으로 조립한다. 각 소비처는 자신의 표시 조건
+ * (절취선=칸>1, 구분선=대립쌍 등)에 따라 섹션 포함 여부만 결정하고, WordTableBlock은 칸 수·페이지당
+ * 개수·페이지 번호 섹션을 그 사이에 끼워 넣는다.
+ */
+/** @public 구성(이미지/단어/표준발음/구어체발음) 다중 토글 섹션. */
+export function buildCompositionSection(t, opts) {
+    return {
+        label: t('wordTable.filter.composition', '구성'),
+        items: [
+            { value: '이미지', disabled: !opts.hasImage, displayLabel: t('wordTable.filter.image', '이미지') },
+            { value: '단어', displayLabel: t('wordTable.filter.word', '단어') },
+            { value: '표준 발음', displayLabel: t('wordTable.filter.standardPron', '표준 발음') },
+            { value: '구어체 발음', disabled: !opts.hasColloquial, displayLabel: t('wordTable.filter.colloquialPron', '구어체 발음') },
+        ],
+        multiple: true,
+        allOption: true,
+    };
+}
+/** @public 용지 방향(가로/세로) 세그먼트 섹션. */
+export function buildOrientationSection(t) {
+    return {
+        label: t('wordTable.filter.paperOrientation', '용지 방향'),
+        items: [
+            { value: '가로', displayLabel: t('wordTable.filter.landscape', '가로') },
+            { value: '세로', displayLabel: t('wordTable.filter.portrait', '세로') },
+        ],
+        display: 'segmented',
+    };
+}
+/** @public 외곽선(표시/미표시) 세그먼트 섹션. */
+export function buildBorderSection(t) {
+    return {
+        label: t('wordTable.filter.border', '외곽선'),
+        items: [
+            { value: '표시', displayLabel: t('wordTable.filter.show', '표시') },
+            { value: '미표시', displayLabel: t('wordTable.filter.hide', '미표시') },
+        ],
+        display: 'segmented',
+    };
+}
+/** @public 절취선(표시/점선/코너/미표시) 세그먼트 섹션. */
+export function buildCutLineSection(t) {
+    return {
+        label: t('wordTable.filter.cutLine', '절취선'),
+        items: [
+            { value: '표시', displayLabel: t('wordTable.filter.show', '표시') },
+            { value: '점선', displayLabel: t('wordTable.filter.dotted', '점선') },
+            { value: '코너', displayLabel: t('wordTable.filter.corner', '코너') },
+            { value: '미표시', displayLabel: t('wordTable.filter.hide', '미표시') },
+        ],
+        display: 'segmented',
+    };
+}
+/** @public 구분선(대립선, 표시/미표시) 세그먼트 섹션 — 대립쌍표에만 노출. */
+export function buildDivLineSection(t) {
+    return {
+        label: t('wordPrint.divLine', '대립선'),
+        items: [
+            { value: '표시', displayLabel: t('wordTable.filter.show', '표시') },
+            { value: '미표시', displayLabel: t('wordTable.filter.hide', '미표시') },
+        ],
+        display: 'segmented',
+    };
+}
+/** @public 페이지당 대립쌍/단어 수 세그먼트 섹션. 첫 옵션은 항상 전체(itemCount=한 페이지에 전부), 나머지는 그보다 작은 표준 분할값. */
+export function buildItemsPerPageSection(t, opts) {
+    return {
+        label: t(opts.hasPairs ? 'wordTable.filter.itemsPerPagePair' : 'wordTable.filter.itemsPerPageWord'),
+        items: [opts.itemCount, ...ITEMS_PER_PAGE_OPTIONS.filter(n => n < opts.itemCount)].map(n => ({
+            value: `${n}개`, displayLabel: t('wordTable.filter.itemsPerPageOption', { count: n }),
+        })),
+        display: 'segmented',
+    };
+}
+/** @public 페이지 번호 위치(왼쪽/중앙/오른쪽/미표시) 세그먼트 섹션 — 실제 2페이지 이상일 때만 노출. */
+export function buildPageNumberSection(t) {
+    return {
+        label: t('wordTable.filter.pageNumber', '페이지 번호'),
+        items: [
+            { value: '왼쪽', displayLabel: t('wordTable.filter.pageNumberLeft', '왼쪽') },
+            { value: '중앙', displayLabel: t('wordTable.filter.pageNumberCenter', '중앙') },
+            { value: '오른쪽', displayLabel: t('wordTable.filter.pageNumberRight', '오른쪽') },
+            { value: '미표시', displayLabel: t('wordTable.filter.hide', '미표시') },
+        ],
+        display: 'segmented',
+    };
+}
+/** @public 페이지 번호 위치 → filterSelected 표시값. */
+export const PAGE_NUM_POSITION_VALUE = { left: '왼쪽', center: '중앙', right: '오른쪽', none: '미표시' };
+/** @public FilterPanel 선택값 → 페이지 번호 위치. */
+export function parsePageNumberPosition(value) {
+    return value === '왼쪽' ? 'left' : value === '중앙' ? 'center' : value === '오른쪽' ? 'right' : 'none';
+}
+/** @public 기본 5개 설정의 filterSelected 엔트리(호출부가 자신의 추가 섹션과 spread). */
+export function buildTableSettingsSelected(t, v) {
+    return {
+        [t('wordTable.filter.composition', '구성')]: v.contentTypes,
+        [t('wordTable.filter.paperOrientation', '용지 방향')]: v.orientation === 'landscape' ? '가로' : '세로',
+        [t('wordTable.filter.border', '외곽선')]: v.showOutline ? '표시' : '미표시',
+        [t('wordTable.filter.cutLine', '절취선')]: v.cutLine,
+        [t('wordPrint.divLine', '대립선')]: v.showDivLine ? '표시' : '미표시',
+    };
+}
+/**
+ * @public 기본 5개 설정 섹션의 FilterPanel select 처리. 처리했으면 true, 아니면(추가 섹션 라벨) false를
+ * 반환하니, 호출부는 false일 때만 자신의 추가 섹션(칸 수·페이지 등)을 처리하면 된다.
+ * '전체' 버튼은 로케일 무관 FILTER_ALL_VALUE를 방출하므로 t('common.all', '전체')과 비교하지 않는다.
+ */
+export function applyTableSettingsSelect(t, value, sectionLabel, s) {
+    if (sectionLabel === t('wordTable.filter.composition', '구성')) {
+        if (value === FILTER_ALL_VALUE) {
+            s.setContentTypes(() => []);
+            return true;
+        }
+        s.setContentTypes(prev => prev.includes(value) ? prev.filter(v => v !== value) : [...prev, value]);
+        return true;
+    }
+    if (sectionLabel === t('wordTable.filter.paperOrientation', '용지 방향')) {
+        s.setOrientation(value === '가로' ? 'landscape' : 'portrait');
+        return true;
+    }
+    if (sectionLabel === t('wordTable.filter.border', '외곽선')) {
+        s.setShowOutline(value === '표시');
+        return true;
+    }
+    if (sectionLabel === t('wordTable.filter.cutLine', '절취선')) {
+        s.setCutLine(value);
+        return true;
+    }
+    if (sectionLabel === t('wordPrint.divLine', '대립선')) {
+        s.setShowDivLine(value === '표시');
+        return true;
+    }
+    return false;
+}