[검색] 음성검색시 초당 문구 노출에 관한 수정

- 0,2,4 초단위로 노출되도록 문구 적용.
 - 반복부분에 대한부분은 오현주팀장에게 문의 넣어둠.

com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/modes/VoiceResponse.jsx

@@ -1,10 +1,16 @@
 // src/views/SearchPanel/VoiceInputOverlay/modes/VoiceResponse.jsx
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
-import css from './VoiceResponse.module.less';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
-// const SpottableBubble = Spottable('div');
+import PropTypes from 'prop-types';
+
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+
+import css from './VoiceResponse.module.less';
 
 const ResponseContainer = SpotlightContainerDecorator(
   {
@@ -18,41 +24,71 @@ const ResponseContainer = SpotlightContainerDecorator(
 const IS_DEBUG = true;
 
 const VoiceResponse = ({ isLoading = true, query = '', searchId = '' }) => {
-  // 타이핑 애니메이션 상태
   const [typedText, setTypedText] = useState('');
+  const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
   const typingTimerRef = useRef(null);
+  const stageTimerRef = useRef(null);
 
-  const LOADING_MESSAGE = 'Just a moment, finding the best matches for you...';
+  const MESSAGES = [
+    "I'm analyzing your request...",
+    'Preparing your answer...',
+    'Thank you for waiting-Just finalizing it',
+  ];
   const TYPING_SPEED = 50; // ms per character
 
-  // 타이핑 애니메이션 효과 (반복)
+  // 타이핑 애니메이션 효과
   useEffect(() => {
     if (!isLoading) {
-      // 로딩이 끝나면 타이핑 애니메이션 정리
       if (typingTimerRef.current) {
         clearTimeout(typingTimerRef.current);
         typingTimerRef.current = null;
       }
+      if (stageTimerRef.current) {
+        clearTimeout(stageTimerRef.current);
+        stageTimerRef.current = null;
+      }
       setTypedText('');
+      setCurrentMessageIndex(0);
       return;
     }
 
-    // 로딩 중일 때 타이핑 애니메이션 시작 (반복)
+    const messageTimers = () => {
+      stageTimerRef.current = setTimeout(() => {
+        setCurrentMessageIndex(1);
+        setTypedText('');
+      }, 2000);
+      setTimeout(() => {
+        setCurrentMessageIndex(2);
+        setTypedText('');
+      }, 4000);
+    };
+
+    messageTimers();
+
+    return () => {
+      if (typingTimerRef.current) {
+        clearTimeout(typingTimerRef.current);
+        typingTimerRef.current = null;
+      }
+      if (stageTimerRef.current) {
+        clearTimeout(stageTimerRef.current);
+        stageTimerRef.current = null;
+      }
+    };
+  }, [isLoading]);
+
+  //  타이핑 애니메이션
+  useEffect(() => {
+    if (!isLoading) return;
+
+    const currentMessage = MESSAGES[currentMessageIndex];
     let currentIndex = 0;
 
     const typeNextChar = () => {
-      if (currentIndex < LOADING_MESSAGE.length) {
-        setTypedText(LOADING_MESSAGE.substring(0, currentIndex + 1));
+      if (currentIndex < currentMessage.length) {
+        setTypedText(currentMessage.substring(0, currentIndex + 1));
         currentIndex++;
         typingTimerRef.current = setTimeout(typeNextChar, TYPING_SPEED);
-      } else {
-        // 타이핑이 끝나면 1초 대기 후 처음부터 다시 시작
-        typingTimerRef.current = setTimeout(() => {
-          currentIndex = 0;
-          setTypedText('');
-          // 200ms 후 다시 타이핑 시작
-          typingTimerRef.current = setTimeout(typeNextChar, 200);
-        }, 1000);
       }
     };
 
@@ -67,10 +103,13 @@ const VoiceResponse = ({ isLoading = true, query = '', searchId = '' }) => {
         typingTimerRef.current = null;
       }
     };
-  }, [isLoading]);
+  }, [isLoading, currentMessageIndex]);
 
   return (
-    <ResponseContainer className={css.container} spotlightId="voice-response-container">
+    <ResponseContainer
+      className={css.container}
+      spotlightId="voice-response-container"
+    >
       <div className={css.responseContainer}>
         {/* 로딩 메시지 (타이핑 애니메이션) - 화면 정가운데 */}
         {isLoading && (