[PlayerPanel] 30초마다 ShopNow Item 갱신 API 호출

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

@@ -1,8 +1,8 @@
-import { URLS } from '../api/apiConfig';
-import { TAxios } from '../api/TAxios';
-import { CATEGORY_DATA_MAX_RESULTS_LIMIT } from '../utils/Config';
-import * as HelperMethods from '../utils/helperMethods';
-import { types } from './actionTypes';
+import { URLS } from "../api/apiConfig";
+import { TAxios } from "../api/TAxios";
+import { CATEGORY_DATA_MAX_RESULTS_LIMIT } from "../utils/Config";
+import * as HelperMethods from "../utils/helperMethods";
+import { types } from "./actionTypes";
 
 export const getMainLiveShow = (props) => (dispatch, getState) => {
   const onSuccess = (response) => {
@@ -339,7 +339,7 @@ export const getHomeFullVideoInfo =
 
 // 메인화면 Live 현재 방송 상품 조회 IF-LGSP-046
 export const getMainLiveShowNowProduct =
-  ({ patnrId, showId }) =>
+  ({ patnrId, showId, lstChgDt }) =>
   (dispatch, getState) => {
     const onSuccess = (response) => {
       console.log("getMainLiveShowNowProduct onSuccess", response.data);
@@ -359,7 +359,7 @@ export const getMainLiveShowNowProduct =
       getState,
       "get",
       URLS.GET_MAIN_LIVE_SHOW_NOW_PRODUCT,
-      { patnrId, showId },
+      { patnrId, showId, lstChgDt },
       {},
       onSuccess,
       onFail

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

@@ -325,6 +325,28 @@ const PlayerPanel = ({
     };
   }, [panelInfo?.modal, isOnTop]);
 
+  useEffect(() => {
+    if (showNowInfos) {
+      const period =
+        showNowInfos.period !== undefined ? showNowInfos.period : 30;
+      const periodInMilliseconds = period * 1000;
+
+      const timer = setTimeout(() => {
+        dispatch(
+          getMainLiveShowNowProduct({
+            patnrId: panelInfo.patnrId,
+            showId: panelInfo.showId,
+            lstChgDt: showNowInfos.lstChgDt,
+          })
+        );
+      }, periodInMilliseconds);
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [showNowInfos, panelInfo]);
+
   const cannotPlay = useMemo(() => {
     const topPanel = panels[panels.length - 1];
     return !isOnTop && topPanel?.name === panel_names.PLAYER_PANEL;
@@ -469,6 +491,11 @@ const PlayerPanel = ({
       case "LIVE": {
         const playlist = liveChannelInfos ? liveChannelInfos : liveShowInfos;
         setPlayListInfo(playlist);
+
+        if (showNowInfos?.productInfos === null) {
+          return;
+        }
+
         if (showNowInfos || showDetailInfo?.length > 0) {
           const productInfos = showNowInfos
             ? showNowInfos.productInfos
@@ -492,21 +519,6 @@ const PlayerPanel = ({
     dispatch,
   ]);
 
-  // 일정시간마다 API를 재호출해야하는 기능  테스트기간 동안 주석
-  useEffect(() => {
-    if (panelInfo?.shptmBanrTpNm === "LIVE") {
-      const interval = setInterval(() => {
-        dispatch(
-          getMainLiveShowNowProduct({
-            patnrId: panelInfo.patnrId,
-            showId: panelInfo.showId,
-          })
-        );
-      }, 10000); // 10초마다 호출
-      return () => clearInterval(interval);
-    }
-  }, [panelInfo, dispatch]);
-
   const mediainfoHandler = useCallback(
     (ev) => {
       const type = ev.type;