From ff80e82ecc84d7ab177aa941b8e8a1c2f16df60c Mon Sep 17 00:00:00 2001
From: baegofda <molly.daleo3o@gmail.com>
Date: Thu, 30 Nov 2023 02:41:45 +0900
Subject: [PATCH] =?UTF-8?q?(#0)=20Form=20Label=20tag=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/components/FormLabel/index.tsx            | 7 +++----
 src/core/components/FormLabel/types/index.ts       | 3 +--
 src/core/components/Input/InputBase/index.tsx      | 6 +++++-
 src/core/components/Input/InputBase/types/index.ts | 3 +++
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/core/components/FormLabel/index.tsx b/src/core/components/FormLabel/index.tsx
index 21025de..fef4c30 100644
--- a/src/core/components/FormLabel/index.tsx
+++ b/src/core/components/FormLabel/index.tsx
@@ -4,20 +4,19 @@ import { FormLabelProps } from "./types";
 
 const FormLabel = forwardRef((
     {
-      inputId,
       labelColor = "gray-04",
       label,
       required,
       feedback,
     }: FormLabelProps,
-    ref: React.Ref<HTMLLabelElement>,
+    ref: React.Ref<HTMLDivElement>,
   ) => {
   return (
-    <label ref = {ref} htmlFor = {inputId} className = {`flex text-${labelColor} text-body-02-regular`}>
+    <div ref = {ref} className = {`flex text-${labelColor} text-body-02-regular`}>
       {label}
       {required && <span className = "ml-0.5 text-primary-03">*</span>}
       {feedback && <Typography className = "ml-3" theme = "body-02-regular" text = {feedback} color = "error"/>}
-    </label>
+    </div>
   );
 });
 
diff --git a/src/core/components/FormLabel/types/index.ts b/src/core/components/FormLabel/types/index.ts
index 8a9362e..9e5db1c 100644
--- a/src/core/components/FormLabel/types/index.ts
+++ b/src/core/components/FormLabel/types/index.ts
@@ -1,8 +1,7 @@
 import { ThemeColors } from "@/types";
-import { InputHTMLAttributes, LabelHTMLAttributes } from "react";
+import { InputHTMLAttributes } from "react";
 
 export interface FormLabelProps {
-  inputId: LabelHTMLAttributes<HTMLLabelElement>["htmlFor"]
   labelColor?: ThemeColors;
   label: string;
   required?: InputHTMLAttributes<HTMLInputElement>["required"];
diff --git a/src/core/components/Input/InputBase/index.tsx b/src/core/components/Input/InputBase/index.tsx
index 6a1b760..096a414 100644
--- a/src/core/components/Input/InputBase/index.tsx
+++ b/src/core/components/Input/InputBase/index.tsx
@@ -28,7 +28,11 @@ const InputBase = forwardRef(
 
   return (
     <Component ref = {ref} className = {clsx(label && "flex-v-stack gap-y-3", rootClassName)} {...props}>
-      {label && <FormLabel inputId = {inputId} label = {label} labelColor = {labelColor} required = {required} />}
+      {label &&
+        <label htmlFor = {inputId}>
+          <FormLabel label = {label} labelColor = {labelColor} required = {required} />
+        </label>
+      }
       <div
         className = {cn(
           `flex items-center px-3 py-4 text-subhead-02-regular bg-transparent rounded-xl overflow-hidden border border-${borderColor}`,
diff --git a/src/core/components/Input/InputBase/types/index.ts b/src/core/components/Input/InputBase/types/index.ts
index 7aaa923..522c3a3 100644
--- a/src/core/components/Input/InputBase/types/index.ts
+++ b/src/core/components/Input/InputBase/types/index.ts
@@ -1,8 +1,11 @@
+import { LabelHTMLAttributes } from "react";
+
 import { FormLabelProps } from "@/core/components/FormLabel/types";
 import { ThemeColors } from "@/types";
 
 export interface InputBaseProps<T extends React.ElementType> extends React.HTMLAttributes<HTMLElement>, Omit<FormLabelProps, "label"> {
   label?: FormLabelProps["label"];
+  inputId: LabelHTMLAttributes<HTMLLabelElement>["htmlFor"]
   element?: T;
   rootClassName?: string;
   inputRootClassName?: string;