@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,140 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+const EXIT_ANIM_MS = 500;
+/**
+ * Toast의 등장/퇴장 슬라이드 애니메이션 + 자동 닫힘 타이머 상태 관리.
+ * @public
+ */
+export function useToastLifecycle({ message, position, duration, onClose }) {
+    const [showing, setShowing] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    const mountedRef = useRef(mounted);
+    const showingRef = useRef(showing);
+    useEffect(() => { mountedRef.current = mounted; }, [mounted]);
+    useEffect(() => { showingRef.current = showing; }, [showing]);
+    const popupRef = useRef(null);
+    const lastMessageRef = useRef('');
+    const onCloseRef = useRef(onClose);
+    useEffect(() => { onCloseRef.current = onClose; });
+    const DURATION_MS = duration;
+    const hideTimerRef = useRef(null);
+    const exitTimerRef = useRef(null);
+    const rafOuterRef = useRef(null);
+    const rafInnerRef = useRef(null);
+    const styleResetTimerRef = useRef(null);
+    // message 변경 시 진입/퇴장 애니메이션과 타이머를 재구동하는 의도된 동기화다
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        // 메시지가 바뀌면 기존 타이머 초기화
+        if (message !== lastMessageRef.current) {
+            if (hideTimerRef.current) {
+                clearTimeout(hideTimerRef.current);
+                hideTimerRef.current = null;
+            }
+            if (exitTimerRef.current) {
+                clearTimeout(exitTimerRef.current);
+                exitTimerRef.current = null;
+            }
+        }
+        if (message) {
+            // 이미 보이는 중 → 텍스트만 업데이트, 애니메이션 재실행 없음
+            if (showingRef.current) {
+                if (DURATION_MS > 0 && !hideTimerRef.current) {
+                    hideTimerRef.current = setTimeout(() => {
+                        setShowing(false);
+                        exitTimerRef.current = setTimeout(() => {
+                            setMounted(false);
+                            try {
+                                onCloseRef.current();
+                            }
+                            catch (e) { }
+                        }, EXIT_ANIM_MS);
+                    }, DURATION_MS);
+                }
+                lastMessageRef.current = message;
+                return () => { };
+            }
+            // 처음 등장할 때만 슬라이드인 애니메이션 실행
+            const animateIn = () => {
+                const el = popupRef.current;
+                if (!el)
+                    return;
+                try {
+                    el.classList.remove('is-visible');
+                    el.style.transition = 'none';
+                    if (position === 'top') {
+                        el.style.transform = 'translateX(-50%) translateY(-16px)';
+                    }
+                    else {
+                        el.style.transform = 'translateX(-50%) translateY(16px)';
+                    }
+                    el.style.opacity = '0';
+                    void el.offsetWidth; // force reflow
+                    el.style.transition = '';
+                    el.classList.add('is-visible');
+                    if (styleResetTimerRef.current)
+                        clearTimeout(styleResetTimerRef.current);
+                    styleResetTimerRef.current = setTimeout(() => {
+                        styleResetTimerRef.current = null;
+                        try {
+                            el.style.opacity = '';
+                            el.style.transform = '';
+                            el.style.transition = '';
+                        }
+                        catch (e) { }
+                    }, 60);
+                }
+                catch (e) { }
+            };
+            if (!mountedRef.current) {
+                setMounted(true);
+                rafOuterRef.current = requestAnimationFrame(() => {
+                    rafInnerRef.current = requestAnimationFrame(() => {
+                        animateIn();
+                        setShowing(true);
+                    });
+                });
+            }
+            else {
+                animateIn();
+                setShowing(true);
+            }
+            if (DURATION_MS > 0) {
+                hideTimerRef.current = setTimeout(() => {
+                    setShowing(false);
+                    exitTimerRef.current = setTimeout(() => {
+                        setMounted(false);
+                        try {
+                            onCloseRef.current();
+                        }
+                        catch (e) { }
+                    }, EXIT_ANIM_MS);
+                }, DURATION_MS);
+            }
+        }
+        else {
+            setShowing(false);
+            exitTimerRef.current = setTimeout(() => setMounted(false), EXIT_ANIM_MS);
+        }
+        lastMessageRef.current = message;
+        return () => {
+            if (hideTimerRef.current)
+                clearTimeout(hideTimerRef.current);
+            if (exitTimerRef.current)
+                clearTimeout(exitTimerRef.current);
+            if (rafOuterRef.current)
+                cancelAnimationFrame(rafOuterRef.current);
+            if (rafInnerRef.current)
+                cancelAnimationFrame(rafInnerRef.current);
+            if (styleResetTimerRef.current)
+                clearTimeout(styleResetTimerRef.current);
+            hideTimerRef.current = null;
+            exitTimerRef.current = null;
+            rafOuterRef.current = null;
+            rafInnerRef.current = null;
+            styleResetTimerRef.current = null;
+        };
+    }, [message, DURATION_MS, position]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    return { mounted, showing, popupRef };
+}

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

