@ihabdevteam/core 0.348.0 → 0.350.0

package/dist/ihabdevteam-core.d.ts

@@ -1754,7 +1754,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.348.0";
+export declare const CORE_VERSION = "0.350.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -4551,7 +4551,18 @@ export declare type PanelRowSegmented = Base & {
 
 declare type PanelRowText = Base & {
     variant: 'text';
-    value: string;
+    /**
+     * 오른쪽에 **그대로 그려지는 것**. 글자가 흔하지만 마디도 받는다.
+     *
+     * 넓힌 까닭(말귀 청 2026-10-20): 고객 상세의 연락처 줄을 `<a href="tel:">` 로 만들어 폰에서
+     * 번호를 눌러 바로 걸게 하려는데 `string` 이라 못 넣었다. 그 줄만 앱이 손으로 그리면 **한
+     * 패널 안에서 간격·글자 크기가 갈린다** — 그래서 받는 쪽을 넓힌다. 같은 파일의
+     * `helperText`·`buttonLabel` 이 이미 `ReactNode` 라 꼴도 낯설지 않다.
+     *
+     * **글자로 다루는 자리는 없다** — 그리는 한 곳(`panel-row__text`)에서 그대로 내보낸다.
+     * `valueColor` 는 그 `<span>` 에 걸리므로, 마디가 제 색을 가지면 그것이 이긴다.
+     */
+    value: ReactNode;
     valueColor?: string;
 };
 

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

@@ -4,12 +4,42 @@
 }
 
 /* Trigger */
