[SHOPTIME-3160] Theme Detail / QR 툴팁과 버튼이 겹침

[수정파일]

   1. src/views/DetailPanel/UnableProduct/UnableOption.jsx
   2. src/views/DetailPanel/UnableProduct/UnableOption.module.less

[수정내용]

  1.  disclaimer 내용이 길어지면서 2줄이 되면서 버튼이 위로 올라가서 QRCode 말풍선과 UI가 겹치는현상이 생김
      2줄로 넘어가는 시점에서 Marqee 처리
This commit is contained in:
고동영
2024-10-08 14:49:29 +09:00
parent 42b52a803a
commit ce62a9cdea
2 changed files with 9 additions and 2 deletions

View File

@@ -4,6 +4,7 @@ import classNames from "classnames";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import Spotlight from "@enact/spotlight"; import Spotlight from "@enact/spotlight";
import Marquee from "@enact/ui/Marquee";
import { setShowPopup } from "../../../actions/commonActions"; import { setShowPopup } from "../../../actions/commonActions";
import TButton from "../../../components/TButton/TButton"; import TButton from "../../../components/TButton/TButton";
@@ -37,7 +38,10 @@ export default function UnableOption({
"isLoading", "isLoading",
(state) => state.common.appStatus?.showLoadingPanel?.show (state) => state.common.appStatus?.showLoadingPanel?.show
); );
const [favoriteFlag, setFavoriteFlag] = USE_STATE("favoriteFlag", productInfo?.favorYn); const [favoriteFlag, setFavoriteFlag] = USE_STATE(
"favoriteFlag",
productInfo?.favorYn
);
const tooltipDes = $L("Scan for more information about the product."); const tooltipDes = $L("Scan for more information about the product.");
const { const {
@@ -333,7 +337,9 @@ export default function UnableOption({
onFavoriteFlagChanged={onFavoriteFlagChanged} onFavoriteFlagChanged={onFavoriteFlagChanged}
/> />
</div> </div>
<div className={css.disclaimerContainer}>{productInfo?.disclaimer}</div> <Marquee marqueeOn="render" className={css.disclaimerContainer}>
{productInfo?.disclaimer}
</Marquee>
</div> </div>
</div> </div>
); );

View File

@@ -207,6 +207,7 @@
padding-left: 28px; padding-left: 28px;
line-height: 1.1; line-height: 1.1;
margin-top: 16px; margin-top: 16px;
width: 810px;
} }
} }
} }