@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,193 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getTopicTypes, getTrainingTypes } from '../../utils/categories';
+import Icon from '../Icon';
+import Button from '../Button';
+import CategoryIcon from './CategoryIcon';
+import InfoTooltip from '../Tooltip/InfoTooltip';
+import DescriptionTooltip from '../Tooltip/DescriptionTooltip';
+import Badge from '../Badge';
+import { useWindowEvent } from '../../hooks/useWindowEvent';
+import './TrainingBlockButton.css';
+import { useAudioPreview } from './useAudioPreview';
+import { extractProblemText } from './trainingBlockButtonTypes';
+// ─── 컴포넌트 ─────────────────────────────────────────────────────────────────
+/** @public */
+export default function TrainingBlockButton(props) {
+    const { index, type, trainingData, ariaLabel, depth, renderPopup, completed, completedIds, selectedIds, tooltipText, useDescriptionTooltip = false, onRemove, hideCheckBadge = false, showTypeLabel = false, onComplete, onSelect, onMore, countLabelOverride, size = 'square' } = props || {};
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const btnRef = useRef(null);
+    const [btnHover, setBtnHover] = useState(false);
+    useEffect(() => {
+        if (btnRef.current?.matches(':hover'))
+            setBtnHover(true);
+    }, []);
+    const { playing, playingIndex, previewUrls, previewHover, setPreviewHover, previewBtnRef, handlePreview } = useAudioPreview(trainingData, type?.key);
+    // 선택형(onSelect)이면 선택 콜백, 아니면 팝업 열기 — 클릭/키보드 공통 진입점
+    const handleActivate = useCallback(() => { if (onSelect)
+        onSelect();
+    else
+        setOpen(true); }, [onSelect]);
+    const handleClose = useCallback(() => setOpen(false), []);
+    const handleBtnHoverOn = useCallback(() => setBtnHover(true), []);
+    const handleBtnHoverClose = useCallback(() => setBtnHover(false), []);
+    const handlePreviewHoverOn = useCallback(() => setPreviewHover(true), [setPreviewHover]);
+    const handlePreviewHoverClose = useCallback(() => setPreviewHover(false), [setPreviewHover]);
+    // 툴팁이 뜰 때 앵커 위치를 측정 — 렌더링 중 ref.current를 직접 읽지 않도록 effect에서 state로 옮김
+    const [previewAnchorRect, setPreviewAnchorRect] = useState(null);
+    useLayoutEffect(() => {
+        if (previewHover)
+            setPreviewAnchorRect(previewBtnRef.current?.getBoundingClientRect() ?? null);
+    }, [previewHover, previewBtnRef]);
+    const [btnAnchorRect, setBtnAnchorRect] = useState(null);
+    useLayoutEffect(() => {
+        if (btnHover && !open && useDescriptionTooltip)
+            setBtnAnchorRect(btnRef.current?.getBoundingClientRect() ?? null);
+    }, [btnHover, open, useDescriptionTooltip]);
+    const handleKeyDown = useCallback((e) => { if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleActivate();
+    } }, [handleActivate]);
+    const topic = trainingData || null;
+    const tooltipItems = useMemo(() => {
+        if (!useDescriptionTooltip)
+            return null;
+        const explicit = tooltipText
+            ? (Array.isArray(tooltipText) ? tooltipText : [tooltipText]).filter(Boolean)
+            : null;
+        const auto = explicit && explicit.length > 0 ? explicit : extractProblemText(topic);
+        return auto && auto.length > 0 ? auto : null;
+    }, [useDescriptionTooltip, tooltipText, topic]);
+    const handleRemoveClick = useCallback((e) => { e.stopPropagation(); onRemove?.(); }, [onRemove]);
+    const handlePreviewAreaClick = useCallback((e) => e.stopPropagation(), []);
+    const handleComplete = useCallback((result) => {
+        if (typeof onComplete === 'function')
+            onComplete(result);
+    }, [onComplete]);
+    const isCompleted = completed || (completedIds && trainingData?.id != null ? completedIds.has(String(trainingData.id)) : false);
+    const isSelected = !isCompleted && (selectedIds != null && trainingData?.id != null ? selectedIds.has(String(trainingData.id)) : false);
+    useWindowEvent('speechear.popup.close', handleClose);
+    const topicTypes = getTopicTypes();
+    const defaultTitle = `${type?.label || ''} ${index + 1}`;
+    const itemTitle = topic?.title || topic?.name || defaultTitle;
+    let iconForBtn = type?.icon;
+    let wrapperStyle = undefined;
+    let mainName = '';
+    let subName = '';
+    try {
+        const mainKey = topic?.category_0 || topic?.category_main_code || topic?.category_main;
+        const subKey = topic?.category_1 || topic?.category_sub_code || topic?.category_sub;
+        const parent = topicTypes.find((c) => c.key === mainKey);
+        if (parent?.icon)
+            iconForBtn = parent.icon;
+        if (!wrapperStyle && parent?.color) {
+            wrapperStyle = { ['--t-item-fg']: parent.color };
+        }
+        // trainingData에 직접 지정된 아이콘 색상 (카테고리 색상 미설정 시 적용)
+        if (!wrapperStyle && topic?.iconColor) {
+            const c = topic.iconColor;
+            wrapperStyle = { ['--t-item-fg']: c };
+        }
+        mainName = parent?.label || '';
+        try {
+            subName = parent?.subs?.find((s) => s.key === subKey)?.label || '';
+        }
+        catch (_) { }
+    }
+    catch (_) { }
+    // 아이콘 호버·팝업 툴팁 — 카테고리가 있으면 카테고리, 없으면 훈련 타입 이름, 그마저 없으면 제목.
+    const popupIconTooltip = subName ? `${mainName} / ${subName}` : (mainName || type?.label || itemTitle);
+    const q = (n) => t('training.countQuestions', { n });
+    const s = (n) => t('training.countSentences', { n });
+    // 문항수가 정해지지 않으면(계산 불가) 가짜 기본값을 보이지 않도록 빈 값으로 둔다.
+    let countLabel = '';
+    try {
+        if (topic) {
+            if (type?.key === 'LISTEN_IN_NOISE') {
+                let n = 0;
+                if (Array.isArray(topic.items) && topic.items.length > 0)
+                    n = topic.items.length;
+                else if (Array.isArray(topic.sentences) && topic.sentences.length > 0)
+                    n = topic.sentences.length;
+                else if (topic.sentences)
+                    n = 1;
+                countLabel = s(n);
+            }
+            else if (type?.key === 'SHORT_STORY') {
+                let n = 1;
+                if (Array.isArray(trainingData?.items))
+                    n = trainingData.items.length;
+                else if (Array.isArray(trainingData?.raw && trainingData.raw?.items))
+                    n = trainingData.raw.items.length;
+                else if (Array.isArray(topic?.questions))
+                    n = topic.questions.length;
+                else if (Array.isArray(topic?.sentences))
+                    n = topic.sentences.length;
+                countLabel = q(n);
+            }
+            else if (type?.key === 'LONG_STORY') {
+                // 긴 이야기 문제는 각 item의 questionItems 배열에 담김 → 전체 문제 수로 합산.
+                let n = 1;
+                if (Array.isArray(topic.items) && topic.items.length > 0) {
+                    const totalQ = topic.items.reduce((acc, it) => {
+                        const qi = it.questionItems;
+                        if (Array.isArray(qi))
+                            return acc + qi.length;
+                        if (Array.isArray(it.questions))
+                            return acc + it.questions.length;
+                        return acc;
+                    }, 0);
+                    n = totalQ > 0 ? totalQ : topic.items.length;
+                }
+                else if (Array.isArray(topic.questions) && topic.questions.length > 0) {
+                    n = topic.questions.length;
+                }
+                else if (Array.isArray(topic.sentences) && topic.sentences.length > 0) {
+                    n = topic.sentences.length;
+                }
+                countLabel = q(n);
+            }
+            else if (type?.key === 'ORDERING_SENTENCE') {
+                // 순서화 문제의 문장은 items 배열에 담김(각 항목이 한 문장). sentences는 폴백.
+                let n = 1;
+                if (Array.isArray(topic.items) && topic.items.length > 0)
+                    n = topic.items.length;
+                else if (Array.isArray(topic.sentences) && topic.sentences.length > 0)
+                    n = topic.sentences.length;
+                countLabel = s(n);
+            }
+            else if (Array.isArray(topic.items)) {
+                countLabel = topic.items.length > 0 ? q(topic.items.length) : '';
+            }
+        }
+    }
+    catch (_) { }
+    const isList = size === 'list';
+    const isCompact = size === 'compact';
+    const isSmall = size === 'small';
+    const trainingTypeName = isSmall && type?.key
+        ? (getTrainingTypes().find(t => t.key === type.key)?.label ?? '')
+        : '';
+    // 타입 라벨이 실제로 렌더되는지(타이틀과 같으면 숨김) — 레이아웃 여백 정리에 사용.
+    const typeLabelRendered = (!!showTypeLabel && !!type?.label && type.label !== String(itemTitle)) ||
+        (isSmall && !!trainingTypeName && trainingTypeName !== String(itemTitle));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: btnRef, className: `training-block-button${isList ? ' training-block-button--list' : ''}${isCompact ? ' training-block-button--compact' : ''}${isSmall ? ' training-block-button--small' : ''}${isCompleted ? ' training-block-button--completed' : ''}${isSelected ? ' training-block-button--selected' : ''}${typeLabelRendered && !isSmall ? ' training-block-button--withType' : ''}${isSmall && !typeLabelRendered ? ' training-block-button--no-type-label' : ''}`, onClick: handleActivate, onPointerEnter: handleBtnHoverOn, onPointerLeave: handleBtnHoverClose, role: "button", tabIndex: 0, onKeyDown: handleKeyDown, "aria-label": typeof ariaLabel === 'string' ? ariaLabel : (typeof itemTitle === 'string' ? itemTitle : undefined), children: [_jsxs("div", { className: "training-block-button__left", children: [showTypeLabel && type?.label && type.label !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-1", children: type.label })), isSmall && trainingTypeName && trainingTypeName !== String(itemTitle) && (_jsx("span", { className: "training-block-button__type-label caption-2", children: trainingTypeName })), _jsx(CategoryIcon, { icon: iconForBtn, label: itemTitle, tooltip: popupIconTooltip, wrapperStyle: wrapperStyle, iconSize: (isSmall || isCompact) ? 'small' : 'medium' }), !hideCheckBadge && (isCompleted || isSelected) && !(onRemove && btnHover) && (_jsx(Badge, { type: "dot", icon: "check", position: "top-left", size: "medium", "aria-label": isCompleted ? t('training.completed', '훈련 완료') : t('training.selected', '선택됨') })), onRemove && btnHover && (_jsx(Badge, { type: "dot", icon: "remove", position: "top-left", size: "medium", "aria-label": t('common.remove', '제거'), onClick: handleRemoveClick })), _jsx("div", { className: `training-block-button__title ${isCompact ? 'body-3' : isSmall ? 'body-3b' : 'h3'}`, children: String(itemTitle) }), _jsxs("div", { className: "training-block-button__description", children: [(() => {
+                                        const countText = countLabelOverride !== undefined ? countLabelOverride : countLabel;
+                                        // 정해진 문항수가 없으면(빈 값) 카운트 요소 자체를 그리지 않는다.
+                                        return countText ? (_jsx("div", { className: `training-block-button__count ${isSmall ? 'caption-2' : 'caption-1'}`, children: countText })) : null;
+                                    })(), _jsx("div", { className: "training-block-button__chevron", children: _jsx(Icon, { icon: "chevron-right", label: t('training.next', '다음'), className: "training-block-button__chevron-icon", imgClassName: "training-block-button__chevron-icon-image", maskClassName: "training-block-button__chevron-icon-mask", svgClassName: "training-block-button__chevron-icon-svg", size: isSmall ? 12 : 20 }) })] }), (isList || isSmall) && previewUrls.length > 0 && (_jsx("div", { ref: previewBtnRef, className: "training-block-button__preview", "data-tooltip-ignore": true, onClick: handlePreviewAreaClick, onPointerEnter: handlePreviewHoverOn, onPointerLeave: handlePreviewHoverClose, children: _jsx(Button, { size: isSmall ? 28 : 32, type: "dot", icon: playing ? 'pause' : 'play', variant: isSmall ? 'transparent-lightGray' : 'default', useBorder: false, selected: playing, ariaLabel: playing ? t('training.stop', '정지') : t('training.preview', '미리 듣기'), onClick: handlePreview }) }))] }), onMore && (_jsx("div", { className: "training-block-button__more", "data-tooltip-ignore": true, onClick: e => { e.stopPropagation(); onMore(e); }, children: _jsx(Button, { size: 40, type: "dot", icon: "more-horizontal", variant: "transparent-lightGray", useBorder: false, ariaLabel: t('common.more', '더보기') }) }))] }), previewHover && (_jsx(InfoTooltip, { anchorRect: previewAnchorRect, text: playing ? t('training.stop', '정지') : t('training.preview', '미리 듣기'), offset: 8, onClose: handlePreviewHoverClose })), btnHover && !open && useDescriptionTooltip && (tooltipItems ? (_jsx(DescriptionTooltip, { anchorRect: btnAnchorRect, items: tooltipItems, activeIndex: playingIndex, onClose: handleBtnHoverClose })) : topic?.subTitle ? (_jsx(InfoTooltip, { anchorRect: btnAnchorRect, text: topic.subTitle, offset: 8, onClose: handleBtnHoverClose })) : null), open && renderPopup && renderPopup({
+                trainingData: topic,
+                typeKey: type?.key ?? '',
+                onClose: handleClose,
+                onComplete: handleComplete,
+                popupTitle: String(itemTitle),
+                popupSubTitle: type?.subTitle,
+                depth: depth != null ? String(depth) : undefined,
+                popupIcon: iconForBtn,
+                popupIconTooltip: String(popupIconTooltip),
+                popupWrapperStyle: wrapperStyle,
+            })] }));
+}

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

