@ihabdevteam/core 0.187.0 → 0.189.0

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

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { cx } from '../utils/cx';
+import './LineChart.css';
+import Tooltip from './Tooltip/Tooltip';
+import { useDelayedHoverAnchor } from '../hooks/useHoverAnchor';
+/** 점 위에 잠깐 머물면 뜨는 뜸 — 지나가는 마우스에 툴팁이 번쩍이지 않을 만큼만 짧게 @public */
+export const LINE_CHART_HOVER_DELAY_MS = 120;
+const 기본여백 = { left: 38, right: 16, top: 26, bottom: 24 };
+/**
+ * **작은 선 그래프** — 시간·조건에 따라 값이 어떻게 흐르는지를 그린다.
+ * 세로는 0~100%로 고정이고, 가로 범위는 부르는 쪽이 준다.
+ *
+ * **제 상자를 재어 배율 1 로 그린다.** `viewBox` 를 상자보다 좁게 두면 SVG 가 통째로 늘어나
+ * **글자까지 커진다**(말귀 실측 1.22배 — 사용자 지적 2026-09-17 "이 그래프가 폰트가 크게 보이는게
+ * 스케일 되서 그런건가?"). 잰 픽셀을 그대로 쓰면 CSS 에 적은 12px 이 화면에서도 12px 이다.
+ * 못 재는 자리(첫 렌더·ResizeObserver 없는 틀)에서는 `fallbackWidth` 로 그린다 — 늘어날 뿐 안 깨진다.
+ *
+ * **면 칠하기·짚는 자리처럼 그 화면에만 있는 말은 `overlay` 로 덧그린다** — 자(`x`·`y`)를 받으므로
+ * 좌표 셈을 다시 하지 않는다.
+ * @public
+ */
+export default function LineChart({ points = [], range, ticks = [], axisTitle, color, height = 156, fallbackWidth = 320, insets, overlay, ariaLabel, className, }) {
+    /* **제 상자를 재어 그 픽셀 수를 그림 칸으로 쓴다.** `width: 100%` 는 그대로라 viewBox 를 바꿔도
+       가로가 다시 바뀌지 않는다(되먹임이 없다). */
+    const [잰폭, set잰폭] = useState(null);
+    const [칸, set칸] = useState(null);
+    useEffect(() => {
+        if (!칸)
+            return;
+        const 재기 = (w) => set잰폭(Math.round(w) || null);
+        재기(칸.getBoundingClientRect().width);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const 지켜보기 = new ResizeObserver(([e]) => 재기(e.contentRect.width));
+        지켜보기.observe(칸);
+        return () => { 지켜보기.disconnect(); };
+    }, [칸]);
+    const { payload: 짚은글, anchorRect: 짚은자리, openAfterDelay, close: 닫기 } = useDelayedHoverAnchor(LINE_CHART_HOVER_DELAY_MS);
+    const 얹힘 = useCallback((글, el) => {
+        if (글)
+            openAfterDelay(글, el.getBoundingClientRect());
+    }, [openAfterDelay]);
+    const W = 잰폭 ?? fallbackWidth, H = height;
+    const { left: 왼, right: 오른, top: 위, bottom: 아래 } = { ...기본여백, ...insets };
+    const [처음, 끝] = range;
+    /* 범위는 부르는 쪽이 적어도 한 칸 폭으로 준다(끝 > 처음) — 같으면 0 으로 나누므로 왼쪽 끝에 몰아 둔다 */
+    const x = (v) => (끝 === 처음 ? 왼 : 왼 + ((W - 왼 - 오른) * (v - 처음)) / (끝 - 처음));
+    const y = (pct) => 위 + ((H - 위 - 아래) * (100 - pct)) / 100;
+    const 자 = {
+        x, y,
+        plot: { left: 왼, right: W - 오른, top: 위, bottom: H - 아래, width: Math.max(0, W - 왼 - 오른), height: Math.max(0, H - 위 - 아래) },
+    };
+    /* 선은 **믿을 점만** 잇는다 — 속 빈 점까지 이으면 "이만큼 봤다" 는 말이 흐려진다 */
+    const 이을점 = points.filter(p => !p.hollow);
+    const 색 = color ?? 'var(--color-main)';
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { ref: set칸, className: cx('line-chart', className), viewBox: `0 0 ${W} ${H}`, role: "img", "aria-label": ariaLabel ?? points.map(p => p.description).filter(Boolean).join(', '), children: [axisTitle && _jsx("text", { className: "line-chart__axis-title", x: 0, y: 12, children: axisTitle }), [0, 100].map(v => (_jsxs("g", { children: [_jsx("line", { className: "line-chart__grid", x1: 왼, x2: W - 오른, y1: y(v), y2: y(v) }), _jsxs("text", { className: "line-chart__tick", x: 왼 - 6, y: y(v) + 4, textAnchor: "end", children: [v, "%"] })] }, v))), overlay?.(자), ticks.map(tk => (_jsx("text", { className: "line-chart__tick", x: x(tk.x), y: H - 5, textAnchor: "middle", children: tk.label }, tk.x))), 이을점.length > 1 && (_jsx("polyline", { className: "line-chart__line", fill: "none", stroke: 색, points: 이을점.map(p => `${x(p.x)},${y(p.pct)}`).join(' ') })), points.map(p => (_jsxs("g", { className: "line-chart__dot", onPointerEnter: e => 얹힘(p.description, e.currentTarget), onPointerLeave: 닫기, children: [_jsx("circle", { className: "line-chart__dot-hit", cx: x(p.x), cy: y(p.pct), r: 12 }), _jsx("circle", { className: cx('line-chart__dot-main', p.hollow && 'is-hollow'), cx: x(p.x), cy: y(p.pct), r: 4, stroke: 색, fill: p.hollow ? undefined : 색 })] }, p.x)))] }), 짚은글 != null && (_jsx(Tooltip, { anchorRect: 짚은자리, offset: 10, closeOnOutsideClick: false, className: "line-chart__tip", role: "tooltip", ariaLabel: 짚은글, children: 짚은글 }))] }));
+}

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

