[홈패널] CSS 수정

2024-02-16 14:40:44 +09:00
parent 4bbb35ad57
commit 772377a029
5 changed files with 234 additions and 283 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
@@ -67,6 +67,8 @@ export default function HomeBannerTemplate1() {
    }
  }, [homeMainContentsBannerInfos, dispatch]);

+  const keyDown = useCallback(() => {}, []);
+
  const onClickBanner = useCallback(() => {}, []);

  return (
@@ -75,8 +77,9 @@ export default function HomeBannerTemplate1() {
        <div className={css.mainBox}>
          <div className={css.dualBox}>
            {/* 배너1 */}
-            <SpottableComponent
+            <div
              className={classNames(css.videoBox, css.topBox)}
+              onKeyDown={keyDown}
            >
              {bannerInfos &&
                bannerInfos.map((item, index) => {
@@ -108,12 +111,10 @@ export default function HomeBannerTemplate1() {
                    />
                  );
                })}
-            </SpottableComponent>
+            </div>

            {/* 배너2 */}
-            <SpottableComponent
-              className={classNames(css.videoBox, css.underBox)}
-            >
+            <div className={classNames(css.videoBox, css.underBox)}>
              {bannerInfos &&
                bannerInfos.map((item, index) => {
                  return item.banrLctnNo === "2" &&
@@ -124,7 +125,7 @@ export default function HomeBannerTemplate1() {
                      index={index}
                      key={index}
                      imageType={true}
-                      onFocus={onFocus}
+                      // spotlightId={"roll02"}
                    />
                  ) : item.banrLctnNo === "2" &&
                    item.shptmDspyTpNm == "Random" ? (
@@ -144,7 +145,7 @@ export default function HomeBannerTemplate1() {
                    />
                  );
                })}
-            </SpottableComponent>
+            </div>
          </div>

          {/* 배너3 */}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less
@@ -3,12 +3,10 @@

 .container {
  background-color: @BG_COLOR_01;
-  display: flex;
 }

 .homeTemplateBox {
-  margin: 24px 24px 0px;
-  display: flex;
+  padding: 24px;
  img,
  video {
    .size(@w: 100%, @h: 100%);
@@ -17,7 +15,6 @@
 }
 .leftBannerBox {
  .size(@w: 744px, @h: 858px);
-  margin-right: 18px;
  &.dualBox {
    .topBox {
      .size(@w: 744px, @h: 420px);
@@ -26,9 +23,7 @@
      border-radius: 12px;
      overflow: hidden;
      &:focus,
-      &:hover,
-      &:focus-within,
-      &:active {
+      &:focus-within {
        .focused(@boxShadow: 22px, @borderRadius: 12px);
        position: unset;
      }
@@ -39,9 +34,7 @@
      border-radius: 12px;
      overflow: hidden;
      &:focus,
-      &:hover,
-      &:focus-within,
-      &:active {
+      &:focus-within {
        .focused(@boxShadow: 22px, @borderRadius: 12px);
        position: unset;
      }
@@ -54,13 +47,11 @@
  margin: 0 18px 18px 0;
  border-radius: 12px;
  overflow: hidden;
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &:active {
-    .focused(@boxShadow: 22px, @borderRadius: 12px);
-    position: unset;
-  }
+  // &:focus,
+  // &:focus-within {
+  //   .focused(@boxShadow: 22px, @borderRadius: 12px);
+  //   position: unset;
+  // }
  .videoPlayer {
    .size(@w: 744px, @h: 420px);
    outline: "teal dashed 1px";
@@ -75,9 +66,7 @@
  border-radius: 12px;
  box-sizing: border-box;
  &:focus,
-  &:hover,
-  &:focus-within,
-  &:active {
+  &:focus-within {
    border: 4px solid @PRIMARY_COLOR_RED;
    box-sizing: border-box;
    .focusDropShadow();
@@ -91,9 +80,7 @@
  border-radius: 12px;
  margin-right: 18px;
  &:focus,
-  &:hover,
-  &:focus-within,
-  &:active {
+  &:focus-within {
    .focused(@boxShadow: 22px, @borderRadius: 12px);
    position: unset;
  }
@@ -103,9 +90,7 @@
  .size(@w: 486px, @h: 858px);
  .border-solid(@size:4px, @color:transparent);
  &:focus,
-  &:hover,
-  &:focus-within,
-  &:active {
+  &:focus-within {
    .focused(@boxShadow: 22px, @borderRadius: 12px);
    position: unset;
  }
@@ -145,6 +130,7 @@

 .mainBox {
  display: flex;
+  justify-content: space-between;
 }

 .mainBox {
@@ -157,9 +143,7 @@
    border-radius: 12px;
    overflow: hidden;
    &:focus,
-    &:hover,
-    &:focus-within,
-    &:active {
+    &:focus-within {
      .focused(@boxShadow: 22px, @borderRadius: 12px);
      position: unset;
    }
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
@@ -1,31 +1,21 @@
 import React, {
  useCallback,
  useEffect,
-  useRef,
  useState,
 } from 'react';

-import classNames from 'classnames';
-
 import VideoPlay from '@enact/sandstone/VideoPlayer';

-import image1 from '../../../../assets/Image/img-home-banner-h-01.png';
-import image2 from '../../../../assets/Image/img-home-banner-h-01.png';
-import image3 from '../../../../assets/Image/img-home-banner-v-01.png';
-import image4 from '../../../../assets/Image/img-home-banner-v-02.png';
 import CustomImage from '../../../components/CustomImage/CustomImage';
 import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
-import css from './RollingUnit.module.less';

-// 더미 데이터
-const imgArr = [
-  { img: image1, key: 1 },
-  { img: image2, key: 2 },
-  { img: image3, key: 3 },
-  { img: image4, key: 4 },
-];
-
-export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
+export default function RollingUnit({
+  bannerData,
+  index,
+  imageType,
+  onFocus,
+  spotlightId,
+}) {
  const bannerDetailInfos = bannerData.bannerDetailInfos;
  const bannerDetailInfosLength = bannerData.bannerDetailInfos.length;

@@ -35,46 +25,6 @@ export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
  const [detailLenghth, setDetailLength] = useState();
  const [startIndex, setStartIndex] = useState(0);
  const [lastIndex, setLastIndex] = useState();
-  const [currentPage, setCurrentPage] = useState(0);
-
-  const handleNext = useCallback(() => {
-    setCurrentPage((currentPage) => currentPage + 1);
-  }, [currentPage]);
-
-  const handlePrev = useCallback(() => {
-    setCurrentPage((currentPage) =>
-      currentPage > 0 ? currentPage - 1 : currentPage
-    );
-  }, [currentPage]);
-
-  const [customInterval, setCustomeInterval] = useState(10000);
-  const intervalRef = useRef(null);
-  const useInterval = (callback, delay) => {
-    const savedCallback = useRef();
-    useEffect(() => {
-      savedCallback.current = callback;
-    }, [callback]);
-
-    useEffect(() => {
-      function tick() {
-        savedCallback.current();
-      }
-      if (delay !== null) {
-        let id = setInterval(tick, delay);
-        return () => clearInterval(id);
-      }
-    }, [delay]);
-  };
-
-  useInterval(() => {
-    if (onFocus === false) {
-      if (currentPage === lastIndex) {
-        setCurrentPage(0);
-      } else {
-        setCurrentPage(currentPage + 1);
-      }
-    }
-  }, customInterval);

  useEffect(() => {
    if (bannerData) {
@@ -84,43 +34,52 @@ export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
      setLastIndex(bannerDetailInfosLength - 1);
    }
  }, [bannerData, shptmBanrTpNm]);
-  useEffect(() => {
-    if (intervalRef.current) {
-    }
-  }, [intervalRef]);

+  // 더미 데이터 테스트용
+  useEffect(() => {
+    // 포커스가 없을 경우에만 롤링
+    if (bannerDetailInfosLength === 1) {
+      return;
+    }
+
+    if (true) {
+      const id = setInterval(() => {
+        setCount((count) => count - 1);
+      }, 1000);
+
+      if (count === 0) {
+        setStartIndex(startIndex + 1);
+        setCount(10);
+        clearInterval(id);
+        if (startIndex === lastIndex) {
+          setStartIndex(0);
+        }
+      }
+      return () => clearInterval(id);
+    }
+  }, [count, onFocus]);
  return (
-    <div
-      className={classNames(
-        css.container,
-        imageType === true && css.horizontal
-      )}
-      ref={intervalRef}
-    >
-      {currentPage !== 0 && (
-        <div className={css.leftBtn} onClick={handlePrev}></div>
-      )}
+    <>
      {bannerDetailInfos &&
-      bannerDetailInfos[currentPage].shptmBanrTpNm === "Image Banner" ? (
+      bannerDetailInfos[startIndex].shptmBanrTpNm === "Image Banner" ? (
        <CustomImage></CustomImage>
-      ) : bannerDetailInfos[currentPage].shptmBanrTpNm === "LIVE" ||
-        bannerDetailInfos[currentPage].shptmBanrTpNm === "VOD" ? (
+      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "LIVE" ||
+        bannerDetailInfos[startIndex].shptmBanrTpNm === "VOD" ? (
        <VideoPlay></VideoPlay>
-      ) : bannerDetailInfos[currentPage].shptmBanrTpNm === "Today's Deals" ? (
+      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "Today's Deals" ? (
        <HomeTodayDeal
-          imgAlt={bannerDetailInfos[currentPage].imgAlt}
-          imageName={bannerDetailInfos[currentPage].tmnlImgNm}
-          imgPath={bannerDetailInfos[currentPage].tmnlImgPath}
-          priceInfo={bannerDetailInfos[currentPage].priceInfo}
-          productId={bannerDetailInfos[currentPage].prdtId}
-          productName={bannerDetailInfos[currentPage].prdtNm}
-          soldoutFlag={bannerDetailInfos[currentPage].soldoutFlag}
+          imgAlt={bannerDetailInfos[startIndex].imgAlt}
+          imageName={bannerDetailInfos[startIndex].tmnlImgNm}
+          imgPath={bannerDetailInfos[startIndex].tmnlImgPath}
+          priceInfo={bannerDetailInfos[startIndex].priceInfo}
+          productId={bannerDetailInfos[startIndex].prdtId}
+          productName={bannerDetailInfos[startIndex].prdtNm}
+          soldoutFlag={bannerDetailInfos[startIndex].soldoutFlag}
          isHorizontal={imageType} // TRUE, FALSE
+          rolling={bannerDetailInfosLength === 1 ? false : true}
+          spotlightId={spotlightId}
        />
      ) : null}
-      {lastIndex !== currentPage && (
-        <div className={css.rightBtn} onClick={handleNext}></div>
-      )}
-    </div>
+    </>
  );
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
@@ -1,9 +1,15 @@
-import React, { useCallback } from "react";
+import React, {
+  useCallback,
+  useEffect,
+} from 'react';

-import classNames from "classnames";
+import classNames from 'classnames';

-import usePriceInfo from "../../../hooks/usePriceInfo";
-import css from "./HomeTodayDeal.module.less";
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './HomeTodayDeal.module.less';
+
+const SpottableComponent = Spottable("div");

 export default function HomeTodayDeal({
  children,
@@ -15,6 +21,7 @@ export default function HomeTodayDeal({
  productName,
  soldoutFlag,
  isHorizontal,
+  rolling,
  ...rest
 }) {
  const handleClick = useCallback(
@@ -23,27 +30,69 @@ export default function HomeTodayDeal({
    },
    [productId]
  );
+
+  const parsePriceInfo = useCallback(
+    (priceInfo) => {
+      const priceParts = priceInfo
+        .split("|")
+        .filter((part) => part !== "N")
+        .map((item) => item.trim());
+
+      let originalPrice, discountedPrice, discountRate;
+      if (priceParts.length === 4) {
+        [originalPrice, discountedPrice, , discountRate] = priceParts;
+      } else if (priceParts.length === 2) {
+        [originalPrice, discountedPrice] = priceParts;
+        discountRate = null;
+      } else {
+        originalPrice = null;
+        discountedPrice = null;
+        discountRate = null;
+      }
+
+      return { originalPrice, discountedPrice, discountRate };
+    },
+    [priceInfo]
+  );
+
  const { originalPrice, discountedPrice, discountRate } =
-    usePriceInfo(priceInfo);
+    parsePriceInfo(priceInfo);
+
+  useEffect(() => {});
+
  return (
-    <div
-      className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
-      onClick={() => handleClick(productId)}
-    >
-      <div>
-        <div className={css.textBox}>{productName}</div>
-        <div className={css.accBox}>
-          {discountedPrice}
-          {discountedPrice != originalPrice ? (
-            <span className={css.saleAccBox}>{originalPrice}</span>
-          ) : (
-            <></>
-          )}
+    <div className={css.rollingWrap}>
+      {rolling === true && (
+        <SpottableComponent
+          className={classNames(css.arrow, css.leftBtn)}
+        ></SpottableComponent>
+      )}
+      <SpottableComponent
+        className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
+        onClick={() => handleClick(productId)}
+      >
+        <div>
+          <div className={css.textBox}>{productName}</div>
+          <div className={css.accBox}>
+            {discountedPrice}
+            {discountedPrice != originalPrice ? (
+              <span className={css.saleAccBox}>{originalPrice}</span>
+            ) : (
+              <></>
+            )}
+          </div>
        </div>
-      </div>
-      <div className={css.itemImgBox}>
-        <img src={imgPath} />
-      </div>
+
+        <div className={css.itemImgBox}>
+          <img src={imgPath} />
+        </div>
+      </SpottableComponent>
+
+      {rolling === true && (
+        <SpottableComponent
+          className={classNames(css.arrow, css.rightBtn)}
+        ></SpottableComponent>
+      )}
    </div>
  );
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less
@@ -1,154 +1,112 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.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;
-  .size(@w: 486px, @h: 858px);
-  margin-right: 18px;
-  .border-solid(@size:4px, @color:transparent);
-  border-radius: 12px;
+.rollingWrap {
  position: relative;
+  .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;
+    .size(@w: 744px, @h: 420px);
+    .border-solid(@size:4px, @color:transparent);
+    border-radius: 12px;
+    position: relative;

-  img {
-    width: 100%;
-    object-fit: contain;
-  }
-  .textBox {
-    margin: 268px 36px 0;
-    .size(@w: 406px, @h: 80px);
-    .elip(@clamp:2);
-    font-weight: bold;
-    .font (@fontFamily:@baseFontBold, @fontSize:30px);
-    color: @COLOR_GRAY06;
-    line-height: 1.27;
-  }
-  .accBox {
-    .size(@w: 406px, @h: 50px);
-    margin: 6px 36px 0;
-    text-align: center;
-    .font (@fontFamily:@baseFontBold, @fontSize:42px);
-    color: @PRIMARY_COLOR_RED;
-    font-weight: bold;
-    line-height: 1.14;
-    .saleAccBox {
-      .font (@fontFamily:@baseFontBold, @fontSize:24px);
-      color: @COLOR_GRAY04;
-      vertical-align: middle;
-      text-decoration: line-through;
-    }
-  }
-  .itemImgBox {
-    margin: 29px 62px 60px;
-    .size(@w: 354px, @h: 354px);
-    > img {
+    img {
      width: 100%;
+      object-fit: contain;
+    }
+    .textBox {
+      margin: 268px 36px 0;
+      .size(@w: 406px, @h: 80px);
+      .elip(@clamp:2);
+      font-weight: bold;
+      .font (@fontFamily:@baseFontBold, @fontSize:30px);
+      color: @COLOR_GRAY06;
+      line-height: 1.27;
+    }
+
+    .accBox {
+      .size(@w: 406px, @h: 50px);
+      margin: 6px 36px 0;
+      text-align: center;
+      .font (@fontFamily:@baseFontBold, @fontSize:42px);
+      color: @PRIMARY_COLOR_RED;
+      font-weight: bold;
+      line-height: 1.14;
+      .saleAccBox {
+        .font (@fontFamily:@baseFontBold, @fontSize:24px);
+        color: @COLOR_GRAY04;
+        vertical-align: middle;
+        text-decoration: line-through;
+      }
+    }
+    .itemImgBox {
+      margin: 29px 62px 60px;
+      .size(@w: 354px, @h: 354px);
+      > img {
+        width: 100%;
+      }
+    }
+
+    &.isHorizontal {
+      background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_hor.png);
+      background-size: 744px 420px;
+      display: flex;
+      > div {
+        flex: none;
+      }
+      .textBox {
+        margin: 230px 8px 0 46px;
+        .size(@w: 320px, @h: 80px);
+        .elip(@clamp:2);
+        font-weight: bold;
+        .font (@fontFamily:@baseFontBold, @fontSize:30px);
+        color: @COLOR_GRAY06;
+        line-height: 1.27;
+      }
+
+      .accBox {
+        .size(@w: 320px, @h: 50px);
+        margin: 6px 8px 0 46px;
+        text-align: left;
+
+        .saleAccBox {
+          color: #767676;
+        }
+      }
+      .itemImgBox {
+        margin: 44px 26px 44px 0;
+        .size(@w: 324px, @h: 324px);
+      }
    }
  }
-  .leftBtn {
-    .position(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px);
-    .size(@w: 42px, @h: 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");
+  &:focus-within,
+  &:focus {
+    &::after {
+      .focused(@borderRadius: 12px);
    }
  }
-  .rightBtn {
-    .position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto);
+  .arrow {
+    z-index: 10;
    .size(@w: 42px, @h: 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;
-  .size(@w: 744px, @h: 420px);
-  .border-solid(@size:4px, @color:transparent);
-  border-radius: 12px;
-  display: flex;
-
-  > div {
-    flex: none;
-  }
-  img {
-    width: 100%;
-    object-fit: contain;
-  }
-  .textBox {
-    margin: 230px 8px 0 46px;
-    .size(@w: 320px, @h: 80px);
-    .elip(@clamp:2);
-    font-weight: bold;
-    .font (@fontFamily:@baseFontBold, @fontSize:30px);
-    color: @COLOR_GRAY06;
-    line-height: 1.27;
-  }
-  .accBox {
-    .size(@w: 320px, @h: 50px);
-    margin: 6px 8px 0 46px;
-    text-align: left;
-    .font (@fontFamily:@baseFontBold, @fontSize:42px);
-    color: @PRIMARY_COLOR_RED;
-    font-weight: bold;
-    line-height: 1.14;
-    .saleAccBox {
-      .font (@fontFamily:@baseFontBold, @fontSize:24px);
-      color: #767676;
-      vertical-align: middle;
-      text-decoration: line-through;
-    }
-  }
-  .itemImgBox {
-    margin: 44px 26px 44px 0;
-    .size(@w: 324px, @h: 324px);
-    > img {
-      width: 100%;
-    }
-  }
-  .leftBtn {
-    .position(@position: absolute, @top: 189px, @right: auto, @bottom: auto, @left: 18px);
-    .size(@w: 42px, @h: 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(@position: absolute, @top: 189px, @right: 18px, @bottom: auto, @left:auto);
-    .size(@w: 42px, @h: 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");
+    &.leftBtn {
+      .position(@position: absolute, @top: 200px, @left: 18px);
+      background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
+      &:focus,
+      &:focus-within {
+        background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
+      }
+    }
+    &.rightBtn {
+      .position(@position: absolute, @top: 200px, @right: 18px);
+      background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
+      &:focus,
+      &:focus-within {
+        background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
+      }
    }
  }
 }