[fix] 로딩 수정, botmessage 로직 수정

ahk0413 · ahk0413 · commit 5304cdf7edcf · 2025-10-04T19:20:48.000+09:00
diff --git a/src/domains/recommend/components/ChatList.tsx b/src/domains/recommend/components/ChatList.tsx
@@ -19,27 +19,41 @@ function ChatList({
       onScroll={handleCheckBottom}
       className="absolute top-0 left-0 bottom-18 sm:bottom-21 w-full gap-5 px-3 pt-12 pb-4 flex flex-col items-center overflow-y-auto pr-2"
     >
-      <div className="max-w-1024 w-full">
-        {messages.map((msg) => {
+      <div className="max-w-1024 w-full flex flex-col gap-5">
+        {messages.map((msg, i) => {
+          const keyId = msg.id ?? `temp-${msg.sender}-${i}-${Date.now()}`;
+          const prevMsg = messages[i - 1];
+          const showProfile = !prevMsg || prevMsg.sender !== msg.sender;
+
           if (msg.sender === 'USER') {
-            return <UserMessage key={`${msg.id}-${msg.sender}`} message={msg.message} />;
+            return (
+              <UserMessage
+                key={`${msg.id}-${msg.sender}`}
+                message={msg.message}
+                showProfile={showProfile}
+              />
+            );
           }
 
+          const isTyping = msg.type === 'TYPING';
+
           return (
             <BotMessage
-              key={`${msg.id}-${msg.sender}`}
+              key={`${keyId}-${msg.sender}`}
               messages={[
                 {
                   id: msg.id,
-                  message: msg.type === 'TYPING' ? '' : msg.message,
+                  message: msg.message,
                   type: msg.type ?? 'TEXT',
                   options: msg.type === 'RADIO_OPTIONS' ? (msg.stepData?.options ?? []) : [],
                   recommendations: getRecommendations(msg.type, msg.stepData),
                 },
               ]}
+              showProfile={showProfile}
               stepData={msg.stepData}
               currentStep={userCurrentStep}
               onSelectedOption={onSelectedOption}
+              isTyping={isTyping}
             />
           );
         })}
diff --git a/src/domains/recommend/components/ChatSection.tsx b/src/domains/recommend/components/ChatSection.tsx
@@ -19,22 +19,21 @@ import ChatList from './ChatList';
 
 function ChatSection() {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
-
   const [userCurrentStep, setUserCurrentStep] = useState(0);
-  const [isBotTyping, setIsBotTyping] = useState(false);
-
   const selectedOptions = useRef<{
     selectedAlcoholStrength?: string;
     selectedAlcoholBaseType?: string;
     selectedCocktailType?: string;
   }>({});
 
   const handleSendMessage = async (payload: stepPayload | { message: string; userId: string }) => {
-    // Typing 임시메시지
+    const tempTypingId = `typing-${Date.now()}`;
+
+    // Typing 메시지 임시 추가
     setMessages((prev) => [
       ...prev,
       {
-        id: 'typing',
+        id: tempTypingId,
         sender: 'CHATBOT',
         type: 'TYPING',
         message: '',
@@ -50,11 +49,10 @@ function ChatSection() {
 
       if (!botMessage) return;
 
-      // Typing 임시메시지 제거 후 실제 메시지 추가
-      setMessages((prev) => [...prev.filter((m) => m.type !== 'TYPING'), botMessage]);
+      setMessages((prev) => prev.map((msg) => (msg.id === tempTypingId ? botMessage : msg)));
     } catch (err) {
       console.error(err);
-      setMessages((prev) => prev.filter((m) => m.type !== 'TYPING'));
+      setMessages((prev) => prev.filter((msg) => msg.id !== tempTypingId));
     }
   };
 
@@ -166,7 +164,6 @@ function ChatSection() {
         userCurrentStep={userCurrentStep}
         onSelectedOption={handleSelectedOption}
         getRecommendations={getRecommendations}
-        isBotTyping={isBotTyping}
       />
       <MessageInput onSubmit={handleSubmitText} />
     </section>
diff --git a/src/domains/recommend/components/bot/BotMessage.tsx b/src/domains/recommend/components/bot/BotMessage.tsx
@@ -18,36 +18,70 @@ interface BotMessage {
 
 interface BotMessages {
   messages: BotMessage[];
+  showProfile: boolean;
   stepData?: StepRecommendation | null;
   currentStep?: number;
-  children?: React.ReactNode;
   onSelectedOption?: (value: string) => void;
+  isTyping?: boolean;
 }
 
-function BotMessage({ messages, stepData, currentStep, onSelectedOption, children }: BotMessages) {
+function BotMessage({
+  messages,
+  showProfile,
+  stepData,
+  currentStep,
+  onSelectedOption,
+  isTyping,
+}: BotMessages) {
   const [selected, setSelected] = useState('');
 
   return (
     <article aria-label="취향추천 챗봇 메시지" className="">
-      <header className="flex items-end">
-        <div className="relative w-15 md:w-20 h-15 md:h-20">
-          <Image
-            src={Ssury}
-            alt="쑤리아바타"
-            width={80}
-            height={80}
-            className="object-cover w-15 h-15 md:w-20 md:h-20"
-          />
-        </div>
-        <strong>쑤리</strong>
-      </header>
+      {showProfile && (
+        <header className="flex items-end">
+          <div className="relative w-15 md:w-20 h-15 md:h-20">
+            <Image
+              src={Ssury}
+              alt="쑤리아바타"
+              width={80}
+              height={80}
+              className="object-cover w-15 h-15 md:w-20 md:h-20"
+            />
+          </div>
+          <strong>쑤리</strong>
+        </header>
+      )}
 
       {/* 메시지 그룹 */}
       <div className="flex flex-col gap-3 mt-3 pl-3">
         {messages.map((msg) => (
           <div key={msg.id}>
+            <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">
+              <div>
+                {isTyping ? (
+                  <TypingIndicator />
+                ) : (
+                  <p className="whitespace-pre-line">{msg.message}</p>
+                )}
+              </div>
+
+              {/* radio */}
+              {msg.type === 'RADIO_OPTIONS' && msg.options?.length && (
+                <BotOptions
+                  options={msg.options}
+                  step={stepData?.currentStep ?? 0}
+                  currentStep={currentStep ?? 0}
+                  value={selected}
+                  onChange={(val) => {
+                    setSelected(val);
+                    onSelectedOption?.(val);
+                  }}
+                />
+              )}
+              {/* {children} */}
+            </div>
             {msg.type === 'CARD_LIST' && msg.recommendations?.length ? (
-              <ul className="inline-grid grid-cols-1 sm:grid-cols-3 gap-2 justify-start">
+              <ul className="inline-grid grid-cols-1 mt-5 sm:grid-cols-3 gap-2 justify-start">
                 {msg.recommendations.map((rec) => (
                   <li key={rec.cocktailId}>
                     <BotCocktailCard
@@ -61,29 +95,7 @@ function BotMessage({ messages, stepData, currentStep, onSelectedOption, childre
                 ))}
               </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 opacity-0 animate-fadeIn">
-                {msg.type === 'TYPING' ? (
-                  <TypingIndicator />
-                ) : (
-                  // 실제 메시지 내용
-                  <p className="whitespace-pre-line">{msg.message}</p>
-                )}
-
-                {/* radio */}
-                {msg.type === 'RADIO_OPTIONS' && msg.options?.length && (
-                  <BotOptions
-                    options={msg.options}
-                    step={stepData?.currentStep ?? 0}
-                    currentStep={currentStep ?? 0}
-                    value={selected}
-                    onChange={(val) => {
-                      setSelected(val);
-                      onSelectedOption?.(val);
-                    }}
-                  />
-                )}
-                {/* {children} */}
-              </div>
+              ''
             )}
           </div>
         ))}
diff --git a/src/domains/recommend/components/user/UserMessage.tsx b/src/domains/recommend/components/user/UserMessage.tsx
@@ -1,5 +1,6 @@
 interface Props {
   message: string;
+  showProfile: boolean;
 }
 
 // 메시지 (연속 메시지) 예시..
@@ -12,12 +13,14 @@ interface Props {
 //   { id: '2', sender: 'user', text: '배고파요' },
 // ];
 
-function UserMessage({ message }: Props) {
+function UserMessage({ message, showProfile }: Props) {
   return (
     <article aria-label="내 메시지" className="flex flex-col items-end">
-      <header className="w-fit">
-        <strong>나</strong>
-      </header>
+      {showProfile && (
+        <header className="w-fit">
+          <strong>나</strong>
+        </header>
+      )}
 
       {/* 메시지 그룹 */}
       <div className="flex flex-col items-end gap-3 mt-3 pr-3 max-w-[80%]">
diff --git a/src/domains/recommend/types/recommend.ts b/src/domains/recommend/types/recommend.ts
@@ -28,6 +28,7 @@ export interface ChatMessage {
   type?: string;
   stepData?: StepRecommendation | null;
   createdAt: string;
+  tempTyping?: boolean;
 }
 
 export interface ChatHistoryItem {
@@ -59,6 +60,5 @@ export interface ChatListProps {
     type: string | undefined,
     stepData?: StepRecommendation | null
   ) => RecommendationItem[];
-
-  isBotTyping: boolean;
+  isBotTyping?: boolean;
 }

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@ export interface ChatMessage {`
`28`	`28`	`type?: string;`
`29`	`29`	`stepData?: StepRecommendation \| null;`
`30`	`30`	`createdAt: string;`
	`31`	`+ tempTyping?: boolean;`
`31`	`32`	`}`
`32`	`33`
`33`	`34`	`export interface ChatHistoryItem {`
`@@ -59,6 +60,5 @@ export interface ChatListProps {`
`59`	`60`	`type: string \| undefined,`
`60`	`61`	`stepData?: StepRecommendation \| null`
`61`	`62`	`) => RecommendationItem[];`
`62`		`-`
`63`		`- isBotTyping: boolean;`
	`63`	`+ isBotTyping?: boolean;`
`64`	`64`	`}`