@tipp/ui 2.8.0 → 2.10.0

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

@@ -0,0 +1,98 @@
+'use client';
+
+import React from 'react';
+import { Box, Flex, Heading, Separator, Typo } from '../../../atoms';
+import type { RpReportAnalysisItem } from '../utils/report-parse';
+
+/* ───────────────────────── 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>
+  );
+}
+
+/* ───────────────────────── AnalysisSection ───────────────────────── */
+
+export interface AnalysisSectionProps {
+  title: string;
+  desc?: string;
+  items: RpReportAnalysisItem[];
+  tone: 'good' | 'bad';
+}
+
+export function AnalysisSection({
+  title,
+  desc,
+  items,
+  tone,
+}: AnalysisSectionProps): React.ReactElement | null {
+  if (items.length === 0) return null;
+
+  const accentBorder = tone === 'good' ? 'var(--green-a6)' : 'var(--amber-a6)';
+  const numColor = tone === 'good' ? 'var(--green-11)' : 'var(--amber-11)';
+
+  return (
+    <Section desc={desc} title={title}>
+      <Flex direction="column">
+        {items.map((item, index) => (
+          <Box key={item.title}>
+            {index > 0 && <Separator size="4" />}
+            <Flex
+              gap="3"
+              pl="3"
+              py="3"
+              style={{ borderLeft: `2px solid ${accentBorder}` }}
+            >
+              <Typo
+                as="span"
+                mono
+                style={{ flexShrink: 0, color: numColor }}
+                variant="body"
+                weight="bold"
+              >
+                {index + 1}
+              </Typo>
+              <Box style={{ minWidth: 0 }}>
+                <Typo as="p" variant="body" weight="medium">
+                  {item.title}
+                </Typo>
+                <Box mt="1" style={{ maxWidth: '65ch' }}>
+                  <Typo as="p" variant="body">
+                    {item.detail}
+                  </Typo>
+                </Box>
+              </Box>
+            </Flex>
+          </Box>
+        ))}
+      </Flex>
+    </Section>
+  );
+}

package/src/app/roleplay/parts/coaching-panel.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { Box, Card, Flex, Grid, Heading, Typo } from '../../../atoms';
+import type { RpReportSkill } from '../utils/report-parse';
+
+export interface CoachingPanelProps {
+  skills: RpReportSkill[];
+}
+
+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>
+  );
+}
+
+export function CoachingPanel({ skills }: CoachingPanelProps): React.ReactElement | null {
+  if (skills.length === 0) return null;
+  return (
+    <Section desc="다음 재도전에 바로 쓸 대화 기술" title="즉시 적용 스킬">
+      <Grid columns="1" gap="6">
+        {skills.map((skill, index) => (
+          <Card
+            key={skill.title}
+            style={{ padding: 'var(--space-3)' }}
+            variant="surface"
+          >
+            <Flex align="center" gap="2">
+              <Flex
+                align="center"
+                justify="center"
+                style={{
+                  width: 22,
+                  height: 22,
+                  borderRadius: 'var(--radius-full)',
+                  background: 'var(--accent-9)',
+                  flexShrink: 0,
+                }}
+              >
+                <Typo
+                  as="span"
+                  mono
+                  style={{ color: 'var(--accent-contrast)' }}
+                  variant="body"
+                  weight="bold"
+                >
+                  {index + 1}
+                </Typo>
+              </Flex>
+              <Typo as="span" variant="body" weight="medium">
+                {skill.title}
+              </Typo>
+            </Flex>
+            <Box mt="2" style={{ maxWidth: '65ch' }}>
+              <Typo as="p" variant="body">
+                {skill.description}
+              </Typo>
+            </Box>
+            <Box
+              mt="2"
+              p="2"
+              style={{
+                borderRadius: 'var(--radius-2)',
+                background: 'var(--accent-a2)',
+              }}
+            >
+              <Typo as="p" style={{ color: 'var(--accent-11)' }} variant="body">
+                {skill.example}
+              </Typo>
+            </Box>
+          </Card>
+        ))}
+      </Grid>
+    </Section>
+  );
+}

