[RecentlyViewed]

- VOD 항목 추가 작업 - DetailPanel,PlayerPanel : localStorage > changeLocalSettings 로 수정작업
2024-05-28 18:38:42 +09:00
parent 85e1d8867d
commit aaaedc048d
5 changed files with 199 additions and 108 deletions
--- a/com.twin.app.shoptime/src/reducers/localSettingsReducer.js
+++ b/com.twin.app.shoptime/src/reducers/localSettingsReducer.js
@@ -8,7 +8,8 @@ const initialLocalSettings = {
  accessToken: null,
  refreshToken: null,
  phoneNumbers: {},
-  logEnable: (typeof window === "object" && !window.PalmSystem)
+  logEnable: typeof window === "object" && !window.PalmSystem,
+  recentItems: [],
 };

 const updateInitialLocalSettings = () => {
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from "react-redux";

 import Spotlight from "@enact/spotlight";

+import { changeLocalSettings } from "../../actions/commonActions";
 import { clearCouponInfo } from "../../actions/couponActions";
 import {
  clearThemeDetail,
@@ -41,6 +42,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
  const hotelInfos = useSelector(
    (state) => state.home.themeCurationHotelDetailData
  );
+  const localRecentItems = useSelector(
+    (state) => state.localSettings?.recentItems
+  );
  const { httpHeader } = useSelector((state) => state.common);
  const groupInfos = useSelector((state) => state.product.groupInfo);
  const dispatch = useDispatch();
@@ -130,9 +134,11 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
    };
  }, [dispatch]);

