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

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