글로벌 레이아웃

Next.js의 모든 페이지에 다 적용이 되는 글로벌 레이아웃을 설정하는 방법을 살펴보려고 합니다.

레이아웃 설정은
https://onebite-books-page-woad.vercel.app/

한 입 크기로 잘라먹는 Next.js - 이정환
을 참고하여 레이아웃을 설정하려고 합니다.

모든 레이아웃의 글로벌 영역을 설정하기 위해서는 _app.tsx컴포넌트로 가서 적용시켜주면 됩니다.

_app.tsx으로 레이아웃 설정하기

먼저 기존의 내용을 지운다음 div 태그로 감싸준다음
header,component,footer로 페이지 레이아웃을 설정해줍니다.

import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <div>
      <header>헤더</header>
      <main>
        <Component {...pageProps} />
      </main>
      <footer>푸터</footer>
    </div>
  );
}

보통은 가독성이 떠러지기 때문에 글로벌 레이아웃을 위한 별도의 컴포넌트를 파일로 만들어서 코드를 분리하는 편입니다.
pages/components 폴더를 만든 후
pages/components/global-layout.tsx 컴포넌트를 만들어줍니다.

그 후 app 컴포넌트의 return문을 그대로 복사 후 GlobalLayout 컴포넌트에 붙여넣기를 해줍니다.
<Component {...pageProps}>는 children으로 받아 return 해주도록 합니다.

children의 타입은 객체니 객체 타입으로 만든후 타입은 ReactNode를 갖는다고 설정해주시면 됩니다.

import { ReactNode } from "react";

export default function GlobalLayout({ children }: { children: ReactNode }) {
  return (
    <div>
      <header>헤더</header>
      <main>{children}</main>
      <footer>푸터</footer>
    </div>
  );
}

app컴포넌트로 돌어와서 GlobalLayout 으로 감싼 후 children만 보내주면 됩니다.

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import GlobalLayout from "./components/global-layout";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <GlobalLayout>
      <Component {...pageProps} />
    </GlobalLayout>
  );
}

글로벌 레이아웃의 스타일링 적용

완성본을 살펴보며 Header, Main, Footer를 만들어 보겠습니다.
헤더 부분을 누르면 index로 가지기에 Link를 불러와 설정해줍니다.

import { ReactNode } from "react";
import Link from "next/link";
export default function GlobalLayout({ children }: { children: ReactNode }) {
  return (
    <div>
      <header>
        <Link href={"/"}>📚 ONE BOOKS</Link>
      </header>
      <main>{children}</main>
      <footer>제작 @kmw</footer>
    </div>
  );
}

먼저 컨터이너 여백의 그레이톤 색상으로 설정을 해주기 위해
global.css 들어가 여백과 패딩을 0주고 backgroud-color를 그레이 컬러로 해줍니다.

html, body {
  margin: 0px;
  padding: 0px;
  background-color: rgb(250, 250, 250);
}

레이아웃 스타일링을 적용하기 위해서 src/components/global-layout.module.css 파일을 만들어줍니다.

import style from "./global-layout.module.css";

모듈에 맞게 import를 해준 후

먼저 maintainer를 스타일링 해줍니다.
배경색은 하얀색, 넓이는 최대 600으로, 높이는 최소가 가득차게 설정을 해주고, 마진은 0 오토로 설정을 해줍니다.

또한 그림자를 넣고, 내부 여백을 주기 위해 box-shadow와 패딩을 설정 해줍니다.

.container {
  background-color: white;
  max-width: 600px;
  min-height: 100vh;
  margin: 0 auto;

  box-shadow: rgba(100, 100, 100, 0.2) 0px 0px 29px 0px;
  padding: 0px 15px;
}

Header css

그 다음 헤더의 스타일을 적용해보겠습니다.
먼저 높이는 60px, 폰트는 굵게, 폰트 사이즈는 18px, 라인 높이는 60px로 주겠습니다.

그 다음 Link의 스타일을 적용시키기 위해
컬러는 검정으로 텍스트 데코레이션은 none으로 추가 설정까지 해줍니다.

.header {
  height: 60px;
  font-weight: bold;
  font-size: 18px;
  line-height: 60px;
}

.header > a {
  color: black;
  text-decoration: none;
}

Main css

헤더와 붙어있지 않도록 패딩 탑을 10px정도 줍니다.

.main {
  padding-top: 10px;
}

Footer css

패딩 상하로 100px 좌우로 0px 설정해서 여유있는 footer를 설정해줍니다.
또한 컬러는 그레이로 설정해줍니다.

.footer {
  padding: 100px 0px;
  color: gray;
}

---

import { ReactNode } from "react";
import Link from "next/link";
import style from "./global-layout.module.css";

export default function GlobalLayout({ children }: { children: ReactNode }) {
  return (
    <div className={style.container}>
      <header className={style.header}>
        <Link href={"/"}>📚 ONE BOOKS</Link>
      </header>
      <main className={style.main}>{children}</main>
      <footer className={style.footer}>제작 @kmw</footer>
    </div>
  );
}