[리마인더] D-Days 구현

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

@@ -7,12 +7,14 @@ const initialState = {
   noticeData: {},
   favoriteData: {},
   favoriteFlagData: {},
+  alertShowData: {},
   upComingData: {
     upComingChangeInfo: {},
     upComingAlertShow: {},
     upComingAlertShowKeys: {},
     upComingAlertShowChangeInfo: {},
   },
+  setMyUpcomingUseAlert: {},
 };
 
 export const myPageReducer = (state = initialState, action) => {
@@ -51,6 +53,16 @@ export const myPageReducer = (state = initialState, action) => {
           favorites: action.payload,
         },
       };
+
+    case types.DELETE_MY_UPCOMING_ALERT_SHOW:
+      return {
+        ...state,
+        alertShowData: {
+          ...state.alertShowData,
+          alertShow: action.payload,
+        },
+      };
+
     case types.GET_MY_FAVORITE_FLAG:
       return {
         ...state,
@@ -98,6 +110,12 @@ export const myPageReducer = (state = initialState, action) => {
         recentlyViewedData: action.payload,
       };
 
+    case types.SET_MY_UPCOMING_USE_ALERT:
+      return {
+        ...state,
+        setMyUpcomingUseAlert: action.payload,
+      };
+
     default:
       return state;
   }

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

@@ -41,6 +41,12 @@ export default function Reminders({ title, cbScrollTo }) {
     (state) => state.common.popup
   );
 
+  const { setMyUpcomingUseAlert } = useSelector(
+    (state) => state.myPage.setMyUpcomingUseAlert
+  );
+
+  // console.log(setMyUpcomingUseAlert, "!!!");
+
   const [useAlarm, setUseAlarm] = useState(
     upComingAlertShow?.upcomAlamUseFlag === "Y"
   );
@@ -62,10 +68,6 @@ export default function Reminders({ title, cbScrollTo }) {
     dispatch(getUpcomingAlertShowChangeInfo());
   }, [dispatch]);
 
-  // useEffect(() => {
-  //   return () => timerRef.current && clearTimeout(timerRef.current);
-  // }, []);
-
   // 아이템 설정
   useEffect(() => {
     const initialSelectedItems = upComingAlertShow.alertShows?.reduce(
@@ -76,7 +78,7 @@ export default function Reminders({ title, cbScrollTo }) {
       {}
     );
     setSelectedItems(initialSelectedItems);
-  }, [upComingAlertShow.alertShows]);
+  }, [upComingAlertShow]);
 
   // 스위치 버튼
   const handleToggleSwitchButton = useCallback(() => {
@@ -122,15 +124,15 @@ export default function Reminders({ title, cbScrollTo }) {
         }
       });
 
-      console.log(showList, "쇼리스트");
-
       if (showList.length > 0) {
         dispatch(deleteMyUpcomingAlertShow({ showList }));
+        dispatch(getMyUpcomingAlertShow());
       }
     }
 
+    dispatch(getMyUpcomingAlertShow());
     setActiveDelete((prev) => !prev);
-  }, [dispatch, upComingAlertShow, selectedItems, activeDelete]);
+  }, [dispatch, upComingAlertShow.alertShows, selectedItems, activeDelete]);
 
   // 전체 선택
   const handleSelectAllToggle = useCallback(() => {
@@ -276,7 +278,11 @@ export default function Reminders({ title, cbScrollTo }) {
               itemHeight={SIZES.itemHeight}
               spacing={SIZES.spacing}
             />
-          ) : null}
+          ) : (
+            <div className={css.noDataWrap}>
+              <h1 className={css.noDataTitle}>{$L("No Alerts Yet")}</h1>
+            </div>
+          )}
         </div>
       </TBody>
 

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.module.less

@@ -4,15 +4,22 @@
 .remindersHeader {
   display: flex;
 
+  > div {
+    min-width: 200px !important;
+  }
+
+  .switchBtn {
+    position: fixed;
+    top: 20px;
+    left: 390px;
+  }
+
   .headerButtonContainer {
     display: flex;
     width: 100%;
-    justify-content: space-between;
+    justify-content: flex-end;
     padding-right: 60px;
 
-    .switchBtn {
-    }
-
     .deleteAll {
       margin-right: 34px;
       display: flex;
@@ -26,20 +33,20 @@
       }
     }
 
-    .cancelBtn {
-      min-width: 180px !important;
-      margin: 0;
-      width: 180px;
-      height: 60px;
-      margin-right: 34px;
-    }
-
     .deleteBtn {
       min-width: 180px !important;
       width: 180px;
       margin: 0;
       height: 60px;
     }
+
+    .cancelBtn {
+      min-width: 180px !important;
+      margin: 0;
+      width: 180px;
+      height: 60px;
+      margin-right: 10px;
+    }
   }
 }
 

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/RemindersCard.jsx

