InputSearch 상위 form Tag optional로 변경

thebbodek · Apr 26, 2024 · 1b08134 · 1b08134
1 parent 38c4e5a
commit 1b08134
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/src/core/components/Input/InputSearch/index.tsx b/src/core/components/Input/InputSearch/index.tsx
@@ -1,43 +1,48 @@
+import { MagnifyingGlass } from "@phosphor-icons/react";
 import clsx from "clsx";
-import { forwardRef, useId, useRef } from "react";
+import { useId, useRef } from "react";
 
 import { useInput } from "@/core/components/Input/hooks/useInput";
-import { MagnifyingGlass } from "@phosphor-icons/react";
 import InputBase from "../InputBase";
 import { INPUT_SEARCH_ROUNDED } from "./constants";
 import { InputSearchProps } from "./types";
 
-const InputSearch = forwardRef((
+const InputSearch = <T extends React.ElementType = "form">(
     {
       formSubmitHandler,
       regCallback,
       feedback,
       rounded,
+      rootElement,
       ...props
-    }: InputSearchProps,
-    ref: React.ComponentPropsWithRef<"input">["ref"],
+    }: InputSearchProps<T> & React.ComponentPropsWithoutRef<"input">,
   ) => {
   const id = useId();
-  const formRef = useRef<HTMLFormElement | null>(null);
+  const rootRef = useRef<T | null>(null);
   const { readOnly = false, disabled = false, rootClassName, className, value, onChange, autoComplete = "off", error = false, name, ...rest } = props;
   const { inputValue, onChangeHandler, onResetInputValue } = useInput({ value, regCallback, onChange, name });
-  const SearchIcon = <MagnifyingGlass size = "100%" fill = "#A9B2C7"/>;
+  const SearchIcon = <MagnifyingGlass size = "100%" className = "text-gray-05"/>;
 
   const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
+    const el = rootRef.current;
+
     if(!formSubmitHandler) return;
 
-    formRef.current?.reset();
+    if (el instanceof HTMLFormElement) {
+      el.reset();
+    }
+
     onResetInputValue();
     formSubmitHandler(e);
   };
 
   return (
     <InputBase
       inputId = {id}
-      element = {"form"}
-      ref = {formRef}
+      element = {rootElement ?? "form"}
+      ref = {rootRef}
       error = {error}
       feedback = {feedback}
       readOnly = {readOnly}
@@ -50,7 +55,6 @@ const InputSearch = forwardRef((
       onSubmit = {onSubmitHandler}
       inputComponent = {
         <input
-          ref = {ref}
           id = {id}
           className = {clsx("bbodek-field", className)}
           type = "text"
@@ -73,7 +77,7 @@ const InputSearch = forwardRef((
       }
     />
   );
-});
+};
 
 InputSearch.displayName = "InputSearch";
 

diff --git a/src/core/components/Input/InputSearch/types/index.ts b/src/core/components/Input/InputSearch/types/index.ts
@@ -2,12 +2,13 @@ import { InputBaseProps } from "../../InputBase/types";
 import { UseInputProps } from "../../hooks/useInput";
 import { ROUNDED } from "../constants";
 
-export interface InputSearchProps
+export interface InputSearchProps<T extends React.ElementType>
     extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "readOnly" | "disabled">,
-            Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "error" | "readOnly" | "disabled">,
-            Pick<UseInputProps, "regCallback"> {
-                rounded: RoundedType;
-                formSubmitHandler?: (e: React.FormEvent<HTMLFormElement>) => void;
-           }
+    Pick<InputBaseProps<T>, "feedback" | "rootClassName" | "error" | "readOnly" | "disabled">,
+    Pick<UseInputProps, "regCallback"> {
+        rootElement?: T,
+        rounded: RoundedType;
+        formSubmitHandler?: (e: React.FormEvent<HTMLFormElement>) => void;
+    }
 
 export type RoundedType = typeof ROUNDED[keyof typeof ROUNDED];