Implement SmoothCornersBox

[sungik-choi]

Description

• Implement FeatureProvider #1309 의 후속 작업
• FeatureFlagContext 에 접근하여 smooth corners 기능을 적용하는, 현재의 smoothCorners 믹스인을 내부에 가지고 있는 컴포넌트를 구현합니다.

Reasons for suggestion

• 현재는 Avatar 에만 smooth corners가 적용되어있지만, 기획상 더 많은 컴포넌트에도 적용될 수 있습니다.
• 사용처마다 컨텍스트에 접근하여 기능을 키고 끄는 대신, 해당 기능에 대한 책임을 담당하는 컴포넌트를 별도로 두는 게 재사용성이 좋습니다.
• 또한, 아바타의 Skeleton View를 사용하는 등의 유즈 케이스가 있는데 이 케이스를 지원하기에도 별도의 컴포넌트를 두는 게 적절합니다.

Proposed solution

현재 믹스인 함수.

export const smoothCorners = ({
  borderRadius = 0,
  shadow = '0 0 0 0 transparent',
  backgroundColor = 'white',
  hasBackgroundImage = false,
  shadowBlur = 0,
  margin = 0,
}: SmoothCornersOptions) => css` /* ... */ `

다음과 같은 인터페이스가 되면 좋겠습니다.

interface SmoothCornersBoxProps {
  borderRadius?: number | string
  margin?: number
  shadow?: string
  shadowBlur?: number
  backgroundColor?: string
  backgroundImage?: string // backgroundImageVariable 과 통합 가능
}

추가로,

• className이 런타임에 굉장히 많이 생길 수 있는 컴포넌트이므로, css variable을 사용하여 이를 방지하기
• (고민) 컴포넌트 개별적으로 기능 활성화/비활성화 할 수 있도록
• 컴포넌트 외부에서도 조건부 스타일링을 잘 할수 있게 기능 활성화 여부를 알 수 있는 data attribute를 제공
• 구현 이후 smoothCorners 믹스인 제거

References

No response