@ihabdevteam/core 0.321.0 → 0.323.0

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

@@ -7,7 +7,7 @@ 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 };
+const defaultInsets = { left: 38, right: 16, top: 26, bottom: 24 };
 /**
  * **작은 선 그래프** — 시간·조건에 따라 값이 어떻게 흐르는지를 그린다.
  * 세로는 0~100%로 고정이고, 가로 범위는 부르는 쪽이 준다.
@@ -24,36 +24,36 @@ const 기본여백 = { left: 38, right: 16, top: 26, bottom: 24 };
 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);
+    const [measuredWidth, setMeasuredWidth] = useState(null);
+    const [svgEl, setSvgEl] = useState(null);
     useEffect(() => {
-        if (!칸)
+        if (!svgEl)
             return;
-        const 재기 = (w) => set잰폭(Math.round(w) || null);
-        재기(칸.getBoundingClientRect().width);
+        const measure = (w) => setMeasuredWidth(Math.round(w) || null);
+        measure(svgEl.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());
+        const observer = new ResizeObserver(([e]) => measure(e.contentRect.width));
+        observer.observe(svgEl);
+        return () => { observer.disconnect(); };
+    }, [svgEl]);
+    const { payload: hoverText, anchorRect: hoverRect, openAfterDelay, close: close } = useDelayedHoverAnchor(LINE_CHART_HOVER_DELAY_MS);
+    const onHover = useCallback((text, el) => {
+        if (text)
+            openAfterDelay(text, el.getBoundingClientRect());
     }, [openAfterDelay]);
-    const W = 잰폭 ?? fallbackWidth, H = height;
-    const { left: 왼, right: 오른, top: 위, bottom: 아래 } = { ...기본여백, ...insets };
-    const [처음, 끝] = range;
+    const W = measuredWidth ?? fallbackWidth, H = height;
+    const { left: left, right: right, top: top, bottom: bottom } = { ...defaultInsets, ...insets };
+    const [first, last] = range;
     /* 범위는 부르는 쪽이 적어도 한 칸 폭으로 준다(끝 > 처음) — 같으면 0 으로 나누므로 왼쪽 끝에 몰아 둔다 */
-    const x = (v) => (끝 === 처음 ? 왼 : 왼 + ((W - 왼 - 오른) * (v - 처음)) / (끝 - 처음));
-    const y = (pct) => 위 + ((H - 위 - 아래) * (100 - pct)) / 100;
-    const 자 = {
+    const x = (v) => (last === first ? left : left + ((W - left - right) * (v - first)) / (last - first));
+    const y = (pct) => top + ((H - top - bottom) * (100 - pct)) / 100;
+    const scales = {
         x, y,
-        plot: { left: 왼, right: W - 오른, top: 위, bottom: H - 아래, width: Math.max(0, W - 왼 - 오른), height: Math.max(0, H - 위 - 아래) },
+        plot: { left: left, right: W - right, top: top, bottom: H - bottom, width: Math.max(0, W - left - right), height: Math.max(0, H - top - bottom) },
     };
     /* 선은 **믿을 점만** 잇는다 — 속 빈 점까지 이으면 "이만큼 봤다" 는 말이 흐려진다 */
-    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: 짚은글 }))] }));
+    const linePoints = points.filter(p => !p.hollow);
+    const strokeColor = color ?? 'var(--color-main)';
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { ref: setSvgEl, 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: left, x2: W - right, y1: y(v), y2: y(v) }), _jsxs("text", { className: "line-chart__tick", x: left - 6, y: y(v) + 4, textAnchor: "end", children: [v, "%"] })] }, v))), overlay?.(scales), ticks.map(tk => (_jsx("text", { className: "line-chart__tick", x: x(tk.x), y: H - 5, textAnchor: "middle", children: tk.label }, tk.x))), linePoints.length > 1 && (_jsx("polyline", { className: "line-chart__line", fill: "none", stroke: strokeColor, points: linePoints.map(p => `${x(p.x)},${y(p.pct)}`).join(' ') })), points.map(p => (_jsxs("g", { className: "line-chart__dot", onPointerEnter: e => onHover(p.description, e.currentTarget), onPointerLeave: close, 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: strokeColor, fill: p.hollow ? undefined : strokeColor })] }, p.x)))] }), hoverText != null && (_jsx(Tooltip, { anchorRect: hoverRect, offset: 10, closeOnOutsideClick: false, className: "line-chart__tip", role: "tooltip", ariaLabel: hoverText, children: hoverText }))] }));
 }

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import './Loader.css';
 /** 눈에는 안 보이고 낭독기에는 읽히는 글자 */
