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
+}