@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,187 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './BarChart.css';
+import { useState, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import Dropdown from './Dropdown';
+import SegmentedControl from './SegmentedControl';
+import Button from './Button';
+import Loader from './Loader';
+import TooltipInfo from './Tooltip/InfoTooltip';
+import ChartSection, { ChartTotal, ChartLegend } from './ChartSection';
+import { firstMondayOfMonth, KO_ORD } from './barChartData';
+import { useBarChartControl } from './useBarChartControl';
+// ─── 막대 렌더링 원시 컴포넌트 ───────────────────────────────────
+function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, height = 140, maxOverride, tightMax, seriesColors, seriesLabels, rateLabels }) {
+    // colorB 미지정 시 단일 계열(A) 모드
+    const single = !colorB;
+    const stacked = !!(seriesColors && seriesColors.length > 0);
+    const maxVal = useMemo(() => stacked
+        ? Math.max(0, ...data.filter(d => d.a !== -1).map(d => (d.parts ?? []).reduce((s, v) => s + Math.max(0, v), 0)))
+        : Math.max(0, ...data.filter(d => d.a !== -1).flatMap(d => single ? [d.a] : [d.a, d.b])), [data, single, stacked]);
+    const padded = useMemo(() => maxOverride ?? (tightMax ? (maxVal > 0 ? maxVal : 10) : (Math.ceil(maxVal / 10) * 10 || 10)), [maxVal, maxOverride, tightMax]);
+    const h = height;
+    // 막대 너비 — 여백과 무관하게 막대 '개수'(컬럼 × 계열)가 늘수록 점진 축소(최대 barWidth)
+    const barsPerCol = stacked ? 1 : (single ? 1 : 2);
+    const effBarWidth = useMemo(() => {
+        const cols = Math.max(1, data.length);
+        return Math.max(8, Math.min(barWidth, Math.round(120 / (cols * barsPerCol) + 6)));
+    }, [data.length, barsPerCol, barWidth]);
+    const ticks = useMemo(() => {
+        const mid = Math.round(padded / 2);
+        return mid !== padded ? [padded, mid, 0] : [padded, 0];
+    }, [padded]);
+    const [tooltip, setTooltip] = useState(null);
+    const handleBarLeave = useCallback(() => setTooltip(null), []);
+    return (_jsxs("div", { className: "manager-bar-chart-wrap", children: [_jsx("div", { className: "manager-bar-chart-inner", children: _jsx("div", { className: "manager-bar-chart-scroll", children: _jsxs("div", { className: "manager-bar-chart-area", children: [_jsxs("div", { className: "manager-bar-chart-plot", style: { height: h }, children: [ticks.slice(0, -1).map((t, i) => (_jsx("div", { className: "manager-bar-chart-gridline", style: { top: i * (h / (ticks.length - 1)) }, children: _jsx("span", { className: "manager-bar-chart-gridline__label caption-1", children: t }) }, i))), data.map((d, i) => {
+                                        const isFuture = d.a === -1;
+                                        const ha = isFuture ? 0 : (d.a / padded) * h;
+                                        const hb = isFuture ? 0 : (d.b / padded) * h;
+                                        const parts = d.parts ?? [];
+                                        return (_jsx("div", { className: "manager-bar-chart-col", style: { cursor: isFuture ? 'default' : 'pointer' }, onMouseEnter: isFuture ? undefined : (e) => {
+                                                const r = e.currentTarget.getBoundingClientRect();
+                                                const text = stacked
+                                                    ? (seriesLabels ?? []).map((lb, k) => `${lb}: ${parts[k] ?? 0}`).filter((_, k) => (parts[k] ?? 0) > 0).join(' / ') || `${(seriesLabels ?? []).join(' / ')}: 0`
+                                                    : rateLabels && !single
+                                                        ? `${labelA} ${d.a}% / ${labelB} ${d.b}%`
+                                                        : rateLabels && d.rawB !== undefined
+                                                            ? `${rateLabels.total} ${d.rawB} / ${rateLabels.done} ${d.rawA ?? 0}`
+                                                            : single ? `${labelA}: ${d.a}` : `${labelA}: ${d.a} / ${labelB}: ${d.b}`;
+                                                setTooltip({ rect: { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height }, text });
+                                            }, onMouseLeave: handleBarLeave, children: !isFuture && (stacked ? (
+                                            // 계열별 stacked — 아래부터 위로 쌓고, 맨 위 segment만 상단 라운드
+                                            _jsx("div", { className: "manager-bar-chart-stack", style: { flex: `0 1 ${effBarWidth}px`, maxWidth: effBarWidth }, children: (() => {
+                                                    const topK = parts.reduce((acc, v, k) => (v > 0 ? k : acc), -1); // 맨 위(최상단) 세그먼트
+                                                    return parts.map((v, k) => (v > 0
+                                                        ? _jsx("div", { className: "manager-bar-chart-stack-segment", style: { height: (v / padded) * h, background: (seriesColors ?? [])[k], borderRadius: k === topK ? '6px 6px 0 0' : undefined } }, k)
+                                                        : null));
+                                                })() })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "manager-bar-chart-bar", style: { flex: `0 1 ${effBarWidth}px`, maxWidth: effBarWidth, height: ha, background: colorA } }), !single && _jsx("div", { className: "manager-bar-chart-bar", style: { flex: `0 1 ${effBarWidth}px`, maxWidth: effBarWidth, height: hb, background: colorB } })] }))) }, i));
+                                    })] }), _jsx("div", { className: "manager-bar-chart-x-axis", children: data.map((d, i) => {
+                                    const isFuture = d.a === -1; // 아직 도래하지 않은 날 — 글씨 흐리게
+                                    return (_jsxs("span", { className: `manager-bar-chart-x-axis__label${isFuture ? ' manager-bar-chart-x-axis__label--future' : ''}`, children: [_jsxs("span", { className: "caption-1 manager-bar-chart-x-axis__main", children: [d.isToday && _jsx("span", { className: "manager-bar-chart-x-axis__today-dot", style: { background: colorA } }), d.label] }), d.sublabel && _jsx("span", { className: "caption-1", children: d.sublabel })] }, i));
+                                }) })] }) }) }), tooltip && (_jsx(TooltipInfo, { anchorRect: tooltip.rect, text: tooltip.text }))] }));
+}
+/** 기간 컨트롤 UI(이전/다음·월 드롭다운·월/주 토글). Toolbar 등 외부에 배치 가능. @public */
+export function BarChartControls({ control }) {
+    const { t } = useTranslation();
+    const prevLabel = t('calendar.prevMonth', '이전 달');
+    const nextLabel = t('calendar.nextMonth', '다음 달');
+    const { activeOptions, activeIdx, range, setRange, handlePrev, handleNext, periodOptions, period, setPeriod } = control;
+    return (_jsxs("div", { className: "manager-section-controls", children: [_jsx(Button, { size: 32, type: "dot", icon: "chevron-left", ariaLabel: prevLabel, showTooltipInfo: prevLabel, disabled: activeIdx === activeOptions.length - 1, onClick: handlePrev }), _jsx(Dropdown, { value: range, onChange: setRange, options: activeOptions, size: 40, className: "month-dropdown", ariaLabel: t('calendar.rangeSelect', '기간 선택') }), _jsx(Button, { size: 32, type: "dot", icon: "chevron-right", ariaLabel: nextLabel, showTooltipInfo: nextLabel, disabled: activeIdx <= 0, onClick: handleNext }), _jsx(SegmentedControl, { ariaLabel: t('calendar.periodSelect', '기간 단위'), options: periodOptions, value: period, onChange: (k) => setPeriod(k), size: 32 })] }));
+}
+/** control(기간)에 따라 data를 막대 배열로 변환 */
+function barsFromControl(data, control, t, lang) {
+    const { period, monthRange, weekRange, weekRanges, DOW } = control;
+    const isKo = lang?.startsWith('ko');
+    const now = new Date();
+    const nowY = now.getFullYear(), nowM = now.getMonth() + 1, nowD = now.getDate();
+    if (period === 'month') {
+        const md = data[monthRange] ?? { weekly: [], daily: [] };
+        const ym = monthRange.match(/^(\d+)년 (\d+)월$/);
+        const year = ym ? Number(ym[1]) : null;
+        const month = ym ? Number(ym[2]) : null;
+        const firstMon = year && month ? firstMondayOfMonth(year, month - 1) : 1;
+        return md.weekly.map((d, i) => {
+            const n = i + 1;
+            let label = d.label;
+            let isToday = false;
+            let isFutureWeek = false;
+            if (year && month) {
+                const startDay = firstMon + i * 7;
+                const end = new Date(year, month - 1, startDay + 6);
+                const eM = end.getMonth() + 1, eD = end.getDate();
+                const endTxt = eM === month ? `${eD}` : `${eM}/${eD}`;
+                label = t('manager.chart.weekRange', { start: startDay, end: endTxt });
+                // 오늘이 이 주 범위(시작일~+6)에 들어가면 표시
+                isToday = nowY === year && nowM === month && nowD >= startDay && nowD <= startDay + 6;
+                // 시작일이 오늘 이후(또는 미래 달)면 아직 도래하지 않은 주 → 흐리게/막대 미표시
+                isFutureWeek = year > nowY || (year === nowY && (month > nowM || (month === nowM && startDay > nowD)));
+            }
+            return { ...d, label, sublabel: isKo ? `${KO_ORD[n - 1] ?? n}주` : `Week ${n}`, isToday, a: isFutureWeek ? -1 : d.a, b: isFutureWeek ? 0 : d.b };
+        });
+    }
+    const opt = weekRanges.find(o => o.value === weekRange);
+    if (!opt)
+        return [];
+    const monday = new Date(opt.year, opt.month - 1, firstMondayOfMonth(opt.year, opt.month - 1) + opt.week * 7);
+    return Array.from({ length: 7 }, (_, i) => {
+        const dt = new Date(monday);
+        dt.setDate(monday.getDate() + i);
+        const dM = dt.getMonth() + 1, dD = dt.getDate(), dY = dt.getFullYear();
+        const entry = (data[`${dY}년 ${dM}월`]?.daily ?? [])[dD - 1];
+        const sameMonth = dM === opt.month && dY === opt.year;
+        const isFuture = entry?.a === -1 ||
+            dt > new Date(nowY, now.getMonth(), nowD); // 미래 날 — 평균/막대에서 제외
+        return {
+            label: sameMonth ? `${dD}` : `${dM}/${dD}`,
+            sublabel: DOW[dt.getDay()] ?? '',
+            a: isFuture ? -1 : (entry && entry.a > 0 ? entry.a : 0),
+            b: isFuture ? 0 : (entry && entry.b > 0 ? entry.b : 0),
+            isToday: dY === nowY && dM === nowM && dD === nowD,
+            ...(entry?.parts ? { parts: isFuture ? entry.parts.map(() => 0) : entry.parts } : {}),
+        };
+    });
+}
+/** 시맨틱 사이즈 → 캔버스 높이·막대 너비 프리셋 */
+const BAR_SIZE_PRESET = {
+    small: { height: 100, barWidth: 16 },
+    medium: { height: 140, barWidth: 20 },
+    large: { height: 180, barWidth: 24 },
+};
+/**
+ * 막대차트 섹션 — 제목 + 구간 네비게이션(이전/다음 + 드롭다운) + 월/주 토글 + 2계열 막대차트.
+ *  - 월(month): 월 드롭다운 + 주별 막대(1주~5주)
+ *  - 주(week):  'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(일~토) 막대
+ * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
+ */
+export default function BarChart({ size = 'medium', titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal = false, totalUnitKey, totalLabelKey, control: controlProp, hideControls = false, rate = false, tightMax = false, avgMode = false, totalFormat, series, loading = false, onDetail, }) {
+    const { t, i18n } = useTranslation();
+    const sizePreset = BAR_SIZE_PRESET[size];
+    // 외부 control 미지정 시 내부 컨트롤 사용 (단독 차트 하위 호환)
+    const internalControl = useBarChartControl(data);
+    const control = controlProp ?? internalControl;
+    const rawBars = useMemo(() => barsFromControl(data, control, t, i18n.language), [data, control, t, i18n.language]);
+    // 완료율 모드: a = 진행률(a/b×100). labelBKey 지정 시 b = 정답률(parts[0]/parts[1]×100) 2계열.
+    const bars = useMemo(() => rate
+        ? rawBars.map(d => ({
+            ...d,
+            a: d.a === -1 ? -1 : (d.b > 0 ? Math.round((d.a / d.b) * 100) : 0),
+            b: d.a === -1 ? 0 : (labelBKey && d.parts && d.parts[1] > 0 ? Math.round((d.parts[0] / d.parts[1]) * 100) : 0),
+            rawA: d.a === -1 ? -1 : d.a, rawB: d.b,
+        }))
+        : rawBars, [rawBars, rate, labelBKey]);
+    // 합계 — 완료율 모드는 주/월 모두 "경과한 모든 날의 일별 진행률 평균"(미기록일=0% 포함)으로 통일.
+    //  주: 선택 주의 일별, 월: 선택 월의 일별(주별 집계가 아니라 일 단위라 주↔월 일관성 유지). 미래(a=-1)만 제외.
+    const total = useMemo(() => {
+        if (rate || avgMode) {
+            // 주: 선택 주의 일별, 월: 선택 월의 일별. 미래(a=-1) 제외, 미기록일은 0으로 평균에 포함.
+            const pts = control.period === 'week' ? rawBars : (data[control.monthRange]?.daily ?? []);
+            const elapsed = pts.filter(d => d.a !== -1);
+            if (elapsed.length === 0)
+                return 0;
+            const sum = rate
+                ? elapsed.reduce((s, d) => s + (d.b > 0 ? (d.a / d.b) * 100 : 0), 0)
+                : elapsed.reduce((s, d) => s + (d.a > 0 ? d.a : 0), 0);
+            return Math.round(sum / elapsed.length);
+        }
+        return bars.reduce((s, d) => s + (d.a > 0 ? d.a : 0) + (labelBKey && d.b > 0 ? d.b : 0), 0);
+    }, [bars, rawBars, rate, avgMode, labelBKey, control.period, control.monthRange, data]);
+    const legendItems = series && series.length > 0
+        ? series.map(s => ({ color: s.color, label: s.label }))
+        : [
+            { color: colorA, label: t(labelAKey) },
+            ...(labelBKey ? [{ color: colorB, label: t(labelBKey) }] : []),
+        ];
+    // size='small' — 대시보드 작은 그리드용 블럭. 컨트롤(headRight)만 생략하고 total/legend는 medium과 동일하게 유지
+    const isSmall = size === 'small';
+    // size='large' — 카드가 가로 폭을 거의 100% 차지(1열)
+    const isLarge = size === 'large';
+    const sectionClassName = isSmall ? 'manager-section--compact' : isLarge ? 'manager-section--full' : undefined;
+    return (_jsx(ChartSection, { className: sectionClassName, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: isSmall ? undefined : _jsxs(_Fragment, { children: [!hideControls && _jsx(BarChartControls, { control: control }), onDetail && (_jsx("span", { className: "manager-bar-chart-detail-btn", children: _jsx(Button, { size: 32, type: "dot", icon: "list", ariaLabel: t('trainingStatus.detail', '상세보기'), onClick: onDetail }) }))] }), subRow: _jsxs(_Fragment, { children: [showTotal ? ((rate || avgMode || (!!totalLabelKey && !!totalFormat)) ? (
+                // 진행률/평균 모드 또는 totalLabelKey+totalFormat 조합: 라벨(윗줄) + 값(아랫줄). size='small'은 라벨 생략
+                _jsx(ChartTotal, { label: isSmall ? undefined : `${t(control.period === 'week' ? 'manager.chart.weeklyPrefix' : 'manager.chart.monthlyPrefix')} ${t(totalLabelKey ?? labelAKey)}`, children: totalFormat ? (
+                    // 숫자는 h0, 단위(시간/분/초 등)는 h5로 분리
+                    (totalFormat(total).match(/(\d+|[^\d]+)/g) ?? []).map((part, i) => (/\d/.test(part)
+                        ? _jsx("span", { className: "barchart-total__num h0", children: part }, i)
+                        : _jsx("span", { className: "barchart-total__unit h5", children: part }, i)))) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "barchart-total__num h0", children: total }), totalUnitKey && _jsx("span", { className: "barchart-total__unit h5", children: t(totalUnitKey) })] })) })) : (_jsxs(ChartTotal, { children: [_jsx("span", { className: "barchart-total__num h0", children: total }), _jsx("span", { className: "barchart-total__unit h5", children: t(labelAKey) }), totalUnitKey && _jsx("span", { className: "barchart-total__unit h5", children: t(totalUnitKey) })] }))) : _jsx("span", {}), _jsx(ChartLegend, { items: legendItems, className: "caption-1" })] }), children: loading ? (_jsx("div", { className: "manager-bar-chart-loading", children: _jsx(Loader, { size: 32 }) })) : (_jsx(BarChartCanvas, { data: bars, colorA: colorA, colorB: labelBKey ? colorB : undefined, labelA: t(labelAKey), labelB: labelBKey ? t(labelBKey) : undefined, barWidth: sizePreset.barWidth, height: sizePreset.height, maxOverride: rate ? 100 : undefined, tightMax: tightMax, seriesColors: series?.map(s => s.color), seriesLabels: series?.map(s => s.label), rateLabels: rate ? { total: t('trainingStatus.today.tooltipTotal', '전체'), done: t('trainingStatus.today.tooltipDone', '완료') } : undefined })) }));
+}

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

