[251101] fix: BuyNow Mock Mocde

🕐 커밋 시간: 2025. 11. 01. 16:14:38

📊 변경 통계:
  • 총 파일: 13개
  • 추가: +504줄
  • 삭제: -170줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/utils/BuyNowConfig.js
  + com.twin.app.shoptime/src/utils/BuyNowDataManipulator.js

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/hooks/useReviews/useReviews.js
  ~ com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
  ~ com.twin.app.shoptime/src/views/CheckOutPanel/container/FixedSideBar.jsx
  ~ com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
  ~ com.twin.app.shoptime/src/views/CheckOutPanel/container/OrderItemsSideBar.jsx
  ~ com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryCotainer.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviews.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx
  ~ com.twin.app.shoptime/src/views/MainView/MainView.jsx
  ~ com.twin.app.shoptime/src/views/UserReview/ShowUserReviews.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • UI 컴포넌트 아키텍처 개선
  • 공통 유틸리티 함수 최적화
  • 대규모 기능 개발
  • 모듈 구조 개선

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

@@ -32,6 +32,7 @@ import useScrollTo from "../../hooks/useScrollTo";
 import * as Config from "../../utils/Config";
 import { $L, scaleH, scaleW } from "../../utils/helperMethods";
 import { SpotlightIds } from "../../utils/SpotlightIds";
+import { BUYNOW_CONFIG } from "../../utils/BuyNowConfig";
 import css from "./CheckOutPanel.module.less";
 import PinCodeInput from "./components/PinCodeInput";
 import FixedSideBar from "./container/FixedSideBar";
