특정 상황에서 `@tosspayments/payment-sdk` 가 이상하게 동작합니다.

import { useEffect } from "react";

import { loadTossPayments } from "@tosspayments/payment-sdk";

import { PageProps } from "pages/_app";

const PaymentPage = ({ router }: PageProps) => {
  if (!router.isReady) return;

  const {
    phase,
    amount,
    orderId,
    orderName,
    onSuccess,
    onFailure,
    paymentKey,
    errorCode,
    errorMessage,
  } = router.query as PaymentPageQuery;

  useEffect(() => {
    switch (phase) {
      case "init":
        const { origin, pathname, search } = window.location;
        const query = new URLSearchParams(search);
        query.delete("orderId");
        query.delete("amount");
        loadTossPayments(process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY).then(({ requestPayment }) =>
          requestPayment("카드", {
            amount: Number(amount),
            orderId,
            orderName,
            successUrl: origin + pathname.replace("init", "success") + "?" + query,
            failUrl: origin + pathname.replace("init", "failure") + "?" + query,
          }).catch((error) => {
            console.error(error);
            alert("결제를 취소합니다.");
            window.history.go(-2);
          }),
        );
        return;
      case "success":
        router.push({ pathname: onSuccess, query: { ...router.query, paymentId: paymentKey } });
        return;
      case "failure":
        router.push({ pathname: onFailure, query: { ...router.query, errorCode, errorMessage } });
        return;
    }
  }, []);

  return null;
};