@tipp/ui 2.10.1 → 2.10.3

package/dist/molecules/index.js

@@ -2,7 +2,8 @@ import "../chunk-SYMOHU2B.js";
 import "../chunk-AS7ID74X.js";
 import {
   CurriculumBody
-} from "../chunk-N242VJOP.js";
+} from "../chunk-RPQWRKBW.js";
+import "../chunk-KFUBWOCN.js";
 import {
   CurriculumSidebar
 } from "../chunk-RRC4WFG3.js";
@@ -13,22 +14,21 @@ import "../chunk-QLOYGKKM.js";
 import "../chunk-S4MEMFKG.js";
 import "../chunk-K4RZTENM.js";
 import "../chunk-UXH2XIB2.js";
-import "../chunk-O332K3SW.js";
-import "../chunk-LRNO4W2P.js";
-import "../chunk-LK2H4QTJ.js";
-import "../chunk-SOKGYD5B.js";
-import "../chunk-U2EAXN3Y.js";
-import "../chunk-WLKK5L3P.js";
+import "../chunk-2H635UNE.js";
+import "../chunk-PS525SZS.js";
+import "../chunk-6UWQKH6U.js";
+import "../chunk-3ZJVSSAA.js";
+import "../chunk-ZGTGEBQX.js";
+import "../chunk-RJN4QT5J.js";
 import "../chunk-GE4M5GOQ.js";
 import "../chunk-G3KQN32M.js";
 import "../chunk-VK6INFSB.js";
-import "../chunk-CGLDFUOY.js";
-import "../chunk-OUDDTPEN.js";
-import "../chunk-ZGTGEBQX.js";
+import "../chunk-JTVBWQJW.js";
+import "../chunk-NVBAOOAT.js";
 import "../chunk-SINRU2A6.js";
 import "../chunk-NVRVOTWZ.js";
+import "../chunk-YYVSUTXO.js";
 import "../chunk-GMKRNFH5.js";
-import "../chunk-KFUBWOCN.js";
 import {
   CurriculumSubNav
 } from "../chunk-XWHBJY5V.js";
@@ -60,24 +60,24 @@ import {
 } from "../chunk-EZN5PMTC.js";
 import {
   Stepper
-} from "../chunk-VBXZIIUA.js";
+} from "../chunk-PVDHXFLT.js";
 import {
   TagSelector
-} from "../chunk-Q2FDF2AB.js";
+} from "../chunk-V4QYGHOJ.js";
 import {
   TimeSelect
 } from "../chunk-GRDRXD53.js";
 import "../chunk-WTS75RUC.js";
 import "../chunk-BXX3B3E4.js";
 import "../chunk-NRPDVI76.js";
-import "../chunk-NWJSLIQ3.js";
 import "../chunk-2BPFXK4L.js";
+import "../chunk-NWJSLIQ3.js";
 import {
   TrainingInfoGuideline
 } from "../chunk-AHYOAFOU.js";
 import {
   DynamicFormEditor
-} from "../chunk-FJEDSUGU.js";
+} from "../chunk-66SUBB2N.js";
 import {
   DynamicFormResponseItem
 } from "../chunk-77H5BUYO.js";
@@ -90,7 +90,7 @@ import {
 } from "../chunk-PAUEQXYG.js";
 import {
   LearningPost
-} from "../chunk-CUS3ORMD.js";
+} from "../chunk-K4QH4R3O.js";
 import {
   Navigation
 } from "../chunk-6OT5OYGM.js";