+/* **칸 하나에 글 자리와 달력 단추.** 한때 `<button>` 하나였는데, 손으로 칠 수 있어야 해서
+   입력칸으로 바꿨다 — 입력칸은 자식을 못 가지므로 아이콘을 밖으로 내고 둘을 이 상자가 겹친다. */
+.date-picker__field {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+/* 아이콘 단추는 글 자리 **위에** 뜬다 — 칸을 좁히면 글이 아이콘 밑으로 들어간다.
+   글 자리의 오른쪽 여백이 그만큼 비워 준다(아래 `padding-right`). */
+.date-picker__icon-btn {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* **누를 자리를 아이콘보다 넓게.** 그림은 18~20px 인데 손가락은 그만큼 정확하지 않다 —
+     `rawButtonHitArea` 가 바닥 24px 을 센다. 자리는 `position: absolute` 라 칸 키를 안 밀고,
+     `right` 를 12 → 8 로 당겨 넓힌 만큼 그림이 제자리에 남는다. */
+  min-width: 32px;
+  min-height: 32px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+.date-picker__icon-btn:disabled { cursor: default; }
+
 .date-picker__trigger {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 12px;
+  /* 오른쪽은 아이콘 자리를 비운다 — 안 비우면 긴 날짜가 아이콘 밑으로 들어간다 */
+  padding: 0 40px 0 12px;
   box-sizing: border-box;
   border: 1px solid var(--color-whiteLine);
   background: var(--color-deepWhite);
@@ -44,8 +74,12 @@
   cursor: not-allowed;
 }
 
-.date-picker__placeholder { color: var(--color-lightGray); white-space: nowrap; }
-.date-picker__value       { color: var(--color-darkGray); white-space: nowrap; }
+/* **안내글과 값의 색.** 트리거가 `<button>` 이던 때는 안쪽 `<span>` 둘
+   (`__placeholder`·`__value`)이 쥐고 있었다. 손으로 칠 수 있게 입력칸이 되면서 그 둘이
+   사라졌으므로, 같은 색을 입력칸 제 자리로 옮긴다 — 안 옮기면 안내글이 값과 같은 진한
+   색으로 떠서 **빈 칸이 채워진 것처럼 보인다.** */
+.date-picker__trigger            { color: var(--color-darkGray); white-space: nowrap; }
+.date-picker__trigger::placeholder { color: var(--color-lightGray); opacity: 1; }
 
 .date-picker__icon {
   flex-shrink: 0;
@@ -84,8 +118,27 @@
   justify-content: space-between;
   margin-bottom: 10px;
 }
+/* **연·월은 한 묶음으로 가운데.** 저마다 `flex: 1` 이던 때는 둘이 양쪽 끝으로 벌어져
+   한 날짜를 가리키는 둘이 서로 남처럼 보였다. 묶음이 남는 자리를 다 먹고(`flex: 1`),
+   그 안에서 둘은 **제 글자만큼만** 차지한 채 가운데 모인다. */
+.date-picker__nav-ym {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 0;
+}
 /* Nav Dropdown (Dropdown 컴포넌트를 nav 타이틀로 사용) */
-.date-picker__nav-dropdown { flex: 1; margin: 0 4px; }
+.date-picker__nav-dropdown { flex: 0 1 auto; min-width: 0; }
+/* **글자만큼만 쥔다.** `Dropdown` 의 트리거는 `width: 100%` 에 `min-width: 120px` 라
+   `2023년`(54px)·`6월`(24px)인데도 둘 다 120px 로 서서, 가운데로 묶어도 **둘이 떨어져
+   보였다.** 여기서만 내린다 — 고르개 자체의 밑값은 폼 칸에 설 때 필요한 값이다. */
+.date-picker__nav-dropdown .dropdown__trigger {
+  width: auto !important;
+  min-width: 0 !important;
+  padding: 0 4px 0 8px !important;
+}
 .date-picker__nav-dropdown .dropdown__trigger {
   height: 32px !important;
   border: none !important;

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

@@ -8,9 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../utils/cx';
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { yearMonthLabel } from '../utils/date';
 import { createPortal } from 'react-dom';
-import { todayYmdOr } from '../utils/date';
+import { todayYmdOr, intlLocale } from '../utils/date';
 import Calendar from 'lucide-react/dist/esm/icons/calendar.mjs';
 import ChevronLeft from 'lucide-react/dist/esm/icons/chevron-left.mjs';
 import ChevronRight from 'lucide-react/dist/esm/icons/chevron-right.mjs';
@@ -30,21 +29,71 @@ function formatDisplay(iso) {
     const [y, m, d] = iso.split('-');
     return `${y}. ${m}. ${d}.`;
 }
+/**
+ * **손으로 친 글을 날짜로 읽는다** — `formatDisplay` 의 짝.
+ *
+ * 숫자만 남겨서 본다. 그래서 `2026. 10. 20.` · `2026-10-20` · `2026/10/20` · `20261020` 이
+ * 모두 같은 날이 된다 — 사람이 어떤 구분자를 칠지 미리 못 정한다.
+ *
+ * **없는 날은 안 받는다.** `Date` 는 2026-02-30 을 3월 2일로 넘겨 버리므로, 지은 날짜가
+ * 받은 숫자와 같은지 되본다. 안 되보면 2월 30일을 치고 3월 2일이 골라져도 모른다.
+ */
+function parseTyped(text) {
+    const digits = text.replace(/\D/g, '');
+    if (digits.length !== 8)
+        return null;
+    const y = +digits.slice(0, 4), m = +digits.slice(4, 6), d = +digits.slice(6, 8);
+    if (m < 1 || m > 12 || d < 1 || d > 31)
+        return null;
+    const made = new Date(y, m - 1, d);
+    if (made.getFullYear() !== y || made.getMonth() !== m - 1 || made.getDate() !== d)
+        return null;
+    return toISO(y, m - 1, d);
+}
 /* 연월 이름은 `연월이름` 으로 받는다 — 예전에는 `${y}년 ${m + 1}월` 로 박혀 있어 영어 화면에서도
    한국어 연월이 떴다. 부르는 쪽이 사전(`calendar.yearMonth`, Calendar 와 같은 열쇠)을 넘긴다. */
-function buildYMOptions(viewY, ymLabel, min, max) {
-    const startY = min ? +min.split('-')[0] : viewY - 10;
-    const endY = max ? +max.split('-')[0] : viewY + 10;
+/**
+ * **연·월을 따로 고른다.**
+ *
+ * 한때 `2026년 10월` 을 한 고르개에 252줄로 늘어놓았다(사장님 지시 2026-10-20: 둘로 나눌 것).
+ * 한 해 앞으로 가려면 열두 줄을 지나야 했고, 목록이 길어 어디쯤인지도 안 보였다.
+ *
+ * **자르는 규칙은 그대로다.** `min`·`max` 가 있으면 그 밖의 해·달은 아예 안 내놓는다 —
+ * 달 목록은 **고른 해에 따라** 달라진다(`min = 2026-10` 이면 2026년에는 10·11·12월만).
+ */
+/**
+ * **앞뒤 범위는 `오늘` 을 기준으로 잡는다 — 보고 있는 해가 아니라.**
+ *
+ * 한때 `viewY ± 10` 이었다. 두 가지가 틀렸다 — ① 열 해뿐이라 **생년월일을 못 고른다**
+ * (사장님 2026-10-20: 맨 위로 올려도 2013년이다), ② 기준이 보고 있는 해라 1950년으로 가면
+ * 목록이 1830년까지 **따라 흘러간다.**
+ *
+ * 그래서 **바닥은 1900년으로 못 박고, 꼭대기는 오늘에서 열 해**다(사장님: 1900년까지만
+ * 나오면 된다). 바닥을 숫자로 박는 것은 여기서 맞다 — **최근 해**를 박으면 세월이 지나며
+ * 그 해가 범위 끝이 되지만, 바닥은 멀어지기만 한다. 꼭대기만 오늘을 따라간다.
+ *
+ * 보고 있는 해는 **반드시 들어간다**(`Math.min`/`Math.max`). 밖에서 범위 밖 `value` 가
+ * 오면 고르개가 제 값을 목록에서 못 찾아 빈 이름으로 떨어진다.
+ */
+const FIRST_YEAR = 1900;
+function yearOptions(viewY, thisY, label, min, max) {
+    const startY = min ? +min.split('-')[0] : Math.min(FIRST_YEAR, viewY);
+    const endY = max ? +max.split('-')[0] : Math.max(thisY + 10, viewY);
     const opts = [];
-    for (let y = startY; y <= endY; y++) {
-        for (let m = 0; m < 12; m++) {
-            const ym = `${y}-${String(m + 1).padStart(2, '0')}`;
-            if (min && ym < min.slice(0, 7))
-                continue;
-            if (max && ym > max.slice(0, 7))
-                continue;
-            opts.push({ value: ym, label: ymLabel(y, m + 1) });
-        }
+    for (let y = startY; y <= endY; y++)
+        opts.push({ value: String(y), label: label(y) });
+    return opts;
+}
+/** 고른 해에 **실제로 고를 수 있는** 달. 해가 바뀌면 이 목록도 바뀐다. */
+function monthOptions(year, label, min, max) {
+    const opts = [];
+    for (let m = 1; m <= 12; m++) {
+        const ym = `${year}-${String(m).padStart(2, '0')}`;
+        if (min && ym < min.slice(0, 7))
+            continue;
+        if (max && ym > max.slice(0, 7))
+            continue;
+        opts.push({ value: String(m), label: label(year, m) });
     }
     return opts;
 }
@@ -255,12 +304,62 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
     for (let d = 1; d <= daysInMonth(viewY, viewM); d++)
         cells.push(d);
     const iconSize = size === 64 ? 20 : size === 40 ? 16 : 18;
-    const ymOptions = buildYMOptions(viewY, (year, month) => yearMonthLabel(t, i18n.language, year, month), min, max);
-    const ymValue = `${viewY}-${String(viewM + 1).padStart(2, '0')}`;
-    const dropdown = open ? createPortal(_jsxs("div", { ref: menuRef, id: panelId, className: "date-picker__dropdown", style: dropdownStyle, "data-tooltip-ignore": true, role: "dialog", "aria-label": t('datePicker.chooseDate', '날짜 선택'), tabIndex: -1, children: [_jsxs("div", { className: "date-picker__nav", children: [_jsx("button", { type: "button", className: "date-picker__nav-btn", onClick: prevMonth, "aria-label": t('calendar.prevMonth', '이전 달'), children: _jsx(ChevronLeft, { size: 16, strokeWidth: 2 }) }), _jsx(Dropdown, { className: "date-picker__nav-dropdown", ariaLabel: t('datePicker.selectYearMonth', '연월 선택'), options: ymOptions, value: ymValue, onChange: (v) => {
-                            const [y, m] = v.split('-');
-                            setViewYM(+y, +m - 1);
-                        }, block: true, size: 40 }), _jsx("button", { type: "button", className: "date-picker__nav-btn", onClick: nextMonth, "aria-label": t('calendar.nextMonth', '다음 달'), children: _jsx(ChevronRight, { size: 16, strokeWidth: 2 }) })] }), _jsxs("div", { className: "date-picker__grid", ref: gridRef, onKeyDown: onGridKeyDown, children: [DOW.map(d => (_jsx("div", { className: "date-picker__dow caption-1", children: d }, d))), cells.map((d, i) => {
+    /* 이름은 브라우저가 짓는다 — 한국어 `2026년` · `10월`, 영어 `2026` · `October`.
+       연월을 한 덩어리로 짓던 `yearMonthLabel` 은 **달력 머리줄(Calendar)** 이 여전히 쓴다. */
+    const locale = intlLocale(i18n.language);
+    const yearName = (y) => new Intl.DateTimeFormat(locale, { year: 'numeric' }).format(new Date(y, 0, 1));
+    const monthName = (y, m) => new Intl.DateTimeFormat(locale, { month: 'long' }).format(new Date(y, m - 1, 1));
+    const years = yearOptions(viewY, +todayIso.slice(0, 4), yearName, min, max);
+    const months = monthOptions(viewY, monthName, min, max);
+    /** 해를 바꿀 때 — 보던 달이 새 해의 범위 밖이면 **가장 가까운 달로 당긴다.**
+     *  안 당기면 `min = 2026-10` 에서 2026년을 골랐을 때 1월이 그대로 남아 빈 달력이 선다. */
+    const pickYear = (y) => {
+        const allowed = monthOptions(y, monthName, min, max);
+        if (allowed.length === 0)
+            return;
+        const stay = allowed.some((o) => +o.value === viewM + 1);
+        setViewYM(y, stay ? viewM : +allowed[0].value - 1);
+    };
+    /**
+     * **치는 동안의 글** — 안 치고 있으면 `null` 이고, 그때는 고른 값을 보인다.
+     *
+     * 치는 글을 곧바로 `value` 로 돌리지 않는 까닭: `2026` 까지 쳤을 때는 아직 날짜가 아니다.
+     * 그 사이에 고른 값을 바꾸면 **부르는 쪽이 반쪽짜리 날짜를 받는다.** 다 치면 그때 돌린다.
+     */
+    const [typed, setTyped] = useState(null);
+    /* 밖에서 값이 바뀌면 치던 글을 접는다 — 안 접으면 남이 고친 날짜가 안 보인다 */
+    useEffect(() => { setTyped(null); }, [value]);
+    const onTyped = useCallback((text) => {
+        setTyped(text);
+        const iso = parseTyped(text);
+        if (!iso)
+            return;
+        if (min && iso < min)
+            return;
+        if (max && iso > max)
+            return;
+        onChange(iso);
+        const [y, m] = iso.split('-');
+        setViewYM(+y, +m - 1);
+    }, [min, max, onChange, setViewYM]);
+    /** 다 못 친 글은 **버린다** — 고른 값으로 되돌린다. 반쪽 글을 남겨 두면 날짜처럼 보인다 */
+    const commitTyped = useCallback(() => { setTyped(null); }, []);
+    const onFieldKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            commitTyped();
+            setOpen(false);
+        }
+        else if (e.key === 'Escape') {
+            commitTyped();
+            setOpen(false);
+        }
+        else if (e.key === 'ArrowDown' && !open) {
+            e.preventDefault();
+            setOpen(true);
+        }
+    }, [commitTyped, setOpen, open]);
+    const dropdown = open ? createPortal(_jsxs("div", { ref: menuRef, id: panelId, className: "date-picker__dropdown", style: dropdownStyle, "data-tooltip-ignore": true, role: "dialog", "aria-label": t('datePicker.chooseDate', '날짜 선택'), tabIndex: -1, children: [_jsxs("div", { className: "date-picker__nav", children: [_jsx("button", { type: "button", className: "date-picker__nav-btn", onClick: prevMonth, "aria-label": t('calendar.prevMonth', '이전 달'), children: _jsx(ChevronLeft, { size: 16, strokeWidth: 2 }) }), _jsxs("div", { className: "date-picker__nav-ym", children: [_jsx(Dropdown, { className: "date-picker__nav-dropdown", ariaLabel: t('datePicker.selectYear', '연 선택'), options: years, value: String(viewY), onChange: (v) => pickYear(+v), size: 40 }), _jsx(Dropdown, { className: "date-picker__nav-dropdown", ariaLabel: t('datePicker.selectMonth', '월 선택'), options: months, value: String(viewM + 1), onChange: (v) => setViewYM(viewY, +v - 1), size: 40 })] }), _jsx("button", { type: "button", className: "date-picker__nav-btn", onClick: nextMonth, "aria-label": t('calendar.nextMonth', '다음 달'), children: _jsx(ChevronRight, { size: 16, strokeWidth: 2 }) })] }), _jsxs("div", { className: "date-picker__grid", ref: gridRef, onKeyDown: onGridKeyDown, children: [DOW.map(d => (_jsx("div", { className: "date-picker__dow caption-1", children: d }, d))), cells.map((d, i) => {
                         if (d === null)
                             return _jsx("div", {}, `e${i}`);
                         const iso = toISO(viewY, viewM, d);
@@ -270,5 +369,5 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
                         const col = (i % 7);
                         return (_jsx("button", { type: "button", disabled: dis, "data-day": d, tabIndex: d === tabIndexOf ? 0 : -1, "aria-current": isToday ? 'date' : undefined, onClick: () => !dis && selectDay(d), className: cx('date-picker__day caption-1', isSelected && 'date-picker__day--selected', isToday && !isSelected && 'date-picker__day--today', dis && 'date-picker__day--disabled', col === 0 && 'date-picker__day--sun', col === 6 && 'date-picker__day--sat'), children: d }, d));
                     })] })] }), document.body) : null;
-    return (_jsxs("div", { className: cx('date-picker', `date-picker--s${size}`, open && 'date-picker--open', className), children: [_jsxs("button", { ref: triggerRef, type: "button", className: "date-picker__trigger body-2", onClick: () => !disabled && toggle(), disabled: disabled, "aria-haspopup": "true", "aria-expanded": open, children: [_jsx("span", { className: value ? 'date-picker__value' : 'date-picker__placeholder', children: value ? formatDisplay(value) : placeholder }), _jsx(Calendar, { size: iconSize, className: "date-picker__icon", strokeWidth: 1.5 })] }), dropdown] }));
+    return (_jsxs("div", { className: cx('date-picker', `date-picker--s${size}`, open && 'date-picker--open', className), children: [_jsxs("div", { className: "date-picker__field", children: [_jsx("input", { ref: triggerRef, type: "text", className: "date-picker__trigger body-2", value: typed ?? formatDisplay(value), placeholder: placeholder, onChange: (e) => onTyped(e.target.value), onClick: () => !disabled && !open && toggle(), onKeyDown: onFieldKeyDown, onBlur: commitTyped, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, inputMode: "numeric", autoComplete: "off" }), _jsx("button", { type: "button", className: "date-picker__icon-btn", onClick: () => !disabled && toggle(), disabled: disabled, tabIndex: -1, "aria-label": placeholder, "aria-haspopup": "dialog", "aria-expanded": open, children: _jsx(Calendar, { size: iconSize, className: "date-picker__icon", strokeWidth: 1.5 }) })] }), dropdown] }));
 }

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

@@ -79,7 +79,18 @@ export type PanelRowButton = Base & {
 };
 export type PanelRowText = Base & {
     variant: 'text';
-    value: string;
+    /**
+     * 오른쪽에 **그대로 그려지는 것**. 글자가 흔하지만 마디도 받는다.
+     *
+     * 넓힌 까닭(말귀 청 2026-10-20): 고객 상세의 연락처 줄을 `<a href="tel:">` 로 만들어 폰에서
+     * 번호를 눌러 바로 걸게 하려는데 `string` 이라 못 넣었다. 그 줄만 앱이 손으로 그리면 **한
+     * 패널 안에서 간격·글자 크기가 갈린다** — 그래서 받는 쪽을 넓힌다. 같은 파일의
+     * `helperText`·`buttonLabel` 이 이미 `ReactNode` 라 꼴도 낯설지 않다.
+     *
+     * **글자로 다루는 자리는 없다** — 그리는 한 곳(`panel-row__text`)에서 그대로 내보낸다.
+     * `valueColor` 는 그 `<span>` 에 걸리므로, 마디가 제 색을 가지면 그것이 이긴다.
+     */
+    value: ReactNode;
     valueColor?: string;
 };
 export type PanelRowInput = Base & {