const paymentWidgetRef = useRef<PaymentWidgetInstance | null>(null);
  const paymentMethodsWidgetRef = useRef<PaymentWidget | null>(null);

  const initToss = useCallback(async (amount: number) => {
    const key = process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY;
    const secret = process.env.NEXT_PUBLIC_TOSS_SECRET_KEY;
    if (!key || !secret) {
      throw new Error("토스 결제창 설정이 잘못되었습니다.");
    }
    const paymentWidget = await loadPaymentWidget(key, secret);

    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
      "#payment-widget",
      amount
    );
    paymentWidget.renderAgreement("#agreement");

    paymentWidgetRef.current = paymentWidget;
    paymentMethodsWidgetRef.current = paymentMethodsWidget;
  }, []);

  useEffect(() => {
    if (!isFree) {
      initToss(order.finalAmount);
    }
  }, [initToss, isFree, order.finalAmount]);

  const paymentWidgetRef = useRef<PaymentWidgetInstance | null>(null);
  const paymentMethodsWidgetRef = useRef<PaymentWidget | null>(null);

  const initToss = useCallback(async (amount: number) => {
    const key = process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY;
    const secret = process.env.NEXT_PUBLIC_TOSS_SECRET_KEY;
    if (!key || !secret) {
      throw new Error("토스 결제창 설정이 잘못되었습니다.");
    }
    const paymentWidget = await loadPaymentWidget(key, secret);

    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
      "#payment-widget",
      amount
    );
    paymentWidget.renderAgreement("#agreement");

    paymentWidgetRef.current = paymentWidget;
    paymentMethodsWidgetRef.current = paymentMethodsWidget;
  }, []);

  useEffect(() => {
    if (!isFree) {
      initToss(order.finalAmount);
    }
  }, [initToss, isFree, order.finalAmount]);

const callbackBaseUrl = `${window.location.origin}/orders/${order.code}`;
        const orderName = displayItemsWithLimit(
          order.items.map((item) => item.product.name),
          1
        );

        const requestPaymentDto = {
          orderId: prepareResult.data.paymentId,
          orderName,
          customerName,
          customerEmail: email,
          customerMobilePhone: mobile,
          successUrl: `${callbackBaseUrl}/success`,
          failUrl: `${callbackBaseUrl}/fail`,
        };

        await paymentWidget
          .requestPayment(requestPaymentDto)

const callbackBaseUrl = `${window.location.origin}/orders/${order.code}`;
        const orderName = displayItemsWithLimit(
          order.items.map((item) => item.product.name),
          1
        );

        const requestPaymentDto = {
          orderId: prepareResult.data.paymentId,
          orderName,
          customerName,
          customerEmail: email,
          customerMobilePhone: mobile,
          successUrl: `${callbackBaseUrl}/success`,
          failUrl: `${callbackBaseUrl}/fail`,
        };

        await paymentWidget
          .requestPayment(requestPaymentDto)