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

[홈패널] 템플릿1,템플릿2, 템플릿3 css 수정

Browse Source
This commit is contained in:
sungmin.in
2024-02-13 18:20:35 +09:00
parent aae303ea2e
commit 1c1f5bb048
3 changed files with 148 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,6 @@ import {
useSelector, useSelector,
} from 'react-redux'; } from 'react-redux';
import Marquee from '@enact/sandstone/Marquee';
import Spotlight from '@enact/spotlight'; import Spotlight from '@enact/spotlight';
import { import {
SpotlightContainerDecorator, SpotlightContainerDecorator,
@@ -26,20 +25,18 @@ import Rolling from './RollingUnit';
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
{ { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
enterTo: "default-element",
},
"div" "div"
); );
export default function HomeBannerTemplate1() { export default function HomeBannerTemplate1() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
const [bannerInfos, setBannerInfos] = useState([]); const [bannerInfos, setBannerInfos] = useState([]);
const [vctpImage1, setVctpImage1] = useState(null); const [onFocus, setOnFocus] = useState(true);
const [vctpImage2, setVctpImage2] = useState(null); const [vctpImage1, setVctpImage1] = useState();
const [wdthImage1, setWdthImage1] = useState(null); const [vctpImage2, setVctpImage2] = useState();
const [wdthImage2, setWdthImage2] = useState(null); const [wdthImage1, setwdthImage1] = useState();
const [wdthImage2, setwdthImage2] = useState();
const homeMainContentsBannerInfos = useSelector( const homeMainContentsBannerInfos = useSelector(
(state) => state.home.mainContentsData.homeMainContentsBannerInfos (state) => state.home.mainContentsData.homeMainContentsBannerInfos
@@ -51,14 +48,11 @@ export default function HomeBannerTemplate1() {
useEffect(() => { useEffect(() => {
if (homeTopDisplayInfos) { if (homeTopDisplayInfos) {
const vctpImage1 = homeTopDisplayInfos[0].vtctpImgPath1; setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1);
const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2; setVctpImage2(homeTopDisplayInfos[0].vtctpImgPath2);
const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1; setwdthImage1(homeTopDisplayInfos[0].wdthtpImgPath1);
const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2; setwdthImage2(homeTopDisplayInfos[0].wdthtpImgPath2);
setVctpImage1(vctpImage1);
setVctpImage2(vctpImage2);
setWdthImage1(wdthImage1);
setWdthImage2(wdthImage2);
dispatch(getHomeMainContents); dispatch(getHomeMainContents);
} }
}, [homeTopDisplayInfos, dispatch]); }, [homeTopDisplayInfos, dispatch]);
@@ -68,43 +62,41 @@ export default function HomeBannerTemplate1() {
const banerInfo = homeMainContentsBannerInfos[0].bannerInfos; const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
setBannerInfos(banerInfo); setBannerInfos(banerInfo);
dispatch(getHomeMainContents); dispatch(getHomeMainContents);
console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
console.log(homeTopDisplayInfos, "탑디스");
} }
}, [homeMainContentsBannerInfos, dispatch]); }, [homeMainContentsBannerInfos, dispatch]);
const onClickBanner = useCallback(() => {}, []); const onClickBanner = useCallback(() => {}, []);
return ( return (
<Container className={css.container}> <Container className={css.container}>
<div className={css.homeTemplateBox}> <div className={css.homeTemplateBox}>
<div className={css.mainBox}> <div className={css.mainBox}>
<div className={css.dualBox}> <div className={css.dualBox}>
{/* 배너1 */}
<SpottableComponent <SpottableComponent
className={classNames(css.videoBox, css.topBox)} className={classNames(css.videoBox, css.topBox)}
> >
{/* 배너1 */}
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" && return item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
<Rolling <Rolling
bannerData={item}
className={css.smallBox} className={css.smallBox}
bannerData={item}
index={index}
key={index} key={index}
imageType={true} imageType={true}
/> />
) : item.banrLctnNo === "1" && ) : item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
/* <Random <Random
bannerData={item}
className={css.smallBox}
key={index}
imageType={true}
/> */
<CustomImage
key={index}
className={css.smallBox} className={css.smallBox}
onClickBanner={onClickBanner} bannerData={item}
delay={0} index={index}
src={wdthImage2} key={index}
imageType={true}
/> />
) : ( ) : (
<CustomImage <CustomImage
@@ -112,125 +104,107 @@ export default function HomeBannerTemplate1() {
className={css.smallBox} className={css.smallBox}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={ src={wdthImage1}
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/> />
); );
})} })}
</SpottableComponent> </SpottableComponent>
{/* 배너4 */}
{/* 배너2 */}
<SpottableComponent <SpottableComponent
className={classNames(css.videoBox, css.underBox)} className={classNames(css.videoBox, css.underBox)}
> >
{/* 배너2 */}
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" && return item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
/* <Rolling <Rolling
bannerData={item}
className={css.smallBox}
key={index}
imageType={true}
/> */
<CustomImage
key={index}
className={css.smallBox} className={css.smallBox}
onClickBanner={onClickBanner} bannerData={item}
delay={0} index={index}
src={ key={index}
wdthImage1 === "" || wdthImage1 === null imageType={true}
? wdthImage2 onFocus={onFocus}
: wdthImage1
}
/> />
) : item.banrLctnNo === "2" && ) : item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
/* <Random <Random
bannerData={item}
className={css.smallBox}
key={index}
imageType={true}
/> */
<CustomImage
key={index}
className={css.smallBox} className={css.smallBox}
onClickBanner={onClickBanner} bannerData={item}
delay={0} key={index}
src={ imageType={true}
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/> />
) : ( ) : (
<CustomImage <CustomImage
key={index}
className={css.smallBox} className={css.smallBox}
key={index}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={ src={wdthImage2}
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/> />
); );
})} })}
</SpottableComponent> </SpottableComponent>
</div> </div>
{/* 배너3 */}
<SpottableComponent className={classNames(css.imgBox, css.mr18)}> <SpottableComponent className={classNames(css.imgBox, css.mr18)}>
{/* 배너3 */}
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" && return item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
<Rolling bannerData={item} key={index} imageType={false} /> <Rolling
bannerData={item}
index={index}
key={index}
imageType={true}
/>
) : item.banrLctnNo === "3" && ) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={false} /> <Random
bannerData={item}
index={index}
key={index}
imageType={true}
/>
) : ( ) : (
/* <CustomImage <CustomImage
key={index} key={index}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={ src={vctpImage1}
wdthImage1 === "" || wdthImage1 === null />
? wdthImage2
: wdthImage1
}
/> */
<Random bannerData={item} key={index} imageType={false} />
); );
})} })}
</SpottableComponent> </SpottableComponent>
{/* 배너4 */} {/* 배너4 */}
<SpottableComponent className={classNames(css.imgBox)}> <SpottableComponent className={classNames(css.imgBox)}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "4" && return item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
<Rolling bannerData={item} key={index} imageType={false} /> <Rolling
bannerData={item}
index={index}
key={index}
imageType={true}
/>
) : item.banrLctnNo === "4" && ) : item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={false} /> <Random
bannerData={item}
index={index}
key={index}
imageType={true}
/>
) : ( ) : (
/* <CustomImage <CustomImage
key={index} key={index}
onClickBanner={onClickBanner}
onClickBanner={onClickBanner} delay={0}
delay={0} src={vctpImage2}
src={ />
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/> */
<Random bannerData={item} key={index} imageType={false} />
); );
})} })}
</SpottableComponent> </SpottableComponent>

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

