Toggle Label 수정

thebbodek · Apr 26, 2024 · a5e6847 · a5e6847
1 parent b9c137c
commit a5e6847
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 26 deletions.
diff --git a/src/core/components/Toggle/index.tsx b/src/core/components/Toggle/index.tsx
@@ -20,38 +20,37 @@ const Toggle = ({
   const id = useId();
 
   return (
-    <div
+    <label
+      htmlFor = {id}
       className = {clsx(
-        "flex items-center gap-x-1",
+        "flex items-center gap-x-1 cursor-pointer",
         reverse && "flex-row-reverse",
         className,
       )}
     >
-      <FormLabel labelTheme = {labelTheme} label = {label} labelColor = {labelColor} required = {required} />
-      <label htmlFor = {id}>
-        <input
-          id = {id}
-          type = 'checkbox'
-          className = 'peer hidden'
-          checked = {checked}
-          onChange = {onChange}
-          disabled = {disabled}
-        />
+      {label && <FormLabel labelTheme = {labelTheme} label = {label} labelColor = {labelColor} required = {required} />}
+      <input
+        id = {id}
+        type = 'checkbox'
+        className = 'peer hidden'
+        checked = {checked}
+        onChange = {onChange}
+        disabled = {disabled}
+      />
+      <div
+        className = {clsx(
+          "relative rounded-full bg-gray-03 transition-all peer-disabled:bg-gray-09 peer-checked:bg-primary-03 peer-checked:[&>.circle]:-left-[0.125rem] peer-disabled:cursor-not-allowed",
+          TOGGLE_SIZE[size],
+        )
+      }>
         <div
           className = {clsx(
-            "relative cursor-pointer rounded-full bg-gray-03 transition-all peer-disabled:bg-gray-09 peer-checked:bg-primary-03 peer-checked:[&>.circle]:-left-[0.125rem] peer-disabled:cursor-not-allowed",
-            TOGGLE_SIZE[size],
-          )
-        }>
-          <div
-            className = {clsx(
-              "circle absolute left-[0.125rem] top-1/2 -translate-y-1/2 translate-x-0 transform rounded-full border border-solid border-gray-03 bg-white transition-all",
-              TOGGLE_CIRCLE_SIZE[size],
-            )}
-          />
-        </div>
-      </label>
-    </div>
+            "circle absolute left-[0.125rem] top-1/2 -translate-y-1/2 translate-x-0 transform rounded-full border border-solid border-gray-03 bg-white transition-all",
+            TOGGLE_CIRCLE_SIZE[size],
+          )}
+        />
+      </div>
+    </label>
   );
 };
 

diff --git a/src/core/components/Toggle/types/index.ts b/src/core/components/Toggle/types/index.ts
@@ -7,7 +7,7 @@ export interface ToggleProps
     "onChange" | "className" | "checked" | "disabled"
   >, Omit<FormLabelProps, "label" | "labelSubText"> {
   size: SizeType;
-  label: string;
+  label?: string;
   reverse?: boolean;
 }