[launchMemberShipApp] MyInfo 멤버쉽 앱 연결 연동

[MypagePanel] CouponTab - ui 변경 Reminders - ui 작업 및 데이터 연동 중 Favorites - 에어마우스 시 select 안 되던 현상 수정
2024-03-31 20:29:56 +09:00
parent 5441332c9e
commit 36c7acf03e
15 changed files with 517 additions and 42 deletions
--- a/com.twin.app.shoptime/src/actions/actionTypes.js
+++ b/com.twin.app.shoptime/src/actions/actionTypes.js
@@ -75,6 +75,12 @@ export const types = {
  DELETE_MY_FAVORITE: "DELETE_MY_FAVORITE",
  GET_MY_FAVORITE_FLAG: "GET_MY_FAVORITE_FLAG",
  SET_MY_TERMS_WITHDRAW: "SET_MY_TERMS_WITHDRAW",
+  GET_MY_UPCOMING_CHANGE_INFO: "GET_MY_UPCOMING_CHANGE_INFO",
+  GET_MY_UPCOMING_ALERT_SHOW: "GET_MY_UPCOMING_ALERT_SHOW",
+  DELETE_MY_UPCOMING_ALERT_SHOW: "DELETE_MY_UPCOMING_ALERT_SHOW",
+  GET_MY_UPCOMING_ALERT_SHOW_KEYS: "GET_MY_UPCOMING_ALERT_SHOW_KEYS",
+  SET_MY_UPCOMING_USE_ALERT: "SET_MY_UPCOMING_USE_ALERT",
+  GET_UPCOMING_ALERT_SHOW_CHANGE_INFO: "GET_UPCOMING_ALERT_SHOW_CHANGE_INFO",

  // onSale actions
  GET_ON_SALE_INFO: "GET_ON_SALE_INFO",
--- a/com.twin.app.shoptime/src/actions/commonActions.js
+++ b/com.twin.app.shoptime/src/actions/commonActions.js
@@ -188,4 +188,16 @@ export const getTermsAgreeYn = () => (dispatch, getState) => {
  });
 };

-export const launchMembershipApp = (from) => (dispatch, getState) => {};
+export const launchMembershipApp = (from) => (dispatch, getState) => {
+  const webOSVersion = getState().common.appStatus.webOSVersion;
+
+  lunaSend.launchMembershipApp(webOSVersion, {
+    onSuccess: (res) => {
+      console.log(res);
+    },
+
+    onFailure: (err) => {
+      console.log(err);
+    },
+  });
+};
--- a/com.twin.app.shoptime/src/actions/myPageActions.js
+++ b/com.twin.app.shoptime/src/actions/myPageActions.js
@@ -195,3 +195,169 @@ export const setMyTermsWithdraw = (params) => (dispatch, getState) => {
    onFail
  );
 };
