Skip to content

Commit

Permalink
fix: formatNumberWithUnits/Currency 로직 변경
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssi02014
ssi02014 committed Jan 12, 2025
1 parent 9538ee6 commit 3e1cecd
Show file tree
Hide file tree
Showing 10 changed files with 406 additions and 316 deletions.
116 changes: 41 additions & 75 deletions docs/docs/utils/formatter/formatNumberWithCurrency.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
# formatNumberWithCurrency

`숫자` 혹은 `숫자로 이루어진 문자열`을 주어진 단위 별로 나누고, 통화 기호와 함께 포맷팅하는 함수입니다.

**[@modern-kit/utils](https://github.com/modern-agile-team/modern-kit/blob/main/packages/utils/src/formatter/formatNumberWithUnits/index.ts)** 의 `formatNumberWithUnits`를 확장한 함수이기 때문에 해당 함수 옵션을 함께 활용 할 수 있습니다.
`숫자` 혹은 `숫자로 이루어진 문자열`을 주어진 통화 기호를 추가하는 함수입니다.

<br />

Expand All @@ -11,26 +9,21 @@

## Interface
```ts title="typescript"
interface CurrencyOption {
currency: string;
currencyPosition: 'prefix' | 'suffix';
type Locale = 'KRW' | 'KRW_SYMBOL' | 'USD' | 'JPY' | 'CNY' | 'EUR';

interface CurrencyOptions {
symbol?: string; // default: ''
position?: 'prefix' | 'suffix'; // default: 'suffix'
space?: boolean; // default: false
commas?: boolean; // default: true
locale?: Locale;
}

/*
units?: Unit[]; // default: []
floorUnit?: FloorUnit; // default: 1,
withCommas?: boolean; // default: false,
insertSpace?: boolean; // default: false,
currency?: string; // default: ''
currencyPosition?: 'prefix' | 'suffix'; // default: 'suffix'
*/
type FormatNumberWithCurrencyOptions = FormatNumberByUnitsOption &
Partial<CurrencyOption>;

const formatNumberWithCurrency: (
value: number,
options?: FormatNumberWithCurrencyOptions
) => string;
```
```ts title="typescript"
function formatNumberWithCurrency(
value: number | string,
options?: CurrencyOptions
): string;
```

## Usage
Expand All @@ -39,12 +32,19 @@ const formatNumberWithCurrency: (
import { formatNumberWithCurrency } from '@modern-kit/utils';

// 기본 동작
formatNumberWithCurrency(1000, { currency: '$', position: 'prefix' }) // '$1,000'
formatNumberWithCurrency(1000, { currency: '원', position: 'suffix' }) // '1,000원'
formatNumberWithCurrency(1000) // '1000'

// 통화 기호 추가 (position: 'suffix'가 기본값)
formatNumberWithCurrency(1000, { symbol: '원' }) // '1,000원'
formatNumberWithCurrency(1000, { symbol: '$', position: 'prefix' }) // '$1,000'

// 숫자로 이루어진 문자열도 허용
formatNumberWithCurrency('1000', { currency: '$', position: 'prefix' }) // '$1,000'
formatNumberWithCurrency('1000', { currency: '원', position: 'suffix' }) // '1,000원'
formatNumberWithCurrency('1000', { symbol: '원' }) // '1,000원'
formatNumberWithCurrency('1000', { symbol: '$', position: 'prefix' }) // '$1,000'

// 음수 처리
formatNumberWithCurrency(-1000, { symbol: '$', position: 'prefix' }) // '-$1,000'
formatNumberWithCurrency(-1000, { symbol: '원', position: 'suffix' }) // '-1,000원'
```

<br />
Expand All @@ -54,53 +54,19 @@ formatNumberWithCurrency('1000', { currency: '원', position: 'suffix' }) // '1,
import { formatNumberWithCurrency } from '@modern-kit/utils';

// 단위 사이 공백 추가
formatNumberWithCurrency(12345, { currency: '원', position: 'suffix', space: false }) // '1만2,345원'
formatNumberWithCurrency(12345, { currency: '원', position: 'suffix', space: true }) // '1만 2,345원'

// 쉼표 사용 여부
formatNumberWithCurrency(12345, { currency: '원', position: 'suffix', commas: false }) // '1만 2345원'
formatNumberWithCurrency(12345, { currency: '원', position: 'suffix', commas: true }) // '1만 2,345원'

// 버림 단위
formatNumberWithCurrency(12345, { currency: '원', position: 'suffix', floorUnit: 10000 }) // '1만원'

// 사용자 정의 단위
const customUnits = [
{ unit: 'K', value: 1000 },
{ unit: 'M', value: 1000000 },
];

formatNumberWithCurrency(1234567, {
units: customUnits,
currency: '$',
position: 'prefix',
floorUnit: 1000000
}) // '$1M'

// 단위 적용 X
formatNumberWithCurrency(1234567, {
units: [],
floorUnit: 1000,
currency: '$',
position: 'prefix',
}); // '$1,234,000'
formatNumberWithCurrency(1000, { symbol: '$', position: 'prefix', space: false }) // '$1000'
formatNumberWithCurrency(1000, { symbol: '$', position: 'prefix', space: true }) // '$ 1000'

// 천의 단위 구분 여부
formatNumberWithCurrency(1000, { symbol: '원', commas: false }) // '1000원'
formatNumberWithCurrency(1000, { symbol: '원', commas: true }) // '1,000원'

// locale 사용
// locale 옵션이 있으면 commas 옵션을 제외한 나머지 옵션들은 무시됩니다.
formatNumberWithCurrency(1000, { locale: 'USD' }) // '$1,000'
formatNumberWithCurrency(1000, { locale: 'KRW' }) // '1,000원'
formatNumberWithCurrency(1000, { locale: 'KRW_SYMBOL' }) // '1,000₩'
formatNumberWithCurrency(1000, { locale: 'JPY' }) // '¥1,000'
formatNumberWithCurrency(1000, { locale: 'CNY' }) // '¥1,000'
formatNumberWithCurrency(1000, { locale: 'EUR' }) // '€1,000'
```

<br />

### ⭐️ Best Practice
아래와 같이 필요에 맞게 `추상화`해서 사용하는 것을 추천드립니다.

```ts title="typescript"
import { formatNumberWithCurrency } from '@modern-kit/utils';

const formatNumberToKRW = (value: number) => {
return formatNumberWithCurrency(value, {
currency: '원',
position: 'suffix',
});
}

const value1 = formatNumberToKRW(42000000); // 4,200만원
const value2 = formatNumberToKRW(425000000); // 4억 2,500만원
```
52 changes: 21 additions & 31 deletions docs/docs/utils/formatter/formatNumberWithUnits.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,8 @@ type FloorUnit =
| 100_000_000_000
| 1_000_000_000_000;

const DEFAULT_UNITS: Unit[] = [
{ unit: '조', value: ONE_TRILLION },
{ unit: '억', value: ONE_HUNDRED_MILLION },
{ unit: '만', value: TEN_THOUSAND },
];

interface FormatNumberWithUnitsOptions {
units?: Unit[]; // default: DEFAULT_UNITS
units?: Unit[] | readonly Unit[]; // default: []
commas?: boolean; // default: true
floorUnit?: FloorUnit; // default: 1
space?: boolean; // default: true
Expand All @@ -54,9 +48,16 @@ function formatNumberWithUnits(
```ts title="typescript"
import { formatNumberWithUnits } from '@modern-kit/utils';

const KRW_UNITS = [
{ unit: '조', value: 1_000_000_000_000 },
{ unit: '억', value: 100_000_000 },
{ unit: '만', value: 10_000 },
] as const;

// 기본 동작
formatNumberWithUnits(1234567) // "123만 4,567"
formatNumberWithUnits('1234567') // "123만 4,567", 숫자로 이루어진 문자열 허용
formatNumberWithUnits(1234567) // "1,234,567"
formatNumberWithUnits(1234567, { units: KRW_UNITS }) // "123만 4,567"
formatNumberWithUnits('1234567', { units: KRW_UNITS }) // "123만 4,567", 숫자로 이루어진 문자열 허용
```

<br />
Expand All @@ -65,31 +66,20 @@ formatNumberWithUnits('1234567') // "123만 4,567", 숫자로 이루어진 문
```ts title="typescript"
import { formatNumberWithUnits } from '@modern-kit/utils';

const KRW_UNITS = [
{ unit: '조', value: 1_000_000_000_000 },
{ unit: '억', value: 100_000_000 },
{ unit: '만', value: 10_000 },
] as const;

// 단위 사이 공백 추가
formatNumberWithUnits(1234567, { space: true }) // "123만 4,567"
formatNumberWithUnits(1234567, { space: false }) // "123만4,567"
formatNumberWithUnits(1234567, { units: KRW_UNITS, space: true }) // "123만 4,567"
formatNumberWithUnits(1234567, { units: KRW_UNITS, space: false }) // "123만4,567"

// 쉼표 사용 여부
formatNumberWithUnits(1234567, { commas: false }) // "123만 4567"
formatNumberWithUnits(1234567, { commas: true }) // "123만 4,567"
formatNumberWithUnits(1234567, { units: KRW_UNITS, commas: false }) // "123만 4567"
formatNumberWithUnits(1234567, { units: KRW_UNITS, commas: true }) // "123만 4,567"

// 버림 단위
formatNumberWithUnits(1234567, { floorUnit: 10000 }) // "123만"

// 사용자 정의 단위
const customUnits = [
{ unit: 'K', value: 1000 },
{ unit: 'M', value: 1000000 },
];

formatNumberWithUnits(1234567, {
units: customUnits,
floorUnit: 1000,
}); // "1M 234K"

// 단위 적용 X
formatNumberWithUnits(1234567, {
units: [],
floorUnit: 1000,
}); // "1,234,000"
formatNumberWithUnits(1234567, { units: KRW_UNITS, floorUnit: 10000 }) // "123만"
```
Loading

0 comments on commit 3e1cecd

Please sign in to comment.