feat: [키링 만들기] 말 템플릿 1차 구현

[jini-coding]

📋 요약

말 키링 템플릿 추가 및 프레임 커스터마이징 기능 구현

hookOffsetY 설정, 일부 프레임 바디 이미지 회전, 자잘한 디자인 수정만 남음!
하다보니 이렇게 되었다...
그래도 아직 정보 input 시트, 정보 시트 작업이 필요하다...

템플릿 구현이라 슥 보셔도 됨!

🎯 PR 내용

1. 데이터 모델 추가

• Saddle: 안장 데이터 모델 (imageURL, thumbnailURL, order)
• Mane: 갈기 데이터 모델 (imageURL, color, order)
• ManeColorType: 갈기 색상 enum (6가지 프리셋 색상 정의)

order는 아직 안 쓰긴 하는데 혹시 몰라서 일단 넣어둠

2. ViewModel 구현

• WishHorse26VM: 프레임, 안장, 갈기 선택 상태 관리
• WishHorse26VM+Firebase: Firebase에서 Frames, Saddles, Manes 컬렉션 로딩
• WishHorse26VM+ImageConversion: 선택한 프레임/안장/갈기 이미지 합성
• WishHorse26VM+Effect: 사운드/파티클 이펙트 관리 (기존 템플릿 패턴 적용)

3. UI 구현

• WishHorse26FrameSelectorView: 프레임, 안장, 갈기 선택 UI
• 프레임 섹션: 수평 스크롤
• 안장 섹션: 수평 스크롤
• 갈기 컬러 팔레트: 6가지 프리셋 색상
• WishHorse26FramePreviewView: 실시간 합성 미리보기

4. 이미지 합성 로직

• 레이어 순서: 프레임(말) → 갈기 → 안장
• Nuke를 통한 비동기 이미지 다운로드
• UIGraphicsImageRenderer로 합성

완성된 아이!

📱 스크린샷 (UI 변경 시)

파일 용량 문제로 분할해서 올림

ScreenRecording_02-11-2026.7-1.mov

ScreenRecording_02-11-2026.8-1.mov

🔗 관련 이슈

#75

✅ 체크리스트

• 빌드 성공
• 테스트 완료
• Self-review 완료

[giljihun]

Saddle: 안장 데이터 모델 (imageURL, thumbnailURL, order)
Mane: 갈기 데이터 모델 (imageURL, color, order)
ManeColorType: 갈기 색상 enum (6가지 프리셋 색상 정의)

영어 공부까지 하게되는 신기한 변수들 ㅋㅋ

[giljihun]

구굳굳

[giljihun]

order도 필요하네요! 싱싱한테 순서 물어보면될듯