Loading Status 로딩 상태 관리

[sgoldenbird]

🌀 로딩 상태 관리 가이드라인

사용자 경험을 고려하여 로딩 상태를 상황별로 분리하여 관리합니다.
각 상황에 맞는 로딩 UI를 명확히 정의하여 일관된 UX와 유지보수 용이성을 확보하고자 합니다.

✅ 정리 표

구분	사용 시점	적용 범위	제어 위치
Splash Screen	앱 최초 진입	전체 앱	App.jsx
Pending UI	페이지 전환	전체 앱	Root.jsx
Loading Spinner	컴포넌트 데이터 로딩(데이터 응답 느릴 때)	컴포넌트 단위	각 컴포넌트 내부

---

1️⃣ Splash Screen

• 사용 목적: 앱 최초 진입 시, 초기 렌더링이 완료되기 전까지 사용자에게 대기 상태를 안내
• 사용 위치: App.jsx 내 전역 처리 (앱 진입 시 단 1회만 실행)
• 구현 기준: router.state.navigation.state === 'idle'일 때까지 Splash 유지
• 디자인: 띄가 없는 로고 별이 굴러오다가 띄가 있는 완성된 로고 별이 되어 pulse

splash.mp4

---

2️⃣ Pending UI

• 사용 목적: 페이지 전환 시 라우터 이동 상태를 시각적으로 표현
• 사용 위치: Root.jsx 내 전역 처리
• 구현 기준: useNavigation().state !== 'idle'일 경우 PendingUI를 보여줌
• 디자인: 전체 화면 덮는 반짝이는 배경 로고 스타일 별들과 가운데 회전하는 큰 별
• 비고: 화면 깜빡임을 줄이고 명확한 전환 상태 전달 목적

pendingui.mp4

---

3️⃣ Loading Spinner

• 사용 목적: 컴포넌트 단위의 API 요청 혹은 비동기 작업 중 상태 표시
• 사용 위치: 모달, 캐러셀, 탭 목록 등 개별 컴포넌트 내부
• 구현 기준: 각 컴포넌트 내부에서 isLoading 상태로 제어
• 디자인: loading 필기체 gif
• 비고: Skeleton UI 대신 스피너를 선택한 이유는 디자인 통일성과 사용성 고려

---