이랑이
be0120bd0c
자기야 피드백: "픽셀 아트 안 예쁘다, profile photo 로 바꿀 수 없나?
픽셀 아트 고집 안 해도 됨." → 16x28 픽셀로는 anime 일러스트 정체성 못
살리는 게 사실. Phaser 자체도 큰 의존성이라 깔끔하게 빼고 React+CSS+SVG
로 재작성.
## 변경
### 제거
- phaser 4.0.0 의존성 (~3MB)
- frontend/components/office-rpg/ 전체 (Phaser 통합 layer + procedural
pixel sprite factory + Office scene)
### 신설
- frontend/components/office-room/OfficeRoom.tsx
- 2x2 grid layout: 하랑/나랑 (위), 다랑/이랑 (아래)
- 가운데 회의실 (시각 표시만, 향후 인터랙션용)
- 각 자매 = 책상 SVG 위에 원형 portrait card
- 72px portrait (실제 /api/sisters/{name}/avatar)
- 자매 시그니처 색 border (harang=blue, narang=teal, darang=red, erang=violet)
- hover 시 위로 살짝 떠오름
- 활성 stage 일 때 PulseRing + StatusDot 펄스
- 자매 사이 SVG flow arrow (plan → impl → review → deploy 방향)
활성 stage 시 화살표 hi-lighted
- 클릭 → 우측 SisterDetailPanel slide-in
- frontend/components/office-room/SisterDetailPanel.tsx
- 기존 office-rpg 의 detail panel 을 재사용 (PortraitLg + 자매 시그니처
accent + 역할 설명 + 백엔드 sister info)
### app/page.tsx
- OfficeRpg → OfficeRoom 으로 교체
- 4초 polling 으로 활성 파이프라인의 currentState 추적 →
STATE_TO_STAGE 매핑 → 해당 자매 카드 자동 펄스
하나랑 대시보드
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/
작업 파이프라인
- 하랑이 문서 작성 및 선 push
- 나랑이 구현 branch 작업
- 다랑이 QA +
.plans/qa/결과 문서 push - 하랑이 QA 확인 후
mainmerge - 이랑이 최신
mainpull + 재배포
main은 항상 배포 가능 상태를 유지해.
실행 방법
사전 준비
- 루트
.env.example참고 backend/.env작성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