feat(typography): Typography 컴포넌트 구현

[noahluftyang]

변경사항

• 커밋 단위로 보시길 추천드려요~
• 기능 명세를 만족하는 테스트 시나리오 작성 79c4a8f
• 테스트 시나리오를 만족하도록 컴포넌트의 기능 구현 1ac435a
• 스토리 작성 2d1b9ae

시각자료

체크리스트

• 기능 명세를 작성하였나요?
• 테스트 코드를 작성하였나요?

추가 논의사항

• 이런 느낌으로 작업 진행해주시면 될 듯 합니다~

[heeji289]

PR 잘 봤습니다! asChild를 활용하는 방식은 처음 봤는데 신기해요 🤩

궁금한 점이 몇 개 있어요

1. <Typography as="h1">hello</Typography> 형태와 비교했을 때 asChild 방식이 사용하기에 더 직관적이고 편한가? 하면 잘 모르겠는데요. 왜냐하면 제가 느끼기에 1줄로 할 수 있는 것을 2줄로 작성해야 한다는 느낌이 있어서요! 의현님 생각이 궁금해요
2. 그리고 디자인 시스템 전반적으로 as props와 asChild 방식이 섞여있으면 혼란을 줄까요? Typography에서는 as props를, Button에서 asChild 방식을 사용하면 이상할까 궁금해요~

[noahluftyang]

PR 잘 봤습니다! asChild를 활용하는 방식은 처음 봤는데 신기해요 🤩

궁금한 점이 몇 개 있어요

1. <Typography as="h1">hello</Typography> 형태와 비교했을 때 asChild 방식이 사용하기에 더 직관적이고 편한가? 하면 잘 모르겠는데요. 왜냐하면 제가 느끼기에 1줄로 할 수 있는 것을 2줄로 작성해야 한다는 느낌이 있어서요! 의현님 생각이 궁금해요
2. 그리고 디자인 시스템 전반적으로 as props와 asChild 방식이 섞여있으면 혼란을 줄까요? Typography에서는 as props를, Button에서 asChild 방식을 사용하면 이상할까 궁금해요~

1. 저는 사용자들이 쓰기에는 as prop이 더 직관적이고 편하다고 생각합니다! 다만 as prop을 사용할 때 아쉬웠던 점들이 몇 가지 있었어요.
   • 해당 컴포넌트를 wrapping하는 커스텀 구현체를 만들 때 타입 추론 기능을 원활하게 확장하기 어려웠어요. 특히 forwardRef로 감싼 컴포넌트의 경우, 일반적인 방식으로 generic 타입 추론 기능하지 않아서 커스텀에 아쉬움이 조금 있었습니다!
   • h1과 같은 html 태그 말고 Link와 같은 컴포넌트를 as prop으로 주입할 때 아쉬움이 있었어요. 역시나 조금 더 복잡한 커스텀이 필요한 경우 asChild가 보다 유연하게 대응 가능하다고 생각합니다.
2. 저는 우리의 구현 방식이 충분히 자리 잡기 전 까지는 여러 방식을 시도해봐도 괜찮다고 생각해요~ 그래도 장기적으로는 하나의 방식으로 모아지길 기대하는데, 인터페이스의 일관성을 통해 사용자가 기능을 쉽게 예측 가능한 형태가 되었으면 하는 바람입니다!

[heeji289]

답변 감사합니다~ 1번은 아직 제가 많이 겪지 못한 부분이라 좀 많이 접해봐야겠네요!!

1. 저는 사용자들이 쓰기에는 as prop이 더 직관적이고 편하다고 생각합니다! 다만 as prop을 사용할 때 아쉬웠던 점들이 몇 가지 있었어요.

   • 해당 컴포넌트를 wrapping하는 커스텀 구현체를 만들 때 타입 추론 기능을 원활하게 확장하기 어려웠어요. 특히 forwardRef로 감싼 컴포넌트의 경우, 일반적인 방식으로 generic 타입 추론 기능하지 않아서 커스텀에 아쉬움이 조금 있었습니다!
   • h1과 같은 html 태그 말고 Link와 같은 컴포넌트를 as prop으로 주입할 때 아쉬움이 있었어요. 역시나 조금 더 복잡한 커스텀이 필요한 경우 asChild가 보다 유연하게 대응 가능하다고 생각합니다.

2. 저는 우리의 구현 방식이 충분히 자리 잡기 전 까지는 여러 방식을 시도해봐도 괜찮다고 생각해요~ 그래도 장기적으로는 하나의 방식으로 모아지길 기대하는데, 인터페이스의 일관성을 통해 사용자가 기능을 쉽게 예측 가능한 형태가 되었으면 하는 바람입니다!

[froggy1014]

참고 많이했습니다.. ㅎㅎ

LGTM