[TSwitch,Reminderes] 스위치 값전달 부분 작성

- 기존 Reminderes 탭부분 제거
 - 스위치값 전달부분 작성 및 에러 제거

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}

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} />
   );
 }

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

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>