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

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

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

📝 수정된 파일:
  ~ 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/TInput/TInputSimple.jsx

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

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

@@ -394,7 +394,10 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
           }
         }
 
-        // 아래쪽 화살표 키 처리 - SEE MORE 버튼으로 포커스 이동
+        // ❌ [251026] DEPRECATED: 아래쪽 화살표 키 처리 - Spotlight 속성으로 대체됨
+        // Spotlight의 data-spotlight-down 속성으로 처리하도록 변경
+        // 기존 코드 보존 (향후 필요시 참고용)
+        /*
         if (e.key === 'ArrowDown' || e.key === 'Down') {
           e.preventDefault();
           setTimeout(() => {
@@ -402,6 +405,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
           }, 0);
           return;
         }
+        */
 
         // 나머지 방향키는 Spotlight가 처리하도록 허용
         return;
@@ -1039,7 +1043,10 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
         onClickMic();
       }
 
-      // 아래쪽 화살표 키 처리 - SEE MORE 버튼으로 포커스 이동
+      // ❌ [251026] DEPRECATED: 아래쪽 화살표 키 처리 - Spotlight 속성으로 대체됨
+      // Spotlight의 data-spotlight-down 속성으로 처리하도록 변경
+      // 기존 코드 보존 (향후 필요시 참고용)
+      /*
       if (e.key === 'ArrowDown' || e.key === 'Down') {
         e.preventDefault();
         setTimeout(() => {
@@ -1047,6 +1054,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
         }, 0);
         return;
       }
+      */
     },
     [onClickMic]
   );
@@ -1721,6 +1729,8 @@ 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}
                       forcedSpotlight="recent-keyword-0"
                       tabIndex={0}
                       spotlightBoxDisabled
@@ -1735,6 +1745,8 @@ 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}
                   >
                     <div className={css.microphoneCircle}>
                       <SafeImage src={micIcon} alt="Microphone" className={css.microphoneIcon} />