프로젝트 배경
1) 예상 리스크 및 대응 계획 - 전국 복수 허브에서 동시에 발생하는 입출고 이벤트를 단일 SSE 채널로 통합·브로드캐스트하는 FastAPI 비동기 아키텍처 설계 필요 - Leaflet 지도 마커와 Recharts 집계 차트가 동일한 허브 선택 상태를 공유하는 크로스 컴포넌트 인터랙션 구조 설계 필요 - TanStack Table 클라이언트 정렬·필터 상태를 유지하면서 SSE 실시간 차량 상태 변경이
프로젝트 성과
Leaflet 지도-KPI 카드 연동 인터랙션 구현
React Context로 지도 허브 마커 클릭 이벤트를 KPI 카드 패널에 전파, 지도와 리스트 UI를 독립 컴포넌트로 분리하면서 상태 동기화 구조 구축
TanStack Table + SSE 실시간 동기화 설계
SSE 이벤트 수신 시 React Query 캐시 직접 업데이트, TanStack Table 정렬·필터 상태를 유지하면서 행 데이터만 갱신하는 최소 리렌더 구조 적용
FastAPI AsyncGenerator SSE 엔드포인트 구현
asyncio 이벤트 루프 기반 이상 감지 Background Task와 SSE 스트림을 연결, 다수 클라이언트 동시 구독 시 브로드캐스트 채널 설계
계정별 허브 접근 범위 RBAC 구조 구축
SQLAlchemy many-to-many 관계로 운영자-허브 접근 범위 관리, FastAPI Depends 체인으로 라우터별 역할+범위 이중 검증 파이프라인 구현
다중 허브 KPI 병렬 패치 구조 설계
React Query useQueries로 허브별 KPI를 병렬 요청, 개별 카드 독립 로딩 상태 표시로 Waterfall 지연 없는 현황판 초기 렌더링 구조 설계
핵심 기능
진행 단계
물류 도메인 모델링 및 ERD 설계
2026.03.
허브·차량·노선·입출고 이벤트 도메인 분석, PostgreSQL 테이블 12개 정의 및 many-to-many 계정 권한 관계 설계
프로젝트 상세
1) 포트폴리오 소개 복수 물류 허브의 입출고 현황, 차량 배차 상태, 재고 적재율을 실시간 모니터링하는 B2B SaaS 관제 대시보드를 React + FastAPI 기반으로 설계·구현. 허브별 KPI 집계, 이상 이벤트 알림, 운영자/뷰어 RBAC 권한 구조, REST API 13개를 포함한 풀스택 웹 애플리케이션을 구현. 2) 작업 범위 - 허브 운영 현황판: 전국 물류 허브의 입출고 처리량, 차







