[HomePanel] 홈 배너 작업
- HomeTodayDeal 작성 - 아이콘 추가
This commit is contained in:
junghoon86.park
Binary file not shown.
|
After Width: | Height: | Size: 424 B |
Binary file not shown.
|
After Width: | Height: | Size: 407 B |
Binary file not shown.
|
After Width: | Height: | Size: 407 B |
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
@@ -1,5 +1,59 @@
|
||||
export default function HomeBannerTemplate3 () {
|
||||
return(
|
||||
<p>템플릿3</p>
|
||||
)
|
||||
}
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
|
||||
import testimg from "../../../../assets/h430054.webp";
|
||||
import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
|
||||
import banner4 from "../../../../assets/Image/img-home-banner-v-02.png";
|
||||
import banner3 from "../../../../assets/images/mainTemplate/img-home-banner-td-ver.svg";
|
||||
import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
|
||||
import css from "./Template.module.less";
|
||||
|
||||
const SpottableComponent = Spottable("div");
|
||||
|
||||
const Container = SpotlightContainerDecorator(
|
||||
{
|
||||
enterTo: "default-element",
|
||||
},
|
||||
"div"
|
||||
);
|
||||
|
||||
export default function HomeBannerTemplate3() {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const homeMainContentsBannerInfos = useSelector(
|
||||
(state) => state.home.mainContentsData.homeMainContentsBannerInfos
|
||||
);
|
||||
const testchk = useSelector((state) => state);
|
||||
console.log("##", testchk);
|
||||
return (
|
||||
<Container className={css.homeTemplateBox}>
|
||||
{homeMainContentsBannerInfos &&
|
||||
homeMainContentsBannerInfos.map((bannerInfos) => {
|
||||
return (
|
||||
<HomeTodayDeal
|
||||
homeMainContentsBannerInfos={homeMainContentsBannerInfos}
|
||||
//가로형일때는 isHorizontal 넣어주면됨.
|
||||
rolling={false}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<div class={css.mainBox}>
|
||||
<SpottableComponent className={css.imgBox}>
|
||||
<img src={banner4} />
|
||||
</SpottableComponent>
|
||||
<div className={css.dualBox}>
|
||||
<SpottableComponent className={css.videoBox}>
|
||||
<img src={banner2} />
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.slideBox}>
|
||||
<img src={banner2} />
|
||||
</SpottableComponent>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,6 +18,15 @@
|
||||
width: 744px;
|
||||
height: 420px;
|
||||
margin: 0 18px 18px 0;
|
||||
border: 4px solid transparent;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&:active {
|
||||
border: 4px solid @PRIMARY_COLOR_RED;
|
||||
box-sizing: border-box;
|
||||
.focusDropShadow();
|
||||
}
|
||||
.videoPlayer {
|
||||
width: 744px;
|
||||
height: 420px;
|
||||
@@ -105,3 +114,71 @@
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mainBox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.mainBox {
|
||||
display: flex;
|
||||
|
||||
.imgBox {
|
||||
width: 486px;
|
||||
height: 858px;
|
||||
background: beige;
|
||||
margin-right: 18px;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 12px;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&:active {
|
||||
border: 4px solid @PRIMARY_COLOR_RED;
|
||||
box-sizing: border-box;
|
||||
.focusDropShadow();
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.dualBox {
|
||||
.videoBox {
|
||||
width: 744px;
|
||||
height: 420px;
|
||||
background: chocolate;
|
||||
margin-bottom: 18px;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 12px;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&:active {
|
||||
border: 4px solid @PRIMARY_COLOR_RED;
|
||||
box-sizing: border-box;
|
||||
.focusDropShadow();
|
||||
}
|
||||
}
|
||||
.slideBox {
|
||||
width: 744px;
|
||||
height: 420px;
|
||||
background: skyblue;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 12px;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&:active {
|
||||
border: 4px solid @PRIMARY_COLOR_RED;
|
||||
box-sizing: border-box;
|
||||
.focusDropShadow();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
|
||||
import classNames from "classnames";
|
||||
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
|
||||
import css from "./HomeTodayDeal.module.less";
|
||||
|
||||
const SpottableComponent = Spottable("div");
|
||||
|
||||
export default function HomeTodayDeal({
|
||||
homeMainContentsBannerInfos,
|
||||
isHorizontal,
|
||||
rolling,
|
||||
...rest
|
||||
}) {
|
||||
const bannerDetailInfos =
|
||||
homeMainContentsBannerInfos[0].bannerInfos[0].bannerDetailInfos[0];
|
||||
const priceInfo = bannerDetailInfos.priceInfo;
|
||||
let salePrice;
|
||||
const originalPrice = priceInfo.split("|")[0];
|
||||
if (priceInfo.split("|")[3] == "") {
|
||||
salePrice = priceInfo.split("|")[1];
|
||||
}
|
||||
return (
|
||||
<SpottableComponent
|
||||
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
|
||||
>
|
||||
<div>
|
||||
<div className={css.textBox}>{bannerDetailInfos.prdtNm}</div>
|
||||
<div className={css.accBox}>
|
||||
{salePrice}
|
||||
{salePrice != originalPrice ? (
|
||||
<span className={css.saleAccBox}>{originalPrice}</span>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.itemImgBox}>
|
||||
<img src={bannerDetailInfos.tmnlImgNm} />
|
||||
</div>
|
||||
{rolling == true ? (
|
||||
<>
|
||||
<div className={css.leftBtn}></div>
|
||||
<div className={css.rightBtn}></div>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</SpottableComponent>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
@import "../../../style/CommonStyle.module.less";
|
||||
.itemBox {
|
||||
background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_ver.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 486px 858px;
|
||||
background-position: center center;
|
||||
width: 486px;
|
||||
height: 858px;
|
||||
margin-right: 18px;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&:active {
|
||||
border: 4px solid @PRIMARY_COLOR_RED;
|
||||
box-sizing: border-box;
|
||||
.focusDropShadow();
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.textBox {
|
||||
margin: 268px 36px 0;
|
||||
width: 406px;
|
||||
height: 80px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font-family: "LGSmartUIBold";
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
line-height: 1.27;
|
||||
}
|
||||
.accBox {
|
||||
width: 406px;
|
||||
height: 50px;
|
||||
margin: 6px 36px 0;
|
||||
text-align: center;
|
||||
font-size: 42px;
|
||||
color: @PRIMARY_COLOR_RED;
|
||||
font-weight: bold;
|
||||
line-height: 1.14;
|
||||
.saleAccBox {
|
||||
font-size: 24px;
|
||||
color: #767676;
|
||||
vertical-align: middle;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
.itemImgBox {
|
||||
margin: 29px 62px 60px;
|
||||
width: 354px;
|
||||
height: 354px;
|
||||
> img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.leftBtn {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 408px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
|
||||
background-size: 42px 42px;
|
||||
background-position: center center;
|
||||
cursor: pointer;
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:hover,
|
||||
&:active {
|
||||
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
|
||||
}
|
||||
}
|
||||
.rightBtn {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 408px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
|
||||
background-size: 42px 42px;
|
||||
background-position: center center;
|
||||
cursor: pointer;
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:hover,
|
||||
&:active {
|
||||
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.itemBox.isHorizontal {
|
||||
position: relative;
|
||||
background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_hor.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 744px 420px;
|
||||
background-position: center center;
|
||||
width: 744px;
|
||||
height: 420px;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&:active {
|
||||
border: 4px solid @PRIMARY_COLOR_RED;
|
||||
box-sizing: border-box;
|
||||
.focusDropShadow();
|
||||
}
|
||||
> div {
|
||||
flex: none;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.textBox {
|
||||
font-family: "LGSmartUIBold";
|
||||
margin: 230px 8px 0 46px;
|
||||
width: 320px;
|
||||
height: 80px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
line-height: 1.27;
|
||||
}
|
||||
.accBox {
|
||||
width: 320px;
|
||||
height: 50px;
|
||||
margin: 6px 8px 0 46px;
|
||||
text-align: left;
|
||||
font-size: 42px;
|
||||
color: @PRIMARY_COLOR_RED;
|
||||
font-weight: bold;
|
||||
line-height: 1.14;
|
||||
.saleAccBox {
|
||||
font-size: 24px;
|
||||
color: #767676;
|
||||
vertical-align: middle;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
.itemImgBox {
|
||||
margin: 44px 26px 44px 0;
|
||||
width: 324px;
|
||||
height: 324px;
|
||||
> img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.leftBtn {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 189px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
|
||||
background-size: 42px 42px;
|
||||
background-position: center center;
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:hover,
|
||||
&:active {
|
||||
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
|
||||
}
|
||||
}
|
||||
.rightBtn {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 189px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
|
||||
background-size: 42px 42px;
|
||||
background-position: center center;
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:hover,
|
||||
&:active {
|
||||
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user