@@ -0,0 +1,178 @@
+/* ── 공용 훈련 카드 (TrainingCard) — 스토어/나의 문장훈련 공용 ─────────────── */
+.training-card {
+  /* 카드가 자기 폭(360px)을 직접 가짐 — 그리드는 카드 크기대로 배치만 한다 */
+  position: relative; /* CircleBadge(type=dot) absolute 기준점 */
+  width: 360px;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 18px;
+  background: var(--color-white);
+  border: 1px solid transparent;
+  border-radius: var(--radius-card);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.training-card:hover {
+  border-color: var(--color-main);
+  box-shadow: 0 4px 16px var(--color-main-a10);
+}
+.training-card--dragging { opacity: 0.5; }
+.training-card--clickable { cursor: pointer; }
+
+.training-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* title + topActions 같은 행 */
+.training-card__title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.training-card__title {
+  margin: 0;
+  color: var(--color-darkGray);
+  text-align: left;
+  /* 한 줄 말줄임 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.training-card__top-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  margin-right: -8px;
+}
+
+.training-card__publisher {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--color-gray);
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 400;
+  text-align: left;
+  width: fit-content;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+}
+.training-card__publisher:hover { color: var(--color-main); text-decoration: underline; }
+
+.training-card__description {
+  margin: 0;
+  color: var(--color-gray);
+  text-align: left;
+  /* 폰트는 body-3 토큰(14px/22px) 그대로 사용 — override 제거 */
+  /* 한 줄 말줄임 + 빈 설명도 한 줄 높이 유지(설명 유무로 카드 높이 불변) */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: 1.55em;
+}
+
+.training-card__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.training-card__empty { color: var(--color-lightGray); }
+
+.training-card__types {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: center;
+}
+
+.training-card__types .button {
+  min-width: 0;
+  padding-inline: 12px;
+}
+
+.training-card__type {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--badge-color, var(--color-main));
+  background: color-mix(in srgb, var(--badge-color, var(--color-main)) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--badge-color, var(--color-main)) 25%, transparent);
+}
+
+.training-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.training-card__tag {
+  color: var(--color-main);
+  font-size: 11px;
+}
+
+.training-card__words {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-content: flex-start;
+}
+
+.training-card__word {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  font-size: 11px;
+  color: var(--color-darkGray);
+  background: var(--color-deepWhite);
+  border: 1px solid var(--color-whiteLine);
+  white-space: nowrap;
+}
+
+.training-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 8px;
+  gap: var(--spacing-xs);
+}
+
+.training-card__footer-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+/* 등록·수신 날짜 — 11px 작은 글씨라 lightGray(2.5:1)로는 특히 읽기 어려웠다 */
+.training-card__date { color: var(--color-gray); font-size: 11px; white-space: nowrap; }
+
+.training-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.training-card__count {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--color-lightGray);
+  font-size: 11px;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,24 @@
+import './TrainingCard.css';
+import type { ReactNode, DragEvent } from 'react';
+/** @public */
+export type TrainingCardProps = {
+    /** 제목 — 문자열이면 h4 제목으로 감싸고, 노드면 그대로 렌더(예: 인라인 이름변경 입력) */
+    title: ReactNode;
+    /** 한 줄 설명 — 문자열이면 본문 문단으로 감싸고, 노드면 그대로 렌더 */
+    description?: ReactNode;
+    /** 우측 상단 액션 영역 (좋아요/다운로드, ⋯ 메뉴 등) — 클릭이 카드로 전파되지 않음 */
+    topActions?: ReactNode;
+    /** 본문 영역 콘텐츠 (타입 칩, 단어 뱃지, 빈 상태 등) */
+    children?: ReactNode;
+    /** 풋터 좌측 (게시자·날짜 등) */
+    footerLeft?: ReactNode;
+    /** 풋터 우측 (좋아요·다운로드 뱃지 등) */
+    footerRight?: ReactNode;
+    onClick?: () => void;
+    draggable?: boolean;
+    onDragStart?: (e: DragEvent<HTMLDivElement>) => void;
+    onDragEnd?: (e: DragEvent<HTMLDivElement>) => void;
+    className?: string;
+};
+/** @public */
+export default function TrainingCard({ title, description, topActions, children, footerLeft, footerRight, onClick, draggable, onDragStart, onDragEnd, className, }: TrainingCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../utils/cx';
+import './TrainingCard.css';
+import { useCallback } from 'react';
+/** @public */
+export default function TrainingCard({ title, description, topActions, children, footerLeft, footerRight, onClick, draggable, onDragStart, onDragEnd, className, }) {
+    const hasFooter = footerLeft != null || footerRight != null;
+    const hasBody = children != null && children !== false;
+    const handleKeyDown = useCallback((e) => {
+        if (!onClick)
+            return;
+        // topActions 안의 버튼(좋아요/메뉴 등)이 자체적으로 Enter/Space를 처리하므로,
+        // 카드 자기 자신에서 발생한 키 입력만 카드 클릭으로 취급한다
+        if (e.target !== e.currentTarget)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick();
+        }
+    }, [onClick]);
+    return (_jsxs("div", { className: cx('training-card', onClick ? 'training-card--clickable' : '', className), onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, draggable: draggable, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsxs("div", { className: "training-card__header", children: [_jsxs("div", { className: "training-card__title-row", children: [typeof title === 'string'
+                                ? _jsx("h3", { className: "training-card__title h4", children: title })
+                                : title, topActions != null && (_jsx("div", { className: "training-card__top-actions", onClick: (e) => e.stopPropagation(), children: topActions }))] }), description != null
+                        ? (typeof description === 'string'
+                            ? _jsx("p", { className: "training-card__description body-3", children: description })
+                            : description)
+                        : _jsx("p", { className: "training-card__description body-3", "aria-hidden": "true", children: ' ' })] }), hasBody && _jsx("div", { className: "training-card__body", children: children }), hasFooter && (_jsxs("div", { className: "training-card__footer", children: [footerLeft != null && _jsx("div", { className: "training-card__footer-left", children: footerLeft }), footerRight != null && _jsx("div", { className: "training-card__meta", children: footerRight })] }))] }));
+}

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

