React 강석준 sprint6

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Environment variables
+.env

package.json

@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.6",
+    "axios": "^1.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^7.1.3",
     "react-router-dom": "^7.1.3",
     "tailwindcss": "^4.0.6"
   },

src/App.jsx

@@ -9,20 +9,23 @@ import AddItem from "@/pages/AddItem.jsx";
 import Boards from "@/pages/Boards";
 import Policy from "@/pages/Policy.jsx";
 import Faq from "@/pages/Faq.jsx";
+import Layout from "./components/MainLayout";
 
 function App() {
   return (
     <StrictMode>
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<Home />}></Route>
-          <Route path="/login" element={<Login />}></Route>
-          <Route path="/signup" element={<Signup />}></Route>
-          <Route path="/items" element={<Items />}></Route>
-          <Route path="/additem" element={<AddItem />}></Route>
-          <Route path="/privacy" element={<Policy />}></Route>
-          <Route path="/faq" element={<Faq />}></Route>
-          <Route path="/boards" element={<Boards />}></Route>
+          <Route element={<Layout />}>
+            <Route path="/" element={<Home />} />
+            <Route path="/items" element={<Items />} />
+            <Route path="/additem" element={<AddItem />} />
+            <Route path="/boards" element={<Boards />} />
+          </Route>
+          <Route path="/login" element={<Login />} />
+          <Route path="/signup" element={<Signup />} />
+          <Route path="/privacy" element={<Policy />} />
+          <Route path="/faq" element={<Faq />} />
         </Routes>
       </BrowserRouter>
     </StrictMode>

src/api/api.jsx

@@ -1,25 +1,41 @@
+import instance from "@/api/axiosInstance";
+
+const PRODUCT_ENDPOINT = `/products`;
+const IMAGE_ENDPOINT = `/images/upload`;
+
 export const getItems = async (
   page,
   pageSize,
   orderBy = "recent",
   keyword = null,
 ) => {
-  const baseURL = "https://panda-market-api.vercel.app/products/";
-  const params = new URLSearchParams({
+  const params = {
     page: page,
     pageSize: pageSize,
     orderBy: orderBy,
-  });
+  };
 
   if (keyword) {
-    params.append("keyword", keyword);
+    params[keyword] = keyword;
   }
 
-  const requrl = `${baseURL}?${params.toString()}`;
-
-  const response = await fetch(requrl, {
-    method: "GET",
+  const response = await instance.get(PRODUCT_ENDPOINT, {
+    params: params,
   });
-  const data = await response.json();
+
+  const data = response.data;
+  return data;
+};
+
+export const postItem = async (item) => {
+  const response = await instance.post(PRODUCT_ENDPOINT, item);
+  const data = response.data;
+  return data;
+};
+
+export const uploadImage = async (image) => {
+  const response = await instance.post(IMAGE_ENDPOINT, { image });
+  const data = response.data;
+
   return data;
 };

src/api/axiosInstance.jsx

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+const axiosInstance = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default axiosInstance;