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

[홈패널] 롤링 포커스 인 /아웃 설정

Browse Source
This commit is contained in:
sungmin.in
2024-02-18 15:32:34 +09:00
parent c172cd0590
commit be1120c5b6
5 changed files with 49 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,7 +33,6 @@ const Container = SpotlightContainerDecorator(
export default function HomeBannerTemplate1() { export default function HomeBannerTemplate1() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [bannerInfos, setBannerInfos] = useState([]); const [bannerInfos, setBannerInfos] = useState([]);
const [onFocus, setOnFocus] = useState(true);
const [vctpImage1, setVctpImage1] = useState(); const [vctpImage1, setVctpImage1] = useState();
const [vctpImage2, setVctpImage2] = useState(); const [vctpImage2, setVctpImage2] = useState();
const [wdthImage1, setwdthImage1] = useState(); const [wdthImage1, setwdthImage1] = useState();
@@ -68,10 +67,6 @@ export default function HomeBannerTemplate1() {
} }
}, [homeMainContentsBannerInfos, dispatch]); }, [homeMainContentsBannerInfos, dispatch]);
const keyDown = useCallback(() => {}, []);
const onClickBanner = useCallback(() => {}, []);
return ( return (
<Container className={css.container} spotlightId={"top"}> <Container className={css.container} spotlightId={"top"}>
<div className={css.homeTemplateBox}> <div className={css.homeTemplateBox}>
@@ -99,12 +94,7 @@ export default function HomeBannerTemplate1() {
/> />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={wdthImage1} />
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage1}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}
@@ -127,12 +117,7 @@ export default function HomeBannerTemplate1() {
<Random bannerData={item} key={index} imageType={true} /> <Random bannerData={item} key={index} imageType={true} />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={wdthImage2} />
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage2}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}
@@ -149,7 +134,7 @@ export default function HomeBannerTemplate1() {
bannerData={item} bannerData={item}
index={index} index={index}
key={index} key={index}
imageType={true} imageType={false}
/> />
) : item.banrLctnNo === "3" && ) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
@@ -157,16 +142,11 @@ export default function HomeBannerTemplate1() {
bannerData={item} bannerData={item}
index={index} index={index}
key={index} key={index}
imageType={true} imageType={false}
/> />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={vctpImage1} />
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage1}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}
@@ -182,7 +162,7 @@ export default function HomeBannerTemplate1() {
bannerData={item} bannerData={item}
index={index} index={index}
key={index} key={index}
imageType={true} imageType={false}
/> />
) : item.banrLctnNo === "4" && ) : item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
@@ -190,16 +170,11 @@ export default function HomeBannerTemplate1() {
bannerData={item} bannerData={item}
index={index} index={index}
key={index} key={index}
imageType={true} imageType={false}
/> />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={vctpImage2} />
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage2}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}

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

