optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[251024] fix: SearchPanel.new.v2 Optimization-1

Browse Source 
🕐 커밋 시간: 2025. 10. 24. 09:51:08

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +357줄
  • 삭제: -145줄

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

🔧 주요 변경 내용:
  • 대규모 기능 개발
This commit is contained in:
hyeon soo noh
2025-10-24 09:51:10 +09:00
parent c3985f6f98
commit 25b038e304
4 changed files with 359 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,7 @@ import NoSearchResults from './NoSearchResults/NoSearchResults';
// import NoSearchResults from './NoSearchResults/NoSearchResults';
import SearchInputOverlay from './SearchInpuOverlay';
import css from './SearchPanel.new.module.less';
import SearchResultsNew from './SearchResults.new';
import SearchResultsNew from './SearchResults.new.v2';
import TInputSimple, { ICONS, KINDS } from './TInput/TInputSimple';
import VoiceInputOverlay, { VOICE_MODES } from './VoiceInputOverlay/VoiceInputOverlay';
@@ -72,10 +72,51 @@ const InputContainer = SpotlightContainerDecorator({ enterTo: 'last-focused' },
// 콘텐츠 섹션 컨테이너
const SectionContainer = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
// Spottable 컴포넌트들
const SpottableMicButton = Spottable('div');
const SpottableKeyword = Spottable('div');
const SpottableProduct = Spottable('div');
// 메모리 누수 방지를 위한 안전한 이미지 컴포넌트 (컴포넌트 외부로 이동)
const SafeImageComponent = ({ src, alt, className, ...props }) => {
const imgRef = useRef(null);
useEffect(() => {
const img = imgRef.current;
if (!img) return;
// 이미지 로드 완료 핸들러
const handleLoad = () => {
// 로드 성공 시 특별한 처리 불필요
};
// 이미지 로드 에러 핸들러
const handleError = () => {
// 에러 시 src를 제거하여 깨진 이미지 방지
if (img.src) {
img.src = '';
}
};
img.addEventListener('load', handleLoad);
img.addEventListener('error', handleError);
// 컴포넌트 unmount 시 이벤트 리스너 정리
return () => {
img.removeEventListener('load', handleLoad);
img.removeEventListener('error', handleError);
// 이미지 로딩 취소
if (img.src) {
img.src = '';
}
};
}, []);
return (
<img
ref={imgRef}
src={src}
alt={alt}
className={className}
{...props}
/>
);
};
const ITEMS_PER_PAGE = 9;
@@ -94,6 +135,9 @@ const SPOTLIGHT_IDS = {
export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
const dispatch = useDispatch();
// DEBUG 모드 상태 - 개발 환경에서만 활성화
const DEBUG_MODE = process.env.NODE_ENV === 'development';
/**
* stores
*/
@@ -137,37 +181,43 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
// ✨ [Phase 1] SearchPanel의 현재 모드 상태 (VoiceInputOverlay의 VOICE_MODES와 동일한 개념)
const [currentMode, setCurrentMode] = useState(SEARCH_PANEL_MODES.INITIAL);
// 🐛 [DEBUG] shopperHouseData 상태 변경 추적
// 🐛 [DEBUG] shopperHouseData 상태 변경 추적 (DEBUG_MODE가 true일 경우에만)
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 상태:', {
if (DEBUG_MODE) {
console.log('[DEBUG] 📊 SearchPanel shopperHouseData 상태 변경:', {
hasData: !!shopperHouseData,
dataLength: shopperHouseData?.results?.[0]?.docs?.length || 0,
searchId: shopperHouseData?.results?.[0]?.searchId || '(없음)',
timestamp: new Date().toISOString(),
});
};
}, []);
}
}, [shopperHouseData?.results?.[0]?.docs?.length, shopperHouseData?.results?.[0]?.searchId, DEBUG_MODE]);
// 🐛 [DEBUG] isOnTop 상태 변경 추적 (DetailPanel <-> SearchPanel 전환)
// 🐛 [DEBUG] SearchPanel 마운트/언마운트 추적 (DEBUG_MODE가 true일 경우에만)
useEffect(() => {
if (isOnTopRef.current !== isOnTop) {
if (DEBUG_MODE) {
console.log('[DEBUG] 🚀 SearchPanel 마운트됨 - 초기 shopperHouseData 상태:', {
hasData: !!shopperHouseData,
dataLength: shopperHouseData?.results?.[0]?.docs?.length || 0,
currentMode,
timestamp: new Date().toISOString(),
});
}
return () => {
if (DEBUG_MODE) {
console.log('[DEBUG] 🔚 SearchPanel 언마운트됨 - shopperHouseData 상태:', {
hasData: !!shopperHouseData,
dataLength: shopperHouseData?.results?.[0]?.docs?.length || 0,
timestamp: new Date().toISOString(),
});
}
};
}, [DEBUG_MODE]);
// 🐛 [DEBUG] isOnTop 상태 변경 추적 (DetailPanel <-> SearchPanel 전환, DEBUG_MODE가 true일 경우에만)
useEffect(() => {
if (isOnTopRef.current !== isOnTop && DEBUG_MODE) {
console.log('[DEBUG] 🔄 SearchPanel isOnTop 상태 변경:', {
from: isOnTopRef.current,
to: isOnTop,
@@ -179,7 +229,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
timestamp: new Date().toISOString(),
});
}
}, [isOnTop, shopperHouseData]);
}, [isOnTop, shopperHouseData?.results?.[0]?.docs?.length, DEBUG_MODE]);
/**
* refs
@@ -190,6 +240,16 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
const cbChangePageRef = useRef(null);
const initialFocusTimerRef = useRef(null);
const spotlightResumeTimerRef = useRef(null);
// DOM 쿼리 최적화를 위한 ref 추가
const inputElementRef = useRef(null);
// Spottable 컴포넌트 캐싱으로 메모리 누수 방지
const SpottableMicButton = useMemo(() => Spottable('div'), []);
const SpottableKeyword = useMemo(() => Spottable('div'), []);
const SpottableProduct = useMemo(() => Spottable('div'), []);
// SafeImage 컴포넌트 캐싱
const SafeImage = useCallback(SafeImageComponent, []);
/**
* memoized variables
@@ -232,10 +292,11 @@ 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 키 누름');
e.preventDefault();
setIsSearchOverlayVisible(true);
// TInputSimple의 포커스 해제
setInputFocus(false);
// ✅ 수정: Enter 키 누를 때에도 inputFocus 유지 (VOICE_RESULT 모드에서 키보드 이벤트 수신 가능)
// setInputFocus(false);
return;
}
@@ -260,10 +321,15 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
// 오른쪽 화살표 키 처리 - 포커스 이동 허용
if (e.key === 'ArrowRight' || e.key === 'Right') {
// 커서가 텍스트 끝에 있을 때만 포커스 이동 허용
const input = document.querySelector(`[data-spotlight-id="input-field-box"] > input`);
if (input && position === input.value.length) {
// 커서가 텍스트 끝에 있으면 포커스 이동 허용
return;
// DOM 쿼리 최적화: 캐싱된 input element 사용
const input = inputElementRef.current ||
document.querySelector(`[data-spotlight-id="input-field-box"] > input`);
if (input) {
inputElementRef.current = input; // 캐싱
if (position === input.value.length) {
// 커서가 텍스트 끝에 있으면 포커스 이동 허용
return;
}
}
}
@@ -329,11 +395,15 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
/**
* 0hun: keyUp 이벤트 핸들러, keyUp 시 `position`의 상태값 변경하는 함수
* DOM 쿼리 최적화: ref를 사용하여 반복적인 DOM 조회 방지
*/
const cursorPosition = useCallback(() => {
const input = document.querySelector(`[data-spotlight-id="input-field-box"] > input`);
// ref를 사용하여 캐싱된 input element 사용
const input = inputElementRef.current ||
document.querySelector(`[data-spotlight-id="input-field-box"] > input`);
if (input) {
inputElementRef.current = input; // 캐싱
setPosition(input.selectionStart);
}
}, []);
@@ -346,10 +416,12 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
return;
}
console.log(
'🖱️ [DEBUG][SearchPanel] onClickMic called, current isVoiceOverlayVisible:',
isVoiceOverlayVisible
);
if (DEBUG_MODE) {
console.log(
'🖱️ [DEBUG][SearchPanel] onClickMic called, current isVoiceOverlayVisible:',
isVoiceOverlayVisible
);
}
setIsVoiceOverlayVisible(true);
// setIsVoiceOverlayVisible((prev) => !prev);
}, [isVoiceOverlayVisible]);
@@ -358,59 +430,77 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
* 0hun: panel 뒤로가기 이벤트
*/
const onCancel = useCallback(() => {
console.log('[DEBUG]-onCancel called', {
isOnTop: isOnTopRef.current,
isVoiceOverlayVisible,
isSearchOverlayVisible,
currentMode,
searchQuery,
hasShopperHouseData: !!shopperHouseData,
});
if (DEBUG_MODE) {
console.log('[DEBUG]-onCancel called', {
isOnTop: isOnTopRef.current,
isVoiceOverlayVisible,
isSearchOverlayVisible,
currentMode,
searchQuery,
hasShopperHouseData: !!shopperHouseData,
});
}
if (!isOnTopRef.current) {
console.log('[DEBUG]-onCancel: isOnTopRef is false, returning');
if (DEBUG_MODE) {
console.log('[DEBUG]-onCancel: isOnTopRef is false, returning');
}
return;
}
// VoiceInputOverlay가 열려있으면 먼저 닫기
if (isVoiceOverlayVisible) {
console.log('[DEBUG]-onCancel: closing VoiceInputOverlay');
if (DEBUG_MODE) {
console.log('[DEBUG]-onCancel: closing VoiceInputOverlay');
}
setIsVoiceOverlayVisible(false);
return;
}
// SearchInputOverlay가 열려있으면 먼저 닫기
if (isSearchOverlayVisible) {
console.log('[DEBUG]-onCancel: closing SearchInputOverlay');
if (DEBUG_MODE) {
console.log('[DEBUG]-onCancel: closing SearchInputOverlay');
}
setIsSearchOverlayVisible(false);
return;
}
// ✨ [Phase 5] VOICE_RESULT 모드에서 ESC/뒤로가기 누르면 INITIAL 모드로 돌아가기
console.log('[DEBUG]-VOICE_RESULT check:', {
currentMode,
isVoiceResultMode: currentMode === SEARCH_PANEL_MODES.VOICE_RESULT,
VOICE_RESULT_value: SEARCH_PANEL_MODES.VOICE_RESULT,
});
if (DEBUG_MODE) {
console.log('[DEBUG]-VOICE_RESULT check:', {
currentMode,
isVoiceResultMode: currentMode === SEARCH_PANEL_MODES.VOICE_RESULT,
VOICE_RESULT_value: SEARCH_PANEL_MODES.VOICE_RESULT,
});
}
if (currentMode === SEARCH_PANEL_MODES.VOICE_RESULT) {
console.log(
'[DEBUG]-VOICE_RESULT: Clearing ShopperHouse data (searchId will be preserved for 2nd search)'
);
console.log('[VoiceInput]-SearchPanel-onCancel-VOICE_RESULT');
console.log('[VoiceInput] 🧹 VOICE_RESULT 모드에서 ESC 누름 - clearShopperHouseData 호출');
if (DEBUG_MODE) {
console.log(
'[DEBUG]-VOICE_RESULT: Clearing ShopperHouse data (searchId will be preserved for 2nd search)'
);
console.log('[VoiceInput]-SearchPanel-onCancel-VOICE_RESULT');
console.log('[VoiceInput] 🧹 VOICE_RESULT 모드에서 ESC 누름 - clearShopperHouseData 호출');
}
dispatch(clearShopperHouseData()); // ✨ shopperHouseData만 초기화, searchId & relativeQuerys 유지
Spotlight.focus(SPOTLIGHT_IDS.SEARCH_INPUT_BOX);
return;
}
console.log('[DEBUG]-onCancel: normal cancel logic', { searchQuery });
if (DEBUG_MODE) {
console.log('[DEBUG]-onCancel: normal cancel logic', { searchQuery });
}
if (searchQuery === null || searchQuery === '') {
console.log('[DEBUG]-onCancel: popping panel');
if (DEBUG_MODE) {
console.log('[DEBUG]-onCancel: popping panel');
}
dispatch(popPanel(panel_names.SEARCH_PANEL));
} else {
console.log('[DEBUG]-onCancel: resetting search query');
if (DEBUG_MODE) {
console.log('[DEBUG]-onCancel: resetting search query');
}
setSearchQuery('');
dispatch(resetSearch());
Spotlight.focus(SPOTLIGHT_IDS.SEARCH_INPUT_BOX);
@@ -449,7 +539,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
}, 0);
}
},
[panelInfo?.currentSpot, firstSpot, panels]
[firstSpot, panels.length, panelInfo?.currentSpot] // panels 대신 panels.length 사용
);
/**
@@ -493,9 +583,11 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
* Voice overlay close handler
*/
const handleVoiceOverlayClose = useCallback(() => {
console.log(
'🚪 [DEBUG][SearchPanel] handleVoiceOverlayClose called, setting isVoiceOverlayVisible to FALSE'
);
if (DEBUG_MODE) {
console.log(
'🚪 [DEBUG][SearchPanel] handleVoiceOverlayClose called, setting isVoiceOverlayVisible to FALSE'
);
}
// ✨ Redux 정리는 VoiceInputOverlay.handleClose()에서 처리함
// VoiceInputOverlay가 닫히는 순간 clearShopperHouseData()를 호출하면,
@@ -576,12 +668,12 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
{...rest}
>
<div className={css.productImageWrapper}>
<img src={bgImgPath} alt={curationNm} className={css.productImage} />
<SafeImage src={bgImgPath} alt={curationNm} className={css.productImage} />
</div>
<div className={css.productInfo}>
{showBrandLogo && (
<div className={css.productBrandWrapper}>
<img src={patncLogoPath} alt={patncNm} className={css.brandLogo} />
<SafeImage src={patncLogoPath} alt={patncNm} className={css.brandLogo} />
</div>
)}
<div className={css.productDetails}>
@@ -592,7 +684,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
</SpottableProduct>
);
},
[hotPicksForYou, dispatch]
[hotPicksForYou, dispatch, SafeImage]
);
/**
@@ -639,6 +731,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
case SEARCH_PANEL_MODES.INITIAL:
case SEARCH_PANEL_MODES.INPUT_FOCUSED:
case SEARCH_PANEL_MODES.VOICE_INPUT:
case SEARCH_PANEL_MODES.SEARCH_INPUT:
default:
return (
<ContainerBasic className={css.contentContainer}>
@@ -758,16 +851,18 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
}
}, [
currentMode,
searchDatas,
shopperHouseData,
recentSearches,
topSearchs,
popularBrands,
hotPicksForYou,
searchDatas?.theme?.length,
searchDatas?.item?.length,
searchDatas?.show?.length,
shopperHouseData?.results?.[0]?.docs?.length,
recentSearches?.length,
topSearchs?.length,
popularBrands?.length,
hotPicksForYou?.length,
handleKeywordClick,
createKeywordClickHandler,
renderItem,
panelInfo,
panelInfo?.currentSpot,
]);
/**
@@ -787,29 +882,35 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
useEffect(() => {
let nextMode = SEARCH_PANEL_MODES.INITIAL;
console.log('[DEBUG]-MODE DECISION useEffect running', {
isVoiceOverlayVisible,
hasShopperHouseData: !!shopperHouseData,
shopperHouseData_detail: shopperHouseData ? 'EXISTS' : 'NULL',
searchPerformed,
searchQuery,
hasSearchResults: !!(
searchDatas?.theme?.length > 0 ||
searchDatas?.item?.length > 0 ||
searchDatas?.show?.length > 0
),
isSearchOverlayVisible,
currentMode,
});
if (DEBUG_MODE) {
console.log('[DEBUG]-MODE DECISION useEffect running', {
isVoiceOverlayVisible,
hasShopperHouseData: !!shopperHouseData,
shopperHouseData_detail: shopperHouseData ? 'EXISTS' : 'NULL',
searchPerformed,
searchQuery,
hasSearchResults: !!(
searchDatas?.theme?.length > 0 ||
searchDatas?.item?.length > 0 ||
searchDatas?.show?.length > 0
),
isSearchOverlayVisible,
currentMode,
});
}
// 우선순위 1: 음성 입력 오버레이가 열려있으면 VOICE_INPUT 모드
if (isVoiceOverlayVisible) {
console.log('[DEBUG]-MODE: isVoiceOverlayVisible is TRUE → VOICE_INPUT');
if (DEBUG_MODE) {
console.log('[DEBUG]-MODE: isVoiceOverlayVisible is TRUE → VOICE_INPUT');
}
nextMode = SEARCH_PANEL_MODES.VOICE_INPUT;
}
// 우선순위 2: 음성 검색 결과가 있으면 VOICE_RESULT 모드
else if (shopperHouseData) {
console.log('[DEBUG]-MODE: shopperHouseData EXISTS → VOICE_RESULT');
if (DEBUG_MODE) {
console.log('[DEBUG]-MODE: shopperHouseData EXISTS → VOICE_RESULT');
}
nextMode = SEARCH_PANEL_MODES.VOICE_RESULT;
}
// 우선순위 3: 검색 결과가 있으면 SEARCH_RESULT 모드
@@ -819,38 +920,48 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
searchDatas?.item?.length > 0 ||
searchDatas?.show?.length > 0
) {
console.log('[DEBUG]-MODE: searchResults EXISTS → SEARCH_RESULT');
if (DEBUG_MODE) {
console.log('[DEBUG]-MODE: searchResults EXISTS → SEARCH_RESULT');
}
nextMode = SEARCH_PANEL_MODES.SEARCH_RESULT;
}
// 우선순위 4: 검색 입력 오버레이가 열려있으면 SEARCH_INPUT 모드
else if (isSearchOverlayVisible) {
console.log('[DEBUG]-MODE: isSearchOverlayVisible is TRUE → SEARCH_INPUT');
if (DEBUG_MODE) {
console.log('[DEBUG]-MODE: isSearchOverlayVisible is TRUE → SEARCH_INPUT');
}
nextMode = SEARCH_PANEL_MODES.SEARCH_INPUT;
}
// 우선순위 5: 초기 상태 (기본값)
else {
console.log('[DEBUG]-MODE: No condition met → INITIAL');
if (DEBUG_MODE) {
console.log('[DEBUG]-MODE: No condition met → INITIAL');
}
nextMode = SEARCH_PANEL_MODES.INITIAL;
}
// 모드가 변경되었을 때만 업데이트
if (nextMode !== currentMode) {
console.log(`[DEBUG]-VOICE_RESULT 🔀 Mode changed: ${currentMode} → ${nextMode}`, {
isVoiceOverlayVisible,
shopperHouseData: !!shopperHouseData,
searchPerformed,
searchQuery,
hasSearchResults: !!(
searchDatas?.theme?.length > 0 ||
searchDatas?.item?.length > 0 ||
searchDatas?.show?.length > 0
),
isSearchOverlayVisible,
inputFocus,
});
if (DEBUG_MODE) {
console.log(`[DEBUG]-VOICE_RESULT 🔀 Mode changed: ${currentMode} → ${nextMode}`, {
isVoiceOverlayVisible,
shopperHouseData: !!shopperHouseData,
searchPerformed,
searchQuery,
hasSearchResults: !!(
searchDatas?.theme?.length > 0 ||
searchDatas?.item?.length > 0 ||
searchDatas?.show?.length > 0
),
isSearchOverlayVisible,
inputFocus,
});
}
setCurrentMode(nextMode);
} else {
console.log('[DEBUG]-MODE: Mode unchanged -', currentMode);
if (DEBUG_MODE) {
console.log('[DEBUG]-MODE: Mode unchanged -', currentMode);
}
}
}, [
isVoiceOverlayVisible,
@@ -870,9 +981,13 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
* TODO: 현재 검색어가 빈 스트링일 경우, `resetSearch`가 발동해서 searchData가 reset되는 현상이 있음, 조건이 변경되어야 한다.
*/
useEffect(() => {
console.log('[DEBUG]-searchQuery useEffect:', { searchQuery });
if (DEBUG_MODE) {
console.log('[DEBUG]-searchQuery useEffect:', { searchQuery });
}
if (!searchQuery) {
console.log('[DEBUG]-VOICE_RESULT: searchQuery is empty, calling resetSearch');
if (DEBUG_MODE) {
console.log('[DEBUG]-VOICE_RESULT: searchQuery is empty, calling resetSearch');
}
dispatch(resetSearch());
}
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -913,11 +1028,13 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
initialFocusTimerRef.current = setTimeout(() => {
// 🎯 DetailPanel에서 돌아왔을 때 이전 상품에 포커스 복원
if (panelInfo?.currentSpot && currentMode === SEARCH_PANEL_MODES.VOICE_RESULT) {
console.log('[DEBUG] 🎯 DetailPanel에서 복귀 - 이전 상품으로 포커스 복원:', {
currentSpot: panelInfo.currentSpot,
currentMode,
timestamp: new Date().toISOString(),
});
if (DEBUG_MODE) {
console.log('[DEBUG] 🎯 DetailPanel에서 복귀 - 이전 상품으로 포커스 복원:', {
currentSpot: panelInfo.currentSpot,
currentMode,
timestamp: new Date().toISOString(),
});
}
Spotlight.focus(panelInfo.currentSpot);
} else {
// 일반적인 경우: TInput으로 포커스
@@ -933,7 +1050,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
initialFocusTimerRef.current = null;
}
};
}, [isOnTop, isOnTopRef, panelInfo?.currentSpot, currentMode]);
}, [isOnTop, panelInfo?.currentSpot, currentMode]); // isOnTopRef 제거
/**
* focus 용도
@@ -943,14 +1060,16 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
if (shopperHouseData && isOnTop) {
// 🎯 VOICE_RESULT 모드에서는 포커스 복원을 위해 TInput으로 이동하지 않음
if (currentMode === SEARCH_PANEL_MODES.VOICE_RESULT) {
console.log(
'[DEBUG] 🎯 VOICE_RESULT 모드 - ShopperHouse 데이터 수신 시 TInput 포커스 스킵:',
{
currentMode,
hasShopperHouseData: !!shopperHouseData,
reason: '상품 포커스 복원 우선',
}
);
if (DEBUG_MODE) {
console.log(
'[DEBUG] 🎯 VOICE_RESULT 모드 - ShopperHouse 데이터 수신 시 TInput 포커스 스킵:',
{
currentMode,
hasShopperHouseData: !!shopperHouseData,
reason: '상품 포커스 복원 우선',
}
);
}
return;
}
@@ -1096,7 +1215,8 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
kind={KINDS.withIcon}
icon={ICONS.search}
text={searchQuery} // ✨ [Phase 8] Overlay에서 입력받은 텍스트만 표시
alwaysShowText={currentMode === SEARCH_PANEL_MODES.VOICE_RESULT} // 🎯 VOICE_RESULT 모드에서 항상 텍스트 표시
alwaysShowText={currentMode === SEARCH_PANEL_MODES.VOICE_RESULT || currentMode === SEARCH_PANEL_MODES.SEARCH_RESULT} // 🎯 VOICE_RESULT & SEARCH_RESULT 모드에서 항상 텍스트 표시
inputFocus={currentMode === SEARCH_PANEL_MODES.VOICE_RESULT || currentMode === SEARCH_PANEL_MODES.SEARCH_RESULT} // ✅ VOICE_RESULT & SEARCH_RESULT 모드에서 TInputSimple 내부 포커스 활성화
onKeyDown={handleKeydown}
spotlightId={SPOTLIGHT_IDS.SEARCH_INPUT_BOX}
forcedSpotlight="recent-keyword-0"
@@ -1115,7 +1235,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
spotlightId={SPOTLIGHT_IDS.MICROPHONE_BUTTON}
>
<div className={css.microphoneCircle}>
<img src={micIcon} alt="Microphone" className={css.microphoneIcon} />
<SafeImage src={micIcon} alt="Microphone" className={css.microphoneIcon} />
</div>
</SpottableMicButton>
</div>
@@ -1155,7 +1275,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
{/* ✨ [Phase 1] Voice Input Overlay - currentMode로 visibility 제어 */}
<VoiceInputOverlay
isVisible={currentMode === SEARCH_PANEL_MODES.VOICE_INPUT}
isVisible={isVoiceOverlayVisible}
onClose={handleVoiceOverlayClose}
mode={VOICE_MODES.PROMPT}
suggestions={voiceSuggestions}
@@ -1166,7 +1286,7 @@ export default function SearchPanel({ panelInfo, isOnTop, spotlightId }) {
{/* ✨ [Phase 1] Search Input Overlay - currentMode로 visibility 제어 */}
<SearchInputOverlay
isVisible={currentMode === SEARCH_PANEL_MODES.SEARCH_INPUT}
isVisible={isSearchOverlayVisible}
onClose={handleSearchOverlayClose}
searchQuery={searchQuery}
onSearchChange={handleSearchChange}