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

핫픽스 스팟및 커스텀이미지 변경사항

Browse Source
This commit is contained in:
junghoon86.park
2024-05-29 18:36:26 +09:00
parent 94373f3a6d
commit dc0ca45239
10 changed files with 110 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
View File

@@ -54,38 +54,59 @@ const Container = SpotlightContainerDecorator(
export default function HotPicksPanel({ panelInfo }) {
const { sendLogCuration, sendLogGNB, sendLogShopByMobile } = useLogService();
const dispatch = useDispatch();
const scrollJob = useRef(new Job((func) => func(), 100));
const spotJob = useRef(new Job((func) => func(), 200));
const { cursorVisible } = useSelector((state) => state.common.appStatus);
const themeCurationInfoData = useSelector(
(state) => state.home?.themeCurationInfoData?.themeInfos
);
const themeCurationInfoDataRef = usePrevious(themeCurationInfoData);
const { popupVisible, activePopup } = useSelector(
(state) => state.common.popup
);
const userNumber = useSelector(
(state) => state.common?.appStatus.loginUserData.userNumber
);
const [movingPage, setMovingPage] = useState(false);
const [currentPage, setCurrentPage] = useState(
panelInfo.currentPage ? panelInfo.currentPage : 0
);
const smsRetCode = useSelector((state) => state.appData.sendSms?.retCode);
const currentPageRef = usePrevious(currentPage);
const [oneLog, setOneLog] = useState(false);
const [oneSpot, setOneSpot] = useState(false);
const [popPatnrId, setPopPatnrId] = useState(null);
const [popCurationId, setPopCurationId] = useState(null);
const [popEvntId, setPopEvntId] = useState(null);
const [popEventInfo, setPopEventInfo] = useState(null);
const [isCurationEvnt, setIsCurationEvnt] = useState(null);
const smsRetCode = useSelector((state) => state.appData.sendSms?.retCode);
const [components, setComponents] = useState([]);
const spotYoffsetRef = useRef(0);
let spotlightId = null;
const [components, setComponents] = useState([]);
const _onScrollStop = (e) => {
spotYoffsetRef.current = e.scrollTop;
const targetY = currentPageRef.current * window.innerHeight;
if (targetY !== e.scrollTop) {
scrollJob.current.startAfter(0, () => {
scrollToRef.current({
position: { y: currentPage * window.innerHeight },
animate: false,
});
});
}
};
const logParamsRef = useRef(null);
@@ -100,6 +121,7 @@ export default function HotPicksPanel({ panelInfo }) {
) => {
let itemData = [];
itemData.push(JSON.parse(JSON.stringify(data)));
let Component = null;
switch (templateCode) {
@@ -275,23 +297,21 @@ export default function HotPicksPanel({ panelInfo }) {
sendLogCuration,
]);
const onItemSpotlightDown = useCallback(() => {
if (!movingPage) {
setMovingPage(true);
const onItemSpotlightDown = useCallback((ev) => {
ev.stopPropagation();
ev.preventDefault();
if (currentPageRef.current < themeCurationInfoDataRef.current?.length - 1) {
Spotlight.focus("hotpicks-next-arrow");
setMovingPage(false);
}
}, [movingPage]);
const onItemSpotlightUp = useCallback(() => {
if (!movingPage) {
setMovingPage(true);
}, []);
const onItemSpotlightUp = useCallback((ev) => {
ev.stopPropagation();
ev.preventDefault();
if (currentPageRef.current > 0) {
Spotlight.focus("hotpicks-prev-arrow");
setMovingPage(false);
}
}, [movingPage]);
}, []);
const handlePop = useCallback(() => {
dispatch(setHidePopup());
@@ -375,20 +395,35 @@ export default function HotPicksPanel({ panelInfo }) {
useEffect(() => {
const scrollJobValue = scrollJob.current;
const spotJobValue = spotJob.current;
if (typeof window === "object" && scrollToRef.current) {
spotJobValue.stop();
scrollJobValue.start(() => {
scrollToRef.current({
position: { y: currentPage * window.innerHeight },
animate: false,
});
if (panelInfo.currentSpot && !oneSpot) {
Spotlight.focus(panelInfo.currentSpot);
setOneSpot(true);
if (panelInfo?.currentSpot) {
spotJobValue.start(() => {
Spotlight.focus(panelInfo?.currentSpot);
});
dispatch(
updatePanel({
name: panel_names.HOT_PICKS_PANEL,
panelInfo: {
currentSpot: "",
},
})
);
} else {
spotJobValue.start(() => {
Spotlight.focus("hotpicks-data-spot" + (currentPage * 1 + 1));
});
}
});
}
}, [currentPage, oneSpot, panelInfo.currentSpot, scrollToRef]);
}, [currentPage]);
const handleWheel = (e) => {
let deltaY = e.deltaY;
@@ -420,30 +455,7 @@ export default function HotPicksPanel({ panelInfo }) {
})
);
};
}, [currentPageRef, dispatch, panelInfo.currentPage]);
useEffect(() => {
const spotJobValue = spotJob.current;
if (panelInfo?.currentSpot) {
spotJobValue.start(() => {
Spotlight.focus(panelInfo?.currentSpot);
});
dispatch(
updatePanel({
name: panel_names.HOT_PICKS_PANEL,
panelInfo: {
currentSpot: "",
},
})
);
} else {
spotJobValue.start(() => {
Spotlight.focus("hotpicks-data-spot" + (currentPage * 1 + 1));
});
}
return () => {
spotJobValue.stop();
};
}, [currentPage]);
}, [dispatch, panelInfo.currentPage]);
useEffect(() => {
if (!popupVisible) {
@@ -538,20 +550,14 @@ export default function HotPicksPanel({ panelInfo }) {
}, [smsRetCode]);
const onSpotlightUp = (ev) => {
if (Spotlight.focus()) {
ev.stopPropagation();
ev.preventDefault();
handlePrev();
}
ev.stopPropagation();
ev.preventDefault();
handlePrev();
};
const onSpotlightDown = (ev) => {
if (Spotlight.focus()) {
ev.stopPropagation();
ev.preventDefault();
handleNext();
}
ev.stopPropagation();
ev.preventDefault();
handleNext();
};
return (
@@ -571,6 +577,7 @@ export default function HotPicksPanel({ panelInfo }) {
className={css.hotPicks}
cbScrollTo={getScrollTo}
onWheel={handleWheel}
onScrollStop={_onScrollStop}
scrollOptions={{ noScrollByWheel: true }}
>
{components.map((component, index) => (

2
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx
View File

@@ -112,6 +112,8 @@ export default function TCFI({
onClick={handleItemClick}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={bgImgPath}
fallbackSrc={defaultImageItem}
alt={curationNm}

6
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.jsx
View File

@@ -97,6 +97,8 @@ export default function TCFI_2({
<div key={tmpltCd} className={classNames(className && className)}>
<div className={css.fullImg}>
<CustomImage
delay={0}
animationSpeed="fast"
src={bgImgPath}
fallbackSrc={defaultImageItem}
alt={curationNm}
@@ -121,6 +123,8 @@ export default function TCFI_2({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={imgUrl}
fallbackSrc={defaultImageItem}
alt={prdtNm}
@@ -146,6 +150,8 @@ export default function TCFI_2({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={hotelImgUrl}
fallbackSrc={defaultImageItem}
alt={hotelNm}

6
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.jsx
View File

@@ -95,6 +95,8 @@ export default function TCFI_3({
<div key={tmpltCd} className={classNames(className && className)}>
<div className={css.fullImg}>
<CustomImage
delay={0}
animationSpeed="fast"
src={bgImgPath}
fallbackSrc={defaultImageItem}
alt={curationNm}
@@ -119,6 +121,8 @@ export default function TCFI_3({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={imgUrl}
fallbackSrc={defaultImageItem}
alt={prdtNm}
@@ -144,6 +148,8 @@ export default function TCFI_3({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={hotelImgUrl}
fallbackSrc={defaultImageItem}
alt={hotelNm}

6
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.jsx
View File

@@ -97,6 +97,8 @@ export default function TCFI_4({
<div key={tmpltCd} className={classNames(className && className)}>
<div className={css.fullImg}>
<CustomImage
delay={0}
animationSpeed="fast"
src={bgImgPath}
fallbackSrc={defaultImageItem}
alt={curationNm}
@@ -133,6 +135,8 @@ export default function TCFI_4({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={imgUrl}
fallbackSrc={defaultImageItem}
alt={prdtNm}
@@ -170,6 +174,8 @@ export default function TCFI_4({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={hotelImgUrl}
fallbackSrc={defaultImageItem}
alt={hotelNm}

4
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx
View File

@@ -186,6 +186,8 @@ export default function TCFV({
onSpotlightUp={_onSpotlightUp}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={bgImgPath}
fallbackSrc={defaultImageItem}
alt={curationNm}
@@ -207,6 +209,8 @@ export default function TCFV({
onBlur={onVideoBlur}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={thumbnailUrl}
fallbackSrc={defaultImageItem}
alt={showNm}

7
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx
View File

@@ -185,6 +185,7 @@ export default function TCFV_2({
<div key={tmpltCd} className={classNames(className && className)}>
<div className={css.fullImg}>
<CustomImage
delay={0}
src={bgImgPath}
fallbackSrc={defaultImageItem}
alt={curationNm}
@@ -213,6 +214,8 @@ export default function TCFV_2({
onBlur={onVideoBlur}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={thumbnailUrl}
fallbackSrc={defaultImageItem}
alt={showNm}
@@ -238,6 +241,8 @@ export default function TCFV_2({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={imgUrl}
fallbackSrc={defaultImageItem}
alt={prdtNm}
@@ -261,6 +266,8 @@ export default function TCFV_2({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={hotelImgUrl}
fallbackSrc={defaultImageItem}
alt={hotelNm}

6
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx
View File

@@ -199,6 +199,8 @@ export default function TCFV_3({
onBlur={onVideoBlur}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={thumbnailUrl}
fallbackSrc={defaultImageItem}
alt={showNm}
@@ -234,6 +236,8 @@ export default function TCFV_3({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={imgUrl}
fallbackSrc={defaultImageItem}
alt={prdtNm}
@@ -271,6 +275,8 @@ export default function TCFV_3({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={hotelImgUrl}
fallbackSrc={defaultImageItem}
alt={hotelNm}

7
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx
View File

@@ -189,6 +189,7 @@ export default function TCFV_4({
<div className={css.fullImg}>
<CustomImage
src={bgImgPath}
animationSpeed="fast"
fallbackSrc={defaultImageItem}
alt={curationNm}
/>
@@ -211,6 +212,8 @@ export default function TCFV_4({
onBlur={onVideoBlur}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={thumbnailUrl}
fallbackSrc={defaultImageItem}
alt={showNm}
@@ -234,6 +237,8 @@ export default function TCFV_4({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={imgUrl}
fallbackSrc={defaultImageItem}
alt={prdtNm}
@@ -258,6 +263,8 @@ export default function TCFV_4({
index={index}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={hotelImgUrl}
fallbackSrc={defaultImageItem}
alt={hotelNm}

2
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx
View File

@@ -109,6 +109,8 @@ export default function TCHH({
index={idx}
>
<CustomImage
delay={0}
animationSpeed="fast"
src={bgImgPath}
fallbackSrc={defaultImageItem}
alt={curationNm}