480db0c734c113d720de9914eb532ee2465418c8
자기야 발견: 1차 sprite 색상이 실제 자매 일러스트와 거리가 멀었음. 4 자매
실제 avatar.png (각 LXC 의 ~/.openclaw/avatar.png) 를 직접 확인 후 시그니처
정정:
하랑 — 흰/은 머리 + 흰 cat ears + 파란 리본 + 파란 눈 (이전: 빨강 — 틀림)
나랑 — 검은 short bob + 검은 cat ears + 청록 보타이 + 청록 눈 (그나마 비슷)
다랑 — 흰 머리 + 흰 cat ears + 빨간 chinese 옷 + 빨간 눈 (이전: 노랑 — 틀림)
이랑 — 흰 long hair + 흰 cat ears + 흰 옷 + 파란 눈 + 파란 나비 (이전: 보라)
핵심 변경:
- spriteFactory.ts SISTER_PALETTES 전면 재작성: hair / hairShadow / outfit /
outfit2 / eye / earInner 등 분리. 자매별로 정확한 시그니처 색상.
- 4 자매 모두 catgirl 이라 sprite 위쪽에 cat ears 추가 (행 0-2 에 cat ear
outline + hair fill + earInner pink).
- CHAR_H 24 → 28 로 키워서 cat ears 와 더 긴 머리/몸 표현 공간 확보.
- 자매별 추가 디테일:
darang → 이마에 빨간 보석 점
erang → 머리 옆에 작은 파란 나비
harang → 머리 위에 파란 리본
narang → 옆머리 청록 헤어핀
- narang 만 short bob (옆 bangs 다른 자매보다 짧음). 나머지 3 명은 long hair.
- OfficeScene.ts: sprite 28px 으로 커졌으니 origin 을 (0.5, 1) 로 바꾸고
발끝을 타일 바닥 위에 정렬해 일관된 standing height.
이전: sprite 가 식별 불가능한 색깔 박스. 이번: 4 자매 각각 일러스트 시그
니처 색 + cat ears + 머리스타일이 보임.
하나랑 대시보드
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%