optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[HomePanel]홈배너 부분 디자인수정

Browse Source 
- css 수정입니다.
This commit is contained in:
junghoon86.park
2024-02-05 14:22:43 +09:00
parent d212c318fc
commit a61479e773
5 changed files with 293 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
View File

@@ -1,15 +1,18 @@
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { Job } from "@enact/core/util"; import classNames from "classnames";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import { shallowEqual, useDispatch, useSelector } from "react-redux"; import { shallowEqual, useDispatch, useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";
import { Job } from "@enact/core/util";
import Marquee from "@enact/sandstone/Marquee"; import Marquee from "@enact/sandstone/Marquee";
import Spotlight from "@enact/spotlight";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable"; import Spottable from "@enact/spotlight/Spottable";
import CustomImage from "../../../components/CustomImage/CustomImage"; import CustomImage from "../../../components/CustomImage/CustomImage";
import css from "./Template.module.less";
import Random from "./RandomUnit"; import Random from "./RandomUnit";
import Rolling from "./RollingUnit"; import Rolling from "./RollingUnit";
import css from "./Template.module.less";
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
@@ -20,7 +23,15 @@ const Container = SpotlightContainerDecorator(
"div" "div"
); );
export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest }) { export default function HomeBannerTemplate1({
isOnTop,
spotlightId,
onScrollTop,
onScrollShelf,
homeMainContentsBannerInfos,
homeTopDisplayInfos,
...rest
}) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [bannerImageLoaded, setBannerImageLoaded] = useState(false); const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
@@ -40,45 +51,46 @@ export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop
const replaceBannerVtctp = useCallback(() => { const replaceBannerVtctp = useCallback(() => {
let imgPath = ""; let imgPath = "";
if(homeTopDisplayInfos[0].vtctpImgPath1 == "" || homeTopDisplayInfos[0].vtctpImgPath1 == null){ if (
homeTopDisplayInfos[0].vtctpImgPath1 == "" ||
homeTopDisplayInfos[0].vtctpImgPath1 == null
) {
imgPath = homeTopDisplayInfos[0].vtctpImgPath2; imgPath = homeTopDisplayInfos[0].vtctpImgPath2;
}else{ } else {
imgPath = homeTopDisplayInfos[0].vtctpImgPath1; imgPath = homeTopDisplayInfos[0].vtctpImgPath1;
} }
return imgPath; return imgPath;
},[]); }, []);
// 배너가 없는 경우, 대체용 배너 [수평] // 배너가 없는 경우, 대체용 배너 [수평]
const replaceBannerWdth = useCallback(() => { const replaceBannerWdth = useCallback(() => {
let imgPath = ""; let imgPath = "";
if(homeTopDisplayInfos[0].wdthtpImgPath1 == "" || homeTopDisplayInfos[0].wdthtpImgPath1 == null){ if (
homeTopDisplayInfos[0].wdthtpImgPath1 == "" ||
homeTopDisplayInfos[0].wdthtpImgPath1 == null
) {
imgPath = homeTopDisplayInfos[0].wdthtpImgPath2; imgPath = homeTopDisplayInfos[0].wdthtpImgPath2;
}else{ } else {
imgPath = homeTopDisplayInfos[0].wdthtpImgPath1; imgPath = homeTopDisplayInfos[0].wdthtpImgPath1;
} }
return imgPath; return imgPath;
},[]);
const onClickBanner = useCallback(() => {
}, []); }, []);
const onClickBanner = useCallback(() => {}, []);
useEffect(() => { useEffect(() => {
bannerInfos.forEach((el, index) => { bannerInfos.forEach((el, index) => {
if(el.banrLctnNo == "1"){ if (el.banrLctnNo == "1") {
setBaner1Data(el); setBaner1Data(el);
setBaner1Index(index); setBaner1Index(index);
} } else if (el.banrLctnNo == "2") {
else if(el.banrLctnNo == "2"){
setBaner2Data(el); setBaner2Data(el);
setBaner2Index(index); setBaner2Index(index);
} } else if (el.banrLctnNo == "3") {
else if(el.banrLctnNo == "3"){
setBaner3Data(el); setBaner3Data(el);
setBaner3Index(index); setBaner3Index(index);
} } else if (el.banrLctnNo == "4") {
else if(el.banrLctnNo == "4"){
setBaner4Data(el); setBaner4Data(el);
setBaner4Index(index); setBaner4Index(index);
} }
@@ -90,47 +102,36 @@ export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop
return ( return (
<Container className={(css.container, css.homeTemplateBox)}> <Container className={(css.container, css.homeTemplateBox)}>
<SpottableComponent> <SpottableComponent>
<div className={css.leftBannerBox}> <div className={classNames(css.leftBannerBox, css.dualBox)}>
{/* 배너1 */} {/* 배너1 */}
{baner1Data.shptmDspyTpNm == "Rolling" ? ( {baner1Data.shptmDspyTpNm == "Rolling" ? (
<Rolling <Rolling banerData={baner2Data} className={css.topBox} />
banerData={baner2Data} ) : baner1Data.shptmDspyTpNm == "Random" ? (
/> <Random banerData={baner3Data} className={css.topBox} />
) : baner1Data.shptmDspyTpNm == "Random" ? ( ) : (
<Random
banerData={baner3Data}
/>
) :
<CustomImage <CustomImage
className={""}
delay={0} delay={0}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
onImageLoaded={""} onImageLoaded={""}
src={replaceBannerWdth} src={replaceBannerWdth}
hide={""} hide={""}
className={css.topBox}
/> />
} )}
{/* 배너2 롤링 테스트 진행중 */} {/* 배너2 롤링 테스트 진행중 */}
{baner2Data.shptmDspyTpNm == "Rolling" ? ( {baner2Data.shptmDspyTpNm == "Rolling" ? (
<Random <Random banerData={baner2Data} className={css.underBox} />
banerData={baner2Data} ) : null}
/>
) : null
}
</div> </div>
</SpottableComponent> </SpottableComponent>
<div className={css.bannerFlexRow}> <div className={css.bannerFlexRow}>
{/* 배너3 */} {/* 배너3 */}
{baner3Data.shptmDspyTpNm == "Rolling" ? ( {baner3Data.shptmDspyTpNm == "Rolling" ? (
<Rolling <Rolling banerData={baner3Data} />
banerData={baner3Data} ) : baner3Data.shptmDspyTpNm == "Random" ? (
/> <Random banerData={baner3Data} />
) : baner3Data.shptmDspyTpNm == "Random" ? ( ) : (
<Random
banerData={baner3Data}
/>
) :
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage
className={css.banner03} className={css.banner03}
@@ -141,31 +142,27 @@ export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop
hide={""} hide={""}
/> />
</SpottableComponent> </SpottableComponent>
} )}
{/* 배너4 */} {/* 배너4 */}
{baner4Data.shptmDspyTpNm == "Rolling" ? ( {baner4Data.shptmDspyTpNm == "Rolling" ? (
<SpottableComponent> <SpottableComponent>
<Rolling <Rolling banerData={baner4Data} />
banerData={baner4Data} </SpottableComponent>
/>
</SpottableComponent>
) : baner4Data.shptmDspyTpNm == "Random" ? ( ) : baner4Data.shptmDspyTpNm == "Random" ? (
<Random <Random banerData={baner4Data} />
banerData={baner4Data} ) : (
/> <SpottableComponent>
) : <CustomImage
<SpottableComponent> className={css.banner03}
<CustomImage delay={0}
className={css.banner03} onClickBanner={onClickBanner}
delay={0} onImageLoaded={""}
onClickBanner={onClickBanner} src={replaceBannerVtctp}
onImageLoaded={""} hide={""}
src={replaceBannerVtctp} />
hide={""} </SpottableComponent>
/> )}
</SpottableComponent>
}
</div> </div>
</Container> </Container>
); );

60
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
View File

@@ -1,12 +1,58 @@
import React, {useCallback, useEffect, useState, useMemo,useRef ,memo} from "react"; import React, {
memo,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
export default function HomeBannerTemplate2 ({isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest}) { import classNames from "classnames";
useEffect(() => { import Spotlight from "@enact/spotlight";
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";
return( const SpottableComponent = Spottable("div");
<p>템플릿2</p>
) const Container = SpotlightContainerDecorator(
{
enterTo: "default-element",
},
"div"
);
export default function HomeBannerTemplate2({
isOnTop,
spotlightId,
onScrollTop,
onScrollShelf,
homeMainContentsBannerInfos,
homeTopDisplayInfos,
...rest
}) {
return (
<Container className={css.homeTemplateBox}>
<SpottableComponent className={css.banner03}>
<img src={banner4} />
</SpottableComponent>
<SpottableComponent className={classNames(css.leftBox, css.dualBox)}>
<div className={classNames(css.topBox, css.videoBox)}>
<img src={banner2} />
</div>
<div className={classNames(css.underBox, css.videoBox)}>
<img src={banner2} />
</div>
</SpottableComponent>
<SpottableComponent className={css.banner03}>
<img src={banner4} />
</SpottableComponent>
</Container>
);
} }

159
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
View File

@@ -1,21 +1,23 @@
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import { Job } from "@enact/core/util"; import { Job } from "@enact/core/util";
import Marquee from "@enact/sandstone/Marquee";
import Spotlight from "@enact/spotlight";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable"; import Spottable from "@enact/spotlight/Spottable";
import Spotlight from "@enact/spotlight";
import { useDispatch, useSelector } from "react-redux";
import Marquee from "@enact/sandstone/Marquee";
import CustomImage from "../../../components/CustomImage/CustomImage";
import css from "./Template.module.less";
import Random from "./RandomUnit";
import Rolling from "./RollingUnit";
import testimg from "../../../../assets/h430054.webp"; import testimg from "../../../../assets/h430054.webp";
import banner2 from "../../../../assets/Image/img-home-banner-h-02.png"; import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
import banner4 from "../../../../assets/Image/img-home-banner-v-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 banner3 from "../../../../assets/images/mainTemplate/img-home-banner-td-ver.svg";
import CustomImage from "../../../components/CustomImage/CustomImage";
import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal"; import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
import Random from "./RandomUnit";
import Rolling from "./RollingUnit";
import css from "./Template.module.less";
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
@@ -26,7 +28,15 @@ const Container = SpotlightContainerDecorator(
"div" "div"
); );
export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest }) { export default function HomeBannerTemplate3({
isOnTop,
spotlightId,
onScrollTop,
onScrollShelf,
homeMainContentsBannerInfos,
homeTopDisplayInfos,
...rest
}) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [bannerImageLoaded, setBannerImageLoaded] = useState(false); const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
@@ -46,45 +56,46 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
const replaceBannerVtctp = useCallback(() => { const replaceBannerVtctp = useCallback(() => {
let imgPath = ""; let imgPath = "";
if(homeTopDisplayInfos[0].vtctpImgPath1 == "" || homeTopDisplayInfos[0].vtctpImgPath1 == null){ if (
homeTopDisplayInfos[0].vtctpImgPath1 == "" ||
homeTopDisplayInfos[0].vtctpImgPath1 == null
) {
imgPath = homeTopDisplayInfos[0].vtctpImgPath2; imgPath = homeTopDisplayInfos[0].vtctpImgPath2;
}else{ } else {
imgPath = homeTopDisplayInfos[0].vtctpImgPath1; imgPath = homeTopDisplayInfos[0].vtctpImgPath1;
} }
return imgPath; return imgPath;
},[]); }, []);
// 배너가 없는 경우, 대체용 배너 [수직] // 배너가 없는 경우, 대체용 배너 [수직]
const replaceBannerWdth = useCallback(() => { const replaceBannerWdth = useCallback(() => {
let imgPath = ""; let imgPath = "";
if(homeTopDisplayInfos[0].wdthtpImgPath1 == "" || homeTopDisplayInfos[0].wdthtpImgPath1 == null){ if (
homeTopDisplayInfos[0].wdthtpImgPath1 == "" ||
homeTopDisplayInfos[0].wdthtpImgPath1 == null
) {
imgPath = homeTopDisplayInfos[0].wdthtpImgPath2; imgPath = homeTopDisplayInfos[0].wdthtpImgPath2;
}else{ } else {
imgPath = homeTopDisplayInfos[0].wdthtpImgPath1; imgPath = homeTopDisplayInfos[0].wdthtpImgPath1;
} }
return imgPath; return imgPath;
},[]);
const onClickBanner = useCallback(() => {
}, []); }, []);
const onClickBanner = useCallback(() => {}, []);
useEffect(() => { useEffect(() => {
bannerInfos.forEach((el, index) => { bannerInfos.forEach((el, index) => {
if(el.banrLctnNo == "1"){ if (el.banrLctnNo == "1") {
setBaner1Data(el); setBaner1Data(el);
setBaner1Index(index); setBaner1Index(index);
} } else if (el.banrLctnNo == "2") {
else if(el.banrLctnNo == "2"){
setBaner2Data(el); setBaner2Data(el);
setBaner2Index(index); setBaner2Index(index);
} } else if (el.banrLctnNo == "3") {
else if(el.banrLctnNo == "3"){
setBaner3Data(el); setBaner3Data(el);
setBaner3Index(index); setBaner3Index(index);
} } else if (el.banrLctnNo == "4") {
else if(el.banrLctnNo == "4"){
setBaner4Data(el); setBaner4Data(el);
setBaner4Index(index); setBaner4Index(index);
} }
@@ -99,14 +110,10 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
<div class={css.mainBox}> <div class={css.mainBox}>
<SpottableComponent className={css.imgBox}> <SpottableComponent className={css.imgBox}>
{baner1Data.shptmDspyTpNm == "Rolling" ? ( {baner1Data.shptmDspyTpNm == "Rolling" ? (
<Rolling <Rolling banerData={baner1Data} />
banerData={baner1Data} ) : baner1Data.shptmDspyTpNm == "Random" ? (
/> <Random banerData={baner1Data} />
) : baner1Data.shptmDspyTpNm == "Random" ? ( ) : (
<Random
banerData={baner1Data}
/>
) :
<CustomImage <CustomImage
className={""} className={""}
delay={0} delay={0}
@@ -115,12 +122,12 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
src={replaceBannerVtctp} src={replaceBannerVtctp}
hide={""} hide={""}
/> />
} )}
</SpottableComponent> </SpottableComponent>
<SpottableComponent className={css.imgBox}> <SpottableComponent className={css.imgBox}>
{baner2Data.shptmDspyTpNm == "Rolling" ? ( {baner2Data.shptmDspyTpNm == "Rolling" ? (
// 롤링으로 변경하기 구현 준비 중 // 롤링으로 변경하기 구현 준비 중
<CustomImage <CustomImage
className={""} className={""}
delay={0} delay={0}
@@ -130,62 +137,54 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
hide={""} hide={""}
/> />
) : baner2Data.shptmDspyTpNm == "Random" ? ( ) : baner2Data.shptmDspyTpNm == "Random" ? (
<Random <Random banerData={baner2Data} />
banerData={baner2Data} ) : (
<CustomImage
className={""}
delay={0}
onClickBanner={onClickBanner}
onImageLoaded={""}
src={replaceBannerVtctp}
hide={""}
/> />
) : )}
<CustomImage
className={""}
delay={0}
onClickBanner={onClickBanner}
onImageLoaded={""}
src={replaceBannerVtctp}
hide={""}
/>
}
</SpottableComponent> </SpottableComponent>
<div className={css.dualBox}> <div className={css.dualBox}>
<SpottableComponent className={css.videoBox}> <SpottableComponent className={classNames(css.videoBox, css.topBox)}>
{baner3Data.shptmDspyTpNm == "Rolling" ? ( {baner3Data.shptmDspyTpNm == "Rolling" ? (
<Rolling <Rolling banerData={baner3Data} />
banerData={baner3Data} ) : baner3Data.shptmDspyTpNm == "Random" ? (
/> <Random banerData={baner3Data} />
) : baner3Data.shptmDspyTpNm == "Random" ? ( ) : (
<Random
banerData={baner3Data}
/>
) :
<CustomImage <CustomImage
className={""} className={""}
delay={0} delay={0}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
onImageLoaded={""} onImageLoaded={""}
src={replaceBannerWdth} src={replaceBannerWdth}
hide={""} hide={""}
/> />
} )}
</SpottableComponent> </SpottableComponent>
<SpottableComponent className={css.slideBox}> <SpottableComponent
className={classNames(css.videoBox, css.underBox)}
>
{baner4Data.shptmDspyTpNm == "Rolling" ? ( {baner4Data.shptmDspyTpNm == "Rolling" ? (
<Rolling <Rolling banerData={baner4Data} />
banerData={baner4Data} ) : baner4Data.shptmDspyTpNm == "Random" ? (
/> <Random banerData={baner4Data} />
) : baner4Data.shptmDspyTpNm == "Random" ? ( ) : (
<Random
banerData={baner4Data}
/>
) :
<CustomImage <CustomImage
className={""} className={""}
delay={0} delay={0}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
onImageLoaded={""} onImageLoaded={""}
src={replaceBannerWdth} src={replaceBannerWdth}
hide={""} hide={""}
/> />
} )}
</SpottableComponent> </SpottableComponent>
</div> </div>
</div> </div>

80
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less
View File

@@ -13,6 +13,41 @@
width: 744px; width: 744px;
height: 858px; height: 858px;
margin-right: 18px; margin-right: 18px;
&.dualBox {
.topBox {
width: 744px;
height: 420px;
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();
border-radius: 12px;
}
}
.underBox {
width: 744px;
height: 420px;
border: 4px solid transparent;
border-radius: 12px;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
}
}
} }
.videoBox { .videoBox {
width: 744px; width: 744px;
@@ -26,6 +61,7 @@
border: 4px solid @PRIMARY_COLOR_RED; border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box; box-sizing: border-box;
.focusDropShadow(); .focusDropShadow();
border-radius: 12px;
} }
.videoPlayer { .videoPlayer {
width: 744px; width: 744px;
@@ -48,6 +84,7 @@
border: 4px solid @PRIMARY_COLOR_RED; border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box; box-sizing: border-box;
.focusDropShadow(); .focusDropShadow();
border-radius: 12px;
} }
} }
@@ -80,6 +117,7 @@
border: 4px solid @PRIMARY_COLOR_RED; border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box; box-sizing: border-box;
.focusDropShadow(); .focusDropShadow();
border-radius: 12px;
} }
} }
@@ -119,9 +157,12 @@
display: flex; display: flex;
} }
img { img,
video {
width: 100%; width: 100%;
object-fit: contain; height: 100%;
object-fit: cover;
border-radius: 12px;
} }
.mainBox { .mainBox {
@@ -141,44 +182,11 @@ img {
border: 4px solid @PRIMARY_COLOR_RED; border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box; box-sizing: border-box;
.focusDropShadow(); .focusDropShadow();
border-radius: 12px;
} }
img { img {
width: 100%; width: 100%;
object-fit: contain; 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();
}
}
}
} }

69
com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
View File

@@ -1,16 +1,16 @@
import React, {useCallback, useEffect, useState} from "react"; import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import TPanel from "../../components/TPanel/TPanel"; import TPanel from "../../components/TPanel/TPanel";
import BestSeller from "../HomePanel/BestSeller/BestSeller"; import BestSeller from "../HomePanel/BestSeller/BestSeller";
import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";
import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale"; import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
import css from "../HomePanel/HomePanel.module.less"; import css from "../HomePanel/HomePanel.module.less";
import PopularShow from "../HomePanel/PopularShow/PopularShow"; import PopularShow from "../HomePanel/PopularShow/PopularShow";
import SubCategory from "../HomePanel/SubCategory/SubCategory"; import SubCategory from "../HomePanel/SubCategory/SubCategory";
import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";
export default function HomePanel() { export default function HomePanel() {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -25,10 +25,10 @@ export default function HomePanel() {
const [select, setSelect] = useState(null); const [select, setSelect] = useState(null);
const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]); const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
// 추후 스위치 select 로 변경 : 스팟라이트 테스트 중 // 추후 스위치 select 로 변경 : 스팟라이트 테스트 중
const selectSwitch = () =>{ const selectSwitch = () => {
switch ("DSP00203") { switch ("DSP00201") {
case "DSP00201": case "DSP00201":
return( return (
<HomeBannerTemplate1 <HomeBannerTemplate1
isOnTop={""} isOnTop={""}
spotlightId={""} spotlightId={""}
@@ -36,10 +36,10 @@ export default function HomePanel() {
onScrollShelf={""} onScrollShelf={""}
homeMainContentsBannerInfos={homeMainContentsBannerInfos} homeMainContentsBannerInfos={homeMainContentsBannerInfos}
homeTopDisplayInfos={homeTopDisplayInfos} homeTopDisplayInfos={homeTopDisplayInfos}
/> />
) );
case "DSP00202": case "DSP00202":
return( return (
<HomeBannerTemplate2 <HomeBannerTemplate2
isOnTop={""} isOnTop={""}
spotlightId={""} spotlightId={""}
@@ -48,9 +48,9 @@ export default function HomePanel() {
homeMainContentsBannerInfos={homeMainContentsBannerInfos} homeMainContentsBannerInfos={homeMainContentsBannerInfos}
homeTopDisplayInfos={homeTopDisplayInfos} homeTopDisplayInfos={homeTopDisplayInfos}
/> />
) );
case "DSP00203": case "DSP00203":
return( return (
<HomeBannerTemplate3 <HomeBannerTemplate3
isOnTop={""} isOnTop={""}
spotlightId={""} spotlightId={""}
@@ -59,40 +59,43 @@ export default function HomePanel() {
homeMainContentsBannerInfos={homeMainContentsBannerInfos} homeMainContentsBannerInfos={homeMainContentsBannerInfos}
homeTopDisplayInfos={homeTopDisplayInfos} homeTopDisplayInfos={homeTopDisplayInfos}
/> />
) );
default: default:
return null; return null;
} }
} };
useEffect(() => { useEffect(() => {
if(homeTopDisplayInfos){ if (homeTopDisplayInfos) {
setSelect(homeTopDisplayInfos[0].shptmTmplCd); setSelect(homeTopDisplayInfos[0].shptmTmplCd);
} }
if(homeLayoutInfo){ if (homeLayoutInfo) {
setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo); setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo);
} }
selectSwitch(); selectSwitch();
}, [homeTopDisplayInfos, homeMainContentsBannerInfos, homeLayoutInfo, select]); }, [
homeTopDisplayInfos,
homeMainContentsBannerInfos,
homeLayoutInfo,
select,
]);
return ( return (
<TPanel className={css.panelDesign}> <TPanel className={css.panelDesign}>
{homeLayoutInfoDetail && {homeLayoutInfoDetail &&
homeLayoutInfoDetail.map((item, index)=> { homeLayoutInfoDetail.map((item, index) => {
return( return item.shptmApphmDspyOptCd == "DSP00101" ? (
item.shptmApphmDspyOptCd == "DSP00101" ? ( selectSwitch()
selectSwitch() ) : item.shptmApphmDspyOptCd == "DSP00102" ? (
) : item.shptmApphmDspyOptCd == "DSP00102" ? ( <SubCategory />
<SubCategory /> ) : item.shptmApphmDspyOptCd == "DSP00105" ? (
) : item.shptmApphmDspyOptCd == "DSP00105" ? ( <BestSeller />
<BestSeller /> ) : item.shptmApphmDspyOptCd == "DSP00103" ? (
) : item.shptmApphmDspyOptCd == "DSP00103" ? ( <HomeOnSale />
<HomeOnSale /> ) : item.shptmApphmDspyOptCd == "DSP00104" ? (
) : item.shptmApphmDspyOptCd == "DSP00104" ? ( <PopularShow />
<PopularShow /> ) : null;
) : null })}
)})
}
</TPanel> </TPanel>
); );
} }