[FeaturedBrandsPanel] section, LIVE CHANNELS, 라이브 없는 경우 수정

Detail Notes :

1. action type 추가 및 reducer 수정 (response 느린 관계)

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

@@ -60,6 +60,7 @@ export const types = {
   GET_BRAND_CREATORS_INFO: "GET_BRAND_CREATORS_INFO",
   GET_BRAND_SHOWROOM: "GET_BRAND_SHOWROOM",
   SET_BRAND_LIVE_CHANNEL_UPCOMING: "SET_BRAND_LIVE_CHANNEL_UPCOMING",
+  SET_BRAND_CHAN_INFO: "SET_BRAND_CHAN_INFO",
 
   // main actions
   GET_SUB_CATEGORY: "GET_SUB_CATEGORY",

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

@@ -425,3 +425,29 @@ export const setBrandLiveChannelUpcoming = (props) => (dispatch, getState) => {
     },
   });
 };
+
+export const setBrandChanInfo = (props) => (dispatch, getState) => {
+  const { showId, strtDt } = props;
+
+  const storedBrandLiveChanInfo =
+    getState().brand.brandLiveChannelInfoData.data.brandChanInfo;
+
+  const brandChanInfo = storedBrandLiveChanInfo.map((item) => {
+    if (item.showId === showId && item.strtDt === strtDt) {
+      item.alamDispFlag = item.alamDispFlag === "Y" ? "N" : "Y";
+    }
+
+    return item;
+  });
+
+  dispatch({
+    type: types.SET_BRAND_CHAN_INFO,
+    payload: {
+      ...getState().brand.brandLiveChannelInfoData,
+      data: {
+        ...getState().brand.brandLiveChannelInfoData.data,
+        brandChanInfo,
+      },
+    },
+  });
+};

com.twin.app.shoptime/src/reducers/brandReducer.js

@@ -142,6 +142,12 @@ export const brandReducer = (state = initialState, action) => {
         brandLiveChannelInfoData: action.payload,
       };
 
+    case types.SET_BRAND_CHAN_INFO:
+      return {
+        ...state,
+        brandLiveChannelInfoData: action.payload,
+      };
+
     default:
       return state;
   }

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/NoLiveContents/NoLiveCard/NoLiveCard.jsx

@@ -1,11 +1,11 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useState } from "react";
 
 import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";
 
 import IcUpcomingsNormal from "../../../../../../assets/images/badge/ic-upcomings-nor@3x.png";
 import IcUpcomingsReserved from "../../../../../../assets/images/badge/ic-upcomings-sel@3x.png";
-import { setBrandLiveChannelUpcoming } from "../../../../../actions/brandActions";
+import { setBrandChanInfo } from "../../../../../actions/brandActions";
 import { setShowPopup } from "../../../../../actions/commonActions";
 import { setMainLiveUpcomingAlarm } from "../../../../../actions/mainActions";
 import TButton from "../../../../../components/TButton/TButton";
@@ -31,6 +31,8 @@ export default memo(function NoLiveCard({ brandChanInfoItem, scrollTopBody }) {
     (state) => state.myPage.upComingData?.upComingAlertShow?.upcomAlamUseFlag
   );
 
+  const [, forceUpdate] = useState({});
+
   const {
     alamDispFlag, // UpComming 알람 여부
     brandProductInfo, // 상품 정보 Array
@@ -54,6 +56,8 @@ export default memo(function NoLiveCard({ brandChanInfoItem, scrollTopBody }) {
     // vtctpYn, // 영상 세로형 여부
   } = brandChanInfoItem;
 
+  const isReserved = alamDispFlag === "Y";
+
   const handleReminderButton = useCallback(() => {
     if (upcomAlamUseFlag === "N") {
       return dispatch(setShowPopup());
@@ -61,7 +65,7 @@ export default memo(function NoLiveCard({ brandChanInfoItem, scrollTopBody }) {
 
     dispatch(
       setMainLiveUpcomingAlarm({
-        alamDispFlag: alamDispFlag === "Y" ? "N" : "Y",
+        alamDispFlag: isReserved ? "N" : "Y",
         endDt,
         patnrId,
         showId,
@@ -69,16 +73,9 @@ export default memo(function NoLiveCard({ brandChanInfoItem, scrollTopBody }) {
       })
     );
 
-    dispatch(setBrandLiveChannelUpcoming({ showId, strtDt }));
-  }, [
-    alamDispFlag,
-    dispatch,
-    endDt,
-    patnrId,
-    showId,
-    strtDt,
-    upcomAlamUseFlag,
-  ]);
+    dispatch(setBrandChanInfo({ showId, strtDt }));
+    forceUpdate({});
+  }, [dispatch, endDt, isReserved, patnrId, showId, strtDt, upcomAlamUseFlag]);
 
   const handleAiredButton = useCallback(() => {
     // pyh, PlayerPanel 완료 뒤 action 추가
@@ -112,7 +109,7 @@ export default memo(function NoLiveCard({ brandChanInfoItem, scrollTopBody }) {
 
       <div>
         <img
-          src={alamDispFlag === "Y" ? IcUpcomingsReserved : IcUpcomingsNormal}
+          src={isReserved ? IcUpcomingsReserved : IcUpcomingsNormal}
           alt=""
         />
         <time>{convertToTimeFormat(strtDt, true)}</time>
@@ -125,7 +122,7 @@ export default memo(function NoLiveCard({ brandChanInfoItem, scrollTopBody }) {
             onFocus={handleFocus}
             size={null}
           >
-            {alamDispFlag === "Y"
+            {isReserved
               ? STRING_CONF.REMOVE_REMINDER
               : STRING_CONF.SET_REMINDER}
           </TButton>