+
+// MyPage Upcoming Alert 정보 변경 조회 (IF-LGSP-050)
+export const getMyUpcomingChangeInfo = () => (dispatch, getState) => {
+  const onSuccess = (response) => {
+    console.log("getMyUpcomingChangeInfo onSuccess ", response.data);
+
+    dispatch({
+      type: types.GET_MY_UPCOMING_CHANGE_INFO,
+      payload: response.data.data,
+    });
+  };
+
+  const onFail = (error) => {
+    console.error("getMyUpcomingChangeInfo onFail ", error);
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "get",
+    URLS.GET_MY_UPCOMING_CHANGE_INFO,
+    {},
+    {},
+    onSuccess,
+    onFail
+  );
+};
+
+// MyPage Upcoming Alert Show 목록 (IF-LGSP-025)
+export const getMyUpcomingAlertShow = () => (dispatch, getState) => {
+  const onSuccess = (response) => {
+    console.log("getMyUpcomingAlertShow onSuccess ", response.data);
+
+    dispatch({
+      type: types.GET_MY_UPCOMING_ALERT_SHOW,
+      payload: response.data.data,
+    });
+  };
+
+  const onFail = (error) => {
+    console.error("getMyUpcomingAlertShow onFail ", error);
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "get",
+    URLS.GET_MY_UPCOMING_ALERT_SHOW,
+    {},
+    {},
+    onSuccess,
+    onFail
+  );
+};
+
+// MyPage UpComing Alert Show 삭제 (IF-LGSP-042)
+export const deleteMyUpcomingAlertShow = (params) => (dispatch, getState) => {
+  const { patnrId, showId } = params;
+
+  const onSuccess = (response) => {
+    console.log("deleteMyUpcomingAlertShow onSuccess ", response.data);
+
+    dispatch({
+      type: types.DELETE_MY_UPCOMING_ALERT_SHOW,
+      payload: response.data,
+    });
+  };
+
+  const onFail = (error) => {
+    console.error("deleteMyUpcomingAlertShow onFail ", error);
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "post",
+    URLS.DELETE_MY_UPCOMING_ALERT_SHOW,
+    {},
+    { patnrId, showId },
+    onSuccess,
+    onFail
+  );
+};
+
+// MyPage Upcoming Alert Show - Key 목록 (IF-LGSP-076)
+export const getMyUpcomingAlertShowKeys = () => (dispatch, getState) => {
+  const onSuccess = (response) => {
+    console.log("getMyUpcomingAlertShowKeys onSuccess ", response.data);
+
+    dispatch({
+      type: types.GET_MY_UPCOMING_ALERT_SHOW_KEYS,
+      payload: response.data.data,
+    });
+  };
+
+  const onFail = (error) => {
+    console.error("getMyUpcomingAlertShowKeys onFail ", error);
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "get",
+    URLS.GET_MY_UPCOMING_ALERT_SHOW_KEYS,
+    {},
+    {},
+    onSuccess,
+    onFail
+  );
+};
+
+// MyPage Upcoming Alert 수신 여부 설정 (IF-LGSP-029)
+export const setMyUpcomingUseAlert = (params) => (dispatch, getState) => {
+  const { upcomingAlamUseFlag } = params;
+
+  const onSuccess = (response) => {
+    console.log("setMyUpcomingUseAlert onSuccess ", response.data);
+
+    dispatch({
+      type: types.SET_MY_UPCOMING_USE_ALERT,
+      payload: response.data,
+    });
+  };
+
+  const onFail = (error) => {
+    console.error("setMyUpcomingUseAlert onFail ", error);
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "post",
+    URLS.SET_MY_UPCOMING_USE_ALERT,
+    {},
+    { upcomingAlamUseFlag },
+    onSuccess,
+    onFail
+  );
+};
+
+// UpComing Alert 방송 변경 정보 조회 (IF-LGSP-068)
+export const getUpcomingAlertShowChangeInfo = () => (dispatch, getState) => {
+  const onSuccess = (response) => {
+    console.log("getUpcomingAlertShowChangeInfo onSuccess ", response.data);
+
+    dispatch({
+      type: types.GET_UPCOMING_ALERT_SHOW_CHANGE_INFO,
+      payload: response.data.data,
+    });
+  };
+
+  const onFail = (error) => {
+    console.error("getUpcomingAlertShowChangeInfo onFail ", error);
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "get",
+    URLS.GET_UPCOMING_ALERT_SHOW_CHANGE_INFO,
+    {},
+    {},
+    onSuccess,
+    onFail
+  );
+};
--- a/com.twin.app.shoptime/src/api/apiConfig.js
+++ b/com.twin.app.shoptime/src/api/apiConfig.js
@@ -57,6 +57,14 @@ export const URLS = {
  DELETE_MY_FAVORITE: "/lgsp/v1/mypage/favorite.lge",
  GET_MY_FAVORITE_FLAG: "/lgsp/v1/mypage/favorite/flag.lge",
  SET_MY_TERMS_WITHDRAW: "/lgsp/v1/mypage/terms/withdraw.lge",
+  GET_MY_UPCOMING_CHANGE_INFO: "/lgsp/v1/mypage/upcoming/alert/changeinfo.lge",
+  GET_MY_UPCOMING_ALERT_SHOW: "/lgsp/v1/mypage/upcoming/alert/show.lge",
+  DELETE_MY_UPCOMING_ALERT_SHOW: "/lgsp/v1/mypage/upcoming/alert/show.lge",
+  GET_MY_UPCOMING_ALERT_SHOW_KEYS:
+    "/lgsp/v1/mypage/upcoming/alert/show/keys.lge",
+  SET_MY_UPCOMING_USE_ALERT: "/lgsp/v1/mypage/upcoming/alert/use.lge",
+  GET_UPCOMING_ALERT_SHOW_CHANGE_INFO:
+    "/lgsp/v1/mypage/upcoming/show/changeinfo.lge",

  //search controller
  GET_SEARCH: "/lgsp/v1/search/list.lge",
--- a/com.twin.app.shoptime/src/components/TSwitch/TSwitch.jsx
+++ b/com.twin.app.shoptime/src/components/TSwitch/TSwitch.jsx
@@ -5,7 +5,7 @@ import classNames from "classnames";
 import Switch from "../../../node_modules/@enact/sandstone/Switch/Switch";
 import css from "../TSwitch/TSwitch.module.less";

-export default function TSwitch({ disabled, className, onClick }) {
+export default function TSwitch({ disabled, className, onClick, selected }) {
  const _onClick = useCallback(
    (e) => {
      if (disabled) {
@@ -21,6 +21,10 @@ export default function TSwitch({ disabled, className, onClick }) {
  );

  return (
-    <Switch className={classNames(css.tSwitch, className)} onClick={_onClick} />
+    <Switch
+      className={classNames(css.tSwitch, className)}
+      onClick={_onClick}
+      selected={selected}
+    />
  );
 }
--- a/com.twin.app.shoptime/src/reducers/myPageReducer.js
+++ b/com.twin.app.shoptime/src/reducers/myPageReducer.js
@@ -7,6 +7,12 @@ const initialState = {
  noticeData: {},
  favoriteData: {},
  favoriteFlagData: {},
+  upComingData: {
+    upComingChangeInfo: {},
+    upComingAlertShow: {},
+    upComingAlertShowKeys: {},
+    upComingAlertShowChangeInfo: {},
+  },
 };

 export const myPageReducer = (state = initialState, action) => {
@@ -51,6 +57,42 @@ export const myPageReducer = (state = initialState, action) => {
        favoriteFlagData: action.payload,
      };

+    case types.GET_MY_UPCOMING_CHANGE_INFO:
+      return {
+        ...state,
+        upComingData: {
+          ...state.upComingData,
+          upComingChangeInfo: action.payload,
+        },
+      };
+
+    case types.GET_MY_UPCOMING_ALERT_SHOW:
+      return {
+        ...state,
+        upComingData: {
+          ...state.upComingData,
+          upComingAlertShow: action.payload,
+        },
+      };
+
+    case types.GET_MY_UPCOMING_ALERT_SHOW_KEYS:
+      return {
+        ...state,
+        upComingData: {
+          ...state.upComingData,
+          upComingAlertShowKeys: action.payload,
+        },
+      };
+
+    case types.GET_UPCOMING_ALERT_SHOW_CHANGE_INFO:
+      return {
+        ...state,
+        upComingData: {
+          ...state.upComingData,
+          upComingAlertShowChangeInfo: action.payload,
+        },
+      };
+
    default:
      return state;
  }
--- a/com.twin.app.shoptime/src/utils/Config.js
+++ b/com.twin.app.shoptime/src/utils/Config.js
@@ -48,8 +48,7 @@ export const ACTIVE_POPUP = {
  couponPopup: "couponPopup",
  favoritePopup: "favoritePopup",
  loginPopup: "loginPopup",
-  eventPopup: "eventPopup",
-  smsPopup: "smsPopup",
+  alarmOffPopup: "alarmOffPopup",
 };

 export const AUTO_SCROLL_DELAY = 600;
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageItemCard/MyPageItemCard.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageItemCard/MyPageItemCard.jsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useState } from "react";
+import React, { memo, useCallback, useState } from "react";

 import classNames from "classnames";

@@ -26,6 +26,8 @@ export default memo(function MyPageItemCard({
  selected,
  onToggle,
  onClick,
+  onFocus,
+  onBlur,
 }) {
  const [focus, setFocus] = useState(false);

@@ -39,12 +41,14 @@ export default memo(function MyPageItemCard({
  );

  const _onFocus = useCallback(() => {
-    setFocus(true);
-  }, []);
+    // setFocus(true);
+    onFocus && onFocus();
+  }, [onFocus]);

  const _onBlur = useCallback(() => {
-    setFocus(false);
-  }, []);
+    // setFocus(false);
+    onBlur && onBlur();
+  }, [onBlur]);

  return (
    <div className={css.boxWrap}>
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx
@@ -10,6 +10,7 @@ import myinfo_login from "../../../../../assets/images/img-banner-myinfo-login@3
 import { getMyInfoBillingSearch } from "../../../../actions/billingActions";
 import { getMyInfoCardSearch } from "../../../../actions/cardActions";
 import {
+  launchMembershipApp,
  logoutAccount,
  setHidePopup,
  setShowPopup,
@@ -132,6 +133,10 @@ export default function MyInfo({ title, cbScrollTo }) {
    dispatch(setHidePopup());
  }, [dispatch]);

+  const handleLogin = useCallback(() => {
+    dispatch(launchMembershipApp());
+  }, [dispatch]);
+
  useEffect(() => {
    Spotlight.focus();
  }, [popupVisible]);
@@ -167,7 +172,11 @@ export default function MyInfo({ title, cbScrollTo }) {
                    {$L("LOG OUT")}
                  </TButton>
                ) : (
-                  <TButton type={TYPES.mypage} className={css.loginButton}>
+                  <TButton
+                    type={TYPES.mypage}
+                    className={css.loginButton}
+                    onClick={handleLogin}
+                  >
                    {$L("SIGN IN (LG Account)")}
                  </TButton>
                )}
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/CouponTab/CouponTab.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/CouponTab/CouponTab.jsx
@@ -5,6 +5,7 @@ import { useSelector } from "react-redux";
 import TScroller from "../../../../../../components/TScroller/TScroller";
 import useScrollTo from "../../../../../../hooks/useScrollTo";
 import { $L } from "../../../../../../utils/helperMethods";
+import MyInfoNoResults from "../MyInfoNoResults/MyInfoNoResults";
 import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer";
 import CouponListItem from "./CouponListItem";
 import css from "./CouponTab.module.less";
@@ -33,32 +34,34 @@ export default function CouponTab() {
          )}
        </h2>

-        {couponDatas && couponDatas.length > 0
-          ? couponDatas.map((coupon, index) => {
-              const {
-                cpnTtl,
-                cpnDesc,
-                cpnAplyStrtDtt,
-                cpnAplyEndDtt,
-                cpnUseYn,
-                ordNo,
-              } = coupon;
+        {couponDatas && couponDatas.length > 0 ? (
+          couponDatas.map((coupon, index) => {
+            const {
+              cpnTtl,
+              cpnDesc,
+              cpnAplyStrtDtt,
+              cpnAplyEndDtt,
+              cpnUseYn,
+              ordNo,
+            } = coupon;

-              return (
-                <CouponListItem
-                  key={index}
-                  index={index}
-                  scrollTop={scrollTop}
-                  cpnTtl={cpnTtl}
-                  cpnDesc={cpnDesc}
-                  cpnAplyStrtDtt={cpnAplyStrtDtt}
-                  cpnAplyEndDtt={cpnAplyEndDtt}
-                  cpnUseYn={cpnUseYn}
-                  ordNo={ordNo}
-                />
-              );
-            })
-          : null}
+            return (
+              <CouponListItem
+                key={index}
+                index={index}
+                scrollTop={scrollTop}
+                cpnTtl={cpnTtl}
+                cpnDesc={cpnDesc}
+                cpnAplyStrtDtt={cpnAplyStrtDtt}
+                cpnAplyEndDtt={cpnAplyEndDtt}
+                cpnUseYn={cpnUseYn}
+                ordNo={ordNo}
+              />
+            );
+          })
+        ) : (
+          <MyInfoNoResults type="COUPON" />
+        )}
      </div>
    </TScroller>
  );
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx
@@ -1,13 +1,27 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
+
+import { useDispatch, useSelector } from "react-redux";

 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

+import { setHidePopup, setShowPopup } from "../../../../actions/commonActions";
+import {
+  getMyUpcomingAlertShow,
+  getMyUpcomingAlertShowKeys,
+  getMyUpcomingChangeInfo,
+  getUpcomingAlertShowChangeInfo,
+  setMyUpcomingUseAlert,
+} from "../../../../actions/myPageActions";
 import TBody from "../../../../components/TBody/TBody";
 import TButton, { TYPES } from "../../../../components/TButton/TButton";
 import THeader from "../../../../components/THeader/THeader";
+import TPopUp from "../../../../components/TPopUp/TPopUp";
 import TSwitch from "../../../../components/TSwitch/TSwitch";
+import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
+import * as Config from "../../../../utils/Config";
 import { $L } from "../../../../utils/helperMethods";
 import css from "./Reminders.module.less";
+import RemindersCard, { SIZES } from "./RemindersCard";

 const HeaderButtonContainer = SpotlightContainerDecorator(
  {
@@ -20,18 +34,125 @@ const HeaderButtonContainer = SpotlightContainerDecorator(
 );

 export default function Reminders({ title, cbScrollTo }) {
+  const dispatch = useDispatch();
+
+  const {
+    upComingChangeInfo,
+    upComingAlertShow,
+    upComingAlertShowKeys,
+    upComingAlertShowChangeInfo,
+  } = useSelector((state) => state.myPage.upComingData);
+  const { popupVisible, activePopup } = useSelector(
+    (state) => state.common.popup
+  );
+
+  const [useAlarm, setUseAlarm] = useState(
+    upComingAlertShow?.upcomAlamUseFlag === "Y"
+  );
+  const [activeDelete, setActiveDelete] = useState(false);
+  const [selectedItems, setSelectedItems] = useState({});
+  const [selectAll, setSelectAll] = useState(false);
+
+  useEffect(() => {
+    setUseAlarm(upComingAlertShow?.upcomAlamUseFlag === "Y");
+  }, [upComingAlertShow]);
+
+  useEffect(() => {
+    dispatch(getMyUpcomingChangeInfo());
+    dispatch(getMyUpcomingAlertShow());
+    dispatch(getMyUpcomingAlertShowKeys());
+    dispatch(getUpcomingAlertShowChangeInfo());
+  }, [dispatch]);
+
+  const handleToggleSwitchButton = useCallback(() => {
+    const flag = useAlarm ? "N" : "Y";
+
+    if (flag === "N") {
+      dispatch(setShowPopup(Config.ACTIVE_POPUP.alarmOffPopup));
+    }
+
+    dispatch(setMyUpcomingUseAlert({ upcomingAlamUseFlag: flag }));
+    setUseAlarm(!useAlarm);
+  }, [dispatch, useAlarm]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(setHidePopup());
+  }, [dispatch]);
+
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      const item = upComingAlertShow.alertShows[index];
+
+      return (
+        <RemindersCard
+          {...rest}
+          key={index}
+          alamDispFlag={item.alamDispFlag}
+          chanId={item.chanId}
+          dfltThumbnailImgPath={item.dfltThumbnailImgPath}
+          endDt={item.endDt}
+          hstNm={item.hstNm}
+          lgCatCd={item.lgCatCd}
+          lgCatNm={item.lgCatNm}
+          patncLogoPath={item.patncLogoPath}
+          patncNm={item.patncNm}
+          patnrId={item.patnrId}
+          regDt={item.regDt}
+          showId={item.showId}
+          showNm={item.showNm}
+          strtDt={item.strtDt}
+          thumbnailUrl={item.thumbnailUrl}
+        />
+      );
+    },
+    [upComingAlertShow]
+  );
+
+  console.log("chw", upComingAlertShow);
+
  return (
    <>
      <THeader title={title} className={css.remindersHeader}>
        <HeaderButtonContainer className={css.headerButtonContainer}>
-          <TSwitch className={css.switchBtn} />
+          <TSwitch
+            className={css.switchBtn}
+            selected={useAlarm}
+            onClick={handleToggleSwitchButton}
+          />
          <TButton type={TYPES.mypage} className={css.deleteBtn}>
            {$L("Delete")}
          </TButton>
        </HeaderButtonContainer>
      </THeader>

-      <TBody cbScrollTo={cbScrollTo}>Reminders</TBody>
+      <TBody cbScrollTo={cbScrollTo}>
+        <div className={css.remindersContentsWrap}>
+          {upComingAlertShow &&
+          upComingAlertShow.alertShows &&
+          upComingAlertShow.alertShows.length > 0 ? (
+            <TVirtualGridList
+              className={css.grid}
+              itemRenderer={renderItem}
+              dataSize={upComingAlertShow.alertShows.length}
+              itemWidth={SIZES.itemWidth}
+              itemHeight={SIZES.itemHeight}
+              spacing={SIZES.spacing}
+            />
+          ) : null}
+        </div>
+      </TBody>
+
+      {activePopup === Config.ACTIVE_POPUP.alarmOffPopup && (
+        <TPopUp
+          kind="textPopup"
+          open={popupVisible}
+          hasButton
+          button1Text={$L("OK")}
+          hasText
+          text={$L("Reminder Notification turned 'OFF'")}
+          onClose={handleCancel}
+        />
+      )}
    </>
  );
 }
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.module.less
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.module.less
@@ -21,3 +21,12 @@
    }
  }
 }
