HOME panel(design, onSale 추가)

com.twin.app.shoptime/src/components/HomeBanner/Template.jsx

@@ -0,0 +1,114 @@
+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"
+);
+
+const Template = ({
+  isOnTop,
+  spotlightId,
+  onScrollTop,
+  onScrollShelf,
+  ...rest
+}) => {
+  const dispatch = useDispatch();
+  const termsData = getHomeTerms("MST00402");
+  const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
+
+  useEffect(() => {
+    const termsData = getAdDetailAMD("test,", "1234");
+    console.log(termsData);
+  }, []);
+
+  const onClickBanner = useCallback(() => {}, []);
+  useEffect(() => {}, []);
+  return (
+    <Container {...rest} spotlightId={spotlightId} className={css.container}>
+      <div>
+        {/* 비디오플레이어 추후 변경 */}
+        <div
+          style={{
+            width: 744,
+            height: 420,
+            marginTop: 24,
+            marginRight: 9,
+            marginBottom: 18,
+            marginLeft: 24,
+            transform: "scale(1)",
+            transformOrigin: "top",
+          }}
+        >
+          <ViedoPlayer>
+            <source
+              src="http://media.w3.org/2010/05/sintel/trailer.mp4"
+              type="video/mp4"
+            />
+          </ViedoPlayer>
+        </div>
+        <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>
+  );
+};
+
+export default Template;

com.twin.app.shoptime/src/components/HomeBanner/Template.module.less

@@ -0,0 +1,85 @@
+@import "../../style/CommonStyle.module.less";
+
+.container {
+  background-color: #f8f8f8;
+  display: flex;
+}
+
+.videoPlayer {
+  width: 744px;
+  height: 420px;
+  margin: 24px 9px 18px 24px;
+  outline: "teal dashed 1px";
+  transform: "scale(1)";
+}
+
+.banner02 {
+  width: 744px;
+  height: 420px;
+  margin-left: 24px;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+  }
+}
+
+.banner03 {
+  width: 486px;
+  height: 858px;
+  margin: 24px 18px 50px;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+  }
+}
+
+.banner04 {
+  width: 486px;
+  height: 858px;
+  margin: 24px 24px 50px 18px;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+  }
+}
+
+.bannerFlexCol {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.bannerFlexRow {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}

com.twin.app.shoptime/src/components/OnSale/OnSale.jsx

@@ -0,0 +1,101 @@
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+  useRef,
+} from "react";
+import classNames from "classnames";
+import { $L } from "../../utils/helperMethods";
+import { Job } from "@enact/core/util";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import Spotlight from "@enact/spotlight";
+import Spottable from "@enact/spotlight/Spottable";
+
+import { getOnSaleInfo } from "../../api/onSaleApi";
+
+import css from "./OnSale.module.less";
+
+const SpottableComponent = Spottable("div");
+
+const Container = SpotlightContainerDecorator(
+  {
+    enterTo: "default-element",
+  },
+  "div"
+);
+
+const OnSale = ({
+  isOnTop,
+  spotlightId,
+  onScrollTop,
+  onScrollShelf,
+  ...rest
+}) => {
+  const [currentSaleData, setCurrentSaleData] = useState([]);
+  const [originalPrice, setOriginalPrice] = useState(null);
+
+  const setSaleView = async (categoryIncFlag, lgCatCd) => {
+    try {
+      const saleData = await getOnSaleInfo({ lgCatCd, categoryIncFlag });
+      if (saleData) {
+        setCurrentSaleData(saleData.homeOnSaleInfos);
+      }
+    } catch (error) {
+      console.error("Error saleData: ", error);
+    }
+  };
+
+  useEffect(() => {
+    setSaleView("Y", "");
+  }, []);
+
+  return (
+    <Container {...rest} spotlightId={spotlightId} className={css.container}>
+      <div className={css.bestSeller}>
+        <h2 className={css.subTitle}>{$L("ON SALE")}</h2>
+        <ul className={css.onSaleItem}>
+          {currentSaleData &&
+            currentSaleData.map((item, index) => {
+              const priceInfo = item.priceInfo;
+              let salePrice;
+              const originalPrice = priceInfo.split("|")[0];
+              if (priceInfo.split("|")[3] == "") {
+                salePrice = priceInfo.split("|")[1];
+              } else {
+                salePrice = priceInfo.split("|")[1];
+              }
+              item.priceInfo.split("|")[0];
+              return (
+                <li key={index} className={css.onSaleItemList}>
+                  <img src={item.imgUrl} className={css.onSaleItemListImg} />
+                  <div className={css.onSaleItemListBox}>
+                    <div className={css.onSaleItemListBoxTitle}>
+                      {item.catNm}
+                    </div>
+                    <div className={css.onSaleItemListBoxSaleBox}>
+                      up to&nbsp;
+                      <span className={css.onSaleItemListBoxSaleBoxPer}>
+                        {item.dcRate}%
+                      </span>
+                    </div>
+                    <div className={css.onSaleItemListBoxName}>
+                      {item.prdtNm}
+                    </div>
+                    <div className={css.onSaleItemListBoxPrice}>
+                      {salePrice}
+                      <span className={css.onSaleItemListBoxPriceStripe}>
+                        {originalPrice}
+                      </span>
+                    </div>
+                  </div>
+                </li>
+              );
+            })}
+        </ul>
+      </div>
+    </Container>
+  );
+};
+
+export default OnSale;

