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() {
const dispatch = useDispatch();
const [bannerInfos, setBannerInfos] = useState([]);
const [vctpImage, setVctpImage] = useState(null);
const [wdthImage, setWdthImage] = 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
@@ -44,24 +46,16 @@ export default function HomeBannerTemplate3() {
(state) => state.home.mainContentsData.homeTopDisplayInfos
);
useEffect(() => {
Spotlight.focus("banner01");
}, []);
useEffect(() => {
if (homeTopDisplayInfos) {
const vctpImage1 = homeTopDisplayInfos[0].vtctpImgPath1;
const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2;
const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1;
const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2;
if (vctpImage1 === "" || vctpImage1 == null) {
setVctpImage(vctpImage2);
} else {
setVctpImage(vctpImage1);
}
if (wdthImage1 === "" || wdthImage1 === null) {
setWdthImage(wdthImage2);
} else {
setWdthImage(wdthImage1);
}
setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1);
setVctpImage2(homeTopDisplayInfos[0].vtctpImgPath2);
setwdthImage1(homeTopDisplayInfos[0].wdthtpImgPath1);
setwdthImage2(homeTopDisplayInfos[0].wdthtpImgPath2);
dispatch(getHomeMainContents);
}
@@ -77,7 +71,9 @@ export default function HomeBannerTemplate3() {
}
}, [homeMainContentsBannerInfos, dispatch]);
const onClickBanner = useCallback(() => {}, []);
const onClickBanner = useCallback(() => {
console.log("클릭");
}, []);
// 포커스가 들어오면 롤링 중지
const _onFocus = useCallback(() => {
@@ -92,7 +88,7 @@ export default function HomeBannerTemplate3() {
<Container className={css.homeTemplateBox}>
<div className={css.mainBox}>
{/* 배너1 */}
<SpottableComponent className={css.imgBox}>
<SpottableComponent className={css.imgBox} spotlightId="banner01">
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" &&
@@ -113,9 +109,9 @@ export default function HomeBannerTemplate3() {
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
onClick={onClickBanner}
delay={0}
src={vctpImage}
src={vctpImage1}
/>
);
})}
@@ -124,6 +120,7 @@ export default function HomeBannerTemplate3() {
{/* 배너2 */}
<SpottableComponent
className={css.imgBox}
spotlightId="banner02"
onFocus={_onFocus}
onBlur={_onBlur}
>
@@ -150,7 +147,7 @@ export default function HomeBannerTemplate3() {
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage}
src={vctpImage2}
/>
);
})}
@@ -158,7 +155,10 @@ export default function HomeBannerTemplate3() {
{/* 배너3 */}
<div className={css.dualBox}>
<SpottableComponent className={classNames(css.videoBox, css.topBox)}>
<SpottableComponent
className={classNames(css.videoBox, css.topBox)}
spotlightId="banner03"
>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" &&
@@ -182,7 +182,7 @@ export default function HomeBannerTemplate3() {
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage}
src={wdthImage1}
/>
);
})}
@@ -191,6 +191,7 @@ export default function HomeBannerTemplate3() {
{/* 배너4 */}
<SpottableComponent
className={classNames(css.videoBox, css.underBox)}
spotlightId="banner04"
>
{bannerInfos &&
bannerInfos.map((item, index) => {
@@ -215,7 +216,7 @@ export default function HomeBannerTemplate3() {
key={index}
onClickBanner={onClickBanner}
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(
(state) => state.home.mainContentsData.homeTopDisplayInfos
);
const [select, setSelect] = useState(null);
const [selectTemplate, setSelectTemplate] = useState(null);
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(() => {
if (homeTopDisplayInfos) {
setSelect(homeTopDisplayInfos[0].shptmTmplCd);
setSelectTemplate(homeTopDisplayInfos[0].shptmTmplCd);
}
if (homeLayoutInfo) {
setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo);
}
selectSwitch();
}, [homeTopDisplayInfos, homeLayoutInfo]);
return (
<TPanel className={css.panel}>
<TBody className={css.tBody}>
{homeLayoutInfoDetail &&
homeLayoutInfoDetail.map((item, index) => {
return item.shptmApphmDspyOptCd == "DSP00101" ? (
selectSwitch(index)
) : item.shptmApphmDspyOptCd == "DSP00102" ? (
<SubCategory key={index} />
) : item.shptmApphmDspyOptCd == "DSP00105" ? (
<BestSeller key={index} />
) : item.shptmApphmDspyOptCd == "DSP00103" ? (
<HomeOnSale key={index} />
) : item.shptmApphmDspyOptCd == "DSP00104" ? (
<PopularShow key={index} />
) : null;
})}
{selectTemplate &&
(selectTemplate === "DSP00201" ? (
<HomeBannerTemplate3 />
) : selectTemplate === "DSP00202" ? (
<HomeBannerTemplate2 />
) : selectTemplate === "DSP00203" ? (
<HomeBannerTemplate3 />
) : null)}
<SubCategory />
<HomeOnSale />
<BestSeller />
<PopularShow />
</TBody>
</TPanel>
);

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

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