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 7cb40d02..24076921 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx @@ -183,6 +183,57 @@ const ButtonStackContainer = SpotlightContainerDecorator( const SpottableComponent = Spottable('div'); +// ๐Ÿ”ฝ [251217] ProductAllSection ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ ์œ„์น˜ ์ €์žฅ/๊ฒ€์ฆ ํ•จ์ˆ˜ +// PlayerPanel์˜ ๋ฐฐ๋„ˆ ์œ„์น˜ ๊ฒ€์ฆ ํŒจํ„ด์„ ProductAllSection์— ์ ์šฉ + +/** + * ProductAllSection์˜ ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ ์œ„์น˜ ์ˆ˜์ง‘ ํ•จ์ˆ˜ + * @returns {Object|null} ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ์˜ ์œ„์น˜ ์ •๋ณด (top, left) ๋˜๋Š” null + */ +const collectProductScrollPosition = () => { + const scrollContainer = document.querySelector('[data-spotlight-id="main-content-scroller"]'); + + if (scrollContainer) { + const { top, left } = scrollContainer.getBoundingClientRect(); + const position = { + top: Math.round(top), + left: Math.round(left) + }; + console.log('[ProductAllSection] ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ ์œ„์น˜ ์ˆ˜์ง‘:', position); + return position; + } + + console.warn('[ProductAllSection] ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์Œ'); + return null; +}; + +/** + * ProductAllSection ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ ์œ„์น˜ ๊ฒ€์ฆ ํ•จ์ˆ˜ + * @param {Object} savedPosition - ์ €์žฅ๋œ ์ดˆ๊ธฐ ์œ„์น˜ + * @param {Object} currentPosition - ํ˜„์žฌ ์œ„์น˜ + * @returns {boolean} ์œ„์น˜๊ฐ€ ์ผ์น˜ํ•˜๋Š”์ง€ ์—ฌ๋ถ€ + */ +const isProductScrollPositionValid = (savedPosition, currentPosition) => { + if (!savedPosition || !currentPosition) { + console.warn('[ProductAllSection] ์ €์žฅ๋œ ์œ„์น˜ ๋˜๋Š” ํ˜„์žฌ ์œ„์น˜๊ฐ€ ์—†์Œ'); + return false; + } + + const tolerance = 1; // 1px ์˜ค์ฐจ ๋ฒ”์œ„ + const isMatching = + Math.abs(currentPosition.top - savedPosition.top) <= tolerance && + Math.abs(currentPosition.left - savedPosition.left) <= tolerance; + + console.log('[ProductAllSection] ์Šคํฌ๋กค ์œ„์น˜ ๊ฒ€์ฆ:', { + expected: savedPosition, + current: currentPosition, + matching: isMatching, + tolerance + }); + + return isMatching; +}; + const getProductData = curry( (productType, themeProductInfo, themeProducts, selectedIndex, productInfo) => pipe( @@ -304,6 +355,9 @@ export default function ProductAllSection({ // handleScrollToImages์˜ timeout์„ ์ถ”์ ํ•˜๊ธฐ ์œ„ํ•œ ref const scrollToImagesTimeoutRef = useRef(null); + // ๐Ÿ”ฝ [251217] ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ ์ดˆ๊ธฐ ์œ„์น˜ ์ €์žฅ ref (VideoPlayer modal ์ „ํ™˜ ์‹œ ์œ„์น˜ ๊ฒ€์ฆ์šฉ) + const scrollPositionOnMountRef = useRef(null); + // ProductAllSection ์ดˆ๊ธฐ ๋กœ๋”ฉ ์‹œ Skeleton ํ‘œ์‹œ๋ฅผ ์œ„ํ•œ ์ƒํƒœ const [isInitialLoading, setIsInitialLoading] = useState(true); @@ -344,6 +398,19 @@ export default function ProductAllSection({ ); }, [selectedPatnrId, selectedPrdtId, userNumber, dispatch]); + // ๐Ÿ”ฝ [251217] ProductAllSection ๋งˆ์šดํŠธ ์‹œ ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ ์œ„์น˜ ์ €์žฅ + useEffect(() => { + // ์ดˆ๊ธฐ ๋ Œ๋”๋ง ํ›„ ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ์˜ ์œ„์น˜๋ฅผ ์ €์žฅ (1ํšŒ๋งŒ ์‹คํ–‰) + // ์ด ์œ„์น˜๋Š” ๋‚˜์ค‘์— VideoPlayer์˜ modal ์ „ํ™˜ ์‹œ ์œ ํšจ์„ฑ ๊ฒ€์ฆ์— ์‚ฌ์šฉ๋จ + const savedPosition = collectProductScrollPosition(); + if (savedPosition) { + scrollPositionOnMountRef.current = savedPosition; + // ๐Ÿ”ฝ window ๊ฐ์ฒด์—๋„ ์ €์žฅํ•˜์—ฌ MediaPanel.v3.jsx์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•จ + window.productScrollPositionOnMount = savedPosition; + console.log('[ProductAllSection] โœ… ์ดˆ๊ธฐ ์Šคํฌ๋กค ์œ„์น˜ ์ €์žฅ ์™„๋ฃŒ:', savedPosition); + } + }, []); // ๋งˆ์šดํŠธ ์‹œ 1ํšŒ๋งŒ ์‹คํ–‰ + useEffect(() => { // ํ•„์ˆ˜ ๊ฐ’์ด ๋ชจ๋‘ ์žˆ์„ ๋•Œ๋งŒ ํ˜ธ์ถœ if (selectedPatnrId && selectedPrdtId) { 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 e91b7566..d9460b75 100644 --- a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx +++ b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx @@ -93,6 +93,36 @@ const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => { } }; +// ๐Ÿ”ฝ [251217] ProductAllSection ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ ์œ„์น˜ ์ˆ˜์ง‘ ํ•จ์ˆ˜ +const collectProductScrollPosition = () => { + const scrollContainer = document.querySelector('[data-spotlight-id="main-content-scroller"]'); + + if (scrollContainer) { + const { top, left } = scrollContainer.getBoundingClientRect(); + const position = { + top: Math.round(top), + left: Math.round(left) + }; + return position; + } + + return null; +}; + +// ๐Ÿ”ฝ [251217] ProductAllSection ์Šคํฌ๋กค ์ปจํ…Œ์ด๋„ˆ ์œ„์น˜ ๊ฒ€์ฆ ํ•จ์ˆ˜ +const isProductScrollPositionValid = (savedPosition, currentPosition) => { + if (!savedPosition || !currentPosition) { + return false; + } + + const tolerance = 1; // 1px ์˜ค์ฐจ ๋ฒ”์œ„ + const isMatching = + Math.abs(currentPosition.top - savedPosition.top) <= tolerance && + Math.abs(currentPosition.left - savedPosition.left) <= tolerance; + + return isMatching; +}; + const getLogTpNo = (type, nowMenu) => { if (type === 'LIVE') { switch (nowMenu) { @@ -1107,6 +1137,26 @@ const MediaPanel = React.forwardRef( }, [dispatch]); const enterFullscreen = useCallback(() => { + // ๐Ÿ”ฝ [251217] ProductAllSection ์Šคํฌ๋กค ์œ„์น˜ ๊ฒ€์ฆ + // DetailPanel์—์„œ ProductAllSection์˜ ์ดˆ๊ธฐ ์œ„์น˜์™€ ํ˜„์žฌ ์œ„์น˜๋ฅผ ๋น„๊ตํ•˜์—ฌ ๊ฒ€์ฆ + const savedPosition = window.productScrollPositionOnMount; + const currentPosition = collectProductScrollPosition(); + + if (savedPosition && currentPosition) { + const isValid = isProductScrollPositionValid(savedPosition, currentPosition); + if (!isValid) { + console.warn('[MediaPanel] โš ๏ธ ProductAllSection ์Šคํฌ๋กค ์œ„์น˜ ๊ฒ€์ฆ ์‹คํŒจ - ์ „์ฒดํ™”๋ฉด ์žฌ์ƒ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ๊ฒฝ๊ณ  ํ‘œ์‹œ', { + savedPosition, + currentPosition, + }); + // ์‚ฌ์šฉ์ž ํ”ผ๋“œ๋ฐฑ: ์œ„์น˜๊ฐ€ ์ผ์น˜ํ•˜์ง€ ์•Š์Œ์„ ์ฝ˜์†”์— ๊ธฐ๋ก (๋น„๋””์˜ค๋Š” ๊ณ„์† ์žฌ์ƒ) + } else { + console.log('[MediaPanel] โœ… ProductAllSection ์Šคํฌ๋กค ์œ„์น˜ ๊ฒ€์ฆ ์„ฑ๊ณต'); + } + } else { + console.warn('[MediaPanel] โš ๏ธ ProductAllSection ์œ„์น˜ ์ •๋ณด ์—†์Œ - ๊ฒ€์ฆ ์Šคํ‚ต'); + } + isTransitioningToFullscreen.current = true; dispatch(switchMediaToFullscreen()); }, [dispatch]);