const [isWidgetReady, setIsWidgetReady] = useState<boolean>(true); /** 토스페이먼츠 위젯 추가 */ useEffect(() => { if (paymentWidget == null) return; const paymentMethodsWidget = paymentWidget.renderPaymentMethods( '#payment-widget', { value: orderPriceSummary.totalCost }, { variantKey: 'DEFAULT' }, ); paymentMethodsWidget?.on('ready', () => { paymentMethodsWidgetRef.current = paymentMethodsWidget; setIsWidgetReady(false); }); }, [paymentWidget]); /** 토스페이먼츠 결제 금액 반영(orderPriceSummary 변경 시 자동으로 값 적용) */ useEffect(() => { const paymentMethodsWidget = paymentMethodsWidgetRef.current; if (paymentMethodsWidget == null) return; paymentMethodsWidget.updateAmount(orderPriceSummary.totalCost); }, [orderPriceSummary.totalCost, paymentMethodsWidgetRef.current]); ... <Button className="mb-12" type="primary" fullWidth size="large" loading={submitting || isWidgetReady} onClick={결제하기} disabled={!결제가능상태()} > ...
eibijeaz5f
d5d4cd07616a542891b7ec2d0257b3a24b69856e