@tipp/ui 2.9.0 → 2.10.0

package/dist/molecules/dynamic-form-editor.js

@@ -1,13 +1,13 @@
 import {
   DynamicFormEditor
-} from "../chunk-NEJCZABQ.js";
+} from "../chunk-FJEDSUGU.js";
 import "../chunk-3DZIX4CE.js";
 import "../chunk-CBYIPRND.js";
-import "../chunk-Z7WNKARH.js";
 import "../chunk-D4U2ZV2A.js";
 import "../chunk-V7KAHLW2.js";
 import "../chunk-SQ3FYBJT.js";
 import "../chunk-NK6S7ZMB.js";
+import "../chunk-Z7WNKARH.js";
 import "../chunk-FAL6S2XK.js";
 import "../chunk-AELKCD6B.js";
 import "../chunk-5XYPLDI5.js";

package/dist/molecules/index.js

@@ -1,5 +1,8 @@
 import "../chunk-SYMOHU2B.js";
 import "../chunk-AS7ID74X.js";
+import {
+  CurriculumBody
+} from "../chunk-N242VJOP.js";
 import {
   CurriculumSidebar
 } from "../chunk-RRC4WFG3.js";
@@ -8,27 +11,34 @@ import "../chunk-WS7IOHVK.js";
 import "../chunk-47QYYEMG.js";
 import "../chunk-QLOYGKKM.js";
 import "../chunk-S4MEMFKG.js";
-import {
-  CurriculumBody
-} from "../chunk-6DWUGXSY.js";
 import "../chunk-K4RZTENM.js";
 import "../chunk-UXH2XIB2.js";
-import "../chunk-R5UDNKV2.js";
-import "../chunk-TQTCT7DC.js";
-import "../chunk-NVRVOTWZ.js";
+import "../chunk-O332K3SW.js";
+import "../chunk-LRNO4W2P.js";
 import "../chunk-LK2H4QTJ.js";
-import "../chunk-KLJVIEFW.js";
+import "../chunk-SOKGYD5B.js";
+import "../chunk-U2EAXN3Y.js";
+import "../chunk-WLKK5L3P.js";
+import "../chunk-GE4M5GOQ.js";
 import "../chunk-G3KQN32M.js";
 import "../chunk-VK6INFSB.js";
-import "../chunk-GMKRNFH5.js";
-import "../chunk-KQ3ME6XY.js";
 import "../chunk-CGLDFUOY.js";
 import "../chunk-OUDDTPEN.js";
 import "../chunk-ZGTGEBQX.js";
-import "../chunk-WLKK5L3P.js";
 import "../chunk-SINRU2A6.js";
-import "../chunk-GE4M5GOQ.js";
+import "../chunk-NVRVOTWZ.js";
+import "../chunk-GMKRNFH5.js";
 import "../chunk-KFUBWOCN.js";
+import {
+  CurriculumSubNav
+} from "../chunk-XWHBJY5V.js";
+import {
+  CurriculumProvider,
+  useCurriculumContext
+} from "../chunk-WA5A2GB4.js";
+import {
+  CurriculumV2Layout
+} from "../chunk-K3Q4XLCN.js";
 import {
   DatePickerButton
 } from "../chunk-AT5PAJLW.js";
@@ -40,20 +50,7 @@ import {
   createColumnHelper
 } from "../chunk-5RIAIE2J.js";
 import "../chunk-JCG2AUFJ.js";
-import {
-  CurriculumSubNav
-} from "../chunk-XWHBJY5V.js";
-import {
-  CurriculumProvider,
-  useCurriculumContext
-} from "../chunk-WA5A2GB4.js";
-import {
-  CurriculumV2Layout
-} from "../chunk-K3Q4XLCN.js";
 import "../chunk-2ISIAPFS.js";
-import {
-  Navigation
-} from "../chunk-6OT5OYGM.js";
 import {
   OneOnOneGuideList,
   oneOnOneNoteTextReplacer
@@ -80,7 +77,7 @@ import {
 } from "../chunk-AHYOAFOU.js";
 import {
   DynamicFormEditor
-} from "../chunk-NEJCZABQ.js";
+} from "../chunk-FJEDSUGU.js";
 import {
   DynamicFormResponseItem
 } from "../chunk-77H5BUYO.js";
@@ -95,9 +92,8 @@ import {
   LearningPost
 } from "../chunk-CUS3ORMD.js";
 import {
-  DescriptionJsonRender
-} from "../chunk-N3FMP27I.js";
-import "../chunk-BEKSO5JG.js";
+  Navigation
+} from "../chunk-6OT5OYGM.js";
 import {
   DotNavigation
 } from "../chunk-IJOOKMKQ.js";
@@ -106,7 +102,6 @@ import {
 } from "../chunk-C6HO3IGE.js";
 import "../chunk-3DZIX4CE.js";
 import "../chunk-CBYIPRND.js";