-const 보이지않게 = {
+const srOnly = {
     position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, overflow: 'hidden',
     clipPath: 'inset(50%)', whiteSpace: 'nowrap', border: 0,
 };
@@ -15,10 +15,10 @@ export default function Loader(props) {
     const name = label || t('loader.loading', 'Loading');
     if (variant === 'bar') {
         /* 값을 모르면 0% 로 읽히고(빈 막대) 멈춘 채 보였다 — 값 없이 진행 중으로 둔다 */
-        const 모름 = progress == null || !Number.isFinite(Number(progress));
-        const pct = 모름 ? 0 : Math.max(0, Math.min(100, Number(progress)));
-        return (_jsx("div", { className: `loader-bar${모름 ? ' loader-bar--indeterminate' : ''}`, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": 모름 ? undefined : pct, "aria-label": name, children: _jsx("div", { className: "loader-bar__inner", style: 모름 ? undefined : { width: `${pct}%` } }) }));
+        const unknown = progress == null || !Number.isFinite(Number(progress));
+        const pct = unknown ? 0 : Math.max(0, Math.min(100, Number(progress)));
+        return (_jsx("div", { className: `loader-bar${unknown ? ' loader-bar--indeterminate' : ''}`, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": unknown ? undefined : pct, "aria-label": name, children: _jsx("div", { className: "loader-bar__inner", style: unknown ? undefined : { width: `${pct}%` } }) }));
     }
     const dim = typeof size === 'number' ? `${size}px` : size;
-    return (_jsxs("div", { className: "loader-spinner", style: { width: dim, height: dim }, role: "status", "aria-label": name, children: [_jsx("span", { style: 보이지않게, children: name }), _jsxs("svg", { className: "loader-spinner__svg", viewBox: "0 0 50 50", width: size, height: size, children: [_jsx("circle", { className: "loader-spinner__bg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4" }), _jsx("circle", { className: "loader-spinner__fg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4", strokeLinecap: "round" })] })] }));
+    return (_jsxs("div", { className: "loader-spinner", style: { width: dim, height: dim }, role: "status", "aria-label": name, children: [_jsx("span", { style: srOnly, children: name }), _jsxs("svg", { className: "loader-spinner__svg", viewBox: "0 0 50 50", width: size, height: size, children: [_jsx("circle", { className: "loader-spinner__bg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4" }), _jsx("circle", { className: "loader-spinner__fg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4", strokeLinecap: "round" })] })] }));
 }

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

@@ -19,12 +19,12 @@ export default function NoticeBox({ title = '', lines = [], notices = null, chil
     if (dismissed)
         return null;
     const baseClass = `notice-box notice-box--${variant} body-2 ${className}`.trim();
-    const 닫기단추 = dismissible && (_jsx("button", { 
+    const closeButton = dismissible && (_jsx("button", { 
         // type="button" — 없으면 폼 안에서 닫기를 누르는 순간 폼이 제출된다
         type: "button", className: "notice-box__dismiss", onClick: handleDismiss, "aria-label": t('common.close', '닫기'), children: "\u00D7" }));
     if (notices && Array.isArray(notices) && notices.length) {
-        return (_jsxs("div", { className: baseClass, role: "note", children: [notices.map((n, idx) => (_jsxs("div", { className: "notice-box__inner", children: [n.title ? _jsx("span", { className: "notice-box__title body-3", children: n.title }) : null, _jsx("div", { className: "notice-box__body", children: n.lines && n.lines.length ? (_jsx("div", { children: n.lines.map((l, i) => (_jsx("span", { className: "notice-box__line body-3", children: l }, i))) })) : (n.children ?? null) })] }, idx))), 닫기단추] }));
+        return (_jsxs("div", { className: baseClass, role: "note", children: [notices.map((n, idx) => (_jsxs("div", { className: "notice-box__inner", children: [n.title ? _jsx("span", { className: "notice-box__title body-3", children: n.title }) : null, _jsx("div", { className: "notice-box__body", children: n.lines && n.lines.length ? (_jsx("div", { children: n.lines.map((l, i) => (_jsx("span", { className: "notice-box__line body-3", children: l }, i))) })) : (n.children ?? null) })] }, idx))), closeButton] }));
     }
     const content = (title || lines.length) ? (_jsxs("div", { className: "notice-box__inner", children: [title ? _jsx("span", { className: "notice-box__title body-1", children: title }) : null, _jsx("div", { className: "notice-box__body", children: lines.length ? (_jsx("ul", { children: lines.map((l, i) => (_jsx("li", { className: "notice-box__line", children: l }, i))) })) : children })] })) : (_jsx("div", { className: "notice-box__inner", children: children }));
-    return (_jsxs("div", { ref: rootRef, className: baseClass, role: "note", children: [content, 닫기단추] }));
+    return (_jsxs("div", { ref: rootRef, className: baseClass, role: "note", children: [content, closeButton] }));
 }

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

@@ -10,11 +10,11 @@ export default function PageTitle({ title, sub, rightAction, titleAction, badge,
     const { t } = useTranslation();
     // 페이지 제목이 곧 문서 제목이 되도록 맞춘다(WCAG 2.4.2).
     useDocumentTitle(typeof title === 'string' ? title : (documentTitle ?? null));
-    const 뒤로이름 = backLabel ?? t('common.back', '뒤로');
+    const backText = backLabel ?? t('common.back', '뒤로');
     return (_jsxs("div", { className: wrap ? 'page-title page-title--wrap' : 'page-title', children: [_jsxs("div", { className: "page-title__main", children: [_jsxs("div", { className: "page-title__title-row", children: [onBack && (
                             /* 글자 없이 화살표만 둔다 — 제목 옆에서 '뒤로' 라고 적으면 제목과 경쟁한다.
                                그만큼 과녁을 크게(48) 잡는다. 이름은 낭독기용으로 따로 준다. */
                             _jsx(Button, { htmlType: "button", className: "page-title__back", size: 48, type: "dot", icon: "chevron-left", iconSize: "large", useBorder: false, 
                                 /* 역할 이름을 쓴다 — `--color-black` 은 다크에서 이름과 실제 색이 뒤집힌다. */
-                                iconColor: "var(--color-text-primary)", ariaLabel: 뒤로이름, showTooltipInfo: 뒤로이름, onClick: onBack })), _jsx("h1", { className: "page-title__title h1", children: title }), badge && _jsx("div", { className: "page-title__badge", children: _jsx(Badge, { label: badge, size: "small", variant: badgeVariant, fill: "outline" }) }), titleAction ? _jsx("div", { className: "page-title__title-action", children: titleAction }) : null] }), sub && _jsx("p", { className: "page-title__sub body-2", children: sub })] }), rightAction ? _jsx("div", { className: "page-title__action", children: rightAction }) : null] }));
+                                iconColor: "var(--color-text-primary)", ariaLabel: backText, showTooltipInfo: backText, onClick: onBack })), _jsx("h1", { className: "page-title__title h1", children: title }), badge && _jsx("div", { className: "page-title__badge", children: _jsx(Badge, { label: badge, size: "small", variant: badgeVariant, fill: "outline" }) }), titleAction ? _jsx("div", { className: "page-title__title-action", children: titleAction }) : null] }), sub && _jsx("p", { className: "page-title__sub body-2", children: sub })] }), rightAction ? _jsx("div", { className: "page-title__action", children: rightAction }) : null] }));
 }

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

