이랑이
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 매핑 → 해당 자매 카드 자동 펄스
30 lines
673 B
JSON
30 lines
673 B
JSON
{
|
|
"name": "frontend",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev -p 3004",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "eslint"
|
|
},
|
|
"dependencies": {
|
|
"next": "16.2.2",
|
|
"react": "19.2.4",
|
|
"react-dom": "19.2.4",
|
|
"react-markdown": "^10.1.0",
|
|
"socket.io-client": "^4.8.3",
|
|
"styled-components": "^6.3.12"
|
|
},
|
|
"devDependencies": {
|
|
"@types/node": "^20",
|
|
"@types/react": "^19",
|
|
"@types/react-dom": "^19",
|
|
"@types/styled-components": "^5.1.36",
|
|
"babel-plugin-styled-components": "^2.1.4",
|
|
"eslint": "^9",
|
|
"eslint-config-next": "16.2.2",
|
|
"typescript": "^5"
|
|
}
|
|
}
|