@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Training/NoisePlayerContext.js

@@ -0,0 +1,26 @@
+'use client';
+import { createContext, useContext } from 'react';
+// 소음 크기: 내부 level(0~9 연속) ↔ 표시 percent(0~100). 소음 설정 툴팁과 계정 설정("훈련" 패널)이
+// 동일한 매핑을 써야 하므로 여기서 한 번만 정의해 공유한다.
+// 소음 음원 파일을 클리핑 없는 한도(+7dB, 약 2.24배)까지 증폭한 뒤 맞춘 상한값 —
+// 기존 파일 기준 최대치였던 level=4가 이제 약 44%로 표시되고, 늘어난 상한(level=9)이 100%가 된다.
+/** @public */
+export const LEVEL_MAX = 9;
+/** @public */
+export const levelToPct = (level) => Math.round((Math.min(LEVEL_MAX, Math.max(0, level)) / LEVEL_MAX) * 100);
+/** @public */
+export const pctToLevel = (pct) => (pct / 100) * LEVEL_MAX;
+export const DEFAULT_NOISE_SETTINGS = {
+    enabled: true,
+    type: 'defaultNoise',
+    level: 4.5, // 소음 크기 기본값 50% (levelToPct(4.5) === 50)
+    speed: 1,
+    mainVolume: 1,
+    mainSpeed: 1,
+};
+/** @public */
+export const NoisePlayerContext = createContext(null);
+/** @public */
+export function useNoisePlayer() {
+    return useContext(NoisePlayerContext);
+}

package/dist/packages/core/src/components/Training/NoiseSettingsTooltip.css

@@ -0,0 +1,52 @@
+/* useBorder=false라 row 자체 좌우 패딩이 0이 되므로, Panel 바깥쪽에 사방 20px 패딩을 둔다.
+   Tooltip의 edgeMargin(기본 20px, 좌우 합 40px)을 넘지 않도록 max-width로 모바일 폭 잘림을 방지 —
+   패딩까지 포함해 계산되도록 box-sizing을 border-box로 둔다.
+   Panel 기본 border-radius(--radius-card, 12px)가 이 Panel을 감싸는 Tooltip 래퍼(.tooltip-content)의
+   border-radius(--radius-m, 20px)보다 작아서, Panel의 각진 배경이 Tooltip의 둥근 모서리 안쪽에 그대로
+   보여 모서리가 제대로 표현되지 않았다 — Panel이 tooltip-content 전체를 꽉 채우므로 반지름을 맞춘다. */
+.noise-settings {
+  padding: 20px;
+  box-sizing: border-box;
+  max-width: calc(100vw - 40px);
+  border-radius: var(--radius-m);
+}
+
+/* Tooltip 공용 header(.tooltip-content__header)는 좌우 2px 패딩·고정 40px 높이·구분선 없음이
+   기본값이라 이 툴팁엔 좁고 밋밋했다 — 이 헤더를 쓰는 tooltip-content에 한해 Panel 본문(20px
+   인셋)과 좌우가 맞는 패딩과, 본문과 분리되어 보이도록 구분선을 준다(Panel 자체 헤더와 동일 패턴). */
+.tooltip-content:has(.noise-settings__header) .tooltip-content__header {
+  height: 60px;
+  /* 세로 패딩 없이 align-items:center로 높이만큼 자동 중앙정렬 — 닫기 버튼(40px) 기준으로 계산 불필요 */
+  padding: 0 20px;
+  border-bottom: 1px solid var(--color-darkWhite);
+}
+
+.noise-settings__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.noise-settings__header span {
+  color: var(--color-darkGray);
+  font-weight: 600;
+}
+
+/* Panel/PanelRow(variant="custom" useFullWidth) 레이아웃 위에서, 슬라이더는 남는 폭을 채우고
+   값 텍스트는 오른쪽에 고정폭으로 붙는다. */
+.noise-settings__slider-input.slider--horizontal {
+  flex: 1 1 auto;
+}
+
+.noise-settings__value {
+  color: var(--color-main);
+  flex: 0 0 auto;
+  /* min-width가 아니라 고정 width — 값 문자열 길이가 바뀔 때(예: 80% → 100%, 0.50x → 1.25x)
+     이 박스 너비가 변하면 옆의 슬라이더(flex:1)가 그만큼 늘었다 줄었다 하며 흔들린다.
+     44px는 "100%"/"X.XXx" 포맷의 최대 실측 너비(~39px)보다 넉넉해 항상 고정된다. */
+  width: 44px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  text-align: right;
+}

