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

[홈패널] TBODY 적용

Browse Source
This commit is contained in:
sungmin.in
2024-02-11 16:13:14 +09:00
parent e398fa9a82
commit 92c4e0ea86
11 changed files with 818 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,9 +19,9 @@ import Spottable from '@enact/spotlight/Spottable';
import { getHomeMainContents } from '../../../actions/homeActions';
import CustomImage from '../../../components/CustomImage/CustomImage';
import css from './HomeBannerTemplate1.module.less';
import Random from './RandomUnit';
import Rolling from './RollingUnit';
import css from './Template.module.less';
const SpottableComponent = Spottable("div");
@@ -59,94 +59,121 @@ export default function HomeBannerTemplate1() {
setVctpImage2(vctpImage2);
setWdthImage1(wdthImage1);
setWdthImage2(wdthImage2);
dispatch(getHomeMainContents);
}
}, [homeTopDisplayInfos]);
}, [homeTopDisplayInfos, dispatch]);
useEffect(() => {
if (homeMainContentsBannerInfos) {
const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
setBannerInfos(banerInfo);
dispatch(getHomeMainContents);
}
}, [homeMainContentsBannerInfos]);
useEffect(() => {
// console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
// console.log(homeTopDisplayInfos, "탑디스");
dispatch(getHomeMainContents);
}, [dispatch]);
}, [homeMainContentsBannerInfos, dispatch]);
const onClickBanner = useCallback(() => {}, []);
return (
<Container className={(css.container, css.homeTemplateBox)}>
<SpottableComponent>
<div className={classNames(css.leftBannerBox, css.dualBox)}>
{/* 배너1 */}
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
className={css.topBox}
<Container className={css.container}>
<SpottableComponent className={css.homeTemplateBox}>
<div className={css.mainBox}>
<div className={classNames(css.dualBox, css.mr18)}>
{/* 배너1 */}
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
className={css.smallBox}
key={index}
imageType={true}
/>
) : item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Random" ? (
/* <Random
bannerData={item}
className={css.smallBox}
key={index}
imageType={true}
/>
) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
<Random
/> */
<CustomImage
key={index}
className={css.smallBox}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage2}
/>
) : (
<CustomImage
key={index}
className={css.smallBox}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/>
);
})}
{/* 배너2 */}
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Rolling" ? (
/* <Rolling
bannerData={item}
className={css.topBox}
className={css.smallBox}
key={index}
imageType={true}
/>
) : (
<CustomImage
key={index}
className={css.topBox}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/>
);
})}
{/* 배너2 */}
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
/> */
<CustomImage
key={index}
className={css.smallBox}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/>
) : item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Random" ? (
/* <Random
bannerData={item}
className={css.underBox}
className={css.smallBox}
key={index}
imageType={true}
/>
) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
className={css.underBox}
key={index}
imageType={true}
/>
) : (
<CustomImage
key={index}
className={""}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/>
);
})}
</div>
/> */
<CustomImage
key={index}
className={css.smallBox}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/>
) : (
<CustomImage
key={index}
className={css.smallBox}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/>
);
})}
</div>
<div className={css.bannerFlexRow}>
{/* 배너3 */}
{bannerInfos &&
bannerInfos.map((item, index) => {
@@ -154,28 +181,34 @@ export default function HomeBannerTemplate1() {
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
className={css.banner03}
className={classNames(css.longBanner, css.mr18)}
key={index}
imageType={false}
/>
) : item.banrLctnNo === "3" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
className={css.banner03}
className={classNames(css.longBanner, css.mr18)}
key={index}
imageType={false}
/>
) : (
<CustomImage
/* <CustomImage
key={index}
className={classNames(css.longBanner, css.mr18)}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/> */
<Random
bannerData={item}
key={index}
className={css.banner03}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
className={css.longBanner}
imageType={false}
/>
);
})}
@@ -188,27 +221,33 @@ export default function HomeBannerTemplate1() {
<Rolling
bannerData={item}
key={index}
className={""}
className={css.longBanner}
imageType={false}
/>
) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={""}
className={css.longBanner}
imageType={false}
/>
) : (
<CustomImage
/* <CustomImage
key={index}
className={css.longBanner}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/> */
<Random
bannerData={item}
key={index}
className={""}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
className={css.longBanner}
imageType={false}
/>
);
})}

143
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less Normal file
View File

