플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - Timeline 항목 클릭 → React Flow fitView 뷰포트 이동 간 비동기 타이밍 문제를 useCallback + useEffect 의존성 관리로 해결할 계획입니다. - SSE 연결 유실 시 수신 이벤트 유실 없이 큐를 보존하고 재연결 후 미반영 이벤트를 REST API 폴백으로 보정하는 복구 로직을 설계할 계획입니다. - React Flow 그래프 노드
프로젝트 성과
Zustand 공유 슬라이스로 3개 뷰 선택 상태 통합 관리
Timeline·Graph·Inspector Panel이 selectedNode 단일 슬라이스를 공유하여 어느 뷰에서 선택해도 나머지 두 뷰가 즉시 동기화됩니다.
지수 백오프 SSE 재연결로 이벤트 스트림 안정성 확보
전역 useSSE 훅에 1→3→10초 지수 백오프 재연결 로직을 구현하여 네트워크 불안정 환경에서도 이벤트 스트림을 안정적으로 유지합니다.
React Flow dagre 레이아웃으로 Attack Path 자동 배치
방향성 있는 공격 경로 그래프를 dagre 알고리즘으로 자동 배치하여 복잡한 Observed/Predicted/Context 노드 관계를 직관적으로 시각화합니다.
심각도별 TailwindCSS 컬러 토큰 시스템 구축
Critical/High/Medium/Low 심각도를 시스템 컬러 토큰으로 정의하여 이벤트 카드·배지·타임라인 도트 등 전체 화면에서 일관된 위협 인식을 제공합니다.
낙관적 UI 갱신으로 SSE 이벤트 즉시 반영
Situation Inbox에 낙관적 UI 갱신을 적용하여 SSE 이벤트 수신 즉시 목록이 갱신되는 반응성을 구현합니다.
핵심 기능
Situation Inbox (보안 이벤트 실시간 목록)
보안 이벤트를 심각도·워크로드·신뢰도·영향도 기준으로 필터링하고 SSE 기반 실시간 갱신으로 최신 상태를 유지합니다
진행 단계
React + TypeScript 프로젝트 구조 및 Zustand 슬라이스 설계
2026.06
라우팅 설계, eventQueue / filters / selectedNode 슬라이스 정의, TailwindCSS 심각도 컬러 토큰 설정
프로젝트 상세
1) 포트폴리오 소개 B2B 클라우드 보안 SaaS의 핵심 관제 화면을 구현합니다. Situation Inbox에서 실시간 보안 이벤트를 관리하고, Attack Path 노드 그래프로 공격 경로를 시각화하며, Timeline 뷰와 Inspector Panel 간 상태 동기화를 통해 보안 분석관이 인시던트를 빠르게 파악하고 대응할 수 있는 프론트엔드 데모입니다. 2) 작업 범위 - Situation I
