[Log] Log, IF-LGSP-LOG-006 / Product Detail 이력 (logTpNo: “410”) 반영

2024-06-05 16:18:55 +09:00
parent b31a795252
commit f6aeea0093
7 changed files with 109 additions and 44 deletions
--- a/com.twin.app.shoptime/src/hooks/useLogService.js
+++ b/com.twin.app.shoptime/src/hooks/useLogService.js
@@ -219,11 +219,18 @@ export default function useLogService() {
   */
  const sendLogProductDetail = useCallback(
    (params) => {
+      const { logTpNo } = params;
+
+      const outDt =
+        logTpNo === LOG_TP_NO.PRODUCT.PRODUCT_DETAIL_IMAGE
+          ? ""
+          : formatGMTString(new Date());
+
      const newParams = {
        ...params,
        entryMenu: entryMenuRef.current,
        nowMenu: nowMenuRef.current,
-        outDt: formatGMTString(new Date()),
+        outDt,
      };

      dispatch(postLog(newParams));
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -329,15 +329,14 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
          {/* 테마그룹상품 영역*/}
          {curationId && (hotelInfos || themeData) && (
            <ThemeProduct
-              selectedIndex={selectedIndex}
-              setSelectedIndex={setSelectedIndex}
+              // isOnTop={isOnTop}
+              panelInfo={panelInfo}
              selectedCurationId={curationId}
              selectedCurationNm={curationNm}
+              selectedIndex={selectedIndex}
              selectedPatnrId={patnrId}
-              logParamsRef={logParamsRef}
+              setSelectedIndex={setSelectedIndex}
              themeType={type}
-              launchedFromPlayer={panelInfo.launchedFromPlayer}
-              isOnTop={isOnTop}
            />
          )}
        </TBody>
--- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelProduct.jsx
@@ -16,7 +16,7 @@ import TButton from "../../../components/TButton/TButton";
 import TQRCode from "../../../components/TQRCode/TQRCode";
 import useLogService from "../../../hooks/useLogService";
 import * as Config from "../../../utils/Config";
-import { $L } from "../../../utils/helperMethods";
+import { $L, formatGMTString } from "../../../utils/helperMethods";
 import IndicatorOptions from "../components/indicator/IndicatorOptions";
 import ThemeIndicator from "../components/indicator/ThemeIndicator";
 import StarRating from "../components/StarRating";
@@ -27,22 +27,28 @@ const Container = SpotlightContainerDecorator(
  "div"
 );
 export default function HotelOption({
+  // panelInfo,
+  launchedFromPlayer,
  selectedIndex,
  setSelectedIndex,
-  launchedFromPlayer,
 }) {
-  const { sendLogGNB, sendLogShopByMobile } = useLogService();
+  const { sendLogGNB, sendLogProductDetail, sendLogShopByMobile } =
+    useLogService();

-  const tooltipDes = $L("Scan for more information about the product.");
  const dispatch = useDispatch();
-  const [label, setLabel] = useState("");
-  const [amenitiesInfos, setAmenitiesInfos] = useState();
+
  const hotelInfos = useSelector(
    (state) => state.home.themeCurationHotelDetailData
  );
  const hotelData = useSelector((state) => state.home.hotelData);

+  const [label, setLabel] = useState("");
+  const [amenitiesInfos, setAmenitiesInfos] = useState();
+
  const logParamsRef = useRef(null);
+  const timerRef = useRef(null);
+
+  const tooltipDes = $L("Scan for more information about the product.");

  const selectedHotelInfo = useMemo(() => {
    if (hotelData) {
@@ -63,6 +69,34 @@ export default function HotelOption({
    sendLogGNB(Config.LOG_MENU.DETAIL_PAGE_TRAVEL_THEME_DETAIL);
  }, [sendLogGNB]);

+  useEffect(() => {
+    if (selectedHotelInfo) {
+      const params = {
+        befPrice: selectedHotelInfo?.hotelInfo?.hotelDetailInfo?.price ?? "",
+        curationId: selectedHotelInfo?.curationId ?? "",
+        curationNm: selectedHotelInfo?.curationNm ?? "",
+        expsOrd: `${selectedIndex + 1}`,
+        inDt: formatGMTString(new Date()),
+        lastPrice: selectedHotelInfo?.hotelInfo?.hotelDetailInfo?.price ?? "",
+        lgCatCd: "",
+        lgCatNm: "",
+        linkTpCd: "",
+        logTpNo: Config.LOG_TP_NO.PRODUCT.PRODUCT_DETAIL_IMAGE,
+        patncNm: selectedHotelInfo?.patncNm ?? "",
+        patnrId: selectedHotelInfo?.patnrId ?? "",
+        prdtId: selectedHotelInfo?.hotelInfo?.hotelId ?? "",
+        prdtNm: selectedHotelInfo?.hotelInfo?.hotelNm ?? "",
+        revwGrd: selectedHotelInfo?.hotelInfo?.hotelDetailInfo?.revwGrd ?? "",
+        rewdAplyFlag: "N",
+        tsvFlag: "N",
+      };
+
+      timerRef.current = setTimeout(() => sendLogProductDetail(params), 1000);
+    }
+
+    return () => clearTimeout(timerRef.current);
+  }, [selectedHotelInfo, sendLogProductDetail]);
+
  useEffect(() => {
    let label = "";
    let rating = hotelInfos[selectedIndex]?.hotelDetailInfo.revwGrd;
@@ -119,10 +153,6 @@ export default function HotelOption({
    logParamsRef.current = params;
  }, [dispatch, selectedHotelInfo]);

-  const onClose = () => {
-    dispatch(setHidePopup());
-  };
-
  const Price = () => {
    return (
      <>
--- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowOptions/ShowSingleOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowOptions/ShowSingleOption.jsx
@@ -4,10 +4,10 @@ import ProductOption from "../../components/ProductOption";
 import SingleOption from "../../SingleProduct/SingleOption";

 export default function ThemeSingleOption({
+  productData,
+  productInfo,
  selectedIndex,
  soldoutFlag,
-  productInfo,
-  productData,
 }) {
  return (
    <>
--- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowProduct.jsx
@@ -1,40 +1,40 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef } from "react";

-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";

 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

-import { getProductImageLength } from "../../../actions/productActions";
 import IndicatorOptions from "../components/indicator/IndicatorOptions";
 import ThemeIndicator from "../components/indicator/ThemeIndicator";
 import ShowSingleOption from "./ShowOptions/ShowSingleOption";
 import ShowUnableOption from "./ShowOptions/ShowUnableOption";
 import css from "./ShowProduct.module.less";
 import useLogService from "../../../hooks/useLogService";
-import { LOG_MENU } from "../../../utils/Config";
+import { LOG_MENU, LOG_TP_NO } from "../../../utils/Config";
+import { formatGMTString } from "../../../utils/helperMethods";

 const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused", preserveld: true },
  "div"
 );
 export default function ShowOption({
-  selectedIndex,
-  setSelectedIndex,
-  selectedCurationId,
-  selectedPatnrId,
-  selectedPrdtId,
-  launchedFromPlayer,
-  selectedCurationNm,
  isOnTop,
+  // panelInfo,
+  launchedFromPlayer,
+  selectedIndex,
+  selectedCurationId,
+  selectedCurationNm,
+  // selectedPatnrId,
+  setSelectedIndex,
 }) {
-  const { sendLogGNB } = useLogService();
+  const { sendLogGNB, sendLogProductDetail } = useLogService();

  const productInfo = useSelector(
    (state) => state.home.themeCurationDetailInfoData
  );
  const productData = useSelector((state) => state.home.productData);

-  const dispatch = useDispatch();
+  const timerRef = useRef(null);

  const showProductInfo = useMemo(() => {
    if (productData && productInfo) {
@@ -58,6 +58,34 @@ export default function ShowOption({
    sendLogGNB(LOG_MENU.DETAIL_PAGE_TRAVEL_THEME_DETAIL);
  }, [sendLogGNB]);

+  useEffect(() => {
+    if (showProductInfo) {
+      const params = {
+        befPrice: showProductInfo?.priceInfo?.split("|")[0],
+        curationId: showProductInfo?.curationId ?? "",
+        curationNm: showProductInfo?.curationNm ?? "",
+        expsOrd: showProductInfo?.expsPrdtNo ?? "",
+        inDt: formatGMTString(new Date()),
+        lastPrice: showProductInfo.priceInfo?.split("|")[1],
+        lgCatCd: showProductInfo?.catCd ?? "",
+        lgCatNm: showProductInfo?.catNm ?? "",
+        linkTpCd: "",
+        logTpNo: LOG_TP_NO.PRODUCT.PRODUCT_DETAIL_IMAGE,
+        patncNm: showProductInfo?.patncNm ?? "",
+        patnrId: showProductInfo?.patnrId ?? "",
+        prdtId: showProductInfo?.prdtId ?? "",
+        prdtNm: showProductInfo?.prdtNm ?? "",
+        revwGrd: showProductInfo?.revwGrd ?? "",
+        rewdAplyFlag: showProductInfo.priceInfo?.split("|")[2],
+        tsvFlag: showProductInfo?.todaySpclFlag ?? "",
+      };
+
+      timerRef.current = setTimeout(() => sendLogProductDetail(params), 1000);
+    }
+
+    return () => clearTimeout(timerRef.current);
+  }, [sendLogProductDetail, showProductInfo]);
+
  const isProductSoldOut = () => {
    if (
      productInfo &&
@@ -99,11 +127,9 @@ export default function ShowOption({
          <div className={css.optionContainer}>
            {productInfo[selectedIndex]?.pmtSuptYn === "Y" && (
              <ShowSingleOption
-                selectedIndex={selectedIndex}
-                productInfo={productInfo}
                productData={productData}
-                selectedPatnrId={selectedPatnrId}
-                selectedPrdtId={selectedPrdtId}
+                productInfo={productInfo}
+                selectedIndex={selectedIndex}
                soldoutFlag={isProductSoldOut}
              />
            )}
--- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeProduct.jsx
@@ -7,12 +7,13 @@ import ShowProduct from "./ShowProduct";
 import css from "./ThemeProduct.module.less";

 export default function ThemeProduct({
-  selectedIndex,
-  setSelectedIndex,
+  // isOnTop,
+  panelInfo,
  selectedCurationId,
-  selectedPatnrId,
-  launchedFromPlayer,
  selectedCurationNm,
+  selectedIndex,
+  selectedPatnrId,
+  setSelectedIndex,
  themeType,
  isOnTop,
 }) {
@@ -20,21 +21,23 @@ export default function ThemeProduct({
    <div className={css.container}>
      {themeType === "theme" && (
        <ShowProduct
+          isOnTop={isOnTop}
+          panelInfo={panelInfo}
+          launchedFromPlayer={panelInfo?.launchedFromPlayer}
          selectedIndex={selectedIndex}
          selectedCurationId={selectedCurationId}
          selectedCurationNm={selectedCurationNm}
          selectedPatnrId={selectedPatnrId}
          setSelectedIndex={setSelectedIndex}
-          launchedFromPlayer={launchedFromPlayer}
-          isOnTop={isOnTop}
        />
      )}
      {themeType === "hotel" && (
        <HotelProduct
+          isOnTop={isOnTop}
+          panelInfo={panelInfo}
+          launchedFromPlayer={panelInfo?.launchedFromPlayer}
          selectedIndex={selectedIndex}
          setSelectedIndex={setSelectedIndex}
-          launchedFromPlayer={launchedFromPlayer}
-          isOnTop={isOnTop}
        />
      )}
    </div>
--- a/com.twin.app.shoptime/src/views/LoadingPanel/LoadingPanel.jsx
+++ b/com.twin.app.shoptime/src/views/LoadingPanel/LoadingPanel.jsx
@@ -19,7 +19,7 @@ import { $L } from "../../utils/helperMethods";
 import css from "./LoadingPanel.module.less";

 const MIN_SHOWING_TIME = { launching: 2500, wait: 300, default: 1000 };
-const MAX_SHOWING_TIME = 20000;
+const MAX_SHOWING_TIME = 60000;
 const MAX_SHOWING_TIME_UNLIMITED = Number.MAX_SAFE_INTEGER;
 const DUMMY_DELAY = 1000;
 const HIDING_TIME = 300;