피드로 돌아가기
Dev.toFrontend
원문 읽기
Flutter WebでNotionを超えるガントチャート・タイムライン機能を実装した
Supabase Edge Function과 Flutter Web 기반의 Critical Path 분석 가능 Gantt Chart 구현
AI 요약
Context
다양한 SaaS 기능을 통합하는 AI 라이프 매니지먼트 앱 개발 과정에서 Notion의 Timeline View와 유사한 고기능성 Gantt Chart 구현 필요성 제기. DB 스키마 확장 최소화와 빠른 기능 배포라는 제약 조건 하에 효율적인 데이터 모델링과 렌더링 전략 요구.
Technical Solution
- 기존 app_analytics 테이블의 JSONB 메타데이터 필드를 활용하여 별도의 테이블 생성 없이 Gantt 데이터를 관리하는 스키마 최적화 설계
- Supabase Edge Function 내에 종료 날짜 기준 내림차순 정렬 로직을 구현하여 최장 경로를 식별하는 Critical Path 분석 기능 구축
- Flutter의 LinearProgressIndicator와 ClipRRect를 조합하여 상태별 색상 제어가 가능한 가변 길이의 Gantt Bar UI 구현
- supabase.functions.invoke()의 dynamic 반환 타입을 Map<String, dynamic>으로 명시적 캐스팅하여 flutter analyze의 avoid_dynamic_calls 린트 에러 해결 및 Type Safety 확보
- Project, Timeline, Critical Path의 3개 탭 구조로 관심사를 분리하여 복잡한 프로젝트 데이터를 효율적으로 탐색하는 UX 설계
실천 포인트
1. 신규 기능 추가 시 기존 JSONB 필드를 활용해 DB 스키마 변경 비용을 줄이고 유연성을 확보했는가?
2. 외부 API 및 Edge Function의 dynamic 반환값에 대해 명시적 타입 캐스팅을 수행하여 런타임 에러를 방지하고 있는가?
3. 단순 데이터 시각화를 넘어 Critical Path 분석과 같은 비즈니스 로직을 서버 사이드(Edge Function)에서 처리하여 클라이언트 부하를 줄였는가?