[251023] fix: SearchPanel.new.v2 ShoppHouse TurnBack and Focus

🕐 커밋 시간: 2025. 10. 23. 20:45:59

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/reducers/searchReducer.js
  ~ com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.v2.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx

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

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선

com.twin.app.shoptime/src/reducers/searchReducer.js

@@ -155,6 +155,11 @@ export const searchReducer = (state = initialState, action) => {
       };
 
     case types.CLEAR_SHOPPERHOUSE_DATA:
+      console.log('[DEBUG] 🧹 Redux shopperHouseData 초기화 호출 - 호출 스택 추적:');
+      console.log(
+        '[DEBUG] 호출 위치:',
+        new Error().stack?.split('\n')[1]?.trim() || '(스택 추적 불가)'
+      );
       console.log(
         '[VoiceInput] 🧹 Redux shopperHouseData 초기화 (searchId & relativeQueries는 유지)'
       );

com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.v2.jsx

@@ -137,6 +137,50 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
   // ✨ [Phase 1] SearchPanel의 현재 모드 상태 (VoiceInputOverlay의 VOICE_MODES와 동일한 개념)
   const [currentMode, setCurrentMode] = useState(SEARCH_PANEL_MODES.INITIAL);
 
+  // 🐛 [DEBUG] shopperHouseData 상태 변경 추적
+  useEffect(() => {
+    console.log('[DEBUG] 📊 SearchPanel shopperHouseData 상태 변경:', {
+      hasData: !!shopperHouseData,
+      dataLength: shopperHouseData?.results?.[0]?.docs?.length || 0,
+      searchId: shopperHouseData?.results?.[0]?.searchId || '(없음)',
+      timestamp: new Date().toISOString(),
+    });
+  }, [shopperHouseData]);
+
+  // 🐛 [DEBUG] SearchPanel 마운트/언마운트 추적
+  useEffect(() => {
+    console.log('[DEBUG] 🚀 SearchPanel 마운트됨 - 초기 shopperHouseData 상태:', {
+      hasData: !!shopperHouseData,
+      dataLength: shopperHouseData?.results?.[0]?.docs?.length || 0,
+      currentMode,
+      timestamp: new Date().toISOString(),
+    });
+
+    return () => {
+      console.log('[DEBUG] 🔚 SearchPanel 언마운트됨 - shopperHouseData 상태:', {
+        hasData: !!shopperHouseData,
+        dataLength: shopperHouseData?.results?.[0]?.docs?.length || 0,
+        timestamp: new Date().toISOString(),
+      });
+    };
+  }, []);
+
+  // 🐛 [DEBUG] isOnTop 상태 변경 추적 (DetailPanel <-> SearchPanel 전환)
+  useEffect(() => {
+    if (isOnTopRef.current !== isOnTop) {
+      console.log('[DEBUG] 🔄 SearchPanel isOnTop 상태 변경:', {
+        from: isOnTopRef.current,
+        to: isOnTop,
+        shopperHouseData_preserved: !!shopperHouseData,
+        dataLength: shopperHouseData?.results?.[0]?.docs?.length || 0,
+        scenario: isOnTop
+          ? 'DetailPanel에서 SearchPanel로 복귀'
+          : 'SearchPanel에서 DetailPanel로 이동',
+        timestamp: new Date().toISOString(),
+      });
+    }
+  }, [isOnTop, shopperHouseData]);
+
   /**
    * refs
    */
@@ -730,7 +774,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
    * 컴포넌트 최초 마운트 시 Voice Search 상태 초기화
    */
   useEffect(() => {
-    dispatch(resetVoiceSearch());
+    // dispatch(resetVoiceSearch());
     dispatch(getSearchMain());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -867,7 +911,18 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
     if (isOnTop && !isOnTopRef.current) {
       // SearchPanel이 방금 열렸을 때 (이전에는 열려있지 않았음)
       initialFocusTimerRef.current = setTimeout(() => {
-        Spotlight.focus(SPOTLIGHT_IDS.SEARCH_INPUT_BOX);
+        // 🎯 DetailPanel에서 돌아왔을 때 이전 상품에 포커스 복원
+        if (panelInfo?.currentSpot && currentMode === SEARCH_PANEL_MODES.VOICE_RESULT) {
+          console.log('[DEBUG] 🎯 DetailPanel에서 복귀 - 이전 상품으로 포커스 복원:', {
+            currentSpot: panelInfo.currentSpot,
+            currentMode,
+            timestamp: new Date().toISOString(),
+          });
+          Spotlight.focus(panelInfo.currentSpot);
+        } else {
+          // 일반적인 경우: TInput으로 포커스
+          Spotlight.focus(SPOTLIGHT_IDS.SEARCH_INPUT_BOX);
+        }
       }, 100);
     }
 
@@ -878,7 +933,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
         initialFocusTimerRef.current = null;
       }
     };
-  }, [isOnTop, isOnTopRef]);
+  }, [isOnTop, isOnTopRef, panelInfo?.currentSpot, currentMode]);
 
   /**
    * focus 용도
@@ -886,6 +941,19 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
    */
   useEffect(() => {
     if (shopperHouseData && isOnTop) {
+      // 🎯 VOICE_RESULT 모드에서는 포커스 복원을 위해 TInput으로 이동하지 않음
+      if (currentMode === SEARCH_PANEL_MODES.VOICE_RESULT) {
+        console.log(
+          '[DEBUG] 🎯 VOICE_RESULT 모드 - ShopperHouse 데이터 수신 시 TInput 포커스 스킵:',
+          {
+            currentMode,
+            hasShopperHouseData: !!shopperHouseData,
+            reason: '상품 포커스 복원 우선',
+          }
+        );
+        return;
+      }
+
       // ShopperHouse 검색 결과가 들어왔을 때 TInput으로 포커스 이동
       const focusTimer = setTimeout(() => {
         Spotlight.focus(SPOTLIGHT_IDS.SEARCH_INPUT_BOX);
@@ -895,7 +963,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
         clearTimeout(focusTimer);
       };
     }
-  }, [shopperHouseData, isOnTop]);
+  }, [shopperHouseData, isOnTop, currentMode]);
 
   /**
    * LOG 용도,

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

@@ -911,7 +911,7 @@ const VoiceInputOverlay = ({
     // Cleanup: 언마운트 시에만 초기화
     return () => {
       console.log('[VoiceInput] 🔚 VoiceInputOverlay 언마운트 - searchId 초기화');
-      dispatch(clearShopperHouseData());
+      // dispatch(clearShopperHouseData());
       dispatch(clearSTTText());
     };
   }, [dispatch]); // 언마운트 시에만 실행
@@ -1073,7 +1073,7 @@ const VoiceInputOverlay = ({
     setIsBubbleClickSearch(false); // bubble 클릭 상태 초기화
 
     // 3. Redux 정리 (VoiceInputOverlay의 책임)
-    dispatch(clearShopperHouseData());
+    // dispatch(clearShopperHouseData());
     dispatch(clearSTTText());
 
     // 4. Parent에 닫기 통지