[윤정환] sprint6

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.1"

public/common.css

@@ -2,18 +2,26 @@
   cursor: pointer;
   border: none;
   white-space: nowrap;
+  text-decoration: none;
+  background: none;
+  text-align: center;
+}
+
+.primary-btn {
   background-color: var(--color-primary);
+  color: var(--color-white);
 }
 
-.btn:hover {
+.primary-btn:not(:disabled):hover {
   background-color: var(--color-primary-dark);
 }
 
-.btn:active {
+.primary-btn:active {
   background-color: var(--color-primary-darker);
 }
 
-.btn .disabled {
+.disabled {
+  cursor: default;
   background-color: var(--color-disabled);
 }
 

src/App.jsx

@@ -1,7 +1,7 @@
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import Nav from "./components/Nav";
 import Items from "./pages/Items";
-import AddItem from "./pages/AddItem";
+import AddItemPage from "./pages/AddItemPage/AddItemPage";
 
 const App = () => {
   return (
@@ -10,7 +10,7 @@ const App = () => {
       <Routes>
         <Route path="/" element={<Navigate to="/items" replace />} />
         <Route path="/items" element={<Items />} />
-        <Route path="/additem" element={<AddItem />} />
+        <Route path="/additem" element={<AddItemPage />} />
       </Routes>
     </BrowserRouter>
   );

src/api.jsx

@@ -6,13 +6,22 @@ export const getProducts = async ({
   pageSize = 4,
   keyword = "",
 }) => {
-  const query = `orderBy=${orderBy}&page=${currentPage}&pageSize=${pageSize}${
-    keyword ? `&keyword=${keyword}` : ""
-  }`;
-  const response = await fetch(`${BASE_URL}products?${query}`);
+  const params = new URLSearchParams({
+    orderBy,
+    page: currentPage,
+    pageSize,
+  });
+
+  if (keyword) {
+    params.append("keyword", keyword);
+  }
+
+  const response = await fetch(`${BASE_URL}products?${params.toString()}`);
+
   if (!response.ok) {
     throw new Error("항목을 불러오는데 실패했습니다.");
   }
+
   const body = await response.json();
   return body;
 };

src/common/XButton.jsx

@@ -0,0 +1,17 @@
+import XIcon from "../assets/icons/ic_X.svg";
+
+const XButton = ({ onClick, value = null, className = "btn" }) => {
+  return (
+    <button
+      style={{ height: "24px" }}
+      className={className}
+      value={value}
+      type="button"
+      onClick={onClick}
+    >
+      <img src={XIcon} alt="삭제 버튼" />
+    </button>
+  );
+};
+
+export default XButton;

src/components/AllProductList.jsx

@@ -4,13 +4,9 @@ import PaginationNav from "./PaginationNav";
 import styles from "./AllProductList.module.css";
 import { useState } from "react";
 
-const calcTotalPage = (totalCount, pageSize) =>
-  Math.ceil(totalCount / pageSize);
-
 const AllProductList = ({
   products,
-  totalCount,
-  pageSize,
+  totalPage,
   currentPage,
   breakpoint,
   inputValue,
@@ -45,7 +41,7 @@ const AllProductList = ({
       <PaginationNav
         signalSearch={signalSearch}
         onClickPage={onClickPage}
-        totalPage={calcTotalPage(totalCount, pageSize)}
+        totalPage={totalPage}
         currentPage={currentPage}
         breakpoint={breakpoint}
       />

src/components/Nav.jsx

@@ -14,23 +14,33 @@ const Nav = () => {
             alt="판다마켓 로고"
             className={styles["logo-img"]}
           />
-          <button className={styles.logo} type="button">
+          <button className={`btn ${styles.logo}`} type="button">
             판다마켓
           </button>
         </div>
-        <button className={`${styles.link}`} type="button">
+        <button className={`btn ${styles.link}`} type="button">
           자유게시판
         </button>
         <button
-          className={`${styles.link} ${
-            styles[`${location.pathname === "/items" ? "selected" : "none"}`]
+          className={`btn ${styles.link} ${
+            styles[
+              `${
+                location.pathname === "/items" ||
+                location.pathname === "/additem"
+                  ? "selected"
+                  : "none"
+              }`
+            ]
           }`}
           type="button"
         >
           중고마켓
         </button>
       </div>
-      <button className={`btn ${styles["login-btn"]}`} type="button">
+      <button
+        className={`btn primary-btn ${styles["login-btn"]}`}
+        type="button"
+      >
         로그인
       </button>
     </nav>

src/components/Nav.module.css

@@ -10,6 +10,7 @@
   margin: 0 auto;
   border-bottom: 1px solid var(--color-border-grey);
   gap: var(--space-sm);
+  z-index: 999;
 }
 
 .link-container {
@@ -56,10 +57,7 @@
   display: inline-block;
   width: 128px;
   height: 48px;
-  text-decoration: none;
-  color: var(--color-white);
   padding: 12px 20px;
-  text-align: center;
   border-radius: 8px;
   font-weight: 500;
   font-size: 16px;

src/components/PaginationNav.jsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import ArrowButton from "./ArrowButton";
 import PageButton from "./PageButton";
 import styles from "./PaginationNav.module.css";
+import usePagination from "./hooks/UsePagination";
 
 const PaginationNav = ({
   signalSearch,
@@ -10,8 +11,12 @@ const PaginationNav = ({
   currentPage,
   breakpoint,
 }) => {
-  const [pageList, setPageList] = useState([[1]]);
-  const [pageListIndex, setPageListIndex] = useState(0);
+  const { pageList, pageListIndex, onMovePageList } = usePagination(
+    totalPage,
+    breakpoint,
+    signalSearch,
+    onClickPage
+  );
   const PrevArrowButton = {
     shape: "<",
     direction: -1,
@@ -23,48 +28,6 @@ const PaginationNav = ({
     endIndex: pageList.length - 1,
   };
 
-  const resetPagination = useCallback(() => {
-    setPageListIndex((prev) => 0);
-    onClickPage((prev) => 1);
-  }, [onClickPage]);
-
-  const onMovePageList = (direction) => {
-    setPageListIndex((prev) => prev + direction);
-    onClickPage((prev) => pageList[pageListIndex + direction][0]);
-  };
-
-  const calcPageList = (totalPage) => {
-    if (!totalPage) {
-      setPageList((prev) => [[1]]);
-      return;
-    }
-    const wholePageList = [];
-    const dividedPageList = [];
-    let count = 0;
-
-    for (let i = 1; i <= totalPage; i++) {
-      if (count === 5) {
-        wholePageList.push([...dividedPageList]);
-        dividedPageList.splice(0);
-        count = 0;
-      }
-      dividedPageList.push(i);
-      count++;
-      if (totalPage === i) {
-        wholePageList.push([...dividedPageList]);
-      }
-    }
-    setPageList((prev) => [...wholePageList]);
-  };
-
-  useEffect(() => {
-    calcPageList(totalPage);
-  }, [totalPage]);
-
-  useEffect(() => {
-    resetPagination();
-  }, [signalSearch, breakpoint, resetPagination]);
-
   return (
     <div className={styles.container}>
       <ArrowButton

src/components/SearchBar.jsx

@@ -30,7 +30,7 @@ const SearchBar = ({
     <div className={styles.container}>
       <h3>전체 상품</h3>
       <Link className={styles["btn-wrapper"]} to="/additem">
-        <button className={`btn ${styles["additem-btn"]}`}>
+        <button className={`btn primary-btn ${styles["additem-btn"]}`}>
           상품 등록하기
         </button>
       </Link>
@@ -41,7 +41,7 @@ const SearchBar = ({
           placeholder="검색할 상품을 입력해주세요"
           onChange={handleChangeInputValue}
           onKeyDown={handleSearch}
-        ></input>
+        />
         <img
           className={styles["search-icon"]}
           src={searchIcon}

src/components/SearchBar.module.css

@@ -20,10 +20,7 @@
   display: inline-block;
   width: 133px;
   height: 42px;
-  text-decoration: none;
-  color: var(--color-white);
   padding: 12px 23px;
-  text-align: center;
   border-radius: 8px;
   font-weight: 500;
   font-size: 14px;

src/components/hooks/UsePagination.js

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useState } from "react";
+
+const BUTTONS_PER_PAGE = 5;
+
+const usePagination = (totalPage, breakpoint, signalSearch, onClickPage) => {
+  const [pageList, setPageList] = useState([[1]]);
+  const [pageListIndex, setPageListIndex] = useState(0);
+
+  const resetPagination = useCallback(() => {
+    setPageListIndex((prev) => 0);
+    onClickPage((prev) => 1);
+  }, [onClickPage]);
+
+  const onMovePageList = (direction) => {
+    setPageListIndex((prev) => prev + direction);
+    onClickPage((prev) => pageList[pageListIndex + direction][0]);
+  };
+
+  const calcPageList = useCallback((totalPage) => {
+    if (!totalPage) {
+      setPageList((prev) => [[1]]);
+      return;
+    }
+    const wholePageList = [];
+    const dividedPageList = [];
+    let count = 0;
+
+    for (let i = 1; i <= totalPage; i++) {
+      if (count === BUTTONS_PER_PAGE) {
+        wholePageList.push([...dividedPageList]);
+        dividedPageList.splice(0);
+        count = 0;
+      }
+      dividedPageList.push(i);
+      count++;
+      if (totalPage === i) {
+        wholePageList.push([...dividedPageList]);
+      }
+    }
+    setPageList((prev) => [...wholePageList]);
+  }, []);
+
+  useEffect(() => {
+    calcPageList(totalPage);
+  }, [totalPage, calcPageList]);
+
+  useEffect(() => {
+    resetPagination();
+  }, [signalSearch, breakpoint, resetPagination]);
+
+  return { pageList, pageListIndex, onMovePageList };
+};
+
+export default usePagination;