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

[jini-coding]

📋 요약

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

사진이 두개 들어갈 때 사진을 회전/확대/축소가 독립적으로 이루어지도록 하는 로직 추가만 남음

마찬가지로 템플릿 구현이라 슥 봐도 됨!

🎯 PR 내용

1. 데이터 모델 추가

• CheckerBoardRect : 프레임 내 사진 영역 정의 (x, y, width, height, cornerRadius)
• Frame 모델 확장 : checkerBoardRects 배열 추가로 다중 사진 영역 지원

/// 체커보드의 실제 영역 정보 (프레임 기준 비율)
struct CheckerBoardRect: Codable, Identifiable, Hashable {
    
    var id: String?   /// 고유 ID (Firebase 자동 생성 또는 순서)
    
    var x: CGFloat   /// X 위치 (프레임 너비 기준 비율, 0.0 ~ 1.0)
   
    var y: CGFloat    /// Y 위치 (프레임 높이 기준 비율, 0.0 ~ 1.0)
   
    var width: CGFloat    /// 너비 (프레임 너비 기준 비율, 0.0 ~ 1.0)
    
    var height: CGFloat    /// 높이 (프레임 높이 기준 비율, 0.0 ~ 1.0)
    
    var cornerRadius: CGFloat?    /// 모서리 radius
    
    var order: Int?    /// 순서 (여러 개일 때 정렬용)
}

몇시간 동안 삽질하다가 프레임별로 CheckerBoardRect 만들어주는 걸로 해결..
영역이 두개 이상인 경우에는 배열 형태라 추가해주면 됨!
나중에 인생네컷처럼 여러장 필요한 곳에서 다시 써먹으면 될듯

2. ViewModel 구현

• DuZzonKuVM : 프레임 선택 및 다중 사진 관리 상태
• photoImages : 인덱스별 사진 저장 딕셔너리
• DuZzonKuVM+Firebase : Firebase에서 Frames 컬렉션 로딩
• DuZzonKuVM+ImageConversion : 다중 사진과 프레임 합성
• 각 체커보드 영역별로 사진 적용

3. UI 구현

• DuZzonKuFramePreviewView : 다중 사진 실시간 미리보기
• DuZzonKuFrameSelectorView : 프레임 선택 UI (수평 스크롤)
• 여러 사진 영역에 독립적으로 사진 추가
• 사진에 확대/축소, 회전, 이동 제스처 지원 (아직은 단일 변수라 사진을 두개 이상 넣어도 동일하게 같이 적용됨. 업데이트 예정!)
• 영역별 플러스 버튼 / 편집 버튼 표시

4. 이미지 합성 로직

• 레이어 순서: 체커보드 배경 → 사진들 → 프레임
• 각 CheckerBoardRect 영역별로 순회하며 합성
• cornerRadius 적용으로 둥근 모서리 처리

📱 스크린샷 (UI 변경 시)

중간에 하나는 UI 수정 전에 찍은거라 감안 부탁드림...

🔗 관련 이슈

#81

✅ 체크리스트

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

[giljihun]

고생하셨습니다....... 잡시다...