[배수민] sprint5

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.eslint.config.js
+.prettierrc.js

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": {
+    "eslint-config-prettier": "^10.1.5"
   }
 }

src/App.js

@@ -1,24 +1,14 @@
-import logo from './logo.svg';
-import './App.css';
+import { Outlet } from "react-router-dom";
+import Nav from "./components/Nav";
 
 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>
+        <Outlet />
+      </div>
+    </>
   );
 }
 

src/Main.js

@@ -0,0 +1,24 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import App from "./App";
+import "./css/base/reset.css";
+import "./css/base/variables.css";
+import "./css/base/common.css";
+import ItemsPage from "./pages/ItemsPage";
+import ItemRegisterPage from "./pages/ItemRegisterPage";
+
+function Main() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />}>
+          <Route path="items">
+            <Route index element={<ItemsPage />}></Route>
+            <Route path="addItem" element={<ItemRegisterPage />}></Route>
+          </Route>
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default Main;

src/api/Items.js

@@ -0,0 +1,30 @@
+const BASEURL = "https://panda-market-api.vercel.app";
+
+export async function getFavoriteItems({
+  page = 1,
+  pageSize = 4,
+  orderBy = "favorite",
+}) {
+  const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}`;
+  const response = await fetch(`${BASEURL}/products?${query}`);
+  if (!response.ok) {
+    throw new Error("상품 목록을 불러오는데 오류가 발생했습니다");
+  }
+  const body = await response.json();
+  return body;
+}
+
+export async function getAllItems({
+  page = 1,
+  pageSize = 10,
+  orderBy = "recent",
+  keyword = "",
+}) {
+  const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`;
+  const response = await fetch(`${BASEURL}/products?${query}`);
+  if (!response.ok) {
+    throw new Error("상품 목록을 불러오는데 오류가 발생했습니다");
+  }
+  const body = await response.json();
+  return body;
+}

src/components/Button.js

@@ -0,0 +1,17 @@
+import { Link } from "react-router-dom";
+import "../css/components/Button.css";
+
+function Button({ className, type, to }) {
+  const btnStyleClass = {
+    register: "btn-register",
+    small: "btn-small",
+    large: "btn-large",
+  };
+  return (
+    <button className={`btn ${btnStyleClass[type]} ${className}`}>
+      <Link to={to}>상품 등록하기</Link>
+    </button>
+  );
+}
+
+export default Button;

src/components/Card.js

@@ -0,0 +1,31 @@
+import "../css/components/Card.css";
+import heartIcon from "../img/heart.svg";
+import defaultImg from "../img/img_default.svg";
+function Card({ data }) {
+  return (
+    <div>
+      <img
+        className="card__image"
+        alt="중고상품 이미지"
+        src={data.images[0] ?? defaultImg}
+        onError={(e) => {
+          e.target.onError = null;
+          e.target.src = defaultImg;
+        }}
+      />
+      <div className="card__info">
+        <div className="card__info__title">{data.name}</div>
+        <div className="card__info__price">
+          {data.price.toLocaleString("ko-KR")}원
+        </div>
+
+        <div className="card__icon__group">
+          <img src={heartIcon} alt="하트 아이콘" className="heart__icon" />
+          <span className="heart__icon__count">{data.favoriteCount}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Card;

src/components/Dropdown.js

@@ -0,0 +1,40 @@
+import "../css/components/Dropdown.css";
+import sortIcon from "../img/sort.svg";
+import arrowDownIcon from "../img/arrow_down.svg";
+
+function Dropdown({
+  className,
+  onClickDropdown,
+  onClickDropdownItem,
+  dropdownList,
+  showDropdown,
+  value,
+}) {
+  return (
+    <div
+      className={`dropdown__container ${className}`}
+      onClick={onClickDropdown}
+    >
+      <div className="dropdown__button">
+        <span className="dropdown__text">{value.name}</span>
+        <img
+          src={arrowDownIcon}
+          alt="드롭다운 아이콘"
+          className="dropdown__button__icon"
+        />
+        <img src={sortIcon} alt="분류아이콘" className="dropdown__sort__icon" />
+      </div>
+      {showDropdown && (
+        <ul className="dropdown__list">
+          {dropdownList?.map((item) => (
+            <li key={item.value} onClick={() => onClickDropdownItem(item)}>
+              {item.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default Dropdown;

src/components/Nav.js

@@ -0,0 +1,55 @@
+import { Link, NavLink } from "react-router-dom";
+import textLogoIcon from "../img/logo_text.jpg";
+import logoIcon from "../img/logo.svg";
+import userIcon from "../img/user.svg";
+import "../css/components/Nav.css";
+
+function getLinkStyle({ isActive }) {
+  return {
+    color: isActive ? `var(--color-primary-100)` : undefined,
+  };
+}
+
+function Nav() {
+  return (
+    <header className="header">
+      <div className="header__content">
+        <div className="header__content__navigation__group">
+          <Link to="/">
+            <img
+              src={textLogoIcon}
+              srcSet={`${textLogoIcon} 103w, ${logoIcon} 153w`}
+              sizes={"(min-width: 768px) 153px, 103px"}
+              alt="판다마켓 로고"
+              className="header__content__logo"
+            />
+          </Link>
+          <ul>
+            <li>
+              <NavLink to="board" style={getLinkStyle}>
+                자유게시판
+              </NavLink>
+            </li>
+
+            <li>
+              <NavLink to="items" style={getLinkStyle}>
+                중고마켓
+              </NavLink>
+            </li>
+          </ul>
+        </div>
+        <div className="header__content__user">
+          <Link to="user">
+            <img
+              src={userIcon}
+              alt="사용자 아이콘"
+              className="header__content__user__icon"
+            />
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default Nav;