Feat(design-system): 뱃지 컴포넌트

apps/client/package.json

@@ -14,15 +14,13 @@
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
-    "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@eslint/js": "^9.33.0",
+    "@pinback/design-system": "workspace:*",
     "@pinback/eslint-config": "workspace:*",
-    "@pinback/typescript-config": "workspace:*",
     "@pinback/tailwind-config": "workspace:*",
-    "@pinback/design-system": "workspace:*",
+    "@pinback/typescript-config": "workspace:*",
+    "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@tailwindcss/vite": "^4.1.12",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "eslint": "^9.33.0",
     "eslint-plugin-react-hooks": "^5.2.0",

apps/client/src/App.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import './App.css';
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
-
 function App() {
   const [count, setCount] = useState(0);
 

package.json

@@ -19,6 +19,8 @@
     "@storybook/addon-vitest": "^9.1.3",
     "@storybook/react-vite": "^9.1.3",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/react": "19",
+    "@types/react-dom": "19",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "storybook": "^9.1.3",

packages/design-system/package.json

@@ -35,8 +35,6 @@
     "@tailwindcss/vite": "^4.1.12",
     "@turbo/gen": "^2.5.0",
     "@types/node": "^22.15.3",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.1",
     "@vitejs/plugin-react": "^4.5.2",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",

packages/design-system/src/components/badge/Badge.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { within, userEvent } from '@storybook/test';
+import Badge, { type BadgeProps } from './Badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  args: {
+    text: '알림',
+    countNum: 3,
+  },
+  argTypes: {
+    text: { control: 'text', description: '뱃지 라벨 텍스트' },
+    countNum: {
+      control: { type: 'number', min: 0 },
+      description: '카운트 숫자(옵션)',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '클릭 시 내부 state(isClick)가 true로 바뀌며 스타일이 활성화됩니다. 토글 방식은 아닙니다.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {};
+
+export const NoCount: Story = {
+  args: { text: '카운트 없음', countNum: undefined },
+};
+
+export const LargeCount: Story = {
+  args: { text: '메시지', countNum: 12000 },
+};
+
+export const Clicked: Story = {
+  args: { text: '클릭해줘', countNum: 5 },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(await canvas.findByText(String(args.text)));
+  },
+  parameters: {
+    docs: {
+      description: { story: '로드 직후 자동 클릭으로 활성 상태 미리보기.' },
+    },
+  },
+};

packages/design-system/src/components/badge/Badge.tsx

@@ -0,0 +1,45 @@
+import { cva } from 'class-variance-authority';
+import { useState } from 'react';
+export interface BadgeProps {
+  text: string;
+  countNum?: number;
+}
+const BadgeTxtStyleVariants = cva('sub3-b', {
+  variants: {
+    click: {
+      true: 'text-font-black-1',
+      false: 'text-font-ltgray-4',
+    } as const,
+  },
+  defaultVariants: {
+    click: false,
+  },
+});
+const BadgeStyleVariants = cva(
+  'text-white-bg sub5-sb rounded-[0.4rem] px-[0.8rem] py-[0.4rem]',
+  {
+    variants: {
+      click: {
+        true: 'bg-main500',
+        false: 'bg-gray300',
+      } as const,
+    },
+    defaultVariants: {
+      click: false,
+    },
+  }
+);
+const Badge = ({ text, countNum }: BadgeProps) => {
+  const [isClick, setIsClick] = useState(false);
+  return (
+    <div
+      className="flex cursor-pointer items-center justify-center gap-[0.8rem]"
+      onClick={() => setIsClick(true)}
+    >
+      <span className={BadgeTxtStyleVariants({ click: isClick })}>{text}</span>
+      <span className={BadgeStyleVariants({ click: isClick })}>{countNum}</span>
+    </div>
+  );
+};
+
+export default Badge;

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 Badge } from './badge/Badge';
 export { default as Input } from './input/Input';
 export { default as Level } from './level/Level';
 export { Textarea } from './textarea/Textarea';

packages/design-system/src/components/switch/Switch.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { cn } from '@/lib/utils';
+import { cn } from '@lib/utils';
 
 function Switch({
   className,

packages/design-system/tsconfig.json

@@ -6,7 +6,8 @@
     "outDir": "dist",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@lib/*": ["./src/lib/*"]
     },
     "jsx": "react-jsx"
   },

packages/design-system/vite.config.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),
-      '@utils': path.resolve(__dirname, './src/utils'),
+      '@lib': path.resolve(__dirname, '/src/lib'),
     },
   },
   build: {