Gmmq 147 feat: Badge 공통 컴포넌트 개발 (#9)

* feat: 차크라UI 스토리북 애드온 설치 및 적용

* chore: 예시 스토리북 컴포넌트 Button 제거

* feat: Badge 컴포넌트 차크라UI + 스토리북 테스트

* feat: Badge 공통 컴포넌트

* fix: eslint 설정 - react/no-unescaped-entities 비활성화

* feat: Badge 컴포넌트 내보내기

.eslintrc.cjs

@@ -14,6 +14,7 @@ module.exports = {
   rules: {
     'no-console': 'warn',
     'react/react-in-jsx-scope': 'off',
+    'react/no-unescaped-entities': 0,
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     'import/order': [
       'warn',

.storybook/main.ts

@@ -1,12 +1,17 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    '@chakra-ui/storybook-addon',
   ],
   framework: {
     name: '@storybook/react-vite',

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import theme from '../src/theme/index';
 
 const preview: Preview = {
   parameters: {
@@ -9,6 +10,9 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    chakra: {
+      theme,
+    },
   },
 };
 

package.json

@@ -27,6 +27,7 @@
     "zustand": "^4.4.3"
   },
   "devDependencies": {
+    "@chakra-ui/storybook-addon": "^5.0.1",
     "@storybook/addon-essentials": "^7.5.0",
     "@storybook/addon-interactions": "^7.5.0",
     "@storybook/addon-links": "^7.5.0",

src/components/atoms/Badge/Badge.tsx

@@ -0,0 +1,45 @@
+import { Badge as ChakraBadge, BadgeProps as ChakraBadgeProps, Text } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+type BadgeProps = ChakraBadgeProps & {
+  children: ReactNode;
+  type?: 'mentor' | 'mentee' | 'default';
+};
+
+const Badge = ({
+  children,
+  px = '1.5',
+  py = '1',
+  bg = 'gray.300',
+  color = 'gray.800',
+  type = 'default',
+  ...props
+}: BadgeProps) => {
+  const BADGE_TYPE_COLOR = {
+    default: {
+      color,
+      bg,
+    },
+    mentor: {
+      color: 'gray.100',
+      bg: 'highlight.500',
+    },
+    mentee: {
+      color: 'primary.800',
+      bg: 'primary.100',
+    },
+  };
+  return (
+    <ChakraBadge
+      bg={BADGE_TYPE_COLOR[type].bg}
+      px={px}
+      py={py}
+      borderRadius={'base'}
+      {...props}
+    >
+      <Text color={BADGE_TYPE_COLOR[type].color}>{children}</Text>
+    </ChakraBadge>
+  );
+};
+
+export default Badge;

src/components/atoms/Badge/index.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Badge from './Badge';
+
+const meta = {
+  title: 'Resumeme/Components/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: { control: 'color' },
+    bg: { control: 'color' },
+    children: { control: 'text' },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: '기본',
+    type: 'default',
+  },
+};
+
+export const DefaultCustom: Story = {
+  args: {
+    children: '기본2',
+    type: 'default',
+    bg: '#191F28',
+    color: '#FFFFFF',
+  },
+};
+
+export const Mentee: Story = {
+  args: {
+    children: '멘티',
+    type: 'mentee',
+  },
+};
+
+export const Mentor: Story = {
+  args: {
+    children: '멘토',
+    type: 'mentor',
+  },
+};

src/components/atoms/Badge/index.ts

@@ -0,0 +1 @@
+export { default as Badge } from './Badge';