Application Workflow: 인증, 로딩, 대시보드 흐름

[sgoldenbird]

1. 인증 흐름 (Authentication Flow)

authGuardLoader를 통한 접근 제어

사용자의 로그인 상태에 따라 페이지 접근을 제어합니다.
로그인하지 않은 사용자가 보호된 경로(예: 대시보드)에 접근하면 로그인 페이지로 리디렉션되고,
반대로 로그인한 사용자가 인증 페이지만 접근하려 하면 대시보드 목록으로 이동시킵니다.

명확한 페이지 분리

랜딩 페이지, 로그인/회원가입 페이지, 대시보드 레이아웃을 명확히 분리하여
사용자가 현재 어떤 흐름에 있는지 쉽게 인지할 수 있도록 설계했습니다.

---

2. 데이터 로딩 및 에러 처리 흐름

loader를 활용한 데이터 사전 로딩

React Router의 loader 기능을 활용하여 페이지가 렌더링되기 전에 필요한 데이터를 미리 불러옵니다.
이를 통해 초기 로딩 시간을 줄이고 사용자 경험을 개선합니다.

중앙화된 에러 처리

GlobalErrorBoundary와 ApiErrorBoundary를 적용하여 에러가 발생해도 앱 전체가 중단되지 않도록 방지하고,
사용자에게 일관된 에러 메시지를 제공합니다.

네트워크 깜빡임 방지

로딩 시간이 1초 이상인 경우에만 로딩 UI(SplashScreen, PendingUI)를 노출하여,
빠른 네트워크 환경에서는 불필요한 화면 전환을 방지합니다.

---

3. 대시보드 및 작업 관리 흐름

직관적인 대시보드 생성 및 이동

"내 대시보드" 페이지에서 모달을 통해 새 대시보드를 생성하면,
곧바로 생성된 대시보드 상세 페이지로 이동시켜 사용자 행동 흐름이 자연스럽게 이어지도록 합니다.

모달을 통한 컨텍스트 유지

할 일 생성, 컬럼 관리, 멤버 초대 등 주요 작업은 모두 모달(Dialog)로 처리하여
현재 페이지의 컨텍스트를 유지한 채 작업할 수 있게 하고, 사용자 흐름이 끊기지 않도록 설계했습니다.

액션 함수를 통한 데이터 변경 처리

React Router의 action 함수를 사용해 데이터 생성, 수정, 삭제 작업을 처리합니다.
데이터 변경 이후 UI는 자동으로 갱신되어, 사용자에게 즉각적인 피드백을 제공합니다.