@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgTheme.d.ts

@@ -0,0 +1,32 @@
+/**
+ * PromoBannerBg 컴포넌트가 부모에 주입하는 CSS 커스텀 프로퍼티 정의.
+ * PassCardBgTheme과 동일한 패턴 — 각 PromoBannerBg_* 컴포넌트는 자신의 배경에 맞는 theme을
+ * export하고, useLayoutEffect로 부모 요소(예: PromoBanner 루트)에 CSS var를 주입한다.
+ *
+ * 배너 콘텐츠(타이틀/설명)는 var(--promo-banner-bg-title) 등을 참조해 배경을 교체하는 것만으로
+ * 전경색이 자동으로 바뀐다.
+ *
+ * @public
+ */
+export interface PromoBannerBgTheme {
+    /** 타이틀 텍스트 색상 → --promo-banner-bg-title */
+    title: string;
+    /** 설명 텍스트 색상 → --promo-banner-bg-description */
+    description: string;
+    /**
+     * 이 배경에서 액션 버튼에 기본으로 쓸 variant (PromoBanner의 actionVariant prop 미지정 시 사용).
+     * CSS var가 아니라 PromoBanner가 getPromoBannerBgTheme로 직접 읽어 Button의 variant prop에 쓴다.
+     */
+    actionVariant?: string;
+}
+/** CSS 커스텀 프로퍼티 키 목록 */
+export declare const PROMO_BANNER_BG_VARS: {
+    readonly title: "--promo-banner-bg-title";
+    readonly description: "--promo-banner-bg-description";
+};
+/** 레지스트리에서 theme 조회 */
+export declare function getPromoBannerBgTheme(el: Element | null): PromoBannerBgTheme | undefined;
+/** theme 객체를 부모 요소에 CSS var로 주입 */
+export declare function injectPromoBannerBgTheme(el: HTMLElement | null, theme: PromoBannerBgTheme): void;
+/** 주입된 CSS var 제거 (cleanup용) */
+export declare function clearPromoBannerBgTheme(el: HTMLElement | null): void;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgTheme.js

