Merge pull request #126 from BaeZzi813/React-양재영-sprint7

[양재영] sprint7

Author: kiJu2

vite-project/package-lock.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.11.0",
+    "dayjs": "^1.11.18",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-responsive": "^10.0.1",
@@ -22,10 +23,13 @@
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
     "vite": "^6.3.5"
   }
 }

vite-project/package.json

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

vite-project/postcss.config.js

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import Nav from "./components/Nav";
 import ItemsPage from "./pages/ItemsPage/ItemsPage";
 import AddItemPage from "./pages/AddItemPage/AddItemPage";
+import ItemDetailPage from "./pages/ItemDetailPage/ItemDetailPage";
 
 function App() {
   return (
@@ -11,6 +12,7 @@ function App() {
         <Route path="/" element={<Navigate to="/items" />} />
         <Route path="/items" element={<ItemsPage />} />
         <Route path="/additem" element={<AddItemPage />} />
+        <Route path="/items/:productId" element={<ItemDetailPage />} />
       </Routes>
     </BrowserRouter>
   );

vite-project/src/App.jsx

@@ -14,3 +14,34 @@ export async function getProducts({
     throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
   }
 }
+
+export async function getProductDetails(productId) {
+  try {
+    const response = await instance.get(`/products/${productId}`);
+    return response.data;
+  } catch (error) {
+    throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
+  }
+}
+
+export async function getProductComments(productId, limit = 5, cursor) {
+  try {
+    const params = { limit };
+    if (cursor) params.cursor = cursor;
+    const response = await instance.get(`/products/${productId}/comments`, {
+      params,
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
+  }
+}
+
+export async function postProducts(body) {
+  try {
+    const response = await instance.post("/products/", body);
+    return response.data;
+  } catch (error) {
+    throw new Error(`상품을 등록하는데 실패했습니다 : ${error.message}`);
+  }
+}

vite-project/src/api.jsx

@@ -9,23 +9,26 @@ const instance = axios.create({
   },
 });
 
+export const ERROR_STATUSCODE_MESSAGES = {
+  401: "인증이 필요합니다. 로그인 해주세요.",
+  403: "접근 권한이 없습니다.",
+  404: "요청하신 리소스를 찾을 수 없습니다.",
+  500: "서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.",
+};
+
 instance.interceptors.response.use(
   (response) => {
     return response;
   },
   (error) => {
     if (error.response) {
       const status = error.response.status;
-
-      if (status === 401) {
-        alert("인증이 필요합니다. 로그인 해주세요.");
-      } else if (status === 500) {
-        alert("서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
-      }
+      alert(
+        ERROR_STATUSCODE_MESSAGES[status] || "알 수 없는 오류가 발생했습니다."
+      );
     } else {
       alert("네트워크 오류가 발생했습니다.");
     }
-
     return Promise.reject(error);
   }
 );