[FIX] BlogHeader 반응형 레이아웃 너비 일치 개선

[scs0209]

문제 설명

BlogHeader와 본문 영역(PostPage)의 너비가 일치하지 않아 시각적 일관성이 떨어지는 문제

재현 방법

1. 블로그 포스트 페이지 접속
2. 데스크톱 및 모바일 화면에서 확인
3. 헤더와 본문 영역의 너비가 다름을 확인

해결 방법

데스크톱 헤더 수정

// src/widgets/post/ui/BlogHeader.tsx
className='hidden lg:flex items-center justify-between mb-8 p-4 rounded-xl bg-black/20 backdrop-blur-md border border-blue-400/20 shadow-2xl shadow-blue-500/10 h-16 max-w-3xl mx-auto'

모바일 헤더 수정

// src/widgets/post/ui/BlogHeader.tsx
<div className='block lg:hidden max-w-3xl mx-auto'>

기술 스펙

• 적용된 클래스: max-w-3xl mx-auto
• 영향 범위: 데스크톱/모바일 모든 화면
• 최대 너비: 768px (Tailwind CSS max-w-3xl)

완료 기준

• ✅ 데스크톱에서 헤더와 본문 너비 일치
• ✅ 모바일에서 헤더와 본문 너비 일치
• ✅ 모든 반응형 화면에서 중앙 정렬
• ✅ 시각적 일관성 확보

관련 파일

• src/widgets/post/ui/BlogHeader.tsx
• app/(public)/blog/(posts)/category/[slug]/post/[postSlug]/page.tsx

결과

모든 화면 크기에서 BlogHeader와 본문 영역이 완벽하게 정렬되어 일관된 레이아웃 제공