[refactor] 채팅기록 불러오기 hook 분리

Author: ahk0413

src/domains/recommend/components/ChatList.tsx

@@ -1,18 +1,21 @@
 import { useChatScroll } from '../hook/useChatScroll';
-import { ChatListProps } from '../types/recommend';
+import { ChatListProps, RecommendationItem, StepRecommendation } from '../types/recommend';
 import BotMessage from './bot/BotMessage';
 import NewMessageAlert from './bot/NewMessageAlert';
 import UserMessage from './user/UserMessage';
 
-function ChatList({
-  messages,
-  userCurrentStep,
-  onSelectedOption,
-  getRecommendations,
-}: ChatListProps) {
+function ChatList({ messages, userCurrentStep, onSelectedOption }: ChatListProps) {
   const { chatListRef, chatEndRef, showNewMessageAlert, handleCheckBottom, handleScrollToBottom } =
     useChatScroll(messages[messages.length - 1]?.id);
 
+  const getRecommendations = (
+    type: string | undefined,
+    stepData?: StepRecommendation | null
+  ): RecommendationItem[] => {
+    if (type !== 'CARD_LIST' || !stepData?.recommendations) return [];
+    return stepData.recommendations;
+  };
+
   return (
     <div
       ref={chatListRef}
@@ -32,6 +35,8 @@ function ChatList({
 
           const isTyping = msg.type === 'TYPING';
 
+          const recommendations = getRecommendations(msg.type, msg.stepData);
+
           return (
             <BotMessage
               key={keyId}
@@ -41,7 +46,7 @@ function ChatList({
                   message: msg.message,
                   type: msg.type ?? 'TEXT',
                   options: msg.type === 'RADIO_OPTIONS' ? (msg.stepData?.options ?? []) : [],
-                  recommendations: getRecommendations(msg.type, msg.stepData),
+                  recommendations,
                 },
               ]}
               showProfile={showProfile}

src/domains/recommend/components/ChatSection.tsx

@@ -9,13 +9,9 @@ import {
   fetchSendTextMessage,
 } from '../api/chat';
 import { useAuthStore } from '@/domains/shared/store/auth';
-import {
-  ChatMessage,
-  stepPayload,
-  StepRecommendation,
-  RecommendationItem,
-} from '../types/recommend';
+import { ChatMessage, stepPayload } from '../types/recommend';
 import ChatList from './ChatList';
+import { useChatInit } from '../hook/useChatInit';
 
 function ChatSection() {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
@@ -143,27 +139,7 @@ function ChatSection() {
     await handleSendMessage(payload);
   };
 
-  // 채팅 기록 불러오기 없으면 greeting 호출
-  useEffect(() => {
-    const loadChatHistory = async () => {
-      const history = await fetchChatHistory();
-      if (history && history.length > 0) {
-        setMessages(history.sort((a, b) => Number(a.id) - Number(b.id)));
-      } else {
-        const greeting = await fetchGreeting('');
-        if (greeting) setMessages([greeting]);
-      }
-    };
-    loadChatHistory();
-  }, []);
-
-  const getRecommendations = (
-    type: string | undefined,
-    stepData?: StepRecommendation | null
-  ): RecommendationItem[] => {
-    if (type !== 'CARD_LIST' || !stepData?.recommendations) return [];
-    return stepData.recommendations;
-  };
+  useChatInit(setMessages);
 
   return (
     <section className="relative flex-1 flex flex-col items-center w-full">
@@ -172,7 +148,6 @@ function ChatSection() {
         messages={messages}
         userCurrentStep={userCurrentStep}
         onSelectedOption={handleSelectedOption}
-        getRecommendations={getRecommendations}
       />
       <MessageInput onSubmit={handleSubmitText} disabled={isInputDisabled} />
     </section>

src/domains/recommend/hook/useChatInit.ts

@@ -0,0 +1,25 @@
+'use client';
+
+import { useEffect } from 'react';
+import { ChatMessage } from '../types/recommend';
+import { fetchChatHistory, fetchGreeting } from '../api/chat';
+
+// 채팅 기록 불러오기 없으면 greeting api 호출
+export function useChatInit(setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>) {
+  useEffect(() => {
+    const loadChatHistory = async () => {
+      try {
+        const history = await fetchChatHistory();
+        if (history && history.length > 0) {
+          setMessages(history.sort((a, b) => Number(a.id) - Number(b.id)));
+        } else {
+          const greeting = await fetchGreeting('');
+          if (greeting) setMessages([greeting]);
+        }
+      } catch (err) {
+        console.error('채팅 초기화 실패:', err);
+      }
+    };
+    loadChatHistory();
+  }, [setMessages]);
+}

src/domains/recommend/types/recommend.ts

@@ -56,9 +56,5 @@ export interface ChatListProps {
   messages: ChatMessage[];
   userCurrentStep: number;
   onSelectedOption: (value: string) => void;
-  getRecommendations: (
-    type: string | undefined,
-    stepData?: StepRecommendation | null
-  ) => RecommendationItem[];
   isBotTyping?: boolean;
 }