@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,68 @@
+import './RingChart.css';
+import type { ReactNode } from 'react';
+import type { ChartLegendItem } from './ChartSection';
+/** 시맨틱 사이즈 → 지름(px)·링 두께(px) 프리셋 */
+export type RingChartSize = 'small' | 'medium' | 'large';
+/** @public */
+export interface RingChartSegment {
+    /** 0~1 비율 */
+    ratio: number;
+    color: string;
+}
+/** @public */
+export interface RingChartProps {
+    /** 완료 수. segments 지정 시 무시됨 */
+    done?: number;
+    /** 전체 수. segments 지정 시 무시됨 */
+    total?: number;
+    /**
+     * 다구간 배열(각 {ratio, color}) — 지정 시 done/total 단일 호 대신 여러 색상 구간을 도넛으로 그린다
+     * (예: 사용/만료/미사용 비율 breakdown). 지정 시 중앙 텍스트(hideCenter)는 항상 숨김 —
+     * 단일 퍼센트로 요약할 수 없는 값이기 때문.
+     */
+    segments?: RingChartSegment[];
+    /** 채워진 호 색상 (기본: var(--color-main)). segments 지정 시 무시됨 */
+    color?: string;
+    /**
+     * 크기 — 'small'|'medium'|'large' 프리셋 또는 지름 px 숫자 (기본: 'medium' = 120px).
+     * titleKey 지정 시(섹션 모드) 지름뿐 아니라 정보량도 함께 조절한다 — BarChart와 동일한 기준.
+     *  - small:  대시보드 작은 그리드용 블럭. 컨트롤(headRight)만 생략하고 total/legend는 medium과 동일하게 유지
+     *  - medium: 표준 형태(제목 + headRight + total + legend). 2~3열 그리드에 inline 배치하는 기본값
+     *  - large:  카드가 가로 폭을 거의 100% 차지(1열). medium과 정보량은 동일, 링만 더 크게
+     */
+    size?: RingChartSize | number;
+    /** 링 두께 px. 미지정 시 프리셋 기본값(숫자 size는 12) */
+    strokeWidth?: number;
+    /** 중앙 숫자 아래 라벨 (기본: "%") */
+    label?: string;
+    /** 중앙 텍스트(숫자+라벨) 전체 숨김 (기본: false) */
+    hideCenter?: boolean;
+    /** 중앙 숫자는 유지하고 아래 라벨("%")만 숨김 (기본: false) */
+    hideLabel?: boolean;
+    /**
+     * 섹션 제목 i18n 키 — 지정 시 BarChart와 동일하게 ChartSection(제목 헤더 + total/legend)으로
+     * 감싼 카드로 렌더. 미지정 시 헤더 없는 순수 링만 렌더(기존 동작과 동일).
+     */
+    titleKey?: string;
+    /** 헤더 우측 영역 — 기간 네비게이션, 상세보기 버튼 등 (titleKey 지정 시에만 사용) */
+    headRight?: ReactNode;
+    /** 제목 옆 아이콘(옅게 표시, StatChart와 동일한 톤) — 지정 시 headRight 자리에 렌더(titleKey 지정 시에만 사용) */
+    icon?: string;
+    /** 완료율(done/total×100, %)을 헤더 아래 total로 표시 (titleKey 지정 시에만 사용) */
+    showTotal?: boolean;
+    /** total 값 위에 표시하는 라벨 i18n 키 (size='small'에서는 생략됨) */
+    totalLabelKey?: string;
+    /** 범례(색상 점 + 라벨) — titleKey 지정 시에만 사용 */
+    legend?: ChartLegendItem[];
+    /** 로딩 중 — 링 대신 스피너 표시(헤더/레이아웃은 유지, titleKey 지정 시에만 사용) */
+    loading?: boolean;
+    /** 섹션 루트에 추가할 클래스 (titleKey 지정 시에만 사용) */
+    className?: string;
+}
+/**
+ * 도넛 링 차트 — 전체 대비 완료 비율을 원형 호로 표현.
+ * titleKey를 지정하면 BarChart와 동일한 ChartSection 카드(제목 헤더 + total/legend)로 렌더되고,
+ * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
+ * @public
+ */
+export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, ...ringProps }: RingChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './RingChart.css';
+import { useTranslation } from 'react-i18next';
+import Loader from './Loader';
+import Icon from './Icon';
+import ChartSection, { ChartTotal, ChartLegend } from './ChartSection';
+const RING_SIZE_PRESET = {
+    small: { diameter: 96, strokeWidth: 16 },
+    medium: { diameter: 120, strokeWidth: 18 },
+    large: { diameter: 160, strokeWidth: 22 },
+};
+/** 원시 링 렌더링 — 도넛 링 하나만 그린다(헤더/legend 없음) */
+function RingChartCanvas({ done, total, segments, color = 'var(--color-main)', size = 'medium', strokeWidth, label = '%', hideCenter = false, hideLabel = false }) {
+    const dim = typeof size === 'number' ? size : RING_SIZE_PRESET[size].diameter;
+    const stroke = strokeWidth ?? (typeof size === 'number' ? 12 : RING_SIZE_PRESET[size].strokeWidth);
+    const center = dim / 2;
+    const radius = (dim - stroke) / 2;
+    const circumference = 2 * Math.PI * radius;
+    // 다구간 모드 — done/total 단일 호 대신 segments 배열을 누적 회전시켜 그린다
+    if (segments && segments.length > 0) {
+        const arcs = segments.reduce((out, s) => {
+            const acc = out.length > 0 ? out[out.length - 1].acc : 0;
+            // 누적 비율이 1을 넘지 않도록 clamp — 호출자가 넘긴 ratio 합이 100%를 넘으면 이후
+            // 구간이 원을 한 바퀴 넘어 겹쳐 그려지는 대신 조용히 잘리도록(오류 대신 방어적 저하)
+            const ratio = Math.max(0, Math.min(s.ratio, 1 - acc));
+            out.push({ color: s.color, rotate: -90 + acc * 360, dash: circumference * ratio, acc: acc + ratio });
+            return out;
+        }, []);
+        return (_jsx("div", { className: "ring-chart", style: { width: dim, height: dim }, children: _jsxs("svg", { width: dim, height: dim, viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-whiteLine)", strokeWidth: stroke }), arcs.map((s, i) => s.dash > 0 && (_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: s.color, strokeWidth: stroke, strokeDasharray: `${s.dash} ${circumference}`, strokeLinecap: "round", transform: `rotate(${s.rotate} ${center} ${center})` }, i)))] }) }));
+    }
+    const pct = (total ?? 0) > 0 ? Math.min((done ?? 0) / total, 1) : 0;
+    const filled = circumference * pct;
+    const gap = circumference - filled;
+    return (_jsxs("div", { className: "ring-chart", style: { width: dim, height: dim }, children: [_jsxs("svg", { width: dim, height: dim, viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-whiteLine)", strokeWidth: stroke }), pct > 0 && (_jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: stroke, strokeDasharray: `${filled} ${gap}`, strokeLinecap: pct < 0.02 || pct > 0.98 ? 'butt' : 'round', transform: `rotate(-90 ${center} ${center})` }))] }), !hideCenter && (_jsxs("div", { className: `ring-chart__center${hideLabel ? '' : ` ${dim <= 96 ? 'ring-chart__center--small' : size === 'medium' ? 'ring-chart__center--medium' : 'ring-chart__center--large'}`}`, children: [_jsx("span", { className: `ring-chart__pct ${dim <= 96 ? 'h2' : 'h1'}`, children: Math.round(pct * 100) }), !hideLabel && (_jsx("span", { className: `ring-chart__label ${dim <= 96 ? 'caption-2' : 'caption-1'}${dim <= 96 || size === 'medium' ? ' ring-chart__label--tight' : ''}`, children: label }))] }))] }));
+}
+/**
+ * 도넛 링 차트 — 전체 대비 완료 비율을 원형 호로 표현.
+ * titleKey를 지정하면 BarChart와 동일한 ChartSection 카드(제목 헤더 + total/legend)로 렌더되고,
+ * 미지정 시에는 헤더 없는 순수 링만 렌더된다(크기/색상 데모 등).
+ * @public
+ */
+export default function RingChart({ titleKey, headRight, icon, showTotal, totalLabelKey, legend, loading, className, ...ringProps }) {
+    const { t } = useTranslation();
+    if (!titleKey)
+        return _jsx(RingChartCanvas, { ...ringProps });
+    const pct = (ringProps.total ?? 0) > 0 ? Math.round(Math.min((ringProps.done ?? 0) / ringProps.total, 1) * 100) : 0;
+    // size='small' — 대시보드 작은 그리드용 블럭. 컨트롤(headRight)만 생략하고 total/legend는 medium과 동일하게 유지
+    const isSmall = ringProps.size === 'small';
+    // size='large' — 카드가 가로 폭을 거의 100% 차지(1열)
+    const isLarge = ringProps.size === 'large';
+    const sectionClassName = [className, isSmall ? 'manager-section--compact' : isLarge ? 'manager-section--full' : '']
+        .filter(Boolean).join(' ') || undefined;
+    // StatChart(.manager-stat-card__icon)와 동일한 톤 — headRight 자리에 렌더(둘 중 하나만 사용)
+    const iconNode = icon && (_jsx("span", { className: "chart-section-icon", children: _jsx(Icon, { icon: icon, className: "chart-section-icon-inner" }) }));
+    return (_jsx(ChartSection, { className: sectionClassName, title: t(titleKey), titleClassName: isSmall ? 'h5 chart-section-title--small' : undefined, headRight: iconNode || (isSmall ? undefined : headRight), subRow: (showTotal || legend) && _jsxs(_Fragment, { children: [showTotal ? (_jsxs(ChartTotal, { label: !isSmall && totalLabelKey ? t(totalLabelKey) : undefined, children: [_jsx("span", { className: "barchart-total__num h0", children: pct }), _jsx("span", { className: "barchart-total__unit h5", children: "%" })] })) : _jsx("span", {}), legend && _jsx(ChartLegend, { items: legend })] }), children: loading ? (_jsx("div", { className: "manager-bar-chart-loading", children: _jsx(Loader, { size: 32 }) })) : (_jsx("div", { className: "ring-chart-section-body ring-chart-section-body--offset", children: _jsx(RingChartCanvas, { ...ringProps, hideCenter: isSmall || ringProps.hideCenter }) })) }));
+}

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

@@ -0,0 +1,62 @@
+/* SearchSummary — 검색 조건 요약 라인 */
+
+.search-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 30px 20px;
+  border-radius: var(--radius-card);
+  border: 1px solid var(--color-whiteLine);
+  background: var(--color-deepWhite);
+  box-shadow: var(--shadow-card);
+  color: var(--color-gray);
+  text-align: left;
+}
+
+.search-summary__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  color: currentColor;
+}
+
+.search-summary__text {
+  min-width: 0;
+  /* 줄 높이는 body-2 타이포 클래스가 관장한다 — 강조어(strong.body-2)와 본문의 line-height를
+     일치시켜 강조어 유무로 박스 높이가 달라지지 않게 한다. */
+  /* 문장이 길면 자연스럽게 줄바꿈 — 뱃지처럼 한 줄로 우겨넣지 않는다 */
+  overflow-wrap: anywhere;
+  word-break: keep-all;
+}
+
+/* 강조 구절 — 본문은 중립색, 핵심 자모만 상태 강조색 (굵기는 body-2b 클래스가 담당)
+   (문장 전체가 한 색이면 길수록 가독성이 떨어지므로) */
+.search-summary__em {
+  color: var(--color-main);
+}
+
+/* ── 준비 완료: 현재 조건 요약 ── 본문·아이콘은 진회색, 강조 구절만 main ── */
+.search-summary--ready {
+  background: var(--color-white);
+  color: var(--color-deepGray);
+}
+.search-summary--ready .search-summary__em {
+  color: var(--color-main);
+}
+
+/* ── 안내: 조건이 부족해 다음 행동을 유도(중립) ── */
+.search-summary--guide {
+  background: var(--color-deepWhite);
+  color: var(--color-gray);
+}
+
+/* ── 오류: 조건이 잘못됨 ── */
+.search-summary--error {
+  background: var(--color-white);
+  color: var(--color-error);
+}
+/* 오류 상태에서 강조 구절은 오류색으로(파란 강조가 빨간 박스에 섞이지 않도록) */
+.search-summary--error .search-summary__em {
+  color: var(--color-error);
+}

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

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+import './SearchSummary.css';
+/** @public */
+export type SearchSummaryStatus = 'ready' | 'guide' | 'error';
+/** @public */
+export interface SearchSummaryProps {
+    /**
+     * 요약 상태 — 색/기본 아이콘을 결정한다. 기본값 'guide'
+     * - `ready` — 검색 준비 완료. 현재 조건으로 무엇을 찾을지 요약(강조)
+     * - `guide` — 아직 조건이 부족해 다음 행동을 안내(중립)
+     * - `error` — 조건이 잘못되어 검색 불가(오류)
+     */
+    status?: SearchSummaryStatus;
+    /** 요약 문장. label 대신 children으로 넘겨도 된다 */
+    label?: ReactNode;
+    children?: ReactNode;
+    /**
+     * label(문자열)에서 강조할 구절 목록(문장 등장 순서). 지정하면 본문은 읽기 좋은
+     * 중립색으로, 이 구절만 강조색으로 표시한다. label이 문자열일 때만 적용된다.
+     */
+    emphasis?: string[];
+    /** 기본 상태 아이콘 대신 쓸 아이콘(Lucide 이름 또는 ReactNode). false면 아이콘 숨김 */
+    icon?: ReactNode | string | false;
+    className?: string;
+}
+/**
+ * 검색 조건 요약 — 리스트/검색 폼에서 "지금 이 조건으로 무엇을 찾을지"를 한 문장으로
+ * 요약해 검색 버튼 직전에 보여준다. status로 준비/안내/오류 3가지 톤을 표현하고,
+ * emphasis로 문장 안 핵심 구절만 강조해 가독성을 지킨다.
+ * @public
+ */
+export default function SearchSummary({ status, label, children, emphasis, icon, className, }: SearchSummaryProps): import("react").JSX.Element;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import Icon from './Icon';
+import './SearchSummary.css';
+const DEFAULT_ICON = {
+    ready: 'search',
+    guide: 'info',
+    error: 'circle-alert',
+};
+/**
+ * label 문자열에서 emphasis 구절만 <strong>으로 감싸 강조한다. 구절은 문장 등장
+ * 순서대로 주어지므로, 커서를 앞으로 옮기며 첫 등장 위치부터 잘라 중복 구절도 순서대로 매칭한다.
+ */
+function highlight(text, emphasis) {
+    const phrases = emphasis.filter(Boolean);
+    if (phrases.length === 0)
+        return text;
+    const nodes = [];
+    let cursor = 0;
+    let key = 0;
+    for (const phrase of phrases) {
+        const idx = text.indexOf(phrase, cursor);
+        if (idx < 0)
+            continue; // 방어적: 매칭 실패 구절은 건너뜀(문장 텍스트는 그대로 유지)
+        if (idx > cursor)
+            nodes.push(text.slice(cursor, idx));
+        nodes.push(_jsx("strong", { className: "search-summary__em body-2", children: phrase }, key++));
+        cursor = idx + phrase.length;
+    }
+    if (cursor < text.length)
+        nodes.push(text.slice(cursor));
+    return nodes;
+}
+/**
+ * 검색 조건 요약 — 리스트/검색 폼에서 "지금 이 조건으로 무엇을 찾을지"를 한 문장으로
+ * 요약해 검색 버튼 직전에 보여준다. status로 준비/안내/오류 3가지 톤을 표현하고,
+ * emphasis로 문장 안 핵심 구절만 강조해 가독성을 지킨다.
+ * @public
+ */
+export default function SearchSummary({ status = 'guide', label, children, emphasis, icon, className = '', }) {
+    const resolvedIcon = icon === false ? null : (icon ?? DEFAULT_ICON[status]);
+    const cls = cx('search-summary', `search-summary--${status}`, className);
+    const content = label ?? children;
+    const rendered = (typeof content === 'string' && emphasis && emphasis.length > 0)
+        ? highlight(content, emphasis)
+        : content;
+    return (_jsxs("div", { className: cls, role: "status", "aria-live": "polite", children: [resolvedIcon != null && (_jsx(Icon, { icon: resolvedIcon, size: 18, className: "search-summary__icon" })), _jsx("span", { className: "search-summary__text body-2", children: rendered })] }));
+}

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

@@ -0,0 +1,73 @@
+/* ── 공통 ──────────────────────────────────────────────── */
+.section {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  width: 100%;
+}
+
+.section--page      { gap: var(--spacing-m); padding-bottom: var(--spacing-page); }
+.section--pagePopup { gap: var(--spacing-s); padding-bottom: var(--spacing-page); }
+.section--popup     { gap: var(--spacing-xs);  padding-bottom: var(--spacing-page); }
+
+.section:last-child { padding-bottom: 0; }
+
+.section {
+}
+
+
+/* ── 헤더 ──────────────────────────────────────────────── */
+.section__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.section__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+  flex: 1;
+}
+
+.section__icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  margin-top: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--t-item-bg, var(--color-deepWhite));
+  /* 카테고리별 색(--t-item-fg)이 주입되면 그것을 쓰고, 없으면 브랜드 색으로 */
+  color: var(--t-item-fg, var(--color-main));
+}
+
+.section__title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.section__title {
+  color: var(--color-black);
+  margin: 0;
+}
+
+.section__disc {
+  color: var(--color-gray);
+  margin: 0;
+}
+
+.section__action {
+  flex-shrink: 0;
+}
+
+@media (max-width: 767px) {
+  .section__header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+  }
+}

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

@@ -0,0 +1,16 @@
+import type { ReactNode, CSSProperties } from 'react';
+import './Section.css';
+export type SectionType = 'page' | 'pagePopup' | 'popup';
+/** @public */
+export interface SectionProps {
+    type?: SectionType;
+    title?: ReactNode;
+    icon?: string;
+    action?: ReactNode;
+    disc?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/** @public */
+export default function Section({ type, title, icon, action, disc, children, className, style }: SectionProps): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import Icon from './Icon';
+import './Section.css';
+const TITLE_CLASS = {
+    page: 'h3',
+    pagePopup: 'h4',
+    popup: 'h5',
+};
+/** @public */
+export default function Section({ type = 'page', title, icon, action, disc, children, className, style }) {
+    const titleClass = TITLE_CLASS[type];
+    const hasHeader = title || disc;
+    return (_jsxs("div", { className: cx('section', `section--${type}`, className), style: style, children: [hasHeader && (_jsxs("div", { className: "section__header", children: [_jsxs("div", { className: "section__title-row", children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "section__icon" })), _jsxs("div", { className: "section__title-group", children: [title && _jsx("div", { className: `section__title ${titleClass}`, children: title }), disc && _jsx("div", { className: "section__disc body-3", children: disc })] })] }), action && _jsx("div", { className: "section__action", children: action })] })), children] }));
+}

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

