From a624fb3d649e1e886074a46793a8a00c6f07ff1b Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Tue, 19 Mar 2024 10:01:41 +0900
Subject: [PATCH] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=ED=97=88?=
 =?UTF-8?q?=EB=8D=94=20=EA=B2=80=EC=83=89=20=EB=A1=9C=EC=A7=81=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/Header.tsx | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 692b924f..3619a6cd 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,4 +1,6 @@
+import { useRef } from "react"
 import { IoSearch } from "react-icons/io5"
+import { useNavigate } from "react-router-dom"
 
 import {
   Box,
@@ -17,12 +19,21 @@ import LoginButton from "./components/LoginButton"
 import Menu from "./components/Menu/Menu"
 
 const Header = () => {
+  const navigate = useNavigate()
   const isLoggedIn = useUserInfoData()
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (inputRef.current) {
+      navigate(`/project?search=${inputRef.current.value}`)
+      inputRef.current.value = ""
+    }
+  }
+
   return (
     <HeaderContainer>
-      {/* 로고 */}
       <LogoLink logoHeight="7rem" />
-      {/* 검색창 */}
       <Box
         pl="1.5rem"
         alignSelf="end"
@@ -35,15 +46,17 @@ const Header = () => {
               h="2rem"
             />
           </InputRightElement>
-          <Input
-            size="lg"
-            variant="flushed"
-            placeholder="검색어를 입력하세요"
-          />
+          <form onSubmit={handleSubmit}>
+            <Input
+              ref={inputRef}
+              size="lg"
+              variant="flushed"
+              placeholder="검색어를 입력하세요"
+            />
+          </form>
         </InputGroup>
       </Box>
       <Spacer />
-      {/* 메뉴 */}
       {isLoggedIn ? <Menu /> : <LoginButton />}
     </HeaderContainer>
   )