codeit-bootcamp-frontend · pyeonh8 · Oct 10, 2023 · Oct 10, 2023 · Oct 10, 2023 · Oct 10, 2023
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": "^7.6.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,18 @@
 <!DOCTYPE html>
-<html lang="en">
-  <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.
+<html lang="ko">
 
-      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.
+<head>
+  <meta charset="utf-8" />
+  <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" /> -->
+  <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+  <title>판다마켓</title>
+</head>
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+<body>
+  <div id="root"></div>
+</body>
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
+</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
@@ -1,25 +1,18 @@
-import logo from './logo.svg';
-import './App.css';
+import Nav from "./components/Nav";
+import BestProductList  from "./components/BestProductList";
+import ProductList from "./components/ProductList";
+import './components/css/App.css'
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Nav />
+      <div className="Products__warp">
+        <BestProductList/>
+        <ProductList/>
+      </div>
+    </>
   );
 }
 
-export default App;
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Main.jsx b/src/Main.jsx
@@ -0,0 +1,18 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import App from "./App";
+import "../src/components/css/reset.css";
+import "../src/components/css/common.css";
+import "../src/components/css/font.css";
+
+function Main() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />} />
+        <Route path="/items" element={<App />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default Main;
diff --git a/src/api.jsx b/src/api.jsx
@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+
+export async function getProducts({ page = 1, pageSize = 1 } = {}) {
+  const params = new URLSearchParams();
+  if (page) params.append("page", page);
+  if (page && pageSize) params.append("pageSize", pageSize);
+  const response = await fetch(`https://panda-market-api.vercel.app/products?${params}`);
+
+  if (!response.ok) {
+    throw new Error("상품을 불러오는데 실패했습니다.");
+  }
+  const body = await response.json();
+  // console.log("API 응답:", body);
+  return body;
+}
+
+export function useProductData({ page, pageSize, isPageinated = true }) {
+  const [products, setProducts] = useState([]);
+  const [totalPages, setTotalPages] = useState(5); //전체 페이지 수 관리
+
+  useEffect(() => {
+    if (!pageSize) return; // pageSize가 없으면 API를 아예 호출하지 않게 차단한다.
+    const fetchData = async () => {
+      try {
+        const query = isPageinated ? { page, pageSize } : { pageSize };
+        const data = await getProducts(query);
+        setProducts(data.list);
+        console.log("getProducts 결과:", data.list);
+
+        if (isPageinated) {
+          if (data.totalPages) {
+            setTotalPages(data.totalPages);
+          } else if (data.totalCount) {
+            setTotalPages(Math.ceil(data.totalCount / pageSize));
+          }
+        }
+      } catch (error) {
+        console.error("상품 불러오기 실패", error);
+      }
+    };
+
+    fetchData();
+  }, [page, pageSize, isPageinated]);
+
+  return isPageinated ? { products, totalPages } : { products };
+}
diff --git a/src/assets/arrow_down.png b/src/assets/arrow_down.png
diff --git a/src/assets/arrow_left.png b/src/assets/arrow_left.png
diff --git a/src/assets/arrow_right.png b/src/assets/arrow_right.png
diff --git a/src/assets/ic_heart.png b/src/assets/ic_heart.png
diff --git a/src/assets/ic_search.png b/src/assets/ic_search.png
diff --git a/src/assets/ic_sort.png b/src/assets/ic_sort.png
diff --git a/src/assets/img_logo.png b/src/assets/img_logo.png
diff --git a/src/assets/img_logo_m.png b/src/assets/img_logo_m.png
diff --git a/src/assets/profile.png b/src/assets/profile.png
diff --git a/src/components/BestProductList.jsx b/src/components/BestProductList.jsx
@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+import { useProductData } from "../api.jsx";
+import { pageSizebyScreenWidth } from "./pageSizebyScreenWidth.jsx";
+import ProductDisplay from "./ProductDisplay.jsx";
+import "./css/ProductList.css";
+
+function BestProductList() {
+  const [visibleCount, setVisibleCount] = useState(1); // 보여줄 상품 개수
+
+  // api 불러오기, 20개 불러온 뒤 반응형에 따라 자름
+  const { products } = useProductData({ pageSize: 20, isPageinated: false });
+
+  const sortedItems = [...products].sort((a, b) => b.favoriteCount - a.favoriteCount).slice(0, visibleCount);
+
+  // 브라우저 크기에 따라 상품 개수 변경
+  useEffect(() => {
+    const width = window.innerWidth;
+    const sizes = pageSizebyScreenWidth(width);
+    setVisibleCount(sizes.best);
+  }, []);
+
+  return (
+    <div>
+      <div className="Products__header mb16">
+        <h1>베스트 상품</h1>
+      </div>
+      <ProductDisplay sortedItems={sortedItems} bestList={true} />
+    </div>
+  );
+}
+
+export default BestProductList;
diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
@@ -0,0 +1,46 @@
+import { NavLink } from "react-router-dom";
+import mobileLogeImg from "../assets/img_logo_m.png";
+import logeImg from "../assets/img_logo.png";
+import ProfileImg from "../assets/profile.png";
+import "./css/Nav.css";
+
+function getLinkStyle({ isActive }) {
+  return {
+    color: isActive ? "#3692FF" : "#333",
+  };
+}
+
+function Nav() {
+  return (
+    <header className="header">
+      <div className="header__logo">
+        <a href="/" aria-label="홈으로 이동">
+          <img
+            className="header__logo-img"
+            src={mobileLogeImg}
+            srcSet={`${mobileLogeImg} 103w, ${logeImg} 153w`}
+            sizes="(max-width: 767px) 103px, 153px"
+            alt="판다마켓"
+          />
+        </a>
+      </div>
+      <ul className="nav">
+        <li>
+          <NavLink to="/" style={getLinkStyle}>
+            자유게시판
+          </NavLink>
+        </li>
+        <li>
+          <NavLink to="/items" style={getLinkStyle}>
+            중고마켓
+          </NavLink>
+        </li>
+      </ul>
+      <div className="profile">
+        <img src={ProfileImg} alt="프로필" />
+      </div>
+    </header>
+  );
+}
+
+export default Nav;
diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx
@@ -0,0 +1,41 @@
+import "../components/css/Pagination.css";
+import preve from "../assets/arrow_left.png";
+import next from "../assets/arrow_right.png";
+
+function Pagination({ currentPage, totalPages, setPage }) {
+  //페이지 변경
+  const handlePageChange = (newPage) => {
+    setPage(newPage);
+  };
+
+  // console.log("현재페이지 : ", currentPage);
+  // console.log("총 페이지 : ", totalPages);
+
+  const pageNumbers = []; //버튼에 쓸 숫자가 들어간다.
+
+  const start = currentPage - 2 < 1 ? 1 : currentPage - 2;
+  const end = start + 4 > totalPages ? totalPages : start + 4;
+
+  for (let i = start; i <= end; i++) {
+    pageNumbers.push(i);
+  }
+
+  return (
+    <div className="pagination ">
+      {/* {currentPage > 1 && } */}
+      <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
+        <img src={preve} alt="이전" />
+      </button>
+      {pageNumbers.map((num) => (
+        <button key={num} onClick={() => handlePageChange(num)} className={num === currentPage ? "active" : undefined}>
+          {num}
+        </button>
+      ))}
+      <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
+        <img src={next} alt="다음" />
+      </button>
+    </div>
+  );
+}
+
+export default Pagination;