[HomePanel] 홈 배너 작업

- HomeTodayDeal 작성
- 아이콘 추가

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

@@ -1,5 +1,59 @@
+import React, { useEffect } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
+
+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";
+
+const SpottableComponent = Spottable("div");
+
+const Container = SpotlightContainerDecorator(
+  {
+    enterTo: "default-element",
+  },
+  "div"
+);
+
 export default function HomeBannerTemplate3() {
+  const dispatch = useDispatch();
+
+  const homeMainContentsBannerInfos = useSelector(
+    (state) => state.home.mainContentsData.homeMainContentsBannerInfos
+  );
+  const testchk = useSelector((state) => state);
+  console.log("##", testchk);
   return (
-        <p>템플릿3</p>
+    <Container className={css.homeTemplateBox}>
-    )
+      {homeMainContentsBannerInfos &&
+        homeMainContentsBannerInfos.map((bannerInfos) => {
+          return (
+            <HomeTodayDeal
+              homeMainContentsBannerInfos={homeMainContentsBannerInfos}
+              //가로형일때는 isHorizontal 넣어주면됨.
+              rolling={false}
+            />
+          );
+        })}
+      <div class={css.mainBox}>
+        <SpottableComponent className={css.imgBox}>
+          <img src={banner4} />
+        </SpottableComponent>
+        <div className={css.dualBox}>
+          <SpottableComponent className={css.videoBox}>
+            <img src={banner2} />
+          </SpottableComponent>
+          <SpottableComponent className={css.slideBox}>
+            <img src={banner2} />
+          </SpottableComponent>
+        </div>
+      </div>
+    </Container>
+  );
 }

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less

@@ -18,6 +18,15 @@
   width: 744px;
   height: 420px;
   margin: 0 18px 18px 0;
+  border: 4px solid transparent;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    .focusDropShadow();
+  }
   .videoPlayer {
     width: 744px;
     height: 420px;
@@ -105,3 +114,71 @@
   -ms-flex-align: center;
   align-items: center;
 }
