이랑이 a7cb728602 feat(dashboard): SIEM log + escalations + office collaboration lines
B - SIEM 로그 + 경보:
- backend/rails: GET /api/rails/transitions (filter by pipelineId, eventType)
- backend/rails: GET /api/rails/escalations (filter by resolved)
- frontend/app/rails/log/page.tsx — 결정론적 이벤트 스트림
    필터: pipelineId / eventType / 초기화
    timestamp / event badge / pipeline pill / state transition / 클릭 → 필터링
    이벤트 타입별 색상 (REQUEST_CHANGES=주황, ERROR=빨강, 등)
- frontend/app/rails/escalations/page.tsx — 경보 카드 뷰
    탭: 전체 / 미해결 / 해결됨
    카드: reason, category 태그, attempts, stage, 시간
    context snapshot 펼침 (JSON pretty)
- sidebar: 로그 / 경보 메뉴 추가

C - Office collaboration lines:
- OfficeFloor 의 4자매 책상 위에 SVG overlay
- harang→narang→narang→darang→darang→erang 흐름선
- active stage 가 있으면 점선 애니메이션 (flowDash keyframe)
- 비활성 시 흐릿한 정적 점선
- 화살표 마커로 방향 표시
2026-04-10 18:28:07 +09:00
2026-04-05 15:37:44 +09:00
2026-04-10 17:42:15 +09:00
2026-04-05 16:27:37 +09:00

하나랑 대시보드

4자매 멀티에이전트 파이프라인 관제 대시보드. 자기야가 한눈에 전체 현황, 프로젝트 흐름, QA 상태, 배포 상태를 파악하고 관리하는 화면.

기술 스택

  • Frontend: Next.js 16 + styled-components
  • Backend: Nest.js + Prisma
  • DB: MariaDB
  • Realtime: Socket.IO
  • FE: https://hanarang.nabomhalang.co.kr
  • BE: https://hanarang-api.nabomhalang.co.kr

표준 저장소 구조

hanarang-dashboard/
├── ARCHITECTURE.md
├── README.md
├── .plans/
│   ├── OVERVIEW.md
│   ├── design/
│   ├── sprints/
│   ├── hotfix/
│   ├── qa/
│   └── deploy/
├── docs/
│   ├── product-specs/
│   ├── references/
│   ├── tech-debt-tracker.md
│   └── QUALITY_SCORE.md
├── frontend/
└── backend/

작업 파이프라인

  1. 하랑이 문서 작성 및 선 push
  2. 나랑이 구현 branch 작업
  3. 다랑이 QA + .plans/qa/ 결과 문서 push
  4. 하랑이 QA 확인 후 main merge
  5. 이랑이 최신 main pull + 재배포

main은 항상 배포 가능 상태를 유지해.

실행 방법

사전 준비

  1. 루트 .env.example 참고
  2. backend/.env 작성
  3. SSH_KEY_PATH 설정

Backend

cd backend
npm install
npx prisma migrate dev
npx prisma db seed
npm run dev

Frontend

cd frontend
npm install
npm run dev

참고 문서

  • 아키텍처: ARCHITECTURE.md
  • 실행 문서: .plans/OVERVIEW.md
  • 구조 기준: docs/references/repo-structure.md
  • 프로젝트 IA: docs/product-specs/project-information-architecture.md
Description
하나랑 대시보드 — 4자매 멀티에이전트 관제 대시보드
Readme 2.7 MiB
Languages
TypeScript 82.1%
HTML 17.7%
JavaScript 0.2%