[fix] 말풍선안에서 로딩 -> 원래 data 변화되도록 수정

Author: ahk0413

src/domains/recommend/components/ChatList.tsx

@@ -2,15 +2,13 @@ import { useChatScroll } from '../hook/useChatScroll';
 import { ChatListProps } from '../types/recommend';
 import BotMessage from './bot/BotMessage';
 import NewMessageAlert from './bot/NewMessageAlert';
-import TypingIndicator from './bot/TypingIndicator';
 import UserMessage from './user/UserMessage';
 
 function ChatList({
   messages,
   userCurrentStep,
   onSelectedOption,
   getRecommendations,
-  isBotTyping,
 }: ChatListProps) {
   const { chatListRef, chatEndRef, showNewMessageAlert, handleCheckBottom, handleScrollToBottom } =
     useChatScroll(messages[messages.length - 1]?.id);
@@ -33,7 +31,7 @@ function ChatList({
               messages={[
                 {
                   id: msg.id,
-                  message: msg.message,
+                  message: msg.type === 'TYPING' ? '' : msg.message,
                   type: msg.type ?? 'TEXT',
                   options: msg.type === 'RADIO_OPTIONS' ? (msg.stepData?.options ?? []) : [],
                   recommendations: getRecommendations(msg.type, msg.stepData),
@@ -46,8 +44,6 @@ function ChatList({
           );
         })}
 
-        {isBotTyping && <TypingIndicator />}
-
         <div ref={chatEndRef}></div>
         {showNewMessageAlert && <NewMessageAlert onClick={handleScrollToBottom} />}
       </div>

src/domains/recommend/components/ChatSection.tsx

@@ -30,29 +30,31 @@ function ChatSection() {
   }>({});
 
   const handleSendMessage = async (payload: stepPayload | { message: string; userId: string }) => {
-    const typingTimer = setTimeout(() => setIsBotTyping(true), 300);
+    // Typing 임시메시지
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: 'typing',
+        sender: 'CHATBOT',
+        type: 'TYPING',
+        message: '',
+        createdAt: new Date().toISOString(),
+      },
+    ]);
 
     try {
-      if (!('currentStep' in payload)) {
-        const botMessage = await fetchSendTextMessage(payload);
-        clearTimeout(typingTimer);
-        setIsBotTyping(false);
-
-        if (!botMessage) return;
-        setTimeout(() => setMessages((prev) => [...prev, botMessage]), 500);
-        return;
-      }
-
-      const botMessage = await fetchSendStepMessage(payload);
-      clearTimeout(typingTimer);
-      setIsBotTyping(false);
+      const botMessage =
+        'currentStep' in payload
+          ? await fetchSendStepMessage(payload)
+          : await fetchSendTextMessage(payload);
 
       if (!botMessage) return;
-      setTimeout(() => setMessages((prev) => [...prev, botMessage]), 500);
+
+      // Typing 임시메시지 제거 후 실제 메시지 추가
+      setMessages((prev) => [...prev.filter((m) => m.type !== 'TYPING'), botMessage]);
     } catch (err) {
-      clearTimeout(typingTimer);
-      setIsBotTyping(false);
       console.error(err);
+      setMessages((prev) => prev.filter((m) => m.type !== 'TYPING'));
     }
   };
 
@@ -70,7 +72,16 @@ function ChatSection() {
       { id: tempId, userId, message, sender: 'USER', type: 'text', createdAt: tempCreatedAt },
     ]);
 
-    await handleSendMessage({ message, userId });
+    const nextStep = userCurrentStep === 3 ? userCurrentStep + 1 : userCurrentStep;
+
+    const payload: stepPayload = {
+      currentStep: nextStep,
+      message,
+      userId,
+      ...selectedOptions.current,
+    };
+
+    await handleSendMessage(payload);
   };
 
   // 옵션 클릭 시

src/domains/recommend/components/bot/BotMessage.tsx

@@ -6,6 +6,7 @@ import { useState } from 'react';
 import BotCocktailCard from './BotCocktailCard';
 import BotOptions from './BotOptions';
 import { StepOption, StepRecommendation, RecommendationItem } from '../../types/recommend';