@@ -16,8 +16,8 @@ export default function Pagination({ page, totalPages, onChange, prevLabel, next
     const resolvedNext = nextLabel ?? t('common.nextPage', '다음 페이지');
     /* 범위 밖 쪽(page > totalPages — 결과가 줄어든 직후)에서도 '이전' 이 범위 안으로 돌아오게 먼저 조인다.
        전에는 page-1 이 여전히 totalPages 보다 커 눌러도 범위 밖에 머물렀다. */
-    const 마지막 = Math.max(1, totalPages);
-    const handlePrev = () => onChange(Math.max(1, Math.min(마지막, page - 1)));
-    const handleNext = () => onChange(Math.min(마지막, page + 1));
-    return (_jsxs("div", { className: cx('pagination', className), children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-left", ariaLabel: resolvedPrev, disabled: page <= 1, onClick: handlePrev }), _jsxs("span", { className: "pagination__info body-3", "aria-live": "polite", "aria-atomic": "true", children: [Math.min(Math.max(1, page), 마지막), " / ", 마지막] }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-right", ariaLabel: resolvedNext, disabled: page >= totalPages, onClick: handleNext })] }));
+    const lastPage = Math.max(1, totalPages);
+    const handlePrev = () => onChange(Math.max(1, Math.min(lastPage, page - 1)));
+    const handleNext = () => onChange(Math.min(lastPage, page + 1));
+    return (_jsxs("div", { className: cx('pagination', className), children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-left", ariaLabel: resolvedPrev, disabled: page <= 1, onClick: handlePrev }), _jsxs("span", { className: "pagination__info body-3", "aria-live": "polite", "aria-atomic": "true", children: [Math.min(Math.max(1, page), lastPage), " / ", lastPage] }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-right", ariaLabel: resolvedNext, disabled: page >= totalPages, onClick: handleNext })] }));
 }

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

@@ -16,8 +16,8 @@ export default function Panel({ title, titleLevel = 2, icon, disc, actions, size
         style.maxWidth = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
     if (labelWidth !== undefined)
         style['--panel-label-width'] = typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth;
-    const 제목태그 = titleLevel ? `h${titleLevel}` : 'div';
-    return (_jsxs("div", { className: cls, style: Object.keys(style).length ? style : undefined, children: [(!!title || disc != null) && (_jsxs("div", { className: cx('panel__header', disc != null ? 'panel__header--with-disc' : ''), children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "panel__icon" })), _jsxs("div", { className: "panel__title-group", children: [!!title && (_jsx(제목태그, { className: `panel__title ${disc != null ? 'body-3b' : 'h5b'}`, children: title })), disc != null && _jsx("p", { className: "panel__disc caption-1", children: disc })] }), actions && _jsx("div", { className: "panel__actions", children: actions })] })), loading ? (_jsx(PanelRow, { variant: "loading" })
+    const TitleTag = titleLevel ? `h${titleLevel}` : 'div';
+    return (_jsxs("div", { className: cls, style: Object.keys(style).length ? style : undefined, children: [(!!title || disc != null) && (_jsxs("div", { className: cx('panel__header', disc != null ? 'panel__header--with-disc' : ''), children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "panel__icon" })), _jsxs("div", { className: "panel__title-group", children: [!!title && (_jsx(TitleTag, { className: `panel__title ${disc != null ? 'body-3b' : 'h5b'}`, children: title })), disc != null && _jsx("p", { className: "panel__disc caption-1", children: disc })] }), actions && _jsx("div", { className: "panel__actions", children: actions })] })), loading ? (_jsx(PanelRow, { variant: "loading" })
             /* 비었는지는 React 가 그리는 것으로 센다 — `{조건 && 행들}` 이 false 면 children 이 false 라 빈 상태 문구가 안 떴다 */
             ) : empty != null && Children.toArray(children).length === 0 ? (_jsx(PanelRow, { variant: "empty", children: empty })) : scrollable ? (_jsx("div", { className: cx('panel__body--scroll', scrollbarGutter === 'stable' && 'panel__body--gutter-stable'), children: children })) : children] }));
 }

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

