🏢 Agent Core — 오피스 대시보드

요구사항 한 줄이 총괄 에이전트를 거쳐 여러 전문 에이전트에게 쪼개지는 순간을 2D 사무실로 보여주는 FE

STATE · ADR · 공개 데모 BE

---

📸 스크린샷

분배 — 총괄이 나눈 작업이 그대로 보인다	사원 — 담당자별 지금 하는 일 + 메모리

두 스크린샷 모두 agent-core-demo(mock 백엔드)로 찍었다 — 실제 내부 데이터는 하나도 없다.

✨ 핵심 아이디어 — 백엔드가 어디 있는지 이 코드는 모른다

모든 API 호출이 js/core/api.js에서 /api/... 상대 경로로만 나간다(ADR-002). 그래서 어떤 백엔드가 같은 도메인에서 그 경로에 응답하기만 하면 이 저장소는 그대로 동작한다.

어디서 쓰이나	백엔드	연결 방식
실제 제품(비공개)	진짜 Agent Core(Spring Boot)	이 저장소를 resources/static/에 복사 — 같은 서버가 서빙
공개 데모	agent-core-demo(목업)	Vercel vercel.json rewrite로 /api/* 프록시

즉 이 저장소는 "공개용으로 따로 만든 FE"가 아니라 제품 FE 그 자체다. 왜 포크하지 않고 공유하기로 했는지는 ADR-001 참고.

🖥 주요 화면

파일	설명	공개 데모 지원
office.html	2D 오피스 — 커맨드 센터에서 지시를 내리고 배분을 본다	✅
dashboard.html, graph.html, timeline.html	큐/그래프/타임라인 대시보드	❌ 실제 배포에서만
issues.html, organizations.html, projects.html	이슈·조직·프로젝트 관리	❌ 실제 배포에서만
voice.html, login.html, register.html	음성 인박스, 인증	❌ 실제 배포에서만

🛠 기술 스택

분류	기술
렌더링	Phaser 3.80.1 (2D 캔버스, vendor/에 벤더링, MIT)
나머지	순수 JS(ES modules) + 정적 HTML — 프레임워크·빌드 스텝 없음

🚀 시작하기

로컬에서 보기

정적 파일이라 별도 빌드가 없다.

npx serve .

단, /api/*에 응답하는 백엔드가 없으면 데이터가 안 뜬다 — 로컬에서 실제로 보려면 진짜 백엔드를 같은 포트/프록시로 띄우거나, agent-core-demo를 vercel dev로 같이 띄운다.

Vercel 배포

vercel --prod

vercel.json의 rewrite 대상(agent-core-demo의 실제 배포 도메인)이 기본값과 다르면 그 값으로 바꾼다.

📁 프로젝트 구조

agent-core-fe
├── index.html          office.html로 리다이렉트 (데모 진입점)
├── office.html          2D 오피스 — 이 저장소의 핵심 화면
├── dashboard.html, graph.html, timeline.html, issues.html, ...
├── js/
│   ├── core/            api.js(백엔드 통신 유일 지점), poller.js(공통 폴링)
│   ├── office/           office-scene.js(Phaser), office-panel.js(DOM), office-format.js
│   ├── graph/, timeline/, voice/
├── css/app.css
├── vendor/phaser.min.js
├── docs/screenshots/     README용 스크린샷 (전부 데모 데이터)
├── vercel.json           /api/* → agent-core-demo rewrite
├── STATE.md              클라이언트 상태 구조 (ERD 대응물)
└── ADR/                  설계 결정 2건

상태가 어떻게 흐르는지(API 응답 → OfficePanel/OfficeScene → DOM/캔버스)는 STATE.md에 다이어그램과 함께 정리했다.

🌐 API 연동

이 저장소는 API를 소비만 한다 — 계약의 원본은 백엔드 쪽이다. office.html이 실제로 호출하는 7개 엔드포인트는 js/core/api.js의 officeApi/dashboardApi에 모여 있고, 정확한 요청/응답 필드는 agent-core-demo/ERD.md (데모 기준, 실제와 필드 동일)를 참고한다.

🤝 Contributing

1. API 응답 필드를 하나라도 새로 쓰게 되면 agent-core-demo 쪽 mock 응답에도 같은 필드를 (가짜 값으로) 추가해야 데모가 안 깨진다.
2. js/core/api.js 밖에서 fetch를 직접 호출하지 않는다 — 백엔드 통신 지점을 하나로 유지하는 게 이 저장소의 원칙이다.
3. 판단 로직(어떤 상태가 실패인지, 배지 색이 뭔지)을 새로 만들지 않는다 — 백엔드가 내려준 값을 그대로 그린다(ADR, 비공개BE의 ADR-015 참고).

📄 License

Phaser(MIT)를 포함해 서드파티 의존성은 각자의 라이선스를 따른다. 이 저장소 자체의 코드는 비공개BE와 함께 이 프로젝트의 라이선스 정책을 따른다.