@@ -0,0 +1,25 @@
+/* 카드 머리 오른쪽에 띄우는 단추 줄 — 까닭과 쓰는 법은 `SectionHeadFloat.tsx` 의 글에. */
+.section-head-float {
+  position: absolute;
+  /* 카드 안쪽 여백과 같은 값이라야 제목 줄과 윗선이 맞는다 — 그 수는 카드가 알고 있다 */
+  top: var(--card-pad, 19px);
+  right: var(--card-pad, 19px);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-m);
+  /* 제목이 설 자리는 남긴다 */
+  max-width: 50%;
+  z-index: 1;
+}
+
+/* **좁으면 흐름으로 되돌린다** — 띄운 채로 두면 제목과 그 아랫줄을 덮고, 단추 이름도 두 줄로 갈린다.
+   이 줄은 대개 250px 안팎이라 600px 아래에서는 제목과 나란히 설 자리가 없다. */
+@media (max-width: 600px) {
+  .section-head-float {
+    position: static;
+    max-width: none;
+    margin-top: var(--spacing-m);
+    flex-wrap: wrap;
+  }
+}

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

@@ -0,0 +1,28 @@
+import './SectionHeadFloat.css';
+import type { ReactNode } from 'react';
+/** @public */
+export interface SectionHeadFloatProps {
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * **카드 머리 오른쪽에 띄우는 단추 줄.**
+ *
+ * 흐름에서 빼는 까닭은 자리가 아니라 **높이**다 — 40px 짜리 단추를 제목 줄에 함께 세우면
+ * 제목 줄이 그만큼 커져 카드마다 머리 높이가 달라진다. 띄우면 제목은 제 높이로 선다.
+ *
+ * 세 가지를 이 조각이 맡는다. 앱마다 손으로 하다 보니 같은 규칙이 여러 벌이 됐다(말귀 두 벌 —
+ * `top/right: 19px` 라는 **카드 안쪽 여백**을 베껴 적고 있었다. 그 수를 아는 쪽은 카드다).
+ *
+ * 1. **자리** — 카드 안쪽 여백에 맞춰 띄운다(`--card-pad`, 기본 19px). 카드가 여백을 고치면 함께 움직인다.
+ * 2. **좁은 화면(600px 이하)에서 흐름으로 되돌린다** — 띄운 채로 두면 제목과 그 아랫줄을 덮는다.
+ *    문턱이 600 인 것은 이 줄이 대개 250px 안팎이라, 그 아래에서는 제목과 나란히 설 자리가 없어서다.
+ * 3. **제 폭을 재어 알린다** — 띄운 줄은 흐름에서 빠져 제목·곁줄을 덮으므로 그만큼 비워 둬야 하는데,
+ *    부르는 쪽이 눈대중으로 `padding-right: 260px` 같은 수를 적고 있었다. 잰 폭을 부모에
+ *    `--section-head-float-w` 로 적으므로, 비울 자리는 `padding-right: calc(var(--section-head-float-w, -12px) + 12px)`
+ *    한 줄이면 된다(안 띄운 카드에서는 0 이 된다). 코어 카드(`manager-section`)는 이미 그렇게 해 둔다.
+ *
+ * 기준점은 **부모가 준다** — 카드에 `position: relative` 가 있어야 한다(코어 카드에는 있다).
+ * @public
+ */
+export default function SectionHeadFloat({ children, className }: SectionHeadFloatProps): import("react").JSX.Element;

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

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { cx } from '../utils/cx';
+import './SectionHeadFloat.css';
+/**
+ * **카드 머리 오른쪽에 띄우는 단추 줄.**
+ *
+ * 흐름에서 빼는 까닭은 자리가 아니라 **높이**다 — 40px 짜리 단추를 제목 줄에 함께 세우면
+ * 제목 줄이 그만큼 커져 카드마다 머리 높이가 달라진다. 띄우면 제목은 제 높이로 선다.
+ *
+ * 세 가지를 이 조각이 맡는다. 앱마다 손으로 하다 보니 같은 규칙이 여러 벌이 됐다(말귀 두 벌 —
+ * `top/right: 19px` 라는 **카드 안쪽 여백**을 베껴 적고 있었다. 그 수를 아는 쪽은 카드다).
+ *
+ * 1. **자리** — 카드 안쪽 여백에 맞춰 띄운다(`--card-pad`, 기본 19px). 카드가 여백을 고치면 함께 움직인다.
+ * 2. **좁은 화면(600px 이하)에서 흐름으로 되돌린다** — 띄운 채로 두면 제목과 그 아랫줄을 덮는다.
+ *    문턱이 600 인 것은 이 줄이 대개 250px 안팎이라, 그 아래에서는 제목과 나란히 설 자리가 없어서다.
+ * 3. **제 폭을 재어 알린다** — 띄운 줄은 흐름에서 빠져 제목·곁줄을 덮으므로 그만큼 비워 둬야 하는데,
+ *    부르는 쪽이 눈대중으로 `padding-right: 260px` 같은 수를 적고 있었다. 잰 폭을 부모에
+ *    `--section-head-float-w` 로 적으므로, 비울 자리는 `padding-right: calc(var(--section-head-float-w, -12px) + 12px)`
+ *    한 줄이면 된다(안 띄운 카드에서는 0 이 된다). 코어 카드(`manager-section`)는 이미 그렇게 해 둔다.
+ *
+ * 기준점은 **부모가 준다** — 카드에 `position: relative` 가 있어야 한다(코어 카드에는 있다).
+ * @public
+ */
+export default function SectionHeadFloat({ children, className }) {
+    const ref = useRef(null);
+    const [부모, set부모] = useState(null);
+    useEffect(() => { set부모(ref.current?.parentElement ?? null); }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !부모)
+            return;
+        /* 흐름으로 돌아간 좁은 화면에서는 비울 자리가 없다 — 그때 폭을 적어 두면 제목이 공연히 좁아진다.
+           `position` 을 보고 가른다(문턱을 두 군데 적지 않으려고 — CSS 가 정본이다). */
+        const 적기 = () => {
+            const 띄웠나 = typeof window !== 'undefined' && window.getComputedStyle(el).position === 'absolute';
+            const w = 띄웠나 ? Math.ceil(el.getBoundingClientRect().width) : 0;
+            if (w > 0)
+                부모.style.setProperty('--section-head-float-w', `${w}px`);
+            else
+                부모.style.removeProperty('--section-head-float-w');
+        };
+        적기();
+        if (typeof ResizeObserver === 'undefined')
+            return () => { 부모.style.removeProperty('--section-head-float-w'); };
+        /* 줄 자신과 카드를 함께 본다 — 단추 글자가 바뀌면 줄이, 창이 좁아지면 카드가 먼저 움직인다 */
+        const 지켜보기 = new ResizeObserver(() => 적기());
+        지켜보기.observe(el);
+        지켜보기.observe(부모);
+        return () => { 지켜보기.disconnect(); 부모.style.removeProperty('--section-head-float-w'); };
+    }, [부모, children]);
+    return _jsx("div", { ref: ref, className: cx('section-head-float', className), children: children });
+}

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

