homeBanner

com.twin.app.shoptime/src/reducers/homeReducer.js

@@ -8,11 +8,7 @@ const initialState = {
   themeCurationInfoData: {},
   themeCurationDetailInfoData: {},
   themeCurationHotelDetailData: {},
-  mainContentsData: {
-    data: {},
-    status: "idle",
-  },
-  bannerRandomNumber: 0,
+  homeTopDisplayInfo: {},
   bannerData: {
     data: {},
     status: "idle",
@@ -62,25 +58,21 @@ export const homeReducer = (state = initialState, action) => {
       };
 
     case types.GET_HOME_MAIN_CONTENTS: {
-      const bannerInfos =
-        action.payload?.homeMainContentsBannerInfos?.[0]?.bannerInfos;
-      let dataLength = 0;
-      if (bannerInfos) {
-        for (let i = 0; i < bannerInfos.length; i++) {
-          if (bannerInfos[i].shptmDspyTpNm === "Random") {
-            dataLength = bannerInfos[i].bannerDetailInfos.length;
-            break;
+      const  homeTopDisplayInfo = action.payload?.homeTopDisplayInfos?.[0] ?? {};
+      const bannerData = action.payload?.homeMainContentsBannerInfos?.[0] ?? {};
+      if(bannerData.bannerInfos){
+        for (let i = 0; i < bannerData.bannerInfos.length; i++) {
+          const info = bannerData.bannerInfos[i];
+          if (info.shptmDspyTpNm === "Random") {
+            const dataLength = info.bannerDetailInfos.length;
+            info.randomIndex = Math.floor(Math.random() * dataLength);
           }
         }
       }
-      const randomNumber = Math.floor(Math.random() * dataLength);
       return {
         ...state,
-        mainContentsData: action.payload,
-        bannerRandomNumber: randomNumber,
-        bannerData: action.payload.homeMainContentsBannerInfos
-          ? action.payload.homeMainContentsBannerInfos[0]
-          : initialState.bannerData,
+        homeTopDisplayInfo: homeTopDisplayInfo,
+        bannerData: bannerData
       };
     }
     case types.GET_THEME_CURATION_INFO:

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

@@ -149,7 +149,7 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
                   : rankOrd + "th";
               return (
                 <TItemCard
-                  key={prdtId}
+                  key={"subItem"+itemIndex}
                   imageAlt={prdtId}
                   imageSource={imgUrl}
                   priceInfo={priceInfo}

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

@@ -24,234 +24,19 @@ const ContainerBasic = SpotlightContainerDecorator(
 );
 
 export default function HomeBanner({
-  selectTemplate,
-  order,
-  firstSpot,
   spotlightId,
   handleItemFocus,
 }) {
-  const dispatch = useDispatch();
 
-  const timerRef = useRef();
+  const homeTopDisplayInfo = useSelector((state) => state.home.homeTopDisplayInfo);
 
-  const homeMainContentsBannerInfos = useSelector(
-    (state) => state.home.mainContentsData?.homeMainContentsBannerInfos
-  );
+  const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos);
 
-  const randomNumber = useSelector((state) => state.home.bannerRandomNumber);
+  const selectTemplate = useMemo(() => {
+    return homeTopDisplayInfo.shptmTmplCd;
+  }, [homeTopDisplayInfo]);
 
-  const replaceImage = useSelector(
-    (state) => state.home.mainContentsData?.homeTopDisplayInfos[0]
-  );
-
-  const bannerDataList = useSelector(
-    (state) => state.home.bannerData?.bannerInfos
-  );
-
-  const homeSpotlight = useSelector((state) => state.home.spotData?.panelInfo);
-  const { activePopup } = useSelector((state) => state.common.popup);
-
-  const startFocus = () => {
-    let bannerInfoLength = homeMainContentsBannerInfos[0].bannerInfos.length;
-    if (firstSpot === false) {
-      // 템플릿1 포커스
-      if (selectTemplate === "DSP00201") {
-        const randomIndex = randomNumber;
-
-        for (let i = 0; i < bannerInfoLength; i++) {
-          let bannerFocus =
-            homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos;
-
-          if (
-            homeMainContentsBannerInfos[0].bannerInfos[i].shptmDspyTpNm ===
-            "Random"
-          ) {
-            // 랜덤으로 선택된 배너에 포커스 설정
-            if (
-              homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
-                randomIndex
-              ].shptmBanrTpNm === "LIVE" ||
-              homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
-                randomIndex
-              ].shptmBanrTpNm === "VOD"
-            ) {
-              return Spotlight.focus("banner0" + (i + 1));
-            }
-          } else if (
-            bannerFocus.find(
-              (el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD"
-            )
-          ) {
-            return Spotlight.focus("banner0" + (i + 1));
-          }
-        }
-        return Spotlight.focus("banner01");
-      }
-      // 템플릿2 포커스
-      if (selectTemplate === "DSP00202") {
-        const randomIndex = randomNumber;
-
-        for (let i = 0; i < bannerInfoLength; i++) {
-          let bannerFocus =
-            homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos;
-
-          if (
-            homeMainContentsBannerInfos[0].bannerInfos[i].shptmDspyTpNm ===
-            "Random"
-          ) {
-            // 랜덤으로 선택된 배너에 포커스 설정
-            if (
-              homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
-                randomIndex
-              ].shptmBanrTpNm === "LIVE" ||
-              homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
-                randomIndex
-              ].shptmBanrTpNm === "VOD"
-            ) {
-              if (i == 0) {
-                return Spotlight.focus("banner03");
-              }
-              if (i == 1) {
-                return Spotlight.focus("banner01");
-              }
-              if (i == 2) {
-                return Spotlight.focus("banner02");
-              }
-              if (i == 3) {
-                return Spotlight.focus("banner04");
-              }
-            }
-          } else if (
-            bannerFocus.find(
-              (el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD"
-            )
-          ) {
-            if (i == 0) {
-              return Spotlight.focus("banner03");
-            }
-            if (i == 1) {
-              return Spotlight.focus("banner01");
-            }
-            if (i == 2) {
-              return Spotlight.focus("banner02");
-            }
-            if (i == 3) {
-              return Spotlight.focus("banner04");
-            }
-          }
-        }
-        return Spotlight.focus("banner03");
-      }
-
-      // 템플릿3 포커스
-      if (selectTemplate === "DSP00203") {
-        const randomIndex = randomNumber;
-
-        for (let i = 0; i < bannerInfoLength; i++) {
-          let bannerFocus =
-            homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos;
-
-          if (
-            homeMainContentsBannerInfos[0].bannerInfos[i].shptmDspyTpNm ===
-            "Random"
-          ) {
-            // 랜덤으로 선택된 배너에 포커스 설정
-            if (
-              homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
-                randomIndex
-              ].shptmBanrTpNm === "LIVE" ||
-              homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[
-                randomIndex
-              ].shptmBanrTpNm === "VOD"
-            ) {
-              if (i == 0) {
-                return Spotlight.focus("banner03");
-              }
-              if (i == 1) {
-                return Spotlight.focus("banner01");
-              }
-              if (i == 2) {
-                return Spotlight.focus("banner02");
-              }
-              if (i == 3) {
-                return Spotlight.focus("banner04");
-              }
-            }
-          } else if (
-            bannerFocus.find(
-              (el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD"
-            )
-          ) {
-            if (i == 0) {
-              return Spotlight.focus("banner03");
-            }
-            if (i == 1) {
-              return Spotlight.focus("banner04");
-            }
-            if (i == 2) {
-              return Spotlight.focus("banner01");
-            }
-            if (i == 3) {
-              return Spotlight.focus("banner02");
-            }
-          }
-        }
-        return Spotlight.focus("banner03");
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (!homeMainContentsBannerInfos) {
-      dispatch(getHomeMainContents());
-    }
-
-    if (
-      !activePopup &&
-      homeMainContentsBannerInfos?.length > 0 &&
-      !homeSpotlight
-    ) {
-      timerRef.current = setTimeout(() => {
-        startFocus();
-      }, 0);
-    }
-
-    return () => clearTimeout(timerRef.current);
-  }, [
-    dispatch,
-    homeMainContentsBannerInfos,
-    selectTemplate,
-    activePopup,
-    homeSpotlight,
-  ]);
-
-  const templateBanner = (index) => {
-    switch (selectTemplate) {
-      case "DSP00201":
-        return bannerDataList && bannerDataList[index];
-      case "DSP00202":
-        return index === 2
-          ? bannerDataList && bannerDataList[0]
-          : index === 3
-          ? bannerDataList && bannerDataList[3]
-          : bannerDataList && bannerDataList[index + 1];
-      case "DSP00203":
-        return index === 2
-          ? bannerDataList && bannerDataList[0]
-          : index === 3
-          ? bannerDataList && bannerDataList[1]
-          : bannerDataList && bannerDataList[index + 2];
-      default:
-        return bannerDataList && bannerDataList[index];
-    }
-  };
-
-  const firstBanner = homeMainContentsBannerInfos ? templateBanner(0) : null;
-  const secondBanner = homeMainContentsBannerInfos ? templateBanner(1) : null;
-  const thirdBanner = homeMainContentsBannerInfos ? templateBanner(2) : null;
-  const forthBanner = homeMainContentsBannerInfos ? templateBanner(3) : null;
-
-  const orderStyle = useMemo(() => ({ order }), [order]);
+  
 
   const _handleItemFocus = useCallback(() => {
     if (handleItemFocus) {
@@ -259,158 +44,90 @@ export default function HomeBanner({
     }
   }, [handleItemFocus]);
 
+  const renderItem = useCallback((index, isHorizontal)=>{
+        const data = bannerDataList?.[index] ?? {};
+        return (
+        <div className={!isHorizontal && css.imgBox}>
+          {data.shptmDspyTpNm === "Rolling" ?          
+            <Rolling
+              bannerData={data}
+              isHorizontal={isHorizontal}
+              key={"banner"+index}
+              spotlightId={"banner"+index}
+              handleItemFocus={_handleItemFocus}
+            />
+            : data.shptmDspyTpNm === "Random" ?
+            <Random
+            bannerData={data}
+            isHorizontal={isHorizontal}
+            key={"banner"+index}
+            spotlightId={"banner"+index}
+            handleItemFocus={_handleItemFocus}
+            randomNumber={data.randomIndex}
+            />
+            :
+            null
+          }
+      </div>
+      );
+  },[_handleItemFocus, bannerDataList]);
+
+  const renderLayout = useCallback(()=>{
+    switch(selectTemplate){
+      case "DSP00201":{
+        return (
+          <>
+          <ContainerBasic
+            className={css.smallBox}
+          >
+            {renderItem(0, true)}
+            {renderItem(1, true)}
+          </ContainerBasic>
+          {renderItem(2, false)}
+          {renderItem(3, false)}
+          </>
+        )
+      }
+      case "DSP00202":{
+        return (
+          <>
+          {renderItem(0, false)}
+          <ContainerBasic
+            className={css.smallBox}
+          >
+            {renderItem(1, true)}
+            {renderItem(2, true)}
+          </ContainerBasic>
+          {renderItem(3, false)}
+          </>
+        );
+      }
+      case "DSP00203":{
+        return (
+          <>
+          {renderItem(0, false)}
+          {renderItem(1, false)}
+          <ContainerBasic
+            className={css.smallBox}
+          >
+            {renderItem(2, true)}
+            {renderItem(3, true)}
+          </ContainerBasic>
+          </>
+        );
+      }
+    }
+    return null;
+  },[selectTemplate, renderItem]);
+
   return (
     <Container
       className={css.container}
       spotlightId={spotlightId}
       data-wheel-point={true}
-      style={orderStyle}
     >
       <div className={css.homeTemplateBox}>
-        <ContainerBasic
-          className={css.smallBox}
-          style={
-            selectTemplate === "DSP00201"
-              ? { order: 1 }
-              : selectTemplate === "DSP00202"
-              ? { order: 2 }
-              : { order: 3 }
-          }
-        >
-          {/* 배너1 */}
-          <div>
-            {firstBanner && firstBanner.shptmDspyTpNm === "Rolling" ? (
-              <Rolling
-                bannerData={firstBanner}
-                isHorizontal={true}
-                spotlightId={"banner01"}
-                handleItemFocus={_handleItemFocus}
-              />
-            ) : firstBanner && firstBanner.shptmDspyTpNm === "Random" ? (
-              <Random
-                bannerData={firstBanner}
-                isHorizontal={true}
-                spotlightId={"banner01"}
-                handleItemFocus={_handleItemFocus}
-                randomNumber={randomNumber}
-              />
-            ) : (
-              <SpottableComponent
-                spotlightId={"banner01"}
-              >
-                <CustomImage
-                  delay={0}
-                  src={replaceImage?.wdthtpImgPath1}
-                  aria-label={replaceImage?.wdthtpImgNm1}
-                />
-              </SpottableComponent>
-            )}
-          </div>
-
-          {/* 배너2 */}
-          <div>
-            {secondBanner && secondBanner.shptmDspyTpNm === "Rolling" ? (
-              <Rolling
-                bannerData={secondBanner}
-                isHorizontal={true}
-                spotlightId={"banner02"}
-                handleItemFocus={_handleItemFocus}
-              />
-            ) : secondBanner && secondBanner.shptmDspyTpNm === "Random" ? (
-              <Random
-                bannerData={secondBanner}
-                isHorizontal={true}
-                spotlightId={"banner02"}
-                handleItemFocus={_handleItemFocus}
-                randomNumber={randomNumber}
-              />
-            ) : (
-              <SpottableComponent
-                spotlightId={"banner02"}
-              >
-                <CustomImage
-                  delay={0}
-                  src={replaceImage?.wdthtpImgPath2}
-                  aria-label={replaceImage?.wdthtpImgNm2}
-                />
-              </SpottableComponent>
-            )}
-          </div>
-        </ContainerBasic>
-
-        {/* 배너3 */}
-        <div
-          className={css.imgBox}
-          style={
-            selectTemplate === "DSP00201"
-              ? { order: 2 }
-              : selectTemplate === "DSP00202"
-              ? { order: 1 }
-              : { order: 1 }
-          }
-        >
-          {thirdBanner && thirdBanner.shptmDspyTpNm === "Rolling" ? (
-            <Rolling
-              bannerData={thirdBanner}
-              isHorizontal={false}
-              spotlightId={"banner03"}
-              handleItemFocus={_handleItemFocus}
-            />
-          ) : thirdBanner && thirdBanner.shptmDspyTpNm === "Random" ? (
-            <Random
-              bannerData={thirdBanner}
-              isHorizontal={false}
-              spotlightId={"banner03"}
-              handleItemFocus={_handleItemFocus}
-              randomNumber={randomNumber}
-            />
-          ) : (
-            <SpottableComponent
-              spotlightId={"banner03"}
-            >
-              <CustomImage
-                delay={0}
-                src={replaceImage?.vtctpImgPath1}
-                aria-label={replaceImage?.vtctpImgPath1}
-              />
-            </SpottableComponent>
-          )}
-        </div>
-
-        {/* 배너4 */}
-        <div
-          className={css.imgBox}
-          style={
-            selectTemplate === "DSP00201"
-              ? { order: 3 }
-              : selectTemplate === "DSP00202"
-              ? { order: 3 }
-              : { order: 2 }
-          }
-        >
-          {forthBanner && forthBanner.shptmDspyTpNm === "Rolling" ? (
-            <Rolling
-              bannerData={forthBanner}
-              isHorizontal={false}
-              spotlightId={"banner04"}
-              handleItemFocus={_handleItemFocus}
-            />
-          ) : forthBanner && forthBanner.shptmDspyTpNm === "Random" ? (
-            <Random
-              bannerData={forthBanner}
-              isHorizontal={false}
-              spotlightId={"banner04"}
-              handleItemFocus={_handleItemFocus}
-              randomNumber={randomNumber}
-            />
-          ) : (
-            <SpottableComponent
-              spotlightId={"banner04"}
-            >
-              <CustomImage delay={0} src={replaceImage?.vtctpImgPath2} />
-            </SpottableComponent>
-          )}
-        </div>
+          {renderLayout()}
       </div>
     </Container>
   );

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

@@ -68,10 +68,6 @@ export default function HomePanel({ isOnTop }) {
     (state) => state.common.appStatus?.webOSVersion
   );
 
-  const homeTopDisplayInfos = useSelector(
-    (state) => state.home.mainContentsData.homeTopDisplayInfos
-  );
-
   const categoryInfos = useSelector(
     (state) => state.onSale.homeOnSaleData?.data.categoryInfos
   );
@@ -110,22 +106,16 @@ export default function HomePanel({ isOnTop }) {
 
   const sendedNowMenuRef = useRef(null);
 
-  const selectTemplate = useMemo(() => {
-    if (homeTopDisplayInfos) {
-      return homeTopDisplayInfos[0].shptmTmplCd;
-    }
-    return null;
-  }, [homeTopDisplayInfos]);
 
   const sortedHomeLayoutInfo = useMemo(() => {
-    if (selectTemplate && homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) {
+    if (homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) {
       const sorted = [...homeLayoutInfo.homeLayoutInfo].sort(
         (x, y) => x.expsOrd - y.expsOrd
       );
       return sorted;
     }
     return [];
-  }, [homeLayoutInfo, selectTemplate]);
+  }, [homeLayoutInfo]);
 
   const pageSpotIds = useMemo(() => {
     const spots = [];
@@ -169,29 +159,15 @@ export default function HomePanel({ isOnTop }) {
     Spotlight.focus(homeSpotlight?.currentSpot);
   }, [dispatch, activePopup]);
 
-  const handleTopButtonClick = () => {
+  const handleTopButtonClick = useCallback(() => {
     let spotId = "";
-
-    if (selectTemplate === "DSP00201") {
-      if (Spotlight.focus("banner01")) {
-        spotId = "banner01";
-      }
-      if (cbChangePageRef.current) {
-        cbChangePageRef.current(0, true);
-      }
-      return Spotlight.focus(spotId);
+    if (cbChangePageRef.current) {
+      cbChangePageRef.current(0, true);
     }
-
-    if (selectTemplate === "DSP00202" || selectTemplate === "DSP00203") {
-      if (Spotlight.focus("banner03")) {
-        spotId = "banner03";
-      }
-      if (cbChangePageRef.current) {
-        cbChangePageRef.current(0, true);
-      }
-      return Spotlight.focus(spotId);
+    if(sortedHomeLayoutInfo?.[0]){
+      Spotlight.focus(sortedHomeLayoutInfo[0].shptmApphmDspyOptCd);
     }
-  };
+  },[sortedHomeLayoutInfo]);
 
   const doSendLogGNB = useCallback(
     (containerId) => {
@@ -238,7 +214,6 @@ export default function HomePanel({ isOnTop }) {
                 <HomeBanner
                   key={el.shptmApphmDspyOptCd}
                   spotlightId={el.shptmApphmDspyOptCd}
-                  selectTemplate={selectTemplate}
                   firstSpot={firstSpot}
                   className={css.homeBannerWrap}
                   handleItemFocus={handleItemFocus(el.shptmApphmDspyOptCd)}
@@ -298,7 +273,6 @@ export default function HomePanel({ isOnTop }) {
     );
   }, [
     sortedHomeLayoutInfo,
-    selectTemplate,
     cateCd,
     cateNm,
     handleItemFocus,
@@ -455,33 +429,32 @@ export default function HomePanel({ isOnTop }) {
 
   return (
     <>
-      {homeLayoutInfo && homeTopDisplayInfos && (
         <TPanel className={css.panel} onCancel={onCancel}>
-          <TBody
-            spotlightId={SpotlightIds.HOME_TBODY}
-            className={css.tBody}
-            scrollable={false}
-            spotlightDisabled={!isOnTop}
-          >
-            <TVerticalPagenator
-              className={css.tVerticalPagenator}
-              spotlightId={"home_verticalPagenator"}
-              defaultContainerId={homeSpotlight?.focusedContainerId}
-              disabled={!isOnTop}
-              onScrollStatusChanged={_onScrollStatusChanged}
-              onFocusedContainerId={_onFocusedContainerId}
-              cbChangePageRef={cbChangePageRef}
-              topMargin={36}
-              onScroll={_onScroll}
+        {homeLayoutInfo && (
+            <TBody
+              spotlightId={SpotlightIds.HOME_TBODY}
+              className={css.tBody}
+              scrollable={false}
+              spotlightDisabled={!isOnTop}
             >
-              {renderPageItem()}
-            </TVerticalPagenator>
-          </TBody>
-
-          {arrowBottom && (
-            <p className={classNames(css.arrow, css.arrowBottom)} />
+              <TVerticalPagenator
+                className={css.tVerticalPagenator}
+                spotlightId={"home_verticalPagenator"}
+                defaultContainerId={homeSpotlight?.focusedContainerId}
+                disabled={!isOnTop}
+                onScrollStatusChanged={_onScrollStatusChanged}
+                onFocusedContainerId={_onFocusedContainerId}
+                cbChangePageRef={cbChangePageRef}
+                topMargin={36}
+                onScroll={_onScroll}
+              >
+                {renderPageItem()}
+              </TVerticalPagenator>
+                {arrowBottom && (
+                <p className={classNames(css.arrow, css.arrowBottom)} />
+                )}
+            </TBody>
           )}
-
           {activePopup === ACTIVE_POPUP.exitPopup && (
             <TPopUp
               kind="exitPopup"
@@ -499,7 +472,6 @@ export default function HomePanel({ isOnTop }) {
           {(activePopup === ACTIVE_POPUP.eventPopup ||
             activePopup === ACTIVE_POPUP.smsPopup) && <EventPopUpBanner />}
         </TPanel>
-      )}
     </>
   );
 }

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

@@ -265,7 +265,7 @@ const SubCategory = ({
               ) => {
                 return (
                   <TItemCard
-                    key={prdtId}
+                    key={"subItem"+itemIndex}
                     imageAlt={prdtId}
                     imageSource={imgUrl}
                     priceInfo={priceInfo}