[251106] fix: BuyOption to CheckOutPanel

🕐 커밋 시간: 2025. 11. 06. 18:37:14

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +97줄
  • 삭제: -5줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/checkoutActions.js
  ~ com.twin.app.shoptime/src/reducers/checkoutReducer.js
  ~ com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선

com.twin.app.shoptime/src/actions/checkoutActions.js

@@ -16,9 +16,44 @@ export const getMyInfoCheckoutInfo =
     const onSuccess = (response) => {
       console.log("getMyInfoCheckoutInfo onSuccess: ", response.data);
 
+      // 🔍 API 응답 구조 분석
+      const checkoutData = response.data.data || response.data;
+      const defaultAddrSno = checkoutData?.shippingAddressList?.[0]?.dlvrAddrSno || checkoutData?.shippingAddressList?.[0]?.addrSno;
+      const defaultBilAddrSno = checkoutData?.billingAddressList?.[0]?.bilAddrSno || checkoutData?.billingAddressList?.[0]?.addrSno;
+
+      console.log('[checkoutActions] 🔍 Checkout data structure:', {
+        hasResponseDataData: !!response.data.data,
+        directData: !!response.data,
+        defaultAddrSno,
+        defaultBilAddrSno,
+        shippingAddressCount: checkoutData?.shippingAddressList?.length,
+        billingAddressCount: checkoutData?.billingAddressList?.length,
+      });
+
+      // 🔴 billingAddressList 상세 분석
+      console.log('[checkoutActions] 🔴 billingAddressList analysis:', {
+        billingAddressList: checkoutData?.billingAddressList,
+        firstBillingAddress: checkoutData?.billingAddressList?.[0],
+        firstBillingAddressKeys: Object.keys(checkoutData?.billingAddressList?.[0] || {}),
+      });
+
+      // 기본 주소 선택 (첫 번째 주소 사용)
+      const infoForCheckoutData = {
+        dlvrAddrSno: defaultAddrSno,
+        bilAddrSno: defaultBilAddrSno,
+      };
+
+      console.log('[checkoutActions] 📦 Dispatching GET_CHECKOUT_INFO with:', {
+        infoForCheckoutData,
+        checkoutData,
+      });
+
       dispatch({
         type: types.GET_CHECKOUT_INFO,
-        payload: response.data.data,
+        payload: {
+          ...checkoutData,
+          ...infoForCheckoutData, // 기본 주소 정보 추가
+        },
       });
 
       if (callback) callback(response.data);

com.twin.app.shoptime/src/reducers/checkoutReducer.js

@@ -16,6 +16,11 @@ export const checkoutReducer = (state = initialState, action) => {
       return {
         ...state,
         checkoutData: action.payload,
+        // 🚀 infoForCheckoutData도 함께 업데이트
+        infoForCheckoutData: {
+          dlvrAddrSno: action.payload?.dlvrAddrSno,
+          bilAddrSno: action.payload?.bilAddrSno,
+        },
       };
 
     case types.GET_TAX_INFOS:

com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx

@@ -323,6 +323,16 @@ export default function CheckOutPanel({ panelInfo }) {
 
     console.log('[BuyOption][CheckOutPanel] API Mode - calling getCheckoutTotalAmt');
     // API Mode: 기존 로직 유지
+
+    // 🔍 조건 디버깅
+    console.log('[BuyOption][CheckOutPanel] 🔍 getCheckoutTotalAmt conditions:', {
+      hasInfoForCheckoutData: !!infoForCheckoutData,
+      hasProductData: !!productData,
+      dlvrAddrSno: infoForCheckoutData?.dlvrAddrSno,
+      bilAddrSno: infoForCheckoutData?.bilAddrSno,
+      fullInfoForCheckoutData: infoForCheckoutData,
+    });
+
     if (infoForCheckoutData && productData) {
       const orderProductCoupontUse = Object.keys(selectedCoupons).map((productId) => {
         const { cpnCdSeq, cpnSno, prdtId } = selectedCoupons[productId];
@@ -342,6 +352,7 @@ export default function CheckOutPanel({ panelInfo }) {
         infoForCheckoutData.dlvrAddrSno &&
         infoForCheckoutData.bilAddrSno
       ) {
+        console.log('[BuyOption][CheckOutPanel] ✅ All conditions met - Calling getCheckoutTotalAmt');
         dispatch(
           getCheckoutTotalAmt(
             {

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

@@ -538,17 +538,41 @@ const BuyOption = ({
 
   // checkOutValidate 콜백 함수 (SingleOption과 동일한 로직)
   function checkOutValidate(response) {
+    console.log('%c[BuyOption] 🔴 checkOutValidate CALLED', 'background: red; color: white; font-weight: bold; padding: 5px;', {
+      hasResponse: !!response,
+      retCode: response?.retCode,
+      retMsg: response?.retMsg,
+      hasCardInfo: !!response?.data?.cardInfo,
+      hasBillingAddress: response?.data?.billingAddressList?.length > 0,
+      hasShippingAddress: response?.data?.shippingAddressList?.length > 0,
+      hasProductList: response?.data?.productList?.length > 0,
+    });
+
     if (response) {
       if (response.retCode === 0) {
+        // 🔍 조건 체크
+        const isCardInfoNull = response.data.cardInfo === null;
+        const isBillingAddressEmpty = response.data.billingAddressList.length === 0;
+        const isShippingAddressEmpty = response.data.shippingAddressList.length === 0;
+
+        console.log('%c[BuyOption] 🔍 Address & Card Validation:', 'background: blue; color: white; font-weight: bold; padding: 5px;', {
+          isCardInfoNull,
+          isBillingAddressEmpty,
+          isShippingAddressEmpty,
+          needsQRPopup: isCardInfoNull || isBillingAddressEmpty || isShippingAddressEmpty,
+        });
+
         if (
-          response.data.cardInfo === null ||
-          response.data.billingAddressList.length === 0 ||
-          response.data.shippingAddressList.length === 0
+          isCardInfoNull ||
+          isBillingAddressEmpty ||
+          isShippingAddressEmpty
         ) {
+          console.log('%c[BuyOption] 🟡 Missing card/address - Showing QR Popup', 'background: orange; color: white; font-weight: bold; padding: 5px;');
           dispatch(setShowPopup(Config.ACTIVE_POPUP.qrPopup));
           dispatch(changeAppStatus({ isLoading: false }));
           return;
         } else {
+          console.log('%c[BuyOption] ✅ All address & card data present - Proceeding to CheckOutPanel', 'background: green; color: white; font-weight: bold; padding: 5px;');
           const { mbrId, prdtId, prodSno } = response.data.productList[0];
           const cartTpSno = `${mbrId}_${prdtId}_${prodSno}`;
 
@@ -579,6 +603,10 @@ const BuyOption = ({
               name: Config.panel_names.CHECKOUT_PANEL,
               panelInfo: { logInfo: { ...logInfo, cartTpSno } },
             }));
+
+            // 🚀 CheckOutPanel 이동 후 BuyOption Toast 닫기
+            console.log('[BuyOption] 🔥 Closing BuyOption Toast after CheckOutPanel push');
+            dispatchFn(clearAllToasts());
           });
 
           dispatch(sendLogPaymentEntry({ ...logInfo, cartTpSno }));
@@ -791,7 +819,20 @@ const BuyOption = ({
       );
 
       // Mock Mode: API 호출 스킵
+      console.log('%c[BuyOption] 🔍 CHECK BUYNOW_CONFIG.isMockMode() at BUY NOW time:', 'background: orange; color: white; font-weight: bold; padding: 5px;', {
+        isMockMode: BUYNOW_CONFIG.isMockMode(),
+        localIsMockMode: isMockMode,
+      });
+
       if (!BUYNOW_CONFIG.isMockMode()) {
+        console.log('%c[BuyOption] 🚀 API MODE DETECTED - Calling getMyInfoCheckoutInfo', 'background: green; color: white; font-weight: bold; padding: 5px;');
+        console.log('[BuyOption] API 파라미터:', {
+          mbrNo: userNumber,
+          dirPurcSelYn: 'Y',
+          patnrId: selectedPatnrId,
+          prdtId: selectedPrdtId,
+          prodQty: String(quantity),
+        });
         dispatch(
           getMyInfoCheckoutInfo(
             {
@@ -815,7 +856,7 @@ const BuyOption = ({
       } else {
         // Mock Mode: 체크아웃 페이지로 이동 (시뮬레이션)
         // panelInfo의 logInfo에 선택한 상품 정보를 포함시켜 CheckOutPanel에서 사용
-        console.log('[BuyOption] Mock Mode - Simulating checkout');
+        console.log('%c[BuyOption] 🟠 MOCK MODE DETECTED - Simulating checkout WITHOUT API', 'background: orange; color: white; font-weight: bold; padding: 5px;');
         console.log('[BuyOption] logInfo:', logInfo);
         console.log('[BuyOption] Dispatching pushPanel to CHECKOUT_PANEL');