[홈패널] 템플렛이트 삭제
This commit is contained in:
sungmin.in
@@ -1,124 +0,0 @@
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
import classNames from "classnames";
|
||||
import { shallowEqual, useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import { Job } from "@enact/core/util";
|
||||
import Marquee from "@enact/sandstone/Marquee";
|
||||
import ViedoPlayer from "@enact/sandstone/VideoPlayer";
|
||||
import Spotlight from "@enact/spotlight";
|
||||
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
|
||||
import banner2 from "../../../../assets/Images/img-home-banner-h-02.png";
|
||||
import banner3 from "../../../../assets/Images/img-home-banner-v-01.png";
|
||||
import banner4 from "../../../../assets/Images/img-home-banner-v-02.png";
|
||||
import { getAdDetailAMD, getHomeTerms } from "../../../api/homeApi";
|
||||
import CustomImage from "../../../components/CustomImage/CustomImage";
|
||||
import css from "./Template.module.less";
|
||||
|
||||
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 (
|
||||
<Container
|
||||
{...rest}
|
||||
spotlightId={spotlightId}
|
||||
className={(css.container, css.homeTemplateBox)}
|
||||
>
|
||||
<div className={css.leftBannerBox}>
|
||||
{/* 비디오플레이어 추후 변경 */}
|
||||
<div
|
||||
style={{
|
||||
width: 744,
|
||||
height: 420,
|
||||
marginTop: 0,
|
||||
marginRight: 0,
|
||||
marginBottom: 18,
|
||||
marginLeft: 0,
|
||||
transform: "scale(1)",
|
||||
transformOrigin: "top",
|
||||
}}
|
||||
>
|
||||
<ViedoPlayer>
|
||||
<source
|
||||
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</ViedoPlayer>
|
||||
</div>
|
||||
<CustomImage
|
||||
className={css.banner02}
|
||||
delay={0}
|
||||
onClickBanner={onClickBanner}
|
||||
onImageLoaded={setBannerImageLoaded}
|
||||
src={
|
||||
banner2
|
||||
? banner2
|
||||
: "../../../../assets/Image/img-home-banner-h-02.png"
|
||||
}
|
||||
hide={""}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={css.bannerFlexRow}>
|
||||
<CustomImage
|
||||
className={css.banner03}
|
||||
delay={0}
|
||||
onClickBanner={onClickBanner}
|
||||
onImageLoaded={setBannerImageLoaded}
|
||||
src={
|
||||
banner3
|
||||
? banner3
|
||||
: "../../../../assets/Image/img-home-banner-v-01.png"
|
||||
}
|
||||
hide={""}
|
||||
/>
|
||||
<CustomImage
|
||||
className={css.banner04}
|
||||
delay={0}
|
||||
onClickBanner={onClickBanner}
|
||||
onImageLoaded={setBannerImageLoaded}
|
||||
src={
|
||||
banner4
|
||||
? banner4
|
||||
: "../../../../assets/Image/img-home-banner-v-02.png"
|
||||
}
|
||||
hide={""}
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Template;
|
||||
@@ -1,136 +0,0 @@
|
||||
@import "../../../style/CommonStyle.module.less";
|
||||
@import "../../../style/utils.module.less";
|
||||
|
||||
.container {
|
||||
background-color: @BG_COLOR_01;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.homeTemplateBox {
|
||||
margin: 24px 24px 0px;
|
||||
display: flex;
|
||||
img,
|
||||
video {
|
||||
.size(@w: 100%, @h: 100%);
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
.leftBannerBox {
|
||||
.size(@w: 744px, @h: 858px);
|
||||
margin-right: 18px;
|
||||
&.dualBox {
|
||||
.topBox {
|
||||
.size(@w: 744px, @h: 420px);
|
||||
margin-bottom: 18px;
|
||||
border-radius: 12px;
|
||||
.border-solid(@size:4px, @color:transparent);
|
||||
&:focus {
|
||||
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
||||
}
|
||||
}
|
||||
.underBox {
|
||||
.size(@w: 744px, @h: 420px);
|
||||
.border-solid(@size:4px, @color:transparent);
|
||||
border-radius: 12px;
|
||||
&:focus {
|
||||
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.videoBox {
|
||||
.size(@w: 744px, @h: 420px);
|
||||
margin: 0 18px 18px 0;
|
||||
.border-solid(@size:4px, @color:transparent);
|
||||
&:focus {
|
||||
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.videoPlayer {
|
||||
.size(@w: 744px, @h: 420px);
|
||||
outline: "teal dashed 1px";
|
||||
transform: "scale(1)";
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
.banner02 {
|
||||
.size(@w: 744px, @h: 420px);
|
||||
border-radius: 12px;
|
||||
.border-solid(@size:4px, @color:transparent);
|
||||
&:focus {
|
||||
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
||||
}
|
||||
}
|
||||
|
||||
.banner03 {
|
||||
.size(@w: 486px, @h: 858px);
|
||||
.border-solid(@size:4px, @color:transparent);
|
||||
border-radius: 12px;
|
||||
margin-right: 18px;
|
||||
&:focus {
|
||||
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
||||
}
|
||||
}
|
||||
|
||||
.banner04 {
|
||||
.size(@w: 486px, @h: 858px);
|
||||
.border-solid(@size:4px, @color:transparent);
|
||||
&:focus {
|
||||
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.mainBox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mainBox {
|
||||
display: flex;
|
||||
|
||||
.imgBox {
|
||||
.size(@w: 486px, @h: 858px);
|
||||
.border-solid(@size:4px, @color:transparent);
|
||||
margin-right: 18px;
|
||||
border-radius: 12px;
|
||||
&:focus {
|
||||
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user