From fe87be1650cb3c466f4796c04c6a2bcfd8752c34 Mon Sep 17 00:00:00 2001
From: baegofda <molly.daleo3o@gmail.com>
Date: Fri, 26 Apr 2024 18:29:48 +0900
Subject: [PATCH] =?UTF-8?q?InputSearch=20=EB=B6=84=EA=B8=B0=20=EC=98=88?=
 =?UTF-8?q?=EC=99=B8=EC=B2=98=EB=A6=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Input/InputSearch/index.tsx    | 32 +++++++++++++------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/core/components/Input/InputSearch/index.tsx b/src/core/components/Input/InputSearch/index.tsx
index 8ae2104..6c22274 100644
--- a/src/core/components/Input/InputSearch/index.tsx
+++ b/src/core/components/Input/InputSearch/index.tsx
@@ -22,17 +22,33 @@ const InputSearch = <T extends React.ElementType = "form">(
   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%" className = "text-gray-05"/>;
+  const el = rootRef.current;
+  const isForm = el instanceof HTMLFormElement;
+
+  const endComponent = () => {
+    if(isForm) {
+      return (
+        <button className = "w-5 h-5" type = "submit" aria-label = "검색하기">
+          {SearchIcon}
+        </button>
+      );
+    }
+
+    return (
+      <div className = "w-5 h-5">
+        {SearchIcon}
+      </div>
+    );
+  };
 
   const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+    if(!isForm) return;
 
-    const el = rootRef.current;
+    e.preventDefault();
 
     if(!formSubmitHandler) return;
 
-    if (el instanceof HTMLFormElement) {
-      el.reset();
-    }
+    el.reset();
 
     onResetInputValue();
     formSubmitHandler(e);
@@ -52,7 +68,7 @@ const InputSearch = <T extends React.ElementType = "form">(
         "flex items-center py-2 text-body-02-medium bg-white overflow-hidden border border-gray-02",
         INPUT_SEARCH_ROUNDED[rounded],
       )}
-      onSubmit = {onSubmitHandler}
+      onSubmit = {el instanceof HTMLFormElement ? onSubmitHandler : undefined}
       inputComponent = {
         <input
           id = {id}
@@ -71,9 +87,7 @@ const InputSearch = <T extends React.ElementType = "form">(
         />
       }
       endComponent = {
-        <button className = "w-5 h-5" type = "submit" aria-label = "검색하기">
-          {SearchIcon}
-        </button>
+        endComponent()
       }
     />
   );