feat: 추천 브랜드 api 연동

Author: bk-git-hub

.claude/settings.local.json

@@ -3,7 +3,8 @@
     "allow": [
       "Bash(gh pr view:*)",
       "Bash(gh api:*)",
-      "Bash(npm run lint)"
+      "Bash(npm run lint)",
+      "mcp__ide__getDiagnostics"
     ]
   }
 }

src/app/page.tsx

@@ -1,29 +1,12 @@
 import BannerCarouselContainer from '@/components/banner-carousel';
-import {
-  RecommendedCategoryCard,
-  RecommendCarousel,
-  RecommendCarouselItem,
-  RecommendedProductCard,
-} from '@/components/recommend-carousel';
-import { MAIN_CATEGORIES } from '@/mocks/categories';
 import MainHeader from '@/components/layout/main-header';
 import MainNavBar from '@/components/layout/main-nav-bar';
-
-import { BRANDS, MOCK_PRODUCTS } from '@/mocks/brands-and-products';
 import RecommendedBrandContainer from '@/components/recommend-brand/recommended-brand-container';
 import RecommendCategoryContainer from '@/components/recommend-carousel/recommend-category-container';
 import { Suspense } from 'react';
 import RecommendProductContainer from '@/components/recommend-carousel/recommend-product-container';
-// import { api } from '@/lib/api-client';
-// import { Advertisement } from '@/types/domain/etc';
-// import { Category } from '@/types/domain/category';
 
 export default async function Home() {
-  const p1 = MOCK_PRODUCTS.slice(0, 6);
-  const p2 = MOCK_PRODUCTS.slice(6, 12);
-  const p3 = MOCK_PRODUCTS.slice(12, 18);
-  // TODO: 카테고리 데이터를 UI에 연결
-  // const categories = await api.get<Category[]>('/categories');
 
   return (
     <div className="flex flex-col items-center">
@@ -50,7 +33,9 @@ export default async function Home() {
         />
       </Suspense>
 
-      <RecommendedBrandContainer brands={BRANDS} productLists={[p1, p2, p3]} />
+      <Suspense fallback={<div>Loading...</div>}>
+        <RecommendedBrandContainer />
+      </Suspense>
 
       <MainNavBar />
     </div>

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

@@ -0,0 +1,45 @@
+'use client';
+
+import { useState } from 'react';
+import { BrandWithProducts } from '@/types/domain/brand';
+import RecommendedBrandHeader from './recommended-brand-header';
+import RecommendedBrandGridCard from './recommended-brand-grid-card';
+
+interface RecommendedBrandClientProps {
+  brands: BrandWithProducts[];
+}
+
+export default function RecommendedBrandClient({
+  brands,
+}: RecommendedBrandClientProps) {
+  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+
+  const currentBrand = brands[selectedIndex];
+  const currentProducts = currentBrand?.products || [];
+
+  return (
+    <div className="flex w-full flex-col p-5">
+      <RecommendedBrandHeader
+        brands={brands}
+        onClick={setSelectedIndex}
+        selectedIndex={selectedIndex}
+      />
+
+      <div className="mt-4">
+        <div className="mt-2 w-full">
+          {currentProducts.length > 0 ? (
+            <ul className="grid w-full grid-cols-2 justify-items-center gap-4">
+              {currentProducts.map((product) => (
+                <li key={product.id}>
+                  <RecommendedBrandGridCard product={product} />
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p>No products available for this brand.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,48 +1,9 @@
-'use client';
+import { api } from '@/lib/api-client';
+import { BrandWithProducts } from '@/types/domain/brand';
+import RecommendedBrandClient from './recommended-brand-client';
 
-import { Product } from '@/types/domain/product';
-import { Brand } from '@/types/domain/brand';
-import { useState } from 'react';
-import RecommendedBrandHeader from './recommended-brand-header';
-import RecommendedBrandGridCard from './recommended-brand-grid-card';
+export default async function RecommendedBrandContainer() {
+  const brands = await api.get<BrandWithProducts[]>('/brands/recommend');
 
-interface RecommendedBrandContainerProps {
-  brands: Brand[];
-  productLists: Product[][];
-}
-
-export default function RecommendedBrandContainer({
-  brands,
-  productLists,
-}: RecommendedBrandContainerProps) {
-  const [selectedIndex, setSelectedIndex] = useState<number>(0);
-
-  const currentBrand = brands[selectedIndex];
-  const currentProducts = productLists[selectedIndex] || [];
-
-  return (
-    <div className="flex w-full flex-col p-5">
-      <RecommendedBrandHeader
-        brands={brands}
-        onClick={setSelectedIndex}
-        selectedIndex={selectedIndex}
-      />
-
-      <div className="mt-4">
-        <div className="mt-2 w-full">
-          {currentProducts.length > 0 ? (
-            <ul className="grid w-full grid-cols-2 justify-items-center gap-4">
-              {currentProducts.map((product) => (
-                <li key={product.id}>
-                  <RecommendedBrandGridCard product={product} />
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <p>No products available for this brand.</p>
-          )}
-        </div>
-      </div>
-    </div>
-  );
+  return <RecommendedBrandClient brands={brands} />;
 }

src/types/domain/brand.ts

@@ -1,7 +1,16 @@
+import { Product } from './product';
+
 // --- Brand ---
 export interface Brand {
   id: number;
   name: string;
   description?: string;
   logoImageUrl?: string;
 }
+
+export interface BrandWithProducts {
+  id: number;
+  name: string;
+  logoImageUrl: string;
+  products: Product[];
+}