[디테일] 스타일 수정

- 스크롤시 하단으로 떨어지는부분에 대한 수정 - 디테일 태그 및 노출 관련 부분에 대한 수정 - qr하단 문구부분 스타일 수정. - 옵션부분 갯수 버튼 처리.
2025-09-30 10:56:09 +09:00
parent 1f387f9327
commit f1b8edc965
10 changed files with 141 additions and 96 deletions
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/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}
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.module.less
+++ b/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;
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less
+++ b/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;
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.jsx
+++ b/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>
  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less
+++ b/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;
+  }
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx
+++ b/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>
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/ProductEa.jsx
+++ b/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;
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/ProductEa.module.less
+++ b/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;
-  }
-}
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/ProductQuantity.jsx
+++ b/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;
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/ProductQuantity.module.less
+++ b/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;
+  }
+}