[상품상세] 스타일 작업 및 버튼 연결
- 옵션 노출부분 버튼 디자인 수정 - 구매 및 카트 버튼 연결.
This commit is contained in:
junghoon86.park
@@ -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}
|
||||
/>
|
||||
@@ -584,4 +640,4 @@ const BuyOption = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default BuyOption;
|
||||
export default BuyOption;
|
||||
|
||||
Reference in New Issue
Block a user