[한장희] sprint6

vite-project/src/App.jsx

@@ -3,14 +3,20 @@ import "./App.css";
 import ProductList from "./pages/ProductList";
 import Home from "./pages/Home";
 import NotFound from "./pages/NotFound";
+import Header from "./components/common/Header";
+import AddItems from "./pages/AddItems";
+import Layout from "./components/style/Layout";
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<Home />}></Route>
-        <Route path="/items" element={<ProductList />}></Route>
-        <Route path="*" element={<NotFound />}></Route>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />}></Route>
+          <Route path="/items" element={<ProductList />}></Route>
+          <Route path="/additem" element={<AddItems />}></Route>
+          <Route path="*" element={<NotFound />}></Route>
+        </Route>
       </Routes>
     </BrowserRouter>
   );

vite-project/src/components/BestProductSection/BestProducts.jsx

@@ -0,0 +1,19 @@
+import { useResponsivePage } from "../../hooks/useResponsivePage";
+import ProductGrid from "../common/ProductGrid";
+
+const BestProducts = ({ products }) => {
+  const responsiveValues = useResponsivePage();
+
+  return (
+    <div className="flex flex-col gap-3 ">
+      <h2 className="text-xl font-bold ">베스트 상품</h2>
+      <ProductGrid
+        products={products}
+        gridSize={responsiveValues.bestPicContainerSize}
+        picSize={responsiveValues.bestPicSize}
+      />
+    </div>
+  );
+};
+
+export default BestProducts;

vite-project/src/components/ProductListSection/Container.jsx

@@ -7,31 +7,35 @@ import searchIcon from "../../assets/searchIcon.svg";
 import Dropdown from "./Dropdown";
 import { useResponsivePage } from "../../hooks/useResponsivePage";
 import { Link } from "react-router-dom";
