Improvements to apply `data-*` attributes as a common utility function

[sungik-choi]

Description

컴포넌트에 data-* 속성을 적용하는 부분을 공통 유틸 함수로 분리합니다.

Reasons for suggestion

• 컴포넌트마다 가지는 다양한 외부 상태를 CSS에서 접근할 수 있도록 data attributes를 활용하고 있습니다.
• 컴포넌트마다 data-*** attribute 명과 해당하는 상태(boolean or true | undefined)를 모두 개별 컴포넌트에서 직접 구현하여 사용하고 있어, 구현하는 사람마다 인터페이스가 변경될 위험성이 큽니다.
• 공통 유틸로 분리하여 라이브러리 전반 data attribute별 사용방식을 통일해야합니다.

Proposed solution

const dataDisabled = (disabled: boolean) => ({ 'data-disabled' : disabled ? true : undefined })

<Foo {...dataDisabled(disabled)} />

혹은 네임스페이스를 활용하여,

<Foo {...DataAttrs.disabled(disabled)} />

References

No response

[sungik-choi]

API를 제공할 것인지 다시 고민해보기.