-import "../chunk-Z7WNKARH.js";
 import "../chunk-D4U2ZV2A.js";
 import "../chunk-V7KAHLW2.js";
 import {
@@ -116,9 +111,14 @@ import {
 import {
   DynamicFormField
 } from "../chunk-NK6S7ZMB.js";
+import "../chunk-Z7WNKARH.js";
 import {
   AutocompleteTextfield
 } from "../chunk-OOM522XP.js";
+import {
+  DescriptionJsonRender
+} from "../chunk-N3FMP27I.js";
+import "../chunk-BEKSO5JG.js";
 import "../chunk-FAL6S2XK.js";
 import "../chunk-AELKCD6B.js";
 import "../chunk-5XYPLDI5.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "private": false,
   "type": "module",
   "exports": {
@@ -14,6 +14,16 @@
         "default": "./dist/index.js"
       }
     },
+    "./roleplay": {
+      "require": {
+        "types": "./dist/app/roleplay/index.d.ts",
+        "default": "./dist/app/roleplay/index.cjs"
+      },
+      "import": {
+        "types": "./dist/app/roleplay/index.d.ts",
+        "default": "./dist/app/roleplay/index.js"
+      }
+    },
     "./*": "./*"
   },
   "main": "dist/index.js",
@@ -39,8 +49,10 @@
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
-    "@types/echarts": "^4.9.22",
     "@types/jest": "^29.5.14",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.6",
+    "react-resize-detector": "^12.3.0",
     "@types/lodash-es": "^4.17.12",
     "autoprefixer": "10.4.19",
     "eslint": "^8.57.0",
@@ -65,12 +77,26 @@
     "@types/react": "*",
     "@types/react-dom": "*",
     "dompurify": "^3.2.6",
+    "echarts": ">=5.0.0",
+    "echarts-for-react": "^3.0.0",
     "formik": "^2.4.6",
     "react": "^19.0 || ^19.0.0-rc",
     "react-datepicker": "^8.0",
     "react-dom": "^19.0 || ^19.0.0-rc",
+    "react-resize-detector": ">=11.0.0",
     "yup": "^1.4.0"
   },
