이랑이 d100ee7c42 feat(ui): redesign /rails + /office for breathing room and digital office feel
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) ✓
2026-04-10 17:42:06 +09:00
2026-04-05 15:37:44 +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%