[mypage]reminders관련작업

- mypage/reminder 작성
- TSwitch작성
- Theader 삭제버튼시에 추가.

com.twin.app.shoptime/src/components/THeader/THeader.jsx

@@ -5,6 +5,9 @@ import classNames from "classnames";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
+import { $L } from "../../utils/helperMethods";
+import TButton, { SIZES, TYPES } from "../TButton/TButton";
+import TSwitch from "../TSwitch/TSwitch";
 import css from "./THeader.module.less";
 
 const Container = SpotlightContainerDecorator(
@@ -12,13 +15,31 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 const SpottableComponent = Spottable("button");
-export default function THeader({ title, className, onBackButton, onClick }) {
+export default function THeader({
+  title,
+  className,
+  onBackButton,
+  onDeleteButton,
+  onClick,
+}) {
   return (
     <Container className={classNames(css.tHeader, className)}>
       {onBackButton && (
         <SpottableComponent className={css.button} onClick={onClick} />
       )}
       <div className={css.title}>{title}</div>
+      {title === "Reminders" && onDeleteButton && (
+        <>
+          <TSwitch selected={true} />
+          <TButton
+            type={TYPES.mypage}
+            className={css.deleteBtn}
+            size={SIZES.small}
+          >
+            {$L("Delete")}
+          </TButton>
+        </>
+      )}
     </Container>
   );
 }

com.twin.app.shoptime/src/components/THeader/THeader.module.less

@@ -30,3 +30,13 @@
     background-image: url("../../../assets/images/btn/btn-60-wh-back-foc@3x.png");
   }
 }
+
+.deleteBtn {
+  .size(@w: 180px, @h: 60px);
+  .position(@position: absolute, @top: 15px, @right: 60px, @bottom: auto, @left: auto);
+  &:focus {
+    &::after {
+      .focused(@boxShadow: 22px, @borderRadius:12px);
+    }
+  }
+}

com.twin.app.shoptime/src/components/TSwitch/TSwitch.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+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) {
+  return (
+    <Switch {...rest} className={classNames(css.tSwitch, className)}></Switch>
+  );
+}

com.twin.app.shoptime/src/components/TSwitch/TSwitch.module.less

@@ -0,0 +1,54 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+.tSwitch {
+  margin: 0 0 0 10px !important;
+
+  > div {
+    &:nth-child(2) {
+      width: 112px;
+      height: 53px;
+      background-color: #808080;
+      > div {
+        width: 37px;
+        font-size: 53px;
+        color: #fff !important;
+        line-height: 53px;
+        margin-left: 9px;
+      }
+    }
+  }
+}
+
+.tSwitch[aria-pressed="true"] {
+  > div {
+    &::before {
+      content: "On";
+      position: absolute;
+      left: 23px;
+      top: 0;
+      line-height: 52px;
+    }
+    &:nth-child(2) {
+      background-color: #c70850 !important;
+      > div {
+        left: 62px !important;
+      }
+    }
+  }
+}
+.tSwitch[aria-pressed="false"] {
+  > div {
+    &::after {
+      content: "Off";
+      position: absolute;
+      right: 18px;
+      top: 0;
+      line-height: 52px;
+    }
+    &:nth-child(2) {
+      > div {
+        left: 0px !important;
+      }
+    }
+  }
+}

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

@@ -1,5 +1,133 @@
-import React from "react";
+import React, { useCallback, 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");
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
+const tabList = [$L("Show"), $L("Keyword")];
 export default function Reminders() {
-  return <div>Reminders</div>;
+  const [tab, setTab] = useState(0);
+
+  const handleItemClick = useCallback(
+    ({ index }) => {
+      if (index === tab) return;
+      setTab(index);
+    },
+    [tab]
+  );
+  return (
+    <>
+      <div className={css.reminderContainer}>
+        <div className={css.contentsBox}>
+          <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}>
+              <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, 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>
+          </Container>
+        </div>
+      </div>
+    </>
+  );
 }

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

@@ -0,0 +1,109 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.reminderContainer {
+  width: 100%;
+  .contentsBox {
+    padding: 0 60px;
+    .headerBox {
+    }
+    .tabContainer {
+      margin-top: 34px;
+      display: flex;
+      position: relative;
+      .tButtonTab {
+        width: 100%;
+      }
+      .tButton {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin: 0;
+      }
+    }
+    .contents {
+    }
+    .showItem {
+      margin-top: 50px;
+      display: flex;
+      flex-wrap: wrap;
+      .listItem {
+        flex: none;
+        .size(@w:315px,@h:177px);
+        padding: 26px 60px 26px 20px;
+        box-sizing: border-box;
+        margin: 0 26px 50px 0;
+        position: relative;
+        &:nth-child(5n + 1) {
+          border: 1px solid #0077c8;
+          background: #eef6fb;
+        }
+        &:nth-child(5n + 2) {
+          border: 1px solid #167aac;
+          background: #eef6fb;
+        }
+        &:nth-child(5n + 3) {
+          border: 1px solid #182535;
+          background: #f5f9fd;
+        }
+        &:nth-child(5n + 4) {
+          border: 1px solid #f57c67;
+          background: #fef6f5;
+        }
+        &:nth-child(5n + 5) {
+          border: 1px solid #0077c8;
+          background: #eef6fb;
+          margin-right: 0;
+        }
+        .logo {
+          .size(@w:30px,@h:30px);
+          border-radius: 50%;
+          .position(@position: absolute, @top: 11px, @right: 11px, @bottom: auto, @left: auto);
+          background-color: #0077c8;
+          font-size: 10px;
+          text-align: center;
+          line-height: 30px;
+        }
+        .date {
+          color: #cf0652;
+          font-family: @baseFontBold;
+          font-size: 20px;
+          height: 15px;
+          line-height: normal;
+        }
+        .title {
+          margin-top: 15px;
+          color: @COLOR_GRAY06;
+          font-family: @baseFontBold;
+          font-size: 24px;
+          line-height: 1.33;
+          .size(@w:235px,@h:56px);
+          .elip(@clamp:2);
+        }
+        .actor {
+          margin-top: 20px;
+          color: #666;
+          font-family: @baseFont;
+          font-size: 18px;
+          height: 13px;
+          line-height: normal;
+        }
+        &.checked {
+          &::after {
+            .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
+            .size(@w:315px,@h:177px);
+            background: rgba(0, 0, 0, 0.3);
+            content: "";
+            box-sizing: border-box;
+          }
+        }
+        &:focus {
+          &::after {
+            .focused(@boxShadow: 22px, @borderRadius: 0px);
+            content: "";
+          }
+        }
+      }
+    }
+  }
+}