리액트에서 사이드 메뉴 구성 시 메뉴 하단 쪽 짤리는 현상
안녕하세요.
Front 새내기입니다 ㅎㅎ
React.js 와 Chakra-ui 로 Google Vertex AI 클론코딩 해보고 있는데요,
사이드 메뉴 구성 시 사진과 같이 짤리는 현상이 발생하네요..
문제가 되는 부분이 <Sidebar /> 컴포넌트인데..
<Header />, <SubHeader />, <Sidebar /> 세 컴포넌트 모두 position을 fixed 로 설정했고.
height, width 속성 전부 100% 로 설정했습니다.
영향 받을만한 상위 컴포넌트가 없는 상태라서 왜 이렇게 짤리는 현상이 생기는지 이유를 잘 모르겠네요 ㅠ
Chat-GPT 답변처럼 뷰포인트로 설정하면 어느정도 문제가 해결이 되긴 되는데.. 화면 크기별로 뷰포인트를 따로 설정해줘야하고 화면 하단과 깔끔하게 맞아 떨어지지가 않더라구요.
혹시 다른 방법이 있을까요??
#react
#chakra-ui
#frontend
#typescript