@tipp/ui 2.8.0 → 2.10.0

package/src/app/roleplay/parts/score-trend-section.tsx

@@ -0,0 +1,255 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import type { EChartsOption } from 'echarts';
+import { Box, Flex, Heading, Typo } from '../../../atoms';
+import {
+  ExpandTable,
+  createColumnHelper,
+  type ColumnDef,
+  type Row,
+} from '../../../molecules';
+import { Chart, useTokenColors } from '../chart/session-chart';
+import type { RpSessionHistoryItem } from '../types';
+import { formatDate } from '../utils/session-utils';
+
+/* ───────────────────────── Section ───────────────────────── */
+
+export function Section({
+  title,
+  desc,
+  children,
+}: {
+  title: string;
+  desc?: string;
+  children: React.ReactNode;
+}): React.ReactElement {
+  return (
+    <section>
+      <Box mb="3">
+        <Heading
+          size={{ initial: '4', md: '5' }}
+          style={{ textWrap: 'balance' }}
+          weight="bold"
+        >
+          {title}
+        </Heading>
+        {desc ? (
+          <Box mt="1" style={{ maxWidth: '65ch' }}>
+            <Typo as="p" color="gray" variant="body">
+              {desc}
+            </Typo>
+          </Box>
+        ) : null}
+      </Box>
+      {children}
+    </section>
+  );
+}
+
+/* ───────────────────────── 타입 ───────────────────────── */
+
+type TrendRow = RpSessionHistoryItem & {
+  delta: number | null;
+  isCurrent: boolean;
+};
+
+/* ───────────────────────── 테이블 셀 컴포넌트 ───────────────────────── */
+
+function AttemptCell({ row }: { row: Row<TrendRow> }): React.ReactElement {
+  const d = row.original;
+  return (
+    <Typo
+      as="span"
+      style={{ color: d.isCurrent ? 'var(--gray-12)' : 'var(--gray-11)' }}
+      variant="body"
+      weight={d.isCurrent ? 'bold' : 'regular'}
+    >
+      {d.trainingSessionNum}회차{d.isCurrent ? ' (현재)' : null}
+    </Typo>
+  );
+}
+
+function DateCell({ row }: { row: Row<TrendRow> }): React.ReactElement {
+  return (
+    <Typo as="span" mono style={{ color: 'var(--gray-9)' }} variant="body">
+      {formatDate(row.original.createdAt)}
+    </Typo>
+  );
+}
+
+function ScoreCell({ row }: { row: Row<TrendRow> }): React.ReactElement {
+  return (
+    <Typo
+      as="span"
+      mono
+      variant="body"
+      weight={row.original.isCurrent ? 'bold' : 'regular'}
+    >
+      {row.original.totalScore ?? '—'}
+    </Typo>
+  );
+}
+
+function DeltaCell({ row }: { row: Row<TrendRow> }): React.ReactElement {
+  const { delta } = row.original;
+  if (delta === null) {
+    return (
+      <Typo as="span" mono style={{ color: 'var(--gray-9)' }} variant="body">
+        —
+      </Typo>
+    );
+  }
+  return (
+    <Typo as="span" mono style={{ color: 'var(--gray-9)' }} variant="body">
+      {delta > 0 ? `+${delta}` : `${delta}`}
+    </Typo>
+  );
+}
+
+/* ───────────────────────── ScoreTrendSection ───────────────────────── */
+
+export interface ScoreTrendSectionProps {
+  history: RpSessionHistoryItem[];
+}
+
+export function ScoreTrendSection({
+  history,
+}: ScoreTrendSectionProps): React.ReactElement {
+  const { colors, probe } = useTokenColors({
+    accent: ['--accent-9', '#5b5bd6'],
+    accentText: ['--accent-11', '#5753c6'],
+    grid: ['--gray-5', '#e0e0e0'],
+    gridSoft: ['--gray-4', '#e8e8e8'],
+    muted: ['--gray-9', '#8d8d8d'],
+  });
+
+  // 총점 없는 회차 제외, 회차 오름차순 정렬, 최근 5회차로 한정
+  const ordered = useMemo(
+    () =>
+      [...history]
+        .filter((e) => e.totalScore !== null)
+        .sort((a, b) => a.trainingSessionNum - b.trainingSessionNum)
+        .slice(-5),
+    [history],
+  );
+
+  const scores = ordered.map((e) => e.totalScore ?? 0);
+  const minScore = Math.max(0, Math.min(...scores) - 10);
+  const maxScore = Math.min(100, Math.max(...scores) + 10);
+  const labels = ordered.map((e) => `${e.trainingSessionNum}회차`);
+  const lastIndex = ordered.length - 1;
+
+  const option: EChartsOption = {
+    tooltip: { trigger: 'axis', valueFormatter: (v) => `${String(v)}점` },
+    grid: { left: 36, right: 16, top: 20, bottom: 24, containLabel: false },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      boundaryGap: true,
+      axisLine: { lineStyle: { color: colors.grid } },
+      axisTick: { show: false },
+      axisLabel: { color: colors.muted, fontSize: 10 }, // ds-allow: chart-lib
+    },
+    yAxis: {
+      type: 'value',
+      min: minScore,
+      max: maxScore,
+      splitLine: { lineStyle: { color: colors.gridSoft } },
+      axisLabel: { color: colors.muted, fontSize: 10 }, // ds-allow: chart-lib
+    },
+    series: [
+      {
+        type: 'line',
+        data: scores,
+        smooth: false,
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: { color: colors.accent, width: 2 },
+        itemStyle: { color: colors.accent },
+        label: {
+          show: true,
+          position: 'top',
+          color: colors.accentText,
+          fontSize: 10, // ds-allow: chart-lib
+          fontWeight: 'bold', // ds-allow: chart-lib
+          formatter: (p) => (p.dataIndex === lastIndex ? String(p.value) : ''),
+        },
+      },
+    ],
+  };
+
+  const rows: TrendRow[] = ordered.map((e, i) => {
+    const prev = i > 0 ? (ordered[i - 1].totalScore ?? null) : null;
+    return {
+      ...e,
+      delta:
+        prev !== null && e.totalScore !== null ? e.totalScore - prev : null,
+      isCurrent: i === ordered.length - 1,
+    };
+  });
+
+  const columns = useMemo<ColumnDef<TrendRow>[]>(() => {
+    const h = createColumnHelper<TrendRow>();
+    return [
+      h.display({
+        id: 'attempt',
+        header: '회차',
+        size: 120,
+        meta: { autoSize: true, align: 'left' },
+        cell: AttemptCell,
+      }),
+      h.display({
+        id: 'date',
+        header: '날짜',
+        size: 130,
+        meta: { align: 'left' },
+        cell: DateCell,
+      }),
+      h.display({
+        id: 'score',
+        header: '총점',
+        size: 80,
+        meta: { align: 'right' },
+        cell: ScoreCell,
+      }),
+      h.display({
+        id: 'delta',
+        header: '변화',
+        size: 80,
+        meta: { align: 'right' },
+        cell: DeltaCell,
+      }),
+    ];
+  }, []);
+
+  return (
+    <Section
+      desc={`같은 시나리오 최근 ${ordered.length}회차 총점 변화`}
+      title="총점 추이"
+    >
+      <Flex direction="column" gap="4">
+        <div
+          aria-label="총점 추이 라인 차트"
+          role="img"
+          style={{ position: 'relative', width: '100%', height: 200 }}
+        >
+          {probe}
+          <Chart option={option} />
+        </div>
+        <Box className="rp-expand-table">
+          <ExpandTable
+            columns={columns}
+            data={rows}
+            getRowStyle={(d: TrendRow) =>
+              d.isCurrent ? { background: 'var(--accent-a2)' } : {}
+            }
+            showPagination={false}
+            variant="sprite"
+          />
+        </Box>
+      </Flex>
+    </Section>
+  );
+}

