feat :: header에서 link

packages/user/src/components/Header/Logo.tsx

@@ -1,21 +1,23 @@
 import styled from '@emotion/styled';
 import LogoImg from '../../assets/logo.svg';
 import { theme } from '@merge/design-system';
+import { Link } from 'react-router-dom';
 
 export const Logo = () => {
   return (
-    <Wrapper>
+    <Wrapper to={'/'}>
       <img src={LogoImg} />
       Merge
     </Wrapper>
   );
 };
 
-const Wrapper = styled.div`
+const Wrapper = styled(Link)`
   display: flex;
   align-items: center;
   color: ${theme.color.primary500};
   font-weight: 700;
   font-size: 24px;
   gap: 8px;
+  text-decoration: none;
 `;

packages/user/src/components/Header/Menu.tsx

@@ -1,11 +1,18 @@
 import styled from '@emotion/styled';
 import { Button } from '@merge/design-system';
+import { useNavigate } from 'react-router-dom';
 
 type menuProps = {
   isLogin: boolean;
 };
 
 export const Menu = ({ isLogin }: menuProps) => {
+  const link = useNavigate();
+
+  const onSignIn = () => {
+    link('/signin');
+  };
+
   return (
     <Wrapper>
       {isLogin ? (
@@ -22,13 +29,7 @@ export const Menu = ({ isLogin }: menuProps) => {
           </Button>
         </>
       ) : (
-        <Button
-          buttonStyle="solid"
-          size="extraSmall"
-          onClick={() => {
-            console.log(123);
-          }}
-        >
+        <Button buttonStyle="solid" size="extraSmall" onClick={onSignIn}>
           로그인
         </Button>
       )}

packages/user/src/components/Header/index.tsx

@@ -9,7 +9,7 @@ export const Header = () => {
     <>
       <Wrapper>
         <Logo />
-        <Menu isLogin={true} />
+        <Menu isLogin={false} />
       </Wrapper>
       <Outlet />
     </>