5단계: 레이아웃 구조와 PostLayout 커스터마이징

레이아웃 구조와 PostLayout 커스터마이징

Pliny의 글 상세 페이지는 layouts/PostLayout.tsx를 통해 구성됩니다.
공통된 메타 정보, 본문, 작가 소개 등을 처리하는 핵심 레이아웃 파일입니다.

5-1. 레이아웃이란?

레이아웃은 콘텐츠를 감싸는 공통 UI 틀입니다. 헤더, 작성일, 태그, 본문, 댓글, 작가 정보 등을 포함합니다.

PostLayout.tsx → 블로그 상세 페이지
ListLayout.tsx → 글 목록 페이지

5-2. PostLayout 주요 구성

import type { Blog } from 'contentlayer/generated'
import { formatDate } from '@/lib/utils'
import Image from 'next/image'
import Tag from '@/components/Tag'
import Link from 'next/link'

export default function PostLayout({ content, authorDetails }: Props) {
  return (
    <article>
      <header>
        <h1>{content.title}</h1>
        <p>{formatDate(content.date)}</p>
        <div>
          {content.tags.map(tag => <Tag key={tag} text={tag} />)}
        </div>
      </header>
      <section className="prose dark:prose-invert">
        {content.body.code && <MDXLayout code={content.body.code} />}
      </section>
      <footer>
        <AuthorCard author={authorDetails} />
      </footer>
    </article>
  )
}

상단: 제목, 날짜, 태그
중간: 본문(MDXLayout)
하단: 작성자 정보(AuthorCard)

5-3. 커스터마이징 예시

제목 스타일 변경

<h1 className="text-4xl font-extrabold text-primary dark:text-white">{title}</h1>

작성일 포맷 변경

<p className="text-sm text-gray-500">{formatDate(date, 'YYYY.MM.DD')}</p>

태그 스타일 개선

<div className="flex flex-wrap gap-2">
  {tags.map(tag => <Tag key={tag} text={tag} />)}
</div>

커버 이미지 추가

{coverImage && (
  <Image
    src={coverImage}
    alt={title}
    width={800}
    height={400}
    className="rounded-lg my-6"
  />
)}

5-4. 관련 유틸 및 컴포넌트

lib/utils.ts → formatDate, getReadingTime
components/Tag.tsx → 태그 UI
components/AuthorCard.tsx → 작성자 정보
components/MDXLayout.tsx → MDX 렌더링 처리

요약

PostLayout.tsx는 글 상세 페이지를 담당하는 핵심 레이아웃입니다.
본문, 날짜, 태그, 작가 정보 등 요소를 포함하며, 커스터마이징이 자유롭습니다.
Tailwind CSS를 이용하여 스타일 및 레이아웃 변경이 쉽습니다.
각 UI 요소는 컴포넌트로 분리되어 재사용성과 유지보수가 높습니다.

심화학습

Q1. PostLayout에 커버 이미지를 optional하게 넣을 때 가장 자연스러운 조건부 렌더링 방식은?

A: coverImage && <Image ... /> 처럼 간단한 조건문을 사용하거나, !!coverImage로 명시적인 truthy 체크가 적절합니다.

Q2. 글 본문 외에 관련 글 목록, 추천 글 등을 추가하고 싶다면 어느 위치에 추가하는 게 UX적으로 좋을까?

A: 본문 아래, AuthorCard 위 또는 최하단에 RelatedPosts 컴포넌트를 삽입하는 방식이 가장 일반적입니다.

Q3. 모든 블로그 포스트에 공통 하단 CTA(Call-to-Action)를 삽입하려면 어떤 구조가 이상적일까?

A: PostLayout의 마지막 <footer> 하단에 CTA 컴포넌트를 조건 없이 삽입하거나, siteMetadata 기반 조건부 렌더링을 통해 일괄 적용이 가능합니다.