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-09 15:56:07 +09:00
parent 755f02159f
commit 54f4c4a1dd
8 changed files with 337 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,14 +8,16 @@ import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
// import { finishVideoPreview } from "../../../actions/playActions";
import { getThemeCurationInfo } from "../../actions/homeActions";
import { updatePanel } from "../../actions/panelActions";
import { resetPanels, updatePanel } from "../../actions/panelActions";
import MobileSendPopUp from "../../components/MobileSend/MobileSendPopUp";
import TBody from "../../components/TBody/TBody";
import TPanel from "../../components/TPanel/TPanel";
import useLogService from "../../hooks/useLogService";
import usePrevious from "../../hooks/usePrevious";
import useScrollTo from "../../hooks/useScrollTo";
import { panel_names } from "../../utils/Config";
import { LOG_TP_NO, panel_names } from "../../utils/Config";
import { $L } from "../../utils/helperMethods";
import css from "./HotPicks.module.less";
import TCFI from "./Type/TCFI/TCFI";
@@ -40,10 +42,9 @@ const Container = SpotlightContainerDecorator(
);
export default function HotPicksPanel({ panelInfo }) {
const { sendLogCuration } = useLogService();
const dispatch = useDispatch();
useEffect(() => {
dispatch(getThemeCurationInfo());
}, [dispatch]);
const themeCurationInfoData = useSelector(
(state) => state.home?.themeCurationInfoData?.themeInfos
);
@@ -54,8 +55,8 @@ export default function HotPicksPanel({ panelInfo }) {
panelInfo.currentPage ? panelInfo.currentPage : 0
);
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);
@@ -65,6 +66,10 @@ export default function HotPicksPanel({ panelInfo }) {
const movingPageJob = useRef(new Job((func) => func(), 400));
const wheelJob = useRef(new Job((func) => func(), 400));
useEffect(() => {
dispatch(getThemeCurationInfo());
}, [dispatch]);
useEffect(() => {
let matchData = null;
let lastIndexInReversed = null;
@@ -77,6 +82,7 @@ export default function HotPicksPanel({ panelInfo }) {
item.curationId === panelInfo.curationId &&
item.patnrId === panelInfo.patnrId
);
lastIndexInReversed = themeCurationInfoData
.slice()
.reverse()
@@ -93,11 +99,81 @@ export default function HotPicksPanel({ panelInfo }) {
if (matchData !== null && matchData.length > 0) {
setCurrentPage(lastIndex);
} else {
setCurrentPage(0);
}
}
}
}, [panelInfo, themeCurationInfoData]);
const onItemSpotlightDown = () => {
useEffect(() => {
let props = { logTpNo: LOG_TP_NO.CURATION.HOT_PICKS };
let saveCuration = null;
let savePatnrId = null;
if (themeCurationInfoData) {
const { curationId, curationNm, expsOrd, patncNm, patnrId } =
themeCurationInfoData[currentPage];
if (panelInfo?.linkTpCd) {
//딥링크 탈때
let matchData = themeCurationInfoData.filter(
(item) =>
item.curationId === panelInfo.curationId &&
item.patnrId === panelInfo.patnrId
);
props = {
...props,
linkTpCd: panelInfo.linkTpCd,
curationId: matchData[0].curationId,
patnrId: matchData[0].patnrId,
curationNm: matchData[0].curationNm,
expsOrd: matchData[0].expsOrd,
patncNm: matchData[0].patncNm,
};
saveCuration = panelInfo.curationId;
savePatnrId = panelInfo.patnrId;
} else {
//딥링크 안탈때
props = {
...props,
curationId: curationId,
curationNm: curationNm,
expsOrd: expsOrd,
patncNm: patncNm,
patnrId: patnrId,
};
}
if (!oneLog) {
setOneLog(true);
sendLogCuration(props);
}
if (panelInfo?.linkTpCd) {
dispatch(resetPanels([{ name: panel_names.HOT_PICKS_PANEL }]));
dispatch(
updatePanel({
name: panel_names.HOT_PICKS_PANEL,
panelInfo: {
curationId: saveCuration,
patnrId: savePatnrId,
},
})
);
}
}
}, [
themeCurationInfoData,
currentPage,
panelInfo.curationId,
panelInfo.linkTpCd,
panelInfo.patnrId,
dispatch,
oneLog,
sendLogCuration,
]);
const onItemSpotlightDown = useCallback(() => {
const movingPageJobValue = movingPageJob.current;
if (!movingPage) {
setMovingPage(true);
@@ -107,8 +183,9 @@ export default function HotPicksPanel({ panelInfo }) {
setMovingPage(false);
});
}
};
const onItemSpotlightUp = () => {
}, [movingPage]);
const onItemSpotlightUp = useCallback(() => {
const movingPageJobValue = movingPageJob.current;
if (!movingPage) {
setMovingPage(true);
@@ -118,7 +195,19 @@ export default function HotPicksPanel({ panelInfo }) {
setMovingPage(false);
});
}
};
}, [movingPage]);
const handlePop = useCallback(() => {
setMobilePop(false);
}, []);
const handlePopupOpen = useCallback((patnrId, curationId, evntId) => {
setPopPatnrId(patnrId);
setPopCurationId(curationId);
setPopEvntId(evntId);
setMobilePop(true);
}, []);
const themeCurationType = useCallback(
(data, templateCode, showEffectiveFlag, smsBtnExpsFlag, index) => {
let itemData = [];
@@ -179,27 +268,19 @@ export default function HotPicksPanel({ panelInfo }) {
}
return null;
},
[onItemSpotlightDown, onItemSpotlightUp, currentPage, themeCurationInfoData]
[onItemSpotlightDown, onItemSpotlightUp, currentPage, handlePopupOpen]
);
const handlePop = useCallback(() => {
setMobilePop(false);
}, []);
const handlePopupOpen = useCallback((patnrId, curationId, evntId) => {
setPopPatnrId(patnrId);
setPopCurationId(curationId);
setPopEvntId(evntId);
setMobilePop(true);
}, []);
const { getScrollTo, scrollToRef } = useScrollTo();
const handleNext = useCallback(() => {
setCurrentPage((prev) => prev + 1);
setOneLog(false);
}, []);
const handlePrev = useCallback(() => {
setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
setOneLog(false);
}, []);
useEffect(() => {
@@ -219,20 +300,20 @@ export default function HotPicksPanel({ panelInfo }) {
}
});
}
}, [currentPage]);
}, [currentPage, oneSpot, panelInfo.currentSpot, scrollToRef]);
const [wheelEventOccurred, setWheelEventOccurred] = useState(false);
const handleWheel = (e) => {
const wheelJobValue = wheelJob.current;
const deltaY = e.deltaY;
console.log("###pjh e.deltaY", e.deltaY);
console.log("###pjh wheelEventOccurred", wheelEventOccurred);
if (!wheelEventOccurred) {
if (deltaY > 0 && currentPage < themeCurationInfoData.length - 1) {
if (deltaY > 0 && currentPage < themeCurationInfoData.length - 1) {
if (!wheelEventOccurred) {
setWheelEventOccurred(true);
handleNext();
} else if (deltaY < 0 && currentPage > 0) {
}
} else if (deltaY < 0 && currentPage > 0) {
if (!wheelEventOccurred) {
setWheelEventOccurred(true);
handlePrev();
}
@@ -259,7 +340,7 @@ export default function HotPicksPanel({ panelInfo }) {
})
);
};
}, []);
}, [currentPageRef, dispatch, panelInfo.currentPage]);
useEffect(() => {
const c = Spotlight.getCurrent();
const scrollSetJobValue = scrollSetJob.current;

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

@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useRef } from "react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { useDispatch } from "react-redux";
@@ -7,7 +7,7 @@ import { Job } from "@enact/core/util";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { pushPanel } from "../../../../actions/panelActions";
import { pushPanel, updatePanel } from "../../../../actions/panelActions";
import {
finishVideoPreview,
startVideoPlayer,
@@ -39,9 +39,12 @@ export default function TCFV({
}) {
const dispatch = useDispatch();
const [focused, setFocused] = useState(false);
const playingJob = useRef(new Job((func) => func(), 1000));
const spotName = "hotpicks-data-spot" + orders;
const videoSpotName = spotName + 0;
let typeChk = data && data[0].hotelInfos?.length !== 0 ? "hotel" : "theme";
@@ -56,7 +59,6 @@ export default function TCFV({
panelInfo: {
patnrId: data[0].patnrId,
curationId: data[0].curationId,
type: typeChk,
},
})
@@ -65,20 +67,19 @@ export default function TCFV({
changePop();
}
};
const handleVideoClick = () => {
const handleVideoClick = useCallback(() => {
dispatch(
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
// patnrId: data[0].patnrId,
showId: data[0].showId,
patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
modal: false,
modalContainerId: spotName + 0, //to calc width, height, left, top
modalContainerId: videoSpotName, //to calc width, height, left, top
modalClassName: css.videoModal,
spotlightDisable: false,
})
);
};
}, [data, currentPage, dispatch, videoSpotName]);
const _onSpotlightDown = useCallback(
(ev) => {
if (onSpotlightDown) {
@@ -99,40 +100,68 @@ export default function TCFV({
},
[onSpotlightUp]
);
const modalClassNameChange = useCallback(() => {
if (focused) {
return css.videoModal;
} else {
return "";
}
}, [focused]);
const onFocus = useCallback(() => {
setFocused(true);
}, []);
const onBlur = useCallback(() => {
setFocused(false);
}, []);
useEffect(() => {
const playingJobValue = playingJob.current;
if (currentPage === orders - 1) {
console.log("##tcfv start");
playingJobValue.start(() => {
dispatch(
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
// patnrId: data[0].patnrId,
showId: data[0].showId,
patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
modal: true,
modalContainerId: spotName + 0, //to calc width, height, left, top
modalContainerId: videoSpotName, //to calc width, height, left, top
modalClassName: css.videoModal,
spotlightDisable: true,
})
);
});
} else {
console.log("##tcfv finish");
dispatch(finishVideoPreview());
}
return () => {
playingJobValue.stop();
};
}, [dispatch, currentPage, orders]);
}, [dispatch, orders]);
useEffect(() => {
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
modalClassName: modalClassNameChange(),
},
})
);
}, [focused, dispatch]);
return (
<>
{data &&
data.map(({ bgImgPath, curationNm, tmpltCd, showInfos }, index) => {
data.map(({ bgImgPath, curationNm, tmpltCd, showInfos }) => {
return (
<Container
key={tmpltCd}
key={tmpltCd + curationNm}
className={classNames(className && className)}
>
<SpottableComponentDiv
@@ -141,39 +170,28 @@ export default function TCFV({
onClick={handleItemClick}
onSpotlightDown={_onSpotlightDown}
onSpotlightUp={_onSpotlightUp}
index={index}
>
<img src={bgImgPath} alt={curationNm} />
</SpottableComponentDiv>
<ul className={css.itemList}>
{showInfos &&
showInfos
.slice(0, 1)
.map(
(
{
dfltThumbnailImgPath,
showId,
showNm,
showUrl,
thumbnailUrl,
},
index
) => {
// @@@ 영상 출력 처리
return (
<SpottableComponent
onSpotlightDown={_onSpotlightDown}
onSpotlightUp={_onSpotlightUp}
onClick={handleVideoClick}
className={css.videoBox}
spotlightId={spotName + index}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponent>
);
}
)}
showInfos.slice(0, 1).map(({ showNm, thumbnailUrl }) => {
// @@@ 영상 출력 처리
return (
<SpottableComponent
key={showNm + thumbnailUrl}
onSpotlightDown={_onSpotlightDown}
onSpotlightUp={_onSpotlightUp}
onClick={handleVideoClick}
className={css.videoBox}
spotlightId={videoSpotName}
onFocus={onFocus}
onBlur={onBlur}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponent>
);
})}
</ul>
</Container>
);

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

@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useRef } from "react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { useDispatch } from "react-redux";
@@ -7,7 +7,7 @@ import { Job } from "@enact/core/util";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { pushPanel } from "../../../../actions/panelActions";
import { pushPanel, updatePanel } from "../../../../actions/panelActions";
import {
finishVideoPreview,
startVideoPlayer,
@@ -35,7 +35,10 @@ export default function TCFV_2({
}) {
const dispatch = useDispatch();
const [focused, setFocused] = useState(false);
const playingJob = useRef(new Job((func) => func(), 1000));
const handleItemClick = () => {
dispatch(
pushPanel({
@@ -63,10 +66,8 @@ export default function TCFV_2({
const handleVideoClick = () => {
dispatch(
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
// patnrId: data[0].patnrId,
showId: data[0].showId,
patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
modal: false,
modalContainerId: spotName, //to calc width, height, left, top
@@ -95,6 +96,20 @@ export default function TCFV_2({
},
[onSpotlightUp]
);
const modalClassNameChange = useCallback(() => {
if (focused) {
return css.videoModal;
} else {
return "";
}
}, [focused]);
const onFocus = useCallback(() => {
setFocused(true);
}, []);
const onBlur = useCallback(() => {
setFocused(false);
}, []);
useEffect(() => {
const playingJobValue = playingJob.current;
@@ -102,14 +117,13 @@ export default function TCFV_2({
playingJobValue.start(() => {
dispatch(
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
// patnrId: data[0].patnrId,
showId: data[0].showId,
patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
modal: true,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
spotlightDisable: true,
})
);
});
@@ -120,7 +134,17 @@ export default function TCFV_2({
return () => {
playingJobValue.stop();
};
}, [dispatch, currentPage, orders]);
}, [dispatch, currentPage, orders, data, modalClassNameChange, spotName]);
useEffect(() => {
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
modalClassName: modalClassNameChange(),
},
})
);
}, [focused, dispatch, modalClassNameChange]);
return (
<>
{data &&
@@ -140,35 +164,31 @@ export default function TCFV_2({
</div>
<Container className={css.itemList}>
{showInfos &&
showInfos
.slice(0, 1)
.map(
(
{
dfltThumbnailImgPath,
showId,
showNm,
showUrl,
thumbnailUrl,
},
index
) => {
// @@@ 영상 출력 처리
showInfos.slice(0, 1).map(
({
showId,
showNm,
return (
<SpottableComponent
key={showId}
spotlightId={spotName}
onSpotlightDown={_onSpotlightDown}
onSpotlightUp={_onSpotlightUp}
onClick={handleVideoClick}
className={css.videoBox}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponent>
);
}
)}
thumbnailUrl,
}) => {
// @@@ 영상 출력 처리
return (
<SpottableComponent
key={showId}
spotlightId={spotName}
onSpotlightDown={_onSpotlightDown}
onSpotlightUp={_onSpotlightUp}
onClick={handleVideoClick}
className={css.videoBox}
onFocus={onFocus}
onBlur={onBlur}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponent>
);
}
)}
{productInfos &&
productInfos

10
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less
View File

@@ -18,16 +18,22 @@
> img {
.size(@w:430px, @h:242px);
}
&:focus {
&::after {
.focused(@borderRadius: 0px);
z-index: 10;
}
}
}
}
}
.videoModal {
&::after {
.focused(@boxShadow:22px, @borderRadius: 0px);
.focused(@boxShadow:0px, @borderRadius: 0px);
}
> div {
border-radius: 12px;
overflow: hidden;
}
}

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

@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useRef } from "react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { useDispatch } from "react-redux";
@@ -7,7 +7,7 @@ import { Job } from "@enact/core/util";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { pushPanel } from "../../../../actions/panelActions";
import { pushPanel, updatePanel } from "../../../../actions/panelActions";
import {
finishVideoPreview,
startVideoPlayer,
@@ -44,6 +44,7 @@ export default function TCFV_3({
}) {
const dispatch = useDispatch();
const playingJob = useRef(new Job((func) => func(), 1000));
const [focused, setFocused] = useState(false);
const handleItemClick = () => {
dispatch(
pushPanel({
@@ -103,7 +104,20 @@ export default function TCFV_3({
},
[onSpotlightUp]
);
const modalClassNameChange = useCallback(() => {
if (focused) {
return css.videoModal;
} else {
return "";
}
}, [focused]);
const onFocus = useCallback(() => {
setFocused(true);
}, []);
const onBlur = useCallback(() => {
setFocused(false);
}, []);
useEffect(() => {
const playingJobValue = playingJob.current;
@@ -119,6 +133,7 @@ export default function TCFV_3({
modal: true,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
spotlightDisable: true,
})
);
});
@@ -130,6 +145,16 @@ export default function TCFV_3({
playingJobValue.stop();
};
}, [dispatch, currentPage, orders]);
useEffect(() => {
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
modalClassName: modalClassNameChange(),
},
})
);
}, [focused]);
return (
<>
{data &&
@@ -168,6 +193,8 @@ export default function TCFV_3({
onSpotlightUp={_onSpotlightUp}
onClick={handleVideoClick}
className={css.videoBox}
onFocus={onFocus}
onBlur={onBlur}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponentDiv>

7
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less
View File

@@ -51,7 +51,8 @@
&:focus {
&::after {
.focused();
.focused(@borderRadius: 0px);
z-index: 10;
}
}
}
@@ -59,10 +60,10 @@
.videoModal {
&::after {
.focused(@boxShadow:22px, @borderRadius: 12px);
.focused(@boxShadow:0px, @borderRadius: 0px);
}
> div {
border-radius: 12px;
overflow: hidden;
}
}

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

@@ -1,19 +1,13 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { Job } from "@enact/core/util";
import Panels from "@enact/sandstone/Panels";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import {
popPanel,
pushPanel,
updatePanel,
} from "../../../../actions/panelActions";
import { pushPanel, updatePanel } from "../../../../actions/panelActions";
import {
finishVideoPreview,
startVideoPlayer,
@@ -42,12 +36,13 @@ export default function TCFV_4({
}) {
const dispatch = useDispatch();
const [focused, setFocused] = useState(false);
const playingJob = useRef(new Job((func) => func(), 1000));
const spotName = "hotpicks-data-spot" + orders;
const handleItemClick = () => {
dispatch(finishVideoPreview());
dispatch(
pushPanel({
name: panel_names.DETAIL_PANEL,
@@ -61,7 +56,6 @@ export default function TCFV_4({
};
const handleHotelClick = () => {
dispatch(finishVideoPreview());
dispatch(
pushPanel({
name: panel_names.DETAIL_PANEL,
@@ -77,17 +71,16 @@ export default function TCFV_4({
const handleVideoClick = useCallback(() => {
dispatch(
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
//patnrId: data[0].patnrId,
showId: data[0].showId,
patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
modal: false,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
spotlightDisable: false,
})
);
}, [data, currentPage]);
}, [data, currentPage, dispatch, spotName]);
const _onSpotlightDown = useCallback(
(ev) => {
@@ -110,34 +103,61 @@ export default function TCFV_4({
},
[onSpotlightUp]
);
const modalClassNameChange = useCallback(() => {
if (focused) {
return css.videoModal;
} else {
return "";
}
}, [focused]);
const onFocus = useCallback(() => {
setFocused(true);
}, []);
const onBlur = useCallback(() => {
setFocused(false);
}, []);
useEffect(() => {
const playingJobValue = playingJob.current;
if (currentPage === orders - 1) {
console.log("##tcfv-4 start");
playingJobValue.start(() => {
dispatch(
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
// patnrId: data[0].patnrId,
showId: data[0].showId,
patnrId: data[0].patnrId,
// showId: "6626fa561491efdc66430550",
// patnrId: "2",
shptmBanrTpNm: "VOD",
modal: true,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
spotlightDisable: true,
})
),
Spotlight.focus("videoPlayer");
);
});
} else {
console.log("##tcfv-4 finish");
dispatch(finishVideoPreview());
}
return () => {
playingJobValue.stop();
};
}, [dispatch, currentPage, orders]);
}, [dispatch, orders]);
useEffect(() => {
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
modalClassName: modalClassNameChange(),
},
})
);
}, [focused, dispatch]);
return (
<>
@@ -160,32 +180,23 @@ export default function TCFV_4({
{showInfos &&
showInfos
.slice(0, 1)
.map(
(
{
dfltThumbnailImgPath,
showId,
showNm,
showUrl,
thumbnailUrl,
},
index
) => {
// @@@ 영상 출력 처리
return (
<SpottableComponent
key={showId + index}
spotlightId={spotName}
onSpotlightDown={_onSpotlightDown}
onSpotlightUp={_onSpotlightUp}
onClick={handleVideoClick}
className={css.videoBox}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponent>
);
}
)}
.map(({ showId, showNm, thumbnailUrl }, index) => {
// @@@ 영상 출력 처리
return (
<SpottableComponent
key={showId + index}
spotlightId={spotName}
onSpotlightDown={_onSpotlightDown}
onSpotlightUp={_onSpotlightUp}
onClick={handleVideoClick}
className={css.videoBox}
onFocus={onFocus}
onBlur={onBlur}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponent>
);
})}
{productInfos &&
productInfos
.slice(0, 4)

8
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.module.less
View File

@@ -20,9 +20,11 @@
> img {
.size(@w:430px, @h:242px);
}
&::after {
.focused(@borderRadius: 0px);
z-index: 10;
&:focus {
&::after {
.focused(@borderRadius: 0px);
z-index: 10;
}
}
}
}