숫자 및 날짜 변환 가이드

X2BEE 솔루션에서 사용하는 숫자 및 날짜 변환 방법에 대한 가이드를 제공합니다. Front와 BO에서의 숫자 변환 지침과 날짜 변환 예제 및 예상 결과를 설명합니다.

---

숫자 변환 가이드

BO 숫자변환 가이드 (format-number.ts)

export function fNumber(inputValue: InputNumberValue, options?: Options) {
  const locale = formatNumberLocale() || DEFAULT_LOCALE
  const number = processInput(inputValue)
  if (number === null) return ''
  const fm = new Intl.NumberFormat(locale.code, {
    minimumFractionDigits: 0,
    maximumFractionDigits: 2,
    ...options
  }).format(number)
  return fm
}

샘플

• fNumber(24000000) — 결과: 24,000,000

---

날짜 변환 가이드

BO 날짜변환 가이드 (common-utils.ts)

/**
 * 날짜 변환
 * Format을 사용자 지정
 */
export const convertFormatDate = (value: ConfigType, formatValue: string) =>
  dayjs(value).format(formatValue)

/**
 * 날짜 변환 Type1
 * Format YYYY-MM-DD HH:mm:ss
 */
export const convertLocaleDateTime = (date: ConfigType) =>
  dayjs(date).format(DATE_FORMAT.LOCAL_DATE_TIME)

/**
 * 날짜 변환 Type2
 * Format YYYY-MM-DD
 */
export const convertLocaleDate = (date: ConfigType) =>
  dayjs(date).format(DATE_FORMAT.DEFAULT.DATE)

샘플

• convertFormatDate('2023-06-12T09:52:16', 'YYYY-MM-DD HH:mm'); 결과: 2023-06-12 09:52

• convertLocaleDateTime('2023-06-12T09:52:16'); 결과: 2023-06-12 09:52:16

BO Locale

MUI 내에서 제공되는 LocalizationProvider 적용 및 @mui/x-date-pickers 컴포넌트를 사용합니다.

언어셋 변경 시, 변경된 언어셋에 해당되는 Date Format으로 자동 변환합니다.

LocalizationProvider 적용 방법은 다음 문서를 참고하세요: https://mui.com/x/react-date-pickers/adapters-locale/

---

BO 날짜 패턴 상수 (common-constants.ts)

export const DATE_FORMAT = {
  DATE_TIME: 'DD MMM YYYY h:mm a',
  DATE: 'DD MMM YYYY',
  TIME: 'h:mm a',
  LOCAL_DATE_TIME: 'YYYY-MM-DDTHH:mm:ss',
  SPLIT: {
    DATE_TIME: 'DD/MM/YYYY h:mm a',
    DATE: 'DD/MM/YYYY'
  },
  DEFAULT: {
    DATE_TIME: 'YYYY-MM-DD HH:mm:ss',
    DATE_TIME_WITH_MINUTE: 'YYYY-MM-DD HH:mm',
    DATE: 'YYYY-MM-DD',
    DOT_DATE: 'YYYY.MM.DD',
    DATE_STRING: 'YYYYMMDD',
    MONTH: 'YYYY-MM'
  },
  PARAM_CASE: {
    DATE_TIME: 'DD-MM-YYYY h:mm a',
    DATE: 'DD-MM-YYYY'
  }
}

샘플

• convertFormatDate('2023-06-12T09:52:16', DATE_FORMAT.DEFAULT.DATE_TIME_WITH_MINUTE); 결과: 2023-06-12 09:52

• convertFormatDate('2023-06-12T09:52:16', DATE_FORMAT.DEFAULT.DATE_TIME); 결과: 2023-06-12 09:52:16

---

날짜 패턴 유형

아래 표현을 참고하여 format에 넣어 사용하시면 됩니다.

토큰	예시 출력	설명
YY	01	Two-digit year
YYYY	2001	Four-digit year
M	1-12	Month, beginning at 1
MM	01-12	Month, 2-digits
MMM	Jan-Dec	The abbreviated month name
MMMM	January-December	The full month name
D	1-31	Day of month
DD	01-31	Day of month, 2-digits
H	0-23	Hours
HH	00-23	Hours, 2-digits
h	1-12	Hours, 12-hour clock
hh	01-12	Hours, 12-hour clock, 2-digits
m	0-59	Minutes
mm	00-59	Minutes, 2-digits
s	0-59	Seconds
ss	00-59	Seconds, 2-digits
S	0-9	Hundreds of milliseconds, 1-digit
SS	00-99	Tens of milliseconds, 2-digits
SSS	000-999	Milliseconds, 3-digits
Z	-05:00	Offset from UTC
ZZ	-0500	Compact offset from UTC, 2-digits
A	AM PM	Post or ante meridiem, upper-case
a	am pm	Post or ante meridiem, lower-case
Do	1st...31st	Day of Month with ordinal
X	1410715640.579	Unix timestamp (seconds)
x	1410715640579	Unix timestamp (ms)