개인프로젝트: VarGen(5.2)-다크모드 적용 디테일, 헤더

윤뿔소·2023년 3월 24일

개인프로젝트: VarGen

목록 보기

10/15

전편 보강

전편에 쓰는 걸 까먹었는데, config 작성하는 게 더 있다.
테일윈드 설정파일 tailwind.config.js에 작성할 때, darkMode라는 속성을 또 따로 써줘야한다. 다크모드를 class로 사용한다는 것!

  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: "class",

전편과 이어서 디자인하는 하는 걸 기록하겠다. 특히 다크모드!

공통 CSS: `bg-primary`

bg-primary라는 레이아웃에 적용할 공통 클래스를 작성할 것이다. 전 편에서 살짝 말했는데 테일윈드의 기본 작성법은 className에 테일윈드의 전문 용어에 해당하는 클래스를 작성해줬지만 재사용, 가독성 해침 등의 이유로 @apply 를 이용하여 공통 CSS를 적용할 수 있다. 봐보자!

.bg-primary {
  @apply bg-slate-50 dark:bg-slate-800 ease-in-out duration-200;
}

이런 식으로 사용하고,

<header className="text-gray-600 body-font md:sticky md:top-0 md:z-50 bg-primary">

이렇게 사용하면 된다. 이제 hN, p 등 테일윈드 용어를 작성해 보면서 디자인해보자. 팁이 하나 있는데 Tailwind Cheet Sheet를 사용하면 간편하게 검색해서 한눈에 볼 수 있다.

푸터는 없어도 헤더는 필요하다. 헤더를 만들어보자.

Layout.tsx

일단 next.js니까 페이지들에 공통 레이아웃을 작성해보자. 물론 페이지를 하나만 만들긴 하지만 index.tsx뿐만 아니라 나중에 페이지 확장도 가능한 상태로 개발하고 싶다. 그래서 공통 레이아웃을 모아주는, 관리하는 컴포넌트 Layout를 만들어 볼 것이다.

간단하다!

export default function Layout({ children }: React.PropsWithChildren<{}>) {
  return (
    <div>
      <div>{children}</div>
    </div>
  );
}

children을 받아주는 컴포넌트를 간단하게 만들어준다.

Header.tsx

헤더는 간단하게 로고 하나로 하고 제목을 쓸 것이다. 나중에 페이지 더 나올 것을 대비하여 자리는 냄겨두었다.

import Image from "next/image";
import rhino from "../../public/Rhino.jpg";
import DarkModeToggleButton from "./DarkModeToggleButton";

export default function Header() {
  return (
    <header className="text-gray-600 body-font">
      <div className="container mx-auto flex flex-wrap p-5 flex-row items-center justify-between">
        <a className="flex items-center justify-center hN">
          <Image
            src={rhino}
            alt="Rhino"
            className="w-10 h-10 rounded-full flex-shrink-0 object-cover object-center hover:brightness-75"
          />
          <span className="ml-3 text-xl">나만의 개발 잡동사니</span>
        </a>
        <div className="flex items-center justify-center md:justify-end">
          <DarkModeToggleButton />
        </div>
      </div>
    </header>
  );
}

헤더를 적었다. 거의 디자인이기에 자세한 기술은 하지 않고, next.js 13버전에선 이미지를 Image 컴포넌트? 기능? 이 따로 있어서 저걸 써줘야한다. 태그 img쓰면 안된다.

합치고 적용

import Header from "./Header";

export default function Layout({ children }: React.PropsWithChildren<{}>) {
  return (
    <div className="bg-primary ">
      <Header />
      <div>{children}</div>
    </div>
  );
}

이렇게 넣고

import PromptInput from "@/components/PromptInput";
import Head from "next/head";
import Layout from "../components/Layout";

export default function Home() {
  return (
    <Layout>
      <Head>
        <title>Vargen</title>
        <meta name="description" content="변수 생성 앱" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <PromptInput />
    </Layout>
  );
}