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-25 12:44:03 +09:00
parent 35537c74e5
commit 7228a1f36b
7 changed files with 118 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,6 +46,14 @@ export default function HomeBannerTemplate1() {
(state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath2
);
const startFocus = () => {
if (Spotlight.focus("banner01Prev")) {
Spotlight.focus("banner01Prev");
} else {
Spotlight.focus("banner01");
}
};
useEffect(() => {
if (!homeTopDisplayInfos || !homeMainContentsBannerInfos) {
dispatch(getHomeMainContents);
@@ -56,10 +64,10 @@ export default function HomeBannerTemplate1() {
if (homeMainContentsBannerInfos) {
const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
setBannerInfos(banerInfo);
Spotlight.focus("top", { enterTo: "" });
dispatch(getHomeMainContents);
console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
console.log(homeTopDisplayInfos, "탑디스");
startFocus();
// console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
// console.log(homeTopDisplayInfos, "탑디스");
}
}, [homeMainContentsBannerInfos, bannerInfos, dispatch]);

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

@@ -49,6 +49,20 @@ export default function HomeBannerTemplate2() {
(state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath2
);
const startFocus = () => {
if (Spotlight.focus("banner03Prev")) {
Spotlight.focus("banner03Prev");
} else {
Spotlight.focus("banner03");
}
if (Spotlight.focus("banner01Prev")) {
Spotlight.focus("banner01Prev");
} else {
Spotlight.focus("banner01");
}
};
useEffect(() => {
if (!homeTopDisplayInfos || !homeMainContentsBannerInfos) {
dispatch(getHomeMainContents);
@@ -59,10 +73,10 @@ export default function HomeBannerTemplate2() {
if (homeMainContentsBannerInfos) {
const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
setBannerInfos(banerInfo);
Spotlight.focus("top", { enterTo: "" });
dispatch(getHomeMainContents);
console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
console.log(homeTopDisplayInfos, "탑디스");
startFocus();
// console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
// console.log(homeTopDisplayInfos, "탑디스");
}
}, [homeMainContentsBannerInfos, bannerInfos, dispatch]);

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

@@ -50,6 +50,20 @@ export default function HomeBannerTemplate3({ ...rest }) {
(state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath2
);
const startFocus = () => {
if (Spotlight.focus("banner04Prev")) {
Spotlight.focus("banner04Prev");
} else {
Spotlight.focus("banner04");
}
if (Spotlight.focus("banner01Prev")) {
Spotlight.focus("banner01Prev");
} else {
Spotlight.focus("banner01");
}
};
useEffect(() => {
if (!homeTopDisplayInfos || !homeMainContentsBannerInfos) {
dispatch(getHomeMainContents);
@@ -60,10 +74,10 @@ export default function HomeBannerTemplate3({ ...rest }) {
if (homeMainContentsBannerInfos) {
const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
setBannerInfos(banerInfo);
Spotlight.focus("top", { enterTo: "" });
dispatch(getHomeMainContents);
console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
console.log(homeTopDisplayInfos, "탑디스");
startFocus();
// console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
// console.log(homeTopDisplayInfos, "탑디스");
}
}, [homeMainContentsBannerInfos, bannerInfos, dispatch]);

94
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/ImageBannerUnit.jsx
View File

@@ -1,23 +1,15 @@
import React, {
useCallback,
useEffect,
useState,
} from 'react';
import React, { useCallback, useEffect, useState } from "react";
import classNames from 'classnames';
import {
useDispatch,
useSelector,
} from 'react-redux';
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
// import { pushPanel } from '../../../actions/panelActions';
// import { panel_names } from '../../../utils/Config';
import css from '../HomeBanner/ImageBannerUnit.module.less';
import { pushPanel } from "../../../actions/panelActions";
import { panel_names } from "../../../utils/Config";
import css from "../HomeBanner/ImageBannerUnit.module.less";
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
@@ -26,7 +18,6 @@ const Container = SpotlightContainerDecorator(
const SpottableComponent = Spottable("div");
// 이미지 배너 테스트중
export default function ImageBannerUnit({
children,
imageAlt,
@@ -49,9 +40,10 @@ export default function ImageBannerUnit({
getIndex,
getFocus,
spotlightId,
startFocus,
...rest
}) {
const dispatch = useDispatch();
const handleClick = useCallback(() => {
console.log("파트너ID", patnrId);
console.log("상품", prdtId);
@@ -61,41 +53,44 @@ export default function ImageBannerUnit({
// panelInfo: { patnrId: patnrId, prdtId: prdtId },
// })
// );
}, [patnrId, productId]);
}, [dispatch, patnrId, productId]);
const handlePrev = () => {
// 화살표 아래키 누를시, 아래로 포커스
const [focusDown, setFocusDown] = useState(false);
const handlePrev = useCallback(() => {
if (currentIndex === 0) {
getIndex(lastIndex);
return;
}
getIndex(currentIndex - 1);
};
}, [getIndex]);
const handleNext = () => {
const handleNext = useCallback(() => {
if (lastIndex === currentIndex) {
getIndex(0);
return;
}
getIndex(currentIndex + 1);
};
}, [getIndex]);
const _onFocus = () => {
if (rolling === true) {
getFocus(true);
}
};
const onFocus = useCallback(() => {
getFocus(true);
}, []);
const _onBlur = () => {
if (rolling === true) {
getFocus(false);
}
};
const onBlur = useCallback(() => {
setFocusDown(false);
getFocus(false);
}, []);
// useEffect(() => {
// if (startFocus === false) {
// Spotlight.focus("banner01");
// }
// }, [startFocus]);
const onKeyDown = useCallback(
(event) => {
if (event.key === "ArrowDown") {
setFocusDown(true);
}
},
[focusDown]
);
return (
<Container
@@ -104,17 +99,24 @@ export default function ImageBannerUnit({
isHorizontal && css.isHorizontalWrap
)}
>
{rolling === true && (
{focusDown === true ? (
<div
className={classNames(css.arrow, css.leftBtn)}
onClick={handlePrev}
></div>
) : (
<SpottableComponent
className={classNames(css.arrow, css.leftBtn)}
onClick={handlePrev}
spotlightId={spotlightId + "Prev"}
></SpottableComponent>
)}
<SpottableComponent
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
onClick={handleClick}
onFocus={_onFocus}
onBlur={_onBlur}
onFocus={onFocus}
onBlur={onBlur}
onKeyDown={onKeyDown}
spotlightId={spotlightId}
>
<div className={css.imgBanner}>
@@ -126,10 +128,16 @@ export default function ImageBannerUnit({
</p>
</SpottableComponent>
{rolling === true && (
{focusDown === true ? (
<div
className={classNames(css.arrow, css.rightBtn)}
onClick={handleNext}
></div>
) : (
<SpottableComponent
className={classNames(css.arrow, css.rightBtn)}
onClick={handleNext}
spotlightId={spotlightId + "Next"}
></SpottableComponent>
)}
</Container>

21
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/ImageBannerUnit.module.less
View File

@@ -40,24 +40,33 @@
.arrow {
z-index: 10;
.size(@w: 61px, @h: calc(100% + 2px));
.size(@w: 42px, @h: 42px);
background-size: 42px 42px;
background-repeat: no-repeat;
background-position: center center;
&.leftBtn {
.position(@position: absolute, @top: -1px, @left: -1px);
.position(@position: absolute, @top: 429px, @left: 18px);
background-image: url("../../../../assets/images/btn/btn_prev_thumb_nor.png");
background-position: center right;
&:focus {
background-image: url("../../../../assets/images/btn/btn_prev_thumb_foc.png");
}
}
&.rightBtn {
.position(@position: absolute, @top: -1px, @right: -1px);
.position(@position: absolute, @top: 429px, @right: 18px);
background-image: url("../../../../assets/images/btn/btn_next_thumb_nor.png");
background-position: center left;
&:focus {
background-image: url("../../../../assets/images/btn/btn_next_thumb_foc.png");
}
}
}
&.isHorizontalWrap {
.arrow {
&.leftBtn {
.position(@position: absolute, @top: 189px, @left: 18px);
}
&.rightBtn {
.position(@position: absolute, @top: 189px, @right: 18px);
}
}
}
}

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

@@ -12,7 +12,6 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
const [count, setCount] = useState(10);
const [startIndex, setStartIndex] = useState(0);
const [lastIndex, setLastIndex] = useState(rollingDataLength - 1);
const [startFocus, setStartFocus] = useState(false);
const [onFocus, setOnFocus] = useState(false);
const getIndex = useCallback(
@@ -78,7 +77,6 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
getIndex={getIndex}
getFocus={getFocus}
spotlightId={spotlightId}
startFocus={startFocus}
/>
) : rollingData[startIndex].shptmBanrTpNm === "LIVE" ||
rollingData[startIndex].shptmBanrTpNm === "VOD" ? (
@@ -102,7 +100,6 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
getIndex={getIndex}
getFocus={getFocus}
spotlightId={spotlightId}
startFocus={startFocus}
/>
) : null}
</>

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

@@ -37,7 +37,6 @@ export default function HomeTodayDeal({
getIndex,
getFocus,
spotlightId,
startFocus,
...rest
}) {
const dispatch = useDispatch();
@@ -72,17 +71,13 @@ export default function HomeTodayDeal({
getIndex(currentIndex + 1);
}, [getIndex]);
const onFocus = () => {
if (rolling === true) {
getFocus(true);
}
};
const onFocus = useCallback(() => {
getFocus(true);
}, []);
const onBlur = useCallback(() => {
if (rolling === true) {
setFocusDown(false);
getFocus(false);
}
setFocusDown(false);
getFocus(false);
}, []);
const onKeyDown = useCallback(
@@ -137,6 +132,7 @@ export default function HomeTodayDeal({
<SpottableComponent
className={classNames(css.arrow, css.leftBtn)}
onClick={handlePrev}
spotlightId={spotlightId + "Prev"}
></SpottableComponent>
)}
@@ -172,6 +168,7 @@ export default function HomeTodayDeal({
<SpottableComponent
className={classNames(css.arrow, css.rightBtn)}
onClick={handleNext}
spotlightId={spotlightId + "Next"}
></SpottableComponent>
)}
</Container>