chore: Implement radio and checkbox component storybook

.storybook/preview.ts

@@ -1,15 +1,28 @@
-import type { Preview } from "@storybook/react";
-import "@/styles/globals.css";
+import type { Preview } from '@storybook/react';
+import '@/styles/globals.css';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      default: 'white',
+      values: [
+        {
+          name: 'gray',
+          value: '#151515',
+        },
+        {
+          name: 'white',
+          value: '#FFFFFF',
+        },
+      ],
+    },
   },
 };
 

eslint.config.mjs

@@ -18,7 +18,7 @@ const compat = new FlatCompat({
 
 const config = [
   {
-    ignores: ['dist', 'node_modules', '.next'],
+    ignores: ['dist', 'node_modules', '.next', '.storybook'],
   },
   ...compat.extends('next/core-web-vitals', 'plugin:storybook/recommended'),
   {

src/components/common/CheckBox.stories.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { CheckBox } from './CheckBox';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/CheckBox',
+  component: CheckBox,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '체크박스 컴포넌트입니다.',
+      },
+    },
+    layout: 'centered',
+  },
+  argTypes: {
+    checked: {
+      description: '체크박스의 선택 상태를 제어합니다.',
+      default: false,
+      control: 'boolean',
+    },
+    disabled: {
+      description: '체크박스의 비활성화 상태를 제어합니다.',
+      default: false,
+      control: 'boolean',
+    },
+    variant: {
+      description: '체크박스의 스타일을 설정합니다.',
+      default: 'gray',
+      control: 'radio',
+      options: ['gray', 'primary'],
+    },
+    onChange: {
+      description: '체크박스의 상태가 변경될 때 호출되는 함수입니다.',
+    },
+  },
+} satisfies Meta<typeof CheckBox>;
+
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+
+export const Default: Story = {
+  args: {
+    checked: false,
+    onChange: () => {},
+  },
+};
+
+export const Selected_Default: Story = {
+  args: {
+    checked: true,
+    onChange: () => {},
+  },
+};
+
+export const Selected_Primary: Story = {
+  args: {
+    checked: true,
+    variant: 'primary',
+    onChange: () => {},
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    checked: false,
+    disabled: true,
+    onChange: () => {},
+  },
+};
+
+const CheckBoxGroupExample = () => {
+  const [selectedChecks, setSelectedChecks] = useState<string[]>([]);
+
+  const handleCheckChange = (value: string) => (isChecked: boolean) => {
+    setSelectedChecks((prev) =>
+      isChecked ? [...prev, value] : prev.filter((item) => item !== value),
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-4 text-gray-400">
+      <div className="flex items-center gap-2">
+        <CheckBox
+          checked={selectedChecks.includes('check1')}
+          onChange={handleCheckChange('check1')}
+        />
+        <span>체크박스 1</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <CheckBox
+          checked={selectedChecks.includes('check2')}
+          variant="primary"
+          onChange={handleCheckChange('check2')}
+        />
+        <span>체크박스 2(primary)</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <CheckBox
+          checked={selectedChecks.includes('check3')}
+          disabled
+          onChange={handleCheckChange('check3')}
+        />
+        <span>비활성화된 체크박스</span>
+      </div>
+    </div>
+  );
+};
+
+export const Group: Story = {
+  render: () => <CheckBoxGroupExample />,
+};

src/components/common/Radio.stories.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { Radio } from './Radio';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Radio',
+  component: Radio,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '라디오 버튼 컴포넌트입니다.',
+      },
+    },
+    layout: 'centered',
+  },
+  argTypes: {
+    checked: {
+      description: '라디오 버튼의 선택 상태를 제어합니다.',
+      defaultValue: false,
+      control: 'boolean',
+    },
+    onChange: {
+      description: '라디오 버튼의 상태가 변경될 때 호출되는 함수입니다.',
+    },
+  },
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {
+  args: {
+    checked: false,
+    onChange: () => {},
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+    onChange: () => {},
+  },
+};
+
+export const Unchecked: Story = {
+  args: {
+    checked: false,
+    onChange: () => {},
+  },
+};
+
+const RadioGroup = () => {
+  const [selected, setSelected] = useState('1');
+
+  return (
+    <div className="flex gap-4 text-gray-400">
+      <div className="flex items-center gap-2">
+        <Radio checked={selected === '1'} onChange={() => setSelected('1')} />
+        <span>옵션 1</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <Radio checked={selected === '2'} onChange={() => setSelected('2')} />
+        <span>옵션 2</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <Radio checked={selected === '3'} onChange={() => setSelected('3')} />
+        <span>옵션 3</span>
+      </div>
+    </div>
+  );
+};
+
+export const Group: Story = {
+  render: () => <RadioGroup />,
+};

src/components/common/Radio.tsx

@@ -7,7 +7,7 @@ interface RadioProps {
 }
 
 const indicatorVariants = cva(
-  'absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full',
+  'absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-0',
   {
     variants: {
       checked: {