[Fix/#100] 챗봇 하단 버튼 기능 연결

src/app/chatbot/components/ChatBot.tsx

@@ -16,6 +16,8 @@ export default function ChatBot() {
 		setInput,
 		handleSubmit,
 		handleRecommendationClick,
+		handlePopularTerms,
+		handleTodaysTerm,
 	} = useChatBot();
 
 	return (
@@ -53,19 +55,14 @@ export default function ChatBot() {
 								<FireIcon width={14} height={14} className="text-[#FB923C]" />
 							}
 							label="인기 용어"
-							onClick={() =>
-								handleSubmit(
-									undefined,
-									"React, Next.js, Docker 이 세 가지 용어를 각각 설명해줘."
-								)
-							}
+							onClick={handlePopularTerms}
 						/>
 						<QuickActionButton
 							icon={
 								<StarIcon width={14} height={14} className="text-[#FACC15]" />
 							}
 							label="오늘의 용어"
-							onClick={() => handleSubmit(undefined, "TypeScript")}
+							onClick={handleTodaysTerm}
 						/>
 						<QuickActionButton
 							icon={

src/app/chatbot/utils/quick-actions.ts

@@ -0,0 +1,31 @@
+/**
+ * 챗봇 퀵 액션 유틸리티
+ */
+
+import { getPopularTerms } from "@/lib/recommendations";
+import { getTodaysTerm } from "@/lib/terms";
+import type { CategoryType } from "@/config/categories";
+
+/**
+ * 인기 용어 3개 가져오기 (카테고리 기반)
+ */
+export async function getPopularTermsQuery(
+	category: CategoryType = "all"
+): Promise<string> {
+	const terms = await getPopularTerms(category, 3);
+	if (terms.length === 0) {
+		return "React, Next.js, Docker 이 세 가지 용어를 각각 설명해줘.";
+	}
+	return `${terms.join(", ")} 이 세 가지 용어를 각각 설명해줘.`;
+}
+
+/**
+ * 오늘의 용어 가져오기
+ */
+export async function getTodaysTermQuery(): Promise<string> {
+	const todayTerm = await getTodaysTerm();
+	if (!todayTerm) {
+		return "TypeScript";
+	}
+	return todayTerm.termKo;
+}

src/hooks/useChatBot.ts

@@ -2,6 +2,11 @@
 
 import { useState, useRef, useEffect, useCallback } from "react";
 import { getChatResponse } from "@/app/chatbot/utils/actions";
+import {
+	getPopularTermsQuery,
+	getTodaysTermQuery,
+} from "@/app/chatbot/utils/quick-actions";
+import { useUserData } from "@/contexts/auth";
 
 interface Message {
 	role: "user" | "bot";
@@ -17,6 +22,8 @@ interface UseChatBotReturn {
 	setInput: (value: string) => void;
 	handleSubmit: (e?: React.FormEvent, customInput?: string) => Promise<void>;
 	handleRecommendationClick: (question: string) => void;
+	handlePopularTerms: () => Promise<void>;
+	handleTodaysTerm: () => Promise<void>;
 }
 
 const INITIAL_MESSAGE: Message = {
@@ -26,6 +33,7 @@ const INITIAL_MESSAGE: Message = {
 };
 
 export function useChatBot(): UseChatBotReturn {
+	const { userData } = useUserData();
 	const [messages, setMessages] = useState<Message[]>([INITIAL_MESSAGE]);
 	const [input, setInput] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
@@ -68,6 +76,17 @@ export function useChatBot(): UseChatBotReturn {
 		[handleSubmit]
 	);
 
+	const handlePopularTerms = useCallback(async () => {
+		const category = userData?.selectedCategory || "all";
+		const query = await getPopularTermsQuery(category);
+		await handleSubmit(undefined, query);
+	}, [userData, handleSubmit]);
+
+	const handleTodaysTerm = useCallback(async () => {
+		const query = await getTodaysTermQuery();
+		await handleSubmit(undefined, query);
+	}, [handleSubmit]);
+
 	return {
 		messages,
 		input,
@@ -76,5 +95,7 @@ export function useChatBot(): UseChatBotReturn {
 		setInput,
 		handleSubmit,
 		handleRecommendationClick,
+		handlePopularTerms,
+		handleTodaysTerm,
 	};
 }

src/lib/recommendations.ts

@@ -88,3 +88,19 @@ export async function getRecommendedTerms(
 		return [];
 	}
 }
+
+/**
+ * 인기 용어 가져오기 (카테고리 기반, 새로고침마다 랜덤)
+ */
+export async function getPopularTerms(
+	category: CategoryType,
+	count: number = 3
+): Promise<string[]> {
+	try {
+		const terms = await getRecommendedTerms(category, count);
+		return terms.map((t) => t.term);
+	} catch (error) {
+		console.error("인기 용어 로드 실패:", error);
+		return [];
+	}
+}

src/lib/terms.server.ts

@@ -46,3 +46,11 @@ export function getTodaysTermServer(): TermIndexItem | null {
 
 	return index[todayIndex];
 }
+
+/**
+ * 서버에서 오늘의 용어 한국어 이름만 가져오기
+ */
+export function getTodaysTermNameServer(): string | null {
+	const term = getTodaysTermServer();
+	return term ? term.termKo : null;
+}