@@ -0,0 +1,143 @@
@import "../../../style/CommonStyle.module.less";
.container {
background-color: #f8f8f8;
.homeTemplateBox {
margin: 24px 24px 0px;
.mainBox {
display: flex;
.longBanner {
width: 486px;
height: 858px;
border: 4px solid transparent;
box-sizing: border-box;
img,
video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
&:focus,
&:active,
&:hover,
&:focus-within {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
&.rollingBox {
position: relative;
.rightBtn {
position: absolute;
right: 18px;
top: 408px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus,
&:active,
&:hover,
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
}
}
.leftBtn {
position: absolute;
left: 18px;
top: 408px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus,
&:active,
&:hover,
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
}
}
}
}
.dualBox {
.smallBox {
width: 744px;
height: 420px;
border: 4px solid transparent;
border-radius: 12px;
img,
video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
&:focus,
&:active,
&:hover,
&:focus-within {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
&:nth-child(1) {
margin-bottom: 18px;
}
&.rollingBox {
position: relative;
.rightBtn {
position: absolute;
right: 18px;
top: 190px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
}
}
.leftBtn {
position: absolute;
left: 18px;
top: 190px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
}
}
}
}
}
}
}
/* margin전용 */
.mt18 {
margin-top: 18px;
}
.ml18 {
margin-left: 18px;
}
.mr18 {
margin-right: 18px;
}
.mb18 {
margin-bottom: 18px;
}
}

247
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.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,
@@ -19,9 +18,9 @@ import Spottable from '@enact/spotlight/Spottable';
import { getHomeMainContents } from '../../../actions/homeActions';
import CustomImage from '../../../components/CustomImage/CustomImage';
import css from './HomeBannerTemplate2.module.less';
import Random from './RandomUnit';
import Rolling from './RollingUnit';
import css from './Template.module.less';
const SpottableComponent = Spottable("div");
@@ -59,82 +58,155 @@ export default function HomeBannerTemplate2() {
setVctpImage2(vctpImage2);
setWdthImage1(wdthImage1);
setWdthImage2(wdthImage2);
dispatch(getHomeMainContents);
}
}, [homeTopDisplayInfos]);
}, [homeTopDisplayInfos, dispatch]);
useEffect(() => {
if (homeMainContentsBannerInfos) {
const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
setBannerInfos(banerInfo);
dispatch(getHomeMainContents);
}
}, [homeMainContentsBannerInfos]);
useEffect(() => {
console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
console.log(homeTopDisplayInfos, "탑디스");
dispatch(getHomeMainContents);
}, [dispatch]);
}, [homeMainContentsBannerInfos, dispatch]);
const onClickBanner = useCallback(() => {}, []);
return (
<Container className={css.homeTemplateBox}>
<SpottableComponent className={css.banner03}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
key={index}
className={""}
imageType={false}
/>
) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={""}
imageType={false}
/>
) : (
<CustomImage
key={index}
className={""}
onClickBanner={onClickBanner}
delay={0}
src={
vctpImage1 === "" || vctpImage1 === null
? vctpImage2
: vctpImage1
}
/>
);
})}
</SpottableComponent>
<SpottableComponent className={classNames(css.leftBox, css.dualBox)}>
<div className={classNames(css.topBox, css.videoBox)}>
<Container className={css.container}>
<SpottableComponent className={css.homeTemplateBox}>
<div className={css.mainBox}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" &&
return item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
key={index}
className={""}
imageType={true}
className={classNames(css.longBanner, css.mr18)}
imageType={false}
/>
) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={""}
imageType={true}
className={classNames(css.longBanner, css.mr18)}
imageType={false}
/>
) : (
<CustomImage
key={index}
className={""}
className={classNames(css.longBanner, css.mr18)}
onClickBanner={onClickBanner}
delay={0}
src={
vctpImage1 === "" || vctpImage1 === null
? vctpImage2
: vctpImage1
}
/>
);
})}
<div className={css.dualBox}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Rolling" ? (
/* <Rolling
bannerData={item}
key={index}
className={css.smallBox}
imageType={true}
/> */
<CustomImage
key={index}
className={css.smallBox}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/>
) : item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={css.smallBox}
imageType={true}
/>
) : (
<CustomImage
key={index}
className={css.smallBox}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/>
);
})}
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
key={index}
className={css.smallBox}
imageType={true}
/>
) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={css.smallBox}
imageType={true}
/>
) : (
<CustomImage
key={index}
className={css.smallBox}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/>
);
})}
</div>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
key={index}
className={classNames(css.longBanner, css.ml18)}
imageType={false}
/>
) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={classNames(css.longBanner, css.ml18)}
imageType={false}
/>
) : (
<CustomImage
key={index}
className={classNames(css.longBanner, css.ml18)}
onClickBanner={onClickBanner}
delay={0}
src={
@@ -146,73 +218,6 @@ export default function HomeBannerTemplate2() {
);
})}
</div>
<div className={classNames(css.underBox, css.videoBox)}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
key={index}
className={""}
imageType={true}
/>
) : item.banrLctnNo === "3" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={""}
imageType={true}
/>
) : (
<CustomImage
key={index}
className={""}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/>
);
})}
</div>
</SpottableComponent>
<SpottableComponent className={css.banner03}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
key={index}
className={""}
imageType={false}
/>
) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={""}
imageType={false}
/>
) : (
<CustomImage
key={index}
className={""}
onClickBanner={onClickBanner}
delay={0}
src={
vctpImage1 === "" || vctpImage1 === null
? vctpImage2
: vctpImage1
}
/>
);
})}
</SpottableComponent>
</Container>
);

