[CHORE] timo-design-system 컴포넌트 제너레이터 경로 수정 및 샘플 Button 제거

packages/timo-design-system/.storybook/preview.ts

@@ -33,7 +33,7 @@ const preview: Preview = {
     },
     options: {
       storySort: {
-        order: ["Guides", "Components", "Icons"],
+        order: ["Guides", "Tokens", "Components", "Icons"],
       },
     },
     actions: {

packages/timo-design-system/package.json

@@ -13,7 +13,7 @@
     "check-types": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --only-changed"
+    "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --only-changed --exit-zero-on-changes"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",

packages/timo-design-system/src/components/color/Color.stories.tsx

@@ -0,0 +1,29 @@
+
+import { Color } from "./Color";
+import { COLOR_TOKENS } from "../../tokens/colort-token";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Tokens/Color",
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const All: Story = {
+  name: "All Colors",
+  render: () => (
+    <div style={{ fontFamily: "sans-serif", maxWidth: "600px" }}>
+      <p style={{ fontSize: "12px", color: "#999", marginBottom: "16px" }}>
+        ⚠️ 피그마 MCP 연동 후 실제 값으로 업데이트 예정입니다.
+      </p>
+      {COLOR_TOKENS.map((token) => (
+        <Color key={token.name} {...token} />
+      ))}
+    </div>
+  ),
+};

packages/timo-design-system/src/components/color/Color.tsx

@@ -0,0 +1,42 @@
+import { ColorToken } from "../../tokens/colort-token";
+
+export const Color = ({ name, cssVar, value, usage }: ColorToken) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "16px",
+        padding: "12px 0",
+        borderBottom: "1px solid #f0f0f0",
+      }}
+    >
+      <div
+        style={{
+          width: "48px",
+          height: "48px",
+          borderRadius: "8px",
+          backgroundColor: value,
+          border: "1px solid #e0e0e0",
+          flexShrink: 0,
+        }}
+      />
+      <div>
+        <div style={{ fontWeight: 600, fontSize: "14px" }}>{name}</div>
+        <div
+          style={{ fontSize: "12px", color: "#666", fontFamily: "monospace" }}
+        >
+          {cssVar}
+        </div>
+        <div
+          style={{ fontSize: "12px", color: "#666", fontFamily: "monospace" }}
+        >
+          {value}
+        </div>
+        <div style={{ fontSize: "12px", color: "#888", marginTop: "2px" }}>
+          {usage}
+        </div>
+      </div>
+    </div>
+  );
+};

packages/timo-design-system/src/components/typography/Typography.stories.tsx

@@ -0,0 +1,28 @@
+
+import { Typography } from "./Typography";
+import { TYPOGRAPHY_TOKENS } from "../../tokens/typography-token";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Tokens/Typography",
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Scale: Story = {
+  render: () => (
+    <div style={{ fontFamily: "sans-serif", maxWidth: "700px" }}>
+      <p style={{ fontSize: "12px", color: "#999", marginBottom: "24px" }}>
+        ⚠️ 피그마 MCP 연동 후 실제 값으로 업데이트 예정입니다.
+      </p>
+      {TYPOGRAPHY_TOKENS.map((row) => (
+        <Typography key={row.token} {...row} />
+      ))}
+    </div>
+  ),
+};

packages/timo-design-system/src/components/typography/Typography.tsx

@@ -0,0 +1,36 @@
+import { TypographyToken } from "../../tokens/typography-token";
+
+export const Typography = ({ token, size, weight, usage }: TypographyToken) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "baseline",
+        gap: "24px",
+        padding: "16px 0",
+        borderBottom: "1px solid #f0f0f0",
+      }}
+    >
+      <div
+        style={{
+          fontSize: size,
+          fontWeight: weight,
+          minWidth: "200px",
+          color: "#171717",
+        }}
+      >
+        가나다라마 Aa
+      </div>
+      <div>
+        <div
+          style={{ fontSize: "12px", color: "#666", fontFamily: "monospace" }}
+        >
+          {token}
+        </div>
+        <div style={{ fontSize: "12px", color: "#888" }}>
+          {size} / {weight} — {usage}
+        </div>
+      </div>
+    </div>
+  );
+};

packages/timo-design-system/src/tokens/colort-token.ts

@@ -0,0 +1,27 @@
+export interface ColorToken {
+  name: string;
+  cssVar: string;
+  value: string;
+  usage: string;
+}
+
+export const COLOR_TOKENS: ColorToken[] = [
+  {
+    name: "primary",
+    cssVar: "--color-primary",
+    value: "#111111",
+    usage: "브랜드 메인 (버튼, 강조)",
+  },
+  {
+    name: "background",
+    cssVar: "--color-background",
+    value: "#ffffff",
+    usage: "페이지 배경",
+  },
+  {
+    name: "foreground",
+    cssVar: "--color-foreground",
+    value: "#171717",
+    usage: "텍스트 기본",
+  },
+];

packages/timo-design-system/src/tokens/typography-token.ts

@@ -0,0 +1,15 @@
+export interface TypographyToken {
+  token: string;
+  size: string;
+  weight: string;
+  usage: string;
+}
+
+export const TYPOGRAPHY_TOKENS: TypographyToken[] = [
+  { token: "text-2xl", size: "24px", weight: "700", usage: "페이지 제목" },
+  { token: "text-xl", size: "20px", weight: "600", usage: "섹션 제목" },
+  { token: "text-lg", size: "18px", weight: "500", usage: "카드 제목" },
+  { token: "text-base", size: "16px", weight: "400", usage: "본문 기본" },
+  { token: "text-sm", size: "14px", weight: "400", usage: "보조 텍스트" },
+  { token: "text-xs", size: "12px", weight: "400", usage: "캡션·레이블" },
+];

turbo/generators/config.ts

@@ -2,7 +2,7 @@ import type { PlopTypes } from "@turbo/gen";
 
 export default function generator(plop: PlopTypes.NodePlopAPI): void {
   plop.setGenerator("react-component", {
-    description: "packages/ui에 새 React 컴포넌트 추가",
+    description: "packages/timo-design-system에 새 React 컴포넌트 추가",
     prompts: [
       {
         type: "input",
@@ -19,9 +19,14 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void {
     actions: [
       {
         type: "add",
-        path: "packages/ui/src/{{pascalCase name}}.tsx",
+        path: "packages/timo-design-system/src/components/{{kebabCase name}}/{{pascalCase name}}.tsx",
         templateFile: "templates/component/component.tsx.hbs",
       },
+      {
+        type: "append",
+        path: "packages/timo-design-system/src/components/index.ts",
+        template: 'export { {{pascalCase name}} } from "./{{kebabCase name}}/{{pascalCase name}}";',
+      },
     ],
   });