[염성진] Sprint6

package.json

@@ -3,40 +3,78 @@
   "name": "panda",
 
   "version": "0.1.0",
+
   "private": true,
+
   "dependencies": {
+
     "@testing-library/jest-dom": "^5.17.0",
+
     "@testing-library/react": "^13.4.0",
+
     "@testing-library/user-event": "^13.5.0",
 
     "react": "^18.3.1",
+
     "react-dom": "^18.3.1",
 
+    "react-router-dom": "^6.24.0",
+
     "react-scripts": "5.0.1",
+
+    "styled-components": "^6.1.11",
+
     "web-vitals": "^2.1.4"
+
   },
+
   "scripts": {
+
     "start": "react-scripts start",
+
     "build": "react-scripts build",
+
     "test": "react-scripts test",
+
     "eject": "react-scripts eject"
+
   },
+
   "eslintConfig": {
+
     "extends": [
+
       "react-app",
+
       "react-app/jest"
+
     ]
+
   },
+
   "browserslist": {
+
     "production": [
+
       ">0.2%",
+
       "not dead",
+
       "not op_mini all"
+
     ],
+
     "development": [
+
       "last 1 chrome version",
+
       "last 1 firefox version",
+
       "last 1 safari version"
+
     ]
+
   }
+
 }
+

src/App.js

@@ -1,14 +1,20 @@
-
 import './styles/reset.css';
 import Home from './pages/home/Home.js';
 import Items from './pages/items/Items.js';
+import Login from './pages/login/Login.js';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import AddItem from './pages/additem/AddItem.js';
 
 function App() {
   return (
-    <>
-      <Items />
-    </>
-
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/items" element={<Items />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="additem" element={<AddItem />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 

src/components/BestItem/BestItem.js

@@ -18,8 +18,7 @@ function BestItems({ item }) {
 }
 
 function BestItemList({ items }) {
-  // 반응형에 따라 몇 개의 데이터를 표시할 건지 후에 수정해야 함.
-  const cutItems = [...items.list].slice(0, 4);
+  const cutItems = [...items.list];
   return (
     <div className="best-item">
       <h2 className="best-title">베스트 상품</h2>

src/components/DropDown/DropDown.js

@@ -18,7 +18,7 @@ export default function DropDown({ orderBy, handleOrderChange }) {
   const getApiFavorite = () => {
     handleOrderChange('favorite');
   };
-
+  console.log(select);
   return (
     <div className="select-options" onClick={toggle}>
       <div className="select-text">{select === 'recent' ? '최신순' : '좋아요순'}</div>
@@ -27,7 +27,7 @@ export default function DropDown({ orderBy, handleOrderChange }) {
           <li
             className="select-options-recent"
             onClick={() => {
-              optionClick('최신순');
+              optionClick('recent');
               getApiRecent();
             }}
           >
@@ -36,7 +36,7 @@ export default function DropDown({ orderBy, handleOrderChange }) {
           <li
             className="select-options-favorite"
             onClick={() => {
-              optionClick('좋아요순');
+              optionClick('favorite');
               getApiFavorite();
             }}
           >

src/components/ItemsOnSale/ItemsOnSale.js

@@ -20,8 +20,7 @@ function BestItems({ item }) {
 }
 
 function ItemsOnSale({ items, orderBy, handleOrderChange }) {
-  // 반응형에 따라 몇 개의 데이터를 표시할 건지 후에 수정해야 함.
-  const cutItems = [...items.list].slice(0, 10);
+  const cutItems = [...items.list];
   return (
     <div className="sale-item">
       <div className="mini-nav-bar">

src/components/NavBar/NavBar.css

@@ -122,6 +122,7 @@ a {
   .nav-links-box {
     display: flex;
     gap: 8px;
+    margin-right: 23px;
   }
   .nav-link {
     display: flex;

src/components/NavBar/NavBar.js

@@ -1,31 +1,44 @@
 import '../NavBar/NavBar.css';
 import logoLarge from '../../assets/images/logo/logo.png';
 import logoSmall from '../../assets/images/logo/mini_logo.png';
+import { Link, NavLink, useLocation } from 'react-router-dom';
+
+function getLinkStyle({ isActive }) {
+  return {
+    color: isActive ? '#3692ff' : 'none',
+  };
+}
+
+function NavBar() {
+  const location = useLocation();
+  const matchLocation = location.pathname === '/additem';
 
-function NavBar({ page }) {
-  const pageType = page;
   return (
     <header>
       <div className="header-nav">
         <div className="logo-and-links">
-          <a href="/">
+          <NavLink to="/">
             <picture>
               <source srcSet={logoSmall} media="(max-width: 767px)" className="logo-for-phone" />
               <img src={logoLarge} alt="판다마켓 로고" className="logo-for-screen" />
             </picture>
-          </a>
+          </NavLink>
           <div className="nav-links-box">
-            <a href="/boards" className="nav-link">
+            <NavLink to="/boards" className="nav-link" style={getLinkStyle}>
               자유게시판
-            </a>
-            <a href="/items" className={`nav-link ${pageType}`}>
+            </NavLink>
+            <NavLink
+              to={matchLocation ? '/additem' : '/items'}
+              className="nav-link"
+              style={getLinkStyle}
+            >
               중고마켓
-            </a>
+            </NavLink>
           </div>
         </div>
-        <a href="/login.html" className="login-btn">
+        <Link to="/login" className="login-btn">
           로그인
-        </a>
+        </Link>
       </div>
     </header>
   );

src/components/PaginationBar/PaginationBar.js

@@ -3,7 +3,7 @@ import pageNationLeftIcon from '../../assets/images/icon/btn_icon/ic_page_left_a
 import pageNationRightIcon from '../../assets/images/icon/btn_icon/ic_page_right_arrow.png';
 import { useEffect, useRef, useState } from 'react';
 
-function PaginationBar() {
+function PaginationBar({ pageBy, handlePaginationChange }) {
   const firstTarget = useRef(null);
   const [navClick, setNavClick] = useState(null);
 

src/components/getApi.js

@@ -1,14 +1,16 @@
-export async function getApi() {
+import { useState } from 'react';
+
+export async function getApi(size = '4') {
   const response = await fetch(
-    `https://panda-market-api.vercel.app/products?page=1&pageSize=10&orderBy=favorite`
+    `https://panda-market-api.vercel.app/products?page=1&pageSize=${size}&orderBy=favorite`
   );
   const result = await response.json();
   return result;
 }
 
-export async function getApiOrderBy(orderBy = 'recent') {
+export async function getApiOrderBy({ order = 'recent', lowerSize = '10' }) {
   const response = await fetch(
-    `https://panda-market-api.vercel.app/products?page=1&pageSize=10&orderBy=${orderBy}`
+    `https://panda-market-api.vercel.app/products?page=1&pageSize=${lowerSize}&orderBy=${order}`
   );
   const result = await response.json();
   return result;