136
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less Normal file
View File

@@ -0,0 +1,136 @@
@import "../../../style/CommonStyle.module.less";
.container {
background-color: #f8f8f8;
.homeTemplateBox {
margin: 24px 24px 0px;
.mainBox {
display: flex;
img,
video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.longBanner {
width: 486px;
height: 858px;
border: 4px solid transparent;
box-sizing: border-box;
&:focus,
&:active,
&:hover,
&:focus-within {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
&.rollingBox {
position: relative;
.rightBtn {
position: absolute;
right: 18px;
top: 408px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus,
&:active,
&:hover,
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
}
}
.leftBtn {
position: absolute;
left: 18px;
top: 408px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus,
&:active,
&:hover,
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
}
}
}
}
.dualBox {
.smallBox {
width: 744px;
height: 420px;
border: 4px solid transparent;
border-radius: 12px;
&:focus,
&:active,
&:hover,
&:focus-within {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
&:nth-child(1) {
margin-bottom: 18px;
}
&.rollingBox {
position: relative;
.rightBtn {
position: absolute;
right: 18px;
top: 190px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
}
}
.leftBtn {
position: absolute;
left: 18px;
top: 190px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
}
}
}
}
}
}
}
/* margin전용 */
.mt18 {
margin-top: 18px;
}
.ml18 {
margin-left: 18px;
}
.mr18 {
margin-right: 18px;
}
.mb18 {
margin-bottom: 18px;
}
}

102
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.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,
@@ -19,27 +18,22 @@ import Spottable from '@enact/spotlight/Spottable';
import { getHomeMainContents } from '../../../actions/homeActions';
import CustomImage from '../../../components/CustomImage/CustomImage';
import css from './HomeBannerTemplate3.module.less';
import Random from './RandomUnit';
import Rolling from './RollingUnit';
import css from './Template.module.less';
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{
enterTo: "default-element",
},
{ leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
"div"
);
export default function HomeBannerTemplate3() {
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 [vctpImage, setVctpImage] = useState(null);
const [wdthImage, setWdthImage] = useState(null);
const homeMainContentsBannerInfos = useSelector(
(state) => state.home.mainContentsData.homeMainContentsBannerInfos
@@ -55,25 +49,32 @@ export default function HomeBannerTemplate3() {
const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2;
const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1;
const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2;
setVctpImage1(vctpImage1);
setVctpImage2(vctpImage2);
setWdthImage1(wdthImage1);
setWdthImage2(wdthImage2);
if (vctpImage1 === "" || vctpImage1 == null) {
setVctpImage(vctpImage2);
} else {
setVctpImage(vctpImage1);
}
if (wdthImage1 === "" || wdthImage1 === null) {
setWdthImage(wdthImage2);
} else {
setWdthImage(wdthImage1);
}
dispatch(getHomeMainContents);
}
}, [homeTopDisplayInfos]);
}, [homeTopDisplayInfos, dispatch]);
useEffect(() => {
if (homeMainContentsBannerInfos) {
const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
setBannerInfos(banerInfo);
dispatch(getHomeMainContents);
console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
console.log(homeTopDisplayInfos, "탑디스");
}
}, [homeMainContentsBannerInfos]);
useEffect(() => {
console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
console.log(homeTopDisplayInfos, "탑디스");
dispatch(getHomeMainContents);
}, [dispatch]);
}, [homeMainContentsBannerInfos, dispatch]);
const onClickBanner = useCallback(() => {}, []);
@@ -86,48 +87,50 @@ export default function HomeBannerTemplate3() {
bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling bannerData={item} key={index} />
<Rolling bannerData={item} key={index} imageType={false} />
) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} />
<Random bannerData={item} key={index} imageType={false} />
) : (
<CustomImage
key={index}
className={""}
onClickBanner={onClickBanner}
src={
vctpImage1 === "" || vctpImage1 === null
? vctpImage2
: vctpImage1
}
delay={0}
src={vctpImage}
/>
);
})}
</SpottableComponent>
{/* 배너2 */}
<SpottableComponent className={css.imgBox}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling bannerData={item} key={index} />
<Rolling
bannerData={item}
index={index}
key={index}
imageType={false}
/>
) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} />
<Random
bannerData={item}
index={index}
key={index}
imageType={false}
/>
) : (
<CustomImage
key={index}
className={""}
onClickBanner={onClickBanner}
src={
vctpImage1 === "" || vctpImage1 === null
? vctpImage2
: vctpImage1
}
delay={0}
src={vctpImage}
/>
);
})}
</SpottableComponent>
{/* 배너3 */}
<div className={css.dualBox}>
<SpottableComponent className={classNames(css.videoBox, css.topBox)}>
@@ -135,25 +138,21 @@ export default function HomeBannerTemplate3() {
bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling bannerData={item} key={index} />
<Rolling bannerData={item} key={index} imageType={true} />
) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} />
<Random bannerData={item} key={index} imageType={true} />
) : (
<CustomImage
key={index}
className={""}
onClickBanner={onClickBanner}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
delay={0}
src={wdthImage}
/>
);
})}
</SpottableComponent>
{/* 배너4 */}
<SpottableComponent
className={classNames(css.videoBox, css.underBox)}
@@ -162,21 +161,16 @@ export default function HomeBannerTemplate3() {
bannerInfos.map((item, index) => {
return item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling bannerData={item} key={index} />
<Rolling bannerData={item} key={index} imageType={true} />
) : item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} />
<Random bannerData={item} key={index} imageType={true} />
) : (
<CustomImage
key={index}
className={""}
onClickBanner={onClickBanner}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
delay={0}
src={wdthImage}
/>
);
})}

