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

[HotPicksPanel, ImagePanel] IF-LGSP-LOG-003 (Curation View), 시나리오 변경에 따른 수정

Browse Source
This commit is contained in:
younghoon100.park
2024-06-24 13:26:36 +09:00
parent aaef4b0234
commit 3138923e5d
7 changed files with 84 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
com.twin.app.shoptime/src/actions/logActions.js
View File

@@ -18,11 +18,12 @@ export const getUrlByLogTpNo = (logTpNo) => {
case LOG_TP_NO.VOD.HOME_VOD:
case LOG_TP_NO.VOD.ITEM_DETAIL_VOD:
case LOG_TP_NO.VOD.FULL_MEDIA:
case LOG_TP_NO.VOD.ITEM_DETAIL_MEDIA: // no cases
case LOG_TP_NO.VOD.ITEM_DETAIL_MEDIA:
return URLS.LOG_VOD;
// IF-LGSP-LOG-003 / Curations View 이력
case LOG_TP_NO.CURATION.HOT_PICKS:
case LOG_TP_NO.CURATION.SHOWROOM:
case LOG_TP_NO.CURATION.ON_SALE:
case LOG_TP_NO.CURATION.HOME:
case LOG_TP_NO.CURATION.CATEGORY:

6
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
View File

@@ -818,8 +818,9 @@ export default function FeaturedBrandsPanel({
brandLayoutInfo,
TEMPLATE_CODE_CONF.SHOWROOM
)}
spotlightId={TEMPLATE_CODE_CONF.SHOWROOM}
selectedPatnrId={selectedPatnrId}
selectedPatncNm={selectedPatncNm}
spotlightId={TEMPLATE_CODE_CONF.SHOWROOM}
/>
)}
</div>
@@ -828,10 +829,11 @@ export default function FeaturedBrandsPanel({
{displayTopButton && (
<TButton
className={css.tButton}
data-wheel-point
onClick={handleTopButtonClick}
size={null}
spotlightId="brand-top-button"
type={TYPES.topButton}
data-wheel-point
/>
)}
</TVerticalPagenator>

4
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Showroom/Showroom.jsx
View File

@@ -24,8 +24,9 @@ export default memo(function Showroom({
brandShowroomInfo,
handleItemFocus,
order,
spotlightId,
selectedPatnrId,
selectedPatncNm,
spotlightId,
}) {
const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
@@ -78,6 +79,7 @@ export default memo(function Showroom({
handleItemFocus={_handleItemFocus}
key={"room-theme-infos-" + contentsIndex}
contentsIndex={contentsIndex}
selectedPatncNm={selectedPatncNm}
selectedPatnrId={selectedPatnrId}
selectedRoomId={selectedRoomId}
selectedRoomThemeInfoItem={selectedRoomThemeInfoItem}

22
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Showroom/ShowroomContents/ShowroomContents.jsx
View File

@@ -25,12 +25,15 @@ const Container = SpotlightContainerDecorator(
export default memo(function ShowroomContents({
handleItemFocus,
contentsIndex,
selectedPatncNm,
selectedPatnrId,
selectedRoomId,
selectedRoomThemeInfoItem,
}) {
const dispatch = useDispatch();
const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
const cursorVisible = useSelector(
(state) => state.common.appStatus.cursorVisible
);
@@ -99,14 +102,26 @@ export default memo(function ShowroomContents({
pushPanel({
name: panel_names.IMAGE_PANEL,
panelInfo: {
patncNm: selectedPatncNm,
patnrId: selectedPatnrId ?? panelInfo?.patnrId,
roomId: selectedRoomId,
themeId,
themeExpsOrd,
themeId,
themeNm,
y: 0,
},
})
);
}, [dispatch, selectedRoomId, themeExpsOrd, themeId]);
}, [
dispatch,
panelInfo?.patnrId,
selectedPatncNm,
selectedPatnrId,
selectedRoomId,
themeExpsOrd,
themeId,
themeNm,
]);
const handleFocus = useCallback(() => {
if (handleItemFocus) {
@@ -137,11 +152,12 @@ export default memo(function ShowroomContents({
<ShowroomProductList
handleItemFocus={handleItemFocus}
roomThemeProducts={roomThemeProducts}
selectedPatncNm={selectedPatncNm}
selectedPatnrId={selectedPatnrId}
selectedRoomId={selectedRoomId}
themeExpsOrd={themeExpsOrd}
themeId={themeId}
// themeNm={themeNm}
themeNm={themeNm}
/>
</div>
</Container>

33
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Showroom/ShowroomContents/ShowroomProductList/ShowroomProductList.jsx
View File

@@ -21,11 +21,12 @@ import css from "./ShowroomProductList.module.less";
export default function ShowroomProductList({
handleItemFocus,
roomThemeProducts,
selectedPatncNm,
selectedPatnrId,
selectedRoomId,
themeExpsOrd,
themeId,
// themeNm,
themeNm,
}) {
const { getScrollTo, scrollLeft } = useScrollTo();
@@ -91,25 +92,39 @@ export default function ShowroomProductList({
);
}
let y =
index < 2
? 0
: index === 2
? scaleH(208)
: scaleH(index * 248 - 248 - 40);
dispatch(
pushPanel({
name: panel_names.IMAGE_PANEL,
panelInfo: {
patncNm: selectedPatncNm,
patnrId: selectedPatnrId ?? panelInfo?.patnrId,
roomId: selectedRoomId,
targetId: "spotlightId-" + removeDotAndColon(prdtId),
themeId,
themeExpsOrd,
y:
index < 2
? 0
: index === 2
? scaleH(208)
: scaleH(index * 248 - 248 - 40),
themeId,
themeNm,
y,
},
})
);
},
[dispatch, selectedRoomId, themeExpsOrd, themeId]
[
dispatch,
panelInfo?.patnrId,
selectedPatncNm,
selectedPatnrId,
selectedRoomId,
themeExpsOrd,
themeId,
themeNm,
]
);
const handleFocus = useCallback(() => {

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

@@ -313,15 +313,15 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
};
}
if (!oneLog) {
if (expsOrdRef.current !== expsOrd) {
timer = setTimeout(() => {
setOneLog(true);
sendLogCuration(props);
expsOrdRef.current = expsOrd;
}, 1000);
// if (expsOrdRef.current !== expsOrd) {
timer = setTimeout(() => {
setOneLog(true);
sendLogCuration(props);
// expsOrdRef.current = expsOrd;
}, 3000);
return () => clearTimeout(timer);
}
return () => clearTimeout(timer);
// }
}
if (panelInfo?.linkTpCd) {
dispatch(resetPanels([{ name: panel_names.HOT_PICKS_PANEL }]));

29
com.twin.app.shoptime/src/views/ImagePanel/ImagePanel.jsx
View File

@@ -11,7 +11,7 @@ import { updatePanel } from "../../actions/panelActions";
import CustomImage from "../../components/CustomImage/CustomImage";
import TPanel from "../../components/TPanel/TPanel";
import useLogService from "../../hooks/useLogService";
import { panel_names } from "../../utils/Config";
import { LOG_TP_NO, panel_names } from "../../utils/Config";
import ImageOverlayContents from "./ImageOverlayContents/ImageOverlayContents";
import css from "./ImagePanel.module.less";
import ImageSideContents from "./ImageSideContents/ImageSideContents";
@@ -39,13 +39,11 @@ const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
}
};
export default function ImagePanel({ spotlightId, ...rest }) {
const { sendLogGNB } = useLogService();
export default function ImagePanel({ panelInfo, spotlightId, ...rest }) {
const { sendLogCuration, sendLogGNB } = useLogService();
const dispatch = useDispatch();
const panelInfo = useSelector((state) => state.panels.panels[1]?.panelInfo);
const brandShowroomInfo = useSelector(
(state) => state.brand.brandShowroomData.data.brandShowroomInfo
);
@@ -60,6 +58,7 @@ export default function ImagePanel({ spotlightId, ...rest }) {
const [sideContentsVisible, setSideContentsVisible] = useState(true);
const initialFocusTimeoutJob = useRef(new Job((func) => func(), 600));
const themeViewTimer = useRef(null);
useEffect(() => {
let sideCotnentsTimer;
@@ -102,6 +101,26 @@ export default function ImagePanel({ spotlightId, ...rest }) {
};
}, [sideContentsVisible]);
useEffect(() => {
if (panelInfo) {
const params = {
curationId: panelInfo?.themeId,
curationNm: panelInfo?.themeNm,
expsOrd: `${panelInfo?.themeExpsOrd}`,
logTpNo: LOG_TP_NO.CURATION.SHOWROOM,
linkTpCd: panelInfo?.linkTpCd,
patncNm: panelInfo?.patncNm,
patnrId: panelInfo?.patnrId,
};
themeViewTimer.current = setTimeout(() => {
sendLogCuration(params);
}, 3000);
return () => clearTimeout(themeViewTimer.current);
}
}, [panelInfo, sendLogCuration]);
useEffect(() => {
if (panelInfo) {
// console.log(