feat: main header 구현

week4/src/App.tsx

@@ -2,6 +2,8 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import LoginPage from "./pages/LoginPage";
 import HomePage from "./pages/HomePage";
 import SignUpPage from "./pages/SignUpPage";
+import HobbyPage from "./pages/HobbyPage";
+import Mypage from "./pages/Mypage";
 
 const router = createBrowserRouter([
   {
@@ -16,6 +18,14 @@ const router = createBrowserRouter([
     path: "/signup",
     element: <SignUpPage />,
   },
+  {
+    path: "/hobby",
+    element: <HobbyPage />,
+  },
+  {
+    path: "/mypage",
+    element: <Mypage />,
+  },
 ]);
 
 function App() {

week4/src/components/header/Header.tsx

@@ -0,0 +1,46 @@
+import styled from "@emotion/styled";
+import { useNavigate } from "react-router-dom";
+
+const Header = () => {
+  const navigate = useNavigate();
+
+  const handleTabClick = (path: string) => {
+    navigate(path);
+  };
+  return (
+    <HeaderContainer>
+      <LeftTab>
+        마이페이지
+        <MenuTab onClick={() => handleTabClick("/hobby")}>취미</MenuTab>
+        <MenuTab onClick={() => handleTabClick("/mypage")}>내 정보</MenuTab>
+      </LeftTab>
+      <MenuTab>로그아웃</MenuTab>
+    </HeaderContainer>
+  );
+};
+
+const HeaderContainer = styled.header`
+  width: 100%;
+  height: 7rem;
+  background-color: ${({ theme }) => theme.COLORS.BLUE1};
+  font-size: 2rem;
+  padding: 0 3rem;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  align-items: center;
+`;
+
+const LeftTab = styled.div`
+  display: flex;
+  gap: 3rem;
+`;
+
+const MenuTab = styled.div`
+  cursor: pointer;
+  &:hover {
+    color: ${({ theme }) => theme.COLORS.WHITE};
+  }
+`;
+
+export default Header;

week4/src/pages/HobbyPage.tsx

@@ -0,0 +1,11 @@
+import Header from "../components/header/Header";
+
+const HobbyPage = () => {
+  return (
+    <div>
+      <Header />
+    </div>
+  );
+};
+
+export default HobbyPage;

week4/src/pages/HomePage.tsx

@@ -1,5 +1,10 @@
+import Header from "../components/header/Header";
 const HomePage = () => {
-  return <div>HomePage</div>;
+  return (
+    <div>
+      <Header />
+    </div>
+  );
 };
 
 export default HomePage;

week4/src/pages/Mypage.tsx

@@ -0,0 +1,10 @@
+import Header from "../components/header/Header";
+const MyPage = () => {
+  return (
+    <div>
+      <Header />
+    </div>
+  );
+};
+
+export default MyPage;