fix: 템플릿 프리뷰 이미지 왼쪽 치우침 등 4가지 QA

[giljihun]

🎯 PR 내용

앞으론 문법도 조금 PR에 녹여서 정리해보겠습니다

1. fix: 템플릿 프리뷰 이미지 왼쪽 치우침 수정

원인: 부모 VStack이 .leading 정렬이라 이미지도 왼쪽으로 밀림

.frame(maxWidth: .infinity, maxHeight: 500) // 가로 전체 채우기

maxWidth: .infinity — 부모 정렬과 무관하게 가용 너비를 꽉 채움

2. feat: 키링 +버튼 → 배경/카라비너 시트 자동 닫힘

원인: 키링 시트와 아이템 시트가 공존 가능해서 2중 시트 발생

showItemSheet = false
DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) { showKeyringSheet = true }

닫힘 애니메이션(0.25s) 완료 후 키링 시트를 여는 타이밍 처리

3. perf: 배경/카라비너 시트 렌더링 최적화 (이건 없던 이슈인데, 추가 개선)

원인: if 조건부 렌더링은 매번 뷰를 새로 만들어서 느림 + 탭 전환마다 로딩 깜빡임

그리고, matchedGeometryEffect를 활용해서 보다 부드럽게 탭이 올라가고 내려오도록 개선했습니다.

// 시트: 항상 존재, 위치만 이동
DraggableSheet(...).offset(y: showItemSheet ? 0 : sheetHeight)

// 탭 전환: 두 시트 항상 유지, 투명도만 전환
SelectBackgroundSheet(...).opacity(isBackgroundMode ? 1 : 0)

offset 방식 — 뷰를 숨기되 파괴하지 않아서 재생성 비용 없음

matchedGeometryEffect

서로 다른 위치에 있는 두 뷰를 "같은 뷰"로 인식시켜서,
SwiftUI가 자동으로 위치/크기 전환 애니메이션을 만들어주는 건데
자료 한 번 가볍게 찾아보시면 좋을듯합니다!

4. perf: 시트 썸네일 프리패칭

원인: 시트를 처음 열 때 이미지 다운로드가 시작돼서 최초 1회 렉 발생

ImagePrefetcher().startPrefetching(with: bgURLs + cbURLs)

뷰 진입 시점에 미리 이미지를 캐시에 로드 (Nuke 라이브러리)

5. fix: 무료 템플릿에 "보유" 태그 표시되던 문제

원인: 조건이 ||(또는)라서 무료 아이템도 뱃지가 보임

// 수정 전: 
isOwned || template.isFree  (무료면 무조건 보임)


// 수정 후:
.opacity(isOwned && !template.isFree ? 1 : 0)  // 유료 + 보유일 때만

|| → && + !isFree 로 조건 교체

6. fix: 뭉치 생성 시 위젯 이미지 누락

원인: 뭉치 "편집" 시에만 위젯용 이미지를 만들고, "생성" 시에는 안 만들고 있었음

// 배경 없이 캡처 → 위젯용 투명 이미지
captureBundleImage(backgroundImageURL: nil, trimTransparentEdges: true)

생성 흐름에도 위젯 전용 캡처(배경 제거 + 여백 트림)를 추가
근데 왜, 캡처가 안된경우에 풀스크린 캐시 이미지가 위젯으로 나왔냐면 그런 조건이 걸려있음.
위젯 캐시 이미지 없으면, 풀스크린 캐시 이미지로 들어가도록.

7. fix: npm 보안 이슈 해결

이건 너무 자주뜨네 ㄱ-
암튼 npm audit fix 했고 해결완.

📱 스크린샷 (UI 변경 시)

프리뷰 위치 조정 전/후, 이렇게 보면 체감 안될 수도 있지만, 실제로 굉장히 체감됨.

템플릿 선택 시트 - 무료템 '보유태그' 제거

뭉치 위젯 버그 해결 - 뭉치 만들기 하고 바로 나와서 위젯 설정해보았음.
돌아보면, 굉장히 치명적인 버그였음.

default.MP4

default.mov

체감 되나요? 이쪽 UX 개편
첫번째 영상 -> 배경/카라비너 셀렉터 누르면, 셀렉터가 잠시 사라졌다가 등장함.
두번째 영상 -> 그 외, 더 부드러워짐 + 아이템 로딩도 셀렉터 바꿀때마다 뷰를 재생성했는데 아이템 이미지 유지함 이제.

🔗 관련 이슈

• Bugfix: [공방] 템플릿 프리뷰 이미지가 왼쪽으로 치우쳐진 현상 #105

✅ 체크리스트

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

테스트플라이트로 테스트 받고 배포 진행 예정

[freshfresh22]

좋다좋다