[교체] 숫자 및 날짜 변환 가이드

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

숫자 변환 가이드

1. Front 숫자 변환 가이드 (common.js)

.....
numberFormat: function (number) {
  return new Intl.NumberFormat(this.$i18n.locale).format(number);
}
.....

샘플

numberFormat(24000000)
// 결과 : 24,000,000

2. 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

날짜 변환 가이드

1. Front 날짜 변환 가이드 (common.js)

dateFormat : 사용자가 직접 포맷을 지정하여 사용
dateFormatTypeHMS : YYYY-MM-DD HH:mm:ss 포맷 사용
dateFormatTypeHM : YYYY-MM-DD HH:mm 포맷 사용
dateFormatTypeH : YYYY-MM-DD HH 포맷 사용
dateFormatType : YYYY-MM-DD 포맷 사용

.....
dateFormat(date, format = 'YYYY-MM-DD HH:mm:ss') {
  return this.$dayjs(date).format(format);
},
dateFormatTypeHMS: function(date) {
  return this.$dayjs(date).format('YYYY-MM-DD HH:mm:ss');
},
dateFormatTypeHM: function(date) {
  return this.$dayjs(date).format('YYYY-MM-DD HH:mm');
},
dateFormatTypeH: function(date) {
  return this.$dayjs(date).format('YYYY-MM-DD HH');
},
dateFormatType: function(date) {
  return this.$dayjs(date).format('YYYY-MM-DD');
}
.....

샘플

dateFormat('2023-06-12T09:52:16', 'YYYY-MM-DD HH:mm:ss');
// 결과 : 2023-06-12 09:52:16
dateFormatTypeHM('2023-06-12T09:52:16');
// 결과 : 2023-06-12 09:52

2. 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 컴포넌트를 사용합니다. 언어셋 변경 시, 변경된 언어셋에 해당하는 날짜 포맷으로 자동 변환됩니다.

LocalizationProvider 적용 방법은 https://mui.com/x/react-date-pickers/adapters-locale/를 참고하시기 바랍니다.

3. 날짜 패턴 유형

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

기호	설명
YY	01 두 자리 연도
YYYY	2001 네 자리 연도
M	1-12 월, 1부터 시작
MM	01-12 월, 두 자리
MMM	Jan-Dec 약어 월 이름
MMMM	January-December 전체 월 이름
D	1-31 일
DD	01-31 일, 두 자리
H	0-23 시간
HH	00-23 시간, 두 자리
h	1-12 시간, 12시간제
hh	01-12 시간, 12시간제, 두 자리
m	0-59 분
mm	00-59 분, 두 자리
s	0-59 초
ss	00-59 초, 두 자리
S	0-9 백분의 밀리초, 한 자리
SS	00-99 십의 밀리초, 두 자리
SSS	000-999 밀리초, 세 자리
Z	-05:00 UTC 오프셋
ZZ	-0500 UTC 간결한 오프셋, 두 자리
A	AM PM 대문자
a	am pm 소문자
Do	1st... 31st 월의 일
X	1410715640.579 유닉스 타임스탬프
x	1410715640579 유닉스 밀리초 타임스탬프