@@ -33,7 +33,6 @@ const Container = SpotlightContainerDecorator(
export default function HomeBannerTemplate2() { export default function HomeBannerTemplate2() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [bannerInfos, setBannerInfos] = useState([]); const [bannerInfos, setBannerInfos] = useState([]);
const [onFocus, setOnFocus] = useState(true);
const [vctpImage1, setVctpImage1] = useState(); const [vctpImage1, setVctpImage1] = useState();
const [vctpImage2, setVctpImage2] = useState(); const [vctpImage2, setVctpImage2] = useState();
const [wdthImage1, setwdthImage1] = useState(); const [wdthImage1, setwdthImage1] = useState();
@@ -68,7 +67,6 @@ export default function HomeBannerTemplate2() {
} }
}, [homeMainContentsBannerInfos, dispatch]); }, [homeMainContentsBannerInfos, dispatch]);
const onClickBanner = useCallback(() => {}, []);
return ( return (
<Container className={css.container} spotlightId="top"> <Container className={css.container} spotlightId="top">
<div className={css.homeTemplateBox}> <div className={css.homeTemplateBox}>
@@ -95,12 +93,7 @@ export default function HomeBannerTemplate2() {
/> />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={vctpImage1} />
key={index}
onClick={""}
delay={0}
src={vctpImage1}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}
@@ -129,12 +122,7 @@ export default function HomeBannerTemplate2() {
/> />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={wdthImage1} />
key={index}
onClickBanner={""}
delay={0}
src={wdthImage1}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}
@@ -162,12 +150,7 @@ export default function HomeBannerTemplate2() {
/> />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={wdthImage2} />
key={index}
onClickBanner={""}
delay={0}
src={wdthImage2}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}
@@ -196,12 +179,7 @@ export default function HomeBannerTemplate2() {
/> />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={vctpImage2} />
key={index}
onClickBanner={""}
delay={0}
src={vctpImage2}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}

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

@@ -33,7 +33,6 @@ 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 [onFocus, setOnFocus] = useState(false);
const [vctpImage1, setVctpImage1] = useState(); const [vctpImage1, setVctpImage1] = useState();
const [vctpImage2, setVctpImage2] = useState(); const [vctpImage2, setVctpImage2] = useState();
const [wdthImage1, setwdthImage1] = useState(); const [wdthImage1, setwdthImage1] = useState();
@@ -47,10 +46,6 @@ export default function HomeBannerTemplate3() {
(state) => state.home.mainContentsData.homeTopDisplayInfos (state) => state.home.mainContentsData.homeTopDisplayInfos
); );
useEffect(() => {
Spotlight.focus("banner01");
}, []);
useEffect(() => { useEffect(() => {
if (homeTopDisplayInfos) { if (homeTopDisplayInfos) {
setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1); setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1);
@@ -72,19 +67,6 @@ export default function HomeBannerTemplate3() {
} }
}, [homeMainContentsBannerInfos, dispatch]); }, [homeMainContentsBannerInfos, dispatch]);
const onClickBanner = useCallback(() => {
console.log("클릭");
}, []);
// 포커스가 들어오면 롤링 중지
const _onFocus = useCallback(() => {
setOnFocus(true);
}, [onFocus]);
const _onBlur = useCallback(() => {
setOnFocus(false);
}, [onFocus]);
return ( return (
<Container className={css.homeTemplateBox} spotlightId="top"> <Container className={css.homeTemplateBox} spotlightId="top">
<div className={css.mainBox}> <div className={css.mainBox}>
@@ -109,24 +91,14 @@ export default function HomeBannerTemplate3() {
/> />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={vctpImage1} />
key={index}
onClick={onClickBanner}
delay={0}
src={vctpImage1}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}
</div> </div>
{/* 배너2 */} {/* 배너2 */}
<div <div className={css.imgBox}>
className={css.imgBox}
spotlightId="banner02"
onFocus={_onFocus}
onBlur={_onBlur}
>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" && return item.banrLctnNo === "2" &&
@@ -136,7 +108,6 @@ export default function HomeBannerTemplate3() {
index={index} index={index}
key={index} key={index}
imageType={false} imageType={false}
onFocus={onFocus}
/> />
) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? ( ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
<Random <Random
@@ -147,12 +118,7 @@ export default function HomeBannerTemplate3() {
/> />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={vctpImage2} />
key={index}
onClickBanner={onClickBanner}
delay={0}
src={vctpImage2}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}
@@ -181,12 +147,7 @@ export default function HomeBannerTemplate3() {
/> />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={wdthImage1} />
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage1}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}
@@ -214,12 +175,7 @@ export default function HomeBannerTemplate3() {
/> />
) : ( ) : (
<SpottableComponent> <SpottableComponent>
<CustomImage <CustomImage key={index} delay={0} src={wdthImage2} />
key={index}
onClickBanner={onClickBanner}
delay={0}
src={wdthImage2}
/>
</SpottableComponent> </SpottableComponent>
); );
})} })}

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

