Merge pull request #52 from Guzzing/feat/label

feat: Label 컴포넌트 제작

src/components/common/index.tsx

@@ -1,2 +1,4 @@
 // eslint-disable-next-line react-refresh/only-export-components
 export * from './selectweek/SelectWeek'
+export * from './label/Label'
+export * from './icon/Icon'

src/components/common/label/Label.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Label from './Label'
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/Label',
+  component: Label,
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'selected', 'disabled']
+    },
+    icon: {
+      control: 'select',
+      options: [
+        'Abacus',
+        'Computer',
+        'English',
+        'Etc',
+        'Korean',
+        'Math',
+        'Music',
+        'Science',
+        'Music',
+        'Social',
+        'Synthesis',
+        'Write'
+      ]
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof Label>
+
+export const Medium: Story = {
+  render: (args) => (
+    <Label
+      icon={args.icon}
+      label={args.label}
+      color={args.color}
+      variant={'medium'}
+    />
+  )
+}
+
+export const Small: Story = {
+  render: (args) => (
+    <Label label={args.label} color={args.color} variant={'small'} />
+  )
+}

src/components/common/label/Label.tsx

@@ -0,0 +1,53 @@
+import Icon, { IconType } from '@/components/common/icon/Icon'
+import {
+  LabelVariant,
+  LabelColorVariant,
+  LabelTextColorVariant,
+  LabelColorType
+} from '@/components/common/label/LabelType'
+import cn from '@/libs/utils/cn'
+
+/**
+ * @param variant Label의 타입을 결정합니다. 'medium | 'small'
+ * @param label Label에 들어갈 value 값을 작성합니다.
+ * @param icon 만약 Label에 Icon이 들어간다면 작성하고 싶은 Icon 이름을 입력해주세요.
+ * @param color 'default' | 'selected' | 'disabled' 의 색상을 가지고 있습니다. (default: 'default')
+ */
+
+interface LabelProps {
+  variant: LabelVariant
+  label: string
+  icon?: IconType
+  color?: LabelColorType
+}
+
+const Label = ({
+  variant,
+  label = '라벨',
+  icon,
+  color = 'default'
+}: LabelProps) => {
+  return (
+    <label className={'w-[66px]'}>
+      <div
+        className={cn(
+          LabelVariant({
+            variant
+          }),
+          LabelColorVariant[color][variant],
+          LabelTextColorVariant[color][variant]
+        )}
+      >
+        {icon && (
+          <Icon
+            icon={icon}
+            classStyle={LabelTextColorVariant[color][variant]}
+          />
+        )}
+        <div>{label}</div>
+      </div>
+    </label>
+  )
+}
+
+export default Label

src/components/common/label/LabelType.ts

@@ -0,0 +1,49 @@
+import { cva } from 'class-variance-authority'
+
+export type LabelVariant = 'medium' | 'small'
+export type LabelColorType = 'default' | 'selected' | 'disabled'
+
+export const LabelColorVariant = {
+  default: {
+    medium: 'bg-white border border-blue-500 ',
+    small: 'bg-blue-400'
+  },
+  selected: {
+    medium: 'bg-blue-500',
+    small: 'bg-blue-700'
+  },
+  disabled: {
+    medium: 'bg-white border border-gray-500',
+    small: 'bg-gray-500'
+  }
+}
+
+export const LabelTextColorVariant = {
+  default: {
+    medium: 'stroke-blue-500 text-blue-500 ',
+    small: 'text-white-0'
+  },
+  selected: {
+    medium: 'stroke-white-0 text-white-0',
+    small: 'text-white-0'
+  },
+  disabled: {
+    medium: 'stroke-gray-500 text-gray-500',
+    small: 'text-white-0'
+  }
+}
+
+export const LabelVariant = cva(
+  `flex flex-row justify-center gap-[2px] items-center w-fit px-[5px] `,
+  {
+    variants: {
+      variant: {
+        medium: 'rounded-[10px] font-nsk body-14 w-fit h-[32px]',
+        small: 'font-nsk caption-13 rounded-[10px]  w-fit h-[28px] text-white'
+      },
+      defaultVariants: {
+        variant: 'medium'
+      }
+    }
+  }
+)