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

[홈패널] 홈패널 로직변경/TBODY Height 변경

Browse Source
This commit is contained in:
sungmin.in
2024-02-13 16:35:03 +09:00
parent 85f6ccff0b
commit e79c95f59e
3 changed files with 42 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,9 +32,11 @@ const Container = SpotlightContainerDecorator(
export default function HomeBannerTemplate3() { export default function HomeBannerTemplate3() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [bannerInfos, setBannerInfos] = useState([]); const [bannerInfos, setBannerInfos] = useState([]);
const [vctpImage, setVctpImage] = useState(null);
const [wdthImage, setWdthImage] = useState(null);
const [onFocus, setOnFocus] = useState(true); const [onFocus, setOnFocus] = useState(true);
const [vctpImage1, setVctpImage1] = useState();
const [vctpImage2, setVctpImage2] = useState();
const [wdthImage1, setwdthImage1] = useState();
const [wdthImage2, setwdthImage2] = useState();
const homeMainContentsBannerInfos = useSelector( const homeMainContentsBannerInfos = useSelector(
(state) => state.home.mainContentsData.homeMainContentsBannerInfos (state) => state.home.mainContentsData.homeMainContentsBannerInfos
@@ -44,24 +46,16 @@ export default function HomeBannerTemplate3() {
(state) => state.home.mainContentsData.homeTopDisplayInfos (state) => state.home.mainContentsData.homeTopDisplayInfos
); );
useEffect(() => {
Spotlight.focus("banner01");
}, []);
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);
if (vctpImage1 === "" || vctpImage1 == null) {
setVctpImage(vctpImage2);
} else {
setVctpImage(vctpImage1);
}
if (wdthImage1 === "" || wdthImage1 === null) {
setWdthImage(wdthImage2);
} else {
setWdthImage(wdthImage1);
}
dispatch(getHomeMainContents); dispatch(getHomeMainContents);
} }
@@ -77,7 +71,9 @@ export default function HomeBannerTemplate3() {
} }
}, [homeMainContentsBannerInfos, dispatch]); }, [homeMainContentsBannerInfos, dispatch]);
const onClickBanner = useCallback(() => {}, []); const onClickBanner = useCallback(() => {
console.log("클릭");
}, []);
// 포커스가 들어오면 롤링 중지 // 포커스가 들어오면 롤링 중지
const _onFocus = useCallback(() => { const _onFocus = useCallback(() => {
@@ -92,7 +88,7 @@ export default function HomeBannerTemplate3() {
<Container className={css.homeTemplateBox}> <Container className={css.homeTemplateBox}>
<div className={css.mainBox}> <div className={css.mainBox}>
{/* 배너1 */} {/* 배너1 */}
<SpottableComponent className={css.imgBox}> <SpottableComponent className={css.imgBox} spotlightId="banner01">
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" && return item.banrLctnNo === "1" &&
@@ -113,9 +109,9 @@ export default function HomeBannerTemplate3() {
) : ( ) : (
<CustomImage <CustomImage
key={index} key={index}
onClickBanner={onClickBanner} onClick={onClickBanner}
delay={0} delay={0}
src={vctpImage} src={vctpImage1}
/> />
); );
})} })}
@@ -124,6 +120,7 @@ export default function HomeBannerTemplate3() {
{/* 배너2 */} {/* 배너2 */}
<SpottableComponent <SpottableComponent
className={css.imgBox} className={css.imgBox}
spotlightId="banner02"
onFocus={_onFocus} onFocus={_onFocus}
onBlur={_onBlur} onBlur={_onBlur}
> >
@@ -150,7 +147,7 @@ export default function HomeBannerTemplate3() {
key={index} key={index}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={vctpImage} src={vctpImage2}
/> />
); );
})} })}
@@ -158,7 +155,10 @@ export default function HomeBannerTemplate3() {
{/* 배너3 */} {/* 배너3 */}
<div className={css.dualBox}> <div className={css.dualBox}>
<SpottableComponent className={classNames(css.videoBox, css.topBox)}> <SpottableComponent
className={classNames(css.videoBox, css.topBox)}
spotlightId="banner03"
>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" && return item.banrLctnNo === "3" &&
@@ -182,7 +182,7 @@ export default function HomeBannerTemplate3() {
key={index} key={index}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={wdthImage} src={wdthImage1}
/> />
); );
})} })}
@@ -191,6 +191,7 @@ export default function HomeBannerTemplate3() {
{/* 배너4 */} {/* 배너4 */}
<SpottableComponent <SpottableComponent
className={classNames(css.videoBox, css.underBox)} className={classNames(css.videoBox, css.underBox)}
spotlightId="banner04"
> >
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
@@ -215,7 +216,7 @@ export default function HomeBannerTemplate3() {
key={index} key={index}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={wdthImage} src={wdthImage2}
/> />
); );
})} })}

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

@@ -25,50 +25,33 @@ export default function HomePanel() {
const homeTopDisplayInfos = useSelector( const homeTopDisplayInfos = useSelector(
(state) => state.home.mainContentsData.homeTopDisplayInfos (state) => state.home.mainContentsData.homeTopDisplayInfos
); );
const [select, setSelect] = useState(null); const [selectTemplate, setSelectTemplate] = useState(null);
const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]); const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
// 추후 변경
const selectSwitch = (index) => {
switch ("DSP00203") {
case "DSP00201":
return <HomeBannerTemplate1 key={index} />;
case "DSP00202":
return <HomeBannerTemplate2 key={index} />;
case "DSP00203":
return <HomeBannerTemplate3 key={index} />;
default:
return null;
}
};
useEffect(() => { useEffect(() => {
if (homeTopDisplayInfos) { if (homeTopDisplayInfos) {
setSelect(homeTopDisplayInfos[0].shptmTmplCd); setSelectTemplate(homeTopDisplayInfos[0].shptmTmplCd);
} }
if (homeLayoutInfo) { if (homeLayoutInfo) {
setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo); setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo);
} }
selectSwitch();
}, [homeTopDisplayInfos, homeLayoutInfo]); }, [homeTopDisplayInfos, homeLayoutInfo]);
return ( return (
<TPanel className={css.panel}> <TPanel className={css.panel}>
<TBody className={css.tBody}> <TBody className={css.tBody}>
{homeLayoutInfoDetail && {selectTemplate &&
homeLayoutInfoDetail.map((item, index) => { (selectTemplate === "DSP00201" ? (
return item.shptmApphmDspyOptCd == "DSP00101" ? ( <HomeBannerTemplate3 />
selectSwitch(index) ) : selectTemplate === "DSP00202" ? (
) : item.shptmApphmDspyOptCd == "DSP00102" ? ( <HomeBannerTemplate2 />
<SubCategory key={index} /> ) : selectTemplate === "DSP00203" ? (
) : item.shptmApphmDspyOptCd == "DSP00105" ? ( <HomeBannerTemplate3 />
<BestSeller key={index} /> ) : null)}
) : item.shptmApphmDspyOptCd == "DSP00103" ? ( <SubCategory />
<HomeOnSale key={index} /> <HomeOnSale />
) : item.shptmApphmDspyOptCd == "DSP00104" ? ( <BestSeller />
<PopularShow key={index} /> <PopularShow />
) : null;
})}
</TBody> </TBody>
</TPanel> </TPanel>
); );

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

@@ -7,5 +7,5 @@
} }
.tBody { .tBody {
height: 1080px; height: calc(100% - 15px);
} }