@@ -153,10 +153,8 @@ export type PanelRowProps = PanelRowToggle | PanelRowSegmented | PanelRowDropdow
 export declare function PanelRow(props: PanelRowProps): import("react").JSX.Element;
 export type { DeviceSide };
 export interface PanelRowDeviceProps {
-    devices: {
-        좌: DeviceEntry | null;
-        우: DeviceEntry | null;
-    };
+    /** 쪽별로 지금 끼고 있는 기기 — 열쇠는 `DeviceSide` 값이다(`HearingDeviceInfo` 와 같은 꼴) */
+    devices: Record<DeviceSide, DeviceEntry | null>;
     /** 있으면 각 쪽 이름 옆에 '착용 해제'가 선다 — 그 쪽의 '지금 착용중' 만 내린다(이력은 남는다) */
     onRelease?: (side: DeviceSide) => void;
     /**

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

@@ -8,15 +8,8 @@ import SegmentedControl from './SegmentedControl';
 import Dropdown from './Dropdown';
 import Button from './Button';
 import Badge from './Badge';
-import { deviceKindVariant } from '../utils/deviceKind';
+import { deviceKindVariant, deviceKindLabel } from '../utils/deviceKind';
 import { formatWornDate } from '../utils/wornDate';
-/* 기기 종류 배지 이름은 지금 언어로 — 값은 저장된 한국어(보청기·인공와우)라 그대로 보이면 영어 화면에도 한국어였다.
-   색(deviceKindVariant)은 저장값으로 가른다. 모르는 값은 그대로 */
-const 기기종류열쇠 = { '보청기': 'hearingAid', '인공와우': 'cochlearImplant' };
-function 기기종류이름(device, t) {
-    const k = 기기종류열쇠[device];
-    return k ? t(`device.type.${k}`, { defaultValue: device }) : device;
-}
 import TextField from './TextField';
 import Loader from './Loader';
 import './Panel.css';
@@ -145,23 +138,23 @@ export function PanelRow(props) {
  * 제목으로 이미 쓴 값과 빈 값, 그리고 서로 같은 값을 걷어 낸다. 걷어 내지 않으면
  * 브랜드도 형태도 '기타' 인 기기가 **'기타 · 기타'** 로 떴다(같은 말이 두 번).
  */
-function 메타(d) {
-    const 제목 = d.productName || d.brand;
-    const 조각 = [d.brand, d.fitType].filter((v) => !!v && v !== 제목);
-    return [...new Set(조각)].join(' · ');
+function metaOf(d) {
+    const title = d.productName || d.brand;
+    const parts = [d.brand, d.fitType].filter((v) => !!v && v !== title);
+    return [...new Set(parts)].join(' · ');
 }
 export function PanelRowDevice({ devices, onRelease, emptyLabel }) {
     const { t, i18n } = useTranslation(); /* i18n.language — 착용일이 보는 말을 따른다((118)) */
-    const SIDES = ['좌', '우'];
+    const SIDES = ['left', 'right'];
     return (_jsx("div", { className: "panel-row panel-row--device", children: SIDES.map(side => {
             const d = devices[side];
-            const sideLabel = side === '좌' ? t('device.direction.left', '좌') : t('device.direction.right', '우');
+            const sideLabel = side === 'left' ? t('device.direction.left', '좌') : t('device.direction.right', '우');
             return (_jsxs("div", { className: "panel-row__device-column", children: [_jsxs("div", { className: "panel-row__device-head", children: [_jsx("span", { className: "panel-row__device-side body-2b", children: sideLabel }), d && onRelease && (
                             /* 표의 줄 끝 단추와 같은 모양·같은 말 — 하는 일도 같다.
                                이력에서 지우는 것이 아니라 '지금 끼고 있음' 만 내린다
                                (잠시 안 씀·수리 보냄 같은 경우가 실제로 있다). */
                             _jsx(Button, { htmlType: "button", size: 32, type: "dot", icon: "x", 
                                 // 좌·우 두 단추가 같은 이름이라 어느 쪽 기기를 내리는지 안 들렸다 — 이름에만 쪽을 붙인다(툴팁은 그대로)
-                                ariaLabel: `${sideLabel} ${t('customers.device.unwear', '착용 해제')}`, showTooltipInfo: t('customers.device.unwear', '착용 해제'), onClick: () => onRelease(side) }))] }), d ? (_jsxs("div", { className: "panel-row__device-info", children: [_jsxs("span", { className: "panel-row__device-kind", children: [d.device && _jsx(Badge, { size: "small", variant: deviceKindVariant(d.device), fill: "soft", label: 기기종류이름(d.device, t) }), 메타(d) && _jsx("span", { className: "panel-row__device-detail body-3", children: 메타(d) })] }), _jsx("span", { className: "panel-row__device-name body-2b", children: d.productName || d.brand }), formatWornDate(d.wornYear, d.wornMonth, d.wornDay, i18n.language) && (_jsx("span", { className: "panel-row__device-date caption-1", children: t('customers.device.wornSince', { date: formatWornDate(d.wornYear, d.wornMonth, d.wornDay, i18n.language) }) }))] })) : (_jsx("span", { className: "panel-row__device-empty body-3", children: emptyLabel ?? t('customers.device.notRegistered', '미등록') }))] }, side));
+                                ariaLabel: `${sideLabel} ${t('customers.device.unwear', '착용 해제')}`, showTooltipInfo: t('customers.device.unwear', '착용 해제'), onClick: () => onRelease(side) }))] }), d ? (_jsxs("div", { className: "panel-row__device-info", children: [_jsxs("span", { className: "panel-row__device-kind", children: [d.device && _jsx(Badge, { size: "small", variant: deviceKindVariant(d.device), fill: "soft", label: deviceKindLabel(d.device, t) }), metaOf(d) && _jsx("span", { className: "panel-row__device-detail body-3", children: metaOf(d) })] }), _jsx("span", { className: "panel-row__device-name body-2b", children: d.productName || d.brand }), formatWornDate(d.wornYear, d.wornMonth, d.wornDay, i18n.language) && (_jsx("span", { className: "panel-row__device-date caption-1", children: t('customers.device.wornSince', { date: formatWornDate(d.wornYear, d.wornMonth, d.wornDay, i18n.language) }) }))] })) : (_jsx("span", { className: "panel-row__device-empty body-3", children: emptyLabel ?? t('customers.device.notRegistered', '미등록') }))] }, side));
         }) }));
 }

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

@@ -71,7 +71,7 @@ const MAX_TILT = 10;
  *
  * `formatRemaining` 과 **같은 사다리**를 탄다. 한쪽만 고치면 또 갈리므로 바로 아래 붙여 둔다.
  */
