[홈배너] 컴포넌트 위치 이동

com.twin.app.shoptime/src/components/Home/HomeBanner/HomeBannerTemplate1.jsx

@@ -1,40 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-  useMemo,
-  useRef,
-} from "react";
-
-import classNames from "classnames";
-
-import { Job } from "@enact/core/util";
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import { shallowEqual, useDispatch, useSelector } from "react-redux";
-import Spotlight from "@enact/spotlight";
-import Marquee from "@enact/sandstone/Marquee";
-import Spottable from "@enact/spotlight/Spottable";
-
-import CustomImage from "../../CustomImage/CustomImage";
-import ViedoPlayer from "@enact/sandstone/VideoPlayer";
-import css from "./Template.module.less";
-import { getAdDetailAMD, getHomeTerms } from "../../../api/homeApi";
-
-import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
-import banner3 from "../../../../assets/Image/img-home-banner-v-01.png";
-import banner4 from "../../../../assets/Image/img-home-banner-v-02.png";
-
-const SpottableComponent = Spottable("div");
-
-const Container = SpotlightContainerDecorator(
-  {
-    enterTo: "default-element",
-  },
-  "div"
-);
-
-export default function HomeBannerTemplate1 () {
-    return(
-      <p> 템플릿1</p>
-    )   
-}

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

@@ -0,0 +1,105 @@
+import React, {useCallback, useEffect, useState, useMemo,useRef ,memo} from "react";
+
+import classNames from "classnames";
+
+import { Job } from "@enact/core/util";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import { shallowEqual, useDispatch, useSelector } from "react-redux";
+import Spotlight from "@enact/spotlight";
+import Marquee from "@enact/sandstone/Marquee";
+import Spottable from "@enact/spotlight/Spottable";
+
+import CustomImage from "../../../components/CustomImage/CustomImage";
+import ViedoPlayer from "@enact/sandstone/VideoPlayer";
+import css from "./Template.module.less";
+import { getAdDetailAMD, getHomeTerms } from "../../../api/homeApi";
+
+import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
+import banner3 from "../../../../assets/Image/img-home-banner-v-01.png";
+import banner4 from "../../../../assets/Image/img-home-banner-v-02.png";
+
+const SpottableComponent = Spottable("div");
+
+const Container = SpotlightContainerDecorator(
+  {
+    enterTo: "default-element",
+  },
+  "div"
+);
+
+export default memo (function HomeBannerTemplate1 (
+  {homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest})
+  {
+  // const {homeMainContentsBannerInfos, homeTopDisplayInfos } = props;
+
+  const dispatch = useDispatch();  
+  const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
+
+  useEffect(() => {
+    console.log(homeMainContentsBannerInfos, "1111");
+    console.log(homeTopDisplayInfos, "2222");
+  }, []);
+
+  const onClickBanner = useCallback(() => {
+
+  }, []);
+
+  return (
+    <Container className={(css.container, css.homeTemplateBox)}>
+      <div className={css.leftBannerBox}>
+        <CustomImage
+            className={css.banner02}
+            delay={0}
+            onClickBanner={onClickBanner}
+            onImageLoaded={setBannerImageLoaded}
+            src={
+              banner2
+                ? banner2
+                : "../../../../assets/Image/img-home-banner-h-02.png"
+            }
+            hide={""}
+        />
+        
+        <CustomImage
+          className={css.banner02}
+          delay={0}
+          onClickBanner={onClickBanner}
+          onImageLoaded={setBannerImageLoaded}
+          src={
+            banner2
+              ? banner2
+              : "../../../../assets/Image/img-home-banner-h-02.png"
+          }
+          hide={""}
+        />
+      </div>
+
+      <div className={css.bannerFlexRow}>
+        <CustomImage
+          className={css.banner03}
+          delay={0}
+          onClickBanner={onClickBanner}
+          onImageLoaded={setBannerImageLoaded}
+          src={
+            banner3
+              ? banner3
+              : "../../../../assets/Image/img-home-banner-v-01.png"
+          }
+          hide={""}
+        />
+        <CustomImage
+          className={css.banner04}
+          delay={0}
+          onClickBanner={onClickBanner}
+          onImageLoaded={setBannerImageLoaded}
+          src={
+            banner4
+              ? banner4
+              : "../../../../assets/Image/img-home-banner-v-02.png"
+          }
+          hide={""}
+        />
+      </div>
+    </Container>
+  );
+})

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

