homepanel spot

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

@@ -24,6 +24,7 @@ const ContainerBasic = SpotlightContainerDecorator(
 );
 
 export default function HomeBanner({
+  firstSpot,
   spotlightId,
   handleItemFocus,
 }) {
@@ -36,7 +37,6 @@ export default function HomeBanner({
     return homeTopDisplayInfo.shptmTmplCd;
   }, [homeTopDisplayInfo]);
 
-  
 
   const _handleItemFocus = useCallback(() => {
     if (handleItemFocus) {
@@ -44,11 +44,42 @@ export default function HomeBanner({
     }
   }, [handleItemFocus]);
 
+  const defaultFocus = useMemo(()=>{
+    if(bannerDataList){
+      let targetIndex = 0;
+      for(let i=0; i<bannerDataList.length; i++){
+        const data = bannerDataList[i];
+        let bannerDetailInfos = data.bannerDetailInfos;
+
+        if(data.shptmDspyTpNm === 'Random'){
+          if( bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "LIVE" ||
+          bannerDetailInfos[data.randomIndex].shptmBanrTpNm === "VOD"){
+            targetIndex = i;
+            break;
+          }
+        }else if(bannerDetailInfos.find( (el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD")){
+          targetIndex = i;
+          break;
+        }
+      }
+      return "banner"+targetIndex;
+    }
+    return null;
+  },[bannerDataList]);
+
+  useEffect(()=>{
+    if(firstSpot && defaultFocus){
+      setTimeout(() => {
+        Spotlight.focus(defaultFocus)
+      }, 0);
+    }
+  },[defaultFocus]);
+
   const renderItem = useCallback((index, isHorizontal)=>{
         const data = bannerDataList?.[index] ?? {};
         return (
         <div className={!isHorizontal && css.imgBox}>
-          {data.shptmDspyTpNm === "Rolling" ?          
+          {data.shptmDspyTpNm === "Rolling" ?
             <Rolling
               bannerData={data}
               isHorizontal={isHorizontal}