@@ -1,6 +1,7 @@
-import React, { memo, useCallback, useState } from "react";
+import React, { memo, useCallback, useEffect, useState } from "react";
 
 import classNames from "classnames";
+import dayjs, { duration } from "dayjs";
 
 import Spottable from "@enact/spotlight/Spottable";
 
@@ -33,13 +34,12 @@ export default memo(function RemindersCard({
   showNm,
   strtDt,
   thumbnailUrl,
-  activeDelete = "true",
+  activeDelete,
   selected,
   onToggle,
   onFocus,
   onBlur,
   onClick,
-  soldOutYn,
 }) {
   const [focus, setFocus] = useState(false);
 
@@ -53,17 +53,57 @@ export default memo(function RemindersCard({
   );
 
   const _onFocus = useCallback(() => {
-    // setFocus(true);
-    onFocus && onFocus();
-  }, [onFocus]);
+    setFocus(true);
+    //onFocus && onFocus();
+  }, [focus]);
 
   const _onBlur = useCallback(() => {
+    setFocus(false);
     // setFocus(false);
-    onBlur && onBlur();
+    // onBlur && onBlur();
   }, [onBlur]);
 
+  const [dDay, setDDay] = useState(strtDt.split(" ")[0]);
+  const [dDayTime, setDDayTime] = useState(strtDt.split(" ")[1]);
+  const [lessDay, setlessDay] = useState("");
+  const [lessTime, setlessTime] = useState("");
+  const [dayOver, setDayOver] = useState(false);
+
+  // 디데이 설정 후 남은 시간 계산
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const today = new Date();
+      const dDayDate = new Date(`${dDay}T${dDayTime}`);
+      const differenceInTime = dDayDate.getTime() - today.getTime();
+      const days = Math.floor(differenceInTime / (1000 * 60 * 60 * 24));
+      const hours = Math.floor(
+        (differenceInTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      const minutes = Math.floor(
+        (differenceInTime % (1000 * 60 * 60)) / (1000 * 60)
+      );
+      const seconds = Math.floor((differenceInTime % (1000 * 60)) / 1000);
+
+      if (differenceInTime < 0) {
+        setDayOver(true);
+      }
+
+      setlessDay(days);
+      setlessTime(`${hours}:${minutes}:${seconds}`);
+    };
+
+    if (dDay && dDayTime) {
+      calculateTimeLeft();
+    }
+  }, [strtDt, focus]);
+
   return (
-    <RemindersItem className={css.container} spotlightDisabled={activeDelete}>
+    <RemindersItem
+      className={css.container}
+      spotlightDisabled={activeDelete}
+      onFocus={_onFocus}
+      onBlur={_onBlur}
+    >
       <p className={css.strtDt}>
         {HelperMethods.convertToTimeFormat(strtDt, true)}
       </p>
@@ -76,13 +116,14 @@ export default memo(function RemindersCard({
         className={css.patncLogo}
       />
 
-      {/* <div className={css.imgWrap}>
-        {soldOutYn === "Y" && (
-          <div className={css.soldOutOverlay}>
-            <p className={css.soldOutText}>{"Comming Soon"}</p>
+      {dayOver === false && focus ? (
+        <div className={css.timeOvelay}>
+          <div>
+            <p>{"Comming Soon"}</p>
+            <p>{lessDay > 0 ? lessDay + " Days" : lessTime}</p>
           </div>
-        )}
-      </div> */}
+        </div>
+      ) : null}
 
       {activeDelete && (
         <div

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/RemindersCard.module.less

@@ -40,10 +40,30 @@
 
   &:focus {
     &::after {
+      z-index: 12;
       .focused(@boxShadow:22px);
     }
   }
 
+  .timeOvelay {
+    .size(@w: 313px, @h: 175px);
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(26, 26, 26, 0.5);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    > div {
+      color: #fff;
+      text-align: center;
+      font-size: 32px;
+      line-height: 1.5;
+      font-weight: bold;
+    }
+  }
+
   .checkboxOverlay {
     position: absolute;
     top: 0;
@@ -55,8 +75,6 @@
 
     .checkbox {
       position: absolute;
-      top: 16px;
-      left: 16px;
     }
 
     &.focus {