@@ -1,22 +1,62 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
 
 import TPanel from "../../components/TPanel/TPanel";
 import { $L } from "../../utils/helperMethods";
 
 import css from "../HomePanel/HomePanel.module.less";
 
-import Template from "./HomeBanner/Template";
-import OnSale from "./OnSale/OnSale";
-import SubCategory from "./SubCategory/SubCategory";
-import PopularShow from "./PopularShow/PopularShow";
+import HomeTemplate from "./HomeTemplate";
+import OnSale from "../HomePanel/OnSale/OnSale";
+import SubCategory from "../HomePanel/SubCategory/SubCategory";
 
 export default function HomePanel() {
+  const dispatch = useDispatch();
+  
+  const latoutData = useSelector((state) => state.home.layoutData);
+  const homeMainContentsBannerInfos = useSelector((state) => state.home.mainContentsData.homeMainContentsBannerInfos);
+  const homeTopDisplayInfos = useSelector((state) => state.home.mainContentsData.homeTopDisplayInfos);
+  const [selectTemplate, setSelectTemplate] = useState(null);
+
+  const getHomeLayout = () => {
+    console.log("레이아웃");
+  }
+
+  const getHomeContents = () => {    
+    // 추후 다시 한번 확인: 코드(DSP00201, 202, 203)
+    // 템플릿 선택
+    let tempTemplate = 0;
+
+    if(homeMainContentsBannerInfos){
+      if(homeMainContentsBannerInfos[0].shptmTmplCd == "DSP00201"){
+        tempTemplate = 1;
+      }
+      if(homeMainContentsBannerInfos[0].shptmTmplCd == "DSP00202"){
+        tempTemplate = 2;
+      }
+      if(homeMainContentsBannerInfos[0].shptmTmplCd == "DSP00203"){
+        tempTemplate = 3;
+      }
+    }    
+    setSelectTemplate(tempTemplate);    
+  }
+
+  useEffect(()=>{
+    getHomeLayout();
+    getHomeContents();
+  },[])
+  
   return (
     <TPanel className={css.panelDesign}>
-      <Template />
+      <HomeTemplate
+        selectTemplate={selectTemplate}
+        homeMainContentsBannerInfos={homeMainContentsBannerInfos}
+        homeTopDisplayInfos={homeTopDisplayInfos}
+      />
       <SubCategory />
       <OnSale />
-      <PopularShow />
     </TPanel>
   );
 }
+

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

@@ -0,0 +1,30 @@
+import React, { memo } from "react";
+
+import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
+import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
+import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";
+
+export default memo (function HomeTemplate(props) {
+    const {selectTemplate, homeMainContentsBannerInfos, homeTopDisplayInfos} = props;
+
+    let SelectedTemplate = null;
+
+    switch (selectTemplate) {
+        case 1:
+            SelectedTemplate = HomeBannerTemplate1;
+            break;
+        case 2:
+            SelectedTemplate = HomeBannerTemplate2;
+            break;
+        case 3:
+            SelectedTemplate = HomeBannerTemplate3;
+            break;
+    }    
+    
+    return SelectedTemplate ? (
+        <SelectedTemplate
+            homeMainContentsBannerInfos = {homeMainContentsBannerInfos}
+            homeTopDisplayInfos = {homeTopDisplayInfos}
+        />
+    ) : null;
+})