홈패널 마지막부분 여백값 관련 수정

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

@@ -14,7 +14,7 @@ import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
 import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
 import { panel_names } from "../../../utils/Config";
-import { $L } from "../../../utils/helperMethods";
+import { $L, scaleW } from "../../../utils/helperMethods";
 import css from "./BestSeller.module.less";
 
 const SpottableComponent = Spottable("div");
@@ -94,13 +94,10 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
   const handleScrollRight = (e) => {
     const container = e.currentTarget?.parentNode;
 
-    let gap = 18;
+    let gap = scaleW(18);
-    let itemWidth = 324;
+    let itemWidth = scaleW(324);
-    let moreItemWidth = 198;
+    let moreItemWidth = scaleW(198);
-    let containerBoxWidth = 1740;
+    let containerBoxWidth = scaleW(1740);
-
-    // const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap));
-    // item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return
     let itemLength = bestSellerDatas?.length;
 
     const x =
@@ -152,7 +149,7 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
                 onBlur={() => handleBlur(itemIndex)}
                 onClick={() => handleCardClick(patnrId, prdtId)}
                 offerInfo={offerInfo}
-                spotlightId={'bestsellerItem'+itemIndex}
+                spotlightId={"bestsellerItem" + itemIndex}
               />
             )
           )}

com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx

@@ -9,7 +9,7 @@ import TScroller from "../../../components/TScroller/TScroller";
 import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
 import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
-import { $L } from "../../../utils/helperMethods";
+import { $L, scaleW } from "../../../utils/helperMethods";
 import css from "./HomeOnSale.module.less";
 import HomeOnSaleItem from "./HomeOnSaleItem/HomeOnSaleItem";
 
@@ -30,12 +30,30 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
     scrollLeft,
     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;
+
+    setTimeout(() => {
+      scrollLeft({ x, animate: true });
+    });
+  };
+
   const handleFocus = useCallback(
     (index) => {
       if (index === 0) {
         handleScrollReset();
       }
 
+      if (index === homeOnSaleInfosLength - 1) {
+        handleScrollRight();
+      }
+
       if (cursorVisible) {
         return;
       }
@@ -54,22 +72,7 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
       handleStopScrolling();
     }
   }, []);
-  const renderItem = useCallback(
-    ({ index, ...rest }) => {
-      const itemData = homeOnSaleInfos[index];
 
-      return (
-        <HomeOnSaleItem
-          {...rest}
-          key={index}
-          homeOnSaleInfos={homeOnSaleInfos}
-          itemData={itemData}
-          onFocus={() => handleFocus(index)}
-        />
-      );
-    },
-    [homeOnSaleInfos]
-  );
   const orderStyle = useMemo(() => ({ order: order }), [order]);
 
   return (
@@ -81,17 +84,6 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
           data-title-index="homeOnSale"
         />
         <div className={css.onSaleItem}>
-          {/* {homeOnSaleInfos && homeOnSaleInfos.length > 0 && (
-            <TVirtualGridList
-              className={css.grid}
-              dataSize={homeOnSaleInfos.length}
-              direction="horizontal"
-              renderItem={renderItem}
-              itemHeight={300}
-              itemWidth={630}
-              spacing={18}
-            />
-          )} */}
           <TScroller
             cbScrollTo={getScrollTo}
             direction="horizontal"

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx

@@ -17,7 +17,7 @@ import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
 import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
 import { panel_names } from "../../../utils/Config";
-import { $L } from "../../../utils/helperMethods";
+import { $L, scaleW } from "../../../utils/helperMethods";
 import css from "../PopularShow/PopularShow.module.less";
 
 const SpottableComponent = Spottable("div");
@@ -93,13 +93,10 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
   const orderStyle = useMemo(() => ({ order: order }), [order]);
   const handleScrollRight = (e) => {
     const container = e.currentTarget?.parentNode;
-    let gap = 18;
+    let gap = scaleW(18);
-    let itemWidth = 546;
+    let itemWidth = scaleW(546);
-    let moreItemWidth = 198;
+    let moreItemWidth = scaleW(198);
-    let containerBoxWidth = 1740;
+    let containerBoxWidth = scaleW(1740);
-
-    // const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap));
-    // item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return
     let itemLength = topInfos?.length;
 
     const x =

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx

@@ -22,6 +22,7 @@ import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
 import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
 import { panel_names } from "../../../utils/Config";
+import { scaleW } from "../../../utils/helperMethods";
 import CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav";
 import css from "../../HomePanel/SubCategory/SubCategory.module.less";
 
@@ -175,13 +176,10 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
 
   const handleScrollRight = (e) => {
     const container = e.currentTarget?.parentNode;
-    let gap = 18;
+    let gap = scaleW(18);
-    let itemWidth = 324;
+    let itemWidth = scaleW(324);
-    let moreItemWidth = 198;
+    let moreItemWidth = scaleW(198);
-    let containerBoxWidth = 1740;
+    let containerBoxWidth = scaleW(1740);
-
-    // const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap));
-    // item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return
     let itemLength = categoryItemInfos?.length;
 
     const x =