사용자 명령 시작
버튼 클릭 시 TOGGLE_THEME action을 dispatch합니다.
테마 토글 처리 흐름
Header의 버튼은 action만 보내고, reducer는 theme 값을 바꿉니다. 실제 색상 변경은 Provider의 effect가 body 클래스를 갱신한 뒤 CSS 변수가 적용되면서 완성됩니다.
theme 값 계산
이전 theme가 light면 dark, dark면 light를 새 상태로 반환합니다.
effect 실행
theme 변경을 감지해 document.body.className을 갱신합니다.
변수 교체
body 클래스에 맞는 배경, 텍스트, 카드 색상 변수가 선택됩니다.
공통 화면 반영
Header, 프로필, 대시보드가 같은 테마 기준으로 렌더링됩니다.
토글 전
state와 body 클래스가 같은 모드를 가리키는지 확인
토글 후
CSS 변수 기반 요소가 함께 바뀌는지 확인
페이지 이동
Home과 Dashboard가 같은 theme 값을 공유하는지 확인
click버튼
actiontoggle
statetheme
bodyclass
stylevars
테마 토글 처리 점검 reducer 안에서 DOM을 직접 바꾸지 않습니다. reducer는 상태 계산만 하고, DOM 클래스 갱신 같은 부수 효과는 useEffect에서 처리합니다.