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

[Home] focus, scroll 해결

Browse Source 
Detail Notes :
 
1. 최상단 이미지에 focus 될 때 이미지 위 여백까지 보이도록 처리
2. Scroll 끊김 현상을 확실하게 해결하기 위해 각 section height 추가
This commit is contained in:
jangheon Pyo
2024-02-27 10:21:17 +09:00
parent 1334be5351
commit dd011ef55a
7 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@
@import "../../../style/utils.module.less";
.bestSellerWrap {
height: 538px;
margin-top: 30px;
> h2 {
margin-left: 60px;

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

@@ -11,6 +11,7 @@ import CustomImage from "../../../components/CustomImage/CustomImage";
import css from "./HomeBannerTemplate1.module.less";
import Random from "./RandomUnit";
import Rolling from "./RollingUnit";
import useScrollReset from "../../../hooks/useScrollReset";
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
@@ -25,6 +26,7 @@ const ContainerBasic = SpotlightContainerDecorator(
export default function HomeBannerTemplate1({ scrollTop }) {
const dispatch = useDispatch();
const [bannerInfos, setBannerInfos] = useState([]);
const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
const homeMainContentsBannerInfos = useSelector(
(state) => state.home.mainContentsData.homeMainContentsBannerInfos
@@ -88,6 +90,8 @@ export default function HomeBannerTemplate1({ scrollTop }) {
key={item.banrLctnNo}
imageType={true}
spotlightId={"banner01"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
/>
) : item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Random" ? (
@@ -96,11 +100,15 @@ export default function HomeBannerTemplate1({ scrollTop }) {
key={index.banrLctnNo}
imageType={true}
spotlightId={"banner01"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
/>
) : (
<SpottableComponent
spotlightId={"banner01"}
key={item.banrLctnNo}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
>
<CustomImage delay={0} src={wdthImage1} />
</SpottableComponent>
@@ -119,6 +127,8 @@ export default function HomeBannerTemplate1({ scrollTop }) {
key={item.banrLctnNo}
imageType={true}
spotlightId={"banner02"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
/>
) : item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Random" ? (
@@ -127,11 +137,15 @@ export default function HomeBannerTemplate1({ scrollTop }) {
key={item.banrLctnNo}
imageType={true}
spotlightId={"banner02"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
/>
) : (
<SpottableComponent
spotlightId={"banner02"}
key={item.banrLctnNo}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
>
<CustomImage delay={0} src={wdthImage2} />
</SpottableComponent>
@@ -151,6 +165,8 @@ export default function HomeBannerTemplate1({ scrollTop }) {
key={item.banrLctnNo}
imageType={false}
spotlightId={"banner03"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
/>
) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? (
@@ -159,11 +175,15 @@ export default function HomeBannerTemplate1({ scrollTop }) {
key={item.banrLctnNo}
imageType={false}
spotlightId={"banner03"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
/>
) : (
<SpottableComponent
key={item.banrLctnNo}
spotlightId={"banner03"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
>
<CustomImage delay={0} src={vctpImage1} />
</SpottableComponent>
@@ -182,6 +202,8 @@ export default function HomeBannerTemplate1({ scrollTop }) {
key={item.banrLctnNo}
imageType={false}
spotlightId={"banner04"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
/>
) : item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Random" ? (
@@ -190,11 +212,15 @@ export default function HomeBannerTemplate1({ scrollTop }) {
key={item.banrLctnNo}
imageType={false}
spotlightId={"banner04"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
/>
) : (
<SpottableComponent
spotlightId={"banner04"}
key={item.banrLctnNo}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
>
<CustomImage delay={0} src={vctpImage2} />
</SpottableComponent>

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

@@ -1,7 +1,9 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.bestSeller {
.size(@w: 100%, @h:430px);
padding: 60px 0px 0px 60px;
width: 100%;
.subTitle {
margin-bottom: 20px;
}

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

@@ -1,6 +1,7 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.popularShow {
height: 538px;
> h2 {
margin: 60px 0 0px 60px;
font-size: 42px;

20
com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.jsx
View File

@@ -1,20 +1,16 @@
import React, { useCallback } from 'react';
import React, { useCallback } from "react";
import { VirtualGridList } from '@enact/sandstone/VirtualList';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import ri from '@enact/ui/resolution';
import { VirtualGridList } from "@enact/sandstone/VirtualList";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import ri from "@enact/ui/resolution";
import {
scaleH,
scaleW,
} from '../../../../utils/helperMethods';
import CategoryNavItem from '../CategoryNav/CategoryNavItem/CategoryNavItem';
import css from './CategoryNav.module.less';
import { scaleH, scaleW } from "../../../../utils/helperMethods";
import CategoryNavItem from "../CategoryNav/CategoryNavItem/CategoryNavItem";
import css from "./CategoryNav.module.less";
const LIST_ITEM_CONF = {
ITEM_WIDTH: 210,
ITEM_HEIGHT: 235,
ITEM_HEIGHT: 210,
SAPCING: 30,
};

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

@@ -2,7 +2,7 @@
@import "../../../../style/utils.module.less";
.container {
.size(@w: 100%, @h:235px);
.size(@w: 100%, @h:210px);
z-index: 10;
background-color: @BG_COLOR_01;
.font(@fontFamily: @baseFontBold, @fontSize: 28px);

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

@@ -5,7 +5,7 @@
/* normal */
position: relative;
.flex(@direction: column);
margin-top: 50px;
margin-top: 25px;
color: @COLOR_GRAY08;
text-align: center;