Loader

페이지 데이터 로딩 인디케이터 — #1 회전 arc (확정). 전체 화면 딤 오버레이(rgba(0,0,0,.5) + backdrop-filter: blur(2px)) 위에 중앙 정렬. 색 #4F3FEC(--color-point).

확정 모션 (#1 회전 arc) 크기 64px 기준 · 오버레이에선 80px
.loader (64px · 브랜드컬러)
개발 파트 사용법 (HTML 수정 불필요) 전역 함수 두 개 — showLoader() / hideLoader(). 첫 호출 시 오버레이가 <body>에 자동 마운트되므로 페이지 HTML/템플릿 수정 없음. 
// 로딩 시작
showLoader();

// 요청 종료(성공/실패 모두)에서 짝 맞춰 hide
fetch('/api/items')
  .then(...)
  .finally(hideLoader);

// 강제 리셋(예외 상황 · 페이지 이탈)
hideLoader(true);
동작 세부 · 계수 기반
  • 계수 기반 — showLoader() 호출마다 카운트 +1, hideLoader()는 -1. 카운트가 0 이 될 때만 실제로 닫힘 → 동시에 여러 요청이 로딩을 요구해도 마지막 요청 완료 시점에만 사라짐.
  • 짝 맞추기 실수 방지 — 요청이 실패해도 반드시 hide 되도록 .finally(hideLoader) 또는 try/finally 사용 권장.
  • 강제 리셋 — hideLoader(true)는 카운트를 0 으로 초기화하고 즉시 닫음(라우팅 이탈·에러 바운더리에서 사용).
  • 사용자 상호작용 차단 — 오버레이가 position: fixed; inset: 0으로 전체를 덮어 로딩 중 클릭을 막음(닫기 UI 없음 = 의도적).
  • 접근성 — 오버레이에 role="status" + aria-live="polite" + aria-label="로딩 중" 자동 부여.
적용 범위 가이드 (개발 파트 참고) 아래 상황에 showLoader() 호출 → 응답 후 hideLoader().

✅ 사용 O

  • 페이지 최초 진입 시 데이터 fetch (라우팅 · 초기 조회)
  • 목록 검색/필터 변경 → 재조회
  • 페이지네이션 이동
  • 저장 · 삭제 · 상태변경 후 재조회
  • 모달 안 데이터 로드(대용량이거나 눈에 띄게 지연되는 경우)
  • 엑셀 다운로드 · 파일 요청 등 서버 처리 대기 액션

❌ 사용 X

  • 버튼 클릭 후 즉시 응답이 오는 짧은 액션(체감 200ms 미만) — 오히려 깜빡거려서 UX 저하
  • 단순 UI 상태 토글(모달 열기/닫기, 탭 전환 등 데이터 요청 아님)
  • 버튼 내부의 마이크로 로딩(예: 저장 버튼 안 스피너) — 별도 컴포넌트가 필요하면 요청 요망