[RecentlyViewed]

- dummyData => getRecent data 로 교체 작업
- 중복 상품 제거 후 최신으로 업데이트
- 날짜 별 상품 5개 이상일 경우 최신순 상품 업데이트

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx

@@ -5,10 +5,8 @@ import { useDispatch, useSelector } from "react-redux";
 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
-import { getRecents } from "../../../../actions/commonActions";
 import { getMyRecentlyViewedInfo } from "../../../../actions/myPageActions";
 import { pushPanel } from "../../../../actions/panelActions";
-import SectionTitle from "../../../../components/SectionTitle/SectionTitle";
 import TBody from "../../../../components/TBody/TBody";
 import TButton, { TYPES } from "../../../../components/TButton/TButton";
 import TCheckBox from "../../../../components/TCheckBox/TCheckBox";
@@ -26,52 +24,12 @@ const HeaderButtonContainer = SpotlightContainerDecorator(
   "div"
 );
 
-const Container = SpotlightContainerDecorator(
-  { enterTo: "last-focused" },
-  "div"
-);
-
-const dummyRecentDataDateVer = [
-  {
-    date: "Today",
-    productInfos: [
-      {
-        patnrId: "1",
-        patncLogoPath:
-          "http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
-        prdtId: "A637480",
-        prdtNm: "Women with Control Tummy Control Ruffle One-Piece Swimsuit",
-        imgUrl:
-          "http://qvc.scene7.com/is/image/QVC/a/80/a637480.001?wid=240&hei=240&fmt=jpg&qlt=85,1&op_sharpen=1",
-        price: "$ 69.98",
-        soldOutYn: "N",
-      },
-    ],
-  },
-  {
-    date: "4/5",
-    productInfos: [
-      {
-        dataTp: "P",
-        patnrId: "1",
-        patncLogoPath:
-          "http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
-        prdtId: "A92110",
-        prdtNm: "Denim & Co. Stretch Velveteen Long Denim Jacket",
-        imgUrl:
-          "http://qvc.scene7.com/is/image/QVC/a/10/a92110.001?wid=240&hei=240&fmt=jpg&qlt=85,1&op_sharpen=1",
-        price: "$ 75.98",
-        soldOutYn: "N",
-      },
-    ],
-  },
-];
-
 export default function RecentlyViewed({ title, cbScrollTo }) {
   const [activeDelete, setActiveDelete] = useState(false);
   const [selectedItems, setSelectedItems] = useState({});
   const [selectAll, setSelectAll] = useState(false);
   const [selectedPatnrId, setSelectedPatnrId] = useState();
+  const [recentlyDatas, setRecentlyDatas] = useState([]);
   const dispatch = useDispatch();
 
   const panelInfo = useSelector((state) => state.panels.panels[0].panelInfo);
@@ -82,10 +40,10 @@ export default function RecentlyViewed({ title, cbScrollTo }) {
   const { getScrollTo, scrollTop: scrollTopBody } = useScrollTo();
 
   useEffect(() => {
-    if (dummyRecentDataDateVer) {
+    if (recentlyDatas) {
       timerRef.current = setTimeout(() => Spotlight.focus(""), 0);
     }
-  }, [dummyRecentDataDateVer]);
+  }, [recentlyDatas]);
 
   useEffect(() => {
     if (panelInfo) {
@@ -100,17 +58,13 @@ export default function RecentlyViewed({ title, cbScrollTo }) {
   }, []);
 
   useEffect(() => {
-    const initialSelectedItems = dummyRecentDataDateVer?.reduce(
-      (acc, item, index) => {
-        acc[item.productInfos[0].prdtId] = false;
-
-        return acc;
-      },
-      {}
-    );
+    const initialSelectedItems = recentlyDatas?.reduce((acc, item, index) => {
+      acc[item.productInfos[0].prdtId] = false;
+      return acc;
+    }, {});
 
     setSelectedItems(initialSelectedItems);
-  }, [dummyRecentDataDateVer]);
+  }, [recentlyDatas]);
 
   useEffect(() => {
     groupByDate();
@@ -134,8 +88,9 @@ export default function RecentlyViewed({ title, cbScrollTo }) {
         },
         {}
       );
-
+      console.log("#updatedSelectedItems", updatedSelectedItems);
       setSelectedItems(updatedSelectedItems);
+
       setSelectAll(false);
 
       let productList = [];
@@ -143,7 +98,7 @@ export default function RecentlyViewed({ title, cbScrollTo }) {
 
       Object.entries(selectedItems).forEach(([id, selected]) => {
         if (selected) {
-          const item = dummyRecentDataDateVer.find(
+          const item = recentlyDatas.find(
             (item) => item.prdtId === id || item.showId === id
           );
           if (item.prdtId === id) {
@@ -160,7 +115,7 @@ export default function RecentlyViewed({ title, cbScrollTo }) {
     }
 
     setActiveDelete((prev) => !prev);
-  }, [dispatch, dummyRecentDataDateVer, selectedItems, activeDelete]);
+  }, [dispatch, recentlyDatas, selectedItems, activeDelete]);
 
   const handleSelectAllToggle = useCallback(() => {
     const newState = !selectAll;
@@ -192,28 +147,27 @@ export default function RecentlyViewed({ title, cbScrollTo }) {
   const handleCancelButtonClick = useCallback(() => {
     setActiveDelete(false);
 
-    const initialSelectedItems = dummyRecentDataDateVer?.reduce((acc, item) => {
+    const initialSelectedItems = recentlyDatas?.reduce((acc, item) => {
       acc[item.prdtId] = false;
       return acc;
     }, {});
 
     setSelectedItems(initialSelectedItems);
     setSelectAll(false);
-  }, [dummyRecentDataDateVer]);
+  }, [recentlyDatas]);
 
   const groupByDate = useCallback(() => {
     const items = JSON.parse(window.localStorage.getItem("recentItems"));
-    // const groupedItems = {};
-    let tempProductList = [];
+    let productListData = [];
     if (items) {
       items.map((item, idx) => {
         const { date, cntryCd, patnrId, prdtId } = item;
-        tempProductList.push({ cntryCd, patnrId, prdtId });
+        productListData.push({ cntryCd, patnrId, prdtId });
       });
       dispatch(
         getMyRecentlyViewedInfo({
           showList: [],
-          productList: tempProductList,
+          productList: productListData,
         })
       );
     }
@@ -223,22 +177,55 @@ export default function RecentlyViewed({ title, cbScrollTo }) {
     if (recentlyData?.data?.recentlyProducts && recentlyData?.retCode === 0) {
       const items = JSON.parse(window.localStorage.getItem("recentItems"));
       const groupedItems = {};
-      console.log("#recentlyData", recentlyData);
-      items.map((item, idx) => {
-        const { date, cntryCd, patnrId, prdtId } = item;
-        recentlyData?.data?.recentlyProducts.forEach((data) => {
-          if (prdtId == data.prdtId) {
-            if (!groupedItems[date]) {
-              groupedItems[date] = [];
-            }
-            groupedItems[date].push(data);
+
+      items.forEach((item) => {
+        const { date, prdtId } = item;
+        const productInfo = recentlyData.data.recentlyProducts.find(
+          (product) => product.prdtId === prdtId
+        );
+
+        if (productInfo) {
+          if (!groupedItems[date]) {
+            groupedItems[date] = {
+              date: date,
+              productInfos: [],
+            };
           }
-        });
+
+          const existingProductIndex = groupedItems[
+            date
+          ].productInfos.findIndex(
+            (existingProduct) => existingProduct.prdtId === prdtId
+          );
+          if (existingProductIndex !== -1) {
+            // 이미 존재하는 상품일 경우, 기존 상품을 제거하고 새로운 상품을 추가 업데이트
+            groupedItems[date].productInfos.splice(existingProductIndex, 1);
+          } else if (groupedItems[date].productInfos.length >= 5) {
+            // 최대 상품 개수가 5개를 넘어가면 가장 오래된 상품 제거
+            groupedItems[date].productInfos.pop();
+          }
+          groupedItems[date].productInfos.unshift(productInfo);
+        }
       });
-      console.log("#groupedItems", groupedItems);
+      const result = Object.values(groupedItems);
+
+      sortedRecentlyDatas(result);
     }
   }, [recentlyData]);
 
+  const sortedRecentlyDatas = useCallback(
+    (data) => {
+      const sortedDatas = data.slice().sort((a, b) => {
+        return new Date(b.date) - new Date(a.date);
+        // 최신 날짜 순 정렬
+      });
+      setRecentlyDatas(sortedDatas);
+    },
+    [recentlyDatas]
+  );
+
+  console.log("#recentlyDatas", recentlyDatas);
+
   return (
     <>
       <THeader title={title} className={css.recentlyViewedHeader}>
@@ -261,7 +248,7 @@ export default function RecentlyViewed({ title, cbScrollTo }) {
               </TButton>
             </>
           )}
-          {dummyRecentDataDateVer && dummyRecentDataDateVer.length > 0 && (
+          {recentlyDatas && recentlyDatas.length > 0 && (
             <TButton
               type={TYPES.mypage}
               className={css.deleteBtn}
@@ -275,8 +262,8 @@ export default function RecentlyViewed({ title, cbScrollTo }) {
 
       <TBody cbScrollTo={cbScrollTo}>
         <div className={css.container}>
-          {dummyRecentDataDateVer && dummyRecentDataDateVer.length > 0 ? (
-            dummyRecentDataDateVer.map((recentDataInfoItem, index, array) => {
+          {recentlyDatas && recentlyDatas.length > 0 ? (
+            recentlyDatas.map((recentDataInfoItem, index, array) => {
               return (
                 <RecentlyViewedContents
                   title={recentDataInfoItem.date}