[#3] feat: navbar에서 테마 추천 링크 연결

Skhuthon · Jun 28, 2024 · 41e59d1 · 41e59d1
1 parent 586f576
commit 41e59d1
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
     }
 `;