feat(processes/ideal): add RequiredOptionForm

src/processes/ideal_partner/RequiredOptionForm/RequiredOptionForm.module.css

@@ -0,0 +1,3 @@
+.Container {
+  height: 100%;
+}

src/processes/ideal_partner/RequiredOptionForm/RequiredOptionForm.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RequiredOptionForm } from 'src/processes/ideal_partner/RequiredOptionForm/RequiredOptionForm';
+
+const meta: Meta<typeof RequiredOptionForm> = {
+  component: RequiredOptionForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof RequiredOptionForm>;
+
+export const Default: Story = {
+  args: {},
+};

src/processes/ideal_partner/RequiredOptionForm/RequiredOptionForm.tsx

@@ -0,0 +1,35 @@
+import styles from './RequiredOptionForm.module.css';
+import { useIdlePartnerStore } from 'src/entities/ideal_partner/model/idealPartnerStore';
+import { CheckBox } from 'src/shared/ui/CheckBox/CheckBox';
+
+const optionList: { label: string }[] = [
+  { label: '나이' },
+  { label: '키 + 선호하는 스타일' },
+  { label: '지역' },
+  { label: '취미' },
+  { label: '종교' },
+  { label: '음주 습관' },
+  { label: '흡연 여부' },
+];
+
+export const RequiredOptionForm = () => {
+  const requiredOptions = useIdlePartnerStore((state) => state.requiredOptions);
+  const setRequiredOptions = useIdlePartnerStore((state) => state.setRequiredOptions);
+
+  return (
+    <section className={styles.Container}>
+      {optionList.map((option) => (
+        <CheckBox
+          key={option.label}
+          checked={requiredOptions.some((o) => o === option.label)}
+          label={option.label}
+          onChange={(value) =>
+            value
+              ? setRequiredOptions([...requiredOptions, option.label])
+              : setRequiredOptions(requiredOptions.filter((x) => x !== option.label))
+          }
+        />
+      ))}
+    </section>
+  );
+};

src/shared/ui/CheckBox/CheckBox.module.css

@@ -1,3 +1,7 @@
+.Wrapper {
+    padding: 12px 0;
+}
+
 .Label {
     position: relative;
     font-weight: 500;
@@ -12,10 +16,10 @@
 .CheckMark {
     display: flex;
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 22px;
-    height: 22px;
+    top: 1px;
+    left: 1px;
+    width: 16px;
+    height: 16px;
     align-items: center;
     justify-content: center;
     color: #fff;
@@ -29,9 +33,10 @@
          display: inline-flex;
          justify-content: center;
          align-items: center;
-         width: 20px;
-         height: 20px;
-         border: 2px solid var(--color-neutral-30);
+         width: 18px;
+         height: 18px;
+         border-radius: 50%;
+         background-color: var(--color-neutral-30);
      }
 
     &:checked + label::before {

src/shared/ui/CheckBox/CheckBox.tsx

@@ -5,19 +5,26 @@ import { Check } from 'src/shared/ui/icons';
 type CheckBoxProps = {
   checked: boolean;
   label: string;
+  onChange: (value: boolean) => void;
 };
 
-export const CheckBox = ({ checked, label }: CheckBoxProps) => {
+export const CheckBox = ({ checked, label, onChange }: CheckBoxProps) => {
   const id = useId();
   return (
-    <>
-      <input className={styles.CheckBox} type={'checkbox'} checked={checked} id={id} />
+    <div className={styles.Wrapper}>
+      <input
+        className={styles.CheckBox}
+        type={'checkbox'}
+        checked={checked}
+        id={id}
+        onChange={() => onChange(!checked)}
+      />
       <label className={styles.Label} htmlFor={id}>
         <span className={styles.CheckMark}>
           <Check />
         </span>
         {label}
       </label>
-    </>
+    </div>
   );
 };