[251026] fix: SearchPanel.new.v2 Focus -3

🕐 커밋 시간: 2025. 10. 26. 14:22:22

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +64줄
  • 삭제: -26줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.small.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.v2.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.v2.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx

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

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

@@ -186,6 +186,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
   const [isVoiceOverlayBubbleSearch, setIsVoiceOverlayBubbleSearch] = useState(false);
   const [shouldFocusVoiceResult, setShouldFocusVoiceResult] = useState(false);
 
+  // 🎯 HowAboutThese 포커스 관리 - 검색 입력 영역 포커스 감지용 상태
+  const [searchInputFocused, setSearchInputFocused] = useState(false);
+
   // 🐛 [DEBUG] shopperHouseData 상태 변경 추적 (DEBUG_MODE가 true일 경우에만)
   useEffect(() => {
     if (DEBUG_MODE) {
@@ -325,6 +328,8 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
    */
   const _onFocus = useCallback(() => {
     setInputFocus(true);
+    // 🎯 HowAboutThese 포커스 관리 - 검색 입력 영역 포커스 상태 설정
+    setSearchInputFocused(true);
   }, []);
 
   /**
@@ -332,6 +337,17 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
    */
   const _onBlur = useCallback(() => {
     setInputFocus(false);
+    // 🎯 HowAboutThese 포커스 관리 - 검색 입력 영역 포커스 해제
+    setSearchInputFocused(false);
+  }, []);
+
+  // 🎯 HowAboutThese 포커스 관리 - TInputSimple/Mic Icon 포커스 감지 핸들러
+  const handleSearchInputFocus = useCallback(() => {
+    setSearchInputFocused(true);
+  }, []);
+
+  const handleSearchInputBlur = useCallback(() => {
+    setSearchInputFocused(false);
   }, []);
 
   // 0hun: ✨ [Phase 3] showVirtualKeyboard 제거 (주석 처리된 VirtualKeyboardContainer와 함께 비활성화)
@@ -1137,6 +1153,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                 keywordClick={handleKeywordClick}
                 panelInfo={panelInfo}
                 cbChangePageRef={cbChangePageRef}
+                onSearchInputFocus={searchInputFocused}
               />
             ) : (
               <NoSearchResults />
@@ -1158,6 +1175,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
             panelInfo={panelInfo}
             onRelativeQueryClick={handleHowAboutTheseQueryClick}
             cbChangePageRef={cbChangePageRef}
+            onSearchInputFocus={searchInputFocused}
           />
         );
 
@@ -1298,6 +1316,8 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
     createHistoryKeywordClickHandler,
     renderItem,
     panelInfo?.currentSpot,
+    // ✅ [251026] ADD: searchInputFocused를 의존성에 추가 - HowAboutThese 포커스 관리
+    searchInputFocused,
   ]);
 
   /**
@@ -1729,8 +1749,11 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                       } // ✅ INITIAL, VOICE_RESULT & SEARCH_RESULT 모드에서 TInputSimple 내부 포커스 활성화
                       onKeyDown={handleKeydown}
                       spotlightId={SPOTLIGHT_IDS.SEARCH_INPUT_BOX}
-                      // ✅ [251026] ADD: Spotlight 포커스 네비게이션 - onSpotlightDown 이벤트 핸들러 사용
-                      onSpotlightDown={currentMode === SEARCH_PANEL_MODES.VOICE_RESULT ? () => Spotlight.focus('howAboutThese-seeMore') : undefined}
+                      // ✅ [251026] ADD: Spotlight 포커스 네비게이션 - data-spotlight-down 속성 사용
+                      data-spotlight-down={currentMode === SEARCH_PANEL_MODES.VOICE_RESULT ? 'howAboutThese-seeMore' : undefined}
+                      // 🎯 HowAboutThese 포커스 관리 - 포커스가 검색 입력 영역으로 올 때 감지
+                      onSpotlightUp={handleSearchInputFocus}
+                      onSpotlightLeft={handleSearchInputFocus}
                       forcedSpotlight="recent-keyword-0"
                       tabIndex={0}
                       spotlightBoxDisabled
@@ -1745,8 +1768,11 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                     // onFocus={onFocusMic}
                     onKeyDown={handleMicKeyDown}
                     spotlightId={SPOTLIGHT_IDS.MICROPHONE_BUTTON}
-                    // ✅ [251026] ADD: Spotlight 포커스 네비게이션 - onSpotlightDown 이벤트 핸들러 사용
-                    onSpotlightDown={currentMode === SEARCH_PANEL_MODES.VOICE_RESULT ? () => Spotlight.focus('howAboutThese-seeMore') : undefined}
+                    // ✅ [251026] ADD: Spotlight 포커스 네비게이션 - data-spotlight-down 속성 사용
+                    data-spotlight-down={currentMode === SEARCH_PANEL_MODES.VOICE_RESULT ? 'howAboutThese-seeMore' : undefined}
+                    // 🎯 HowAboutThese 포커스 관리 - 포커스가 마이크 버튼으로 올 때 감지
+                    onSpotlightUp={handleSearchInputFocus}
+                    onSpotlightLeft={handleSearchInputFocus}
                   >
                     <div className={css.microphoneCircle}>
                       <SafeImage src={micIcon} alt="Microphone" className={css.microphoneIcon} />