From 00137eeaf0403f6ddbc6ad0e396980202852489a Mon Sep 17 00:00:00 2001
From: "junghoon86.park" <junghoon86.park@lgepartner.com>
Date: Fri, 10 May 2024 16:54:54 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=88=ED=8C=A8=EB=84=90=20=EC=97=AC?=
 =?UTF-8?q?=EB=B0=B1=20=EB=B6=80=EB=B6=84=20=ED=99=95=EC=9D=B8=EC=9A=A9=20?=
 =?UTF-8?q?05/10=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/HomePanel/BestSeller/BestSeller.jsx | 14 +++----------
 .../views/HomePanel/HomeOnSale/HomeOnSale.jsx | 20 +++++++++----------
 .../HomePanel/PopularShow/PopularShow.jsx     | 13 +++---------
 .../HomePanel/SubCategory/SubCategory.jsx     | 13 +++---------
 4 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
index c90e9858..661b66ae 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
@@ -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 });
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
index 1312519e..c0094a46 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
@@ -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)}
                     />
                   );
diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
index 36b2dc99..7389a6f7 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
@@ -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 });
diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
index d3a2e693..9d693332 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
@@ -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 });