@@ -0,0 +1,29 @@
+/** CSS 커스텀 프로퍼티 키 목록 */
+export const PROMO_BANNER_BG_VARS = {
+    title: '--promo-banner-bg-title',
+    description: '--promo-banner-bg-description',
+};
+/** WeakMap 레지스트리: Element → 마지막으로 주입된 theme */
+const _themeRegistry = new WeakMap();
+/** 레지스트리에서 theme 조회 */
+export function getPromoBannerBgTheme(el) {
+    if (!el)
+        return undefined;
+    return _themeRegistry.get(el);
+}
+/** theme 객체를 부모 요소에 CSS var로 주입 */
+export function injectPromoBannerBgTheme(el, theme) {
+    if (!el)
+        return;
+    el.style.setProperty(PROMO_BANNER_BG_VARS.title, theme.title);
+    el.style.setProperty(PROMO_BANNER_BG_VARS.description, theme.description);
+    _themeRegistry.set(el, theme);
+}
+/** 주입된 CSS var 제거 (cleanup용) */
+export function clearPromoBannerBgTheme(el) {
+    if (!el)
+        return;
+    el.style.removeProperty(PROMO_BANNER_BG_VARS.title);
+    el.style.removeProperty(PROMO_BANNER_BG_VARS.description);
+    _themeRegistry.delete(el);
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgWarm.css

@@ -0,0 +1,3 @@
+.promo-banner-bg-warm {
+  background: var(--color-warn);
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgWarm.d.ts

@@ -0,0 +1,11 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgWarm.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgWarmTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 따뜻한 강조색(warn) 평면. 이벤트/한정 프로모션 등 눈에 띄어야 하는 공지에
+ * 어울린다. 어두운(dark) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgWarm(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgWarm.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgWarm.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgWarmTheme = {
+    title: 'var(--color-black)',
+    description: 'var(--color-darkGray)',
+    actionVariant: 'main',
+};
+/**
+ * 배너 배경 — 따뜻한 강조색(warn) 평면. 이벤트/한정 프로모션 등 눈에 띄어야 하는 공지에
+ * 어울린다. 어두운(dark) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgWarm() {
+    const ref = useParentBgTheme(promoBannerBgWarmTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-warm", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/promoBannerBg.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 배너(PromoBanner 등)에서 고를 수 있는 배경 종류 레지스트리.
+ * 각 배경은 PromoBannerBg{Key}.tsx 컴포넌트로 독립돼 있고, 여기서는 선택 UI(어드민 공지 등록
+ * 폼, 디자인 시스템 페이지)가 공유하는 key/label/textTone 메타데이터만 관리한다.
+ *
+ * @public
+ */
+export type PromoBannerBgKey = 'main' | 'soft' | 'sub' | 'deep' | 'softSub' | 'warm' | 'dark' | 'radial' | 'diagonal' | 'dots' | 'outline' | 'success' | 'naver' | 'instagram';
+/** @public */
+export interface PromoBannerBgOption {
+    key: PromoBannerBgKey;
+    label: string;
+    /** 이 배경 위에 얹을 제목/설명 텍스트가 밝은 색(light)이어야 하는지, 어두운 색(dark)이어야 하는지 */
+    textTone: 'light' | 'dark';
+}
+/** @public */
+export declare const PROMO_BANNER_BG_OPTIONS: PromoBannerBgOption[];
+import type { ComponentType } from 'react';
+/** key → 실제 배경 컴포넌트. PromoBanner 등 사용처가 이걸로 렌더한다. 각 컴포넌트는 자신의
+ *  텍스트 테마(PromoBannerBgTheme)를 부모에 주입하므로 props 없이 렌더하면 된다. @public */
+export declare const PROMO_BANNER_BG_COMPONENTS: Record<PromoBannerBgKey, ComponentType<Record<string, never>>>;

package/dist/packages/core/src/components/PromoBannerBg/promoBannerBg.js

@@ -0,0 +1,49 @@
+/** @public */
+export const PROMO_BANNER_BG_OPTIONS = [
+    { key: 'main', label: '메인 그라디언트', textTone: 'light' },
+    { key: 'soft', label: '소프트', textTone: 'dark' },
+    { key: 'sub', label: '서브 컬러', textTone: 'light' },
+    { key: 'deep', label: '딥 그라디언트', textTone: 'light' },
+    { key: 'softSub', label: '소프트 서브', textTone: 'dark' },
+    { key: 'warm', label: '웜(강조)', textTone: 'dark' },
+    { key: 'dark', label: '다크', textTone: 'light' },
+    { key: 'radial', label: '방사형 그라디언트', textTone: 'light' },
+    { key: 'diagonal', label: '대각선 패턴', textTone: 'dark' },
+    { key: 'dots', label: '도트 패턴', textTone: 'dark' },
+    { key: 'outline', label: '아웃라인', textTone: 'dark' },
+    { key: 'success', label: '성공/완료', textTone: 'light' },
+    { key: 'naver', label: '네이버 블로그 안내', textTone: 'light' },
+    { key: 'instagram', label: '인스타그램 안내', textTone: 'light' },
+];
+import PromoBannerBgMain from './PromoBannerBgMain';
+import PromoBannerBgSoft from './PromoBannerBgSoft';
+import PromoBannerBgSub from './PromoBannerBgSub';
+import PromoBannerBgDeep from './PromoBannerBgDeep';
+import PromoBannerBgSoftSub from './PromoBannerBgSoftSub';
+import PromoBannerBgWarm from './PromoBannerBgWarm';
+import PromoBannerBgDark from './PromoBannerBgDark';
+import PromoBannerBgRadial from './PromoBannerBgRadial';
+import PromoBannerBgDiagonal from './PromoBannerBgDiagonal';
+import PromoBannerBgDots from './PromoBannerBgDots';
+import PromoBannerBgOutline from './PromoBannerBgOutline';
+import PromoBannerBgSuccess from './PromoBannerBgSuccess';
+import PromoBannerBgNaver from './PromoBannerBgNaver';
+import PromoBannerBgInstagram from './PromoBannerBgInstagram';
+/** key → 실제 배경 컴포넌트. PromoBanner 등 사용처가 이걸로 렌더한다. 각 컴포넌트는 자신의
+ *  텍스트 테마(PromoBannerBgTheme)를 부모에 주입하므로 props 없이 렌더하면 된다. @public */
+export const PROMO_BANNER_BG_COMPONENTS = {
+    main: PromoBannerBgMain,
+    soft: PromoBannerBgSoft,
+    sub: PromoBannerBgSub,
+    deep: PromoBannerBgDeep,
+    softSub: PromoBannerBgSoftSub,
+    warm: PromoBannerBgWarm,
+    dark: PromoBannerBgDark,
+    radial: PromoBannerBgRadial,
+    diagonal: PromoBannerBgDiagonal,
+    dots: PromoBannerBgDots,
+    outline: PromoBannerBgOutline,
+    success: PromoBannerBgSuccess,
+    naver: PromoBannerBgNaver,
+    instagram: PromoBannerBgInstagram,
+};

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

@@ -0,0 +1,70 @@
+/* 특허·논문 실적 카드 — 우상단 장식 + 제목/분류/본문 */
+.publication-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 36px var(--spacing-xl) 32px;
+  border-radius: var(--radius-m);
+  background: var(--color-surface-raised);
+}
+
+.publication-card__badge {
+  position: absolute;
+  top: 0;
+  right: var(--spacing-xl);
+  height: 88px;
+  pointer-events: none;
+}
+
+.publication-card__badge > img,
+.publication-card__badge > * {
+  height: 100%;
+  width: auto;
+}
+
+.publication-card__title {
+  font-size: var(--text-h4-size);
+  line-height: var(--text-h4-line);
+  font-weight: var(--text-h4-weight-bold);
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding-right: 96px;
+  color: var(--color-text-primary);
+}
+
+/*
+ * 우상단 배지(88px)를 피하려고 56px 를 밀어 뒀었는데, 배지는 절대 배치이고
+ * 제목에 padding-right 로 자리를 비워 둬서 이만큼 밀 이유가 없다. 카드 안이
+ * 휑해 보이던 원인이라 일반적인 간격으로 좁힌다.
+ */
+.publication-card__kind {
+  font-size: var(--text-body-3-size);
+  line-height: var(--text-body-3-line);
+  font-weight: var(--text-body-3-weight);
+  margin: var(--spacing-m) 0 0;
+  color: var(--color-darkGray);
+}
+
+.publication-card__body {
+  font-size: var(--text-caption-1-size);
+  margin: var(--spacing-m) 0 0;
+  line-height: 1.65;
+  color: var(--color-darkGray);
+}
+
+@media (max-width: 767px) {
+  .publication-card {
+    padding: 32px var(--spacing-l) 28px;
+  }
+  .publication-card__kind {
+    margin-top: var(--spacing-m);
+  }
+}
+
+/* 카드가 늘어나도 바닥에 붙는다 — 본문과 떨어져 링크임이 분명해진다 */
+.publication-card__footer {
+  margin-top: auto;
+  padding-top: var(--spacing-l);
+}

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

@@ -0,0 +1,31 @@
+import './PublicationCard.css';
+import type { ReactNode } from 'react';
+/** @public */
+export interface PublicationCardProps {
+    /** 카드 제목 — 대상 제품·과제명 */
+    title: string;
+    /** 분류 라벨 — "특허등록", "관련논문" 등 */
+    kind?: string;
+    /** 본문 — 특허 번호, 논문 서지사항 */
+    body: ReactNode;
+    /**
+     * 우상단 장식 노드(메달·리본 등). 이미지 최적화 컴포넌트를 주입할 때 사용한다.
+     * `badgeSrc`보다 우선한다.
+     */
+    badge?: ReactNode;
+    /** 우상단 장식 이미지 URL */
+    badgeSrc?: string;
+    /**
+     * 카드 바닥에 붙는 영역. 원문 링크 등을 넣는다.
+     * 본문에 이어 붙이면 문장에 딸려 보이므로 별도 슬롯으로 둔다.
+     */
+    footer?: ReactNode;
+    /** 고정 너비(px). 가로 스크롤 레일에서 카드 폭을 맞출 때 사용 */
+    width?: number;
+    className?: string;
+}
+/**
+ * 특허·논문 등 실적 카드. 우상단 장식 아래로 제목·분류·본문을 세로로 쌓는다.
+ * @public
+ */
+export default function PublicationCard({ title, kind, body, badge, badgeSrc, footer, width, className, }: PublicationCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './PublicationCard.css';
+/**
+ * 특허·논문 등 실적 카드. 우상단 장식 아래로 제목·분류·본문을 세로로 쌓는다.
+ * @public
+ */
+export default function PublicationCard({ title, kind, body, badge, badgeSrc, footer, width, className = '', }) {
+    const decoration = badge ?? (badgeSrc ? _jsx("img", { src: badgeSrc, alt: "" }) : null);
+    return (_jsxs("div", { className: cx('publication-card', className), style: width ? { width, flexShrink: 0 } : undefined, children: [decoration ? (_jsx("div", { className: "publication-card__badge", "aria-hidden": "true", children: decoration })) : null, _jsx("h3", { className: "publication-card__title", children: title }), kind ? _jsx("p", { className: "publication-card__kind", children: kind }) : null, _jsx("p", { className: "publication-card__body", children: body }), footer ? _jsx("div", { className: "publication-card__footer", children: footer }) : null] }));
+}

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

@@ -0,0 +1,64 @@
+.radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  cursor: pointer;
+  user-select: none;
+}
+
+.radio input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.radio__dot {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border: 1.5px solid var(--color-whiteLine);
+  border-radius: 50%;
+  background: var(--color-pureWhite);
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.radio__dot::before {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  border-radius: 50%;
+  background: var(--color-pureWhite);
+  transform: scale(0);
+  transition: transform 0.15s;
+}
+
+.radio input:checked + .radio__dot {
+  border-color: var(--color-main);
+  background: var(--color-main);
+}
+
+.radio input:checked + .radio__dot::before {
+  transform: scale(1);
+}
+
+.radio:not(.radio--disabled):hover .radio__dot {
+  border-color: var(--color-main);
+}
+
+.radio input:focus-visible + .radio__dot {
+  outline: 2px solid var(--color-main);
+  outline-offset: 2px;
+}
+
+.radio__label {
+  color: var(--color-black);
+}
+
+.radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}

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

@@ -0,0 +1,13 @@
+import './Radio.css';
+/** @public */
+export interface RadioProps {
+    checked: boolean;
+    onChange?: (checked: boolean) => void;
+    name?: string;
+    value?: string;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    className?: string;
+}
+/** @public */
+export default function Radio({ checked, onChange, name, value, disabled, label, className }: RadioProps): import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './Radio.css';
+/** @public */
+export default function Radio({ checked, onChange, name, value, disabled = false, label, className = '' }) {
+    const id = useId();
+    return (_jsxs("label", { className: `radio${disabled ? ' radio--disabled' : ''} ${className}`.trim(), htmlFor: id, children: [_jsx("input", { id: id, type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: e => onChange?.(e.target.checked) }), _jsx("span", { className: "radio__dot" }), label && _jsx("span", { className: "radio__label body-2", children: label })] }));
+}

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

@@ -0,0 +1,14 @@
+.radio-group {
+  display: flex;
+}
+
+.radio-group--vertical {
+  flex-direction: column;
+  gap: var(--spacing-s);
+}
+
+.radio-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-l);
+}

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

