클라이언트, 서버 컴포넌트 분리 및 디자인 수정

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

@@ -42,6 +42,7 @@ export default function Layout({
         <Text typography="h2" className="mb-6 text-center">
           {categoryName}
         </Text>
+        {children}
         {categoryName === 'MacBook Air' || categoryName === 'MacBook Pro' ? (
           <>
             <Text typography="h4">오늘의 할인율 TOP5</Text>
@@ -55,7 +56,6 @@ export default function Layout({
             </ErrorBoundary>
           </>
         ) : null}
-        {children}
       </div>
       <FixedBottomNavbar />
     </div>

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

@@ -51,7 +51,7 @@ export default function SearchResult({ params }: { params: { categoryName: Categ
         <SearchResultList category={params.categoryName} params={filterProperty} />
       </Suspense>
       {!(categoryName === 'AirPods') ? (
-        <Filter title="필터 재설정" category={params.categoryName} variant={true} />
+        <Filter title="필터 재설정" category={params.categoryName} variant={false} />
       ) : null}
     </div>
   );

src/app/(iTracker)/login/page.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import KakaoLogin from '@/features/auth/components/KakaoLogin';
 import { Loading } from '@/shared/components/Loading';
 import { Suspense } from 'react';

src/app/(iTracker)/my/page.tsx

@@ -9,9 +9,14 @@ export default function MyPage() {
         <UserProfile />
       </div>
       <Text typography="h4">알림상품</Text>
-      <Text typography="p" className="md:text-lg text-gray-500">
-        가격이 변할 때마다 카카오톡 알림을 보내드려요!
-      </Text>
+      <div className="flex flex-wrap gap-1">
+        <Text typography="small" className="text-gray-500">
+          가격이 변할 때마다
+        </Text>
+        <Text typography="small" className="text-gray-500">
+          매일 18시에 카카오톡 알림을 보내드려요!
+        </Text>
+      </div>
       <FavoritesList />
     </div>
   );

src/app/(iTracker)/page.tsx

@@ -1,14 +1,15 @@
 import { MainProductList } from '@/features/product/components/main';
 import { ProductListSkeleton } from '@/features/search/components/searchResult/Skeleton';
 import { FixedBottomNavbar } from '@/shared/components/FixedBottomNavbar';
+import Footer from '@/shared/components/Footer';
 import { Text } from '@/shared/components/shadcn/Text';
 import { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 export default function Home() {
   return (
     <>
-      <div className="flex-1 w-full flex flex-col py-8 border-gray-200">
+      <div className="flex-1 w-full flex flex-col py-2 border-gray-200">
         <Text typography="h4">전체 상품 할인율 TOP10</Text>
         <Text typography="p" className="md:text-lg text-gray-500">
           전체 상품 중 오늘 할인율이 가장 높은 상품 리스트
@@ -19,6 +20,7 @@ export default function Home() {
           </Suspense>
         </ErrorBoundary>
       </div>
+      <Footer />
       <FixedBottomNavbar />
     </>
   );

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

@@ -13,7 +13,7 @@ export const generateMetadata = async ({
 
   return getMetadata({
     title: `iTracker | ${categoryName}`,
-    asPath: `/products/${categoryName}/${params.productId}`,
+    asPath: `/products/${params.category}/${params.productId}`,
   });
 };
 

src/features/my/components/FavoritesList/index.tsx

@@ -7,7 +7,7 @@ import { AirpodsSearchItem } from '@/features/search/components/searchResult/Ite
 import { Text } from '@/shared/components/shadcn/Text';
 import { Button } from '@/shared/components/shadcn/ui/button';
 import { useRouter } from 'next/navigation';
-import { getMainPageLink } from '@/shared/lib/link/page';
+import { getCategoryPageLink } from '@/shared/lib/link/page';
 
 const FavoritesList = () => {
   const { data: favorites } = useGetFavorites();
@@ -23,7 +23,7 @@ const FavoritesList = () => {
           <Button
             size="sm"
             onClick={() => {
-              router.push(getMainPageLink());
+              router.push(`${getCategoryPageLink()}/macbook_air`);
             }}
           >
             상품등록 하러가기

src/features/product/api/getProductList.ts

@@ -23,6 +23,7 @@ export type Product = {
   label: boolean;
   imageUrl: string;
   isOutOfStock: boolean;
+  notificationCount: number;
 };
 
 export type Macbook = Product & {

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

@@ -1,4 +1,4 @@
-import { ProductItemSkeleton } from './Item/Skeleton';
+import { ProductItemSkeleton } from '@/features/search/components/searchResult/Item/Skeleton';
 
 export const MacbookProductListSkeleton = () => {
   const items = Array.from({ length: 5 }, (_, i) => <ProductItemSkeleton key={i} />);

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

@@ -2,16 +2,16 @@
 
 import { CategoryType } from '@/features/category/constants';
 import { useGetProductList } from '../../hooks/useGetProductList';
-import { MacbookProductListItem } from './Item';
+import { MacbookSearchItem } from '@/features/search/components/searchResult/Item/MacbookSearchItem';
 
 export const MacbookProductList = ({ category }: { category: CategoryType }) => {
   const { data: productData } = useGetProductList(category);
 
   return (
     <div>
-      <ul className="whitespace-nowrap overflow-x-auto flex gap-6 md:gap-12 my-8">
+      <ul className="overflow-x-auto flex gap-6 md:gap-12 my-6">
         {productData?.data.map((productItem, index) => {
-          return <MacbookProductListItem key={productItem.id} productItem={productItem} rank={index} />;
+          return <MacbookSearchItem key={productItem.id} productItem={productItem} rank={index} />;
         })}
       </ul>
     </div>

src/features/productDetail/components/ProductDetail/index.tsx

@@ -21,7 +21,7 @@ export const ProductDetail = ({ productId, category }: { productId: number; cate
 
   return (
     <div>
-      <div className="mb-8 w-fit">
+      <div className="mb-8">
         <div className="flex flex-col items-start md:flex-row md:items-center gap-12 md:gap-16">
           <div className="flex items-center md:flex-col md:items-start gap-12 md:gap-4">
             <div className="w-auto h-full rounded-md border-gray-200 border">
@@ -62,20 +62,19 @@ export const ProductDetail = ({ productId, category }: { productId: number; cate
           </div>
 
           <div className="w-full">
+            {data.label === true ? (
+              <Badge label={'역대 최저가'} />
+            ) : (
+              <div className="inline-flex py-1 px-2 mt-4 mb-2"></div>
+            )}
             <div className="flex flex-col gap-4">
-              <div className="flex items-center gap-2">
-                <Text typography="small" className="pt-1">
-                  전체 평균가 대비
-                </Text>
-                <DiscountBadge discountPercentage={data.discountPercentage} />
-              </div>
-
               <div>
-                {data.label === true ? (
-                  <Badge label={'역대 최저가'} />
-                ) : (
-                  <div className="inline-flex py-1 px-2 mt-4 mb-2"></div>
-                )}
+                <div className="flex items-center gap-2">
+                  <Text typography="small" className="pb-1">
+                    전체 평균가 대비
+                  </Text>
+                  <DiscountBadge discountPercentage={data.discountPercentage} />
+                </div>
                 <Text typography="p" className="text-gray-500">
                   현재가
                 </Text>
@@ -122,23 +121,28 @@ export const ProductDetail = ({ productId, category }: { productId: number; cate
                 />
               </div>
             </Suspense>
+            <Suspense>
+              <Notification productId={data.id} category={data.category} isFavorite={data.isFavorite} />
+            </Suspense>
+            <Text typography="small" className="block text-end my-2 text-gray-500">
+              {data.notificationCount ?? 0}명이 이미 알림을 받고 있어요!
+            </Text>
           </div>
         </div>
 
-        <Suspense>
-          <Notification productId={data.id} category={data.category} isFavorite={data.isFavorite} />
-        </Suspense>
-
         <div className="mt-12 mb-24">
-          <Text typography="small" className="text-[12px] block text-center md:text-end">
+          <Text typography="small" className="text-[12px] block text-start md:text-end">
             이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
           </Text>
-          <Text className="text-[10px] block text-center md:text-end">
+          <Text className="text-[10px] block text-start md:text-end mt-2">
             * 쿠팡 정보와 동일하지 않을 수 있으니 쿠팡에서 가격을 직접 확인 후 이용바랍니다.
           </Text>
+          <Text className="text-[10px] block text-start md:text-end">
+            * 발생한 수익은 아이트래커 서비스를 무료로 운영하기 위해 사용됩니다.
+          </Text>
         </div>
       </div>
-      <FixedBottomButton title="🚀 구매하러가기" link={data.coupangUrl} bgColor="#EF6253" />
+      <FixedBottomButton title="🚀 구매하러가기" link={data.coupangUrl} bgColor="bg-badge" />
     </div>
   );
 };

src/features/productDetail/hooks/useDeleteFavorites.ts

@@ -11,6 +11,7 @@ export const useDeleteFavorites = (productId: number, category: CategoryType) =>
     mutationFn: () => patchFavorites(productId, category),
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ['favorites'] });
+      await queryClient.refetchQueries({ queryKey: ['productDetail'] });
     },
     onError: () => {
       alert('삭제에 실패했습니다.');

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

@@ -20,6 +20,7 @@ import { Text } from '@/shared/components/shadcn/Text';
 import { Label } from '@radix-ui/react-label';
 import { useRouter } from 'next/navigation';
 import queryString from 'query-string';
+import { SearchIcon } from '@/shared/assets/Icons';
 
 export const Filter = ({ title, category, variant }: { title: string; category: CategoryType; variant: boolean }) => {
   const categoryName = categoryMap[category];
@@ -68,8 +69,9 @@ export const Filter = ({ title, category, variant }: { title: string; category:
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button className="my-4" variant={variant ? 'outline' : 'default'}>
-          <Text typography="xsmall" className="md:text-sm">
+        <Button className="ml-auto w-[105px] my-4 bg-badge" variant={variant ? 'outline' : 'default'}>
+          <Text typography="xsmall" className="md:text-sm flex items-center gap-1">
+            <SearchIcon width={14} height={14} />
             {title}
           </Text>
         </Button>

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

@@ -81,6 +81,9 @@ export const AirpodsSearchItem = ({ productItem, rank, isFavoriteItem = false }:
               {convertToLocalFormat(productItem.currentPrice)}원
             </Text>
           </div>
+          <Text typography="xsmall" className="text-gray-500">
+            {productItem.notificationCount ?? 0}명이 알림 받는 중
+          </Text>
         </div>
       </Link>
     </li>

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

@@ -34,7 +34,7 @@ export const MacbookSearchItem = ({ productItem, rank, isFavoriteItem = false }:
   };
 
   return (
-    <li className={`w-full mb-5 ${disabledStyles(productItem.isOutOfStock)}`}>
+    <li className={`min-w-[150px] w-full mb-5 ${disabledStyles(productItem.isOutOfStock)}`}>
       <Link
         href={`${getProductDetailUrl(productItem.category)}/${productItem.id}`}
         className="flex flex-col gap-2 cursor-pointer"
@@ -101,6 +101,9 @@ export const MacbookSearchItem = ({ productItem, rank, isFavoriteItem = false }:
               {convertToLocalFormat(productItem.currentPrice)}원
             </Text>
           </div>
+          <Text typography="xsmall" className="text-gray-500">
+            {productItem.notificationCount ?? 0}명이 알림 받는 중
+          </Text>
         </div>
       </Link>
     </li>

src/shared/assets/Icons.tsx

@@ -60,3 +60,14 @@ export function TrashCanIcon(props: SVGProps<SVGSVGElement>) {
     </svg>
   );
 }
+
+export function SearchIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={props.width} height={props.width} viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
+      ></path>
+    </svg>
+  );
+}

src/shared/components/FixedBottomButton/index.tsx

@@ -8,7 +8,7 @@ interface FixedBottomButtonProps {
 }
 
 export const FixedBottomButton = ({ title, link, bgColor }: FixedBottomButtonProps) => {
-  const bgColorStyles = bgColor ? `bg-[${bgColor}]` : '';
+  const bgColorStyles = bgColor ? bgColor : null;
 
   return (
     <>