[251101] fix: CheckOutPanel Mock-1
🕐 커밋 시간: 2025. 11. 01. 18:19:39 📊 변경 통계: • 총 파일: 10개 • 추가: +68줄 • 삭제: -33줄 📁 추가된 파일: + com.twin.app.shoptime/src/views/CheckOutPanel/components/BillingAddressCardMock.jsx + com.twin.app.shoptime/src/views/CheckOutPanel/components/PaymentCardMock.jsx + com.twin.app.shoptime/src/views/CheckOutPanel/components/ShippingAddressCardMock.jsx + com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainerMock.jsx + com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryContainerMock.jsx 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx ~ com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.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 🔧 주요 변경 내용: • UI 컴포넌트 아키텍처 개선 • 소규모 기능 개선 • 모듈 구조 개선
This commit is contained in:
@@ -1,44 +1,43 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { Job } from "@enact/core/util";
|
||||
import Spotlight from "@enact/spotlight";
|
||||
import { Job } from '@enact/core/util';
|
||||
import Spotlight from '@enact/spotlight';
|
||||
|
||||
import {
|
||||
getCheckoutTotalAmt,
|
||||
resetCheckoutData,
|
||||
} from "../../actions/checkoutActions";
|
||||
import { setHidePopup, setShowPopup } from "../../actions/commonActions";
|
||||
import { getShoptimeTerms } from "../../actions/empActions";
|
||||
import { getCheckoutTotalAmt, resetCheckoutData } from '../../actions/checkoutActions';
|
||||
import { setHidePopup, setShowPopup } from '../../actions/commonActions';
|
||||
import { getShoptimeTerms } from '../../actions/empActions';
|
||||
import {
|
||||
sendLogCheckOutBtnClick,
|
||||
sendLogGNB,
|
||||
sendLogMyInfoEdit,
|
||||
sendLogPaymentEntry,
|
||||
sendLogTotalRecommend,
|
||||
} from "../../actions/logActions";
|
||||
import { popPanel } from "../../actions/panelActions";
|
||||
import TBody from "../../components/TBody/TBody";
|
||||
import TButton from "../../components/TButton/TButton";
|
||||
import TButtonScroller from "../../components/TButtonScroller/TButtonScroller";
|
||||
import TButtonTab from "../../components/TButtonTab/TButtonTab";
|
||||
import TFullPopup from "../../components/TFullPopup/TFullPopup";
|
||||
import THeader from "../../components/THeader/THeader";
|
||||
import TPanel from "../../components/TPanel/TPanel";
|
||||
import TPopUp from "../../components/TPopUp/TPopUp";
|
||||
import TQRCode from "../../components/TQRCode/TQRCode";
|
||||
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";
|
||||
import InformationContainer from "./container/InformationContainer";
|
||||
import OrderItemsSideBar from "./container/OrderItemsSideBar";
|
||||
import SummaryContainer from "./container/SummaryCotainer";
|
||||
} from '../../actions/logActions';
|
||||
import { popPanel } from '../../actions/panelActions';
|
||||
import TBody from '../../components/TBody/TBody';
|
||||
import TButton from '../../components/TButton/TButton';
|
||||
import TButtonScroller from '../../components/TButtonScroller/TButtonScroller';
|
||||
import TButtonTab from '../../components/TButtonTab/TButtonTab';
|
||||
import TFullPopup from '../../components/TFullPopup/TFullPopup';
|
||||
import THeader from '../../components/THeader/THeader';
|
||||
import TPanel from '../../components/TPanel/TPanel';
|
||||
import TPopUp from '../../components/TPopUp/TPopUp';
|
||||
import TQRCode from '../../components/TQRCode/TQRCode';
|
||||
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';
|
||||
import InformationContainer from './container/InformationContainer';
|
||||
import OrderItemsSideBar from './container/OrderItemsSideBar';
|
||||
import SummaryContainer from './container/SummaryCotainer';
|
||||
import SummaryContainerMock from './container/SummaryContainerMock';
|
||||
import InformationContainerMock from './container/InformationContainerMock';
|
||||
|
||||
export default function CheckOutPanel({ panelInfo }) {
|
||||
console.log('[CheckOutPanel] Component mounted');
|
||||
@@ -46,23 +45,16 @@ export default function CheckOutPanel({ 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 reduxProductData = useSelector(
|
||||
(state) => state.checkout?.checkoutData.productList
|
||||
);
|
||||
const infoForCheckoutData = useSelector(
|
||||
(state) => state.checkout?.infoForCheckoutData
|
||||
);
|
||||
const selectedCoupons = useSelector(
|
||||
(state) => state.checkout.selectedCoupons
|
||||
console.log(
|
||||
'[CheckOutPanel] panels:',
|
||||
panels?.map((p) => p.name)
|
||||
);
|
||||
const { userNumber } = useSelector((state) => state.common.appStatus.loginUserData);
|
||||
const reduxProductData = useSelector((state) => state.checkout?.checkoutData.productList);
|
||||
const infoForCheckoutData = useSelector((state) => state.checkout?.infoForCheckoutData);
|
||||
const selectedCoupons = useSelector((state) => state.checkout.selectedCoupons);
|
||||
const empTermsData = useSelector((state) => state.emp.empTermsData.terms);
|
||||
const { popupVisible, activePopup } = useSelector(
|
||||
(state) => state.common.popup
|
||||
);
|
||||
const { popupVisible, activePopup } = useSelector((state) => state.common.popup);
|
||||
const popup = useSelector((state) => state.common.popup);
|
||||
|
||||
// Mock Mode: 가짜 상품 데이터 생성
|
||||
@@ -80,7 +72,7 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
discountPrice: 99999,
|
||||
currSign: '$',
|
||||
currSignLoc: 'left',
|
||||
}
|
||||
},
|
||||
]
|
||||
: reduxProductData;
|
||||
|
||||
@@ -103,8 +95,7 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
|
||||
const isMounted = useRef(true);
|
||||
|
||||
const { getScrollTo: getScrollToBody, scrollTop: scrollTopBody } =
|
||||
useScrollTo();
|
||||
const { getScrollTo: getScrollToBody, scrollTop: scrollTopBody } = useScrollTo();
|
||||
|
||||
const spotJob = useRef(new Job((func) => func(), 0));
|
||||
|
||||
@@ -172,20 +163,18 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
console.log('[CheckOutPanel] API Mode - calling getCheckoutTotalAmt');
|
||||
// API Mode: 기존 로직 유지
|
||||
if (infoForCheckoutData && productData) {
|
||||
const orderProductCoupontUse = Object.keys(selectedCoupons).map(
|
||||
(productId) => {
|
||||
const { cpnCdSeq, cpnSno, prdtId } = selectedCoupons[productId];
|
||||
const product = productData.find((prod) => prod.prdtId === prdtId);
|
||||
const orderProductCoupontUse = Object.keys(selectedCoupons).map((productId) => {
|
||||
const { cpnCdSeq, cpnSno, prdtId } = selectedCoupons[productId];
|
||||
const product = productData.find((prod) => prod.prdtId === prdtId);
|
||||
|
||||
return {
|
||||
cpnCdSeq,
|
||||
cpnSno,
|
||||
prdtId,
|
||||
prodSno: product?.prodSno,
|
||||
patnrId: product?.patnrId,
|
||||
};
|
||||
}
|
||||
);
|
||||
return {
|
||||
cpnCdSeq,
|
||||
cpnSno,
|
||||
prdtId,
|
||||
prodSno: product?.prodSno,
|
||||
patnrId: product?.patnrId,
|
||||
};
|
||||
});
|
||||
|
||||
if (
|
||||
infoForCheckoutData &&
|
||||
@@ -196,7 +185,7 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
getCheckoutTotalAmt(
|
||||
{
|
||||
mbrNo: userNumber,
|
||||
dirPurcSelYn: "Y",
|
||||
dirPurcSelYn: 'Y',
|
||||
bilAddrSno: infoForCheckoutData.bilAddrSno,
|
||||
dlvrAddrSno: infoForCheckoutData.dlvrAddrSno,
|
||||
orderProductCoupontUse,
|
||||
@@ -209,7 +198,10 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
}, [dispatch, infoForCheckoutData, productData, userNumber, selectedCoupons]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('[CheckOutPanel] empTermsData useEffect - empTermsData length:', empTermsData?.length);
|
||||
console.log(
|
||||
'[CheckOutPanel] empTermsData useEffect - empTermsData length:',
|
||||
empTermsData?.length
|
||||
);
|
||||
const newTabList = [];
|
||||
|
||||
if (empTermsData) {
|
||||
@@ -235,7 +227,7 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
|
||||
spotJobValue.start(() => {
|
||||
if (!activePopup) {
|
||||
Spotlight.focus("spotlightId_placeOrderBtn");
|
||||
Spotlight.focus('spotlightId_placeOrderBtn');
|
||||
} else if (activePopup === Config.ACTIVE_POPUP.errorPopup) {
|
||||
Spotlight.focus(SpotlightIds.TPOPUP);
|
||||
}
|
||||
@@ -254,11 +246,11 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
const toggleOrderSideBar = useCallback(() => {
|
||||
console.log('[CheckOutPanel] toggleOrderSideBar called - current state:', orderSideBarOpen);
|
||||
if (!orderSideBarOpen) {
|
||||
dispatch(sendLogCheckOutBtnClick({ btnNm: "ORDER ITEMS" }));
|
||||
dispatch(sendLogCheckOutBtnClick({ btnNm: 'ORDER ITEMS' }));
|
||||
dispatch(
|
||||
sendLogTotalRecommend({
|
||||
buttonTitle: "ORDER ITEMS",
|
||||
buttonId: "checkout_order_items_view",
|
||||
buttonTitle: 'ORDER ITEMS',
|
||||
buttonId: 'checkout_order_items_view',
|
||||
contextName: Config.LOG_CONTEXT_NAME.CHECKOUT,
|
||||
messageId: Config.LOG_MESSAGE_ID.BUTTONCLICK,
|
||||
})
|
||||
@@ -272,11 +264,11 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
const toggleOfferSideBar = useCallback(() => {
|
||||
console.log('[CheckOutPanel] toggleOfferSideBar called - current state:', offerSideBarOpen);
|
||||
if (!offerSideBarOpen) {
|
||||
dispatch(sendLogCheckOutBtnClick({ btnNm: "OFFERS & PROMOTION" }));
|
||||
dispatch(sendLogCheckOutBtnClick({ btnNm: 'OFFERS & PROMOTION' }));
|
||||
dispatch(
|
||||
sendLogTotalRecommend({
|
||||
buttonTitle: "OFFERS & PROMOTION",
|
||||
buttonId: "checkout_offers_promotion_view",
|
||||
buttonTitle: 'OFFERS & PROMOTION',
|
||||
buttonId: 'checkout_offers_promotion_view',
|
||||
contextName: Config.LOG_CONTEXT_NAME.CHECKOUT,
|
||||
messageId: Config.LOG_MESSAGE_ID.BUTTONCLICK,
|
||||
})
|
||||
@@ -308,9 +300,7 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
(termsID) => {
|
||||
console.log('[CheckOutPanel] handleTermsClick called with termsID:', termsID);
|
||||
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);
|
||||
dispatch(
|
||||
@@ -318,17 +308,15 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
buttonTitle: selectedTerms.termsTypeName,
|
||||
buttonId: `checkout_terms_${selectedTerms.termsTypeName
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, "_")}`,
|
||||
.replace(/\s+/g, '_')}`,
|
||||
contextName: Config.LOG_CONTEXT_NAME.CHECKOUT,
|
||||
messageId: Config.LOG_MESSAGE_ID.BUTTONCLICK,
|
||||
})
|
||||
);
|
||||
setCurrentTerms(selectedTerms);
|
||||
dispatch(setShowPopup(Config.ACTIVE_POPUP.termsPopup));
|
||||
Spotlight.focus("spotlightId_TbuttonScrollerDown");
|
||||
const selectedIndex = empTermsData.findIndex(
|
||||
(term) => term.termsID === termsID
|
||||
);
|
||||
Spotlight.focus('spotlightId_TbuttonScrollerDown');
|
||||
const selectedIndex = empTermsData.findIndex((term) => term.termsID === termsID);
|
||||
|
||||
setSelectedTabIndex(selectedIndex);
|
||||
setResetScroll(true);
|
||||
@@ -393,52 +381,84 @@ 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);
|
||||
console.log(
|
||||
'[CheckOutPanel] Rendering - orderSideBarOpen:',
|
||||
orderSideBarOpen,
|
||||
'offerSideBarOpen:',
|
||||
offerSideBarOpen,
|
||||
'placeOrderPopup:',
|
||||
placeOrderPopup
|
||||
);
|
||||
console.log(
|
||||
'[CheckOutPanel] Rendering - productData exists:',
|
||||
!!productData,
|
||||
'length:',
|
||||
productData?.length
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<TPanel
|
||||
isTabActivated={false}
|
||||
spotlightDisabled={
|
||||
orderSideBarOpen || offerSideBarOpen || placeOrderPopup
|
||||
}
|
||||
spotlightDisabled={orderSideBarOpen || offerSideBarOpen || placeOrderPopup}
|
||||
handleCancel={onCancelCheckoutPanel}
|
||||
>
|
||||
<TBody className={css.tbody} cbScrollTo={getScrollToBody}>
|
||||
<THeader
|
||||
className={css.theader}
|
||||
title="CHECKOUT"
|
||||
onBackButton
|
||||
onClick={onBackClick}
|
||||
/>
|
||||
<THeader className={css.theader} title="CHECKOUT" onBackButton onClick={onBackClick} />
|
||||
<div className={css.Wrap}>
|
||||
<SummaryContainer
|
||||
setPlaceOrderPopup={setPlaceOrderPopup}
|
||||
empTermsData={empTermsData}
|
||||
handleTermsClick={handleTermsClick}
|
||||
currSign={currSign}
|
||||
currSignLoc={currSignLoc}
|
||||
doSendLogPaymentEntry={doSendLogPaymentEntry}
|
||||
/>
|
||||
<InformationContainer
|
||||
toggleOrderSideBar={toggleOrderSideBar}
|
||||
toggleOfferSideBar={toggleOfferSideBar}
|
||||
scrollTopBody={scrollTopBody}
|
||||
doSendLogMyInfoEdit={doSendLogMyInfoEdit}
|
||||
/>
|
||||
{BUYNOW_CONFIG.isMockMode() ? (
|
||||
<SummaryContainerMock
|
||||
setPlaceOrderPopup={setPlaceOrderPopup}
|
||||
empTermsData={empTermsData}
|
||||
handleTermsClick={handleTermsClick}
|
||||
currSign={currSign}
|
||||
currSignLoc={currSignLoc}
|
||||
doSendLogPaymentEntry={doSendLogPaymentEntry}
|
||||
/>
|
||||
) : (
|
||||
<SummaryContainer
|
||||
setPlaceOrderPopup={setPlaceOrderPopup}
|
||||
empTermsData={empTermsData}
|
||||
handleTermsClick={handleTermsClick}
|
||||
currSign={currSign}
|
||||
currSignLoc={currSignLoc}
|
||||
doSendLogPaymentEntry={doSendLogPaymentEntry}
|
||||
/>
|
||||
)}
|
||||
{(() => {
|
||||
console.log(
|
||||
'[CheckOutPanel] Before conditional - isMockMode:',
|
||||
BUYNOW_CONFIG.isMockMode()
|
||||
);
|
||||
if (BUYNOW_CONFIG.isMockMode()) {
|
||||
console.log('[CheckOutPanel] Rendering InformationContainerMock');
|
||||
return (
|
||||
<InformationContainerMock
|
||||
toggleOrderSideBar={toggleOrderSideBar}
|
||||
toggleOfferSideBar={toggleOfferSideBar}
|
||||
scrollTopBody={scrollTopBody}
|
||||
doSendLogMyInfoEdit={doSendLogMyInfoEdit}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
console.log('[CheckOutPanel] Rendering InformationContainer');
|
||||
return (
|
||||
<InformationContainer
|
||||
toggleOrderSideBar={toggleOrderSideBar}
|
||||
toggleOfferSideBar={toggleOfferSideBar}
|
||||
scrollTopBody={scrollTopBody}
|
||||
doSendLogMyInfoEdit={doSendLogMyInfoEdit}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
</TBody>
|
||||
</TPanel>
|
||||
|
||||
{orderSideBarOpen && (
|
||||
<OrderItemsSideBar closeSideBar={toggleOrderSideBar} />
|
||||
)}
|
||||
{orderSideBarOpen && <OrderItemsSideBar closeSideBar={toggleOrderSideBar} />}
|
||||
{offerSideBarOpen && (
|
||||
<FixedSideBar
|
||||
closeSideBar={toggleOfferSideBar}
|
||||
offerSideBarOpen={offerSideBarOpen}
|
||||
/>
|
||||
<FixedSideBar closeSideBar={toggleOfferSideBar} offerSideBarOpen={offerSideBarOpen} />
|
||||
)}
|
||||
|
||||
{activePopup === Config.ACTIVE_POPUP.termsPopup && (
|
||||
@@ -447,7 +467,7 @@ export default function CheckOutPanel({ panelInfo }) {
|
||||
open={popupVisible}
|
||||
onClose={onCloseTermsPopup}
|
||||
hasButton
|
||||
button1Text={$L("OK")}
|
||||
button1Text={$L('OK')}
|
||||
>
|
||||
{currentTerms && (
|
||||
<div className={css.termsConts}>
|
||||
|
||||
Reference in New Issue
Block a user