[FEAT]: 홈/카테고리 상품 카드 찜하기 기능 확장

src/components/product/product-card.tsx

@@ -1,27 +1,48 @@
 import Link from 'next/link';
 import { Product } from '@/types/domain/product';
+import { WishlistButton } from './wishlist-button';
+
+type ProductWithWishlist = Product & {
+  isLiked?: boolean;
+  wishlistId?: number;
+};
 
 // 카드 UI 컴포넌트, 클릭 시 상세 페이지로 이동함.
 interface ProductCardProps {
-  product: Product;
+  product: ProductWithWishlist;
   detailFrom?: string;
+  showWishlistButton?: boolean;
 }
 
-export default function ProductCard({ product, detailFrom }: ProductCardProps) {
+export default function ProductCard({
+  product,
+  detailFrom,
+  showWishlistButton = false,
+}: ProductCardProps) {
   const href = detailFrom
     ? `/product/${product.id}?from=${encodeURIComponent(detailFrom)}`
     : `/product/${product.id}`;
 
   return (
     <Link href={href} className="block">
       <div className="font-pretendard flex w-41 flex-col gap-1">
-        <img
-          src={product.thumbnailImageUrl}
-          alt={product.name}
-          width={164}
-          height={170}
-          className="h-[170px] w-[164px] object-cover"
-        />
+        <div className="relative">
+          <img
+            src={product.thumbnailImageUrl}
+            alt={product.name}
+            width={164}
+            height={170}
+            className="h-[170px] w-[164px] object-cover"
+          />
+          {showWishlistButton && (
+            <WishlistButton
+              productId={product.id}
+              initialIsLiked={product.isLiked || false}
+              initialWishlistId={product.wishlistId}
+              className="absolute top-2 right-2"
+            />
+          )}
+        </div>
         <span className="font-extrabold">{product.brandName}</span>
         <span className="line-clamp-2 h-14 w-full overflow-hidden text-lg font-medium text-ellipsis">
           {product.name}

src/components/product/product-list-container.tsx

@@ -2,6 +2,7 @@ import { api } from '@/lib/api-client';
 import { ProductSearchResult } from '@/types/domain/product';
 import { ProductSortType } from '@/types/enums';
 import { ProductList } from './product-list';
+import { getMyWishlist } from '@/app/actions/wishlist';
 
 interface ProductListContainerProps {
   params: Promise<{ parentId: string; id: string }>;
@@ -35,22 +36,35 @@ export default async function ProductListContainer({
     throw new Error('Invalid category ID');
   }
 
-  const result = await api.get<ProductSearchResult>('/products', {
-    params: {
-      categoryId: safeCategoryId,
-      sortType: safeSortType,
-      page: safePage,
-      size: 20,
-    },
-  });
+  const [result, wishlistItems] = await Promise.all([
+    api.get<ProductSearchResult>('/products', {
+      params: {
+        categoryId: safeCategoryId,
+        sortType: safeSortType,
+        page: safePage,
+        size: 20,
+      },
+    }),
+    getMyWishlist(),
+  ]);
+
+  const wishlistByProductId = new Map(
+    wishlistItems.map((item) => [item.productId, item.wishlistId]),
+  );
+  const productsWithWishlist = result.products.content.map((product) => ({
+    ...product,
+    isLiked: wishlistByProductId.has(product.id),
+    wishlistId: wishlistByProductId.get(product.id),
+  }));
 
   const totalElements = result.products.totalElements;
 
   return (
     <ProductList
-      products={result.products.content}
+      products={productsWithWishlist}
       totalElements={totalElements}
       productDetailFrom={`/category/${parentId}/${subCategoryId}`}
+      showWishlistButton
     />
   );
 }

src/components/product/product-list.tsx

@@ -2,18 +2,24 @@ import { Product } from '@/types/domain/product';
 import ProductCard from './product-card';
 
 // 상품 목록 데이터를 받아서 그리드 형태로 보여주는 목록 페이지 컴포넌트
+type ProductWithWishlist = Product & {
+  isLiked?: boolean;
+  wishlistId?: number;
+};
 
 interface ProductListProps {
-  products: Product[];
+  products: ProductWithWishlist[];
   title?: string;
   totalElements?: number;
   productDetailFrom?: string;
+  showWishlistButton?: boolean;
 }
 
 export function ProductList({
   products,
   totalElements,
   productDetailFrom,
+  showWishlistButton = false,
 }: ProductListProps) {
   const count = totalElements ?? products.length;
 
@@ -37,6 +43,7 @@ export function ProductList({
                 key={product.id}
                 product={product}
                 detailFrom={productDetailFrom}
+                showWishlistButton={showWishlistButton}
               />
             ))}
           </div>

src/components/recommend-brand/recommended-brand-client.tsx

@@ -5,19 +5,29 @@ import { BrandWithProducts } from '@/types/domain/brand';
 import RecommendedBrandHeader from './recommended-brand-header';
 import RecommendedBrandGridCard from './recommended-brand-grid-card';
 import { getLocaleFromDocument, t } from '@/lib/i18n';
+import { Product } from '@/types/domain/product';
+
+type BrandProduct = Product & {
+  isLiked?: boolean;
+  wishlistId?: number;
+};
+
+type BrandWithWishlistProducts = Omit<BrandWithProducts, 'products'> & {
+  products: BrandProduct[];
+};
 
 interface RecommendedBrandClientProps {
-  brands: BrandWithProducts[];
+  brands: BrandWithWishlistProducts[];
 }
 
 export default function RecommendedBrandClient({
   brands,
 }: RecommendedBrandClientProps) {
-  if (brands.length === 0) return null;
-
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
   const locale = getLocaleFromDocument();
 
+  if (brands.length === 0) return null;
+
   const currentBrand = brands[selectedIndex];
   const currentProducts = currentBrand?.products || [];
 

src/components/recommend-brand/recommended-brand-container.tsx

@@ -1,9 +1,33 @@
 import { api } from '@/lib/api-client';
 import { BrandWithProducts } from '@/types/domain/brand';
 import RecommendedBrandClient from './recommended-brand-client';
+import { getMyWishlist } from '@/app/actions/wishlist';
 
 export default async function RecommendedBrandContainer() {
-  const brands = await api.get<BrandWithProducts[]>('/brands/recommend');
+  const [brandsResult, wishlistResult] = await Promise.allSettled([
+    api.get<BrandWithProducts[]>('/brands/recommend', {
+      cache: 'force-cache',
+      next: { revalidate: 3600, tags: ['recommended-brands'] },
+    }),
+    getMyWishlist(),
+  ]);
 
-  return <RecommendedBrandClient brands={brands} />;
+  const brands = brandsResult.status === 'fulfilled' ? brandsResult.value : [];
+  const wishlistItems =
+    wishlistResult.status === 'fulfilled' ? wishlistResult.value : [];
+
+  const wishlistByProductId = new Map(
+    wishlistItems.map((item) => [item.productId, item.wishlistId]),
+  );
+
+  const brandsWithWishlist = brands.map((brand) => ({
+    ...brand,
+    products: brand.products.map((product) => ({
+      ...product,
+      isLiked: wishlistByProductId.has(product.id),
+      wishlistId: wishlistByProductId.get(product.id),
+    })),
+  }));
+
+  return <RecommendedBrandClient brands={brandsWithWishlist} />;
 }

src/components/recommend-brand/recommended-brand-grid-card.tsx

@@ -1,24 +1,38 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { Product } from '@/types/domain/product';
+import { WishlistButton } from '../product/wishlist-button';
+
+type BrandProduct = Product & {
+  isLiked?: boolean;
+  wishlistId?: number;
+};
 
 export default function RecommendedBrandGridCard({
   product,
 }: {
-  product: Product;
+  product: BrandProduct;
 }) {
   const href = `/product/${product.id}?from=${encodeURIComponent('/')}`;
 
   return (
     <Link href={href} className="block">
       <div className="font-pretendard flex w-41 flex-col gap-1">
-        <Image
-          src={product.thumbnailImageUrl}
-          alt={product.name}
-          width={164}
-          height={170}
-          className="h-[170px] w-[164px] object-cover"
-        />
+        <div className="relative">
+          <Image
+            src={product.thumbnailImageUrl}
+            alt={product.name}
+            width={164}
+            height={170}
+            className="h-[170px] w-[164px] object-cover"
+          />
+          <WishlistButton
+            productId={product.id}
+            initialIsLiked={product.isLiked || false}
+            initialWishlistId={product.wishlistId}
+            className="absolute top-2 right-2"
+          />
+        </div>
         <span className="font-extrabold">{product.brandName}</span>
         <span className="line-clamp-2 h-14 w-full overflow-hidden text-lg font-medium text-ellipsis">
           {product.name}

src/components/recommend-carousel/recommend-product-container.tsx

@@ -3,6 +3,7 @@ import { Product } from '@/types/domain/product';
 import RecommendedProductCard from './recommended-product-card';
 import { RecommendCarouselItem } from './recommend-carousel-item';
 import { RecommendCarousel } from './recommend-carousel';
+import { getMyWishlist } from '@/app/actions/wishlist';
 
 interface RecommendProductContainerProps {
   endpoint: string;
@@ -13,12 +14,31 @@ export default async function RecommendProductContainer({
   endpoint,
   heading,
 }: RecommendProductContainerProps) {
-  const products = await api.get<Product[]>(endpoint);
+  const [productsResult, wishlistResult] = await Promise.allSettled([
+    api.get<Product[]>(endpoint),
+    getMyWishlist(),
+  ]);
+
+  const products =
+    productsResult.status === 'fulfilled' ? productsResult.value : [];
+  const wishlistItems =
+    wishlistResult.status === 'fulfilled' ? wishlistResult.value : [];
+
+  const wishlistByProductId = new Map(
+    wishlistItems.map((item) => [item.productId, item.wishlistId]),
+  );
+
   return (
     <RecommendCarousel heading={heading}>
       {products.map((product) => (
         <RecommendCarouselItem key={product.id}>
-          <RecommendedProductCard productInfo={product} />
+          <RecommendedProductCard
+            productInfo={{
+              ...product,
+              isLiked: wishlistByProductId.has(product.id),
+              wishlistId: wishlistByProductId.get(product.id),
+            }}
+          />
         </RecommendCarouselItem>
       ))}
     </RecommendCarousel>

src/components/recommend-carousel/recommended-product-card.tsx

@@ -5,6 +5,7 @@ import { WishlistButton } from '../product/wishlist-button';
 
 interface RecommendedProduct extends Product {
   isLiked?: boolean;
+  wishlistId?: number;
 }
 
 export default function RecommendedProductCard({
@@ -72,6 +73,7 @@ export default function RecommendedProductCard({
           <WishlistButton
             productId={productInfo.id}
             initialIsLiked={productInfo.isLiked || false}
+            initialWishlistId={productInfo.wishlistId}
             className="absolute top-2 right-2"
           />
         </div>