레이아웃 디자인 수정 및 필터 재설정시 모달 닫히지 않는 오류 수정

.github/workflows/deploy_prod.yml

@@ -3,6 +3,9 @@ on:
   pull_request:
     branches:
       - dev
+  push:
+    branches:
+      - deploytest
 
 env:
   S3_BUCKET_NAME: itracker-front

src/app/(iTracker)/products/[categoryName]/layout.tsx

@@ -4,16 +4,6 @@ import { MacbookProductListSkeleton } from '@/features/product/components/macboo
 import { Text } from '@/shared/components/shadcn/Text';
 import React, { Suspense } from 'react';
 
-// export function generateStaticParams() {
-//   // const categoryData = await getCategoryList();
-
-//   const categories = ['macbook_air', 'macbook_pro'];
-
-//   return categories.map((category: string) => ({
-//     categoryName: category,
-//   }));
-// }
-
 export default function Layout({
   params,
   children,
@@ -24,8 +14,8 @@ export default function Layout({
   const categoryName = categoryMap[params.categoryName];
 
   return (
-    <div className="flex-1 w-full flex flex-col py-8">
-      <Text typography="h2" className="mb-8 text-center">
+    <div className="flex-1 w-full flex flex-col py-4">
+      <Text typography="h2" className="mb-6 text-center">
         {categoryName}
       </Text>
       <Text typography="h4">오늘의 할인율 TOP5</Text>

src/app/(iTracker)/products/[categoryName]/search/page.tsx

@@ -27,6 +27,7 @@ export default function SearchResult({ params }: { params: { categoryName: Categ
       ref.current.scrollIntoView({ behavior: 'smooth' }); // 스무스 스크롤링 효과 추가
     }
   });
+
   return (
     <div className="flex-1 w-full flex flex-col py-10 border-gray-200 border-t-[1px]" ref={ref}>
       <div className="flex flex-wrap items-center">
@@ -45,7 +46,7 @@ export default function SearchResult({ params }: { params: { categoryName: Categ
       <Suspense fallback={<div>불러오는 중;</div>}>
         <SearchResultList category={params.categoryName} params={filterProperty} />
       </Suspense>
-      <Filter title="필터 재설정" category={params.categoryName} />
+      <Filter title="필터 재설정" category={params.categoryName} variant={true} />
     </div>
   );
 }

src/features/product/components/macbook/Item/Skeleton.tsx

@@ -2,12 +2,18 @@ import { Skeleton } from '@/shared/components/shadcn/ui/skeleton';
 
 export const ProductItemSkeleton = () => {
   return (
-    <li>
-      <div className="w-[160px] md:w-[200px] flex flex-col items-center gap-2 cursor-pointer">
-        <Skeleton className="flex items-center justify-center w-[160px] md:w-[200px] h-[170px] bg-neutral-100 rounded"></Skeleton>
-        <Skeleton className="w-[70px] h-[10px] rounded"></Skeleton>
+    <li className="w-full h-[430px]">
+      <div className="w-[180px] flex flex-col items-start gap-4">
+        <Skeleton className="flex items-center justify-center w-[180px] h-[120px] bg-neutral-100 rounded"></Skeleton>
+        <Skeleton className="w-[120px] h-[16px] rounded"></Skeleton>
+        <Skeleton className="w-[120px] h-[16px] rounded"></Skeleton>
         <Skeleton className="w-[70px] h-[10px] rounded"></Skeleton>
         <Skeleton className="w-[70px] h-[20px] rounded"></Skeleton>
+        <Skeleton className="w-[70px] h-[10px] rounded"></Skeleton>
+        <Skeleton className="w-[70px] h-[10px] rounded"></Skeleton>
+        <div>
+          <Skeleton className="w-[70px] h-[20px] rounded"></Skeleton>
+        </div>
       </div>
     </li>
   );

src/features/product/components/macbook/Item/index.tsx

@@ -1,6 +1,7 @@
 import { categoryMap } from '@/features/category/constants';
 import { Macbook } from '@/features/product/api/getProductList';
 import { Badge } from '@/shared/components/Badge';
+import DiscountBadge from '@/shared/components/DiscountBadge';
 import { Text } from '@/shared/components/shadcn/Text';
 import { convertToLocalFormat } from '@/shared/utils';
 import Image from 'next/image';
@@ -16,7 +17,7 @@ export const MacbookProductListItem = ({ productItem }: ProductItemProps) => {
   return (
     <li className="w-full">
       <Link href="" className="flex flex-col gap-2 cursor-pointer">
-        <div className="flex items-center justify-center w-full h-full rounded-md">
+        <div className="flex items-center justify-center w-auto h-full rounded-md border-gray-200 border">
           <Image
             src={productItem.imageUrl}
             alt={productItem.title}
@@ -30,36 +31,29 @@ export const MacbookProductListItem = ({ productItem }: ProductItemProps) => {
           <Text typography="p" className="font-bold leading-none">
             {categoryName}
           </Text>
-          <Text typography="p">{productItem.title}</Text>
+          <Text typography="small">{productItem.title}</Text>
         </div>
         <div>
-          <div className="flex items-center justify-center bg-slate-950 rounded-md w-[35px] h-[35px] text-white my-2">
-            <Text typography="small">{productItem.chip}</Text>
+          <div
+            className="flex items-center justify-center bg-slate-950 rounded-md w-[35px] h-[35px] text-white my-2"
+            style={{ whiteSpace: 'normal', overflow: 'hidden', textOverflow: 'ellipsis' }}
+          >
+            <Text typography="xsmall" className="text-center">
+              {productItem.chip}
+            </Text>
           </div>
           <div className="flex flex-col gap-1">
-            <Text typography="small" className="font-bold">
-              {productItem.cpu}
-            </Text>
-            <Text typography="small" className="font-bold">
-              {productItem.gpu}
-            </Text>
-            <Text typography="small" className="font-bold">
-              {productItem.storage}
-            </Text>
-            <Text typography="small" className="font-bold">
-              {productItem.memory}
-            </Text>
-            <Text typography="small" className="font-bold">
-              {productItem.color}
-            </Text>
+            <Text typography="small">{productItem.cpu}</Text>
+            <Text typography="small">{productItem.gpu}</Text>
+            <Text typography="small">{productItem.storage}</Text>
+            <Text typography="small">{productItem.memory}</Text>
+            <Text typography="small">{productItem.color}</Text>
           </div>
           <div className="flex items-center gap-2 mt-4">
-            <div className="flex items-center justify-center bg-red-200 w-[30px] h-[20px] rounded">
-              <Text typography="xsmall" className="text-red-600 font-bold">
-                {productItem.discountPercentage}%
-              </Text>
-            </div>
-            <Text typography="h4">{convertToLocalFormat(productItem.currentPrice)}원</Text>
+            <DiscountBadge discountPercentage={productItem.discountPercentage} />
+            <Text typography="p" className="font-bold">
+              {convertToLocalFormat(productItem.currentPrice)}원
+            </Text>
           </div>
         </div>
       </Link>

src/features/product/components/macbook/Skeleton.tsx

@@ -4,8 +4,8 @@ export const MacbookProductListSkeleton = () => {
   const items = Array.from({ length: 5 }, (_, i) => <ProductItemSkeleton key={i} />);
 
   return (
-    <div className="max-w-[1080px] mx-auto pt-8">
-      <ul className="grid grid-cols-2 md:grid-cols-5 gap-8">{items}</ul>
+    <div>
+      <ul className="whitespace-nowrap overflow-x-auto flex gap-6 my-6">{items}</ul>
     </div>
   );
 };

src/features/product/components/macbook/index.tsx

@@ -9,7 +9,7 @@ export const MacbookProductList = ({ category }: { category: CategoryType }) =>
 
   return (
     <div>
-      <ul className="whitespace-nowrap overflow-x-auto flex gap-6 my-6">
+      <ul className="whitespace-nowrap overflow-x-auto flex gap-6 md:gap-12 my-6">
         {productData?.data.map((productItem) => {
           return <MacbookProductListItem key={productItem.id} productItem={productItem} />;
         })}

src/features/search/api/getSearchResult.ts

@@ -8,18 +8,25 @@ export type GetSearchResultResponse = {
   pageInfo: {
     currentPage: number;
     lastPage: number;
+    elementSize: number;
   };
 };
 
 export const getSearchResultUrl = (category: string) => `${API_BASE_URL}/api/v1/products/${category}/search`;
 
-export const getSearchResult = async (category: string, property: FilterProperty): Promise<GetSearchResultResponse> => {
+export const getSearchResult = async (
+  category: string,
+  property: FilterProperty,
+  pageParam: number,
+): Promise<GetSearchResultResponse> => {
   const queryParams = queryString.stringify(property, { arrayFormat: 'comma' });
+  const pageParams = queryString.stringify({ page: pageParam }, { arrayFormat: 'comma' });
 
-  const url = `${getSearchResultUrl(category)}?${queryParams}`;
+  const url = `${getSearchResultUrl(category)}?${queryParams}&${pageParams}`;
 
   const response = await fetch(url);
 
   const data = (await response.json()) as GetSearchResultResponse;
+
   return data;
 };

src/features/search/components/filter/index.tsx

@@ -21,8 +21,9 @@ import { Label } from '@radix-ui/react-label';
 import { useRouter } from 'next/navigation';
 import queryString from 'query-string';
 
-export const Filter = ({ title, category }: { title: string; category: CategoryType }) => {
+export const Filter = ({ title, category, variant }: { title: string; category: CategoryType; variant: boolean }) => {
   const categoryName = categoryMap[category];
+  const [open, setOpen] = useState(false);
 
   const [initialFilters, setInitialFilters] = useState<FilterProperty>({});
   const [selectedFilters, setSelectedFilters] = useState<FilterProperty>({});
@@ -55,26 +56,21 @@ export const Filter = ({ title, category }: { title: string; category: CategoryT
   };
 
   const handleSubmitProperty = () => {
-    // const serchUrl = (category: string) => `${API_BASE_URL}/api/v1/products/${category}/search`;
-
     const queryParams = queryString.stringify(selectedFilters, { arrayFormat: 'comma' });
-
-    // const url = `${serchUrl(category)}?${queryParams}`;
-
-    // const response = await fetch(url).then((res) => res.json());
-
-    // console.log(response);
-
-    // console.log(selectedFilters);
+    setOpen(false);
     router.push(`/products/${category}/search?${queryParams}`);
   };
 
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button className="my-4">{title}</Button>
+        <Button className="my-4" variant={variant ? 'outline' : 'default'}>
+          <Text typography="xsmall" className="md:text-sm">
+            {title}
+          </Text>
+        </Button>
       </DialogTrigger>
-      <DialogContent className="lg:max-w-[800px] max-h-[75vh] overflow-y-auto">
+      <DialogContent className="lg:max-w-[800px] max-h-[85vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>{categoryName} 상품 필터</DialogTitle>
           <DialogDescription>원하는 옵션을 선택 후 적용하기 버튼을 눌러주세요.</DialogDescription>

src/features/search/components/searchResult/Item/Skeleton.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from '@/shared/components/shadcn/ui/skeleton';
 
 export const ProductItemSkeleton = () => {
   return (
-    <li>
+    <li className="w-full">
       <div className="w-[150px] flex flex-col items-center gap-2 cursor-pointer">
         <Skeleton className="flex items-center justify-center w-[150px] h-[150px] bg-neutral-100 rounded"></Skeleton>
         <Skeleton className="w-[70px] h-[10px] rounded"></Skeleton>

src/features/search/components/searchResult/Item/index.tsx

@@ -1,6 +1,7 @@
 import { categoryMap } from '@/features/category/constants';
 import { Macbook } from '@/features/product/api/getProductList';
 import { Badge } from '@/shared/components/Badge';
+import DiscountBadge from '@/shared/components/DiscountBadge';
 import { Text } from '@/shared/components/shadcn/Text';
 import { convertToLocalFormat } from '@/shared/utils';
 import Image from 'next/image';
@@ -14,9 +15,9 @@ export const SearchResultItem = ({ productItem }: ProductItemProps) => {
   const categoryName = categoryMap[productItem.category];
 
   return (
-    <li className="w-full">
+    <li className="w-full mb-5">
       <Link href="" className="flex flex-col gap-2 cursor-pointer">
-        <div className="flex items-center justify-center w-full h-full rounded-md">
+        <div className="flex items-center justify-center w-auto h-full rounded-md border-gray-200 border">
           <Image
             src={productItem.imageUrl}
             alt={productItem.title}
@@ -30,36 +31,26 @@ export const SearchResultItem = ({ productItem }: ProductItemProps) => {
           <Text typography="p" className="font-bold leading-none">
             {categoryName}
           </Text>
-          <Text typography="p">{productItem.title}</Text>
+          <Text typography="small">{productItem.title}</Text>
         </div>
         <div>
           <div className="flex items-center justify-center bg-slate-950 rounded-md w-[35px] h-[35px] text-white my-2">
-            <Text typography="small">{productItem.chip}</Text>
+            <Text typography="xsmall" className="text-center">
+              {productItem.chip}
+            </Text>
           </div>
           <div className="flex flex-col gap-1">
-            <Text typography="small" className="font-bold">
-              {productItem.cpu}
-            </Text>
-            <Text typography="small" className="font-bold">
-              {productItem.gpu}
-            </Text>
-            <Text typography="small" className="font-bold">
-              {productItem.storage}
-            </Text>
-            <Text typography="small" className="font-bold">
-              {productItem.memory}
-            </Text>
-            <Text typography="small" className="font-bold">
-              {productItem.color}
-            </Text>
+            <Text typography="small">{productItem.cpu}</Text>
+            <Text typography="small">{productItem.gpu}</Text>
+            <Text typography="small">{productItem.storage}</Text>
+            <Text typography="small">{productItem.memory}</Text>
+            <Text typography="small">{productItem.color}</Text>
           </div>
           <div className="flex items-center gap-2 mt-4">
-            <div className="flex items-center justify-center bg-red-200 w-[30px] h-[20px] rounded">
-              <Text typography="xsmall" className="text-red-600 font-bold">
-                {productItem.discountPercentage}%
-              </Text>
-            </div>
-            <Text typography="h4">{convertToLocalFormat(productItem.currentPrice)}원</Text>
+            <DiscountBadge discountPercentage={productItem.discountPercentage} />
+            <Text typography="p" className="font-bold">
+              {convertToLocalFormat(productItem.currentPrice)}원
+            </Text>
           </div>
         </div>
       </Link>

src/features/search/components/searchResult/index.tsx

@@ -1,26 +1,46 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
 'use client';
 
 import { CategoryType } from '@/features/category/constants';
 import { useGetSearchResult } from '../../hooks/useSearchResult';
 import { FilterProperty } from '../../api/getFilterProperty';
-import queryString from 'query-string';
 import { SearchResultItem } from './Item';
+import { Button } from '@/shared/components/shadcn/ui/button';
+import { Text } from '@/shared/components/shadcn/Text';
 
 interface SearchResultProps {
   category: CategoryType;
   params: FilterProperty;
 }
 
 export const SearchResultList = ({ category, params }: SearchResultProps) => {
-  const { data: productData } = useGetSearchResult(category, params);
+  const { data, hasNextPage, fetchNextPage } = useGetSearchResult(category, params);
+  const productData = data.pages.map((page) => page.data).flat();
+
+  const handleClickNextPage = () => {
+    fetchNextPage();
+  };
+
+  console.log(hasNextPage);
 
   return (
-    <div className="max-w-[1080px] mx-auto">
-      <ul className="grid grid-cols-2 md:grid-cols-6 gap-8 my-6">
-        {productData?.data.map((productItem) => {
+    <div>
+      <ul className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 md:gap-12 my-6">
+        {productData.map((productItem) => {
           return <SearchResultItem key={productItem.id} productItem={productItem} />;
         })}
       </ul>
+      {hasNextPage ? (
+        <Button className="w-full" onClick={handleClickNextPage}>
+          더보기
+        </Button>
+      ) : (
+        <div className="flex justify-center my-4">
+          <Text typography="xsmall" className="text-center">
+            마지막 페이지입니다.
+          </Text>
+        </div>
+      )}
     </div>
   );
 };