[251021] fix: VoiceInputOverlay Response DebugMode

🕐 커밋 시간: 2025. 10. 21. 12:12:12

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
  ~ 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/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript):
    🔄 Modified: extractProductMeta()
  📄 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):
    ✅ Added: VoiceResponse()
    🔄 Modified: SpotlightContainerDecorator()

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx

@@ -148,7 +148,7 @@ export default function ProductAllSection({
   const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
 
   // ProductVideo 버전 관리 (1: 기존 modal 방식, 2: 내장 방식 , 3: 비디오 생략)
-  const [productVideoVersion, setProductVideoVersion] = useState(2);
+  const [productVideoVersion, setProductVideoVersion] = useState(3);
 
   // const [currentHeight, setCurrentHeight] = useState(0);
   //하단부분까지 갔을때 체크용

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

@@ -832,7 +832,14 @@ const VoiceInputOverlay = ({
         }
         // ✅ RESPONSE 모드에서는 항상 로딩 애니메이션 표시
         // shopperHouseData는 overlay 닫기에만 사용 (searchId 유지 필요)
-        return <VoiceResponse responseText={sttResponseText} isLoading={true} />;
+        return (
+          <VoiceResponse
+            responseText={sttResponseText}
+            isLoading={true}
+            query={sttResponseText}
+            searchId={shopperHouseSearchId || ''}
+          />
+        );
       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

@@ -15,7 +15,10 @@ const ResponseContainer = SpotlightContainerDecorator(
   'div'
 );
 
-const VoiceResponse = ({ responseText = '', isLoading = true }) => {
+// 디버그 정보 표시 여부 (개발/프로덕션 모두에서 작동)
+const IS_DEBUG = true;
+
+const VoiceResponse = ({ responseText = '', isLoading = true, query = '', searchId = '' }) => {
   // 타이핑 애니메이션 상태
   const [typedText, setTypedText] = useState('');
   const typingTimerRef = useRef(null);
@@ -100,6 +103,14 @@ const VoiceResponse = ({ responseText = '', isLoading = true }) => {
           </div>
         )}
       </div>
+
+      {/* 디버그 정보 - 왼쪽 하단 */}
+      {IS_DEBUG && (
+        <div className={css.debugInfo}>
+          <div className={css.debugLine}>Query: {query || '(없음)'}</div>
+          <div className={css.debugLine}>SearchId: {searchId || '(없음)'}</div>
+        </div>
+      )}
     </ResponseContainer>
   );
 };
@@ -107,11 +118,15 @@ const VoiceResponse = ({ responseText = '', isLoading = true }) => {
 VoiceResponse.propTypes = {
   responseText: PropTypes.string,
   isLoading: PropTypes.bool,
+  query: PropTypes.string,
+  searchId: PropTypes.string,
 };
 
 VoiceResponse.defaultProps = {
   responseText: '',
   isLoading: true,
+  query: '',
+  searchId: '',
 };
 
 export default VoiceResponse;

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

@@ -59,6 +59,27 @@
   }
 }
 
+// 디버그 정보 - 왼쪽 하단 (100px 위로)
+.debugInfo {
+  position: absolute;
+  bottom: 130px; // 30px → 130px (100px 위로)
+  left: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 9999;
+}
+
+.debugLine {
+  color: #ffffff;
+  font-size: 24px;
+  font-family: "LG Smart UI";
+  font-weight: 400;
+  line-height: 28px;
+  text-align: left;
+  opacity: 0.9;
+}
+
 .talkAgainButton {
   margin-bottom: 100px;
   padding: 20px 60px;