-  const saveToLocalStorage = useCallback(() => {
-    const recentItmes =
-      JSON.parse(window.localStorage.getItem("recentItems")) || [];
+  const saveToLocalSettings = useCallback(() => {
+    let recentItems = [];
+    if (localRecentItems) {
+      recentItems = [...localRecentItems];
+    }

    const currentDate = new Date();

@@ -140,15 +146,15 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
      currentDate.getMonth() + 1
    }/${currentDate.getDate()}`;

-    const existingProductIndex = recentItmes.findIndex((item) => {
+    const existingProductIndex = recentItems.findIndex((item) => {
      return item.prdtId === prdtId;
    });

    if (existingProductIndex !== -1) {
-      recentItmes.splice(existingProductIndex, 1);
+      recentItems.splice(existingProductIndex, 1);
    }

-    recentItmes.push({
+    recentItems.push({
      prdtId: prdtId,
      patnrId: patnrId,
      date: formattedDate,
@@ -156,13 +162,13 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
      cntryCd: httpHeader["X-Device-Country"],
    });

-    if (recentItmes.length >= 51) {
-      const data = [...recentItmes];
-      window.localStorage.setItem("recentItems", JSON.stringify(data.slice(1)));
+    if (recentItems.length >= 51) {
+      const data = [...recentItems];
+      dispatch(changeLocalSettings({ recentItems: data.slice(1) }));
    } else {
-      window.localStorage.setItem("recentItems", JSON.stringify(recentItmes));
+      dispatch(changeLocalSettings({ recentItems }));
    }
-  }, [panelInfo, httpHeader]);
+  }, [panelInfo, httpHeader, localRecentItems, dispatch]);

  const getlgCatCd = useCallback(() => {
    if (productData && !curationId) {
@@ -185,7 +191,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {

  useEffect(() => {
    if (panelInfo && patnrId && prdtId) {
-      saveToLocalStorage();
+      saveToLocalSettings();
    }
  }, [panelInfo]);

--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx
@@ -5,7 +5,10 @@ import { useDispatch, useSelector } from "react-redux";
 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

-import { changeAppStatus } from "../../../../actions/commonActions";
+import {
+  changeAppStatus,
+  changeLocalSettings,
+} from "../../../../actions/commonActions";
 import {
  clearRecentlyViewedInfo,
  getMyRecentlyViewedInfo,
@@ -47,19 +50,18 @@ export default function RecentlyViewed({ title }) {
  const recentlyProductsData = useSelector(
    (state) => state.myPage.recentlyViewedData?.data?.recentlyProducts
  );
+  const recentlyShowData = useSelector(
+    (state) => state.myPage.recentlyViewedData?.data?.recentlyShows
+  );
  const recentlyViewedSuccess = useSelector(
    (state) => state.myPage?.recentlyViewedSuccess
  );
-  // const hasRecentlyViewedData = useSelector(
-  //   (state) => state.myPage?.hasRecentlyViewedData
-  // );
+  const localRecentItems = useSelector(
+    (state) => state.localSettings?.recentItems
+  );

  const { httpHeader } = useSelector((state) => state.common);

-  const recentItemsLocal = JSON.parse(
-    window.localStorage.getItem("recentItems")
-  );
-
  let timerRef = useRef();

  const { getScrollTo: cbScrollTo, scrollTop: scrollTopBody } = useScrollTo();
@@ -91,7 +93,11 @@ export default function RecentlyViewed({ title }) {
    // selectedItems 초기화 작업
    const initialSelectedItems = recentlyDatas?.reduce((acc, currVal) => {
      currVal.productInfos.map((item) => {
-        acc[item.prdtId] = false;
+        if (item.prdtId) {
+          acc[item.prdtId] = false;
+        } else if (item.showId) {
+          acc[item.showId] = false;
+        }
      });
      return acc;
    }, {});
@@ -108,15 +114,21 @@ export default function RecentlyViewed({ title }) {
  }, [dispatch]);

  const handleDeleteBtnClick = useCallback(() => {
+    dispatch(
+      changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
+    );
    if (activeDelete) {
-      let recentItems =
-        JSON.parse(window.localStorage.getItem("recentItems")) || [];
+      let recentItems = [...localRecentItems];

      Object.entries(selectedItems).forEach(([id, selected]) => {
        if (selected) {
          recentlyDatas.forEach((data, index) => {
            let productIndex = data.productInfos.findIndex((item) => {
-              return item.prdtId === id;
+              if (item.prdtId) {
+                return item.prdtId === id;
+              } else if (item.showId) {
+                return item.showId === id;
+              }
            });

            if (productIndex !== -1) {
@@ -133,11 +145,17 @@ export default function RecentlyViewed({ title }) {
                  });
            }
          });
-          recentItems = recentItems.filter((item) => item.prdtId !== id);
+          recentItems = recentItems.filter((item) => {
+            if (item.prdtId) {
+              return item.prdtId !== id;
+            } else if (item.showId) {
+              return item.showId !== id;
+            }
+          });
        }
      });

-      window.localStorage.setItem("recentItems", JSON.stringify(recentItems));
+      dispatch(changeLocalSettings({ recentItems }));

      if (Object.keys(selectedItems).length - recentItems.length > 0) {
        sendLogMyPageMyDelete({
@@ -147,7 +165,13 @@ export default function RecentlyViewed({ title }) {
    }

    setActiveDelete((prev) => !prev);
-  }, [recentlyDatas, selectedItems, activeDelete, sendLogMyPageMyDelete]);
+  }, [
+    recentlyDatas,
+    selectedItems,
+    activeDelete,
+    localRecentItems,
+    sendLogMyPageMyDelete,
+  ]);

  const handleSelectAllToggle = useCallback(() => {
    const newState = !selectAll;
@@ -194,57 +218,51 @@ export default function RecentlyViewed({ title }) {
    dispatch(
      changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
    );
-    const items = JSON.parse(window.localStorage.getItem("recentItems"));
+
    let productListData = [];
-    if (items) {
-      items.map((item) => {
-        const { cntryCd, patnrId, prdtId } = item;
-        productListData.push({ cntryCd, patnrId, prdtId });
+    let showListData = [];
+
+    if (localRecentItems && localRecentItems.length > 0) {
+      localRecentItems.map((item) => {
+        const { cntryCd, patnrId, prdtId, showId } = item;
+        if (item.prdtId) {
+          productListData.push({ cntryCd, patnrId, prdtId });
+        } else if (item.showId) {
+          showListData.push({ cntryCd, patnrId, showId });
+        }
      });
      dispatch(
        getMyRecentlyViewedInfo({
-          showList: [],
+          showList: showListData,
          productList: productListData,
        })
      );
+    } else {
+      setLoading(false);
+      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
    }
-    // // const items = JSON.parse(window.localStorage.getItem("recentItems"));
-    // let productListData = [];
-    // if (recentItemsLocal) {
-    //   recentItemsLocal.map((item) => {
-    //     const { cntryCd, patnrId, prdtId } = item;
-    //     productListData.push({ cntryCd, patnrId, prdtId });
-    //   });
-    //   dispatch(
-    //     getMyRecentlyViewedInfo({
-    //       showList: [],
-    //       productList: productListData,
-    //     })
-    //   );
-    // }
-  }, [recentlydataInfo, dispatch]);
+  }, [dispatch, localRecentItems]);

  useEffect(() => {
    if (
-      recentlydataInfo?.data?.recentlyProducts &&
+      (recentlyProductsData?.length > 0 || recentlyShowData?.length > 0) &&
      recentlydataInfo?.retCode === 0
    ) {
-      const items = JSON.parse(window.localStorage.getItem("recentItems"));
      const currentTime = new Date().getTime();
      const groupedItems = {};
      let newMakeArray = [];

-      if (items) {
-        items.forEach((item) => {
-          const { date, prdtId, expireTime } = item;
+      if (localRecentItems && localRecentItems.length > 0) {
+        localRecentItems.forEach((item) => {
+          const { date, prdtId, expireTime, showId } = item;

          if (expireTime > currentTime) {
            newMakeArray.push(item);
          } else return;

-          const productInfo = recentlydataInfo.data.recentlyProducts.find(
-            (product) => product.prdtId === prdtId
-          );
+          const productInfo = prdtId
+            ? recentlyProductsData.find((product) => product.prdtId === prdtId)
+            : recentlyShowData.find((product) => product.showId === showId);

          if (productInfo) {
            if (!groupedItems[date]) {
@@ -253,12 +271,15 @@ export default function RecentlyViewed({ title }) {
                productInfos: [],
              };
            }
-
            const existingProductIndex = groupedItems[
              date
-            ].productInfos.findIndex(
-              (existingProduct) => existingProduct.prdtId === prdtId
-            );
+            ].productInfos.findIndex((existingProduct) => {
+              if (existingProduct.prdtId) {
+                return existingProduct.prdtId === prdtId;
+              } else {
+                return existingProduct.showId === showId;
+              }
+            });
            if (existingProductIndex !== -1) {
              groupedItems[date].productInfos.splice(existingProductIndex, 1);
            }
@@ -267,29 +288,22 @@ export default function RecentlyViewed({ title }) {
        });
      }
      const result = Object.values(groupedItems);
-
      sortedRecentlyDatas(result);

      // 만료 기간이 지난 데이터 삭제 후 로컬 스토리지에 새로운 배열 저장
-      window.localStorage.setItem("recentItems", JSON.stringify(newMakeArray));
-
      setLoading(false);
      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
    }
-  }, [recentlydataInfo, dispatch]);
+  }, [recentlydataInfo, dispatch, localRecentItems]);

  useEffect(() => {
-    const recentItems =
-      JSON.parse(window.localStorage.getItem("recentItems")) || [];
-
-    // 국가 코드 다르면 localStorage data 삭제
-    const checkCntryCd = recentItems.findIndex((item) => {
+    // 국가 코드 다르면 local data 삭제
+    const checkCntryCd = localRecentItems.findIndex((item) => {
      return item.cntryCd !== httpHeader["X-Device-Country"];
    });

    if (checkCntryCd !== -1) {
-      window.localStorage.removeItem("recentItems");
-      window.localStorage.clear();
+      dispatch(changeLocalSettings({ recentItems: [] }));
    }
  }, [httpHeader]);

@@ -348,9 +362,9 @@ export default function RecentlyViewed({ title }) {
          <div data-marker={"scroll-marker"} />
          {!loading &&
            recentlyViewedSuccess === 0 &&
-            // hasRecentlyViewedData === "success" &&
-            recentlyProductsData &&
-            recentlyProductsData?.length > 0 &&
+            (recentlyProductsData || recentlyShowData) &&
+            (recentlyProductsData?.length > 0 ||
+              recentlyShowData?.length > 0) &&
            recentlyDatas.map((recentDataInfoItem, index, array) => {
              return (
                <RecentlyViewedContents
@@ -363,7 +377,11 @@ export default function RecentlyViewed({ title }) {
                  itemHeight={SIZES.itemHeight}
                  spacing={SIZES.spacing}
                  recentDataInfoItem={recentDataInfoItem}
-                  key={`${recentDataInfoItem.productInfos.prdtId}-${recentDataInfoItem.productInfos.patnrId}-${index}`}
+                  key={`${
+                    recentDataInfoItem.productInfos.prdtId
+                      ? recentDataInfoItem.productInfos.prdtId
+                      : recentDataInfoItem.productInfos.showId
+                  }-${recentDataInfoItem.productInfos.patnrId}-${index}`}
                  selectedItems={selectedItems}
                  scrollTopBody={scrollTopBody}
                  selectedPatnrId={selectedPatnrId}
@@ -372,24 +390,20 @@ export default function RecentlyViewed({ title }) {
                />
              );
            })}
-          {!loading &&
-            recentlyViewedSuccess !== null &&
-            /* hasRecentlyViewedData === "empty" && */
-            (!recentlyProductsData ||
-              (recentlyDatas && recentlyDatas.length === 0)) && (
-              <div className={css.noRecentDataWrap}>
-                <h1 className={css.noRecentTitle}>
-                  {$L("You have not any recently viewed pages")}
-                </h1>
-                <TButton
-                  className={css.backBtn}
-                  onClick={handlePreviousButtonClick}
-                  spotlightId={"mypage-recentlyViewed-nodata"}
-                >
-                  {$L("Back")}
-                </TButton>
-              </div>
-            )}
+          {!loading && recentlyDatas?.length <= 0 && (
+            <div className={css.noRecentDataWrap}>
+              <h1 className={css.noRecentTitle}>
+                {$L("You have not any recently viewed pages")}
+              </h1>
+              <TButton
+                className={css.backBtn}
+                onClick={handlePreviousButtonClick}
+                spotlightId={"mypage-recentlyViewed-nodata"}
+              >
+                {$L("Back")}
+              </TButton>
+            </div>
+          )}
        </div>
      </TBody>
    </>
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewedContents.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewedContents.jsx
@@ -9,6 +9,7 @@ import {
 } from "@enact/spotlight/src/container";

 import { pushPanel } from "../../../../actions/panelActions";
+import { startVideoPlayer } from "../../../../actions/playActions";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import useScrollReset from "../../../../hooks/useScrollReset";
 import useScrollTo from "../../../../hooks/useScrollTo";
@@ -58,16 +59,37 @@ export default function RecentlyViewedContents({

  const renderItem = useCallback(
    ({ index, ...rest }) => {
-      const { imgUrl, patnrId, prdtId, prdtNm, soldOutYn } =
-        recentDataInfoItem.productInfos[index];
+      const {
+        imgUrl,
+        patnrId,
+        showId,
+        prdtId,
+        prdtNm,
+        soldOutYn,
+        lgCatCd,
+        thumbnailUrl,
+        showNm,
+      } = recentDataInfoItem.productInfos[index];

      const handleItemClick = () => {
-        dispatch(
-          pushPanel({
-            name: panel_names.DETAIL_PANEL,
-            panelInfo: { patnrId, prdtId },
-          })
-        );
+        if (showId) {
+          dispatch(
+            startVideoPlayer({
+              showId,
+              patnrId,
+              shptmBanrTpNm: "VOD",
+              lgCatCd,
+              modal: false,
+            })
+          );
+        } else {
+          dispatch(
+            pushPanel({
+              name: panel_names.DETAIL_PANEL,
+              panelInfo: { patnrId, prdtId },
+            })
+          );
+        }
      };

      const handleFocus = (index, num) => {
@@ -96,14 +118,14 @@ export default function RecentlyViewedContents({
      return (
        <MyPageItemCard
          {...rest}
-          key={`${prdtId}-${patnrId}`}
-          thumbnail={imgUrl}
-          title={prdtNm}
+          key={`${prdtId ? prdtId : showId}-${patnrId}`}
+          thumbnail={prdtId ? imgUrl : thumbnailUrl}
+          title={prdtId ? prdtNm : showNm}
          soldOutYn={soldOutYn}
          activeDelete={activeDelete}
-          selected={selectedItems[prdtId]}
+          selected={selectedItems[prdtId ? prdtId : showId]}
          onClick={handleItemClick}
-          onToggle={() => handleItemToggle(prdtId)}
+          onToggle={() => handleItemToggle(prdtId ? prdtId : showId)}
          onFocusSpot={() => handleFocus(index, indexNo)}
          onBlur={() => handleBlur(index)}
          spotlightId={index === 0 && indexNo === 0 ? firstSpot : null}
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -14,7 +14,7 @@ import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

 import dummyVtt from "../../../assets/mock/video.vtt";
-import * as CommonActions from "../../actions/commonActions";
+import { changeLocalSettings } from "../../actions/commonActions";
 import {
  clearShopNowInfo,
  getHomeFullVideoInfo,
@@ -110,6 +110,10 @@ const PlayerPanel = ({
  const featuredShowsInfos = useSelector(
    (state) => state.main.featuredShowsInfos
  );
+  const localRecentItems = useSelector(
+    (state) => state.localSettings?.recentItems
+  );
+  const httpHeader = useSelector((state) => state.common?.httpHeader);

  const liveChannelInfos = useSelector((state) => state.main.liveChannelInfos);
  const showNowInfos = useSelector((state) => state.main.showNowInfo);
@@ -536,6 +540,50 @@ const PlayerPanel = ({
    Spotlight.focus("player-tab-arrow");
  }, [sideContentsVisible]);

+  const saveToLocalSettings = useCallback(() => {
+    if (panelInfo?.shptmBanrTpNm === "VOD") {
+      let recentItems = [];
+      if (localRecentItems) {
+        recentItems = [...localRecentItems];
+      }
+
+      const currentDate = new Date();
+
+      const formattedDate = `${
+        currentDate.getMonth() + 1
+      }/${currentDate.getDate()}`;
+
+      const existingProductIndex = recentItems.findIndex((item) => {
+        if (item.showId) return item.showId === panelInfo.showId;
+      });
+
+      if (existingProductIndex !== -1) {
+        recentItems.splice(existingProductIndex, 1);
+      }
+
+      recentItems.push({
+        patnrId: panelInfo.patnrId,
+        showId: panelInfo.showId,
+        date: formattedDate,
+        expireTime: currentDate.getTime() + 1000 * 60 * 60 * 24 * 14,
+        cntryCd: httpHeader["X-Device-Country"],
+      });
+
+      if (recentItems.length >= 51) {
+        const data = [...recentItems];
+        dispatch(changeLocalSettings({ recentItems: data.slice(1) }));
+      } else {
+        dispatch(changeLocalSettings({ recentItems }));
+      }
+    }
+  }, [panelInfo, httpHeader, localRecentItems, dispatch]);
+
+  useEffect(() => {
+    if (panelInfo && panelInfo.showId && panelInfo.patnrId) {
+      saveToLocalSettings();
+    } else return;
+  }, [panelInfo]);
+
  return (
    <TPanel
      isTabActivated={false}