master-project

CHAPTER 22 / 50

읽기 약 2분

FUNCTION

다크 모드 + 반응형 완성

핵심 개념

next-themes + 시스템 동기화 + breakpoint 일관성 + 모바일 375px·태블릿 768px·데스크톱 1440px 최종 점검.

본문

next-themes 적용

TSX📋 코드 (8줄)

// src/app/layout.tsx
<html lang="ko" suppressHydrationWarning>
  <body>
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
      {children}
    </ThemeProvider>
  </body>
</html>

ThemeToggle (3개 옵션)

TSX📋 코드 (21줄)

// src/components/theme-toggle.tsx
'use client'
import { useTheme } from 'next-themes'
import { Sun, Moon, Monitor } from 'lucide-react'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        {theme === 'dark' ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem onClick={() => setTheme('light')}><Sun className="h-4 w-4 mr-2" /> 라이트</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme('dark')}><Moon className="h-4 w-4 mr-2" /> 다크</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme('system')}><Monitor className="h-4 w-4 mr-2" /> 시스템</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

다크모드 디자인 점검

📋 코드 (12줄)

[모든 컴포넌트 점검]
✓ 카드 배경: bg-card (CSS 변수)
✓ 보더: border-border
✓ 텍스트: text-foreground / text-muted-foreground
✓ 버튼: bg-primary text-primary-foreground
✓ 차트 색상: hsl(var(--primary))
✓ 이미지: 다크모드 시 대비 (필터)

[안티패턴]
❌ bg-white  → bg-card
❌ text-gray-500 → text-muted-foreground
❌ border-gray-200 → border-border

반응형 Breakpoints

CSS📋 코드 (10줄)

sm: 640px   /* 모바일 가로 */
md: 768px   /* 태블릿 */
lg: 1024px  /* 데스크톱 */
xl: 1280px
2xl: 1536px

/* Mobile-first */
.text-base md:text-lg lg:text-xl
.grid-cols-1 md:grid-cols-2 lg:grid-cols-4
.hidden md:block

체크리스트 — 모바일 (375px)

📋 코드 (7줄)

✓ 헤더 햄버거 → 사이드바 Sheet
✓ 카드 1열
✓ 폰트 14px 기본
✓ 버튼 터치 영역 44x44px 이상
✓ 모달 화면 가득 (full-screen)
✓ 텍스트 truncate (긴 제목)
✓ 가로 스크롤 0 (overflow-x-hidden)

체크리스트 — 태블릿 (768px)

📋 코드 (3줄)

✓ 사이드바 표시 (240px)
✓ 카드 2열
✓ 모달 중앙 (max-w-md)

체크리스트 — 데스크톱 (1440px)

📋 코드 (4줄)

✓ 컨텐츠 max-w 1280px (가운데 정렬)
✓ 카드 3-4열
✓ 폰트 16px 본문
✓ 사이드 광고 영역 (1440px+)

테스트 도구

BASH📋 코드 (9줄)

# Chrome DevTools
F12 → Toggle device toolbar
- iPhone 13 Pro: 390x844
- iPad: 768x1024
- Desktop: 1440x900

# 실기기 테스트
- ngrok · Vercel preview URL
- Safari·Chrome·Firefox·Edge 4종

미디어 쿼리 vs Tailwind

TSX📋 코드 (9줄)

// ✅ Tailwind (권장)
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

// ❌ CSS 직접 (구식)
<div style={{ display: 'grid' }} className="responsive-grid">
<style>{`
  .responsive-grid { grid-template-columns: 1fr; }
  @media (min-width: 768px) { .responsive-grid { grid-template-columns: repeat(2, 1fr); } }
`}</style>

다크모드 SSR Flicker 방지

TSX📋 코드 (6줄)

// suppressHydrationWarning 필수
<html lang="ko" suppressHydrationWarning>
  <body>
    <ThemeProvider disableTransitionOnChange>...</ThemeProvider>
  </body>
</html>

다음 챕터

CH.23 "에러/로딩/빈 상태 UI".

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

내 마스터 프로젝트의 다크모드·반응형 부분을 분석해서
실전 적용 + 개선 우선순위 3가지를 알려줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

다크모드·반응형 관련 모범 사례·안티패턴 5개를
비교 분석해서 실전 적용를 위한 추천 방안을 알려줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

내 프로젝트 전체에서 다크모드·반응형
최적화 가능 위치와 리스크를 보고해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 한국 1인 개발자 시장의
다크모드·반응형 트렌드와 차별화 포인트를 정리해줘.

⭐ 이것만 기억하세요

다크 모드 + 반응형 완성은 이 3가지만 확실히 잡으세요

1.next-themes + system 동기화 = 표준

2.Mobile-first + breakpoint sm/md/lg 일관 적용

3.다음 챕터에서 에러·로딩·빈 상태

💬 이 챕터 질문 보기

MASTER-PROJECT · CH.22 — 질문하거나 답변을 확인하세요

→

진행도 22 / 50

← 커리큘럼으로 ← 목록으로 (master-project)