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={!결제가능상태()}
>

...

  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={!결제가능상태()}
>

...