optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Mypagepanel] favorite,Recentlyviewed,reminders 초기화

Browse Source 
- 원복건
This commit is contained in:
junghoon86.park
2024-03-06 18:04:17 +09:00
parent 536df16594
commit bd7eab82d0
9 changed files with 8 additions and 1220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
com.twin.app.shoptime/src/components/THeader/THeader.jsx
View File

@@ -5,9 +5,6 @@ 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(
@@ -15,31 +12,13 @@ const Container = SpotlightContainerDecorator(
"div"
);
const SpottableComponent = Spottable("button");
export default function THeader({
title,
className,
onBackButton,
onClick,
chkDelete,
}) {
export default function THeader({ title, className, onBackButton, onClick }) {
return (
<Container className={classNames(css.tHeader, className)}>
{onBackButton && (
<SpottableComponent className={css.button} onClick={onClick} />
)}
<div className={css.title}>{title}</div>
{title === "Reminders" && chkDelete && (
<>
<TSwitch onClick={onClick} />
<TButton
type={TYPES.mypage}
className={css.deleteBtn}
size={SIZES.small}
>
{$L("Delete")}
</TButton>
</>
)}
</Container>
);
}

24
com.twin.app.shoptime/src/components/THeader/THeader.module.less
View File

@@ -16,27 +16,3 @@
margin-left: 61px;
}
}
.button {
.size(@w: 60px, @h: 60px);
background-size: cover;
background-position: center;
background-image: url("../../../assets/images/btn/btn-60-bk-back-nor@3x.png");
border: none;
margin-right: -49px;
position: relative;
&:focus {
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);
}
}
}

33
com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx
View File