@@ -0,0 +1,76 @@
+/**
+ * wordTableLayout.ts
+ * WordTable의 순수 레이아웃/규격/인쇄 상수 및 헬퍼 (React 상태 비의존).
+ */
+import type { CSSProperties } from 'react';
+export type WordTableOrientation = 'landscape' | 'portrait';
+/** @public */
+export type WordTableContentType = '단어' | '이미지' | '표준 발음' | '구어체 발음';
+/** @public */
+export type WordTableCutLine = '표시' | '점선' | '코너' | '미표시';
+/** 페이지 분할 시 종이 안에 찍는 페이지 번호 위치 — 'none'이면 미표시 */
+/** @public */
+export type PageNumberPosition = 'left' | 'center' | 'right' | 'none';
+/** 편집 모드 칸에 들어가는 단어 항목 */
+export interface WordTableEditEntry {
+    word: string;
+    pronunciation: string;
+    homonum?: number;
+    colloquialPronunciation?: string;
+}
+/** 종이 규격(A4) — 인쇄 캡처에서도 쓰도록 공개 */
+export declare const WORD_TABLE_PAPER: Record<WordTableOrientation, {
+    width: number;
+    height: number;
+    printSize: string;
+    printW: string;
+    printH: string;
+}>;
+/**
+ * 화면에 렌더된 단어표(.word-table)를 인쇄한다.
+ * @page 방향/크기를 임시 주입한 뒤 window.print()를 호출하고, 인쇄 후 정리한다.
+ * @public
+ */
+export declare function printWordTable(orientation?: WordTableOrientation): void;
+/**
+ * 항목 배열을 size개씩 나눈다. 빈 배열은 빈 페이지 1개(`[[]]`)로 취급해
+ * "최소 1페이지는 표시" 동작을 보장한다.
+ * @public
+ */
+export declare function chunkItems<T>(items: T[], size: number): T[][];
+export declare const LAYOUTS: Record<WordTableOrientation, Record<number, {
+    cols: number;
+    rows: number;
+}>>;
+/**
+ * @public 칸 수에 맞는 격자. 표에 없는 수는 용지 비율로 만들어 낸다.
+ *
+ * 예전에는 표에 없으면 `?? { cols: 2, rows: 4 }` 로 떨어졌다. 격자는
+ * `repeat(rows, 1fr)` 로 고정 높이 용지에 그려지는데, 항목이 여덟보다 많으면
+ * CSS 가 암묵 행을 만들어 **용지 밖으로 흘러나간다.** 저장된 표를 표시 모드로
+ * 열면 페이지당 개수가 곧 칸 수라, 아홉 개짜리 표는 그때부터 어긋나 있었다.
+ *
+ * A4 짧은변/긴변이 약 0.707 이다. 가로는 행을 그 비율로 잡고 열을 채우고,
+ * 세로는 반대로 한다. 그래야 칸이 정사각형에 가깝다. 표가 있으면 표가 이긴다 —
+ * 사람이 고른 배치(5·6 이 같은 격자를 쓰는 것 같은)를 계산이 덮으면 안 된다.
+ */
+export declare function gridFor(orientation: WordTableOrientation, count: number): {
+    cols: number;
+    rows: number;
+};
+export declare const CUT_CLASS: Record<WordTableCutLine, string>;
+export declare const POS_LABEL: Record<string, string>;
+/** 어종(단어 유형) 약호 → 전체 표기. 데이터의 Class 컬럼은 축약형('고유'/'한자'/'외래'/'혼종')을 쓴다. */
+export declare const WORD_TYPE_LABEL: Record<string, string>;
+/**
+ * 슬래시로 묶인 복합 약호(예: '명/관', '동/보동')를 라벨맵으로 각각 펼쳐 다시 '/'로 잇는다.
+ * 라벨맵에 없는 조각은 원문 그대로 둔다. 빈 문자열은 빈 문자열 그대로 반환.
+ */
+export declare function expandSlashLabel(raw: string | undefined | null, labelMap: Record<string, string>): string;
+export declare function dotDashStyle(index: number, cols: number, rows: number, cutLine: WordTableCutLine): CSSProperties;
+export declare const REF_W_BOTH = 280;
+export declare const REF_W_TEXT_ONLY = 240;
+export declare const REF_W_IMAGE_ONLY = 280;
+export declare const REF_H_BOTH = 400;
+export declare const REF_H_TEXT_ONLY = 120;
+export declare const REF_H_IMAGE_ONLY = 280;

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

