복붙 멈춰!: 공통 헤더 컴포넌트로 리팩토링하기

1. 문제: “제목 폰트 좀 키워볼까?”

사이트 디자인을 다듬으면서 페이지 상단의 ‘제목 섹션(Hero Section)’ 디자인을 수정했다. py-16을 py-20으로 늘리고, 폰트도 text-3xl에서 text-4xl로 시원하게 키웠다.

문제는 이 수정 사항을 반영해야 할 페이지가 4개나 된다는 것이었다. (books, notes, blog, tags) 파일 4개를 일일이 열어서 똑같은 줄을 찾아 똑같이 고치다 보니, **“이건 개발자가 할 짓이 아니다”**라는 생각이 들었다. 실수하기 딱 좋은 구조였다.

2. 해결: PageHeader 컴포넌트 탄생

중복을 제거하는 DRY(Don’t Repeat Yourself) 원칙에 따라, 공통된 디자인을 별도 컴포넌트로 분리하기로 했다.

src/components/PageHeader.astro

---
interface Props {
  title: string;
  description: string;
}
const { title, description } = Astro.props;
---
<section class="bg-stone-50 py-20 border-b border-stone-200">
  <h1>{title}</h1>
  <p>{description}</p>
  <slot name="icon" />
</section>

3. 적용: 다이어트 성공

이제 각 페이지의 코드는 이렇게나 간단해졌다.

Before: 20줄이 넘는 복잡한 HTML 코드 After:

<PageHeader 
  title="디지털 서재" 
  description="저의 생각을 확장해 준 책들과 기록입니다.">
  <svg slot="icon">...</svg>
</PageHeader>

4. 결론

이제 제목 디자인을 바꾸고 싶으면 PageHeader.astro 파일 하나만 수정하면 된다. 모든 페이지가 마법처럼 동시에 바뀐다. 코드는 짧아졌고, 유지보수는 쉬워졌으며, 마음은 편안해졌다. 이것이 컴포넌트 기반 개발의 맛이다.