From 4fa731f44efae4b55ff87d3e0e17de499b649058 Mon Sep 17 00:00:00 2001 From: "younghoon100.park" Date: Mon, 20 May 2024 14:59:23 +0900 Subject: [PATCH] =?UTF-8?q?[OnSalePanel]=20Log,=20IF-LGSP-LOG-003=20/=20Cu?= =?UTF-8?q?ration=20View=20=EC=9D=B4=EB=A0=A5=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 변경 된 LOG_MENU 반영 2. 최초 진입시 반영 --- .../src/App/deepLinkHandler.js | 2 +- .../HomeOnSaleItem/HomeOnSaleItem.jsx | 1 + .../views/OnSalePanel/OnSaleNav/OnSaleNav.jsx | 2 + .../OnSaleNav/OnSaleNavItem/OnSaleNavItem.jsx | 27 +---- .../src/views/OnSalePanel/OnSalePanel.jsx | 109 ++++++++++++++---- 5 files changed, 97 insertions(+), 44 deletions(-) diff --git a/com.twin.app.shoptime/src/App/deepLinkHandler.js b/com.twin.app.shoptime/src/App/deepLinkHandler.js index baefd6d4..c65de4b1 100644 --- a/com.twin.app.shoptime/src/App/deepLinkHandler.js +++ b/com.twin.app.shoptime/src/App/deepLinkHandler.js @@ -147,7 +147,7 @@ export const handleDeepLink = (contentTarget) => (dispatch, getState) => { panelName = panel_names.ON_SALE_PANEL; panelInfo = { lgCatCd: lgCatCd, - // lgCatNm: lgCatNm, + lgCatNm: lgCatNm, }; break; case "BS": diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.jsx index 0d4ad228..6623f245 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.jsx @@ -28,6 +28,7 @@ export default function HomeOnSaleItem({ homeOnSaleInfos, itemData, ...rest }) { name: panel_names.ON_SALE_PANEL, panelInfo: { lgCatCd: itemData.lgCatCd, + lgCatNm: itemData.catNm, prdtId: itemData.prdtId, }, }) diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNav.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNav.jsx index 44e51654..f8795eef 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNav.jsx +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNav.jsx @@ -20,6 +20,7 @@ export default function OnSaleNav({ scrollTopBody, selectedLgCatCd, setSelectedLgCatCd, + setSelectedLgCatNm, setFirstFocusableTarget, }) { const { getScrollTo, scrollLeft } = useScrollTo(); @@ -83,6 +84,7 @@ export default function OnSaleNav({ selectedLgCatCd={selectedLgCatCd} setFirstFocusableTarget={setFirstFocusableTarget} setSelectedLgCatCd={setSelectedLgCatCd} + setSelectedLgCatNm={setSelectedLgCatNm} /> ))} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.jsx index ecb5a7b6..0cd64a30 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.jsx +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.jsx @@ -6,11 +6,10 @@ import { useDispatch, useSelector } from "react-redux"; import Spottable from "@enact/spotlight/Spottable"; import { setContainerLastFocusedElement } from "@enact/spotlight/src/container"; -import { updatePanel } from "../../../../actions/panelActions"; -import { LOG_TP_NO, panel_names } from "../../../../utils/Config"; +import { resetPanels } from "../../../../actions/panelActions"; +import { panel_names } from "../../../../utils/Config"; import { SpotlightIds } from "../../../../utils/SpotlightIds"; import css from "./OnSaleNavItem.module.less"; -import useLogService from "../../../../hooks/useLogService"; const SpottableComponent = Spottable("li"); @@ -21,10 +20,9 @@ export default memo(function OnSaleNavItem({ selectedLgCatCd, setFirstFocusableTarget, setSelectedLgCatCd, + setSelectedLgCatNm, ...rest }) { - const { sendLogCuration } = useLogService(); - const dispatch = useDispatch(); const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo); @@ -36,35 +34,22 @@ export default memo(function OnSaleNavItem({ return scrollTopBody(); } - sendLogCuration({ - expsOrd: itemIndex.toString(), - lgCatCd, - lgCatNm, - logTpNo: LOG_TP_NO.CURATION.ON_SALE, - }); - - dispatch( - updatePanel({ - name: panel_names.ON_SALE_PANEL, - panelInfo: { ...panelInfo, exprOrd: null }, - }) - ); + dispatch(resetPanels([{ name: panel_names.ON_SALE_PANEL }])); setContainerLastFocusedElement(null, [SpotlightIds.TBODY]); setSelectedLgCatCd(lgCatCd); + setSelectedLgCatNm(lgCatNm); setFirstFocusableTarget(); scrollTopBody(); }, [ dispatch, - itemIndex, lgCatCd, lgCatNm, - panelInfo, scrollTopBody, - sendLogCuration, selectedLgCatCd, setFirstFocusableTarget, setSelectedLgCatCd, + setSelectedLgCatNm, ]); return ( diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx index 072b060f..53063f10 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx @@ -12,12 +12,20 @@ import TButton, { TYPES } from "../../components/TButton/TButton"; import { removeDotAndColon } from "../../components/TItemCard/TItemCard"; import TPanel from "../../components/TPanel/TPanel"; import useScrollTo from "../../hooks/useScrollTo"; -import { panel_names } from "../../utils/Config"; +import { LOG_TP_NO, panel_names } from "../../utils/Config"; import OnSaleContents from "./OnSaleContents/OnSaleContents"; import OnSaleNav from "./OnSaleNav/OnSaleNav"; import css from "./OnSalePanel.module.less"; +import useLogService from "../../hooks/useLogService"; + +const getExpsOrdByLgCatCd = (array, value) => { + const expsOrd = array.findIndex(({ lgCatCd }) => value === lgCatCd) + 1; + return expsOrd.toString(); +}; export default function OnSalePanel() { + const { sendLogCuration } = useLogService(); + const { getScrollTo: getScrollToBody, scrollTop: scrollTopBody } = useScrollTo(); @@ -46,14 +54,15 @@ export default function OnSalePanel() { useState(false); const [isTopButtonClicked, setIsTopButtonClicked] = useState(false); const [selectedLgCatCd, setSelectedLgCatCd] = useState(); + const [selectedLgCatNm, setSelectedLgCatNm] = useState(); const [spotlightDisabled, setSpotlightDisabled] = useState(true); const firstFocusableItemTimeoutRef = useRef(); const initialFocusTimeoutRef = useRef(); const hasPanelInfo = Object.keys(panelInfo).length > 0; - const previousPanelIsHome = Object.keys(panelInfo).length === 2; - const previousPanelIsDetail = Object.keys(panelInfo).length >= 5; + const previousPanelIsHome = Object.keys(panelInfo).length === 3; + const previousPanelIsDetail = Object.keys(panelInfo).length > 4; // const isLoading = onSaleDataStatus !== "fulfilled"; @@ -103,7 +112,7 @@ export default function OnSalePanel() { // ); dispatch(getOnSaleInfo(props)); - dispatch(copyCategoryInfos(categoryInfos)); + // dispatch(copyCategoryInfos(categoryInfos)); setIsInitialRendered(false); } }, [ @@ -132,10 +141,17 @@ export default function OnSalePanel() { // "background: blue; color: white" // ); + dispatch(copyCategoryInfos(categoryInfos)); setCategories(categoryInfos); } } - }, [categories, categoryInfos, copiedCategoryInfos, previousPanelIsDetail]); + }, [ + categories, + categoryInfos, + copiedCategoryInfos, + dispatch, + previousPanelIsDetail, + ]); useEffect(() => { if (selectedLgCatCd) { @@ -167,25 +183,27 @@ export default function OnSalePanel() { if (isReadyForInitialFocusTarget && !isInitialFocusOccurred) { let targetId; - if (hasPanelInfo) { - if (previousPanelIsDetail) { - targetId = panelInfo?.targetId; - } - - if (previousPanelIsHome) { - targetId = panelInfo?.linkTpCd - ? "spotlightId-" + panelInfo?.lgCatCd - : "spotlightId-" + panelInfo?.prdtId; - } - - if (panelInfo?.y) { - const { y } = panelInfo; - scrollTopBody({ y, animate: false }); - } - } else { - if (categories) { + if (categories) { + if (!hasPanelInfo) { targetId = "spotlightId-" + categories[0]?.lgCatCd; } + // + else { + if (previousPanelIsDetail) { + targetId = panelInfo?.targetId; + } + + if (previousPanelIsHome) { + targetId = panelInfo?.linkTpCd + ? "spotlightId-" + panelInfo?.lgCatCd + : "spotlightId-" + panelInfo?.prdtId; + } + + if (panelInfo?.y) { + const { y } = panelInfo; + scrollTopBody({ y, animate: false }); + } + } } setSpotlightDisabled(false); @@ -223,6 +241,52 @@ export default function OnSalePanel() { scrollTopBody, ]); + useEffect(() => { + if (categories && isInitialFocusOccurred && !previousPanelIsDetail) { + let params = { logTpNo: LOG_TP_NO.CURATION.ON_SALE }; + + if (!selectedLgCatCd) { + if (!hasPanelInfo) { + params = { + ...params, + expsOrd: getExpsOrdByLgCatCd(categories, categories[0]?.lgCatCd), + lgCatCd: categories[0]?.lgCatCd, + lgCatNm: categories[0]?.lgCatNm, + }; + } + + if (previousPanelIsHome) { + params = { + ...params, + expsOrd: getExpsOrdByLgCatCd(categories, panelInfo?.lgCatCd), + lgCatCd: panelInfo?.lgCatCd, + lgCatNm: panelInfo?.lgCatNm, + }; + } + } else { + params = { + ...params, + expsOrd: getExpsOrdByLgCatCd(categories, selectedLgCatCd), + lgCatCd: selectedLgCatCd, + lgCatNm: selectedLgCatNm, + }; + } + + sendLogCuration(params); + } + }, [ + categories, + hasPanelInfo, + isInitialFocusOccurred, + panelInfo?.lgCatCd, + panelInfo?.lgCatNm, + previousPanelIsHome, + previousPanelIsDetail, + selectedLgCatCd, + selectedLgCatNm, + sendLogCuration, + ]); + useEffect(() => { return () => { const lastFocusedTarget = Spotlight.getCurrent(); @@ -275,6 +339,7 @@ export default function OnSalePanel() { selectedLgCatCd={selectedLgCatCd} setFirstFocusableTarget={setFirstFocusableTarget} setSelectedLgCatCd={setSelectedLgCatCd} + setSelectedLgCatNm={setSelectedLgCatNm} />