[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 🔧 주요 변경 내용: • 소규모 기능 개선
This commit is contained in:
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import Spotlight from '@enact/spotlight';
|
||||
|
||||
import icShoptime from '../../../../assets/images/icons/ic-shoptime.png';
|
||||
import { getShopperHouseSearch } from '../../../actions/searchActions';
|
||||
@@ -108,7 +109,15 @@ const HowAboutTheseSmall = ({
|
||||
</div>
|
||||
|
||||
{/* See More Button */}
|
||||
<TButton className={css.seeMoreButton} size="small" onClick={handleSeeMoreClick} spotlightId="howAboutThese-seeMore">
|
||||
<TButton
|
||||
className={css.seeMoreButton}
|
||||
size="small"
|
||||
onClick={handleSeeMoreClick}
|
||||
spotlightId="howAboutThese-seeMore"
|
||||
// ✅ [251026] ADD: Spotlight 포커스 네비게이션 - Enact onSpotlight{Direction} 핸들러 사용
|
||||
onSpotlightUp={() => Spotlight.focus('search-input-box')}
|
||||
onSpotlightDown={() => Spotlight.focus('searchtabContainer')}
|
||||
>
|
||||
<div className={css.seeMoreText}>SEE MORE</div>
|
||||
</TButton>
|
||||
</div>
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -206,7 +206,10 @@ const SearchResultsNew = ({
|
||||
// Spottable 컴포넌트 캐싱하여 메모리 누수 방지
|
||||
const SpottableDiv = useMemo(() => Spottable('div'), []);
|
||||
|
||||
// 탭 키다운 핸들러 - Arrow Up으로 SEE MORE 버튼으로 이동
|
||||
// ❌ [251026] DEPRECATED: 탭 키다운 핸들러 - Spotlight 속성으로 대체됨
|
||||
// Spotlight의 data-spotlight-up 속성으로 처리하도록 변경
|
||||
// 기존 코드 보존 (향후 필요시 참고용)
|
||||
/*
|
||||
const handleTabKeyDown = useCallback(
|
||||
(e) => {
|
||||
if (e.key === 'ArrowUp' || e.key === 'Up') {
|
||||
@@ -219,6 +222,7 @@ const SearchResultsNew = ({
|
||||
},
|
||||
[]
|
||||
);
|
||||
*/
|
||||
|
||||
// 맨 처음으로 이동 (위 버튼)
|
||||
const upBtnClick = useCallback(() => {
|
||||
@@ -343,14 +347,17 @@ const SearchResultsNew = ({
|
||||
<div className={css.searchBox}>
|
||||
{/* HowAboutThese Small 버전 - relativeQueries가 존재할 때만 표시 */}
|
||||
{relativeQueries && relativeQueries.length > 0 && (
|
||||
<SpottableDiv spotlightId="how-about-these-small-wrapper">
|
||||
<div>
|
||||
{/* ✅ [251026] CHANGED: SpottableDiv wrapper 제거 - Spotlight 포커스 네비게이션 개선 */}
|
||||
{/* 이전: spotlightId="how-about-these-small-wrapper"로 인해 포커스가 wrapper로 먼저 이동하는 문제 발생 */}
|
||||
{/* 현재: 일반 div로 변경 - 포커스는 내부의 SEE MORE 버튼으로 직접 이동 */}
|
||||
<HowAboutTheseSmall
|
||||
relativeQueries={relativeQueries}
|
||||
searchId={shopperHouseSearchId}
|
||||
onQueryClick={onRelativeQueryClick}
|
||||
onSeeMoreClick={handleShowFullHowAboutThese}
|
||||
/>
|
||||
</SpottableDiv>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* HowAboutThese Full 버전 - 오버레이로 표시 */}
|
||||
@@ -395,7 +402,9 @@ const SearchResultsNew = ({
|
||||
selectedIndex={tab}
|
||||
listType={LIST_TYPE.medium}
|
||||
spotlightId={SpotlightIds.SEARCH_TAB_CONTAINER}
|
||||
onKeyDown={handleTabKeyDown}
|
||||
// ✅ [251026] ADD: Spotlight 포커스 네비게이션 - onSpotlightUp 이벤트 핸들러 사용
|
||||
onSpotlightUp={() => Spotlight.focus('howAboutThese-seeMore')}
|
||||
// ❌ [251026] DEPRECATED: onKeyDown={handleTabKeyDown} - Spotlight 속성으로 대체됨
|
||||
/>
|
||||
{/* 2025/10/17 김영진 부장과 이야기 하여 일반에서는 아직 필터 검토하지않아 빼달라고 하여 우선 일반검색에서는 미노출 처리 추후 처리 필요함 */}
|
||||
{tab === 0 && !itemInfo?.length && (
|
||||
|
||||
@@ -79,6 +79,8 @@ const ItemCard = ({ onClick, itemInfo, searchQuery }) => {
|
||||
dcPrice={dcPrice}
|
||||
originPrice={price}
|
||||
spotlightId={spotlightId}
|
||||
// ✅ [251026] ADD: 첫 번째 상품 카드에만 Spotlight 포커스 업 네비게이션 적용 - onSpotlightUp 이벤트 핸들러 사용
|
||||
{...(index === 0 ? { onSpotlightUp: () => Spotlight.focus('searchtabContainer') } : {})}
|
||||
label={index * 1 + 1 + ' of ' + itemInfo.length + 1}
|
||||
lastLabel=" go to detail, button"
|
||||
/>
|
||||
|
||||
@@ -43,6 +43,7 @@ export default function TInputSimple({
|
||||
alwaysShowText = false, // 🎯 VOICE_RESULT 모드에서 항상 텍스트 표시
|
||||
inputFocus = false, // ✨ 외부 inputFocus 상태 전달받기 위한 prop
|
||||
spotlightDisabled,
|
||||
...rest // ✅ [251026] ADD: Spotlight 포커스 네비게이션 속성 전달
|
||||
}) {
|
||||
const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
|
||||
|
||||
@@ -130,10 +131,13 @@ export default function TInputSimple({
|
||||
shouldShowText && css.focusedMode
|
||||
)}
|
||||
spotlightId={spotlightId}
|
||||
spotlightDisabled={spotlightDisabled}
|
||||
onKeyDown={handleBoxKeyDown}
|
||||
onClick={handleClick}
|
||||
onFocus={_onFocus}
|
||||
onBlur={_onBlur}
|
||||
// ✅ [251026] ADD: Spotlight 포커스 네비게이션 속성 전달
|
||||
{...rest}
|
||||
>
|
||||
{/* 읽기 전용 텍스트 표시 영역 */}
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user