File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import { useThemePreference } from '@/app/(protected)/(basic)/_hooks/use-theme-preference';
import styles from './theme-toggle-button.module.scss';
/**
* 헤더 우측 테마 토글 버튼 — 아이콘 3종(모니터/해/달)을 항상 DOM에 전부 렌더하고,
* `theme-toggle-button.module.scss`가 `<html data-theme>` 값에 따라 CSS만으로 하나만 보이게
* 한다. 서버·클라이언트 출력이 항상 동일해 hydration 불일치가 없다 — React state로 아이콘을
* 고르지 않는다.
*
* 이슈: FoxIconButton을 쓰지 못한다 — `label`이 필수라 항상 `aria-label`이 붙고, 그러면
* 테마에 따라 바뀌는 안쪽 글자가 무시돼 스크린리더가 "현재: 라이트"를 읽지 못한다. 대신
* @fox 아이콘 버튼의 마크업 계약(`_fox-icon-button.scss` 상단)을 그대로 따라 같은 스타일을
* 받는다. 헤더의 다른 버튼(HeaderIconButton)과 같은 ghost·md에 시안의 radius만 덮는다.
*/
export function ThemeToggleButton() {
const { cycleThemePreference } = useThemePreference();
return (
<button
type="button"
onClick={cycleThemePreference}
className={`fox-icon-button fox-icon-button--ghost fox-icon-button--md ${styles.button}`}
>
<span className="fox-icon-button__icon" aria-hidden="true">
<span className={`${styles.themeItem} ${styles.icon} ${styles.system}`}>
<i className="fox-ico fox-ico-Monitor" aria-hidden="true" />
</span>
<span className={`${styles.themeItem} ${styles.icon} ${styles.light}`}>
<i className="fox-ico fox-ico-Sun" aria-hidden="true" />
</span>
<span className={`${styles.themeItem} ${styles.icon} ${styles.dark}`}>
<i className="fox-ico fox-ico-Moon" aria-hidden="true" />
</span>
</span>
<span className={`${styles.themeItem} ${styles.srOnly} ${styles.system}`}>
테마 변경 (현재: 시스템 설정)
</span>
<span className={`${styles.themeItem} ${styles.srOnly} ${styles.light}`}>
테마 변경 (현재: 라이트)
</span>
<span className={`${styles.themeItem} ${styles.srOnly} ${styles.dark}`}>
테마 변경 (현재: 다크)
</span>
</button>
);
}