[유선향]-sprint8

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",
+    "@types/styled-components": "^5.1.34",
     "axios": "^1.7.9",
     "firebase": "^11.1.0",
     "lodash.throttle": "^4.1.1",
@@ -40,5 +41,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "typescript": "^4.9.5"
   }
 }

src/Main.jsx

@@ -1,53 +1,11 @@
 import { Route, BrowserRouter, Routes } from "react-router-dom";
-import { createGlobalStyle } from "styled-components";
+import GlobalStyle from "./style/globalStyle.js";
 //
 import LandingPage from "./pages/LandingPage/LandingPage.jsx";
 import App from "./App.js";
-import HomePage from "./pages/HomePage/HomePage.jsx";
-import AddItem from "./pages/AddItem/AddItem.jsx";
-import Product from "./pages/ProductPage/Product.jsx";
-import Test from "./components/TestPage.jsx";
-//
-//
-const GlobalStyle = createGlobalStyle`
-  * {
-    box-sizing: border-box;
-  }
-  body {
-    font-family: 'Pretendard', sans-serif;
-    font-display: swap;
-    margin: 0; 
-    padding: 0;
-  }
-  html {
-  margin: 0; 
-  padding: 0;
-  }
-  a {
-    text-decoration: none; 
-    color: #ffffff;
-  }
-  p{
-    margin: 0px;
-  }
-  @font-face {
-  font-family: 'Pretendard';
-  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff2') format('woff2');
-  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
-  font-display: swap;
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-font-family: "Pretendard";
-src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Bold.woff2') format('woff2');
-src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Bold.woff') format('woff');
-  font-display: swap;
-  font-weight: 600;
-  font-style: normal;
-}
-`;
+import ItemsPage from "./pages/ItemsPage/ItemsPage.tsx";
+import AddItem from "./pages/AddItem/AddItem.tsx";
+import Product from "./pages/ProductPage/Product.tsx";
 //
 function Main() {
   return (
@@ -57,8 +15,7 @@ function Main() {
         <Routes>
           <Route path="/" element={<LandingPage />} />
           <Route element={<App />}>
-            <Route path="/test" element={<Test />} />
-            <Route path="/items" element={<HomePage />} />
+            <Route path="/items" element={<ItemsPage />} />
             <Route path="/items/:productId" element={<Product />} />
             <Route path="/additem" element={<AddItem />} />
           </Route>

src/api/comment.api.jsx → src/api/comment.api.tsx

@@ -1,17 +1,17 @@
 import axios from "axios";
 const BASE_URL = "https://panda-market-api.vercel.app";
 
-export async function getProductComments(productId, limit = 3) {
+export async function getProductComments({ productId }: Params, limit = 3) {
   try {
     const res = await axios.get(
       `${BASE_URL}/products/${productId}/comments?limit=${limit}`
     );
     if (!res) {
       throw new Error("리뷰 불러오기 실패");
     }
-    return res.data;
+    const data: Comment[] = res.data.list;
+    return data;
   } catch (error) {
     console.error(error);
-    return null;
   }
 }

src/api/product.api.tsx

@@ -0,0 +1,60 @@
+import axios from "axios";
+const BASE_URL = "https://panda-market-api.vercel.app";
+//
+
+export interface ResponseData extends Product {
+  createdAt: string;
+  favoriteCount: number;
+  ownerNickname: string;
+  ownerId: number;
+  id: number;
+  isFavorite: boolean;
+}
+export type Item = Omit<ResponseData, "ownernickname" | "isFavorite">;
+
+export async function getProducts({
+  device = "desktop",
+  page = 1,
+  selectedOrder = "최신순",
+}) {
+  const order = selectedOrder === "최신순" ? "recent" : "favorite";
+  const pageSize = device === "mobile" ? 4 : device === "tablet" ? 6 : 10;
+  const query = `?orderBy=${order}&page=${page}&pageSize=${pageSize}`;
+
+  try {
+    const res = await axios.get(`${BASE_URL}/products${query}`);
+    if (!res) throw new Error("상품 불러오기 실패");
+    const data: Item[] = res.data.list;
+    return data;
+  } catch (error) {
+    console.error(error, "상품 불러오기 실패");
+  }
+}
+
+export async function bestProducts({ device }: Device) {
+  const pageSize = device === "mobile" ? 1 : device === "tablet" ? 2 : 4;
+  try {
+    const res = await axios.get(
+      `${BASE_URL}/products?orderBy=favorite&pageSize=${pageSize}`
+    );
+    if (!res) throw new Error("베스트상품 api 실패");
+    const data: Item[] = res.data.list;
+    return data;
+  } catch (error) {
+    console.error(
+      error,
+      "베스트 상품을 불러오지 못했습니다. 다시 시도해주세요"
+    );
+  }
+}
+
+export async function getProductInfo({ productId }: Params) {
+  try {
+    const response = await axios.get(`${BASE_URL}/products/${productId}`);
+    if (!response) throw new Error("제품정보 get api 실패");
+    const data: ResponseData = response.data;
+    return data;
+  } catch (error) {
+    console.error(error, "제품정보 api 실패");
+  }
+}