[HomePanel]홈배너 부분 디자인수정

- css 수정입니다.
2024-02-05 14:22:43 +09:00
parent d212c318fc
commit a61479e773
5 changed files with 293 additions and 240 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
@@ -1,15 +1,18 @@
 import React, { useCallback, useEffect, useState } from "react";

-import { Job } from "@enact/core/util";
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import classNames from "classnames";
 import { shallowEqual, useDispatch, useSelector } from "react-redux";
-import Spotlight from "@enact/spotlight";
+
+import { Job } from "@enact/core/util";
 import Marquee from "@enact/sandstone/Marquee";
+import Spotlight from "@enact/spotlight";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
+
 import CustomImage from "../../../components/CustomImage/CustomImage";
-import css from "./Template.module.less";
 import Random from "./RandomUnit";
 import Rolling from "./RollingUnit";
+import css from "./Template.module.less";

 const SpottableComponent = Spottable("div");

@@ -20,7 +23,15 @@ const Container = SpotlightContainerDecorator(
  "div"
 );

-export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest }) {
+export default function HomeBannerTemplate1({
+  isOnTop,
+  spotlightId,
+  onScrollTop,
+  onScrollShelf,
+  homeMainContentsBannerInfos,
+  homeTopDisplayInfos,
+  ...rest
+}) {
  const dispatch = useDispatch();
  const [bannerImageLoaded, setBannerImageLoaded] = useState(false);

@@ -40,45 +51,46 @@ export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop
  const replaceBannerVtctp = useCallback(() => {
    let imgPath = "";

-    if(homeTopDisplayInfos[0].vtctpImgPath1 == "" || homeTopDisplayInfos[0].vtctpImgPath1 == null){
+    if (
+      homeTopDisplayInfos[0].vtctpImgPath1 == "" ||
+      homeTopDisplayInfos[0].vtctpImgPath1 == null
+    ) {
      imgPath = homeTopDisplayInfos[0].vtctpImgPath2;
-    }else{
+    } else {
      imgPath = homeTopDisplayInfos[0].vtctpImgPath1;
    }
-      return imgPath;
-  },[]);
+    return imgPath;
+  }, []);

  // 배너가 없는 경우, 대체용 배너 [수평]
  const replaceBannerWdth = useCallback(() => {
    let imgPath = "";

-    if(homeTopDisplayInfos[0].wdthtpImgPath1 == "" || homeTopDisplayInfos[0].wdthtpImgPath1 == null){
+    if (
+      homeTopDisplayInfos[0].wdthtpImgPath1 == "" ||
+      homeTopDisplayInfos[0].wdthtpImgPath1 == null
+    ) {
      imgPath = homeTopDisplayInfos[0].wdthtpImgPath2;
-    }else{
+    } else {
      imgPath = homeTopDisplayInfos[0].wdthtpImgPath1;
    }
-      return imgPath;
-  },[]);
-
-  const onClickBanner = useCallback(() => {
-
+    return imgPath;
  }, []);

+  const onClickBanner = useCallback(() => {}, []);
+
  useEffect(() => {
    bannerInfos.forEach((el, index) => {
-      if(el.banrLctnNo == "1"){
+      if (el.banrLctnNo == "1") {
        setBaner1Data(el);
        setBaner1Index(index);
-      }
-      else if(el.banrLctnNo == "2"){
+      } else if (el.banrLctnNo == "2") {
        setBaner2Data(el);
        setBaner2Index(index);
-      }
-      else if(el.banrLctnNo == "3"){
+      } else if (el.banrLctnNo == "3") {
        setBaner3Data(el);
        setBaner3Index(index);
-      }
-      else if(el.banrLctnNo == "4"){
+      } else if (el.banrLctnNo == "4") {
        setBaner4Data(el);
        setBaner4Index(index);
      }
@@ -90,47 +102,36 @@ export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop
  return (
    <Container className={(css.container, css.homeTemplateBox)}>
      <SpottableComponent>
-        <div className={css.leftBannerBox}>
+        <div className={classNames(css.leftBannerBox, css.dualBox)}>
          {/* 배너1 */}
          {baner1Data.shptmDspyTpNm == "Rolling" ? (
-            <Rolling
-              banerData={baner2Data}
-            />
-            ) : baner1Data.shptmDspyTpNm == "Random" ? (
-              <Random
-                banerData={baner3Data}
-              />
-            ) :
+            <Rolling banerData={baner2Data} className={css.topBox} />
+          ) : baner1Data.shptmDspyTpNm == "Random" ? (
+            <Random banerData={baner3Data} className={css.topBox} />
+          ) : (
            <CustomImage
-              className={""}
              delay={0}
              onClickBanner={onClickBanner}
              onImageLoaded={""}
              src={replaceBannerWdth}
              hide={""}
+              className={css.topBox}
            />
-          }
+          )}
          {/* 배너2 롤링 테스트 진행중 */}
          {baner2Data.shptmDspyTpNm == "Rolling" ? (
-            <Random
-              banerData={baner2Data}
-            />
-            ) : null
-          }
+            <Random banerData={baner2Data} className={css.underBox} />
+          ) : null}
        </div>
      </SpottableComponent>

      <div className={css.bannerFlexRow}>
        {/* 배너3 */}
        {baner3Data.shptmDspyTpNm == "Rolling" ? (
-            <Rolling
-              banerData={baner3Data}
-            />
-          ) : baner3Data.shptmDspyTpNm == "Random" ? (
-            <Random
-              banerData={baner3Data}
-            />
-          ) :
+          <Rolling banerData={baner3Data} />
+        ) : baner3Data.shptmDspyTpNm == "Random" ? (
+          <Random banerData={baner3Data} />
+        ) : (
          <SpottableComponent>
            <CustomImage
              className={css.banner03}
@@ -141,32 +142,28 @@ export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop
              hide={""}
            />
          </SpottableComponent>
-       }
+        )}

-      {/* 배너4 */}
-      {baner4Data.shptmDspyTpNm == "Rolling" ? (
-        <SpottableComponent>
-          <Rolling
-            banerData={baner4Data}
-          />
-        </SpottableComponent>    
+        {/* 배너4 */}
+        {baner4Data.shptmDspyTpNm == "Rolling" ? (
+          <SpottableComponent>
+            <Rolling banerData={baner4Data} />
+          </SpottableComponent>
        ) : baner4Data.shptmDspyTpNm == "Random" ? (
-          <Random
-            banerData={baner4Data}
-          />
-        ) :
-        <SpottableComponent>
-          <CustomImage
-            className={css.banner03}
-            delay={0}
-            onClickBanner={onClickBanner}
-            onImageLoaded={""}
-            src={replaceBannerVtctp}
-            hide={""}
-          />
-        </SpottableComponent>
-      }
+          <Random banerData={baner4Data} />
+        ) : (
+          <SpottableComponent>
+            <CustomImage
+              className={css.banner03}
+              delay={0}
+              onClickBanner={onClickBanner}
+              onImageLoaded={""}
+              src={replaceBannerVtctp}
+              hide={""}
+            />
+          </SpottableComponent>
+        )}
      </div>
    </Container>
  );
-}
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
@@ -1,12 +1,58 @@
-import React, {useCallback, useEffect, useState, useMemo,useRef ,memo} from "react";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";

