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>;
}

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

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

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

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

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

  return (
    <div>
      <h2>Accepted Currencies</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 ($)"와 같이 통화 이름과 기호가 현지화되어 렌더링되며, 사용자의 로케일에 따라 자동으로 조정됩니다.