docs: add color & typography mapping tables

docs/components/expandable-token-cell.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from "react";
+import { TokenCell } from "./token-cell";
+import type { TokenMappingItem } from "@/components/token-mapping-table";
+
+export function ExpandableTokenCell({
+  newToken,
+}: {
+  newToken: TokenMappingItem["newTokens"][number];
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div onClick={() => setIsExpanded((prev) => !prev)} className="cursor-pointer">
+      <TokenCell
+        isExpanded={isExpanded}
+        values={newToken.values}
+        resolvedValue={newToken.resolvedValue}
+      />
+    </div>
+  );
+}

docs/components/token-mapping-table.tsx

@@ -0,0 +1,85 @@
+import {
+  resolveToken,
+  stringifyValueExpression,
+  type TokenRef,
+  type ValueExpression,
+} from "@seed-design/rootage-core";
+import { getRootage } from "@/components/get-rootage";
+import { ExpandableTokenCell } from "@/components/expandable-token-cell";
+
+interface TokenMapping {
+  previousTokenId: string;
+  newTokenIds: TokenRef[];
+  note?: string;
+}
+
+interface TokenMappingTableProps {
+  mappings: TokenMapping[];
+}
+
+export interface TokenMappingItem {
+  previousTokenId: TokenMapping["previousTokenId"];
+  newTokens: {
+    id: TokenMapping["newTokenIds"][number];
+    values: string[];
+    resolvedValue: ValueExpression;
+  }[];
+  note?: TokenMapping["note"];
+}
+
+export async function TokenMappingTable({ mappings }: TokenMappingTableProps) {
+  const rootage = await getRootage();
+
+  const tableItems: TokenMappingItem[] = mappings.map((mapping) => ({
+    previousTokenId: mapping.previousTokenId,
+    newTokens: mapping.newTokenIds.map((newId) => {
+      const { path, value } = resolveToken(rootage, newId, {
+        global: "default",
+        color: "theme-light",
+      });
+
+      return {
+        id: newId,
+        values: [...path, stringifyValueExpression(value)],
+        resolvedValue: value,
+      };
+    }),
+    note: mapping.note,
+  }));
+
+  return (
+    <table>
+      <colgroup>
+        <col />
+        <col />
+        <col style={{ width: "15%" }} />
+      </colgroup>
+      <thead>
+        <tr>
+          <th>V2</th>
+          <th>V3</th>
+          <th>비고</th>
+        </tr>
+      </thead>
+      <tbody>
+        {tableItems.map((item) => (
+          <tr key={item.previousTokenId}>
+            <td>{item.previousTokenId}</td>
+            <td className="align-middle space-y-2">
+              {item.newTokens.length > 0 &&
+                item.newTokens.map((newToken, index) => (
+                  <>
+                    <ExpandableTokenCell key={newToken.id} newToken={newToken} />
+                    {index !== item.newTokens.length - 1 && (
+                      <div className="text-xs text-center">또는</div>
+                    )}
+                  </>
+                ))}
+            </td>
+            <td>{item.note}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

docs/components/typography-mapping-table.tsx

@@ -0,0 +1,73 @@
+import { type ComponentSpecData } from "@seed-design/rootage-core";
+import { getRootage } from "@/components/get-rootage";
+import { Fragment } from "react";
+
+interface TypographyMapping {
+  previousTokenId: string;
+  newTextStyleIds: (keyof ComponentSpecData)[];
+  note?: string;
+}
+
+interface TypographyMappingTableProps {
+  mappings: TypographyMapping[];
+}
+
+export async function TypographyMappingTable({ mappings }: TypographyMappingTableProps) {
+  const rootage = await getRootage();
+
+  if (!("typography" in rootage.componentSpecEntities)) {
+    throw new Error("Typography component spec not found");
+  }
+
+  const tableItems: TypographyMapping[] = mappings.map((item) => ({
+    previousTokenId: item.previousTokenId,
+    newTextStyleIds: item.newTextStyleIds.map((id) => {
+      const typography = rootage.componentSpecEntities.typography.data.find(
+        ({ key }) => "type" in key && key.type === id,
+      );
+
+      if (!typography) {
+        throw new Error(`Typography component spec not found for variant type=${id}`);
+      }
+
+      return id;
+    }),
+    note: item.note,
+  }));
+
+  return (
+    <table>
+      <colgroup>
+        <col />
+        <col />
+        <col style={{ width: "15%" }} />
+      </colgroup>
+      <thead>
+        <tr>
+          <th>V2</th>
+          <th>V3</th>
+          <th>비고</th>
+        </tr>
+      </thead>
+      <tbody>
+        {tableItems.map((item) => (
+          <tr key={item.previousTokenId}>
+            <td>{item.previousTokenId}</td>
+            <td className="align-middle space-y-2">
+              {item.newTextStyleIds.length > 0 &&
+                item.newTextStyleIds.map((newTextStyleId, index) => (
+                  <Fragment key={newTextStyleId}>
+                    <div>{newTextStyleId}</div>
+                    {index !== item.newTextStyleIds.length - 1 && (
+                      <div className="text-xs text-center">또는</div>
+                    )}
+                  </Fragment>
+                ))}
+            </td>
+            <td>{item.note}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

docs/content/docs/design/foundation/color/meta.json

@@ -1,4 +1,4 @@
 {
   "title": "색상",
-  "pages": ["color-system", "color-role", "palette"]
+  "pages": ["color-system", "color-role", "palette", "migration-to-v3"]
 }