@@ -25,20 +25,18 @@ import Rolling from './RollingUnit';
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
{ { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
enterTo: "default-element",
},
"div" "div"
); );
export default function HomeBannerTemplate2() { export default function HomeBannerTemplate2() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
const [bannerInfos, setBannerInfos] = useState([]); const [bannerInfos, setBannerInfos] = useState([]);
const [vctpImage1, setVctpImage1] = useState(null); const [onFocus, setOnFocus] = useState(true);
const [vctpImage2, setVctpImage2] = useState(null); const [vctpImage1, setVctpImage1] = useState();
const [wdthImage1, setWdthImage1] = useState(null); const [vctpImage2, setVctpImage2] = useState();
const [wdthImage2, setWdthImage2] = useState(null); const [wdthImage1, setwdthImage1] = useState();
const [wdthImage2, setwdthImage2] = useState();
const homeMainContentsBannerInfos = useSelector( const homeMainContentsBannerInfos = useSelector(
(state) => state.home.mainContentsData.homeMainContentsBannerInfos (state) => state.home.mainContentsData.homeMainContentsBannerInfos
@@ -50,14 +48,11 @@ export default function HomeBannerTemplate2() {
useEffect(() => { useEffect(() => {
if (homeTopDisplayInfos) { if (homeTopDisplayInfos) {
const vctpImage1 = homeTopDisplayInfos[0].vtctpImgPath1; setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1);
const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2; setVctpImage2(homeTopDisplayInfos[0].vtctpImgPath2);
const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1; setwdthImage1(homeTopDisplayInfos[0].wdthtpImgPath1);
const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2; setwdthImage2(homeTopDisplayInfos[0].wdthtpImgPath2);
setVctpImage1(vctpImage1);
setVctpImage2(vctpImage2);
setWdthImage1(wdthImage1);
setWdthImage2(wdthImage2);
dispatch(getHomeMainContents); dispatch(getHomeMainContents);
} }
}, [homeTopDisplayInfos, dispatch]); }, [homeTopDisplayInfos, dispatch]);
@@ -67,6 +62,8 @@ export default function HomeBannerTemplate2() {
const banerInfo = homeMainContentsBannerInfos[0].bannerInfos; const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
setBannerInfos(banerInfo); setBannerInfos(banerInfo);
dispatch(getHomeMainContents); dispatch(getHomeMainContents);
console.log(homeMainContentsBannerInfos, "메인 컨텐츠 - 템플릿2");
console.log(homeTopDisplayInfos, "탑디스");
} }
}, [homeMainContentsBannerInfos, dispatch]); }, [homeMainContentsBannerInfos, dispatch]);
@@ -75,112 +72,129 @@ export default function HomeBannerTemplate2() {
<Container className={css.container}> <Container className={css.container}>
<div className={css.homeTemplateBox}> <div className={css.homeTemplateBox}>
<div className={css.mainBox}> <div className={css.mainBox}>
{/* 배너1 */}
<SpottableComponent className={classNames(css.longBanner, css.mr18)}> <SpottableComponent className={classNames(css.longBanner, css.mr18)}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" && return item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
<Rolling bannerData={item} key={index} imageType={false} /> <Rolling
bannerData={item}
index={index}
key={index}
imageType={false}
/>
) : item.banrLctnNo === "1" && ) : item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={false} /> <Random
bannerData={item}
index={index}
key={index}
imageType={false}
/>
) : ( ) : (
<CustomImage <CustomImage
key={index} key={index}
onClickBanner={onClickBanner} onClick={onClickBanner}
delay={0} delay={0}
src={ src={vctpImage1}
vctpImage1 === "" || vctpImage1 === null
? vctpImage2
: vctpImage1
}
/> />
); );
})} })}
</SpottableComponent> </SpottableComponent>
<div className={classNames(css.dualBox, css.mr18)}> <div className={classNames(css.dualBox, css.mr18)}>
<div className={css.dualBox}> <div className={css.dualBox}>
{/* 배너2 */}
<SpottableComponent className={css.smallBox}> <SpottableComponent className={css.smallBox}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" && return item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
/* <Rolling <Rolling
bannerData={item} bannerData={item}
key={index} index={index}
imageType={true}
/> */
<CustomImage
key={index} key={index}
onClickBanner={onClickBanner} imageType={true}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/> />
) : item.banrLctnNo === "2" && ) : item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={true} /> <Random
bannerData={item}
index={index}
key={index}
imageType={true}
/>
) : ( ) : (
<CustomImage <CustomImage
key={index} key={index}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={ src={wdthImage1}
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/> />
); );
})} })}
</SpottableComponent> </SpottableComponent>
{/* 배너3 */}
<SpottableComponent className={css.smallBox}> <SpottableComponent className={css.smallBox}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" && return item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
<Rolling bannerData={item} key={index} imageType={true} /> <Rolling
bannerData={item}
index={index}
key={index}
imageType={true}
/>
) : item.banrLctnNo === "3" && ) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={true} /> <Random
bannerData={item}
index={index}
key={index}
imageType={true}
/>
) : ( ) : (
<CustomImage <CustomImage
key={index} key={index}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={ src={wdthImage2}
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/> />
); );
})} })}
</SpottableComponent> </SpottableComponent>
</div> </div>
</div> </div>
{/* 배너4 */}
<SpottableComponent className={css.longBanner}> <SpottableComponent className={css.longBanner}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "4" && return item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
<Rolling bannerData={item} key={index} imageType={false} /> <Rolling
bannerData={item}
index={index}
key={index}
imageType={true}
/>
) : item.banrLctnNo === "4" && ) : item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={false} /> <Random
bannerData={item}
index={index}
key={index}
imageType={true}
/>
) : ( ) : (
<CustomImage <CustomImage
key={index} key={index}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={ src={vctpImage2}
vctpImage1 === "" || vctpImage1 === null
? vctpImage2
: vctpImage1
}
/> />
); );
})} })}

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

@@ -66,7 +66,7 @@ export default function HomeBannerTemplate3() {
const banerInfo = homeMainContentsBannerInfos[0].bannerInfos; const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
setBannerInfos(banerInfo); setBannerInfos(banerInfo);
dispatch(getHomeMainContents); dispatch(getHomeMainContents);
console.log(homeMainContentsBannerInfos, "메인 컨텐츠"); console.log(homeMainContentsBannerInfos, "메인 컨텐츠 - 템플릿3");
console.log(homeTopDisplayInfos, "탑디스"); console.log(homeTopDisplayInfos, "탑디스");
} }
}, [homeMainContentsBannerInfos, dispatch]); }, [homeMainContentsBannerInfos, dispatch]);
@@ -153,8 +153,8 @@ export default function HomeBannerTemplate3() {
})} })}
</SpottableComponent> </SpottableComponent>
{/* 배너3 */}
<div className={css.dualBox}> <div className={css.dualBox}>
{/* 배너3 */}
<SpottableComponent <SpottableComponent
className={classNames(css.videoBox, css.topBox)} className={classNames(css.videoBox, css.topBox)}
spotlightId="banner03" spotlightId="banner03"