From 469dd62444a8237e0990fc2eb8a4f12a29879aac Mon Sep 17 00:00:00 2001 From: optrader Date: Sun, 12 Oct 2025 22:02:30 +0900 Subject: [PATCH] [251012] fix: PlayerPanel turnback , Focus Policy MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ• ์ปค๋ฐ‹ ์‹œ๊ฐ„: 2025. 10. 12. 22:02:25 ๐Ÿ“Š ๋ณ€๊ฒฝ ํ†ต๊ณ„: โ€ข ์ด ํŒŒ์ผ: 12๊ฐœ โ€ข ์ถ”๊ฐ€: +239์ค„ โ€ข ์‚ญ์ œ: -78์ค„ ๐Ÿ“ ์ˆ˜์ •๋œ ํŒŒ์ผ: ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanelSkeleton/DetailPanelSkeleton.module.less ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less ~ com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less ~ com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.module.less ~ com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.module.less ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less ~ com.twin.app.shoptime/src/views/UserReview/components/UserReviewsList.module.less ๐Ÿ”ง ํ•จ์ˆ˜ ๋ณ€๊ฒฝ ๋‚ด์šฉ: ๐Ÿ“„ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx (javascript): ๐Ÿ”„ Modified: SpotlightContainerDecorator() ๐Ÿ“„ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx (javascript): ๐Ÿ”„ Modified: Spottable() ๐Ÿ”ง ์ฃผ์š” ๋ณ€๊ฒฝ ๋‚ด์šฉ: โ€ข UI ์ปดํฌ๋„ŒํŠธ ์•„ํ‚คํ…์ฒ˜ ๊ฐœ์„  โ€ข API ์„œ๋น„์Šค ๋ ˆ์ด์–ด ๊ฐœ์„  --- .../src/components/VideoPlayer/VideoPlayer.js | 37 --------- .../DetailPanelSkeleton.module.less | 80 ++++++++++++++++--- .../ProductAllSection.module.less | 58 +++++++++++--- .../IntroPanel/IntroPanel.new.module.less | 40 ++++++++-- .../OptionalTermsInfo.module.less | 9 ++- .../TermsOfService/TermsOfService.module.less | 32 +++++++- .../PlayerOverlay/PlayerOverlayContents.jsx | 6 ++ .../src/views/PlayerPanel/PlayerPanel.jsx | 12 ++- .../v2/ShopNowButton.module.less | 15 +++- .../PlayerTabContents/v2/TabContainer.v2.jsx | 11 ++- .../v2/TabContainer.v2.module.less | 9 ++- .../components/UserReviewsList.module.less | 8 +- 12 files changed, 239 insertions(+), 78 deletions(-) diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js index 40522613..b2a7ec56 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js +++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js @@ -859,28 +859,6 @@ const VideoPlayerBase = class extends React.Component { } } - // TabContainerV2์™€ mediaControls ๋™๊ธฐํ™” - if ( - this.props.tabContainerVersion === 2 && - this.props.belowContentsVisible !== undefined && - prevProps.belowContentsVisible !== this.props.belowContentsVisible - ) { - console.log('[VideoPlayer] belowContentsVisible ๋ณ€๊ฒฝ ๊ฐ์ง€:', { - prev: prevProps.belowContentsVisible, - current: this.props.belowContentsVisible, - mediaControlsVisible: this.state.mediaControlsVisible, - }); - - if (this.props.belowContentsVisible && !this.state.mediaControlsVisible) { - // TabContainerV2๊ฐ€ ํ‘œ์‹œ๋  ๋•Œ controls๋„ ํ‘œ์‹œ - console.log('[VideoPlayer] TabContainerV2 ํ‘œ์‹œ - controls ๊ฐ•์ œ ํ‘œ์‹œ'); - this.showControls(); - } else if (!this.props.belowContentsVisible && this.state.mediaControlsVisible) { - // TabContainerV2๊ฐ€ ์ˆจ๊ฒจ์งˆ ๋•Œ controls๋„ ์ˆจ๊น€ - console.log('[VideoPlayer] TabContainerV2 ์ˆจ๊น€ - controls ์ˆจ๊น€'); - this.hideControls(); - } - } if ( (!this.state.mediaControlsVisible && prevState.mediaControlsVisible !== this.state.mediaControlsVisible) || @@ -1044,12 +1022,6 @@ const VideoPlayerBase = class extends React.Component { // detection of when "more" is pressed vs when the state is updated is mismatched. Using an // instance variable that's only set and used for this express purpose seems cleanest. - // TabContainerV2๊ฐ€ ํ‘œ์‹œ ์ค‘์ด๋ฉด ์ž๋™์œผ๋กœ ๋‹ซ์ง€ ์•Š์Œ - if (this.props.tabContainerVersion === 2 && this.props.belowContentsVisible) { - console.log('[VideoPlayer] TabContainerV2 ํ‘œ์‹œ ์ค‘ - autoClose ๋น„ํ™œ์„ฑํ™”'); - return; - } - if (this.props.autoCloseTimeout && !this.props.sideContentsVisible) { this.autoCloseJob.startAfter(this.props.autoCloseTimeout); } @@ -1981,15 +1953,6 @@ const VideoPlayerBase = class extends React.Component { return; } - // tabContainerVersion === 2์ผ ๋•Œ belowContentsVisible๋„ ํ•จ๊ป˜ ํ† ๊ธ€ - if (this.props.tabContainerVersion === 2 && this.props.setBelowContentsVisible) { - const willShowControls = !this.state.mediaControlsVisible; - console.log('[VideoPlayer] ํด๋ฆญ - ์ƒํƒœ ๋™๊ธฐํ™” ํ† ๊ธ€:', willShowControls); - - // belowContentsVisible์„ ๋จผ์ € ๋ณ€๊ฒฝ (componentDidUpdate์—์„œ mediaControls ๋™๊ธฐํ™”๋จ) - this.props.setBelowContentsVisible(willShowControls); - } - this.toggleControls(); }; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanelSkeleton/DetailPanelSkeleton.module.less b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanelSkeleton/DetailPanelSkeleton.module.less index 445dc46a..eaa29b05 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanelSkeleton/DetailPanelSkeleton.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanelSkeleton/DetailPanelSkeleton.module.less @@ -157,7 +157,13 @@ width: 100%; display: flex; flex-direction: column; - gap: 10px; + + > * { + margin-bottom: 10px; + &:last-child { + margin-bottom: 0; + } + } } .skeletonTitle { @@ -190,8 +196,14 @@ .skeletonButtons { width: 100%; display: flex; - gap: 10px; align-items: center; + + > * { + margin-right: 10px; + &:last-child { + margin-right: 0; + } + } } .skeletonShopButton { @@ -218,7 +230,13 @@ width: 100%; display: flex; flex-direction: column; - gap: 5px; + + > * { + margin-bottom: 5px; + &:last-child { + margin-bottom: 0; + } + } } .skeletonActionButton { @@ -248,7 +266,13 @@ width: 100%; display: flex; flex-direction: column; - gap: 15px; + + > * { + margin-bottom: 15px; + &:last-child { + margin-bottom: 0; + } + } } .skeletonDescTitle { @@ -274,7 +298,13 @@ width: 100%; display: flex; flex-direction: column; - gap: 20px; + + > * { + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + } } .skeletonReviewTitle { @@ -286,8 +316,14 @@ .skeletonReviewItem { width: 100%; display: flex; - gap: 15px; align-items: flex-start; + + > * { + margin-right: 15px; + &:last-child { + margin-right: 0; + } + } } .skeletonReviewAvatar { @@ -302,7 +338,13 @@ flex: 1; display: flex; flex-direction: column; - gap: 10px; + + > * { + margin-bottom: 10px; + &:last-child { + margin-bottom: 0; + } + } } .skeletonReviewHeader { @@ -328,7 +370,13 @@ width: 100%; display: flex; flex-direction: column; - gap: 25px; + + > * { + margin-bottom: 25px; + &:last-child { + margin-bottom: 0; + } + } } .skeletonYouMayLikeTitle { @@ -340,16 +388,28 @@ .skeletonProductGrid { width: 100%; display: flex; - gap: 20px; justify-content: flex-start; + + > * { + margin-right: 20px; + &:last-child { + margin-right: 0; + } + } } .skeletonProductCard { width: 300px; display: flex; flex-direction: column; - gap: 10px; flex-shrink: 0; + + > * { + margin-bottom: 10px; + &:last-child { + margin-bottom: 0; + } + } } .skeletonProductImage { 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 84f9e601..138fd1ff 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 @@ -140,7 +140,7 @@ // ์Šคํฌ๋กค๋ฐ” thumb์— hover ํšจ๊ณผ ์ ์šฉ &:hover::-webkit-scrollbar-thumb { - background: #c72054; + background: @PRIMARY_COLOR_RED; } } @@ -280,15 +280,24 @@ } // ํฌ์ปค์Šค ์ƒํƒœ ์ถ”๊ฐ€ - &:focus, - &.active { + &:focus { background: @PRIMARY_COLOR_RED !important; // ํฌ์ปค์Šค์‹œ ๋นจ๊ฐ„์ƒ‰ ๋ฐฐ๊ฒฝ outline: 2px solid @PRIMARY_COLOR_RED !important; + animation: focusShadowPulse 0.4s ease-out !important; .shopByMobileText { color: white !important; // ํฌ์ปค์Šค์‹œ์—๋„ ํ…์ŠคํŠธ๋Š” ํฐ์ƒ‰ ์œ ์ง€ } } + + &.active { + background: @PRIMARY_COLOR_RED !important; + outline: 2px solid @PRIMARY_COLOR_RED !important; + + .shopByMobileText { + color: white !important; + } + } } .favoriteBtnWrapper { @@ -398,9 +407,13 @@ font-weight: 400; // Bold์—์„œ Regular๋กœ ๋ณ€๊ฒฝ line-height: 35px; - &:focus, + &:focus { + background: @PRIMARY_COLOR_RED; // ํฌ์ปค์Šค์‹œ๋งŒ ๋นจ๊ฐ„์ƒ‰ + animation: focusShadowPulse 0.4s ease-out; + } + &.active { - background: #c72054; // ํฌ์ปค์Šค์‹œ๋งŒ ๋นจ๊ฐ„์ƒ‰ + background: @PRIMARY_COLOR_RED; } } @@ -412,7 +425,8 @@ margin-top: 10px; &:focus { - background: #c72054; + background: @PRIMARY_COLOR_RED; + animation: focusShadowPulse 0.4s ease-out; } } @@ -611,7 +625,7 @@ // ์Šคํฌ๋กค๋ฐ” thumb์— hover ํšจ๊ณผ ์ ์šฉ &:hover::-webkit-scrollbar-thumb { - background: #c72054; + background: @PRIMARY_COLOR_RED; } } @@ -750,6 +764,7 @@ &:focus { background: @PRIMARY_COLOR_RED !important; // ํฌ์ปค์Šค์‹œ ๋นจ๊ฐ„์ƒ‰ ๋ฐฐ๊ฒฝ outline: 2px solid @PRIMARY_COLOR_RED !important; + animation: focusShadowPulse 0.4s ease-out !important; .shopByMobileText { color: white !important; // ํฌ์ปค์Šค์‹œ์—๋„ ํ…์ŠคํŠธ๋Š” ํฐ์ƒ‰ ์œ ์ง€ @@ -864,7 +879,8 @@ line-height: 35px; &:focus { - background: #c72054; // ํฌ์ปค์Šค์‹œ๋งŒ ๋นจ๊ฐ„์ƒ‰ + background: @PRIMARY_COLOR_RED; // ํฌ์ปค์Šค์‹œ๋งŒ ๋นจ๊ฐ„์ƒ‰ + animation: focusShadowPulse 0.4s ease-out; } } @@ -876,7 +892,8 @@ margin-top: 10px; &:focus { - background: #c72054; + background: @PRIMARY_COLOR_RED; + animation: focusShadowPulse 0.4s ease-out; } } @@ -999,7 +1016,13 @@ display: flex; justify-content: flex-start; align-items: center; - gap: 10px; + + > * { + margin-right: 10px; + &:last-child { + margin-right: 0; + } + } } .buyNowButton { @@ -1026,6 +1049,7 @@ &:focus { background: @PRIMARY_COLOR_RED !important; outline: 2px solid @PRIMARY_COLOR_RED !important; + animation: focusShadowPulse 0.4s ease-out !important; .buyNowText { color: white !important; @@ -1057,6 +1081,7 @@ &:focus { background: @PRIMARY_COLOR_RED !important; outline: 2px solid @PRIMARY_COLOR_RED !important; + animation: focusShadowPulse 0.4s ease-out !important; .addToCartText { color: white !important; @@ -1072,3 +1097,16 @@ // PlayerPanel ๋ชจ๋‹ฌ์ด ์ด ์˜์—ญ์—์„œ๋งŒ ์žฌ์ƒ๋˜๋„๋ก ์„ค์ • z-index: 1; } + +// ํฌ์ปค์Šค Pulse ์• ๋‹ˆ๋ฉ”์ด์…˜ - Box Shadow ๋ฐฉ์‹ +@keyframes focusShadowPulse { + 0% { + box-shadow: 0 0 0 0 @PRIMARY_COLOR_RED; + } + 50% { + box-shadow: 0 0 0 6px fade(@PRIMARY_COLOR_RED, 50%); + } + 100% { + box-shadow: 0 0 0 0 @PRIMARY_COLOR_RED; + } +} diff --git a/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less b/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less index 9c916376..6c55a0e5 100644 --- a/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less +++ b/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less @@ -26,26 +26,44 @@ flex-direction: column; justify-content: space-between; align-items: center; - gap: 40px; display: inline-flex; background-color: @BG_COLOR_03; + > * { + margin-bottom: 40px; + &:last-child { + margin-bottom: 0; + } + } + // ์ฒซ ๋ฒˆ์งธ ์˜์—ญ: ํ—ค๋” ์„น์…˜ (ํƒ€์ดํ‹€ + ์„ค๋ช…) .headerSection { width: 1834px; flex-direction: column; justify-content: flex-start; align-items: center; - gap: 40px; display: flex; + > * { + margin-bottom: 40px; + &:last-child { + margin-bottom: 0; + } + } + .titleContainer { align-self: stretch; justify-content: center; align-items: center; - gap: 14px; display: inline-flex; + > * { + margin-right: 14px; + &:last-child { + margin-right: 0; + } + } + .welcomeText { color: #807f81; font-size: 62px; @@ -89,9 +107,15 @@ align-self: stretch; justify-content: center; align-items: center; - gap: 10px; display: inline-flex; + > * { + margin-right: 10px; + &:last-child { + margin-right: 0; + } + } + .descriptionText { width: 1012.49px; text-align: center; @@ -225,9 +249,15 @@ height: 100px; position: relative; display: flex; - gap: 40px; justify-content: center; + > * { + margin-right: 40px; + &:last-child { + margin-right: 0; + } + } + .agreeButton, .disagreeButton { width: 450px; diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.module.less index b7f984af..30e6e67e 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/OptionalTermsInfo.module.less @@ -67,8 +67,15 @@ display: flex; align-items: center; justify-content: center; - gap: 20px; flex-wrap: wrap; + + > * { + margin-right: 20px; + margin-bottom: 20px; + &:last-child { + margin-right: 0; + } + } } .benefitImage { diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less index 080914f4..4ebb1cd1 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less @@ -159,14 +159,26 @@ .popup_container { display: flex !important; flex-direction: column !important; - gap: 30px !important; + + > * { + margin-bottom: 30px !important; + &:last-child { + margin-bottom: 0 !important; + } + } } .button_container { display: flex !important; flex-direction: row !important; justify-content: center !important; - gap: 12px !important; + + > * { + margin-right: 12px !important; + &:last-child { + margin-right: 0 !important; + } + } .button { width: 380px !important; @@ -187,8 +199,14 @@ flex-direction: column; justify-content: center; align-items: center; - gap: 30px; box-sizing: border-box; + + > * { + margin-bottom: 30px; + &:last-child { + margin-bottom: 0; + } + } } .disagreePopupText { @@ -202,7 +220,13 @@ display: flex; flex-direction: row; justify-content: center; - gap: 12px; + + > * { + margin-right: 12px; + &:last-child { + margin-right: 0; + } + } } .disagreePopupButton { diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx index 8dc7c684..670eb27f 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx @@ -42,6 +42,12 @@ export default function PlayerOverlayContents({ const cntry_cd = useSelector((state) => state.common.httpHeader?.cntry_cd); const dispatch = useDispatch(); const onClickBack = (ev) => { + // TabContainerV2๊ฐ€ ํ‘œ์‹œ๋œ ์ƒํƒœ์—์„œ ๋ฐฑ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง ๋ฐฉ์ง€ + // (Overlay์˜ onClick์œผ๋กœ ์ „ํŒŒ๋˜์–ด toggleControls()๊ฐ€ ํ˜ธ์ถœ๋˜๋Š” ๊ฒƒ์„ ๋ง‰์Œ) + if (tabContainerVersion === 2 && belowContentsVisible) { + ev.stopPropagation(); + } + if (onClick) { onClick(ev); } diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index ff41e045..5b63a5cf 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -835,9 +835,14 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props (ev, isEnd) => { //modal๋กœ๋ถ€ํ„ฐ Full ์ „ํ™˜๋œ ๊ฒฝ์šฐ ๋‹ค์‹œ preview ๋ชจ๋“œ๋กœ ๋Œ์•„๊ฐ. - if (sideContentsVisible && !videoVerticalVisible && panelInfo.shptmBanrTpNm !== 'MEDIA') { + // TabContainer(v1)๋งŒ: Side Contents๊ฐ€ ๋ณด์ด๋Š” ๊ฒฝ์šฐ ๋จผ์ € ์ˆจ๊ธฐ๊ณ  return + if ( + tabContainerVersion === 1 && + sideContentsVisible && + !videoVerticalVisible && + panelInfo.shptmBanrTpNm !== 'MEDIA' + ) { setSideContentsVisible(false); - setBelowContentsVisible(false); ev?.stopPropagation(); // ev?.preventDefault(); return; @@ -888,9 +893,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props nowMenu, videoPlayer, sideContentsVisible, - setBelowContentsVisible, videoVerticalVisible, backupInitialIndex, + panels, + tabContainerVersion, ] ); diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.module.less index 788c76a7..7aa6379b 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.module.less +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.module.less @@ -21,18 +21,29 @@ display: inline-flex; justify-content: center; align-items: center; - gap: 10px; cursor: pointer; transition: all 0.3s ease; + + > * { + margin-right: 10px; + &:last-child { + margin-right: 0; + } + } + &:hover { background: rgba(0, 0, 0, 0.5); border-color: rgba(234, 234, 234, 0.7); } &:focus { - background: rgba(199, 8, 80, 0.2); + background: @PRIMARY_COLOR_RED; border-color: @PRIMARY_COLOR_RED; + .buttonText { + color: white; + } + &::after { .focused(@boxShadow: 22px, @borderRadius: 12px); } diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx index 1930eb3a..e2592682 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx @@ -102,9 +102,14 @@ export default function TabContainerV2({ Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON); }, []); - // useEffect(()=>{ - // console.log('[tabIndex]',tabIndex) - // },[tabIndex]) + // tabIndex๊ฐ€ 2(ShopNowButton)๋กœ ๋ณ€๊ฒฝ๋˜๋ฉด ์ž๋™์œผ๋กœ ํฌ์ปค์Šค ์ด๋™ + useEffect(() => { + if (tabIndex === 2) { + setTimeout(() => { + Spotlight.focus('below-tab-shop-now-button'); + }, 100); + } + }, [tabIndex]); return ( * { + margin-bottom: 10px; + &:last-child { + margin-bottom: 0; + } + } } .noReviews {