Feat: Storybook & 테스트 세팅

.gitignore

@@ -31,3 +31,8 @@ coverage
 
 # TypeScript
 *.tsbuildinfo
+
+# storybook
+*.log
+*storybook.log
+storybook-static

.ls-lint.yml

@@ -26,3 +26,7 @@ ignore:
   - .git
   - .vscode
   - .husky
+  - .storybook
+  - '**/.storybook'
+  - storybook-static
+  - '**/storybook-static'

README.md

@@ -23,9 +23,8 @@ mumukji/
 - TypeScript 설정
 - Rollup 세팅
 - Lint / Prettier / Husky
-- Storybook
-- Test + CI
-- Changesets
+- Storybook + Test
+- CI + Changesets
 
 ## 🔁 진행 방식
 

apps/storybook/.storybook/main.ts

@@ -0,0 +1,26 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string) {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}
+const config: StorybookConfig = {
+  stories: [
+    '../docs/*.mdx',
+    '../../../packages/**/src/**/*.stories.@(ts|tsx|mdx)',
+    '../../../packages/**/src/**/*.mdx',
+  ],
+  addons: [
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-vitest'),
+  ],
+  framework: getAbsolutePath('@storybook/react-vite'),
+};
+export default config;

apps/storybook/.storybook/preview.ts

@@ -0,0 +1,20 @@
+import type { Preview } from '@storybook/react-vite';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: 'centered',
+    actions: { argTypesRegex: '^on.*' },
+    a11y: {
+      test: 'todo',
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default preview;

apps/storybook/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

apps/storybook/chromatic.config.json

@@ -0,0 +1,8 @@
+{
+  "onlyChanged": true,
+  "exitOnceUploaded": false,
+  "projectId": "Project:69a1914cee031a546b3446cd",
+  "storybookBaseDir": "apps/storybook",
+  "zip": true,
+  "buildScriptName": "build"
+}

apps/storybook/docs/introduction.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title='Introduction' />
+
+# Mumukji Design System
+
+머먹지 디자인 시스템!

apps/storybook/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@mumukji/storybook",
+  "private": true,
+  "type": "module",
+  "description": "Storybook for the Mumukji design system.",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build",
+    "typecheck": "tsc --noEmit",
+    "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
+    "clean": "rm -rf storybook-static",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@mumukji/icons": "workspace:*",
+    "@mumukji/tokens": "workspace:*",
+    "@mumukji/ui": "workspace:*",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-a11y": "^10.2.13",
+    "@storybook/addon-docs": "^10.2.13",
+    "@storybook/addon-vitest": "^10.2.13",
+    "@storybook/react-vite": "^10.2.13",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/browser-playwright": "^4.0.18",
+    "playwright": "^1.58.2",
+    "storybook": "^10.2.13",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  }
+}

apps/storybook/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx"
+  },
+  "include": [".storybook/*.ts"]
+}

apps/storybook/vite.config.ts

@@ -0,0 +1,47 @@
+/// <reference types="vitest/config" />
+
+// https://vite.dev/config/
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import react from '@vitejs/plugin-react';
+import { playwright } from '@vitest/browser-playwright';
+import { defineConfig } from 'vite';
+
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({
+            configDir: path.join(dirname, '.storybook'),
+          }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [
+              {
+                browser: 'chromium',
+              },
+            ],
+          },
+          setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+      },
+    ],
+  },
+});

eslint/storybook.mjs

@@ -6,6 +6,7 @@ export const storybookConfig = [
     files: ['**/*.stories.{ts,tsx,js,jsx}'],
     rules: {
       'import/no-anonymous-default-export': 'off',
+      'import/no-default-export': 'off',
       'no-console': 'off',
     },
   },

package.json

@@ -16,6 +16,9 @@
     "format:check": "prettier --check .",
     "stylelint": "stylelint \"**/*.{css,scss}\"",
     "stylelint:fix": "stylelint \"**/*.{css,scss}\" --fix",
+    "test": "turbo run test",
+    "test:storybook": "turbo run test --filter=@mumukji/storybook",
+    "chromatic": "turbo run chromatic --filter=@mumukji/storybook",
     "ls-lint": "ls-lint",
     "prepare": "husky"
   },