@@ -0,0 +1,21 @@
+import './RadioGroup.css';
+/** @public */
+export interface RadioGroupOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+/** @public */
+export type RadioGroupDirection = 'vertical' | 'horizontal';
+/** @public */
+export interface RadioGroupProps {
+    options: RadioGroupOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    name?: string;
+    disabled?: boolean;
+    direction?: RadioGroupDirection;
+    className?: string;
+}
+/** @public */
+export default function RadioGroup({ options, value, onChange, name, disabled, direction, className, }: RadioGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from 'react';
+import Radio from './Radio';
+import './RadioGroup.css';
+/** @public */
+export default function RadioGroup({ options, value, onChange, name, disabled = false, direction = 'vertical', className = '', }) {
+    const autoId = useId();
+    const groupName = name ?? `radio-group-${autoId}`;
+    return (_jsx("div", { className: `radio-group radio-group--${direction} ${className}`.trim(), role: "radiogroup", children: options.map(option => (_jsx(Radio, { name: groupName, value: option.value, checked: value === option.value, disabled: disabled || option.disabled, label: option.label, onChange: checked => {
+                if (checked)
+                    onChange?.(option.value);
+            } }, option.value))) }));
+}

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

@@ -0,0 +1,69 @@
+.rating {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  --rating-color: var(--color-warn);
+  --rating-empty-color: var(--color-whiteLine);
+}
+
+.rating__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  line-height: 0;
+}
+
+.rating__item--interactive {
+  cursor: pointer;
+}
+
+.rating__item--interactive:focus-visible {
+  outline: 2px solid var(--color-main);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+.rating--readOnly .rating__item {
+  cursor: default;
+}
+
+.rating__star-wrap {
+  position: relative;
+  display: inline-flex;
+  line-height: 0;
+}
+
+.rating__star--empty {
+  color: var(--rating-empty-color);
+}
+
+.rating__star--empty svg {
+  fill: var(--rating-empty-color);
+}
+
+.rating__star-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: inline-flex;
+  white-space: nowrap;
+}
+
+.rating__star-fill--half {
+  width: 50%;
+}
+
+.rating__star--filled {
+  color: var(--rating-color);
+}
+
+.rating__star--filled svg {
+  fill: var(--rating-color);
+}

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

