Merge pull request #34 from TABA-4th/dev

merge dev branch

src/App.jsx

@@ -1,56 +1,81 @@
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route,Navigate } from 'react-router-dom';
-import { useState } from 'react';
-import Navbar from './components/Navbar';
-import Home from './pages/Home';
-import About from './pages/About';
-import NotFound from './pages/NotFound';
-import WishlistPage from './pages/WishlistPage';
-import Magazine from './pages/Magazine';
-import SignupForm from './pages/Signup';
-import CalendarPage from './pages/CalendarPage';
-import LoginPage from './pages/login';
-import RegisterPage from './pages/register';
-import Register_success from './pages/Register_success';
-import SurveyPage from './pages/Survey';
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Navbar from "./components/Navbar";
+import Home from "./pages/Home";
+import About from "./pages/About";
+import NotFound from "./pages/NotFound";
+import WishlistPage from "./pages/WishlistPage";
+import Magazine from "./pages/Magazine";
+import CalendarPage from "./pages/CalendarPage";
+import LoginPage from "./pages/login";
+import RegisterPage from "./pages/register";
+import Register_success from "./pages/Register_success";
+import SurveyPage from "./pages/SurveyPage";  
+import { AuthProvider } from "./functions/AuthContext";
+import AuthRoute from "./pages/AuthRoute";
+import Empty from "./pages/empty";
 
 function App() {
-
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-
-    // 로그아웃 처리
-    const handleLogout = () => {
-      localStorage.removeItem('accessToken');
-      localStorage.removeItem('refreshToken');
-      setIsLoggedIn(false);
-    };
-
-
   return (
-    <div className='wrap'>
-      <Router>
-        <Navbar isLoggedIn={isLoggedIn} handleLogout={handleLogout} />
-        <div className="main-contents">
-          <div className='content'>
-            <div>
+    <AuthProvider>
+      <div className="wrap">
+        <Router>
+          <Navbar />
+          <div className="main-contents">
+            <div className="content">
               <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path="/about" element={<About />} />
-                <Route path="/calender" element={isLoggedIn ? <CalendarPage/> : <Navigate to="/" />} />
-                <Route path="/magazine" element={isLoggedIn ? <Magazine/> : <Navigate to="/" />} />
-                <Route path="*" element={<NotFound/>} />
-                <Route path="/wishlist" element={isLoggedIn ? <WishlistPage/> : <Navigate to="/" />} />
-                <Route path="/survey" element={<SurveyPage/>} />
-                <Route path="/login" element={<LoginPage setIsLoggedIn={setIsLoggedIn} handleLogout={handleLogout} />} />
-                <Route path="/register" element={<RegisterPage/>}/>
-                <Route path="/register_success" element={<Register_success/>}/>
-              </Routes>
+                <Route
+                  path="/calender"
+                  element={
+                    <AuthRoute>
+                      <CalendarPage />
+                    </AuthRoute>
+                  }
+                />
+                <Route
+                  path="/magazine"
+                  element={
+                    <AuthRoute>
+                      <Magazine />
+                    </AuthRoute>
+                  }
+                />
+                <Route 
+                  path="/survey" 
+                  element={
+                    <AuthRoute>
+                      <SurveyPage />
+                    </AuthRoute>
+                  } 
+                />
+                <Route
+                  path="/wishlist"
+                  element={
+                    <AuthRoute>
+                      <WishlistPage />
+                    </AuthRoute>
+                  }
+                />
+
+
+                <Route path="/login" element={<LoginPage />} />
+                <Route path="/register" element={<RegisterPage />} />
+                <Route
+                  path="/register_success"
+                  element={<Register_success />}
+                />
+                <Route path="/empty" element={ <AuthRoute><Empty/> </AuthRoute>}  />
+                <Route path="*" element={<NotFound />} />
+              </Routes >
+
             </div>
           </div>
-        </div>
-      </Router>
-    </div>
+        </Router>
+      </div>
+    </AuthProvider>
   );
 }
 
-export default App;
+export default App;

src/components/Navbar.css

@@ -1,6 +1,6 @@
 /* Navbar의 기본 스타일 */
 .navbar {
-  color:white;
+  color: white;
   display: flex;
   justify-content: space-between; /* 좌, 우, 중앙 정렬 */
   align-items: center; /* 세로 방향 중앙 정렬 */
@@ -33,7 +33,6 @@
   padding-right: 540px;
 }
 
-
 /* 로고 이미지의 스타일 */
 .logo {
   width: 120px; /* 로고 이미지의 너비 설정 */
@@ -105,7 +104,7 @@ a {
   left: 0;
   width: 100%;
   padding-bottom: 30px;
-  overflow:hidden;
+  overflow: hidden;
 }
 
 .mobile-menu li {
@@ -114,7 +113,7 @@ a {
 
 /* 모바일 화면에서 보여질 메뉴 아이콘의 스타일 */
 .mobile-menu-icon {
-  color:#808080;
+  color: #808080;
   position: fixed;
   top: 5%;
   right: 5%;
@@ -150,4 +149,4 @@ a {
 
 .mobileMenuIcon {
   z-index: 10; /* z-index 증가 */
-}
+}