[251028] fix: webSpeech MIC버튼 클릭시마다 재초기화

🕐 커밋 시간: 2025. 10. 28. 24:07:45

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +56줄
  • 삭제: -16줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx

🔧 주요 변경 내용:
  • 소규모 기능 개선

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

@@ -12,7 +12,12 @@ 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 { clearSTTText } from '../../../actions/webSpeechActions';
+import {
+  clearSTTText,
+  initializeWebSpeech,
+  cleanupWebSpeech,
+  startWebSpeech,
+} from '../../../actions/webSpeechActions';
 import { panel_names } from '../../../utils/Config';
 import TFullPopup from '../../../components/TFullPopup/TFullPopup';
 import TInputSimple, { ICONS, KINDS } from '../TInput/TInputSimple';
@@ -1519,12 +1524,24 @@ const VoiceInputOverlay = ({
 
       if (currentMode === VOICE_MODES.PROMPT) {
         // ✨ PROMPT 모드에서만 LISTENING으로 전환 가능
-        // 1. listening 모드로 전환 (15초 타이머)
-        // 2. WebSpeech API 시작 (독립 동작)
-        console.log('[VoiceInput] 🎙️ 마이크 버튼 클릭 - 음성 입력 시작');
-        console.log('[VoiceInput]   └─ 이전 STT 데이터 초기화');
+        console.log('[VoiceInput] 🎙️ 마이크 버튼 클릭 - WebSpeech 재초기화 시작');
 
-        // ✅ 이전 STT 데이터 초기화 (새로운 음성 입력 시작)
+        // 📋 단계별 처리:
+        // 1. WebSpeech 완전 cleanup (이전 상태 제거)
+        // 2. Redux STT 데이터 초기화 (searchId는 유지)
+        // 3. WebSpeech 재초기화
+        // 4. 즉시 시작
+
+        // ============================================================
+        // 1️⃣ WebSpeech 완전 cleanup (이전 상태 제거)
+        // ============================================================
+        console.log('[VoiceInput]   ├─ [Step 1] WebSpeech cleanup 시작');
+        dispatch(cleanupWebSpeech());
+
+        // ============================================================
+        // 2️⃣ Redux STT 데이터 초기화 (searchId는 Redux에서 유지됨)
+        // ============================================================
+        console.log('[VoiceInput]   ├─ [Step 2] STT 데이터 초기화 (searchId 유지)');
         dispatch(clearSTTText());
 
         // ✅ TInput 초기화
@@ -1539,25 +1556,48 @@ const VoiceInputOverlay = ({
         clearTimerRef(listeningTimerRef);
         clearTimerRef(silenceDetectionTimerRef);
 
+        // UI 모드 업데이트
         setVoiceInputMode(VOICE_INPUT_MODE.WEBSPEECH);
         setCurrentMode(VOICE_MODES.LISTENING);
 
         // ✅ LISTENING 모드 진입 시 로그 초기화 (새로운 음성 입력 시작)
         setWebSpeechEventLogs([]);
-        // localStorage에서도 초기화
         writeLocalStorage(VOICE_EVENT_LOGS_KEY, []);
         if (DEBUG_MODE) {
-          console.log('🧹 [DEBUG] Cleared webSpeechEventLogs on PROMPT->LISTENING transition');
+          console.log('🧹 [DEBUG] Cleared webSpeechEventLogs on mic click');
         }
 
-        // WebSpeech API 시작
-        startListening();
+        // ============================================================
+        // 3️⃣ WebSpeech 재초기화 (약간의 지연 후)
+        // ============================================================
+        console.log('[VoiceInput]   ├─ [Step 3] WebSpeech 재초기화 시작');
+        const reinitializeWebSpeech = setTimeout(() => {
+          // Redux 상태 업데이트를 기다리기 위해 약간의 지연
+          dispatch(
+            initializeWebSpeech({
+              lang: 'en-US',
+              continuous: true,
+              interimResults: true,
+            })
+          );
 
-        // 15초 타이머 설정: 최대 입력 시간 제한
-        listeningTimerRef.current = setTimeout(() => {
-          addWebSpeechEventLog('TIMEOUT_15S', '15 second timeout reached - finishing input');
-          processFinalVoiceInput('15초 타임아웃');
-        }, 15000); // 15초
+          // ============================================================
+          // 4️⃣ WebSpeech 즉시 시작
+          // ============================================================
+          console.log('[VoiceInput]   └─ [Step 4] WebSpeech 시작');
+          dispatch(startWebSpeech());
+
+          // 15초 타이머 설정: 최대 입력 시간 제한
+          listeningTimerRef.current = setTimeout(() => {
+            addWebSpeechEventLog('TIMEOUT_15S', '15 second timeout reached - finishing input');
+            processFinalVoiceInput('15초 타임아웃');
+          }, 15000); // 15초
+        }, 100);
+
+        // Cleanup: 언마운트 시 타이머 정리
+        return () => {
+          clearTimeout(reinitializeWebSpeech);
+        };
       } else {
         // listening 모드 또는 기타 모드에서 클릭 시 -> overlay 닫기
         if (DEBUG_MODE) {