2차 강의 노트 (레이아웃, 스타일링)

스타일링

index.css 를 그대로 import 하면 오류 발생한다. 왜냐하면 _app.tsx 에서 밖에 못한다.

그렇기 때문에 스타일은 모듈로 만들어서 적용해야 한다.

# index.module.css
.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;
}

import style from './global-layout.module.css'; 
<div className={style.container}>

글로벌 레이아웃

src/components/ 디렉토리에 글로벌 레이아웃 컴포넌트를 생성한다.

import { ReactNode } from "react";
import Link from "next/link";
import style from './global-layout.module.css'; // Assuming you have a CSS module for styles
export default function GlobalLayout({children}:{children: ReactNode}) {
    return (
    <div className={style.container}>
      <header className={style.header}>
        <Link href="/">📚 ONEBITE BOOKS</Link>
      </header>
      <main className={style.main}>{children}</main>
      <footer className={style.footer}>제작 @wowls5000</footer>
    </div>
  );
}

_app.tsx

  return (
    <GlobalLayout>
      <Component {...pageProps} />
    </GlobalLayout>
  );

• {children}을 props로 받아서, <main> 태그 안에 그 내용을 렌더링
• children은 React에서 자식 요소를 자동으로 전달받는 특별한 prop

개별 레이아웃

검색 바 같은 건 안 쓰이는 곳도 있으니 개별로 설정해줘야 한다.

import SearchableLayout from "@/components/searchable-layout";
import { useRouter } from "next/router";
import { ReactNode } from "react";

export default function Page() {
  const router = useRouter();
  const { q } = router.query;
  return <h1>검색: {q}</h1>;
}

Page.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>
}

css 파일과 tsx 파일은 동일 위치에 둔다

src/
   pages/
			   index.tsx
			   index.module.css  

• module 이거 꼭 붙여야 함 안 붙이면 __app 에 만 적용 가능 다른 tsx 파일에서 사용 불가 오류 남

 

이 링크를 통해 구매하시면 제가 수익을 받을 수 있어요. 🤗

https://inf.run/4oB9v