상대 시간 형식 지정

문제

애플리케이션이 '2일 전 게시됨'과 같은 타임스탬프를 표시합니다. 이는 영어로는 명확하지만, '2일 전'과 '2일 후'(과거 대 미래)에 대한 논리와 문법은 언어마다 크게 다릅니다. 단순한 문자열 연결(예: '2' + ' ' + '일 전')은 문법적으로 올바른 출력을 생성하지 못합니다.

해결 방법

react-intl의 FormattedRelativeTime와 같은 전용 컴포넌트를 사용하세요. 이 컴포넌트는 숫자 값(예: -2)과 단위(예: 'day')를 받아서 '2 days ago', 'hace 2 días', 또는 'gestern'(어제)과 같이 로케일을 인식하고 문법적으로 올바른 문자열로 자동 포맷합니다.

단계

1. 상대 시간을 위한 클라이언트 컴포넌트 생성

FormattedRelativeTime 컴포넌트는 클라이언트 컴포넌트 내부에서 사용해야 합니다.

새 파일 app/components/RelativeTime.tsx을 생성하세요.

// app/components/RelativeTime.tsx
'use client';

import { FormattedRelativeTime } from 'react-intl';

type Props = {
  value: number;
  unit: Intl.RelativeTimeFormatUnit;
};

export default function RelativeTime({ value, unit }: Props) {
  return (
    <FormattedRelativeTime
      value={value}
      unit={unit}
      numeric="auto" // "auto" allows "yesterday" or "tomorrow"
      style="long"
    />
  );
}

2. 형식 지정 옵션 전달

FormattedRelativeTime 컴포넌트는 여러 주요 props를 받습니다:

• value: 단위의 수입니다. 음수 값(예: -2)은 과거("2 days ago")를 나타내고, 양수 값(2)은 미래("in 2 days")를 나타냅니다.
• unit: 'day', 'hour', 'minute', 'second'와 같은 시간 단위입니다.
• numeric="auto": 라이브러리가 "1 day ago" 또는 "in 1 day" 대신 "yesterday" 또는 "tomorrow"와 같은 단어를 사용할 수 있도록 합니다.

3. 페이지에서 컴포넌트 사용

이제 모든 페이지에서 이 컴포넌트를 사용할 수 있습니다. props를 전달하기 전에 시간 차이를 계산하는 것은 사용자의 책임입니다.

// app/[lang]/page.tsx
import RelativeTime from '@/app/components/RelativeTime';

export default function Home() {
  // You would calculate these values dynamically
  const daysSinceUpdate = -2;
  const hoursUntilEvent = 3;

  return (
    <div>
      <h1>Updates</h1>
      <p>
        File updated: <RelativeTime value={daysSinceUpdate} unit="day" />
      </p>
      <p>
        Event starts: <RelativeTime value={hoursUntilEvent} unit="hour" />
      </p>
    </div>
  );
}

/en를 방문하는 사용자는 "File updated: 2 days ago"와 "Event starts: in 3 hours"를 보게 됩니다. /es를 방문하는 사용자는 "File updated: hace 2 días"와 "Event starts: dentro de 3 horas"를 보게 됩니다.