[남기연] sprint7

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "clsx": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.28.0",
@@ -35,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

src/App.js

@@ -1,20 +1,23 @@
 import "./styles/App.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Header from "./components/Layout/Header";
+import ItemDetailPage from "./pages/ItemDetailPage/ItemDetailPage.jsx";
 import MarketPage from "./pages/MarketPage/MarketPage";
 import AddItemPage from "./pages/AddItemPage/AddItemPage.jsx";
+import SamplePage from "./pages/SamplePage/SamplePage";
+import MainPage from "./pages/Main/MainPage.jsx";
 
 function App() {
   return (
     <BrowserRouter>
-      <Header />
-
-      <div>
-        <Routes>
+      <Routes>
+        <Route index element={<MainPage />} />
+        <Route path="items">
           <Route index element={<MarketPage />} />
-          <Route path="additem" element={<AddItemPage />} />
-        </Routes>
-      </div>
+          <Route path=":id" element={<ItemDetailPage />} />
+        </Route>
+        <Route path="additem" element={<AddItemPage />} />
+        <Route path="sample" element={<SamplePage />} />
+      </Routes>
     </BrowserRouter>
   );
 }

src/api/ItemApi.js

@@ -1,8 +1,14 @@
-export async function getProductList({ page = 1, pageSize = 10, orderBy = "recent" }) {
+export async function getProductList({
+  page = 1,
+  pageSize = 10,
+  orderBy = "recent",
+}) {
   const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}`;
 
   try {
-    const response = await fetch(`https://panda-market-api.vercel.app/products?${query}`);
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products?${query}`
+    );
     if (!response.ok) {
       throw new Error(`error : ${response.status}`);
     }
@@ -14,9 +20,11 @@ export async function getProductList({ page = 1, pageSize = 10, orderBy = "recen
   }
 }
 
-export async function getProduct({ id = 1 }) {
+export async function getProduct(id) {
   try {
-    const response = await fetch(`https://panda-market-api.vercel.app/products/${id}`);
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products/${id}`
+    );
     if (!response.ok) {
       throw new Error(`error : ${response.status}`);
     }
@@ -27,3 +35,19 @@ export async function getProduct({ id = 1 }) {
     throw error;
   }
 }
+
+export async function getProductComment(id) {
+  try {
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products/${id}/comments?limit=3`
+    );
+    if (!response.ok) {
+      throw new Error(`error : ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.log("상품ID의 Comments 데이터를 불러오는데 실패했습니다.", error);
+    throw error;
+  }
+}

src/assets/css/global.css

@@ -0,0 +1,34 @@
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css");
+
+:root {
+  /* Typography */
+  --font-family: "Pretendard Variable", Pretendard, -apple-system,
+    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
+    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+
+  --color-primary-100: #3692ff;
+  --color-primary-200: #1967d6;
+  --color-primary-300: #1251aa;
+
+  --color-secondary-900: #111827;
+  --color-secondary-800: #1f2937;
+  --color-secondary-700: #374151;
+  --color-secondary-600: #4b5563;
+  --color-secondary-500: #6b7280;
+  --color-secondary-400: #9ca3af;
+  --color-secondary-200: #e5e7eb;
+  --color-secondary-100: #f3f4f6;
+  --color-secondary-50: #f9fafb;
+
+  --color-error: #f74747;
+}
+
+html {
+  font-size: 62.5%; /* 1rem = 10px */
+}
+
+body {
+  font-family: var(--font-family);
+  min-width: 37.5rem;
+}

src/assets/css/reset.css

@@ -0,0 +1,79 @@
+/* prettier-ignore */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, input, textarea {
+  margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+  box-sizing: border-box;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+  box-sizing: border-box;
+}
+body {
+  line-height: 1;
+}
+dl,
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+button {
+  all: unset;
+  cursor: pointer;
+}
+textarea {
+  resize: none;
+}
+a,
+a:link,
+a:visited,
+a:hover,
+a:active {
+  color: inherit;
+  text-decoration: none;
+}
+img {
+  vertical-align: middle;
+}