@tipp/ui 2.8.0 → 2.10.0

package/src/app/roleplay/parts/section-nav.tsx

@@ -0,0 +1,299 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Box, Flex, Progress, Typo } from '../../../atoms';
+import type { RpReportStep } from '../utils/report-parse';
+import {
+  stepCode,
+  stepColor,
+  stepGradeLabel,
+  stepRatio,
+  stepScoreText,
+  stepVars,
+} from '../utils/session-utils';
+
+export interface SectionNavItem {
+  id: string;
+  label: string;
+  score?: number | null;
+  max?: number;
+}
+
+export interface SectionNavProps {
+  items: SectionNavItem[];
+  steps: RpReportStep[];
+}
+
+const NAV_ICONS: Record<string, React.ReactNode> = {
+  'score-summary': (
+    <>
+      <path d="m12 14 4-4" />
+      <path d="M3.34 19a10 10 0 1 1 17.32 0" />
+    </>
+  ),
+  strengths: (
+    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+  ),
+  improvements: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <circle cx="12" cy="12" r="5" />
+      <circle cx="12" cy="12" r="1.5" />
+    </>
+  ),
+  'score-trend': (
+    <>
+      <path d="M3 3v18h18" />
+      <path d="m19 8-5 5-4-4-4 4" />
+    </>
+  ),
+  'step-summary': (
+    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+  ),
+  'step-detail': (
+    <>
+      <line x1="8" x2="21" y1="6" y2="6" />
+      <line x1="8" x2="21" y1="12" y2="12" />
+      <line x1="8" x2="21" y1="18" y2="18" />
+      <path d="M3 6h.01M3 12h.01M3 18h.01" />
+    </>
+  ),
+  coaching: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
+};
+
+function NavIcon({ children }: { children: React.ReactNode }): React.ReactElement {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="13"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.8"
+      style={{ flexShrink: 0 }}
+      viewBox="0 0 24 24"
+      width="13"
+    >
+      {children}
+    </svg>
+  );
+}
+
+function StepMetricBadge({ step }: { step: RpReportStep }): React.ReactElement | null {
+  const scoreText = stepScoreText(step);
+  if (scoreText !== null) {
+    return (
+      <Typo
+        as="span"
+        mono
+        style={{ flexShrink: 0, color: 'var(--gray-11)' }}
+        variant="body"
+        weight="medium"
+      >
+        {scoreText}
+      </Typo>
+    );
+  }
+  const gradeLabel = stepGradeLabel(step);
+  if (gradeLabel !== null) {
+    return (
+      <Typo
+        as="span"
+        mono
+        style={{ flexShrink: 0, color: stepVars(step).fg }}
+        variant="body"
+        weight="medium"
+      >
+        {gradeLabel}
+      </Typo>
+    );
+  }
+  return null;
+}
+
+function useScrollSpy(ids: string[]): string | null {
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const watchKey = ids.join(',');
+
+  useEffect(() => {
+    const els = ids
+      .map((id) => document.getElementById(id))
+      .filter((el): el is HTMLElement => el !== null);
+    if (els.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        if (visible[0]) setActiveId(visible[0].target.id);
+      },
+      { rootMargin: '0px 0px -72% 0px', threshold: 0 }
+    );
+    els.forEach((el) => {
+      observer.observe(el);
+    });
+    return () => {
+      observer.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- watchKey가 ids 변경을 대표한다
+  }, [watchKey]);
+
+  return activeId;
+}
+
+function scrollToId(id: string): void {
+  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
+export function SectionNav({ items, steps }: SectionNavProps): React.ReactElement {
+  const activeId = useScrollSpy(items.map((i) => i.id));
+  const stepDetailActive = activeId === 'step-summary' || activeId === 'step-detail';
+
+  return (
+    <Box asChild className="rp-section-nav">
+      <aside>
+        <Box>
+          <Typo
+            as="p"
+            color="gray"
+            style={{
+              paddingLeft: 'calc(var(--space-3) + 2px)',
+              paddingBottom: 'var(--space-1)',
+            }}
+            variant="body"
+            weight="medium"
+          >
+            목차
+          </Typo>
+          <Box asChild>
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+              {items.map((item) => {
+                const active = activeId === item.id;
+                return (
+                  <li key={item.id}>
+                    <button
+                      aria-current={active ? 'true' : undefined}
+                      className="rp-nav-btn"
+                      onClick={() => {
+                        scrollToId(item.id);
+                      }}
+                      style={
+                        active
+                          ? {
+                              borderLeftColor: 'var(--accent-9)',
+                              background: 'var(--accent-a2)',
+                            }
+                          : undefined
+                      }
+                      type="button"
+                    >
+                      <Flex align="center" gap="2" style={{ minWidth: 0 }}>
+                        {NAV_ICONS[item.id] ? (
+                          <NavIcon>{NAV_ICONS[item.id]}</NavIcon>
+                        ) : null}
+                        <Typo
+                          as="span"
+                          truncate
+                          variant="body"
+                          weight={active ? 'medium' : 'regular'}
+                        >
+                          {item.label}
+                        </Typo>
+                      </Flex>
+                      {typeof item.score === 'number' ? (
+                        <Typo as="span" mono style={{ flexShrink: 0 }} variant="body">
+                          <Typo
+                            as="span"
+                            style={{
+                              color: active ? 'var(--gray-12)' : 'var(--gray-11)',
+                            }}
+                            variant="body"
+                            weight="medium"
+                          >
+                            {item.score}
+                          </Typo>
+                          <Typo as="span" style={{ color: 'var(--gray-9)' }} variant="body">
+                            /{item.max}
+                          </Typo>
+                        </Typo>
+                      ) : null}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </Box>
+
+          {steps.length > 0 && (
+            <Box mt="3" pt="3" style={{ borderTop: '1px solid var(--gray-4)' }}>
+              <Box pb="1" px="3">
+                <Typo
+                  as="span"
+                  style={{
+                    color: stepDetailActive ? 'var(--gray-12)' : 'var(--gray-10)',
+                  }}
+                  variant="body"
+                  weight="medium"
+                >
+                  단계별 점수
+                </Typo>
+              </Box>
+              <Box asChild>
+                <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+                  {steps.map((step) => {
+                    const ratio = stepRatio(step);
+                    return (
+                      <li key={step.key}>
+                        <button
+                          className="rp-jump-btn"
+                          onClick={() => {
+                            scrollToId(`step-${step.key}`);
+                          }}
+                          type="button"
+                        >
+                          <Flex align="center" gap="2" justify="between">
+                            <Typo
+                              as="span"
+                              style={{ minWidth: 0 }}
+                              truncate
+                              variant="body"
+                            >
+                              <Typo
+                                as="span"
+                                mono
+                                style={{ color: 'var(--gray-11)' }}
+                                variant="body"
+                                weight="medium"
+                              >
+                                {stepCode(step)}
+                              </Typo>{' '}
+                              <Typo
+                                as="span"
+                                style={{ color: 'var(--gray-9)' }}
+                                variant="body"
+                              >
+                                {step.label}
+                              </Typo>
+                            </Typo>
+                            <StepMetricBadge step={step} />
+                          </Flex>
+                          {ratio !== null ? (
+                            <Box mt="1">
+                              <Progress color={stepColor(step)} size="1" value={ratio * 100} />
+                            </Box>
+                          ) : null}
+                        </button>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </Box>
+            </Box>
+          )}
+        </Box>
+      </aside>
+    </Box>
+  );
+}

package/src/app/roleplay/parts/session-replay-dialog.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Dialog, Grid, Tabs } from '../../../atoms';
+import { computeSpeechShare, isLengthClose } from '../utils/session-utils';
+import type { RpSessionDetailData, RpSessionScript } from '../types';
+import { ScriptTranscript } from './script-transcript';
+
+export interface SessionReplayDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  detail: RpSessionDetailData;
+  script?: RpSessionScript | null;
+  onResolveMediaUrl?: (
+    rawUrl: string,
+    options: { disposition: 'inline' | 'attachment' }
+  ) => string | Promise<string>;
+}
+
+type ReplayTab = 'video' | 'audio';
+
+async function resolveUrl(
+  raw: string | null | undefined,
+  disp: 'inline' | 'attachment',
+  resolver?: (rawUrl: string, options: { disposition: 'inline' | 'attachment' }) => string | Promise<string>
+): Promise<string | undefined> {
+  if (!raw) return undefined;
+  if (!resolver) return raw;
+  try {
+    return await resolver(raw, { disposition: disp });
+  } catch {
+    return raw;
+  }
+}
+
+export function SessionReplayDialog({
+  open,
+  onOpenChange,
+  detail,
+  script,
+  onResolveMediaUrl,
+}: SessionReplayDialogProps): React.ReactElement {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  const hasVideo = Boolean(detail.trainingVideoURL);
+  const hasAudio = Boolean(detail.trainingAudioURL);
+
+  const [tab, setTab] = useState<ReplayTab>(hasVideo ? 'video' : 'audio');
+  const [currentMs, setCurrentMs] = useState(0);
+  const [videoSec, setVideoSec] = useState<number | null>(detail.videoDurationSec ?? null);
+  const [audioSec, setAudioSec] = useState<number | null>(detail.audioDurationSec ?? null);
+
+  const [resolvedVideoUrl, setResolvedVideoUrl] = useState<string | undefined>(undefined);
+  const [resolvedAudioUrl, setResolvedAudioUrl] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!open) return;
+    void resolveUrl(detail.trainingVideoURL, 'inline', onResolveMediaUrl).then(
+      setResolvedVideoUrl
+    );
+    void resolveUrl(detail.trainingAudioURL, 'inline', onResolveMediaUrl).then(
+      setResolvedAudioUrl
+    );
+  }, [open, detail.trainingVideoURL, detail.trainingAudioURL, onResolveMediaUrl]);
+
+  const lines = useMemo(() => script?.items ?? [], [script?.items]);
+  const speechShare = useMemo(() => computeSpeechShare(lines), [lines]);
+  const sttSec = (script?.durationMs ?? 0) / 1000;
+
+  const canSync =
+    tab === 'video'
+      ? hasVideo && isLengthClose(videoSec, sttSec)
+      : hasAudio && isLengthClose(audioSec, sttSec);
+
+  const activeMediaRef = tab === 'video' ? videoRef : audioRef;
+
+  const handleSeek = (startMs: number): void => {
+    if (!canSync) return;
+    const el = activeMediaRef.current;
+    if (!el) return;
+    el.currentTime = startMs / 1000;
+    void el.play();
+  };
+
+  const handleTimeUpdate = (): void => {
+    const el = activeMediaRef.current;
+    if (el) {
+      setCurrentMs(el.currentTime * 1000);
+    }
+  };
+
+  return (
+    <Dialog.Root onOpenChange={onOpenChange} open={open}>
+      <Dialog.Content maxWidth="1040px" title="세션 다시보기" width="100%">
+        <Grid
+          columns={{ initial: '1', md: 'minmax(0, 1fr) minmax(0, 1.05fr)' }}
+          gap="5"
+          mt="2"
+        >
+          <Box>
+            <Tabs.Root
+              onValueChange={(v) => {
+                setTab(v as ReplayTab);
+              }}
+              value={tab}
+            >
+              <Tabs.List>
+                {hasVideo ? <Tabs.Trigger value="video">영상</Tabs.Trigger> : null}
+                {hasAudio ? <Tabs.Trigger value="audio">오디오</Tabs.Trigger> : null}
+              </Tabs.List>
+              {hasVideo ? (
+                <Tabs.Content value="video">
+                  <Box
+                    mt="3"
+                    style={{
+                      borderRadius: 'var(--radius-3)',
+                      overflow: 'hidden',
+                      background: 'var(--gray-3)',
+                    }}
+                  >
+                    {/* eslint-disable-next-line jsx-a11y/media-has-caption -- 학습 다시보기 영상은 자막 트랙이 없는 사용자 녹화본 */}
+                    <video
+                      controls
+                      onLoadedMetadata={() => {
+                        setVideoSec(videoRef.current?.duration ?? null);
+                      }}
+                      onTimeUpdate={handleTimeUpdate}
+                      ref={videoRef}
+                      src={resolvedVideoUrl}
+                      style={{ width: '100%', display: 'block', maxHeight: 440 }}
+                    />
+                  </Box>
+                </Tabs.Content>
+              ) : null}
+              {hasAudio ? (
+                <Tabs.Content value="audio">
+                  <Box mt="3">
+                    {/* eslint-disable-next-line jsx-a11y/media-has-caption -- 학습 다시보기 오디오는 자막 트랙이 없는 사용자 녹음본 */}
+                    <audio
+                      controls
+                      onLoadedMetadata={() => {
+                        setAudioSec(audioRef.current?.duration ?? null);
+                      }}
+                      onTimeUpdate={handleTimeUpdate}
+                      ref={audioRef}
+                      src={resolvedAudioUrl}
+                      style={{ width: '100%' }}
+                    />
+                  </Box>
+                </Tabs.Content>
+              ) : null}
+            </Tabs.Root>
+          </Box>
+
+          <ScriptTranscript
+            canSync={canSync}
+            currentMs={currentMs}
+            lines={lines}
+            onSeek={handleSeek}
+            partnerName={detail.characterTitle}
+            speechShare={speechShare}
+          />
+        </Grid>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

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

@@ -0,0 +1,173 @@
+'use client';
+
+import { Box, Flex, Progress, Typo } from '../../../atoms';
+import type { RpReportStep } from '../utils/report-parse';
+import {
+  stepCode,
+  stepColor,
+  stepGradeLabel,
+  stepRatio,
+  stepScoreText,
+  stepVars,
+} from '../utils/session-utils';
+
+export interface StepDetailProps {
+  step: RpReportStep;
+  scrollMarginTop?: string;
+}
+
+function RubricField({
+  label,
+  value,
+}: {
+  label: string;
+  value: string;
+}): React.ReactElement {
+  return (
+    <Box>
+      <Typo as="p" variant="body" weight="medium">
+        {label}
+      </Typo>
+      <Box mt="1" style={{ maxWidth: '65ch' }}>
+        <Typo as="p" variant="body">
+          {value}
+        </Typo>
+      </Box>
+    </Box>
+  );
+}
+
+export function StepDetail({
+  step,
+  scrollMarginTop = '120px',
+}: StepDetailProps): React.ReactElement {
+  const qv = stepVars(step);
+  const ratio = stepRatio(step);
+  const scoreText = stepScoreText(step);
+  const gradeLabel = stepGradeLabel(step);
+
+  return (
+    <Box id={`step-${step.key}`} style={{ scrollMarginTop }}>
+      <Flex align="center" gap="2" justify="between" mb="1">
+        <Box style={{ minWidth: 0 }}>
+          <Typo as="span" color="gray" mono variant="body">
+            {stepCode(step)}
+          </Typo>
+          <Typo as="p" variant="subtitle" weight="bold">
+            {step.label}
+          </Typo>
+        </Box>
+        <Flex align="end" direction="column" gap="1" style={{ flexShrink: 0 }}>
+          {scoreText !== null ? (
+            <Typo
+              as="span"
+              mono
+              style={{ color: qv.fg }}
+              variant="subtitle"
+              weight="bold"
+            >
+              {scoreText}
+            </Typo>
+          ) : null}
+          {gradeLabel !== null ? (
+            <Typo
+              as="span"
+              mono
+              style={{
+                display: 'inline-block',
+                borderRadius: 'var(--radius-2)',
+                border: `1px solid ${qv.border}`,
+                background: qv.bg,
+                color: qv.fg,
+                padding: '1px 8px',
+              }}
+              variant="body"
+              weight="medium"
+            >
+              {gradeLabel}
+            </Typo>
+          ) : null}
+        </Flex>
+      </Flex>
+
+      {ratio !== null ? (
+        <Box mb="3" mt="2">
+          <Progress color={stepColor(step)} size="2" value={ratio * 100} />
+        </Box>
+      ) : null}
+
+      {step.description ? (
+        <Box mb="3" mt={ratio !== null ? '0' : '2'} style={{ maxWidth: '65ch' }}>
+          <Typo as="p" color="gray" variant="body">
+            {step.description}
+          </Typo>
+        </Box>
+      ) : null}
+
+      <Flex direction="column" gap="0">
+        {step.basis || step.issue ? (
+          <Box pb="3" style={{ borderBottom: '1px solid var(--gray-a4)' }}>
+            <Flex direction="column" gap="3">
+              {step.basis ? <RubricField label="근거" value={step.basis} /> : null}
+              {step.issue ? <RubricField label="아쉬운 점" value={step.issue} /> : null}
+            </Flex>
+          </Box>
+        ) : null}
+
+        {step.improve || step.example || step.idealExample ? (
+          <Box pt="3">
+            <Flex direction="column" gap="3">
+              {step.improve ? <RubricField label="개선점" value={step.improve} /> : null}
+              {step.example ? (
+                <Box
+                  p="2"
+                  style={{
+                    borderRadius: 'var(--radius-2)',
+                    background: 'var(--accent-a2)',
+                  }}
+                >
+                  <Typo
+                    as="p"
+                    style={{ color: 'var(--accent-11)' }}
+                    variant="body"
+                    weight="medium"
+                  >
+                    예시 스크립트
+                  </Typo>
+                  <Box mt="1" style={{ maxWidth: '65ch' }}>
+                    <Typo as="p" style={{ color: 'var(--accent-11)' }} variant="body">
+                      {step.example}
+                    </Typo>
+                  </Box>
+                </Box>
+              ) : null}
+              {step.idealExample ? (
+                <Box
+                  p="2"
+                  style={{
+                    borderRadius: 'var(--radius-2)',
+                    background: 'var(--gray-a2)',
+                  }}
+                >
+                  <Typo as="p" color="gray" variant="body" weight="medium">
+                    모범 예시
+                  </Typo>
+                  <Box mt="1" style={{ maxWidth: '65ch' }}>
+                    <Typo
+                      as="p"
+                      color="gray"
+                      style={{ whiteSpace: 'pre-line' }}
+                      variant="body"
+                    >
+                      {step.idealExample}
+                    </Typo>
+                  </Box>
+                </Box>
+              ) : null}
+            </Flex>
+          </Box>
+        ) : null}
+      </Flex>
+    </Box>
+  );
+}