홈패널 여백 부분 확인용 05/10 1
This commit is contained in:
@@ -93,17 +93,9 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
|
|||||||
const orderStyle = useMemo(() => ({ order: order }), [order]);
|
const orderStyle = useMemo(() => ({ order: order }), [order]);
|
||||||
const handleScrollRight = (e) => {
|
const handleScrollRight = (e) => {
|
||||||
const container = e.currentTarget?.parentNode;
|
const container = e.currentTarget?.parentNode;
|
||||||
|
const gap = 18;
|
||||||
let gap = scaleW(18);
|
const padding = 60;
|
||||||
let itemWidth = scaleW(324);
|
const x = container.scrollWidth - (container.clientWidth + padding - gap);
|
||||||
let moreItemWidth = scaleW(198);
|
|
||||||
let containerBoxWidth = scaleW(1740);
|
|
||||||
let itemLength = bestSellerDatas?.length;
|
|
||||||
|
|
||||||
const x =
|
|
||||||
(itemWidth + gap) * itemLength +
|
|
||||||
(moreItemWidth + gap) -
|
|
||||||
containerBoxWidth;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
scrollLeft({ x, animate: true });
|
scrollLeft({ x, animate: true });
|
||||||
|
|||||||
@@ -31,13 +31,11 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
|
|||||||
true
|
true
|
||||||
);
|
);
|
||||||
const homeOnSaleInfosLength = homeOnSaleInfos?.length;
|
const homeOnSaleInfosLength = homeOnSaleInfos?.length;
|
||||||
const handleScrollRight = () => {
|
const handleScrollRight = (e) => {
|
||||||
let gap = scaleW(18);
|
const container = e.currentTarget?.parentNode;
|
||||||
let itemWidth = scaleW(630);
|
const gap = 18;
|
||||||
|
const padding = 0;
|
||||||
let containerBoxWidth = scaleW(1740);
|
const x = container.scrollWidth - (container.clientWidth + padding - gap);
|
||||||
|
|
||||||
const x = (itemWidth + gap) * homeOnSaleInfosLength - containerBoxWidth;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
scrollLeft({ x, animate: true });
|
scrollLeft({ x, animate: true });
|
||||||
@@ -45,13 +43,13 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleFocus = useCallback(
|
const handleFocus = useCallback(
|
||||||
(index) => {
|
(e, index) => {
|
||||||
if (index === 0) {
|
if (index === 0) {
|
||||||
handleScrollReset();
|
handleScrollReset();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (index === homeOnSaleInfosLength - 1) {
|
if (index === homeOnSaleInfosLength - 1) {
|
||||||
handleScrollRight();
|
handleScrollRight(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (cursorVisible) {
|
if (cursorVisible) {
|
||||||
@@ -65,7 +63,7 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
|
|||||||
36
|
36
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
[cursorVisible]
|
[cursorVisible, homeOnSaleInfos]
|
||||||
);
|
);
|
||||||
const handleBlur = useCallback((itemIndex) => {
|
const handleBlur = useCallback((itemIndex) => {
|
||||||
if (itemIndex === 0) {
|
if (itemIndex === 0) {
|
||||||
@@ -99,7 +97,7 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
|
|||||||
key={index}
|
key={index}
|
||||||
homeOnSaleInfos={homeOnSaleInfos}
|
homeOnSaleInfos={homeOnSaleInfos}
|
||||||
itemData={itemData}
|
itemData={itemData}
|
||||||
onFocus={() => handleFocus(index)}
|
onFocus={(e) => handleFocus(e, index)}
|
||||||
onBlur={() => handleBlur(index)}
|
onBlur={() => handleBlur(index)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -93,16 +93,9 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
|
|||||||
const orderStyle = useMemo(() => ({ order: order }), [order]);
|
const orderStyle = useMemo(() => ({ order: order }), [order]);
|
||||||
const handleScrollRight = (e) => {
|
const handleScrollRight = (e) => {
|
||||||
const container = e.currentTarget?.parentNode;
|
const container = e.currentTarget?.parentNode;
|
||||||
let gap = scaleW(18);
|
const gap = 18;
|
||||||
let itemWidth = scaleW(546);
|
const padding = 60;
|
||||||
let moreItemWidth = scaleW(198);
|
const x = container.scrollWidth - (container.clientWidth + padding - gap);
|
||||||
let containerBoxWidth = scaleW(1740);
|
|
||||||
let itemLength = topInfos?.length;
|
|
||||||
|
|
||||||
const x =
|
|
||||||
(itemWidth + gap) * itemLength +
|
|
||||||
(moreItemWidth + gap) -
|
|
||||||
containerBoxWidth;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
scrollLeft({ x, animate: true });
|
scrollLeft({ x, animate: true });
|
||||||
|
|||||||
@@ -176,16 +176,9 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
|
|||||||
|
|
||||||
const handleScrollRight = (e) => {
|
const handleScrollRight = (e) => {
|
||||||
const container = e.currentTarget?.parentNode;
|
const container = e.currentTarget?.parentNode;
|
||||||
let gap = scaleW(18);
|
const gap = 18;
|
||||||
let itemWidth = scaleW(324);
|
const padding = 60;
|
||||||
let moreItemWidth = scaleW(198);
|
const x = container.scrollWidth - (container.clientWidth + padding - gap);
|
||||||
let containerBoxWidth = scaleW(1740);
|
|
||||||
let itemLength = categoryItemInfos?.length;
|
|
||||||
|
|
||||||
const x =
|
|
||||||
(itemWidth + gap) * itemLength +
|
|
||||||
(moreItemWidth + gap) -
|
|
||||||
containerBoxWidth;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
scrollLeft({ x, animate: true });
|
scrollLeft({ x, animate: true });
|
||||||
|
|||||||
Reference in New Issue
Block a user