@@ -40,12 +41,16 @@ import OrderItemsSideBar from "./container/OrderItemsSideBar";
 import SummaryContainer from "./container/SummaryCotainer";
 
 export default function CheckOutPanel({ panelInfo }) {
+  console.log('[CheckOutPanel] Component mounted');
+  console.log('[CheckOutPanel] panelInfo:', panelInfo);
+  console.log('[CheckOutPanel] panelInfo.logInfo:', panelInfo?.logInfo);
   const dispatch = useDispatch();
   const panels = useSelector((state) => state.panels.panels);
+  console.log('[CheckOutPanel] panels:', panels?.map(p => p.name));
   const { userNumber } = useSelector(
     (state) => state.common.appStatus.loginUserData
   );
-  const productData = useSelector(
+  const reduxProductData = useSelector(
     (state) => state.checkout?.checkoutData.productList
   );
   const infoForCheckoutData = useSelector(
@@ -59,7 +64,32 @@ export default function CheckOutPanel({ panelInfo }) {
     (state) => state.common.popup
   );
   const popup = useSelector((state) => state.common.popup);
+
+  // Mock Mode: 가짜 상품 데이터 생성
+  const productData = BUYNOW_CONFIG.isMockMode()
+    ? reduxProductData || [
+        {
+          prdtId: 'MOCK_PRODUCT_1',
+          prdtNm: 'Mock Product for Demonstration',
+          patnrId: '1',
+          patncNm: 'Mock Partner',
+          prodSno: 'MOCK_123',
+          prodQty: 1,
+          finalPrice: 99999,
+          origPrice: 99999,
+          discountPrice: 99999,
+          currSign: '$',
+          currSignLoc: 'left',
+        }
+      ]
+    : reduxProductData;
+
+  console.log('[CheckOutPanel] isMockMode:', BUYNOW_CONFIG.isMockMode());
+  console.log('[CheckOutPanel] reduxProductData:', reduxProductData);
+  console.log('[CheckOutPanel] productData:', productData);
+
   const { currSign, currSignLoc } = productData?.[0] || {};
+  console.log('[CheckOutPanel] currSign:', currSign, 'currSignLoc:', currSignLoc);
 
   const [orderSideBarOpen, setOrderSideBarOpen] = useState(false);
   const [offerSideBarOpen, setOfferSideBarOpen] = useState(false);
@@ -79,9 +109,11 @@ export default function CheckOutPanel({ panelInfo }) {
   const spotJob = useRef(new Job((func) => func(), 0));
 
   useEffect(() => {
+    console.log('[CheckOutPanel] sendLogGNB useEffect - isOrderSuccessful:', isOrderSuccessful);
     let nowMenu;
 
     if (isOrderSuccessful) {
+      console.log('[CheckOutPanel] Order successful, returning early');
       return;
     }
     //
@@ -93,18 +125,22 @@ export default function CheckOutPanel({ panelInfo }) {
       nowMenu = Config.LOG_MENU.CHECKOUT_PIN_CODE;
     }
 
+    console.log('[CheckOutPanel] Dispatching sendLogGNB with menu:', nowMenu);
     dispatch(sendLogGNB(nowMenu));
   }, [isOrderSuccessful, placeOrderPopup, popupVisible]);
 
   useEffect(() => {
+    console.log('[CheckOutPanel] isMounted useEffect');
     isMounted.current = true;
 
     return () => {
+      console.log('[CheckOutPanel] isMounted cleanup - component unmounting');
       isMounted.current = false;
     };
   }, []);
 
   useEffect(() => {
+    console.log('[CheckOutPanel] getShoptimeTerms useEffect');
     dispatch(getShoptimeTerms());
   }, [dispatch]);
 
@@ -123,6 +159,18 @@ 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);
+
+    // Mock Mode: API 호출 스킵
+    if (BUYNOW_CONFIG.isMockMode()) {
+      console.log('[CheckOutPanel] Mock Mode - Skipping checkout total amount calculation');
+      return;
+    }
+
+    console.log('[CheckOutPanel] API Mode - calling getCheckoutTotalAmt');
+    // API Mode: 기존 로직 유지
     if (infoForCheckoutData && productData) {
       const orderProductCoupontUse = Object.keys(selectedCoupons).map(
         (productId) => {
@@ -161,6 +209,7 @@ export default function CheckOutPanel({ panelInfo }) {
   }, [dispatch, infoForCheckoutData, productData, userNumber, selectedCoupons]);
 
   useEffect(() => {
+    console.log('[CheckOutPanel] empTermsData useEffect - empTermsData length:', empTermsData?.length);
     const newTabList = [];
 
     if (empTermsData) {
@@ -168,12 +217,15 @@ export default function CheckOutPanel({ panelInfo }) {
         newTabList.push(term.termsTypeName);
       });
 
+      console.log('[CheckOutPanel] Setting tabList:', newTabList);
       setTabList(newTabList);
     }
   }, [empTermsData]);
 
   useEffect(() => {
+    console.log('[CheckOutPanel] cleanup useEffect - setting up cleanup');
     return () => {
+      console.log('[CheckOutPanel] cleanup useEffect - calling resetCheckoutData');
       dispatch(resetCheckoutData());
     };
   }, [dispatch]);
@@ -195,10 +247,12 @@ export default function CheckOutPanel({ panelInfo }) {
   }, [activePopup]);
 
   const onBackClick = useCallback(() => {
+    console.log('[CheckOutPanel] onBackClick called - dispatching popPanel');
     dispatch(popPanel());
   }, [dispatch]);
 
   const toggleOrderSideBar = useCallback(() => {
+    console.log('[CheckOutPanel] toggleOrderSideBar called - current state:', orderSideBarOpen);
     if (!orderSideBarOpen) {
       dispatch(sendLogCheckOutBtnClick({ btnNm: "ORDER ITEMS" }));
       dispatch(
@@ -209,14 +263,14 @@ export default function CheckOutPanel({ panelInfo }) {
           messageId: Config.LOG_MESSAGE_ID.BUTTONCLICK,
         })
       );
-      console.log("oder items");
     }
 
     setOrderSideBarOpen((prev) => !prev);
     setTimeout(() => Spotlight.focus(), 0);
-  }, [orderSideBarOpen]);
+  }, [orderSideBarOpen, dispatch]);
 
   const toggleOfferSideBar = useCallback(() => {
+    console.log('[CheckOutPanel] toggleOfferSideBar called - current state:', offerSideBarOpen);
     if (!offerSideBarOpen) {
       dispatch(sendLogCheckOutBtnClick({ btnNm: "OFFERS & PROMOTION" }));
       dispatch(
@@ -231,29 +285,34 @@ export default function CheckOutPanel({ panelInfo }) {
 
     setOfferSideBarOpen((prev) => !prev);
     setTimeout(() => Spotlight.focus(), 0);
-  }, [offerSideBarOpen]);
+  }, [offerSideBarOpen, dispatch]);
 
   const onClosePopup = useCallback(() => {
+    console.log('[CheckOutPanel] onClosePopup called');
     setPlaceOrderPopup(false);
     setTimeout(() => Spotlight.focus(), 0);
   }, []);
 
   const onCloseTermsPopup = useCallback(() => {
+    console.log('[CheckOutPanel] onCloseTermsPopup called');
     dispatch(setHidePopup());
   }, [dispatch]);
 
   const handlePopPanel = useCallback(() => {
+    console.log('[CheckOutPanel] handlePopPanel called - dispatching setHidePopup and popPanel');
     dispatch(setHidePopup());
     dispatch(popPanel());
   }, [dispatch]);
 
   const handleTermsClick = useCallback(
     (termsID) => {
+      console.log('[CheckOutPanel] handleTermsClick called with termsID:', termsID);
       if (empTermsData) {
         const selectedTerms = empTermsData.find(
           (term) => term.termsID === termsID
         );
 
+        console.log('[CheckOutPanel] Selected terms:', selectedTerms?.termsTypeName);
         dispatch(
           sendLogTotalRecommend({
             buttonTitle: selectedTerms.termsTypeName,
@@ -298,7 +357,9 @@ export default function CheckOutPanel({ panelInfo }) {
 
   const onCancelCheckoutPanel = useCallback(
     (e) => {
+      console.log('[CheckOutPanel] onCancelCheckoutPanel called');
       if (orderSideBarOpen) {
+        console.log('[CheckOutPanel] Closing order sidebar');
         setOrderSideBarOpen(false);
         setTimeout(() => Spotlight.focus(), 0);
 
@@ -306,6 +367,7 @@ export default function CheckOutPanel({ panelInfo }) {
       }
 
       if (offerSideBarOpen) {
+        console.log('[CheckOutPanel] Closing offer sidebar');
         setOfferSideBarOpen(false);
         setTimeout(() => Spotlight.focus(), 0);
 
@@ -313,6 +375,7 @@ export default function CheckOutPanel({ panelInfo }) {
       }
 
       if (!orderSideBarOpen && !offerSideBarOpen) {
+        console.log('[CheckOutPanel] Calling popPanel()');
         dispatch(popPanel());
         e.stopPropagation();
       }
@@ -330,6 +393,9 @@ export default function CheckOutPanel({ panelInfo }) {
     dispatch(sendLogMyInfoEdit({ btnNm }));
   }, []);
 
+  console.log('[CheckOutPanel] Rendering - orderSideBarOpen:', orderSideBarOpen, 'offerSideBarOpen:', offerSideBarOpen, 'placeOrderPopup:', placeOrderPopup);
+  console.log('[CheckOutPanel] Rendering - productData exists:', !!productData, 'length:', productData?.length);
+
   return (
     <>
       <TPanel