d100ee7c42a8d86020b20410961ab03f9ccea991
Office (full rewrite):
- frontend/components/office/OfficeFloor.tsx — 새로운 책상 그리드
4 자매 책상 (2x2 grid), 자매당 카드 형태
자매 아바타 (gradient), 역할 라벨, 작업 중 pulse 애니메이션
worker pill chips (manager/principal/lead/junior 색상별)
Stats: workers / active / done / fail
십자 가이드 라인으로 office floor plan 분위기
- frontend/app/office/page.tsx — 867 → 220 줄 압축
rails 데이터 직접 사용 (sisters API 의존성 제거)
사이드 패널: 선택된 자매의 sub-task 트리
Rails (간격 + 가독성):
- frontend/app/rails/page.tsx — 카드 spacing 확대, 헤더 명료화
Start 폼을 별도 카드로 분리 (한 줄 → enter 시 시작)
파이프라인 카드 padding 18px, 클릭 영역 확장
state badge 컬러 + 라운드, project name 큼지막
rel time / id 메타는 mono font 로 separator
- frontend/components/rails/SubTaskTree.tsx — 노드 padding 12px,
자식들 사이 dashed border + 16px 들여쓰기 ( 시각적 hierarchy)
Title sans font 로 변경, complexity meta 별도 줄
Sidebar:
- 기존 작업 변경 없음 ('레일' 메뉴는 이전 커밋에서 추가됨)
검증: pnpm build (next 16 turbopack) ✓
하나랑 대시보드
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
Description
Languages
TypeScript
82.1%
HTML
17.7%
JavaScript
0.2%