+import TypingIndicator from './TypingIndicator';
 
 interface BotMessage {
   id: string;
@@ -19,10 +20,11 @@ interface BotMessages {
   messages: BotMessage[];
   stepData?: StepRecommendation | null;
   currentStep?: number;
+  children?: React.ReactNode;
   onSelectedOption?: (value: string) => void;
 }
 
-function BotMessage({ messages, stepData, currentStep, onSelectedOption }: BotMessages) {
+function BotMessage({ messages, stepData, currentStep, onSelectedOption, children }: BotMessages) {
   const [selected, setSelected] = useState('');
 
   return (
@@ -59,8 +61,13 @@ function BotMessage({ messages, stepData, currentStep, onSelectedOption }: BotMe
                 ))}
               </ul>
             ) : (
-              <div className="flex flex-col w-fit max-w-[80%] min-w-[120px] p-3 rounded-2xl rounded-tl-none bg-white text-black">
-                {msg.message && <p className="whitespace-pre-line">{msg.message}</p>}
+              <div className="flex flex-col w-fit max-w-[80%] min-w-[120px] p-3 rounded-2xl rounded-tl-none bg-white text-black opacity-0 animate-fadeIn">
+                {msg.type === 'TYPING' ? (
+                  <TypingIndicator />
+                ) : (
+                  // 실제 메시지 내용
+                  <p className="whitespace-pre-line">{msg.message}</p>
+                )}
 
                 {/* radio */}
                 {msg.type === 'RADIO_OPTIONS' && msg.options?.length && (
@@ -75,6 +82,7 @@ function BotMessage({ messages, stepData, currentStep, onSelectedOption }: BotMe
                     }}
                   />
                 )}
+                {/* {children} */}
               </div>
             )}
           </div>

src/domains/recommend/components/bot/TypingIndicator.tsx

@@ -3,7 +3,7 @@ import shaker from '@/shared/assets/images/shaker.png';
 
 function TypingIndicator() {
   return (
-    <div className="relative flex items-center w-fit ml-3 p-3 rounded-2xl rounded-tl-none bg-white text-black overflow-hidden">
+    <div className="relative flex items-center w-fittext-black">
       <p className="inline-block animate-fade-in">준비 중…</p>
       <div className="relative w-10 h-10 animate-shake">
         <Image

src/domains/recommend/hook/useChatScroll.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-export const useChatScroll = (lastMessageId: string, isBotTyping: boolean) => {
+export const useChatScroll = (lastMessageId: string) => {
   const chatEndRef = useRef<HTMLDivElement>(null);
   const chatListRef = useRef<HTMLDivElement>(null);
   const isScrollBottom = useRef(true);
@@ -9,24 +9,21 @@ export const useChatScroll = (lastMessageId: string, isBotTyping: boolean) => {
   // 스크롤 제일 아래인지 체크
   const handleCheckBottom = (e: React.UIEvent<HTMLDivElement>) => {
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-
     isScrollBottom.current = scrollTop + clientHeight >= scrollHeight - 10;
 
     if (isScrollBottom.current) setShowNewMessageAlert(false);
   };
 
-  // 새 메시지가 들어오면 자동 스크롤
+  // 새 메시지또는 로딩중 변화 시 자동 스크롤
   useEffect(() => {
     const frameId = requestAnimationFrame(() => {
-      setTimeout(() => {
-        chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-        isScrollBottom.current = true;
-        setShowNewMessageAlert(false);
-      }, 50); // 50ms 정도 살짝 기다림
+      chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+      isScrollBottom.current = true;
+      setShowNewMessageAlert(false);
     });
 
     return () => cancelAnimationFrame(frameId);
-  }, [lastMessageId, isBotTyping]);
+  }, [lastMessageId]);
 
   // 스크롤 제일 아래로
   const handleScrollToBottom = () => {

src/shared/styles/_utilities.css

@@ -95,4 +95,18 @@
   .animate-shake {
     animation: shake 3s ease-in-out infinite;
   }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(5px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .animate-fadeIn {
+    animation: fadeIn 0.3s ease-out forwards;
+  }
 }