navBar style change (#15)

Author: Daniel-Na118

src/components/BottomNav/BottomNav.css

@@ -0,0 +1,43 @@
+import { FaComment, FaPlus, FaSearch, FaUser } from 'react-icons/fa';
+import { Link, useLocation } from 'react-router-dom';
+import './navBar.css';
+
+const NavBar = () => {
+  const location = useLocation();
+
+  const navLinks = [
+    { path: '/search-room', icon: <FaSearch />, label: 'roomSearch' },
+    { path: '/create-room', icon: <FaPlus />, label: 'roomCreate' },
+    { path: '/my-chat', icon: <FaComment />, label: 'myChat' },
+    { path: '/my-page', icon: <FaUser />, label: 'myPage' },
+  ];
+
+  return (
+    <nav className="navBar">
+      <div className="logo">
+        <Link to="/">
+          <img src="/snuxi-logo.png" alt="SNUXI Logo" />
+        </Link>
+      </div>
+      <div className="nav-links">
+        {navLinks.map(({ path, icon, label }) => (
+          <Link
+            key={path}
+            to={path}
+            className={`nav-item ${location.pathname === path ? 'active' : ''}`}
+          >
+            <div className="icon">{icon}</div>
+            <div className="label">{label}</div>
+          </Link>
+        ))}
+      </div>
+      <div className="login">
+        <Link to="/login" className="login-button">
+          로그인
+        </Link>
+      </div>
+    </nav>
+  );
+};
+
+export default NavBar;

src/components/BottomNav/index.tsx

@@ -0,0 +1,60 @@
+.navBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+  width: 100%;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.logo {
+  width: 80px;
+}
+
+.logo img {
+  height: 40px;
+}
+
+.nav-links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  flex-grow: 1;
+}
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: #333;
+}
+
+.nav-item.active {
+  color: #007bff;
+}
+
+.icon {
+  font-size: 24px;
+}
+
+.label {
+  font-size: 12px;
+}
+
+.login {
+  width: 80px;
+  text-align: right;
+}
+
+.login-button {
+  color: #333;
+  text-decoration: none;
+}

src/components/NavBar/index.tsx

@@ -1,10 +1,3 @@
-.main-layout {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-.main-content {
-  flex-grow: 1;
-  overflow-y: auto;
+.main-container {
+  padding-top: 60px; /* Same as the height of the navBar */
 }

src/components/NavBar/navBar.css

@@ -1,5 +1,5 @@
 import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom';
-import BottomNav from '../components/BottomNav';
+import NavBar from '../components/NavBar';
 import CreateRoom from '../pages/CreateRoom';
 import Login from '../pages/Login';
 import MyChat from '../pages/MyChat';
@@ -9,12 +9,12 @@ import './MainLayout.css';
 
 const MainLayout = () => {
   return (
-    <div className="main-layout">
-      <div className="main-content">
+    <>
+      <NavBar />
+      <div className="main-container">
         <Outlet />
       </div>
-      <BottomNav />
-    </div>
+    </>
   );
 };