⚙️ storybook 파이프라인 구축

.eslintrc.json

@@ -1,3 +1,8 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript", "prettier"]
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript",
+    "prettier",
+    "plugin:storybook/recommended"
+  ]
 }

.github/workflows/install-and-test.yml

@@ -38,4 +38,9 @@ jobs:
         run: pnpm lint
 
       - name: Unit & Integration test
-        run: pnpm test
+        run: pnpm test
+
+  storybook-deployment:
+    needs: install-and-test
+    uses: ./.github/workflows/storybook-deployment.yml
+    secrets: inherit

.github/workflows/storybook-deployment.yml

@@ -0,0 +1,32 @@
+name: storybook-deployment
+
+on:
+  workflow_call:
+
+jobs:
+  storybook-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install node modules
+        run: pnpm install
+
+      - name: deploy storybook on chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -34,3 +34,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log
+/storybook-static
+*.log

.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-viewport',
+    '@storybook/addon-designs',
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        loaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,26 @@
+import type { Preview } from '@storybook/react';
+import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+import '../app/globals.css';
+// import {initialize, mswLoader} from "msw-storybook-addon"
+// initialize()
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    viewport: {
+      viewports: {
+        ...INITIAL_VIEWPORTS,
+        ...MINIMAL_VIEWPORTS,
+      },
+      defaultViewport: 'iphone14promax',
+    },
+  },
+  // loaders : [mswLoader]
+};
+
+export default preview;

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:670940cc682aa6d10aa4f523",
+  "zip": true
+}