[FeaturedBrandsPanel] edited, display condition(TopButton)

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx

@@ -221,6 +221,7 @@ export default function FeaturedBrandsPanel({
     (state) => state.brand.brandShowroomData.data.brandShowroomInfo
   );
 
+  const [displayTopButton, setDisplayTopButton] = useState(false);
   const [firstFocusableTargetId, setFirstFocusableTargetId] = useState(null);
   const [isInitialFocusOccurred, setIsInitialFocusOccurred] = useState(false);
   const [isInitialRendered, setIsInitialRendered] = useState(true);
@@ -242,6 +243,7 @@ export default function FeaturedBrandsPanel({
   const initialFocusTimeoutJob = useRef(new Job((func) => func(), 100));
   const alamTimer = useRef(null);
   const cbChangePageRef = useRef(null);
+  const orderableFlexContainerRef = useRef(null);
 
   const previousPanelIsDetail = Object.keys(panelInfo).length >= 6;
   const previousActionOccurredInGNB =
@@ -433,6 +435,27 @@ export default function FeaturedBrandsPanel({
     previousPanelIsDetail,
   ]);
 
+  useEffect(() => {
+    let timer;
+
+    if (brandLayoutInfo) {
+      setDisplayTopButton(false);
+
+      timer = setTimeout(() => {
+        const orderableFlexContainer = orderableFlexContainerRef.current;
+
+        if (
+          orderableFlexContainer &&
+          orderableFlexContainer?.children.length > 1
+        ) {
+          setDisplayTopButton(true);
+        }
+      }, 100);
+    }
+
+    return () => clearTimeout(timer);
+  }, [brandLayoutInfo]);
+
   useEffect(() => {
     if (isInitialFocusOccurred && selectedPatnrId && selectedPatncNm) {
       sendLogPartners({
@@ -594,7 +617,7 @@ export default function FeaturedBrandsPanel({
         {
           <TVerticalPagenator
             className={css.tVerticalPagenator}
-            spotlightId={"brand_verticalPagenator"}
+            spotlightId="brand_verticalPagenator"
             // enableFocusAction={false}
             defaultContainerId={panelInfo?.focusedContainerId}
             onFocusedContainerId={onFocusedContainerId}
@@ -619,7 +642,10 @@ export default function FeaturedBrandsPanel({
             )}
 
             {brandLayoutInfo && (
-              <div className={css.orderableFlexContainer}>
+              <div
+                className={css.orderableFlexContainer}
+                ref={orderableFlexContainerRef}
+              >
                 {hasTemplateCodeWithValue(
                   brandLayoutInfo,
                   TEMPLATE_CODE_CONF.LIVE_CHANNELS
@@ -799,7 +825,7 @@ export default function FeaturedBrandsPanel({
               </div>
             )}
 
-            {isInitialFocusOccurred && (
+            {displayTopButton && (
               <TButton
                 className={css.tButton}
                 onClick={handleTopButtonClick}