-function 적히는눈금으로(seconds) {
+function toDisplayUnit(seconds) {
     if (seconds <= 0)
         return 0;
     if (seconds >= 86400)
@@ -169,10 +169,10 @@ export default function PassCard({ ariaLabel, product, showPrice = false, plan,
             const end = new Date(endDate).getTime();
             if (Number.isNaN(end))
                 return null;
-            const 끝 = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(endDate));
-            const 오늘 = /^(\d{4})-(\d{2})-(\d{2})/.exec(getTodayKst());
-            const days = 끝 && 오늘
-                ? Math.round((Date.UTC(+끝[1], +끝[2] - 1, +끝[3]) - Date.UTC(+오늘[1], +오늘[2] - 1, +오늘[3])) / 86_400_000)
+            const endMatch = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(endDate));
+            const todayMatch = /^(\d{4})-(\d{2})-(\d{2})/.exec(getTodayKst());
+            const days = endMatch && todayMatch
+                ? Math.round((Date.UTC(+endMatch[1], +endMatch[2] - 1, +endMatch[3]) - Date.UTC(+todayMatch[1], +todayMatch[2] - 1, +todayMatch[3])) / 86_400_000)
                 : Math.round((end - Date.now()) / 86_400_000);
             /* endInclusive — 종료일 당일까지 쓰는 이용권이면 그 날도 남은 날이다(마지막 날이 0초·0% 로 보이지 않게) */
             remaining = Math.max(0, endInclusive ? days + 1 : days) * 86400;
@@ -192,8 +192,8 @@ export default function PassCard({ ariaLabel, product, showPrice = false, plan,
         /* **옆에 적히는 글과 같은 값을 센다**(말귀 요청, 2026-10-02) — 자세한 까닭은
            `적히는눈금으로` 머리글. 날짜(`endDate`)로 셈한 길은 이미 날 단위 정수라 이 걸음이
            아무것도 바꾸지 않는다. 벌어지던 것은 초를 그대로 받는 `remainingSeconds` 쪽이다. */
-        const 적힌남음 = 적히는눈금으로(remaining);
-        const percent = Math.max(0, Math.min(100, Math.floor((Math.min(적힌남음, totalSeconds) / totalSeconds) * 100)));
+        const displayRemaining = toDisplayUnit(remaining);
+        const percent = Math.max(0, Math.min(100, Math.floor((Math.min(displayRemaining, totalSeconds) / totalSeconds) * 100)));
         if (state === 'pending' && percent >= 100)
             return null;
         /* **만료는 '0초 남음' 이 아니다**(말귀 요청 ㊾). "0초 남았다" 는 **곧 끝난다**는 말로
@@ -301,8 +301,8 @@ export default function PassCard({ ariaLabel, product, showPrice = false, plan,
     const handleCloseMenu = useCallback(() => setMenuAnchor(null), []);
     const planDisplay = useMemo(() => {
         /* 폴백 플랜('이용권'·영어 'Plan')은 큰 글씨에서 뺀다 — 아래 꼬리(planSuffix)에 이미 적힌다 */
-        const 꼬리 = t('passCard.planSuffix', '이용권');
-        const text = rPlan.replace('이용권', '').replace(꼬리 === '이용권' ? '' : 꼬리, '').trim();
+        const planSuffix = t('passCard.planSuffix', '이용권');
+        const text = rPlan.replace('이용권', '').replace(planSuffix === '이용권' ? '' : planSuffix, '').trim();
         const match = text.match(/^(.*?)(일|년)$/);
         return match
             ? _jsxs(_Fragment, { children: [_jsx("span", { className: "h0 pass-card__plan-number", children: match[1] }), _jsx("span", { className: "h5b pass-card__plan-unit", children: match[2] === '년' ? t('passCard.unitYear', '년') : t('passCard.unitDay', '일') })] })

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

@@ -1,7 +1,7 @@
 import { toWonSymbol } from '../../utils/format';
 import i18n from '../../i18n';
 /** 기간을 못 뽑았을 때의 플랜 글자 — 지금 언어의 `passCard.planSuffix`(ko '이용권'). 전에는 한국어가 박혀 영어 화면에도 떴다. */
-const 기본플랜 = () => i18n.t('passCard.planSuffix', '이용권');
+const planFallback = () => i18n.t('passCard.planSuffix', '이용권');
 /** 숫자(원) 또는 문자열 가격을 '₩12,345' 형태로 통일. 숫자만 든 문자열('12000'·'12,000')도 수로 보고 ₩ 를 붙인다
  *  — 전에는 문자열이면 '원' 이 붙은 것만 바꿔, DB 에서 글자로 온 '12000' 이 기호·자릿수 없이 떴다. */
 function formatPrice(v) {
@@ -39,7 +39,7 @@ function derivePlan(p) {
     const en = name.match(/(\d+)\s*-?\s*(day|year)s?\b/i);
     if (en)
         return en[2].toLowerCase() === 'year' ? `${en[1]}년` : `${en[1]}일`;
-    return name || 기본플랜();
+    return name || planFallback();
 }
 /**
  * 상품코드 접미사(_30d, _7d, _1y 등)에서 기간(일)을 도출 — derivePlan과 같은

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

@@ -38,8 +38,8 @@ function renderPriceParts(raw) {
 /** @public */
 export default function PaymentPlan(props) {
     const { t } = useTranslation();
-    const 기본이용권 = t('payment.plan.tierFallback', { defaultValue: '이용권' });
-    const 오픈특가말 = t('payment.plan.openPromo', { defaultValue: '오픈 특가' });
+    const planFallback = t('payment.plan.tierFallback', { defaultValue: '이용권' });
+    const openPromoLabel = t('payment.plan.openPromo', { defaultValue: '오픈 특가' });
     const { plan, onSelect, period = "monthly", ownedCodes } = props || {};
     const owned = (code) => !!code && !!ownedCodes?.includes(code);
     // 이 플랜의 오픈특가 tier를 이미 보유(구매)했는지 — 그러면 기본 tier를 카드로 승격
@@ -85,14 +85,14 @@ export default function PaymentPlan(props) {
                             /* 라벨이 없을 때의 대체말도 **화면에 뜨는 글**이다 — 사전에서 가져온다.
                                아래 정규식의 '오픈 특가' 는 다르다. 그건 앱이 넘겨준 **데이터를
                                읽는** 것이라 한국어 그대로여야 한다. */
-                            const rawLabel = tier.label || 기본이용권;
+                            const rawLabel = tier.label || planFallback;
                             // 라벨의 '오픈 특가'는 계정당 1회 제한의 표시다 — 숨김·소진 판정에만 쓴다.
                             const isOnceOnly = isOnceOnlyTier(tier);
                             // 배지 문구는 별도 — 같은 프로모션이되 1회 제한은 없는 tier(1년권)도 함께 얹는다.
                             const showOpenPromo = isOnceOnly || tier.openPromo === true;
-                            const planText = rawLabel.replace(/^오픈\s*특가\s*/, '') || 기본이용권;
+                            const planText = rawLabel.replace(/^오픈\s*특가\s*/, '') || planFallback;
                             const curPrice = tier.prices ? tier.prices[period] : tier.price;
-                            const discount = tier.badge ? (showOpenPromo ? `${오픈특가말}\n${tier.badge}` : tier.badge) : undefined;
+                            const discount = tier.badge ? (showOpenPromo ? `${openPromoLabel}\n${tier.badge}` : tier.badge) : undefined;
                             // 이미 구매한 오픈특가(계정당 1회)는 결제 화면에서 숨긴다.
                             if (isOnceOnly && owned(tier.code))
                                 return null;

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

@@ -16,16 +16,16 @@ export default function ConfirmPopup(props) {
     const { t } = useTranslation();
     /* 열릴 때 포커스 자리 — Popup 이 먼저 첫 포커스 자리(X)로 옮긴 뒤(자식 효과가 먼저 돈다) 여기서 고른 단추로 옮긴다.
        단추 차례는 [곁 단추?, 취소?, 확인] 이다. */
-    const 본문Ref = useRef(null);
+    const bodyRef = useRef(null);
     useEffect(() => {
         if (inline || initialFocus === 'close')
             return;
-        const 판 = 본문Ref.current?.closest('.popup-panel');
-        const 단추들 = Array.from(판?.querySelectorAll('.popup-footer--buttons button') ?? []);
-        const 고른 = initialFocus === 'confirm' ? 단추들[단추들.length - 1]
-            : hideCancel ? undefined : 단추들[extraAction ? 1 : 0];
-        if (고른 && !고른.disabled)
-            고른.focus();
+        const panel = bodyRef.current?.closest('.popup-panel');
+        const buttons = Array.from(panel?.querySelectorAll('.popup-footer--buttons button') ?? []);
+        const picked = initialFocus === 'confirm' ? buttons[buttons.length - 1]
+            : hideCancel ? undefined : buttons[extraAction ? 1 : 0];
+        if (picked && !picked.disabled)
+            picked.focus();
         // 열릴 때 한 번만
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -39,19 +39,19 @@ export default function ConfirmPopup(props) {
        단추가 꺼지며 body 로 떨어진 포커스를 누른 단추로 되돌린다. */
     /* closeOnConfirm=false 로 두고 콜백이 넘겨받은 close() 를 **스스로** 부르면(문서가 권하는 "성공했을 때만 닫기") 그것도 닫힘으로
        센다 — 전에는 closeOnConfirm(false) 만 돌려 닫히는 260ms 동안 잠금이 풀려, 한 번 더 누르면 확인이 두 번 나갔다. */
-    const 닫기를센다 = (closeWithAnimation) => {
-        let 닫았음 = false;
-        return { close: () => { 닫았음 = true; closeWithAnimation(); }, 닫았나: () => 닫았음 };
+    const makeClose = (closeWithAnimation) => {
+        let closed = false;
+        return { close: () => { closed = true; closeWithAnimation(); }, didClose: () => closed };
     };
-    const 한번만 = async (일) => {
+    const once = async (task) => {
         if (busyRef.current)
             return;
         busyRef.current = true;
-        const 누른곳 = typeof document !== 'undefined' ? document.activeElement : null;
+        const pressedAt = typeof document !== 'undefined' ? document.activeElement : null;
         setBusy(true);
-        let 닫는중 = false;
+        let closing = false;
         try {
-            닫는중 = await 일();
+            closing = await task();
         }
         catch (e) {
             /* 거절은 창을 남기고 잠금을 푸는 것으로 끝낸다(계약) — 받아 주지 않으면 처리되지 않은 거절로 새어 Next 개발 오버레이가 떴다 */
@@ -59,13 +59,13 @@ export default function ConfirmPopup(props) {
                 console.error(e);
         }
         finally {
-            if (!닫는중) {
+            if (!closing) {
                 busyRef.current = false;
                 setBusy(false);
                 requestAnimationFrame(() => {
-                    const 지금 = document.activeElement;
-                    if ((!지금 || 지금 === document.body) && 누른곳?.isConnected)
-                        누른곳.focus();
+                    const active = document.activeElement;
+                    if ((!active || active === document.body) && pressedAt?.isConnected)
+                        pressedAt.focus();
                 });
             }
         }
@@ -85,13 +85,13 @@ export default function ConfirmPopup(props) {
                     // 없는 일(삭제·연결 해제)이라, 두 번 눌려 두 번 나가면 첫 번째만 뜻이 있고
                     // 두 번째는 엉뚱한 실패로 돌아온다.
                     onClick: async ({ closeWithAnimation }) => {
-                        await 한번만(async () => {
-                            const 닫기 = 닫기를센다(closeWithAnimation);
-                            await extraAction.onClick(닫기.close);
-                            const 닫음 = extraAction.closeOnClick ?? true;
-                            if (닫음)
+                        await once(async () => {
+                            const close = makeClose(closeWithAnimation);
+                            await extraAction.onClick(close.close);
+                            const closeOnClick = extraAction.closeOnClick ?? true;
+                            if (closeOnClick)
                                 closeWithAnimation();
-                            return 닫음 || 닫기.닫았나();
+                            return closeOnClick || close.didClose();
                         });
                     },
                 }] : []),
@@ -106,14 +106,14 @@ export default function ConfirmPopup(props) {
                 variant: confirmVariant,
                 disabled: confirmDisabled || busy,
                 onClick: async ({ closeWithAnimation }) => {
-                    await 한번만(async () => {
-                        const 닫기 = 닫기를센다(closeWithAnimation);
-                        await onConfirm(닫기.close);
+                    await once(async () => {
+                        const close = makeClose(closeWithAnimation);
+                        await onConfirm(close.close);
                         if (closeOnConfirm)
                             closeWithAnimation();
-                        return closeOnConfirm || 닫기.닫았나();
+                        return closeOnConfirm || close.didClose();
                     });
                 },
             },
-        ], children: [topContent != null && _jsx("div", { className: "confirm-popup__top", children: topContent }), details && details.length > 0 && (_jsx(Panel, { children: details.map((d, i) => (_jsx(PanelRow, { label: d.label, children: _jsx("span", { className: "panel-row__text body-2", children: d.value }) }, i))) })), _jsx("p", { ref: 본문Ref, className: "body-2 confirm-popup__message", children: message }), children] }));
+        ], children: [topContent != null && _jsx("div", { className: "confirm-popup__top", children: topContent }), details && details.length > 0 && (_jsx(Panel, { children: details.map((d, i) => (_jsx(PanelRow, { label: d.label, children: _jsx("span", { className: "panel-row__text body-2", children: d.value }) }, i))) })), _jsx("p", { ref: bodyRef, className: "body-2 confirm-popup__message", children: message }), children] }));
 }

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

@@ -13,7 +13,7 @@ export default function CouponInputPopup({ onApply, onCancel }) {
     const [error, setError] = useState(null);
     const inputRef = useRef(null);
     /* 글귀와 칸을 잇는 id — 한 쪽에 이 창이 둘 설 일은 없지만 id 는 문서에서 하나여야 한다 */
-    const 글귀id = useId();
+    const hintId = useId();
     // Popup 자체 포커스 로직(패널 내 첫 focusable = 헤더 닫기 버튼)보다 먼저 실행되도록
     // 자식 effect가 부모보다 먼저 도는 순서를 이용해 입력창을 선점 포커스한다.
     useEffect(() => { inputRef.current?.focus(); }, []);
@@ -46,5 +46,5 @@ export default function CouponInputPopup({ onApply, onCancel }) {
     return (_jsx(Popup, { className: "coupon-input-popup", title: t('usage.couponButton', '쿠폰 입력'), size: "small", onClose: onCancel, closeDisabled: loading, buttons: [
             { label: t('common.cancel', '취소'), variant: 'default', disabled: loading, onClick: ({ closeWithAnimation }) => closeWithAnimation() },
             { label: t('coupons.applyButton', '적용'), variant: 'main', disabled: !code.trim() || loading, onClick: ({ closeWithAnimation }) => void handleApply(closeWithAnimation) },
-        ], children: ({ closeWithAnimation }) => (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, className: "coupon-input-popup__input body-2", "aria-label": t('coupons.input.label', '쿠폰 코드'), "aria-invalid": error ? true : undefined, "aria-errormessage": error ? 글귀id : undefined, "aria-describedby": error ? 글귀id : undefined, placeholder: t('coupons.input.placeholder', '쿠폰 코드 입력'), value: code, onChange: handleChange, onKeyDown: e => handleKey(e, closeWithAnimation), disabled: loading, autoComplete: "off", spellCheck: false }), error && _jsx("p", { id: 글귀id, className: "coupon-input-popup__error caption-1", role: "alert", children: error })] })) }));
+        ], children: ({ closeWithAnimation }) => (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, className: "coupon-input-popup__input body-2", "aria-label": t('coupons.input.label', '쿠폰 코드'), "aria-invalid": error ? true : undefined, "aria-errormessage": error ? hintId : undefined, "aria-describedby": error ? hintId : undefined, placeholder: t('coupons.input.placeholder', '쿠폰 코드 입력'), value: code, onChange: handleChange, onKeyDown: e => handleKey(e, closeWithAnimation), disabled: loading, autoComplete: "off", spellCheck: false }), error && _jsx("p", { id: hintId, className: "coupon-input-popup__error caption-1", role: "alert", children: error })] })) }));
 }

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