@@ -0,0 +1,87 @@
+.section-header {
+  text-align: center;
+}
+
+/* ── 머리말 ── */
+.section-header__eyebrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin: 0;
+  font-size: var(--text-caption-1-size);
+  line-height: var(--text-caption-1-line);
+  font-weight: 600;
+  letter-spacing: 0.18em;
+}
+
+.section-header__index {
+  font-variant-numeric: tabular-nums;
+  opacity: 0.6;
+}
+
+.section-header__rule {
+  width: 24px;
+  height: 1px;
+  background: currentColor;
+  opacity: 0.3;
+}
+
+/*
+ * 제목은 본문 스케일(h1 = 32px)이 아니라 지면용 디스플레이 크기다.
+ * 좁은 화면 32px 에서 시작해 넓어질수록 46px 까지 커진다.
+ */
+.section-header__title {
+  margin: 0;
+  font-family: var(--font-display, inherit);
+  font-size: clamp(2rem, 1.35rem + 2.1vw, 2.9rem);
+  line-height: 1.15;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+/* 머리말이 있으면 제목을 그만큼 내린다 */
+.section-header__eyebrow + .section-header__title {
+  margin-top: var(--spacing-xl);
+}
+
+/*
+ * 설명은 읽기 편하도록 행간을 1.9 로 넉넉히 준다. 그만큼 글자 위아래로
+ * 빈 공간(반행간 7.2px)이 생기므로 margin 을 그대로 두면 실제 시각 간격이
+ * 38px 을 넘는다. 두 줄일 때는 묻히지만 한 줄이면 제목과 떨어져 보인다.
+ * 반행간만큼 덜어 내 어느 쪽이든 27px 안팎으로 보이게 한다.
+ */
+.section-header__description {
+  margin-top: var(--spacing-m);
+  font-size: var(--text-body-2-size);
+  line-height: 1.9;
+}
+
+/* ── 톤 ── */
+.section-header--dark .section-header__eyebrow {
+  color: var(--color-main);
+}
+
+.section-header--dark .section-header__title {
+  color: var(--color-text-primary);
+}
+
+.section-header--dark .section-header__description {
+  color: var(--color-darkGray);
+}
+
+/*
+ * 어두운 배경에서는 브랜드 남색 머리말이 대비 1.6:1 로 사실상 읽히지 않는다.
+ * 밝은 톤에서는 흰색 계열로 뒤집는다.
+ */
+.section-header--light .section-header__eyebrow {
+  color: rgb(255 255 255 / 0.85);
+}
+
+.section-header--light .section-header__title {
+  color: var(--color-pureWhite);
+}
+
+.section-header--light .section-header__description {
+  color: rgb(255 255 255 / 0.85);
+}

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

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import './SectionHeader.css';
+/** @public */
+export type SectionHeaderTone = 'dark' | 'light';
+/** @public */
+export interface SectionHeaderProps {
+    /** 제목 위 머리말. 예: "OVERVIEW" */
+    eyebrow?: string;
+    /** 머리말 앞 번호. 주면 "01 —— OVERVIEW" 형태가 된다 */
+    eyebrowIndex?: string;
+    title?: string;
+    description?: ReactNode;
+    /** 제목 태그. 페이지에 하나뿐인 대표 제목이면 1, 섹션 제목이면 2(기본) */
+    level?: 1 | 2;
+    /**
+     * 섹션 배경 기준.
+     * dark = 밝은 배경 위 어두운 글자(기본), light = 어두운 배경 위 밝은 글자.
+     */
+    tone?: SectionHeaderTone;
+    className?: string;
+}
+/**
+ * 섹션·페이지의 머리 — 머리말 · 제목 · 설명.
+ *
+ * 세 조각이 모두 선택이라 "머리말만", "제목+설명", "머리말+제목" 을 같은
+ * 컴포넌트로 쓴다. 제목은 본문 스케일(h1~h5)이 아니라 마케팅 지면용 디스플레이
+ * 크기라 뷰포트에 따라 커진다.
+ *
+ * @public
+ */
+export default function SectionHeader({ eyebrow, eyebrowIndex, title, description, level, tone, className, }: SectionHeaderProps): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './SectionHeader.css';
+/**
+ * 섹션·페이지의 머리 — 머리말 · 제목 · 설명.
+ *
+ * 세 조각이 모두 선택이라 "머리말만", "제목+설명", "머리말+제목" 을 같은
+ * 컴포넌트로 쓴다. 제목은 본문 스케일(h1~h5)이 아니라 마케팅 지면용 디스플레이
+ * 크기라 뷰포트에 따라 커진다.
+ *
+ * @public
+ */
+export default function SectionHeader({ eyebrow, eyebrowIndex, title, description, level = 2, tone = 'dark', className = '', }) {
+    const Heading = level === 1 ? 'h1' : 'h2';
+    return (_jsxs("div", { className: cx('section-header', `section-header--${tone}`, className), children: [eyebrow ? (_jsxs("p", { className: "section-header__eyebrow", children: [eyebrowIndex ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "section-header__index", children: eyebrowIndex }), _jsx("span", { "aria-hidden": true, className: "section-header__rule" })] })) : null, eyebrow] })) : null, title ? _jsx(Heading, { className: "section-header__title", children: title }) : null, description ? _jsx("div", { className: "section-header__description", children: description }) : null] }));
+}

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

