From 094bf879fc60390c708dc739ac966542e739547a Mon Sep 17 00:00:00 2001
From: baegofda <molly.daleo3o@gmail.com>
Date: Mon, 22 Jan 2024 17:54:22 +0900
Subject: [PATCH] =?UTF-8?q?(#0)=20input=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                              | 2 +-
 src/core/components/Drawer/types/index.ts                 | 2 +-
 src/core/components/FormLabel/FormLabel.stories.tsx       | 4 ++--
 src/core/components/FormLabel/index.tsx                   | 4 ++--
 src/core/components/FormLabel/types/index.ts              | 2 +-
 src/core/components/Input/InputBase/index.tsx             | 8 ++++++--
 src/core/components/Input/InputBase/types/index.ts        | 1 +
 src/core/components/Input/InputPassword/index.tsx         | 2 ++
 src/core/components/Input/InputPassword/types/index.ts    | 2 +-
 src/core/components/Input/InputSearch/index.tsx           | 2 ++
 src/core/components/Input/InputSearch/types/index.ts      | 2 +-
 src/core/components/Input/InputTextArea/index.tsx         | 2 ++
 src/core/components/Input/InputTextArea/types/index.ts    | 2 +-
 src/core/components/Input/InputTextField/index.tsx        | 2 ++
 src/core/components/Input/InputTextField/types/index.ts   | 2 +-
 .../SelectBubble/SelectBubble/SelectBubble.stories.tsx    | 2 +-
 .../components/Select/SelectBubble/SelectBubble/index.tsx | 4 ++--
 src/core/components/Typography/index.tsx                  | 2 +-
 src/core/components/Typography/types/index.ts             | 2 +-
 19 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 6865d00..4c287b0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bbodek-ui",
-  "version": "0.0.150",
+  "version": "0.0.151",
   "type": "module",
   "author": "Bbodek",
   "license": "MIT",
diff --git a/src/core/components/Drawer/types/index.ts b/src/core/components/Drawer/types/index.ts
index 84310e3..ae0cff1 100644
--- a/src/core/components/Drawer/types/index.ts
+++ b/src/core/components/Drawer/types/index.ts
@@ -3,7 +3,7 @@ import { HTMLAttributes } from "react";
 import { ModalBaseProps } from "../../Modal/ModalBase/types";
 import { TypographyProps } from "../../Typography/types";
 
-export interface DrawerProps extends Pick<ModalBaseProps, "target" | "isOpen">, HTMLAttributes<HTMLElement> {
+export interface DrawerProps extends Pick<ModalBaseProps, "target" | "isOpen">, Omit<HTMLAttributes<HTMLElement>, "title"> {
   title: TypographyProps<"strong">["text"];
   titleSub?: TypographyProps<"span">["text"];
   onClose: ModalBaseProps["onClose"];
diff --git a/src/core/components/FormLabel/FormLabel.stories.tsx b/src/core/components/FormLabel/FormLabel.stories.tsx
index e814ba8..cfa79fa 100644
--- a/src/core/components/FormLabel/FormLabel.stories.tsx
+++ b/src/core/components/FormLabel/FormLabel.stories.tsx
@@ -22,7 +22,7 @@ const meta = {
       defaultValue: "gray-04",
       description: "Bbodek DesignSystem Colors",
     },
-    feedback: {
+    labelSubText: {
       control: "text",
       description: "Form Feedback",
     },
@@ -37,7 +37,7 @@ export const Default = (props: FormLabelProps) => {
       label = {props.label ?? "품목 선택"}
       required = {props.required ?? true}
       labelColor = {props.labelColor}
-      feedback = {props.feedback ?? "반별로 품목과 수량을 각각 선택해주세요."}
+      labelSubText = {props.labelSubText ?? "반별로 품목과 수량을 각각 선택해주세요."}
     />
   );
 };
diff --git a/src/core/components/FormLabel/index.tsx b/src/core/components/FormLabel/index.tsx
index f24fa64..123c01c 100644
--- a/src/core/components/FormLabel/index.tsx
+++ b/src/core/components/FormLabel/index.tsx
@@ -7,7 +7,7 @@ const FormLabel = forwardRef((
       labelColor = "gray-06",
       label,
       required,
-      feedback,
+      labelSubText,
     }: FormLabelProps,
     ref: React.Ref<HTMLDivElement>,
   ) => {
@@ -15,7 +15,7 @@ const FormLabel = forwardRef((
     <div ref = {ref} className = {`flex text-${labelColor} text-body-02-medium`}>
       {label}
       {required && <span className = "ml-0.5 text-primary-03">*</span>}
-      {feedback && <Typography className = "ml-3" theme = "body-02-regular" text = {feedback} color = "error"/>}
+      {labelSubText && <Typography className = "ml-3" theme = "body-02-regular" text = {labelSubText} color = "error"/>}
     </div>
   );
 });
diff --git a/src/core/components/FormLabel/types/index.ts b/src/core/components/FormLabel/types/index.ts
index 9e5db1c..388cece 100644
--- a/src/core/components/FormLabel/types/index.ts
+++ b/src/core/components/FormLabel/types/index.ts
@@ -5,5 +5,5 @@ export interface FormLabelProps {
   labelColor?: ThemeColors;
   label: string;
   required?: InputHTMLAttributes<HTMLInputElement>["required"];
-  feedback?: string;
+  labelSubText?: string;
 }
diff --git a/src/core/components/Input/InputBase/index.tsx b/src/core/components/Input/InputBase/index.tsx
index 77362e7..49103b5 100644
--- a/src/core/components/Input/InputBase/index.tsx
+++ b/src/core/components/Input/InputBase/index.tsx
@@ -3,6 +3,7 @@ import React, { forwardRef } from "react";
 
 import { cn } from "@/utilities/utils";
 import FormLabel from "../../FormLabel";
+import Typography from "../../Typography";
 import { InputBaseProps } from "./types";
 
 const InputBase = forwardRef(
@@ -21,6 +22,7 @@ const InputBase = forwardRef(
       error = false,
       required,
       readOnly,
+      feedback,
       ...props
     }: InputBaseProps<T>,
     ref: React.ComponentPropsWithRef<T>["ref"],
@@ -28,9 +30,9 @@ const InputBase = forwardRef(
   const Component: React.ElementType = Element || "div";
 
   return (
-    <Component ref = {ref} className = {clsx(label && "flex-v-stack gap-y-3", rootClassName)} {...props}>
+    <Component ref = {ref} className = {clsx(label && "flex-v-stack", rootClassName)} {...props}>
       {label &&
-        <label htmlFor = {inputId}>
+        <label className = "mb-2" htmlFor = {inputId}>
           <FormLabel label = {label} labelColor = {labelColor} required = {required} />
         </label>
       }
@@ -38,6 +40,7 @@ const InputBase = forwardRef(
         className = {cn(
           `flex items-center px-3 py-4 text-subhead-02-regular bg-transparent rounded-xl overflow-hidden border border-${borderColor}`,
           error && "border-error",
+          feedback && "mb-1",
           inputRootClassName,
         )}
       >
@@ -45,6 +48,7 @@ const InputBase = forwardRef(
         {inputComponent && inputComponent}
         {!readOnly && endComponent && endComponent}
       </div>
+      {feedback ? <Typography theme = "body-03-regular" color = "error" text = {feedback} /> : null}
     </Component>
   );
 });
diff --git a/src/core/components/Input/InputBase/types/index.ts b/src/core/components/Input/InputBase/types/index.ts
index 0e1913e..02e1a15 100644
--- a/src/core/components/Input/InputBase/types/index.ts
+++ b/src/core/components/Input/InputBase/types/index.ts
@@ -15,4 +15,5 @@ export interface InputBaseProps<T extends React.ElementType> extends React.HTMLA
   borderColor?: ThemeColors;
   error?: boolean
   readOnly?: boolean;
+  feedback?: React.ReactNode;
 }
diff --git a/src/core/components/Input/InputPassword/index.tsx b/src/core/components/Input/InputPassword/index.tsx
index 664dcad..f5c4986 100644
--- a/src/core/components/Input/InputPassword/index.tsx
+++ b/src/core/components/Input/InputPassword/index.tsx
@@ -11,6 +11,7 @@ const InputPassword = forwardRef((
       labelColor,
       label = "비밀번호",
       regCallback,
+      feedback,
       ...props
     }: InputPasswordProps,
     ref: React.ComponentPropsWithRef<"input">["ref"],
@@ -33,6 +34,7 @@ const InputPassword = forwardRef((
       error = {error}
       readOnly = {readOnly}
       required = {required}
+      feedback = {feedback}
       labelColor = {labelColor}
       inputComponent = {
         <input
diff --git a/src/core/components/Input/InputPassword/types/index.ts b/src/core/components/Input/InputPassword/types/index.ts
index 439902a..691d929 100644
--- a/src/core/components/Input/InputPassword/types/index.ts
+++ b/src/core/components/Input/InputPassword/types/index.ts
@@ -3,5 +3,5 @@ import { UseInputProps } from "../../hooks/useInput";
 
 export interface InputPasswordProps
     extends React.InputHTMLAttributes<HTMLInputElement>,
-            Pick<InputBaseProps<"div">, "rootClassName" | "label" | "error" | "labelColor">,
+            Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "error" | "labelColor">,
             Pick<UseInputProps, "regCallback"> {}
diff --git a/src/core/components/Input/InputSearch/index.tsx b/src/core/components/Input/InputSearch/index.tsx
index e1d21f3..a36b041 100644
--- a/src/core/components/Input/InputSearch/index.tsx
+++ b/src/core/components/Input/InputSearch/index.tsx
@@ -10,6 +10,7 @@ const InputSearch = forwardRef((
     {
       formSubmitHandler,
       regCallback,
+      feedback,
       ...props
     }: InputSearchProps,
     ref: React.ComponentPropsWithRef<"input">["ref"],
@@ -36,6 +37,7 @@ const InputSearch = forwardRef((
       element = {"form"}
       ref = {formRef}
       error = {error}
+      feedback = {feedback}
       rootClassName = {rootClassName}
       inputRootClassName = {"flex items-center px-6 py-2 text-body-02-medium bg-white rounded-full overflow-hidden border border-gray-02"}
       onSubmit = {onSubmitHandler}
diff --git a/src/core/components/Input/InputSearch/types/index.ts b/src/core/components/Input/InputSearch/types/index.ts
index 309bfec..6f99313 100644
--- a/src/core/components/Input/InputSearch/types/index.ts
+++ b/src/core/components/Input/InputSearch/types/index.ts
@@ -3,7 +3,7 @@ import { UseInputProps } from "../../hooks/useInput";
 
 export interface InputSearchProps
     extends React.InputHTMLAttributes<HTMLInputElement>,
-            Pick<InputBaseProps<"div">, "rootClassName" | "error">,
+            Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "error">,
             Pick<UseInputProps, "regCallback"> {
             formSubmitHandler?: (e: React.FormEvent<HTMLFormElement>) => void;
            }
diff --git a/src/core/components/Input/InputTextArea/index.tsx b/src/core/components/Input/InputTextArea/index.tsx
index 62cbc33..4d3162b 100644
--- a/src/core/components/Input/InputTextArea/index.tsx
+++ b/src/core/components/Input/InputTextArea/index.tsx
@@ -14,6 +14,7 @@ const InputTextArea = forwardRef((
       label,
       textAreaHeight,
       regCallback,
+      feedback,
       ...props
     }: InputTextAreaProps,
     ref: React.Ref<HTMLTextAreaElement>,
@@ -35,6 +36,7 @@ const InputTextArea = forwardRef((
       inputId = {id}
       rootClassName = {rootClassName}
       inputRootClassName = {clsx("flex-v-stack", TEXT_AREA_HEIGHT[textAreaHeight])}
+      feedback = {feedback}
       error = {error}
       inputComponent = {
         <textarea
diff --git a/src/core/components/Input/InputTextArea/types/index.ts b/src/core/components/Input/InputTextArea/types/index.ts
index 8ce9343..58bb0d7 100644
--- a/src/core/components/Input/InputTextArea/types/index.ts
+++ b/src/core/components/Input/InputTextArea/types/index.ts
@@ -6,7 +6,7 @@ export type TextAreaSizeType = typeof SIZE[keyof typeof SIZE];
 
 export interface InputTextAreaProps
     extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-           Pick<InputBaseProps<"div">, "rootClassName" | "label" | "labelColor" | "borderColor"| "error">,
+           Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "labelColor" | "borderColor"| "error">,
            Pick<UseInputProps, "regCallback"> {
             textAreaHeight: TextAreaSizeType;
             maxLength: React.TextareaHTMLAttributes<HTMLTextAreaElement>["maxLength"];
diff --git a/src/core/components/Input/InputTextField/index.tsx b/src/core/components/Input/InputTextField/index.tsx
index 95954a6..73641a7 100644
--- a/src/core/components/Input/InputTextField/index.tsx
+++ b/src/core/components/Input/InputTextField/index.tsx
@@ -12,6 +12,7 @@ const InputTextField = forwardRef((
       borderColor,
       label,
       regCallback,
+      feedback,
       ...props
     }: InputTextFieldProps,
     ref: React.ComponentPropsWithRef<"input">["ref"],
@@ -28,6 +29,7 @@ const InputTextField = forwardRef((
       rootClassName = {rootClassName}
       inputRootClassName = "h-[3.75rem]"
       readOnly = {readOnly}
+      feedback = {feedback}
       error = {error}
       inputComponent = {
         <input
diff --git a/src/core/components/Input/InputTextField/types/index.ts b/src/core/components/Input/InputTextField/types/index.ts
index 07afdfd..bc3f116 100644
--- a/src/core/components/Input/InputTextField/types/index.ts
+++ b/src/core/components/Input/InputTextField/types/index.ts
@@ -3,5 +3,5 @@ import { UseInputProps } from "../../hooks/useInput";
 
 export interface InputTextFieldProps
     extends React.InputHTMLAttributes<HTMLInputElement>,
-           Pick<InputBaseProps<"div">, "rootClassName" | "label" | "labelColor" | "borderColor" | "error">,
+           Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "labelColor" | "borderColor" | "error">,
            Pick<UseInputProps, "regCallback"> {}
diff --git a/src/core/components/Select/SelectBubble/SelectBubble/SelectBubble.stories.tsx b/src/core/components/Select/SelectBubble/SelectBubble/SelectBubble.stories.tsx
index 0ebe6d9..c368513 100644
--- a/src/core/components/Select/SelectBubble/SelectBubble/SelectBubble.stories.tsx
+++ b/src/core/components/Select/SelectBubble/SelectBubble/SelectBubble.stories.tsx
@@ -35,7 +35,7 @@ export const Default = () => {
 
   return (
     <div className = "w-[60rem]">
-      <SelectBubble label = "품목 선택" feedback = "반별로 품목과 수량을 각각 선택해주세요." items = {items} required/>
+      <SelectBubble label = "품목 선택" labelSubText = "반별로 품목과 수량을 각각 선택해주세요." items = {items} required/>
     </div>
   );
 };
diff --git a/src/core/components/Select/SelectBubble/SelectBubble/index.tsx b/src/core/components/Select/SelectBubble/SelectBubble/index.tsx
index 6ccb888..450f29f 100644
--- a/src/core/components/Select/SelectBubble/SelectBubble/index.tsx
+++ b/src/core/components/Select/SelectBubble/SelectBubble/index.tsx
@@ -11,7 +11,7 @@ const SelectBubble = forwardRef((
       label,
       labelColor,
       required,
-      feedback,
+      labelSubText,
       ...props
     }: SelectBubbleProps,
     ref: React.Ref<HTMLUListElement>,
@@ -20,7 +20,7 @@ const SelectBubble = forwardRef((
 
   return (
     <div className = {clsx("flex-v-stack gap-y-3", className)}>
-      <FormLabel label = {label} labelColor = {labelColor} required = {required} feedback = {feedback}/>
+      <FormLabel label = {label} labelColor = {labelColor} required = {required} labelSubText = {labelSubText}/>
       <ul ref = {ref} className = {"flex gap-x-3"} {...rest}>
         {items}
       </ul>
diff --git a/src/core/components/Typography/index.tsx b/src/core/components/Typography/index.tsx
index 0d66f69..f998ed6 100644
--- a/src/core/components/Typography/index.tsx
+++ b/src/core/components/Typography/index.tsx
@@ -20,7 +20,7 @@ const Typography = <T extends React.ElementType = "span">({
     <Component className = {clsx(`text-${theme} text-${color}`, className)} {...rest}>
       {text}
     </Component>
-    );
+  );
 };
 
 export default Typography;
diff --git a/src/core/components/Typography/types/index.ts b/src/core/components/Typography/types/index.ts
index 3390d4a..539d606 100644
--- a/src/core/components/Typography/types/index.ts
+++ b/src/core/components/Typography/types/index.ts
@@ -2,7 +2,7 @@ import { ThemeColors, ThemeTypography } from "@/types";
 
 export interface TypographyProps<T extends React.ElementType = "span"> {
   element?: T;
-  text: string;
+  text: React.ReactNode;
   theme?: ThemeTypography;
   color?: ThemeColors;
 }