기본 Layout
import Footer from "@/components/Footer";
import Header from "@/components/Header";
function RootLayout({ children }: { children: React.ReactNode }) {
return (
<>
<Header />
{children}
<Footer />
</>
);
}
export default RootLayout;
Error나 Loading 중일때, children에 해당하는 content가 없으면, 저렇게 footer가 뷰포트 중간으로 올라와버리는 문제가 발생한다.
Flex-grow 사용
import Footer from "@/components/Footer";
import Header from "@/components/Header";
function RootLayout({ children }: { children: React.ReactNode }) {
return (
<div className="flex flex-col min-h-screen">
<Header />
<main className="flex-grow">{children}</main>
<Footer />
</div>
);
}
export default RootLayout;
div에 min-height를 뷰포트를 꽉차게 만들어주고,
고정값인 header, footer를 제외한 children을 flex-grow값을 사용해 쭉 늘려주면 된다!
이제 로딩중이나 에러가 발생했을때 헤더가 중앙으로 가는 버그를 해결할 수 있다!
'프로젝트' 카테고리의 다른 글
[emoji-picker-react 🙂] 이모티콘 입력창으로 input 받는방법 (0) | 2024.04.25 |
---|---|
[tailwind] max-width로 반응형 CSS 적용하기 (0) | 2024.04.24 |
[keyDown, keyUp Event] 한국어 입력 문제 해결 : e.nativeEvent.isComposing (0) | 2024.04.24 |
[Fullstack] 고객센터 채팅 기능 만들기 (0) | 2024.04.23 |
[react-query] useQueries로 각 id에 대해 병렬 쿼리하기 (0) | 2024.04.23 |