(#0) Form Label tag 변경

thebbodek · Nov 29, 2023 · ff80e82 · ff80e82
1 parent 87c7abc
commit ff80e82
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;