+
+.remindersContentsWrap {
+  .size(@w: 100%, @h: 100%);
+  margin-top: 40px;
+
+  .grid {
+    padding: 0 60px;
+  }
+}
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/RemindersCard.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/RemindersCard.jsx
@@ -0,0 +1,49 @@
+import React, { memo } from "react";
+
+import Spottable from "@enact/spotlight/Spottable";
+
+import CustomImage from "../../../../components/CustomImage/CustomImage";
+import * as HelperMethods from "../../../../utils/helperMethods";
+import css from "./RemindersCard.module.less";
+
+const RemindersItem = Spottable("div");
+
+export const SIZES = {
+  itemWidth: 315,
+  itemHeight: 177,
+  spacing: 26,
+};
+
+export default memo(function RemindersCard({
+  alamDispFlag,
+  chanId,
+  dfltThumbnailImgPath,
+  endDt,
+  hstNm,
+  lgCatCd,
+  lgCatNm,
+  patncLogoPath,
+  patncNm,
+  patnrId,
+  regDt,
+  showId,
+  showNm,
+  strtDt,
+  thumbnailUrl,
+}) {
+  return (
+    <RemindersItem className={css.container}>
+      <p className={css.strtDt}>
+        {HelperMethods.convertToTimeFormat(strtDt, true)}
+      </p>
+      <h2 className={css.showNm}>{showNm}</h2>
+      <span className={css.hstNm}>With Host {hstNm}</span>
+      <CustomImage
+        src={patncLogoPath}
+        delay={0}
+        alt={showId}
+        className={css.patncLogo}
+      />
+    </RemindersItem>
+  );
+});
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/RemindersCard.module.less
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/RemindersCard.module.less
@@ -0,0 +1,46 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+  .size(@w: 315px, @h: 177px);
+  padding: 13px 13px 18px 20px;
+  border: 1px solid #0077c8;
+  background-color: #eef6fb;
+  position: relative;
+
+  .strtDt {
+    color: @PRIMARY_COLOR_RED;
+    .font(@fontFamily: @arialFontBold, @fontSize: 20px);
+    font-weight: bold;
+    line-height: 1.6;
+    letter-spacing: -0.5px;
+    margin-bottom: 3px;
+  }
+
+  .showNm {
+    color: @COLOR_GRAY06;
+    .font(@fontFamily: @arialFontBold, @fontSize: 24px);
+    font-weight: bold;
+    line-height: 1.33;
+    letter-spacing: -0.6px;
+    margin-bottom: 15px;
+  }
+
+  .hstNm {
+    color: #666;
+    .font(@fontFamily: @arialFont, @fontSize: 18px);
+  }
+
+  .patncLogo {
+    position: absolute;
+    .size(@w: 30px, @h: 30px);
+    top: 13px;
+    right: 13px;
+  }
+
+  &:focus {
+    &::after {
+      .focused(@boxShadow:22px);
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx
@@ -38,9 +38,6 @@ export default function TermsOfService({ title, cbScrollTo }) {
    },
    [selectedTab, termsData]
  );
-  useEffect(() => {
-    dispatch(getHomeTerms({ trmsTpCdList: trmsTpCd }));
-  }, [dispatch, trmsTpCd]);

  const handleDisagree = useCallback(() => {
    dispatch(setShowPopup(Config.ACTIVE_POPUP.exitPopup));