feat: [#25] layout 추가

FITple-Frontend/src/App.jsx

@@ -1,33 +1,39 @@
 import "./App.css";
-import Navbar from "./components/Navbar/Navbar";
 import { Routes } from "react-router-dom";
 import { Route } from "react-router-dom";
 import LoginPage from "./pages/LoginPage/LoginPage";
 import SignupPage from "./pages/SignupPage/SignupPage";
 import ClothdetailPage from "./pages/ClothdetailPage/ClothdetailPage";
 import ClothmainPage from "./pages/ClothmainPage/ClothmainPage";
 import UserInfoPage from "./pages/UserInfoPage/UserInfoPage";
-import { useLocation } from "react-router-dom";
 import ProfilePage from "./pages/ProfilePage/ProfilePage";
 import RecomMainPage from "./pages/RecomMainPage/RecomMainPage";
+import RecomAllPage from "./pages/RecomAllPage/RecomAllPage";
+import RecomUserFeedPage from "./pages/RecomUserFeedPage/RecomUserFeedPage";
+// import RecomAllPage from "./pages/RecomAllPage/RecomAllPage";
+
+import LayoutNonNav from "./layout/LayoutNonNav";
+import Layout from "./layout/Layout";
 function App() {
-  const location = useLocation();
-  console.log("Current path:", location.pathname);
-  // Navbar를 제외할 경로 목록
-  const excludeNavbarPaths = ["/", "/SignUp", "/user"];
   return (
     <>
-      {/* 특정 경로에서만 Navbar 렌더링 */}
-      {!excludeNavbarPaths.includes(location.pathname) && <Navbar />}
-      {/* 각자 route 설정하기 */}
       <Routes>
-        <Route path="/" element={<LoginPage />} />
-        <Route path="/signup" element={<SignupPage />} />
-        <Route path="/user" element={<UserInfoPage />} />
-        <Route path="/cloth" element={<ClothmainPage />} />
-        <Route path="/detail" element={<ClothdetailPage />} />
-        <Route path="/profile" element={<ProfilePage />} />
-        <Route path="/recommend" element={<RecomMainPage />} />
+        {/* Navbar 없는 layout */}
+        <Route element={<LayoutNonNav />}>
+          <Route path="/" element={<LoginPage />} />
+          <Route path="/signup" element={<SignupPage />} />
+          <Route path="/user" element={<UserInfoPage />} />
+        </Route>
+        {/* Navbar 있는 layout */}
+        <Route element={<Layout />}>
+          <Route path="/cloth" element={<ClothmainPage />} />
+          <Route path="/detail" element={<ClothdetailPage />} />
+          <Route path="/profile" element={<ProfilePage />} />
+          <Route path="/recommend" element={<RecomMainPage />} />
+          <Route path="/recommendall" element={<RecomAllPage />} />
+          <Route path="/recommendcloth" element={<RecomAllPage />} />
+          <Route path="/recommendfeed" element={<RecomUserFeedPage />} />
+        </Route>
       </Routes>
     </>
   );

FITple-Frontend/src/components/Navbar/Navbar.jsx

@@ -29,9 +29,9 @@ const Navbar = () => {
           {/* 메뉴 */}
           <MenuBox>
             <MenuItem to="/cloth">옷장</MenuItem>
-            <MenuItem>추천</MenuItem>
+            <MenuItem to="/recommend">추천</MenuItem>
             <MenuItem>검색</MenuItem>
-            <MenuItem>프로필</MenuItem>
+            <MenuItem to="/profile">프로필</MenuItem>
           </MenuBox>
         </MainBox>
         {/* 오른쪽 검색 영역 */}
@@ -46,5 +46,4 @@ const Navbar = () => {
   );
 };
 
-
 export default Navbar;

FITple-Frontend/src/layout/Layout.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import Navbar from "../components/Navbar/Navbar";
+
+const Layout = () => {
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;

FITple-Frontend/src/layout/LayoutNonNav.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+
+const LayoutNonNav = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+};
+
+export default LayoutNonNav;