[RecentlyViewed]

- VOD 항목 추가 작업
- DetailPanel,PlayerPanel : localStorage > changeLocalSettings 로 수정작업

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]);