프로젝트 배경
1) 예상 리스크 및 대응 계획 - 전사 Attack Map에서 수십 개 테넌트·수백 개 자산 노드가 렌더될 때 React Flow 성능을 유지하기 위해 뷰포트 기반 노드 가시성 컬링을 적용할 계획입니다. - 히스토리 쿼리 날짜 범위 변경 시 여러 차트가 동시에 갱신될 때 레이아웃 시프트 없이 로딩 상태를 관리하는 스켈레톤 전환 전략을 설계할 계획입니다. - SSE 스트림과 날짜 범위 폴링이 동시에 동작
프로젝트 성과
멀티 테넌트 집계 상태를 Zustand 중앙 슬라이스로 통합 관리
tenantSummary 슬라이스가 대시보드·Attack Map·어드민의 단일 진실 출처가 되어 테넌트 전환 시 전체 화면이 일관되게 갱신됩니다.
React Flow 히트맵 오버레이로 전사 공격 밀집 패턴 시각화
공격 빈도 기반 노드 크기 동적 조정과 CSS 레이디얼 그라데이션 오버레이로 어느 자산이 가장 많이 공격받는지 한눈에 파악합니다.
Raycast 시드 팔레트로 옵시디언 관제 콘솔 구현
Raycast 시드 팔레트를 충실히 구현하여 보안 관제 야간 환경에 최적화된 obsidian 무드 UI를 제공합니다.
Recharts 스택 바 + 도넛 차트 복합 분석 레이아웃 구현
기간별 테넌트 이벤트 추이(스택 바)와 위협 유형 분포(도넛)를 한 화면에서 분석하고 도넛 클릭으로 하단 리스트를 드릴다운합니다.
슬라이드 패널 인라인 편집으로 테넌트 권한 설정 UX 구현
페이지 전환 없이 우측 슬라이드 패널에서 테넌트 접근 범위와 모듈 권한을 즉시 편집하여 어드민 운영 효율을 높입니다.
핵심 기능
진행 단계
상단 내비게이션 + 테넌트 컨텍스트 스위처 + 전역 SSE 훅 구현
2026.06
topbar-analytics 레이아웃 구조, 테넌트 드롭다운 스위처, 전역 useSSE 훅 + Zustand tenantSummary 슬라이스 초기화
프로젝트 상세
1) 포트폴리오 소개 멀티 테넌트 보안 SaaS의 확장 관제 플랫폼을 구현합니다. 전체 고객사의 위협 인텔리전스 개요 대시보드, 전사 Attack Map 히트맵, 멀티 테넌트 어드민, 기간별 이벤트 히스토리 분석으로 보안 운영팀이 여러 고객사의 위협을 통합 관리하는 옵시디언 관제 콘솔 데모입니다. 2) 작업 범위 - 위협 인텔리전스: 전체 테넌트의 보안 현황을 실시간 집계하여 이벤트 추이 차트, 심각







