INI-ICAM 관리자 콘솔
제로트러스트 통합 접근 관리 플랫폼의 관리자 콘솔을 재구성한 예시 UI입니다. 대시보드·워크플로우 에디터·모니터링·접근 정책 관리 화면을 직접 구현해 데모로 재현했습니다. 좌측 메뉴로 각 화면을 둘러볼 수 있습니다.
재구성한 예시 UI이며, 실제 제품 화면이 아닙니다. 표시된 데이터는 모두 더미 값입니다.
대시보드
AAdmin
위협 이벤트
342▲ 4.2%
전체 24,860건 중
대응 완료
289▲ 12
대응률 84.5%
미처리
18▲ 5
SLA 초과 3건
고위협 사용자
7
격리 2 · 관찰 5
위협 유형 분포
최근 24시간비정상 위치 접근108
반복 인증 실패79
권한 상승 시도63
비정상 API 호출량47
정책 위반 접근25
기타20
대응 상태
총 342건- 대응 완료289(85%)
- 대응 중35(10%)
- 미처리18(5%)
위협 탐지 추이
최근 24시간시스템 상태
정상 5 · 이상 1- 인증 서비스38ms정상
- 정책 엔진51ms정상
- API 게이트웨이182ms지연
- 세션 스토어12ms정상
- 위협 탐지 엔진44ms정상
- 로그·감사 수집27ms정상
최근 위협 이벤트
- 10:21user_0087비정상 위치 접근높음대응 중
- 09:58user_0510반복 인증 실패중간대응 완료
- 09:40user_1789권한 상승 시도높음미대응
- 09:12user_2231비정상 API 호출량낮음대응 완료
상세 기술 스택
관리자 콘솔 프론트엔드에 사용한 기술 구성입니다.
코어
React 18TypeScript 5Vite 6
상태 관리
Zustand (클라이언트)TanStack Query (서버 상태)
라우팅
React Router v7 (Data Router)
UI 시스템
Tailwind CSS 3Radix UIshadcn/ui 패턴lucide-reactFontAwesomeclass-variance-authoritytailwind-merge
플로우 에디터
React Flow (@xyflow/react)elkjs (자동 배치)d3d3-org-chart
차트 / 시각화
EChartsRecharts
코드 에디터
CodeMirror (@uiw)JSON view / lang (정책·YAML 편집)
통신
axiosjwt-decode
유틸
uuiddiffweb-workerresize-observer-polyfill
품질 · 보안 파이프라인
테스트 · 정적분석 · 보안 · 배포 등 개발 도구 체계입니다.
테스트
Vitest 4Testing Libraryjest-axe (접근성)MSW (API 목)axios-mock-adapterv8 커버리지
문서화
Storybook 10 (MSW · a11y 애드온)
정적분석 / 보안
ESLint 9PrettierSonarQube (sonar-scanner)Fortify SASTknip (데드코드)CycloneDX (SBOM)license-checker
스캐폴딩
Plop (feature · screen 템플릿)
배포
Docker (node:22-alpine → nginx-unprivileged 1.30)nginx confJenkinsfiledev:mock (MSW) · dev:single · dev:ha