191
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less Normal file
View File

@@ -0,0 +1,191 @@
@import "../../../style/CommonStyle.module.less";
.container {
background-color: #f8f8f8;
display: flex;
}
.homeTemplateBox {
margin: 24px 24px 50px;
display: flex;
img,
video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
}
.leftBannerBox {
width: 744px;
height: 858px;
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 {
width: 744px;
height: 420px;
margin: 0 18px 18px 0;
border: 4px solid transparent;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
.videoPlayer {
width: 744px;
height: 420px;
outline: "teal dashed 1px";
transform: "scale(1)";
border-radius: 12px;
}
}
.banner02 {
width: 744px;
height: 420px;
border-radius: 12px;
border: 4px solid transparent;
box-sizing: border-box;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
}
.banner03 {
width: 486px;
height: 858px;
border: 4px solid transparent;
border-radius: 12px;
box-sizing: border-box;
margin-right: 18px;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
}
}
.banner04 {
width: 486px;
height: 858px;
border: 4px solid transparent;
box-sizing: border-box;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 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 {
width: 486px;
height: 858px;
background: beige;
margin-right: 18px;
border: 4px solid transparent;
border-radius: 12px;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
}
img {
width: 100%;
object-fit: contain;
}
}
}

2
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
View File

@@ -11,7 +11,7 @@ export default function RandomUnit({ bannerData, imageType }) {
useEffect(() => {
if (bannerData) {
const leng = bannerData.bannerDetailInfos.length;
const leng = bannerDetailInfos.length;
const num = Math.floor(Math.random() * leng);
setRandomData(bannerDetailInfos[num]);
}

83
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
View File

@@ -1,74 +1,45 @@
import React, {
useCallback,
useEffect,
useState,
} from 'react';
import VideoPlay from '@enact/sandstone/VideoPlayer';
import { VirtualGridList } from '@enact/sandstone/VirtualList';
import ri from '@enact/ui/resolution';
import CustomImage from '../../../components/CustomImage/CustomImage';
import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
import css from './Template.module.less';
const LIST_ITEM_CONF = {
ITEM_WIDTH: 561 * 2,
ITEM_HEIGHT: 150 * 2,
SPACING: 30 * 2,
};
export default function RollingUnit({ bannerData, index, imageType }) {
const bannerDetailInfos = bannerData.bannerDetailInfos[index];
const [rollingData, setRollingData] = useState();
const [shptmBanrTpNm, setShptmBanrTpNm] = useState();
export default function RollingUnit({ bannerData, imageType }) {
useEffect(() => {
console.log("롤링");
}, []);
const renderItem = useCallback(
({ index, ...rest }) => {
// const itemData = itemDatas[index];
const shptmBanrTpNm = bannerData.bannerDetailInfos[index].shptmBanrTpNm;
if (shptmBanrTpNm === "Image Banner") {
return <CustomImage></CustomImage>;
}
if (shptmBanrTpNm === "LIVE" || shptmBanrTpNm === "VOD") {
return <VideoPlay></VideoPlay>;
}
if (shptmBanrTpNm === "Today's Deals") {
return (
<HomeTodayDeal
imgAlt={bannerData.bannerDetailInfos[index].imgAlt}
imageName={bannerData.bannerDetailInfos[index].tmnlImgNm}
imgPath={bannerData.bannerDetailInfos[index].tmnlImgPath}
priceInfo={bannerData.bannerDetailInfos[index].priceInfo}
productId={bannerData.bannerDetailInfos[index].prdtId}
productName={bannerData.bannerDetailInfos[index].prdtNm}
soldoutFlag={bannerData.bannerDetailInfos[index].soldoutFlag}
isHorizontal={imageType} // TRUE, FALSE
/>
);
}
},
[bannerData]
);
if (bannerData) {
setRollingData(bannerDetailInfos);
setShptmBanrTpNm(bannerDetailInfos.shptmBanrTpNm);
}
}, [bannerData, index]);
return (
<>
{bannerData && (
<VirtualGridList
className={""}
dataSize={bannerData.bannerDetailInfos.length}
direction="horizontal"
itemRenderer={renderItem}
itemSize={{
minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
}}
spacing={ri.scale(LIST_ITEM_CONF.SPACING)}
scrollMode="translate"
horizontalScrollbar="hidden"
noScrollByWheel
/>
)}
{shptmBanrTpNm &&
(shptmBanrTpNm === "Image Banner" ? (
<CustomImage></CustomImage>
) : shptmBanrTpNm === "LIVE" || shptmBanrTpNm === "VOD" ? (
<VideoPlay></VideoPlay>
) : shptmBanrTpNm === "Today's Deals" ? (
<HomeTodayDeal
imgAlt={rollingData.imgAlt}
imageName={rollingData.tmnlImgNm}
imgPath={rollingData.tmnlImgPath}
priceInfo={rollingData.priceInfo}
productId={rollingData.prdtId}
productName={rollingData.prdtNm}
soldoutFlag={rollingData.soldoutFlag}
isHorizontal={imageType} // TRUE, FALSE
/>
) : null)}
</>
);
}

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

@@ -8,10 +8,7 @@ import {
useSelector,
} from 'react-redux';
import {
SpotlightContainerDecorator,
} from '@enact/spotlight/SpotlightContainerDecorator';
import TBody from '../../components/TBody/TBody';
import TPanel from '../../components/TPanel/TPanel';
import BestSeller from '../HomePanel/BestSeller/BestSeller';
import HomeBannerTemplate1 from '../HomePanel/HomeBanner/HomeBannerTemplate1';
@@ -22,15 +19,6 @@ import css from '../HomePanel/HomePanel.module.less';
import PopularShow from '../HomePanel/PopularShow/PopularShow';
import SubCategory from '../HomePanel/SubCategory/SubCategory';
// const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{
enterTo: "default-element",
},
"div"
);
export default function HomePanel() {
const dispatch = useDispatch();
const homeLayoutInfo = useSelector((state) => state.home.layoutData);
@@ -39,6 +27,7 @@ export default function HomePanel() {
);
const [select, setSelect] = useState(null);
const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
// 추후 변경
const selectSwitch = (index) => {
switch ("DSP00203") {
@@ -64,8 +53,8 @@ export default function HomePanel() {
}, [homeTopDisplayInfos, homeLayoutInfo]);
return (
<TPanel className={css.panelDesign}>
<Container>
<TPanel className={css.panel}>
<TBody className={css.tBody}>
{homeLayoutInfoDetail &&
homeLayoutInfoDetail.map((item, index) => {
return item.shptmApphmDspyOptCd == "DSP00101" ? (
@@ -80,7 +69,7 @@ export default function HomePanel() {
<PopularShow key={index} />
) : null;
})}
</Container>
</TBody>
</TPanel>
);
}

9
com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less
View File

@@ -1,4 +1,11 @@
.panelDesign {
@import "../../style/CommonStyle.module.less";
@import "../../style/utils.module.less";
.panel {
overflow-y: auto;
background-color: #f8f8f8;
}
.tBody {
height: 100%;
}

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

@@ -55,7 +55,7 @@ export default function HomeTodayDeal({
parsePriceInfo(priceInfo);
return (
<SpottableComponent
<div
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
onClick={() => handleClick(productId)}
>
@@ -82,6 +82,6 @@ export default function HomeTodayDeal({
) : (
<></>
)} */}
</SpottableComponent>
</div>
);
}