@@ -498,3 +498,13 @@
     border-color: var(--color-warn);
     --button-icon-color: #ffffff;
 }
+
+/* **미리보기를 담는 틀** — `fitHeight` 에 높이를 주면 표가 스스로 두른다.
+   부르는 쪽마다 이 상자를 손수 만들다 보니 같은 규칙이 여러 벌이 됐다(말귀 두 벌, 주석 문장까지
+   같았다 — 2026-09-24). `useFitScale` 이 스케일러의 **부모**를 재므로 이 틀이 곧 그 자다. */
+.word-table__frame {
+  display: flex;
+  justify-content: center;
+  /* 남는 세로를 위아래로 나눈다 — 표가 상자보다 납작할 때 아래로만 쏠려 보이지 않게 */
+  align-items: center;
+}

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

@@ -69,8 +69,23 @@ export interface WordTableProps {
     };
     /** 페이지 번호 위치 — 'none'이면 미표시 (기본 'right') */
     pageNumberPosition?: PageNumberPosition;
-    /** 컨테이너 높이에도 맞춰 축소한다(세로 용지가 넘쳐 잘리는 것 방지). 부모가 높이 제한 박스여야 한다. */
-    fitHeight?: boolean;
+    /**
+     * 정해진 세로 자리에 맞춰 줄인다(세로 용지가 넘쳐 잘리는 것 방지).
+     *
+     * - **수(px)** — 그 높이의 **담는 틀을 표가 스스로** 두른다. 표는 그 안에서 가로·세로 가운데에
+     *   선다. 부르는 쪽은 "이만큼 자리에 맞춰 줄여" 한 마디면 된다.
+     * - **`{ wide, narrow }`** — 좁은 화면(767px 이하)에서는 `narrow` 를 쓴다. 좁으면 **폭이 먼저
+     *   걸려** 표가 가로에 맞춰 줄고 상자 아래가 비므로, 상자를 그만큼 낮춰 빈 자리를 없앤다
+     *   (말귀 실측 375px: 320px 상자에 183px 표 — 137px 이 비었다).
+     * - **`true`** — 틀을 두르지 않는다. **부모가 높이 제한 박스여야 한다**(예전 동작).
+     *
+     * 앱마다 이 틀을 손수 만들다 보니 같은 규칙이 여러 벌이 됐다(말귀 두 벌, 주석 문장까지 같았다)
+     * — 틀을 여기로 들인 까닭이다(2026-09-24).
+     */
+    fitHeight?: boolean | number | {
+        wide: number;
+        narrow: number;
+    };
 }
 /**
  * 단어표(표 디자인) — A4 종이를 컨테이너에 맞춰 축소(scale)하고,

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

@@ -12,6 +12,7 @@ import { getTTSUrlResolver } from '../utils/ttsConfig';
 import { getImageResolver } from '../utils/imageConfig';
 import { getPronunciationResolver } from '../utils/pronunciationConfig';
 import { useWordImage } from '../hooks/useWordImage';
+import useMediaQuery from '../hooks/useMediaQuery';
 import { isTouchPointer, recentlyTouched, useTouchToggle } from '../hooks/touchToggle';
 import { WORD_TABLE_PAPER, gridFor, CUT_CLASS, POS_LABEL, WORD_TYPE_LABEL, expandSlashLabel, dotDashStyle, REF_W_BOTH, REF_W_TEXT_ONLY, REF_W_IMAGE_ONLY, REF_H_BOTH, REF_H_TEXT_ONLY, REF_H_IMAGE_ONLY, } from './wordTableLayout';
 import { useFitScale } from './useFitScale';
@@ -204,6 +205,8 @@ export default function WordTable({ title, titleIcon, disc, className, orientati
     const isEdit = editCells !== undefined;
     /** title·titleIcon·disc 중 하나라도 있으면 Section 으로 감싼다 */
     const wrapped = title != null || !!titleIcon || !!disc;
