diff --git a/com.twin.app.shoptime/src/components/TButton/TButton.module.less b/com.twin.app.shoptime/src/components/TButton/TButton.module.less index b835c395..61fc7db3 100644 --- a/com.twin.app.shoptime/src/components/TButton/TButton.module.less +++ b/com.twin.app.shoptime/src/components/TButton/TButton.module.less @@ -54,6 +54,11 @@ max-width: 60px; } + &.detailButton { + min-width: 180px; + max-width: 180px; + } + &.extra { min-width: 350px; max-width: 900px; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx index 00ca57fa..48fd4cf0 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx @@ -1,24 +1,50 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import React, { + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; + +import { + useDispatch, + useSelector, +} from 'react-redux'; + import Spotlight from '@enact/spotlight'; -import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator'; -import TButton from '../../../components/TButton/TButton'; -import CustomDropDown from './CustomDropDown'; -import { clearAllToasts } from '../../../actions/toastActions'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; + import { getMyInfoCheckoutInfo } from '../../../actions/checkoutActions'; -import { changeAppStatus, setShowPopup, setHidePopup } from '../../../actions/commonActions'; -import { sendLogPaymentEntry, sendLogTotalRecommend } from '../../../actions/logActions'; -import { pushPanel } from '../../../actions/panelActions'; -import { getProductOption, getProductOptionId } from '../../../actions/productActions'; +import { + changeAppStatus, + setHidePopup, + setShowPopup, + showError, +} from '../../../actions/commonActions'; import { getProductCouponSearch } from '../../../actions/couponActions'; -import * as Config from '../../../utils/Config'; -import { showError } from '../../../actions/commonActions'; -import { $L } from '../../../utils/helperMethods'; -import BuyOptionPriceBlock from './BuyOptionPriceBlock'; -import FavoriteBtn from '../components/FavoriteBtn'; +import { + sendLogPaymentEntry, + sendLogTotalRecommend, +} from '../../../actions/logActions'; +import { pushPanel } from '../../../actions/panelActions'; +import { + getProductOption, + getProductOptionId, +} from '../../../actions/productActions'; +import { clearAllToasts } from '../../../actions/toastActions'; +import TButton from '../../../components/TButton/TButton'; import TPopUp from '../../../components/TPopUp/TPopUp'; +import * as Config from '../../../utils/Config'; +import { $L } from '../../../utils/helperMethods'; +import FavoriteBtn from '../components/FavoriteBtn'; import styles from './BuyOption.module.less'; -const Container = SpotlightContainerDecorator({ restrict: 'self-only' }, 'div'); +import BuyOptionPriceBlock from './BuyOptionPriceBlock'; +import CustomDropDown from './CustomDropDown'; + +const Container = SpotlightContainerDecorator( + { spotlightRestrict: "self-only" }, + "div" +); const BuyOption = ({ patncNm, @@ -33,15 +59,23 @@ const BuyOption = ({ const dispatch = useDispatch(); // Redux 상태 (props가 있으면 props 우선, 없으면 Redux에서) - const { userId, userNumber } = useSelector((state) => state.common.appStatus.loginUserData); - const reduxProductInfo = useSelector((state) => state.product.productInfo); + const { userId, userNumber } = useSelector( + (state) => state.common.appStatus.loginUserData + ); + const reduxProductInfo = useSelector((state) => state.main.productData); const productInfo = propsProductInfo || reduxProductInfo; const productOptionInfos = useSelector((state) => state.product.prdtOptInfo); const productData = useSelector((state) => state.main.productData); - const { partnerCoupon } = useSelector((state) => state.coupon.productCouponSearchData || {}); - const { popupVisible, activePopup } = useSelector((state) => state.common.popup); + const { partnerCoupon } = useSelector( + (state) => state.coupon.productCouponSearchData || {} + ); + const { popupVisible, activePopup } = useSelector( + (state) => state.common.popup + ); const nowMenu = useSelector((state) => state.common.menu.nowMenu); - const webOSVersion = useSelector((state) => state.common.appStatus.webOSVersion); + const webOSVersion = useSelector( + (state) => state.common.appStatus.webOSVersion + ); // 옵션 선택 상태 관리 (SingleOption과 동일한 구조) const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0); @@ -68,26 +102,27 @@ const BuyOption = ({ couponInfo = partnerCoupon[0]; } - const { catCd, catNm, patncNm, patnrId, prdtId, prdtNm, priceInfo } = productData; + const { catCd, catNm, patncNm, patnrId, prdtId, prdtNm, priceInfo } = + productData; const { cpnSno, cpnTtl } = couponInfo || {}; const prodOptSno = (productOptionInfos && productOptionInfos.length > 0 && productOptionInfos[0]?.prodOptSno) || - ''; + ""; const prodOptTpCdCval = (productOptionInfos && productOptionInfos.length > 0 && productOptionInfos[0]?.prodOptTpCdCval) || - ''; + ""; return { - cpnSno: String(cpnSno) || '', - cpnTtl: cpnTtl || '', - dcAftrPrc: priceInfo.split('|')[1], - dcBefPrc: priceInfo.split('|')[0], - lgCatCd: catCd || '', - lgCatNm: catNm || '', + cpnSno: String(cpnSno) || "", + cpnTtl: cpnTtl || "", + dcAftrPrc: priceInfo.split("|")[1], + dcBefPrc: priceInfo.split("|")[0], + lgCatCd: catCd || "", + lgCatNm: catNm || "", patncNm, patnrId, prodId: prdtId, @@ -104,26 +139,27 @@ const BuyOption = ({ couponInfo = partnerCoupon[0]; } - const { catCd, catNm, patncNm, patnrId, prdtId, prdtNm, priceInfo } = productInfo; + const { catCd, catNm, patncNm, patnrId, prdtId, prdtNm, priceInfo } = + productInfo; const { cpnSno, cpnTtl } = couponInfo || {}; const prodOptSno = (productOptionInfos && productOptionInfos.length > 0 && productOptionInfos[0]?.prodOptSno) || - ''; + ""; const prodOptTpCdCval = (productOptionInfos && productOptionInfos.length > 0 && productOptionInfos[0]?.prodOptTpCdCval) || - ''; + ""; return { - cpnSno: String(cpnSno) || '', - cpnTtl: cpnTtl || '', - dcAftrPrc: priceInfo.split('|')[1], - dcBefPrc: priceInfo.split('|')[0], - lgCatCd: catCd || '', - lgCatNm: catNm || '', + cpnSno: String(cpnSno) || "", + cpnTtl: cpnTtl || "", + dcAftrPrc: priceInfo.split("|")[1], + dcBefPrc: priceInfo.split("|")[0], + lgCatCd: catCd || "", + lgCatNm: catNm || "", patncNm, patnrId, prodId: prdtId, @@ -139,7 +175,7 @@ const BuyOption = ({ // 옵션 리셋 로직 (SingleOption과 동일) useEffect(() => { - if (type !== 'theme') { + if (type !== "theme") { return; } @@ -186,20 +222,20 @@ const BuyOption = ({ useEffect(() => { if (!isSpotlight) { // isSpotlight이 false면 일반적인 BuyOption 포커스 - console.log('[BuyOption] Component mounted - focusing BUY NOW button'); + console.log("[BuyOption] Component mounted - focusing BUY NOW button"); setTimeout(() => { - Spotlight.focus('buy-option-buy-now-button'); + Spotlight.focus("buy-option-buy-now-button"); }, 100); return; } // isSpotlight이 true이고 SingleOption 동작이 필요한 경우 - if (productInfo?.optProdYn === 'N') { - Spotlight.focus('buy-option-buy-now-button'); + if (productInfo?.optProdYn === "N") { + Spotlight.focus("buy-option-buy-now-button"); } else if (productOptionInfos && productOptionInfos.length > 0) { - Spotlight.focus('buy-option-first-dropdown'); + Spotlight.focus("buy-option-first-dropdown"); if (productOptionInfos.length === 1) { - Spotlight.focus('buy-option-second-dropdown'); + Spotlight.focus("buy-option-second-dropdown"); } } }, [productOptionInfos, productInfo, isSpotlight]); @@ -247,37 +283,38 @@ const BuyOption = ({ } } - Spotlight.focus('buy-option-buy-now-button'); + Spotlight.focus("buy-option-buy-now-button"); } const handleBuyNowClick = useCallback(() => { - console.log('[BuyOption] BUY NOW clicked'); + console.log("[BuyOption] BUY NOW clicked"); - const optionName = renderOptionName(); - const optionValueName = renderOptionValue(); + // const optionName = renderOptionName(); + // const optionValueName = renderOptionValue(); - if (productInfo && productInfo?.soldoutFlag === 'Y') { + if (productInfo && productInfo?.soldoutFlag === "Y") { return; } - if (!userNumber || userNumber === '') { + if (!userNumber || userNumber === "") { return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); } - // 옵션 선택 검증 (SingleOption과 동일) - if ( - productOptionInfos && - productOptionInfos.length > 0 && - (optionName === 'SELECT' || optionValueName === 'SELECT') - ) { - return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); - } + // // 옵션 선택 검증 (SingleOption과 동일) + // if ( + // productOptionInfos && + // productOptionInfos.length > 0 && + // (optionName === "SELECT" || optionValueName === "SELECT") + // ) { + // console.log("###Test pjh 2", optionName); + // return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); + // } if (userNumber && selectedPatnrId && selectedPrdtId && quantity) { const { prodOptCval, priceInfo } = selectedOptions || {}; const { patncNm, brndNm, catNm, prdtNm, prdtId } = productInfo; - const regularPrice = priceInfo?.split('|')[0]; - const discountPrice = priceInfo?.split('|')[1]; - const discountRate = priceInfo?.split('|')[4]; + const regularPrice = priceInfo?.split("|")[0]; + const discountPrice = priceInfo?.split("|")[1]; + const discountRate = priceInfo?.split("|")[4]; dispatch( sendLogTotalRecommend({ @@ -288,7 +325,7 @@ const BuyOption = ({ price: discountRate ? discountPrice : regularPrice, discount: discountRate, brand: brndNm, - productOption: prodOptCval || '', + productOption: prodOptCval || "", category: catNm, contextName: Config.LOG_CONTEXT_NAME.DETAILPAGE, messageId: Config.LOG_MESSAGE_ID.BUY_NOW, @@ -299,7 +336,7 @@ const BuyOption = ({ getMyInfoCheckoutInfo( { mbrNo: userNumber, - dirPurcSelYn: 'Y', + dirPurcSelYn: "Y", cartList: [ { patnrId: selectedPatnrId, @@ -314,11 +351,13 @@ const BuyOption = ({ ) ); } + dispatch(clearAllToasts()); }, [ dispatch, userNumber, selectedPatnrId, selectedPrdtId, + selectedOptions, productInfo, productOptionInfos, quantity, @@ -327,14 +366,20 @@ const BuyOption = ({ // [임시] ADD TO CART 버튼 클릭 시 toast 닫기 const handleAddToCartClick = () => { - console.log('[BuyOption] ADD TO CART clicked - closing toast (임시)'); + console.log("[BuyOption] ADD TO CART clicked - closing toast (임시)"); dispatch(clearAllToasts()); + dispatch( + pushPanel({ + name: Config.panel_names.CART_PANEL, + }) + ); }; // 첫번째 옵션 선택 핸들러 (SingleOption과 동일) const handleFirstOptionSelect = (selected) => { const optionValIdx = selected.selected; - console.log('[BuyOption] First option selected:', optionValIdx); + console.log("[BuyOption] First option selected:", optionValIdx); + setSelectedBtnOptIdx(optionValIdx); setSelectedOptionItemIndex(0); setSelectedOptions(productOptionInfos[optionValIdx]?.prdtOptDtl[0]); @@ -345,11 +390,15 @@ const BuyOption = ({ // 두번째 옵션 선택 핸들러 (SingleOption과 동일) const handleSecondOptionSelect = (selected) => { const index = selected.selected; - console.log('[BuyOption] Second option selected:', index); + console.log("[BuyOption] Second option selected:", index); setSelectedOptionItemIndex(index); - setSelectedOptions(productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[index]); + setSelectedOptions( + productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[index] + ); dispatch( - getProductOptionId(productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[index]?.prodOptCdCval) + getProductOptionId( + productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[index]?.prodOptCdCval + ) ); setIsOptionValue(true); }; @@ -357,38 +406,44 @@ const BuyOption = ({ // 수량 선택 핸들러 const handleQuantitySelect = (selected) => { const qty = selected.selected + 1; - console.log('[BuyOption] Quantity selected:', qty); + console.log("[BuyOption] Quantity selected:", qty); setQuantity(qty); }; - // 옵션명 렌더링 함수 (SingleOption과 동일) - const renderOptionName = useCallback(() => { - if (selectedOptions) { - return productOptionInfos[selectedBtnOptIdx]?.optNm || null; - } - return $L('SELECT'); - }, [productOptionInfos, selectedOptions, selectedBtnOptIdx]); + // // 옵션명 렌더링 함수 (SingleOption과 동일) + // const renderOptionName = useCallback(() => { + // if (selectedOptions) { + // return productOptionInfos[selectedBtnOptIdx]?.optNm || null; + // } + // return $L("SELECT"); + // }, [productOptionInfos, selectedOptions, selectedBtnOptIdx]); - // 옵션값 렌더링 함수 (SingleOption과 동일) - const renderOptionValue = useCallback(() => { - if ( - productOptionInfos && - productOptionInfos[selectedBtnOptIdx] && - productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl && - productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.length > 0 && - isOptionValue - ) { - return ( - productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[selectedOptionItemIndex]?.prodOptCval || - null - ); - } - return $L('SELECT'); - }, [productOptionInfos, selectedBtnOptIdx, isOptionValue, selectedOptionItemIndex]); + // // 옵션값 렌더링 함수 (SingleOption과 동일) + // const renderOptionValue = useCallback(() => { + // if ( + // productOptionInfos && + // productOptionInfos[selectedBtnOptIdx] && + // productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl && + // productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.length > 0 && + // isOptionValue + // ) { + // return ( + // productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[ + // selectedOptionItemIndex + // ]?.prodOptCval || null + // ); + // } + // return $L("SELECT"); + // }, [ + // productOptionInfos, + // selectedBtnOptIdx, + // isOptionValue, + // selectedOptionItemIndex, + // ]); // Favorite 플래그 업데이트 (SingleOption과 동일) useEffect(() => { - setFavoriteFlag(productInfo?.favorYn ? productInfo?.favorYn : 'N'); + setFavoriteFlag(productInfo?.favorYn ? productInfo?.favorYn : "N"); }, [productInfo]); // Favorite 플래그 변경 콜백 (SingleOption과 동일) @@ -407,12 +462,12 @@ const BuyOption = ({ // 로그인 팝업 텍스트 로직 (SingleOption과 동일) const loginPopupText = useMemo(() => { if (!userNumber) { - return $L('Would you like to sign in?'); + return $L("Would you like to sign in?"); } - if (hasOnClose) { - return $L('Please select Option'); + if (!hasOnClose) { + return $L("Please select Option"); } - return $L('Would you like to sign in?'); + return $L("Would you like to sign in?"); }, [hasOnClose, userNumber]); // 팝업 닫기 핸들러 (SingleOption과 동일) @@ -421,10 +476,10 @@ const BuyOption = ({ dispatch(setHidePopup()); let currentSpot; - if (typeof spotlightId === 'string') { + if (typeof spotlightId === "string") { currentSpot = spotlightId; } else { - currentSpot = 'buy-option-buy-now-button'; + currentSpot = "buy-option-buy-now-button"; } if (currentSpot) { @@ -439,9 +494,9 @@ const BuyOption = ({ // 로그인 팝업 열기 핸들러 (SingleOption과 동일) const handleLoginPopUpOpen = useCallback(() => { if (!userNumber) { - if (webOSVersion >= '6.0') { + if (webOSVersion >= "6.0") { setTimeout(() => { - Spotlight.focus('buy-option-buy-now-button'); + Spotlight.focus("buy-option-buy-now-button"); }); dispatch(setHidePopup()); @@ -455,11 +510,11 @@ const BuyOption = ({ if (hasOnClose) { dispatch(setHidePopup()); - let spotlightId = 'buy-option-first-dropdown'; + let spotlightId = "buy-option-first-dropdown"; //옵션이 하나만 있는경우 isOptionValue === false if (!isOptionValue) { - spotlightId = 'buy-option-second-dropdown'; + spotlightId = "buy-option-second-dropdown"; } setTimeout(() => { Spotlight.focus(spotlightId); @@ -472,50 +527,57 @@ const BuyOption = ({
{/* 동적 옵션 렌더링 */} - {productOptionInfos && productOptionInfos.length > 0 && productInfo?.optProdYn === 'Y' && ( - <> - {/* 첫번째 옵션 (여러 옵션이 있을 때만) */} - {productOptionInfos.length > 1 && ( -
-
-
OPTION 1
-
-
- option.optNm)} - selectedIndex={selectedBtnOptIdx} - onSelect={handleFirstOptionSelect} - spotlightId="buy-option-first-dropdown" - /> -
-
- )} - - {/* 두번째 옵션 (옵션 상세값들) */} - {productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl && - productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.length > 1 && ( + {productOptionInfos && + productOptionInfos.length > 0 && + productInfo?.optProdYn === "Y" && ( + <> + {/* 첫번째 옵션 (여러 옵션이 있을 때만) */} + {productOptionInfos.length > 1 && (
- {productOptionInfos.length === 1 ? 'OPTION' : 'OPTION 2'} + OPTION 1
detail.prodOptCval - ) || [] - } - selectedIndex={selectedOptionItemIndex} - onSelect={handleSecondOptionSelect} - spotlightId="buy-option-second-dropdown" + options={productOptionInfos.map((option) => option.optNm)} + selectedIndex={selectedBtnOptIdx} + onSelect={handleFirstOptionSelect} + spotlightId="buy-option-first-dropdown" />
)} - - )} + + {/* 두번째 옵션 (옵션 상세값들) */} + {productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl && + productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.length > + 1 && ( +
+
+
+ {productOptionInfos.length === 1 + ? "OPTION" + : "OPTION 2"} +
+
+
+ detail.prodOptCval + ) || [] + } + selectedIndex={selectedOptionItemIndex} + onSelect={handleSecondOptionSelect} + spotlightId="buy-option-second-dropdown" + /> +
+
+ )} + + )} {/* 수량 선택 */}
@@ -524,7 +586,7 @@ const BuyOption = ({
BUY NOW @@ -550,18 +613,11 @@ const BuyOption = ({ ADD TO CART -
@@ -574,8 +630,8 @@ const BuyOption = ({ text={loginPopupText} hasButton hasOnClose={hasOnClose} - button1Text={$L('OK')} - button2Text={$L('CANCEL')} + button1Text={$L("OK")} + button2Text={$L("CANCEL")} onClick={handleLoginPopUpOpen} onClose={onClose} /> @@ -584,4 +640,4 @@ const BuyOption = ({ ); }; -export default BuyOption; \ No newline at end of file +export default BuyOption; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.module.less index ae645897..e80fd027 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.module.less @@ -3,12 +3,18 @@ width: 100%; height: 360px; padding: 60px 70px; - background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 45%, rgba(0, 0, 0, 0.40) 100%), rgba(30, 30, 30, 0.95); - overflow: hidden; + background: + linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.4) 45%, + rgba(0, 0, 0, 0.4) 100% + ), + rgba(30, 30, 30, 0.95); + // overflow: hidden; display: flex; justify-content: center; - align-items: flex-start; - + align-items: flex-end; // buy-option__left-section (Element) &__left_section { flex: 1 1 0; @@ -43,9 +49,9 @@ // buy-option__label-text (Element) &__label_text { - color: #EAEAEA; + color: #eaeaea; font-size: 25px; - font-family: 'LG Smart UI'; + font-family: "LG Smart UI"; font-weight: 700; line-height: 35px; word-wrap: break-word; @@ -87,7 +93,7 @@ width: 180px; height: 60px; padding: 20px 30px; - background: #C72054; + background: #2f2d2d; overflow: hidden; border-radius: 6px; display: flex; @@ -96,7 +102,7 @@ margin-right: 15px; &:focus { - background: #D73B69; + background: #d73b69; } } @@ -104,17 +110,16 @@ &__cart_button { width: 180px; height: 60px; - padding: 20px 30px; - background: #2F2D2D; + padding: 20px 14px; + background: #2f2d2d; overflow: hidden; border-radius: 6px; display: flex; justify-content: center; align-items: center; - margin-right: 15px; &:focus { - background: #4a4a4a; + background: #d73b69; } } @@ -122,13 +127,9 @@ &__button_text { color: white; font-size: 25px; - font-family: 'LG Smart UI'; + font-family: "LG Smart UI"; font-weight: 600; line-height: 35px; text-align: center; } - - &__favorite_button { - display: flex; - } } diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOptionPriceBlock.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOptionPriceBlock.module.less index 5958313d..983780c3 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOptionPriceBlock.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/BuyOptionPriceBlock.module.less @@ -12,9 +12,9 @@ } .price_label { - font-size: 14px; - color: #666; - font-weight: 500; + font-size: 22px; + color: #eaeaea; + font-weight: 700; } .price_value_group { @@ -24,9 +24,9 @@ } .price_value { - font-size: 16px; - font-weight: 600; - color: #333; + font-size: 38px; + font-weight: 700; + color: #eaeaea; } .shipping_row { @@ -34,16 +34,17 @@ justify-content: space-between; align-items: center; padding-top: 8px; - border-top: 1px solid #eee; } .shipping_label { - font-size: 12px; - color: #666; + font-size: 22px; + color: #eaeaea; + font-weight: 400; + letter-spacing: -2px; } .shipping_value { - font-size: 12px; - font-weight: 500; - color: #333; -} \ No newline at end of file + font-size: 24px; + font-weight: 400; + color: #eaeaea; +} diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/CustomDropDown.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/CustomDropDown.module.less index ba64f445..e5f480dd 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/CustomDropDown.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/CustomDropDown.module.less @@ -8,7 +8,7 @@ &__button { width: 675px; height: 60px; - background-color: #7A808D; + background-color: #7a808d; border-radius: 6px; padding: 20px 19px; display: flex; @@ -17,16 +17,16 @@ cursor: pointer; &:focus { - background-color: #C72054; + background-color: #c72054; } } // custom-dropdown__button--expanded (Modifier) &__button_expanded { - background-color: #4A4C50 !important; + background-color: #4a4c50 !important; &:focus { - background-color: #4A4C50 !important; + background-color: #4a4c50 !important; } } @@ -34,7 +34,7 @@ &__text { color: white; font-size: 24px; - font-family: 'LG Smart UI'; + font-family: "LG Smart UI"; font-weight: 700; line-height: 24px; text-align: left; @@ -64,11 +64,11 @@ bottom: 64px; left: 0; width: 675px; - background-color: #7A808D; + background-color: #7a808d; border-radius: 6px; box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3); z-index: 1000; - overflow: visible; + overflow: hidden; } // custom-dropdown__option (Element) @@ -78,7 +78,7 @@ padding: 20px 19px; color: white; font-size: 24px; - font-family: 'LG Smart UI'; + font-family: "LG Smart UI"; font-weight: 700; line-height: 24px; display: flex; @@ -87,12 +87,12 @@ &:hover, &:focus { - background-color: #C72054; + background-color: #c72054; } // custom-dropdown__option--selected (Modifier) &_selected { - background-color: #C72054; + background-color: #c72054; } } -} \ No newline at end of file +}