[issue] shadcn/ui 라이브러리 사용 시 body 주의할 점

웹 프로젝트지만 모바일 환경 친환적이게 꾸리고 싶어서 body에 max-width를 420px min-width 360을 줬었다.

그 뒤 margin x 를 auto를 줘서 뷰포트 기준 가운데에 위치시켰다. 

그렇게 스타일링을 하면서 shadcn/ui의 컴포넌트들을 사용했는데 Select와 Dropdown을 사용하면서 각 컴포넌트의 Content가 예상치 못한 곳에서 렌더링 되었다. Content는 Trigger를 기준으로 포지셔닝 되는 것으로 확인했는데 렌더링 되는 위치는 body에 margin x 에 auto를 주지 않는 곳에 위치해있었다. 이같은 점이 되는 이유가 trigger를 기준으로 포지셔닝 되지만 이것은 뷰포트를 덮는 Portal가 베이스가 되기에 그런 것 같았다. 그렇다고 Portal에 스타일링 값을 줄 수 있는 것도 아니었고 shadcn의 컴포넌트들을 가져올 때마다 각 Portal에 mx-auto를 주기도 애매했다. ( shadcn issue에선 content에 containerRef prop를 줘서 트리거의 ref에 containerRef를 주고 content의 containerRef에 containerRef.current를 주면 되는 것으로 나와있었지만 이 또한 mx-auto 가 적용 되지 않는 곳에 렌더링 되었다.) 

이것을 해결하기 위해 root layout.tsx의 body 자체에 바로 max-width와 mx-auto를 주는 것 대신 하위 layout.tsx의 컨테이너에 max와 min width와 mx-auto를 줬다. body와 portal은 여전히 뷰포트 전체를 감싸고 있기 때문에 트리거에 content가 렌더링 된다