From 44ad587fe7d1c978137be7a0eb9b61748332c011 Mon Sep 17 00:00:00 2001
From: "junghoon86.park" <junghoon86.park@lgepartner.com>
Date: Tue, 5 Mar 2024 15:26:57 +0900
Subject: [PATCH] =?UTF-8?q?[TSwitch,Reminderes]=20=EC=8A=A4=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=20=EA=B0=92=EC=A0=84=EB=8B=AC=20=EB=B6=80=EB=B6=84=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=20=20-=20=EA=B8=B0=EC=A1=B4=20Reminderes=20?=
 =?UTF-8?q?=ED=83=AD=EB=B6=80=EB=B6=84=20=EC=A0=9C=EA=B1=B0=20=20-=20?=
 =?UTF-8?q?=EC=8A=A4=EC=9C=84=EC=B9=98=EA=B0=92=20=EC=A0=84=EB=8B=AC?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EC=9E=91=EC=84=B1=20=EB=B0=8F=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/THeader/THeader.jsx        |  10 +-
 .../src/components/TSwitch/TSwitch.jsx        |   4 +-
 .../src/views/MyPagePanel/MyPagePanel.jsx     |  26 +-
 .../MyPageSub/Reminders/Reminders.jsx         | 300 +++++++++++++-----
 4 files changed, 240 insertions(+), 100 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/THeader/THeader.jsx b/com.twin.app.shoptime/src/components/THeader/THeader.jsx