package/src/app/roleplay/parts/content.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import React from 'react';
+import { Box, Flex, Grid, Heading, Separator, Typo } from '../../../atoms';
+import type { RpSessionDetailData, RpSessionHistoryItem } from '../types';
+import type { RpReport } from '../utils/report-parse';
+import { hasStepSignal } from '../utils/session-utils';
+import type { SpeechShare } from '../utils/session-utils';
+import { AnalysisSection, Section } from './analysis-section';
+import { CoachingPanel } from './coaching-panel';
+import { ScoreSummary } from './score-summary';
+import { ScoreTrendSection } from './score-trend-section';
+import { SectionNav } from './section-nav';
+import type { SectionNavItem } from './section-nav';
+import { StepDetail } from './step-detail';
+import { StepSummary } from './step-summary';
+
+export interface ContentProps {
+  detail: RpSessionDetailData;
+  report: RpReport;
+  history: RpSessionHistoryItem[];
+  speechShare: SpeechShare | null;
+  scrollMarginTop: string;
+}
+
+export function Content({
+  detail,
+  report,
+  history,
+  speechShare,
+  scrollMarginTop,
+}: ContentProps): React.ReactElement {
+  const { steps, skills, strengths, improvements } = report;
+  const scoreValue = detail.totalScore ?? report.totalScore;
+
+  const showTrend = history.length > 1;
+  const showStepSummary = steps.length > 0 && steps.some(hasStepSignal);
+  const showStepDetail = steps.length > 0;
+
+  const navItems: SectionNavItem[] = [
+    { id: 'score-summary', label: '종합 점수', score: scoreValue, max: 100 },
+    ...(strengths.length > 0 ? [{ id: 'strengths', label: '강점' }] : []),
+    ...(improvements.length > 0 ? [{ id: 'improvements', label: '개선점' }] : []),
+    ...(showTrend ? [{ id: 'score-trend', label: '총점 추이' }] : []),
+    ...(showStepSummary ? [{ id: 'step-summary', label: '평가 단계 요약' }] : []),
+    ...(showStepDetail ? [{ id: 'step-detail', label: '단계별 상세 분석' }] : []),
+    ...(skills.length > 0 ? [{ id: 'coaching', label: '즉시 적용 스킬' }] : []),
+  ];
+
+  return (
+    <Grid
+      align="start"
+      columns={{ initial: '1', md: 'minmax(0, 1fr) 224px' }}
+      gap="7"
+    >
+      <Flex direction="column" gap="7">
+        {report.frameworkTitle !== null || report.frameworkDescription !== null ? (
+          <Box>
+            {report.frameworkTitle !== null ? (
+              <Heading size="5" weight="bold">
+                {report.frameworkTitle}
+              </Heading>
+            ) : null}
+            {report.frameworkDescription !== null ? (
+              <Box mt={report.frameworkTitle !== null ? '2' : '0'}>
+                <Typo as="p" variant="body">
+                  {report.frameworkDescription}
+                </Typo>
+              </Box>
+            ) : null}
+          </Box>
+        ) : null}
+
+        <Box id="score-summary" style={{ scrollMarginTop }}>
+          <ScoreSummary detail={detail} report={report} speechShare={speechShare} />
+        </Box>
+
+        {strengths.length > 0 ? (
+          <Box id="strengths" style={{ scrollMarginTop }}>
+            <AnalysisSection
+              desc="이번 세션에서 잘한 점"
+              items={strengths}
+              title="강점"
+              tone="good"
+            />
+          </Box>
+        ) : null}
+
+        {improvements.length > 0 ? (
+          <Box id="improvements" style={{ scrollMarginTop }}>
+            <AnalysisSection
+              desc="다음 시도에서 보완할 점"
+              items={improvements}
+              title="개선점"
+              tone="bad"
+            />
+          </Box>
+        ) : null}
+
+        {showTrend ? (
+          <Box id="score-trend" style={{ scrollMarginTop }}>
+            <ScoreTrendSection history={history} />
+          </Box>
+        ) : null}
+
+        {showStepSummary ? (
+          <Box id="step-summary" style={{ scrollMarginTop }}>
+            <StepSummary steps={steps} />
+          </Box>
+        ) : null}
+
+        {showStepDetail ? (
+          <Box id="step-detail" style={{ scrollMarginTop }}>
+            <Section
+              desc="대화 프레임워크 단계별 평가 결과입니다."
+              title="단계별 상세 분석"
+            >
+              <Flex direction="column">
+                {steps.map((step, i) => (
+                  <Box key={step.key}>
+                    {i > 0 ? (
+                      <Separator
+                        mb="6"
+                        size="4"
+                        style={{ marginTop: 'calc(var(--space-9) * 1.6)' }}
+                      />
+                    ) : null}
+                    <StepDetail scrollMarginTop={scrollMarginTop} step={step} />
+                  </Box>
+                ))}
+              </Flex>
+            </Section>
+          </Box>
+        ) : null}
+
+        {skills.length > 0 ? (
+          <Box id="coaching" style={{ scrollMarginTop }}>
+            <CoachingPanel skills={skills} />
+          </Box>
+        ) : null}
+      </Flex>
+
+      <SectionNav items={navItems} steps={showStepDetail ? steps : []} />
+    </Grid>
+  );
+}