+    /* 틀 높이는 화면 폭에 따라 갈린다 — 훅은 늘 부른다(순서 고정) */
+    const 좁은화면 = useMediaQuery('(max-width: 767px)');
     // 드래그 상태(표시 모드 재정렬)
     const dragIndex = useRef(null);
     const [dragOver, setDragOver] = useState(null);
@@ -342,6 +345,10 @@ export default function WordTable({ title, titleIcon, disc, className, orientati
         window.addEventListener('pointercancel', 뗌);
     }, [onReorder, 옮기기]);
     const { width, height } = WORD_TABLE_PAPER[orientation];
+    /* 담는 틀의 높이 — 수나 `{ wide, narrow }` 를 주면 표가 그 틀을 스스로 두른다(`true` 는 예전대로 부모 몫) */
+    const 틀높이 = typeof fitHeight === 'number' ? fitHeight
+        : (fitHeight && typeof fitHeight === 'object') ? (좁은화면 ? fitHeight.narrow : fitHeight.wide)
+            : null;
     // 스케일러 — 용지(width 고정)를 컨테이너 폭에 맞춰 축소 + 가운데 정렬. fitHeight면 높이도 함께 맞춘다.
     const { scalerRef, scale, offset } = useFitScale(width, fitHeight ? height : undefined);
     const dataLen = isEdit ? (editCells?.length ?? 0) : (items?.length ?? 0);