@@ -0,0 +1,67 @@
+.segmented-control {
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  gap: var(--spacing-xs);
+  background: var(--color-darkWhite);
+  padding: 4px;
+  /* 줄바꿈 시 버튼이 container의 rounded corner 밖으로 나오지 않도록 */
+  overflow: hidden;
+}
+.segmented-control--pill    { border-radius: 999px; }
+.segmented-control--rounded { border-radius: 12px; } /* button rounded(8px) + padding(4px) */
+
+/* 라벨이 짧아도 세그먼트가 지나치게 쪼그라들지 않도록 size별 최소 너비 */
+.segmented-control .button         { min-width: 96px; } /* 기본(48) */
+.segmented-control--32 .button     { min-width: 64px; }
+.segmented-control--40 .button     { min-width: 80px; }
+.segmented-control--48 .button     { min-width: 96px; }
+
+.segmented-control--no-bg {
+  background: transparent;
+  padding: 0;
+}
+
+/* fullWidth: 외부에서 고정된 폭을 버튼들이 1:1로 나눠 가득 채움 */
+.segmented-control--full {
+  display: flex;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+.segmented-control--full .button {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+
+@media (max-width: 767px) {
+  /* 컨테이너에 flex-wrap: wrap이 걸려 있는데도 flex-shrink: 0 때문에 폭이 줄지 않아
+     줄바꿈이 아예 발동하지 않았다 — 부모보다 넓어지면 그대로 화면 밖으로 나갔다
+     (단어검색 3개짜리 실측: 194px 부모에 247px). 좁은 화면에서만 축소를 허용해
+     원래 의도대로 줄바꿈되게 한다. 4개·5개 이상 규칙은 아래에서 계속 우선한다. */
+  .segmented-control {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  /* 정확히 4개 항목: 2×2 그리드 */
+  .segmented-control:has(> .button:nth-child(4):last-child) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 100%;
+    border-radius: 14px;
+  }
+  .segmented-control:has(> .button:nth-child(4):last-child) > .button {
+    width: 100%;
+    justify-content: center;
+  }
+
+  /* 5개 이상: flex-wrap으로 2행 이상이 될 때 pill 라운드 조정 */
+  .segmented-control--pill:has(> .button:nth-child(5)) {
+    border-radius: 14px;
+  }
+  /* 5개 이상: 줄바꿈된 마지막 줄이 왼쪽으로 치우치지 않도록 가운데 정렬 */
+  .segmented-control:has(> .button:nth-child(5)) {
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,26 @@
+import './SegmentedControl.css';
+import type { ReactNode } from 'react';
+/** @public */
+export type SegmentedOption = {
+    key: string;
+    label: ReactNode;
+    count?: ReactNode;
+    disabled?: boolean;
+};
+/** @public */
+export interface SegmentedControlProps {
+    options?: SegmentedOption[];
+    value?: string;
+    onChange?: (v: string) => void;
+    className?: string;
+    /** 버튼 높이 — Button과 동일한 숫자 size (32 / 40 / 48) */
+    size?: 32 | 40 | 48;
+    shape?: 'rounded' | 'pill';
+    useBG?: boolean;
+    /** 외부에서 정해진 폭을 버튼들이 균등 분할해 가득 채움 */
+    fullWidth?: boolean;
+    /** 화면에 보이는 라벨 없이 스크린리더용 이름을 지정할 때 사용. 없으면 일반 라벨(segmentedControl.ariaLabel)로 대체 */
+    ariaLabel?: string;
+}
+/** @public */
+export default function SegmentedControl(props: SegmentedControlProps): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './SegmentedControl.css';
+import { useTranslation } from 'react-i18next';
+import Button from './Button';
+/** @public */
+export default function SegmentedControl(props) {
+    const { t } = useTranslation();
+    const { options = [], value = options[0]?.key, onChange = (_v) => { }, className = '', size = 48, shape = 'pill', useBG = true, fullWidth = false, ariaLabel, } = props || {};
+    return (_jsx("div", { className: cx('segmented-control', `segmented-control--${shape}`, `segmented-control--${size}`, fullWidth && 'segmented-control--full', !useBG && 'segmented-control--no-bg', className), role: "radiogroup", "aria-label": ariaLabel ?? t('segmentedControl.ariaLabel', '선택 탭'), children: options.map((opt) => (_jsx(Button, { role: "radio", "aria-checked": opt.key === value, label: opt.label, count: opt.count, disabled: opt.disabled, className: opt.key === value ? 'is-selected' : '', onClick: () => { if (!opt.disabled)
+                onChange(opt.key); }, size: size, shape: shape, useBorder: false, useBG: false }, opt.key))) }));
+}