[251028] feat: SearchPanel.new.v2 Click으로 SearchInputOverlay

🕐 커밋 시간: 2025. 10. 28. 19:59:43

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +14줄
  • 삭제: -1줄

📝 수정된 파일:
  ~ 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/SearchPanel.new.v2.jsx

@@ -1789,6 +1789,12 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
                         currentMode === SEARCH_PANEL_MODES.SEARCH_RESULT
                       } // ✅ INITIAL, VOICE_RESULT & SEARCH_RESULT 모드에서 TInputSimple 내부 포커스 활성화
                       onKeyDown={handleKeydown}
+                      onMouseDown={() => {
+                        console.log(
+                          '[DEBUG] [SearchPanel] TInputSimple에서 마우스 클릭 감지 → SearchInputOverlay 오픈'
+                        );
+                        setIsSearchOverlayVisible(true);
+                      }}
                       spotlightId={SPOTLIGHT_IDS.SEARCH_INPUT_BOX}
                       // 🎯 [포커스 중첩 해결] SearchResultsContainer로 포커스 전달
                       // SearchResultsContainer가 Spotlight 컨테이너이므로, 포커스가 들어오면

com.twin.app.shoptime/src/views/SearchPanel/TInput/TInputSimple.jsx

@@ -43,6 +43,7 @@ export default function TInputSimple({
   alwaysShowText = false, // 🎯 VOICE_RESULT 모드에서 항상 텍스트 표시
   inputFocus = false, // ✨ 외부 inputFocus 상태 전달받기 위한 prop
   spotlightDisabled,
+  onMouseDown, // ✨ 마우스 클릭 핸들러 prop 추가
   ...rest // ✅ [251026] ADD: Spotlight 포커스 네비게이션 속성 전달
 }) {
   const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
@@ -108,7 +109,12 @@ export default function TInputSimple({
       containerElement.focus();
       setIsFocused(true);
     }
-  }, [spotlightId]);
+
+    // ✨ 마우스 클릭 시 외부 핸들러 호출 (SearchInputOverlay 열기)
+    if (onMouseDown) {
+      onMouseDown();
+    }
+  }, [spotlightId, onMouseDown]);
 
   // 돋보기 아이콘 키 핸들러
   const handleButtonKeyDown = useCallback((e) => {
@@ -182,6 +188,7 @@ TInputSimple.propTypes = {
   placeholder: PropTypes.string,
   text: PropTypes.string, // ✨ [Phase 8] Overlay에서 입력받은 텍스트만 사용
   alwaysShowText: PropTypes.bool, // 🎯 VOICE_RESULT 모드에서 항상 텍스트 표시
+  onMouseDown: PropTypes.func, // ✨ 마우스 클릭 핸들러 prop
 };
 
 export { BORDER, COLOR, ICONS, KINDS };