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; max-width: 60px;
} }
&.detailButton {
min-width: 180px;
max-width: 180px;
}
&.extra { &.extra {
min-width: 350px; min-width: 350px;
max-width: 900px; max-width: 900px;

356
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 React, {
import { useDispatch, useSelector } from 'react-redux'; useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import {
useDispatch,
useSelector,
} from 'react-redux';
import Spotlight from '@enact/spotlight'; import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator'; import SpotlightContainerDecorator
import TButton from '../../../components/TButton/TButton'; from '@enact/spotlight/SpotlightContainerDecorator';
import CustomDropDown from './CustomDropDown';
import { clearAllToasts } from '../../../actions/toastActions';
import { getMyInfoCheckoutInfo } from '../../../actions/checkoutActions'; import { getMyInfoCheckoutInfo } from '../../../actions/checkoutActions';
import { changeAppStatus, setShowPopup, setHidePopup } from '../../../actions/commonActions'; import {
import { sendLogPaymentEntry, sendLogTotalRecommend } from '../../../actions/logActions'; changeAppStatus,
import { pushPanel } from '../../../actions/panelActions'; setHidePopup,
import { getProductOption, getProductOptionId } from '../../../actions/productActions'; setShowPopup,
showError,
} from '../../../actions/commonActions';
import { getProductCouponSearch } from '../../../actions/couponActions'; import { getProductCouponSearch } from '../../../actions/couponActions';
import * as Config from '../../../utils/Config'; import {
import { showError } from '../../../actions/commonActions'; sendLogPaymentEntry,
import { $L } from '../../../utils/helperMethods'; sendLogTotalRecommend,
import BuyOptionPriceBlock from './BuyOptionPriceBlock'; } from '../../../actions/logActions';
import FavoriteBtn from '../components/FavoriteBtn'; 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 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'; 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 = ({ const BuyOption = ({
patncNm, patncNm,
@@ -33,15 +59,23 @@ const BuyOption = ({
const dispatch = useDispatch(); const dispatch = useDispatch();
// Redux 상태 (props가 있으면 props 우선, 없으면 Redux에서) // Redux 상태 (props가 있으면 props 우선, 없으면 Redux에서)
const { userId, userNumber } = useSelector((state) => state.common.appStatus.loginUserData); const { userId, userNumber } = useSelector(
const reduxProductInfo = useSelector((state) => state.product.productInfo); (state) => state.common.appStatus.loginUserData
);
const reduxProductInfo = useSelector((state) => state.main.productData);
const productInfo = propsProductInfo || reduxProductInfo; const productInfo = propsProductInfo || reduxProductInfo;
const productOptionInfos = useSelector((state) => state.product.prdtOptInfo); const productOptionInfos = useSelector((state) => state.product.prdtOptInfo);
const productData = useSelector((state) => state.main.productData); const productData = useSelector((state) => state.main.productData);
const { partnerCoupon } = useSelector((state) => state.coupon.productCouponSearchData || {}); const { partnerCoupon } = useSelector(
const { popupVisible, activePopup } = useSelector((state) => state.common.popup); (state) => state.coupon.productCouponSearchData || {}
);
const { popupVisible, activePopup } = useSelector(
(state) => state.common.popup
);
const nowMenu = useSelector((state) => state.common.menu.nowMenu); 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과 동일한 구조) // 옵션 선택 상태 관리 (SingleOption과 동일한 구조)
const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0); const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0);
@@ -68,26 +102,27 @@ const BuyOption = ({
couponInfo = partnerCoupon[0]; 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 { cpnSno, cpnTtl } = couponInfo || {};
const prodOptSno = const prodOptSno =
(productOptionInfos && (productOptionInfos &&
productOptionInfos.length > 0 && productOptionInfos.length > 0 &&
productOptionInfos[0]?.prodOptSno) || productOptionInfos[0]?.prodOptSno) ||
''; "";
const prodOptTpCdCval = const prodOptTpCdCval =
(productOptionInfos && (productOptionInfos &&
productOptionInfos.length > 0 && productOptionInfos.length > 0 &&
productOptionInfos[0]?.prodOptTpCdCval) || productOptionInfos[0]?.prodOptTpCdCval) ||
''; "";
return { return {
cpnSno: String(cpnSno) || '', cpnSno: String(cpnSno) || "",
cpnTtl: cpnTtl || '', cpnTtl: cpnTtl || "",
dcAftrPrc: priceInfo.split('|')[1], dcAftrPrc: priceInfo.split("|")[1],
dcBefPrc: priceInfo.split('|')[0], dcBefPrc: priceInfo.split("|")[0],
lgCatCd: catCd || '', lgCatCd: catCd || "",
lgCatNm: catNm || '', lgCatNm: catNm || "",
patncNm, patncNm,
patnrId, patnrId,
prodId: prdtId, prodId: prdtId,
@@ -104,26 +139,27 @@ const BuyOption = ({
couponInfo = partnerCoupon[0]; 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 { cpnSno, cpnTtl } = couponInfo || {};
const prodOptSno = const prodOptSno =
(productOptionInfos && (productOptionInfos &&
productOptionInfos.length > 0 && productOptionInfos.length > 0 &&
productOptionInfos[0]?.prodOptSno) || productOptionInfos[0]?.prodOptSno) ||
''; "";
const prodOptTpCdCval = const prodOptTpCdCval =
(productOptionInfos && (productOptionInfos &&
productOptionInfos.length > 0 && productOptionInfos.length > 0 &&
productOptionInfos[0]?.prodOptTpCdCval) || productOptionInfos[0]?.prodOptTpCdCval) ||
''; "";
return { return {
cpnSno: String(cpnSno) || '', cpnSno: String(cpnSno) || "",
cpnTtl: cpnTtl || '', cpnTtl: cpnTtl || "",
dcAftrPrc: priceInfo.split('|')[1], dcAftrPrc: priceInfo.split("|")[1],
dcBefPrc: priceInfo.split('|')[0], dcBefPrc: priceInfo.split("|")[0],
lgCatCd: catCd || '', lgCatCd: catCd || "",
lgCatNm: catNm || '', lgCatNm: catNm || "",
patncNm, patncNm,
patnrId, patnrId,
prodId: prdtId, prodId: prdtId,
@@ -139,7 +175,7 @@ const BuyOption = ({
// 옵션 리셋 로직 (SingleOption과 동일) // 옵션 리셋 로직 (SingleOption과 동일)
useEffect(() => { useEffect(() => {
if (type !== 'theme') { if (type !== "theme") {
return; return;
} }
@@ -186,20 +222,20 @@ const BuyOption = ({
useEffect(() => { useEffect(() => {
if (!isSpotlight) { if (!isSpotlight) {
// isSpotlight이 false면 일반적인 BuyOption 포커스 // isSpotlight이 false면 일반적인 BuyOption 포커스
console.log('[BuyOption] Component mounted - focusing BUY NOW button'); console.log("[BuyOption] Component mounted - focusing BUY NOW button");
setTimeout(() => { setTimeout(() => {
Spotlight.focus('buy-option-buy-now-button'); Spotlight.focus("buy-option-buy-now-button");
}, 100); }, 100);
return; return;
} }
// isSpotlight이 true이고 SingleOption 동작이 필요한 경우 // isSpotlight이 true이고 SingleOption 동작이 필요한 경우
if (productInfo?.optProdYn === 'N') { if (productInfo?.optProdYn === "N") {
Spotlight.focus('buy-option-buy-now-button'); Spotlight.focus("buy-option-buy-now-button");
} else if (productOptionInfos && productOptionInfos.length > 0) { } else if (productOptionInfos && productOptionInfos.length > 0) {
Spotlight.focus('buy-option-first-dropdown'); Spotlight.focus("buy-option-first-dropdown");
if (productOptionInfos.length === 1) { if (productOptionInfos.length === 1) {
Spotlight.focus('buy-option-second-dropdown'); Spotlight.focus("buy-option-second-dropdown");
} }
} }
}, [productOptionInfos, productInfo, isSpotlight]); }, [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(() => { const handleBuyNowClick = useCallback(() => {
console.log('[BuyOption] BUY NOW clicked'); console.log("[BuyOption] BUY NOW clicked");
const optionName = renderOptionName(); // const optionName = renderOptionName();
const optionValueName = renderOptionValue(); // const optionValueName = renderOptionValue();
if (productInfo && productInfo?.soldoutFlag === 'Y') { if (productInfo && productInfo?.soldoutFlag === "Y") {
return; return;
} }
if (!userNumber || userNumber === '') { if (!userNumber || userNumber === "") {
return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup));
} }
// 옵션 선택 검증 (SingleOption과 동일) // // 옵션 선택 검증 (SingleOption과 동일)
if ( // if (
productOptionInfos && // productOptionInfos &&
productOptionInfos.length > 0 && // productOptionInfos.length > 0 &&
(optionName === 'SELECT' || optionValueName === 'SELECT') // (optionName === "SELECT" || optionValueName === "SELECT")
) { // ) {
return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); // console.log("###Test pjh 2", optionName);
} // return dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup));
// }
if (userNumber && selectedPatnrId && selectedPrdtId && quantity) { if (userNumber && selectedPatnrId && selectedPrdtId && quantity) {
const { prodOptCval, priceInfo } = selectedOptions || {}; const { prodOptCval, priceInfo } = selectedOptions || {};
const { patncNm, brndNm, catNm, prdtNm, prdtId } = productInfo; const { patncNm, brndNm, catNm, prdtNm, prdtId } = productInfo;
const regularPrice = priceInfo?.split('|')[0]; const regularPrice = priceInfo?.split("|")[0];
const discountPrice = priceInfo?.split('|')[1]; const discountPrice = priceInfo?.split("|")[1];
const discountRate = priceInfo?.split('|')[4]; const discountRate = priceInfo?.split("|")[4];
dispatch( dispatch(
sendLogTotalRecommend({ sendLogTotalRecommend({
@@ -288,7 +325,7 @@ const BuyOption = ({
price: discountRate ? discountPrice : regularPrice, price: discountRate ? discountPrice : regularPrice,
discount: discountRate, discount: discountRate,
brand: brndNm, brand: brndNm,
productOption: prodOptCval || '', productOption: prodOptCval || "",
category: catNm, category: catNm,
contextName: Config.LOG_CONTEXT_NAME.DETAILPAGE, contextName: Config.LOG_CONTEXT_NAME.DETAILPAGE,
messageId: Config.LOG_MESSAGE_ID.BUY_NOW, messageId: Config.LOG_MESSAGE_ID.BUY_NOW,
@@ -299,7 +336,7 @@ const BuyOption = ({
getMyInfoCheckoutInfo( getMyInfoCheckoutInfo(
{ {
mbrNo: userNumber, mbrNo: userNumber,
dirPurcSelYn: 'Y', dirPurcSelYn: "Y",
cartList: [ cartList: [
{ {
patnrId: selectedPatnrId, patnrId: selectedPatnrId,
@@ -314,11 +351,13 @@ const BuyOption = ({
) )
); );
} }
dispatch(clearAllToasts());
}, [ }, [
dispatch, dispatch,
userNumber, userNumber,
selectedPatnrId, selectedPatnrId,
selectedPrdtId, selectedPrdtId,
selectedOptions,
productInfo, productInfo,
productOptionInfos, productOptionInfos,
quantity, quantity,
@@ -327,14 +366,20 @@ const BuyOption = ({
// [임시] ADD TO CART 버튼 클릭 시 toast 닫기 // [임시] ADD TO CART 버튼 클릭 시 toast 닫기
const handleAddToCartClick = () => { const handleAddToCartClick = () => {
console.log('[BuyOption] ADD TO CART clicked - closing toast (임시)'); console.log("[BuyOption] ADD TO CART clicked - closing toast (임시)");
dispatch(clearAllToasts()); dispatch(clearAllToasts());
dispatch(
pushPanel({
name: Config.panel_names.CART_PANEL,
})
);
}; };
// 첫번째 옵션 선택 핸들러 (SingleOption과 동일) // 첫번째 옵션 선택 핸들러 (SingleOption과 동일)
const handleFirstOptionSelect = (selected) => { const handleFirstOptionSelect = (selected) => {
const optionValIdx = selected.selected; const optionValIdx = selected.selected;
console.log('[BuyOption] First option selected:', optionValIdx); console.log("[BuyOption] First option selected:", optionValIdx);
setSelectedBtnOptIdx(optionValIdx); setSelectedBtnOptIdx(optionValIdx);
setSelectedOptionItemIndex(0); setSelectedOptionItemIndex(0);
setSelectedOptions(productOptionInfos[optionValIdx]?.prdtOptDtl[0]); setSelectedOptions(productOptionInfos[optionValIdx]?.prdtOptDtl[0]);
@@ -345,11 +390,15 @@ const BuyOption = ({
// 두번째 옵션 선택 핸들러 (SingleOption과 동일) // 두번째 옵션 선택 핸들러 (SingleOption과 동일)
const handleSecondOptionSelect = (selected) => { const handleSecondOptionSelect = (selected) => {
const index = selected.selected; const index = selected.selected;
console.log('[BuyOption] Second option selected:', index); console.log("[BuyOption] Second option selected:", index);
setSelectedOptionItemIndex(index); setSelectedOptionItemIndex(index);
setSelectedOptions(productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[index]); setSelectedOptions(
productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[index]
);
dispatch( dispatch(
getProductOptionId(productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[index]?.prodOptCdCval) getProductOptionId(
productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[index]?.prodOptCdCval
)
); );
setIsOptionValue(true); setIsOptionValue(true);
}; };
@@ -357,38 +406,44 @@ const BuyOption = ({
// 수량 선택 핸들러 // 수량 선택 핸들러
const handleQuantitySelect = (selected) => { const handleQuantitySelect = (selected) => {
const qty = selected.selected + 1; const qty = selected.selected + 1;
console.log('[BuyOption] Quantity selected:', qty); console.log("[BuyOption] Quantity selected:", qty);
setQuantity(qty); setQuantity(qty);
}; };
// 옵션명 렌더링 함수 (SingleOption과 동일) // // 옵션명 렌더링 함수 (SingleOption과 동일)
const renderOptionName = useCallback(() => { // const renderOptionName = useCallback(() => {
if (selectedOptions) { // if (selectedOptions) {
return productOptionInfos[selectedBtnOptIdx]?.optNm || null; // return productOptionInfos[selectedBtnOptIdx]?.optNm || null;
} // }
return $L('SELECT'); // return $L("SELECT");
}, [productOptionInfos, selectedOptions, selectedBtnOptIdx]); // }, [productOptionInfos, selectedOptions, selectedBtnOptIdx]);
// 옵션값 렌더링 함수 (SingleOption과 동일) // // 옵션값 렌더링 함수 (SingleOption과 동일)
const renderOptionValue = useCallback(() => { // const renderOptionValue = useCallback(() => {
if ( // if (
productOptionInfos && // productOptionInfos &&
productOptionInfos[selectedBtnOptIdx] && // productOptionInfos[selectedBtnOptIdx] &&
productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl && // productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl &&
productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.length > 0 && // productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.length > 0 &&
isOptionValue // isOptionValue
) { // ) {
return ( // return (
productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[selectedOptionItemIndex]?.prodOptCval || // productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl[
null // selectedOptionItemIndex
); // ]?.prodOptCval || null
} // );
return $L('SELECT'); // }
}, [productOptionInfos, selectedBtnOptIdx, isOptionValue, selectedOptionItemIndex]); // return $L("SELECT");
// }, [
// productOptionInfos,
// selectedBtnOptIdx,
// isOptionValue,
// selectedOptionItemIndex,
// ]);
// Favorite 플래그 업데이트 (SingleOption과 동일) // Favorite 플래그 업데이트 (SingleOption과 동일)
useEffect(() => { useEffect(() => {
setFavoriteFlag(productInfo?.favorYn ? productInfo?.favorYn : 'N'); setFavoriteFlag(productInfo?.favorYn ? productInfo?.favorYn : "N");
}, [productInfo]); }, [productInfo]);
// Favorite 플래그 변경 콜백 (SingleOption과 동일) // Favorite 플래그 변경 콜백 (SingleOption과 동일)
@@ -407,12 +462,12 @@ const BuyOption = ({
// 로그인 팝업 텍스트 로직 (SingleOption과 동일) // 로그인 팝업 텍스트 로직 (SingleOption과 동일)
const loginPopupText = useMemo(() => { const loginPopupText = useMemo(() => {
if (!userNumber) { if (!userNumber) {
return $L('Would you like to sign in?'); return $L("Would you like to sign in?");
} }
if (hasOnClose) { if (!hasOnClose) {
return $L('Please select Option'); return $L("Please select Option");
} }
return $L('Would you like to sign in?'); return $L("Would you like to sign in?");
}, [hasOnClose, userNumber]); }, [hasOnClose, userNumber]);
// 팝업 닫기 핸들러 (SingleOption과 동일) // 팝업 닫기 핸들러 (SingleOption과 동일)
@@ -421,10 +476,10 @@ const BuyOption = ({
dispatch(setHidePopup()); dispatch(setHidePopup());
let currentSpot; let currentSpot;
if (typeof spotlightId === 'string') { if (typeof spotlightId === "string") {
currentSpot = spotlightId; currentSpot = spotlightId;
} else { } else {
currentSpot = 'buy-option-buy-now-button'; currentSpot = "buy-option-buy-now-button";
} }
if (currentSpot) { if (currentSpot) {
@@ -439,9 +494,9 @@ const BuyOption = ({
// 로그인 팝업 열기 핸들러 (SingleOption과 동일) // 로그인 팝업 열기 핸들러 (SingleOption과 동일)
const handleLoginPopUpOpen = useCallback(() => { const handleLoginPopUpOpen = useCallback(() => {
if (!userNumber) { if (!userNumber) {
if (webOSVersion >= '6.0') { if (webOSVersion >= "6.0") {
setTimeout(() => { setTimeout(() => {
Spotlight.focus('buy-option-buy-now-button'); Spotlight.focus("buy-option-buy-now-button");
}); });
dispatch(setHidePopup()); dispatch(setHidePopup());
@@ -455,11 +510,11 @@ const BuyOption = ({
if (hasOnClose) { if (hasOnClose) {
dispatch(setHidePopup()); dispatch(setHidePopup());
let spotlightId = 'buy-option-first-dropdown'; let spotlightId = "buy-option-first-dropdown";
//옵션이 하나만 있는경우 isOptionValue === false //옵션이 하나만 있는경우 isOptionValue === false
if (!isOptionValue) { if (!isOptionValue) {
spotlightId = 'buy-option-second-dropdown'; spotlightId = "buy-option-second-dropdown";
} }
setTimeout(() => { setTimeout(() => {
Spotlight.focus(spotlightId); Spotlight.focus(spotlightId);
@@ -472,50 +527,57 @@ const BuyOption = ({
<Container className={styles.buy_option}> <Container className={styles.buy_option}>
<div className={styles.buy_option__left_section}> <div className={styles.buy_option__left_section}>
{/* 동적 옵션 렌더링 */} {/* 동적 옵션 렌더링 */}
{productOptionInfos && productOptionInfos.length > 0 && productInfo?.optProdYn === 'Y' && ( {productOptionInfos &&
<> productOptionInfos.length > 0 &&
{/* 첫번째 옵션 (여러 옵션이 있을 때만) */} productInfo?.optProdYn === "Y" && (
{productOptionInfos.length > 1 && ( <>
<div className={styles.buy_option__option_row}> {/* 첫번째 옵션 (여러 옵션이 있을 때만) */}
<div className={styles.buy_option__option_label}> {productOptionInfos.length > 1 && (
<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 && (
<div className={styles.buy_option__option_row}> <div className={styles.buy_option__option_row}>
<div className={styles.buy_option__option_label}> <div className={styles.buy_option__option_label}>
<div className={styles.buy_option__label_text}> <div className={styles.buy_option__label_text}>
{productOptionInfos.length === 1 ? 'OPTION' : 'OPTION 2'} OPTION 1
</div> </div>
</div> </div>
<div className={styles.buy_option__option_control}> <div className={styles.buy_option__option_control}>
<CustomDropDown <CustomDropDown
options={ options={productOptionInfos.map((option) => option.optNm)}
productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.map( selectedIndex={selectedBtnOptIdx}
(detail) => detail.prodOptCval onSelect={handleFirstOptionSelect}
) || [] spotlightId="buy-option-first-dropdown"
}
selectedIndex={selectedOptionItemIndex}
onSelect={handleSecondOptionSelect}
spotlightId="buy-option-second-dropdown"
/> />
</div> </div>
</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}> <div className={styles.buy_option__option_row}>
@@ -524,7 +586,7 @@ const BuyOption = ({
</div> </div>
<div className={styles.buy_option__option_control}> <div className={styles.buy_option__option_control}>
<CustomDropDown <CustomDropDown
options={['1', '2', '3', '4', '5']} options={["1", "2", "3", "4", "5"]}
selectedIndex={quantity - 1} selectedIndex={quantity - 1}
onSelect={handleQuantitySelect} onSelect={handleQuantitySelect}
spotlightId="buy-option-quantity-dropdown" spotlightId="buy-option-quantity-dropdown"
@@ -543,6 +605,7 @@ const BuyOption = ({
<TButton <TButton
className={styles.buy_option__buy_button} className={styles.buy_option__buy_button}
spotlightId="buy-option-buy-now-button" spotlightId="buy-option-buy-now-button"
size="detailButton"
onClick={handleBuyNowClick} onClick={handleBuyNowClick}
> >
<span className={styles.buy_option__button_text}>BUY NOW</span> <span className={styles.buy_option__button_text}>BUY NOW</span>
@@ -550,18 +613,11 @@ const BuyOption = ({
<TButton <TButton
className={styles.buy_option__cart_button} className={styles.buy_option__cart_button}
spotlightId="buy-option-add-to-cart-button" spotlightId="buy-option-add-to-cart-button"
size="detailButton"
onClick={handleAddToCartClick} onClick={handleAddToCartClick}
> >
<span className={styles.buy_option__button_text}>ADD TO CART</span> <span className={styles.buy_option__button_text}>ADD TO CART</span>
</TButton> </TButton>
<FavoriteBtn
selectedPatnrId={selectedPatnrId}
selectedPrdtId={selectedPrdtId}
favoriteFlag={favoriteFlag}
onFavoriteFlagChanged={onFavoriteFlagChanged}
logMenu={logMenu || 'DetailPage'}
className={styles.buy_option__favorite_button}
/>
</div> </div>
</div> </div>
@@ -574,8 +630,8 @@ const BuyOption = ({
text={loginPopupText} text={loginPopupText}
hasButton hasButton
hasOnClose={hasOnClose} hasOnClose={hasOnClose}
button1Text={$L('OK')} button1Text={$L("OK")}
button2Text={$L('CANCEL')} button2Text={$L("CANCEL")}
onClick={handleLoginPopUpOpen} onClick={handleLoginPopUpOpen}
onClose={onClose} onClose={onClose}
/> />
@@ -584,4 +640,4 @@ const BuyOption = ({
); );
}; };
export default BuyOption; export default BuyOption;

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

@@ -3,12 +3,18 @@
width: 100%; width: 100%;
height: 360px; height: 360px;
padding: 60px 70px; 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); background:
overflow: hidden; 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; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-end;
// buy-option__left-section (Element) // buy-option__left-section (Element)
&__left_section { &__left_section {
flex: 1 1 0; flex: 1 1 0;
@@ -43,9 +49,9 @@
// buy-option__label-text (Element) // buy-option__label-text (Element)
&__label_text { &__label_text {
color: #EAEAEA; color: #eaeaea;
font-size: 25px; font-size: 25px;
font-family: 'LG Smart UI'; font-family: "LG Smart UI";
font-weight: 700; font-weight: 700;
line-height: 35px; line-height: 35px;
word-wrap: break-word; word-wrap: break-word;
@@ -87,7 +93,7 @@
width: 180px; width: 180px;
height: 60px; height: 60px;
padding: 20px 30px; padding: 20px 30px;
background: #C72054; background: #2f2d2d;
overflow: hidden; overflow: hidden;
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
@@ -96,7 +102,7 @@
margin-right: 15px; margin-right: 15px;
&:focus { &:focus {
background: #D73B69; background: #d73b69;
} }
} }
@@ -104,17 +110,16 @@
&__cart_button { &__cart_button {
width: 180px; width: 180px;
height: 60px; height: 60px;
padding: 20px 30px; padding: 20px 14px;
background: #2F2D2D; background: #2f2d2d;
overflow: hidden; overflow: hidden;
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 15px;
&:focus { &:focus {
background: #4a4a4a; background: #d73b69;
} }
} }
@@ -122,13 +127,9 @@
&__button_text { &__button_text {
color: white; color: white;
font-size: 25px; font-size: 25px;
font-family: 'LG Smart UI'; font-family: "LG Smart UI";
font-weight: 600; font-weight: 600;
line-height: 35px; line-height: 35px;
text-align: center; text-align: center;
} }
&__favorite_button {
display: flex;
}
} }

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

@@ -12,9 +12,9 @@
} }
.price_label { .price_label {
font-size: 14px; font-size: 22px;
color: #666; color: #eaeaea;
font-weight: 500; font-weight: 700;
} }
.price_value_group { .price_value_group {
@@ -24,9 +24,9 @@
} }
.price_value { .price_value {
font-size: 16px; font-size: 38px;
font-weight: 600; font-weight: 700;
color: #333; color: #eaeaea;
} }
.shipping_row { .shipping_row {
@@ -34,16 +34,17 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-top: 8px; padding-top: 8px;
border-top: 1px solid #eee;
} }
.shipping_label { .shipping_label {
font-size: 12px; font-size: 22px;
color: #666; color: #eaeaea;
font-weight: 400;
letter-spacing: -2px;
} }
.shipping_value { .shipping_value {
font-size: 12px; font-size: 24px;
font-weight: 500; font-weight: 400;
color: #333; color: #eaeaea;
} }

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

@@ -8,7 +8,7 @@
&__button { &__button {
width: 675px; width: 675px;
height: 60px; height: 60px;
background-color: #7A808D; background-color: #7a808d;
border-radius: 6px; border-radius: 6px;
padding: 20px 19px; padding: 20px 19px;
display: flex; display: flex;
@@ -17,16 +17,16 @@
cursor: pointer; cursor: pointer;
&:focus { &:focus {
background-color: #C72054; background-color: #c72054;
} }
} }
// custom-dropdown__button--expanded (Modifier) // custom-dropdown__button--expanded (Modifier)
&__button_expanded { &__button_expanded {
background-color: #4A4C50 !important; background-color: #4a4c50 !important;
&:focus { &:focus {
background-color: #4A4C50 !important; background-color: #4a4c50 !important;
} }
} }
@@ -34,7 +34,7 @@
&__text { &__text {
color: white; color: white;
font-size: 24px; font-size: 24px;
font-family: 'LG Smart UI'; font-family: "LG Smart UI";
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
text-align: left; text-align: left;
@@ -64,11 +64,11 @@
bottom: 64px; bottom: 64px;
left: 0; left: 0;
width: 675px; width: 675px;
background-color: #7A808D; background-color: #7a808d;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3);
z-index: 1000; z-index: 1000;
overflow: visible; overflow: hidden;
} }
// custom-dropdown__option (Element) // custom-dropdown__option (Element)
@@ -78,7 +78,7 @@
padding: 20px 19px; padding: 20px 19px;
color: white; color: white;
font-size: 24px; font-size: 24px;
font-family: 'LG Smart UI'; font-family: "LG Smart UI";
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
display: flex; display: flex;
@@ -87,12 +87,12 @@
&:hover, &:hover,
&:focus { &:focus {
background-color: #C72054; background-color: #c72054;
} }
// custom-dropdown__option--selected (Modifier) // custom-dropdown__option--selected (Modifier)
&_selected { &_selected {
background-color: #C72054; background-color: #c72054;
} }
} }
} }