[URECA-76] Feat: 추천 페이지 구현

src/app/(private)/call/page.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { CallComponent } from '@/components/call/CallComponent';
+import { CallComponent } from '@/components/call/calling';
 
 const page = () => {
   return (

src/app/(private)/page.tsx

@@ -2,6 +2,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import { useQueryClient } from '@tanstack/react-query';
 
 import FileIcon from '@/assets/icons/summary/File1.png';
 import ForwardIcon from '@/assets/icons/summary/Forward.png';
@@ -11,6 +12,8 @@ import Banner3 from '@/assets/images/banner/image3.png';
 import { HomeBannerSlider } from '@/components/home/home-banner-slider';
 import { BottomNav } from '@/components/layout/bottom-navigation';
 import { Header } from '@/components/layout/header';
+import { queryKeys } from '@/lib/queryKeys';
+import { fetchRecommendMe } from '@/services/recommend/recommendApi';
 
 const QUICK_ACTIONS = [
   {
@@ -63,8 +66,15 @@ const HOME_BANNERS = [
 
 const Home = () => {
   const router = useRouter();
-
-  const handleRecommend = () => router.push('/recommend');
+  const queryClient = useQueryClient();
+
+  const handleRecommend = () => {
+    void queryClient.prefetchQuery({
+      queryKey: queryKeys.recommend.me(),
+      queryFn: fetchRecommendMe,
+    });
+    router.push('/recommend');
+  };
   const handleSummary = () => router.push('/summary');
 
   return (

src/app/(private)/recommend/page.tsx

@@ -1,27 +1,43 @@
+'use client';
+
 import React from 'react';
 
 import { BottomNav } from '@/components/layout/bottom-navigation';
 import { Header } from '@/components/layout/header';
+import { Loading } from '@/components/loading';
 import { ProductList } from '@/components/recommend/product-list';
-import {
-  dummyCategoriesApi,
-  dummyProductsApi,
-} from '@/services/recommend/MockupRecommendApi.client';
+import { useRecommendMe } from '@/hooks/recommend/useRecommendMe';
 
 const page = () => {
-  const categories = dummyCategoriesApi;
-  const products = dummyProductsApi;
+  const { data, isLoading, isError, refetch } = useRecommendMe();
+  const categories = data?.categories ?? [];
+  const products = data?.products ?? [];
 
   return (
-    <div className="mx-auto w-full overflow-hidden">
+    <div className="mx-auto w-full overflow-hidden pb-10">
       <Header />
-      {categories.map((i) => (
-        <ProductList
-          key={i.category_id}
-          category={i}
-          products={products.filter((p) => p.category === i.code)}
-        />
-      ))}
+      {isLoading && (
+        <div className="mt-4">
+          <Loading />
+        </div>
+      )}
+      {isError && (
+        <div className="px-6 py-4 text-sm text-red-600">
+          Failed to load recommendations.
+          <button type="button" className="ml-2 underline" onClick={() => refetch()}>
+            Retry
+          </button>
+        </div>
+      )}
+      {!isLoading &&
+        !isError &&
+        categories.map((i) => (
+          <ProductList
+            key={i.id}
+            category={i}
+            products={products.filter((p) => p.categoryId === i.id)}
+          />
+        ))}
       <BottomNav />
     </div>
   );

src/app/(private)/summary/[summaryId]/recommended-products/page.tsx

@@ -1,11 +1,40 @@
-import { RecommendCardList } from '@/components/counseling-recommend/recommend-cardlist/RecommendCardList';
-import { TitleCard } from '@/components/counseling-recommend/titlecard/TitleCard';
+'use client';
+
+import { useParams } from 'next/navigation';
+
+import { RecommendCardList } from '@/components/counseling-recommend/recommend-cardlist';
+import { TitleCard } from '@/components/counseling-recommend/title-card';
+import { useRecommendSummary } from '@/hooks/recommend/useRecommendSummary';
+import { useSummaryDetail } from '@/hooks/summary/useSummaryDetail';
 
 const page = () => {
+  const params = useParams();
+  const rawId = Array.isArray(params?.summaryId) ? params.summaryId[0] : params?.summaryId;
+  const summaryId = Number(rawId);
+  const safeId = Number.isFinite(summaryId) ? summaryId : 0;
+
+  const { data: summaryData } = useSummaryDetail(safeId);
+  const { data: recommendData, isLoading, isError, refetch } = useRecommendSummary(safeId);
+  const products = recommendData?.products ?? [];
+
+  const title = summaryData?.title ?? '추천 상품';
+
   return (
     <div className="mx-7.5 my-4">
-      <TitleCard title="5G 요금제 변경 상담" />
-      <RecommendCardList />
+      <TitleCard title={title} />
+      {isLoading && <div className="mt-4 text-sm text-gray-400">추천 상품 불러오는 중...</div>}
+      {isError && (
+        <div className="mt-4 text-sm text-red-500">
+          추천 상품을 불러오지 못했습니다.
+          <button type="button" className="ml-2 underline" onClick={() => refetch()}>
+            다시 시도
+          </button>
+        </div>
+      )}
+      {!isLoading && !isError && products.length === 0 && (
+        <div className="mt-4 text-sm text-gray-400">추천 상품이 없습니다.</div>
+      )}
+      {!isLoading && !isError && products.length > 0 && <RecommendCardList products={products} />}
     </div>
   );
 };

src/app/(private)/summary/_components/SummarySuccessPage.tsx

@@ -5,13 +5,15 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 import { Bookmark } from 'lucide-react';
-
+import BoxText from "@/assets/icons/summary/BoxText.png";
 import GoBack from '@/assets/icons/header/chevron-left.svg';
 import File1 from '@/assets/icons/summary/File1.png';
 import Profile from '@/assets/icons/summary/Profile.png';
 import Topic from '@/assets/icons/summary/Topic.png';
+import { RecommendCardList } from '@/components/counseling-recommend/recommend-cardlist';
 import { BottomNav } from '@/components/layout/bottom-navigation';
 import { useMe } from '@/hooks/auth/useMe';
+import { useRecommendSummary } from '@/hooks/recommend/useRecommendSummary';
 import { useToggleBookmark } from '@/hooks/summary/useToggleBookmark';
 import type { ApiSummaryDetail } from '@/types/summary/summary';
 
@@ -28,6 +30,13 @@ export const SummarySuccessPage = ({ data }: SummarySuccessPageProps) => {
   const { summaryId, title, subject, keywords = [], points = [], createdAt, isBookmarked } = data;
   const [bookmarked, setBookmarked] = useState(isBookmarked);
   const { mutateAsync, isPending } = useToggleBookmark({ summaryId, userId });
+  const {
+    data: recommendData,
+    isLoading: recommendLoading,
+    isError: recommendError,
+    refetch: refetchRecommend,
+  } = useRecommendSummary(summaryId);
+  const recommendProducts = recommendData?.products ?? [];
 
   const disabled = meLoading || meError || !Number.isFinite(userId) || isPending;
 
@@ -131,6 +140,37 @@ export const SummarySuccessPage = ({ data }: SummarySuccessPageProps) => {
             </ul>
           </div>
         </div>
+        <div className="mt-6 px-4">
+          <div className="mb-2 flex items-center gap-2">
+            <Image src={BoxText} alt="" width={15} height={15} />
+            <h2 className="text-sm font-semibold">추천 상품</h2>
+          </div>
+
+          {recommendLoading && (
+            <div className="rounded-2xl bg-white px-4 py-3 text-[13px] text-gray-400">
+              추천 상품 불러오는 중...
+            </div>
+          )}
+
+          {recommendError && (
+            <div className="rounded-2xl bg-white px-4 py-3 text-[13px] text-red-500">
+              추천 상품을 불러오지 못했습니다.
+              <button type="button" className="ml-2 underline" onClick={() => refetchRecommend()}>
+                다시 시도
+              </button>
+            </div>
+          )}
+
+          {!recommendLoading && !recommendError && recommendProducts.length === 0 && (
+            <div className="rounded-2xl bg-white px-4 py-3 text-[13px] text-gray-400">
+              추천 상품이 없습니다.
+            </div>
+          )}
+
+          {!recommendLoading && !recommendError && recommendProducts.length > 0 && (
+            <RecommendCardList products={recommendProducts} />
+          )}
+        </div>
       </div>
 
       <BottomNav />

src/app/(private)/summary/bookmarks/page.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation';
 
 import GoBack from '@/assets/icons/header/chevron-left.svg';
 import { BottomNav } from '@/components/layout/bottom-navigation';
-import { SummaryNavigateCard } from '@/components/summary/SummaryNavigateCard';
+import { SummaryNavigateCard } from '@/components/summary/summary-navigate-card';
 import { useMe } from '@/hooks/auth/useMe';
 import { useBookmarkedSummaryList } from '@/hooks/summary/useBookmarkedSummaryList';
 

src/app/(private)/summary/page.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 
 import { BottomNav } from '@/components/layout/bottom-navigation';
 import { Header } from '@/components/layout/header';
-import { SummaryNavigateCard } from '@/components/summary/SummaryNavigateCard';
+import { SummaryNavigateCard } from '@/components/summary/summary-navigate-card';
 import { useMe } from '@/hooks/auth/useMe';
 import { useSummaryList } from '@/hooks/summary/useSummaryList';
 export default function SummaryPage() {

src/app/error.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React, { useEffect } from 'react';
 
-import { ErrorComponent } from '@/components/ui/fallback/ErrorComponent';
+import { ErrorComponent } from '@/components/ui/fallback/error';
 
 const error = ({ error }: { error: Error & { digest?: string }; reset: () => void }) => {
   useEffect(() => {

src/app/not-found.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 
-import { ErrorComponent } from '@/components/ui/fallback/ErrorComponent';
+import { ErrorComponent } from '@/components/ui/fallback/error';
 
 const NotFound = () => {
   return (

src/components/call/CallComponent.tsx → src/components/call/calling/index.tsx

@@ -5,13 +5,12 @@ import { useRouter } from 'next/navigation';
 
 import Call from '@/assets/images/call/call.svg';
 import Calling from '@/assets/images/call/mooner_calling.svg';
+import { ErrorComponent } from '@/components/ui/fallback/error';
 import { useAgora } from '@/hooks/call/useAgora';
 
-import { Button } from '../ui/button';
-import { ErrorComponent } from '../ui/fallback/ErrorComponent';
-import { LoadingComponent } from '../ui/fallback/LoadingComponent';
-
-import { AgoraFrequencyVisualizer } from './AgoraVisualizer';
+import { Button } from '../../ui/button';
+import { LoadingComponent } from '../../ui/fallback/loading';
+import { AgoraFrequencyVisualizer } from '../agora-visualizer';
 
 export const CallComponent = () => {
   const [channel] = useState('room1');

src/components/counseling-recommend/recommend-card/index.tsx

@@ -4,38 +4,39 @@ import Link from 'next/link';
 import Check from '@/assets/images/recommend/check.svg';
 import type { ProductProps } from '@/types/product/dto';
 
-export const RecommendCard = ({
-  is_monthly,
-  product,
-  best,
-}: {
-  is_monthly: boolean;
+type RecommendCardProps = {
   product: ProductProps;
   best: string;
-}) => {
-  return (
-    <div className={`flex w-200 max-w-200 flex-col rounded-2xl ${best}`}>
-      <div className="mx-10 my-5">
-        <div className="text-[14px] font-semibold">{product.name}</div>
-        <div className="text-primary-500 mb-2 text-[20px] font-bold">
-          {is_monthly ? '월 ' : null}
-          {product.price.toLocaleString()}원{product.is_sale ? '부터' : null}
+  is_monthly: boolean;
+};
+
+export const RecommendCard = ({ product, best }: RecommendCardProps) => {
+  const priceLabel = typeof product.price === 'number' ? product.price.toLocaleString() : null;
+
+  const content = (
+    <div className={`grid w-[160px] rounded-2xl ${best} `}>
+      <div className="mx-4 my-4 grid gap-2">
+        <div className="line-clamp-3 text-[14px] font-semibold break-keep">{product.name}</div>
+        <div className="text-primary-500 text-[20px] font-bold">
+          {priceLabel ?? <span className="text-gray-400">TBD</span>}
+        </div>
+        <div className="grid gap-1">
+          {product.content?.split(', ').map((text, idx) => (
+            <div key={idx} className="grid grid-cols-[auto_1fr] items-start gap-1 text-sm">
+              <Check aria-hidden="true" focusable="false" />
+              <span>{text}</span>
+            </div>
+          ))}
         </div>
-        {product.content?.split(', ').map((text, idx) => (
-          <div key={idx} className="flex items-center">
-            <Check aria-hidden="true" focusable="false" />
-            &nbsp;{text}
-          </div>
-        ))}
-        <Link
-          href={product.link}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="hover:bg-gray-light border-gray-light mt-2 inline-flex w-full items-center justify-center rounded-md border bg-transparent px-4 py-2 text-sm text-black shadow-[0_0_2px_#eeeeee] transition-colors"
-        >
-          보러가기
-        </Link>
       </div>
     </div>
   );
+
+  return product.link ? (
+    <Link href={product.link} target="_blank" rel="noopener noreferrer" className="block">
+      {content}
+    </Link>
+  ) : (
+    content
+  );
 };

src/components/counseling-recommend/recommend-cardlist/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import type { ProductProps } from '@/types/product/dto';
+
+import { RecommendCard } from '../recommend-card';
+
+export const RecommendCardList = ({ products }: { products: ProductProps[] }) => {
+  return (
+    <div className="mt-3 grid w-full grid-cols-3 justify-items-center gap-4 md:grid-cols-4 lg:grid-cols-5">
+      {products.map((product, idx) => (
+        <RecommendCard
+          key={product.productId}
+          is_monthly={true}
+          product={product}
+          best={idx === 0 ? 'border border-primary-500 bg-white' : 'border border-gray bg-white'}
+        />
+      ))}
+    </div>
+  );
+};