package/dist/packages/core/src/components/Training/NoiseSettingsTooltip.d.ts

@@ -0,0 +1,13 @@
+import './NoiseSettingsTooltip.css';
+/** @public */
+export interface NoiseSettingsTooltipProps {
+    /** 앵커(소음 설정 버튼) 위치. */
+    anchorRect: DOMRect | null;
+    onClose: () => void;
+}
+/**
+ * 소음 설정 툴팁 — 각 항목을 행으로 세로 배치, 슬라이더는 가로 방향.
+ * 설정값은 NoisePlayerContext(useNoisePlayer)로 읽고 쓴다.
+ * @public
+ */
+export default function NoiseSettingsTooltip({ anchorRect, onClose }: NoiseSettingsTooltipProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Training/NoiseSettingsTooltip.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../Tooltip/Tooltip';
+import Panel, { PanelRow } from '../Panel';
+import SegmentedControl from '../SegmentedControl';
+import Slider from '../Slider';
+import Button from '../Button';
+import useMediaQuery from '../../hooks/useMediaQuery';
+import { getNoiseTypeOptions } from '../Tooltip/tooltipConstants';
+import { useNoisePlayer, levelToPct, pctToLevel } from './NoisePlayerContext';
+import './NoiseSettingsTooltip.css';
+// 소음 종류 세그먼트의 "없음" — 별도 CoreNoiseType이 아니라 enabled=false를 의미(type은 마지막 값 유지).
+// enabled/level=0으로 이미 "무음"을 표현하고 있어(다른 곳의 소음 크기 "없음"과 동일 패턴), 새 타입을
+// 추가하는 대신 세그먼트 선택값만 enabled 여부로 매핑한다.
+const NONE_KEY = 'none';
+// 문장(메인) 재생 속도
+const PLAY_SPEED_MIN = 0.5;
+const PLAY_SPEED_MAX = 1.5;
+const PLAY_SPEED_STEP = 0.25;
+/** 제목 + 가로 슬라이더 + 값 라벨 PanelRow */
+function SliderPanelRow({ title, valueLabel, value, min, max, step, tickStep, size, onChange }) {
+    return (_jsxs(PanelRow, { variant: "custom", label: title, useFullWidth: true, children: [_jsx(Slider, { value: value, onChange: onChange, min: min, max: max, step: step, size: size, showBgTick: true, tickStep: tickStep, ariaLabel: title, className: "noise-settings__slider-input" }), _jsx("div", { className: "noise-settings__value button-1", children: valueLabel })] }));
+}
+/**
+ * 소음 설정 툴팁 — 각 항목을 행으로 세로 배치, 슬라이더는 가로 방향.
+ * 설정값은 NoisePlayerContext(useNoisePlayer)로 읽고 쓴다.
+ * @public
+ */
+export default function NoiseSettingsTooltip({ anchorRect, onClose }) {
+    const { t } = useTranslation();
+    // 모바일에서는 터치 영역 확보를 위해 슬라이더를 더 크게(40) 표시
+    const isMobile = useMediaQuery('(max-width: 767px)');
+    const sliderSize = isMobile ? 40 : 24;
+    const noisePlayer = useNoisePlayer();
+    const level = noisePlayer?.settings.level ?? 0;
+    const noiseType = noisePlayer?.settings.type ?? 'defaultNoise';
+    const noiseEnabled = noisePlayer?.settings.enabled ?? true;
+    const pct = levelToPct(level);
+    const playbackRate = noisePlayer?.playbackRate ?? 1;
+    const mainVolume = noisePlayer?.mainVolume ?? 1;
+    const volPct = Math.round(mainVolume * 100);
+    const handlePlayVolumeChange = useCallback((nextPct) => {
+        try {
+            noisePlayer?.setMainVolume(Math.max(0, Math.min(1, nextPct / 100)));
+        }
+        catch (e) { }
+    }, [noisePlayer]);
+    const handlePlaySpeedChange = useCallback((nextSpeed) => {
+        try {
+            noisePlayer?.setPlaybackRate(nextSpeed);
+        }
+        catch (e) { }
+    }, [noisePlayer]);
+    // 레벨만 반영 — enabled는 건드리지 않는다. 크기를 0으로 내려도 "소음 종류"가
+    // "없음"으로 바뀌지 않아야 하므로(사용자가 종류는 유지한 채 잠깐 무음으로만 두려는 경우),
+    // 끄고 켜는 것은 소음 종류 세그먼트(handleTypeChange)의 역할로만 남긴다.
+    const handleLevelChange = useCallback((nextPct) => {
+        const nextLevel = pctToLevel(nextPct);
+        try {
+            noisePlayer?.setSettings({ level: nextLevel });
+        }
+        catch (e) { }
+    }, [noisePlayer]);
+    const handleTypeChange = useCallback((key) => {
+        try {
+            if (key === NONE_KEY) {
+                noisePlayer?.setSettings({ enabled: false });
+            }
+            else {
+                noisePlayer?.setSettings({ type: key, enabled: true });
+            }
+        }
+        catch (e) { }
+    }, [noisePlayer]);
+    return (_jsx(Tooltip, { anchorRect: anchorRect, offset: 12, onClose: onClose, ariaLabel: t('training.trainingSettingsTitle', '훈련 설정'), isMobilePopup: false, closeOnOutsideClick: false, header: _jsxs("div", { className: "noise-settings__header", children: [_jsx("span", { children: t('training.trainingSettingsTitle', '훈련 설정') }), _jsx(Button, { size: 40, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, ariaLabel: t('common.close', '닫기'), onClick: onClose })] }), children: _jsxs(Panel, { className: "noise-settings", useBorder: false, labelWidth: 72, children: [_jsx(SliderPanelRow, { title: t('training.playVolumeTitle', '재생 소리'), valueLabel: `${volPct}%`, value: volPct, min: 0, max: 100, step: 10, size: sliderSize, onChange: handlePlayVolumeChange }), _jsx(SliderPanelRow, { title: t('training.playSpeedTitle', '재생 속도'), valueLabel: `${playbackRate.toFixed(2)}x`, value: playbackRate, min: PLAY_SPEED_MIN, max: PLAY_SPEED_MAX, step: PLAY_SPEED_STEP, size: sliderSize, onChange: handlePlaySpeedChange }), _jsx(SliderPanelRow, { title: t('training.noiseLevelTitle', '소음 크기'), valueLabel: `${pct}%`, value: pct, min: 0, max: 100, step: 10, size: sliderSize, onChange: handleLevelChange }), _jsx(PanelRow, { variant: "custom", label: t('training.noiseTypeTitle', '소음 종류'), useFullWidth: true, children: _jsx(SegmentedControl, { ariaLabel: t('training.noiseTypeTitle', '소음 종류'), size: 40, shape: "rounded", options: [
+                            { key: NONE_KEY, label: t('training.noise.type.none', '없음') },
+                            ...getNoiseTypeOptions(t).map(opt => ({ key: opt.value, label: opt.label })),
+                        ], value: noiseEnabled ? noiseType : NONE_KEY, onChange: handleTypeChange }) })] }) }));
+}

package/dist/packages/core/src/components/Training/TrainingBlock.css

@@ -0,0 +1,33 @@
+.training-blocks {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.training-block {
+    width: 100%;
+    border-radius: var(--radius-card);
+}
+
+.training-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+/* Ensure individual buttons behave like inline blocks when wrapped */
+.training-list__item {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.training-block__more {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--spacing-l);
+}
+
+.training-blocks--top-spaced { margin-top: 18px; }
+
+

package/dist/packages/core/src/components/Training/TrainingBlock.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode, type MouseEvent } from 'react';
+import './TrainingBlock.css';
+import { type TrainingBlockButtonPopupProps } from './TrainingBlockButton';
+import type { TrainingItem } from '../../types/training';
+/** @public */
+export type TrainingTypeDescriptor = {
+    key?: string;
+    label?: string;
+    icon?: string;
+    desc?: string;
+};
+/** @public */
+export interface TrainingBlockProps {
+    type?: TrainingTypeDescriptor;
+    trainingDatas?: TrainingItem[] | unknown[];
+    depth?: string | string[];
+    count?: number;
+    /** 버튼 클릭 시 열릴 팝업 렌더링 함수. TrainingBlockButton의 renderPopup과 동일. */
+    renderPopup?: (props: TrainingBlockButtonPopupProps) => ReactNode;
+    /** 오늘 완료된 훈련 항목 ID Set. completedIds에 포함된 항목은 완료 상태로 표시됩니다. */
+    completedIds?: Set<string>;
+    /** 선택 상태 ID Set. 완료 뱃지 없이 테두리 강조만 표시. */
+    selectedIds?: Set<string>;
+    /** 훈련 항목 완료 시 호출되는 콜백. itemId는 완료된 TrainingItem의 id입니다. */
+    onItemComplete?: (itemId: string) => void;
+    /**
+     * 버튼 레이아웃 크기.
+     * - `square` (기본값): 200×200px 정사각형 카드
+     * - `list`: 전체 너비 × 80px 가로형 리스트 항목
+     */
+    size?: 'square' | 'list' | 'small';
+    /** true 이면 버튼 호버 시 DescriptionTooltip 으로 문제 텍스트를 표시. 기본값 false. */
+    useDescriptionTooltip?: boolean;
+    /** selectedIds 에 포함된 항목에서 호버 시 remove 뱃지 표시 — 클릭 시 호출 */
+    onRemove?: (item: TrainingItem) => void;
+    /**
+     * 제공 시 각 카드 우측 상단에 '더보기(⋯)' 버튼을 표시한다.
+     * 클릭하면 해당 항목과 버튼 엘리먼트(메뉴 anchor)를 함께 전달한다. 미제공 시 버튼 미표시.
+     */
+    onMore?: (item: TrainingItem, e: MouseEvent) => void;
+    /** 섹션 타입: 기본 page, 팝업 페이지 pagePopup, 팝업 내 popup */
+    sectionType?: 'page' | 'pagePopup' | 'popup';
+}
+/** @public */
+export default function TrainingBlock(props: TrainingBlockProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Training/TrainingBlock.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from '../Button';
+import Section from '../Section';
+import './TrainingBlock.css';
+import TrainingBlockButton from './TrainingBlockButton';
+import { useWindowEvent } from '../../hooks/useWindowEvent';
+const BTN_COUNT_MAX = 20;
+/** @public */
+export default function TrainingBlock(props) {
+    const { t } = useTranslation();
+    const { type, trainingDatas, depth, renderPopup, completedIds, selectedIds, onItemComplete, size, useDescriptionTooltip, onRemove, onMore, sectionType = 'page' } = props || {};
+    const [, setDataTick] = useState(0);
+    const explicitlyProvided = typeof trainingDatas !== 'undefined';
+    const itemsAll = explicitlyProvided ? (Array.isArray(trainingDatas) ? trainingDatas : []) : [];
+    const total = itemsAll.length;
+    const [visible, setVisible] = useState(Math.min(total, BTN_COUNT_MAX));
+    const depthLabel = useMemo(() => Array.isArray(depth)
+        ? [...depth, type?.label].filter(Boolean).join(' · ')
+        : [(depth || ''), type?.label].filter(Boolean).join(' · '), [depth, type?.label]);
+    // total 변경(카테고리/데이터 전환) 시 첫 페이지로 리셋.
+    // 이전엔 Math.min(v, cap)이라 작은 목록으로 갔다 돌아오면 visible이 줄어든 채
+    // 복구되지 않아 선택된 항목이 잘려 안 보이는 버그가 있었음.
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        setVisible(Math.min(total, BTN_COUNT_MAX));
+    }, [total]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    useWindowEvent('speechear.data.updated', () => setDataTick((v) => v + 1));
+    function loadMore() { setVisible((v) => Math.min(total, v + BTN_COUNT_MAX)); }
+    return (_jsxs(Section, { type: sectionType, title: type?.label, icon: type?.icon, disc: type?.desc, className: "training-block", children: [_jsx("div", { className: "training-list", children: (itemsAll || []).slice(0, visible).map((item, idx) => {
+                    const itemForBtn = item;
+                    const depthForBtn = depthLabel;
+                    return (_jsx(TrainingBlockButton, { index: idx, type: type, trainingData: itemForBtn, depth: depthForBtn, renderPopup: renderPopup, completedIds: completedIds, selectedIds: selectedIds, size: size, useDescriptionTooltip: useDescriptionTooltip, onRemove: typeof onRemove === 'function' && selectedIds != null && itemForBtn?.id != null && selectedIds.has(String(itemForBtn.id))
+                            ? () => onRemove(itemForBtn)
+                            : undefined, onComplete: typeof onItemComplete === 'function' && itemForBtn?.id != null
+                            ? () => onItemComplete(String(itemForBtn.id))
+                            : undefined, onMore: typeof onMore === 'function'
+                            ? (e) => onMore(itemForBtn, e)
+                            : undefined }, itemForBtn?.id != null ? `${type?.key || 't'}-${String(itemForBtn.id)}` : `${type?.key || 't'}-${idx}`));
+                }) }), total > BTN_COUNT_MAX && visible < total && (_jsx("div", { className: "training-block__more", children: _jsx(Button, { size: 48, type: "bar", icon: "plus", onClick: loadMore, ariaLabel: t('common.loadMore', '더보기'), label: t('common.loadMore', '더보기'), variant: "main" }) }))] }));
+}

package/dist/packages/core/src/components/Training/TrainingBlockButton.css

@@ -0,0 +1,337 @@
+.training-block-button {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  padding: var(--spacing-l);
+  border-radius: var(--radius-m);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--color-white);
+  box-shadow: var(--shadow-card);
+  cursor: pointer;
+  transition: all 0.12s;
+  text-align: left;
+  box-sizing: border-box;
+  width: 200px;
+  height: 200px;
+}
+
+.training-block-button:hover {
+  border-color: var(--color-main);
+  box-shadow: var(--shadow-card);
+}
+.training-block-button--completed {
+  box-shadow: var(--shadow-card);
+}
+
+/* 더보기(⋯) 버튼 — 카테고리 아이콘과 같은 행(콘텐츠 상단)에 우측 정렬.
+   아이콘은 static이라, 같은 패딩 인셋으로 맞춰 수평을 일치시킨다.
+   (버튼/아이콘 모두 40px이라 top을 같게 두면 세로 중심도 일치) */
+.training-block-button__more {
+  position: absolute;
+  /* 카테고리 아이콘이 콘텐츠 상단보다 약 2px 위로 렌더되므로 그만큼 보정해 수평 일치 */
+  top: calc(var(--spacing-l) - 2px);
+  right: var(--spacing-l);
+  z-index: 2;
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .training-block-button {
+    width: 190px;
+    height: 190px;
+  }
+}
+
+@media (max-width: 767px) {
+  .training-block-button {
+    width: calc(50% - 5px);
+    height: 170px;
+  }
+  /* 가용 타이틀 공간: top(68px) ~ desc 시작(130px) = 62px
+     h3 기본 line-height 26px → 3줄 = 78px → 16px 초과
+     15px / 20px 으로 줄이면 3줄 = 60px ≤ 62px ✓
+     line-clamp:3 은 혹시 모를 4줄 이상만 잘라냄 — 1·2줄은 변화 없음 */
+  .training-block-button__title.h3 {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+.training-block-button__left {
+  display: block;
+}
+
+.training-block-button__title.h3 {
+  position: absolute;
+  top: 68px;
+  left: 20px;
+  right: 20px;
+  color: var(--color-black);
+  margin: 0;
+}
+
+.training-block-button__description {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  right: 20px;
+  height: 20px;
+}
+
+.training-block-button__count {
+  color: var(--color-darkGray);
+}
+
+.training-block-button__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  color: var(--color-lightGray);
+  /* 카운트가 없을 때(space-between 단일 자식이라 좌측에 붙음)도 셰브론은 항상 우측 정렬. */
+  margin-left: auto;
+}
+
+.training-block-button__chevron-icon,
+.training-block-button__chevron-icon-image,
+.training-block-button__chevron-icon-mask,
+.training-block-button__chevron-icon-svg {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-lightGray);
+}
+
+.training-block-button__chevron-icon-mask {
+  background-color: currentColor;
+  -webkit-mask-image: var(--icon-url);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  mask-image: var(--icon-url);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+
+.training-block-button__chevron-icon-image {
+  display: block;
+  object-fit: contain;
+}
+
+.training-block-button__chevron-icon-svg svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+  fill: currentColor;
+}
+
+/* Position category icon inside the training block button (square) */
+.training-block-button .category-icon__wrap {
+  position: absolute;
+  top: 18px;
+  left: 18px;
+}
+.training-block-button .category-icon {
+  position: static;   /* 크기는 iconSize prop이 결정 */
+}
+
+/* ── 타입 라벨 — 아이콘 아래, 제목 위 ── */
+.training-block-button__type-label {
+  position: absolute;
+  top: 68px;
+  left: 20px;
+  right: 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--color-gray);
+}
+
+/* 타입 라벨이 있으면 제목을 아래로 내림 */
+.training-block-button--withType .training-block-button__title.h3 {
+  top: 86px;
+}
+
+/* ── small 변형 — 120×120 축소 카드 ────────────────────────────────────────── */
+.training-block-button--small {
+  width: 120px;
+  height: 120px;
+}
+
+.training-block-button--small .category-icon__wrap {
+  top: 12px;
+  left: 12px;
+}
+
+.training-block-button--small .training-block-button__type-label {
+  position: absolute;
+  top: 44px;
+  left: 12px;
+  right: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--color-gray);
+}
+
+.training-block-button--small .training-block-button__title {
+  position: absolute;
+  top: 60px;
+  left: 12px;
+  right: 12px;
+  color: var(--color-black);
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* 타입 라벨이 없으면 그 자리(44px)로 타이틀을 끌어올리고, 남는 세로 공간에 최대 2줄까지 표시한다. */
+.training-block-button--small.training-block-button--no-type-label .training-block-button__title {
+  top: 44px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+}
+
+.training-block-button--small .training-block-button__description {
+  bottom: 10px;
+  left: 12px;
+  right: 12px;
+  height: 16px;
+}
+
+/* small 카드에서도 더보기(⋯)를 우측 상단에 노출 — 카테고리 아이콘(top:12)과 같은 행에 맞춘다.
+   (onMore를 넘긴 사용처에서만 렌더되므로, 선택 그리드처럼 onMore 없는 곳엔 영향 없음) */
+.training-block-button--small .training-block-button__more {
+  top: 6px;
+  right: 6px;
+}
+
+.training-block-button--small .training-block-button__chevron-icon,
+.training-block-button--small .training-block-button__chevron-icon-svg {
+  width: 12px;
+  height: 12px;
+}
+.training-block-button--small .training-block-button__chevron-icon-svg svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* ── list 변형 ──────────────────────────────────────────────────────────────── */
+.training-block-button--list {
+  width: 200px;
+  min-height: 68px;
+  padding: 0 12px;
+  box-shadow: none;
+}
+
+.training-block-button--list .training-block-button__left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  width: 100%;
+  height: 100%;
+}
+
+.training-block-button--list .category-icon__wrap {
+  position: static;
+  flex-shrink: 0;
+  order: 1;
+}
+
+/* 제목: 한 줄 말줄임 */
+.training-block-button--list .training-block-button__title {
+  order: 2;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-black);
+  position: static;
+}
+
+/* desc (count + chevron): list에서 숨김 */
+.training-block-button--list .training-block-button__description {
+  display: none;
+}
+
+/* CircleBadge: list 모드에서도 position absolute (top-left) 유지 */
+
+/* preview play button: list 가장 우측 */
+.training-block-button--list .training-block-button__preview {
+  order: 4;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* preview play button: small 카드 우측 상단 — 좌측 아이콘(top:12)과 수평 정렬 */
+.training-block-button--small .training-block-button__preview {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── compact 변형 — 툴팁 등 좁은 공간용 ─────────────────────────────────────── */
+.training-block-button--compact {
+  width: 100%;
+  height: 40px;
+  padding: 0;
+  box-shadow: none;
+  border-color: transparent;
+  background: transparent;
+}
+
+.training-block-button--compact:hover {
+  background: var(--color-darkWhite);
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.training-block-button--compact .training-block-button__left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+  height: 100%;
+}
+
+.training-block-button--compact .category-icon__wrap {
+  position: static;
+  flex-shrink: 0;
+  order: 1;
+}
+
+
+.training-block-button--compact .training-block-button__title {
+  order: 2;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-black);
+  position: static;
+}
+
+.training-block-button--compact .training-block-button__description {
+  display: none;
+}
+

package/dist/packages/core/src/components/Training/TrainingBlockButton.d.ts

@@ -0,0 +1,5 @@
+import './TrainingBlockButton.css';
+export type { TrainingBlockButtonPopupProps, TrainingBlockButtonProps } from './trainingBlockButtonTypes';
+import type { TrainingBlockButtonProps } from './trainingBlockButtonTypes';
+/** @public */
+export default function TrainingBlockButton(props: TrainingBlockButtonProps): import("react").JSX.Element;