hunipopol — /resume 인쇄 전용 이력서 페이지 추가

목적

프로젝트: hunipopol (Next.js 16 + Supabase)

포트폴리오 사이트에서 인쇄 가능한 이력서가 필요했다. PDF 파일을 별도로 관리하는 대신, 사이트 데이터(Supabase)를 그대로 가져와서 /resume 페이지에서 Ctrl+P로 바로 출력할 수 있는 방식을 선택했다.

구현 내용

파일 구조

app/resume/
├── layout.tsx              # 네비게이션 없는 resume 전용 레이아웃
├── page.tsx                # 서버 컴포넌트, Supabase에서 모든 데이터 fetch
└── ResumePrintClient.tsx   # 인쇄 최적화 레이아웃 (182줄)

layout.tsx — 네비게이션 제거

루트 레이아웃의 Header와 BottomTabNav가 이력서 페이지에는 불필요하다. app/resume/layout.tsx로 별도 레이아웃을 만들어 네비게이션을 제거했다.

page.tsx — 서버 컴포넌트에서 데이터 통합

about_bio, career_timeline, tech_stack 등 site_settings와 projects, impact 테이블을 서버에서 모두 가져와 ResumePrintClient에 props로 전달.

ResumePrintClient.tsx — 인쇄 최적화 레이아웃

• 섹션 구성: About(이름·소개·기술 스택), Impact(수치화된 성과), Career(경력 타임라인), Projects(프로젝트 목록), Skills
• 인쇄 배려: page-break-inside: avoid, 링크는 괄호로 URL 출력
• 스크린 뷰: 흰 배경 + A4 비율 카드, 인쇄 버튼 노출

// 스크린 전용 컨트롤
<div className="print:hidden">
  <button onClick={() => window.print()}>인쇄 / PDF 저장</button>
</div>

globals.css — print 미디어 쿼리

@media print {
  .resume-root { background: white; }
  @page { margin: 15mm; }
}

결과

항목	내용
신규 파일	4개 (layout, page, ResumePrintClient, globals.css 수정)
데이터 소스	Supabase — site_settings + projects + impact
인쇄 방식	브라우저 Ctrl+P / window.print()
PDF 관리	불필요 (항상 최신 데이터 자동 반영)