하단 카드 손패 UI 목업 설계 문서 추가

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

docs/superpowers/specs/2026-06-06-bottom-card-hand-design.md

@@ -0,0 +1,96 @@
+# 하단 카드 손패 UI 목업 설계 (Slay the Spire 2 스타일)
+
+- 날짜: 2026-06-06
+- 브랜치: feature/sts2-combat-layout
+- 대상 파일: `ui/DefaultGroup.ui`
+
+## 목표
+
+전투 화면 **하단에 카드 5장이 수평 일렬로 보이는** 시각 결과를 만든다.
+Slay the Spire 2 처럼 손패가 화면 아래쪽에 펼쳐진 느낌을 정적(static) 목업으로 구현한다.
+
+## 범위
+
+### 포함
+- `DefaultGroup.ui`에 카드 손패 UI 엔티티 추가
+- 카드 5장을 하단 중앙에 수평 일렬 배치
+- 각 카드는 "풀 카드 면": 에너지 코스트(좌상단) + 카드 이름(상단 중앙) + 설명(하단)
+- 샘플 손패 내용으로 채움 (정적)
+
+### 명시적 제외 (YAGNI)
+- 클릭/터치 동작, 에너지 소모, 실제 카드 사용 로직
+- `SlayCombatManager` / `SlayCardCatalog` / `SlayRunState` 등 전투 로직 구현
+- 부채꼴(fan) 회전·곡선 배치
+- 드래그 앤 드롭, 호버 확대, 애니메이션
+- 데이터 기반 동적 손패 (드로우/버림에 따른 카드 수 변화)
+
+이들은 이후 "데이터 연동" 단계에서 별도 스펙으로 다룬다.
+
+## 구현 방식
+
+`DefaultGroup.ui`의 `ContentProto.Entities` 배열에 신규 엔티티를 직접 추가한다.
+기존 MSW UI 엔티티 패턴(`uisprite`, `uitext`)을 그대로 따르고, 각 엔티티에 새 UUID를 부여한다.
+
+이유:
+- 이 프로젝트는 로컬 워크스페이스 + git 방식이므로 `.ui` 파일 직접 편집이 형상관리와 일치
+- 결정론적·재현 가능하며 diff로 변경 내역이 명확히 남음
+- 작업 후 Maker에서 워크스페이스 reload로 반영
+
+(대안 — Maker MCP 라이브 조작, 런타임 Lua 생성 — 은 재현성/범위 측면에서 부적합하여 제외)
+
+## 엔티티 구조
+
+```
+/ui/DefaultGroup/CardHand              컨테이너 (uiempty, 하단 중앙 앵커)
+  ├ Card1   (uisprite, 카드 면)
+  │   ├ Cost  (uitext, 좌상단 코스트)
+  │   ├ Name  (uitext, 상단 중앙 이름)
+  │   └ Desc  (uitext, 하단 설명)
+  ├ Card2 … Card5  (Card1과 동일한 하위 구조)
+```
+
+## 배치 수치
+
+- 좌표 공간: `DefaultGroup` 기준 1920 × 1080 (기존 UITransform과 동일)
+- `CardHand` 컨테이너: 하단 중앙 앵커 (AnchorsMin/Max = {0.5, 0}), RectSize 약 1020 × 300, 바닥에서 위로 약 30px 띄움
+- 카드 크기: 180 × 250 (폭 × 높이)
+- 카드 간격: 20px
+- 5장 총폭: `5 × 180 + 4 × 20 = 980px` → CardHand 내부에서 중앙 정렬
+- 카드 i의 x 중심 (컨테이너 중앙 기준): `(-2 + i) × 200`  (i = 0..4) → -400, -200, 0, 200, 400
+
+### 카드 내부 텍스트 배치 (카드 로컬 좌표, 180×250 기준)
+- Cost: 좌상단, RectSize 약 48×48, 카드 좌상단 모서리 부근
+- Name: 상단 중앙, FontSize 약 28
+- Desc: 하단, FontSize 약 22
+
+## 비주얼
+
+- 카드 면 배경: 기존 버튼 스프라이트 RUID `cd0560c4fc7f3b14994b90a502f00a21` 재사용
+- 카드 타입별 색 틴트 (SpriteGUIRendererComponent.Color):
+  - 공격 카드(타격/강타): 붉은톤 (예: r 0.9, g 0.55, b 0.5)
+  - 방어 카드(방어): 푸른톤 (예: r 0.55, g 0.7, b 0.95)
+- 텍스트 컴포넌트는 기존 `PopupMessage` TextComponent 스키마를 템플릿으로 사용 (FontColor, OutlineColor 등 기본값 유지)
+
+## 샘플 손패 5장
+
+| # | 이름 | 코스트 | 설명     | 타입 틴트 |
+|---|------|--------|----------|-----------|
+| 1 | 타격 | ①      | 피해 6   | 공격(붉은) |
+| 2 | 타격 | ①      | 피해 6   | 공격(붉은) |
+| 3 | 방어 | ①      | 방어도 5 | 방어(푸른) |
+| 4 | 방어 | ①      | 방어도 5 | 방어(푸른) |
+| 5 | 강타 | ②      | 피해 10  | 공격(붉은) |
+
+(StS 시작덱 느낌의 대표 손패. 코스트 표기는 텍스트 "1"/"2"로 입력)
+
+## 검증
+
+1. 파일 저장 후 Maker에서 로컬 워크스페이스 reload
+2. `maker_screenshot`으로 전투 화면 하단에 카드 5장이 수평 일렬로 렌더되는지 확인
+3. 각 카드에 코스트·이름·설명 텍스트가 보이는지, 공격/방어 색 구분이 되는지 확인
+
+## 후속 단계 (이 스펙 밖)
+
+- 데이터 연동: `SlayCardCatalog` / `SlayCombatManager` 구현 후 손패를 동적 렌더링
+- 카드 클릭 → 카드 사용, 에너지 소모, 손패 수 변화
+- 부채꼴 배치·호버·드래그 등 인터랙션 고도화