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 30c5f3f3..68054800 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx @@ -134,6 +134,15 @@ const BuyNowContainer = SpotlightContainerDecorator( 'div' ); +const ButtonStackContainer = SpotlightContainerDecorator( + { + spotlightDirection: 'vertical', + enterTo: 'last-focused', + restrict: 'self-only', + }, + 'div' +); + const SpottableComponent = Spottable('div'); const getProductData = curry((productType, themeProductInfo, productInfo) => @@ -948,6 +957,11 @@ export default function ProductAllSection({ [] ); + const stackDefaultElement = useMemo( + () => shopByMobileId || firstStackElementId, + [shopByMobileId, firstStackElementId] + ); + // 버튼 스택(위→아래) 구성: 실제 렌더링 순서에 맞춰 행(row) 단위로 설정 const { focusDownMap, focusUpMap, focusOrder, focusRows } = useMemo(() => { const rows = []; @@ -1166,6 +1180,7 @@ export default function ProductAllSection({ }); } }, [focusRows]); + const firstStackElementId = focusRows[0]?.[0]; const scrollPositionRef = useRef(0); const prevScrollPositionRef = useRef(0); // 이전 스크롤 위치 추적 const prevScrollTopRef = useRef(0); // HomePanel 스타일 스크롤 위치 추적 @@ -1491,100 +1506,106 @@ export default function ProductAllSection({ - {userNumber && - promotions.map((promotion, idx) => { - const couponButtonId = `detail-coupon-button-${idx}`; - return ( -
-
-
SPECIAL PROMOTION
-
- Coupon only applicable to this product! -
-
- { - handleCouponClick(idx, promotion); - }} - onSpotlightUp={handleSpotlightUpFromCouponButtons} - onSpotlightDown={(e) => handleSpotlightDownFromCoupon(e, couponButtonId)} - data-spotlight-next-down={focusDownMap[couponButtonId]} - size="detail_very_small" - > -
COUPON
- -
-
- ); - })} - {isBillingProductVisible && ( - - -
{$L('BUY NOW')}
-
- -
{$L('ADD TO CART')}
-
-
- )} - - - {/* BUY NOW + ADD TO CART 버튼들 (결제 가능 상품일 때만 렌더링) */} - -
{$L('SHOP BY MOBILE')}
-
- {panelInfo && ( -
- -
+ {userNumber && + promotions.map((promotion, idx) => { + const couponButtonId = `detail-coupon-button-${idx}`; + return ( +
+
+
SPECIAL PROMOTION
+
+ Coupon only applicable to this product! +
+
+ { + handleCouponClick(idx, promotion); + }} + onSpotlightUp={handleSpotlightUpFromCouponButtons} + onSpotlightDown={(e) => handleSpotlightDownFromCoupon(e, couponButtonId)} + data-spotlight-next-down={focusDownMap[couponButtonId]} + size="detail_very_small" + > +
COUPON
+ +
+
+ ); + })} + {isBillingProductVisible && ( + + +
{$L('BUY NOW')}
+
+ +
{$L('ADD TO CART')}
+
+
)} -
+ + + {/* BUY NOW + ADD TO CART 버튼들 (결제 가능 상품일 때만 렌더링) */} + +
{$L('SHOP BY MOBILE')}
+
+ {panelInfo && ( +
+ +
+ )} +
+
{orderPhnNo && ( diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less index 36ea3189..5accc675 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less @@ -605,6 +605,19 @@ } } +.buttonStackContainer { + width: 100%; + display: flex; + flex-direction: column; + + > * { + margin-bottom: 5px; + &:last-child { + margin-bottom: 0; + } + } +} + .favoriteBtnWrapper { width: 60px; height: 60px; @@ -825,4 +838,4 @@ } } } -} \ No newline at end of file +}