From cdfc31666b74cdcf14451c350c188b52828e4bea Mon Sep 17 00:00:00 2001 From: djaco Date: Wed, 23 Jul 2025 17:07:32 +0900 Subject: [PATCH] Apply clean-develop content to resolve side effects --- .../src/reducers/homeReducer.js | 8 +- .../src/reducers/myPageReducer.js | 5 +- .../NoLiveContents/NoLiveCard/NoLiveCard.jsx | 24 +-- .../UpComing/UpComingList/UpComingList.jsx | 15 +- .../views/HomePanel/HomeBanner/HomeBanner.jsx | 172 ++++++++++++------ .../views/HomePanel/HomeBanner/RandomUnit.jsx | 18 +- .../src/views/MainView/MainView.jsx | 8 +- .../MyPageSub/Reminders/Reminders.jsx | 59 +++--- 8 files changed, 179 insertions(+), 130 deletions(-) diff --git a/com.twin.app.shoptime/src/reducers/homeReducer.js b/com.twin.app.shoptime/src/reducers/homeReducer.js index dd9f8994..1038334c 100644 --- a/com.twin.app.shoptime/src/reducers/homeReducer.js +++ b/com.twin.app.shoptime/src/reducers/homeReducer.js @@ -89,14 +89,14 @@ export const homeReducer = (state = initialState, action) => { const bannerData = action.payload?.homeMainContentsBannerInfos?.[0] ?? {}; const curationTitle = - action.payload?.homeMainContentsBannerInfos?.[0]?.curtNm; + action.payload?.homeMainContentsBannerInfos?.[0].curtNm; const curationId = - action.payload?.homeMainContentsBannerInfos?.[0]?.curationId; + action.payload?.homeMainContentsBannerInfos?.[0].curationId; - if (bannerData?.bannerInfos) { + if (bannerData.bannerInfos) { for (let i = 0; i < bannerData.bannerInfos.length; i++) { const info = bannerData.bannerInfos[i]; - if (info.shptmDspyTpNm === "Random" && info.bannerDetailInfos?.length > 0) { + if (info.shptmDspyTpNm === "Random") { const dataLength = info.bannerDetailInfos.length; info.randomIndex = Math.floor(Math.random() * dataLength); } diff --git a/com.twin.app.shoptime/src/reducers/myPageReducer.js b/com.twin.app.shoptime/src/reducers/myPageReducer.js index 4834e86d..53970ca1 100644 --- a/com.twin.app.shoptime/src/reducers/myPageReducer.js +++ b/com.twin.app.shoptime/src/reducers/myPageReducer.js @@ -10,10 +10,7 @@ const initialState = { alertShowData: {}, upComingData: { upComingChangeInfo: {}, - upComingAlertShow: { - upcomAlamUseFlag: "N", - alertShows: [], - }, + upComingAlertShow: {}, upComingAlertShowKeys: {}, upComingAlertShowChangeInfo: {}, }, diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/NoLiveContents/NoLiveCard/NoLiveCard.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/NoLiveContents/NoLiveCard/NoLiveCard.jsx index 0eb5ba41..d9d5bf14 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/NoLiveContents/NoLiveCard/NoLiveCard.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/NoLiveContents/NoLiveCard/NoLiveCard.jsx @@ -77,25 +77,25 @@ export default memo(function NoLiveCard({ } = brandChanInfoItem; const selectedAlertShow = useMemo(() => { - if (Array.isArray(alertShows)) { - return alertShows.find((show) => show?.showId === showId && show?.strtDt === strtDt) || null; + if (alertShows) { + return alertShows // + .find((show) => show.showId === showId && show.strtDt === strtDt); } - return null; + + return {}; }, [alertShows, showId, strtDt]); const deletedAlertShow = useMemo(() => { - if (Array.isArray(alertShows)) { - return alertShows.find((show) => show?.showId !== showId && show?.strtDt === strtDt) || null; + if (alertShows) { + return alertShows // + .find((show) => show.showId !== showId && show.strtDt === strtDt); } - return null; + + return {}; }, [alertShows, showId, strtDt]); - const isTimeConflict = useMemo(() => { - if (Array.isArray(alertShows)) { - return alertShows.some((show) => show?.showId !== showId && show?.strtDt === strtDt); - } - return false; - }, [alertShows, showId, strtDt]); + const isTimeConflict = alertShows // + .some((show) => show.showId !== showId && show.strtDt === strtDt); const alamDispFlag = selectedAlertShow?.alamDispFlag; const isReminderOff = upcomAlamUseFlag === "N"; diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx index b6495170..b690ddc9 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx @@ -84,17 +84,14 @@ export default memo(function UpComingList({ strtDt, }) => () => { - const selectedAlertShow = Array.isArray(alertShows) - ? alertShows.find((show) => show?.showId === showId && show?.strtDt === strtDt) - : null; + const selectedAlertShow = alertShows // + .find((show) => show.showId === showId && show.strtDt === strtDt); - const deletedAlertShow = Array.isArray(alertShows) - ? alertShows.find((show) => show?.showId !== showId && show?.strtDt === strtDt) - : null; + const deletedAlertShow = alertShows // + .find((show) => show.showId !== showId && show.strtDt === strtDt); - const isTimeConflict = Array.isArray(alertShows) - ? alertShows.some((show) => show?.showId !== showId && show?.strtDt === strtDt) - : false; + const isTimeConflict = alertShows // + .some((show) => show.showId !== showId && show.strtDt === strtDt); const alamDispFlag = selectedAlertShow?.alamDispFlag; // const isShowStarted = formatGMTString(new Date()) >= strtDt; diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx index ef541219..886e2e42 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx @@ -11,7 +11,6 @@ import { setDefaultFocus, // setShowPopup, fetchCurrentUserHomeTerms, - collectAndSaveBannerPositions, } from "../../../actions/homeActions"; import { changeAppStatus, @@ -25,6 +24,7 @@ import { setMyPageTermsAgree } from "../../../actions/myPageActions"; import { pushPanel, popPanel } from "../../../actions/panelActions"; import { panel_names } from "../../../utils/Config"; import { + startVideoPlayer, requestPlayControl, releasePlayControl, } from "../../../actions/playActions"; @@ -79,32 +79,49 @@ export default function HomeBanner({ } }, [handleItemFocus]); - // πŸ”½ [μˆ˜μ •] 쀑앙 μ œμ–΄ μ‹œμŠ€ν…œμ„ μ‚¬μš©ν•˜λŠ” μƒˆλ‘œμš΄ μ˜κ΅¬μž¬μƒ 둜직 - useEffect(() => { - // DSP00201 ν…œν”Œλ¦Ώμ΄κ³  λ°°λ„ˆ 데이터가 μžˆμ„ λ•Œλ§Œ μ‹€ν–‰ - if ( - bannerDataList && - bannerDataList.length > 0 && - selectTemplate === "DSP00201" - ) { - const banner0Data = bannerDataList[0]?.bannerDetailInfos?.[0]; + // πŸ”½ [μΆ”κ°€] 0번째 λ°°λ„ˆμ— λŒ€ν•œ 영ꡬ λΉ„λ””μ˜€ μž¬μƒμ„ μ²˜λ¦¬ν•˜λŠ” useEffect + // useEffect(() => { + // if ( + // bannerDataList && + // bannerDataList.length > 0 && + // selectTemplate === "DSP00201" + // ) { + // const banner0Data = bannerDataList[0]?.bannerDetailInfos?.[0]; - if (banner0Data && banner0Data.showUrl) { - const videoInfo = { - showUrl: banner0Data.showUrl, - patnrId: banner0Data.patnrId, - showId: banner0Data.showId, - shptmBanrTpNm: "MEDIA", - modal: true, - modalContainerId: "banner0", - spotlightDisable: true, // μ˜κ΅¬μž¬μƒ λΉ„λ””μ˜€λŠ” 포컀슀λ₯Ό 받지 μ•ŠμŒ - }; - // 쀑앙 μ œμ–΄ μ‹œμŠ€ν…œμ— μ˜κ΅¬μž¬μƒ μ‹œμž‘μ„ μš”μ²­ - dispatch(requestPlayControl("banner0_persistent", videoInfo)); - } - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [dispatch, selectTemplate, JSON.stringify(bannerDataList)]); // bannerDataList의 λ‚΄μš©μ΄ λ°”λ€” λ•Œλ§Œ μ‹€ν–‰ + // if (banner0Data && banner0Data.showUrl) { + // // DOM μš”μ†Œκ°€ μ‘΄μž¬ν•˜λŠ”μ§€ 확인 ν›„ μ‹€ν–‰ + // console.log("[HomeBanner] banner0Data", banner0Data); + // const checkAndPlay = () => { + // const targetElement = document.querySelector( + // '[data-spotlight-id="banner0"]', + // ); + // console.log("[HomeBanner] targetElement", targetElement); + // if (targetElement) { + // console.log("[HomeBanner] targetElement 쑴재"); + // dispatch( + // startVideoPlayer({ + // showUrl: banner0Data.showUrl, + // patnrId: banner0Data.patnrId, + // showId: banner0Data.showId, + // shptmBanrTpNm: "MEDIA", + // modal: true, + // modalContainerId: "banner0", + // spotlightDisable: true, + // }), + // ); + // console.log("[HomeBanner] startVideoPlayer 호좜"); + // } else { + // // μš”μ†Œκ°€ μ—†μœΌλ©΄ μž μ‹œ ν›„ μž¬μ‹œλ„ + // console.log("[HomeBanner] targetElement μ—†μŒ"); + // setTimeout(checkAndPlay, 100); + // } + // }; + + // // λ‹€μŒ tickμ—μ„œ μ‹€ν–‰ν•˜μ—¬ λ Œλ”λ§ μ™„λ£Œ 보μž₯ + // setTimeout(checkAndPlay, 0); + // } + // } + // }, [dispatch, bannerDataList, selectTemplate]); // πŸ”½ [μˆ˜μ •] μƒˆλ‘œμš΄ 1번 λ°°λ„ˆ 포컀슀/λΈ”λŸ¬ ν•Έλ“€λŸ¬ const handleSecondBannerFocus = useCallback(() => { @@ -122,7 +139,7 @@ export default function HomeBanner({ modal: true, modalContainerId: "banner1", modalClassName: css.videoModal, - isVerticalModal: true, + isVerticalModal: true, // Assuming second banner is horizontal, so modal is vertical }; // 쀑앙 μ œμ–΄ μ‹œμŠ€ν…œμ— '미리보기' μž¬μƒμ„ μš”μ²­ @@ -395,29 +412,80 @@ export default function HomeBanner({ } }, [shouldShowOptionalTermsPopup, termsLoading, isOptionalConfirmVisible, dispatch]); + // const renderItem = useCallback( + // (index, isHorizontal) => { + // const data = bannerDataList?.[index] ?? {}; + + // if (index === 1) { + // return ( + //
+ // + //
+ // ); + // } + + // return ( + //
+ // {data.shptmDspyTpNm === "Rolling" ? ( + // + // ) : data.shptmDspyTpNm === "Random" ? ( + // + // ) : ( + // + // + // + // )} + //
+ // ); + // }, + // [ + // bannerDataList, + // _handleItemFocus, + // _handleShelfFocus, + // handleSecondBannerFocus, + // handleSecondBannerBlur, + // ], + // ); + const renderItem = useCallback( (index, isHorizontal) => { const data = bannerDataList?.[index] ?? {}; - - // 1번 λ°°λ„ˆμ— μƒˆλ‘œμš΄ 포컀슀/λΈ”λŸ¬ 이벀트 ν•Έλ“€λŸ¬ μ—°κ²° - if (index === 1) { - return ( -
- -
- ); - } - return (
{data.shptmDspyTpNm === "Rolling" ? ( @@ -437,7 +505,7 @@ export default function HomeBanner({ spotlightId={"banner" + index} handleShelfFocus={_handleShelfFocus} handleItemFocus={_handleItemFocus} - randomNumber={data?.randomIndex} + randomNumber={data.randomIndex} /> ) : ( @@ -459,7 +527,7 @@ export default function HomeBanner({
); }, - [_handleItemFocus, _handleShelfFocus, bannerDataList, handleSecondBannerFocus, handleSecondBannerBlur], + [_handleItemFocus, _handleShelfFocus, bannerDataList], ); // 1번째 λ°°λ„ˆ(포컀슀 μž¬μƒ) 및 기타 λ°°λ„ˆλ₯Ό μœ„ν•œ λ Œλ”λ§ ν•¨μˆ˜ @@ -471,14 +539,14 @@ export default function HomeBanner({ if (selectTemplate === "DSP00201" && index === 1) { return (
-
); @@ -488,7 +556,7 @@ export default function HomeBanner({ if (data.shptmDspyTpNm === "Rolling") { return (
- state.home?.bannerData?.shptmTmplCd, @@ -86,7 +86,7 @@ export default function RandomUnit({ const timerRef = useRef(); const bannerDataRef = useRef(bannerData); const randomDataRef = useRef( - randomNumber !== undefined && bannerDetailInfos.length > 0 + bannerDetailInfos && randomNumber !== undefined && bannerDetailInfos.length > 0 ? bannerDetailInfos[randomNumber] : null ); @@ -180,7 +180,7 @@ export default function RandomUnit({ useEffect(() => { if (bannerDetailInfos && bannerDetailInfos.length > 0 && randomNumber !== undefined) { const indices = bannerDetailInfos - .map((info, index) => (info.shptmBanrTpNm === "LIVE" ? index : null)) + .map((info, index) => (info && info.shptmBanrTpNm === "LIVE" ? index : null)) .filter((index) => index !== null && index !== randomNumber); setLiveIndicies(indices); @@ -481,10 +481,10 @@ export default function RandomUnit({ }, [sendBannerLog]); useEffect(() => { - if (bannerData && randomNumber !== undefined && bannerDetailInfos.length > 0) { + if (bannerData && bannerDetailInfos && randomNumber !== undefined && bannerDetailInfos.length > 0) { setRandomData(bannerDetailInfos[randomNumber]); } - }, [bannerData, randomNumber, bannerDetailInfos]); + }, [bannerData, bannerDetailInfos, randomNumber]); useEffect(() => { if (randomData && randomData.priceInfo !== null) { @@ -529,11 +529,11 @@ export default function RandomUnit({ clearTimeout(timerRef.current); setVideoError(true); dispatch(finishVideoPreview()); - if (liveIndicies.length > 0 && bannerDetailInfos.length > 0) { + if (liveIndicies.length > 0) { const nextIndex = liveIndicies[0]; setLiveIndicies((prev) => prev.slice(1)); - if (bannerDetailInfos[nextIndex]) { + if (bannerDetailInfos && bannerDetailInfos[nextIndex]) { setRandomData(bannerDetailInfos[nextIndex]); } @@ -542,10 +542,10 @@ export default function RandomUnit({ }, 0); } } - }, [broadcast, liveIndicies, bannerDetailInfos]); + }, [broadcast]); // 데이터가 μ—†μœΌλ©΄ λ Œλ”λ§ν•˜μ§€ μ•ŠμŒ - if (!bannerData || !randomData) { + if (!bannerData || !randomData || !bannerDetailInfos) { return null; } diff --git a/com.twin.app.shoptime/src/views/MainView/MainView.jsx b/com.twin.app.shoptime/src/views/MainView/MainView.jsx index 49e95b69..02d8cbc9 100644 --- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx +++ b/com.twin.app.shoptime/src/views/MainView/MainView.jsx @@ -477,11 +477,9 @@ export default function MainView({ className, initService }) { upComingAlertShow?.upcomAlamUseFlag === "Y" && upComingAlertShow.alertShows?.length > 0 ) { - const alertList = Array.isArray(upComingAlertShow.alertShows) - ? upComingAlertShow.alertShows.filter((show) => - show?.strtDt && isSameDateTime(show.strtDt) - ) - : []; + const alertList = upComingAlertShow.alertShows.filter((show) => + isSameDateTime(show.strtDt) + ); if (alertList.length > 0) { setAlertItems(alertList); diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx index 06ef925f..7b3c33d4 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx @@ -79,13 +79,9 @@ export default function Reminders({ title, cbScrollTo }) { useEffect(() => { const initialSelectedItems = {}; - if (upComingAlertShow?.alertShows && Array.isArray(upComingAlertShow.alertShows)) { - upComingAlertShow.alertShows.forEach((item) => { - if (item?.showId) { - initialSelectedItems[item.showId] = false; - } - }); - } + upComingAlertShow.alertShows?.forEach((item) => { + initialSelectedItems[item.showId] = false; + }); setSelectedItems(initialSelectedItems); }, [upComingAlertShow]); @@ -165,9 +161,9 @@ export default function Reminders({ title, cbScrollTo }) { Object.keys(selectedItems).forEach((id) => { updatedSelectedItems[id] = false; - if (selectedItems[id] && upComingAlertShow?.alertShows && Array.isArray(upComingAlertShow.alertShows)) { + if (selectedItems[id]) { const foundItem = upComingAlertShow.alertShows.find( - (item) => item?.patnrId === id || item?.showId === id + (item) => item.patnrId === id || item.showId === id ); if ( @@ -179,13 +175,11 @@ export default function Reminders({ title, cbScrollTo }) { showId: foundItem.showId, }); } - if (foundItem) { - deletedList.push({ - partner: foundItem.patncNm, - contentTitle: foundItem.showNm, - contentId: foundItem.showId, - }); - } + deletedList.push({ + partner: foundItem.patncNm, + contentTitle: foundItem.showNm, + contentId: foundItem.showId, + }); } }); if (deletedList.length > 0) { @@ -264,17 +258,13 @@ export default function Reminders({ title, cbScrollTo }) { const handleCancelButtonClick = useCallback(() => { setActiveDelete(false); - const initialSelectedItems = upComingAlertShow?.alertShows && Array.isArray(upComingAlertShow.alertShows) - ? upComingAlertShow.alertShows.reduce( - (acc, item) => { - if (item?.showId) { - acc[item.showId] = false; - } - return acc; - }, - {} - ) - : {}; + const initialSelectedItems = upComingAlertShow.alertShows?.reduce( + (acc, item) => { + acc[item.showId] = false; + return acc; + }, + {} + ); setSelectedItems(initialSelectedItems); setSelectAll(false); @@ -283,11 +273,9 @@ export default function Reminders({ title, cbScrollTo }) { const renderItem = useCallback( ({ index, ...rest }) => { - const sortedAlertShows = upComingAlertShow?.alertShows && Array.isArray(upComingAlertShow.alertShows) - ? upComingAlertShow.alertShows - .slice() - .sort((a, b) => new Date(a.strtDt) - new Date(b.strtDt)) - : []; + const sortedAlertShows = upComingAlertShow.alertShows + .slice() + .sort((a, b) => new Date(a.strtDt) - new Date(b.strtDt)); const listItem = sortedAlertShows[index]; @@ -314,7 +302,7 @@ export default function Reminders({ title, cbScrollTo }) { selected={selectedItems[listItem.showId]} onToggle={handleItemToggle(listItem.showId)} index={index} - length={upComingAlertShow?.alertShows?.length || 0} + length={upComingAlertShow.alertShows.length} /> ); }, @@ -358,7 +346,7 @@ export default function Reminders({ title, cbScrollTo }) { )} - {upComingAlertShow?.alertShows && + {upComingAlertShow.alertShows && upComingAlertShow.alertShows.length > 0 ? (
- {upComingAlertShow?.alertShows && + {upComingAlertShow && + upComingAlertShow.alertShows && upComingAlertShow.alertShows.length > 0 ? (