@@ -9,50 +9,54 @@ import VideoPlay from '@enact/sandstone/VideoPlayer';
import CustomImage from '../../../components/CustomImage/CustomImage'; import CustomImage from '../../../components/CustomImage/CustomImage';
import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal'; import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
export default function RollingUnit({ bannerData, index, imageType, onFocus }) { export default function RollingUnit({ bannerData, imageType }) {
const bannerDetailInfos = bannerData.bannerDetailInfos; const bannerDetailInfos = bannerData.bannerDetailInfos;
const bannerDetailInfosLength = bannerData.bannerDetailInfos.length; const bannerDetailInfosLength = bannerData.bannerDetailInfos.length;
const [rollingData, setRollingData] = useState([]);
const [shptmBanrTpNm, setShptmBanrTpNm] = useState(); const [shptmBanrTpNm, setShptmBanrTpNm] = useState();
const [count, setCount] = useState(10); const [count, setCount] = useState(10);
const [detailLenghth, setDetailLength] = useState(); const [detailLenghth, setDetailLength] = useState();
const [startIndex, setStartIndex] = useState(0); const [startIndex, setStartIndex] = useState(0);
const [lastIndex, setLastIndex] = useState(); const [lastIndex, setLastIndex] = useState();
const [currentIndex, setCurrentIndex] = useState(0); const [currentIndex, setCurrentIndex] = useState(0);
const [number, setNumber] = useState(0); const [onFocus, setOnFocus] = useState(false);
const getIndex = (index) => { const getIndex = (index) => {
setCurrentIndex(index); setCurrentIndex(index);
setStartIndex(index); setStartIndex(index);
}; };
const getFocus = (focus) => {
setOnFocus(focus);
};
useEffect(() => { useEffect(() => {
if (bannerData) { if (bannerData) {
setRollingData(bannerDetailInfos);
setDetailLength(bannerDetailInfosLength); setDetailLength(bannerDetailInfosLength);
setShptmBanrTpNm(bannerDetailInfos[startIndex].shptmBanrTpNm); setShptmBanrTpNm(bannerDetailInfos[startIndex].shptmBanrTpNm);
setLastIndex(bannerDetailInfosLength - 1); setLastIndex(bannerDetailInfosLength - 1);
} }
console.log(startIndex, "useEffect HOOK");
}, [bannerData, startIndex]); }, [bannerData, startIndex]);
useEffect(() => { useEffect(() => {
// 포커스가 없을 경우에만 롤링
if (bannerDetailInfosLength === 1) { if (bannerDetailInfosLength === 1) {
return; return;
} }
if (true) { if (onFocus === false) {
const id = setInterval(() => { const id = setInterval(() => {
setCount((count) => count - 1); setCount((count) => count - 1);
}, 1000); }, 1000);
if (count === 0) { if (count === 0) {
if (startIndex > lastIndex) {
setStartIndex(0);
}
setStartIndex(startIndex + 1); setStartIndex(startIndex + 1);
setCount(10); setCount(10);
clearInterval(id); clearInterval(id);
if (startIndex === lastIndex) { if (startIndex === lastIndex) {
setStartIndex(0); setStartIndex(0);
} }
@@ -82,8 +86,8 @@ export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
rolling={bannerDetailInfosLength === 1 ? false : true} rolling={bannerDetailInfosLength === 1 ? false : true}
lastIndex={lastIndex} lastIndex={lastIndex}
currentIndex={startIndex} currentIndex={startIndex}
number={number}
getIndex={getIndex} getIndex={getIndex}
getFocus={getFocus}
/> />
) : null} ) : null}
</> </>

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

@@ -26,16 +26,14 @@ export default function HomeTodayDeal({
startIndex, startIndex,
lastIndex, lastIndex,
currentIndex, currentIndex,
number,
getIndex, getIndex,
getFocus,
...rest ...rest
}) { }) {
const handleClick = () => ( const handleClick = () => {
(productId) => { let proId = productId;
console.log("상세 페이지 이동"); console.log("상품ID : ", proId);
}, };
[productId]
);
const handlePrev = () => { const handlePrev = () => {
if (currentIndex === 0) { if (currentIndex === 0) {
@@ -51,6 +49,16 @@ export default function HomeTodayDeal({
getIndex(currentIndex + 1); getIndex(currentIndex + 1);
}; };
const _onFocus = () => {
console.log("포커스 온");
getFocus(true);
};
const _onBlur = () => {
console.log("포커스 오프");
getFocus(false);
};
const parsePriceInfo = useCallback( const parsePriceInfo = useCallback(
(priceInfo) => { (priceInfo) => {
const priceParts = priceInfo const priceParts = priceInfo
@@ -93,9 +101,11 @@ export default function HomeTodayDeal({
)} )}
<SpottableComponent <SpottableComponent
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)} className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
onClick={() => handleClick(productId)} onClick={handleClick}
onFocus={_onFocus}
onBlur={_onBlur}
> >
<div onClick={() => handleClick(productId)}> <div>
<div className={css.textBox}>{productName}</div> <div className={css.textBox}>{productName}</div>
<div className={css.accBox}> <div className={css.accBox}>
{discountedPrice} {discountedPrice}