optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply clean-develop content to resolve side effects

Browse Source
This commit is contained in:
djaco
2025-07-23 17:07:32 +09:00
parent d3f24bf68f
commit cdfc31666b
8 changed files with 179 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
com.twin.app.shoptime/src/reducers/homeReducer.js
View File

@@ -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);
}

5
com.twin.app.shoptime/src/reducers/myPageReducer.js
View File

@@ -10,10 +10,7 @@ const initialState = {
alertShowData: {},
upComingData: {
upComingChangeInfo: {},
upComingAlertShow: {
upcomAlamUseFlag: "N",
alertShows: [],
},
upComingAlertShow: {},
upComingAlertShowKeys: {},
upComingAlertShowChangeInfo: {},
},

24
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/NoLiveContents/NoLiveCard/NoLiveCard.jsx
View File

@@ -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";

15
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx
View File

@@ -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;

172
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
View File

@@ -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 (
// <div className={!isHorizontal ? css.imgBox : undefined}>
// <RandomUnitNew
// bannerData={data}
// isHorizontal={isHorizontal}
// key={"banner" + index}
// spotlightId={"banner" + index}
// handleShelfFocus={_handleShelfFocus}
// onFocus={handleSecondBannerFocus}
// onBlur={handleSecondBannerBlur}
// randomNumber={data.randomIndex}
// />
// </div>
// );
// }
// return (
// <div className={!isHorizontal ? css.imgBox : undefined}>
// {data.shptmDspyTpNm === "Rolling" ? (
// <Rolling
// bannerData={data}
// isHorizontal={isHorizontal}
// key={"banner" + index}
// spotlightId={"banner" + index}
// handleShelfFocus={_handleShelfFocus}
// handleItemFocus={_handleItemFocus}
// />
// ) : data.shptmDspyTpNm === "Random" ? (
// <Random
// bannerData={data}
// isHorizontal={isHorizontal}
// key={"banner" + index}
// spotlightId={"banner" + index}
// handleShelfFocus={_handleShelfFocus}
// handleItemFocus={_handleItemFocus}
// randomNumber={data.randomIndex}
// />
// ) : (
// <SpottableComponent spotlightId={"banner" + index}>
// <CustomImage
// delay={0}
// src={
// isHorizontal
// ? homeTopDisplayInfo.wdthtpImgPath1
// : homeTopDisplayInfo.vtctpImgPath1
// }
// aria-label={
// isHorizontal
// ? homeTopDisplayInfo.wdthtpImgNm1
// : homeTopDisplayInfo.vtctpImgNm1
// }
// />
// </SpottableComponent>
// )}
// </div>
// );
// },
// [
// bannerDataList,
// _handleItemFocus,
// _handleShelfFocus,
// handleSecondBannerFocus,
// handleSecondBannerBlur,
// ],
// );
const renderItem = useCallback(
(index, isHorizontal) => {
const data = bannerDataList?.[index] ?? {};
// 1번 배너에 새로운 포커스/블러 이벤트 핸들러 연결
if (index === 1) {
return (
<div className={!isHorizontal ? css.imgBox : undefined}>
<Random
bannerData={data}
isHorizontal={isHorizontal}
key={"banner" + index}
spotlightId={"banner" + index}
handleShelfFocus={_handleShelfFocus}
handleItemFocus={_handleItemFocus}
randomNumber={data?.randomIndex}
onFocus={handleSecondBannerFocus}
onBlur={handleSecondBannerBlur}
/>
</div>
);
}
return (
<div className={!isHorizontal ? css.imgBox : undefined}>
{data.shptmDspyTpNm === "Rolling" ? (
@@ -437,7 +505,7 @@ export default function HomeBanner({
spotlightId={"banner" + index}
handleShelfFocus={_handleShelfFocus}
handleItemFocus={_handleItemFocus}
randomNumber={data?.randomIndex}
randomNumber={data.randomIndex}
/>
) : (
<SpottableComponent spotlightId={"banner" + index}>
@@ -459,7 +527,7 @@ export default function HomeBanner({
</div>
);
},
[_handleItemFocus, _handleShelfFocus, bannerDataList, handleSecondBannerFocus, handleSecondBannerBlur],
[_handleItemFocus, _handleShelfFocus, bannerDataList],
);
// 1번째 배너(포커스 재생) 및 기타 배너를 위한 렌더링 함수
@@ -471,14 +539,14 @@ export default function HomeBanner({
if (selectTemplate === "DSP00201" && index === 1) {
return (
<div className={!isHorizontal ? css.imgBox : undefined}>
<RandomUnit
<RandomUnitNew
bannerData={data}
isHorizontal={isHorizontal}
key={"banner" + index}
spotlightId={"banner" + index}
handleShelfFocus={_handleShelfFocus}
handleItemFocus={_handleItemFocus}
randomNumber={data?.randomIndex}
randomNumber={data.randomIndex}
/>
</div>
);
@@ -488,7 +556,7 @@ export default function HomeBanner({
if (data.shptmDspyTpNm === "Rolling") {
return (
<div className={!isHorizontal ? css.imgBox : undefined}>
<Rolling
<RollingUnit
bannerData={data}
isHorizontal={isHorizontal}
key={"banner" + index}

18
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
View File

@@ -61,7 +61,7 @@ export default function RandomUnit({
}) {
const dispatch = useDispatch();
const bannerDetailInfos = bannerData?.bannerDetailInfos || [];
const bannerDetailInfos = bannerData && bannerData.bannerDetailInfos ? bannerData.bannerDetailInfos : [];
const shptmTmplCd = useSelector(
(state) => 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;
}

8
com.twin.app.shoptime/src/views/MainView/MainView.jsx
View File

@@ -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);

59
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx
View File

@@ -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 ? (
<TButton
type={TYPES.mypage}
@@ -375,7 +363,8 @@ export default function Reminders({ title, cbScrollTo }) {
<TBody cbScrollTo={cbScrollTo} className={css.tBody}>
<div className={css.remindersContentsWrap}>
{upComingAlertShow?.alertShows &&
{upComingAlertShow &&
upComingAlertShow.alertShows &&
upComingAlertShow.alertShows.length > 0 ? (
<TVirtualGridList
spotlightId={SpotlightIds.MY_PAGE_REMINDRES_BOX}