[251104] fix: CheckOutPanel전환시 Promise처리
🕐 커밋 시간: 2025. 11. 04. 13:15:26 📊 변경 통계: • 총 파일: 2개 • 추가: +110줄 • 삭제: -59줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/reducers/panelReducer.js ~ com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • UI 컴포넌트 아키텍처 개선 • 중간 규모 기능 개선 • 코드 정리 및 최적화
This commit is contained in:
@@ -373,30 +373,37 @@ const BuyOption = ({
|
||||
} else {
|
||||
const { mbrId, prdtId, prodSno } = response.data.productList[0];
|
||||
const cartTpSno = `${mbrId}_${prdtId}_${prodSno}`;
|
||||
// dispatch(popPanel(Config.panel_names.DETAIL_PANEL));
|
||||
clearAllVideoTimers(); // ProductVideoV2의 타이머 정리 (일반 함수 직접 호출)
|
||||
dispatch(finishMediaPreview()); // MediaPanel 정리
|
||||
|
||||
// 🔴 CRITICAL: DetailPanel 뒤에 있을 수 있는 PlayerPanel도 함께 제거 (API Mode)
|
||||
// CheckOutPanel 이동 전에 ProductVideoV2 타이머 및 MediaPanel/PlayerPanel 정리
|
||||
console.log('[BuyOption] API Mode - Cleaning up media panels before checkout');
|
||||
clearAllVideoTimers(); // ProductVideoV2의 타이머 정리
|
||||
dispatch(finishMediaPreview()); // MediaPanel 정리
|
||||
dispatch(popPanel(Config.panel_names.PLAYER_PANEL)); // PlayerPanel 제거
|
||||
|
||||
// 🔴 CRITICAL: 기존 CheckOutPanel 있으면 제거 후 새로 push (API Mode)
|
||||
dispatch((dispatchFn, getState) => {
|
||||
const panels = getState().panels?.panels || [];
|
||||
const playerPanelExists = panels.some(p =>
|
||||
p.name === Config.panel_names.PLAYER_PANEL ||
|
||||
p.name === Config.panel_names.PLAYER_PANEL_NEW
|
||||
);
|
||||
const checkoutPanelExists = panels.some(p => p.name === Config.panel_names.CHECKOUT_PANEL);
|
||||
|
||||
if (playerPanelExists) {
|
||||
console.log('[BuyOption] ⚠️ API Mode - Found PlayerPanel in stack - removing before checkout');
|
||||
dispatchFn(popPanel(Config.panel_names.PLAYER_PANEL));
|
||||
console.log('[BuyOption] 📊 API Mode - Current panels:', panels.map(p => p.name));
|
||||
|
||||
// 1️⃣ DetailPanel 제거 (STANDALONE_PANEL이므로 다른 패널 제거 필수)
|
||||
console.log('[BuyOption] 🗑️ API Mode - Removing DetailPanel');
|
||||
dispatchFn(popPanel(Config.panel_names.DETAIL_PANEL));
|
||||
|
||||
// 2️⃣ 기존 CheckOutPanel 제거 (있으면)
|
||||
if (checkoutPanelExists) {
|
||||
console.log('[BuyOption] 🗑️ API Mode - Removing existing CheckOutPanel');
|
||||
dispatchFn(popPanel(Config.panel_names.CHECKOUT_PANEL));
|
||||
}
|
||||
});
|
||||
|
||||
dispatch(
|
||||
pushPanel({
|
||||
// 3️⃣ 새로운 CheckOutPanel push
|
||||
console.log('[BuyOption] ➕ API Mode - Pushing new CheckOutPanel');
|
||||
dispatchFn(pushPanel({
|
||||
name: Config.panel_names.CHECKOUT_PANEL,
|
||||
panelInfo: { logInfo: { ...logInfo, cartTpSno } },
|
||||
})
|
||||
);
|
||||
}));
|
||||
});
|
||||
|
||||
dispatch(sendLogPaymentEntry({ ...logInfo, cartTpSno }));
|
||||
}
|
||||
@@ -636,25 +643,10 @@ const BuyOption = ({
|
||||
console.log('[BuyOption] Dispatching pushPanel to CHECKOUT_PANEL');
|
||||
|
||||
// CheckOutPanel 이동 전에 ProductVideoV2 타이머 및 MediaPanel/PlayerPanel 정리
|
||||
console.log('[BuyOption] Mock Mode - Cleaning up ProductVideoV2 timers and all media panels before checkout');
|
||||
clearAllVideoTimers(); // ProductVideoV2의 타이머 정리 (일반 함수 직접 호출)
|
||||
console.log('[BuyOption] Mock Mode - Cleaning up media panels before checkout');
|
||||
clearAllVideoTimers(); // ProductVideoV2의 타이머 정리
|
||||
dispatch(finishMediaPreview()); // MediaPanel 정리
|
||||
|
||||
// 🔴 CRITICAL: DetailPanel 뒤에 있을 수 있는 PlayerPanel도 함께 제거
|
||||
// (finishMediaPreview는 MediaPanel만 처리하므로 PlayerPanel이 남아있을 수 있음)
|
||||
// dispatch는 thunk function을 받을 수 있으므로, 이를 활용하여 getState로 panels 접근
|
||||
dispatch((dispatchFn, getState) => {
|
||||
const panels = getState().panels?.panels || [];
|
||||
const playerPanelExists = panels.some(p =>
|
||||
p.name === Config.panel_names.PLAYER_PANEL ||
|
||||
p.name === Config.panel_names.PLAYER_PANEL_NEW
|
||||
);
|
||||
|
||||
if (playerPanelExists) {
|
||||
console.log('[BuyOption] ⚠️ Found PlayerPanel in stack - removing before checkout');
|
||||
dispatchFn(popPanel(Config.panel_names.PLAYER_PANEL));
|
||||
}
|
||||
});
|
||||
dispatch(popPanel(Config.panel_names.PLAYER_PANEL)); // PlayerPanel 제거
|
||||
|
||||
// Mock 모드: 선택 상품의 정보를 panelInfo에 담아서 전달
|
||||
// CheckOutPanel에서 이 정보로 Mock 상품 데이터 생성
|
||||
@@ -727,9 +719,8 @@ const BuyOption = ({
|
||||
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;');
|
||||
console.log('%c[BuyOption] Mock Mode - Final checkoutPanelInfo:', 'background: blue; color: white; padding: 3px;', checkoutPanelInfo);
|
||||
|
||||
console.log('%c[BuyOption] 🔍 Determining UPDATE vs PUSH for CheckOutPanel', 'background: orange; color: white; font-weight: bold; padding: 5px;');
|
||||
|
||||
// Mock Mode: checkoutPanelInfo가 있으면 무조건 진행
|
||||
if (!checkoutPanelInfo) {
|
||||
console.error('%c[BuyOption] ❌ Mock Mode - checkoutPanelInfo is null/undefined', 'background: red; color: white; padding: 3px;');
|
||||
@@ -750,20 +741,49 @@ const BuyOption = ({
|
||||
defaultPrice: 99999,
|
||||
};
|
||||
console.log('%c[BuyOption] Mock Mode - Using fallback panelInfo', 'background: orange; color: white; padding: 3px;', fallbackPanelInfo);
|
||||
dispatch(
|
||||
pushPanel({
|
||||
name: Config.panel_names.CHECKOUT_PANEL,
|
||||
panelInfo: fallbackPanelInfo,
|
||||
})
|
||||
);
|
||||
|
||||
// 🔴 CRITICAL: DetailPanel Pop 완료 후 CheckOutPanel Push (Promise 체인)
|
||||
dispatch((dispatchFn) => {
|
||||
return new Promise((resolve) => {
|
||||
console.log('[BuyOption] 1️⃣ Popping DetailPanel...');
|
||||
dispatchFn(popPanel(Config.panel_names.DETAIL_PANEL));
|
||||
|
||||
// Pop이 끝난 후 Push 실행
|
||||
Promise.resolve().then(() => {
|
||||
console.log('[BuyOption] 2️⃣ Pushing CheckOutPanel...');
|
||||
dispatchFn(
|
||||
pushPanel({
|
||||
name: Config.panel_names.CHECKOUT_PANEL,
|
||||
panelInfo: fallbackPanelInfo,
|
||||
})
|
||||
);
|
||||
console.log('[BuyOption] ✅ Panel transition complete');
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// 정상 케이스: checkoutPanelInfo 사용
|
||||
dispatch(
|
||||
pushPanel({
|
||||
name: Config.panel_names.CHECKOUT_PANEL,
|
||||
panelInfo: checkoutPanelInfo,
|
||||
})
|
||||
);
|
||||
// 🔴 CRITICAL: DetailPanel Pop 완료 후 CheckOutPanel Push (Promise 체인)
|
||||
dispatch((dispatchFn) => {
|
||||
return new Promise((resolve) => {
|
||||
console.log('[BuyOption] 1️⃣ Normal - Popping DetailPanel...');
|
||||
dispatchFn(popPanel(Config.panel_names.DETAIL_PANEL));
|
||||
|
||||
// Pop이 끝난 후 Push 실행
|
||||
Promise.resolve().then(() => {
|
||||
console.log('[BuyOption] 2️⃣ Normal - Pushing CheckOutPanel...');
|
||||
dispatchFn(
|
||||
pushPanel({
|
||||
name: Config.panel_names.CHECKOUT_PANEL,
|
||||
panelInfo: checkoutPanelInfo,
|
||||
})
|
||||
);
|
||||
console.log('[BuyOption] ✅ Normal - Panel transition complete');
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
console.log('%c[BuyOption] ✅ AFTER pushPanel dispatch', 'background: orange; color: white; font-weight: bold; padding: 5px;');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user