From 41e59d1d64bbee309abf76c67932362c28f40ab5 Mon Sep 17 00:00:00 2001
From: MyungJiwoo <1206jiwoo@gmail.com>
Date: Fri, 28 Jun 2024 19:00:40 +0900
Subject: [PATCH] =?UTF-8?q?[#3]=20feat:=20navbar=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=ED=85=8C=EB=A7=88=20=EC=B6=94=EC=B2=9C=20=EB=A7=81=ED=81=AC=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                 | 10 +++++----
 src/components/Navbar.tsx   | 41 ++++++++++++++++++++++---------------
 src/index.tsx               |  2 --
 src/styles/NavbarStyled.tsx | 22 ++++++++++----------
 4 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index efad28c..42b3167 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,18 +4,20 @@ import MainPage from "./pages/MainPage";
 import ThemeRecs from "./pages/ThemeRecs";
 import ThemeRecsQuestions from "./pages/ThemeRecsQuestions";
 import ThemeRecsResult from "./pages/ThemeRecsResult";
+import Navbar from "./components/Navbar";
 
 const App: React.FC = () => {
     return (
         <Router>
+            <Navbar />
             <Routes>
-                <Route path="/" Component={MainPage} />
-                <Route path="/themeRecs" Component={ThemeRecs} />
+                <Route path="/" element={<MainPage />} />
+                <Route path="/themeRecs" element={<ThemeRecs />} />
                 <Route
                     path="/ThemeRecsQuestions"
-                    Component={ThemeRecsQuestions}
+                    element={<ThemeRecsQuestions />}
                 />
-                <Route path="/themeRecsResult" Component={ThemeRecsResult} />
+                <Route path="/themeRecsResult" element={<ThemeRecsResult />} />
             </Routes>
         </Router>
     );
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index aaa2c8c..7438a57 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Container } from "../styles/NavbarStyled";
+import { Container, NavLink } from "../styles/NavbarStyled";
 import logo from "../image/bangpro_logo.png";
 import { BsChatSquareHeartFill } from "react-icons/bs";
 import { BsCollectionFill } from "react-icons/bs";
@@ -11,25 +11,34 @@ const Navbar = () => {
             <div className="logoBox">
                 <img src={logo} alt="logo" className="logo"></img>
             </div>
+
             <div className="navBox">
-                <div className="nav1">
-                    <div>
-                        <BsChatSquareHeartFill />
+                <NavLink to={`/themeRecs`}>
+                    <div className="nav">
+                        <div>
+                            <BsChatSquareHeartFill />
+                        </div>
+                        <p>테마 추천</p>
                     </div>
-                    <p>테마 추천</p>
-                </div>
-                <div className="nav2">
-                    <div>
-                        <BsCollectionFill />
+                </NavLink>
+
+                <NavLink to={`/`}>
+                    <div className="nav">
+                        <div>
+                            <BsCollectionFill />
+                        </div>
+                        <p>테마 정보</p>
                     </div>
-                    <p>테마 정보</p>
-                </div>
-                <div className="nav3">
-                    <div>
-                        <BsPersonFill />
+                </NavLink>
+
+                <NavLink to={`/`}>
+                    <div className="nav">
+                        <div>
+                            <BsPersonFill />
+                        </div>
+                        <p>마이페이지</p>
                     </div>
-                    <p>마이페이지</p>
-                </div>
+                </NavLink>
             </div>
         </Container>
     );
diff --git a/src/index.tsx b/src/index.tsx
index dac7f10..1264558 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import Navbar from "./components/Navbar";
 
 const root = ReactDOM.createRoot(
     document.getElementById("root") as HTMLElement
@@ -12,7 +11,6 @@ const root = ReactDOM.createRoot(
 root.render(
     // strictMode에서는 두번 렌더링 될 수 있으나, 프로덕션빌드 모드에서는 그렇지 않을것
     <React.StrictMode>
-        <Navbar />
         <App />
     </React.StrictMode>
 );
diff --git a/src/styles/NavbarStyled.tsx b/src/styles/NavbarStyled.tsx
index e9fd2c7..e03ecd7 100644
--- a/src/styles/NavbarStyled.tsx
+++ b/src/styles/NavbarStyled.tsx
@@ -32,35 +32,35 @@ export const Container = styled.div`
         justify-content: space-between;
         align-items: center;
     }
+`;
 
-    .navBox > div {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+export const NavLink = styled(Link)`
+    text-decoration: none;
 
-    .navBox > div > div {
+    .nav {
         display: flex;
         justify-content: center;
         align-items: center;
 
+        transition: all 0.3s ease-in-out;
+    }
+
+    .nav > div {
         font-size: 1.4rem;
         margin-right: 0.7rem;
     }
 
-    .navBox > div:hover {
+    .nav:hover {
         cursor: pointer;
         color: white;
+        transform: scale(1.05);
     }
-`;
 
-export const StyledLink = styled(Link)`
-    text-decoration: none;
     &:focus,
-    &:hover,
     &:visited,
     &:link,
     &:active {
         text-decoration: none;
+        color: #3b3b3b;
     }
 `;