package/src/app/roleplay/parts/script-transcript.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { Box, Flex, Typo } from '../../../atoms';
+import {
+  formatTimestamp,
+  SPEECH_OVERTALK_THRESHOLD,
+  type SpeechShare,
+} from '../utils/session-utils';
+import type { RpSessionScriptLine } from '../types';
+
+export interface ScriptTranscriptProps {
+  lines: RpSessionScriptLine[];
+  partnerName: string | null;
+  speechShare: SpeechShare | null;
+  canSync: boolean;
+  currentMs: number;
+  onSeek: (startMs: number) => void;
+}
+
+function SpeechShareBar({ share }: { share: SpeechShare }): React.ReactElement {
+  const isOvertalking = share.userPct > SPEECH_OVERTALK_THRESHOLD;
+  return (
+    <Box>
+      <Flex align="center" justify="between" mb="1">
+        <Typo
+          as="span"
+          style={{
+            fontSize: '0.75rem',
+            color: isOvertalking ? 'var(--red-11)' : 'var(--accent-11)',
+          }}
+          variant="body"
+          weight="medium"
+        >
+          내 발화량 {share.userPct}%
+        </Typo>
+        <Typo as="span" color="gray" style={{ fontSize: '0.75rem' }} variant="body">
+          상대 {share.partnerPct}%
+        </Typo>
+      </Flex>
+      <Flex
+        style={{
+          height: 6,
+          borderRadius: 'var(--radius-1)',
+          overflow: 'hidden',
+          background: 'var(--gray-4)',
+        }}
+      >
+        <Box
+          style={{
+            width: `${share.userPct}%`,
+            background: isOvertalking ? 'var(--red-9)' : 'var(--accent-9)',
+          }}
+        />
+      </Flex>
+      {isOvertalking ? (
+        <Typo
+          as="p"
+          mt="1"
+          style={{ fontSize: '0.75rem', color: 'var(--red-11)' }}
+          variant="body"
+        >
+          상대의 말을 더 듣고 질문·경청의 비중을 높여 보세요
+        </Typo>
+      ) : null}
+    </Box>
+  );
+}
+
+export function ScriptTranscript({
+  lines,
+  partnerName,
+  speechShare,
+  canSync,
+  currentMs,
+  onSeek,
+}: ScriptTranscriptProps): React.ReactElement {
+  const activeIndex = canSync
+    ? lines.reduce((acc, line, i) => (line.startMs <= currentMs ? i : acc), -1)
+    : -1;
+
+  return (
+    <Flex direction="column" gap="2" style={{ minWidth: 0 }}>
+      <Box>
+        <Flex align="center" gap="2" justify="between">
+          <Typo as="span" variant="body" weight="bold">
+            대화 스크립트
+          </Typo>
+          <Typo
+            as="span"
+            color="gray"
+            style={{ fontSize: '0.75rem', flexShrink: 0 }}
+            variant="body"
+          >
+            {canSync ? '재생 위치에 맞춰 표시' : '타임라인 비동기'}
+          </Typo>
+        </Flex>
+        {partnerName ? (
+          <Typo as="p" color="gray" mt="1" style={{ fontSize: '0.75rem' }} variant="body">
+            상대 · {partnerName}
+          </Typo>
+        ) : null}
+        {speechShare ? (
+          <Box mt="2">
+            <SpeechShareBar share={speechShare} />
+          </Box>
+        ) : null}
+      </Box>
+
+      {lines.length === 0 ? (
+        <Typo as="p" color="gray" variant="body">
+          대화 스크립트가 없습니다.
+        </Typo>
+      ) : (
+        <Box style={{ maxHeight: 440, overflowY: 'auto' }}>
+          <Flex direction="column" gap="1">
+            {lines.map((line, i) => {
+              const isUser = line.speaker === 'user';
+              const isActive = i === activeIndex;
+              return (
+                <Flex
+                  align="start"
+                  gap="3"
+                  key={`${line.startMs}-${line.speaker}`}
+                  onClick={
+                    canSync
+                      ? () => {
+                          onSeek(line.startMs);
+                        }
+                      : undefined
+                  }
+                  px="2"
+                  py="2"
+                  style={{
+                    cursor: canSync ? 'pointer' : 'default',
+                    borderRadius: 'var(--radius-2)',
+                    background: isActive ? 'var(--accent-a3)' : 'transparent',
+                  }}
+                >
+                  {canSync ? (
+                    <Typo
+                      as="span"
+                      mono
+                      style={{
+                        color: isActive ? 'var(--accent-11)' : 'var(--gray-9)',
+                        fontSize: '0.75rem',
+                        flexShrink: 0,
+                        minWidth: 32,
+                        lineHeight: '1.7',
+                      }}
+                      variant="body"
+                    >
+                      {formatTimestamp(line.startMs)}
+                    </Typo>
+                  ) : null}
+                  <Typo
+                    as="span"
+                    style={{
+                      color: isUser ? 'var(--accent-11)' : 'var(--gray-11)',
+                      fontSize: '0.8125rem',
+                      flexShrink: 0,
+                      minWidth: 28,
+                      lineHeight: '1.7',
+                      fontWeight: 700,
+                      whiteSpace: 'nowrap',
+                    }}
+                    variant="body"
+                  >
+                    {isUser ? '나' : '상대'}
+                  </Typo>
+                  <Typo
+                    as="span"
+                    style={{
+                      fontSize: '0.875rem',
+                      lineHeight: '1.7',
+                      color: isActive ? 'var(--gray-12)' : 'var(--gray-11)',
+                    }}
+                    variant="body"
+                    weight={isActive ? 'medium' : undefined}
+                  >
+                    {line.text}
+                  </Typo>
+                </Flex>
+              );
+            })}
+          </Flex>
+        </Box>
+      )}
+    </Flex>
+  );
+}