Merge branch 'develop' into feature/modal

src/domain/_common/components/Checkbox.tsx

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import { Controller, type UseFormReturn } from 'react-hook-form';
+
+import { ReactComponent as CheckMark } from '@/assets/check-mark.svg';
+import { ReactComponent as FatHorizontalIcon } from '@/assets/fat-horizontal.svg';
+import { ReactComponent as FatVerticalIcon } from '@/assets/fat-vertical.svg';
+import { ReactComponent as ThinVerticalIcon } from '@/assets/thin-vertical.svg';
+
+interface CheckboxProps {
+  type: 'fatHorizontal' | 'fatVertical' | 'thinVertical';
+  control?: UseFormReturn<any>['control'];
+}
+
+const DataByType = {
+  fatHorizontal: {
+    text: '뚱뚱 가로',
+    iconComponent: FatHorizontalIcon,
+  },
+  fatVertical: {
+    text: '뚱뚱 세로',
+    iconComponent: FatVerticalIcon,
+  },
+  thinVertical: {
+    text: '길쭉 세로',
+    iconComponent: ThinVerticalIcon,
+  },
+};
+
+export function Checkbox({ type, control }: CheckboxProps) {
+  const Icon = DataByType[type].iconComponent;
+
+  useEffect(() => {}, []);
+
+  return (
+    <Controller
+      name="checkbox"
+      control={control}
+      render={({ field }) => {
+        const isSelected = field.value === type;
+
+        return (
+          <button
+            className={`w-[336px] h-[101px] border-2 rounded-xl flex justify-start items-center font-bold text-[24px] p-3 ${
+              isSelected
+                ? 'text-white bg-primary-default border-primary-default'
+                : 'text-grey-placeholder border-grey-placeholder'
+            }`}
+            onClick={() => {
+              field.onChange(type);
+            }}
+          >
+            <Icon className={`w-12 h-12 pr-2 ${isSelected ? '[&>*]:stroke-primary-default' : ''}`} />
+            <span className="font-bold text-[24px] flex-1 text-left">{DataByType[type].text}</span>
+            {isSelected ? <CheckMark className="right-3 w-[20px] h-[20px] [&>*]:fill-white" /> : null}
+          </button>
+        );
+      }}
+    />
+  );
+}

src/domain/_common/components/index.ts

@@ -2,6 +2,7 @@ export * from './Bubble';
 export * from './Button';
 export * from './TextInput';
 export * from './FloatingButton';
+export * from './Checkbox';
 export * from './Stepper';
 export * from './IconButton';
 export * from './Dropdown';

src/stories/Checkbox.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Checkbox } from '@/domain/_common/components';
+import { useForm } from '@/hooks';
+import { yupSchema } from '@/utils/validation';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: [],
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const CheckboxForm: Story = {
+  render: () => {
+    const { control } = useForm({
+      defaultValues: {
+        checkbox: '',
+      },
+      schema: {
+        checkbox: yupSchema.requiredString,
+      },
+      mode: 'onChange',
+    });
+
+    return (
+      <ul className="flex flex-col gap-3">
+        <li>
+          <Checkbox type="fatHorizontal" control={control} />
+        </li>
+        <li>
+          <Checkbox type="fatVertical" control={control} />
+        </li>
+        <li>
+          <Checkbox type="thinVertical" control={control} />
+        </li>
+      </ul>
+    );
+  },
+};

src/stories/Dropdown.stories.tsx

@@ -21,9 +21,7 @@ export const Default: Story = {
       <div className="relative">
         <Dropdown>
           <Dropdown.Trigger>
-            <Button variant="text" onClick={() => {}}>
-              버튼
-            </Button>
+            <Button variant="text">버튼</Button>
           </Dropdown.Trigger>
           <Dropdown.List>
             <Dropdown.Item>1번</Dropdown.Item>