♻️ refactor: 코드 리뷰 반영해서 AllProductsSection, BestProductsSection 수정

codeit-bootcamp-frontend · Dec 6, 2024 · ae2ea4d · ae2ea4d
1 parent 40fecea
commit ae2ea4d
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 42 deletions.
diff --git a/src/components/section/AllProductsSection.js b/src/components/section/AllProductsSection.js
@@ -5,8 +5,7 @@ import { HttpException } from "../../utils/exceptions";
 import ItemCard from "../ui/Item/ItemCard";
 import "./AllProductsSection.css";
 
-const getPageSize = () => {
-  const width = window.innerWidth;
+const getPageLimit = (width) => {
   if (width > 1199) {
     return 10;
   } else if (width > 768) {
@@ -18,12 +17,12 @@ const getPageSize = () => {
 
 function AllProductsSection({ sortOption }) {
   const [items, setItems] = useState([]);
-  const [pageSize, setPageSize] = useState(getPageSize());
+  const [pageSize, setPageSize] = useState(getPageLimit(window.innerWidth));
   const [error, setError] = useState(null);
 
-  const getProducts = async () => {
+  const getProducts = async (limit, sort) => {
     try {
-      const { list } = await fetchProducts(sortOption, pageSize);
+      const { list } = await fetchProducts(sort, limit);
       setItems(list);
     } catch (error) {
       if (error instanceof HttpException) {
@@ -35,7 +34,7 @@ function AllProductsSection({ sortOption }) {
   };
 
   const handleResize = useCallback(() => {
-    const newPageSize = getPageSize();
+    const newPageSize = getPageLimit(window.innerWidth);
     if (newPageSize !== pageSize) {
       setPageSize(newPageSize);
     }
@@ -47,7 +46,9 @@ function AllProductsSection({ sortOption }) {
   }, [handleResize]);
 
   useEffect(() => {
-    getProducts();
+    if (pageSize !== null) {
+      getProducts(pageSize, sortOption);
+    }
   }, [sortOption, pageSize]);
 
   if (error) {

diff --git a/src/components/section/BestProductsSection.js b/src/components/section/BestProductsSection.js
@@ -5,8 +5,7 @@ import { HttpException } from "../../utils/exceptions.js";
 import ItemCard from "../ui/Item/ItemCard.js";
 import "./BestProductsSection.css";
 
-const getPageSize = () => {
-  const width = window.innerWidth;
+const getPageLimit = (width) => {
   if (width > 1199) {
     return 4;
   } else if (width > 768) {
@@ -21,10 +20,10 @@ function BestProductsSection() {
   const [pageSize, setPageSize] = useState(null);
   const [error, setError] = useState(null);
 
-  const getProducts = async () => {
-    if (pageSize !== null) {
+  const getProducts = async (limit) => {
+    if (limit !== null) {
       try {
-        const { list } = await fetchProducts("favorite", pageSize);
+        const { list } = await fetchProducts("favorite", limit);
         setItems(list);
       } catch (error) {
         if (error instanceof HttpException) {
@@ -37,22 +36,22 @@ function BestProductsSection() {
   };
 
   const handleResize = useCallback(() => {
-    const newPageSize = getPageSize();
+    const newPageSize = getPageLimit(window.innerWidth);
     if (newPageSize !== pageSize) {
       setPageSize(newPageSize);
     }
   }, [pageSize]);
 
   useEffect(() => {
-    const initialPageSize = getPageSize();
+    const initialPageSize = getPageLimit(window.innerWidth);
     setPageSize(initialPageSize);
 
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [handleResize]);
 
   useEffect(() => {
-    getProducts();
+    getProducts(pageSize);
   }, [pageSize]);
 
   if (error) {

diff --git a/src/components/ui/Nav/AllProductsNav.js b/src/components/ui/Nav/AllProductsNav.js
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
+import Dropdown from "./Dropdown";
 import "./AllProductsNav.css";
-import dropdownToggle from "../../../../src/assets/icons/dropdown-toggle.svg";
 
 function AllProductsNav({ onSortChange }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -30,22 +30,7 @@ function AllProductsNav({ onSortChange }) {
         <div className="search-container">
           <input type="text" className="item-nav-search" placeholder="검색할 상품을 입력해주세요" />
         </div>
-        <div className="dropdown-container">
-          <button className="dropdown-btn" onClick={toggleDropdown}>
-            {selected}
-            <img src={dropdownToggle} alt="더보기" />
-          </button>
-          {isOpen && (
-            <ul className="dropdown-menu">
-              <li className="dropdown-item" onClick={() => selectOption("최신순", "recent")}>
-                최신순
-              </li>
-              <li className="dropdown-item" onClick={() => selectOption("인기순", "favorite")}>
-                인기순
-              </li>
-            </ul>
-          )}
-        </div>
+        <Dropdown isOpen={isOpen} selected={selected} onToggle={toggleDropdown} onSelect={selectOption} />
       </div>
     </nav>
   );

diff --git a/src/components/ui/Nav/Dropdown.js b/src/components/ui/Nav/Dropdown.js
@@ -0,0 +1,24 @@
+import dropdownToggle from "../../../../src/assets/icons/dropdown-toggle.svg";
+
+function Dropdown({ isOpen, selected, onToggle, onSelect }) {
+  return (
+    <div className="dropdown-container">
+      <button className="dropdown-btn" onClick={onToggle}>
+        {selected}
+        <img src={dropdownToggle} alt="더보기" />
+      </button>
+      {isOpen && (
+        <ul className="dropdown-menu">
+          <li className="dropdown-item" onClick={() => onSelect("최신순", "recent")}>
+            최신순
+          </li>
+          <li className="dropdown-item" onClick={() => onSelect("인기순", "favorite")}>
+            인기순
+          </li>
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default Dropdown;
diff --git a/src/pages/AddItemPage/AddItemPage.js b/src/pages/AddItemPage/AddItemPage.js
@@ -6,24 +6,40 @@ import InputItem from "../../components/ui/Input/InputItem";
 import TagInput from "../../components/ui/Input/TagInput";
 
 function AddItemPage() {
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [price, setPrice] = useState();
-  const [tags, setTags] = useState([]);
+  const [formValues, setFormValues] = useState({
+    name: "",
+    description: "",
+    price: null,
+    tags: [],
+  });
+
+  const { name, description, price, tags } = formValues;
 
   const onAddTag = (tag) => {
     if (!tags.includes(tag)) {
-      setTags([...tags, tag]);
+      setFormValues((prev) => ({
+        ...prev,
+        tags: [...prev.tags, tag],
+      }));
     }
   };
 
   const onRemoveTag = (tagToRemove) => {
-    const updatedTags = tags.filter((tag) => tag !== tagToRemove);
-    setTags(updatedTags);
+    setFormValues((prev) => ({
+      ...prev,
+      tags: prev.tags.filter((tag) => tag !== tagToRemove),
+    }));
   };
 
   const isFormValid = name && description && price && tags.length;
 
+  const handleInputChange = (field, value) => {
+    setFormValues((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
   return (
     <div className="additem-page">
       <Header />
@@ -39,22 +55,22 @@ function AddItemPage() {
           id="name"
           title="상품명"
           value={name}
-          onChange={(e) => setName(e.target.value)}
+          onChange={(e) => handleInputChange("name", e.target.value)}
           placeholder="상품명을 입력해주세요"
         />
         <InputItem
           id="description"
           title="상품 소개"
           value={description}
-          onChange={(e) => setDescription(e.target.value)}
+          onChange={(e) => handleInputChange("description", e.target.value)}
           placeholder="상품 소개를 입력해주세요"
           isTextArea
         />
         <InputItem
           id="price"
           title="판매가격"
           value={price}
-          onChange={(e) => setPrice(e.target.value)}
+          onChange={(e) => handleInputChange("price", e.target.value)}
           placeholder="판매 가격을 입력해주세요"
         />
         <TagInput