[박광민] sprint6

src/App.jsx

@@ -1,7 +1,7 @@
 import { Routes, Route, Navigate } from "react-router-dom";
 import Header from "./components/Header/Header.jsx";
 import Items from "./pages/Items/Items.jsx";
-import AddItem from "./pages/AddItem.jsx";
+import AddItem from "./pages/AddItem/AddItem.jsx";
 import "./assets/styles/base.css";
 
 function App() {

src/components/AllProducts/AllProducts.jsx

@@ -1,28 +1,29 @@
-import { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { useState, useEffect, useCallback } from "react";
+import { Link, useSearchParams } from "react-router-dom";
 import getProducts from "../../api/getProducts";
 import ProductCard from "../ProductCard/ProductCard";
 import SearchBar from "../SearchBar/SearchBar";
 import SortSelector from "../SortSelector/SortSelector";
 import Pagination from "../Pagination/Pagination";
 import styles from "./AllProducts.module.css";
 
+const getPageSize = () => {
+  const width = window.innerWidth;
+  if (width < 768) return 4;
+  else if (width < 1024) return 6;
+  else if (width < 1200) return 8;
+  else return 10;
+};
+
 const AllProducts = () => {
   const [products, setProducts] = useState([]);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [orderBy, setOrderBy] = useState("recent");
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(getPageSize);
   const [totalCount, setTotalCount] = useState(0);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const orderBy = searchParams.get("orderBy") || "recent";
+  const keyword = searchParams.get("keyword") || "";
   const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
-
-  const [page, setPage] = useState(() => {
-    const saved = sessionStorage.getItem("allProductsPage");
-    return saved ? parseInt(saved, 10) : 1;
-  });
-
-  useEffect(() => {
-    sessionStorage.setItem("allProductsPage", page.toString());
-  }, [page]);
+  const page = Number(searchParams.get("page")) || 1;
 
   useEffect(() => {
     const handleResize = () => setIsMobile(window.innerWidth < 768);
@@ -31,40 +32,64 @@ const AllProducts = () => {
   }, []);
 
   useEffect(() => {
-    getProducts({ page, pageSize, orderBy, keyword: searchTerm })
+    getProducts({ page, pageSize, orderBy, keyword })
       .then((data) => {
         setProducts(data.list);
         setTotalCount(data.totalCount);
       })
       .catch((error) => console.error(error));
-  }, [page, pageSize, orderBy, searchTerm]);
+  }, [page, pageSize, orderBy, keyword]);
 
   useEffect(() => {
     const updatePageSize = () => {
-      const width = window.innerWidth;
-      if (width < 768) setPageSize(4);
-      else if (width < 1024) setPageSize(6);
-      else if (width < 1200) setPageSize(8);
-      else setPageSize(10);
+      setPageSize(getPageSize());
     };
 
     updatePageSize();
     window.addEventListener("resize", updatePageSize);
     return () => window.removeEventListener("resize", updatePageSize);
   }, []);
 
-  const sortedProducts = [...products].sort((a, b) => {
-    if (orderBy === "likes") return b.favoriteCount - a.favoriteCount;
-    return new Date(b.recent) - new Date(a.recent);
-  });
+  const onSearch = useCallback(
+    (term) => {
+      setSearchParams(
+        (prev) => {
+          const newParams = new URLSearchParams(prev);
+          newParams.set("keyword", term);
+          newParams.set("page", "1");
+          return newParams;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
 
-  const filteredData = sortedProducts.filter((item) =>
-    item.name?.toLowerCase().includes(searchTerm.toLocaleLowerCase())
+  const handleSortChange = useCallback(
+    (sortKey) => {
+      setSearchParams(
+        (prev) => {
+          const newParams = new URLSearchParams(prev);
+          newParams.set("orderBy", sortKey);
+          newParams.set("page", "1");
+          return newParams;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
   );
 
-  const onSearch = (term) => {
-    setSearchTerm(term);
-  };
+  const handlePageChange = useCallback(
+    (newPage) => {
+      setSearchParams((prev) => {
+        const params = new URLSearchParams(prev);
+        params.set("page", String(newPage));
+        return params;
+      });
+    },
+    [setSearchParams]
+  );
 
   return (
     <>
@@ -78,30 +103,30 @@ const AllProducts = () => {
               </Link>
             </div>
             <div className={styles.mobileControlRow}>
-              <SearchBar searchTerm={searchTerm} onSearch={onSearch} />
-              <SortSelector onChange={setOrderBy} />
+              <SearchBar onSearch={onSearch} keyword={keyword} />
+              <SortSelector value={orderBy} onChange={handleSortChange} />
             </div>
           </div>
         ) : (
           <div className={styles.topBarContainer}>
             <h2 className={styles.sectionTitle}>전체 상품</h2>
             <div className={styles.controlsRow}>
-              <SearchBar searchTerm={searchTerm} onSearch={onSearch} />
+              <SearchBar onSearch={onSearch} keyword={keyword} />
               <Link to={"/additem"} className={styles.buttonLink}>
                 <button className={styles.addItemButton}>상품 등록하기</button>
               </Link>
-              <SortSelector onChange={(sortKey) => setOrderBy(sortKey)} />
+              <SortSelector value={orderBy} onChange={handleSortChange} />
             </div>
           </div>
         )}
         <div className={styles.productList}>
-          {filteredData.map((item) => (
+          {products.map(({ id, images, name, price, favoriteCount }) => (
             <ProductCard
-              key={item.id}
-              imageUrl={item.images?.[0]}
-              title={item.name}
-              price={item.price}
-              likes={item.favoriteCount}
+              key={id}
+              imageUrl={images?.[0]}
+              title={name}
+              price={price}
+              likes={favoriteCount}
               variant="all"
             />
           ))}
@@ -111,7 +136,7 @@ const AllProducts = () => {
         currentPage={page}
         totalCount={totalCount}
         pageSize={pageSize}
-        onPageChange={setPage}
+        onPageChange={handlePageChange}
       />
     </>
   );

src/components/Header/Header.jsx

@@ -1,13 +1,16 @@
-import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink, useLocation } from "react-router-dom";
 import styles from "./Header.module.css";
 
-const getLinkStyle = ({ isActive }) => {
-  return {
-    color: isActive ? "#3692ff" : "inherit",
+const Header = () => {
+  const location = useLocation();
+
+  const getLinkStyle = ({ isActive }) => {
+    const isAddItemPage = location.pathname === "/additem";
+    return {
+      color: isActive || isAddItemPage ? "#3692ff" : "inherit",
+    };
   };
-};
 
-const Header = () => {
   return (
     <div className={styles.header}>
       <div className={styles.container}>

src/components/ImageUpload/ImageUpload.jsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import plusIcon from "./../../assets/icon/plus-icon.svg";
+import closeIcon from "./../../assets/icon/close-icon.svg";
+import styles from "./ImageUpload.module.css";
+
+const ImageUpload = ({ image, onImageChange }) => {
+  const [error, setError] = useState("");
+
+  const handleChange = (e) => {
+    const file = e.target.files[0];
+
+    if (!file) return;
+
+    if (image) {
+      setError("*이미지 등록은 최대 1개까지 가능합니다.");
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setError("");
+      onImageChange(reader.result);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleRemove = () => {
+    setError("");
+    onImageChange(null);
+  };
+
+  return (
+    <div className={styles.imageUpload}>
+      <h2 className={styles.label}>상품 이미지</h2>
+      <div className={styles.imageRow}>
+        <label className={styles.uploadBox}>
+          <img src={plusIcon} alt="추가 아이콘" className={styles.plus} />
+          <p className={styles.text}>이미지 등록</p>
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleChange}
+            className={styles.uploadInput}
+          />
+        </label>
+
+        {image && (
+          <div className={styles.previewBox}>
+            <img src={image} alt="미리보기" className={styles.previewImage} />
+            <button onClick={handleRemove} className={styles.removeButton}>
+              <img src={closeIcon} alt="닫기 아이콘" className={styles.close} />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {error && <p className={styles.error}>{error}</p>}
+    </div>
+  );
+};
+
+export default ImageUpload;

src/components/ImageUpload/ImageUpload.module.css

@@ -0,0 +1,91 @@
+.imageUpload {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 588px;
+  gap: 16px;
+}
+
+.label {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  color: #1f2937;
+}
+
+.imageRow {
+  display: flex;
+  width: 100%;
+  gap: 24px;
+}
+
+.uploadBox {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 282px;
+  height: 282px;
+  border-radius: 12px;
+  background-color: #f3f4f6;
+  gap: 12px;
+  cursor: pointer;
+}
+
+.plus {
+  width: 48px;
+  height: auto;
+}
+
+.text {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  color: #9ca3af;
+}
+
+.uploadInput {
+  display: none;
+}
+
+.previewBox {
+  position: relative;
+  width: 100%;
+  max-width: 282px;
+  height: 282px;
+}
+
+.previewImage {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #f9fafb;
+  border-radius: 12px;
+  object-fit: cover;
+}
+
+.removeButton {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  cursor: pointer;
+}
+
+.error {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  color: #f74747;
+}
+
+@media (max-width: 1023px) {
+  .uploadBox {
+    max-width: 168px;
+    height: 168px;
+  }
+
+  .previewBox {
+    max-width: 168px;
+    height: 168px;
+  }
+}

src/components/ItemDescription/ItemDescription.jsx

@@ -0,0 +1,23 @@
+import { useId } from "react";
+import styles from "./ItemDescription.module.css";
+
+const ItemDescription = ({ value, onChange }) => {
+  const id = useId();
+
+  return (
+    <div className={styles.itemDescription}>
+      <label htmlFor={id} className={styles.label}>
+        상품 소개
+      </label>
+      <textarea
+        id={id}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="상품 소개를 입력해주세요"
+        className={styles.textarea}
+      />
+    </div>
+  );
+};
+
+export default ItemDescription;