From 7b1b256dcbde43baa602540e45687197d85727b1 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Wed, 28 Feb 2024 18:36:16 +0900 Subject: [PATCH] =?UTF-8?q?[mypage]reminders=EA=B4=80=EB=A0=A8=EC=9E=91?= =?UTF-8?q?=EC=97=85=20-=20mypage/reminder=20=EC=9E=91=EC=84=B1=20-=20TSwi?= =?UTF-8?q?tch=EC=9E=91=EC=84=B1=20-=20Theader=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=8B=9C=EC=97=90=20=EC=B6=94=EA=B0=80.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/THeader/THeader.jsx | 23 ++- .../components/THeader/THeader.module.less | 10 ++ .../src/components/TSwitch/TSwitch.jsx | 12 ++ .../components/TSwitch/TSwitch.module.less | 54 +++++++ .../MyPageSub/Reminders/Reminders.jsx | 132 +++++++++++++++++- .../MyPageSub/Reminders/Reminders.module.less | 109 +++++++++++++++ 6 files changed, 337 insertions(+), 3 deletions(-) create mode 100644 com.twin.app.shoptime/src/components/TSwitch/TSwitch.jsx create mode 100644 com.twin.app.shoptime/src/components/TSwitch/TSwitch.module.less diff --git a/com.twin.app.shoptime/src/components/THeader/THeader.jsx b/com.twin.app.shoptime/src/components/THeader/THeader.jsx index cfd9574c..c882fd41 100644 --- a/com.twin.app.shoptime/src/components/THeader/THeader.jsx +++ b/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 ( {onBackButton && ( )}
{title}
+ {title === "Reminders" && onDeleteButton && ( + <> + + + {$L("Delete")} + + + )} ); } diff --git a/com.twin.app.shoptime/src/components/THeader/THeader.module.less b/com.twin.app.shoptime/src/components/THeader/THeader.module.less index 87a07f70..14368f86 100644 --- a/com.twin.app.shoptime/src/components/THeader/THeader.module.less +++ b/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); + } + } +} diff --git a/com.twin.app.shoptime/src/components/TSwitch/TSwitch.jsx b/com.twin.app.shoptime/src/components/TSwitch/TSwitch.jsx new file mode 100644 index 00000000..09a0854a --- /dev/null +++ b/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 ( + + ); +} diff --git a/com.twin.app.shoptime/src/components/TSwitch/TSwitch.module.less b/com.twin.app.shoptime/src/components/TSwitch/TSwitch.module.less new file mode 100644 index 00000000..cafe6d5c --- /dev/null +++ b/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; + } + } + } +} 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 276540ab..228f48ad 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,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
Reminders
; + const [tab, setTab] = useState(0); + + const handleItemClick = useCallback( + ({ index }) => { + if (index === tab) return; + setTab(index); + }, + [tab] + ); + return ( + <> +
+
+
+ + + +
HSN
+
03/21/2020 12:01 PM
+
+ G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design + Fashions +
+
with Host Michelle Yarn
+ + +
HSN
+
03/21/2020 12:01 PM
+
+ G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design + Fashions +
+
with Host Michelle Yarn
+ + +
HSN
+
03/21/2020 12:01 PM
+
+ G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design + Fashions +
+
with Host Michelle Yarn
+ + +
HSN
+
03/21/2020 12:01 PM
+
+ G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design + Fashions +
+
with Host Michelle Yarn
+ + +
HSN
+
03/21/2020 12:01 PM
+
+ G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design + Fashions +
+
with Host Michelle Yarn
+ + +
HSN
+
03/21/2020 12:01 PM
+
+ G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design + Fashions +
+
with Host Michelle Yarn
+ + +
HSN
+
03/21/2020 12:01 PM
+
+ G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design + Fashions +
+
with Host Michelle Yarn
+ + +
HSN
+
03/21/2020 12:01 PM
+
+ G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design + Fashions +
+
with Host Michelle Yarn
+ + +
HSN
+
03/21/2020 12:01 PM
+
+ G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design + Fashions +
+
with Host Michelle Yarn
+ + +
HSN
+
03/21/2020 12:01 PM
+
+ G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design + Fashions +
+
with Host Michelle Yarn
+ + +
+
+ + ); } diff --git 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 index e69de29b..5afdc17a 100644 --- 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 @@ -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: ""; + } + } + } + } + } +}