Merge pull request #211 from Jaeheon96/React-손재헌-sprint7

[손재헌] sprint7

package.json

@@ -11,6 +11,7 @@
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.24.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.11",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/Main.js

@@ -3,14 +3,18 @@ import HomePage from "./pages/HomePage";
 import ItemsPage from "./pages/ItemsPage";
 import AddItemPage from "./pages/AddItemPage";
 import App from "./components/App";
+import ItemPage from "./pages/ItemPage";
 
 function Main() {
     return (
     <BrowserRouter>
         <Routes>
             <Route path="/" element={<App />}>
                 <Route index element={<HomePage />} />
-                <Route path="items" element={<ItemsPage />} />
+                <Route path="items">
+                    <Route index element={<ItemsPage />} />
+                    <Route path=":itemId" element={<ItemPage />} />
+                </Route>
                 <Route path="additem" element={<AddItemPage />} />
             </Route>
         </Routes>

src/api/api.js

@@ -1,6 +1,6 @@
 const BASE_URL = "https://panda-market-api.vercel.app";
 
-async function getProducts({ page = 1, pageSize = 10, orderBy = '', keyword = '' }) {
+async function getProducts({ page = 1, pageSize, orderBy = '', keyword = '' }) {
 
     const query = `?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`
     const response = await fetch(`${BASE_URL}/products` + query);
@@ -22,4 +22,23 @@ async function postProducts(formData) {
     return result;
 }
 
-export  { getProducts, postProducts };
+async function getProductById(id) {
+
+    const response = await fetch(`${BASE_URL}/products/${id}`)
+    if (!response.ok) throw new Error("데이터를 불러오는데 실패했습니다.");
+    const result = await response.json();
+
+    return result;
+}
+
+async function getComments({ productId, limit = 10, cursor = 0 }) {
+
+    const query = `/products/${productId}/comments?limit=${limit}&cursor=${cursor}`;
+    const response = await fetch(`${BASE_URL}${query}`);
+    if (!response.ok) throw new Error("데이터를 불러오는데 실패했습니다.");
+    const result = await response.json();
+
+    return result;
+}
+
+export  { getProducts, postProducts, getProductById, getComments };

src/components/ErrorScreen.js

@@ -0,0 +1,16 @@
+import styles from "./ErrorScreen.module.css";
+import pandaIsConfused from "../assets/Img_inquiry_empty.png"
+
+function ErrorScreen({ error }) {
+
+    return (
+        <div className={styles.errorComponent}>
+            <img src={pandaIsConfused} alt="열일하는 판다" />
+            {error.message
+                ? <span className={styles.errorMessage}>{error.message}</span>
+                : <span className={styles.errorMessage}>요청을 수행하는데 오류가 발생했습니다.</span>}
+        </div>
+    )
+}
+
+export default ErrorScreen;

src/components/ErrorScreen.module.css

@@ -0,0 +1,14 @@
+.errorComponent {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1.5rem;
+
+    .errorMessage {
+        font-size: 1rem;
+        font-weight: 400;
+        color: var(--gray400);
+    }
+}