feat: mds 2.0 스토리북 설정

apps/storybook/.storybook/main.ts

@@ -0,0 +1,45 @@
+import { resolve } from "node:path";
+import type { StorybookConfig } from "@storybook/react-vite";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { mergeConfig } from "vite";
+
+const repoRoot = resolve(process.cwd(), "../..");
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(ts|tsx)",
+    {
+      directory: resolve(repoRoot, "packages/ui/src"),
+      files: "**/*.stories.@(ts|tsx)",
+      titlePrefix: "Components",
+    },
+    {
+      directory: resolve(repoRoot, "packages/design-tokens/src"),
+      files: "**/*.stories.@(ts|tsx|mdx)",
+      titlePrefix: "Design Tokens",
+    },
+  ],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-docs",
+    "@storybook/addon-a11y",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
+  docs: {
+    defaultName: "소개",
+  },
+  viteFinal: (viteConfig) =>
+    mergeConfig(viteConfig, {
+      plugins: [vanillaExtractPlugin()],
+    }),
+};
+
+export default config;

apps/storybook/.storybook/preview.css

@@ -0,0 +1,15 @@
+body {
+  font-family:
+    "SUIT", -apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI",
+    sans-serif;
+  color: var(--color-foreground);
+  background: var(--color-background);
+}
+
+/** TODO(@wuzoo): 다크모드 static color 피드백 */
+.theme-dark {
+  --color-background: #0f1012;
+  --color-foreground: #f9fafb;
+  --color-foreground-muted: #b0b8c1;
+  --color-border: #333d4b;
+}

apps/storybook/.storybook/preview.tsx

@@ -0,0 +1,32 @@
+import { withThemeByClassName } from "@storybook/addon-themes";
+import type { Preview } from "@storybook/react";
+import "@makers/design-tokens/tokens.css";
+import "./preview.css";
+
+const preview: Preview = {
+  decorators: [
+    withThemeByClassName({
+      themes: { light: "theme-light", dark: "theme-dark" },
+      defaultTheme: "light",
+    }),
+  ],
+  parameters: {
+    layout: "centered",
+    controls: {
+      matchers: { color: /(background|color)$/i, date: /Date$/i },
+    },
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: ["Introduction", "Design Tokens", "Components"],
+      },
+    },
+    backgrounds: { disable: true },
+    docs: {
+      toc: true,
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export default preview;

apps/storybook/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@makers/storybook",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "storybook dev -p 6006 --no-open",
+    "build": "storybook build --output-dir storybook-static",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@makers/design-tokens": "workspace:*",
+    "@makers/ui": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.0",
+    "@makers/tsconfig": "workspace:*",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@vanilla-extract/vite-plugin": "^4.0.19",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "storybook": "^8.4.7",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.11"
+  }
+}

apps/storybook/stories/Introduction.mdx

@@ -0,0 +1,30 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Introduction" />
+
+# Makers Design System
+
+SOPT 사내 조직인 Makers의 디자인 시스템 2.0 버전입니다.
+
+## 구조
+
+- **Design Tokens** — 색상, 간격, 타이포그래피 등 시스템의 원시 값
+- **Components** — `@makers/ui` 가 제공하는 React 컴포넌트
+
+## 설치
+
+1. 디자인 토큰, UI 컴포넌트
+
+```bash
+pnpm add @makers/ui @makers/design-tokens
+```
+
+2. Peer Dependencies
+
+`react`와 `react-dom` 18 버전 이상이 필요합니다.
+
+```bash
+pnpm add react react-dom
+```
+
+## 컴포넌트 목록

apps/storybook/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@makers/tsconfig/library.json",
+  "include": [".storybook/**/*.ts", ".storybook/**/*.tsx", "vite.config.ts"],
+  "compilerOptions": {
+    "types": ["vite/client", "node", "react"]
+  }
+}

apps/storybook/vite.config.ts

@@ -0,0 +1,7 @@
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react(), vanillaExtractPlugin()],
+});

configs/tsconfig/base.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}

configs/tsconfig/library.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx"
+  }
+}

configs/tsconfig/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@makers/tsconfig",
   "version": "0.0.0",
-  "private": true
+  "private": true,
+  "files": ["base.json", "library.json"]
 }

packages/design-tokens/package.json

@@ -1,6 +1,25 @@
 {
   "name": "@makers/design-tokens",
   "version": "0.0.0",
+  "type": "module",
+  "sideEffects": ["*.css"],
+  "exports": {
+    ".": "./src/index.ts",
+    "./base": "./src/base/index.ts",
+    "./semantic": "./src/semantic/index.ts",
+    "./tokens.css": "./src/tokens.css"
+  },
+  "files": ["src"],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@makers/tsconfig": "workspace:*",
+    "@storybook/react": "^8.4.7",
+    "@types/react": "^18.3.0",
+    "react": "^18.3.1",
+    "typescript": "^5.6.0"
+  },
   "publishConfig": {
     "access": "public"
   }