+
+.mainBox {
+  display: flex;
+}
+
+img {
+  width: 100%;
+  object-fit: contain;
+}
+
+.mainBox {
+  display: flex;
+
+  .imgBox {
+    width: 486px;
+    height: 858px;
+    background: beige;
+    margin-right: 18px;
+    border: 4px solid transparent;
+    border-radius: 12px;
+    &:focus,
+    &:hover,
+    &:focus-within,
+    &:active {
+      border: 4px solid @PRIMARY_COLOR_RED;
+      box-sizing: border-box;
+      .focusDropShadow();
+    }
+    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/HomeTodayDeal/HomeTodayDeal.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import classNames from "classnames";
+
+import Spottable from "@enact/spotlight/Spottable";
+
+import css from "./HomeTodayDeal.module.less";
+
+const SpottableComponent = Spottable("div");
+
+export default function HomeTodayDeal({
+  homeMainContentsBannerInfos,
+  isHorizontal,
+  rolling,
+  ...rest
+}) {
+  const bannerDetailInfos =
+    homeMainContentsBannerInfos[0].bannerInfos[0].bannerDetailInfos[0];
+  const priceInfo = bannerDetailInfos.priceInfo;
+  let salePrice;
+  const originalPrice = priceInfo.split("|")[0];
+  if (priceInfo.split("|")[3] == "") {
+    salePrice = priceInfo.split("|")[1];
+  }
+  return (
+    <SpottableComponent
+      className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
+    >
+      <div>
+        <div className={css.textBox}>{bannerDetailInfos.prdtNm}</div>
+        <div className={css.accBox}>
+          {salePrice}
+          {salePrice != originalPrice ? (
+            <span className={css.saleAccBox}>{originalPrice}</span>
+          ) : (
+            <></>
+          )}
+        </div>
+      </div>
+      <div className={css.itemImgBox}>
+        <img src={bannerDetailInfos.tmnlImgNm} />
+      </div>
+      {rolling == true ? (
+        <>
+          <div className={css.leftBtn}></div>
+          <div className={css.rightBtn}></div>
+        </>
+      ) : (
+        <></>
+      )}
+    </SpottableComponent>
+  );
+}

com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less

@@ -0,0 +1,197 @@
+@import "../../../style/CommonStyle.module.less";
+.itemBox {
+  background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_ver.png);
+  background-repeat: no-repeat;
+  background-size: 486px 858px;
+  background-position: center center;
+  width: 486px;
+  height: 858px;
+  margin-right: 18px;
+  border: 4px solid transparent;
+  border-radius: 12px;
+  position: relative;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    .focusDropShadow();
+  }
+  img {
+    width: 100%;
+    object-fit: contain;
+  }
+  .textBox {
+    margin: 268px 36px 0;
+    width: 406px;
+    height: 80px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    font-family: "LGSmartUIBold";
+    font-weight: bold;
+    font-size: 30px;
+    color: #333;
+    line-height: 1.27;
+  }
+  .accBox {
+    width: 406px;
+    height: 50px;
+    margin: 6px 36px 0;
+    text-align: center;
+    font-size: 42px;
+    color: @PRIMARY_COLOR_RED;
+    font-weight: bold;
+    line-height: 1.14;
+    .saleAccBox {
+      font-size: 24px;
+      color: #767676;
+      vertical-align: middle;
+      text-decoration: line-through;
+    }
+  }
+  .itemImgBox {
+    margin: 29px 62px 60px;
+    width: 354px;
+    height: 354px;
+    > img {
+      width: 100%;
+    }
+  }
+  .leftBtn {
+    position: absolute;
+    left: 18px;
+    top: 408px;
+    width: 42px;
+    height: 42px;
+    background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
+    background-size: 42px 42px;
+    background-position: center center;
+    cursor: pointer;
+    &:focus,
+    &:focus-within,
+    &:hover,
+    &:active {
+      background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
+    }
+  }
+  .rightBtn {
+    position: absolute;
+    right: 18px;
+    top: 408px;
+    width: 42px;
+    height: 42px;
+    background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
+    background-size: 42px 42px;
+    background-position: center center;
+    cursor: pointer;
+    &:focus,
+    &:focus-within,
+    &:hover,
+    &:active {
+      background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
+    }
+  }
+}
+
+.itemBox.isHorizontal {
+  position: relative;
+  background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_hor.png);
+  background-repeat: no-repeat;
+  background-size: 744px 420px;
+  background-position: center center;
+  width: 744px;
+  height: 420px;
+  border: 4px solid transparent;
+  border-radius: 12px;
+  display: flex;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    .focusDropShadow();
+  }
+  > div {
+    flex: none;
+  }
+  img {
+    width: 100%;
+    object-fit: contain;
+  }
+  .textBox {
+    font-family: "LGSmartUIBold";
+    margin: 230px 8px 0 46px;
+    width: 320px;
+    height: 80px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    font-weight: bold;
+    font-size: 30px;
+    color: #333;
+    line-height: 1.27;
+  }
+  .accBox {
+    width: 320px;
+    height: 50px;
+    margin: 6px 8px 0 46px;
+    text-align: left;
+    font-size: 42px;
+    color: @PRIMARY_COLOR_RED;
+    font-weight: bold;
+    line-height: 1.14;
+    .saleAccBox {
+      font-size: 24px;
+      color: #767676;
+      vertical-align: middle;
+      text-decoration: line-through;
+    }
+  }
+  .itemImgBox {
+    margin: 44px 26px 44px 0;
+    width: 324px;
+    height: 324px;
+    > img {
+      width: 100%;
+    }
+  }
+  .leftBtn {
+    position: absolute;
+    left: 18px;
+    top: 189px;
+    width: 42px;
+    height: 42px;
+    background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
+    background-size: 42px 42px;
+    background-position: center center;
+    &:focus,
+    &:focus-within,
+    &:hover,
+    &:active {
+      background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
+    }
+  }
+  .rightBtn {
+    position: absolute;
+    right: 18px;
+    top: 189px;
+    width: 42px;
+    height: 42px;
+    background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
+    background-size: 42px 42px;
+    background-position: center center;
+    &:focus,
+    &:focus-within,
+    &:hover,
+    &:active {
+      background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
+    }
+  }
+}