[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 = () => {
             />
           ))}
 
+        {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,7 +40,8 @@ const PopularShow = ({ ...rest }) => {
         noScrollByWheel
       >
         {topInfos &&
-          topInfos.map((item, index) => (
+          topInfos.map((item, index) => {
+            return (
               <TItemCard
                 key={item.showId}
                 imageSource={
@@ -53,9 +56,12 @@ const PopularShow = ({ ...rest }) => {
                 onFocus={index === 0 ? handleScrollReset : null}
                 onBlur={handleStopScrolling}
               />
-          ))}
+            );
+          })}
 
+        {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 = () => {
             );
           })}
 
+        {drawChk && (
           <SpottableComponent className={css.addItem}></SpottableComponent>
+        )}
       </TScroller>
     </Container>
   );