fix: useNavigate 사용해서 헤더 클릭시 페이지 이동 부드럽게

Author: karpitony

src/components/Header/Header.tsx

@@ -1,28 +1,30 @@
 import { useCallback } from 'react';
+import { useNavigate } from 'react-router';
 import * as S from './Header.styled';
 
 export default function Header() {
+  const navigate = useNavigate();
   const onContainerClick = useCallback(() => {
   }, []);
 
   return (
     <S.HeaderContainer>
-      <S.Logo>Farm System</S.Logo>
+      <S.Logo onClick={() => navigate('/')}>Farm System</S.Logo>
 
       <S.Nav>
-        <S.NavItem href="/">
+        <S.NavItem onClick={() => navigate('/')}>
           홈
         </S.NavItem>
-        <S.NavItem href="/blog">
+        <S.NavItem onClick={() => navigate('/blog-project')}>
           블로그 / 프로젝트
         </S.NavItem>
-        <S.NavItem href="/news">
+        <S.NavItem onClick={() => navigate('/news')}>
           소식
         </S.NavItem>
-        <S.NavItem href="/faq" onClick={onContainerClick}>
+        <S.NavItem onClick={() => navigate('/faq')}>
           FAQ
         </S.NavItem>
-        <S.NavItem href="/apply">
+        <S.NavItem onClick={() => navigate('/apply')}>
           지원하기
         </S.NavItem>
       </S.Nav>