slice
협업오늘 할 일을 작은 단위(Slice)로 나눠 관리하며, 여러 목표의 진행 상태를 대시보드에서 한눈에 확인할 수 있는 Todo 서비스
• 대시보드 화면 구성 및 상태 기반 데이터 노출 구현 • 목표 진행 상태에 따른 정보 구조 및 UX 설계
1. 아키텍처 • TanStack Query를 활용해 서버 상태 중심의 상태 관리 구조 구성 • 캐시 기반 갱신으로 데이터 변경 시 UI가 즉시 반영되는 흐름 구축 • 대시보드와 목표 상세 페이지 간 데이터 일관성 유지 • useSuspenseQuery와 react-error-boundary를 적용해 로딩과 에러 처리를 공통 레이어에서 관리하는 구조로 구성 2. 핵심 기능 • 목표 상세 페이지에서 목표 조회·수정·삭제 기능 구현 • 사용자가 목표 상태를 직접 관리할 수 있는 핵심 플로우 담당 영역 구현 3. 데이터 관리 • 대시보드 / 목표 상세 페이지에 데이터 패칭 구조 적용 • 화면별로 동일한 데이터를 단일 데이터 소스 기준으로 공유하도록 구성 • 목표 목록이 2개 이상일 때 무한 스크롤 방식으로 로딩되도록 구현해 초기 로딩 부담 감소 및 탐색 UX 개선 • useSuspenseQuery로 데이터 패칭을 처리하고, 로딩 상태는 Suspense로 위임해 컴포넌트 단위 로직 단순화 • react-error-boundary를 통해 패칭 에러를 공통 에러 UI로 처리해 화면별 예외 처리 중복 제거 4. 시각화 (대시보드 & 목표 상세) • 서비스 진입 시 전체 진행 흐름을 빠르게 파악할 수 있도록 구성해 인지 부담 감소 4-1. 대시보드 개발 ▪ 최근 할 일과 전체 진행 상황을 한 화면에서 확인할 수 있도록 대시보드 화면 구성을 설계 ▪ 진행 중 / 완료 상태별 목표 카드 분류 및 시각화 4-2. 목표 상세 페이지 ▪ 목표 정보와 목표별 할 일 진행률을 한 화면에서 확인할 수 있도록 목표상세 화면 구성을 설계 ▪ 진행 중 / 완료 상태로 할일 목록 카드 분류 및 시각화 5. 배포 및 운영 • Vercel을 통한 서비스 배포 • GitHub 이슈 관리 및 PR 머지 흐름을 활용한 팀 협업 경