[4편] 다크모드 + 레이아웃 환경 구축

📅 4일차: 레이아웃 및 공통 컴포넌트 이식 (뼈대 입히기)

안녕하세요.
오늘은 페이지 본문을 본격적으로 건드리기 전에, 모든 페이지를 감싸는 **레이아웃 ‘틀’**을 먼저 이식하였습니다.
기능 구현보다는 Tailwind v4 환경 정비와 공통 레이아웃/컴포넌트 적용에 집중한 하루였습니다.

---

1️⃣ 오늘 목표

• Tailwind v4 환경 적용 및 오류 대응
• Header / Footer / Sidebar 등 공통 레이아웃 이식
• 공통 UI 적용 및 페이지 레이아웃 정리
• 공지 / Support / Privacy 페이지 UI 개선

---

2️⃣ Step 1 — Tailwind v4 + 다크모드 환경 정비

1) 설치 명령 (공부용 정리)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2) 실제 오류와 해결 포인트

오류 1) PostCSS 플러그인 오류

• 에러 메시지:
  tailwindcss directly as a PostCSS plugin… install @tailwindcss/postcss
• 원인: Tailwind v4부터 PostCSS 플러그인이 tailwindcss가 아닌 @tailwindcss/postcss로 분리
• 해결: postcss.config.js에서 플러그인을 변경

// postcss.config.js (v4 기준)
module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
    autoprefixer: {},
  },
};

오류 2) 전역 @apply 사용 오류

• 에러 메시지:
  Cannot apply unknown utility class m-0
• 원인: Tailwind v4에서는 전역 스타일(@layer base) 안에서 @apply 사용이 제한됨
• 해결: 전역 @apply를 순수 CSS로 변경

@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background: var(--bg);
    color: var(--text-primary);
    transition: color 0.3s ease, background-color 0.3s ease;
  }
}

오류 3) Tailwind 스타일이 적용되지 않음

• 원인: layout.tsx에서 globals.css를 import하지 않으면 스타일이 로드되지 않음
• 해결: layout.tsx 상단에 import 추가

import "./globals.css";

---

3️⃣ Step 2 — 다크모드 적용 (next-themes)

• 다크모드는 next-themes 패키지를 이용하여 구현하였습니다.
• ThemeProvider를 layout.tsx에서 감싸는 구조로 설정하여, Tailwind의 dark: 클래스 기반 UI를 적용할 수 있도록 준비하였습니다.
• 참고: 오늘 설치 명령은 실제 실행하지 않았으나, 프로젝트에서 사용하는 다크모드 구조는 이 방식입니다.

---

4️⃣ Step 3 — 레이아웃 컴포넌트 이식 (components/layout)

• Header / Footer / Sidebar / AuthTopbar 등 공통 컴포넌트를 .tsx로 변환하여 프로젝트에 적용
• 상호작용이 없는 컴포넌트는 Server Component로 유지
• Header는 테마 토글 및 로그인 상태 관리가 있어 "use client" 적용

---

5️⃣ Step 4 — 공통 UI 구성 및 페이지 레이아웃 정리

• 공지 페이지: 아코디언 UI 구현, 한 번에 하나만 펼쳐지도록 상태 관리
• Support 페이지: 기존 문의 폼 제거 → 연락 방법 카드 + FAQ UI 구성
• Privacy 페이지: 2x2 그리드로 레이아웃 개선하여 밀도 조정
• About 페이지: 메인 톤 맞춰 UI 재구성

---

6️⃣ 오늘 핵심 학습 포인트

• Tailwind v4에서는 @tailwindcss/postcss 플러그인 사용 필수
• 전역 @apply는 오류 유발 가능 → 순수 CSS로 전환 필요
• globals.css를 layout.tsx에서 import하지 않으면 Tailwind 적용 불가
• 다크모드는 next-themes + ThemeProvider 구조로 설정
• 상태/테마 관련 훅(useState, useTheme) 사용 시 "use client" 선언 필수
• Server / Client 컴포넌트 구분 중요 → 불필요하게 Client로 만들지 않기

---

7️⃣ 면접 포인트

Q. Tailwind v4 업그레이드 시 주의할 점은 무엇인가요?

• 전역 @apply 제거 및 순수 CSS 사용
• PostCSS 플러그인 교체 필수

Q. Layout을 나눈 이유는 무엇인가요?

• 공통 UI 재사용 및 중복 제거
• Route Group을 활용해 로그인 전/후 UI 분리

Q. Client / Server 컴포넌트 기준은 무엇인가요?

• 상태/이벤트 필요 → Client
• 단순 UI 출력 → Server
• next/link 사용 가능 → Server에서도 문제 없음

---

8️⃣ 마무리

오늘은 UI 뼈대와 Tailwind v4 정비에 집중하였습니다.
Header / Footer와 공통 레이아웃이 안정화되어, 이후 기능 개발 및 인터랙션 구현이 훨씬 수월해졌습니다.

Day 5에서는 본격적으로 기능 로직 분리와 인터랙션 구현으로 넘어갈 예정입니다.