[Home]

Detail Notes :
 
1. 스크롤 시나리오 적용
> useScrollTopByDistance Hook 이용하여 스크롤 시나리오 적용
2. HomeBanner
> img 태그 -> CustomImage 컴포넌트로 변경하여 onError 처리 되도록 변경
3. 초기 Focus
> setTimeOut 이용하여 초기 진입시 Focus 추가

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

@@ -14,6 +14,7 @@ import useScrollTo from "../../../hooks/useScrollTo";
 import { panel_names } from "../../../utils/Config";
 import { $L } from "../../../utils/helperMethods";
 import css from "./BestSeller.module.less";
+import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -21,7 +22,7 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-const BestSeller = ({ order }) => {
+const BestSeller = ({ order, scrollTopBody }) => {
   const dispatch = useDispatch();
   const bestSellerDatas = useSelector(
     (state) => state.product.bestSellerData.bestSeller
@@ -32,6 +33,8 @@ const BestSeller = ({ order }) => {
     scrollLeft,
     true
   );
+  const { scrollTopByDistance } = useScrollTopByDistance();
+  const { cursorVisible } = useSelector((state) => state.common.appStatus);
   useEffect(() => {
     setDrawChk(true);
   }, [bestSellerDatas]);
@@ -56,10 +59,40 @@ const BestSeller = ({ order }) => {
       )
     );
   });
+
+  const handleBlur = useCallback((itemIndex) => {
+    if (itemIndex === 0) {
+      handleStopScrolling();
+    }
+  }, []);
+
+  const handleFocus = useCallback(
+    (itemIndex) => {
+      if (itemIndex === 0) {
+        handleScrollReset();
+      }
+
+      if (cursorVisible) {
+        return;
+      }
+
+      scrollTopByDistance(
+        `[data-marker="scroll-marker"]`,
+        `[data-title-index="homeBestSellerTitle"]`,
+        scrollTopBody,
+        36
+      );
+    },
+    [cursorVisible]
+  );
+
   const orderStyle = useMemo(() => ({ order: order }), [order]);
   return (
     <Container className={css.bestSellerWrap} style={orderStyle}>
-      <SectionTitle title={$L(`BEST SELLER`)} />
+      <SectionTitle
+        title={$L(`BEST SELLER`)}
+        data-title-index="homeBestSellerTitle"
+      />
 
       <TScroller
         className={css.homeBestSeller}
@@ -68,21 +101,34 @@ const BestSeller = ({ order }) => {
         noScrollByWheel
       >
         {bestSellerDatas &&
-          bestSellerDatas.map((item, index) => (
-            <TItemCard
-              key={item.prdtId}
-              imageAlt={item.prdtId}
-              imageSource={item.imgUrl}
-              priceInfo={item.priceInfo}
-              productName={item.prdtNm}
-              isBestSeller={true}
-              rank={item.rankOrd}
-              onFocus={index === 0 ? handleScrollReset : null}
-              onBlur={handleStopScrolling}
-              onClick={() => handleCardClick(item)}
-              offerInfo={item.offerInfo}
-            />
-          ))}
+          bestSellerDatas.map(
+            (
+              {
+                prdtId,
+                imgUrl,
+                priceInfo,
+                prdtNm,
+                rankOrd,
+                patnrId,
+                offerInfo,
+              },
+              itemIndex
+            ) => (
+              <TItemCard
+                key={prdtId}
+                imageAlt={prdtId}
+                imageSource={imgUrl}
+                priceInfo={priceInfo}
+                productName={prdtNm}
+                isBestSeller={true}
+                rank={rankOrd}
+                onFocus={() => handleFocus(itemIndex)}
+                onBlur={() => handleBlur(itemIndex)}
+                onClick={(e) => handleCardClick(e, patnrId, prdtId)}
+                offerInfo={offerInfo}
+              />
+            )
+          )}
 
         {drawChk && (
           <SpottableComponent