[홈배너] API 적용

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

@@ -8,11 +8,8 @@ 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";
@@ -27,20 +24,49 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-export default memo (function HomeBannerTemplate1 (
+export default memo (function HomeBannerTemplate1 ({isOnTop, spotlightId, onScrollTop, onScrollShelf, ...rest}) {
-  {homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest})
+  
-  {
-  // const {homeMainContentsBannerInfos, homeTopDisplayInfos } = props;
-
   const dispatch = useDispatch();  
+  const homeMainContentsBannerInfos = useSelector((state) => state.home.mainContentsData.homeMainContentsBannerInfos);
+  const homeTopDisplayInfos = useSelector((state) => state.home.mainContentsData.homeTopDisplayInfos[0]);
+
+  const [topImagePath, setTopImagePath] = useState("");
+  const [verticalImage, setVerticalImage] = useState("");
   const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
 
-  useEffect(() => {
+  // TOP IMAGE
-    console.log(homeMainContentsBannerInfos, "1111");
+  const topImgPath = () => {
-    console.log(homeTopDisplayInfos, "2222");
+    let imgPath = "";
-  }, []);
 
-  const onClickBanner = useCallback(() => {
+    if(homeTopDisplayInfos.wdthtpImgPath1 == "" || homeTopDisplayInfos.wdthtpImgPath1 == null){
+      imgPath = homeTopDisplayInfos.wdthtpImgPath2;
+    }else{
+      imgPath = homeTopDisplayInfos.wdthtpImgPath1;
+    }
+
+    setTopImagePath(imgPath);
+  };
+
+  // VerticalImage
+  const vtctpImage = () => {
+    let imgPath = "";
+
+    if(homeTopDisplayInfos.vtctpImgPath1 == "" || homeTopDisplayInfos.vtctpImgPath1 == null){
+      imgPath = homeTopDisplayInfos.vtctpImgPath2;
+    }else{
+      imgPath = homeTopDisplayInfos.vtctpImgPath1;
+    }
+
+    setVerticalImage(imgPath);
+  };
+
+  useEffect(() => {
+    topImgPath();
+    vtctpImage();
+
+  }, [homeMainContentsBannerInfos, homeTopDisplayInfos]);
+
+  const onClickBanner = useCallback(() => {    
 
   }, []);
 
@@ -52,24 +78,16 @@ export default memo (function HomeBannerTemplate1 (
             delay={0}
             onClickBanner={onClickBanner}
             onImageLoaded={setBannerImageLoaded}
-            src={
+            src={topImagePath}
-              banner2
-                ? banner2
-                : "../../../../assets/Image/img-home-banner-h-02.png"
-            }
             hide={""}
         />
-        
+
         <CustomImage
           className={css.banner02}
           delay={0}
           onClickBanner={onClickBanner}
           onImageLoaded={setBannerImageLoaded}
-          src={
+          src={topImagePath}
-            banner2
-              ? banner2
-              : "../../../../assets/Image/img-home-banner-h-02.png"
-          }
           hide={""}
         />
       </div>
@@ -80,11 +98,7 @@ export default memo (function HomeBannerTemplate1 (
           delay={0}
           onClickBanner={onClickBanner}
           onImageLoaded={setBannerImageLoaded}
-          src={
+          src={verticalImage}
-            banner3
-              ? banner3
-              : "../../../../assets/Image/img-home-banner-v-01.png"
-          }
           hide={""}
         />
         <CustomImage
@@ -92,11 +106,7 @@ export default memo (function HomeBannerTemplate1 (
           delay={0}
           onClickBanner={onClickBanner}
           onImageLoaded={setBannerImageLoaded}
-          src={
+          src={verticalImage}
-            banner4
-              ? banner4
-              : "../../../../assets/Image/img-home-banner-v-02.png"
-          }
           hide={""}
         />
       </div>

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

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

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

@@ -4,8 +4,8 @@ import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
 import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
 import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";
 
-export default memo (function HomeTemplate(props) {
+export default memo (function HomeTemplate({isOnTop, spotlightId, onScrollTop, onScrollShelf, selectTemplate, ...rest}) {
-    const {selectTemplate, homeMainContentsBannerInfos, homeTopDisplayInfos} = props;
+    
 
     let SelectedTemplate = null;
 
@@ -23,8 +23,10 @@ export default memo (function HomeTemplate(props) {
     
     return SelectedTemplate ? (
         <SelectedTemplate
-            homeMainContentsBannerInfos = {homeMainContentsBannerInfos}
+            isOnTop={""} 
-            homeTopDisplayInfos = {homeTopDisplayInfos}
+            spotlightId={""} 
+            onScrollTop={""} 
+            onScrollShelf={""}
         />
     ) : null;
 })