이랑이
9a17f65419
자기야 요청: 픽셀 RPG 스타일 (deskrpg/openclaw-office 분위기) 의 가상 사무실로 대시보드 메인 리뉴얼. 페이지 너무 많은 거 줄이고 office 를 메인 기능으로 승격. rails 페이지에 재기획 (replan) 시각적 표시 추가. ## Phase 1 (이번 세션) 범위 ### Office RPG (Phaser 3 + procedural pixel art) - frontend/components/office-rpg/ 신설 - spriteFactory.ts: 16x16 floor/wall/carpet/desk/chair 타일 + 16x24 자매 캐릭터 sprite 4 명 (harang/narang/darang/erang) 자매별 색상. 모두 코드로 procedural 생성 (외부 asset 0, 라이선스 문제 0) - OfficeScene.ts: 16x12 tile layout (벽/바닥/4 책상/회의실/문). 자매 sprite 가 각 책상에 idle (2-frame breathing), 클릭 가능 - PhaserHost.tsx: Next.js dynamic import (ssr:false), Phaser 4 namespace import. Camera zoom 3x 픽셀 perfect 렌더링 - OfficeRpg.tsx: React wrapper. 좌측 PhaserHost + 우측 SisterDetailPanel slide-in - SisterDetailPanel.tsx: 자매 클릭 시 SisterAvatar 사진 + 역할 + 상태 표시 ### 메인 페이지 리뉴얼 (1242 줄 → 50 줄) - app/page.tsx 를 office-first 로 교체. 헤더 한 줄 + OfficeRpg + 최근 파이프라인 strip - ActivePipelineStrip.tsx 신설: 최근 8 개 파이프라인 카드, 5초 polling ### 페이지 19 → 5 통합 - 삭제: app/projects, app/sisters, app/activities, app/org, app/office, app/admin/*, app/rails/log, app/rails/escalations - 유지: app/page (=office), app/rails (=파이프라인 + 통합 timeline), app/settings, app/login, app/register - Sidebar 메뉴: 11 → 3 (사무실 / 레일 / 설정) ### Rails 페이지 — TransitionsTimeline + replan 마커 - TransitionsTimeline.tsx 신설: 파이프라인의 모든 state transitions 를 세로 타임라인으로. 4초 polling. 통계 배지 (전이 수, review loop ×N, ↑ 재기획 ×N, 🚨 escalated) - reviewing → planning 전이는 빨간 "↑ 재기획" 마커 + 빨간 도트 - escalated 전이는 노란 "🚨 escalated" 마커 - 일반 전이는 파란 도트 ### 의존성 - + phaser 4.0.0 ## 다음 phase 계획 Phase 2 (다음 세션): - Walk animation (4 방향) - Stage handoff: narang sprite 가 darang 책상으로 walk over - Active pipeline 이 office 위 floating bubble 로 - 클릭으로 rails drawer Phase 3 (그 후): - 사용자 본인 아바타 (자기야 캐릭터) - 회의실 인터랙션 - 채팅 통합 ## 빌드 결과 build clean. 8 routes (/, /login, /rails, /register, /settings, /_not-found, favicon, robots).
하나랑 대시보드
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