(#0) input 피드백 추가

thebbodek · Jan 22, 2024 · 094bf87 · 094bf87
1 parent 8e6324a
commit 094bf87
Show file tree

Hide file tree

Showing 19 changed files with 31 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -7,15 +7,15 @@ const FormLabel = forwardRef((
       labelColor = "gray-06",
       label,
       required,
-      feedback,
+      labelSubText,
     }: FormLabelProps,
     ref: React.Ref<HTMLDivElement>,
   ) => {
   return (
     <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
@@ -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
@@ -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,30 +22,33 @@ const InputBase = forwardRef(
       error = false,
       required,
       readOnly,
+      feedback,
       ...props
     }: InputBaseProps<T>,
     ref: React.ComponentPropsWithRef<T>["ref"],
   ) => {
   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>
       }
       <div
         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,
         )}
       >
         {startComponent && startComponent}
         {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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }