[251101] fix: CheckOutPanel Mock-3
🕐 커밋 시간: 2025. 11. 01. 22:03:38 📊 변경 통계: • 총 파일: 7개 • 추가: +484줄 • 삭제: -162줄 📁 추가된 파일: + com.twin.app.shoptime/get_console_logs.js 📝 수정된 파일: ~ com.twin.app.shoptime/package-lock.json ~ com.twin.app.shoptime/package.json ~ com.twin.app.shoptime/src/utils/mockDataSafetyUtils.js ~ com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx ~ com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryContainerMock.jsx ~ com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx 🔧 주요 변경 내용: • 프로젝트 의존성 관리 개선 • 공통 유틸리티 함수 최적화 • UI 컴포넌트 아키텍처 개선 • 로깅 시스템 개선 • 대규모 기능 개발 • 모듈 구조 개선 BREAKING CHANGE: API 또는 설정 변경으로 인한 호환성 영향 가능
This commit is contained in:
70
com.twin.app.shoptime/get_console_logs.js
Normal file
70
com.twin.app.shoptime/get_console_logs.js
Normal file
@@ -0,0 +1,70 @@
|
||||
const WebSocket = require('ws');
|
||||
const http = require('http');
|
||||
|
||||
async function getConsoleLogs() {
|
||||
try {
|
||||
// Shop Time 탭의 WebSocket URL
|
||||
const wsUrl = 'ws://localhost:9222/devtools/page/FB23F44B50DA1DD3F02A80346F3D67CF';
|
||||
|
||||
const ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.on('open', () => {
|
||||
console.log('🔗 Chrome CDP에 연결되었습니다.');
|
||||
|
||||
// Runtime 도메인 활성화
|
||||
ws.send(JSON.stringify({
|
||||
id: 1,
|
||||
method: 'Runtime.enable',
|
||||
params: {}
|
||||
}));
|
||||
|
||||
// Console 도메인 활성화
|
||||
ws.send(JSON.stringify({
|
||||
id: 2,
|
||||
method: 'Console.enable',
|
||||
params: {}
|
||||
}));
|
||||
|
||||
// 5초 후에 연결 종료
|
||||
setTimeout(() => {
|
||||
console.log('📝 콘솔 로그 수집 완료');
|
||||
ws.close();
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
let logCount = 0;
|
||||
ws.on('message', (data) => {
|
||||
const message = JSON.parse(data);
|
||||
|
||||
// 콘솔 메시지 처리
|
||||
if (message.method === 'Console.messageAdded' && logCount < 10) {
|
||||
const log = message.params.message;
|
||||
const timestamp = new Date(log.timestamp).toLocaleTimeString();
|
||||
console.log(`[${timestamp}] ${log.level}: ${log.text}`);
|
||||
logCount++;
|
||||
}
|
||||
|
||||
// Runtime 콘솔 API 호출 처리
|
||||
if (message.method === 'Runtime.consoleAPICalled' && logCount < 10) {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const args = message.params.args.map(arg => arg.value || arg.description).join(' ');
|
||||
console.log(`[${timestamp}] ${message.params.type}: ${args}`);
|
||||
logCount++;
|
||||
}
|
||||
});
|
||||
|
||||
ws.on('error', (error) => {
|
||||
console.error('❌ 연결 오류:', error.message);
|
||||
});
|
||||
|
||||
ws.on('close', () => {
|
||||
console.log('✅ 연결이 종료되었습니다.');
|
||||
process.exit(0);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 오류 발생:', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
getConsoleLogs();
|
||||
320
com.twin.app.shoptime/package-lock.json
generated
320
com.twin.app.shoptime/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -58,7 +58,8 @@
|
||||
"react-player": "^1.15.3",
|
||||
"react-redux": "^7.2.3",
|
||||
"redux": "^3.7.2",
|
||||
"redux-thunk": "2.3.0"
|
||||
"redux-thunk": "2.3.0",
|
||||
"ws": "^8.18.3"
|
||||
},
|
||||
"browserslist": [
|
||||
"chrome 38"
|
||||
|
||||
@@ -243,11 +243,33 @@ export const getSafeCurrencyInfo = (product) => {
|
||||
* @param {Object} productInfo - 원본 productInfo 객체
|
||||
* @returns {Object} ORDER SUMMARY용 가격 데이터
|
||||
*/
|
||||
/**
|
||||
* 가격 문자열에서 숫자만 추출하는 헬퍼 함수
|
||||
* @param {string|number} value - 가격값
|
||||
* @returns {number} 숫자
|
||||
*/
|
||||
const extractPrice = (value) => {
|
||||
if (typeof value === 'number') return Math.max(0, value);
|
||||
if (typeof value === 'string') {
|
||||
const num = parseFloat(value.replace(/[^\d.]/g, ''));
|
||||
return isNaN(num) ? 0 : Math.max(0, num);
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
export const calculateOrderSummaryFromProductInfo = (productInfo) => {
|
||||
console.log('[calculateOrderSummaryFromProductInfo] Input productInfo:', productInfo);
|
||||
console.log('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - Input productInfo:', productInfo);
|
||||
console.log('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - Available price fields:', {
|
||||
price2: productInfo?.price2,
|
||||
price5: productInfo?.price5,
|
||||
finalPrice: productInfo?.finalPrice,
|
||||
discountPrice: productInfo?.discountPrice,
|
||||
origPrice: productInfo?.origPrice,
|
||||
discount: productInfo?.discount,
|
||||
});
|
||||
|
||||
if (!productInfo) {
|
||||
console.log('[calculateOrderSummaryFromProductInfo] No productInfo, using defaults');
|
||||
console.log('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - No productInfo, using defaults');
|
||||
return {
|
||||
items: 0,
|
||||
couponSavings: 0,
|
||||
@@ -259,28 +281,56 @@ export const calculateOrderSummaryFromProductInfo = (productInfo) => {
|
||||
};
|
||||
}
|
||||
|
||||
// 1. Items (상품 가격) - price2 사용
|
||||
const itemsPrice = parseFloat(
|
||||
productInfo.price2?.replace(/[^\d.]/g, '') ||
|
||||
// 1. Items (상품 가격) - 최우선순위 Fallback 체인
|
||||
const itemsPrice = extractPrice(
|
||||
productInfo.price2 ||
|
||||
productInfo.finalPrice ||
|
||||
productInfo.discountPrice ||
|
||||
productInfo.dcAftrPrc || // logInfo에서 오는 할인 후 가격
|
||||
0
|
||||
);
|
||||
console.log('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - itemsPrice calculated:', itemsPrice);
|
||||
|
||||
// 2. Your Coupon Savings (쿠폰 할인) - price5를 할인액으로 사용
|
||||
const couponSavings = parseFloat(
|
||||
productInfo.price5?.replace(/[^\d.]/g, '') ||
|
||||
// 2. Your Coupon Savings (쿠폰 할인) - 최우선순위 Fallback 체인
|
||||
const couponSavings = extractPrice(
|
||||
productInfo.price5 ||
|
||||
productInfo.discount ||
|
||||
(extractPrice(productInfo.origPrice) - extractPrice(productInfo.finalPrice)) ||
|
||||
(extractPrice(productInfo.dcBefPrc) - extractPrice(productInfo.dcAftrPrc)) || // logInfo에서 오는 원가 - 할인가
|
||||
0
|
||||
);
|
||||
console.log('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - couponSavings calculated:', couponSavings);
|
||||
|
||||
// 3. Shipping & Handling (배송비) - shippingCharge 사용
|
||||
const shippingCharge = parseFloat(
|
||||
productInfo.shippingCharge?.replace(/[^\d.]/g, '') ||
|
||||
const shippingCharge = extractPrice(
|
||||
productInfo.shippingCharge ||
|
||||
0
|
||||
);
|
||||
|
||||
// 만약 itemsPrice가 0이면, 상품 정보에서 최소한 하나의 가격이라도 찾아서 사용
|
||||
let finalItemsPrice = itemsPrice;
|
||||
if (finalItemsPrice === 0) {
|
||||
console.warn('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - itemsPrice is 0, searching for any available price');
|
||||
|
||||
// ProductAllSection에서 표시되었던 가격 추출 시도
|
||||
const anyAvailablePrice = extractPrice(
|
||||
productInfo.origPrice ||
|
||||
productInfo.discountPrice ||
|
||||
productInfo.finalPrice ||
|
||||
productInfo.price ||
|
||||
productInfo.dcBefPrc || // logInfo 원가
|
||||
productInfo.dcAftrPrc || // logInfo 할인가
|
||||
0
|
||||
);
|
||||
|
||||
if (anyAvailablePrice > 0) {
|
||||
console.log('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - Found fallback price:', anyAvailablePrice);
|
||||
finalItemsPrice = anyAvailablePrice;
|
||||
}
|
||||
}
|
||||
|
||||
// 4. Subtotal (세전 총계) = itemsPrice - couponSavings + shippingCharge
|
||||
const subtotal = Math.max(0, itemsPrice - couponSavings + shippingCharge);
|
||||
const subtotal = Math.max(0, finalItemsPrice - couponSavings + shippingCharge);
|
||||
|
||||
// 5. Tax (세금) = subtotal의 10%
|
||||
const tax = Math.round((subtotal * 0.1) * 100) / 100;
|
||||
@@ -295,7 +345,7 @@ export const calculateOrderSummaryFromProductInfo = (productInfo) => {
|
||||
};
|
||||
|
||||
const result = {
|
||||
items: itemsPrice,
|
||||
items: finalItemsPrice,
|
||||
couponSavings: couponSavings,
|
||||
shipping: shippingCharge,
|
||||
subtotal: subtotal,
|
||||
@@ -304,7 +354,7 @@ export const calculateOrderSummaryFromProductInfo = (productInfo) => {
|
||||
currency: currency
|
||||
};
|
||||
|
||||
console.log('[calculateOrderSummaryFromProductInfo] Calculated result:', result);
|
||||
console.log('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - Calculated result:', result);
|
||||
return result;
|
||||
};
|
||||
|
||||
|
||||
@@ -45,13 +45,13 @@ import SummaryContainerMock from './container/SummaryContainerMock';
|
||||
import InformationContainerMock from './container/InformationContainerMock';
|
||||
|
||||
export default function CheckOutPanel({ panelInfo }) {
|
||||
console.log('[CheckOutPanel] Component mounted');
|
||||
console.log('[CheckOutPanel] panelInfo:', panelInfo);
|
||||
console.log('[CheckOutPanel] panelInfo.logInfo:', panelInfo?.logInfo);
|
||||
console.log('%c[BuyOption][CheckOutPanel] ▶️ Component mounted START', 'background: blue; color: white; font-weight: bold; padding: 5px;');
|
||||
console.log('[BuyOption][CheckOutPanel] panelInfo:', panelInfo);
|
||||
console.log('[BuyOption][CheckOutPanel] panelInfo.logInfo:', panelInfo?.logInfo);
|
||||
const dispatch = useDispatch();
|
||||
const panels = useSelector((state) => state.panels.panels);
|
||||
console.log(
|
||||
'[CheckOutPanel] panels:',
|
||||
'[BuyOption][CheckOutPanel] panels:',
|
||||
panels?.map((p) => p.name)
|
||||
);
|
||||
const { userNumber } = useSelector((state) => state.common.appStatus.loginUserData);
|
||||
@@ -62,21 +62,26 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
const { popupVisible, activePopup } = useSelector((state) => state.common.popup);
|
||||
const popup = useSelector((state) => state.common.popup);
|
||||
|
||||
// Mock Mode: panelInfo.mockProductInfo 또는 Redux에서 상품 데이터 사용
|
||||
// Mock Mode: panelInfo.productInfo 또는 Redux에서 상품 데이터 사용
|
||||
const productData = BUYNOW_CONFIG.isMockMode()
|
||||
? (() => {
|
||||
console.log('[BuyOption][CheckOutPanel] Mock Mode - panelInfo:', panelInfo);
|
||||
console.log('[BuyOption][CheckOutPanel] Mock Mode - panelInfo.productInfo:', panelInfo?.productInfo);
|
||||
|
||||
// 1순위: BuyOption에서 전달된 productInfo
|
||||
if (panelInfo?.productInfo) {
|
||||
console.log('[CheckOutPanel] Using panelInfo.productInfo:', panelInfo.productInfo);
|
||||
if (panelInfo?.productInfo && panelInfo.productInfo.prdtId) {
|
||||
console.log('%c[BuyOption][CheckOutPanel] ✅ SUCCESS - Using panelInfo.productInfo:', 'background: green; color: white; font-weight: bold; padding: 5px;', 'prdtId=' + panelInfo.productInfo.prdtId);
|
||||
return [panelInfo.productInfo];
|
||||
}
|
||||
|
||||
// 2순위: Redux에서 가져온 상품 데이터
|
||||
if (reduxProductData && reduxProductData.length > 0) {
|
||||
console.log('[CheckOutPanel] Using reduxProductData:', reduxProductData);
|
||||
if (reduxProductData && Array.isArray(reduxProductData) && reduxProductData.length > 0) {
|
||||
console.log('%c[BuyOption][CheckOutPanel] ✅ SUCCESS - Using reduxProductData:', 'background: green; color: white; font-weight: bold; padding: 5px;', 'count=' + reduxProductData.length);
|
||||
return reduxProductData;
|
||||
}
|
||||
// 3순위: 기본 Hardcoded Mock 데이터
|
||||
console.log('[CheckOutPanel] Using default hardcoded mock data');
|
||||
|
||||
// 3순위: 기본 Hardcoded Mock 데이터 (실패 케이스)
|
||||
console.error('%c[BuyOption][CheckOutPanel] ❌ FAIL - Using fallback mock data:', 'background: red; color: white; font-weight: bold; padding: 5px;', 'panelInfo=', panelInfo, 'reduxProductData=', reduxProductData);
|
||||
return [
|
||||
{
|
||||
prdtId: 'MOCK_PRODUCT_1',
|
||||
@@ -94,27 +99,25 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
})()
|
||||
: reduxProductData;
|
||||
|
||||
console.log('[CheckOutPanel] isMockMode:', BUYNOW_CONFIG.isMockMode());
|
||||
console.log('[CheckOutPanel] panelInfo:', panelInfo);
|
||||
console.log('[CheckOutPanel] reduxProductData:', reduxProductData);
|
||||
console.log('[CheckOutPanel] productData (raw):', productData);
|
||||
console.log('[BuyOption][CheckOutPanel] 상품 정보:', productData);
|
||||
console.log('[BuyOption][CheckOutPanel] isMockMode:', BUYNOW_CONFIG.isMockMode());
|
||||
console.log('[BuyOption][CheckOutPanel] productData loaded:', productData && productData.length, 'items');
|
||||
console.log('[BuyOption][CheckOutPanel] productData[0].prdtId:', productData?.[0]?.prdtId);
|
||||
|
||||
// 표시용으로 모든 상품 데이터 정규화 (없는 필드는 안전한 기본값으로)
|
||||
// Mock 모드에서는 항상 정규화, API 모드에서는 그대로 사용
|
||||
const normalizedProductData = productData?.map((prod) => normalizeProductDataForDisplay(prod)) || [];
|
||||
const safeProductData = BUYNOW_CONFIG.isMockMode() ? normalizedProductData : productData;
|
||||
|
||||
console.log('[CheckOutPanel] productData (normalized):', normalizedProductData);
|
||||
console.log('[CheckOutPanel] safeProductData (final):', safeProductData);
|
||||
console.log('[BuyOption][CheckOutPanel] productData (normalized):', normalizedProductData);
|
||||
console.log('[BuyOption][CheckOutPanel] safeProductData (final):', safeProductData);
|
||||
|
||||
// 첫 번째 상품 정보로 통화 정보 추출
|
||||
const firstProduct = getSafeFirstProduct(safeProductData);
|
||||
const { currSign, currSignLoc } = firstProduct
|
||||
? getSafeCurrencyInfo(firstProduct)
|
||||
: { currSign: '$', currSignLoc: 'left' };
|
||||
console.log('[CheckOutPanel] firstProduct:', firstProduct);
|
||||
console.log('[CheckOutPanel] currSign:', currSign, 'currSignLoc:', currSignLoc);
|
||||
console.log('[BuyOption][CheckOutPanel] firstProduct:', firstProduct);
|
||||
console.log('[BuyOption][CheckOutPanel] currSign:', currSign, 'currSignLoc:', currSignLoc);
|
||||
|
||||
const [orderSideBarOpen, setOrderSideBarOpen] = useState(false);
|
||||
const [offerSideBarOpen, setOfferSideBarOpen] = useState(false);
|
||||
@@ -133,11 +136,11 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
const spotJob = useRef(new Job((func) => func(), 0));
|
||||
|
||||
useEffect(() => {
|
||||
console.log('[CheckOutPanel] sendLogGNB useEffect - isOrderSuccessful:', isOrderSuccessful);
|
||||
console.log('[BuyOption][CheckOutPanel] sendLogGNB useEffect - isOrderSuccessful:', isOrderSuccessful);
|
||||
let nowMenu;
|
||||
|
||||
if (isOrderSuccessful) {
|
||||
console.log('[CheckOutPanel] Order successful, returning early');
|
||||
console.log('[BuyOption][CheckOutPanel] Order successful, returning early');
|
||||
return;
|
||||
}
|
||||
//
|
||||
@@ -149,22 +152,22 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
nowMenu = Config.LOG_MENU.CHECKOUT_PIN_CODE;
|
||||
}
|
||||
|
||||
console.log('[CheckOutPanel] Dispatching sendLogGNB with menu:', nowMenu);
|
||||
console.log('[BuyOption][CheckOutPanel] Dispatching sendLogGNB with menu:', nowMenu);
|
||||
dispatch(sendLogGNB(nowMenu));
|
||||
}, [isOrderSuccessful, placeOrderPopup, popupVisible]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('[CheckOutPanel] isMounted useEffect');
|
||||
console.log('[BuyOption][CheckOutPanel] isMounted useEffect');
|
||||
isMounted.current = true;
|
||||
|
||||
return () => {
|
||||
console.log('[CheckOutPanel] isMounted cleanup - component unmounting');
|
||||
console.log('[BuyOption][CheckOutPanel] isMounted cleanup - component unmounting');
|
||||
isMounted.current = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('[CheckOutPanel] getShoptimeTerms useEffect');
|
||||
console.log('[BuyOption][CheckOutPanel] getShoptimeTerms useEffect');
|
||||
dispatch(getShoptimeTerms());
|
||||
}, [dispatch]);
|
||||
|
||||
@@ -183,17 +186,17 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log('[CheckOutPanel] checkout total amount useEffect triggered');
|
||||
console.log('[CheckOutPanel] infoForCheckoutData:', infoForCheckoutData);
|
||||
console.log('[CheckOutPanel] productData length:', productData?.length);
|
||||
console.log('[BuyOption][CheckOutPanel] checkout total amount useEffect triggered');
|
||||
console.log('[BuyOption][CheckOutPanel] infoForCheckoutData:', infoForCheckoutData);
|
||||
console.log('[BuyOption][CheckOutPanel] productData length:', productData?.length);
|
||||
|
||||
// Mock Mode: API 호출 스킵
|
||||
if (BUYNOW_CONFIG.isMockMode()) {
|
||||
console.log('[CheckOutPanel] Mock Mode - Skipping checkout total amount calculation');
|
||||
console.log('[BuyOption][CheckOutPanel] Mock Mode - Skipping checkout total amount calculation');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('[CheckOutPanel] API Mode - calling getCheckoutTotalAmt');
|
||||
console.log('[BuyOption][CheckOutPanel] API Mode - calling getCheckoutTotalAmt');
|
||||
// API Mode: 기존 로직 유지
|
||||
if (infoForCheckoutData && productData) {
|
||||
const orderProductCoupontUse = Object.keys(selectedCoupons).map((productId) => {
|
||||
@@ -242,20 +245,20 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
newTabList.push(term.termsTypeName);
|
||||
});
|
||||
|
||||
console.log('[CheckOutPanel] Setting tabList:', newTabList);
|
||||
console.log('[BuyOption][CheckOutPanel] Setting tabList:', newTabList);
|
||||
setTabList(newTabList);
|
||||
}
|
||||
}, [empTermsData]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('[CheckOutPanel] cleanup useEffect - setting up cleanup');
|
||||
console.log('[BuyOption][CheckOutPanel] cleanup useEffect - setting up cleanup');
|
||||
return () => {
|
||||
console.log('[CheckOutPanel] cleanup useEffect - calling resetCheckoutData');
|
||||
console.log('[BuyOption][CheckOutPanel] cleanup useEffect - calling resetCheckoutData');
|
||||
// Mock 모드일 때는 데이터를 유지해야 다시 진입했을 때 올바른 상품 정보 로드 가능
|
||||
if (!BUYNOW_CONFIG.isMockMode()) {
|
||||
dispatch(resetCheckoutData());
|
||||
} else {
|
||||
console.log('[CheckOutPanel] Mock Mode - Skipping resetCheckoutData to preserve product data');
|
||||
console.log('[BuyOption][CheckOutPanel] Mock Mode - Skipping resetCheckoutData to preserve product data');
|
||||
}
|
||||
};
|
||||
}, [dispatch]);
|
||||
@@ -277,12 +280,12 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
}, [activePopup]);
|
||||
|
||||
const onBackClick = useCallback(() => {
|
||||
console.log('[CheckOutPanel] onBackClick called - dispatching popPanel');
|
||||
console.log('[BuyOption][CheckOutPanel] onBackClick called - dispatching popPanel');
|
||||
dispatch(popPanel());
|
||||
}, [dispatch]);
|
||||
|
||||
const toggleOrderSideBar = useCallback(() => {
|
||||
console.log('[CheckOutPanel] toggleOrderSideBar called - current state:', orderSideBarOpen);
|
||||
console.log('[BuyOption][CheckOutPanel] toggleOrderSideBar called - current state:', orderSideBarOpen);
|
||||
if (!orderSideBarOpen) {
|
||||
dispatch(sendLogCheckOutBtnClick({ btnNm: 'ORDER ITEMS' }));
|
||||
dispatch(
|
||||
@@ -300,7 +303,7 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
}, [orderSideBarOpen, dispatch]);
|
||||
|
||||
const toggleOfferSideBar = useCallback(() => {
|
||||
console.log('[CheckOutPanel] toggleOfferSideBar called - current state:', offerSideBarOpen);
|
||||
console.log('[BuyOption][CheckOutPanel] toggleOfferSideBar called - current state:', offerSideBarOpen);
|
||||
if (!offerSideBarOpen) {
|
||||
dispatch(sendLogCheckOutBtnClick({ btnNm: 'OFFERS & PROMOTION' }));
|
||||
dispatch(
|
||||
@@ -318,29 +321,29 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
}, [offerSideBarOpen, dispatch]);
|
||||
|
||||
const onClosePopup = useCallback(() => {
|
||||
console.log('[CheckOutPanel] onClosePopup called');
|
||||
console.log('[BuyOption][CheckOutPanel] onClosePopup called');
|
||||
setPlaceOrderPopup(false);
|
||||
setTimeout(() => Spotlight.focus(), 0);
|
||||
}, []);
|
||||
|
||||
const onCloseTermsPopup = useCallback(() => {
|
||||
console.log('[CheckOutPanel] onCloseTermsPopup called');
|
||||
console.log('[BuyOption][CheckOutPanel] onCloseTermsPopup called');
|
||||
dispatch(setHidePopup());
|
||||
}, [dispatch]);
|
||||
|
||||
const handlePopPanel = useCallback(() => {
|
||||
console.log('[CheckOutPanel] handlePopPanel called - dispatching setHidePopup and popPanel');
|
||||
console.log('[BuyOption][CheckOutPanel] handlePopPanel called - dispatching setHidePopup and popPanel');
|
||||
dispatch(setHidePopup());
|
||||
dispatch(popPanel());
|
||||
}, [dispatch]);
|
||||
|
||||
const handleTermsClick = useCallback(
|
||||
(termsID) => {
|
||||
console.log('[CheckOutPanel] handleTermsClick called with termsID:', termsID);
|
||||
console.log('[BuyOption][CheckOutPanel] handleTermsClick called with termsID:', termsID);
|
||||
if (empTermsData) {
|
||||
const selectedTerms = empTermsData.find((term) => term.termsID === termsID);
|
||||
|
||||
console.log('[CheckOutPanel] Selected terms:', selectedTerms?.termsTypeName);
|
||||
console.log('[BuyOption][CheckOutPanel] Selected terms:', selectedTerms?.termsTypeName);
|
||||
dispatch(
|
||||
sendLogTotalRecommend({
|
||||
buttonTitle: selectedTerms.termsTypeName,
|
||||
@@ -383,9 +386,9 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
|
||||
const onCancelCheckoutPanel = useCallback(
|
||||
(e) => {
|
||||
console.log('[CheckOutPanel] onCancelCheckoutPanel called');
|
||||
console.log('[BuyOption][CheckOutPanel] onCancelCheckoutPanel called');
|
||||
if (orderSideBarOpen) {
|
||||
console.log('[CheckOutPanel] Closing order sidebar');
|
||||
console.log('[BuyOption][CheckOutPanel] Closing order sidebar');
|
||||
setOrderSideBarOpen(false);
|
||||
setTimeout(() => Spotlight.focus(), 0);
|
||||
|
||||
@@ -393,7 +396,7 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
}
|
||||
|
||||
if (offerSideBarOpen) {
|
||||
console.log('[CheckOutPanel] Closing offer sidebar');
|
||||
console.log('[BuyOption][CheckOutPanel] Closing offer sidebar');
|
||||
setOfferSideBarOpen(false);
|
||||
setTimeout(() => Spotlight.focus(), 0);
|
||||
|
||||
@@ -401,7 +404,7 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
}
|
||||
|
||||
if (!orderSideBarOpen && !offerSideBarOpen) {
|
||||
console.log('[CheckOutPanel] Calling popPanel()');
|
||||
console.log('[BuyOption][CheckOutPanel] Calling popPanel()');
|
||||
dispatch(popPanel());
|
||||
e.stopPropagation();
|
||||
}
|
||||
@@ -472,7 +475,7 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
BUYNOW_CONFIG.isMockMode()
|
||||
);
|
||||
if (BUYNOW_CONFIG.isMockMode()) {
|
||||
console.log('[CheckOutPanel] Rendering InformationContainerMock');
|
||||
console.log('[BuyOption][CheckOutPanel] Rendering InformationContainerMock');
|
||||
return (
|
||||
<InformationContainerMock
|
||||
toggleOrderSideBar={toggleOrderSideBar}
|
||||
@@ -482,7 +485,7 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
console.log('[CheckOutPanel] Rendering InformationContainer');
|
||||
console.log('[BuyOption][CheckOutPanel] Rendering InformationContainer');
|
||||
return (
|
||||
<InformationContainer
|
||||
toggleOrderSideBar={toggleOrderSideBar}
|
||||
@@ -564,6 +567,9 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
setIsOrderSuccessful={setIsOrderSuccessful}
|
||||
/>
|
||||
</TFullPopup>
|
||||
<div style={{display: 'none'}}>
|
||||
{console.log('%c[BuyOption][CheckOutPanel] ✅ Component rendering COMPLETE', 'background: lightgreen; color: black; font-weight: bold; padding: 5px;')}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -17,24 +17,45 @@ export default function SummaryContainerMock({
|
||||
productInfo,
|
||||
defaultPrice,
|
||||
}) {
|
||||
console.log('[CheckOutPanel] SummaryContainerMock - START render');
|
||||
console.log('[CheckOutPanel] SummaryContainerMock - empTermsData:', empTermsData);
|
||||
console.log('[CheckOutPanel] SummaryContainerMock - currSign:', currSign);
|
||||
console.log('[CheckOutPanel] SummaryContainerMock - productData:', productData);
|
||||
console.log('[CheckOutPanel] SummaryContainerMock - productInfo:', productInfo);
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - START render');
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - empTermsData:', empTermsData);
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - currSign:', currSign);
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - productData:', productData);
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - productInfo:', productInfo);
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - productInfo.price2:', productInfo?.price2);
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - productInfo.price5:', productInfo?.price5);
|
||||
|
||||
// Mock Mode: productInfo로부터 ORDER SUMMARY용 가격 데이터 계산
|
||||
const orderSummaryData = useMemo(() => {
|
||||
if (productInfo) {
|
||||
// productInfo가 있으면 직접 계산
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - Using calculateOrderSummaryFromProductInfo');
|
||||
return calculateOrderSummaryFromProductInfo(productInfo);
|
||||
} else {
|
||||
// productInfo가 없으면 기존 방식으로 fallback
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - Using fallback calculation (no productInfo)');
|
||||
const selectedProduct = getSafeFirstProduct(productData);
|
||||
const productPrice = parseFloat(defaultPrice || selectedProduct?.price || 0);
|
||||
|
||||
// 최소한 하나의 가격이라도 찾기
|
||||
const anyPrice = parseFloat(
|
||||
defaultPrice ||
|
||||
selectedProduct?.finalPrice ||
|
||||
selectedProduct?.discountPrice ||
|
||||
selectedProduct?.price ||
|
||||
0
|
||||
);
|
||||
|
||||
const productPrice = anyPrice > 0 ? anyPrice : 0;
|
||||
const productDiscount = parseFloat(selectedProduct?.discount || 0);
|
||||
const tax = Math.round((productPrice * 0.1) * 100) / 100;
|
||||
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - Fallback calculation:', {
|
||||
productPrice,
|
||||
productDiscount,
|
||||
tax,
|
||||
selectedProduct
|
||||
});
|
||||
|
||||
return {
|
||||
items: productPrice,
|
||||
couponSavings: productDiscount,
|
||||
@@ -47,7 +68,7 @@ export default function SummaryContainerMock({
|
||||
}
|
||||
}, [productInfo, productData, defaultPrice, currSign, currSignLoc]);
|
||||
|
||||
console.log('[CheckOutPanel] SummaryContainerMock - orderSummaryData:', orderSummaryData);
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - orderSummaryData:', orderSummaryData);
|
||||
|
||||
// 기존 호환성을 위해 effectivePriceTotalData 유지
|
||||
const effectivePriceTotalData = {
|
||||
@@ -59,7 +80,7 @@ export default function SummaryContainerMock({
|
||||
ordPmtReqAmt: orderSummaryData.total,
|
||||
};
|
||||
|
||||
console.log('[CheckOutPanel] SummaryContainerMock - effectivePriceTotalData:', effectivePriceTotalData);
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - effectivePriceTotalData:', effectivePriceTotalData);
|
||||
|
||||
// Mock Mode: 기본 상품 정보
|
||||
const productList = {
|
||||
@@ -101,7 +122,7 @@ export default function SummaryContainerMock({
|
||||
setPlaceOrderPopup(true);
|
||||
}, [doSendLogPaymentEntry, setPlaceOrderPopup]);
|
||||
|
||||
console.log('[CheckOutPanel] SummaryContainerMock - items:', items);
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - items:', items);
|
||||
|
||||
const renderItemList = useCallback(
|
||||
() =>
|
||||
@@ -133,13 +154,13 @@ export default function SummaryContainerMock({
|
||||
);
|
||||
|
||||
const estimatedTotal = useMemo(() => {
|
||||
console.log('[CheckOutPanel] SummaryContainerMock - estimatedTotal useMemo');
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - estimatedTotal useMemo');
|
||||
return formatCurrencyValue(effectivePriceTotalData.ordPmtReqAmt, orderSummaryData.currency.currSign, orderSummaryData.currency.currSignLoc);
|
||||
}, [effectivePriceTotalData, orderSummaryData.currency]);
|
||||
|
||||
const showAuctionNotice = productList?.auctProdYn === 'Y' && !productList.auctFinalPriceChgDt;
|
||||
|
||||
console.log('[CheckOutPanel] SummaryContainerMock - about to return JSX');
|
||||
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - about to return JSX');
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
showError,
|
||||
} from '../../../actions/commonActions';
|
||||
import { getProductCouponSearch } from '../../../actions/couponActions';
|
||||
import { getSafeProductPrice } from '../../../utils/mockDataSafetyUtils';
|
||||
import {
|
||||
sendLogPaymentEntry,
|
||||
sendLogTotalRecommend,
|
||||
@@ -448,26 +449,58 @@ const BuyOption = ({
|
||||
if (userNumber && selectedPatnrId && selectedPrdtId && quantity) {
|
||||
const { prodOptCval, priceInfo } = selectedOptions || {};
|
||||
const { patncNm, brndNm, catNm, prdtNm, prdtId } = productInfo;
|
||||
|
||||
console.log('[BuyOption] handleClickOrder - productInfo:', productInfo);
|
||||
console.log('[BuyOption] handleClickOrder - selectedOptions:', selectedOptions);
|
||||
console.log('[BuyOption] handleClickOrder - priceInfo:', priceInfo);
|
||||
console.log('[BuyOption] handleClickOrder - logInfo:', logInfo);
|
||||
|
||||
// priceInfo 파싱 및 숫자 변환
|
||||
let regularPrice = parseInt(priceInfo?.split('|')[0], 10) || 0;
|
||||
let discountPrice = parseInt(priceInfo?.split('|')[1], 10) || 0;
|
||||
// productInfo에서 직접 price2, price5 추출 (가장 신뢰할 수 있는 소스)
|
||||
// price2 = 상품 가격 ("$ 521.66" 형식)
|
||||
// price5 = 쿠폰 할인 ("$ 104.33" 형식)
|
||||
const extractNumericPrice = (priceStr) => {
|
||||
if (typeof priceStr === 'number') return priceStr;
|
||||
if (typeof priceStr === 'string') {
|
||||
const numMatch = priceStr.match(/[\d.]+/);
|
||||
return numMatch ? parseFloat(numMatch[0]) : 0;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
const price2Value = extractNumericPrice(productInfo?.price2);
|
||||
const price5Value = extractNumericPrice(productInfo?.price5);
|
||||
|
||||
console.log('[BuyOption] handleClickOrder - productInfo.price2:', productInfo?.price2, '-> extracted:', price2Value);
|
||||
console.log('[BuyOption] handleClickOrder - productInfo.price5:', productInfo?.price5, '-> extracted:', price5Value);
|
||||
|
||||
// 가격 계산:
|
||||
// discountPrice = price2 (상품 가격)
|
||||
// regularPrice = price2 + price5 (상품 가격 + 할인액 = 원래 가격)
|
||||
let discountPrice = price2Value > 0 ? price2Value : 0;
|
||||
let regularPrice = price2Value + price5Value; // price2 + price5 = 원래 가격
|
||||
|
||||
const discountRate = priceInfo?.split('|')[4];
|
||||
|
||||
// selectedOptions가 없으면 logInfo에서 가격 추출
|
||||
console.log('[BuyOption] handleClickOrder - Calculated prices - regularPrice:', regularPrice, 'discountPrice:', discountPrice);
|
||||
|
||||
// selectedOptions가 없고 logInfo가 있으면, logInfo의 가격도 고려
|
||||
if (!selectedOptions && logInfo) {
|
||||
console.log('[BuyOption] handleClickOrder - selectedOptions is undefined, using logInfo prices');
|
||||
console.log('[BuyOption] handleClickOrder - selectedOptions is undefined, checking logInfo prices');
|
||||
// logInfo의 dcBefPrc와 dcAftrPrc는 "$ 521.66" 형식이므로 숫자만 추출 (소수점 포함)
|
||||
const dcBefPrcMatch = logInfo.dcBefPrc?.match(/[\d.]+/);
|
||||
const dcAftrPrcMatch = logInfo.dcAftrPrc?.match(/[\d.]+/);
|
||||
regularPrice = dcBefPrcMatch ? parseFloat(dcBefPrcMatch[0]) : 0;
|
||||
discountPrice = dcAftrPrcMatch ? parseFloat(dcAftrPrcMatch[0]) : regularPrice;
|
||||
console.log('[BuyOption] handleClickOrder - extracted from logInfo - dcBefPrc:', logInfo.dcBefPrc, 'dcAftrPrc:', logInfo.dcAftrPrc);
|
||||
const logRegularPrice = dcBefPrcMatch ? parseFloat(dcBefPrcMatch[0]) : 0;
|
||||
const logDiscountPrice = dcAftrPrcMatch ? parseFloat(dcAftrPrcMatch[0]) : logRegularPrice;
|
||||
|
||||
// logInfo의 가격이 있으면 우선
|
||||
if (logRegularPrice > 0 || logDiscountPrice > 0) {
|
||||
regularPrice = logRegularPrice > 0 ? logRegularPrice : regularPrice;
|
||||
discountPrice = logDiscountPrice > 0 ? logDiscountPrice : discountPrice;
|
||||
console.log('[BuyOption] handleClickOrder - Using logInfo prices - regularPrice:', regularPrice, 'discountPrice:', discountPrice);
|
||||
}
|
||||
}
|
||||
console.log('[BuyOption] handleClickOrder - regularPrice:', regularPrice, 'discountPrice:', discountPrice, 'discountRate:', discountRate);
|
||||
|
||||
console.log('[BuyOption] handleClickOrder - Final prices - regularPrice:', regularPrice, 'discountPrice:', discountPrice, 'discountRate:', discountRate);
|
||||
|
||||
dispatch(
|
||||
sendLogTotalRecommend({
|
||||
@@ -538,22 +571,63 @@ const BuyOption = ({
|
||||
imgUrl: imgUrl, // 상품 이미지 URL 추가
|
||||
};
|
||||
|
||||
// 필수 데이터 검증
|
||||
if (!productInfo || !productInfo.prdtId) {
|
||||
console.error('%c[BuyOption] ❌ FAIL - productInfo is invalid:', 'background: red; color: white; font-weight: bold; padding: 5px;', productInfo);
|
||||
dispatch(showError(null, 'Product information is missing', false, null, null));
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('%c[BuyOption] ✅ SUCCESS - productInfo is valid:', 'background: green; color: white; font-weight: bold; padding: 5px;', productInfo.prdtId);
|
||||
|
||||
const checkoutPanelInfo = {
|
||||
logInfo: { ...logInfo, cartTpSno: `MOCK_${Date.now()}` },
|
||||
productInfo: productInfo,
|
||||
productInfo: {
|
||||
prdtId: productInfo.prdtId,
|
||||
prdtNm: productInfo.prdtNm,
|
||||
patnrId: selectedPatnrId,
|
||||
patncNm: patncNm,
|
||||
// calculateOrderSummaryFromProductInfo 함수가 필요한 필드들
|
||||
// productInfo에서 직접 추출한 값을 전달
|
||||
price2: price2Value, // Items (상품 가격)
|
||||
price5: price5Value, // Coupon Savings (할인액)
|
||||
finalPrice: discountPrice,
|
||||
discount: price5Value,
|
||||
origPrice: regularPrice,
|
||||
discountPrice: discountPrice,
|
||||
// 추가 가격 필드들 (fallback용)
|
||||
price: discountPrice,
|
||||
originalPrice: regularPrice,
|
||||
// 이미지 정보
|
||||
...(productInfo.imgList && { imgList: productInfo.imgList }),
|
||||
...(productInfo.thumbnailUrl && { thumbnailUrl: productInfo.thumbnailUrl }),
|
||||
...(productInfo.imgUrls && { imgUrls: productInfo.imgUrls }),
|
||||
shippingCharge: 0, // 배송비
|
||||
currSign: '$',
|
||||
currSignLoc: 'left',
|
||||
},
|
||||
defaultPrice: discountPrice,
|
||||
};
|
||||
|
||||
console.log('[BuyOption] Mock Mode - mockProductInfo:', mockProductInfo);
|
||||
console.log('[BuyOption] Mock Mode - regularPrice(숫자):', regularPrice, 'discountPrice(숫자):', discountPrice);
|
||||
console.log('[BuyOption] Mock Mode - checkoutPanelInfo.productInfo price fields:', {
|
||||
price2: price2Value,
|
||||
price5: price5Value,
|
||||
finalPrice: discountPrice,
|
||||
origPrice: regularPrice,
|
||||
discountPrice: discountPrice,
|
||||
});
|
||||
|
||||
console.log('[BuyOption] Mock Mode - checkoutPanelInfo:', checkoutPanelInfo);
|
||||
console.log('[BuyOption] Mock Mode - regularPrice:', regularPrice, 'discountPrice:', discountPrice);
|
||||
|
||||
console.log('%c[BuyOption] ▶️ BEFORE pushPanel dispatch', 'background: orange; color: white; font-weight: bold; padding: 5px;');
|
||||
dispatch(
|
||||
pushPanel({
|
||||
name: Config.panel_names.CHECKOUT_PANEL,
|
||||
panelInfo: checkoutPanelInfo,
|
||||
})
|
||||
);
|
||||
console.log('[BuyOption] pushPanel dispatch completed');
|
||||
console.log('%c[BuyOption] ✅ AFTER pushPanel dispatch', 'background: orange; color: white; font-weight: bold; padding: 5px;');
|
||||
}
|
||||
}
|
||||
dispatch(clearAllToasts());
|
||||
|
||||
Reference in New Issue
Block a user