@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,89 @@
+/* Styles for the training step title row */
+.training-step__title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    width: 100%;
+    position: relative; /* establish containing block for absolute .title-buttons */
+    padding-right: 72px; /* reserve space so title text doesn't overlap buttons */
+}
+.training-step__title-row .training-step__title {
+    margin: 0;
+    padding: 0;
+    color: var(--color-black)
+}
+
+/* faded modifier: apply disabled color only to the text span */
+.training-step__title--faded .training-step__title-text {
+    border-radius: var(--radius-xs);
+    background-color: var(--color-darkWhite);
+    color: transparent;
+    transition: color 140ms ease, opacity 140ms ease;
+    opacity: 1;
+}
+
+
+.training-step__title-row .training-step__title .title-extra {
+    margin-left: var(--spacing-xs);
+}
+.training-step__title-row .title-controls {
+    display: flex;
+    gap: 6px;
+    margin-left: auto;
+    align-items: center;
+}
+
+/* container for title buttons (keeps layout scoped and prevents global .button28 rules from leaking) */
+.training-step__title-row .title-controls .title-buttons {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    overflow: visible
+}
+
+.training-step__title-row .title-controls .title-buttons .button28 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+/* State modifiers */
+/* Disable pointer events on the title text for disabled/done state but
+   keep the title controls (buttons) interactive. Previously the rule
+   disabled the entire row which prevented title buttons from receiving events. */
+.training-step__title-row--disabled .training-step__title,
+.training-step__title-row--done .training-step__title {
+    pointer-events: none;
+}
+
+/* When the title row is disabled, keep title text non-interactive and
+   disable the title action buttons. When active or done, buttons are
+   interactive. We also dim disabled buttons slightly. */
+.training-step__title-row--disabled .title-controls {
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.training-step__title-row--active .title-controls,
+.training-step__title-row--done .title-controls {
+    pointer-events: auto;
+    opacity: 1;
+}
+
+/* disabled alias + explicit `done` state both map to the disabled color.
+   !important 불필요 — 상태 클래스는 state 값 하나로만 결정되어 기본 규칙(.training-step__title-row .training-step__title)과
+   동시에 적용되지만 특이도가 같고 이 규칙이 소스 순서상 뒤라 자연스럽게 우선함. */
+.training-step__title-row--disabled .training-step__title,
+.training-step__title-row--done .training-step__title {
+    color: var(--color-disabled);
+}
+
+.training-step__title-row--active .training-step__title {
+    color: var(--color-black);
+}

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

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import './TrainingStepTitle.css';
+/** @public */
+export type TrainingStepTitleProps = {
+    title?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    state?: string;
+    usePreviewTextBtn?: boolean;
+    onPreviewTextBtn?: (() => ReactNode | false | void) | undefined;
+    previewText?: ReactNode;
+    useFaded?: boolean;
+    /** '모두 듣기' 버튼 노출 여부 — 여러 소리를 순서대로 재생할 때 사용 */
+    usePlayAllBtn?: boolean;
+    /** '모두 듣기' 버튼 클릭 콜백 */
+    onPlayAll?: () => void;
+    /** 모두 듣기 재생 진행 중 여부 — true면 버튼을 비활성/선택 상태로 표시 */
+    playAllActive?: boolean;
+};
+/** @public */
+export default function TrainingStepTitle({ title, children, className, state, usePreviewTextBtn, onPreviewTextBtn, previewText, useFaded, usePlayAllBtn, onPlayAll, playAllActive, }: TrainingStepTitleProps): import("react").JSX.Element;

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

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from '../Button';
+import useMediaQuery from '../../hooks/useMediaQuery';
+import TextBoxTooltip from '../Tooltip/TextBoxTooltip';
+import './TrainingStepTitle.css';
+/** @public */
+export default function TrainingStepTitle({ title, children, className = "", state = "disabled", usePreviewTextBtn = false, onPreviewTextBtn, previewText = null, useFaded, usePlayAllBtn = false, onPlayAll, playAllActive = false, }) {
+    const { t } = useTranslation();
+    const isMobile = useMediaQuery('(max-width: 767px)');
+    const titleFadedClass = (useFaded && state === 'disabled') ? 'training-step__title--faded' : '';
+    const cls = `training-step__title h4 ${titleFadedClass} ${className}`.trim();
+    const rowClass = `training-step__title-row training-step__title-row--${state}`.trim();
+    const btnRef = useRef(null);
+    const [showPreview, setShowPreview] = useState(false);
+    const [anchorRect, setAnchorRect] = useState(null);
+    const [previewContent, setPreviewContent] = useState(null);
+    // 인라인 화살표 함수로 넘어오는 경우가 있어 매 렌더 identity가 바뀐다.
+    // 아래 동기화 effect가 그때마다 재실행되지 않도록 ref로 최신 값만 들고 간다.
+    /* 갱신은 렌더가 아니라 효과에서 한다 — 렌더 중에 쓰면 **커밋되지 않을 렌더의 값**이
+       남을 수 있다(동시성 렌더링에서 React 는 그리다 버리는 렌더가 있다). 이 값을 읽는
+       곳은 아래 효과 하나뿐이고, 효과는 이 효과보다 뒤에 선언돼 있어 늦지 않는다. */
+    const previewFnRef = useRef(onPreviewTextBtn);
+    useEffect(() => { previewFnRef.current = onPreviewTextBtn; });
+    // previewText의 안정적인 비교 키. 문자열/문자열 배열만 키를 만들 수 있고,
+    // 임의 ReactNode는 비교할 방법이 없으므로 동기화 대상에서 제외한다(빈 키).
+    const previewKey = useMemo(() => {
+        if (previewText == null)
+            return '';
+        if (typeof previewText === 'string' || typeof previewText === 'number')
+            return String(previewText);
+        if (Array.isArray(previewText) && previewText.every(v => typeof v === 'string' || typeof v === 'number')) {
+            return previewText.join('
');
+        }
+        return '';
+    }, [previewText]);
+    const handlePreviewClose = useCallback(() => {
+        setShowPreview(false);
+        setAnchorRect(null);
+        setPreviewContent(null);
+    }, []);
+    // 미리보기를 열어둔 채 다음 문제로 넘어가면 클릭 시점에 굳어진 previewContent가 그대로 남아
+    // 이전 문제의 단어가 계속 보였다(1번 '욕실'이 2번 문제에서도 노출 — 오답 힌트가 된다).
+    // 내용이 바뀌면 콜백을 다시 실행해 현재 문제 기준으로 갱신한다.
+    useEffect(() => {
+        if (!showPreview)
+            return;
+        let res = undefined;
+        try {
+            if (typeof previewFnRef.current === 'function')
+                res = previewFnRef.current();
+        }
+        catch { /* 미리보기 갱신 실패는 무시 */ }
+        if (res === false) {
+            handlePreviewClose();
+            return;
+        }
+        setPreviewContent(typeof res !== 'undefined' && res !== null ? res : null);
+        // showPreview는 열림 여부 가드일 뿐, 내용이 바뀔 때만 갱신해야 하므로 previewKey에만 반응한다.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [previewKey]);
+    const handlePreviewButtonClick = useCallback(() => {
+        let res = undefined;
+        try {
+            if (typeof onPreviewTextBtn === 'function')
+                res = onPreviewTextBtn();
+        }
+        catch (e) { }
+        if (res === false)
+            return;
+        const content = typeof res !== 'undefined' && res !== null ? res : previewText;
+        setPreviewContent(content);
+        if (!btnRef.current) {
+            setShowPreview(s => !s);
+            return;
+        }
+        if (!showPreview) {
+            const r = btnRef.current.getBoundingClientRect();
+            setAnchorRect(r);
+            setShowPreview(true);
+        }
+        else {
+            setShowPreview(false);
+            setAnchorRect(null);
+            setPreviewContent(null);
+        }
+    }, [onPreviewTextBtn, previewText, showPreview]);
+    return (_jsxs("div", { className: rowClass, children: [_jsx("p", { className: cls, children: _jsx("span", { className: "training-step__title-text", children: title ?? children }) }), (usePreviewTextBtn || usePlayAllBtn) ? (_jsxs("div", { className: "title-controls", children: [_jsxs("div", { className: "title-buttons", children: [usePlayAllBtn && (_jsx(Button, { size: 32, type: isMobile ? 'dot' : 'bar', icon: "play-circle", label: isMobile ? undefined : t('training.playAll', '모두 듣기'), ariaLabel: t('training.playAll', '모두 듣기'), selected: playAllActive, onClick: onPlayAll, variant: state === 'disabled' ? 'disabled' : 'default', disabled: state === 'disabled' || playAllActive })), usePreviewTextBtn && (_jsx("div", { ref: btnRef, children: _jsx(Button, { size: 32, type: isMobile ? 'dot' : 'bar', icon: "eye", label: isMobile ? undefined : t('training.sentencePreview', '문장 미리보기'), ariaLabel: t('training.sentencePreview', '문장 미리보기'), selected: showPreview, onClick: handlePreviewButtonClick, variant: state === 'disabled' ? 'disabled' : 'default', disabled: !previewText && typeof onPreviewTextBtn !== 'function' }) }))] }), showPreview && (_jsx(TextBoxTooltip, { text: (previewContent ?? previewText), label: t('training.sentencePreview', '문장 미리보기'), anchorRect: anchorRect, onClose: handlePreviewClose, closeOnOutsideClick: false, isMobilePopup: true }))] })) : null] }));
+}

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

@@ -0,0 +1,266 @@
+.training-word-card {
+  /* 고정 크기 — 스텝 안에 3장이 나란히 쓰이므로 컨테이너 폭에 따라 늘어나지 않는다 */
+  flex: none;
+  width: 200px;
+  height: 260px;
+  position: relative;
+  background: var(--color-white);
+  border-radius: var(--radius-m);
+  /* 그림자는 회전하는 __flipper에 준다 — 플립할 때 그림자도 함께 3D로 움직이게.
+     그래서 안쪽 그림자가 잘리지 않도록 컨테이너 overflow는 visible로 둔다(모서리 클리핑은 각 면이 담당). */
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  /* 3D card flip perspective */
+  perspective: 900px;
+}
+
+/* ── Disabled state ── */
+.training-word-card--disabled {
+  cursor: default;
+}
+
+/* ── 3D Flipper ── */
+.training-word-card__flipper {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius-m);
+  /* 그림자를 회전 레이어에 둔다 — rotateY 애니메이션과 함께 그림자도 3D로 기울며 움직인다. */
+  box-shadow: var(--shadow-card);
+  transform-style: preserve-3d;
+  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+}
+
+/* flipped = back face is showing (disabled 이거나 단어가 없는 빈 카드) */
+.training-word-card--flipped .training-word-card__flipper {
+  transform: rotateY(180deg);
+}
+
+/* ── Front face (card content) ──
+   image / word+발음 / 소리듣기 버튼 중 숨겨지는 항목이 있어도, 보이는 항목끼리
+   하나의 그룹으로 항상 카드 중앙에 오도록 front 자체를 센터링 flex 컨테이너로 둔다
+   (항목마다 개별 wrapper로 나눠서 정렬하지 않음). 패딩은 selectable 여부와 무관하게 동일. */
+.training-word-card__front {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-s);
+  padding: 10px var(--spacing-m);
+  min-height: 0;
+  box-sizing: border-box;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+/* ── Back face (disabled / face-down state) ── */
+.training-word-card__back {
+  position: absolute;
+  inset: 0;
+  background: var(--color-deepWhite, #f3f5f6);
+  border-radius: var(--radius-m);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  /* back face starts rotated 180deg so it's hidden when card is face-up */
+  transform: rotateY(180deg);
+}
+
+.training-word-card__back::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 8px solid var(--color-darkWhite);
+  border-radius: var(--radius-m);
+  pointer-events: none;
+}
+
+.training-word-card__disabled-symbol {
+  width: 52px;
+  height: 52px;
+  filter: invert(93%) sepia(6%) saturate(247%) hue-rotate(163deg) brightness(101%) contrast(93%);
+  opacity: 0.6;
+  user-select: none;
+  pointer-events: none;
+}
+
+/* ── Selected badge (우상단 체크 버튼) ── */
+.training-word-card__selected-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  transform: translate(12%, -12%);
+}
+/* 위치는 이 래퍼가 잡으므로 배지는 position='inline'으로 쓰는데, inline은 흐름 배치용이라
+   오버레이 테두리가 없다 — 카드 모서리에 걸쳐 놓는 배지라 흰 테두리를 되살린다. */
+.training-word-card__selected-badge .circle-badge {
+  border: 2px solid var(--color-pureWhite);
+}
+
+/* ── Selectable / selected states ──
+   패딩은 selectable 여부와 무관하게 .training-word-card__front에서 공통으로 준다.
+   overflow:visible만 selectable에서 필요 — 우상단 선택 배지가 카드 밖으로 살짝 튀어나오기 때문. */
+.training-word-card--selectable {
+  cursor: pointer;
+  /* outline을 투명으로 미리 깔아 두고 '색만' 전환한다 — 없다가 생기게 두면 전환 시작색이
+     브라우저 기본값(currentcolor≈검정)이라 호버 순간 검은 선이 한 번 스친다.
+     outline은 레이아웃을 밀지 않으므로 항상 깔려 있어도 무해하다. */
+  outline: 1px solid transparent;
+  transition: box-shadow 0.15s, outline-color 0.15s;
+  overflow: visible;
+}
+
+/* 호버도 선택과 같은 1px main 라인 — 구분은 그림자와 우상단 체크 배지가 맡는다. */
+.training-word-card--selectable:not(.training-word-card--disabled):hover {
+  outline: 1px solid var(--color-main);
+  box-shadow: 0 4px 16px rgba(9, 30, 34, 0.12);
+}
+
+/* 선택 표시는 실선 하나로만 — 회색 그림자와 바깥 halo를 함께 쓰면 테두리가 두 겹으로
+   보여 지저분했다. 호버(1px)보다 굵은 2px로 두어 선택 상태가 구분된다.
+   두 번째 셀렉터는 호버 규칙(:not()+:hover로 특이도가 더 높다)이 선택 상태를 덮어
+   1px로 되돌리는 걸 막기 위한 것 — 선택된 카드는 호버 중에도 2px를 유지한다. */
+.training-word-card--selected,
+.training-word-card--selectable.training-word-card--selected:hover {
+  outline: 2px solid var(--color-main, #4f6ef7);
+  box-shadow: none;
+}
+
+/* ── Image area ── */
+.training-word-card__image-wrap {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  background: #f3f5f6;
+  overflow: hidden;
+  flex-shrink: 0;
+  padding: 0;
+  border-radius: var(--radius-s);
+}
+
+.training-word-card__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: opacity 0.2s;
+  user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: none;
+}
+
+.training-word-card__placeholder {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(160deg, #f0f2f4 0%, #e4e8ea 100%);
+}
+
+/* ── Loading spinner ── */
+.training-word-card__spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.training-word-card__spinner::after {
+  content: '';
+  width: 28px;
+  height: 28px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-top-color: var(--color-main, #4f6ef7);
+  border-radius: 50%;
+  animation: twCard__spin 0.7s linear infinite;
+}
+
+@keyframes twCard__spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Body (word + pronunciation) ── */
+.training-word-card__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  padding: 0;
+}
+
+.training-word-card__word {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--color-black, #0b2b35);
+  text-align: center;
+  line-height: 1.25;
+  word-break: keep-all;
+}
+
+.training-word-card__pronunciation {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-gray, #70858a);
+  text-align: center;
+  line-height: 1.4;
+}
+
+.training-word-card__colloquial {
+  color: var(--color-lightGray, #a0b0b5);
+  text-align: center;
+  line-height: 1.4;
+}
+
+/* ── Bottom (소리듣기 버튼) ── */
+.training-word-card__bottom {
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ── Responsive ── */
+@media (max-width: 720px) {
+  .training-word-card { border-radius: var(--radius-card); }
+
+  .training-word-card__word { font-size: 18px; }
+  .training-word-card__body { gap: 2px; }
+  .training-word-card__front { gap: var(--spacing-xs); }
+  .training-word-card__back { border-radius: var(--radius-card); }
+  .training-word-card__back::before { border-radius: var(--radius-card); }
+}
+
+@media (max-width: 767px) {
+  .training-word-card {
+    /* 3장이 한 화면(그리드)에 들어오도록 고정 폭·높이를 풀고 셀 크기에 맞춘다 */
+    width: 100%;
+    height: auto;
+    border-radius: var(--radius-card);
+  }
+  /* 그림자는 flipper에 있으므로 모바일 값도 flipper에서 조정 */
+  .training-word-card__flipper {
+    border-radius: var(--radius-card);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+  }
+  .training-word-card__front {
+    padding: var(--spacing-s);
+  }
+  /* 카드가 작아진 만큼 테두리도 얇게 */
+  .training-word-card__back::before {
+    border-width: 4px;
+  }
+  /* 이미지 1:1 비율 — 좁은 카드에서 균형감 향상 */
+  .training-word-card__image-wrap {
+    aspect-ratio: 1 / 1;
+  }
+  .training-word-card__word { font-size: 14px; }
+  .training-word-card__pronunciation { font-size: 11px; }
+  .training-word-card__body { gap: 2px; }
+  .training-word-card__front { gap: 4px; }
+}

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

@@ -0,0 +1,43 @@
+import './TrainingWordCard.css';
+/** @public */
+export type TrainingWordCardItem = {
+    id?: string;
+    word?: string;
+    title?: string;
+    image?: string;
+    audio?: string | string[] | {
+        src?: string;
+    };
+    sound?: string;
+    audioKey?: string;
+    pronunciation?: string;
+    subLabel?: string;
+    colloquialLabel?: string;
+    homonum?: number;
+    [k: string]: unknown;
+};
+/** @public */
+export interface TrainingWordCardHandle {
+    /** 오디오를 재생하고 종료(또는 스킵) 시 resolve — '모두 듣기' 순차 재생 등 부모가 트리거할 때 사용 */
+    play: () => Promise<void>;
+}
+/** @public */
+export interface TrainingWordCardProps {
+    item: TrainingWordCardItem;
+    disabled?: boolean;
+    onPlayDone?: () => void;
+    selectable?: boolean;
+    selected?: boolean;
+    onSelect?: () => void;
+    /** 카드 플립 인 딜레이 (ms). 여러 카드를 순서대로 나타낼 때 사용. */
+    flipDelay?: number;
+    /** 카드의 단어 텍스트(라벨)를 숨깁니다. */
+    hideLabel?: boolean;
+    /** 소리 듣기 버튼을 숨깁니다. */
+    hideAudio?: boolean;
+    /** 선택 순서 번호 (1-based). 설정 시 체크 아이콘 대신 순서 번호를 표시합니다. */
+    orderRank?: number | null;
+}
+/** @public */
+declare const TrainingWordCard: import("react").ForwardRefExoticComponent<TrainingWordCardProps & import("react").RefAttributes<TrainingWordCardHandle>>;
+export default TrainingWordCard;