[디테일] 스타일 수정

- 스크롤시 하단으로 떨어지는부분에 대한 수정
 - 디테일 태그 및 노출 관련 부분에 대한 수정
 - qr하단  문구부분 스타일 수정.
 - 옵션부분 갯수 버튼 처리.

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

@@ -14,7 +14,6 @@ import {
 } from 'react-redux';
 
 import Spinner from '@enact/sandstone/Spinner';
-import DetailPanelSkeleton from './DetailPanelSkeleton/DetailPanelSkeleton';
 import Spotlight from '@enact/spotlight';
 import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
 
@@ -44,9 +43,10 @@ import {
   getQRCodeUrl,
 } from '../../utils/helperMethods';
 import { SpotlightIds } from '../../utils/SpotlightIds';
-import THeaderCustom from './components/THeaderCustom';
 import DetailPanelBackground from './components/DetailPanelBackground';
+import THeaderCustom from './components/THeaderCustom';
 import css from './DetailPanel.module.less';
+import DetailPanelSkeleton from './DetailPanelSkeleton/DetailPanelSkeleton';
 import ProductAllSection from './ProductAllSection/ProductAllSection';
 import ThemeItemListOverlay from './ThemeItemListOverlay/ThemeItemListOverlay';
 
@@ -55,7 +55,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
 
   const productData = useSelector((state) => state.main.productData);
   const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
-  const themeProductInfos = useSelector((state) => state.home.themeCurationDetailInfoData);
+  const themeProductInfos = useSelector(
+    (state) => state.home.themeCurationDetailInfoData
+  );
   const isLoading = useSelector((state) =>
     fp.pipe(() => state, fp.get("common.appStatus.showLoadingPanel.show"))()
   );
@@ -694,10 +696,10 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   }, []);
 
   return (
-    <div ref={containerRef} style={{ position: 'relative', width: '100%', height: '100%' }}>
+    <div ref={containerRef}>
       {/* 배경 이미지 및 그라데이션 컴포넌트 - 모든 콘텐츠 뒤에 렌더링 */}
       <DetailPanelBackground />
-      
+
       <TPanel
         isTabActivated={false}
         className={css.detailPanelWrap}

com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.module.less

@@ -7,7 +7,7 @@
   position: relative;
   z-index: 1; // 배경 컴포넌트(z-index: 0) 위에 표시
   background: transparent !important; // 투명 배경으로 설정하여 뒤의 배경 컴포넌트가 보이도록
-  
+  height: 100%;
   // 하위 요소들도 투명 배경 (detailPanelWrap 스코프 내에서만 적용)
   > * {
     background: transparent !important;

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less

@@ -230,8 +230,11 @@
   width: 100%;
   display: flex;
   align-items: center;
-  > div:last-child {
+  > div {
     margin-left: 10px;
+    &:first-child {
+      margin-left: 0px;
+    }
   }
 }
 
@@ -971,7 +974,7 @@
   flex: 1 1 0 !important;
   width: auto !important;
   height: 60px !important;
-  background: rgba(68, 68, 68, 0.50) !important;
+  background: rgba(68, 68, 68, 0.5) !important;
   border-radius: 6px !important;
   border: none !important;
   padding: 0 !important;
@@ -1002,7 +1005,7 @@
   flex: 1 1 0 !important;
   width: auto !important;
   height: 60px !important;
-  background: rgba(68, 68, 68, 0.50) !important;
+  background: rgba(68, 68, 68, 0.5) !important;
   border-radius: 6px !important;
   border: none !important;
   padding: 0 !important;

com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.jsx

@@ -65,11 +65,12 @@ export default function QRCode({
         qrCodeUrl && <TQRCode text={qrCodeUrl} width="190" height="190" />
       )}
       {/* todo : 시나리오,UI 릴리즈 후 */}
-      {/* <div className={css.tooltip}>
+      <div className={css.tooltip}>
         <div className={css.tooltipBody}>
-          {promotionCode ? promotionTooltip : tooltipDes}
+          {/* {promotionCode ? promotionTooltip : tooltipDes} */}
+          Scan for more information about the product.
         </div>
-      </div> */}
+      </div>
     </div>
   );
 }

com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less

@@ -15,4 +15,29 @@
       height: 240px;
     }
   }
+  .tooltip {
+    margin-top: 10px;
+    width: 240px;
+    height: 60px;
+    background: #000;
+    color: #fff;
+    padding: 10px;
+    border-radius: 4px;
+    position: relative;
+  }
+  .tooltipBody {
+    &::before {
+      border: 15px solid transparent;
+      border-bottom-color: #000;
+      content: "";
+      left: calc(50% - 15px);
+      position: absolute;
+      top: -28px;
+      z-index: 1;
+    }
+    height: 44px;
+    font-size: 20px;
+    line-height: 22px;
+    letter-spacing: -1px;
+  }
 }

com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx

@@ -40,7 +40,7 @@ import FavoriteBtn from '../components/FavoriteBtn';
 import styles from './BuyOption.module.less';
 import BuyOptionPriceBlock from './BuyOptionPriceBlock';
 import CustomDropDown from './CustomDropDown';
