From 92111e260fa95c79f257d1d0fbe3291e755d0a5b Mon Sep 17 00:00:00 2001
From: toothlessdev <toothless042@gmail.com>
Date: Fri, 22 Nov 2024 02:55:59 +0900
Subject: [PATCH] refactor: add option type to CheckBox

---
 .../forms/CheckBoxWithLabelForm.tsx           | 23 ++++++++++---------
 .../__test__/CheckBoxWithLabelForm.test.tsx   | 10 ++++++--
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/forms/CheckBoxWithLabelForm.tsx b/src/components/forms/CheckBoxWithLabelForm.tsx
index e366074..a56a124 100644
--- a/src/components/forms/CheckBoxWithLabelForm.tsx
+++ b/src/components/forms/CheckBoxWithLabelForm.tsx
@@ -21,32 +21,33 @@ export const CheckBoxWithLabelForm = ({
                 return (
                     <div key={index} className="flex items-center gap-1">
                         <Checkbox
-                            data-testid={`checkbox_${option}`}
-                            id={`checkbox_${option}`}
+                            data-testid={`checkbox_${option.label}`}
+                            id={`checkbox_${option.label}`}
                             className="block w-5 h-5"
-                            checked={(formState[questionText] as Array<string>).includes(
-                                option as string,
-                            )}
+                            checked={formState[questionText]
+                                .map((state) => state.value)
+                                .includes(option.value)}
                             onCheckedChange={(isChecked) => {
                                 if (isChecked) {
                                     setFormState({
                                         ...formState,
                                         [questionText]: [
-                                            ...(formState[questionText] as Array<string>),
-                                            option,
+                                            ...formState[questionText],
+                                            { value: true },
                                         ],
                                     });
                                 } else {
                                     setFormState({
                                         ...formState,
-                                        [questionText]: (
-                                            formState[questionText] as Array<string>
-                                        ).filter((item) => item !== option),
+                                        [questionText]: [
+                                            ...formState[questionText],
+                                            { value: false },
+                                        ],
                                     });
                                 }
                             }}
                         />
-                        <label htmlFor={`checkbox_${option}`}>{option as string}</label>
+                        <label htmlFor={`checkbox_${option}`}>{option.label}</label>
                     </div>
                 );
             })}
diff --git a/src/components/forms/__test__/CheckBoxWithLabelForm.test.tsx b/src/components/forms/__test__/CheckBoxWithLabelForm.test.tsx
index 8c159aa..ed66a86 100644
--- a/src/components/forms/__test__/CheckBoxWithLabelForm.test.tsx
+++ b/src/components/forms/__test__/CheckBoxWithLabelForm.test.tsx
@@ -4,15 +4,21 @@ import { screen, render, fireEvent } from "@testing-library/react";
 
 describe("<CheckBoxWithLabelForm/>", () => {
     const formState = {
-        "test-question-text": [],
+        "test-question-text": [{ value: "" }],
     };
     const setFormState = jest.fn();
 
+    const options = [
+        { label: "options1", value: "options1" },
+        { label: "options2", value: "options2" },
+        { label: "options3", value: "options3" },
+    ];
+
     beforeEach(() => {
         render(
             <CheckBoxWithLabelForm
                 questionText={"test-question-text"}
-                options={["options1", "options2", "options3"]}
+                options={options}
                 formState={formState}
                 setFormState={setFormState}
             />,