@tipp/ui 2.8.0 → 2.10.0

package/src/app/roleplay/parts/step-radar.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import type { EChartsOption } from 'echarts';
+import type { RpReportStep } from '../utils/report-parse';
+import { stepCode, stepGradeLabel, stepRatio, stepScoreText } from '../utils/session-utils';
+import { Chart, useTokenColors } from '../chart/session-chart';
+
+export interface StepRadarProps {
+  steps: RpReportStep[];
+}
+
+export function StepRadar({ steps }: StepRadarProps): React.ReactElement {
+  const { colors, probe } = useTokenColors({
+    accent: ['--accent-9', '#5b5bd6'],
+    grid: ['--gray-5', '#e0e0e0'],
+    label: ['--gray-11', '#646464'],
+  });
+
+  const indicator = steps.map((s) => ({ name: stepCode(s), max: 1 }));
+  const values = steps.map((s) => stepRatio(s) ?? 0);
+
+  const option: EChartsOption = {
+    tooltip: {
+      trigger: 'item',
+      formatter: () =>
+        steps
+          .map(
+            (s) =>
+              `${stepCode(s)} ${stepScoreText(s) ?? stepGradeLabel(s) ?? '—'}`
+          )
+          .join('<br/>'),
+    },
+    radar: {
+      indicator,
+      radius: '66%',
+      center: ['50%', '50%'],
+      splitNumber: 4,
+      axisName: { color: colors.label, fontSize: 10, fontWeight: 'bold' }, // ds-allow: chart-lib
+      splitLine: { lineStyle: { color: colors.grid } },
+      splitArea: { show: false },
+      axisLine: { lineStyle: { color: colors.grid } },
+    },
+    series: [
+      {
+        type: 'radar',
+        data: [
+          {
+            value: values,
+            name: '이번 세션',
+            areaStyle: { color: colors.accent, opacity: 0.18 },
+            lineStyle: { color: colors.accent, width: 2 },
+            itemStyle: { color: colors.accent },
+            symbolSize: 4,
+          },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <div
+      aria-label="평가 단계 레이더 차트"
+      role="img"
+      style={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        minWidth: 0,
+        overflow: 'hidden',
+      }}
+    >
+      {probe}
+      <div style={{ width: '100%', maxWidth: 300, height: 280 }}>
+        <Chart option={option} />
+      </div>
+    </div>
+  );
+}

package/src/app/roleplay/parts/step-summary.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { Box, Flex, Grid, Progress, Separator, Typo } from '../../../atoms';
+import type { RpReportStep } from '../utils/report-parse';
+import {
+  stepCode,
+  stepColor,
+  stepGradeLabel,
+  stepRatio,
+  stepScoreText,
+  stepVars,
+} from '../utils/session-utils';
+import { StepRadar } from './step-radar';
+
+export interface StepSummaryProps {
+  steps: RpReportStep[];
+}
+
+function Section({
+  title,
+  desc,
+  children,
+}: {
+  title: string;
+  desc?: string;
+  children: React.ReactNode;
+}): React.ReactElement {
+  return (
+    <section>
+      <Box mb="3">
+        <Typo as="p" variant="subtitle" weight="bold">
+          {title}
+        </Typo>
+        {desc ? (
+          <Box mt="1" style={{ maxWidth: '65ch' }}>
+            <Typo as="p" color="gray" variant="body">
+              {desc}
+            </Typo>
+          </Box>
+        ) : null}
+      </Box>
+      {children}
+    </section>
+  );
+}
+
+export function StepSummary({ steps }: StepSummaryProps): React.ReactElement | null {
+  if (steps.length === 0) return null;
+
+  const radarReady = steps.every((s) => stepRatio(s) !== null);
+  const desc = radarReady
+    ? '대화 단계별 평가 결과를 레이더로 요약합니다.'
+    : '대화 단계별 평가 결과입니다.';
+
+  const list = (
+    <Flex direction="column">
+      {steps.map((step, i) => {
+        const ratio = stepRatio(step);
+        const scoreText = stepScoreText(step);
+        const gradeLabel = stepGradeLabel(step);
+        return (
+          <Box key={step.key}>
+            {i > 0 && <Separator size="4" />}
+            <button
+              className="rp-rubric-scroll-btn"
+              onClick={() => {
+                document
+                  .getElementById(`step-${step.key}`)
+                  ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+              }}
+              style={{
+                padding: 'var(--space-2) 0',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                width: '100%',
+                textAlign: 'left',
+              }}
+              type="button"
+            >
+              <Flex direction="column" gap="1">
+                <Flex align="center" gap="2" justify="between">
+                  <Typo
+                    as="span"
+                    style={{ minWidth: 0 }}
+                    truncate
+                    variant="body"
+                    weight="medium"
+                  >
+                    <Typo
+                      as="span"
+                      mono
+                      style={{ color: 'var(--gray-11)' }}
+                      variant="body"
+                      weight="medium"
+                    >
+                      {stepCode(step)}
+                    </Typo>{' '}
+                    {step.label}
+                  </Typo>
+                  <Flex align="center" gap="2" style={{ flexShrink: 0 }}>
+                    {scoreText !== null ? (
+                      <Typo as="span" mono variant="body" weight="bold">
+                        {scoreText}
+                      </Typo>
+                    ) : null}
+                    {gradeLabel !== null ? (
+                      <Typo
+                        as="span"
+                        mono
+                        style={{ color: stepVars(step).fg }}
+                        variant="body"
+                        weight="medium"
+                      >
+                        {gradeLabel}
+                      </Typo>
+                    ) : null}
+                  </Flex>
+                </Flex>
+                {ratio !== null ? (
+                  <Box style={{ flex: 1 }}>
+                    <Progress color={stepColor(step)} size="1" value={ratio * 100} />
+                  </Box>
+                ) : null}
+              </Flex>
+            </button>
+          </Box>
+        );
+      })}
+    </Flex>
+  );
+
+  return (
+    <Section desc={desc} title="평가 단계 요약">
+      {radarReady ? (
+        <Grid
+          align="center"
+          columns={{ initial: '1', md: 'minmax(260px, 1fr) 280px' }}
+          gap="6"
+        >
+          {list}
+          <StepRadar steps={steps} />
+        </Grid>
+      ) : (
+        list
+      )}
+    </Section>
+  );
+}

package/src/app/roleplay/rp-session-detail.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import React, { useMemo, useState } from 'react';
+import { Box, Card, Flex, Heading, Progress, Skeleton, Typo } from '../../atoms';
+import type { RpSessionDetailData, RpSessionHistoryItem, RpSessionScript } from './types';
+import { parseReportData } from './utils/report-parse';
+import { computeSpeechShare } from './utils/session-utils';
+import { Content } from './parts/content';
+import { Header } from './parts/header';
+import { SessionReplayDialog } from './parts/session-replay-dialog';
+
+/* ───────────────────────── Public contract ───────────────────────── */
+
+export interface RpSessionDetailProps {
+  detail: RpSessionDetailData;
+  history: RpSessionHistoryItem[];
+  isLoading?: boolean;
+  script?: RpSessionScript | null;
+  onResolveMediaUrl?: (
+    rawUrl: string,
+    options: { disposition: 'inline' | 'attachment' }
+  ) => string | Promise<string>;
+  onError?: (error: unknown, context: Record<string, unknown>) => void;
+  sectionScrollMarginTop?: string;
+}
+
+/* ───────────────────────── Skeleton ───────────────────────── */
+
+function RpSessionDetailSkeleton(): React.ReactElement {
+  return (
+    <Box py="6">
+      <Flex direction="column" gap="6">
+        <Box>
+          <Skeleton>
+            <Heading size="7">롤플레잉 세션 제목 로딩 중</Heading>
+          </Skeleton>
+          <Box mt="2">
+            <Skeleton>
+              <Typo as="p" variant="body">
+                날짜 · 소요 시간이 로딩되는 영역입니다
+              </Typo>
+            </Skeleton>
+          </Box>
+        </Box>
+        <section>
+          <Skeleton>
+            <Heading size="5">종합 점수</Heading>
+          </Skeleton>
+          <Box mt="3">
+            <Card variant="surface">
+              <Flex align="center" direction="column" gap="2" py="3">
+                <Skeleton>
+                  <Heading size="7">00</Heading>
+                </Skeleton>
+              </Flex>
+            </Card>
+          </Box>
+        </section>
+        <section>
+          <Skeleton>
+            <Heading size="5">평가 지표 요약</Heading>
+          </Skeleton>
+          <Box mt="3">
+            <Flex direction="column" gap="3">
+              {[0, 1, 2].map((i) => (
+                <Skeleton key={i}>
+                  <Typo as="p" variant="body">
+                    평가 지표 항목이 로딩되는 중입니다
+                  </Typo>
+                </Skeleton>
+              ))}
+            </Flex>
+          </Box>
+        </section>
+      </Flex>
+    </Box>
+  );
+}
+
+/* ───────────────────────── Analyzing state ───────────────────────── */
+
+function AnalyzingState(): React.ReactElement {
+  return (
+    <Flex
+      align="center"
+      direction="column"
+      justify="center"
+      style={{
+        border: '1px dashed var(--gray-6)',
+        borderRadius: 'var(--radius-3)',
+        background: 'var(--gray-a1)',
+        padding: '40px 24px',
+        textAlign: 'center',
+      }}
+    >
+      <Heading size={{ initial: '4', md: '5' }} weight="bold">
+        AI 분석 중입니다
+      </Heading>
+      <Box mt="2" style={{ maxWidth: '480px' }}>
+        <Typo as="p" variant="body">
+          대화와 산출물은 저장되었고, AI가 지표별 근거와 코칭을 생성하는 중입니다.
+        </Typo>
+      </Box>
+      <Box mt="4" style={{ width: '100%', maxWidth: '280px' }}>
+        <Progress size="2" value={66} />
+      </Box>
+    </Flex>
+  );
+}
+
+/* ───────────────────────── Main component ───────────────────────── */
+
+export function RpSessionDetail({
+  detail,
+  history,
+  isLoading = false,
+  script,
+  onResolveMediaUrl,
+  onError: _onError,
+  sectionScrollMarginTop = '120px',
+}: RpSessionDetailProps): React.ReactElement {
+  const [replayOpen, setReplayOpen] = useState(false);
+
+  // script 미전달 시 발화량 표시 생략. 전달 시 script로 계산.
+  const speechShare = useMemo(
+    () => (script !== null && script !== undefined ? computeSpeechShare(script.items) : null),
+    [script],
+  );
+
+  const report = useMemo(
+    () => parseReportData(detail.reportData, detail.guideline, detail.displayMeta),
+    [detail.reportData, detail.guideline, detail.displayMeta],
+  );
+
+  const hasScript = script !== null && script !== undefined;
+  const isAnalyzing = detail.status === 'analyzing';
+
+  if (isLoading) {
+    return <RpSessionDetailSkeleton />;
+  }
+
+  return (
+    <Box py="6">
+      <Flex direction="column" gap={{ initial: '5', md: '7' }}>
+        <Header
+          detail={detail}
+          hasScript={hasScript}
+          onOpenReplay={() => {
+            setReplayOpen(true);
+          }}
+          onResolveMediaUrl={onResolveMediaUrl}
+        />
+
+        {isAnalyzing ? (
+          <AnalyzingState />
+        ) : (
+          <Content
+            detail={detail}
+            history={history}
+            report={report}
+            scrollMarginTop={sectionScrollMarginTop}
+            speechShare={speechShare}
+          />
+        )}
+      </Flex>
+
+      <SessionReplayDialog
+        detail={detail}
+        onOpenChange={setReplayOpen}
+        onResolveMediaUrl={onResolveMediaUrl}
+        open={replayOpen}
+        script={script}
+      />
+    </Box>
+  );
+}

package/src/app/roleplay/types.ts

@@ -0,0 +1,61 @@
+// 롤플레잉 "세션 상세" 컴포넌트의 공개 데이터 계약.
+//
+// 소비처(website / hr-admin / coach-op)가 각자 쿼리로 데이터를 fetch한 뒤
+// 이 형태로 주입한다. 컴포넌트는 데이터 패칭/라우팅/인증을 모른다.
+//
+// website RoleplaySessionDetail 을 기준(상위집합)으로 하되, hr-admin/coach-op 에
+// 없는 미디어 메타 필드는 optional 로 흡수한다.
+
+export interface RpSessionDetailData {
+  id: string;
+  trainingSessionNum: number;
+  scenarioId: string | null;
+  scenarioTitle: string | null;
+  characterId: string;
+  characterTitle: string | null;
+  totalScore: number | null;
+  trainingTime: number | null;
+  status: string | null;
+  roleplayTrackId: string | null;
+  // unknown 은 null 을 포함하나, 데이터 부재는 null 로 표기한다.
+  reportData: unknown;
+  // 평가 프레임워크 식별/단계 라벨 매핑용. 프레임워크 추가 시에도 프론트 무변경.
+  reportType: string | null;
+  guideline: unknown;
+  // framework.displayMeta — { title?, description?, steps:[{order,key,initial,displayName,maxValue,description}] }.
+  // 단계 표시 순서·이니셜·라벨·만점 + 프레임워크 제목/설명문의 단일 소스. 없으면 기존 동작 폴백.
+  displayMeta?: unknown;
+  embedLink: string | null;
+  trainingLogURL: string | null;
+  trainingVideoURL: string | null;
+  // hr-admin/coach-op 타입에 없을 수 있어 optional 로 흡수.
+  trainingAudioURL?: string | null;
+  // 영상↔스크립트 싱크 가능 여부 판정용(영상/오디오 길이, 초). 미제공 시 싱크 불가.
+  videoDurationSec?: number | null;
+  audioDurationSec?: number | null;
+  createdAt: string;
+}
+
+export interface RpSessionHistoryItem {
+  id: string;
+  trainingSessionNum: number;
+  totalScore: number | null;
+  trainingTime: number | null;
+  createdAt: string;
+}
+
+// STT 대화 스크립트 한 줄.
+export type RpSessionScriptSpeaker = 'user' | 'partner';
+
+export interface RpSessionScriptLine {
+  speaker: RpSessionScriptSpeaker;
+  text: string;
+  // 발화 시작 시각(ms, STT 오디오 기준). 싱크 가능 세션에서 seek/하이라이트에 사용.
+  startMs: number;
+}
+
+export interface RpSessionScript {
+  items: RpSessionScriptLine[];
+  // STT 전체 길이(ms). 미디어 길이와 비교해 싱크 가능 여부 판정.
+  durationMs: number;
+}