[core-elements] Text 컴포넌트 사용시 가변적인 라인 수에 대한 이슈

[pgs787]

관련 스레드- https://titicaca.slack.com/archives/CE1TS26GK/p1618479206038200?thread_ts=1618443838.009900&cid=CE1TS26GK

위와 같은 경우는 컴포넌트 내 optional props로 1줄로 적용시켜 이슈를 해결 했지만(원래 1줄이 목적이였음)
가변적인 라인을 목적으로 사용하고 싶은 경우 경우 문제가 발생할 수 있습니다.

ex) 라인이 가변적인 케이스인 경우
Text 컴포넌트에게 UI적으로 필요한 padding 혹은 margin 등 css 적용시키다 보면
아래 사진과 같이 over 되는 문구 혹은 이모지가 보이는 현상이 발견 될 것 같습니다
=> 원하는 목적이 가변의 height을 원하다 보니 maxHeight나 height 값을 지정해서 안 보이게 하는 것도 한계가 있을 것 같습니다!

다양한 방안이 있겠지만 의견을 공유 받고자 합니다!

[pgs787]

@dddeok

[dddeok]

이모지 폰트 문제에서 나타났던 문제인데 이번에 작업을 하는 과정에서 maxlines 추가 후 아래 패딩을 적용 시켰을때도 해당 이슈가 발생하였습니다.

[giwan-dev]

재현을 해봤습니다. padding을 넣기 시작하면서 문제가 생기는군요.
padding을 넣는 것과 말줄임 처리를 분리하는 것이 베스트일 것 같아요. 지금은 Text에 margin이나 padding을 적용하지 않는 규칙을 묵시적으로 사용하고, v3로 갈 때 positioning하는 컴포넌트와 텍스트 스타일링하는 컴포넌트를 쪼개보는 작업을 하면 어떨까요?

[dddeok]

@zprime0920 어쩔수 없는 웹버그 이슈인걸까요 저도 한창 찾아봤는데 마땅한 트릭이나 해결책이 보이지 않는 상황이긴 하네요 😢

[kooinsung]

maxlines과 padding이나 마진을 혼합해서 사용할수 없겠네요.
요걸 사용할려면 먼가 maxlines이 들어간 Text컴포넌트를 Container로 한번 감싸서 요 Container에 padding이나 margin을 주는 형태로 사용을 해야겠네여.