[음성검색 gif 추가]

- 이미지 gif추가.
 - voiceinputoverlay에 모드추가및 스타일 추가
 - voiceresponse에 이미지 노출처리 및 스타일 추가

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

@@ -1,40 +1,61 @@
 // src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.v2.jsx
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
 import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 
 import micIcon from '../../../../assets/images/searchpanel/image-mic.png';
-import { getShopperHouseSearch, clearShopperHouseData } from '../../../actions/searchActions';
 import { updatePanel } from '../../../actions/panelActions';
 import {
+  clearShopperHouseData,
+  getShopperHouseSearch,
+} from '../../../actions/searchActions';
+import {
+  cleanupWebSpeech,
   clearSTTText,
   initializeWebSpeech,
-  cleanupWebSpeech,
   startWebSpeech,
 } from '../../../actions/webSpeechActions';
-import { CURRENT_WEBSPEECH_VERSION } from '../../../services/voice/VoiceRecognitionManager';
-import { panel_names } from '../../../utils/Config';
 import TFullPopup from '../../../components/TFullPopup/TFullPopup';
-import TInputSimple, { ICONS, KINDS } from '../TInput/TInputSimple';
-import { useWebSpeech } from '../../../hooks/useWebSpeech';
-import { readLocalStorage, writeLocalStorage } from '../../../utils/helperMethods';
 import { useSearchHistory } from '../../../hooks/useSearchHistory';
+import { useWebSpeech } from '../../../hooks/useWebSpeech';
+import {
+  CURRENT_WEBSPEECH_VERSION,
+} from '../../../services/voice/VoiceRecognitionManager';
+import { panel_names } from '../../../utils/Config';
+import {
+  readLocalStorage,
+  writeLocalStorage,
+} from '../../../utils/helperMethods';
+import TInputSimple, {
+  ICONS,
+  KINDS,
+} from '../TInput/TInputSimple';
+import ApiStatusDisplay from './ApiStatusDisplay';
+import VoiceApiError from './modes/VoiceApiError';
 import VoiceListening from './modes/VoiceListening';
 import VoiceNotRecognized from './modes/VoiceNotRecognized';
 import VoiceNotRecognizedCircle from './modes/VoiceNotRecognizedCircle';
 import VoicePromptScreen from './modes/VoicePromptScreen';
 import VoiceResponse from './modes/VoiceResponse';
-import VoiceApiError from './modes/VoiceApiError';
-import WebSpeechEventDebug from './WebSpeechEventDebug';
 import VoiceDebugDashboard from './VoiceDebugDashboard';
-import ApiStatusDisplay from './ApiStatusDisplay';
 import css from './VoiceInputOverlay.module.less';
+import WebSpeechEventDebug from './WebSpeechEventDebug';
 
 const OverlayContainer = SpotlightContainerDecorator(
   {
@@ -1917,7 +1938,7 @@ const VoiceInputOverlay = ({
     >
       <div className={css.voiceOverlayContainer}>
         {/* 배경 dim 레이어 - 클릭하면 닫힘 */}
-        <div className={css.dimBackground} onClick={handleClose} />
+        <div className={classNames(css.dimBackground,currentMode === VOICE_MODES.RESPONSE && css.responseDimBackground)} onClick={handleClose} />
 
         {/* 디버깅용: Voice 상태 표시 */}
         {DEBUG_MODE && debugUI}

com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.module.less

@@ -23,6 +23,9 @@
   background: rgba(0, 0, 0, 0.7);
   z-index: 1000;
   cursor: pointer;
+  &.responseDimBackground {
+    background: rgba(0, 0, 0, 1);
+  }
 }
 
 .contentArea {

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

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import SpotlightContainerDecorator
   from '@enact/spotlight/SpotlightContainerDecorator';
 
+import voiceGif from '../../../../../assets/images/voiceGif.gif';
 import css from './VoiceResponse.module.less';
 
 const ResponseContainer = SpotlightContainerDecorator(
@@ -114,8 +115,11 @@ const VoiceResponse = ({ isLoading = true, query = '', searchId = '' }) => {
         {/* 로딩 메시지 (타이핑 애니메이션) - 화면 정가운데 */}
         {isLoading && (
           <div className={css.loadingMessage}>
-            <div className={css.typingText}>{typedText}</div>
-            <span className={css.cursor}>|</span>
+            <img src={voiceGif} className={css.voiceGif}/>
+            <div className={css.flexBox}>
+              <div className={css.typingText}>{typedText}</div>
+              <span className={css.cursor}>|</span>
+            </div>
           </div>
         )}
       </div>

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

@@ -28,7 +28,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
+  flex-direction: column;
+  .voiceGif {
+    width:400px;
+    margin-bottom:40px;
+  }
   > * {
     margin-right: 4px;
 
@@ -37,6 +41,11 @@
     }
   }
 }
+.flexBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
 // 타이핑 애니메이션 텍스트
 .typingText {