From 9878c395120df86c7673fc6fd5aca3af36756d48 Mon Sep 17 00:00:00 2001 From: optrader Date: Sat, 22 Nov 2025 17:57:58 +0900 Subject: [PATCH] [251122] fix: DetailPaneel->ProductAllSection Focus-7 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ• ์ปค๋ฐ‹ ์‹œ๊ฐ„: 2025. 11. 22. 17:57:58 ๐Ÿ“Š ๋ณ€๊ฒฝ ํ†ต๊ณ„: โ€ข ์ด ํŒŒ์ผ: 2๊ฐœ โ€ข ์ถ”๊ฐ€: +97์ค„ โ€ข ์‚ญ์ œ: -324์ค„ ๐Ÿ“ ์ˆ˜์ •๋œ ํŒŒ์ผ: ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less ๐Ÿ”ง ํ•จ์ˆ˜ ๋ณ€๊ฒฝ ๋‚ด์šฉ: ๐Ÿ“„ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript): โœ… Added: SpotlightContainerDecorator() ๐Ÿ”„ Modified: extractProductMeta() Performance: ์ฝ”๋“œ ์ตœ์ ํ™”๋กœ ์„ฑ๋Šฅ ๊ฐœ์„  ๊ธฐ๋Œ€ --- .../ProductAllSection/ProductAllSection.jsx | 368 +++--------------- .../ProductAllSection.module.less | 13 + 2 files changed, 77 insertions(+), 304 deletions(-) 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 68054800..cd037b92 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx @@ -34,7 +34,6 @@ import TPopUp from '../../../components/TPopUp/TPopUp.jsx'; import TVirtualGridList from '../../../components/TVirtualGridList/TVirtualGridList.jsx'; import useReviews from '../../../hooks/useReviews/useReviews'; import useScrollTo from '../../../hooks/useScrollTo'; -import useDetailFocus from '../../../hooks/useDetailFocus'; import { BUYNOW_CONFIG } from '../../../utils/BuyNowConfig'; import { panel_names } from '../../../utils/Config'; import * as Config from '../../../utils/Config.js'; @@ -134,6 +133,16 @@ const BuyNowContainer = SpotlightContainerDecorator( 'div' ); +const CouponContainer = SpotlightContainerDecorator( + { + spotlightDirection: 'vertical', + enterTo: 'last-focused', + restrict: 'self-only', + defaultElement: 'detail-coupon-button-0', + }, + 'div' +); + const ButtonStackContainer = SpotlightContainerDecorator( { spotlightDirection: 'vertical', @@ -189,9 +198,6 @@ export default function ProductAllSection({ }) { const dispatch = useDispatch(); - // ํฌ์ปค์Šค ์ด๋™ ๋ณด์ • Hook (0.25์ดˆ ํƒ€์ด๋จธ) - const { enqueueFocus } = useDetailFocus(500); - // Redux ์ƒํƒœ const webOSVersion = useSelector((state) => state.common.appStatus.webOSVersion); const groupInfos = useSelector((state) => state.product.groupInfo); @@ -869,279 +875,35 @@ export default function ProductAllSection({ [] ); - // SHOP BY MOBILE ๋ฒ„ํŠผ์—์„œ arrow up ์‹œ - // focusUpMap์„ ์‚ฌ์šฉํ•ด์„œ ์œ„์ชฝ ๋ฒ„ํŠผ์œผ๋กœ ์ด๋™ - // focusUpMap์ด ์—†์œผ๋ฉด (์ฒซ ํ–‰) BackBtn์œผ๋กœ ์ด๋™ - const handleSpotlightUpToBackButton = useCallback( - (e) => { - e.stopPropagation(); - console.log(`๐Ÿ›ต [FocusDetail] ShopByMobile - Arrow UP ๊ฐ์ง€`); - - // focusUpMap์—์„œ ShopByMobile์˜ ์œ„์ชฝ ๋ฒ„ํŠผ์„ ์ฐพ์Œ - const targetId = focusUpMap[shopByMobileId]; - - if (targetId) { - console.log(`๐Ÿ›ต [FocusDetail] ShopByMobile - Arrow UP ํƒ€๊นƒ: ${targetId}`); - if (targetId === 'detail-buy-now-button') { - console.log(`๐Ÿ›ต [FocusDetail] ShopByMobile - Arrow UP: BuyNow ๋ฒ„ํŠผ ์žˆ์Œ`); - } else if (targetId === 'detail-add-to-cart-button') { - console.log(`๐Ÿ›ต [FocusDetail] ShopByMobile - Arrow UP: AddToCart ๋ฒ„ํŠผ ์žˆ์Œ`); - } else if (targetId === 'detail-coupon-button') { - console.log(`๐Ÿ›ต [FocusDetail] ShopByMobile - Arrow UP: Coupon ๋ฒ„ํŠผ ์žˆ์Œ`); - } - // ์ฆ‰์‹œ ํฌ์ปค์Šค ์‹œ๋„ - if (!Spotlight.focus(targetId)) { - enqueueFocus(targetId); - } - } else { - // focusUpMap์— ์—†์œผ๋ฉด (์ฒซ ํ–‰์ด๊ฑฐ๋‚˜ ์œ„์ชฝ์ด ์—†์Œ) BackBtn์œผ๋กœ - console.log(`๐Ÿ›ต [FocusDetail] ShopByMobile - Arrow UP: ์œ„์ชฝ ๋ฒ„ํŠผ ์—†์Œ, BackBtn์œผ๋กœ ์ด๋™`); - if (!Spotlight.focus('spotlightId_backBtn')) { - enqueueFocus('spotlightId_backBtn'); - } - } - }, - [focusUpMap, shopByMobileId, enqueueFocus] - ); - - // BUY NOW, ADD TO CART ๋ฒ„ํŠผ์—์„œ arrow up ์‹œ - // Coupon ๋ฒ„ํŠผ์ด ์žˆ์œผ๋ฉด Coupon์œผ๋กœ, ์—†์œผ๋ฉด Back์œผ๋กœ ์ด๋™ - // ํ•ญ์ƒ Hook์„ ํ†ตํ•ด ํฌ์ปค์Šค๋ฅผ ์ด๋™ํ•˜๋„๋ก ๋ณ€๊ฒฝ - const handleSpotlightUpFromBuyButtons = useCallback( - (e) => { - e.stopPropagation(); - - let targetId; - if (promotions && promotions.length > 0) { - // ์ฟ ํฐ์ด ์—ฌ๋Ÿฌ ๊ฐœ๋ฉด ์ฒซ ๋ฒˆ์งธ ์ฟ ํฐ ๋ฒ„ํŠผ์œผ๋กœ ํฌ์ปค์Šค - targetId = `detail-coupon-button-0`; - console.log(`๐Ÿ’ณ [FocusDetail] BuyNow/AddToCart - Arrow UP ๊ฐ์ง€ (Coupon ์žˆ์Œ)`); - console.log(`๐Ÿ’ณ [FocusDetail] BuyNow/AddToCart - Arrow UP ํƒ€๊นƒ ๊ฒฐ์ •: ${targetId}`); - } else { - targetId = 'spotlightId_backBtn'; - console.log(`๐Ÿ’ณ [FocusDetail] BuyNow/AddToCart - Arrow UP ๊ฐ์ง€ (Coupon ์—†์Œ)`); - console.log(`๐Ÿ’ณ [FocusDetail] BuyNow/AddToCart - Arrow UP ํƒ€๊นƒ ๊ฒฐ์ •: Back Btn`); - } - - // ์ฆ‰์‹œ ํฌ์ปค์Šค ์‹œ๋„, ์‹คํŒจ ์‹œ ๋ณด์ • ํ - if (!Spotlight.focus(targetId)) { - enqueueFocus(targetId); - } - }, - [promotions, enqueueFocus] - ); - - // Coupon ๋ฒ„ํŠผ์—์„œ arrow up ์‹œ: Container์˜ leaveFor ์„ค์ •์œผ๋กœ ์ฒ˜๋ฆฌ - // stopPropagation์„ ํ•˜์ง€ ์•Š์•„์„œ Container๊ฐ€ up ๋ฐฉํ–ฅ์œผ๋กœ ํฌ์ปค์Šค๋ฅผ ์ด๋™ํ•˜๋„๋ก ํ•จ - const handleSpotlightUpFromCouponButtons = useCallback( - (e) => { - e.preventDefault(); - console.log(`๐ŸŽซ [FocusDetail] Coupon - Arrow UP ๊ฐ์ง€`); - console.log(`๐ŸŽซ [FocusDetail] Coupon - Arrow UP ์ฒ˜๋ฆฌ: Container์˜ leaveFor(up) ์„ค์ • ์‚ฌ์šฉ`); - if (!Spotlight.focus('spotlightId_backBtn')) { - enqueueFocus('spotlightId_backBtn'); - } - }, - [enqueueFocus] - ); - - // SHOP BY MOBILE โ†‘ ํƒ€๊นƒ ๊ณ„์‚ฐ - const shopByMobileUpTarget = useMemo(() => { - if (isBillingProductVisible) return 'detail-buy-now-button'; - if (userNumber && promotions && promotions.length > 0) return 'detail-coupon-button'; - return 'spotlightId_backBtn'; - }, [isBillingProductVisible, promotions, userNumber]); - const shopByMobileId = useMemo( () => SpotlightIds?.DETAIL_SHOPBYMOBILE || 'detail_shop_by_mobile', [] ); - const stackDefaultElement = useMemo( - () => shopByMobileId || firstStackElementId, - [shopByMobileId, firstStackElementId] - ); - - // ๋ฒ„ํŠผ ์Šคํƒ(์œ„โ†’์•„๋ž˜) ๊ตฌ์„ฑ: ์‹ค์ œ ๋ Œ๋”๋ง ์ˆœ์„œ์— ๋งž์ถฐ ํ–‰(row) ๋‹จ์œ„๋กœ ์„ค์ • - const { focusDownMap, focusUpMap, focusOrder, focusRows } = useMemo(() => { - const rows = []; - + const stackOrder = useMemo(() => { + const ids = []; if (promotions && promotions.length > 0) { - // ์ฟ ํฐ์ด ์—ฌ๋Ÿฌ ๊ฐœ์ผ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๊ฐ๊ฐ ๊ณ ์œ  ID๋กœ ์ถ”๊ฐ€ - const couponButtonIds = promotions.map((_, idx) => `detail-coupon-button-${idx}`); - rows.push(couponButtonIds); + promotions.forEach((_, idx) => ids.push(`detail-coupon-button-${idx}`)); } - if (isBillingProductVisible) { - rows.push(['detail-buy-now-button', 'detail-add-to-cart-button']); + ids.push('detail-buy-now-button', 'detail-add-to-cart-button'); } - - const shopRow = [shopByMobileId]; + ids.push(shopByMobileId); if (panelInfo) { - shopRow.push('favoriteBtn'); + ids.push('favoriteBtn'); } - rows.push(shopRow); + return ids; + }, [promotions, isBillingProductVisible, shopByMobileId, panelInfo]); - rows.push(['product-details-button']); + const stackDefaultElement = useMemo(() => { + if (promotions && promotions.length > 0) return 'detail-coupon-button-0'; + if (isBillingProductVisible) return 'detail-buy-now-button'; + return shopByMobileId || stackOrder[0]; + }, [promotions, isBillingProductVisible, shopByMobileId, stackOrder]); - if (isReviewDataComplete) { - rows.push(['user-reviews-button']); - } - - // ์•„๋ž˜ ๋ฐฉํ–ฅ: ๊ฐ ํ–‰์˜ ๋ชจ๋“  ์š”์†Œ๊ฐ€ ๋‹ค์Œ ํ–‰์˜ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋ฅผ ๋ฐ”๋ผ๋ณด๋„๋ก ๋งคํ•‘ - const downMap = rows.reduce((acc, row, idx) => { - const nextRowFirst = rows[idx + 1]?.[0]; - row.forEach((id) => { - acc[id] = nextRowFirst; - }); - return acc; - }, {}); - - // ์œ„ ๋ฐฉํ–ฅ: ๊ฐ ํ–‰์˜ ๋ชจ๋“  ์š”์†Œ๊ฐ€ ์ด์ „ ํ–‰์˜ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋ฅผ ๋ฐ”๋ผ๋ณด๋„๋ก ๋งคํ•‘ - const upMap = rows.reduce((acc, row, idx) => { - if (idx > 0) { - // ์ด์ „ ํ–‰์ด ์žˆ์œผ๋ฉด ๊ทธ ํ–‰์˜ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋กœ ๋งคํ•‘ - const prevRowLast = rows[idx - 1][rows[idx - 1].length - 1]; - row.forEach((id) => { - acc[id] = prevRowLast; - }); - } - return acc; - }, {}); - - // order๋Š” ํ–‰์„ ํ‰ํƒ„ํ™”ํ•œ ์ˆœ์„œ - const order = rows.flat(); - - return { focusDownMap: downMap, focusUpMap: upMap, focusOrder: order, focusRows: rows }; - }, [isBillingProductVisible, panelInfo, isReviewDataComplete, promotions, shopByMobileId]); - - // ๊ณตํ†ต โ†“ ์ด๋™ ํ•ธ๋“ค๋Ÿฌ - const buildSpotlightDownHandler = useCallback( - (currentId) => (e) => { - e.stopPropagation(); - e.preventDefault(); - - const nextId = focusDownMap[currentId]; - const moved = nextId ? Spotlight.focus(nextId) : false; - - // ์ด๋™ ์‹คํŒจ ์‹œ, ์Šคํƒ ๋‚ด ๋‹ค๋ฅธ ํ•ญ๋ชฉ์œผ๋กœ๋ผ๋„ ๋ณด์ • - if (!moved) { - const fallback = focusOrder.find((id) => id !== currentId); - if (fallback) { - // Hook์„ ํ†ตํ•œ ํฌ์ปค์Šค ์ด๋™ ๋ณด์ • (0.5์ดˆ ํƒ€์ด๋จธ๋กœ ์žฌ์‹œ๋„) - enqueueFocus(fallback); - } - } - }, - [focusDownMap, focusOrder, enqueueFocus] - ); - - const handleSpotlightDown = useCallback((e) => { - e.stopPropagation(); - }, []); - - // COUPON์—์„œ ์•„๋ž˜๋กœ ์ด๋™ ์‹œ - // ํ•ญ์ƒ Hook์„ ํ†ตํ•ด ํฌ์ปค์Šค๋ฅผ ์ด๋™ํ•˜๋„๋ก ๋ณ€๊ฒฝ - const handleSpotlightDownFromCoupon = useCallback( - (e, currentCouponId) => { - e.stopPropagation(); - e.preventDefault(); - console.log(`๐ŸŽซ [FocusDetail] Coupon - Arrow DOWN ๊ฐ์ง€ (ID: ${currentCouponId})`); - - const nextId = focusDownMap[currentCouponId]; - console.log(`๐ŸŽซ [FocusDetail] Coupon - Arrow DOWN ๋‹ค์Œ ํƒ€๊นƒ: ${nextId}`); - - if (nextId) { - // ํ•ญ์ƒ Hook์„ ํ†ตํ•ด ํฌ์ปค์Šค๋ฅผ ์ด๋™ - enqueueFocus(nextId); - } else { - // ๋‹ค์Œ ํ–‰์ด ์—†์œผ๋ฉด focusOrder์—์„œ ํ˜„์žฌ ์ฟ ํฐ ๋ฒ„ํŠผ์ด ์•„๋‹Œ ๋‹ค๋ฅธ ๋ฒ„ํŠผ์„ ์ฐพ์Œ - const fallback = focusOrder.find((id) => !id.startsWith('detail-coupon-button')); - console.log(`๐ŸŽซ [FocusDetail] Coupon - Arrow DOWN focusDownMap์— ์—†์Œ, ํด๋ฐฑ: ${fallback}`); - if (fallback) { - enqueueFocus(fallback); - } - } - }, - [focusDownMap, focusOrder, enqueueFocus] - ); - // SHOP BY MOBILE์—์„œ ์•„๋ž˜๋กœ ์ด๋™ ์‹œ - // ํ•ญ์ƒ Hook์„ ํ†ตํ•ด ํฌ์ปค์Šค๋ฅผ ์ด๋™ํ•˜๋„๋ก ๋ณ€๊ฒฝ - const handleSpotlightDownFromShopByMobile = useCallback( - (e) => { - e.stopPropagation(); - e.preventDefault(); - console.log(`๐Ÿ›ต [FocusDetail] ShopByMobile - Arrow DOWN ๊ฐ์ง€`); - - const nextId = focusDownMap[shopByMobileId]; - console.log(`๐Ÿ›ต [FocusDetail] ShopByMobile - Arrow DOWN ๋‹ค์Œ ํƒ€๊นƒ: ${nextId}`); - - if (nextId) { - // ํ•ญ์ƒ Hook์„ ํ†ตํ•ด ํฌ์ปค์Šค๋ฅผ ์ด๋™ - enqueueFocus(nextId); - } else { - const fallback = focusOrder.find((id) => id !== shopByMobileId); - console.log( - `๐Ÿ›ต [FocusDetail] ShopByMobile - Arrow DOWN focusDownMap์— ์—†์Œ, ํด๋ฐฑ: ${fallback}` - ); - if (fallback) { - enqueueFocus(fallback); - } - } - }, - [shopByMobileId, focusDownMap, focusOrder, enqueueFocus] - ); - - // BUY NOW์—์„œ ์•„๋ž˜๋กœ ์ด๋™ ์‹œ - // ํ•ญ์ƒ Hook์„ ํ†ตํ•ด ํฌ์ปค์Šค๋ฅผ ์ด๋™ํ•˜๋„๋ก ๋ณ€๊ฒฝ - const handleSpotlightDownFromBuyNow = useCallback( - (e) => { - e.stopPropagation(); - e.preventDefault(); - console.log(`๐Ÿ’ณ [FocusDetail] BuyNow - Arrow DOWN ๊ฐ์ง€`); - - const nextId = focusDownMap['detail-buy-now-button']; - console.log(`๐Ÿ’ณ [FocusDetail] BuyNow - Arrow DOWN ๋‹ค์Œ ํƒ€๊นƒ: ${nextId}`); - - if (nextId) { - // ํ•ญ์ƒ Hook์„ ํ†ตํ•ด ํฌ์ปค์Šค๋ฅผ ์ด๋™ - enqueueFocus(nextId); - } else { - const fallback = focusOrder.find((id) => id !== 'detail-buy-now-button'); - console.log(`๐Ÿ’ณ [FocusDetail] BuyNow - Arrow DOWN focusDownMap์— ์—†์Œ, ํด๋ฐฑ: ${fallback}`); - if (fallback) { - enqueueFocus(fallback); - } - } - }, - [focusDownMap, focusOrder, enqueueFocus] - ); - - // ADD TO CART์—์„œ ์•„๋ž˜๋กœ ์ด๋™ ์‹œ - // ํ•ญ์ƒ Hook์„ ํ†ตํ•ด ํฌ์ปค์Šค๋ฅผ ์ด๋™ํ•˜๋„๋ก ๋ณ€๊ฒฝ - const handleSpotlightDownFromAddToCart = useCallback( - (e) => { - e.stopPropagation(); - e.preventDefault(); - console.log(`๐Ÿ’ณ [FocusDetail] AddToCart - Arrow DOWN ๊ฐ์ง€`); - - const nextId = focusDownMap['detail-add-to-cart-button']; - console.log(`๐Ÿ’ณ [FocusDetail] AddToCart - Arrow DOWN ๋‹ค์Œ ํƒ€๊นƒ: ${nextId}`); - - if (nextId) { - // ํ•ญ์ƒ Hook์„ ํ†ตํ•ด ํฌ์ปค์Šค๋ฅผ ์ด๋™ - enqueueFocus(nextId); - } else { - const fallback = focusOrder.find((id) => id !== 'detail-add-to-cart-button'); - console.log( - `๐Ÿ’ณ [FocusDetail] AddToCart - Arrow DOWN focusDownMap์— ์—†์Œ, ํด๋ฐฑ: ${fallback}` - ); - if (fallback) { - enqueueFocus(fallback); - } - } - }, - [focusDownMap, focusOrder, enqueueFocus] + const firstCouponId = useMemo( + () => (promotions && promotions.length > 0 ? 'detail-coupon-button-0' : null), + [promotions] ); const onFavoriteFlagChanged = useCallback( @@ -1171,7 +933,7 @@ export default function ProductAllSection({ }, [scrollToSection, dispatch]); // ํ—ค๋” Back ์•„์ด์ฝ˜์—์„œ ์•„๋ž˜๋กœ ๋‚ด๋ ค์˜ฌ ๋•Œ ์ฒซ ๋ฒˆ์งธ ๋ฒ„ํŠผ์„ ๋ฐ”๋ผ๋ณด๋„๋ก ์„ค์ • useEffect(() => { - const firstId = focusRows[0]?.[0]; + const firstId = stackOrder[0]; if (firstId && Spotlight && Spotlight.set) { Spotlight.set('spotlightId_backBtn', { next: { @@ -1179,8 +941,7 @@ export default function ProductAllSection({ }, }); } - }, [focusRows]); - const firstStackElementId = focusRows[0]?.[0]; + }, [stackOrder]); const scrollPositionRef = useRef(0); const prevScrollPositionRef = useRef(0); // ์ด์ „ ์Šคํฌ๋กค ์œ„์น˜ ์ถ”์  const prevScrollTopRef = useRef(0); // HomePanel ์Šคํƒ€์ผ ์Šคํฌ๋กค ์œ„์น˜ ์ถ”์  @@ -1510,35 +1271,45 @@ export default function ProductAllSection({ className={css.buttonStackContainer} spotlightId="detail-button-stack" defaultElement={stackDefaultElement} + leaveFor={{ + up: 'spotlightId_backBtn', + }} > - {userNumber && - promotions.map((promotion, idx) => { - const couponButtonId = `detail-coupon-button-${idx}`; - return ( -
-
-
SPECIAL PROMOTION
-
- Coupon only applicable to this product! + {userNumber && promotions.length > 0 && ( + + {promotions.map((promotion, idx) => { + const couponButtonId = `detail-coupon-button-${idx}`; + return ( +
+
+
SPECIAL PROMOTION
+
+ Coupon only applicable to this product! +
+ { + handleCouponClick(idx, promotion); + }} + size="detail_very_small" + > +
COUPON
+ +
- { - 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')}
@@ -1561,9 +1329,6 @@ export default function ProductAllSection({ className={css.addToCartButton} // onClick={handleAddToCartClick} onClick={handleBuyNowClick} - onSpotlightUp={handleSpotlightUpFromBuyButtons} - onSpotlightDown={handleSpotlightDownFromAddToCart} - data-spotlight-next-down={focusDownMap['detail-add-to-cart-button']} type="detail_small" >
{$L('ADD TO CART')}
@@ -1584,10 +1349,6 @@ export default function ProductAllSection({ spotlightId={SpotlightIds.DETAIL_SHOPBYMOBILE} className={css.shopByMobileButton} onClick={handleShopByMobileOpen} - onSpotlightUp={handleSpotlightUpToBackButton} - onSpotlightDown={handleSpotlightDownFromShopByMobile} - data-spotlight-next-down={focusDownMap[shopByMobileId]} - data-spotlight-next-up={shopByMobileUpTarget} >
{$L('SHOP BY MOBILE')}
@@ -1600,7 +1361,6 @@ export default function ProductAllSection({ favoriteFlag={favoriteFlag} onFavoriteFlagChanged={onFavoriteFlagChanged} kind={'item_detail'} - nextDownId={focusDownMap['favoriteBtn']} />
)} 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 5accc675..110debd2 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 @@ -618,6 +618,19 @@ } } +.couponStackContainer { + width: 100%; + display: flex; + flex-direction: column; + + > * { + margin-bottom: 5px; + &:last-child { + margin-bottom: 0; + } + } +} + .favoriteBtnWrapper { width: 60px; height: 60px;