-export default function HomeBannerTemplate2 ({isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest}) {
+import classNames from "classnames";

-    useEffect(() => {
+import Spotlight from "@enact/spotlight";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";

-    }, [])
+import testimg from "../../../../assets/h430054.webp";
+import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
+import banner4 from "../../../../assets/Image/img-home-banner-v-02.png";
+import banner3 from "../../../../assets/images/mainTemplate/img-home-banner-td-ver.svg";
+import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
+import css from "./Template.module.less";

-    return(
-        <p>템플릿2</p>
-    )
-}
+const SpottableComponent = Spottable("div");
+
+const Container = SpotlightContainerDecorator(
+  {
+    enterTo: "default-element",
+  },
+  "div"
+);
+export default function HomeBannerTemplate2({
+  isOnTop,
+  spotlightId,
+  onScrollTop,
+  onScrollShelf,
+  homeMainContentsBannerInfos,
+  homeTopDisplayInfos,
+  ...rest
+}) {
+  return (
+    <Container className={css.homeTemplateBox}>
+      <SpottableComponent className={css.banner03}>
+        <img src={banner4} />
+      </SpottableComponent>
+      <SpottableComponent className={classNames(css.leftBox, css.dualBox)}>
+        <div className={classNames(css.topBox, css.videoBox)}>
+          <img src={banner2} />
+        </div>
+        <div className={classNames(css.underBox, css.videoBox)}>
+          <img src={banner2} />
+        </div>
+      </SpottableComponent>
+      <SpottableComponent className={css.banner03}>
+        <img src={banner4} />
+      </SpottableComponent>
+    </Container>
+  );
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
@@ -1,21 +1,23 @@
 import React, { useCallback, useEffect, useState } from "react";

+import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";
+
 import { Job } from "@enact/core/util";
+import Marquee from "@enact/sandstone/Marquee";
+import Spotlight from "@enact/spotlight";
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
-import Spotlight from "@enact/spotlight";
-import { useDispatch, useSelector } from "react-redux";
-import Marquee from "@enact/sandstone/Marquee";
-import CustomImage from "../../../components/CustomImage/CustomImage";
-import css from "./Template.module.less";
-import Random from "./RandomUnit";
-import Rolling from "./RollingUnit";

 import testimg from "../../../../assets/h430054.webp";
 import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
 import banner4 from "../../../../assets/Image/img-home-banner-v-02.png";
 import banner3 from "../../../../assets/images/mainTemplate/img-home-banner-td-ver.svg";
+import CustomImage from "../../../components/CustomImage/CustomImage";
 import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
+import Random from "./RandomUnit";
+import Rolling from "./RollingUnit";
+import css from "./Template.module.less";

 const SpottableComponent = Spottable("div");

@@ -26,7 +28,15 @@ const Container = SpotlightContainerDecorator(
  "div"
 );

-export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest }) {
+export default function HomeBannerTemplate3({
+  isOnTop,
+  spotlightId,
+  onScrollTop,
+  onScrollShelf,
+  homeMainContentsBannerInfos,
+  homeTopDisplayInfos,
+  ...rest
+}) {
  const dispatch = useDispatch();
  const [bannerImageLoaded, setBannerImageLoaded] = useState(false);

@@ -46,45 +56,46 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
  const replaceBannerVtctp = useCallback(() => {
    let imgPath = "";

-    if(homeTopDisplayInfos[0].vtctpImgPath1 == "" || homeTopDisplayInfos[0].vtctpImgPath1 == null){
+    if (
+      homeTopDisplayInfos[0].vtctpImgPath1 == "" ||
+      homeTopDisplayInfos[0].vtctpImgPath1 == null
+    ) {
      imgPath = homeTopDisplayInfos[0].vtctpImgPath2;
-    }else{
+    } else {
      imgPath = homeTopDisplayInfos[0].vtctpImgPath1;
    }
-      return imgPath;
-  },[]);
+    return imgPath;
+  }, []);

  // 배너가 없는 경우, 대체용 배너 [수직]
  const replaceBannerWdth = useCallback(() => {
    let imgPath = "";

-    if(homeTopDisplayInfos[0].wdthtpImgPath1 == "" || homeTopDisplayInfos[0].wdthtpImgPath1 == null){
+    if (
+      homeTopDisplayInfos[0].wdthtpImgPath1 == "" ||
+      homeTopDisplayInfos[0].wdthtpImgPath1 == null
+    ) {
      imgPath = homeTopDisplayInfos[0].wdthtpImgPath2;
-    }else{
+    } else {
      imgPath = homeTopDisplayInfos[0].wdthtpImgPath1;
    }
-      return imgPath;
-  },[]);
-
-  const onClickBanner = useCallback(() => {
-
+    return imgPath;
  }, []);

+  const onClickBanner = useCallback(() => {}, []);
+
  useEffect(() => {
    bannerInfos.forEach((el, index) => {
-      if(el.banrLctnNo == "1"){
+      if (el.banrLctnNo == "1") {
        setBaner1Data(el);
        setBaner1Index(index);
-      }
-      else if(el.banrLctnNo == "2"){
+      } else if (el.banrLctnNo == "2") {
        setBaner2Data(el);
        setBaner2Index(index);
-      }
-      else if(el.banrLctnNo == "3"){        
+      } else if (el.banrLctnNo == "3") {
        setBaner3Data(el);
        setBaner3Index(index);
-      }
-      else if(el.banrLctnNo == "4"){
+      } else if (el.banrLctnNo == "4") {
        setBaner4Data(el);
        setBaner4Index(index);
      }
@@ -93,20 +104,16 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
    console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
    console.log(homeTopDisplayInfos, "탑디스");
  }, [homeMainContentsBannerInfos]);
-  
+
  return (
    <Container className={css.homeTemplateBox}>
      <div class={css.mainBox}>
        <SpottableComponent className={css.imgBox}>
          {baner1Data.shptmDspyTpNm == "Rolling" ? (
-            <Rolling
-              banerData={baner1Data}
-            />
-            ) : baner1Data.shptmDspyTpNm == "Random" ? (
-              <Random
-                banerData={baner1Data}
-              />
-            ) :
+            <Rolling banerData={baner1Data} />
+          ) : baner1Data.shptmDspyTpNm == "Random" ? (
+            <Random banerData={baner1Data} />
+          ) : (
            <CustomImage
              className={""}
              delay={0}
@@ -115,12 +122,12 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
              src={replaceBannerVtctp}
              hide={""}
            />
-          }
+          )}
        </SpottableComponent>

        <SpottableComponent className={css.imgBox}>
          {baner2Data.shptmDspyTpNm == "Rolling" ? (
-             // 롤링으로 변경하기 구현 준비 중 
+            // 롤링으로 변경하기 구현 준비 중
            <CustomImage
              className={""}
              delay={0}
@@ -130,65 +137,57 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
              hide={""}
            />
          ) : baner2Data.shptmDspyTpNm == "Random" ? (
-            <Random
-              banerData={baner2Data}
+            <Random banerData={baner2Data} />
+          ) : (
+            <CustomImage
+              className={""}
+              delay={0}
+              onClickBanner={onClickBanner}
+              onImageLoaded={""}
+              src={replaceBannerVtctp}
+              hide={""}
            />
-          ) :
-          <CustomImage
-            className={""}
-            delay={0}
-            onClickBanner={onClickBanner}
-            onImageLoaded={""}
-            src={replaceBannerVtctp}
-            hide={""}
-          />
-         }
+          )}
        </SpottableComponent>

        <div className={css.dualBox}>
-          <SpottableComponent className={css.videoBox}>
+          <SpottableComponent className={classNames(css.videoBox, css.topBox)}>
            {baner3Data.shptmDspyTpNm == "Rolling" ? (
-                <Rolling
-                  banerData={baner3Data}
-                />
-              ) : baner3Data.shptmDspyTpNm == "Random" ? (
-                <Random
-                  banerData={baner3Data}
-                />
-              ) :
+              <Rolling banerData={baner3Data} />
+            ) : baner3Data.shptmDspyTpNm == "Random" ? (
+              <Random banerData={baner3Data} />
+            ) : (
              <CustomImage
-                  className={""}
-                  delay={0}
-                  onClickBanner={onClickBanner}
-                  onImageLoaded={""}
-                  src={replaceBannerWdth}
-                  hide={""}
+                className={""}
+                delay={0}
+                onClickBanner={onClickBanner}
+                onImageLoaded={""}
+                src={replaceBannerWdth}
+                hide={""}
              />
-            }
+            )}
          </SpottableComponent>

