chore: tailwindcss v3 -> v4 마이그레이션 작업

[spde3289]

개요

• [Enhancement] 코드 하이라이팅 서버 렌더링 적용 및 레이아웃 시프트 해결 #45
• 요약 : 블로그 본문 코드 하이라이팅 로직을 서버사이드로 이관하는 과정에서 발견된 스타일링 아키텍처의 한계를 해결하고, 프로젝트의 전반적인 유지보수성을 향상하기 위한 프론트엔드 환경 리팩토링을 진행

작업 이유

• 코드 하이라이팅 로직을 서버사이드로 이관하는 과정에서 본문 스타일링의 구조적 한계를 발견함.
  • 스타일링 설정의 파편화
    • 기존 블로그의 다크모드 대응 및 본문 커스텀 스타일링 코드가 tailwind.config.ts, globals.css, 개별 컴포넌트 레벨에 분산되어 있음.
  • 마크다운 패키지 도입의 필요성
    • 이를 해결하고 본문 스타일링을 규격화하기 위해 마크다운 CSS 패키지 도입을 결정함.
    • 하지만 v3 환경에서 이 작업을 진행할 경우, 여전히 tailwind.config.ts와 CSS 파일 간의 설정 파편화 문제는 근본적으로 해결되지 않음.
• 이를 해결하기 위해 전체 스타일링 시스템을 리팩토링해야 하는 상황이 발생함.
• 따라서 v3 환경에서 작업하기보다는 아래의 이유를 고려해 Tailwind v4 도입을 선제적으로 진행하는 것이 기술적으로 타당하다고 판단함.
  • 설정 파일 단일화: @theme 지시어를 이용한 유틸리티 및 테마 제어 통합
  • 빌드 성능 향상
  • 향후 이중 마이그레이션 방지

작업 내용

• tailwindcss v3 -> v4 마이그레이션
• tailwindcss 유틸 추가 (tailwind-merge, eslint-plugin-tailwindcss, clsx)
• tailwind.config.ts 파일 제거 및 스타일 역할별(예: 폰트, 폰트 스타일 등) 파일 분리
• husky, lint-staged를 이용한 pre-commit 적용
• 패키지 의존성 위험도 제거 작업