@@ -387,8 +394,12 @@ export default function WordTable({ title, titleIcon, disc, className, orientati
                                     const isWithinCount = (items?.length ?? 0) + i < cellCount;
                                     return (_jsx("div", { className: "word-table-block__card word-table-block__card--filler", children: showFillerAdd && onActivateCell && isWithinCount && (_jsx("div", { style: counterScale, children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "bar", icon: "plus", label: t('wordTable.addWord', '추가하기'), onClick: () => onActivateCell((items?.length ?? 0) + i) }) })) }, `filler-${i}`));
                                 })] })), pageNumber && pageNumberPosition !== 'none' && (_jsx("span", { className: `word-table__page-number body-3 word-table__page-number--${pageNumberPosition}`, children: t('wordTable.filter.pageIndicator', { current: pageNumber.current, total: pageNumber.total }) }))] }) }), onReorder && _jsx("span", { role: "status", style: 보이지않게, children: 옮김알림 })] }));
+    /* 담는 틀 — 높이를 받은 자리에서만 두른다. `useFitScale` 은 **스케일러의 부모**를 재므로
+       이 틀이 곧 그 자(척도)가 된다. 가운데 맞춤은 남는 세로를 위아래로 나눈다 — 표가 상자보다
+       납작할 때 아래로만 쏠려 보이지 않게. */
+    const 담긴것 = 틀높이 == null ? grid : (_jsx("div", { className: "word-table__frame", style: { height: 틀높이 }, children: grid }));
     if (wrapped) {
-        return (_jsx(Section, { type: "page", icon: titleIcon, title: title, disc: disc, className: cx('word-table-block', className), children: grid }));
+        return (_jsx(Section, { type: "page", icon: titleIcon, title: title, disc: disc, className: cx('word-table-block', className), children: 담긴것 }));
     }
