Stack 컴포넌트 추가 제안

[sungik-choi]

현재 상황

const TagWrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  ${gap(4)}
`

위는 채널 데스크의 예시. gap 을 사용하는 경우도 있고, owl Selector 등을 사용하는 경우등 구현 방식은 사용처마다 다양합니다.
gap 속성이 필요한 경우, 베지어엔 별도로 구현되어있지 않아 프로젝트별로 gap 스타일을 구현하여 styled 를 별도로 작성하고 있습니다.

문제점

베지어를 사용하는 프로젝트마다 별도로 구현해줘야한다는 점이 번거롭습니다. 또한 잘못 구현될 위험성도 존재합니다.

어떻게 개선할 수 있는지

gap 스타일을 담당하는 HTMLDivElement를 Stack 이라는 컴포넌트로 추상화하는 방식을 제안합니다.

/* API */
interface StackProps {
  children: React.ReactNode
  direction: FlexDirection // 'column' | 'row' | ...
  spacing: number // 혹은 자체적으로 정의한 �Space 값을 쓸 수도 있겠습니다.
}

/* Usage */
<Stack
  direction="row"
  spacing={4}
>
  <Button text="A" />
  <Button text="B" />
</Stack>

Reference

• Chakra UI - Stack
• MUI - Stack

[inhibitor1217]

Stack과 함께, child의 크기 (구현상으로는 css flex property) 를 결정할 수 있는 컴포넌트도 짝이 되어 필요할 듯.