홈패널 여백 부분 확인용 05/10 1

This commit is contained in:
junghoon86.park
2024-05-10 16:54:54 +09:00
parent 45fcf1845c
commit 00137eeaf0
4 changed files with 18 additions and 42 deletions

View File

@@ -93,17 +93,9 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
const orderStyle = useMemo(() => ({ order: order }), [order]);
const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode;
let gap = scaleW(18);
let itemWidth = scaleW(324);
let moreItemWidth = scaleW(198);
let containerBoxWidth = scaleW(1740);
let itemLength = bestSellerDatas?.length;
const x =
(itemWidth + gap) * itemLength +
(moreItemWidth + gap) -
containerBoxWidth;
const gap = 18;
const padding = 60;
const x = container.scrollWidth - (container.clientWidth + padding - gap);
setTimeout(() => {
scrollLeft({ x, animate: true });

View File

@@ -31,13 +31,11 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
true
);
const homeOnSaleInfosLength = homeOnSaleInfos?.length;
const handleScrollRight = () => {
let gap = scaleW(18);
let itemWidth = scaleW(630);
let containerBoxWidth = scaleW(1740);
const x = (itemWidth + gap) * homeOnSaleInfosLength - containerBoxWidth;
const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode;
const gap = 18;
const padding = 0;
const x = container.scrollWidth - (container.clientWidth + padding - gap);
setTimeout(() => {
scrollLeft({ x, animate: true });
@@ -45,13 +43,13 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
};
const handleFocus = useCallback(
(index) => {
(e, index) => {
if (index === 0) {
handleScrollReset();
}
if (index === homeOnSaleInfosLength - 1) {
handleScrollRight();
handleScrollRight(e);
}
if (cursorVisible) {
@@ -65,7 +63,7 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
36
);
},
[cursorVisible]
[cursorVisible, homeOnSaleInfos]
);
const handleBlur = useCallback((itemIndex) => {
if (itemIndex === 0) {
@@ -99,7 +97,7 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
key={index}
homeOnSaleInfos={homeOnSaleInfos}
itemData={itemData}
onFocus={() => handleFocus(index)}
onFocus={(e) => handleFocus(e, index)}
onBlur={() => handleBlur(index)}
/>
);

View File

@@ -93,16 +93,9 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
const orderStyle = useMemo(() => ({ order: order }), [order]);
const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode;
let gap = scaleW(18);
let itemWidth = scaleW(546);
let moreItemWidth = scaleW(198);
let containerBoxWidth = scaleW(1740);
let itemLength = topInfos?.length;
const x =
(itemWidth + gap) * itemLength +
(moreItemWidth + gap) -
containerBoxWidth;
const gap = 18;
const padding = 60;
const x = container.scrollWidth - (container.clientWidth + padding - gap);
setTimeout(() => {
scrollLeft({ x, animate: true });

View File

@@ -176,16 +176,9 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode;
let gap = scaleW(18);
let itemWidth = scaleW(324);
let moreItemWidth = scaleW(198);
let containerBoxWidth = scaleW(1740);
let itemLength = categoryItemInfos?.length;
const x =
(itemWidth + gap) * itemLength +
(moreItemWidth + gap) -
containerBoxWidth;
const gap = 18;
const padding = 60;
const x = container.scrollWidth - (container.clientWidth + padding - gap);
setTimeout(() => {
scrollLeft({ x, animate: true });