@@ -0,0 +1,162 @@
+'use client';
+/** 종이 규격(A4) — 인쇄 캡처에서도 쓰도록 공개 */
+export const WORD_TABLE_PAPER = {
+    landscape: { width: 1123, height: 794, printSize: 'A4 landscape', printW: '297mm', printH: '210mm' },
+    portrait: { width: 794, height: 1123, printSize: 'A4 portrait', printW: '210mm', printH: '297mm' },
+};
+/**
+ * 화면에 렌더된 단어표(.word-table)를 인쇄한다.
+ * @page 방향/크기를 임시 주입한 뒤 window.print()를 호출하고, 인쇄 후 정리한다.
+ * @public
+ */
+export function printWordTable(orientation = 'landscape') {
+    const { printSize, printW, printH } = WORD_TABLE_PAPER[orientation];
+    const style = document.createElement('style');
+    style.textContent = `@page { size: ${printSize}; margin: 0; } .word-table { width: ${printW} !important; height: ${printH} !important; }`;
+    document.head.appendChild(style);
+    const cleanup = () => {
+        document.head.removeChild(style);
+        window.removeEventListener('afterprint', cleanup);
+    };
+    window.addEventListener('afterprint', cleanup);
+    window.print();
+}
+/**
+ * 항목 배열을 size개씩 나눈다. 빈 배열은 빈 페이지 1개(`[[]]`)로 취급해
+ * "최소 1페이지는 표시" 동작을 보장한다.
+ * @public
+ */
+export function chunkItems(items, size) {
+    if (items.length === 0)
+        return [[]];
+    // size 가 0 이하면 i 가 늘지 않아 무한 루프에 빠진다 — 배열을 계속 밀어 넣으므로
+    // 탭이 멈추고 메모리가 바닥난다. 지금 호출부(페이지당 개수)는 Math.max(…, 1) 로
+    // 막고 있지만 이 함수는 공개 API 라 밖에서 무엇이 들어올지 알 수 없다.
+    // 한 장에 최소 한 칸이라는 뜻으로 1 로 맞춘다.
+    const step = Math.max(1, Math.floor(size));
+    const chunks = [];
+    for (let i = 0; i < items.length; i += step)
+        chunks.push(items.slice(i, i + step));
+    return chunks;
+}
+/* 칸 수 → 그리드(열/행) 배치
+ *
+ * 두 칸씩 같은 격자를 쓴다(5·6 → 3×2, 7·8 → 4×2). 홀수는 격자를 하나 덜 채울
+ * 뿐이고, 그러려고 격자를 따로 두면 5칸과 6칸의 낱말 크기가 달라져 나란히 놓고
+ * 쓰기 어렵다.
+ *
+ * 가로는 행을 2로 버티며 열을 늘리다가(9·10 → 5×2) 열이 더 늘면 글자가 좁아져
+ * 3행으로 넘어간다(11·12 → 4×3). 세로는 그 반대로 열을 2로 버틴다. */
+export const LAYOUTS = {
+    landscape: {
+        1: { cols: 1, rows: 1 }, 2: { cols: 2, rows: 1 }, 3: { cols: 3, rows: 1 },
+        4: { cols: 2, rows: 2 }, 5: { cols: 3, rows: 2 }, 6: { cols: 3, rows: 2 },
+        7: { cols: 4, rows: 2 }, 8: { cols: 4, rows: 2 },
+        9: { cols: 5, rows: 2 }, 10: { cols: 5, rows: 2 },
+        11: { cols: 4, rows: 3 }, 12: { cols: 4, rows: 3 },
+    },
+    portrait: {
+        1: { cols: 1, rows: 1 }, 2: { cols: 1, rows: 2 }, 3: { cols: 1, rows: 3 },
+        4: { cols: 1, rows: 4 }, 5: { cols: 1, rows: 5 }, 6: { cols: 2, rows: 3 },
+        7: { cols: 2, rows: 4 }, 8: { cols: 2, rows: 4 },
+        9: { cols: 2, rows: 5 }, 10: { cols: 2, rows: 5 },
+        11: { cols: 3, rows: 4 }, 12: { cols: 3, rows: 4 },
+    },
+};
+/**
+ * @public 칸 수에 맞는 격자. 표에 없는 수는 용지 비율로 만들어 낸다.
+ *
+ * 예전에는 표에 없으면 `?? { cols: 2, rows: 4 }` 로 떨어졌다. 격자는
+ * `repeat(rows, 1fr)` 로 고정 높이 용지에 그려지는데, 항목이 여덟보다 많으면
+ * CSS 가 암묵 행을 만들어 **용지 밖으로 흘러나간다.** 저장된 표를 표시 모드로
+ * 열면 페이지당 개수가 곧 칸 수라, 아홉 개짜리 표는 그때부터 어긋나 있었다.
+ *
+ * A4 짧은변/긴변이 약 0.707 이다. 가로는 행을 그 비율로 잡고 열을 채우고,
+ * 세로는 반대로 한다. 그래야 칸이 정사각형에 가깝다. 표가 있으면 표가 이긴다 —
+ * 사람이 고른 배치(5·6 이 같은 격자를 쓰는 것 같은)를 계산이 덮으면 안 된다.
+ */
+export function gridFor(orientation, count) {
+    const table = LAYOUTS[orientation][count];
+    if (table)
+        return table;
+    const n = Math.max(1, Math.ceil(count));
+    const side = Math.max(1, Math.ceil(Math.sqrt(n * 0.707)));
+    let cols, rows;
+    if (orientation === 'landscape') {
+        rows = side;
+        cols = Math.ceil(n / rows);
+    }
+    else {
+        cols = side;
+        rows = Math.ceil(n / cols);
+    }
+    // 만들어 낸 격자도 방향의 규칙을 지켜야 한다 — 가로는 열이, 세로는 행이 많다
+    if (orientation === 'landscape' ? cols < rows : rows < cols)
+        [cols, rows] = [rows, cols];
+    return { cols, rows };
+}
+export const CUT_CLASS = {
+    '표시': 'word-table-block__content--cut-show',
+    '점선': '',
+    '코너': 'word-table-block__content--cut-corner',
+    '미표시': '',
+};
+export const POS_LABEL = {
+    '명': '명사', '동': '동사', '형': '형용사', '부': '부사',
+    '수': '수사', '관': '관형사', '감': '감탄사', '조': '조사',
+    '접': '접사', '의': '의존명사', '대': '대명사',
+    '보동': '보조동사', '보형': '보조형용사',
+};
+/** 어종(단어 유형) 약호 → 전체 표기. 데이터의 Class 컬럼은 축약형('고유'/'한자'/'외래'/'혼종')을 쓴다. */
+export const WORD_TYPE_LABEL = {
+    '고유': '고유어', '한자': '한자어', '외래': '외래어', '혼종': '혼종어',
+};
+/**
+ * 슬래시로 묶인 복합 약호(예: '명/관', '동/보동')를 라벨맵으로 각각 펼쳐 다시 '/'로 잇는다.
+ * 라벨맵에 없는 조각은 원문 그대로 둔다. 빈 문자열은 빈 문자열 그대로 반환.
+ */
+export function expandSlashLabel(raw, labelMap) {
+    if (!raw)
+        return '';
+    return raw.split('/').map(part => labelMap[part] ?? part).join('/');
+}
+export function dotDashStyle(index, cols, rows, cutLine) {
+    if (cutLine !== '점선')
+        return {};
+    const col = index % cols;
+    const row = Math.floor(index / cols);
+    const needRight = col < cols - 1;
+    const needBottom = row < rows - 1;
+    if (!needRight && !needBottom)
+        return {};
+    const dash = '#ddd';
+    const grad = (dir) => `repeating-linear-gradient(to ${dir}, ${dash} 0, ${dash} 5px, transparent 5px, transparent 10px)`;
+    const images = [];
+    const sizes = [];
+    const positions = [];
+    if (needRight) {
+        images.push(grad('bottom'));
+        sizes.push('1px 100%');
+        positions.push('right center');
+    }
+    if (needBottom) {
+        images.push(grad('right'));
+        sizes.push('100% 1px');
+        positions.push('center bottom');
+    }
+    return {
+        backgroundImage: images.join(', '),
+        backgroundSize: sizes.join(', '),
+        backgroundPosition: positions.join(', '),
+        backgroundRepeat: 'no-repeat',
+        printColorAdjust: 'exact',
+        WebkitPrintColorAdjust: 'exact',
+    };
+}
+// ── 칸 크기 기준값(WordTable 내부 전용) ─────────────
+export const REF_W_BOTH = 280;
+export const REF_W_TEXT_ONLY = 240;
+export const REF_W_IMAGE_ONLY = 280;
+export const REF_H_BOTH = 400;
+export const REF_H_TEXT_ONLY = 120;
+export const REF_H_IMAGE_ONLY = 280;