[HomePanel] 더보기 버튼 포커싱 관련 처리건

- 정보들어올때 그려주는식으로 변경.

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import { useSelector } from "react-redux";
 
@@ -23,11 +23,15 @@ const BestSeller = () => {
   const bestSellerDatas = useSelector(
     (state) => state.product.bestSellerData.bestSeller
   );
+  const [drawChk, setDrawChk] = useState(false);
   const { getScrollTo, scrollLeft } = useScrollTo();
   const { handleScrollReset, handleStopScrolling } = useScrollReset(
     scrollLeft,
     true
   );
+  useEffect(() => {
+    setDrawChk(true);
+  }, [bestSellerDatas]);
   return (
     <Container className={css.bestSellerWrap}>
       <SectionTitle title={$L(`BEST SELLER`)} />
@@ -53,7 +57,9 @@ const BestSeller = () => {
             />
           ))}
 
-        <SpottableComponent className={css.addItem}></SpottableComponent>
+        {drawChk && (
+          <SpottableComponent className={css.addItem}></SpottableComponent>
+        )}
       </TScroller>
     </Container>
   );

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import { useSelector } from "react-redux";
 
@@ -21,13 +21,15 @@ const Container = SpotlightContainerDecorator(
 
 const PopularShow = ({ ...rest }) => {
   const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
-
+  const [drawChk, setDrawChk] = useState(false);
   const { getScrollTo, scrollLeft } = useScrollTo();
   const { handleScrollReset, handleStopScrolling } = useScrollReset(
     scrollLeft,
     true
   );
-
+  useEffect(() => {
+    setDrawChk(true);
+  }, [topInfos]);
   return (
     <Container className={css.popularShow}>
       <SectionTitle className={css.subTitle} title={$L(`POPULAR SHOW`)} />
@@ -38,24 +40,28 @@ const PopularShow = ({ ...rest }) => {
         noScrollByWheel
       >
         {topInfos &&
-          topInfos.map((item, index) => (
+          topInfos.map((item, index) => {
-            <TItemCard
+            return (
-              key={item.showId}
+              <TItemCard
-              imageSource={
+                key={item.showId}
-                item.thumbnailUrl !== item.thumbnailUrl960
+                imageSource={
-                  ? item.thumbnailUrl960
+                  item.thumbnailUrl !== item.thumbnailUrl960
-                  : item.thumbnailUrl
+                    ? item.thumbnailUrl960
-              }
+                    : item.thumbnailUrl
-              imageAlt={item.showNm}
+                }
-              productName={item.showNm}
+                imageAlt={item.showNm}
-              nonPosition={true}
+                productName={item.showNm}
-              type={TYPES.videoShow}
+                nonPosition={true}
-              onFocus={index === 0 ? handleScrollReset : null}
+                type={TYPES.videoShow}
-              onBlur={handleStopScrolling}
+                onFocus={index === 0 ? handleScrollReset : null}
-            />
+                onBlur={handleStopScrolling}
-          ))}
+              />
+            );
+          })}
 
-        <SpottableComponent className={css.addItem}></SpottableComponent>
+        {drawChk && (
+          <SpottableComponent className={css.addItem}></SpottableComponent>
+        )}
       </TScroller>
     </Container>
   );

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

@@ -31,7 +31,7 @@ const SubCategory = () => {
     (state) => state.main.subCategoryData.categoryItemInfos
   );
   const [currentLgCatCd, setCurrentLgCatCd] = useState(null);
-
+  const [drawChk, setDrawChk] = useState(false);
   const handleCategoryNav = (lgCatCd, LgCatNm) => {
     if (currentLgCatCd === lgCatCd) {
       return;
@@ -66,6 +66,7 @@ const SubCategory = () => {
           false
         )
       );
+      setDrawChk(true);
     }
   }, [currentLgCatCd, dispatch]);
 
@@ -81,7 +82,6 @@ const SubCategory = () => {
         className={css.home}
         direction="horizontal"
         cbScrollTo={getScrollTo}
-        noScrollByWheel
       >
         {categoryItemInfos &&
           categoryItemInfos.map((item, index) => {
@@ -99,7 +99,9 @@ const SubCategory = () => {
             );
           })}
 
-        <SpottableComponent className={css.addItem}></SpottableComponent>
+        {drawChk && (
+          <SpottableComponent className={css.addItem}></SpottableComponent>
+        )}
       </TScroller>
     </Container>
   );