[251024] fix: SearchInputOvelray 및 focus-within 대체

🕐 커밋 시간: 2025. 10. 24. 20:37:16

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

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

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/SearchPanel/SearchInputOverlay.jsx (javascript):
    🔄 Modified: Spottable()
  📄 com.twin.app.shoptime/src/views/SearchPanel/TInput/TInputSimple.jsx (javascript):
    🔄 Modified: Spottable()
  📄 com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx (javascript):
    🔄 Modified: clearAllTimers()
This commit is contained in:
2025-10-24 20:37:18 +09:00
parent 7462c2876d
commit aec2292b3e
7 changed files with 111 additions and 33 deletions

View File

@@ -294,9 +294,18 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
// ✨ [Phase 4] Enter/OK 키 처리 - SearchInputOverlay 표시
if (e.key === 'Enter' || e.keyCode === 13) {
console.log('[DEBUG] [SearchPanel] handleKeydown: Enter/OK 키 누름');
console.log(
'[DEBUG] [SearchPanel] TInputSimple에서 Enter/OK 키 감지 → SearchInputOverlay 오픈'
);
e.preventDefault();
// ✨ [Phase 6] SearchInputOverlay 오픈 후 자동으로 입력 준비 완료
// SearchInputOverlay가 열리면 자동으로:
// 1. DOM 렌더링
// 2. useEffect에서 input.focus() 호출 (50ms 후)
// 3. 사용자가 바로 입력 가능한 상태
setIsSearchOverlayVisible(true);
// ✅ 수정: Enter 키 누를 때에도 inputFocus 유지 (VOICE_RESULT 모드에서 키보드 이벤트 수신 가능)
// setInputFocus(false);
return;
@@ -611,6 +620,9 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
* Search overlay close handler
*/
const handleSearchOverlayClose = useCallback(() => {
if (DEBUG_MODE) {
console.log('[DEBUG] 🚪 SearchInputOverlay closing');
}
setIsSearchOverlayVisible(false);
// VoiceInputOverlay와 동일하게 닫힐 때 TInput으로 포커스 이동
setTimeout(() => {
@@ -1253,9 +1265,10 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
currentMode === SEARCH_PANEL_MODES.SEARCH_RESULT
} // 🎯 VOICE_RESULT & SEARCH_RESULT 모드에서 항상 텍스트 표시
inputFocus={
currentMode === SEARCH_PANEL_MODES.INITIAL ||
currentMode === SEARCH_PANEL_MODES.VOICE_RESULT ||
currentMode === SEARCH_PANEL_MODES.SEARCH_RESULT
} // VOICE_RESULT & SEARCH_RESULT 모드에서 TInputSimple 내부 포커스 활성화
} // INITIAL, VOICE_RESULT & SEARCH_RESULT 모드에서 TInputSimple 내부 포커스 활성화
onKeyDown={handleKeydown}
spotlightId={SPOTLIGHT_IDS.SEARCH_INPUT_BOX}
forcedSpotlight="recent-keyword-0"