> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/dev-start/images-and-media/undefined-3.md).

# 숫자 및 날짜 변환 가이드

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

***

## 숫자 변환 가이드

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

```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)

```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

{% hint style="info" %}

#### BO Locale

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

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

`LocalizationProvider` 적용 방법은 다음 문서를 참고하세요:\
<https://mui.com/x/react-date-pickers/adapters-locale/>
{% endhint %}

***

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

```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)               |