index c882fd41..ae86779c 100644
--- a/com.twin.app.shoptime/src/components/THeader/THeader.jsx
+++ b/com.twin.app.shoptime/src/components/THeader/THeader.jsx
@@ -19,18 +19,16 @@ export default function THeader({
   title,
   className,
   onBackButton,
-  onDeleteButton,
   onClick,
+  chkDelete,
 }) {
   return (
     <Container className={classNames(css.tHeader, className)}>
-      {onBackButton && (
-        <SpottableComponent className={css.button} onClick={onClick} />
-      )}
+      {onBackButton && <SpottableComponent className={css.button} />}
       <div className={css.title}>{title}</div>
-      {title === "Reminders" && onDeleteButton && (
+      {title === "Reminders" && chkDelete && (
         <>
-          <TSwitch selected={true} />
+          <TSwitch onClick={onClick} />
           <TButton
             type={TYPES.mypage}
             className={css.deleteBtn}
diff --git a/com.twin.app.shoptime/src/components/TSwitch/TSwitch.jsx b/com.twin.app.shoptime/src/components/TSwitch/TSwitch.jsx
index 09a0854a..d9778858 100644
--- a/com.twin.app.shoptime/src/components/TSwitch/TSwitch.jsx
+++ b/com.twin.app.shoptime/src/components/TSwitch/TSwitch.jsx
@@ -5,8 +5,8 @@ import classNames from "classnames";
 import Switch from "../../../node_modules/@enact/sandstone/Switch/Switch";
 import css from "../TSwitch/TSwitch.module.less";
 
-export default function TSwitch(className, selected, ...rest) {
+export default function TSwitch({ className, onClick }) {
   return (
-    <Switch {...rest} className={classNames(css.tSwitch, className)}></Switch>
+    <Switch className={classNames(css.tSwitch, className)} onClick={onClick} />
   );
 }
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx
index 2ff806aa..f0cd4dea 100644
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx
@@ -1,11 +1,10 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { useSelector } from "react-redux";
 
 import Spotlight from "@enact/spotlight";
 
 import TBody from "../../components/TBody/TBody";
-import TButton, { TYPES } from "../../components/TButton/TButton";
 import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
 import useScrollTo from "../../hooks/useScrollTo";
@@ -36,6 +35,20 @@ export default function MyPagePanel() {
   };
 
   const SelectedComponent = menuNm && myPageComponents[menuNm];
+  const [isOn, setIsOn] = useState(false);
+  const [checkTmp, setCheckTmp] = useState(false);
+
+  const ToggleHandler = () => {
+    setIsOn(!isOn);
+  };
+
+  useEffect(() => {
+    if (isOn === true) {
+      setCheckTmp(true);
+    } else {
+      setCheckTmp(false);
+    }
+  }, [ToggleHandler]);
 
   useEffect(() => {
     Spotlight.focus(SpotlightIds.TBODY);
@@ -44,9 +57,14 @@ export default function MyPagePanel() {
 
   return (
     <TPanel>
-      <THeader title={menuNm} />
+      <THeader title={menuNm} chkDelete onClick={ToggleHandler} />
       <TBody className={css.tBody} cbScrollTo={getScrollTo}>
-        {SelectedComponent && <SelectedComponent scrollTop={scrollTop} />}
+        {SelectedComponent && (
+          <SelectedComponent
+            scrollTop={scrollTop}
+            checkTmp={menuNm === "Reminders" && isOn === true ? checkTmp : null}
+          />
+        )}
       </TBody>
     </TPanel>
   );
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx
index 228f48ad..c6fdb3f8 100644
--- 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,12 +1,10 @@
-import React, { useCallback, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import classNames from "classnames";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
-import TButton, { SIZES, TYPES } from "../../../../components/TButton/TButton";
-import { $L } from "../../../../utils/helperMethods";
 import css from "../Reminders/Reminders.module.less";
 
 const SpottableComponent = Spottable("div");
@@ -15,17 +13,11 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-const tabList = [$L("Show"), $L("Keyword")];
-export default function Reminders() {
-  const [tab, setTab] = useState(0);
-
-  const handleItemClick = useCallback(
-    ({ index }) => {
-      if (index === tab) return;
-      setTab(index);
-    },
-    [tab]
-  );
+export default function Reminders({ checkTmp }) {
+  const [isCheck, setIsCheck] = useState(false);
+  useEffect(() => {
+    checkTmp === true ? setIsCheck(true) : setIsCheck(false);
+  }, [checkTmp]);
   return (
     <>
       <div className={css.reminderContainer}>
@@ -33,79 +25,12 @@ export default function Reminders() {
           <div className={css.headerBox}></div>
 
           <Container className={css.showItem}>
-            <SpottableComponent className={css.listItem}>
-              <div className={css.logo}>HSN</div>
-              <div className={css.date}>03/21/2020 12:01 PM</div>
-              <div className={css.title}>
-                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
-                Fashions
-              </div>
-              <div className={css.actor}>with Host Michelle Yarn</div>
-            </SpottableComponent>
-            <SpottableComponent className={css.listItem}>
-              <div className={css.logo}>HSN</div>
-              <div className={css.date}>03/21/2020 12:01 PM</div>
-              <div className={css.title}>
-                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
-                Fashions
-              </div>
-              <div className={css.actor}>with Host Michelle Yarn</div>
-            </SpottableComponent>
-            <SpottableComponent className={css.listItem}>
-              <div className={css.logo}>HSN</div>
-              <div className={css.date}>03/21/2020 12:01 PM</div>
-              <div className={css.title}>
-                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
-                Fashions
-              </div>
-              <div className={css.actor}>with Host Michelle Yarn</div>
-            </SpottableComponent>
-            <SpottableComponent className={css.listItem}>
-              <div className={css.logo}>HSN</div>
-              <div className={css.date}>03/21/2020 12:01 PM</div>
-              <div className={css.title}>
-                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
-                Fashions
-              </div>
-              <div className={css.actor}>with Host Michelle Yarn</div>
-            </SpottableComponent>
-            <SpottableComponent className={css.listItem}>
-              <div className={css.logo}>HSN</div>
-              <div className={css.date}>03/21/2020 12:01 PM</div>
-              <div className={css.title}>
-                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
-                Fashions
-              </div>
-              <div className={css.actor}>with Host Michelle Yarn</div>
-            </SpottableComponent>
-            <SpottableComponent className={css.listItem}>
-              <div className={css.logo}>HSN</div>
-              <div className={css.date}>03/21/2020 12:01 PM</div>
-              <div className={css.title}>
-                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
-                Fashions
-              </div>
-              <div className={css.actor}>with Host Michelle Yarn</div>
-            </SpottableComponent>
-            <SpottableComponent className={css.listItem}>
-              <div className={css.logo}>HSN</div>
-              <div className={css.date}>03/21/2020 12:01 PM</div>
-              <div className={css.title}>
-                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
-                Fashions
-              </div>
-              <div className={css.actor}>with Host Michelle Yarn</div>
-            </SpottableComponent>
-            <SpottableComponent className={css.listItem}>
-              <div className={css.logo}>HSN</div>
-              <div className={css.date}>03/21/2020 12:01 PM</div>
-              <div className={css.title}>
-                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
-                Fashions
-              </div>
-              <div className={css.actor}>with Host Michelle Yarn</div>
-            </SpottableComponent>
-            <SpottableComponent className={css.listItem}>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true ? css.checked : null
+              )}
+            >
               <div className={css.logo}>HSN</div>
               <div className={css.date}>03/21/2020 12:01 PM</div>
               <div className={css.title}>
@@ -115,7 +40,206 @@ export default function Reminders() {
               <div className={css.actor}>with Host Michelle Yarn</div>
             </SpottableComponent>
             <SpottableComponent
-              className={classNames(css.listItem, css.checked)}
+              className={classNames(
+                css.listItem,
+                isCheck === true ? css.checked : null
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true && css.checked
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true && css.checked
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true ? css.checked : null
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true ? css.checked : null
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true && css.checked
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true ? css.checked : null
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true ? css.checked : null
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true ? css.checked : null
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true ? css.checked : null
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true && css.checked
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true ? css.checked : null
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true && css.checked
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true ? css.checked : null
+              )}
+            >
+              <div className={css.logo}>HSN</div>
+              <div className={css.date}>03/21/2020 12:01 PM</div>
+              <div className={css.title}>
+                G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
+                Fashions
+              </div>
+              <div className={css.actor}>with Host Michelle Yarn</div>
+            </SpottableComponent>
+            <SpottableComponent
+              className={classNames(
+                css.listItem,
+                isCheck === true ? css.checked : null
+              )}
             >
               <div className={css.logo}>HSN</div>
               <div className={css.date}>03/21/2020 12:01 PM</div>