diff --git a/com.twin.app.shoptime/assets/icon/button_icon/btn_next_thumb_foc.png b/com.twin.app.shoptime/assets/icon/button_icon/btn_next_thumb_foc.png new file mode 100644 index 00000000..c9469670 Binary files /dev/null and b/com.twin.app.shoptime/assets/icon/button_icon/btn_next_thumb_foc.png differ diff --git a/com.twin.app.shoptime/assets/icon/button_icon/btn_next_thumb_nor.png b/com.twin.app.shoptime/assets/icon/button_icon/btn_next_thumb_nor.png new file mode 100644 index 00000000..c3967c99 Binary files /dev/null and b/com.twin.app.shoptime/assets/icon/button_icon/btn_next_thumb_nor.png differ diff --git a/com.twin.app.shoptime/assets/icon/button_icon/btn_prev_thumb_foc.png b/com.twin.app.shoptime/assets/icon/button_icon/btn_prev_thumb_foc.png new file mode 100644 index 00000000..c53f5da7 Binary files /dev/null and b/com.twin.app.shoptime/assets/icon/button_icon/btn_prev_thumb_foc.png differ diff --git a/com.twin.app.shoptime/assets/icon/button_icon/btn_prev_thumb_nor.png b/com.twin.app.shoptime/assets/icon/button_icon/btn_prev_thumb_nor.png new file mode 100644 index 00000000..a680d8ca Binary files /dev/null and b/com.twin.app.shoptime/assets/icon/button_icon/btn_prev_thumb_nor.png differ diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx index 4feb95e2..465c5a10 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx @@ -1,5 +1,59 @@ -export default function HomeBannerTemplate3 () { - return( -

템플릿3

- ) -} \ No newline at end of file +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 ( + + {homeMainContentsBannerInfos && + homeMainContentsBannerInfos.map((bannerInfos) => { + return ( + + ); + })} +
+ + + +
+ + + + + + +
+
+ + ); +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less index 694620aa..2d0276b1 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less @@ -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(); + } + } + } +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx new file mode 100644 index 00000000..f101d4cb --- /dev/null +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx @@ -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 ( + +
+
{bannerDetailInfos.prdtNm}
+
+ {salePrice} + {salePrice != originalPrice ? ( + {originalPrice} + ) : ( + <> + )} +
+
+
+ +
+ {rolling == true ? ( + <> +
+
+ + ) : ( + <> + )} + + ); +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less new file mode 100644 index 00000000..56ca66a1 --- /dev/null +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less @@ -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"); + } + } +}