diff --git a/com.twin.app.shoptime/assets/Image/img-home-banner-h-01.png b/com.twin.app.shoptime/assets/Image/img-home-banner-h-01.png new file mode 100644 index 00000000..f894b9fe Binary files /dev/null and b/com.twin.app.shoptime/assets/Image/img-home-banner-h-01.png differ diff --git a/com.twin.app.shoptime/assets/Image/img-home-banner-h-02.png b/com.twin.app.shoptime/assets/Image/img-home-banner-h-02.png new file mode 100644 index 00000000..e8fb1091 Binary files /dev/null and b/com.twin.app.shoptime/assets/Image/img-home-banner-h-02.png differ diff --git a/com.twin.app.shoptime/assets/Image/img-home-banner-v-01.png b/com.twin.app.shoptime/assets/Image/img-home-banner-v-01.png new file mode 100644 index 00000000..a5034d00 Binary files /dev/null and b/com.twin.app.shoptime/assets/Image/img-home-banner-v-01.png differ diff --git a/com.twin.app.shoptime/assets/Image/img-home-banner-v-02.png b/com.twin.app.shoptime/assets/Image/img-home-banner-v-02.png new file mode 100644 index 00000000..024b2550 Binary files /dev/null and b/com.twin.app.shoptime/assets/Image/img-home-banner-v-02.png differ diff --git a/com.twin.app.shoptime/src/components/HomeBanner/Template.jsx b/com.twin.app.shoptime/src/components/HomeBanner/Template.jsx new file mode 100644 index 00000000..8f437be6 --- /dev/null +++ b/com.twin.app.shoptime/src/components/HomeBanner/Template.jsx @@ -0,0 +1,114 @@ +import React, { + useCallback, + useEffect, + useState, + useMemo, + useRef, +} from "react"; +import classNames from "classnames"; + +import { Job } from "@enact/core/util"; +import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; +import { shallowEqual, useDispatch, useSelector } from "react-redux"; +import Spotlight from "@enact/spotlight"; +import Marquee from "@enact/sandstone/Marquee"; +import Spottable from "@enact/spotlight/Spottable"; + +import CustomImage from "../CustomImage/CustomImage"; +import ViedoPlayer from "@enact/sandstone/VideoPlayer"; +import css from "./Template.module.less"; +import { getAdDetailAMD, getHomeTerms } from "../../api/homeApi"; + +import banner2 from "../../../assets/Image/img-home-banner-h-02.png"; +import banner3 from "../../../assets/Image/img-home-banner-v-01.png"; +import banner4 from "../../../assets/Image/img-home-banner-v-02.png"; + +const SpottableComponent = Spottable("div"); + +const Container = SpotlightContainerDecorator( + { + enterTo: "default-element", + }, + "div" +); + +const Template = ({ + isOnTop, + spotlightId, + onScrollTop, + onScrollShelf, + ...rest +}) => { + const dispatch = useDispatch(); + const termsData = getHomeTerms("MST00402"); + const [bannerImageLoaded, setBannerImageLoaded] = useState(false); + + useEffect(() => { + const termsData = getAdDetailAMD("test,", "1234"); + console.log(termsData); + }, []); + + const onClickBanner = useCallback(() => {}, []); + useEffect(() => {}, []); + return ( + +
+ {/* 비디오플레이어 추후 변경 */} +
+ + + +
+ +
+ +
+ + +
+ + ); +}; + +export default Template; diff --git a/com.twin.app.shoptime/src/components/HomeBanner/Template.module.less b/com.twin.app.shoptime/src/components/HomeBanner/Template.module.less new file mode 100644 index 00000000..6cd68ef6 --- /dev/null +++ b/com.twin.app.shoptime/src/components/HomeBanner/Template.module.less @@ -0,0 +1,85 @@ +@import "../../style/CommonStyle.module.less"; + +.container { + background-color: #f8f8f8; + display: flex; +} + +.videoPlayer { + width: 744px; + height: 420px; + margin: 24px 9px 18px 24px; + outline: "teal dashed 1px"; + transform: "scale(1)"; +} + +.banner02 { + width: 744px; + height: 420px; + margin-left: 24px; + &:focus, + &:hover, + &:focus-within, + &:active { + border: 4px solid @PRIMARY_COLOR_RED; + box-sizing: border-box; + } +} + +.banner03 { + width: 486px; + height: 858px; + margin: 24px 18px 50px; + &:focus, + &:hover, + &:focus-within, + &:active { + border: 4px solid @PRIMARY_COLOR_RED; + box-sizing: border-box; + } +} + +.banner04 { + width: 486px; + height: 858px; + margin: 24px 24px 50px 18px; + &:focus, + &:hover, + &:focus-within, + &:active { + border: 4px solid @PRIMARY_COLOR_RED; + box-sizing: border-box; + } +} + +.bannerFlexCol { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.bannerFlexRow { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} diff --git a/com.twin.app.shoptime/src/components/OnSale/OnSale.jsx b/com.twin.app.shoptime/src/components/OnSale/OnSale.jsx new file mode 100644 index 00000000..2b231653 --- /dev/null +++ b/com.twin.app.shoptime/src/components/OnSale/OnSale.jsx @@ -0,0 +1,101 @@ +import React, { + useCallback, + useEffect, + useState, + useMemo, + useRef, +} from "react"; +import classNames from "classnames"; +import { $L } from "../../utils/helperMethods"; +import { Job } from "@enact/core/util"; +import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; +import Spotlight from "@enact/spotlight"; +import Spottable from "@enact/spotlight/Spottable"; + +import { getOnSaleInfo } from "../../api/onSaleApi"; + +import css from "./OnSale.module.less"; + +const SpottableComponent = Spottable("div"); + +const Container = SpotlightContainerDecorator( + { + enterTo: "default-element", + }, + "div" +); + +const OnSale = ({ + isOnTop, + spotlightId, + onScrollTop, + onScrollShelf, + ...rest +}) => { + const [currentSaleData, setCurrentSaleData] = useState([]); + const [originalPrice, setOriginalPrice] = useState(null); + + const setSaleView = async (categoryIncFlag, lgCatCd) => { + try { + const saleData = await getOnSaleInfo({ lgCatCd, categoryIncFlag }); + if (saleData) { + setCurrentSaleData(saleData.homeOnSaleInfos); + } + } catch (error) { + console.error("Error saleData: ", error); + } + }; + + useEffect(() => { + setSaleView("Y", ""); + }, []); + + return ( + +
+

{$L("ON SALE")}

+ +
+ + ); +}; + +export default OnSale; diff --git a/com.twin.app.shoptime/src/components/OnSale/OnSale.module.less b/com.twin.app.shoptime/src/components/OnSale/OnSale.module.less new file mode 100644 index 00000000..da61f1b4 --- /dev/null +++ b/com.twin.app.shoptime/src/components/OnSale/OnSale.module.less @@ -0,0 +1,125 @@ +.bestSeller { + padding: 60px 0; + width: 100%; + overflow-x: auto; + .subTitle { + border-left: 6px solid #c70850; + padding-left: 12px; + box-sizing: border-box; + } + .onSaleItem { + margin-top: 20px; + height: 300px; + width: calc(630px * 12); + display: flex; + .onSaleItemList { + width: 630px; + height: 300px; + border-radius: 12px; + display: flex; + overflow: hidden; + margin-right: 18px; + border: 4px solid transparent; + box-sizing: border-box; + &:focus, + &:hover, + &:focus-within, + &:active { + border: 4px solid #c70850; + box-sizing: border-box; + drop-shadow: 0 0 50px 0.5 #000; + } + .onSaleItemListImg { + width: 300px; + height: 300px; + object-fit: contain; + display: inline-block; + box-sizing: border-box; + } + .onSaleItemListBox { + width: 330px; + height: 300px; + box-sizing: border-box; + padding: 24px; + display: inline-block; + .onSaleItemListBoxTitle { + width: 282px; + height: 30px; + font-size: 24px; + color: rgba(255, 255, 255, 0.5); + } + .onSaleItemListBoxSaleBox { + margin-top: 11px; + width: 274px; + height: 70px; + font-size: 50px; + color: #ffffff; + text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); + letter-spacing: -2px; + line-height: 60px; + .onSaleItemListBoxSaleBoxPer { + font-size: 84px; + letter-spacing: -3.36px; + } + } + .onSaleItemListBoxName { + margin-top: 41px; + width: 282px; + height: 60px; + text-overflow: ellipsis; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font-size: 24px; + line-height: 1.33; + color: #fff; + font-weight: bold; + } + .onSaleItemListBoxPrice { + margin-top: 9px; + width: 282px; + height: 36px; + font-size: 30px; + line-height: 0.93; + color: #fff; + letter-spacing: normal; + .onSaleItemListBoxPriceStripe { + margin-left: 4px; + color: #d5d5d5; + display: inline-block; + text-decoration: line-through; + font-size: 18px; + line-height: 1.56; + letter-spacing: normal; + } + } + } + &:nth-child(5n + 1) { + .onSaleItemListBox { + background-image: linear-gradient(to top, #f485c3, #cc4d92); + } + } + &:nth-child(5n + 2) { + .onSaleItemListBox { + background-image: linear-gradient(to top, #fdbe43, #e47915); + } + } + &:nth-child(5n + 3) { + .onSaleItemListBox { + background-image: linear-gradient(to top, #97ca73, #3e8d18); + } + } + &:nth-child(5n + 4) { + .onSaleItemListBox { + background-image: linear-gradient(to top, #84b0e9, #4282d9); + } + } + &:nth-child(5n + 5) { + .onSaleItemListBox { + background-image: linear-gradient(to top, #a387ea, #7750dc); + } + } + } + } +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 8c1a8cd1..846b06d4 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx @@ -1,6 +1,17 @@ +import React from "react"; + import TPanel from "../../components/TPanel/TPanel"; import { $L } from "../../utils/helperMethods"; +import Template from "../../components/HomeBanner/Template"; +import OnSale from "../../components/OnSale/OnSale"; + export default function HomePanel() { - return {$L("Welcome")}; + return ( + +