[더보기 버튼] 관련 수정건.

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

@@ -91,7 +91,27 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
   );
 
   const orderStyle = useMemo(() => ({ order: order }), [order]);
+  const handleScrollRight = (e) => {
+    const container = e.currentTarget?.parentNode;
 
+    let gap = 18;
+    let itemWidth = 324;
+    let moreItemWidth = 198;
+    let containerBoxWidth = 1740;
+
+    // const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap));
+    // item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return
+    let itemLength = bestSellerDatas?.length;
+
+    const x =
+      (itemWidth + gap) * itemLength +
+      (moreItemWidth + gap) -
+      containerBoxWidth;
+
+    setTimeout(() => {
+      scrollLeft({ x, animate: true });
+    });
+  };
   return (
     <Container className={css.bestSellerWrap} style={orderStyle}>
       <SectionTitle
@@ -140,6 +160,7 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
           <SpottableComponent
             className={css.addItem}
             onClick={handleMoreCardClick}
+            onFocus={handleScrollRight}
           ></SpottableComponent>
         )}
       </TScroller>

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

@@ -6,6 +6,7 @@ import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainer
 import Spottable from "@enact/spotlight/Spottable";
 
 import { pushPanel } from "../../../actions/panelActions";
+import { startVideoPlayer } from "../../../actions/playActions";
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import TItemCard, {
   IMAGETYPES,
@@ -18,7 +19,6 @@ import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
 import { panel_names } from "../../../utils/Config";
 import { $L } from "../../../utils/helperMethods";
 import css from "../PopularShow/PopularShow.module.less";
-import { startVideoPlayer } from "../../../actions/playActions";
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -91,6 +91,26 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
     [cursorVisible]
   );
   const orderStyle = useMemo(() => ({ order: order }), [order]);
+  const handleScrollRight = (e) => {
+    const container = e.currentTarget?.parentNode;
+    let gap = 18;
+    let itemWidth = 546;
+    let moreItemWidth = 198;
+    let containerBoxWidth = 1740;
+
+    // const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap));
+    // item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return
+    let itemLength = topInfos?.length;
+
+    const x =
+      (itemWidth + gap) * itemLength +
+      (moreItemWidth + gap) -
+      containerBoxWidth;
+
+    setTimeout(() => {
+      scrollLeft({ x, animate: true });
+    });
+  };
   return (
     <Container className={css.popularShow} style={orderStyle}>
       <SectionTitle
@@ -155,6 +175,7 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
           <SpottableComponent
             className={css.addItem}
             onClick={handleMoreCardClick}
+            onFocus={handleScrollRight}
           ></SpottableComponent>
         )}
       </TScroller>

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

@@ -51,10 +51,12 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
   const [currentLgCatNm, setCurrentLgCatNm] = useState(null);
 
   const [targetId, setTargetId] = useState(null);
-  const timerRef = useRef();
   const [drawChk, setDrawChk] = useState(false);
   const [firstChk, SetFirstChk] = useState(false);
 
+  const timerRef = useRef();
+  const scrollRef = useRef();
+
   const { scrollTopByDistance } = useScrollTopByDistance();
   const { cursorVisible } = useSelector((state) => state.common.appStatus);
   const handleCategoryNav = (lgCatCd, LgCatNm) => {
@@ -172,6 +174,27 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
 
   const orderStyle = useMemo(() => ({ order: order }), [order]);
 
+  const handleScrollRight = (e) => {
+    const container = e.currentTarget?.parentNode;
+    let gap = 18;
+    let itemWidth = 324;
+    let moreItemWidth = 198;
+    let containerBoxWidth = 1740;
+
+    // const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap));
+    // item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return
+    let itemLength = categoryItemInfos?.length;
+
+    const x =
+      (itemWidth + gap) * itemLength +
+      (moreItemWidth + gap) -
+      containerBoxWidth;
+
+    setTimeout(() => {
+      scrollLeft({ x, animate: true });
+    });
+  };
+
   return (
     <Container style={orderStyle}>
       <ContainerBasic>
@@ -190,6 +213,7 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
           direction="horizontal"
           cbScrollTo={getScrollTo}
           noScrollByWheel
+          ref={scrollRef}
         >
           {categoryItemInfos &&
             categoryItemInfos.map(
@@ -229,6 +253,7 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
               onClick={handleMoreCardClick}
               spotlightId={"home-cate-more-btn"}
               data-catcd-num={currentLgCatCd}
+              onFocus={handleScrollRight}
             ></SpottableComponent>
           )}
         </TScroller>