com.twin.app.shoptime/src/components/OnSale/OnSale.module.less

@@ -0,0 +1,125 @@
+.bestSeller {
+  padding: 60px 0;
+  width: 100%;
+  overflow-x: auto;
+  .subTitle {
+    border-left: 6px solid #c70850;
+    padding-left: 12px;
+    box-sizing: border-box;
+  }
+  .onSaleItem {
+    margin-top: 20px;
+    height: 300px;
+    width: calc(630px * 12);
+    display: flex;
+    .onSaleItemList {
+      width: 630px;
+      height: 300px;
+      border-radius: 12px;
+      display: flex;
+      overflow: hidden;
+      margin-right: 18px;
+      border: 4px solid transparent;
+      box-sizing: border-box;
+      &:focus,
+      &:hover,
+      &:focus-within,
+      &:active {
+        border: 4px solid #c70850;
+        box-sizing: border-box;
+        drop-shadow: 0 0 50px 0.5 #000;
+      }
+      .onSaleItemListImg {
+        width: 300px;
+        height: 300px;
+        object-fit: contain;
+        display: inline-block;
+        box-sizing: border-box;
+      }
+      .onSaleItemListBox {
+        width: 330px;
+        height: 300px;
+        box-sizing: border-box;
+        padding: 24px;
+        display: inline-block;
+        .onSaleItemListBoxTitle {
+          width: 282px;
+          height: 30px;
+          font-size: 24px;
+          color: rgba(255, 255, 255, 0.5);
+        }
+        .onSaleItemListBoxSaleBox {
+          margin-top: 11px;
+          width: 274px;
+          height: 70px;
+          font-size: 50px;
+          color: #ffffff;
+          text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
+          letter-spacing: -2px;
+          line-height: 60px;
+          .onSaleItemListBoxSaleBoxPer {
+            font-size: 84px;
+            letter-spacing: -3.36px;
+          }
+        }
+        .onSaleItemListBoxName {
+          margin-top: 41px;
+          width: 282px;
+          height: 60px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          font-size: 24px;
+          line-height: 1.33;
+          color: #fff;
+          font-weight: bold;
+        }
+        .onSaleItemListBoxPrice {
+          margin-top: 9px;
+          width: 282px;
+          height: 36px;
+          font-size: 30px;
+          line-height: 0.93;
+          color: #fff;
+          letter-spacing: normal;
+          .onSaleItemListBoxPriceStripe {
+            margin-left: 4px;
+            color: #d5d5d5;
+            display: inline-block;
+            text-decoration: line-through;
+            font-size: 18px;
+            line-height: 1.56;
+            letter-spacing: normal;
+          }
+        }
+      }
+      &:nth-child(5n + 1) {
+        .onSaleItemListBox {
+          background-image: linear-gradient(to top, #f485c3, #cc4d92);
+        }
+      }
+      &:nth-child(5n + 2) {
+        .onSaleItemListBox {
+          background-image: linear-gradient(to top, #fdbe43, #e47915);
+        }
+      }
+      &:nth-child(5n + 3) {
+        .onSaleItemListBox {
+          background-image: linear-gradient(to top, #97ca73, #3e8d18);
+        }
+      }
+      &:nth-child(5n + 4) {
+        .onSaleItemListBox {
+          background-image: linear-gradient(to top, #84b0e9, #4282d9);
+        }
+      }
+      &:nth-child(5n + 5) {
+        .onSaleItemListBox {
+          background-image: linear-gradient(to top, #a387ea, #7750dc);
+        }
+      }
+    }
+  }
+}

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

@@ -1,6 +1,17 @@
+import React from "react";
+
 import TPanel from "../../components/TPanel/TPanel";
 import { $L } from "../../utils/helperMethods";
 
+import Template from "../../components/HomeBanner/Template";
+import OnSale from "../../components/OnSale/OnSale";
+
 export default function HomePanel() {
-  return <TPanel>{$L("Welcome")}</TPanel>;
+  return (
+    <TPanel>
+      <Template />
+
+      <OnSale />
+    </TPanel>
+  );
 }