+  "peerDependenciesMeta": {
+    "echarts": {
+      "optional": true
+    },
+    "echarts-for-react": {
+      "optional": true
+    },
+    "react-resize-detector": {
+      "optional": true
+    }
+  },
   "turbo": {
     "pipeline": {
       "build": {

package/src/app/roleplay/chart/session-chart.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+// echarts 기반 Chart 래퍼 + 토큰 색 해석 훅.
+// echarts 본체/echarts-for-react/react-resize-detector 는 @tipp/ui 의 optional peerDependency.
+// 이 모듈은 subpath(@tipp/ui/roleplay)로만 노출되어 메인 번들에서 격리된다.
+// SSR 안전: echarts/ResizeObserver 는 클라이언트 전용이라 마운트 이후에만 렌더한다.
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import type { EChartsOption } from 'echarts';
+import * as echarts from 'echarts/core';
+import * as ReactEChartsCoreNs from 'echarts-for-react/lib/core';
+import { LineChart, RadarChart } from 'echarts/charts';
+import { SVGRenderer } from 'echarts/renderers';
+import {
+  AxisPointerComponent,
+  AriaComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  PolarComponent,
+  RadarComponent,
+} from 'echarts/components';
+import { EchartDefaultProps } from '../../../charts';
+
+// CJS/ESM interop 정규화.
+// echarts-for-react/lib/core 는 CJS(exports.default = 클래스)이고 @tipp/ui 는 strict ESM("type":"module")
+// 이라, 번들러/런타임에 따라 실제 컴포넌트가 default 로 0~2 겹 감싸진다. 특히 webpack 이 __esModule 를
+// 무시하면 module.exports 를 한 번 더 감싸 ReactEChartsCoreNs.default.default 에 클래스가 들어가고,
+// 그대로 렌더하면 React 가 "Element type is invalid (got: object)" 로 던진다.
+// 함수(클래스/함수형 컴포넌트)가 나올 때까지 default 를 풀어 정규화한다.
+type EChartsComponentType = typeof ReactEChartsCoreNs.default;
+
+function unwrapDefault(mod: unknown): unknown {
+  let current = mod;
+  while (current !== null && typeof current === 'object' && 'default' in current) {
+    current = current.default;
+  }
+  return current;
+}
+
+function isComponentType(value: unknown): value is EChartsComponentType {
+  return typeof value === 'function';
+}
+
+const unwrappedChart = unwrapDefault(ReactEChartsCoreNs);
+const ReactEChartsCore: EChartsComponentType = isComponentType(unwrappedChart)
+  ? unwrappedChart
+  : ReactEChartsCoreNs.default;
+
+echarts.use([
+  SVGRenderer,
+  LineChart,
+  RadarChart,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  AriaComponent,
+  AxisPointerComponent,
+  PolarComponent,
+  RadarComponent,
+]);
+
+// base/option 깊은 병합 (배열은 option 우선)
+function deepMerge<T>(base: T, override: unknown): T {
+  if (!override) return base;
+  if (
+    typeof base !== 'object' ||
+    !base ||
+    Array.isArray(base) ||
+    typeof override !== 'object' ||
+    Array.isArray(override)
+  ) {
+    return override as T;
+  }
+  const out: Record<string, unknown> = { ...(base as Record<string, unknown>) };
+  for (const [k, v] of Object.entries(override as Record<string, unknown>)) {
+    out[k] = k in out ? deepMerge(out[k], v) : v;
+  }
+  return out as T;
+}
+
+export type ChartProps = Omit<
+  React.ComponentProps<typeof ReactEChartsCore>,
+  'option' | 'echarts'
+> & {
+  option: EChartsOption;
+};
+
+export function Chart({
+  option: optionProp,
+  ...rest
+}: ChartProps): React.ReactElement {
+  const { width, height, ref } = useResizeDetector({
+    handleHeight: true,
+    refreshMode: 'debounce',
+    refreshRate: 100,
+  });
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const option = useMemo(() => {
+    const baseOption: EChartsOption = {
+      textStyle: { fontFamily: "var(--default-font-family, 'Noto Sans KR')" },
+      tooltip: { textStyle: { fontSize: 13 } }, // ds-allow: chart-lib
+      animation: false,
+    };
+    return deepMerge(baseOption, optionProp);
+  }, [optionProp]);
+
+  return (
+    <div ref={ref} style={{ width: '100%', height: '100%' }}>
+      {mounted ? (
+        <ReactEChartsCore
+          {...EchartDefaultProps}
+          echarts={echarts}
+          opts={{ renderer: 'svg' }}
+          style={{ height, width }}
+          {...rest}
+          option={option}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+// 임의의 CSS 색 문자열을 echarts(zrender)가 파싱 가능한 rgb(a)로 정규화한다.
+function normalizeColor(value: string, fallback: string): string {
+  const v = value.trim();
+  if (!v) return fallback;
+  if (/^#|^rgb|^hsl/i.test(v)) return v;
+  try {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return fallback;
+    ctx.fillStyle = '#000';
+    ctx.fillStyle = v;
+    const out = ctx.fillStyle;
+    return /color\(|^$/i.test(out) ? fallback : out;
+  } catch {
+    return fallback;
+  }
+}
+
+// @tipp/ui 토큰(CSS 변수)을 echarts 가 먹을 수 있는 실제 색 문자열로 해석하는 훅.
+export function useTokenColors<K extends string>(
+  vars: Record<K, [cssVar: string, fallback: string]>
+): {
+  colors: Record<K, string>;
+  probe: React.ReactNode;
+} {
+  const probeRef = useRef<HTMLSpanElement | null>(null);
+  const fallbacks = useMemo(() => {
+    const f = {} as Record<K, string>;
+    for (const k of Object.keys(vars) as K[]) f[k] = vars[k][1];
+    return f;
+  }, [vars]);
+  const [resolved, setResolved] = useState<Record<K, string>>(fallbacks);
+  const key = JSON.stringify(vars);
+  // vars 객체는 매 렌더 새 참조라 deps에 직접 넣을 수 없어 ref로 최신값을 참조하고,
+  // 실제 변경 추적은 직렬화한 key 로 한다.
+  const varsRef = useRef(vars);
+  varsRef.current = vars;
+  useEffect(() => {
+    const el = probeRef.current;
+    if (!el) return;
+    const cs = getComputedStyle(el);
+    const next = {} as Record<K, string>;
+    for (const k of Object.keys(varsRef.current) as K[]) {
+      const [cssVar, fallback] = varsRef.current[k];
+      next[k] = normalizeColor(cs.getPropertyValue(cssVar), fallback);
+    }
+    setResolved(next);
+  }, [key]);
+  const probe = (
+    <span
+      aria-hidden
+      ref={probeRef}
+      style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden' }}
+    />
+  );
+  return { colors: resolved, probe };
+}

package/src/app/roleplay/index.ts

@@ -0,0 +1,8 @@
+// 롤플레잉 "세션 상세" 공개 진입점 (@tipp/ui/roleplay).
+//
+// 주의: 이 배럴은 메인 배럴(src/index.ts → src/app/index.ts)에 re-export 하지 않는다.
+// echarts 의존을 메인 번들에서 격리하기 위해 subpath(@tipp/ui/roleplay)로만 노출한다.
+
+export * from './types';
+export * from './utils/report-parse';
+export * from './rp-session-detail';

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>
+  );
+}