-          <SpottableComponent className={css.slideBox}>
+          <SpottableComponent
+            className={classNames(css.videoBox, css.underBox)}
+          >
            {baner4Data.shptmDspyTpNm == "Rolling" ? (
-                <Rolling
-                  banerData={baner4Data}
-                />
-              ) : baner4Data.shptmDspyTpNm == "Random" ? (
-                <Random
-                  banerData={baner4Data}
-                />
-              ) :
+              <Rolling banerData={baner4Data} />
+            ) : baner4Data.shptmDspyTpNm == "Random" ? (
+              <Random banerData={baner4Data} />
+            ) : (
              <CustomImage
-                  className={""}
-                  delay={0}
-                  onClickBanner={onClickBanner}
-                  onImageLoaded={""}
-                  src={replaceBannerWdth}
-                  hide={""}
+                className={""}
+                delay={0}
+                onClickBanner={onClickBanner}
+                onImageLoaded={""}
+                src={replaceBannerWdth}
+                hide={""}
              />
-            }
+            )}
          </SpottableComponent>
        </div>
      </div>
    </Container>
  );
-}
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less
@@ -13,6 +13,41 @@
  width: 744px;
  height: 858px;
  margin-right: 18px;
+  &.dualBox {
+    .topBox {
+      width: 744px;
+      height: 420px;
+
+      margin-bottom: 18px;
+      border: 4px solid transparent;
+      border-radius: 12px;
+      &:focus,
+      &:hover,
+      &:focus-within,
+      &:active {
+        border: 4px solid @PRIMARY_COLOR_RED;
+        box-sizing: border-box;
+        .focusDropShadow();
+        border-radius: 12px;
+      }
+    }
+    .underBox {
+      width: 744px;
+      height: 420px;
+
+      border: 4px solid transparent;
+      border-radius: 12px;
+      &:focus,
+      &:hover,
+      &:focus-within,
+      &:active {
+        border: 4px solid @PRIMARY_COLOR_RED;
+        box-sizing: border-box;
+        .focusDropShadow();
+        border-radius: 12px;
+      }
+    }
+  }
 }
 .videoBox {
  width: 744px;
@@ -26,6 +61,7 @@
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
    .focusDropShadow();
+    border-radius: 12px;
  }
  .videoPlayer {
    width: 744px;
@@ -48,6 +84,7 @@
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
    .focusDropShadow();
+    border-radius: 12px;
  }
 }