@@ -100,55 +100,60 @@ import {
 import {
   DownloadCard
 } from "../chunk-C6HO3IGE.js";
-import "../chunk-3DZIX4CE.js";
-import "../chunk-CBYIPRND.js";
-import "../chunk-D4U2ZV2A.js";
-import "../chunk-V7KAHLW2.js";
+import "../chunk-AHAGCAQR.js";
+import "../chunk-RBWD6IKY.js";
+import "../chunk-H533TE6M.js";
+import "../chunk-HNAZV4MI.js";
 import {
   DynamicForm,
   createYupValidation
-} from "../chunk-SQ3FYBJT.js";
+} from "../chunk-WJ35Y2IU.js";
 import {
   DynamicFormField
-} from "../chunk-NK6S7ZMB.js";
+} from "../chunk-UMLYWHB2.js";
 import "../chunk-Z7WNKARH.js";
 import {
   AutocompleteTextfield
 } from "../chunk-OOM522XP.js";
 import {
   DescriptionJsonRender
-} from "../chunk-N3FMP27I.js";
+} from "../chunk-XMZYZJTH.js";
 import "../chunk-BEKSO5JG.js";
 import "../chunk-FAL6S2XK.js";
 import "../chunk-AELKCD6B.js";
+import "../chunk-CGDBUDY3.js";
 import "../chunk-5XYPLDI5.js";
 import "../chunk-6NPTJBFE.js";
+import "../chunk-MUPK4L3U.js";
 import "../chunk-YXMB4MCM.js";
 import "../chunk-HYITAA4J.js";
 import "../chunk-FR2GDOU2.js";
-import "../chunk-CGDBUDY3.js";
+import "../chunk-USL6PICI.js";
+import "../chunk-RWJUXAFY.js";
+import "../chunk-RMW3MQF5.js";
 import "../chunk-TNNF5Q62.js";
 import "../chunk-DX3DLP5Z.js";
 import "../chunk-SA7AYYQS.js";
 import "../chunk-3TOUVBIB.js";
-import "../chunk-MUPK4L3U.js";
+import "../chunk-EGEQY3KT.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-BI6TW3ZO.js";
-import "../chunk-USL6PICI.js";
-import "../chunk-RWJUXAFY.js";
-import "../chunk-RMW3MQF5.js";
-import "../chunk-T73HHR3I.js";
-import "../chunk-EGEQY3KT.js";
-import "../chunk-WG5OK3YN.js";
-import "../chunk-ZCGH6TJ3.js";
-import "../chunk-UFWDQGOK.js";
-import "../chunk-NFDQJVFA.js";
 import "../chunk-KDS7OQOY.js";
 import "../chunk-USGOLLYO.js";
 import "../chunk-U7N2PWMO.js";
 import "../chunk-7RJYF5L3.js";
 import "../chunk-HF6GNDPV.js";
+import "../chunk-T73HHR3I.js";
+import "../chunk-EIKFXUNC.js";
+import "../chunk-RP2RGCAW.js";
+import "../chunk-WG5OK3YN.js";
+import "../chunk-ZCGH6TJ3.js";
+import "../chunk-UFWDQGOK.js";
+import "../chunk-NFDQJVFA.js";
+import "../chunk-6SYFG6YY.js";
+import "../chunk-GPZXD762.js";
+import "../chunk-BK74U562.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-L4QQGIYQ.js";
 import "../chunk-LDBWASUA.js";
@@ -157,8 +162,6 @@ import "../chunk-36W7VD2Z.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-2LCH3PDF.js";
 import "../chunk-LQY4RKWI.js";
-import "../chunk-EIKFXUNC.js";
-import "../chunk-RP2RGCAW.js";
 import "../chunk-VOME2TE7.js";
 import "../chunk-JVXATVAC.js";
 import "../chunk-B3VSXNTH.js";
@@ -177,11 +180,8 @@ import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
 import "../chunk-WYWM2HSZ.js";
-import "../chunk-EAXUQEO5.js";
-import "../chunk-6SYFG6YY.js";
-import "../chunk-GPZXD762.js";
-import "../chunk-BK74U562.js";
 import "../chunk-VFQD57ZY.js";
+import "../chunk-EAXUQEO5.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   AutocompleteTextfield,

package/dist/molecules/learning-post.js

