[FEAT] Chip 컴포넌트,스토리북 구현

src/components/common/Button/Button.variants.ts

@@ -1,6 +1,5 @@
 import { cva } from 'class-variance-authority';
 
-// TODO : hover, disable 됐을 경우 색상 추가
 export const ButtonVariants = cva(
   `flex items-center justify-center whitespace-nowrap select-none rounded-xl`,
   {

src/components/common/Chip/Chip.stories.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable no-restricted-exports */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Chip } from '.';
+
+const meta = {
+  title: 'components/common/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const Basic: Story = {
+  args: {
+    variant: 'medium',
+    children: '카페',
+  },
+  argTypes: {
+    variant: {
+      control: 'inline-radio',
+      options: ['small', 'medium', 'large'],
+    },
+    children: {
+      control: 'text',
+    },
+  },
+  render: (args) => {
+    return <Chip variant={args.variant}>{args.children}</Chip>;
+  },
+};

src/components/common/Chip/Chip.types.ts

@@ -0,0 +1,11 @@
+export type Props = {
+  /**
+   * The variant of the Chip.
+   *  @default 'large'
+   */
+  variant: 'small' | 'medium' | 'large';
+  /**
+   * content to be displayed within the Chip component.
+   */
+  children: string;
+};

src/components/common/Chip/Chip.variants.ts

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority';
+
+export const ChipVariants = cva(`bg-primary rounded-md text-white cursor-default px-3 py-1`, {
+  variants: {
+    variant: {
+      small: 'h-6 min-w-6 text-caption',
+      medium: 'h-7 min-w-7 text-body4',
+      large: 'h-8 min-w-8 text-body3',
+    },
+  },
+  defaultVariants: {
+    variant: 'medium',
+  },
+});

src/components/common/Chip/index.tsx

@@ -0,0 +1,10 @@
+import { Props } from './Chip.types';
+import { ChipVariants } from './Chip.variants';
+
+export const Chip = ({ variant, children, ...props }: Props) => {
+  return (
+    <span className={ChipVariants({ variant })} {...props}>
+      {children}
+    </span>
+  );
+};

src/pages/Link.tsx

@@ -43,7 +43,7 @@ export const Link = () => {
           context={{
             state: link.youtubeLink,
             setState: (link) => {
-              dispatch({ type: 'link', payload: { youtubeLink: link } });
+              dispatch({ type: 'SET_LINK', payload: { youtubeLink: link } });
             },
           }}
         />

tailwind.config.ts

@@ -7,6 +7,7 @@ export default {
   theme: {
     colors,
     fontFamily: {
+      sans: ['Pretendard'],
       pretendard: ['Pretendard'],
     },
     extend: {