nextjs Layout Navbar 그리고 로고

by

상단 Navbar 만들기 위해서 components 아래 navbar.tsx 를 생성 합니다. _를 사용하여 페이지로 인식하지 않도록 합니다.

/app/(marketing)/_components/navbar.tsx

import { Logo } from "@/components/logo"

export const Navbar = () => {
  return (
    <div className="fixed top-0 w-full h-14 px-4 border-b shadow-sm bg-white flex items-center">
      <div className="md:max-w-screen-2xl mx-auto flex items-center w-full justify-between">
        Navbar
      </div>
    </div>
  )
}

이 Navbar 콤포넌트를 layout.tsx 에서 불러와 사용합니다.

/app/(marketing)/layout.tsx

import { Navbar } from "./_components/navbar";

const MarketingLayout = ({
  children
}:{
  children: React.ReactNode
}) => {
  return <div className="h-full bg-slate-100">
    <Navbar />
    <main className="pt-40 pb-20 bg-slate-100">
      {children}
    </main>
    {/* Footer 영역 */}
  </div>
}

export default MarketingLayout;

이제 화면을 보면서 Navbar를 만들어 갈 수 있어요. 이제 왼쪽 상단에 로고를 표현하기 위해 로고 콤포넌트를 생성 합니다. 로고는 다른 페이지에서도 사용 할 수 있어서 /components/logo.tsx 에 생성 합니다.

로고 파일 logo.svg 구해서 /public 폴더에 넣습니다.

import { cn } from "@/lib/utils";
import localFont from "next/font/local"
import Image from "next/image"
import Link from "next/link"

const headingFont = localFont({
  src: "../public/fonts/font.woff2"
});

export const Logo = () => {
  return (
    <Link href="/">
      <div className="hover:opacity-75 transition items-center gap-x-2 hidden md:flex">
        <Image 
          src="/logo.svg?x85974"
          alt="Logo"
          height={30}
          width={30}
        />
        <p className={cn(
          "text-lg text-neutral-700",
          headingFont.className
          )}>
          Taskify
        </p>
      </div>
    </Link>
  )
}

마지막으로 Navbar 에서 Navbar 글자 대신 <Logo /> 로 수정해서 불러와보세요.

/app/(marketing)/_components/navbar.tsx

import { Logo } from "@/components/logo"

export const Navbar = () => {
  return (
    <div className="fixed top-0 w-full h-14 px-4 border-b shadow-sm bg-white flex items-center">
      <div className="md:max-w-screen-2xl mx-auto flex items-center w-full justify-between">
        <Logo />
      </div>
    </div>
  )
}

navbar 만들었던 것을 응용해서 굉장히 비슷하게 footer 생성합니다. 복사 붙여넣기 하고나서 수정합니다.

/app/(marketing)/_components/footer.tsx

import { Logo } from "@/components/logo"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export const Footer = () => {
  return (
    <div className="fixed bottom-0 w-full p-4 border-t bg-slate-100">
      <div className="md:max-w-screen-2xl mx-auto flex items-center w-full justify-between">
        <Logo />
        <div className="space-x-4 md:block md:w-auto flex items-center justify-between w-full">
          <Button size="sm" variant="ghost">            
              Privacy Policy   
          </Button>
          <Button size="sm" variant="ghost">            
              Terms of Service    
          </Button>
        </div>
      </div>
    </div>
  )
}

layout.tsx 파일에서 주석으로 했던 부분을 Footer 임포트하는 부분으로 수정합니다.

/app/(marketing)/layout.tsx

import { Footer } from "./_components/footer";
import { Navbar } from "./_components/navbar";

const MarketingLayout = ({
  children
}:{
  children: React.ReactNode
}) => {
  return <div className="h-full bg-slate-100">
    <Navbar />
    <main className="pt-40 pb-20 bg-slate-100">
      {children}
    </main>
    <Footer />
  </div>
}

export default MarketingLayout;

Leave a Comment