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

- css 수정입니다.

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 classNames from "classnames";
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 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;
-  },[]);
+  }, []);
 
   // 배너가 없는 경우, 대체용 배너 [수평]
   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(() => {
-
   }, []);
 
+  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
+            <Rolling banerData={baner2Data} className={css.topBox} />
-              banerData={baner2Data}
-            />
           ) : baner1Data.shptmDspyTpNm == "Random" ? (
-              <Random
+            <Random banerData={baner3Data} className={css.topBox} />
-                banerData={baner3Data}
+          ) : (
-              />
-            ) :
             <CustomImage
-              className={""}
               delay={0}
               onClickBanner={onClickBanner}
               onImageLoaded={""}
               src={replaceBannerWdth}
               hide={""}
+              className={css.topBox}
             />
-          }
+          )}
           {/* 배너2 롤링 테스트 진행중 */}
           {baner2Data.shptmDspyTpNm == "Rolling" ? (
-            <Random
+            <Random banerData={baner2Data} className={css.underBox} />
-              banerData={baner2Data}
+          ) : null}
-            />
-            ) : null
-          }
         </div>
       </SpottableComponent>
 
       <div className={css.bannerFlexRow}>
         {/* 배너3 */}
         {baner3Data.shptmDspyTpNm == "Rolling" ? (
-            <Rolling
+          <Rolling banerData={baner3Data} />
-              banerData={baner3Data}
-            />
         ) : baner3Data.shptmDspyTpNm == "Random" ? (
-            <Random
+          <Random banerData={baner3Data} />
-              banerData={baner3Data}
+        ) : (
-            />
-          ) :
           <SpottableComponent>
             <CustomImage
               className={css.banner03}
@@ -141,20 +142,16 @@ export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop
               hide={""}
             />
           </SpottableComponent>
-       }
+        )}
 
         {/* 배너4 */}
         {baner4Data.shptmDspyTpNm == "Rolling" ? (
           <SpottableComponent>
-          <Rolling
+            <Rolling banerData={baner4Data} />
-            banerData={baner4Data}
-          />
           </SpottableComponent>
         ) : baner4Data.shptmDspyTpNm == "Random" ? (
-          <Random
+          <Random banerData={baner4Data} />
-            banerData={baner4Data}
+        ) : (
-          />
-        ) :
           <SpottableComponent>
             <CustomImage
               className={css.banner03}
@@ -165,7 +162,7 @@ export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop
               hide={""}
             />
           </SpottableComponent>
-      }
+        )}
       </div>
     </Container>
   );

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(
+const SpottableComponent = Spottable("div");
-        <p>템플릿2</p>
+
-    )
+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>
+  );
 }

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;
-  },[]);
+  }, []);
 
   // 배너가 없는 경우, 대체용 배너 [수직]
   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(() => {
-
   }, []);
 
+  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);
       }
@@ -99,14 +110,10 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
       <div class={css.mainBox}>
         <SpottableComponent className={css.imgBox}>
           {baner1Data.shptmDspyTpNm == "Rolling" ? (
-            <Rolling
+            <Rolling banerData={baner1Data} />
-              banerData={baner1Data}
-            />
           ) : baner1Data.shptmDspyTpNm == "Random" ? (
-              <Random
+            <Random banerData={baner1Data} />
-                banerData={baner1Data}
+          ) : (
-              />
-            ) :
             <CustomImage
               className={""}
               delay={0}
@@ -115,7 +122,7 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
               src={replaceBannerVtctp}
               hide={""}
             />
-          }
+          )}
         </SpottableComponent>
 
         <SpottableComponent className={css.imgBox}>
@@ -130,10 +137,8 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
               hide={""}
             />
           ) : baner2Data.shptmDspyTpNm == "Random" ? (
-            <Random
+            <Random banerData={baner2Data} />
-              banerData={baner2Data}
+          ) : (
-            />
-          ) :
             <CustomImage
               className={""}
               delay={0}
@@ -142,20 +147,16 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
               src={replaceBannerVtctp}
               hide={""}
             />
-         }
+          )}
         </SpottableComponent>
 
         <div className={css.dualBox}>
-          <SpottableComponent className={css.videoBox}>
+          <SpottableComponent className={classNames(css.videoBox, css.topBox)}>
             {baner3Data.shptmDspyTpNm == "Rolling" ? (
-                <Rolling
+              <Rolling banerData={baner3Data} />
-                  banerData={baner3Data}
-                />
             ) : baner3Data.shptmDspyTpNm == "Random" ? (
-                <Random
+              <Random banerData={baner3Data} />
-                  banerData={baner3Data}
+            ) : (
-                />
-              ) :
               <CustomImage
                 className={""}
                 delay={0}
@@ -164,19 +165,17 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
                 src={replaceBannerWdth}
                 hide={""}
               />
-            }
+            )}
           </SpottableComponent>
 
-          <SpottableComponent className={css.slideBox}>
+          <SpottableComponent
+            className={classNames(css.videoBox, css.underBox)}
+          >
             {baner4Data.shptmDspyTpNm == "Rolling" ? (
-                <Rolling
+              <Rolling banerData={baner4Data} />
-                  banerData={baner4Data}
-                />
             ) : baner4Data.shptmDspyTpNm == "Random" ? (
-                <Random
+              <Random banerData={baner4Data} />
-                  banerData={baner4Data}
+            ) : (
-                />
-              ) :
               <CustomImage
                 className={""}
                 delay={0}
@@ -185,7 +184,7 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop,
                 src={replaceBannerWdth}
                 hide={""}
               />
-            }
+            )}
           </SpottableComponent>
         </div>
       </div>

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();
-      }
-    }
-  }
 }

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,10 +25,10 @@ export default function HomePanel() {
   const [select, setSelect] = useState(null);
   const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
   // 추후 스위치 select 로 변경 : 스팟라이트 테스트 중
-  const selectSwitch = () =>{
+  const selectSwitch = () => {
-    switch ("DSP00203") {
+    switch ("DSP00201") {
       case "DSP00201":
-        return(
+        return (
           <HomeBannerTemplate1
             isOnTop={""}
             spotlightId={""}
@@ -37,9 +37,9 @@ export default function HomePanel() {
             homeMainContentsBannerInfos={homeMainContentsBannerInfos}
             homeTopDisplayInfos={homeTopDisplayInfos}
           />
-        )
+        );
       case "DSP00202":
-        return(
+        return (
           <HomeBannerTemplate2
             isOnTop={""}
             spotlightId={""}
@@ -48,9 +48,9 @@ export default function HomePanel() {
             homeMainContentsBannerInfos={homeMainContentsBannerInfos}
             homeTopDisplayInfos={homeTopDisplayInfos}
           />
-        )
+        );
       case "DSP00203":
-        return(
+        return (
           <HomeBannerTemplate3
             isOnTop={""}
             spotlightId={""}
@@ -59,28 +59,32 @@ export default function HomePanel() {
             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)=> {
+        homeLayoutInfoDetail.map((item, index) => {
-      return(
+          return item.shptmApphmDspyOptCd == "DSP00101" ? (
-        item.shptmApphmDspyOptCd == "DSP00101" ? (
             selectSwitch()
           ) : item.shptmApphmDspyOptCd == "DSP00102" ? (
             <SubCategory />
@@ -90,9 +94,8 @@ export default function HomePanel() {
             <HomeOnSale />
           ) : item.shptmApphmDspyOptCd == "DSP00104" ? (
             <PopularShow />
-      ) : null
+          ) : null;
-      )})
+        })}
-    }
     </TPanel>
   );
 }