@@ -1,8 +1,9 @@
 import {
   LearningPost
-} from "../chunk-CUS3ORMD.js";
+} from "../chunk-K4QH4R3O.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-USGOLLYO.js";
+import "../chunk-BK74U562.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-L4QQGIYQ.js";
 import "../chunk-LDBWASUA.js";
@@ -12,9 +13,8 @@ import "../chunk-25HMMI7R.js";
 import "../chunk-2LCH3PDF.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-WYWM2HSZ.js";
-import "../chunk-EAXUQEO5.js";
-import "../chunk-BK74U562.js";
 import "../chunk-VFQD57ZY.js";
+import "../chunk-EAXUQEO5.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   LearningPost

package/dist/molecules/stepper.js

@@ -1,6 +1,7 @@
 import {
   Stepper
-} from "../chunk-VBXZIIUA.js";
+} from "../chunk-PVDHXFLT.js";
+import "../chunk-GPZXD762.js";
 import "../chunk-L4QQGIYQ.js";
 import "../chunk-LDBWASUA.js";
 import "../chunk-PO2PBAHW.js";
@@ -23,7 +24,6 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
-import "../chunk-GPZXD762.js";
 import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {

package/dist/molecules/tag-selector.js

@@ -1,9 +1,11 @@
 import {
   TagSelector
-} from "../chunk-Q2FDF2AB.js";
+} from "../chunk-V4QYGHOJ.js";
 import "../chunk-MUPK4L3U.js";
 import "../chunk-RMW3MQF5.js";
 import "../chunk-EGEQY3KT.js";
+import "../chunk-6SYFG6YY.js";
+import "../chunk-BK74U562.js";
 import "../chunk-L4QQGIYQ.js";
 import "../chunk-LDBWASUA.js";
 import "../chunk-PO2PBAHW.js";
@@ -29,8 +31,6 @@ import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
 import "../chunk-WYWM2HSZ.js";
