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

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';
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>
</>
);
}