[FE] 피드 채팅창 메뉴의 텍스트 오버플로우로 인한 높이가 변하는 문제를 해결

[wzrabbit]

[FE] 피드 채팅창 메뉴의 텍스트 오버플로우로 인한 높이가 변하는 문제를 해결

이슈번호

close #718

PR 내용

반드시 리뷰 또는 승인 전, "의논할 거리" 를 먼저 읽어 보십시오.

본 PR에서는 피드 채팅창 메뉴에서 "공지로 등록" 글씨가 여러 줄로 넘쳐 피드의 높이가 의도치 않게 변하는 문제를 해결하였다.

• 피드의 너비가 글씨를 표시하기 힘들 정도로 너무 좁은 경우, 글씨를 보이지 않게(display: none) 하여 피드의 너비가 의도치 않게 늘어나는 현상을 해결하였다.

참고자료

_2023_10_19_15_37_22_115.mp4

의논할 거리

문제 자체는 해결했지만, 두 가지의 문제가 있어 보여서 의견을 들어보고자 여기에 이에 대해 설명해 보고자 해
문제를 해결하기 위해 css의 @container (컨테이너 쿼리) 를 사용했는데, 이게 너무 최신 문법이어서 이렇게라도 해서 해결할 지 보류할 지 고민 중이야.

우선 컨테이너 쿼리를 설명하자면, 컨테이너 쿼리는 미디어 쿼리(@media) 와 매우 비슷하다고 생각하면 될 것 같아. 다만 미디어 쿼리는 브라우저의 가로/세로 길이에 따라 각 요소에 어떻게 속성을 적용할 수 있을지를 결정할 수 있는 쿼리라면, 컨테이너 쿼리는 특정 요소를 기준으로 어떻게 속성을 적용할 수 있을지를 결정할 수 있는 쿼리야. 꽤나 최신 문법이야.

이번 PR에서는 피드 페이지 컴포넌트의 크기를 기준으로 "공지로 등록" 글씨가 보이게 할지, 그렇지 않도록 할지를 @container 를 사용하여 적용한 거야.

아래의 두 글을 참고하면 좋을 것 같아!

• MDN 페이지: https://developer.mozilla.org/en-US/docs/Web/CSS/@container
• 잘 정리된 블로그 글: https://inpa.tistory.com/entry/%F0%9F%8C%9F-css-container-%EC%82%AC%EC%9A%A9%EB%B2%95

1. vscode에서 컨테이너 관련 속성들을 전혀 인식하지 못 하는 것으로 보여. 문법이 잘못된 것은 아닌데, vscode의 IntelliSense가 이 속성들을 아직 인식 못 하는 것으로 보여.
   

이 PR에 따르면 @container 와 관련된 속성들을 v1.84 부터 지원할 예정이래, 그런데 아직은 v1.84 가 배포되지는 않은 상태야.

2. 지원율이 아주 높지는 않은 것으로 보이는데, 이 caniuse 링크로 접속해서 같이 판단해 주면 좋을 것 같아

[suyoungj]

👍 �이 정도 지원율이면 우리 타겟 브라우저용으로는 괜찮을듯??