[Feature]: formatSizeStyleValue

[ssi02014]

Package Scope

• 기존 패키지에 기능 추가
• 새로운 패키지
• Package name: @modern-kit/utils/style

Overview

suffix 타입은
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units#%EA%B8%B8%EC%9D%B4 참고

formatSizeStyleValue('10px');
// '10px'

formatSizeStyleValue(10);
// 기본적으로 'px'을 접미사로 붙입니다, '10px'

formatSizeStyleValue(10, '%');
// suffix값이 있다면 해당 값을 접미사로 붙입니다, '10%'

[99mini]

안녕하세요! 해당 라이브러리에 관심을 가지고 있습니다! 제가 해당 기능 구현해도 괜찮을까요?

인터페이스는 아래와 같이 생각하고 있습니다. 감사합니다.

질문 사항

• SUFFIX_UNITS을 상수로 선언해 두어 suffix의 입력값을 string으로 모두 받는 대신 입력을 제한하는 것이 좋을 지 궁금합니다!
• 문자열을 입력 받을 때 "foo"와 같은 css style size에 타당하지 않을 경우 에러를 반환할 지, 문자열을 받을 경우는 항상 그 문자열 그대로 반환하는 것이 좋을 지 질문드립니다.

인터페이스

const SUFFIX_UNITS = [
  'cm',
  'mm',
  'Q',
  'in',
  'pc',
  'pt',
  'px',
  'em',
  'ex',
  'ch',
  'rem',
  'vw',
  'vh',
  'vmin',
  'vmax',
  '%',
] as const;

type SuffixUnit = (typeof SUFFIX_UNITS)[number];

export function formatSizeStyleValue(value: string): string;
export function formatSizeStyleValue(value: number): string;
export function formatSizeStyleValue(value: number, suffix: SuffixUnit): string;

export function formatSizeStyleValue(
  value: string | number,
  suffix?: SuffixUnit
): string { /* logic */ }

[ssi02014]

@99mini 검토 후에 빠른 시일 내로 의견을 남기도록 하겠습니다! 많은 관심 감사합니다 😀

[ssi02014]

@99mini

SUFFIX_UNITS을 상수로 선언해 두어 suffix의 입력값을 string으로 모두 받는 대신 입력을 제한하는 것이 좋을 지 궁금합니다!

인자의 타입을 최대한 좁혀주는 것이 좋을 것 같습니다 :)

문자열을 입력 받을 때 "foo"와 같은 css style size에 타당하지 않을 경우 에러를 반환할 지, 문자열을 받을 경우는 항상 그 문자열 그대로 반환하는 것이 좋을 지 질문드립니다.

지금 고민해보니 value로 문자열까지 타입을 열어주는게 적절한지 고민이네요 ㅎㅎ

문자열을 받게되면 suffix가 붙은 여부, style size가 적절한지 등의 별도의 검증 처리가 필요해서 복잡도가 높아 질 것 같네요. 물론, 문자열인 경우 그냥 그대로 반환하는 방법이라면 크게 복잡도는 없겠지만...

숫자 타입만 받을 수 있게 타입을 좁히고, suffix를 붙여주는 형태로 구현을 하면 로직을 단순화할 수 있을 것 같습니다. 어떻게 생각하실까요 !? 🤗

[99mini]

@ssi02014

답글 확인하였습니다! ssi02014님의 의견에 동의합니다~!

value의 타입은 number로 제한하고, suffix 또한 string이 아닌 SuffixUnit과 같이 최대한 좁혀주는 방향으로 인터페이스를 설계하도록 하면 좋겠습니다!
추가적으로 SUFFIX_UNITS의 요소들은 MDN 을 참조하여 선언하도록 하겠습니다!

const SUFFIX_UNITS = [
  'cm',
  'mm',
  'Q',
  'in',
  'pc',
  'pt',
  'px',
  'em',
  'ex',
  'ch',
  'rem',
  'vw',
  'vh',
  'vmin',
  'vmax',
  '%',
] as const;

type SuffixUnit = (typeof SUFFIX_UNITS)[number];

export function formatSizeStyleValue(value: number): string;
export function formatSizeStyleValue(value: number, suffix: SuffixUnit): string;

export function formatSizeStyleValue(
  value: number,
  suffix?: SuffixUnit
): string { /* logic */ }