[차경훈] sprint7

react/my-react-app/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.9.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "styled-components": "^6.1.18"

react/my-react-app/src/App.jsx

@@ -1,48 +1,35 @@
 import React from "react";
-import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
-import Header from "./components/Header";
-import Footer from "./components/Footer";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Layout from "./components/Layout";
 import HomePage from "./pages/HomePage";
 import SigninPage from "./pages/SigninPage";
 import SignupPage from "./pages/SignupPage";
-import ItemsPage from "./pages/ItemsPage";
+import ProductsPage from "./pages/ProductsPage";
 import AddItemPage from "./pages/AddItemPage";
 import PrivacyPage from "./pages/PrivacyPage";
 import FaqPage from "./pages/FaqPage";
 import MyProfilePage from "./pages/MyProfilePage";
+import ProductDetailPage from "./pages/ProductDetailPage";
 
-function AppContent() {
-  const location = useLocation();
-  const hideFooterRoutes = ["/additem", "/signin", "/signup"];
-  const hideHeaderRoutes = ["/signin", "/signup"];
-
-  // 현재 라우트에 따라 헤더 표시 여부 결정
-  const shouldShowHeader = !hideHeaderRoutes.includes(location.pathname);
-  // 현재 라우트에 따라 푸터 표시 여부 결정
-  const shouldShowFooter = !hideFooterRoutes.includes(location.pathname);
-
+function App() {
   return (
-    <>
-      {shouldShowHeader && <Header />}
+    <BrowserRouter>
       <Routes>
-        <Route path="/" element={<HomePage />} />
+        {/* Auth routes without layout */}
         <Route path="/signin" element={<SigninPage />} />
         <Route path="/signup" element={<SignupPage />} />
-        <Route path="/items" element={<ItemsPage />} />
-        <Route path="/additem" element={<AddItemPage />} />
-        <Route path="/privacy" element={<PrivacyPage />} />
-        <Route path="/faq" element={<FaqPage />} />
-        <Route path="/myprofile" element={<MyProfilePage />} />
-      </Routes>
-      {shouldShowFooter && <Footer />}
-    </>
-  );
-}
 
-function App() {
-  return (
-    <BrowserRouter>
-      <AppContent />
+        {/* Main routes with layout */}
+        <Route element={<Layout />}>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/items" element={<ProductsPage />} />
+          <Route path="/items/:productId" element={<ProductDetailPage />} />
+          <Route path="/additem" element={<AddItemPage />} />
+          <Route path="/privacy" element={<PrivacyPage />} />
+          <Route path="/faq" element={<FaqPage />} />
+          <Route path="/myprofile" element={<MyProfilePage />} />
+        </Route>
+      </Routes>
     </BrowserRouter>
   );
 }