[Fix/#83] 검색화면 렌더링 오류 해결 및 클릭 시 용어 상세 연결

src/components/RecommendedTermCard.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import React, { ElementType } from "react";
+import { useRouter } from "next/navigation";
 
 // 1. 카테고리 아이콘 컴포넌트 임포트 (TagList.tsx와 동일한 Named Export 가정)
 import { CategoryAllIcon } from "@/components/icons/ic_category_all";
@@ -17,6 +20,7 @@ interface TermCardProps {
 	category: string;
 	description: string;
 	iconColor: string;
+	slug: string;
 }
 
 // 2. 카테고리 이름과 아이콘 컴포넌트를 매핑
@@ -38,13 +42,22 @@ export default function RecommendedTermCard({
 	category,
 	description,
 	iconColor,
+	slug,
 }: TermCardProps) {
+	const router = useRouter();
 	// 3. 현재 카테고리에 맞는 아이콘 컴포넌트를 찾습니다.
 	const IconComponent = CategoryIconMap[category] || CategoryAllIcon;
 
+	const handleClick = () => {
+		router.push(`/terms/${slug}`);
+	};
+
 	return (
 		// Figma: w-64 p-5 rounded-xl outline outline-[0.25px] outline-offset-[-0.25px] outline-white
-		<div className="flex w-64 cursor-pointer flex-col items-start justify-start gap-2.5 overflow-hidden rounded-xl bg-black/50 p-5 outline outline-[0.25px] outline-white/25 transition-colors hover:bg-black/70">
+		<div
+			onClick={handleClick}
+			className="flex w-64 cursor-pointer flex-col items-start justify-start gap-2.5 overflow-hidden rounded-xl bg-black/50 p-5 outline outline-[0.25px] outline-white/25 transition-colors hover:bg-black/70"
+		>
 			<div className="flex flex-col items-start justify-start gap-2.5 self-stretch">
 				<div className="inline-flex items-center justify-start gap-1 self-stretch">
 					<div className="flex flex-1 items-center justify-start gap-2">

src/components/RecommendedTermCardSkeleton.tsx

@@ -0,0 +1,22 @@
+export default function RecommendedTermCardSkeleton() {
+	return (
+		<div className="flex w-64 flex-col items-start justify-start gap-2.5 overflow-hidden rounded-xl bg-black/50 p-5 outline outline-[0.25px] outline-white/25">
+			<div className="flex flex-col items-start justify-start gap-2.5 self-stretch">
+				<div className="inline-flex items-center justify-start gap-1 self-stretch">
+					<div className="flex flex-1 items-center justify-start gap-2">
+						<div className="h-6 w-6 animate-pulse rounded-full bg-gray-700" />
+
+						<div className="h-6 w-24 animate-pulse rounded bg-gray-700" />
+					</div>
+
+					<div className="h-5 w-16 animate-pulse rounded-full bg-gray-700" />
+				</div>
+
+				<div className="flex flex-col gap-1.5 self-stretch">
+					<div className="h-4 w-full animate-pulse rounded bg-gray-700" />
+					<div className="h-4 w-3/4 animate-pulse rounded bg-gray-700" />
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/search/RecommendedTermsSection.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import RecommendedTermCard from "@/components/RecommendedTermCard";
+import RecommendedTermCardSkeleton from "@/components/RecommendedTermCardSkeleton";
 import { ChevronsDownIcon } from "@/components/icons/ic_chevrons_down";
 import { useAuth } from "@/contexts/AuthContext";
 import {
@@ -15,16 +16,24 @@ export default function RecommendedTermsSection() {
 	const [recommendedTerms, setRecommendedTerms] = useState<RecommendedTerm[]>(
 		[]
 	);
+	const [isLoading, setIsLoading] = useState(true);
 
 	useEffect(() => {
 		const loadTerms = async () => {
-			const category = userData?.selectedCategory || "all";
+			// userData가 로드되지 않았으면 로딩 상태 유지
+			if (!userData) {
+				return;
+			}
+
+			setIsLoading(true);
+			const category = userData.selectedCategory || "all";
 			const terms = await getRecommendedTerms(category, 6);
 			setRecommendedTerms(terms);
+			setIsLoading(false);
 		};
 
 		loadTerms();
-	}, [userData?.selectedCategory]);
+	}, [userData]);
 
 	const displayedRecommendedTerms = showMoreRecommended
 		? recommendedTerms
@@ -36,29 +45,42 @@ export default function RecommendedTermsSection() {
 				추천 용어
 			</div>
 			<div className="inline-flex flex-wrap items-start justify-center gap-6 self-stretch">
-				{displayedRecommendedTerms.map((term, index) => (
-					<RecommendedTermCard
-						key={index}
-						term={term.term}
-						category={term.category}
-						description={term.description}
-						iconColor={term.iconColor}
-					/>
-				))}
-			</div>
-			<div className="flex flex-col items-center justify-center gap-2.5 self-stretch overflow-hidden pt-5">
-				<button
-					onClick={() => setShowMoreRecommended(!showMoreRecommended)}
-					className="inline-flex items-center justify-center gap-1 text-sm font-bold text-neutral-300 transition-colors hover:text-white"
-				>
-					<ChevronsDownIcon
-						className={`h-4 w-4 transition-transform ${showMoreRecommended ? "rotate-180" : ""}`}
-						width={16}
-						height={16}
-					/>
-					{showMoreRecommended ? "접기" : "더보기"}
-				</button>
+				{isLoading ? (
+					// 로딩 중일 때 스켈레톤 3개 표시
+					<>
+						<RecommendedTermCardSkeleton />
+						<RecommendedTermCardSkeleton />
+						<RecommendedTermCardSkeleton />
+					</>
+				) : (
+					// 데이터 로드 완료 시 실제 카드 표시
+					displayedRecommendedTerms.map((term, index) => (
+						<RecommendedTermCard
+							key={index}
+							term={term.term}
+							category={term.category}
+							description={term.description}
+							iconColor={term.iconColor}
+							slug={term.slug}
+						/>
+					))
+				)}
 			</div>
+			{!isLoading && (
+				<div className="flex flex-col items-center justify-center gap-2.5 self-stretch overflow-hidden pt-5">
+					<button
+						onClick={() => setShowMoreRecommended(!showMoreRecommended)}
+						className="inline-flex items-center justify-center gap-1 text-sm font-bold text-neutral-300 transition-colors hover:text-white"
+					>
+						<ChevronsDownIcon
+							className={`h-4 w-4 transition-transform ${showMoreRecommended ? "rotate-180" : ""}`}
+							width={16}
+							height={16}
+						/>
+						{showMoreRecommended ? "접기" : "더보기"}
+					</button>
+				</div>
+			)}
 		</section>
 	);
 }

src/lib/recommendations.ts

@@ -43,6 +43,7 @@ export interface RecommendedTerm {
 	category: string;
 	description: string;
 	iconColor: string;
+	slug: string;
 }
 
 /**
@@ -64,6 +65,7 @@ export async function getRecommendedTerms(
 				category: categoryLabels[targetCategory],
 				description: t.summary,
 				iconColor: categoryColors[categoryId],
+				slug: t.slug,
 			}));
 		}
 
@@ -78,6 +80,7 @@ export async function getRecommendedTerms(
 			category: categoryLabels[targetCategory],
 			description: t.summary,
 			iconColor: categoryColors[categoryId],
+			slug: t.slug,
 		}));
 	} catch (error) {
 		console.error("추천 용어 로드 실패:", error);