React 레이아웃에서 내부 요소 스크롤을 위한 Golden Rule

목표: 전체 화면이 아닌 특정 내부 컴포넌트(MenuGrid 등)에만 스크롤을 적용하기

---

Golden Rule

어떤 요소에 flex: 1과 overflowY: auto를 주고 스크롤이 되게 하려면,
그 요소의 모든 상위 요소들이 아래 조건을 모두 만족해야 한다.

설정 항목	설명
display: flex	flex 레이아웃을 적용하여 flex: 1이 동작할 수 있게 함
flexDirection: column	수직으로 요소들을 쌓을 수 있도록 설정
height: 100% 또는 height: 100vh	자식 요소가 어느 정도 높이로 커질지 계산 가능하게 함

---

예시 구조

App.tsx

<div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
  <AppBar />
  <div style={{ flex: 1, overflow: 'hidden' }}>
    <Outlet />
  </div>
  <BottomNav />
</div>

Home.tsx

<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
  <HorizontalDatePicker />
  <Tabs />
  <div style={{ flex: 1, overflowY: 'auto' }}>
    <MenuGrid />
  </div>
</div>

TabPanel (선택적으로 필요)

const TabPanel = ({ children, value, index }) => (
  <div hidden={value !== index} style={{ height: '100%' }}>
    {value === index && children}
  </div>
);

---

자주 발생하는 문제와 원인

문제	원인
스크롤이 안 생김	부모 요소 중 하나가 height를 지정하지 않음
flex: 1이 동작하지 않음	부모 요소가 flex container가 아님
전체 화면이 스크롤됨	html, body, #root에 overflow: scroll이 설정됨

---

전역 스타일 설정 예시

html, body, #root {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

---

정리

내부 특정 컴포넌트만 스크롤되게 만들기 위해서는:

• 해당 요소의 모든 상위 요소가 display: flex, flexDirection: column을 가지고 있어야 함
• 각 상위 요소는 반드시 height를 명시해줘야 함 (100% 또는 100vh)
• 그 후에 스크롤이 필요한 요소에 flex: 1과 overflowY: auto를 적용

이 규칙은 #root까지 모든 계층에 적용되어야 한다.