@@ -0,0 +1,21 @@
+import './Rating.css';
+/** @public */
+export type RatingSize = 'small' | 'medium' | 'large';
+/** @public */
+export interface RatingProps {
+    /** 현재 별점 (0 ~ max). 읽기 전용 모드에서는 소수점(예: 4.5) 허용 */
+    value: number;
+    /** 값 변경 콜백. 생략 시 읽기 전용 모드로 동작 */
+    onChange?: (value: number) => void;
+    /** 별 개수. 기본값 5 */
+    max?: number;
+    /** 읽기 전용 여부 (표시만, 클릭/hover 인터랙션 없음) */
+    readOnly?: boolean;
+    /** 별 크기. 기본값 'medium' */
+    size?: RatingSize;
+    /** 고르는 모드에서 묶음(radiogroup)의 이름 — 무엇에 대한 별점인지. 기본은 '별점' */
+    ariaLabel?: string;
+    className?: string;
+}
+/** @public */
+export default function Rating({ value, onChange, max, readOnly, size, ariaLabel, className, }: RatingProps): import("react").JSX.Element;

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

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Icon from './Icon';
+import './Rating.css';
+const ICON_SIZE = {
+    small: 14,
+    medium: 20,
+    large: 28,
+};
+/** @public */
+export default function Rating({ value, onChange, max = 5, readOnly = false, size = 'medium', ariaLabel, className = '', }) {
+    const { t } = useTranslation();
+    const isReadOnly = readOnly || !onChange;
+    const [hoverValue, setHoverValue] = useState(null);
+    const displayValue = hoverValue ?? value;
+    const iconSize = ICON_SIZE[size];
+    const handleClick = (star) => {
+        if (isReadOnly)
+            return;
+        onChange?.(star);
+    };
+    const handleMouseEnter = (star) => {
+        if (isReadOnly)
+            return;
+        setHoverValue(star);
+    };
+    const handleMouseLeave = () => {
+        if (isReadOnly)
+            return;
+        setHoverValue(null);
+    };
+    return (
+    /* 읽기 전용일 때는 **묶음이 값을 말한다.** 별 다섯은 전부 aria-hidden 이라
+       대체 글자가 없으면 낭독기에는 빈 자리다 — 눈에는 별 넷 반이 보이는데 아무것도
+       안 읽힌다. 별점을 보여 주는 것이 이 모드의 유일한 일인데 그것이 사라진다.
+       (별을 하나씩 읽히게 하면 "별·별·별…" 이 다섯 번 나올 뿐이라 묶음에 준다.) */
+    _jsx("div", { className: `rating rating--${size}${isReadOnly ? ' rating--readOnly' : ''} ${className}`.trim(), role: isReadOnly ? 'img' : 'radiogroup', "aria-label": isReadOnly
+            ? t('rating.valueLabel', { value, max })
+            : (ariaLabel ?? t('rating.groupLabel', '별점')), onMouseLeave: handleMouseLeave, children: Array.from({ length: max }, (_, i) => {
+            const star = i + 1;
+            const fillRatio = Math.max(0, Math.min(1, displayValue - i));
+            const isHalf = fillRatio > 0 && fillRatio < 1;
+            const starNode = (_jsxs("span", { className: "rating__star-wrap", children: [_jsx(Icon, { icon: "star", size: iconSize, className: "rating__star rating__star--empty" }), fillRatio > 0 && (_jsx("span", { className: `rating__star-fill${isHalf ? ' rating__star-fill--half' : ''}`, children: _jsx(Icon, { icon: "star", size: iconSize, className: "rating__star rating__star--filled" }) }))] }));
+            if (isReadOnly) {
+                return (_jsx("span", { className: "rating__item", "aria-hidden": "true", children: starNode }, star));
+            }
+            return (_jsx("button", { type: "button", className: "rating__item rating__item--interactive", role: "radio", "aria-checked": value === star, "aria-label": t('rating.starLabel', { n: star }), onClick: () => handleClick(star), onMouseEnter: () => handleMouseEnter(star), children: starNode }, star));
+        }) }));
+}

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