+import { SORT_OPTIONS } from "../../constant/SORT_OPTIONS";
 
 const Container = ({ pageSize, isMobile }) => {
-  const [orderBy, setOrderBy] = useState("recent");
+  const [orderBy, setOrderBy] = useState(SORT_OPTIONS[0].value);
   const { setCurrentPage, getPageNumber, currentPage } = usePagination();
   const { products, totalProductCount } = useGetProducts({
     pageSize,
     orderBy,
     currentPage,
   });
-  const { normalPicSize, normalPicContainerSize } = useResponsivePage();
+  const ResponsiveValues = useResponsivePage();
 
-  const handleSelect = (e) => {
-    return setOrderBy(e.target.dataset.value);
+  const handleSelect = (val) => {
+    console.log("$$", val);
+    setOrderBy(val);
   };
-
   const { pages, totalPages } = getPageNumber(totalProductCount);
   return (
-    <div className="flex flex-col items-center gap-6 mt-6 max-w-[1200px] h-">
+    <div className="flex flex-col items-center gap-6 mt-6 max-w-[1200px]">
       {isMobile ? (
         <div className="flex flex-col w-full gap-4">
           <div className="flex justify-between">
             <h2 className="text-xl font-bold">전체 상품</h2>
-            <button className="px-6 py-3 text-white bg-blue-500 rounded-lg">
-              상품 등록하기
-            </button>
+            <Link
+              className="px-6 py-3 text-white bg-blue-500 rounded-lg"
+              to="/addItems"
+            >
+              상품등록하기
+            </Link>
           </div>
           <div className="flex w-full gap-3">
             <div className="flex items-center flex-1 gap-2">
@@ -46,7 +50,11 @@ const Container = ({ pageSize, isMobile }) => {
                   placeholder="검색할 상품을 입력해주세요"
                 />
               </div>
-              <Dropdown handleSelect={handleSelect} orderBy={orderBy} />
+              <Dropdown
+                onChange={handleSelect}
+                value={orderBy}
+                options={SORT_OPTIONS}
+              />
             </div>
           </div>
         </div>
@@ -74,17 +82,20 @@ const Container = ({ pageSize, isMobile }) => {
               >
                 상품등록하기
               </Link>
-
-              <Dropdown handleSelect={handleSelect} orderBy={orderBy} />
+              <Dropdown
+                onChange={handleSelect}
+                value={orderBy}
+                options={SORT_OPTIONS}
+              />
             </div>
           </div>
         </div>
       )}
 
       <ProductGrid
         products={products}
-        picSize={normalPicSize}
-        gridSize={normalPicContainerSize}
+        picSize={ResponsiveValues.normalPicSize}
+        gridSize={ResponsiveValues.normalPicContainerSize}
       />
       <Pagination
         currentPage={currentPage}

vite-project/src/components/ProductListSection/Dropdown.jsx

@@ -2,52 +2,48 @@ import { useState } from "react";
 import arrow from "../../assets/arrow.svg";
 import dropdown from "../../assets/dropdown.svg";
 
-const VALUES = {
-  recent: "최신순",
-  favorite: "좋아요순",
-};
-
-const Dropdown = ({ handleSelect, orderBy }) => {
-  const [isDropdown, setIsDropdown] = useState(false);
-  const [dropdownValue, setDropdownValue] = useState(VALUES[orderBy]);
+const Dropdown = ({ onChange, options, value }) => {
+  const [open, setOpen] = useState(false);
+  const selected =
+    options.find((option) => option.value === value) ?? options[0];
 
-  const handleClick = (e) => {
-    handleSelect(e);
-    setDropdownValue(VALUES[e.target.dataset.value]);
+  const handleClick = (val) => {
+    onChange(val);
+    setOpen(false);
   };
 
   return (
     <div className="relative order-3 cursor-pointer">
       <div
-        onClick={() => setIsDropdown(!isDropdown)}
+        onClick={() => setOpen(!open)}
         className="hidden w-32 gap-4 px-5 py-3 border xs:flex rounded-xl"
       >
-        <span>{dropdownValue}</span>
+        <span>{selected.label}</span>
         <img src={arrow} alt="드롭다운 화살표 아이콘" />
       </div>
       <div
-        onClick={() => setIsDropdown(!isDropdown)}
+        onClick={() => setOpen(!open)}
         className="p-3 border rounded-xl xs:hidden"
       >
         <img src={dropdown} alt="드롭다운 아이콘" />
       </div>
-      {isDropdown && (
-        <div
-          className="absolute flex flex-col items-center w-32 bg-white border top-16 right-[2px] rounded-xl"
-          onClick={(e) => {
-            handleClick(e);
-            setIsDropdown(!isDropdown);
-          }}
-        >
-          <div className="flex justify-center w-full border-b ">
-            <span className="px-5 py-3" data-value="recent">
-              최신순
-            </span>
-          </div>
-          <span className="px-5 py-3" data-value="favorite">
-            좋아요순
-          </span>
-        </div>
+      {open && (
+        <ul className="absolute flex flex-col items-center w-32 bg-white border top-16 right-[2px] rounded-xl">
+          {options.map((option) => {
+            return (
+              <li
+                key={option.value}
+                className="w-full px-5 py-3 text-center hover:bg-gray-100"
+                onClick={() => {
+                  handleClick(option.value);
+                  console.log("$", option.value);
+                }}
+              >
+                {option.label}
+              </li>
+            );
+          })}
+        </ul>
       )}
     </div>
   );

vite-project/src/components/addItem/Input.jsx

@@ -0,0 +1,68 @@
+import { INPUT_TYPE_STYLE } from "./InputClasses";
+
+const Input = ({
+  inputTypeStyle = "basic",
+  as,
+  type,
+  id,
+  imgUrl,
+  onChange,
+  onClick,
+  onKeyDown,
+  ...props
+}) => {
+  const styleClass = INPUT_TYPE_STYLE[inputTypeStyle] || "";
+  const Component = as || "input";
+
+  return (
+    <div>
+      {type === "file" ? (
+        <div className="flex gap-8">
+          <div className="flex flex-col gap-4">
+            <label className={`${styleClass} bg-gray-100 cursor-pointer`}>
+              <img src={props.src} alt={props.alt} />
+              <Component
+                accept="image/*"
+                type={type}
+                {...props}
+                id={id}
+                className="hidden"
+                onChange={onChange}
+              />
+            </label>
+            {imgUrl && (
+              <p className="text-red-400">
+                *이미지 등록은 최대 1개까지 가능합니다
+              </p>
+            )}
+          </div>
+          {imgUrl && (
+            <div className="relative">
+              <img
+                src={imgUrl}
+                alt="잠시대기"
+                className="h-[282px] rounded-xl object-cover aspect-square"
+              />
+              <img
+                src="/ic_X.svg"
+                alt="X 아이콘"
+                className="absolute cursor-pointer top-3 right-3"
+                onClick={() => onClick()}
+              />
+            </div>
+          )}
+        </div>
+      ) : (
+        <Component
+          className={`${styleClass} bg-gray-100`}
+          type={type}
+          onKeyDown={onKeyDown}
+          onChange={onChange}
+          {...props}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Input;

vite-project/src/components/addItem/InputClasses.js

@@ -0,0 +1,6 @@
+export const INPUT_TYPE_STYLE = {
+  basic: "px-6 py-4 rounded-xl h-[56px] w-full",
+  textarea: "px-6 py-4 rounded-xl h-[282px] w-full self-start ",
+  image:
+    "h-[282px] rounded-xl object-cover aspect-square flex items-center justify-center ",
+};

vite-project/src/components/common/ButtonClasses.js

@@ -0,0 +1,4 @@
+export const BTN_STYLE_TYPE = {
+  active: "rounded-lg px-[23px] py-3  bg-blue-500 text-white",
+  inactive: "bg-gray-400 rounded-lg px-[23px] py-3 text-white",
+};

vite-project/src/components/common/ButtonLink.jsx

@@ -0,0 +1,14 @@
+import { BTN_STYLE_TYPE } from "./ButtonClasses";
+
+const ButtonLink = ({ btnStyle = "inactive", as, children, ...props }) => {
+  const Component = as || "button";
+  const btnTypeClass = BTN_STYLE_TYPE[btnStyle] || "";
+
+  return (
+    <Component className={`${btnTypeClass}`} {...props}>
+      {children}
+    </Component>
+  );
+};
+
+export default ButtonLink;

vite-project/src/components/common/ProductGrid.jsx

@@ -1,6 +1,6 @@
 import ProductCard from "./ProductCard";
-import { GRID_SIZES } from "./ProductGridTokens";
-import { PIC_SIZES } from "./ProductGridTokens";
+import { GRID_SIZES } from "./ProductGridClasses";
+import { PIC_SIZES } from "./ProductGridClasses";
 
 const ProductGrid = ({
   gridSize = "grid224",

vite-project/src/components/style/Layout.jsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+import Header from "../common/Header";
+
+const Layout = () => {
+  return (
+    <div>
+      <Header />
+      <main className="max-w-screen-xl px-4 mt-6 md:px-6 md:mx-auto">
+        <Outlet />
+      </main>
+    </div>
+  );
+};
+
+export default Layout;

vite-project/src/constant/INPUT_OPTIONS.js

@@ -0,0 +1,38 @@
+export const INPUT_OPTIONS = [
+  {
+    id: "product_image",
+    title: "상품 이미지",
+    inputType: "file",
+    inputTypeStyle: "image",
+    src: "/ic_plus.svg",
+    alt: "십자가 모양 아이콘",
+  },
+  {
+    id: "product_name",
+    title: "상품명",
+    inputType: "input",
+    placeholder: "상품명을 입력해주세요",
+    inputTypeStyle: "basic",
+  },
+  {
+    id: "product_description",
+    title: "상품 소개",
+    placeholder: "상품 소개를 입력해주세요",
+    inputTypeStyle: "textarea",
+    tagName: "textarea",
+  },
+  {
+    id: "sales_price",
+    title: "판매가격",
+    inputType: "input",
+    placeholder: "판매 가격을 입력해주세요",
+    inputTypeStyle: "basic",
+  },
+  {
+    id: "hashtag",
+    title: "태그",
+    inputType: "input",
+    placeholder: "태그를 입력해주세요",
+    inputTypeStyle: "basic",
+  },
+];