[INIT] 공유 UI 패키지 Storybook 초기 구성 및 chromatic 배포

package.json

@@ -6,6 +6,8 @@
     "build:web": "turbo run build --filter=timo-web",
     "dev": "turbo run dev",
     "dev:web": "turbo run dev --filter=timo-web",
+    "storybook": "pnpm --filter @repo/timo-design-system storybook",
+    "build-storybook": "pnpm --filter @repo/timo-design-system build-storybook",
     "lint": "turbo run lint",
     "lint:web": "turbo run lint --filter=timo-web",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",

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

@@ -0,0 +1,13 @@
+// 스토리북이 어디서 스토리 파일을 찾을지 정하는 곳
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-links"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+
+export default config;

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

@@ -0,0 +1,29 @@
+import type { Preview } from "@storybook/react-vite";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    viewport: {
+      viewports: {
+        mobile: { name: "Mobile", styles: { width: "375px", height: "812px" } },
+        tablet: {
+          name: "Tablet",
+          styles: { width: "768px", height: "1024px" },
+        },
+        desktop: {
+          name: "Desktop",
+          styles: { width: "1280px", height: "900px" },
+        },
+      },
+      defaultViewport: "desktop",
+    },
+    layout: "centered",
+  },
+};
+
+export default preview;

packages/timo-design-system/package.json

@@ -8,15 +8,20 @@
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "generate:component": "turbo gen react-component",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@storybook/addon-links": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@types/node": "^22.15.3",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "eslint": "^9.39.1",
+    "storybook": "^10.4.6",
     "typescript": "5.9.2"
   },
   "dependencies": {

packages/timo-design-system/src/Introduction.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const Introduction = () => (
+  <div>
+    <h1>Timo Design System</h1>
+    <p>디자인 시스템 확정 후 공통 컴포넌트와 아이콘을 추가합니다.</p>
+  </div>
+);
+
+const meta: Meta<typeof Introduction> = {
+  title: "Introduction",
+  component: Introduction,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Introduction> = {};