File name
Commit message
Commit date
File name
Commit message
Commit date
09-03
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>
);
}