[Final project] 최종 프로젝트 - 페이지별 서로 다른 레이아웃 적용시키기 (헤더, 푸터 등)

페이지별로 네비게이션바와 헤더의 유무가 존재할 때 어떻게 동적으로 나타낼 수 있는지?

usePathname() 훅을 사용해 해당 경로의 이름을 파악

layout.tsx를 서버 컴포넌트로 유지하기 위해, HeaderWrapper.tsx 클라이언트 컴포넌트로 따로 분리

import React, { PropsWithChildren } from "react";
import NavBarWrapper from "@/components/NavBarWrapper";
import HeaderWrapper from "@/components/HeaderWrapper";

const MainLayout = ({ children }: PropsWithChildren) => {
  return (
    <>
      <HeaderWrapper />
      <main>{children}</main>
      <NavBarWrapper />
    </>
  );
};

export default MainLayout;

해당 훅 사용 시 클라이언트 컴포넌트에서 사용 필요 (”use client”)

"use client";
import { usePathname } from "next/navigation";
import Header from "./Header";

const HeaderWrapper = () => {
  const pathname = usePathname();
  const hideHeaderPaths = ["write-diary", "diary-detail", "todo-detail", "ai-profile"];
  const shouldHideHeader = hideHeaderPaths.some((path) => pathname.includes(path));

  if (shouldHideHeader) {
    return null;
  }

  return <Header />;
};

export default HeaderWrapper;