로케일 포맷팅

22.3.1. 날짜/시간 포맷

날짜와 시간은 vue-i18n의 datetimeFormats 설정을 사용하여 로케일에 맞게 포맷해야 합니다.

const datetimeFormats = {
  ko: {
    short: { year: 'numeric', month: '2-digit', day: '2-digit' },
    long: { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' },
    full: { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' },
  },
}
const i18n = createI18n({ datetimeFormats })

• 날짜/시간 표시에는 $d() 헬퍼를 사용해야 합니다.

• 사용 예시: $d(new Date(), 'short') -> 2026. 03. 01., $d(new Date(), 'long') -> 2026년 3월 1일 일요일

• 최소 short, long, full 세 가지 형식을 정의해야 합니다.

• 모든 지원 로케일에 대해 동일한 형식 이름을 정의해야 합니다.

• 날짜 문자열을 직접 조합(YYYY-MM-DD)하지 않고, 반드시 포맷 헬퍼를 통해 출력해야 합니다.

---

22.3.2. 숫자/통화 포맷

숫자와 통화는 vue-i18n의 numberFormats 설정을 사용하여 로케일에 맞게 포맷해야 합니다.

const numberFormats = {
  ko: {
    currency: { style: 'currency', currency: 'KRW' },
    decimal: { style: 'decimal', maximumFractionDigits: 2 },
    percent: { style: 'percent', maximumFractionDigits: 1 },
  },
}
const i18n = createI18n({ numberFormats })

• 숫자 표시에는 $n() 헬퍼를 사용해야 합니다.

• 사용 예시: $n(1234567, 'currency') -> ₩1,234,567, $n(0.856, 'percent') -> 85.6%

• currency, decimal, percent 세 가지 형식을 필수로 정의해야 합니다.

• 통화 코드(currency)는 로케일별로 적절한 값을 설정해야 합니다.

• 숫자를 직접 toLocaleString()으로 포맷하지 않고, $n() 헬퍼를 통해 출력해야 합니다.

---

22.3.3. 상대 시간

상대 시간 표현("3분 전", "2일 후")은 Intl.RelativeTimeFormat을 활용하여 구현해야 합니다.

// src/composables/useTimeAgo.ts
import { computed, type Ref } from 'vue'
import { useI18n } from 'vue-i18n'

export function useTimeAgo(date: Ref<Date>) {
  const { locale } = useI18n()
  return computed(() => {
    const diff = date.value.getTime() - Date.now()
    const abs = Math.abs(diff)
    const rtf = new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' })
    if (abs < 60_000) return rtf.format(Math.round(diff / 1000), 'second')
    if (abs < 3_600_000) return rtf.format(Math.round(diff / 60_000), 'minute')
    if (abs < 86_400_000) return rtf.format(Math.round(diff / 3_600_000), 'hour')
    return rtf.format(Math.round(diff / 86_400_000), 'day')
  })
}

• 상대 시간 표현을 위한 useTimeAgo composable을 프로젝트 내에 구현하여 재사용해야 합니다.
• 직접 문자열을 조합("3분 전")하지 않고, Intl.RelativeTimeFormat을 사용해야 합니다.
• numeric: 'auto' 옵션을 사용하여 "어제", "내일" 등 자연스러운 표현을 생성하는 것을 권장합니다.

---

22.3.4. Intl API 활용

브라우저 내장 Intl API를 활용하여 로케일 기반 포맷팅을 수행해야 합니다.

API	용도
Intl.DateTimeFormat	날짜/시간 포맷
Intl.NumberFormat	숫자/통화 포맷
Intl.RelativeTimeFormat	상대 시간 표현
Intl.Collator	문자열 정렬

• 문자열 정렬 시 Intl.Collator를 사용하여 로케일에 맞는 정렬 순서를 적용해야 합니다.

const collator = new Intl.Collator('ko', { sensitivity: 'base' })
const sorted = names.sort(collator.compare)

• 모든 모던 브라우저에서 지원되므로 폴리필 없이 사용할 수 있습니다.
• 커스텀 포맷 함수 대신 Intl API를 우선적으로 사용해야 합니다.