package/src/app/roleplay/parts/header.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { Badge, Box, Button, Flex, Heading, Typo } from '../../../atoms';
+import type { RpSessionDetailData } from '../types';
+import { formatDate, formatDuration, statusLabelOf } from '../utils/session-utils';
+
+export interface HeaderProps {
+  detail: RpSessionDetailData;
+  hasScript: boolean;
+  onOpenReplay: () => void;
+  onResolveMediaUrl?: (
+    rawUrl: string,
+    options: { disposition: 'inline' | 'attachment' }
+  ) => string | Promise<string>;
+}
+
+function PdfIcon(): React.ReactElement {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="13"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width="13"
+    >
+      <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
+      <path d="M14 3v5h5" />
+      <path d="M12 12v5" />
+      <path d="M9.5 14.5 12 17l2.5-2.5" />
+    </svg>
+  );
+}
+
+function VideoIcon(): React.ReactElement {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="13"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width="13"
+    >
+      <rect height="12" rx="2" width="13" x="2" y="6" />
+      <path d="m15 10 6-3v10l-6-3z" />
+    </svg>
+  );
+}
+
+export function Header({
+  detail,
+  hasScript,
+  onOpenReplay,
+  onResolveMediaUrl,
+}: HeaderProps): React.ReactElement {
+  const pdfHref = detail.trainingLogURL;
+  const hasReplayMedia = Boolean(
+    detail.trainingVideoURL || detail.trainingAudioURL
+  );
+
+  const handlePdfClick = (): void => {
+    if (!pdfHref || !onResolveMediaUrl) return;
+    void Promise.resolve(
+      onResolveMediaUrl(pdfHref, { disposition: 'attachment' })
+    ).then((url) => {
+      window.open(url, '_blank');
+    });
+  };
+
+  const replayActive = hasScript && hasReplayMedia;
+
+  return (
+    <Box>
+      <Flex
+        align={{ md: 'start' }}
+        direction={{ initial: 'column', md: 'row' }}
+        gap="4"
+        justify="between"
+      >
+        <Box style={{ minWidth: 0 }}>
+          <Flex align="center" gap="2" mb="2" wrap="wrap">
+            <Badge color="neutral" size="small" variant="soft">
+              {statusLabelOf(detail.status)}
+            </Badge>
+            <Typo as="span" style={{ color: 'var(--gray-11)' }} variant="body">
+              {detail.trainingSessionNum}회차
+              {detail.characterTitle ? ` · ${detail.characterTitle}` : ''}
+            </Typo>
+          </Flex>
+          <Heading
+            size={{ initial: '5', md: '7' }}
+            style={{ textWrap: 'balance' }}
+            weight="bold"
+          >
+            {detail.scenarioTitle ?? '롤플레잉 세션'}
+          </Heading>
+          <Typo as="p" color="gray" mono mt="1" variant="body">
+            {formatDate(detail.createdAt)} · {formatDuration(detail.trainingTime)}
+          </Typo>
+        </Box>
+        <Flex
+          gap="2"
+          justify={{ initial: 'start', md: 'end' }}
+          style={{ flexShrink: 0 }}
+          wrap="wrap"
+        >
+          {onResolveMediaUrl ? (
+            <Button
+              color="gray"
+              disabled={!pdfHref}
+              onClick={pdfHref ? handlePdfClick : undefined}
+              size={{ initial: 'small', md: 'medium' }}
+              title={pdfHref ? undefined : '산출물 없음'}
+              type="button"
+              variant="outline"
+            >
+              <PdfIcon />
+              <span style={{ whiteSpace: 'nowrap' }}>PDF 다운로드</span>
+            </Button>
+          ) : (
+            <Button
+              asChild={Boolean(pdfHref)}
+              color="gray"
+              disabled={!pdfHref}
+              size={{ initial: 'small', md: 'medium' }}
+              title={pdfHref ? undefined : '산출물 없음'}
+              type="button"
+              variant="outline"
+            >
+              {pdfHref ? (
+                <a href={pdfHref} rel="noopener noreferrer" target="_blank">
+                  <PdfIcon />
+                  <span style={{ whiteSpace: 'nowrap' }}>PDF 다운로드</span>
+                </a>
+              ) : (
+                <span>
+                  <PdfIcon />
+                  <span style={{ whiteSpace: 'nowrap' }}>PDF 다운로드</span>
+                </span>
+              )}
+            </Button>
+          )}
+          {hasScript ? (
+            <Button
+              color="gray"
+              disabled={!replayActive}
+              onClick={onOpenReplay}
+              size={{ initial: 'small', md: 'medium' }}
+              title={replayActive ? undefined : '다시보기 없음'}
+              type="button"
+              variant="outline"
+            >
+              <VideoIcon />
+              <span style={{ whiteSpace: 'nowrap' }}>영상</span>
+            </Button>
+          ) : null}
+        </Flex>
+      </Flex>
+    </Box>
+  );
+}

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

