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

[251101] fix: CheckOutPanel Mock-3

Browse Source 
🕐 커밋 시간: 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:
hyeon soo noh
2025-11-01 22:03:42 +09:00
parent 6292e84052
commit 830dc65871
7 changed files with 554 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
com.twin.app.shoptime/get_console_logs.js Normal file
View 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
View File

File diff suppressed because it is too large Load Diff

3
com.twin.app.shoptime/package.json
View File

@@ -58,7 +58,8 @@
"react-player": "^1.15.3", "react-player": "^1.15.3",
"react-redux": "^7.2.3", "react-redux": "^7.2.3",
"redux": "^3.7.2", "redux": "^3.7.2",
"redux-thunk": "2.3.0" "redux-thunk": "2.3.0",
"ws": "^8.18.3"
}, },
"browserslist": [ "browserslist": [
"chrome 38" "chrome 38"

76
com.twin.app.shoptime/src/utils/mockDataSafetyUtils.js
View File

@@ -243,11 +243,33 @@ export const getSafeCurrencyInfo = (product) => {
* @param {Object} productInfo - 원본 productInfo 객체 * @param {Object} productInfo - 원본 productInfo 객체
* @returns {Object} ORDER SUMMARY용 가격 데이터 * @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) => { 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) { if (!productInfo) {
console.log('[calculateOrderSummaryFromProductInfo] No productInfo, using defaults'); console.log('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - No productInfo, using defaults');
return { return {
items: 0, items: 0,
couponSavings: 0, couponSavings: 0,
@@ -259,28 +281,56 @@ export const calculateOrderSummaryFromProductInfo = (productInfo) => {
}; };
} }
// 1. Items (상품 가격) - price2 사용 // 1. Items (상품 가격) - 최우선순위 Fallback 체인
const itemsPrice = parseFloat( const itemsPrice = extractPrice(
productInfo.price2?.replace(/[^\d.]/g, '') || productInfo.price2 ||
productInfo.finalPrice || productInfo.finalPrice ||
productInfo.discountPrice ||
productInfo.dcAftrPrc || // logInfo에서 오는 할인 후 가격
0 0
); );
console.log('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - itemsPrice calculated:', itemsPrice);
// 2. Your Coupon Savings (쿠폰 할인) - price5를 할인액으로 사용 // 2. Your Coupon Savings (쿠폰 할인) - 최우선순위 Fallback 체인
const couponSavings = parseFloat( const couponSavings = extractPrice(
productInfo.price5?.replace(/[^\d.]/g, '') || productInfo.price5 ||
productInfo.discount || productInfo.discount ||
(extractPrice(productInfo.origPrice) - extractPrice(productInfo.finalPrice)) ||
(extractPrice(productInfo.dcBefPrc) - extractPrice(productInfo.dcAftrPrc)) || // logInfo에서 오는 원가 - 할인가
0 0
); );
console.log('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - couponSavings calculated:', couponSavings);
// 3. Shipping & Handling (배송비) - shippingCharge 사용 // 3. Shipping & Handling (배송비) - shippingCharge 사용
const shippingCharge = parseFloat( const shippingCharge = extractPrice(
productInfo.shippingCharge?.replace(/[^\d.]/g, '') || productInfo.shippingCharge ||
0 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 // 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% // 5. Tax (세금) = subtotal의 10%
const tax = Math.round((subtotal * 0.1) * 100) / 100; const tax = Math.round((subtotal * 0.1) * 100) / 100;
@@ -295,7 +345,7 @@ export const calculateOrderSummaryFromProductInfo = (productInfo) => {
}; };
const result = { const result = {
items: itemsPrice, items: finalItemsPrice,
couponSavings: couponSavings, couponSavings: couponSavings,
shipping: shippingCharge, shipping: shippingCharge,
subtotal: subtotal, subtotal: subtotal,
@@ -304,7 +354,7 @@ export const calculateOrderSummaryFromProductInfo = (productInfo) => {
currency: currency currency: currency
}; };
console.log('[calculateOrderSummaryFromProductInfo] Calculated result:', result); console.log('[BuyOption][CheckOutPanel] calculateOrderSummaryFromProductInfo - Calculated result:', result);
return result; return result;
}; };

104
com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
View File

@@ -45,13 +45,13 @@ import SummaryContainerMock from './container/SummaryContainerMock';
import InformationContainerMock from './container/InformationContainerMock'; import InformationContainerMock from './container/InformationContainerMock';
export default function CheckOutPanel({ panelInfo }) { export default function CheckOutPanel({ panelInfo }) {
console.log('[CheckOutPanel] Component mounted'); console.log('%c[BuyOption][CheckOutPanel] ▶️ Component mounted START', 'background: blue; color: white; font-weight: bold; padding: 5px;');
console.log('[CheckOutPanel] panelInfo:', panelInfo); console.log('[BuyOption][CheckOutPanel] panelInfo:', panelInfo);
console.log('[CheckOutPanel] panelInfo.logInfo:', panelInfo?.logInfo); console.log('[BuyOption][CheckOutPanel] panelInfo.logInfo:', panelInfo?.logInfo);
const dispatch = useDispatch(); const dispatch = useDispatch();
const panels = useSelector((state) => state.panels.panels); const panels = useSelector((state) => state.panels.panels);
console.log( console.log(
'[CheckOutPanel] panels:', '[BuyOption][CheckOutPanel] panels:',
panels?.map((p) => p.name) panels?.map((p) => p.name)
); );
const { userNumber } = useSelector((state) => state.common.appStatus.loginUserData); 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 { popupVisible, activePopup } = useSelector((state) => state.common.popup);
const popup = 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() 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 // 1순위: BuyOption에서 전달된 productInfo
if (panelInfo?.productInfo) { if (panelInfo?.productInfo && panelInfo.productInfo.prdtId) {
console.log('[CheckOutPanel] Using panelInfo.productInfo:', panelInfo.productInfo); 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]; return [panelInfo.productInfo];
} }
// 2순위: Redux에서 가져온 상품 데이터 // 2순위: Redux에서 가져온 상품 데이터
if (reduxProductData && reduxProductData.length > 0) { if (reduxProductData && Array.isArray(reduxProductData) && reduxProductData.length > 0) {
console.log('[CheckOutPanel] Using reduxProductData:', reduxProductData); console.log('%c[BuyOption][CheckOutPanel] ✅ SUCCESS - Using reduxProductData:', 'background: green; color: white; font-weight: bold; padding: 5px;', 'count=' + reduxProductData.length);
return reduxProductData; 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 [ return [
{ {
prdtId: 'MOCK_PRODUCT_1', prdtId: 'MOCK_PRODUCT_1',
@@ -94,27 +99,25 @@ export default function CheckOutPanel({ panelInfo }) {
})() })()
: reduxProductData; : reduxProductData;
console.log('[CheckOutPanel] isMockMode:', BUYNOW_CONFIG.isMockMode()); console.log('[BuyOption][CheckOutPanel] isMockMode:', BUYNOW_CONFIG.isMockMode());
console.log('[CheckOutPanel] panelInfo:', panelInfo); console.log('[BuyOption][CheckOutPanel] productData loaded:', productData && productData.length, 'items');
console.log('[CheckOutPanel] reduxProductData:', reduxProductData); console.log('[BuyOption][CheckOutPanel] productData[0].prdtId:', productData?.[0]?.prdtId);
console.log('[CheckOutPanel] productData (raw):', productData);
console.log('[BuyOption][CheckOutPanel] 상품 정보:', productData);
// 표시용으로 모든 상품 데이터 정규화 (없는 필드는 안전한 기본값으로) // 표시용으로 모든 상품 데이터 정규화 (없는 필드는 안전한 기본값으로)
// Mock 모드에서는 항상 정규화, API 모드에서는 그대로 사용 // Mock 모드에서는 항상 정규화, API 모드에서는 그대로 사용
const normalizedProductData = productData?.map((prod) => normalizeProductDataForDisplay(prod)) || []; const normalizedProductData = productData?.map((prod) => normalizeProductDataForDisplay(prod)) || [];
const safeProductData = BUYNOW_CONFIG.isMockMode() ? normalizedProductData : productData; const safeProductData = BUYNOW_CONFIG.isMockMode() ? normalizedProductData : productData;
console.log('[CheckOutPanel] productData (normalized):', normalizedProductData); console.log('[BuyOption][CheckOutPanel] productData (normalized):', normalizedProductData);
console.log('[CheckOutPanel] safeProductData (final):', safeProductData); console.log('[BuyOption][CheckOutPanel] safeProductData (final):', safeProductData);
// 첫 번째 상품 정보로 통화 정보 추출 // 첫 번째 상품 정보로 통화 정보 추출
const firstProduct = getSafeFirstProduct(safeProductData); const firstProduct = getSafeFirstProduct(safeProductData);
const { currSign, currSignLoc } = firstProduct const { currSign, currSignLoc } = firstProduct
? getSafeCurrencyInfo(firstProduct) ? getSafeCurrencyInfo(firstProduct)
: { currSign: '$', currSignLoc: 'left' }; : { currSign: '$', currSignLoc: 'left' };
console.log('[CheckOutPanel] firstProduct:', firstProduct); console.log('[BuyOption][CheckOutPanel] firstProduct:', firstProduct);
console.log('[CheckOutPanel] currSign:', currSign, 'currSignLoc:', currSignLoc); console.log('[BuyOption][CheckOutPanel] currSign:', currSign, 'currSignLoc:', currSignLoc);
const [orderSideBarOpen, setOrderSideBarOpen] = useState(false); const [orderSideBarOpen, setOrderSideBarOpen] = useState(false);
const [offerSideBarOpen, setOfferSideBarOpen] = useState(false); const [offerSideBarOpen, setOfferSideBarOpen] = useState(false);
@@ -133,11 +136,11 @@ export default function CheckOutPanel({ panelInfo }) {
const spotJob = useRef(new Job((func) => func(), 0)); const spotJob = useRef(new Job((func) => func(), 0));
useEffect(() => { useEffect(() => {
console.log('[CheckOutPanel] sendLogGNB useEffect - isOrderSuccessful:', isOrderSuccessful); console.log('[BuyOption][CheckOutPanel] sendLogGNB useEffect - isOrderSuccessful:', isOrderSuccessful);
let nowMenu; let nowMenu;
if (isOrderSuccessful) { if (isOrderSuccessful) {
console.log('[CheckOutPanel] Order successful, returning early'); console.log('[BuyOption][CheckOutPanel] Order successful, returning early');
return; return;
} }
// //
@@ -149,22 +152,22 @@ export default function CheckOutPanel({ panelInfo }) {
nowMenu = Config.LOG_MENU.CHECKOUT_PIN_CODE; 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)); dispatch(sendLogGNB(nowMenu));
}, [isOrderSuccessful, placeOrderPopup, popupVisible]); }, [isOrderSuccessful, placeOrderPopup, popupVisible]);
useEffect(() => { useEffect(() => {
console.log('[CheckOutPanel] isMounted useEffect'); console.log('[BuyOption][CheckOutPanel] isMounted useEffect');
isMounted.current = true; isMounted.current = true;
return () => { return () => {
console.log('[CheckOutPanel] isMounted cleanup - component unmounting'); console.log('[BuyOption][CheckOutPanel] isMounted cleanup - component unmounting');
isMounted.current = false; isMounted.current = false;
}; };
}, []); }, []);
useEffect(() => { useEffect(() => {
console.log('[CheckOutPanel] getShoptimeTerms useEffect'); console.log('[BuyOption][CheckOutPanel] getShoptimeTerms useEffect');
dispatch(getShoptimeTerms()); dispatch(getShoptimeTerms());
}, [dispatch]); }, [dispatch]);
@@ -183,17 +186,17 @@ export default function CheckOutPanel({ panelInfo }) {
} }
useEffect(() => { useEffect(() => {
console.log('[CheckOutPanel] checkout total amount useEffect triggered'); console.log('[BuyOption][CheckOutPanel] checkout total amount useEffect triggered');
console.log('[CheckOutPanel] infoForCheckoutData:', infoForCheckoutData); console.log('[BuyOption][CheckOutPanel] infoForCheckoutData:', infoForCheckoutData);
console.log('[CheckOutPanel] productData length:', productData?.length); console.log('[BuyOption][CheckOutPanel] productData length:', productData?.length);
// Mock Mode: API 호출 스킵 // Mock Mode: API 호출 스킵
if (BUYNOW_CONFIG.isMockMode()) { 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; return;
} }
console.log('[CheckOutPanel] API Mode - calling getCheckoutTotalAmt'); console.log('[BuyOption][CheckOutPanel] API Mode - calling getCheckoutTotalAmt');
// API Mode: 기존 로직 유지 // API Mode: 기존 로직 유지
if (infoForCheckoutData && productData) { if (infoForCheckoutData && productData) {
const orderProductCoupontUse = Object.keys(selectedCoupons).map((productId) => { const orderProductCoupontUse = Object.keys(selectedCoupons).map((productId) => {
@@ -242,20 +245,20 @@ export default function CheckOutPanel({ panelInfo }) {
newTabList.push(term.termsTypeName); newTabList.push(term.termsTypeName);
}); });
console.log('[CheckOutPanel] Setting tabList:', newTabList); console.log('[BuyOption][CheckOutPanel] Setting tabList:', newTabList);
setTabList(newTabList); setTabList(newTabList);
} }
}, [empTermsData]); }, [empTermsData]);
useEffect(() => { useEffect(() => {
console.log('[CheckOutPanel] cleanup useEffect - setting up cleanup'); console.log('[BuyOption][CheckOutPanel] cleanup useEffect - setting up cleanup');
return () => { return () => {
console.log('[CheckOutPanel] cleanup useEffect - calling resetCheckoutData'); console.log('[BuyOption][CheckOutPanel] cleanup useEffect - calling resetCheckoutData');
// Mock 모드일 때는 데이터를 유지해야 다시 진입했을 때 올바른 상품 정보 로드 가능 // Mock 모드일 때는 데이터를 유지해야 다시 진입했을 때 올바른 상품 정보 로드 가능
if (!BUYNOW_CONFIG.isMockMode()) { if (!BUYNOW_CONFIG.isMockMode()) {
dispatch(resetCheckoutData()); dispatch(resetCheckoutData());
} else { } 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]); }, [dispatch]);
@@ -277,12 +280,12 @@ export default function CheckOutPanel({ panelInfo }) {
}, [activePopup]); }, [activePopup]);
const onBackClick = useCallback(() => { const onBackClick = useCallback(() => {
console.log('[CheckOutPanel] onBackClick called - dispatching popPanel'); console.log('[BuyOption][CheckOutPanel] onBackClick called - dispatching popPanel');
dispatch(popPanel()); dispatch(popPanel());
}, [dispatch]); }, [dispatch]);
const toggleOrderSideBar = useCallback(() => { const toggleOrderSideBar = useCallback(() => {
console.log('[CheckOutPanel] toggleOrderSideBar called - current state:', orderSideBarOpen); console.log('[BuyOption][CheckOutPanel] toggleOrderSideBar called - current state:', orderSideBarOpen);
if (!orderSideBarOpen) { if (!orderSideBarOpen) {
dispatch(sendLogCheckOutBtnClick({ btnNm: 'ORDER ITEMS' })); dispatch(sendLogCheckOutBtnClick({ btnNm: 'ORDER ITEMS' }));
dispatch( dispatch(
@@ -300,7 +303,7 @@ export default function CheckOutPanel({ panelInfo }) {
}, [orderSideBarOpen, dispatch]); }, [orderSideBarOpen, dispatch]);
const toggleOfferSideBar = useCallback(() => { const toggleOfferSideBar = useCallback(() => {
console.log('[CheckOutPanel] toggleOfferSideBar called - current state:', offerSideBarOpen); console.log('[BuyOption][CheckOutPanel] toggleOfferSideBar called - current state:', offerSideBarOpen);
if (!offerSideBarOpen) { if (!offerSideBarOpen) {
dispatch(sendLogCheckOutBtnClick({ btnNm: 'OFFERS & PROMOTION' })); dispatch(sendLogCheckOutBtnClick({ btnNm: 'OFFERS & PROMOTION' }));
dispatch( dispatch(
@@ -318,29 +321,29 @@ export default function CheckOutPanel({ panelInfo }) {
}, [offerSideBarOpen, dispatch]); }, [offerSideBarOpen, dispatch]);
const onClosePopup = useCallback(() => { const onClosePopup = useCallback(() => {
console.log('[CheckOutPanel] onClosePopup called'); console.log('[BuyOption][CheckOutPanel] onClosePopup called');
setPlaceOrderPopup(false); setPlaceOrderPopup(false);
setTimeout(() => Spotlight.focus(), 0); setTimeout(() => Spotlight.focus(), 0);
}, []); }, []);
const onCloseTermsPopup = useCallback(() => { const onCloseTermsPopup = useCallback(() => {
console.log('[CheckOutPanel] onCloseTermsPopup called'); console.log('[BuyOption][CheckOutPanel] onCloseTermsPopup called');
dispatch(setHidePopup()); dispatch(setHidePopup());
}, [dispatch]); }, [dispatch]);
const handlePopPanel = useCallback(() => { 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(setHidePopup());
dispatch(popPanel()); dispatch(popPanel());
}, [dispatch]); }, [dispatch]);
const handleTermsClick = useCallback( const handleTermsClick = useCallback(
(termsID) => { (termsID) => {
console.log('[CheckOutPanel] handleTermsClick called with termsID:', termsID); console.log('[BuyOption][CheckOutPanel] handleTermsClick called with termsID:', termsID);
if (empTermsData) { if (empTermsData) {
const selectedTerms = empTermsData.find((term) => term.termsID === termsID); const selectedTerms = empTermsData.find((term) => term.termsID === termsID);
console.log('[CheckOutPanel] Selected terms:', selectedTerms?.termsTypeName); console.log('[BuyOption][CheckOutPanel] Selected terms:', selectedTerms?.termsTypeName);
dispatch( dispatch(
sendLogTotalRecommend({ sendLogTotalRecommend({
buttonTitle: selectedTerms.termsTypeName, buttonTitle: selectedTerms.termsTypeName,
@@ -383,9 +386,9 @@ export default function CheckOutPanel({ panelInfo }) {
const onCancelCheckoutPanel = useCallback( const onCancelCheckoutPanel = useCallback(
(e) => { (e) => {
console.log('[CheckOutPanel] onCancelCheckoutPanel called'); console.log('[BuyOption][CheckOutPanel] onCancelCheckoutPanel called');
if (orderSideBarOpen) { if (orderSideBarOpen) {
console.log('[CheckOutPanel] Closing order sidebar'); console.log('[BuyOption][CheckOutPanel] Closing order sidebar');
setOrderSideBarOpen(false); setOrderSideBarOpen(false);
setTimeout(() => Spotlight.focus(), 0); setTimeout(() => Spotlight.focus(), 0);
@@ -393,7 +396,7 @@ export default function CheckOutPanel({ panelInfo }) {
} }
if (offerSideBarOpen) { if (offerSideBarOpen) {
console.log('[CheckOutPanel] Closing offer sidebar'); console.log('[BuyOption][CheckOutPanel] Closing offer sidebar');
setOfferSideBarOpen(false); setOfferSideBarOpen(false);
setTimeout(() => Spotlight.focus(), 0); setTimeout(() => Spotlight.focus(), 0);
@@ -401,7 +404,7 @@ export default function CheckOutPanel({ panelInfo }) {
} }
if (!orderSideBarOpen && !offerSideBarOpen) { if (!orderSideBarOpen && !offerSideBarOpen) {
console.log('[CheckOutPanel] Calling popPanel()'); console.log('[BuyOption][CheckOutPanel] Calling popPanel()');
dispatch(popPanel()); dispatch(popPanel());
e.stopPropagation(); e.stopPropagation();
} }
@@ -472,7 +475,7 @@ export default function CheckOutPanel({ panelInfo }) {
BUYNOW_CONFIG.isMockMode() BUYNOW_CONFIG.isMockMode()
); );
if (BUYNOW_CONFIG.isMockMode()) { if (BUYNOW_CONFIG.isMockMode()) {
console.log('[CheckOutPanel] Rendering InformationContainerMock'); console.log('[BuyOption][CheckOutPanel] Rendering InformationContainerMock');
return ( return (
<InformationContainerMock <InformationContainerMock
toggleOrderSideBar={toggleOrderSideBar} toggleOrderSideBar={toggleOrderSideBar}
@@ -482,7 +485,7 @@ export default function CheckOutPanel({ panelInfo }) {
/> />
); );
} else { } else {
console.log('[CheckOutPanel] Rendering InformationContainer'); console.log('[BuyOption][CheckOutPanel] Rendering InformationContainer');
return ( return (
<InformationContainer <InformationContainer
toggleOrderSideBar={toggleOrderSideBar} toggleOrderSideBar={toggleOrderSideBar}
@@ -564,6 +567,9 @@ export default function CheckOutPanel({ panelInfo }) {
setIsOrderSuccessful={setIsOrderSuccessful} setIsOrderSuccessful={setIsOrderSuccessful}
/> />
</TFullPopup> </TFullPopup>
<div style={{display: 'none'}}>
{console.log('%c[BuyOption][CheckOutPanel] ✅ Component rendering COMPLETE', 'background: lightgreen; color: black; font-weight: bold; padding: 5px;')}
</div>
</> </>
); );
} }

43
com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryContainerMock.jsx
View File

@@ -17,24 +17,45 @@ export default function SummaryContainerMock({
productInfo, productInfo,
defaultPrice, defaultPrice,
}) { }) {
console.log('[CheckOutPanel] SummaryContainerMock - START render'); console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - START render');
console.log('[CheckOutPanel] SummaryContainerMock - empTermsData:', empTermsData); console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - empTermsData:', empTermsData);
console.log('[CheckOutPanel] SummaryContainerMock - currSign:', currSign); console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - currSign:', currSign);
console.log('[CheckOutPanel] SummaryContainerMock - productData:', productData); console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - productData:', productData);
console.log('[CheckOutPanel] SummaryContainerMock - productInfo:', productInfo); 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용 가격 데이터 계산 // Mock Mode: productInfo로부터 ORDER SUMMARY용 가격 데이터 계산
const orderSummaryData = useMemo(() => { const orderSummaryData = useMemo(() => {
if (productInfo) { if (productInfo) {
// productInfo가 있으면 직접 계산 // productInfo가 있으면 직접 계산
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - Using calculateOrderSummaryFromProductInfo');
return calculateOrderSummaryFromProductInfo(productInfo); return calculateOrderSummaryFromProductInfo(productInfo);
} else { } else {
// productInfo가 없으면 기존 방식으로 fallback // productInfo가 없으면 기존 방식으로 fallback
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - Using fallback calculation (no productInfo)');
const selectedProduct = getSafeFirstProduct(productData); 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 productDiscount = parseFloat(selectedProduct?.discount || 0);
const tax = Math.round((productPrice * 0.1) * 100) / 100; const tax = Math.round((productPrice * 0.1) * 100) / 100;
console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - Fallback calculation:', {
productPrice,
productDiscount,
tax,
selectedProduct
});
return { return {
items: productPrice, items: productPrice,
couponSavings: productDiscount, couponSavings: productDiscount,
@@ -47,7 +68,7 @@ export default function SummaryContainerMock({
} }
}, [productInfo, productData, defaultPrice, currSign, currSignLoc]); }, [productInfo, productData, defaultPrice, currSign, currSignLoc]);
console.log('[CheckOutPanel] SummaryContainerMock - orderSummaryData:', orderSummaryData); console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - orderSummaryData:', orderSummaryData);
// 기존 호환성을 위해 effectivePriceTotalData 유지 // 기존 호환성을 위해 effectivePriceTotalData 유지
const effectivePriceTotalData = { const effectivePriceTotalData = {
@@ -59,7 +80,7 @@ export default function SummaryContainerMock({
ordPmtReqAmt: orderSummaryData.total, ordPmtReqAmt: orderSummaryData.total,
}; };
console.log('[CheckOutPanel] SummaryContainerMock - effectivePriceTotalData:', effectivePriceTotalData); console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - effectivePriceTotalData:', effectivePriceTotalData);
// Mock Mode: 기본 상품 정보 // Mock Mode: 기본 상품 정보
const productList = { const productList = {
@@ -101,7 +122,7 @@ export default function SummaryContainerMock({
setPlaceOrderPopup(true); setPlaceOrderPopup(true);
}, [doSendLogPaymentEntry, setPlaceOrderPopup]); }, [doSendLogPaymentEntry, setPlaceOrderPopup]);
console.log('[CheckOutPanel] SummaryContainerMock - items:', items); console.log('[BuyOption][CheckOutPanel] SummaryContainerMock - items:', items);
const renderItemList = useCallback( const renderItemList = useCallback(
() => () =>
@@ -133,13 +154,13 @@ export default function SummaryContainerMock({
); );
const estimatedTotal = useMemo(() => { 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); return formatCurrencyValue(effectivePriceTotalData.ordPmtReqAmt, orderSummaryData.currency.currSign, orderSummaryData.currency.currSignLoc);
}, [effectivePriceTotalData, orderSummaryData.currency]); }, [effectivePriceTotalData, orderSummaryData.currency]);
const showAuctionNotice = productList?.auctProdYn === 'Y' && !productList.auctFinalPriceChgDt; 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 ( return (
<> <>

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

@@ -23,6 +23,7 @@ import {
showError, showError,
} from '../../../actions/commonActions'; } from '../../../actions/commonActions';
import { getProductCouponSearch } from '../../../actions/couponActions'; import { getProductCouponSearch } from '../../../actions/couponActions';
import { getSafeProductPrice } from '../../../utils/mockDataSafetyUtils';
import { import {
sendLogPaymentEntry, sendLogPaymentEntry,
sendLogTotalRecommend, sendLogTotalRecommend,
@@ -448,26 +449,58 @@ const BuyOption = ({
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;
console.log('[BuyOption] handleClickOrder - productInfo:', productInfo);
console.log('[BuyOption] handleClickOrder - selectedOptions:', selectedOptions); console.log('[BuyOption] handleClickOrder - selectedOptions:', selectedOptions);
console.log('[BuyOption] handleClickOrder - priceInfo:', priceInfo); console.log('[BuyOption] handleClickOrder - priceInfo:', priceInfo);
console.log('[BuyOption] handleClickOrder - logInfo:', logInfo); console.log('[BuyOption] handleClickOrder - logInfo:', logInfo);
// priceInfo 파싱 및 숫자 변환 // productInfo에서 직접 price2, price5 추출 (가장 신뢰할 수 있는 소스)
let regularPrice = parseInt(priceInfo?.split('|')[0], 10) || 0; // price2 = 상품 가격 ("$ 521.66" 형식)
let discountPrice = parseInt(priceInfo?.split('|')[1], 10) || 0; // 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]; const discountRate = priceInfo?.split('|')[4];
// selectedOptions가 없으면 logInfo에서 가격 추출 console.log('[BuyOption] handleClickOrder - Calculated prices - regularPrice:', regularPrice, 'discountPrice:', discountPrice);
// selectedOptions가 없고 logInfo가 있으면, logInfo의 가격도 고려
if (!selectedOptions && 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" 형식이므로 숫자만 추출 (소수점 포함) // logInfo의 dcBefPrc와 dcAftrPrc는 "$ 521.66" 형식이므로 숫자만 추출 (소수점 포함)
const dcBefPrcMatch = logInfo.dcBefPrc?.match(/[\d.]+/); const dcBefPrcMatch = logInfo.dcBefPrc?.match(/[\d.]+/);
const dcAftrPrcMatch = logInfo.dcAftrPrc?.match(/[\d.]+/); const dcAftrPrcMatch = logInfo.dcAftrPrc?.match(/[\d.]+/);
regularPrice = dcBefPrcMatch ? parseFloat(dcBefPrcMatch[0]) : 0; const logRegularPrice = dcBefPrcMatch ? parseFloat(dcBefPrcMatch[0]) : 0;
discountPrice = dcAftrPrcMatch ? parseFloat(dcAftrPrcMatch[0]) : regularPrice; const logDiscountPrice = dcAftrPrcMatch ? parseFloat(dcAftrPrcMatch[0]) : logRegularPrice;
console.log('[BuyOption] handleClickOrder - extracted from logInfo - dcBefPrc:', logInfo.dcBefPrc, 'dcAftrPrc:', logInfo.dcAftrPrc);
// 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( dispatch(
sendLogTotalRecommend({ sendLogTotalRecommend({
@@ -538,22 +571,63 @@ const BuyOption = ({
imgUrl: imgUrl, // 상품 이미지 URL 추가 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 = { const checkoutPanelInfo = {
logInfo: { ...logInfo, cartTpSno: `MOCK_${Date.now()}` }, 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, defaultPrice: discountPrice,
}; };
console.log('[BuyOption] Mock Mode - mockProductInfo:', mockProductInfo); console.log('[BuyOption] Mock Mode - checkoutPanelInfo.productInfo price fields:', {
console.log('[BuyOption] Mock Mode - regularPrice(숫자):', regularPrice, 'discountPrice(숫자):', discountPrice); price2: price2Value,
price5: price5Value,
finalPrice: discountPrice,
origPrice: regularPrice,
discountPrice: discountPrice,
});
console.log('[BuyOption] Mock Mode - checkoutPanelInfo:', checkoutPanelInfo); 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( dispatch(
pushPanel({ pushPanel({
name: Config.panel_names.CHECKOUT_PANEL, name: Config.panel_names.CHECKOUT_PANEL,
panelInfo: checkoutPanelInfo, 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()); dispatch(clearAllToasts());