@@ -0,0 +1,85 @@
+/* 게시판형 목록 표 */
+.board {
+  width: 100%;
+}
+
+.board__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--spacing-m);
+  margin-bottom: var(--spacing-m);
+}
+
+.board__title {
+  font-size: var(--text-body-2-size);
+  line-height: var(--text-body-2-line);
+  font-weight: 500;
+  margin: 0;
+  color: var(--color-text-primary);
+}
+
+.board__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.board__table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  border-top: 1px solid var(--color-text-primary);
+}
+
+.board__caption {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.board__th {
+  font-size: var(--text-body-3-size);
+  line-height: var(--text-body-3-line);
+  padding: 14px 0;
+  border-bottom: 1px solid var(--color-border);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.board__row {
+  border-bottom: 1px solid var(--color-border);
+  transition: background var(--duration-fast, 0.15s) var(--ease-out, ease);
+}
+
+.board__row:hover {
+  background: var(--color-surface-raised);
+}
+
+.board__td {
+  font-size: var(--text-body-3-size);
+  line-height: var(--text-body-3-line);
+  padding: var(--spacing-m) 0;
+  color: var(--color-text-primary);
+}
+
+.board__cell--left {
+  text-align: left;
+}
+.board__cell--center {
+  text-align: center;
+}
+.board__cell--right {
+  text-align: right;
+}
+
+.board__state {
+  font-size: var(--text-body-3-size);
+  padding: 56px 0;
+  text-align: center;
+  color: var(--color-text-secondary);
+}

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

@@ -0,0 +1,39 @@
+import './Board.css';
+import type { ReactNode } from 'react';
+/** @public */
+export interface BoardColumn<T> {
+    /** React key 및 열 식별자 */
+    key: string;
+    header: ReactNode;
+    /** 셀 렌더러 */
+    render: (row: T, index: number) => ReactNode;
+    align?: 'left' | 'center' | 'right';
+    /** 열 너비 — px 숫자 또는 CSS 길이 */
+    width?: number | string;
+    /** 헤더 정렬을 셀과 다르게 두고 싶을 때 */
+    headerAlign?: 'left' | 'center' | 'right';
+}
+/** @public */
+export interface BoardProps<T> {
+    columns: BoardColumn<T>[];
+    rows: T[];
+    /** 행 key 추출기 */
+    rowKey: (row: T, index: number) => string;
+    /** 좌측 상단 제목 */
+    title?: ReactNode;
+    /** 우측 상단 영역 — 검색 입력 등. 상태는 소비자가 소유한다 */
+    toolbar?: ReactNode;
+    /** rows가 비었을 때 표시할 내용 */
+    empty?: ReactNode;
+    /** 로딩 중 표시할 내용 — 지정 시 rows 대신 렌더 */
+    loading?: ReactNode;
+    /** 표 접근성 설명 */
+    caption?: string;
+    className?: string;
+}
+/**
+ * 게시판형 목록 표. 상태를 갖지 않는 표현 컴포넌트이므로 검색·페이지네이션은
+ * `toolbar`로 주입하고 필터링된 `rows`를 넘긴다. 서버 렌더링 환경에서도 그대로 쓸 수 있다.
+ * @public
+ */
+export default function Board<T>({ columns, rows, rowKey, title, toolbar, empty, loading, caption, className, }: BoardProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './Board.css';
+/**
+ * 게시판형 목록 표. 상태를 갖지 않는 표현 컴포넌트이므로 검색·페이지네이션은
+ * `toolbar`로 주입하고 필터링된 `rows`를 넘긴다. 서버 렌더링 환경에서도 그대로 쓸 수 있다.
+ * @public
+ */
+export default function Board({ columns, rows, rowKey, title, toolbar, empty = '등록된 항목이 없습니다.', loading, caption, className = '', }) {
+    const showEmpty = !loading && rows.length === 0;
+    return (_jsxs("div", { className: cx('board', className), children: [title || toolbar ? (_jsxs("div", { className: "board__head", children: [title ? _jsx("h2", { className: "board__title", children: title }) : _jsx("span", {}), toolbar ? _jsx("div", { className: "board__toolbar", children: toolbar }) : null] })) : null, _jsxs("table", { className: "board__table", children: [caption ? _jsx("caption", { className: "board__caption", children: caption }) : null, _jsx("thead", { children: _jsx("tr", { children: columns.map((col) => (_jsx("th", { scope: "col", className: cx('board__th', `board__cell--${col.headerAlign ?? col.align ?? 'left'}`), style: col.width ? { width: col.width } : undefined, children: col.header }, col.key))) }) }), _jsx("tbody", { children: loading ? (_jsx("tr", { children: _jsx("td", { className: "board__state", colSpan: columns.length, children: loading }) })) : showEmpty ? (_jsx("tr", { children: _jsx("td", { className: "board__state", colSpan: columns.length, children: empty }) })) : (rows.map((row, i) => (_jsx("tr", { className: "board__row", children: columns.map((col) => (_jsx("td", { className: cx('board__td', `board__cell--${col.align ?? 'left'}`), children: col.render(row, i) }, col.key))) }, rowKey(row, i))))) })] })] }));
+}

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

@@ -0,0 +1,105 @@
+.bottom-nav {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: calc(72px + env(safe-area-inset-bottom));
+  background: var(--color-deepWhite);
+  border-top: 1px solid var(--color-whiteLine);
+  display: none;
+  align-items: flex-start;
+  padding: 8px calc(10px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(10px + env(safe-area-inset-left));
+  z-index: var(--z-nav);
+}
+
+.bottom-nav__left {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.bottom-nav__divider {
+  width: 1px;
+  height: 24px;
+  background: var(--color-whiteLine);
+  margin: 0;
+  margin-top: calc((52px - 24px) / 2);
+  border-radius: 1px;
+  flex-shrink: 0;
+  align-self: flex-start;
+}
+
+.bottom-nav__items {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.bottom-nav__right {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+@media (max-width: 767px) {
+  .bottom-nav {
+    display: flex;
+  }
+}
+
+@media (min-width: 768px) {
+  .bottom-nav { display: none; }
+}
+
+/* ── 버튼 스타일 (Button 컴포넌트에 className="bottom-nav-item" 적용) ─────────────── */
+
+.bottom-nav-item {
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 52px !important;
+  height: 52px !important;
+  padding: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  color: var(--color-lightGray);
+  cursor: pointer;
+  border-radius: 10px !important;
+  transition: background 160ms ease, color 160ms ease !important;
+}
+
+.bottom-nav-item:hover:not(.is-selected) {
+  background: var(--color-darkWhite) !important;
+}
+
+.bottom-nav-item.is-selected {
+  color: #ffffff !important;
+  background-color: var(--color-sub) !important;
+  animation: bottom-nav-active-bg 360ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  box-shadow: 0 6px 12px rgba(12,24,36,0.06);
+}
+
+.bottom-nav-item.is-selected * {
+  color: #ffffff !important;
+}
+
+.bottom-nav-item:focus-visible {
+  /* 배경 틴트용 10% 투명색을 링에 쓰면 안 보인다 — SideNav 와 같은 실수였다 */
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.bottom-nav-item:disabled,
+.bottom-nav-item[disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+@keyframes bottom-nav-active-bg {
+  0%   { background-color: var(--color-sub); }
+  100% { background-color: var(--color-main); }
+}

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

@@ -0,0 +1,32 @@
+import './BottomNav.css';
+import './Tooltip/Tooltip.css';
+/** @public */
+export type NavItem = {
+    key?: string;
+    label?: string;
+    icon?: string;
+    state?: string;
+};
+/**
+ * 항상 "더보기(…)" 메뉴에만 노출되는 유틸 항목(알림·설정·계정 등).
+ * key 기반 onChange가 아니라 자체 onClick 콜백으로 동작한다.
+ * @public
+ */
+export type BottomNavMoreItem = {
+    key?: string;
+    label?: string;
+    icon?: string;
+    selected?: boolean;
+    badgeCount?: number;
+    onClick?: () => void;
+};
+/** @public */
+export default function BottomNav({ items, activeKey, onChange, appMode, onAppModeChange, moreItems, }: {
+    items?: NavItem[];
+    activeKey?: string;
+    onChange?: (key: string) => void;
+    appMode?: 'malgwi' | 'manager';
+    onAppModeChange?: (mode: 'malgwi' | 'manager') => void;
+    /** nav 항목과 별개로 항상 더보기 메뉴에 노출되는 유틸(알림·설정·계정 등) */
+    moreItems?: BottomNavMoreItem[];
+}): import("react").JSX.Element;

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

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import './BottomNav.css';
+import Button from './Button';
+import MenuTooltip from './Tooltip/MenuTooltip';
+// .tooltip-content(메뉴 표면)를 직접 쓰므로 정의 파일을 명시적으로 가져온다.
+// Tooltip.tsx만 이 CSS를 import하는데 BottomNav는 그 컴포넌트를 거치지 않아,
+// 프로덕션에서 청크가 갈리면 스타일 없이 렌더될 수 있다.
+import './Tooltip/Tooltip.css';
+import { useAnchoredMenu } from './useAnchoredMenu';
+import { useTranslation } from 'react-i18next';
+const BTN_SIZE = 52;
+const BTN_GAP = 10;
+/** @public */
+export default function BottomNav({ items = [], activeKey, onChange, appMode, onAppModeChange, moreItems = [], }) {
+    const { t } = useTranslation();
+    const nextMode = appMode === 'manager' ? 'malgwi' : 'manager';
+    const modeIcon = appMode === 'manager' ? 'arrow-left' : 'arrow-right';
+    const modeLabel = appMode === 'manager' ? t('nav.modeLabelMalgwi', '말귀') : t('nav.modeLabelManager', '말귀 매니저');
+    // 컨테이너 너비 측정 → 들어갈 수 있는 버튼 수 계산
+    const itemsRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const itemsLen = items.length;
+    useEffect(() => {
+        const el = itemsRef.current;
+        if (!el)
+            return;
+        setContainerWidth(el.clientWidth);
+        // ResizeObserver 가 없는 환경(구형 브라우저·SSR·테스트 러너)에서는 생성자 호출이
+        // 그대로 던져 렌더가 통째로 깨진다. 위에서 초기값은 이미 쟀으므로 추적만 포기한다
+        // (Popup·CrosswordGame·Tooltip 과 같은 처리).
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(entries => setContainerWidth(entries[0].contentRect.width));
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    // n개 버튼: n*52 + (n-1)*10 <= W → n <= (W + 10) / 62
+    const n = containerWidth > 0
+        ? Math.floor((containerWidth + BTN_GAP) / (BTN_SIZE + BTN_GAP))
+        : itemsLen;
+    const overflow = containerWidth > 0 && n < itemsLen;
+    const maxVisible = overflow ? n : itemsLen;
+    const visibleItems = items.slice(0, maxVisible);
+    const hiddenItems = items.slice(maxVisible);
+    // 넘친 nav 항목이 있거나 유틸(moreItems)이 있으면 더보기(…) 버튼을 노출
+    const showMore = overflow || moreItems.length > 0;
+    const computeMenuStyle = useCallback((rect) => ({
+        position: 'fixed',
+        bottom: window.innerHeight - rect.top + 8,
+        right: window.innerWidth - rect.right,
+        zIndex: 10000,
+    }), []);
+    const { open: moreOpen, toggle: handleToggleMore, close: handleCloseMore, style: menuStyle, triggerRef: moreRef, menuRef } = useAnchoredMenu({
+        computeStyle: computeMenuStyle,
+        onScroll: 'ignore',
+        onResize: 'ignore',
+    });
+    const handleModeChange = useCallback(() => onAppModeChange?.(nextMode), [onAppModeChange, nextMode]);
+    // 넘친 nav 항목 또는 유틸 항목이 현재 활성 상태면 … 버튼에 그 아이콘/선택표시를 반영
+    const activeMore = useMemo(() => hiddenItems.find(it => it.key === activeKey) ?? moreItems.find(it => it.selected || (it.key && it.key === activeKey)), [hiddenItems, activeKey, moreItems]);
+    // 넘친 nav 항목 + 유틸 항목을 한 컬럼으로 합쳐 더보기 메뉴에 노출(각자 아이콘으로 구분)
+    const moreColumns = useMemo(() => [{
+            items: [
+                ...hiddenItems.map(it => ({
+                    label: it.label,
+                    icon: it.icon,
+                    selected: it.key === activeKey,
+                    closeOnSelect: true,
+                    onClick: () => {
+                        if (it.key && onChange)
+                            onChange(it.key);
+                        handleCloseMore();
+                    },
+                })),
+                ...moreItems.map(it => ({
+                    label: it.label,
+                    icon: it.icon,
+                    badgeCount: it.badgeCount,
+                    selected: it.selected ?? (!!it.key && it.key === activeKey),
+                    closeOnSelect: true,
+                    onClick: () => {
+                        it.onClick?.();
+                        handleCloseMore();
+                    },
+                })),
+            ]
+        }], [hiddenItems, moreItems, activeKey, onChange, handleCloseMore]);
+    return (_jsxs("nav", { className: "bottom-nav", "aria-label": t('nav.bottomNav', '하단 네비게이션'), children: [onAppModeChange && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bottom-nav__left", children: _jsx(Button, { size: 52, type: "dot", icon: modeIcon, ariaLabel: modeLabel, className: "bottom-nav-item", onClick: handleModeChange }) }), _jsx("div", { className: "bottom-nav__divider", "aria-hidden": "true" })] })), _jsx("div", { className: "bottom-nav__items", ref: itemsRef, children: visibleItems.map((it) => (_jsx(Button, { size: 52, type: "dot", icon: it.icon, ariaLabel: it.label, selected: it.key === activeKey, disabled: it.state === 'disabled', className: "bottom-nav-item", onClick: () => it.key && onChange?.(it.key) }, it.key))) }), showMore && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bottom-nav__divider", "aria-hidden": "true" }), _jsx("div", { className: "bottom-nav__right", children: _jsxs("div", { ref: moreRef, children: [_jsx(Button, { size: 52, type: "dot", icon: activeMore?.icon ?? 'ellipsis', ariaLabel: activeMore?.label ?? t('nav.more', '더보기'), selected: !!activeMore, className: "bottom-nav-item", onClick: handleToggleMore }), moreOpen && createPortal(_jsx("div", { className: "tooltip-content", style: menuStyle, ref: menuRef, children: _jsx(MenuTooltip, { columns: moreColumns, onClose: handleCloseMore }) }), document.body)] }) })] }))] }));
+}

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

@@ -0,0 +1,62 @@
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+/*
+ * padding 이 0 이라 본문 줄높이(약 22px)가 그대로 클릭 영역이 됐다.
+ * WCAG 2.2 AA 2.5.8 은 24x24 CSS px 을 요구하므로 최소 크기를 확보한다.
+ * 세로뿐 아니라 가로도 필요하다 — '홈' 처럼 한 글자짜리 항목은 폭이 12px 밖에
+ * 안 나온다. 글자 위치를 흔들지 않으려고 padding 대신 min-* + 가운데 정렬을 쓴다.
+ */
+.breadcrumb__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  color: var(--color-gray);
+  cursor: pointer;
+}
+
+.breadcrumb__link:hover {
+  color: var(--color-main);
+  text-decoration: underline;
+}
+
+.breadcrumb__link:focus-visible {
+  outline: 2px solid var(--color-main);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+.breadcrumb__current {
+  color: var(--color-darkGray);
+}
+
+.breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-disabled);
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,13 @@
+import './Breadcrumb.css';
+/** @public */
+export interface BreadcrumbItem {
+    label: string;
+    onClick?: () => void;
+}
+/** @public */
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    className?: string;
+}
+/** @public */
+export default function Breadcrumb({ items, className }: BreadcrumbProps): import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Breadcrumb.css';
+import Icon from './Icon';
+/** @public */
+export default function Breadcrumb({ items, className = '' }) {
+    return (_jsx("nav", { className: `breadcrumb ${className}`.trim(), "aria-label": "breadcrumb", children: _jsx("ol", { className: "breadcrumb__list", children: items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                return (_jsxs("li", { className: "breadcrumb__item", children: [isLast ? (_jsx("span", { className: "breadcrumb__current body-3", "aria-current": "page", children: item.label })) : (_jsx("button", { type: "button", className: "breadcrumb__link body-3", onClick: item.onClick, children: item.label })), !isLast && (_jsx(Icon, { icon: "chevron-right", size: 14, className: "breadcrumb__separator" }))] }, index));
+            }) }) }));
+}