@@ -0,0 +1,73 @@
+/* ── 훈련 카드 그룹 (TrainingCardGroup) ───────────────── */
+.training-card-group {
+  border: 1px solid var(--color-darkWhite);
+  border-radius: var(--radius-card);
+  background: var(--color-darkWhite);
+  overflow: hidden;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.training-card-group--dragover {
+  border-color: var(--color-main);
+  box-shadow: 0 0 0 2px var(--color-main-a10);
+}
+
+.training-card-group__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 60px;
+  padding: 0 12px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.training-card-group__chevron { flex-shrink: 0; }
+
+.training-card-group__title {
+  color: var(--color-black);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.training-card-group__count {
+  color: var(--color-main);
+  flex-shrink: 0;
+}
+
+.training-card-group__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.training-card-group__empty {
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--color-lightGray);
+}
+
+/* ── 카드 그리드 본문 ─────────────────────────────────── */
+.training-card-group__grid {
+  /* 카드가 자기 폭을 가지므로(360 묶음카드 / 120 small) intrinsic 배치만 한다 */
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 0 12px 12px;
+}
+
+/* 카드는 `max-width: 100%` 로 "자리가 좁으면 줄어든다"고 적어 두었는데, flex 항목의
+   기본 `min-width: auto` 가 **안쪽 내용보다 작아지지 못하게 막아** 그 말이 힘을 못
+   썼다(카드가 360px 를 지정하니 min-content 도 360px 이다).
+
+   폰(375px)에서 잰 결과: 격자 자리 333px 인데 카드는 360px 그대로였고, 그룹이
+   `overflow: hidden` 이라 넘친 38px 가 잘렸다. 하필 그 자리에 `⋯` 메뉴 단추가 있어
+   폰에서는 수정·복사·삭제·숙제 보내기를 **누를 수가 없었다.**
+   (실측: 이 줄을 넣으면 360 → 309, 그룹 넘침 사라짐, 단추가 화면 안으로 돌아온다.) */
+.training-card-group__grid > * {
+  min-width: 0;
+}

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

@@ -0,0 +1,41 @@
+import './TrainingCardGroup.css';
+import type { ReactNode, DragEvent } from 'react';
+/** @public */
+export interface TrainingCardGroupSort {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    /** undefined면 정렬 안 함(placeholder 표시) — 그룹 헤더 정렬 드롭다운의 "값 없음" 상태 */
+    value?: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+/** @public */
+export type TrainingCardGroupProps = {
+    /** 그룹 제목 — 문자열이면 제목으로 감싸고, 노드면 그대로 렌더(예: 인라인 이름변경 입력) */
+    title: ReactNode;
+    /** 제목 옆 카드 개수 */
+    count?: number;
+    /** 접힘 상태 */
+    collapsed?: boolean;
+    /** 헤더 클릭/Enter 시 접기·펼치기 토글 */
+    onToggle?: () => void;
+    /** 헤더 우측, actions 앞에 놓이는 그룹 내 정렬 드롭다운 */
+    sort?: TrainingCardGroupSort;
+    /** 헤더 우측 액션 영역 (이름변경·추가·삭제 등) — 클릭이 토글로 전파되지 않음 */
+    actions?: ReactNode;
+    /** 본문이 비었는지 — true면 emptyContent를 표시 */
+    empty?: boolean;
+    emptyContent?: ReactNode;
+    /** 드래그 오버 강조 */
+    dragOver?: boolean;
+    onDragOver?: (e: DragEvent<HTMLDivElement>) => void;
+    onDragLeave?: (e: DragEvent<HTMLDivElement>) => void;
+    onDrop?: (e: DragEvent<HTMLDivElement>) => void;
+    /** 카드 그리드 본문 (훈련 카드들) */
+    children?: ReactNode;
+    className?: string;
+};
+/** @public */
+export default function TrainingCardGroup({ title, count, collapsed, onToggle, sort, actions, empty, emptyContent, dragOver, onDragOver, onDragLeave, onDrop, children, className, }: TrainingCardGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../utils/cx';
+import { useTranslation } from 'react-i18next';
+import './TrainingCardGroup.css';
+import Button from '../Button';
+import Dropdown from '../Dropdown';
+/** @public */
+export default function TrainingCardGroup({ title, count, collapsed = false, onToggle, sort, actions, empty = false, emptyContent, dragOver = false, onDragOver, onDragLeave, onDrop, children, className, }) {
+    const { t } = useTranslation();
+    const cls = cx('training-card-group', dragOver && 'training-card-group--dragover', collapsed && 'training-card-group--collapsed', className);
+    return (_jsxs("div", { className: cls, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: [_jsxs("header", { className: "training-card-group__header", children: [_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), className: "training-card-group__chevron", onClick: onToggle }), typeof title === 'string'
+                        ? _jsx("span", { className: "training-card-group__title h5b", children: title })
+                        : title, count !== undefined && _jsx("span", { className: "training-card-group__count body-3b", children: count }), (sort || actions != null) && (_jsxs("span", { className: "training-card-group__actions", onClick: e => e.stopPropagation(), children: [sort && (_jsx(Dropdown, { size: 40, options: sort.options, value: sort.value, placeholder: sort.placeholder, onChange: sort.onChange })), actions] }))] }), !collapsed && (empty
+                ? _jsx("div", { className: "training-card-group__empty body-3", children: emptyContent })
+                : _jsx("div", { className: "training-card-group__grid", children: children }))] }));
+}