/store -> /store/search 카테고리별 검색 기능 구현

New-Syatte · Feb 16, 2024 · b9e38c5 · b9e38c5
1 parent d85b1b8
commit b9e38c5
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 15 deletions.
diff --git a/src/app/(product)/store/BrandsSlider.tsx b/src/app/(product)/store/BrandsSlider.tsx
@@ -9,35 +9,41 @@ import MidasMetalLogo from "@/assets/product/midas-metal-logo-inverted.png";
 import MetalEffectLogo from "@/assets/product/metal-effect-logo.png";
 import ColorFastLogo from "@/assets/product/color-fast-logo.png";
 import Image from "next/image";
+import CategoryToSearchLink from "./CategoryToSearchLink";
 
 const slideData = [
   {
     id: 1,
     title: "상품 전체",
+    query: "",
     imageUrl: SyattLogo,
     to: "/store/all",
   },
   {
     id: 2,
     title: "모던마스터즈",
+    query: "modernMasters",
     imageUrl: ModernMastersLogo,
     to: "/store/modern-masters",
   },
   {
     id: 3,
     title: "마이다스메탈",
+    query: "midasMetal",
     imageUrl: MidasMetalLogo,
     to: "/store/midas-metal",
   },
   {
     id: 4,
     title: "메탈이펙트",
+    query: "metalEffect",
     imageUrl: MetalEffectLogo,
     to: "/store/metal-effect",
   },
   {
     id: 5,
     title: "컬러패스트",
+    query: "colorFast",
     imageUrl: ColorFastLogo,
     to: "/store/color-fast",
   },
@@ -53,19 +59,22 @@ const BrandSlider = () => {
   return (
     <Slider {...settings}>
       {slideData.map(slide => (
-        <div
+        <CategoryToSearchLink
           key={slide.id}
-          className="flex flex-col w-56 h-auto items-center justify-center mx-2"
+          to="/store/search"
+          searchQuery={slide.query}
         >
-          <div className="flex w-56 h-32 justify-center items-center border border-stone-300 rounded-lg  relative">
-            <div className="flex relative justify-center items-center w-32">
-              <Image src={slide.imageUrl} alt="brandLogo" />
+          <div className="flex flex-col w-56 h-auto items-center justify-center mx-2">
+            <div className="flex w-56 h-32 justify-center items-center border border-stone-300 rounded-lg  relative">
+              <div className="flex relative justify-center items-center w-32">
+                <Image src={slide.imageUrl} alt="brandLogo" />
+              </div>
+            </div>
+            <div className="text-center text-black text-lg font-bold mt-5">
+              {slide.title}
             </div>
           </div>
-          <div className="text-center text-black text-lg font-bold mt-5">
-            {slide.title}
-          </div>
-        </div>
+        </CategoryToSearchLink>
       ))}
     </Slider>
   );

diff --git a/src/app/(product)/store/CategoryToSearchLink.tsx b/src/app/(product)/store/CategoryToSearchLink.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import Link from "next/link";
+import { useDispatch } from "react-redux";
+import { setSearchQuery } from "@/redux/slice/searchSlice";
+
+interface CategoryToSearchLinkProps {
+  to: string;
+  searchQuery: string;
+  [x: string]: any;
+  children: React.ReactNode;
+}
+const CategoryToSearchLink = ({
+  to,
+  searchQuery,
+  children,
+  ...restProps
+}: CategoryToSearchLinkProps) => {
+  const dispatch = useDispatch();
+  const handleSearch = () => {
+    dispatch(setSearchQuery(searchQuery));
+  };
+  return (
+    <Link href={to} {...restProps} onClick={handleSearch}>
+      {children}
+    </Link>
+  );
+};
+
+export default CategoryToSearchLink;
diff --git a/src/app/(product)/store/ProductBanner.tsx b/src/app/(product)/store/ProductBanner.tsx
@@ -1,16 +1,21 @@
 import Image from "next/image";
 import Banner1 from "@/assets/product/Product-Banner1.png";
 import Banner2 from "@/assets/product/Product-Banner2.png";
+import CategoryToSearchLink from "./CategoryToSearchLink";
 
 const ProductBanner = () => {
   const banners = [
-    { img: Banner1, title: "메탈이펙트" },
-    { img: Banner2, title: "컬러패스트" },
+    { img: Banner1, title: "메탈이펙트", query: "metalEffect" },
+    { img: Banner2, title: "컬러패스트", query: "colorFast" },
   ];
   return (
     <div className="flex gap-5 mt-24">
       {banners.map((banner, index) => (
-        <div key={index}>
+        <CategoryToSearchLink
+          key={index}
+          to="/store/search"
+          searchQuery={banner.query}
+        >
           <div className="w-[644px] h-[245px] relative bg-zinc-700 rounded-[10px]">
             <div className="left-[40px] top-[47px] absolute text-white text-[50px] font-bold">
               {banner.title}
@@ -28,7 +33,7 @@ const ProductBanner = () => {
               <Image src={banner.img} alt="product-banner" fill />
             </div>
           </div>
-        </div>
+        </CategoryToSearchLink>
       ))}
     </div>
   );

diff --git a/src/app/(product)/store/page.tsx b/src/app/(product)/store/page.tsx
@@ -4,6 +4,7 @@ import { getProducts } from "@/services/sanity/products";
 import BrandSlider from "./BrandsSlider";
 import Heading from "@/components/heading/Heading";
 import ProductBanner from "./ProductBanner";
+import CategoryToSearchLink from "./CategoryToSearchLink";
 
 export default async function Products({}) {
   const products = await getProducts();
@@ -27,9 +28,13 @@ export default async function Products({}) {
           <div key={index}>
             <div className="flex justify-between items-end mb-12">
               <Heading title={categorys[index].title} fontSize="[40px]" />
-              <div className="mb-4 text-center text-black text-lg font-bold">
+              <CategoryToSearchLink
+                to="/store/search"
+                searchQuery={categorys[index].value}
+                className="mb-4 text-center text-black text-lg font-bold"
+              >
                 {"상품 더보기 >"}
-              </div>
+              </CategoryToSearchLink>
             </div>
             <ProductsByCategory
               key={category}