-    return grid;
+    return 담긴것;
 }

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

@@ -139,11 +139,13 @@ export type { DatePickerProps } from './components/DatePicker';
 export { useCalendarMonth } from './components/useCalendarMonth';
 export type { UseCalendarMonthResult } from './components/useCalendarMonth';
 export { default as BarChart, BarChartControls } from './components/BarChart';
+export { default as LineChart, LINE_CHART_HOVER_DELAY_MS } from './components/LineChart';
 export { useBarChartControl } from './components/useBarChartControl';
 export { buildMonthChartData } from './components/barChartData';
 export { getControlDateRange } from './components/barChartTypes';
 export type { ControlDateRange } from './components/barChartTypes';
 export type { BarChartProps, BarChartControl, BarChartSize, BarData, MonthBarData, ChartPoint } from './components/BarChart';
+export type { LineChartProps, LineChartPoint, LineChartScales } from './components/LineChart';
 export { default as RingChart } from './components/RingChart';
 export type { RingChartProps, RingChartSize, RingChartSegment } from './components/RingChart';
 export { default as ChartSection, ChartTotal, ChartLegend } from './components/ChartSection';
@@ -298,7 +300,9 @@ export type { PopupProps, PopupOptions, PopupButtonConfig } from './components/P
 export { default as Panel, PanelRow, PanelGrid, PanelRowDevice } from './components/Panel';
 export type { PanelRowToggle, PanelRowSegmented, DropdownItem, PanelRowDropdown, PanelRowDeviceProps } from './components/Panel';
 export { default as Section } from './components/Section';
+export { default as SectionHeadFloat } from './components/SectionHeadFloat';
 export type { SectionProps, SectionType } from './components/Section';
+export type { SectionHeadFloatProps } from './components/SectionHeadFloat';
 export { default as Pagination } from './components/Pagination';
 export { default as SummaryStrip } from './components/SummaryStrip';
 export type { SummaryStripProps, SummaryStripItem } from './components/SummaryStrip';

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

@@ -90,6 +90,7 @@ export { default as BulkBar } from './components/BulkBar';
 export { default as DatePicker } from './components/DatePicker';
 export { useCalendarMonth } from './components/useCalendarMonth';
 export { default as BarChart, BarChartControls } from './components/BarChart';
+export { default as LineChart, LINE_CHART_HOVER_DELAY_MS } from './components/LineChart';
 export { useBarChartControl } from './components/useBarChartControl';
 export { buildMonthChartData } from './components/barChartData';
 export { getControlDateRange } from './components/barChartTypes';
@@ -234,6 +235,7 @@ export { MediaQueryOverrideContext } from './hooks/useMediaQuery';
 export { default as Popup } from './components/Popup/Popup';
 export { default as Panel, PanelRow, PanelGrid, PanelRowDevice } from './components/Panel';
 export { default as Section } from './components/Section';
+export { default as SectionHeadFloat } from './components/SectionHeadFloat';
 export { default as Pagination } from './components/Pagination';
 export { default as SummaryStrip } from './components/SummaryStrip';
 export { default as ReportDocument } from './components/Report/ReportDocument';

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

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

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

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