-import "../chunk-6SYFG6YY.js";
-import "../chunk-BK74U562.js";
 import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {

package/dist/molecules/time-select.js

@@ -4,8 +4,8 @@ import {
 import "../chunk-WTS75RUC.js";
 import "../chunk-BXX3B3E4.js";
 import "../chunk-NRPDVI76.js";
-import "../chunk-NWJSLIQ3.js";
 import "../chunk-2BPFXK4L.js";
+import "../chunk-NWJSLIQ3.js";
 import "../chunk-K7LTEKQS.js";
 import "../chunk-BEKSO5JG.js";
 import "../chunk-YXMB4MCM.js";

package/dist/molecules/training-info-guideline.js

@@ -16,8 +16,8 @@ import "../chunk-36W7VD2Z.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-2LCH3PDF.js";
 import "../chunk-LQY4RKWI.js";
-import "../chunk-EAXUQEO5.js";
 import "../chunk-VFQD57ZY.js";
+import "../chunk-EAXUQEO5.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   TrainingInfoGuideline

package/dist/utils/index.js

@@ -5,14 +5,14 @@ import {
 import {
   getColumnMeta
 } from "../chunk-NRPDVI76.js";
+import {
+  getCellAlign
+} from "../chunk-2BPFXK4L.js";
 import {
   getTimeOption,
   getTimeOptions,
   parseTimeOption
 } from "../chunk-NWJSLIQ3.js";
-import {
-  getCellAlign
-} from "../chunk-2BPFXK4L.js";
 import {
   getDynamicFormDisplayValue
 } from "../chunk-K7LTEKQS.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.10.1",
+  "version": "2.10.3",
   "private": false,
   "type": "module",
   "exports": {

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

@@ -78,7 +78,7 @@ export function Content({
         {strengths.length > 0 ? (
           <Box id="strengths" style={{ scrollMarginTop }}>
             <AnalysisSection
-              desc="이번 세션에서 잘한 점"
+              desc="이번 세션에서 가장 돋보인 강점들이에요."
               items={strengths}
               title="강점"
               tone="good"
@@ -89,7 +89,7 @@ export function Content({
         {improvements.length > 0 ? (
           <Box id="improvements" style={{ scrollMarginTop }}>
             <AnalysisSection
-              desc="다음 시도에서 보완할 점"
+              desc="다음에 보완한다면 더 나은 결과를 얻을 수 있을 거에요."
               items={improvements}
               title="개선점"
               tone="bad"
@@ -112,7 +112,7 @@ export function Content({
         {showStepDetail ? (
           <Box id="step-detail" style={{ scrollMarginTop }}>
             <Section
-              desc="대화 프레임워크 단계별 평가 결과입니다."
+              desc="이번 대화의 더 나아질 수 있는 방향을 알려드릴게요."
               title="단계별 상세 분석"
             >
               <Flex direction="column">

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

@@ -60,7 +60,8 @@ export function Header({
   onOpenReplay,
   onResolveMediaUrl,
 }: HeaderProps): React.ReactElement {
-  const pdfHref = detail.trainingLogURL;
+  // PDF 산출물은 embedLink(AI 리포트 PDF). trainingLogURL 은 대화 스크립트 JSON 이므로 PDF 가 아니다.
+  const pdfHref = detail.embedLink;
   const hasReplayMedia = Boolean(
     detail.trainingVideoURL || detail.trainingAudioURL
   );
@@ -89,7 +90,7 @@ export function Header({
             <Badge color="neutral" size="small" variant="soft">
               {statusLabelOf(detail.status)}
             </Badge>
-            <Typo as="span" style={{ color: 'var(--gray-11)' }} variant="body">
+            <Typo as="span" color="gray" variant="body">
               {detail.trainingSessionNum}회차
               {detail.characterTitle ? ` · ${detail.characterTitle}` : ''}
             </Typo>

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

@@ -3,7 +3,8 @@
 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';
+import type { SpeechShare } from '../utils/session-utils';
+import { SpeechShareBar } from './speech-share-bar';
 
 export interface ScoreSummaryProps {
   detail: RpSessionDetailData;
@@ -11,60 +12,6 @@ export interface ScoreSummaryProps {
   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,
@@ -133,8 +80,8 @@ export function ScoreSummary({
             >
               <Typo
                 as="p"
+                color="amber"
                 mono
-                style={{ color: 'var(--amber-11)' }}
                 variant="body"
                 weight="medium"
               >
@@ -143,7 +90,7 @@ export function ScoreSummary({
               <Box mt="1" style={{ maxWidth: '65ch' }}>
                 <Typo
                   as="p"
-                  style={{ color: 'var(--amber-11)' }}
+                  color="amber"
                   variant="body"
                 >
                   {report.deduction.basis}

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

@@ -235,7 +235,7 @@ export function ScoreTrendSection({
 
   return (
     <Section
-      desc={`같은 시나리오 최근 ${ordered.length}회차 총점 변화`}
+      desc={`동일 롤플레잉 최근 ${ordered.length}회차 총점 변화`}
       title="총점 추이"
     >
       <Flex direction="column" gap="4">

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

@@ -1,12 +1,9 @@
 'use client';
 
 import { Box, Flex, Typo } from '../../../atoms';
-import {
-  formatTimestamp,
-  SPEECH_OVERTALK_THRESHOLD,
-  type SpeechShare,
-} from '../utils/session-utils';
+import { formatTimestamp, type SpeechShare } from '../utils/session-utils';
 import type { RpSessionScriptLine } from '../types';
+import { SpeechShareBar } from './speech-share-bar';
 
 export interface ScriptTranscriptProps {
   lines: RpSessionScriptLine[];
@@ -17,55 +14,6 @@ export interface ScriptTranscriptProps {
   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,
@@ -88,14 +36,13 @@ export function ScriptTranscript({
           <Typo
             as="span"
             color="gray"
-            style={{ fontSize: '0.75rem', flexShrink: 0 }}
-            variant="body"
+            variant="caption"
           >
-            {canSync ? '재생 위치에 맞춰 표시' : '타임라인 비동기'}
+            {canSync ? '' : '타임라인 기능 사용 불가'}
           </Typo>
         </Flex>
         {partnerName ? (
-          <Typo as="p" color="gray" mt="1" style={{ fontSize: '0.75rem' }} variant="body">
+          <Typo as="p" color="gray" mt="1"  variant="body">
             상대 · {partnerName}
           </Typo>
         ) : null}
@@ -142,12 +89,11 @@ export function ScriptTranscript({
                       mono
                       style={{
                         color: isActive ? 'var(--accent-11)' : 'var(--gray-9)',
-                        fontSize: '0.75rem',
                         flexShrink: 0,
                         minWidth: 32,
                         lineHeight: '1.7',
                       }}
-                      variant="body"
+                      variant="caption"
                     >
                       {formatTimestamp(line.startMs)}
                     </Typo>
@@ -156,23 +102,22 @@ export function ScriptTranscript({
                     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"
+                    weight="bold"
                   >
                     {isUser ? '나' : '상대'}
                   </Typo>
                   <Typo
                     as="span"
+                    color="gray"
+                    highContrast={isActive}
                     style={{
-                      fontSize: '0.875rem',
                       lineHeight: '1.7',
-                      color: isActive ? 'var(--gray-12)' : 'var(--gray-11)',
                     }}
                     variant="body"
                     weight={isActive ? 'medium' : undefined}

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

@@ -86,8 +86,9 @@ function StepMetricBadge({ step }: { step: RpReportStep }): React.ReactElement |
     return (
       <Typo
         as="span"
+        color="gray"
         mono
-        style={{ flexShrink: 0, color: 'var(--gray-11)' }}
+        style={{ flexShrink: 0 }}
         variant="body"
         weight="medium"
       >
@@ -262,8 +263,8 @@ export function SectionNav({ items, steps }: SectionNavProps): React.ReactElemen
                             >
                               <Typo
                                 as="span"
+                                color="gray"
                                 mono
-                                style={{ color: 'var(--gray-11)' }}
                                 variant="body"
                                 weight="medium"
                               >

package/src/app/roleplay/parts/speech-share-bar.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Box, Flex, Typo } from '../../../atoms';
+import {
+  SPEECH_OVERTALK_THRESHOLD,
+  type SpeechShare,
+} from '../utils/session-utils';
+
+export 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={{
+            color: isOvertalking ? 'var(--red-11)' : 'var(--accent-11)',
+          }}
+          variant="caption"
+          weight="medium"
+        >
+          내 발화량 {share.userPct}%
+        </Typo>
+        <Typo as="span" color="gray" variant="caption">
+          상대 {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" color="red" mt="1" variant="caption">
+          상대의 말을 더 듣고 질문·경청의 비중을 높여 보세요
+        </Typo>
+      ) : null}
+    </Box>
+  );
+}

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

@@ -48,9 +48,7 @@ export function StepSummary({ steps }: StepSummaryProps): React.ReactElement | n
   if (steps.length === 0) return null;
 
   const radarReady = steps.every((s) => stepRatio(s) !== null);
-  const desc = radarReady
-    ? '대화 단계별 평가 결과를 레이더로 요약합니다.'
-    : '대화 단계별 평가 결과입니다.';
+  const desc = '대화 단계 별로 나의 강약점을 확인할 수 있어요.';
 
   const list = (
     <Flex direction="column">
@@ -89,8 +87,8 @@ export function StepSummary({ steps }: StepSummaryProps): React.ReactElement | n
                   >
                     <Typo
                       as="span"
+                      color="gray"
                       mono
-                      style={{ color: 'var(--gray-11)' }}
                       variant="body"
                       weight="medium"
                     >