diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.jsx index 25bd410f..d679315e 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.jsx @@ -6,6 +6,7 @@ import { useSelector } from 'react-redux'; import { off, on } from '@enact/core/dispatcher'; import { Job } from '@enact/core/util'; import Scroller from '@enact/sandstone/Scroller'; +import Spotlight from '@enact/spotlight'; import AutoScrollAreaDetail, { POSITION } from '../AutoScrollAreaDetail/AutoScrollAreaDetail'; import css from './TScrollerDetail.module.less'; @@ -41,6 +42,7 @@ const TScrollerDetail = forwardRef( const isScrolling = useRef(false); const scrollPosition = useRef('top'); + const thumbElementRef = useRef(null); // 스크롤바 thumb 요소 저장 const scrollToRef = useRef(null); const scrollHorizontalPos = useRef(0); @@ -100,6 +102,12 @@ const TScrollerDetail = forwardRef( const _onScrollStart = useCallback( (e) => { + // 스크롤 시작 시 현재 포커스된 요소가 thumb인지 확인하고 저장 + const currentFocused = Spotlight.getCurrent(); + if (currentFocused && currentFocused.getAttribute('aria-label')?.includes('scroll')) { + thumbElementRef.current = currentFocused; + } + if (onScrollStart) { onScrollStart(e); } @@ -148,6 +156,13 @@ const TScrollerDetail = forwardRef( if (setCheckScrollPosition && prevPosition !== scrollPosition.current) { setCheckScrollPosition(scrollPosition.current); } + + // 스크롤 완료 후 thumb으로 포커스 복구 + if (thumbElementRef.current) { + setTimeout(() => { + Spotlight.focus(thumbElementRef.current); + }, 50); + } }, [onScrollStop] );