diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx index 44ccd1f6..20947fe1 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx @@ -868,20 +868,20 @@ export default function ProductAllSection({ Spotlight.focus('spotlightId_backBtn'); }, []); - const handleSpotlightDown = useCallback((e) => { - e.stopPropagation(); - }, []); - - // SHOP BY MOBILE에서 아래로 이동 시 제품 정보 영역으로 포커스 이동 - const handleSpotlightDownFromShopByMobile = useCallback((e) => { - e.stopPropagation(); - e.preventDefault(); + // 아래 방향 이동 시 버튼 영역으로 포커스 이동 + // BUY NOW / ADD TO CART / SHOP BY MOBILE / FavoriteBtn 등에서 공통 사용 + const focusNextButtons = useCallback(() => { + // 1) SHOP BY MOBILE이 있으면 우선 이동 + if (SpotlightIds?.DETAIL_SHOPBYMOBILE) { + if (Spotlight.focus(SpotlightIds.DETAIL_SHOPBYMOBILE)) return; + } + if (Spotlight.focus('detail_shop_by_mobile')) return; + // 2) 상품 정보 버튼들로 이동 if (!Spotlight.focus('product-details-button')) { Spotlight.focus('user-reviews-button'); } - - // 포커스가 비거나 다른 곳으로 튀는 경우를 방어 + // 포커스가 비거나 다른 곳으로 튈 때 다시 보정 setTimeout(() => { const current = Spotlight.getCurrent(); const currentId = current?.dataset?.spotlightId; @@ -894,6 +894,31 @@ export default function ProductAllSection({ }, 0); }, []); + const handleSpotlightDown = useCallback((e) => { + e.stopPropagation(); + }, []); + + // SHOP BY MOBILE에서 아래로 이동 시 제품 정보 영역으로 포커스 이동 + const handleSpotlightDownFromShopByMobile = useCallback( + (e) => { + e.stopPropagation(); + e.preventDefault(); + + focusNextButtons(); + }, + [focusNextButtons] + ); + + // BUY NOW / ADD TO CART에서 아래로 이동 시 동일하게 전달 + const handleSpotlightDownFromBuyButtons = useCallback( + (e) => { + e.stopPropagation(); + e.preventDefault(); + focusNextButtons(); + }, + [focusNextButtons] + ); + const onFavoriteFlagChanged = useCallback( (newFavoriteFlag) => setFavoriteOverride(newFavoriteFlag), [] @@ -1275,7 +1300,8 @@ export default function ProductAllSection({ className={css.buyNowButton} onClick={handleBuyNowClick} onSpotlightUp={handleSpotlightUpFromBuyButtons} - onSpotlightDown={handleSpotlightDown} + onSpotlightDown={handleSpotlightDownFromBuyButtons} + data-spotlight-next-down={SpotlightIds.DETAIL_SHOPBYMOBILE} type="detail_small" >