Settings Kit

설정 기능 키트. 테마, 언어, 접근성, 알림 설정, 프로필 관리를 포함합니다.

기술 스택

ZustandLocalStorage (persist)TypeScript

기능

  • 테마 스위처 (라이트/다크/시스템)
  • 언어 선택기 (한국어, 영어, 일본어, 중국어)
  • 접근성 설정 (폰트 크기, 고대비, 모션 감소)
  • 알림 설정 (이메일, 푸시, SMS, 마케팅)
  • 개인정보 설정 (프로필 공개, 활동 상태)
  • 설정 내보내기/가져오기 (JSON)
  • 미저장 변경사항 경고
  • 설정 초기화

파일 구조

설치

1. 의존성 설치

2. 코드 복사

아래 코드 탭에서 필요한 파일들을 복사합니다.

3. 다크모드 CSS 추가

코드

사용 예시

접근성

  • 테마 스위처에 aria-pressed로 현재 상태 표시
  • 시스템 테마 선호도 자동 감지 (prefers-color-scheme)
  • 모션 감소 선호도 지원 (prefers-reduced-motion)
  • 폰트 크기 조절로 가독성 향상
  • 고대비 모드로 시인성 향상
  • 설정 변경 시 즉시 적용으로 피드백 제공