Add flex item-specific style props to Layout props

[sungik-choi]

Description

• 이번에 Layout props을 도입하면서, 기존 StackItem이 가지던 문제를 Layout 인터페이스를 준수하는 다른 컴포넌트들이 역할을 나눠서 가져가도록 해서 해결하려고 했는데요.
• 잘 아시겠지만, 예컨대 Stack 스스로도 Layout props의 shrink, grow 속성을 통해서 StackItem의 역할을 수행할 수 있게 되는 식입니다.
• 그런데 현재 구현으로는 아직 몇 가지 예전 Stack을 커버하지 못하는 부분들이 있어요. 대표적으로 StackItem의 align/jusfity(align-self, justify-self)가 있습니다.
• align/justify 속성도 Layout props에 포함해서 이 케이스도 커버할 수 있도록 하고 싶은데, align/justify 속성명을 어떻게 지정할 지 고민입니다
• 자세히: align을 예로 들어, 같은 align이라는 속성명이더라도 내부적으로는 Stack은 align-items, StackItem은 align-self가 적용됩니다. 해당 인터페이스를 그대로 따라서 AlphaStack도 align/justify 라는 이름으로 정했어요.
• 여기서 StackItem에 align self 속성을 지원하고자 Layout props에 align, justify라는 속성을 추가한다면 Layout 인터페이스를 준수하는 AlphaStack에서 속성명 충돌이 발생합니다. 이 부분을 어떻게 해결할지가 고민됩니다.

생각해본 해결책들은 아래와 같아요

1. AlphaStack align/justify → alignItems/justifyContent 로 바꾸고, alignSelf/justifySelf 를 LayoutProps에 추가한다
   → 마이그레이션 코스트가 좀 있으나, 네이밍이 일관적임. 타이핑이 귀찮음.
2. AlphaStack align/justify는 유지하고, LayoutProps에 alignSelf/justifySelf 추가
   → 마이그레이션 코스트는 없으나, 네이밍이 일관적이지 못함
3. 지원 안한다. 사용처에서 스타일 오버라이드로 해결하도록 한다.
4. 기존처럼 align, justify를 가진 StackItem을 따로 만든다.
   → 책임이 명확해지는 건 좋으나, Layout props의 장점이 퇴색됨.
5. ???

Reasons for suggestion

Proposed solution

• 변경안을 적용합니다.
• AlphaStack 마이그레이션 코드를 강화합니다.

References

• https://desk.channel.io/root/threads/groups/WebBezier-124831/659f81437542ee736155/659f81437542ee736155

[sungik-choi]

우선 보류하고, 니즈가 많아지면 그 때 가서 지원하도록