@@ -3,14 +3,10 @@ import type { DeviceSide } from '../Panel';
 import type { DeviceForm } from '../../types/device';
 import './DeviceListPopup.css';
 interface DeviceListPopupProps {
-    devices: {
-        좌: DeviceEntry | null;
-        우: DeviceEntry | null;
-    };
-    deviceHistory: {
-        좌: DeviceEntry[];
-        우: DeviceEntry[];
-    };
+    /** 쪽별로 지금 끼고 있는 기기 — 열쇠는 `DeviceSide` 값이다 */
+    devices: Record<DeviceSide, DeviceEntry | null>;
+    /** 쪽별로 바꿔 온 이력 */
+    deviceHistory: Record<DeviceSide, DeviceEntry[]>;
     onClose: () => void;
     onSelect: (d: DeviceForm) => void;
     onDelete: (side: DeviceSide, index: number) => void;

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

@@ -16,7 +16,7 @@ import './DeviceListPopup.css';
  */
 export default function DeviceListPopup({ devices, deviceHistory, onClose, onSelect, onDelete }) {
     const { t } = useTranslation();
-    const rows = useMemo(() => ['좌', '우'].flatMap(side => deviceHistory[side].map((d, index) => ({
+    const rows = useMemo(() => ['left', 'right'].flatMap(side => deviceHistory[side].map((d, index) => ({
         index, side,
         brand: d.brand, device: d.device,
         fitType: d.fitType ?? '', productName: d.productName ?? '',

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

@@ -7,23 +7,16 @@ import Table from '../Table';
 import Button from '../Button';
 import Checkbox from '../Checkbox';
 import Badge from '../Badge';
-import { deviceKindVariant } from '../../utils/deviceKind';
+import { deviceKindVariant, deviceKindLabel } from '../../utils/deviceKind';
 import { formatWornDate, wornDateSortKey } from '../../utils/wornDate';
-/* 기기 종류 배지 이름은 지금 언어로 — 값은 저장된 한국어(보청기·인공와우)라 그대로 보이면 영어 화면에도 한국어였다.
-   색(deviceKindVariant)은 저장값으로 가른다. 모르는 값은 그대로 */
-const 기기종류열쇠 = { '보청기': 'hearingAid', '인공와우': 'cochlearImplant' };
-function 기기종류이름(device, t) {
-    const k = 기기종류열쇠[device];
-    return k ? t(`device.type.${k}`, { defaultValue: device }) : device;
-}
 import { useTablePaging, useTableSort } from '../../hooks/useTablePaging';
-import { 칸순빈값뒤 } from '../../utils/textSort';
+import { compareCellBlankLast } from '../../utils/textSort';
 import './DeviceListPopup.css';
 /**
  * 정렬에 쓸 문자열. 날짜는 **자리수를 채워** 잰다 — '2026.5.2' 와 '2026.11.5' 를
  * 글자 그대로 견주면 5월이 11월보다 뒤로 간다.
  */
-function 정렬값(r, key) {
+function sortValue(r, key) {
     if (key !== 'wornAt')
         return String(r[key] ?? '');
     /* 월·일이 null 로 오는 옛 기록이 있다 — padStart 에서 표가 통째로 터졌다 */
@@ -31,36 +24,36 @@ function 정렬값(r, key) {
 }
 export default function DeviceSideTable({ rows, loading, onSelect, onDelete, onWear, onRelease, onAdd }) {
     const { t, i18n } = useTranslation(); /* i18n.language — 착용일이 보는 말을 따른다((118)) */
-    const 방향이름 = (side) => side === '좌' ? t('device.direction.left', '좌') : t('device.direction.right', '우');
+    const sideLabelOf = (side) => side === 'left' ? t('device.direction.left', '좌') : t('device.direction.right', '우');
     /* 머리행을 누르면 그 칸으로 정렬한다 — 같은 칸을 다시 누르면 방향이 뒤집힌다.
        쪽넘김보다 **앞에서** 정렬한다(훅에 이미 정렬된 줄을 건넨다). */
-    const { 정렬, 칸 } = useTableSort();
+    const { sort, field } = useTableSort();
     const sortedRows = useMemo(() => {
-        if (!정렬)
+        if (!sort)
             return rows;
-        const { key, asc } = 정렬;
+        const { key, asc } = sort;
         return [...rows].sort((a, b) => {
             if (key === 'worn') {
                 const cmp = Number(b.worn) - Number(a.worn); // 켜진 것이 먼저
                 return asc ? cmp : -cmp;
             }
-            return 칸순빈값뒤(정렬값(a, key), 정렬값(b, key), asc); // 빈 칸(착용일 없음 등)은 오름·내림 모두 맨 뒤 — useTableSort 와 같은 규칙
+            return compareCellBlankLast(sortValue(a, key), sortValue(b, key), asc); // 빈 칸(착용일 없음 등)은 오름·내림 모두 맨 뒤 — useTableSort 와 같은 규칙
         });
-    }, [rows, 정렬]);
+    }, [rows, sort]);
     /* 개수 보기·쪽넘김은 방문 표와 같은 것을 쓴다 — 같은 자리에서 같은 뜻으로 읽히게 */
-    const { pageRows, pageSizeProps, paginationProps } = useTablePaging(sortedRows, 정렬);
+    const { pageRows, pageSizeProps, paginationProps } = useTablePaging(sortedRows, sort);
     return (_jsxs("div", { className: "dlp-side-table", children: [_jsx(Toolbar, { count: { value: rows.length, unit: t('customers.device.unit', '개') }, pageSize: pageSizeProps, pagination: paginationProps, actions: onAdd && (_jsx(Button, { htmlType: "button", size: 40, type: "bar", variant: "main", icon: "plus", label: t('customers.device.addButton', '기기 추가'), onClick: onAdd })) }), _jsx(Table, { loading: loading, resizable: true, resizeMode: "fit", resizeStorageKey: "customer-device-history-v2", fields: [
                     /* 맨 왼쪽 — 지금 끼고 있는 것만 좌/우를 적는다. 이 열만 훑으면 "오늘 이 사람이
                        무엇을 쓰고 있나" 가 한눈에 보인다(나머지 줄은 비어 있어 눈에 안 걸린다). */
                     /* 체크박스 칸은 폭을 늘릴 것이 없다 — 손잡이를 주면 잡히는데 아무 일도
                        일어나지 않는다. Table 이 이 경우를 위해 resizable:false 를 둔다. */
-                    { ...칸(t('customers.device.wearingNow', '착용'), 'worn'), resizable: false },
-                    칸(t('device.direction.label', '방향'), 'side'),
-                    칸(t('device.deviceType', '종류'), 'device'),
-                    칸(t('device.brand', '브랜드'), 'brand'),
-                    칸(t('device.fitType', '착용형태'), 'fitType'),
-                    칸(t('device.productName', '제품명'), 'productName'),
-                    칸(t('device.wornDate', '착용일'), 'wornAt'),
+                    { ...field(t('customers.device.wearingNow', '착용'), 'worn'), resizable: false },
+                    field(t('device.direction.label', '방향'), 'side'),
+                    field(t('device.deviceType', '종류'), 'device'),
+                    field(t('device.brand', '브랜드'), 'brand'),
+                    field(t('device.fitType', '착용형태'), 'fitType'),
+                    field(t('device.productName', '제품명'), 'productName'),
+                    field(t('device.wornDate', '착용일'), 'wornAt'),
                     /* 삭제 칸은 그 길을 준 화면에서만 — 머리행과 줄의 칸 수가 어긋나면 표가 밀린다 */
                     ...(onDelete ? [{ label: '', resizable: false }] : []),
                 ], items: pageRows.map((r, i) => ({ id: r.id ?? `${r.side}-${i}`, row: r })), gridTemplateColumns: `56px 110px 110px minmax(120px, 1fr) 100px minmax(120px, 1fr) 110px${onDelete ? ' 80px' : ''}`, renderRow: ({ row }) => [
@@ -79,11 +72,11 @@ export default function DeviceSideTable({ rows, loading, onSelect, onDelete, onW
                                     onRelease?.(row); } }) })),
                     },
                     /* 방향 칸은 좌/우만 말한다 — 착용 여부는 맨 왼쪽 체크가 다룬다 */
-                    { content: _jsx("span", { children: 방향이름(row.side) }) },
+                    { content: _jsx("span", { children: sideLabelOf(row.side) }) },
                     /* 종류는 위 패널의 종류 배지와 같은 모양으로 — 같은 값을 두 곳에서 다르게
                        그리면 같은 것인 줄 모른다. 값이 비면 배지도 세우지 않는다(빈 배지는
                        '무언가 있다'는 거짓 신호다). */
-                    { content: row.device ? _jsx(Badge, { size: "small", variant: deviceKindVariant(row.device), fill: "soft", label: 기기종류이름(row.device, t) }) : _jsx("span", {}) },
+                    { content: row.device ? _jsx(Badge, { size: "small", variant: deviceKindVariant(row.device), fill: "soft", label: deviceKindLabel(row.device, t) }) : _jsx("span", {}) },
                     { content: _jsx("span", { children: row.brand }) },
                     { content: _jsx("span", { children: row.fitType || '-' }) },
                     { content: _jsx("span", { children: row.productName || '-' }) },