packages/design-tokens/src/base/color.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { baseColor } from "./color";
+
+interface SwatchProps {
+  name: string;
+  value: string;
+}
+
+function Swatch({ name, value }: SwatchProps) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: 8 }}>
+      <div
+        style={{
+          width: 48,
+          height: 48,
+          borderRadius: 8,
+          background: value,
+          border: "1px solid #e5e8eb",
+        }}
+      />
+      <div>
+        <div style={{ fontWeight: 600 }}>{name}</div>
+        <div style={{ fontFamily: "monospace", color: "#6b7684" }}>{value}</div>
+      </div>
+    </div>
+  );
+}
+
+function ColorGrid() {
+  return (
+    <div
+      style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}
+    >
+      {Object.entries(baseColor).map(([name, value]) => (
+        <Swatch key={name} name={name} value={value} />
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta<typeof ColorGrid> = {
+  title: "Base/Color",
+  component: ColorGrid,
+  parameters: { layout: "padded" },
+};
+
+export default meta;
+
+export const Palette: StoryObj<typeof ColorGrid> = {};

packages/design-tokens/src/base/color.ts

@@ -0,0 +1,21 @@
+export const baseColor = {
+  white: "#ffffff",
+  black: "#000000",
+  gray50: "#f9fafb",
+  gray100: "#f2f4f6",
+  gray200: "#e5e8eb",
+  gray300: "#d1d6db",
+  gray400: "#b0b8c1",
+  gray500: "#8b95a1",
+  gray600: "#6b7684",
+  gray700: "#4e5968",
+  gray800: "#333d4b",
+  gray900: "#191f28",
+  blue500: "#3182f6",
+  blue600: "#2272eb",
+  red500: "#f04452",
+  green500: "#00c896",
+  yellow500: "#f5a623",
+} as const;
+
+export type BaseColor = keyof typeof baseColor;

packages/design-tokens/src/base/index.ts

@@ -0,0 +1,3 @@
+export * from "./color";
+export * from "./space";
+export * from "./typography";

packages/design-tokens/src/base/space.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { space } from "./space";
+
+function SpaceScale() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      {Object.entries(space).map(([token, value]) => (
+        <div
+          key={token}
+          style={{ display: "flex", alignItems: "center", gap: 12 }}
+        >
+          <div style={{ width: 48, fontFamily: "monospace" }}>{token}</div>
+          <div style={{ background: "#3182f6", height: 16, width: value }} />
+          <div style={{ color: "#6b7684" }}>{value}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta<typeof SpaceScale> = {
+  title: "Base/Space",
+  component: SpaceScale,
+  parameters: { layout: "padded" },
+};
+
+export default meta;
+
+export const Scale: StoryObj<typeof SpaceScale> = {};

packages/design-tokens/src/base/space.ts

@@ -0,0 +1,15 @@
+export const space = {
+  "0": "0px",
+  "1": "2px",
+  "2": "4px",
+  "3": "8px",
+  "4": "12px",
+  "5": "16px",
+  "6": "20px",
+  "7": "24px",
+  "8": "32px",
+  "9": "40px",
+  "10": "48px",
+} as const;
+
+export type Space = keyof typeof space;

packages/design-tokens/src/base/typography.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { typography } from "./typography";
+
+function TypographyScale() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      {Object.entries(typography).map(([name, style]) => (
+        <div key={name}>
+          <div style={{ color: "#6b7684", fontSize: 12, marginBottom: 4 }}>
+            {name} — {style.fontSize} / {style.lineHeight} / {style.fontWeight}
+          </div>
+          <div style={style}>다람쥐 헌 쳇바퀴에 타고파</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta<typeof TypographyScale> = {
+  title: "Base/Typography",
+  component: TypographyScale,
+  parameters: { layout: "padded" },
+};
+
+export default meta;
+
+export const Scale: StoryObj<typeof TypographyScale> = {};

packages/design-tokens/src/base/typography.ts

@@ -0,0 +1,9 @@
+export const typography = {
+  h1: { fontSize: "32px", lineHeight: "40px", fontWeight: 700 },
+  h2: { fontSize: "24px", lineHeight: "32px", fontWeight: 700 },
+  h3: { fontSize: "20px", lineHeight: "28px", fontWeight: 600 },
+  body: { fontSize: "16px", lineHeight: "24px", fontWeight: 400 },
+  caption: { fontSize: "13px", lineHeight: "18px", fontWeight: 400 },
+} as const;
+
+export type TypographyToken = keyof typeof typography;