[Next.js Learn] Assets, Metadata, and CSS(8) - Polishing Layout

지치지 않는 백엔드 개발자 김성주·2023년 6월 5일

목록 보기

41/50

레이아웃 개선하기(Polishing Layout)

지금까지는 CSS Modules와 같은 개념을 설명하기 위해 최소한의 React 및 CSS 코드만 추가했습니다. 데이터 가져오기(data fetching)에 관한 다음 레슨으로 넘어가기 전에 페이지 스타일링과 코드를 개선해 보겠습니다.

`components/layout.module.css` 업데이트하기(Update `components/layout.module.css`)

components/layout.module.css를 열고, 더 세련된 스타일로 레이아웃과 프로필 사진을 다음과 같이 업데이트해 주세요.

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.backToHome {
  margin: 3rem 0 0;
}

`styles/utils.module.css` 만들기 (Create `styles/utils.module.css`)

두 번째로, 여러 컴포넌트에서 재사용할 수 있는 CSS 유틸리티 클래스(텍스트 스타일용) 세트를 생성해 봅시다.

styles/utils.module.css라는 새로운 CSS 파일을 생성하고 다음 내용을 추가하세요.

.heading2Xl {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}

.headingXl {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}

.headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1rem 0;
}

.headingMd {
  font-size: 1.2rem;
  line-height: 1.5;
}

.borderCircle {
  border-radius: 9999px;
}

.colorInherit {
  color: inherit;
}

.padding1px {
  padding-top: 1px;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.listItem {
  margin: 0 0 1.25rem;
}

.lightText {
  color: #666;
}

이러한 유틸리티 클래스를 애플리케이션 전체에서 재사용할 수 있으며, global.css 파일에서도 유틸리티 클래스를 사용할 수 있습니다. 유틸리티 클래스는 CSS 선택자를 작성하는 방법이며, 특정 방법(전역 스타일, CSS 모듈, Sass 등)을 지칭하는 것이 아닙니다. utility-first CSS에 대해 더 알아보세요.

`components/layout.js` 업데이트하기(Update `components/layout.js`)

세 번째로, components/layout.js 파일을 열고 다음 코드로 내용을 대체하세요. Your Name을 실제 이름으로 변경해주세요.

import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';

const name = 'Your Name';
export const siteTitle = 'Next.js Sample Website';

export default function Layout({ children, home }) {
  return (
    <div className={styles.container}>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta
          name="description"
          content="Learn how to build a personal website using Next.js"
        />
        <meta
          property="og:image"
          content={`https://og-image.vercel.app/${encodeURI(
            siteTitle,
          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
        />
        <meta name="og:title" content={siteTitle} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <header className={styles.header}>
        {home ? (
          <>
            <Image
              priority
              src="/images/profile.jpg"
              className={utilStyles.borderCircle}
              height={144}
              width={144}
              alt=""
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
        ) : (
          <>
            <Link href="/">
              <Image
                priority
                src="/images/profile.jpg"
                className={utilStyles.borderCircle}
                height={108}
                width={108}
                alt=""
              />
            </Link>
            <h2 className={utilStyles.headingLg}>
              <Link href="/" className={utilStyles.colorInherit}>
                {name}
              </Link>
            </h2>
          </>
        )}
      </header>
      <main>{children}</main>
      {!home && (
        <div className={styles.backToHome}>
          <Link href="/">← Back to home</Link>
        </div>
      )}
    </div>
  );
}

다음은 새로운 내용입니다:

og:image와 같은 meta 태그는 페이지의 콘텐츠를 설명하는 데 사용됩니다.
Boolean 형식인 home prop은 제목과 이미지의 크기를 조정합니다.
home이 false인 경우 하단에 "홈으로 돌아가기" 링크가 추가됩니다.
next/image를 사용하여 사전로드된 우선순위 속성을 가진 이미지가 추가되었습니다.

`pages/index.js`를 업데이트하세요(Update `pages/index.js`)

마지막으로, 홈페이지를 업데이트해 봅시다.

pages/index.js 파일을 열고 다음 코드로 내용을 대체하세요.

import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';

export default function Home() {
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section className={utilStyles.headingMd}>
        <p>[Your Self Introduction]</p>
        <p>
          (This is a sample website - you’ll be building a site like this on{' '}
          <a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
        </p>
      </section>
    </Layout>
  );
}