[mypage]디자인 작성
- RecentlyViewd 작성 - myinfo(로그인전)작성.
This commit is contained in:
junghoon86.park
@@ -1,5 +1,36 @@
|
||||
import React from "react";
|
||||
|
||||
import ic_profile from "../../../../../assets/images/icons/ic-profile.svg";
|
||||
import myinfo_login from "../../../../../assets/images/img-banner-myinfo-login@3x.png";
|
||||
import TButton, { TYPES } from "../../../../components/TButton/TButton";
|
||||
import { $L } from "../../../../utils/helperMethods";
|
||||
import css from "../MyInfo/MyInfo.module.less";
|
||||
|
||||
export default function MyInfo() {
|
||||
return <div>MyInfo</div>;
|
||||
return (
|
||||
<div className={css.myInfoContainer}>
|
||||
<div className={css.contentsBox}>
|
||||
<div className={css.infoBox}>
|
||||
<div className={css.infoTopBox}>
|
||||
<img src={ic_profile} className={css.profileImg} />
|
||||
<div className={css.textBox}>
|
||||
{$L("Please log in to use your LG Shoptime.")}
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.infoBottomBox}>
|
||||
<div className={css.emailBox}>
|
||||
<div className={css.email}>Email</div>
|
||||
<div className={css.email}>-</div>
|
||||
</div>
|
||||
<TButton type={TYPES.agree} className={css.locateBox}>
|
||||
{$L("SIGN IN (LG Account)")}
|
||||
</TButton>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.downloadImg}>
|
||||
<img src={myinfo_login} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
@import "../../../../style/CommonStyle.module.less";
|
||||
@import "../../../../style/utils.module.less";
|
||||
|
||||
.myInfoContainer {
|
||||
background: @BG_COLOR_01;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.contentsBox {
|
||||
padding-top: 42px;
|
||||
margin: 0 60px 60px 60px;
|
||||
.infoBox {
|
||||
.size(@w: 1680px, @h: 270px);
|
||||
border-radius: 12px;
|
||||
background: #2c343f;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
.infoTopBox {
|
||||
margin: 42px 0 0 60px;
|
||||
display: flex;
|
||||
height: 84px;
|
||||
width: 100%;
|
||||
.profileImg {
|
||||
.size(@w: 84px, @h: 84px);
|
||||
}
|
||||
.textBox {
|
||||
margin-left: 29px;
|
||||
font-size: 42px;
|
||||
color: @COLOR_WHITE;
|
||||
line-height: 84px;
|
||||
text-align: left;
|
||||
font-family: @baseFontBold;
|
||||
}
|
||||
}
|
||||
.infoBottomBox {
|
||||
margin-top: 18px;
|
||||
height: 78px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.emailBox {
|
||||
flex: none;
|
||||
display: flex;
|
||||
margin-left: 173px;
|
||||
font-size: 24px;
|
||||
width: 1045px;
|
||||
.email {
|
||||
.size(@w: 252px, @h: 30px);
|
||||
&:last-child {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.locateBox {
|
||||
flex: none;
|
||||
min-width: 402px;
|
||||
.size(@w: 402px, @h: 78px);
|
||||
.position(@position: absolute, @top: auto, @right: 60px, @bottom: 48px, @left: auto);
|
||||
background: @PRIMARY_COLOR_RED;
|
||||
}
|
||||
}
|
||||
}
|
||||
.downloadImg {
|
||||
margin-top: 42px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,241 @@
|
||||
import React from "react";
|
||||
import React, { useCallback } from "react";
|
||||
|
||||
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
|
||||
import TButton, { SIZES, TYPES } from "../../../../components/TButton/TButton";
|
||||
import useScrollTo from "../../../../hooks/useScrollTo";
|
||||
import { $L } from "../../../../utils/helperMethods";
|
||||
import css from "../RecentlyViewed/RecentlyViewed.module.less";
|
||||
|
||||
const SpottableComponent = Spottable("div");
|
||||
const Container = SpotlightContainerDecorator(
|
||||
{ enterTo: "last-focused" },
|
||||
"div"
|
||||
);
|
||||
|
||||
export default function RecentlyViewed() {
|
||||
return <div>RecentlyViewed</div>;
|
||||
const handleTopButtonClick = useCallback(() => {
|
||||
scrollTop();
|
||||
}, [scrollTop]);
|
||||
const { getScrollTo, scrollTop } = useScrollTo();
|
||||
return (
|
||||
<div className={css.recentContainer}>
|
||||
<div className={css.contentsBox} cbScrollTo={getScrollTo}>
|
||||
<div className={css.buttonBox}>
|
||||
<TButton
|
||||
type={TYPES.agree}
|
||||
className={css.locateBox}
|
||||
size={SIZES.small}
|
||||
>
|
||||
{$L("Delete")}
|
||||
</TButton>
|
||||
</div>
|
||||
<div className={css.lineBox}>
|
||||
<div className={css.subTitle}>Today</div>
|
||||
<div className={css.liner}></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 className={css.liner}></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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
@import "../../../../style/CommonStyle.module.less";
|
||||
@import "../../../../style/utils.module.less";
|
||||
|
||||
.recentContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: @BG_COLOR_01;
|
||||
overflow-y: auto;
|
||||
.contentsBox {
|
||||
padding-top: 30px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.lineBox {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin-top: 50px;
|
||||
.subTitle {
|
||||
flex: none;
|
||||
font-size: 36px;
|
||||
font-family: @baseFontBold;
|
||||
width: 132px;
|
||||
color: @COLOR_GRAY06;
|
||||
letter-spacing: -0.9px;
|
||||
}
|
||||
.liner {
|
||||
flex: none;
|
||||
width: calc(100% - 132px);
|
||||
.border-solid(@size:1px, @color:@COLOR_GRAY09);
|
||||
box-sizing: border-box;
|
||||
height: 1px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.contents {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.noContents {
|
||||
text-align: center;
|
||||
.noTitle {
|
||||
margin-top: 246px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user