@@ -0,0 +1,158 @@
+'use client';
+
+import { Box, Card, Flex, Grid, Separator, Typo } from '../../../atoms';
+import type { RpReport } from '../utils/report-parse';
+import type { RpSessionDetailData } from '../types';
+import { SPEECH_OVERTALK_THRESHOLD, type SpeechShare } from '../utils/session-utils';
+
+export interface ScoreSummaryProps {
+  detail: RpSessionDetailData;
+  report: RpReport;
+  speechShare: SpeechShare | null;
+}
+
+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 ScoreSummary({
+  detail,
+  report,
+  speechShare,
+}: ScoreSummaryProps): React.ReactElement {
+  const scoreValue = detail.totalScore ?? report.totalScore;
+  const comment = report.comment;
+
+  return (
+    <Grid
+      align="start"
+      columns={comment ? { initial: '1', md: 'minmax(0, 240px) 1fr' } : '1'}
+      gap="5"
+    >
+      <Card variant="surface">
+        <Flex align="center" direction="column" gap="2" py="3">
+          <Typo as="p" color="gray" variant="body" weight="medium">
+            종합 점수
+          </Typo>
+          <Flex align="baseline" gap="1">
+            <Typo
+              as="span"
+              mono
+              style={{
+                color: 'var(--gray-12)',
+                fontSize: '3.75rem',
+                lineHeight: 1.1,
+              }}
+              weight="bold"
+            >
+              {scoreValue ?? '—'}
+            </Typo>
+            <Typo as="span" color="gray" mono variant="subtitle">
+              /100
+            </Typo>
+          </Flex>
+        </Flex>
+        {speechShare ? (
+          <>
+            <Separator my="3" size="4" />
+            <SpeechShareBar share={speechShare} />
+          </>
+        ) : null}
+      </Card>
+
+      {comment ? (
+        <Flex direction="column" gap="3">
+          <Typo as="p" variant="body" weight="medium">
+            종합 분석
+          </Typo>
+          <Box style={{ maxWidth: '65ch' }}>
+            <Typo as="p" variant="body">
+              {comment}
+            </Typo>
+          </Box>
+          {report.deduction ? (
+            <Box
+              pl="3"
+              pr="3"
+              py="2"
+              style={{
+                borderLeft: '2px solid var(--amber-a6)',
+                background: 'var(--amber-a2)',
+                borderRadius: 'var(--radius-2)',
+              }}
+            >
+              <Typo
+                as="p"
+                mono
+                style={{ color: 'var(--amber-11)' }}
+                variant="body"
+                weight="medium"
+              >
+                감점 {report.deduction.score}점
+              </Typo>
+              <Box mt="1" style={{ maxWidth: '65ch' }}>
+                <Typo
+                  as="p"
+                  style={{ color: 'var(--amber-11)' }}
+                  variant="body"
+                >
+                  {report.deduction.basis}
+                </Typo>
+              </Box>
+            </Box>
+          ) : null}
+        </Flex>
+      ) : null}
+    </Grid>
+  );
+}