[홈패널] CSS 수정

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
+            <div className={classNames(css.videoBox, css.underBox)}>
-              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 */}

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;
+  padding: 24px;
-  display: flex;
   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 {
-      &:focus-within,
-      &:active {
         .focused(@boxShadow: 22px, @borderRadius: 12px);
         position: unset;
       }
@@ -39,9 +34,7 @@
       border-radius: 12px;
       overflow: hidden;
       &:focus,
-      &:hover,
+      &:focus-within {
-      &:focus-within,
-      &:active {
         .focused(@boxShadow: 22px, @borderRadius: 12px);
         position: unset;
       }
@@ -54,13 +47,11 @@
   margin: 0 18px 18px 0;
   border-radius: 12px;
   overflow: hidden;
-  &:focus,
+  // &:focus,
-  &:hover,
+  // &:focus-within {
-  &:focus-within,
+  //   .focused(@boxShadow: 22px, @borderRadius: 12px);
-  &:active {
+  //   position: unset;
-    .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 {
-  &:focus-within,
-  &:active {
     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 {
-  &:focus-within,
-  &:active {
     .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 {
-  &:focus-within,
-  &:active {
     .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 {
-    &:focus-within,
-    &:active {
       .focused(@boxShadow: 22px, @borderRadius: 12px);
       position: unset;
     }

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';
 
-// 더미 데이터
+export default function RollingUnit({
-const imgArr = [
+  bannerData,
-  { img: image1, key: 1 },
+  index,
-  { img: image2, key: 2 },
+  imageType,
-  { img: image3, key: 3 },
+  onFocus,
-  { img: image4, key: 4 },
+  spotlightId,
-];
+}) {
-
-export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
   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[startIndex].shptmBanrTpNm === "LIVE" ||
-        bannerDetailInfos[currentPage].shptmBanrTpNm === "VOD" ? (
+        bannerDetailInfos[startIndex].shptmBanrTpNm === "VOD" ? (
         <VideoPlay></VideoPlay>
-      ) : bannerDetailInfos[currentPage].shptmBanrTpNm === "Today's Deals" ? (
+      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "Today's Deals" ? (
         <HomeTodayDeal
-          imgAlt={bannerDetailInfos[currentPage].imgAlt}
+          imgAlt={bannerDetailInfos[startIndex].imgAlt}
-          imageName={bannerDetailInfos[currentPage].tmnlImgNm}
+          imageName={bannerDetailInfos[startIndex].tmnlImgNm}
-          imgPath={bannerDetailInfos[currentPage].tmnlImgPath}
+          imgPath={bannerDetailInfos[startIndex].tmnlImgPath}
-          priceInfo={bannerDetailInfos[currentPage].priceInfo}
+          priceInfo={bannerDetailInfos[startIndex].priceInfo}
-          productId={bannerDetailInfos[currentPage].prdtId}
+          productId={bannerDetailInfos[startIndex].prdtId}
-          productName={bannerDetailInfos[currentPage].prdtNm}
+          productName={bannerDetailInfos[startIndex].prdtNm}
-          soldoutFlag={bannerDetailInfos[currentPage].soldoutFlag}
+          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>
   );
 }

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 Spottable from '@enact/spotlight/Spottable';
-import css from "./HomeTodayDeal.module.less";
+
+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
+    <div className={css.rollingWrap}>
-      className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
+      {rolling === true && (
-      onClick={() => handleClick(productId)}
+        <SpottableComponent
-    >
+          className={classNames(css.arrow, css.leftBtn)}
-      <div>
+        ></SpottableComponent>
-        <div className={css.textBox}>{productName}</div>
+      )}
-        <div className={css.accBox}>
+      <SpottableComponent
-          {discountedPrice}
+        className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
-          {discountedPrice != originalPrice ? (
+        onClick={() => handleClick(productId)}
-            <span className={css.saleAccBox}>{originalPrice}</span>
+      >
-          ) : (
+        <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}>
+        <div className={css.itemImgBox}>
-        <img src={imgPath} />
+          <img src={imgPath} />
-      </div>
+        </div>
+      </SpottableComponent>
+
+      {rolling === true && (
+        <SpottableComponent
+          className={classNames(css.arrow, css.rightBtn)}
+        ></SpottableComponent>
+      )}
     </div>
   );
 }

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 {
+.rollingWrap {
-  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;
   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 {
+    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%;
+      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 {
+  &:focus-within,
-    .position(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px);
+  &:focus {
-    .size(@w: 42px, @h: 42px);
+    &::after {
-    background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
+      .focused(@borderRadius: 12px);
-    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 {
+  .arrow {
-    .position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto);
+    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;
+    &.leftBtn {
-    &:focus,
+      .position(@position: absolute, @top: 200px, @left: 18px);
-    &:focus-within,
+      background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
-    &:hover,
+      &:focus,
-    &:active {
+      &:focus-within {
-      background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
+        background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
-    }
+      }
-  }
+    }
-}
+    &.rightBtn {
-
+      .position(@position: absolute, @top: 200px, @right: 18px);
-.itemBox.isHorizontal {
+      background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
-  position: relative;
+      &:focus,
-  background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_hor.png);
+      &:focus-within {
-  background-repeat: no-repeat;
+        background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
-  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");
     }
   }
 }