@@ -80,6 +117,7 @@
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
    .focusDropShadow();
+    border-radius: 12px;
  }
 }

@@ -119,9 +157,12 @@
  display: flex;
 }

-img {
+img,
+video {
  width: 100%;
-  object-fit: contain;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 12px;
 }

 .mainBox {
@@ -141,44 +182,11 @@ img {
      border: 4px solid @PRIMARY_COLOR_RED;
      box-sizing: border-box;
      .focusDropShadow();
+      border-radius: 12px;
    }
    img {
      width: 100%;
      object-fit: contain;
    }
  }
-
-  .dualBox {
-    .videoBox {
-      width: 744px;
-      height: 420px;
-      background: chocolate;
-      margin-bottom: 18px;
-      border: 4px solid transparent;
-      border-radius: 12px;
-      &:focus,
-      &:hover,
-      &:focus-within,
-      &:active {
-        border: 4px solid @PRIMARY_COLOR_RED;
-        box-sizing: border-box;
-        .focusDropShadow();
-      }
-    }
-    .slideBox {
-      width: 744px;
-      height: 420px;
-      background: skyblue;
-      border: 4px solid transparent;
-      border-radius: 12px;
-      &:focus,
-      &:hover,
-      &:focus-within,
-      &:active {
-        border: 4px solid @PRIMARY_COLOR_RED;
-        box-sizing: border-box;
-        .focusDropShadow();
-      }
-    }
-  }
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
@@ -1,16 +1,16 @@
-import React, {useCallback, useEffect, useState} from "react";
+import React, { useCallback, useEffect, useState } from "react";

 import { useDispatch, useSelector } from "react-redux";

 import TPanel from "../../components/TPanel/TPanel";
 import BestSeller from "../HomePanel/BestSeller/BestSeller";
+import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
+import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
+import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";
 import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
 import css from "../HomePanel/HomePanel.module.less";
 import PopularShow from "../HomePanel/PopularShow/PopularShow";
 import SubCategory from "../HomePanel/SubCategory/SubCategory";
-import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
-import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
-import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";

 export default function HomePanel() {
  const dispatch = useDispatch();
@@ -25,74 +25,77 @@ export default function HomePanel() {
  const [select, setSelect] = useState(null);
  const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
  // 추후 스위치 select 로 변경 : 스팟라이트 테스트 중
-  const selectSwitch = () =>{
-    switch ("DSP00203") {
+  const selectSwitch = () => {
+    switch ("DSP00201") {
      case "DSP00201":
-        return(
+        return (
          <HomeBannerTemplate1
-            isOnTop={""} 
-            spotlightId={""} 
-            onScrollTop={""} 
+            isOnTop={""}
+            spotlightId={""}
+            onScrollTop={""}
            onScrollShelf={""}
            homeMainContentsBannerInfos={homeMainContentsBannerInfos}
            homeTopDisplayInfos={homeTopDisplayInfos}
-        />
-        )
+          />
+        );
      case "DSP00202":
-        return(
+        return (
          <HomeBannerTemplate2
-            isOnTop={""} 
-            spotlightId={""} 
-            onScrollTop={""} 
+            isOnTop={""}
+            spotlightId={""}
+            onScrollTop={""}
            onScrollShelf={""}
            homeMainContentsBannerInfos={homeMainContentsBannerInfos}
            homeTopDisplayInfos={homeTopDisplayInfos}
          />
-        )
+        );
      case "DSP00203":
-        return(
+        return (
          <HomeBannerTemplate3
-            isOnTop={""} 
-            spotlightId={""} 
-            onScrollTop={""} 
+            isOnTop={""}
+            spotlightId={""}
+            onScrollTop={""}
            onScrollShelf={""}
            homeMainContentsBannerInfos={homeMainContentsBannerInfos}
            homeTopDisplayInfos={homeTopDisplayInfos}
          />
-        )
+        );
      default:
        return null;
    }
-  }
+  };

  useEffect(() => {
-    if(homeTopDisplayInfos){
+    if (homeTopDisplayInfos) {
      setSelect(homeTopDisplayInfos[0].shptmTmplCd);
    }
-    if(homeLayoutInfo){
+    if (homeLayoutInfo) {
      setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo);
    }
    selectSwitch();
-  }, [homeTopDisplayInfos, homeMainContentsBannerInfos, homeLayoutInfo, select]);
+  }, [
+    homeTopDisplayInfos,
+    homeMainContentsBannerInfos,
+    homeLayoutInfo,
+    select,
+  ]);

  return (
    <TPanel className={css.panelDesign}>
-    {homeLayoutInfoDetail &&
-      homeLayoutInfoDetail.map((item, index)=> {
-      return(
-        item.shptmApphmDspyOptCd == "DSP00101" ? (
-        selectSwitch()
-      ) : item.shptmApphmDspyOptCd == "DSP00102" ? (
-        <SubCategory />
-      ) : item.shptmApphmDspyOptCd == "DSP00105" ? (
-        <BestSeller />
-      ) : item.shptmApphmDspyOptCd == "DSP00103" ? (
-        <HomeOnSale />
-      ) : item.shptmApphmDspyOptCd == "DSP00104" ? (
-        <PopularShow />
-      ) : null
-      )})
-    }
+      {homeLayoutInfoDetail &&
+        homeLayoutInfoDetail.map((item, index) => {
+          return item.shptmApphmDspyOptCd == "DSP00101" ? (
+            selectSwitch()
+          ) : item.shptmApphmDspyOptCd == "DSP00102" ? (
+            <SubCategory />
+          ) : item.shptmApphmDspyOptCd == "DSP00105" ? (
+            <BestSeller />
+          ) : item.shptmApphmDspyOptCd == "DSP00103" ? (
+            <HomeOnSale />
+          ) : item.shptmApphmDspyOptCd == "DSP00104" ? (
+            <PopularShow />
+          ) : null;
+        })}
    </TPanel>
  );
-}
+}