@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,210 @@
+.page-popup {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  z-index: var(--z-page-popup); /* 사이드바 위, 일반 모달과 동일 계열 */
+}
+.page-popup--closing {
+  opacity: 0;
+  transition: opacity 160ms ease;
+  pointer-events: none;
+}
+
+.page-popup__panel {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+}
+
+.page-popup--backdrop {
+  display: none;
+}
+
+.page-popup__close {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  background: transparent;
+  border: none;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--text, var(--color-black));
+}
+
+/* ensure content starts below any fixed headers if present */
+.page-popup__panel > * {
+  box-sizing: border-box;
+}
+
+/* Training-specific page popup styles (full-screen, no outer backdrop) */
+.page-popup {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  z-index: var(--z-page-popup);
+}
+
+.page-popup__panel {
+  background: var(--color-deepWhite);
+  color: var(--color-black);
+  border-radius: 0;
+  box-shadow: none;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  /* flex 레이아웃: 타이틀·스크롤·바텀을 올바르게 쌓음 */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+/* inner scroll container — flex로 남은 공간 전부 차지 */
+.page-popup__scroll {
+  flex: 1 1 0;
+  min-height: 0; /* flex 내부에서 overflow:auto가 동작하려면 필수 */
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  justify-content: center;   /* 가로 중앙 */
+  align-items: flex-start;   /* 세로는 항상 위부터 — center 쓰면 상단 overflow 접근 불가 */
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-y;
+  overscroll-behavior: contain; /* 스크롤 체이닝 방지 */
+  /* 얇은 스크롤바 (macOS 스타일) */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0,0,0,0.15) transparent;
+}
+.page-popup__scroll::-webkit-scrollbar {
+  width: 4px;
+}
+.page-popup__scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.page-popup__scroll::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.15);
+  border-radius: var(--radius-xs);
+}
+.page-popup__scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(0,0,0,0.28);
+}
+
+/* while initial measurement runs, hide the scrollable area to avoid
+   visible jump when switching center/top alignment */
+.page-popup__panel--measuring .page-popup__scroll {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* smooth fade-in on reveal to mask any remaining micro-jitter */
+.page-popup__scroll {
+  transition: opacity 120ms ease;
+}
+
+/* temporary on-screen debug box for popup props inspection */
+.nt-debug {
+  position: absolute;
+  top: 84px;
+  right: 20px;
+  background: rgba(0,0,0,0.03);
+  color: var(--text, var(--color-black));
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 1.2;
+  max-width: 300px;
+  white-space: pre-wrap;
+  z-index: calc(var(--z-page-popup) + 1);
+}
+
+.page-popup--backdrop { display: none; }
+
+.page-popup__close {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  background: transparent;
+  border: none;
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--text, var(--color-black));
+}
+
+.page-popup__panel > * { box-sizing: border-box; }
+
+.page-popup__body {
+  padding: 16px 20px;
+}
+
+.page-popup__content {
+  padding: var(--spacing-page);
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.page-popup__content--center {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.page-popup__content--top {
+  /* 위부터 정렬: 기본값 */
+}
+
+.pp-empty {
+  width: 100%;
+  text-align: center;
+  color: var(--color-gray);
+  padding: 24px 0;
+}
+
+.page-popup__content .training-steps {
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+/* 상단 고정 슬롯 (타이틀, 뒤로가기 등) */
+.page-popup__top {
+  flex-shrink: 0;
+}
+
+/* 하단 고정 슬롯 (버튼, 스텝 인디케이터 등) */
+.page-popup__bottom {
+  flex-shrink: 0;
+}
+
+/* 패널 세로 정렬 모드 */
+.page-popup__panel--top {
+  /* 기본값 — 콘텐츠가 위부터 쌓임 */
+}
+.page-popup__panel--center .page-popup__scroll {
+  align-items: center;
+}
+
+/* 결과 없음 빈 화면 변형 */
+.page-popup--result-empty {
+  background: var(--color-deepWhite);
+}
+.page-popup__empty {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-gray);
+  text-align: center;
+  padding: 2rem;
+}

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

@@ -0,0 +1,91 @@
+import { type ReactNode, type FC, type CSSProperties, type RefObject, type Dispatch, type SetStateAction } from "react";
+import './TrainingPagePopup.css';
+import { Page, ListenStep, ConfirmStep, ConfirmWithTextStep, OrderListStep, CardStep, CardOrderStep } from './TrainingStepComponents';
+/** @public */
+export type { ScenarioPage, ScenarioStep, FlowState } from './trainingScenario';
+import type { ScenarioPage, FlowState } from './trainingScenario';
+/** @public */
+export type PanelElement = HTMLDivElement & {
+    _childOnNext?: ((...args: unknown[]) => unknown) | undefined;
+    _childOnResult?: ((...args: unknown[]) => unknown) | undefined;
+};
+/** @public */
+export type TrainingScenario = {
+    id?: string;
+    meta?: Record<string, unknown>;
+    pages?: ScenarioPage[];
+    buildResults?: (opts: {
+        scenario?: TrainingScenario;
+        pages?: ScenarioPage[];
+        flowState?: FlowState;
+        answersByPage?: Record<string, Record<string, unknown>>;
+    }) => unknown | Promise<unknown>;
+    onReplay?: () => void;
+    emptyMessage?: string;
+    label?: string;
+};
+/** @public */
+export type TrainingPagePopupProps = {
+    scenario?: TrainingScenario | null;
+    title?: ReactNode;
+    subTitle?: string;
+    depth?: unknown;
+    icon?: ReactNode;
+    wrapperStyle?: CSSProperties | Record<string, unknown>;
+    iconTooltip?: string;
+    pageIndex?: number;
+    pageCount?: number;
+    stepIndex?: number;
+    stepCount?: number;
+    onBack?: () => void;
+    /** 완료 시 호출. 결과 팝업이 계산한 정답/전체 문항 수를 함께 전달(호출부가 무시해도 무방하도록 옵셔널 인자). */
+    onComplete?: (result?: {
+        correct: number | null;
+        total: number | null;
+    }) => void;
+    onNext?: () => void;
+    onSettings?: () => void;
+    /** 좌측 하단 훈련 설정 버튼 + 오디오 미터 토글 표시 여부. 기본 true — 모든 훈련에서 노출되며,
+     *  숨겨야 하는 특수 화면에서만 명시적으로 false를 준다. */
+    useNoiseSetting?: boolean;
+    children?: ReactNode | ((opts: {
+        registerOnNext: (fn?: ((...args: unknown[]) => unknown) | undefined) => void;
+        registerOnResult: (fn?: ((...args: unknown[]) => unknown) | undefined) => void;
+        panelRef: RefObject<PanelElement | null>;
+        setResultOverlay: Dispatch<SetStateAction<unknown>>;
+    }) => ReactNode);
+    ariaLabel?: string;
+    label?: string;
+    buildResults?: (answers: Record<string, unknown>, meta?: Record<string, unknown>) => unknown;
+    onResult?: (result?: unknown) => unknown;
+    /** 훈련 타입 키 — 시간 기록(training_category_time_log)에 사용. 문장 4종은 래퍼에서 별도 기록 */
+    typeKey?: string;
+    /** 완료 정본 기록 진입점 — 'daily'(오늘의 듣기) | 'sentence' | 'word' */
+    entryPoint?: string;
+    /** entry_point='daily'일 때 그날 전체 항목 수(완료율 분모) */
+    dailyTotal?: number;
+    /** 완료 정본의 항목 식별자(item_ref) — 기기 간 완료표시 동기화 */
+    itemRef?: string;
+    /** 훈련 결과 팝업 렌더러 — 없으면 결과 팝업을 표시하지 않음 */
+    renderResultPopup?: (props: {
+        score?: number | null;
+        results?: unknown[];
+        contextsLength?: number | null;
+        onReplay?: () => void;
+        onClose?: () => void;
+    }) => ReactNode;
+};
+/** @public */
+export type TrainingPagePopupComponent = FC<TrainingPagePopupProps> & {
+    Page: typeof Page;
+    ListenStep: typeof ListenStep;
+    ConfirmStep: typeof ConfirmStep;
+    ConfirmWithTextStep: typeof ConfirmWithTextStep;
+    OrderListStep: typeof OrderListStep;
+    CardStep: typeof CardStep;
+    CardOrderStep: typeof CardOrderStep;
+};
+/** @public */
+declare const TrainingPagePopup: TrainingPagePopupComponent;
+/** @public */
+export default TrainingPagePopup;