@@ -0,0 +1,50 @@
+/* ── RingChart — 도넛 링 차트 ──────────────────────────────────────────────── */
+.ring-chart {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.ring-chart svg {
+  display: block;
+}
+
+/* 중앙 텍스트 (숫자 + 라벨) — 두 줄을 일반 흐름(flex column)으로 쌓아 절대 겹치지 않게 하고,
+   라벨(캡션, 항상 고정 크기) 높이의 절반만큼 그룹 전체를 아래로 보정해 숫자가 링 정중앙에 오도록 한다 */
+.ring-chart__center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+/* 사이즈별 폰트/간격 조합이 달라 보정값도 각각 다르다 — 실측(getBoundingClientRect)으로 맞춘 값 */
+.ring-chart__center--small  { transform: translateY(6.5px); }
+.ring-chart__center--medium { transform: translateY(7.5px); }
+.ring-chart__center--large  { transform: translateY(8.5px); }
+
+.ring-chart__pct {
+  line-height: 1;
+  color: var(--color-darkGray);
+}
+
+.ring-chart__label {
+  color: var(--color-lightGray);
+}
+
+/* size='medium'에서만 숫자-% 간격을 2px 더 좁힘 */
+.ring-chart__label--tight {
+  margin-top: -2px;
+}
+
+/* ChartSection 카드 안에서(titleKey 지정 시) 링을 가로 중앙 정렬 */
+.ring-chart-section-body {
+  display: flex;
+  justify-content: center;
+}
+
+/* medium/large 카드는 우측 정렬이 더 안정적으로 보임 */
+.ring-chart-section-body--offset {
+  justify-content: flex-end;
+}