optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[상품상세] 스타일 작업 및 버튼 연결

Browse Source 
- 옵션 노출부분 버튼 디자인 수정
 - 구매 및 카트 버튼 연결.
This commit is contained in:
junghoon86.park
2025-09-25 17:31:53 +09:00
parent fd7253a456
commit 177d233ce9
5 changed files with 254 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
com.twin.app.shoptime/src/components/TButton/TButton.module.less
View File

@@ -54,6 +54,11 @@
max-width: 60px;
}
&.detailButton {
min-width: 180px;
max-width: 180px;
}
&.extra {
min-width: 350px;
max-width: 900px;

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

@@ -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 = ({
<Container className={styles.buy_option}>
<div className={styles.buy_option__left_section}>
{/* 동적 옵션 렌더링 */}
{productOptionInfos && productOptionInfos.length > 0 && productInfo?.optProdYn === 'Y' && (
<>
{/* 첫번째 옵션 (여러 옵션이 있을 때만) */}
{productOptionInfos.length > 1 && (
<div className={styles.buy_option__option_row}>
<div className={styles.buy_option__option_label}>
<div className={styles.buy_option__label_text}>OPTION 1</div>
</div>
<div className={styles.buy_option__option_control}>
<CustomDropDown
options={productOptionInfos.map((option) => option.optNm)}
selectedIndex={selectedBtnOptIdx}
onSelect={handleFirstOptionSelect}
spotlightId="buy-option-first-dropdown"
/>
</div>
</div>
)}
{/* 두번째 옵션 (옵션 상세값들) */}
{productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl &&
productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.length > 1 && (
{productOptionInfos &&
productOptionInfos.length > 0 &&
productInfo?.optProdYn === "Y" && (
<>
{/* 첫번째 옵션 (여러 옵션이 있을 때만) */}
{productOptionInfos.length > 1 && (
<div className={styles.buy_option__option_row}>
<div className={styles.buy_option__option_label}>
<div className={styles.buy_option__label_text}>
{productOptionInfos.length === 1 ? 'OPTION' : 'OPTION 2'}
OPTION 1
</div>
</div>
<div className={styles.buy_option__option_control}>
<CustomDropDown
options={
productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.map(
(detail) => 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"
/>
</div>
</div>
)}
</>
)}
{/* 두번째 옵션 (옵션 상세값들) */}
{productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl &&
productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.length >
1 && (
<div className={styles.buy_option__option_row}>
<div className={styles.buy_option__option_label}>
<div className={styles.buy_option__label_text}>
{productOptionInfos.length === 1
? "OPTION"
: "OPTION 2"}
</div>
</div>
<div className={styles.buy_option__option_control}>
<CustomDropDown
options={
productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.map(
(detail) => detail.prodOptCval
) || []
}
selectedIndex={selectedOptionItemIndex}
onSelect={handleSecondOptionSelect}
spotlightId="buy-option-second-dropdown"
/>
</div>
</div>
)}
</>
)}
{/* 수량 선택 */}
<div className={styles.buy_option__option_row}>
@@ -524,7 +586,7 @@ const BuyOption = ({
</div>
<div className={styles.buy_option__option_control}>
<CustomDropDown
options={['1', '2', '3', '4', '5']}
options={["1", "2", "3", "4", "5"]}
selectedIndex={quantity - 1}
onSelect={handleQuantitySelect}
spotlightId="buy-option-quantity-dropdown"
@@ -543,6 +605,7 @@ const BuyOption = ({
<TButton
className={styles.buy_option__buy_button}
spotlightId="buy-option-buy-now-button"
size="detailButton"
onClick={handleBuyNowClick}
>
<span className={styles.buy_option__button_text}>BUY NOW</span>
@@ -550,18 +613,11 @@ const BuyOption = ({
<TButton
className={styles.buy_option__cart_button}
spotlightId="buy-option-add-to-cart-button"
size="detailButton"
onClick={handleAddToCartClick}
>
<span className={styles.buy_option__button_text}>ADD TO CART</span>
</TButton>
<FavoriteBtn
selectedPatnrId={selectedPatnrId}
selectedPrdtId={selectedPrdtId}
favoriteFlag={favoriteFlag}
onFavoriteFlagChanged={onFavoriteFlagChanged}
logMenu={logMenu || 'DetailPage'}
className={styles.buy_option__favorite_button}
/>
</div>
</div>
@@ -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}
/>

35
com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.module.less
View File

@@ -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;
}
}

25
com.twin.app.shoptime/src/views/DetailPanel/components/BuyOptionPriceBlock.module.less
View File

@@ -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;
font-size: 24px;
font-weight: 400;
color: #eaeaea;
}

20
com.twin.app.shoptime/src/views/DetailPanel/components/CustomDropDown.module.less
View File

@@ -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;
}
}
}