From 6d0cf785341e186d267f759910460c6558416642 Mon Sep 17 00:00:00 2001 From: optrader Date: Mon, 24 Nov 2025 09:08:54 +0900 Subject: [PATCH] =?UTF-8?q?[251124]=20fix:=20App.js=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=20=EC=A0=95=EB=A6=AC=20=EB=B0=8F=20=EC=B5=9C=EC=A0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ• ์ปค๋ฐ‹ ์‹œ๊ฐ„: 2025. 11. 24. 09:08:54 ๐Ÿ“Š ๋ณ€๊ฒฝ ํ†ต๊ณ„: โ€ข ์ด ํŒŒ์ผ: 10๊ฐœ โ€ข ์ถ”๊ฐ€: +93์ค„ โ€ข ์‚ญ์ œ: -97์ค„ ๐Ÿ“ ์ˆ˜์ •๋œ ํŒŒ์ผ: ~ com.twin.app.shoptime/src/App/App.js ~ com.twin.app.shoptime/src/components/MediaItem/MediaItem.module.less ~ com.twin.app.shoptime/src/components/MobileSend/PhoneInputSection.module.less ~ com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less ~ com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js ~ com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx ~ com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.module copy.less ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx ๐Ÿ”ง ํ•จ์ˆ˜ ๋ณ€๊ฒฝ ๋‚ด์šฉ: ๐Ÿ“„ com.twin.app.shoptime/src/App/App.js (javascript): ๐Ÿ”„ Modified: resolveSpotlightIdFromEvent() โŒ Deleted: handleFocusLog(), handleBlurLog() ๐Ÿ“„ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx (javascript): ๐Ÿ”„ Modified: normalizeModalStyle() ๐Ÿ”ง ์ฃผ์š” ๋ณ€๊ฒฝ ๋‚ด์šฉ: โ€ข ํ•ต์‹ฌ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง ๊ฐœ์„  โ€ข UI ์ปดํฌ๋„ŒํŠธ ์•„ํ‚คํ…์ฒ˜ ๊ฐœ์„  โ€ข API ์„œ๋น„์Šค ๋ ˆ์ด์–ด ๊ฐœ์„  Performance: ์ฝ”๋“œ ์ตœ์ ํ™”๋กœ ์„ฑ๋Šฅ ๊ฐœ์„  ๊ธฐ๋Œ€ --- com.twin.app.shoptime/src/App/App.js | 118 +++++++++--------- .../MediaItem/MediaItem.module.less | 3 +- .../MobileSend/PhoneInputSection.module.less | 2 +- .../components/TPopUp/TNewPopUp.module.less | 13 -- .../src/hooks/useVideoPlay/useVideoPlay.js | 16 +++ .../ProductOverview.module.less | 2 +- .../src/views/MediaPanel/MediaPanel.jsx | 2 +- .../src/views/MediaPanel/MediaPanel.v3.jsx | 4 +- .../TermsOfOptional.module copy.less | 6 +- .../src/views/PlayerPanel/PlayerPanel.jsx | 4 +- 10 files changed, 83 insertions(+), 87 deletions(-) diff --git a/com.twin.app.shoptime/src/App/App.js b/com.twin.app.shoptime/src/App/App.js index d73fb139..9f08a638 100644 --- a/com.twin.app.shoptime/src/App/App.js +++ b/com.twin.app.shoptime/src/App/App.js @@ -465,56 +465,55 @@ function AppBase(props) { // const termsFlag = useSelector((state) => state.common.termsFlag); const termsData = useSelector((state) => state.home.termsData); - // ๐Ÿ”ฝ Spotlight focus/blur ๋กœ๊ทธ (์˜ต์…˜) - useEffect(() => { - if (!Config.FOCUS_DEBUG) { - return undefined; - } + // // ๐Ÿ”ฝ Spotlight focus/blur ๋กœ๊ทธ (์˜ต์…˜) + // useEffect(() => { + // if (!Config.FOCUS_DEBUG) { + // return undefined; + // } - const handleFocusLog = (event) => { - const spotlightId = resolveSpotlightIdFromEvent(event); - if (!spotlightId || spotlightId === lastLoggedSpotlightId) { - return; - } - console.log(`[SpotlightFocus] focus - ${spotlightId}`); - lastLoggedSpotlightId = spotlightId; - }; + // const handleFocusLog = (event) => { + // const spotlightId = resolveSpotlightIdFromEvent(event); + // if (!spotlightId || spotlightId === lastLoggedSpotlightId) { + // return; + // } + // console.log(`[SpotlightFocus] focus - ${spotlightId}`); + // lastLoggedSpotlightId = spotlightId; + // }; - const handleBlurLog = (event) => { - const spotlightId = resolveSpotlightIdFromEvent(event); - if (!spotlightId || spotlightId === lastLoggedBlurSpotlightId) { - return; - } - console.log(`[SpotlightFocus] blur - ${spotlightId}`); - lastLoggedBlurSpotlightId = spotlightId; - }; + // const handleBlurLog = (event) => { + // const spotlightId = resolveSpotlightIdFromEvent(event); + // if (!spotlightId || spotlightId === lastLoggedBlurSpotlightId) { + // return; + // } + // console.log(`[SpotlightFocus] blur - ${spotlightId}`); + // lastLoggedBlurSpotlightId = spotlightId; + // }; - const hasSpotlightListener = typeof Spotlight.addEventListener === 'function'; - if (hasSpotlightListener) { - Spotlight.addEventListener('focus', handleFocusLog); - Spotlight.addEventListener('blur', handleBlurLog); + // const hasSpotlightListener = typeof Spotlight.addEventListener === 'function'; + // if (hasSpotlightListener) { + // Spotlight.addEventListener('focus', handleFocusLog); + // Spotlight.addEventListener('blur', handleBlurLog); - return () => { - Spotlight.removeEventListener('focus', handleFocusLog); - Spotlight.removeEventListener('blur', handleBlurLog); - }; - } + // return () => { + // Spotlight.removeEventListener('focus', handleFocusLog); + // Spotlight.removeEventListener('blur', handleBlurLog); + // }; + // } - if (typeof document !== 'undefined') { - document.addEventListener('spotlightfocus', handleFocusLog); - document.addEventListener('spotlightblur', handleBlurLog); + // if (typeof document !== 'undefined') { + // document.addEventListener('spotlightfocus', handleFocusLog); + // document.addEventListener('spotlightblur', handleBlurLog); - return () => { - document.removeEventListener('spotlightfocus', handleFocusLog); - document.removeEventListener('spotlightblur', handleBlurLog); - }; - } + // return () => { + // document.removeEventListener('spotlightfocus', handleFocusLog); + // document.removeEventListener('spotlightblur', handleBlurLog); + // }; + // } - return undefined; - }, [Config.FOCUS_DEBUG]); + // return undefined; + // }, [Config.FOCUS_DEBUG]); useEffect(() => { - // Chromium68 ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด Optional Chaining ์ œ๊ฑฐ if (termsData && termsData.data && termsData.data.terms) { dispatch(getTermsAgreeYn()); } @@ -525,7 +524,6 @@ function AppBase(props) { const oldDb8Deleted = useSelector((state) => state.localSettings.oldDb8Deleted); // const macAddress = useSelector((state) => state.common.macAddress); - // Chromium68 ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด Optional Chaining ์ œ๊ฑฐ const deviceCountryCode = (httpHeader && httpHeader['X-Device-Country']) || ''; useEffect(() => { @@ -581,11 +579,11 @@ function AppBase(props) { // appinfo // ); - console.log('[App.js] initService,httpHeaderRef.current', httpHeaderRef.current); - console.log('[App.js] haveyInit', haveyInit); + // console.log('[App.js] initService,httpHeaderRef.current', httpHeaderRef.current); + // console.log('[App.js] haveyInit', haveyInit); // ์•ฑ ์ดˆ๊ธฐํ™” ์‹œ HomePanel ์ž๋™ ๊ธฐ๋ก - console.log('[App.js] Recording initial HomePanel on app start'); + // console.log('[App.js] Recording initial HomePanel on app start'); dispatch( enqueuePanelHistory( 'homepanel', @@ -618,11 +616,11 @@ function AppBase(props) { const launchParams = getLaunchParams(); - console.log( - 'initService...{haveyInit, launchParams}', - haveyInit, - JSON.stringify(launchParams) - ); + // console.log( + // 'initService...{haveyInit, launchParams}', + // haveyInit, + // JSON.stringify(launchParams) + // ); // pyh TODO: edit or delete later (line 196 ~ 198) // Chromium68 ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด Optional Chaining ์ œ๊ฑฐ @@ -656,7 +654,7 @@ function AppBase(props) { ); const handleRelaunchEvent = useCallback(() => { - console.log('[App] handleRelaunchEvent triggered'); + // console.log('[App] handleRelaunchEvent triggered'); const launchParams = getLaunchParams(); clearLaunchParams(); @@ -709,8 +707,8 @@ function AppBase(props) { }, [initService, introTermsAgreeRef, dispatch]); const visibilityChanged = useCallback(() => { - console.log('document is hidden', document.hidden); - console.log('document.visibilityState= ', document.visibilityState); + // console.log('document is hidden', document.hidden); + // console.log('document.visibilityState= ', document.visibilityState); if (document.hidden && typeof window === 'object') { clearTimeout(foreGroundChangeTimer); } else { @@ -718,13 +716,13 @@ function AppBase(props) { // set foreground flag using delay time. clearTimeout(foreGroundChangeTimer); foreGroundChangeTimer = setTimeout(() => { - console.log( - 'visibility changed !!! ==> set to foreground cursorVisible', - // Chromium68 ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด Optional Chaining ์ œ๊ฑฐ - JSON.stringify( - window.PalmSystem && window.PalmSystem.cursor && window.PalmSystem.cursor.visibility - ) - ); // eslint-disable-line no-console + // console.log( + // 'visibility changed !!! ==> set to foreground cursorVisible', + // // Chromium68 ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด Optional Chaining ์ œ๊ฑฐ + // JSON.stringify( + // window.PalmSystem && window.PalmSystem.cursor && window.PalmSystem.cursor.visibility + // ) + // ); // eslint-disable-line no-console if (platform.platformName !== 'webos') { //for debug dispatch( diff --git a/com.twin.app.shoptime/src/components/MediaItem/MediaItem.module.less b/com.twin.app.shoptime/src/components/MediaItem/MediaItem.module.less index 44e05da5..5ea652b7 100644 --- a/com.twin.app.shoptime/src/components/MediaItem/MediaItem.module.less +++ b/com.twin.app.shoptime/src/components/MediaItem/MediaItem.module.less @@ -553,8 +553,7 @@ } } .forceFocus { - // :global(.spottable):focus{ - z-index: 20; + z-index: 20; :not(.favFocus) .thumbContainer { /*transform: scale(1.2);*/ background-image: url("../../../assets/images/player/focus-frame.png"); diff --git a/com.twin.app.shoptime/src/components/MobileSend/PhoneInputSection.module.less b/com.twin.app.shoptime/src/components/MobileSend/PhoneInputSection.module.less index 45481127..d5f17f63 100644 --- a/com.twin.app.shoptime/src/components/MobileSend/PhoneInputSection.module.less +++ b/com.twin.app.shoptime/src/components/MobileSend/PhoneInputSection.module.less @@ -72,7 +72,7 @@ /* Modifier: highlighted */ .phoneInput__digit_highlighted { background: #E6E6E6; // var(--Color-Icon&Text*-primary) - box-shadow: 0px 10.285714149475098px 6.1714301109313965px rgba(0, 0, 0, 0.30); + box-shadow: 0px 10.29px 6.17px rgba(0, 0, 0, 0.30); color: #4C5059; // var(--Color-Icon&Text*-focused) } diff --git a/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less b/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less index 4134cbfb..228386e0 100644 --- a/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less +++ b/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less @@ -1103,16 +1103,3 @@ } } -// optionalConfirm์ผ ๋•Œ๋งŒ ๊ธฐ์กด ์œ„์น˜ ์Šคํƒ€์ผ ๋ฌด๋ ฅํ™” - -// :global([id="floatLayer"]) :global(> div:not([id])) :global(> div) :global(> div:nth-child(2)) { -// .tNewPopUp.optionalConfirm & { -// bottom: unset !important; -// transform: none !important; -// top: unset !important; -// position: fixed !important; -// bottom: 0 !important; -// left: 50% !important; -// transform: translateX(-50%) !important; -// } -// } diff --git a/com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js b/com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js index 90b9f72d..a1fa1737 100644 --- a/com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js +++ b/com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js @@ -7,6 +7,7 @@ import { stopBannerVideo, stopAndHideVideo, hidePlayerVideo, + PLAYBACK_STATUS, } from '../../actions/playActions'; import fp from '../../utils/fp.js'; import { videoState } from './videoState.js'; @@ -46,6 +47,7 @@ export const useVideoPlay = (options = {}) => { const currentOwnerId = useSelector((state) => state.home.playerControl?.ownerId); const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos); const bannerVisibility = useSelector((state) => state.home.bannerVisibility); + const reduxVideoPlayState = useSelector((state) => state.play.videoPlayState); // ๐Ÿ”ฝ [๋‹จ์ˆœํ™”] ํ˜„์žฌ ์žฌ์ƒ ์ค‘์ธ ๋ฐฐ๋„ˆ ๊ฐ€์ ธ์˜ค๊ธฐ const getCurrentPlayingBanner = useCallback(() => { @@ -64,6 +66,18 @@ export const useVideoPlay = (options = {}) => { const playDelayTimerRef = useRef(null); const retryTimerRef = useRef(null); + // ๐Ÿ”ฝ Redux ๊ธฐ๋ฐ˜ ์‹ค์ œ ์žฌ์ƒ ์ƒํƒœ + const isVideoPlaying = + reduxVideoPlayState?.isPlaying === true && + reduxVideoPlayState?.playback === PLAYBACK_STATUS.PLAYING; + + // ๐Ÿ”ฝ ์ „์—ญ videoState๊ฐ€ ์‹ค์ œ ์žฌ์ƒ ์ƒํƒœ์™€ ๋ถˆ์ผ์น˜ํ•  ๋•Œ ์ •๋ฆฌ + useEffect(() => { + if (!isVideoPlaying && videoState.getCurrentPlaying()) { + videoState.setCurrentPlaying(null); + } + }, [isVideoPlaying]); + // ๐Ÿ”ฝ [์œ ํ‹ธ๋ฆฌํ‹ฐ] ๋ฐฐ๋„ˆ ๊ฐ€์šฉ์„ฑ ๊ฒ€์‚ฌ (0๋ถ€ํ„ฐ ์‹œ์ž‘ ํ†ต์ผ) const isBannerAvailable = useCallback( (bannerId) => { @@ -375,8 +389,10 @@ export const useVideoPlay = (options = {}) => { getCurrentPlayingBanner, getLastPlayedBanner, isPlaying, + isVideoPlaying, currentBanner, bannerVisibility, + videoPlayState: reduxVideoPlayState, bannerAvailability, // โœ… [์ตœ์ ํ™”] ๋ฉ”๋ชจ์ด์ œ์ด์…˜๋œ ๋ฐฐ๋„ˆ ๊ฐ€์šฉ์„ฑ // ๐Ÿ” ์œ ํ‹ธ๋ฆฌํ‹ฐ diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less index 584c5e4a..f2504c26 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less @@ -70,7 +70,7 @@ margin: 10px 0; span { .font(@fontFamily: @baseFont, @fontSize: 20px); - line-height: 40ppx; + line-height: 40px; font-weight: 700; color: rgba(234, 234, 234, 1); } diff --git a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx index 7935dd60..ac86dc10 100644 --- a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx +++ b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx @@ -418,7 +418,7 @@ const MediaPanel = React.forwardRef( const videoContainer = document.querySelector(`.${css.videoContainer}`); if (videoContainer && panelInfo.thumbnailUrl && !videoLoaded) { try { - videoContainer.style.background = `url(${panelInfo.thumbnailUrl}) center center / contain no-repeat`; + videoContainer.style.background = `url(${panelInfo.thumbnailUrl}) center/contain no-repeat`; videoContainer.style.backgroundColor = 'black'; } catch (err) { if (DEBUG_MODE) console.warn('[MediaPanel] ์ธ๋„ค์ผ ์Šคํƒ€์ผ ์„ค์ • ์‹คํŒจ:', err); diff --git a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx index da0e1510..a911deb1 100644 --- a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx +++ b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx @@ -2164,12 +2164,12 @@ const MediaPanel = React.forwardRef( const videoContainer = document.querySelector(`.${css.videoContainer}`); if (panelInfo.thumbnail && !videoVerticalVisible) { - videoContainer.style.background = `url(${panelInfo.thumbnail}) center center / contain no-repeat`; + videoContainer.style.background = `url(${panelInfo.thumbnail}) center/contain no-repeat`; videoContainer.style.backgroundColor = 'black'; } if (broadcast.type === 'videoError' && videoThumbnailUrl) { - videoContainer.style.background = `url(${videoThumbnailUrl}) center center / contain no-repeat`; + videoContainer.style.background = `url(${videoThumbnailUrl}) center/contain no-repeat`; videoContainer.style.backgroundColor = 'black'; } }, [panelInfo.thumbnail, broadcast]); diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.module copy.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.module copy.less index 11ef50bc..e492969d 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.module copy.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.module copy.less @@ -757,11 +757,7 @@ background-color: #202020; /* ๋ฐฐ๊ฒฝ์ƒ‰ (ํ…Œ๋งˆ์— ๋งž๊ฒŒ ์กฐ์ •) */ padding: 0; /* TPanel ๊ธฐ๋ณธ padding ์ œ๊ฑฐ */ - // :global(.sand- เฆคเงเฆฐเฆธเงเฆ•-TPanel_TPanel_header) { - // /* ๋ชจ๋‹ฌ ๋ชจ๋“œ์ผ ๋•Œ TPanel ํ—ค๋” ์ˆจ๊ธฐ๊ฑฐ๋‚˜ ๋‹ค๋ฅด๊ฒŒ ์Šคํƒ€์ผ๋ง ๊ฐ€๋Šฅ */ - // /* display: none; */ - // } - + .body { /* TPanel ๋‚ด๋ถ€์˜ TBody๊ฐ€ ์ „์ฒด ๋†’์ด๋ฅผ ์ฐจ์ง€ํ•˜๋„๋ก */ height: 100%; diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index 534cc4f7..f09d05b0 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -2443,12 +2443,12 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props const videoContainer = document.querySelector(`.${css.videoContainer}`); if (panelInfo.thumbnail && !videoVerticalVisible) { - videoContainer.style.background = `url(${panelInfo.thumbnail}) center center / contain no-repeat`; + videoContainer.style.background = `url(${panelInfo.thumbnail}) center/contain no-repeat`; videoContainer.style.backgroundColor = 'black'; } if (broadcast.type === 'videoError' && videoThumbnailUrl) { - videoContainer.style.background = `url(${videoThumbnailUrl}) center center / contain no-repeat`; + videoContainer.style.background = `url(${videoThumbnailUrl}) center/contain no-repeat`; videoContainer.style.backgroundColor = 'black'; } }, [panelInfo.thumbnail, broadcast]);