Next.js(Pages Router) v16에서 통화 정보 표시하는 방법

문제

애플리케이션은 종종 실제 가격을 표시하지 않고 통화 정보를 표시해야 합니다. 통화 선택기는 사용 가능한 통화 목록을 표시하고, 문서는 환율을 참조하거나, 결제 양식은 어떤 통화가 허용되는지 보여줄 수 있습니다. 단순히 "USD"를 표시하는 것은 비기술적 사용자에게 모호하며, "US Dollar"를 하드코딩하는 것은 수동 번역과 유지 관리가 필요합니다. "$"와 같은 통화 기호는 모호합니다—같은 기호가 미국, 캐나다, 호주 달러를 나타냅니다. 적절한 표현은 컨텍스트와 사용자의 언어에 모두 의존합니다.

해결책

react-intl의 포맷팅 기능을 사용하여 컨텍스트에 맞는 형식으로 통화 정보를 표시합니다. 전체 통화 이름의 경우, 통화 유형과 함께 formatDisplayName을 사용하면 "US Dollar"와 같은 이름이 사용자의 언어로 자동 현지화됩니다. 기호의 경우, Intl.NumberFormat과 formatToParts를 사용하여 주어진 통화 코드에 대한 현지화된 기호를 추출합니다. ISO 코드의 경우, 코드를 직접 표시합니다. 이 접근 방식은 수동 번역 작업 없이 통화 참조가 명확하고 적절하게 현지화되도록 보장합니다.

단계

1. 통화 기호를 추출하는 헬퍼 생성

포맷된 숫자에서 통화 기호를 추출하기 위해 Intl.NumberFormat과 formatToParts를 사용합니다.

export function getCurrencySymbol(
  currencyCode: string,
  locale: string,
): string {
  const parts = new Intl.NumberFormat(locale, {
    style: "currency",
    currency: currencyCode,
    currencyDisplay: "narrowSymbol",
  }).formatToParts(0);

  const currencyPart = parts.find((part) => part.type === "currency");
  return currencyPart ? currencyPart.value : currencyCode;
}

currencyDisplay 옵션은 "symbol", "narrowSymbol", "code" 또는 "name"의 형태를 제어합니다. 이 헬퍼는 모든 통화 코드에 대한 현지화된 기호를 반환합니다.

2. 통화 표시 컴포넌트 생성

표시 모드에 따라 다른 형식으로 통화 정보를 보여주는 컴포넌트를 구축합니다.

import { useIntl } from "react-intl";
import { useRouter } from "next/router";
import { getCurrencySymbol } from "../utils/getCurrencySymbol";

interface CurrencyDisplayProps {
  currencyCode: string;
  display: "symbol" | "name" | "code";
}

export default function CurrencyDisplay({
  currencyCode,
  display,
}: CurrencyDisplayProps) {
  const intl = useIntl();
  const router = useRouter();
  const locale = router.locale || "en";

  if (display === "symbol") {
    const symbol = getCurrencySymbol(currencyCode, locale);
    return <span>{symbol}</span>;
  }

  if (display === "name") {
    const name = intl.formatDisplayName(currencyCode, { type: "currency" });
    return <span>{name}</span>;
  }

  return <span>{currencyCode}</span>;
}

type: 'currency'와 함께 formatDisplayName 메서드는 현지화된 통화 이름을 반환합니다. 이 컴포넌트는 display prop에 따라 출력을 조정합니다.

3. 다양한 컨텍스트에서 컴포넌트 사용하기

가격 없이 통화 정보를 표시해야 하는 곳에 통화 표시 컴포넌트를 적용하세요.

import CurrencyDisplay from "../components/CurrencyDisplay";

export default function PaymentOptions() {
  const acceptedCurrencies = ["USD", "EUR", "GBP", "JPY"];

  return (
    <div>
      <h2>지원되는 통화</h2>
      <ul>
        {acceptedCurrencies.map((code) => (
          <li key={code}>
            <CurrencyDisplay currencyCode={code} display="name" />
            {" ("}
            <CurrencyDisplay currencyCode={code} display="symbol" />
            {")"}
          </li>
        ))}
      </ul>
    </div>
  );
}

이렇게 하면 영어로는 "US Dollar ($)" 또는 프랑스어로는 "Dollar américain ($)"와 같이 사용자의 로케일에 맞게 자동으로 조정되는 현지화된 통화 이름과 기호가 렌더링됩니다.