[노현지] Sprint6

React/panda-market/package.json

@@ -38,7 +38,9 @@
   },
   "devDependencies": {
     "ajv": "^7.2.4",
+    "axios": "^1.7.9",
     "classnames": "^2.5.1",
+    "lodash.debounce": "^4.0.8",
     "react-router-dom": "^6.28.1"
   }
 }

React/panda-market/src/App.jsx

@@ -0,0 +1,26 @@
+import { Outlet, useLocation } from "react-router-dom";
+import Header from "./components/Layout/Header";
+import Footer from "./components/Layout/Footer";
+import styles from "./styles/App.module.css";
+import "./styles/App.font.css";
+import "./styles/App.color.css";
+
+function App() {
+  const location = useLocation();
+
+  return (
+    <>
+      {!["/signin", "/signup"].includes(location.pathname) && (
+        <Header className={styles.nav} />
+      )}
+      <div className={styles.body}>
+        <Outlet />
+      </div>
+      {["/"].includes(location.pathname) && (
+        <Footer className={styles.footer} />
+      )}
+    </>
+  );
+}
+
+export default App;

React/panda-market/src/Main.js

@@ -1,18 +1,22 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import App from "./components/App";
-import HomePage from "./pages/HomePage";
-import ItemPage from "./pages/ItemPage";
-import ItemListPage from "./pages/ItemListPage";
-import RegisterItemPage from "./pages/RegisterItemPage";
+import App from "./App";
+import HomePage from "./pages/HomePage/HomePage";
+import LoginPage from "./pages/LoginPage/LoginPage";
+import CommunityPage from "./pages/CommunityPage/CommunityPage";
+import MarketPage from "./pages/MarketPage/MarketPage";
+import ItemPage from "./pages/ItemPage/ItemPage";
+import RegisterItemPage from "./pages/RegisterItemPage/RegisterItemPage";
 
 function Main() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<App />}>
           <Route index element={<HomePage />} />
+          <Route path="signin" element={<LoginPage />} />
+          <Route path="community" element={<CommunityPage />} />
           <Route path="items">
-            <Route index element={<ItemListPage />} />
+            <Route index element={<MarketPage />} />
             <Route path=":productId" element={<ItemPage />} />
           </Route>
           <Route path="additem" element={<RegisterItemPage />} />

React/panda-market/src/apis/itemApi.js

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+const instance = axios.create({
+  baseURL: "https://panda-market-api.vercel.app",
+});
+
+export async function getItems({ page = "", pageSize = "", order = "" }) {
+  const query = `page=${page}&pageSize=${pageSize}&orderBy=${order}`;
+  try {
+    const res = await instance.get(`/products?${query}`);
+    return res.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}