Merge pull request #40 from dnd-side-project/design/#39

design: Checkbox, RadioButton 스토리 작성 및 위치 이동

src/components/common/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useEffect, useState } from 'react'
+import Checkbox from '.'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'components/common/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    isChecked: {
+      description: '체크 유무를 결정합니다.',
+    },
+    text: {
+      description: 'label에 표기할 텍스트를 입력합니다.',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  render: (args) => {
+    const [isChecked, setIsChecked] = useState(args.isChecked)
+
+    useEffect(() => {
+      setIsChecked(args.isChecked)
+    }, [args.isChecked])
+
+    return (
+      <div className="text-onSurface-300">
+        <Checkbox
+          {...args}
+          isChecked={isChecked}
+          onChange={() => setIsChecked(!isChecked)}
+        />
+      </div>
+    )
+  },
+  args: {
+    isChecked: false,
+    text: 'checkbox',
+  },
+}

src/components/shared/CheckboxBottomSheet/OneCheckbox.tsx → src/components/common/Checkbox/index.tsx

@@ -1,19 +1,15 @@
 import { cn } from '@/lib/core'
-import React from 'react'
+import React, { ChangeEventHandler } from 'react'
 
 type CheckboxProps = {
   text: string
   isChecked: boolean
-  onChange: () => void
+  onChange: ChangeEventHandler<HTMLInputElement>
 }
 
-export default function OneCheckbox({
-  text,
-  isChecked,
-  onChange,
-}: CheckboxProps) {
+export default function Checkbox({ text, isChecked, onChange }: CheckboxProps) {
   return (
-    <label className="flex gap-3 py-4">
+    <label className="flex gap-3 py-4 items-center">
       <input
         type="checkbox"
         checked={isChecked}

src/components/common/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useEffect, useState } from 'react'
+import RadioButton from '.'
+
+const meta: Meta<typeof RadioButton> = {
+  title: 'components/common/RadioButton',
+  component: RadioButton,
+  tags: ['autodocs'],
+  argTypes: {
+    id: {
+      description: '각 RadioButton를 구분하는 value를 결정합니다.',
+    },
+    isChecked: {
+      description: '선택 유무를 결정합니다.',
+    },
+    item: {
+      description: 'label에 표기할 텍스트를 입력합니다.',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof RadioButton>
+
+export const Default: Story = {
+  render: (args) => {
+    const [isChecked, setIsChecked] = useState(args.isChecked)
+
+    useEffect(() => {
+      setIsChecked(args.isChecked)
+    }, [args.isChecked])
+
+    return (
+      <div className="text-onSurface-300">
+        <RadioButton
+          {...args}
+          isChecked={isChecked}
+          onChange={() => setIsChecked(!isChecked)}
+        />
+      </div>
+    )
+  },
+  args: {
+    isChecked: false,
+    item: 'radioButton',
+  },
+}

src/components/shared/RadioBtnBottomSheet/OneRadioBtn.tsx → src/components/common/RadioButton/index.tsx

@@ -1,18 +1,19 @@
 import { cn } from '@/lib/core'
+import { ChangeEventHandler } from 'react'
 
-type OneRadioBtnProps = {
+type RadioButtonProps = {
   id: number
   item: string
   isChecked: boolean
-  onChange: () => void
+  onChange: ChangeEventHandler<HTMLInputElement>
 }
 
-export default function OneRadioBtn({
+export default function RadioButton({
   id,
   item,
   isChecked,
   onChange,
-}: OneRadioBtnProps) {
+}: RadioButtonProps) {
   return (
     <label className="text-sub2 flex items-center gap-3 py-4">
       <input

src/components/domain/home/learning/TodayWords/index.tsx

@@ -8,10 +8,7 @@ export default function TodayWords({
 }) {
   return (
     <>
-      <HorizontalScrollArea
-        title="오늘의 실무 용어 🔭"
-        scrollDivisor={2}
-      >
+      <HorizontalScrollArea title="오늘의 실무 용어 🔭" scrollDivisor={2}>
         {wordsList.map(({ id, name, meaning, category }, idx) => (
           <WordItem
             key={id}

src/components/shared/CheckboxBottomSheet/index.tsx

@@ -2,8 +2,8 @@ import BottomSheet from '@/components/common/BottomSheet'
 import { CHECKBOX_MENUS } from '@/constants/bottomSheet'
 import useUIStore from '@/store/useUIStore'
 import { useState } from 'react'
-import OneCheckbox from './OneCheckbox'
 import Button from '@/components/common/Button'
+import Checkbox from '@/components/common/Checkbox'
 
 type BottomSheetProps = {
   isOpen: boolean
@@ -43,7 +43,7 @@ export default function CheckboxBottomSheet({
       <p className="text-body2 text-onSurface-200 mb-5">{description}</p>
       <ul className="mb-5">
         {options.map(({ id, text }, idx) => (
-          <OneCheckbox
+          <Checkbox
             key={id}
             text={text}
             isChecked={checked.has(id)}

src/components/shared/RadioBtnBottomSheet/index.tsx

@@ -1,7 +1,7 @@
 import BottomSheet from '@/components/common/BottomSheet'
 import { RADIOBTN_MENUS } from '@/constants/bottomSheet'
-import OneRadioBtn from './OneRadioBtn'
 import Button from '@/components/common/Button'
+import RadioButton from '@/components/common/RadioButton'
 
 type BottomSheetProps = {
   isOpen: boolean
@@ -27,7 +27,7 @@ export default function RadioBtnBottomSheet({
       <p className="text-h2 mb-5">{`${nickname}님,` + `\n` + title}</p>
       <ul className="mb-5">
         {options.map(({ id, item }, idx) => (
-          <OneRadioBtn
+          <RadioButton
             key={id}
             id={id}
             isChecked={value === id}