-import ProductEa from './ProductEa';
+import ProductQuantity from './ProductQuantity';
 
 const Container = SpotlightContainerDecorator(
   { spotlightRestrict: "self-only" },
@@ -592,7 +592,7 @@ const BuyOption = ({
               onSelect={handleQuantitySelect}
               spotlightId="buy-option-quantity-dropdown"
             /> */}
-            <ProductEa />
+            <ProductQuantity />
           </div>
         </div>
       </div>

com.twin.app.shoptime/src/views/DetailPanel/components/ProductEa.jsx

@@ -1,54 +0,0 @@
-import React, {
-  useCallback,
-  useState,
-} from 'react';
-
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-
-import decreaseBtnDim
-  from '../../../../assets/images/btn/btn-quantity-decrease-dim_new@3x.png';
-import decreaseBtnFoc
-  from '../../../../assets/images/btn/btn-quantity-decrease-foc@3x.png';
-import decreaseBtnNor
-  from '../../../../assets/images/btn/btn-quantity-decrease-nor@3x.png';
-import increaseBtnDim
-  from '../../../../assets/images/btn/btn-quantity-increase-dim@3x.png';
-import increaseBtnFoc
-  from '../../../../assets/images/btn/btn-quantity-increase-foc@3x.png';
-import increaseBtnNor
-  from '../../../../assets/images/btn/btn-quantity-increase-nor@3x.png';
-import CustomImage from '../../../components/CustomImage/CustomImage';
-import css from './ProductEa.module.less';
-
-const ProductEa = () => {
-  const Container = SpotlightContainerDecorator("div");
-  const [ea, setEa] = useState(1);
-
-  const minusClick = useCallback(() => {
-    if (ea > 1) {
-      setEa(ea - 1);
-    }
-  }, [ea]);
-  const plusClick = useCallback(() => {
-    setEa(ea + 1);
-  }, [ea]);
-
-  return (
-    <Container className={css.container}>
-      <CustomImage
-        src={decreaseBtnNor}
-        className={css.minusBtn}
-        onClick={minusClick}
-      />
-      <div className={css.inputBox}>{ea}</div>
-      <CustomImage
-        src={increaseBtnNor}
-        className={css.plusBtn}
-        onClick={plusClick}
-      />
-    </Container>
-  );
-};
-
-export default ProductEa;

com.twin.app.shoptime/src/views/DetailPanel/components/ProductEa.module.less

@@ -1,28 +0,0 @@
-@import "../../../style/CommonStyle.module.less";
-@import "../../../style/utils.module.less";
-
-.container {
-  width: 675px;
-  height: 60px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .minusBtn,
-  .plusBtn {
-    width: 60px;
-    height: 60px;
-    vertical-align: top;
-  }
-  .inputBox {
-    width: 525px;
-    height: 60px;
-    text-align: center;
-    background: #2f2d2d;
-    margin: 0 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-  }
-}

com.twin.app.shoptime/src/views/DetailPanel/components/ProductQuantity.jsx

@@ -0,0 +1,36 @@
+import React, {
+  useCallback,
+  useState,
+} from 'react';
+
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './ProductQuantity.module.less';
+
+const Container = SpotlightContainerDecorator("div");
+const SpotDiv = Spottable("div");
+
+const ProductQuantity = () => {
+  const [ea, setEa] = useState(1);
+
+  const minusClick = useCallback(() => {
+    if (ea > 1) {
+      setEa(ea - 1);
+    }
+  }, [ea]);
+  const plusClick = useCallback(() => {
+    setEa(ea + 1);
+  }, [ea]);
+
+  return (
+    <Container className={css.container}>
+      <SpotDiv className={css.minusBtn} onClick={minusClick} />
+      <div className={css.inputBox}>{ea}</div>
+      <SpotDiv className={css.plusBtn} onClick={plusClick} />
+    </Container>
+  );
+};
+
+export default ProductQuantity;

com.twin.app.shoptime/src/views/DetailPanel/components/ProductQuantity.module.less

@@ -0,0 +1,60 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.container {
+  width: 675px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .minusBtn,
+  .plusBtn {
+    width: 60px;
+    height: 60px;
+    vertical-align: top;
+    &:focus {
+    }
+    .minusImg,
+    .plusImg {
+      width: 60px;
+      height: 60px;
+      vertical-align: top;
+    }
+  }
+
+  .minusBtn {
+    width: 60px;
+    height: 60px;
+    vertical-align: top;
+    background-image: url("../../../../assets/images/btn/btn-quantity-decrease-nor@3x.png");
+    background-size: contain;
+    &:focus {
+      background-image: url("../../../../assets/images/btn/btn-quantity-decrease-foc@3x.png");
+      background-size: contain;
+    }
+  }
+  .plusBtn {
+    width: 60px;
+    height: 60px;
+    vertical-align: top;
+    background-image: url("../../../../assets/images/btn/btn-quantity-increase-nor@3x.png");
+    background-size: contain;
+    &:focus {
+      background-image: url("../../../../assets/images/btn/btn-quantity-increase-foc@3x.png");
+      background-size: contain;
+    }
+  }
+
+  .inputBox {
+    width: 525px;
+    height: 60px;
+    text-align: center;
+    background: #2f2d2d;
+    margin: 0 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+  }
+}