c231d5be65
주요 변경사항: • Clerk 인증 시스템 통합 및 설정 • Supabase 데이터베이스 스키마 설계 및 적용 • JWT 기반 Row Level Security (RLS) 정책 구현 • 기존 Appwrite 인증을 Clerk로 완전 교체 기술적 개선: • 무한 로딩 문제 해결 - Index.tsx 인증 로직 수정 • React root 마운팅 오류 수정 - main.tsx 개선 • CORS 설정 추가 - vite.config.ts 수정 • Sentry 에러 모니터링 통합 추가된 컴포넌트: • AuthGuard: 인증 보호 컴포넌트 • SignIn/SignUp: Clerk 기반 인증 UI • ClerkProvider: Clerk 설정 래퍼 • EnvTest: 개발환경 디버깅 도구 데이터베이스: • user_profiles, transactions, budgets, category_budgets 테이블 • Clerk JWT 토큰 기반 RLS 정책 • 자동 사용자 프로필 생성 및 동기화 Task Master: • Task 11.1, 11.2, 11.4 완료 • 프로젝트 관리 시스템 업데이트 Note: ESLint 정리는 별도 커밋에서 진행 예정 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
12 lines
2.6 KiB
Plaintext
12 lines
2.6 KiB
Plaintext
# Task ID: 15
|
|
# Title: 접근성 및 UX 개선 - WCAG 2.1 AA 등급 달성
|
|
# Status: pending
|
|
# Dependencies: 10, 12
|
|
# Priority: medium
|
|
# Description: ARIA 라벨 추가, 키보드 네비게이션 지원, 색상 대비 개선, 스크린 리더 지원을 통해 WCAG 2.1 AA 등급을 달성하고 포괄적인 사용자 경험을 최적화합니다.
|
|
# Details:
|
|
1. 접근성 기반 구조 분석 및 계획 - axe-core를 사용한 현재 접근성 문제점 자동 스캔, WCAG 2.1 AA 기준 체크리스트 작성, 우선순위별 개선 로드맵 수립 2. 시맨틱 HTML 및 ARIA 구현 - 모든 양식 요소에 적절한 label 및 aria-label 추가, landmark 역할(navigation, main, aside, footer) 설정, aria-describedby를 활용한 에러 메시지 연결, 동적 콘텐츠 변경 시 aria-live 영역 설정 3. 키보드 네비게이션 최적화 - 모든 인터랙티브 요소에 tabindex 설정, focus trap 구현 (모달, 드롭다운), 커스텀 포커스 표시기 디자인, 키보드 단축키 구현 (Esc로 모달 닫기, Enter로 버튼 활성화) 4. 색상 대비 및 시각 접근성 개선 - WCAG AA 기준 4.5:1 색상 대비율 달성, 색상에만 의존하지 않는 정보 전달 방식 구현, 고대비 모드 옵션 추가, 텍스트 크기 조절 기능 구현 5. 스크린 리더 최적화 - alt 텍스트 추가 및 개선, 표 구조에 th, caption, scope 속성 추가, 복잡한 차트에 대한 대체 텍스트 설명 제공, aria-expanded, aria-selected 등 상태 속성 설정 6. 모바일 접근성 강화 - 터치 대상 최소 크기 44px 이상 보장, 손가락 제스처 대안 제공, 화면 회전 지원, 모바일 스크린 리더 호환성 테스트 7. 접근성 테스트 도구 통합 - Jest axe 테스트 자동화, Pa11y CI 파이프라인 통합, Lighthouse 접근성 점수 90점 이상 목표 8. 사용자 맞춤 설정 - 텍스트 크기, 색상 테마, 애니메이션 감소 옵션, 사용자 선택사항 localStorage 저장
|
|
|
|
# Test Strategy:
|
|
접근성 자동화 테스트 도구(axe-core, Pa11y)를 통한 WCAG 2.1 AA 기준 100% 준수 확인, 실제 스크린 리더(NVDA, JAWS, VoiceOver) 사용한 수동 테스트, 키보드만으로 모든 기능 접근 가능성 검증, 색맹 시뮬레이터를 통한 색상 대비 테스트, 터치스크린 환경에서 44px 최소 터치 영역 확인, Lighthouse 접근성 점수 90점 이상 달성, 다양한 브라우저 및 보조 기술 호환성 테스트, 실제 시각 장애인 사용자 테스트 진행, 페이지 로딩 시간 3초 이내 유지하면서 접근성 기능 정상 작동 확인, 고대비 모드 및 확대 기능 정상 작동 테스트
|