Feat(design-system): 레벨 컴포넌트 (#36)

* feat: 레벨 뱃지 컴포넌트

* feat: 스토리북 코드 도입

* fix: 기본 코드 세팅 복구

* feat: 스토리북 수정

* chore: 스토리북 초기 세팅 중복 삭제

Author: jllee000

.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } from "path"
+
+/**
+* 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): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  "stories": [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-vitest")
+  ],
+  "framework": {
+    "name": getAbsolutePath('@storybook/react-vite'),
+    "options": {}
+  }
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/react-vite';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
+  },
+};
+
+export default preview;

.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/client/src/App.tsx

@@ -16,7 +16,7 @@ function App() {
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
-      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>\
       <div className="card">
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}

package.json

@@ -7,16 +7,28 @@
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "check-types": "turbo run check-types",
-    "test": "turbo run test"
+    "test": "turbo run test",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
     "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
+    "@storybook/addon-a11y": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-vitest": "^9.1.3",
+    "@storybook/react-vite": "^9.1.3",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
+    "storybook": "^9.1.3",
     "turbo": "^2.5.6",
     "typescript": "5.9.2",
-    "vite": "7.1.2"
+    "vite": "7.1.2",
+    "vitest": "^3.2.4",
+    "@vitest/browser": "^3.2.4",
+    "playwright": "^1.55.0",
+    "@vitest/coverage-v8": "^3.2.4"
   },
   "pnpm": {
     "overrides": {

packages/design-system/src/components/index.ts

@@ -1,5 +1,6 @@
 export { default as Button } from './button/Button';
 export { Switch } from './switch/Switch';
 export { default as Input } from './input/Input';
+export { default as Level } from './level/Level';
 export { Textarea } from './textarea/Textarea';
 export { Progress } from './progress/Progress';

packages/design-system/src/components/level/Level.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Level from './Level';
+
+const meta: Meta<typeof Level> = {
+  title: 'Components/Level',
+  component: Level,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    level: {
+      control: { type: 'number', min: 1, max: 100 },
+      description: '현재 레벨 값',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Level>;
+
+// 기본 예시
+export const Default: Story = {
+  args: {
+    level: 1,
+  },
+};
+
+export const Level10: Story = {
+  args: {
+    level: 10,
+  },
+};

packages/design-system/src/components/level/Level.tsx

@@ -0,0 +1,12 @@
+interface LevelProps {
+  level: number;
+}
+const Level = ({ level }: LevelProps) => {
+  return (
+    <span className="caption2-sb text-main600 bg-main100 rounded-[0.4rem] px-[0.8rem] py-[0.2rem]">
+      Lv.{level}
+    </span>
+  );
+};
+
+export default Level;

pnpm-lock.yaml

@@ -0,0 +1,37 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+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({
+  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'],
+        },
+      },
+    ],
+  },
+});