@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Popup/WordDataUpdatePopup.css

@@ -0,0 +1,119 @@
+/* Popup size override */
+.popup--word-data-update .popup-panel {
+  max-width: 440px;
+}
+
+.popup--word-data-update .popup-title {
+  padding: 24px 24px 8px;
+}
+
+.popup--word-data-update .popup-footer {
+  padding: 16px 24px 24px;
+}
+
+/* Phase cards wrapper */
+.wdup-cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s);
+  padding: 0 24px;
+}
+
+/* Phase card */
+.wdup-phase-card {
+  background: var(--color-bg-secondary, #f7f9fb);
+  border-radius: var(--radius-m);
+  padding: 0 16px;
+  height: 80px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.wdup-phase-card__icon {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-card);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-white);
+  box-shadow: var(--shadow-card);
+}
+
+.wdup-phase-card__icon-inner { display: flex; }
+.wdup-phase-card__icon-inner--pending { opacity: 0.35; }
+
+.wdup-phase-card__icon--done {
+  background: var(--color-sub, #22c55e);
+}
+
+.wdup-phase-card__icon--error {
+  background: var(--color-danger, #ef4444);
+}
+
+.wdup-phase-card__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.wdup-phase-card__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-xs);
+}
+
+.wdup-phase-card__label {
+  color: var(--color-black);
+  font-weight: 600;
+}
+
+.wdup-phase-card__label--pending {
+  color: var(--color-lightGray);
+  font-weight: 400;
+}
+
+
+/* Progress bar */
+.wdup-bar {
+  height: 6px;
+  background: var(--color-whiteLine);
+  border-radius: 99px;
+  overflow: hidden;
+  margin-bottom: 6px;
+}
+
+.wdup-bar__fill {
+  height: 100%;
+  border-radius: 99px;
+  background: var(--color-main, #29b6c8);
+  transition: width 0.3s ease;
+}
+
+.wdup-bar__fill--done {
+  background: var(--color-sub, #22c55e);
+}
+
+.wdup-bar__fill--error {
+  background: var(--color-danger, #ef4444);
+}
+
+/* !important 불필요 — WordDataUpdatePopup.tsx의 인라인 width는 pct/isDone/isError일 때만
+   설정되고 이 indeterminate 클래스가 붙는 상태(state==='active' && pct===undefined)에서는
+   인라인 width가 아예 설정되지 않아(undefined) 경합 자체가 없음(코드 확인됨). */
+.wdup-bar__fill--indeterminate {
+  width: 40%;
+  animation: wdup-indeterminate 1.4s ease-in-out infinite;
+}
+
+@keyframes wdup-indeterminate {
+  0%   { transform: translateX(-150%); }
+  100% { transform: translateX(400%); }
+}
+
+.wdup-phase-card__sub {
+  color: var(--color-lightGray);
+}

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

@@ -0,0 +1,12 @@
+import type { WordDataProgress } from '../../context/WordDataContext';
+import './WordDataUpdatePopup.css';
+interface WordDataUpdatePopupProps {
+    title: string;
+    progress: WordDataProgress;
+    onDone: () => void;
+    onRetry?: () => void;
+    inline?: boolean;
+}
+/** @public */
+export default function WordDataUpdatePopup({ title, progress, onDone, onRetry, inline }: WordDataUpdatePopupProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,73 @@
+/// <reference path="../../types/lucide-deep-imports.d.ts" />
+// ↑ deep import 에 타입을 붙이는 앰비언트 선언. 이 파일에 붙여 두는 이유:
+// 소비 앱은 tsconfig 의 paths 로 core 소스를 직접 보는데, 그 include 에는
+// core 의 types/ 가 안 걸려 선언이 로드되지 않는다(관측: speechear TS7016 159개).
+// 참조를 쓰는 파일에 두면 import 를 타고 따라온다.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import Database from 'lucide-react/dist/esm/icons/database.mjs';
+import ImageIcon from 'lucide-react/dist/esm/icons/image.mjs';
+import GitMerge from 'lucide-react/dist/esm/icons/git-merge.mjs';
+import CheckCircle from 'lucide-react/dist/esm/icons/check-circle.mjs';
+import XCircle from 'lucide-react/dist/esm/icons/x-circle.mjs';
+import Popup from './Popup';
+import Button from '../Button';
+import Badge from '../Badge';
+import './WordDataUpdatePopup.css';
+import { formatCount } from '../../utils/format';
+function phaseOrder(phase) {
+    return { idle: 0, 'word-download': 1, 'image-list': 2, 'image-match': 2, 'pair-build': 3, done: 4 }[phase] ?? 0;
+}
+function PhaseCard({ icon, label, state, pct, subText }) {
+    const { t } = useTranslation();
+    const isDone = state === 'done';
+    const isPending = state === 'pending';
+    const isError = state === 'error';
+    const barPct = isDone ? 100 : (pct ?? 0);
+    return (_jsxs("div", { className: "wdup-phase-card", children: [_jsx("div", { className: `wdup-phase-card__icon${isDone ? ' wdup-phase-card__icon--done' : isError ? ' wdup-phase-card__icon--error' : ''}`, children: isDone
+                    ? _jsx(CheckCircle, { size: 22, color: "white", strokeWidth: 2.5 })
+                    : isError
+                        ? _jsx(XCircle, { size: 22, color: "white", strokeWidth: 2.5 })
+                        : _jsx("span", { className: `wdup-phase-card__icon-inner${isPending ? ' wdup-phase-card__icon-inner--pending' : ''}`, children: icon }) }), _jsxs("div", { className: "wdup-phase-card__body", children: [_jsxs("div", { className: "wdup-phase-card__top", children: [_jsx("span", { className: `wdup-phase-card__label body-2${isPending ? ' wdup-phase-card__label--pending' : ''}`, children: label }), isDone
+                                ? _jsx(Badge, { variant: "sub", fill: "soft", size: "small", label: t('common.done', '완료') })
+                                : isError
+                                    ? _jsx(Badge, { variant: "danger", fill: "soft", size: "small", label: t('common.failed', '실패') })
+                                    : (subText || pct !== undefined) && (_jsxs("span", { className: "wdup-phase-card__sub body-3", children: [subText, subText && pct !== undefined ? ` · ${pct}%` : pct !== undefined ? `${pct}%` : ''] }))] }), !isPending && (_jsx("div", { className: "wdup-bar", children: _jsx("div", { className: `wdup-bar__fill${isDone ? ' wdup-bar__fill--done' : isError ? ' wdup-bar__fill--error' : ''}${state === 'active' && pct === undefined ? ' wdup-bar__fill--indeterminate' : ''}`, style: { width: pct !== undefined || isDone || isError ? `${isError ? 100 : barPct}%` : undefined } }) }))] })] }));
+}
+/** @public */
+export default function WordDataUpdatePopup({ title, progress, onDone, onRetry, inline }) {
+    const { t } = useTranslation();
+    const { phase, error, wordCount, imagePage, imageDone, imageTotal, pairPercent } = progress;
+    const order = phaseOrder(phase);
+    const isDone = phase === 'done';
+    const isError = !!error;
+    function stepState(stepOrder) {
+        if (isError && order === stepOrder)
+            return 'error';
+        if (order > stepOrder)
+            return 'done';
+        if (order === stepOrder)
+            return 'active';
+        return 'pending';
+    }
+    const wordState = stepState(1);
+    const imgState = stepState(2);
+    const pairState = stepState(3);
+    const imgPct = phase === 'image-match' && imageTotal
+        ? Math.round(((imageDone ?? 0) / imageTotal) * 100)
+        : undefined;
+    const imgSub = useMemo(() => {
+        if (imgState === 'done')
+            return undefined;
+        if (phase === 'image-list')
+            return t('wordData.checkingPage', { page: imagePage ?? 1 });
+        if (phase === 'image-match' && imageTotal)
+            return t('wordData.imageCount', { done: formatCount(imageDone), total: formatCount(imageTotal) });
+        return undefined;
+    }, [imgState, phase, imagePage, imageTotal, imageDone, t]);
+    return (_jsx(Popup, { inline: inline, className: "popup--word-data-update", title: title, footer: isError
+            ? _jsx(Button, { size: 56, variant: "main", onClick: onRetry, children: t('common.retry', '다시 시도') })
+            : _jsx(Button, { size: 56, variant: "main", disabled: !isDone, onClick: onDone, children: t('common.done', '완료') }), children: _jsxs("div", { className: "wdup-cards", children: [_jsx(PhaseCard, { icon: _jsx(Database, { size: 22, color: "var(--color-main, #29b6c8)", strokeWidth: 1.8 }), label: t('wordData.phaseWordDownload', '단어 데이터 다운로드'), state: wordState, subText: wordState === 'active' ? t('wordData.downloadingCount', { n: formatCount(wordCount) }) : undefined }), _jsx(PhaseCard, { icon: _jsx(ImageIcon, { size: 22, color: "var(--color-main, #29b6c8)", strokeWidth: 1.8 }), label: t('wordData.phaseImageCheck', '이미지 확인'), state: imgState, pct: imgPct, subText: imgSub }), _jsx(PhaseCard, { icon: _jsx(GitMerge, { size: 22, color: "var(--color-main, #29b6c8)", strokeWidth: 1.8 }), label: t('wordData.phasePairAnalysis', '단어쌍 분석'), state: pairState, pct: pairState === 'active' ? (pairPercent ?? 0) : undefined, subText: undefined })] }) }));
+}

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

@@ -0,0 +1,19 @@
+/**
+ * customerDetailUtils.ts
+ * CustomerDetailPopup의 순수 표시/포맷 유틸 (상태 비의존).
+ */
+export declare function getDayOptions(year: string, month: string, daySuffix: string): {
+    value: string;
+    label: string;
+}[];
+export declare function calcAge(birthDate: string | undefined, ageStr: (y: number, m: number) => string): string;
+export declare function formatId(id?: number | string): string;
+export declare function visitItemKey(v: {
+    year: string;
+    month: string;
+    day: string;
+    hour: string;
+    minute: string;
+}): string;
+/** 초 → "M분 S초"(또는 "S초") */
+export declare function formatDuration(sec: number | null | undefined): string;

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

@@ -0,0 +1,45 @@
+/**
+ * customerDetailUtils.ts
+ * CustomerDetailPopup의 순수 표시/포맷 유틸 (상태 비의존).
+ */
+export function getDayOptions(year, month, daySuffix) {
+    const days = new Date(Number(year), Number(month), 0).getDate();
+    return Array.from({ length: days }, (_, i) => {
+        const d = String(i + 1).padStart(2, '0');
+        return { value: d, label: `${i + 1}${daySuffix}` };
+    });
+}
+export function calcAge(birthDate, ageStr) {
+    if (!birthDate)
+        return '-';
+    const birth = new Date(birthDate);
+    if (isNaN(birth.getTime()))
+        return '-';
+    const now = new Date();
+    let years = now.getFullYear() - birth.getFullYear();
+    let months = now.getMonth() - birth.getMonth();
+    // 일(day)까지 비교해야 함 — 월만 비교하면 생일이 아직 안 지난 달엔 나이가 1살 많게 나온다
+    if (now.getDate() < birth.getDate())
+        months--;
+    if (months < 0) {
+        years--;
+        months += 12;
+    }
+    return ageStr(years, months);
+}
+export function formatId(id) {
+    if (!id)
+        return '-';
+    return `IHABORG_${String(id).slice(0, 8)}`;
+}
+export function visitItemKey(v) {
+    return `${v.year}-${v.month}-${v.day}T${v.hour}:${v.minute}`;
+}
+/** 초 → "M분 S초"(또는 "S초") */
+export function formatDuration(sec) {
+    if (!sec || sec <= 0)
+        return '-';
+    const m = Math.floor(sec / 60);
+    const s = sec % 60;
+    return m > 0 ? `${m}분${s > 0 ? ` ${s}초` : ''}` : `${s}초`;
+}

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

@@ -0,0 +1,114 @@
+.progress-bar {
+  /* 툴바·헤더 안에 놓이는 일이 많아, 옆 요소에 밀려 찌그러지지 않게 한다 */
+  flex-shrink: 0;
+}
+
+.progress-bar__track {
+  width: 100%;
+  height: var(--progress-bar-height, 8px);
+  border-radius: 999px;
+  background: var(--progress-bar-track, var(--color-darkWhite));
+  /* 채움이 라운드 밖으로 삐져나오지 않게 — 값이 0에 가까울 때 특히 눈에 띈다 */
+  overflow: hidden;
+}
+
+.progress-bar__fill {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--progress-bar-fill, var(--color-main));
+  transition: width var(--progress-bar-duration, 0.3s) ease;
+}
+
+.progress-bar__label {
+  color: var(--progress-bar-label-color, var(--color-gray));
+  /* 숫자 폭을 고정한다 — 1→2로 바뀔 때 라벨이 흔들리면 옆 요소도 함께 움직인다 */
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── 굵기 ──────────────────────────────────────────────────────────────
+   4·8·16 은 글자가 들어갈 자리가 없어 라벨이 아래로, 24·32 는 안으로 들어간다. */
+.progress-bar--4  { --progress-bar-height: 4px; }
+.progress-bar--8  { --progress-bar-height: 8px; }
+.progress-bar--16 { --progress-bar-height: 16px; }
+.progress-bar--24 { --progress-bar-height: 24px; }
+.progress-bar--32 { --progress-bar-height: 32px; }
+
+/* ── 라벨이 막대와 같은 줄 (left · right) ─────────────────────────────
+   막대 옆에 두면 세로 공간을 아끼는 대신 막대가 라벨 폭만큼 짧아진다.
+   헤더처럼 높이가 빠듯한 자리에 쓴다. */
+.progress-bar--label-left,
+.progress-bar--label-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* 트랙이 남는 폭을 가져간다 — min-width:0 이 없으면 라벨이 긴 값일 때 트랙이 밀린다 */
+.progress-bar--label-left > .progress-bar__track,
+.progress-bar--label-right > .progress-bar__track {
+  flex: 1;
+  min-width: 0;
+}
+
+.progress-bar--label-left .progress-bar__label { order: -1; }
+
+/* ── 라벨이 막대 위 / 아래 ─────────────────────────────────────────────
+   지정하지 않으면 24 이상은 안(inside), 그보다 얇으면 아래(bottom)로 간다. */
+.progress-bar--label-top,
+.progress-bar--label-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* DOM 은 트랙 → 라벨 순서다. 위로 올릴 때 순서를 바꾸지 않고 order 로 옮기는 이유는,
+   읽는 쪽에는 aria-label 과 값이 전해지므로 시각 순서만 달라지면 되기 때문이다. */
+.progress-bar--label-top .progress-bar__label { order: -1; }
+
+.progress-bar--label-top.progress-bar--align-left,
+.progress-bar--label-bottom.progress-bar--align-left { align-items: flex-start; }
+.progress-bar--label-top.progress-bar--align-center,
+.progress-bar--label-bottom.progress-bar--align-center { align-items: center; }
+.progress-bar--label-top.progress-bar--align-right,
+.progress-bar--label-bottom.progress-bar--align-right { align-items: flex-end; }
+
+/* 정렬은 라벨에만 걸어야 한다 — align-items 로는 트랙까지 줄어든다 */
+.progress-bar--label-top > .progress-bar__track,
+.progress-bar--label-bottom > .progress-bar__track { align-self: stretch; }
+
+/* ── 라벨이 막대 안 (24·32) ────────────────────────────────────────────
+   막대 위에 얹으므로 자리를 차지하지 않는다 — 트랙 높이가 곧 전체 높이다. */
+.progress-bar--label-inside {
+  position: relative;
+}
+
+.progress-bar--label-inside .progress-bar__label {
+  position: absolute;
+  top: 50%;
+  pointer-events: none;
+}
+
+/* 라벨이 채움 위로 올라서면 글자색을 뒤집는다 — 어디에 놓이는지는 컴포넌트가
+   labelAlign 과 값으로 판정해 클래스를 붙인다. 채움이 밝은 색이면 호출부가
+   --progress-bar-label-color-on-fill 로 되돌린다. */
+.progress-bar--label-on-fill .progress-bar__label {
+  color: var(--progress-bar-label-color-on-fill, var(--color-deepWhite));
+}
+
+.progress-bar--label-inside.progress-bar--align-left .progress-bar__label {
+  left: 10px;
+  transform: translateY(-50%);
+}
+.progress-bar--label-inside.progress-bar--align-center .progress-bar__label {
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.progress-bar--label-inside.progress-bar--align-right .progress-bar__label {
+  right: 10px;
+  transform: translateY(-50%);
+}
+
+/* 움직임을 줄여 달라고 한 사용자에게는 폭이 튀지 않고 즉시 바뀐다 */
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar__fill { transition: none; }
+}

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

@@ -0,0 +1,65 @@
+import './ProgressBar.css';
+/** @public */
+export interface ProgressBarProps {
+    /** 현재 값 */
+    value: number;
+    /** 최대값 — 기본 100(값을 퍼센트로 바로 넘길 때) */
+    max?: number;
+    /**
+     * 막대 굵기(px).
+     * 4·8·16 은 라벨이 막대 아래에, 24·32 는 막대 안에 놓인다 — 얇은 막대에는
+     * 글자가 들어갈 자리가 없다.
+     */
+    size?: 4 | 8 | 16 | 24 | 32;
+    /** 채움 색 (CSS 값). 토큰도 그대로 넘긴다 — `'var(--cw-accent)'`, `'#0d9668'`. */
+    color?: string;
+    /** 트랙(빈 부분) 색 (CSS 값). 어두운 배경 위에서는 보통 밝은 반투명을 쓴다. */
+    trackColor?: string;
+    /**
+     * 값 표시. Slider 와 같은 이름·같은 값을 쓴다.
+     * - `'count'`   → `3 / 7`
+     * - `'percent'` → `43%`
+     * - `'raw'`     → 값 그대로(`formatValue` 로 표기를 정한다)
+     * - 생략        → 막대만
+     */
+    label?: 'count' | 'percent' | 'raw';
+    /** 라벨 표기를 직접 만든다 — 지정하면 label 종류와 무관하게 이 결과를 쓴다. */
+    formatValue?: (value: number) => string;
+    /**
+     * 라벨이 붙는 면 — 위 / 오른쪽 / 아래 / 왼쪽 / 막대 안.
+     * `left` · `right` 는 막대와 같은 줄에 놓이고, 그만큼 막대가 짧아진다.
+     * `'center'` 는 `'inside'` 의 다른 이름이다(가로축 labelAlign 에도 center 가 있어
+     * 헷갈리기 쉬우니 새로 쓸 때는 `'inside'` 를 권한다).
+     *
+     * 생략하면 굵기가 정한다: 24 이상은 안, 그보다 얇으면 아래.
+     * 얇은 막대에 안을 지정하면 글자가 막대를 넘어간다(4px 안에는 들어가지 않는다).
+     */
+    labelPos?: 'top' | 'right' | 'bottom' | 'left' | 'center' | 'inside';
+    /**
+     * 붙은 면 안에서의 가로 자리 — 위·아래에 놓일 때는 정렬, 안에 놓일 때는 위치가 된다.
+     * 같은 줄(left·right)에서는 라벨이 이미 한쪽 끝이라 쓰이지 않는다.
+     */
+    labelAlign?: 'left' | 'center' | 'right';
+    /**
+     * 무엇의 진행인지 — 스크린리더에는 이 이름과 값만 전해진다.
+     * 라벨은 숫자뿐이라 이름 노릇을 하지 못한다.
+     */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * 가로 진행 막대. 트랙 위에 채움을 얹고 값에 따라 폭이 변한다.
+ *
+ * 색은 prop 이나 CSS 변수로 바꾼다 — 여러 막대가 같은 색을 쓸 때는 부모에 변수를
+ * 한 번 지정하는 편이 낫다.
+ *
+ *   --progress-bar-track   트랙 배경 (기본 --color-darkWhite)
+ *   --progress-bar-fill    채움 색   (기본 --color-main)
+ *   --progress-bar-height  굵기      (size prop 이 설정한다)
+ *
+ * 값을 **고르는** 자리에는 Slider 를 쓴다. 이쪽은 조작할 수 없는 표시 전용이라
+ * role 도 progressbar 다(슬라이더로 읽히면 조작을 시도하게 된다).
+ *
+ * @public
+ */
+export default function ProgressBar({ value, max, size, color, trackColor, label, formatValue, labelPos, labelAlign, ariaLabel, className, }: ProgressBarProps): import("react").JSX.Element;

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './ProgressBar.css';
+/** 라벨이 막대 안에 들어가는 굵기 — 이보다 얇으면 글자가 들어갈 자리가 없어 아래로 내려간다 */
+const INSIDE_LABEL_MIN_SIZE = 24;
+/**
+ * 가로 진행 막대. 트랙 위에 채움을 얹고 값에 따라 폭이 변한다.
+ *
+ * 색은 prop 이나 CSS 변수로 바꾼다 — 여러 막대가 같은 색을 쓸 때는 부모에 변수를
+ * 한 번 지정하는 편이 낫다.
+ *
+ *   --progress-bar-track   트랙 배경 (기본 --color-darkWhite)
+ *   --progress-bar-fill    채움 색   (기본 --color-main)
+ *   --progress-bar-height  굵기      (size prop 이 설정한다)
+ *
+ * 값을 **고르는** 자리에는 Slider 를 쓴다. 이쪽은 조작할 수 없는 표시 전용이라
+ * role 도 progressbar 다(슬라이더로 읽히면 조작을 시도하게 된다).
+ *
+ * @public
+ */
+export default function ProgressBar({ value, max = 100, size = 8, color, trackColor, label, formatValue, labelPos, labelAlign = 'right', ariaLabel, className, }) {
+    // max 가 0이면 나눗셈이 NaN 이 되고 width:NaN% 로 새어 나가 막대가 사라진다.
+    // 항목이 아직 없을 때(로딩 직후 등) 실제로 0이 들어온다.
+    const safeMax = Number.isFinite(max) && max > 0 ? max : 1;
+    const clamped = Math.max(0, Math.min(Number.isFinite(value) ? value : 0, safeMax));
+    const pct = (clamped / safeMax) * 100;
+    // 자리를 지정하지 않으면 굵기가 정한다 — 얇은 막대 안에는 글자가 들어가지 않는다.
+    // center 는 inside 의 다른 이름이라 여기서 하나로 모은다(클래스가 갈리지 않게).
+    const rawPos = labelPos ?? (size >= INSIDE_LABEL_MIN_SIZE ? 'inside' : 'bottom');
+    const pos = rawPos === 'center' ? 'inside' : rawPos;
+    /* 막대 안 라벨은 채움 위에 놓이기도, 빈 트랙 위에 놓이기도 한다 — 한 색으로 두면
+       한쪽에서 반드시 안 읽힌다(회색 글자가 진한 채움 위에 얹히는 식). 라벨이 어디쯤
+       있는지는 labelAlign 이 정하므로, 채움이 그 지점을 지났는지로 색을 가른다.
+       경계값은 라벨 폭을 감안한 어림이다 — 글자는 짧고(43%·3 / 7) 트랙은 넓어서
+       정확한 폭을 재지 않아도 어긋나는 구간이 좁다. */
+    const labelOnFill = pos === 'inside' && (labelAlign === 'left' ? pct >= 15 :
+        labelAlign === 'center' ? pct >= 50 :
+            pct >= 85);
+    // 색은 CSS 변수로 내려보낸다 — 인라인이라 CSS 쪽 지정보다 우선하고,
+    // 변수 하나만 바꾸므로 fill/track 규칙을 통째로 덮어쓸 필요가 없다.
+    const rootStyle = {};
+    if (color)
+        rootStyle['--progress-bar-fill'] = color;
+    if (trackColor)
+        rootStyle['--progress-bar-track'] = trackColor;
+    return (_jsxs("div", { className: cx('progress-bar', `progress-bar--${size}`, `progress-bar--label-${pos}`, label && `progress-bar--align-${labelAlign}`, label && labelOnFill && 'progress-bar--label-on-fill', className), style: rootStyle, children: [_jsx("div", { className: "progress-bar__track", role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": safeMax, "aria-label": ariaLabel, children: _jsx("div", { className: "progress-bar__fill", style: { width: `${pct}%` } }) }), label && (_jsx("span", { className: "progress-bar__label caption-1b", children: formatValue
+                    ? formatValue(clamped)
+                    : label === 'percent' ? `${Math.round(pct)}%`
+                        : label === 'raw' ? String(clamped)
+                            : `${clamped} / ${safeMax}` }))] }));
+}

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

@@ -0,0 +1,41 @@
+.progress-indicator {
+    display: flex;
+    gap: var(--spacing-xs);
+    align-items: center;
+}
+
+/* 색은 브랜드 값 그대로다. 2026-08-28 에 대비 때문에 짙은 음영(darkMain·darkSub)으로
+   옮겼다가 **화면에서 보고 되돌렸다** — 재어 보면 맞는 색이었지만 훈련 팝업에서 보니
+   전혀 다른 물건처럼 보였다. 숫자 대비 실측값은 아래와 같고, 다시 손대려면 색을 바꾸는
+   대신 글자를 키우거나(18.66px 이상 굵게면 3:1) 배경만 조정하는 쪽을 먼저 볼 것.
+
+     비활성  #64748b on #dde3ec  3.69
+     활성    #ffffff on #4dcdc0  1.94
+     완료    #ffffff on #499cdf  2.96 */
+.progress-indicator-dot {
+    width: 52px;
+    height: 28px;
+    border-radius: var(--radius-card);
+    background: var(--pi-inactive-bg, var(--color-whiteLine));
+    color: var(--pi-inactive-color, var(--color-gray));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.progress-indicator-dot.done { background: var(--color-main); color: #ffffff; }
+.progress-indicator-dot.active { background: var(--color-sub); color: #ffffff; }
+
+@media (max-width: 1024px) 
+{
+    .progress-indicator { gap: 6px; }
+    .progress-indicator-dot { width: 44px; height: 28px;}
+}
+
+@media (max-width: 767px) {
+  .progress-indicator--mobile .progress-indicator-dot {
+    width: auto;
+    padding: 0 12px;
+    height: 28px;
+  }
+}

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

@@ -0,0 +1,18 @@
+import './ProgressIndicator.css';
+/** @public */
+export interface ProgressIndicatorProps {
+    max?: number;
+    index?: number;
+    /** 남은 단계의 배경 (CSS 값) — 기본 --color-whiteLine */
+    inactiveBg?: string;
+    /** 남은 단계의 글자색 (CSS 값) — 기본 --color-gray */
+    inactiveColor?: string;
+    /**
+     * 어둡거나 브랜드색인 면 위에 올릴 때 — 남은 단계를 뒤가 비치는 옅은 흰색 배경 +
+     * 흰 글자로 바꾼다. 밝은 면 위에서는 글자가 배경에 묻히므로 쓰지 않는다.
+     * inactiveBg·inactiveColor 를 직접 주면 그쪽이 이긴다.
+     */
+    transparent?: boolean;
+}
+/** @public */
+export default function ProgressIndicator({ max, index, inactiveBg, inactiveColor, transparent }: ProgressIndicatorProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,45 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import useMediaQuery from '../hooks/useMediaQuery';
+import './ProgressIndicator.css';
+/**
+ * transparent 일 때 남은 단계의 배경.
+ *
+ * 완전히 투명하게 두면 남은 칸만 알약 모양을 잃어, 지난·현재 칸과 나란히 놓였을 때
+ * 다섯 칸이 한 줄로 읽히지 않는다(칸이 세 개뿐인 것처럼 보인다). 뒤 배경을 살짝
+ * 비치게 덮어 모양은 남기고 밝기로만 갈리게 한다.
+ *
+ * 어떤 색 위에 올릴지 모르는 것이 이 모드의 전제라, 흰색을 옅게 얹는다 —
+ * 어두운 면에서도 브랜드색 면에서도 같은 정도로 밝아진다.
+ */
+const TRANSPARENT_INACTIVE_BG = 'rgba(255, 255, 255, 0.16)';
+/** @public */
+export default function ProgressIndicator({ max, index, inactiveBg, inactiveColor, transparent }) {
+    const { t } = useTranslation();
+    const isMobile = useMediaQuery('(max-width: 767px)');
+    if (!Number.isInteger(max) || max <= 0)
+        return null;
+    const idx = Number.isInteger(index) ? Math.max(0, Math.min(index, max - 1)) : 0;
+    /* 목록에 이름이 없어 낭독기가 "목록, 4개, 1, 2, 3, 4" 로만 읽었다 — 무엇의 목록인지,
+       지금 어디인지 알 수 없다. 훈련 팝업에는 숫자 묶음이 여럿이라 더 헷갈린다.
+       칸마다 붙은 aria-current 는 목록을 훑어야 닿으므로, **머리에서 바로 자리를 말한다.** */
+    const groupLabel = t('progress.steps', {
+        current: idx + 1, total: max, defaultValue: '진행 단계 {{current}} / {{total}}',
+    });
+    const rootStyle = {};
+    if (inactiveBg)
+        rootStyle['--pi-inactive-bg'] = inactiveBg;
+    if (inactiveColor)
+        rootStyle['--pi-inactive-color'] = inactiveColor;
+    if (transparent) {
+        if (!inactiveBg)
+            rootStyle['--pi-inactive-bg'] = TRANSPARENT_INACTIVE_BG;
+        if (!inactiveColor)
+            rootStyle['--pi-inactive-color'] = 'var(--color-white)';
+    }
+    // 모바일: 현재 단계만 표시 (n / max 형태)
+    if (isMobile) {
+        return (_jsx("div", { className: "progress-indicator progress-indicator--mobile", style: rootStyle, role: "list", "aria-label": groupLabel, children: _jsxs("span", { role: "listitem", className: "progress-indicator-dot active body-3", children: [idx + 1, " / ", max] }) }));
+    }
+    return (_jsx("div", { className: "progress-indicator", style: rootStyle, role: "list", "aria-label": groupLabel, children: Array.from({ length: max }).map((_, i) => (_jsx("span", { role: "listitem", "aria-current": i === idx ? 'step' : undefined, className: `progress-indicator-dot ${i < idx ? ' done' : i === idx ? ' active' : ''} body-3`, children: i + 1 }, i))) }));
+}

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

@@ -0,0 +1,54 @@
+/* ── PromoBanner ──────────────────────────────────────────────────────── */
+/* 배경은 PromoBannerBg* 컴포넌트(position: absolute; inset: 0)가 채우므로, 이 루트는
+   position: relative + overflow: hidden으로 기준점/클리핑만 제공하고 콘텐츠는
+   그 위에 z-index로 띄운다. */
+.promo-banner {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-m);
+  border-radius: var(--radius-s);
+  box-sizing: border-box;
+  text-align: left;
+}
+
+/* Size */
+/* height 고정(120px)이던 시절엔 제목이 두 줄로 늘어나는 배너에서 설명 문구가 박스
+   아래로 삐져나갔다(루트가 overflow:hidden이라 잘리기까지 했다). min-height로 두어
+   기본 높이는 유지하되 내용이 많으면 배너가 함께 늘어나게 한다. */
+.promo-banner--medium { min-height: 120px; padding: 20px 24px; }
+.promo-banner--small  { padding: 14px 16px; }
+
+/* 배경 위 텍스트 톤 — PromoBannerBg* 컴포넌트가 부모(.promo-banner)에 주입하는 CSS var를
+   따른다(PromoBannerBgTheme). 배경 종류를 늘려도 이 파일을 건드릴 필요가 없다. */
+.promo-banner__title { color: var(--promo-banner-bg-title, inherit); }
+.promo-banner__description { color: var(--promo-banner-bg-description, inherit); }
+
+/* Text — 세로 가운데 정렬. 슬라이더가 모든 배너를 가장 높은 배너에 맞춰 늘리므로,
+   문구가 짧은 배너는 위로 붙어 아래에 빈 공간이 크게 남아 보였다(예전 고정 120px
+   시절엔 어느 배너든 높이가 같아 flex-start로도 문제가 없었다). */
+.promo-banner__text {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+/* h2(line-height 34px)와 body-3(line-height 22px)는 실제 글자 높이보다 줄간격
+   여백이 더 커서, gap 없이 붙여도 상당한 여백이 남는다. 시각적으로 타이틀·설명이
+   한 덩어리로 붙어 보이도록 그 여백만큼 끌어올린다. */
+.promo-banner__description {
+  margin-top: 1px;
+  margin-left: 2px;
+}
+
+/* 버튼은 줄어들지 않게, 배경 위에 뜨도록 */
+.promo-banner > .button {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+}