Skip to content

fix: 전역 다크모드 canvas 및 테마 상태 동기화 - #773

Draft
bottlenote-app[bot] wants to merge 1 commit into
mainfrom
fix/307-global-dark-theme
Draft

fix: 전역 다크모드 canvas 및 테마 상태 동기화#773
bottlenote-app[bot] wants to merge 1 commit into
mainfrom
fix/307-global-dark-theme

Conversation

@bottlenote-app

Copy link
Copy Markdown
Contributor

관련 이슈 (Related Issue)

PR 타입 (Type of Change)

  • 🐛 fix: 버그 수정
  • 💄 style: UI/스타일 변경
  • 📝 docs: 문서 수정
  • 🧪 test: 테스트 추가/수정

변경 사항 (Changes)

  • <html> pre-hydration script에서 저장된/시스템 테마를 해석하고 dark class 및 color-scheme을 적용했습니다.
  • ThemeProvider가 <body> 하위 wrapper가 아닌 document.documentElement를 동기화하도록 변경하고, 시스템/라이트/다크 preference를 지원합니다.
  • body·root·primary layout 및 legacy 색상 utility를 semantic canvas/surface token으로 연결해 기존 페이지의 light-only 배경이 dark canvas에 맞게 전환되도록 했습니다.
  • 설정의 단일 다크 토글을 시스템 설정/라이트/다크 선택 BottomSheet로 바꾸고, BottomSheet의 dialog title/description 접근성 정보를 보완했습니다.
  • 다크 테마를 유지해야 하는 위스키 타로 시각 요소는 명시적인 light-surface 예외로 분리했습니다.

변경 이유 (Reason for Changes)

  • 기존에는 테마 class가 hydration 후 <body> 하위에만 적용되고 primary layout이 bg-white를 강제하여 /explore, /announcement 등에서 흰 canvas가 남았습니다.

스크린샷 (Screenshots)

Before After
다크 선택 후에도 일부 primary/page canvas가 흰색으로 유지 로컬 Playwright(모바일 viewport)에서 Settings 선택 BottomSheet와 /settings, /explore, /announcement의 dark canvas 전환 확인. preview 배포 대기

테스트 방법 (Test Procedure)

  1. pnpm test --runInBand --silent — 42 suites, 241 tests 통과
  2. pnpm lint — 통과 (기존 경고만 존재)
  3. pnpm build:dev — 더미 API endpoint 환경에서 컴파일·타입검사·정적 생성 통과
  4. 로컬 Playwright에서 Settings → 화면 모드 → 다크 모드를 선택하고 <html>.dark, color-scheme: dark, canvas 배경을 확인
  5. /explore, /announcement에서 기존 bg-white 요소의 computed background가 white가 아닌 semantic dark surface/canvas인지 확인

셀프 체크리스트 (Self Checklist)

  • 로컬에서 정상 동작 확인
  • pnpm lint 통과
  • 불필요한 console.log 제거
  • 반응형/모바일 대응 확인 (UI 변경 시)

참고 사항 (Additional Information)

  • pr-preview 라벨을 추가하여 preview 배포를 요청합니다.
  • 로컬 비인증 환경에서는 /api/auth/session 401이 발생하므로, 인증 데이터가 필요한 화면의 콘텐츠 검증은 preview에서 별도로 확인합니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Product/FE] 프로덕트 화면 다크모드 지원

0 participants