feat: 버튼 컴포넌트 구현 및 디자인 토큰 생성 및 크로마틱 워크플로우 생성 (#49)

.github/workflows/chromatic.yml

@@ -0,0 +1,45 @@
+name: Storybook Chromatic Deployment
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  storybook-preview:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Publish to Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          onlyChanged: true
+          autoAcceptChanges: true
+
+      - name: Comment PR
+        if: always()
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          comment-tag: chromatic-preview-${{ github.event.number }}
+          message: |
+            🎨 **Storybook Preview**: ${{ steps.chromatic.outputs.storybookUrl }}
+            🔗 **Chromatic Build**: ${{ steps.chromatic.outputs.buildUrl }}

.storybook/main.ts

@@ -1,4 +1,6 @@
 import type { StorybookConfig } from "@storybook/experimental-nextjs-vite";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -8,5 +10,13 @@ const config: StorybookConfig = {
     options: {},
   },
   staticDirs: ["../public"],
+  viteFinal: async config => {
+    config.plugins = [
+      ...(config.plugins || []),
+      tsconfigPaths(),
+      vanillaExtractPlugin(),
+    ];
+    return config;
+  },
 };
 export default config;

.storybook/preview.ts

@@ -1,14 +1,16 @@
-import type { Preview } from '@storybook/react'
+import "@/styles/reset.css.ts";
+
+import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
+        color: /(background|color)$/i,
+        date: /Date$/i,
       },
     },
   },
 };
 
-export default preview;
+export default preview;

package.json

@@ -19,6 +19,7 @@
     "@tanstack/react-query": "^5.77.0",
     "@tanstack/react-query-devtools": "^5.77.0",
     "@vanilla-extract/css": "^1.17.2",
+    "@vanilla-extract/recipes": "^0.5.7",
     "next": "15.3.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -42,10 +43,12 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vanilla-extract/next-plugin": "^2.4.11",
+    "@vanilla-extract/vite-plugin": "^5.0.7",
     "@vitejs/plugin-react": "^4.5.0",
     "@vitest/browser": "^3.1.4",
     "@vitest/coverage-v8": "^3.1.4",
     "@vitest/eslint-plugin": "^1.2.1",
+    "chromatic": "^13.0.1",
     "commitizen": "^4.3.1",
     "eslint": "^9",
     "eslint-config-next": "15.3.2",

src/app/layout.tsx

@@ -1,10 +1,12 @@
+import "@/styles/reset.css";
+
 import type { Metadata } from "next";
 
 import { RegisterServiceWorkerClient } from "@/lib/pwa";
 import { MSWProvider, QueryProvider } from "@/providers";
 
 export const metadata: Metadata = {
-  title: "Timeat",
+  title: "Eat-da",
   description: "Generated by create next app",
 };