codeit-bootcamp-frontend · GANGYIKIM · Sep 19, 2024 · Sep 7, 2024 · Sep 10, 2024 · Sep 11, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/Pretendard-Regular.ttf b/public/Pretendard-Regular.ttf
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/free-icon-no-pictures-3875148.png b/public/images/free-icon-no-pictures-3875148.png
diff --git a/public/images/heart-icon.svg b/public/images/heart-icon.svg
diff --git a/public/images/panda-logo.svg b/public/images/panda-logo.svg
diff --git a/public/images/user-icon.svg b/public/images/user-icon.svg
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <div id="root">
+
+    </div>
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/api.js b/src/api.js
@@ -0,0 +1,31 @@
+/**
+ * api 호출 await 필요
+ * @param {*} page 페이지 번호 | default 1
+ * @param {*} pageSize 페이지 당 상품 수 | default 10
+ * @param {*} orderBy 정렬 기준 favorite, recent | default recent
+ * @param {*} keyword 검색 키워드
+ * @returns
+ */
+export async function getItems(
+  page = 1,
+  pageSize = 10,
+  orderBy = "recent",
+  keyword
+) {
+  const searchQuery = keyword ? `keyword=${keyword}` : "";
+  const response = await fetch(
+    `https://panda-market-api.vercel.app/products?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&${searchQuery}`
+  );
+  const body = await response.json();
+  return body;
+}
+
+// // 1페이지 10개 최신순 줘
+// const 1페이지10개 = getItems(1,10,"recent")
+// const 2페이지10개 = getItems(2,10,"recent")
+// const 3페이지10개 = getItems(3,10,"recent")
+
+// // 최신순으로 1페이지 1개 줘
+// const 1페이지10개 = getItems(1,10,"favorite")
+// const 2페이지10개 = getItems(2,10,"favorite")
+// const 3페이지10개 = getItems(3,10,"favorite")
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,12 @@
+import Nav from "./Nav";
+
+function App({ children }) {
+  return (
+    <div>
+      <Nav></Nav>
+      <div>{children}</div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/components/BestList.js b/src/components/BestList.js
@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { getItems } from "../api";
+import Card from "./Card";
+import style from "./BestList.module.css";
+
+function BestList() {
+  const [cardList, setCardList] = useState([]);
+
+  const fetchData = async function () {
+    const data = await getItems(1, 4, "favorite");
+    setCardList(data.list);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <div className={style.wrapper}>
+      <div className={style.bestListBlock}>
+        <div className={style.label}>베스트 상품</div>
+        <div className={style.bestList}>
+          {cardList.map((item) => {
+            return <Card key={item.id} item={item} imgSize={"282px"}></Card>;
+          })}
-          {cardList.map((item) => {
-            return <Card key={item.id} item={item} imgSize={"282px"}></Card>;
-          })}
+          {cardList.map((item) => (
+            <Card key={item.id} item={item} imgSize={"282px"}></Card>
+          ))}
-          {cardList.map((item) => {
-            return <Card key={item.id} item={item} imgSize={"282px"}></Card>;
-          })}
+          {cardList.map((item) => (
+            <Card key={item.id} item={item} imgSize={"282px"}></Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default BestList;
diff --git a/src/components/BestList.module.css b/src/components/BestList.module.css
@@ -0,0 +1,31 @@
+@font-face {
+  font-family: "Pretendard Variable";
+  src: url("../../public/Pretendard-Regular.ttf");
+}
+
+.label {
+  font-family: "Pretendard Variable";
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 32px;
+  text-align: left;
+  color: #111827;
+}
+
+.bestList {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+}
+
+.bestListBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: fit-content;
+}
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+}