홈패널 여백 부분 확인용 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 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 });

View File

@@ -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)}
/> />
); );

View File

@@ -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 });

View File

@@ -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 });