Ant Design DatePicker localization 한글화 이슈

기술 과제를 진행하면서 Antd 라이브러리를 처음으로 사용해봤다. UI 라이브러리 사용 자체가 처음인데, 디자인이 굉장히 깔끔했고 공식 문서도 잘 작성되어 있어서 사용하기 편리했다. 하지만 DatePicker 컴포넌트를 쓰면서 localization 이슈를 겪어서 그 과정을 간단하게 기록해 두고자 한다. 

 

1. locale 변환 

import { DatePicker, Space, ConfigProvider } from 'antd';
import type { DatePickerProps } from 'antd';
import koKR from 'antd/locale/ko_KR';
import dayjs, { Dayjs } from 'dayjs';

interface DateSelectorProps {
  // ...
}

const DateSelector = ({ label }: DateSelectorProps) => {
  // ...
  
  return (
    <ConfigProvider locale={koKR}>
      <Space direction='horizontal'>
        <label>{label}: </label>
        <DatePicker
          value={dateValue}
          onChange={onChange}
          placeholder='날짜 선택'
          disabledDate={disabledDate}
        />
      </Space>
    </ConfigProvider>
  );
};

export default DateSelector;

Internationalization - Ant Design

 

공홈의 internationalization 문서를 보면서 한국어 locale을 ConfigProvider로 내려보내주었다. 그랬더니 아래처럼 연도와 오늘(Today)만 한국어로 바뀌고 달과 요일은 그대로 영어로 남아있는 반쪽짜리 localization이 되었다. 

반쪽짜리 한국어로 바뀐 달력 화면

 

2. dayjs 로 전환 

기본적으로 Antd에서 시간과 날짜를 핸들링하려면 day.js를 사용해야 해서 이미 day.js가 설치된 상태였다. 공홈의 커스텀 컴포넌트 예제는 moment로 나와있었는데, 이를 day.js에 적용해 보았다.

 

import 'dayjs/locale/ko';
import dayjs, { Dayjs } from 'dayjs';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generatePicker from 'antd/es/date-picker/generatePicker';
import type { DatePickerProps } from 'antd';
import { Space, ConfigProvider } from 'antd';
import koKR from 'antd/locale/ko_KR';

const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);

interface DateSelectorProps {
  // ...
}

const DateSelector = ({ label, type }: DateSelectorProps) => {
  // ...

  return (
    <ConfigProvider locale={koKR}>
      <Space direction='horizontal'>
        <label>{label}: </label>
        <DatePicker
          value={savedDate.isValid() ? savedDate : undefined}
          onChange={onChange}
          placeholder='날짜 선택'
          disabledDate={disabledDate}
        />
      </Space>
    </ConfigProvider>
  );
};

export default DateSelector;

Use custom date library - Ant Design

 

한글화가 전부 완료된 모습으로 바뀌었다!