@@ -23,7 +23,6 @@ export default function MyPagePanel() {
const { panelInfo } = panelInfos || {};
const { menuNm, menuOrd } = panelInfo || {};
const { getScrollTo, scrollTop } = useScrollTo();
const [hasBtn, setHasBtn] = useState(false);
const myPageComponents = {
"My Info": MyInfo,
@@ -37,25 +36,6 @@ export default function MyPagePanel() {
const SelectedComponent = menuNm && myPageComponents[menuNm];
const [isOn, setIsOn] = useState(false);
const [checkTmp, setCheckTmp] = useState(false);
const ToggleHandler = () => {
setIsOn(!isOn);
};
const btnComponents = ["Recently Viewed", "Favorites", "Reminders"];
const btnLength = btnComponents.filter(
(btnComponents) => btnComponents === menuNm
).length;
useEffect(() => {
if (isOn === true) {
setCheckTmp(true);
} else {
setCheckTmp(false);
}
}, [ToggleHandler]);
useEffect(() => {
Spotlight.focus(SpotlightIds.TBODY);
scrollTop();
@@ -63,18 +43,9 @@ export default function MyPagePanel() {
return (
<TPanel>
<THeader
title={menuNm}
onClick={ToggleHandler}
chkDelete={btnLength >= 1 ? true : false}
/>
<THeader title={menuNm} />
<TBody className={css.tBody} cbScrollTo={getScrollTo}>
{SelectedComponent && (
<SelectedComponent
scrollTop={scrollTop}
checkTmp={menuNm === "Reminders" && isOn === true ? checkTmp : null}
/>
)}
{SelectedComponent && <SelectedComponent scrollTop={scrollTop} />}
</TBody>
</TPanel>
);

289
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx
View File

@@ -1,294 +1,7 @@
import React from "react";
import { useSelector } from "react-redux";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import TButton, { SIZES, TYPES } from "../../../../components/TButton/TButton";
import TScroller from "../../../../components/TScroller/TScroller";
import css from "../Favorites/Favorites.module.less";
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
export default function Favorites() {
const favoriteDatas = useSelector((state) => state.myPage.favoriteData);
return (
<div className={css.favoriteContainer}>
<div className={css.contentsBox}>
<TScroller>
<Container className={css.contents}>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
<div className={css.soldout}>
<div className={css.soldOutBg}></div>
<div className={css.soldOutText}>Sold Out</div>
</div>
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
<div className={css.soldout}>
<div className={css.soldOutBg}></div>
<div className={css.soldOutText}>Sold Out</div>
</div>
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
</Container>
</TScroller>
</div>
{/* <div className={css.contentsBox}>
<div className={classNames(css.contents, css.noContents)}>
<div className={css.noTitle}>
<div className={css.textBox}>You have no Favorites</div>
<div className={css.emptyBtnBox}>
<TButton
type={TYPES.agree}
className={css.noTitleBtnBox}
size={SIZES.small}
>
{$L("Previous")}
</TButton>
</div>
</div>
</div>
</div> */}
</div>
);
return <div>Favorites</div>;
}

124
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.module.less
View File

@@ -1,126 +1,2 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.favoriteContainer {
width: 100%;
background: @BG_COLOR_01;
overflow-y: auto;
.contentsBox {
margin: 0 60px;
.buttonBox {
width: 100%;
display: flex;
flex-direction: row-reverse;
.locateBox {
min-width: 180px;
width: 180px;
height: 54px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
.contents {
margin-top: 42px;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
&.noContents {
text-align: center;
flex: none;
.noTitle {
margin-top: 246px;
width: 100%;
.textBox {
font-size: 50px;
font-family: @baseFont;
color: @COLOR_GRAY06;
}
.emptyBtnBox {
margin-top: 88px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
.noTitleBtnBox {
min-width: 180px;
.size(@w: 180px, @h: 54px);
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: @baseFont;
}
}
}
}
.itemBox {
flex: none;
margin-right: 26px;
margin-bottom: 50px;
.position(@position: relative, @top: auto, @right: auto, @bottom: auto, @left: auto);
.size(@w: 315px, @h: 265px);
border-radius: 12px;
box-sizing: border-box;
border: 1px solid @COLOR_GRAY09;
overflow: hidden;
&:focus {
&::after {
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
.productbox {
background: @COLOR_WHITE;
}
}
&:nth-child(5n + 5) {
margin-right: 0;
}
.imgBox {
.size(@w: 313px, @h: 177px);
img {
width: 100%;
}
.soldout {
position: absolute;
.position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
.size(@w: 313px, @h: 177px);
text-align: center;
.soldOutBg {
.position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
.size(@w: 313px, @h: 177px);
background: #ccc;
opacity: 0.4;
}
.soldOutText {
.size(@w: 313px, @h: 177px);
line-height: 177px;
color: #fff;
}
}
}
.productbox {
.size(@w: 313px, @h: 88px);
background-color: #e3e7ee;
padding: 15px 11px 0;
.pdName {
.elip(@clamp:1);
line-height: normal;
font-size: 20px;
font-family: @baseFont;
color: @COLOR_GRAY06;
}
.pdAccount {
.elip(@clamp:1);
font-size: 20px;
font-family: @baseFontBold;
color: @COLOR_GRAY06;
}
}
}
}
}
}

239
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx
View File

@@ -1,244 +1,7 @@
import React from "react";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import TScroller from "../../../../components/TScroller/TScroller";
import css from "../RecentlyViewed/RecentlyViewed.module.less";
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
export default function RecentlyViewed() {
return (
<div className={css.recentContainer}>
<div className={css.contentsBox}>
<TScroller>
<div className={css.lineBox}>
<div className={css.subTitle}>Today</div>
</div>
<Container className={css.contents}>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
<div className={css.soldout}>
<div className={css.soldOutBg}></div>
<div className={css.soldOutText}>Sold Out</div>
</div>
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
</Container>
<div className={css.lineBox}>
<div className={css.subTitle}>07/20</div>
</div>
<Container className={css.contents}>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
<div className={css.soldout}>
<div className={css.soldOutBg}></div>
<div className={css.soldOutText}>Sold Out</div>
</div>
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
<div className={css.soldout}>
<div className={css.soldOutBg}></div>
<div className={css.soldOutText}>Sold Out</div>
</div>
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
<SpottableComponent className={css.itemBox}>
<div className={css.imgBox}>
<img src="https://picsum.photos/315/177" />
</div>
<div className={css.productbox}>
<div className={css.pdName}>
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
LG EasyLoad™ Door and AI Sensing
</div>
<div className={css.pdAccount}>$999.99</div>
</div>
</SpottableComponent>
</Container>
</TScroller>
</div>
{/* <div className={css.contentsBox}>
<div className={classNames(css.contents, css.noContents)}>
<div className={css.noTitle}>
<div className={css.textBox}>
You have no recently watched Shows or Item
</div>
<div className={css.emptyBtnBox}>
<TButton
type={TYPES.agree}
className={css.noTitleBtnBox}
size={SIZES.small}
>
{$L("Previous")}
</TButton>
</div>
</div>
</div>
</div> */}
</div>
);
return <div>RecentlyViewed</div>;
}

131
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.module.less
View File

@@ -1,133 +1,2 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.recentContainer {
width: 100%;
background: @BG_COLOR_01;
.contentsBox {
margin: 0 60px;
.lineBox {
display: flex;
width: 100%;
height: 30px;
margin-top: 35px;
&.first-child {
margin-top: 42px;
}
.subTitle {
flex: none;
font-size: 36px;
font-family: @baseFontBold;
width: 132px;
color: @COLOR_GRAY06;
letter-spacing: -0.9px;
}
}
.contents {
margin-top: 30px;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
&.noContents {
text-align: center;
.noTitle {
margin-top: 246px;
width: 100%;
.textBox {
font-size: 50px;
font-family: @baseFont;
color: @COLOR_GRAY06;
}
.emptyBtnBox {
margin-top: 88px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
.noTitleBtnBox {
min-width: 180px;
.size(@w: 180px, @h: 54px);
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: @baseFont;
}
}
}
}
.itemBox {
flex: none;
margin-right: 26px;
margin-top: 50px;
.position(@position: relative, @top: auto, @right: auto, @bottom: auto, @left: auto);
.size(@w: 315px, @h: 265px);
border-radius: 12px;
box-sizing: border-box;
border: 1px solid @COLOR_GRAY09;
overflow: hidden;
&:focus {
&::after {
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
.productbox {
background: @COLOR_WHITE;
}
}
&:nth-child(5n + 5) {
margin-right: 0;
}
&:nth-child(1),
&:nth-child(2),
&:nth-child(3),
&:nth-child(4),
&:nth-child(5) {
margin-top: 0;
}
.imgBox {
.size(@w: 313px, @h: 177px);
img {
width: 100%;
}
.soldout {
position: absolute;
.position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
.size(@w: 313px, @h: 177px);
text-align: center;
.soldOutBg {
.position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
.size(@w: 313px, @h: 177px);
background: #ccc;
opacity: 0.4;
}
.soldOutText {
.size(@w: 313px, @h: 177px);
line-height: 177px;
color: #fff;
}
}
}
.productbox {
.size(@w: 313px, @h: 88px);
background-color: #e3e7ee;
padding: 15px 11px 0;
.pdName {
.elip(@clamp:1);
line-height: normal;
font-size: 20px;
font-family: @baseFont;
color: @COLOR_GRAY06;
}
.pdAccount {
.elip(@clamp:1);
font-size: 20px;
font-family: @baseFontBold;
color: @COLOR_GRAY06;
}
}
}
}
}
}

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

@@ -1,257 +1,5 @@
import React, { useEffect, useState } from "react";
import React from "react";
import classNames from "classnames";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import css from "../Reminders/Reminders.module.less";
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
export default function Reminders({ checkTmp }) {
const [isCheck, setIsCheck] = useState(false);
useEffect(() => {
checkTmp === true ? setIsCheck(true) : setIsCheck(false);
}, [checkTmp]);
return (
<>
<div className={css.reminderContainer}>
<div className={css.contentsBox}>
<div className={css.headerBox}></div>
<Container className={css.showItem}>
<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
)}
>
<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>
<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>
</>
);
export default function Reminders() {
return <div>Reminders</div>;
}

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

@@ -1,109 +1,2 @@
@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: "";
}
}
}
}
}
}