[Log] Log, IF-LGSP-LOG-002/ VOD 시청 이력 반영

com.twin.app.shoptime/src/actions/logActions.js

@@ -11,14 +11,15 @@ export const getUrlByLogTpNo = (logTpNo) => {
     case LOG_TP_NO.LIVE.ITEM_DETAIL:
       return URLS.LOG_LIVE;
 
-    // case "150":
-    // case "151":
-    // case "152":
-    // case "153":
-    // case "154":
-    // case "155":
-    // case "156":
-    //   return URLS.LOG_VOD;
+    // IG-LGSP-LOG-002 / VOD 시청 이력
+    case LOG_TP_NO.VOD.FULL_VOD:
+    case LOG_TP_NO.VOD.POPULAR_SHOWS_AND_HOT_PICKS:
+    case LOG_TP_NO.VOD.FEATURED_BRANDS_VOD: // no cases
+    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
+      return URLS.LOG_VOD;
 
     // IF-LGSP-LOG-003 / Curations View 이력
     case LOG_TP_NO.CURATION.HOT_PICKS:

com.twin.app.shoptime/src/hooks/useLogService.js

@@ -28,10 +28,10 @@ export default function useLogService() {
    *
    * (O) lgCatNm 카테고리 네임
    *
-   * (M) logTpNo 로그 타입 넘버
-   *
    * (M) linkTpCd 링크 타입 코드
    *
+   * (M) logTpNo 로그 타입 넘버
+   *
    * (M) nowMenu 현재 메뉴
    *
    * (M) patncNm 파트너 네임
@@ -76,7 +76,50 @@ export default function useLogService() {
     [dispatch, entryMenuRef, nowMenuRef]
   );
 
-  // const sendLogVOD = () => {};
+  /**
+   * IG-LGSP-LOG-002 / VOD 시청 이력
+   *
+   * (M) entryMenu 진입 메뉴
+   *
+   * (O) lgCatCd 카테고리 코드
+   *
+   * (O) lgCatNm 카테고리 이름
+   *
+   * (O) linkTpCd 딥 링크 타입
+   *
+   * (M) logTpNo 로그 타입 넘버
+   *
+   * (M) nowMenu 현재 메뉴
+   *
+   * (M) patncNm 파트너 이름
+   *
+   * (M) patnrId 파트너 아이디
+   *
+   * (M) showId 방송 아이디 (media case: prdtId)
+   *
+   * (M) showNm 방송 이름 (media case: prdtNm)
+   *
+   * (O) vdoTpNm 영상 가로 세로 여부 ("Vertical" or "Horizontal")
+   *
+   * (M) watchEndDt 시청 종료 시간
+   *
+   * (M) watchStrtDt 시청 시작 시간
+   */
+  const sendLogVOD = useCallback(
+    (params) => {
+      // todo pyh, add case return
+
+      const newParams = {
+        ...params,
+        entryMenu: entryMenuRef.current,
+        nowMenu: nowMenuRef.current,
+        watchEndDt: formatGMTString(new Date()),
+      };
+
+      dispatch(postLog(newParams));
+    },
+    [dispatch, entryMenuRef, nowMenuRef]
+  );
 
   /**
    * IF-LGSP-LOG-003 / Curations View 이력
@@ -1077,6 +1120,7 @@ export default function useLogService() {
 
   return {
     sendLogLive,
+    sendLogVOD,
     sendLogCuration,
     sendLogSecondLayer,
     sendLogGNB,

com.twin.app.shoptime/src/utils/Config.js

@@ -94,7 +94,34 @@ export const LOG_TP_NO = {
     ITEM_DETAIL: "103",
   },
 
-  VOD: {},
+  // TrendingNowPanel = VOD
+  // HomePanel = VOD, Live
+  // FeaturedBrandsPaenl = Live
+  // HotPicksPanel = Media
+  // DetailPanel = Media
+
+  // 150, 151, 153, 154, 155, 156
+  VOD: {
+    // Everywhere, Full, VOD
+    FULL_VOD: "150",
+
+    // TrendingNowPanel and HotPicksPanel, Modal
+    POPULAR_SHOWS_AND_HOT_PICKS: "151",
+
+    // * no cases *, FeaturedBrandsPanel(Recommended Shwos, Featured creators), Modal, VOD
+    FEATURED_BRANDS_VOD: "152",
+
+    // HomePanel(Top), Modal, VOD
+    HOME_VOD: "153",
+
+    ITEM_DETAIL_VOD: "154",
+
+    // Everywhere, Full, Media
+    FULL_MEDIA: "155",
+
+    // DetailPanel, Modal, Media
+    ITEM_DETAIL_MEDIA: "156",
+  },
 
   CURATION: {
     HOT_PICKS: "220",
@@ -242,6 +269,7 @@ export const LOG_MENU = {
   DETAIL_PAGE_TRAVEL_THEME_DETAIL: "Detail Page/Travel Theme Detail", // completed
   DETAIL_PAGE_GROUP_DETAIL: "Detail Page/Group Detail", // completed
 
+  FULL: "Full",
   FULL_SHOP_NOW: "Full/Shop Now",
   FULL_YOU_MAY_LIKE: "Full/You May Like",
   FULL_LIVE_CHANNELS: "Full/Live Channels",

com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

@@ -73,6 +73,52 @@ const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
   }
 };
 
+const getLogTpNo = (type, nowMenu) => {
+  if (type === "LIVE") {
+    switch (nowMenu) {
+      case Config.LOG_MENU.HOME_TOP:
+        return Config.LOG_TP_NO.LIVE.HOME;
+      case Config.LOG_MENU.FEATURED_BRANDS_LIVE_CHANNELS:
+        return Config.LOG_TP_NO.LIVE.FEATURED_BRANDS;
+      case Config.LOG_MENU.FULL_SHOP_NOW:
+      case Config.LOG_MENU.FULL_YOU_MAY_LIKE:
+      case Config.LOG_MENU.FULL_LIVE_CHANNELS:
+        return Config.LOG_TP_NO.LIVE.FULL;
+      default:
+        return;
+    }
+  } else if (type === "VOD") {
+    switch (nowMenu) {
+      case Config.LOG_MENU.HOME_TOP:
+        return Config.LOG_TP_NO.VOD.HOME_VOD; // 153
+      case Config.LOG_MENU.TRENDING_NOW_POPULAR_SHOWS:
+        return Config.LOG_TP_NO.VOD.POPULAR_SHOWS_AND_HOT_PICKS; // 151
+      case Config.LOG_MENU.FULL_SHOP_NOW:
+      case Config.LOG_MENU.FULL_YOU_MAY_LIKE:
+      case Config.LOG_MENU.FULL_FEATURED_SHOWS:
+        return Config.LOG_TP_NO.VOD.FULL_VOD; // 150
+      default:
+        return;
+    }
+  } else if (type === "MEDIA") {
+    switch (nowMenu) {
+      case Config.LOG_MENU.HOME_TOP:
+        return Config.LOG_TP_NO.VOD.HOME_VOD; // 153
+      case Config.LOG_MENU.HOT_PICKS:
+        return Config.LOG_TP_NO.VOD.POPULAR_SHOWS_AND_HOT_PICKS; // 151
+      case Config.LOG_MENU.DETAIL_PAGE_BILLING_PRODUCT_DETAIL:
+      case Config.LOG_MENU.DETAIL_PAGE_PRODUCT_DETAIL:
+      case Config.LOG_MENU.DETAIL_PAGE_TRAVEL_THEME_DETAIL:
+      case Config.LOG_MENU.DETAIL_PAGE_GROUP_DETAIL:
+        return Config.LOG_TP_NO.VOD.ITEM_DETAIL_MEDIA; // 156
+      case Config.LOG_MENU.FULL:
+        return Config.LOG_TP_NO.VOD.FULL_MEDIA; // 155
+      default:
+        return;
+    }
+  }
+};
+
 const PlayerPanel = ({
   isTabActivated,
   panelInfo,
@@ -80,7 +126,7 @@ const PlayerPanel = ({
   spotlightId,
   ...props
 }) => {
-  const { sendLogGNB, sendLogLive } = useLogService();
+  const { sendLogGNB, sendLogLive, sendLogVOD } = useLogService();
   const dispatch = useDispatch();
   const videoPlayer = useRef(null);
   const [playListInfo, setPlayListInfo] = useState("");
@@ -93,10 +139,17 @@ const PlayerPanel = ({
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [isUpdate, setIsUpdate] = useState(false);
   const [isSubtitleActive, setIsSubtitleActive] = useState(true);
-  const [isModalLiveLogReady, setIsModalLiveLogReady] = useState(false);
-  const [isFullLiveLogReady, setIsFullLiveLogReady] = useState(false);
-  const [isItemDetailLiveLogReady, setIsItemDetailLiveLogReady] =
-    useState(false);
+  const [logStatus, setLogStatus] = useState({
+    isModalLiveLogReady: false,
+    isFullLiveLogReady: false,
+    isDetailLiveLogReady: false,
+    isModalVodLogReady: false,
+    isFullVodLogReady: false,
+    isDetailVodLogReady: false,
+    isModalMediaLogReady: false,
+    isFullMediaLogReady: false,
+    isDetailMediaReady: false,
+  });
 
   const panels = useSelector((state) => state.panels.panels);
   const chatData = useSelector((state) => state.play.chatData);
@@ -131,8 +184,263 @@ const PlayerPanel = ({
   const nowMenu = useSelector((state) => state.common.menu.nowMenu);
 
   const initialFocusTimeoutJob = useRef(new Job((func) => func(), 600));
-  const currentLiveShowInfo = useRef(null);
   const liveLogParamsRef = useRef(null);
+  const vodLogParamsRef = useRef(null);
+  const mediaLogParamsRef = useRef(null);
+
+  useEffect(() => {
+    if (panelInfo?.modalStyle) {
+      console.log("log-----------panelInfo", panelInfo);
+    }
+  }, [panelInfo]);
+
+  useEffect(() => {
+    if (!panelInfo?.modal && panelInfo?.shptmBanrTpNm === "MEDIA") {
+      sendLogGNB(Config.LOG_MENU.FULL);
+    }
+  }, [panelInfo?.modal, panelInfo?.shptmBanrTpNm, sendLogGNB]);
+
+  useEffect(() => {
+    // todo pyh, add error case
+
+    // case live
+    if (
+      liveShowInfos &&
+      panelInfo?.chanId &&
+      panelInfo?.shptmBanrTpNm === "LIVE"
+    ) {
+      let logTemplateNo;
+
+      if (isOnTop && panelInfo?.modal) {
+        logTemplateNo = getLogTpNo("LIVE", nowMenu);
+        setLogStatus((status) => ({ ...status, isModalLiveLogReady: true }));
+      } //
+      else if (isOnTop && !panelInfo?.modal) {
+        logTemplateNo = Config.LOG_TP_NO.LIVE.FULL;
+        setLogStatus((status) => ({ ...status, isFullLiveLogReady: true }));
+      } //
+      else if (!isOnTop && !panelInfo?.modal) {
+        logTemplateNo = Config.LOG_TP_NO.LIVE.ITEM_DETAIL;
+        setLogStatus((status) => ({
+          ...status,
+          isDetailLiveLogReady: true,
+        }));
+      }
+
+      const currentLiveShowInfo = liveShowInfos //
+        .find(({ chanId }) => panelInfo?.chanId === chanId);
+
+      liveLogParamsRef.current = {
+        lgCatCd: currentLiveShowInfo?.catCd ?? "",
+        lgCatNm: currentLiveShowInfo?.catNm ?? "",
+        linkTpCd: panelInfo?.linkTpCd ?? "",
+        logTpNo: logTemplateNo,
+        patncNm: currentLiveShowInfo?.patncNm,
+        patnrId: currentLiveShowInfo?.patnrId,
+        showId: currentLiveShowInfo?.showId,
+        showNm: currentLiveShowInfo?.showNm,
+        vdoTpNm: currentLiveShowInfo?.vtctpYn
+          ? currentLiveShowInfo.vtctpYn === "Y"
+            ? "Vertical"
+            : "Horizontal"
+          : "",
+      };
+    }
+
+    // case vod
+    if (
+      panelInfo?.shptmBanrTpNm === "VOD" &&
+      showDetailInfo &&
+      showDetailInfo?.length > 0
+    ) {
+      let logTemplateNo;
+
+      if (isOnTop && panelInfo?.modal) {
+        logTemplateNo = getLogTpNo("VOD", nowMenu);
+        setLogStatus((status) => ({ ...status, isModalVodLogReady: true }));
+      } else if (isOnTop && !panelInfo?.modal) {
+        logTemplateNo = Config.LOG_TP_NO.VOD.FULL_VOD;
+        setLogStatus((status) => ({ ...status, isFullVodLogReady: true }));
+      } else if (!isOnTop && !panelInfo?.modal) {
+        logTemplateNo = Config.LOG_TP_NO.VOD.ITEM_DETAIL_VOD;
+        setLogStatus((status) => ({ ...status, isDetailVodLogReady: true }));
+      }
+
+      const currentVodShowInfo = showDetailInfo[0];
+
+      vodLogParamsRef.current = {
+        lgCatCd: currentVodShowInfo?.showCatCd ?? "",
+        lgCatNm: currentVodShowInfo?.showCatNm ?? "",
+        logTpNo: logTemplateNo,
+        linkTpCd: panelInfo?.linkTpCd ?? "",
+        patncNm: currentVodShowInfo?.patncNm,
+        patnrId: currentVodShowInfo?.patnrId,
+        showId: currentVodShowInfo?.showId,
+        showNm: currentVodShowInfo?.showNm,
+        vdoTpNm: currentVodShowInfo?.vtctpYn
+          ? currentVodShowInfo.vtctpYn === "Y"
+            ? "Vertical"
+            : "Horizontal"
+          : "",
+      };
+    }
+
+    // case media
+    if (panelInfo?.shptmBanrTpNm === "MEDIA") {
+      let logTemplateNo;
+
+      if (panelInfo?.modal) {
+        logTemplateNo = getLogTpNo("MEDIA", nowMenu);
+        setLogStatus((status) => ({ ...status, isModalMediaLogReady: true }));
+      } else if (!panelInfo?.modal) {
+        logTemplateNo = Config.LOG_TP_NO.VOD.FULL_MEDIA;
+        setLogStatus((status) => ({ ...status, isFullMediaLogReady: true }));
+      }
+
+      mediaLogParamsRef.current = {
+        lgCatCd: panelInfo?.lgCatCd ?? "",
+        lgCatNm: panelInfo?.lgCatNm ?? "",
+        logTpNo: logTemplateNo,
+        linkTpCd: panelInfo?.linkTpCd ?? "",
+        patncNm: panelInfo?.patncNm ?? "",
+        patnrId: panelInfo?.patnrId ?? "",
+        showId: panelInfo?.prdtId ?? "", // todo pyh, change showId
+        showNm: panelInfo?.prdtNm ?? panelInfo?.showUrl, // todo pyh, change showNm
+        vdoTpNm: "Horizontal",
+      };
+    }
+  }, [
+    isOnTop,
+    liveShowInfos,
+    nowMenu,
+    panelInfo?.chanId,
+    panelInfo?.lgCatCd,
+    panelInfo?.lgCatNm,
+    panelInfo?.linkTpCd,
+    panelInfo?.modal,
+    panelInfo?.patncNm,
+    panelInfo?.patnrId,
+    panelInfo?.prdtId,
+    panelInfo?.prdtNm,
+    panelInfo?.shptmBanrTpNm,
+    panelInfo?.showUrl,
+    showDetailInfo,
+  ]);
+
+  useEffect(() => {
+    // send log live
+    if (logStatus.isModalLiveLogReady && isOnTop && panelInfo?.modal) {
+      // console.log("%c log LIVE, modal", "background: #cbedf8");
+      let watchStrtDt = formatGMTString(new Date());
+      return () => {
+        sendLogLive({ ...liveLogParamsRef.current, watchStrtDt });
+        setLogStatus((status) => ({
+          ...status,
+          isModalLiveLogReady: false,
+        }));
+      };
+    }
+
+    if (logStatus.isFullLiveLogReady && isOnTop && !panelInfo?.modal) {
+      // console.log("%c log LIVE, full", "background: #67c3e1");
+      let watchStrtDt = formatGMTString(new Date());
+      return () => {
+        sendLogLive({ ...liveLogParamsRef.current, watchStrtDt });
+        setLogStatus((status) => ({
+          ...status,
+          isFullLiveLogReady: false,
+        }));
+      };
+    }
+
+    if (logStatus.isDetailLiveLogReady && !isOnTop && !panelInfo?.modal) {
+      // console.log("%c log LIVE, item detail", "background: #00bfff");
+      let watchStrtDt = formatGMTString(new Date());
+      return () => {
+        sendLogLive({ ...liveLogParamsRef.current, watchStrtDt });
+        setLogStatus((status) => ({
+          ...status,
+          isDetailLiveLogReady: false,
+        }));
+      };
+    }
+
+    // send log vod
+    if (logStatus.isModalVodLogReady && isOnTop && panelInfo?.modal) {
+      // console.log("%c log VOD, modal", "background: #ebcbc0");
+      let watchStrtDt = formatGMTString(new Date());
+      return () => {
+        sendLogVOD({ ...vodLogParamsRef.current, watchStrtDt });
+        setLogStatus((status) => ({
+          ...status,
+          isModalVodLogReady: false,
+        }));
+      };
+    }
+
+    if (logStatus.isFullVodLogReady && isOnTop && !panelInfo?.modal) {
+      // console.log("%c log VOD, Full", "background: #f59977");
+      let watchStrtDt = formatGMTString(new Date());
+      return () => {
+        sendLogVOD({ ...vodLogParamsRef.current, watchStrtDt });
+        setLogStatus((status) => ({
+          ...status,
+          isFullVodLogReady: false,
+        }));
+      };
+    }
+
+    if (logStatus.isDetailVodLogReady && !isOnTop && !panelInfo?.modal) {
+      // console.log("%c log VOD, item detail", "background: #ff6026");
+      let watchStrtDt = formatGMTString(new Date());
+      return () => {
+        sendLogVOD({ ...vodLogParamsRef.current, watchStrtDt });
+        setLogStatus((status) => ({
+          ...status,
+          isDetailVodLogReady: false,
+        }));
+      };
+    }
+
+    // send log media
+    if (logStatus.isModalMediaLogReady && panelInfo?.modal) {
+      // console.log("%c log Media, modal", "background: #a6f8a5");
+      let watchStrtDt = formatGMTString(new Date());
+      return () => {
+        sendLogVOD({ ...mediaLogParamsRef.current, watchStrtDt });
+        setLogStatus((status) => ({
+          ...status,
+          isModalMediaLogReady: false,
+        }));
+      };
+    }
+
+    if (logStatus.isFullMediaLogReady && !panelInfo?.modal) {
+      // console.log("%c log Media, Full", "background: #4eff4b");
+      let watchStrtDt = formatGMTString(new Date());
+      return () => {
+        sendLogVOD({ ...mediaLogParamsRef.current, watchStrtDt });
+        setLogStatus((status) => ({
+          ...status,
+          isFullMediaLogReady: false,
+        }));
+      };
+    }
+  }, [
+    isOnTop,
+    logStatus.isDetailLiveLogReady,
+    logStatus.isDetailVodLogReady,
+    logStatus.isFullLiveLogReady,
+    logStatus.isFullMediaLogReady,
+    logStatus.isFullVodLogReady,
+    logStatus.isModalLiveLogReady,
+    logStatus.isModalMediaLogReady,
+    logStatus.isModalVodLogReady,
+    panelInfo?.modal,
+    panelInfo?.showUrl,
+    sendLogLive,
+    sendLogVOD,
+  ]);
 
   const handleItemFocus = useCallback(
     (menu) => {
@@ -141,107 +449,6 @@ const PlayerPanel = ({
     [sendLogGNB]
   );
 
-  const getLogTpNo = useCallback((nowMenu) => {
-    switch (nowMenu) {
-      case Config.LOG_MENU.HOME_TOP:
-        return Config.LOG_TP_NO.LIVE.HOME;
-      case Config.LOG_MENU.FEATURED_BRANDS_LIVE_CHANNELS:
-        return Config.LOG_TP_NO.LIVE.FEATURED_BRANDS;
-      case Config.LOG_MENU.FULL_SHOP_NOW:
-      case Config.LOG_MENU.FULL_YOU_MAY_LIKE:
-      case Config.LOG_MENU.FULL_LIVE_CHANNELS:
-      case Config.LOG_MENU.FULL_FEATURED_SHOWS:
-        return Config.LOG_TP_NO.LIVE.FULL;
-      default:
-        return Config.LOG_TP_NO.LIVE.HOME;
-    }
-  }, []);
-
-  useEffect(() => {
-    if (liveShowInfos && panelInfo?.chanId) {
-      let logTemplateNo;
-
-      if (isOnTop && panelInfo?.modal) {
-        logTemplateNo = getLogTpNo(nowMenu);
-        setIsModalLiveLogReady(true);
-      } //
-      else if (isOnTop && !panelInfo?.modal) {
-        logTemplateNo = Config.LOG_TP_NO.LIVE.FULL;
-        setIsFullLiveLogReady(true);
-      } //
-      else if (!isOnTop && !panelInfo?.modal) {
-        logTemplateNo = Config.LOG_TP_NO.LIVE.ITEM_DETAIL;
-        setIsItemDetailLiveLogReady(true);
-      }
-
-      currentLiveShowInfo.current = liveShowInfos //
-        .find(({ chanId }) => panelInfo?.chanId === chanId);
-
-      liveLogParamsRef.current = {
-        lgCatCd: currentLiveShowInfo.current?.catCd ?? "",
-        lgCatNm: currentLiveShowInfo.current?.catNm ?? "",
-        logTpNo: logTemplateNo,
-        linkTpCd: "",
-        patncNm: currentLiveShowInfo.current?.patncNm,
-        patnrId: currentLiveShowInfo.current?.patnrId,
-        showId: currentLiveShowInfo.current?.showId,
-        showNm: currentLiveShowInfo.current?.showNm,
-        vdoTpNm: currentLiveShowInfo.current?.vtctpYn
-          ? currentLiveShowInfo.current.vtctpYn === "Y"
-            ? "Vertical"
-            : "Horizontal"
-          : "",
-        // watchStrtDt: formatGMTString(new Date()),
-      };
-    }
-  }, [
-    getLogTpNo,
-    isOnTop,
-    liveShowInfos,
-    nowMenu,
-    panelInfo?.chanId,
-    panelInfo?.modal,
-  ]);
-
-  useEffect(() => {
-    if (isModalLiveLogReady && isOnTop && panelInfo?.modal) {
-      // console.log("%c log if, modal, panelInfo", "background: lightblue");
-      let watchStrtDt = formatGMTString(new Date());
-
-      return () => {
-        sendLogLive({ ...liveLogParamsRef.current, watchStrtDt });
-        setIsModalLiveLogReady(false);
-      };
-    }
-
-    if (isFullLiveLogReady && isOnTop && !panelInfo?.modal) {
-      // console.log("%c log if, full, panelInfo", "background: #f8bdbd");
-      let watchStrtDt = formatGMTString(new Date());
-
-      return () => {
-        sendLogLive({ ...liveLogParamsRef.current, watchStrtDt });
-        setIsFullLiveLogReady(false);
-      };
-    }
-
-    if (isItemDetailLiveLogReady && !isOnTop && !panelInfo?.modal) {
-      // console.log("%c log if, item detail, panelInfo", "background: #ccf8bd");
-      let watchStrtDt = formatGMTString(new Date());
-
-      return () => {
-        sendLogLive({ ...liveLogParamsRef.current, watchStrtDt });
-        setIsItemDetailLiveLogReady(false);
-      };
-    }
-  }, [
-    isOnTop,
-    isFullLiveLogReady,
-    isItemDetailLiveLogReady,
-    isModalLiveLogReady,
-    panelInfo?.modal,
-    sendLogLive,
-  ]);
-
   const onClickBack = useCallback(
     (ev, isEnd) => {
       //modal로부터 Full 전환된 경우 다시 preview 모드로 돌아감.