[윤정환] 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,16 +1,16 @@
 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 Nav from "./layouts/Nav";
+import ItemsPage from "./pages/ItemsPage/ItemsPage";
+import AddItemPage from "./pages/AddItemPage/AddItemPage";
 
 const App = () => {
   return (
     <BrowserRouter>
       <Nav />
       <Routes>
         <Route path="/" element={<Navigate to="/items" replace />} />
-        <Route path="/items" element={<Items />} />
-        <Route path="/additem" element={<AddItem />} />
+        <Route path="/items" element={<ItemsPage />} />
+        <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/hooks/useField.js

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import formatNumber from "../utils/formatNumber";
+
+const KEY_MAP = {
+  productName: "name",
+  productInfo: "description",
+  productPrice: "price",
+};
+
+const useField = (id, onSaveData) => {
+  const [value, setValue] = useState("");
+  const [displayedValue, setDisplayedValue] = useState("");
+  const [isFocused, SetIsFocused] = useState(false);
+
+  const handleChangeValue = (e) => {
+    setValue((prev) => e.target.value);
+  };
+
+  const handleChangePrice = (e) => {
+    let input = e.target.value;
+    input = input.replace(/[^0-9]/g, "");
+
+    if (input.length > 1 && input.startsWith("0")) {
+      input = input.replace(/^0+/, "");
+    }
+
+    setValue((prev) => (input === "" ? "" : Number(input)));
+  };
+
+  const handleFocus = () => {
+    SetIsFocused((prev) => true);
+  };
+
+  const handleBlurDisplayedValue = () => {
+    setDisplayedValue((prev) => formatNumber(value));
+    SetIsFocused((prev) => false);
+  };
+
+  useEffect(() => {
+    onSaveData((prev) => {
+      return {
+        ...prev,
+        [KEY_MAP[`${id}`]]: value,
+      };
+    });
+  }, [value]);
+
+  switch (id) {
+    case "productPrice": {
+      return {
+        value,
+        displayedValue,
+        isFocused,
+        handleChangePrice,
+        handleFocus,
+        handleBlurDisplayedValue,
+      };
+    }
+    default: {
+      return { value, handleChangeValue };
+    }
+  }
+};
+
+export default useField;

src/components/PaginationNav.jsx → src/hooks/usePagination.js

@@ -1,27 +1,14 @@
 import { useCallback, useEffect, useState } from "react";
-import ArrowButton from "./ArrowButton";
-import PageButton from "./PageButton";
-import styles from "./PaginationNav.module.css";
 
-const PaginationNav = ({
-  signalSearch,
-  onClickPage,
+const usePagination = (
+  BUTTONS_PER_PAGE,
   totalPage,
-  currentPage,
   breakpoint,
-}) => {
+  signalSearch,
+  onClickPage
+) => {
   const [pageList, setPageList] = useState([[1]]);
   const [pageListIndex, setPageListIndex] = useState(0);
-  const PrevArrowButton = {
-    shape: "<",
-    direction: -1,
-    endIndex: 0,
-  };
-  const NextArrowButton = {
-    shape: ">",
-    direction: 1,
-    endIndex: pageList.length - 1,
-  };
 
   const resetPagination = useCallback(() => {
     setPageListIndex((prev) => 0);
@@ -33,7 +20,7 @@ const PaginationNav = ({
     onClickPage((prev) => pageList[pageListIndex + direction][0]);
   };
 
-  const calcPageList = (totalPage) => {
+  const calcPageList = useCallback((totalPage) => {
     if (!totalPage) {
       setPageList((prev) => [[1]]);
       return;
@@ -43,7 +30,7 @@ const PaginationNav = ({
     let count = 0;
 
     for (let i = 1; i <= totalPage; i++) {
-      if (count === 5) {
+      if (count === BUTTONS_PER_PAGE) {
         wholePageList.push([...dividedPageList]);
         dividedPageList.splice(0);
         count = 0;
@@ -55,40 +42,17 @@ const PaginationNav = ({
       }
     }
     setPageList((prev) => [...wholePageList]);
-  };
+  }, []);
 
   useEffect(() => {
     calcPageList(totalPage);
-  }, [totalPage]);
+  }, [totalPage, calcPageList]);
 
   useEffect(() => {
     resetPagination();
   }, [signalSearch, breakpoint, resetPagination]);
 
-  return (
-    <div className={styles.container}>
-      <ArrowButton
-        onMovePageList={onMovePageList}
-        pageListIndex={pageListIndex}
-        {...PrevArrowButton}
-      />
-      {pageList[pageListIndex].map((pageNumber) => {
-        return (
-          <PageButton
-            key={pageNumber}
-            pageNumber={pageNumber}
-            selected={pageNumber === currentPage}
-            onClickPage={onClickPage}
-          />
-        );
-      })}
-      <ArrowButton
-        onMovePageList={onMovePageList}
-        pageListIndex={pageListIndex}
-        {...NextArrowButton}
-      />
-    </div>
-  );
+  return { pageList, pageListIndex, onMovePageList };
 };
 
-export default PaginationNav;
+export default usePagination;

src/index.css

@@ -6,7 +6,7 @@
   font-style: normal;
 
   font-family: "ROKAF SANS";
-  src: url("assets/fonts/ROKAF\ Sans\ Bold.ttf") format("truetype");
+  src: url("./assets/fonts/ROKAF-Sans-Bold.ttf") format("truetype");
 }
 
 :root {
@@ -45,6 +45,10 @@
   /* Fonts */
   --font-weight-bold: 700;
   --font-weight-regular: 400;
+
+  /* Z-index */
+  --z-index-base: 0;
+  --z-index-navigation: 500;
 }
 
 * {
@@ -56,3 +60,8 @@ body {
   font-family: var(--font-primary);
   word-break: keep-all;
 }
+
+button {
+  padding-inline: 0;
+  padding-block: 0;
+}

src/components/Nav.jsx → src/layouts/Nav.jsx

@@ -4,6 +4,8 @@ import { useLocation } from "react-router-dom";
 
 const Nav = () => {
   const location = useLocation();
+  const isMarketPage =
+    location.pathname === "/items" || location.pathname === "/additem";
 
   return (
     <nav className={styles.container}>
@@ -14,23 +16,26 @@ 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} ${
+            isMarketPage ? styles.selected : ""
           }`}
           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 → src/layouts/Nav.module.css

@@ -10,6 +10,7 @@
   margin: 0 auto;
   border-bottom: 1px solid var(--color-border-grey);
   gap: var(--space-sm);
+  z-index: var(--z-index-navigation);
 }
 
 .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;