[251021] fix: VoiceInputOverlay Waiting Messages

🕐 커밋 시간: 2025. 10. 21. 11:04:23

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +17줄
  • 삭제: -32줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/SearchPanel/TInput/TInput.module.less
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/modes/VoiceResponse.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/modes/VoiceResponse.module.less

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx (javascript):
    🔄 Modified: clearAllTimers()
  📄 com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/modes/VoiceResponse.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator()

Performance: 코드 최적화로 성능 개선 기대

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

@@ -95,15 +95,15 @@
     min-height: 90px; // 높이 축소 (100px → 90px)
     color: @COLOR_GRAY07 !important;
     font-family: @baseFont;
-    font-size: 24px;
+    font-size: 42px; // Input Mode와 동일 (24px → 42px)
     font-weight: 700; // Bold 폰트
-    line-height: 1.5;
+    line-height: 42px; // Input Mode와 동일
     background-color: #fff !important;
     border-radius: 50px;
     border: none !important;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: nowrap; // 한 줄 표시
+    overflow: hidden; // 넘치는 부분 숨김
+    text-overflow: ellipsis; // 넘치면 ... 표시
 
     // placeholder 효과 (텍스트가 없을 때)
     &:empty::before {

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

@@ -827,11 +827,12 @@ const VoiceInputOverlay = ({
           console.log(
             '💬 [DEBUG][VoiceInputOverlay] MODE = RESPONSE | Rendering VoiceResponse with text:',
             sttResponseText,
-            'isLoading:',
-            !shopperHouseData
+            'isLoading: true (항상 로딩 애니메이션 표시)'
           );
         }
-        return <VoiceResponse responseText={sttResponseText} isLoading={!shopperHouseData} />;
+        // ✅ RESPONSE 모드에서는 항상 로딩 애니메이션 표시
+        // shopperHouseData는 overlay 닫기에만 사용 (searchId 유지 필요)
+        return <VoiceResponse responseText={sttResponseText} isLoading={true} />;
       case VOICE_MODES.NOINIT:
         if (DEBUG_MODE) {
           console.log('⚠️ [DEBUG][VoiceInputOverlay] MODE = NOINIT | Rendering VoiceNotRecognized');

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

@@ -92,10 +92,7 @@ const VoiceResponse = ({ responseText = '', isLoading = true }) => {
   return (
     <ResponseContainer className={css.container} spotlightId="voice-response-container">
       <div className={css.responseContainer}>
-        {/* 입력받은 텍스트 (위쪽, 작게 표시) */}
-        <div className={css.userQuery}>{displayText}</div>
-
-        {/* 로딩 메시지 (타이핑 애니메이션) */}
+        {/* 로딩 메시지 (타이핑 애니메이션) - 화면 정가운데 */}
         {isLoading && (
           <div className={css.loadingMessage}>
             <div className={css.typingText}>{typedText}</div>

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

@@ -3,36 +3,24 @@
 
 .container {
   width: 100%;
-  height: 437px;
-  position: relative;
+  height: 100vh; // 전체 화면 높이
+  position: absolute;
+  top: 0;
+  left: 0;
   border-radius: 12px;
   pointer-events: all;
-  margin-top: 100px;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: center; // 정가운데 정렬
 }
 
 .responseContainer {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
+  justify-content: center; // 정가운데 정렬
   align-items: center;
   width: 100%;
   padding: 0 40px;
-  gap: 40px;
-}
-
-// 사용자 입력 텍스트 (위쪽, 작게 표시)
-.userQuery {
-  text-align: center;
-  color: #ffffff;
-  font-size: 32px;
-  font-family: "LG Smart UI";
-  font-weight: 700;
-  line-height: 38px;
-  margin-top: 20px;
-  opacity: 0.9;
 }
 
 // 로딩 메시지 컨테이너
@@ -41,13 +29,12 @@
   align-items: center;
   justify-content: center;
   gap: 4px;
-  margin-top: 20px;
 }
 
 // 타이핑 애니메이션 텍스트
 .typingText {
   color: rgba(234, 234, 234, 0.85);
-  font-size: 34px;
+  font-size: 46px;
   font-family: "LG Smart UI";
   font-weight: 400;
   line-height: 40px;