feat(utils): formatSizeStyleValue 함수 추가 (#521)

* feat(utils): implement fn

* docs(utils): 문서화 진행

* fix: interface 간소화

* docs: 주석 수정

* fix: remove overload

* docs: ts-doc default param

* Create friendly-dolls-hide.md

---------

Co-authored-by: Gromit (전민재) <[email protected]>

.changeset/friendly-dolls-hide.md

@@ -0,0 +1,5 @@
+---
+"@modern-kit/utils": minor
+---
+
+feat(utils): formatSizeStyleValue 함수 추가 - @99mini

docs/docs/utils/style/formatSizeStyleValue.md

@@ -0,0 +1,47 @@
+# formatSizeStyleValue
+
+`css` 스타일 값으로 사용할 수 있도록 `<value>[suffix]` 형태로 변환해주는 유틸 합수입니다.
+
+`suffix`옵션을 통해서 해당 값에 접미사를 붙여 반환할 수 있습니다. 해당 옵션이 없다면 `default`로 `px`을 접미사로 사용합니다.
+
+<br />
+
+## Code
+
+[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/utils/src/style/formatSizeStyleValue/index.ts)
+
+## Interface
+```ts title="typescript"
+type SuffixUnit =
+  | 'cm'
+  | 'mm'
+  | 'Q'
+  | 'in'
+  | 'pc'
+  | 'pt'
+  | 'px'
+  | 'em'
+  | 'ex'
+  | 'ch'
+  | 'rem'
+  | 'vw'
+  | 'vh'
+  | 'vmin'
+  | 'vmax'
+  | 'lh'
+  | 'rlh'
+  | '%';
+
+function formatSizeStyleValue(
+  value: number,
+  suffix?: SuffixUnit
+): string
+```
+
+## Usage
+```ts title="typescript"
+import { formatSizeStyleValue } from '@modern-kit/utils';
+
+formatSizeStyleValue(10);        // '10px'
+formatSizeStyleValue(10, '%');   // '10%'
+```

packages/utils/src/style/formatSizeStyleValue/formatSizeStyleValue.spec.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+import { formatSizeStyleValue } from '.';
+
+describe('formatSizeStyleValue', () => {
+  it('should return the value with the default suffix "px" if the suffix is not provided', () => {
+    expect(formatSizeStyleValue(10)).toBe('10px');
+  });
+
+  it('should return the value with the suffix if the suffix is provided.', () => {
+    expect(formatSizeStyleValue(10, '%')).toBe('10%');
+  });
+});

packages/utils/src/style/formatSizeStyleValue/index.ts

@@ -0,0 +1,42 @@
+/**
+ * @description css 스타일 값으로 사용할 수 있는 단위
+ * @see https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths
+ */
+type SuffixUnit =
+  | 'cm'
+  | 'mm'
+  | 'Q'
+  | 'in'
+  | 'pc'
+  | 'pt'
+  | 'px'
+  | 'em'
+  | 'ex'
+  | 'ch'
+  | 'rem'
+  | 'vw'
+  | 'vh'
+  | 'vmin'
+  | 'vmax'
+  | 'lh'
+  | 'rlh'
+  | '%';
+/**
+ * @description `css` 스타일 값으로 사용할 수 있도록 `<value>[suffix]` 형태로 변환해주는 유틸 합수입니다.
+ *
+ * `suffix`옵션을 통해서 해당 값에 접미사를 붙여 반환할 수 있습니다. 해당 옵션이 없다면 `default`로 `px`을 접미사로 사용합니다.
+ * @param {number} value 점미사를 붙일 값
+ * @param {SuffixUnit} [suffix = 'px'] `css` 스타일 값의 단위 값
+ * @returns {string} `css` 스타일 값으로 사용할 수 있는 값
+ * @example
+ * ```typescript
+ * formatSizeStyleValue(10);        // '10px'
+ * formatSizeStyleValue(10, '%');   // '10%'
+ * ```
+ */
+export function formatSizeStyleValue(
+  value: number,
+  suffix: SuffixUnit = 'px'
+): string {
+  return `${value}${suffix}`;
+}

packages/utils/src/style/index.ts

@@ -1 +1,2 @@
 export * from './rem';
+export * from './formatSizeStyleValue';