[FEAT/#148] 스티커 사이즈 조절 기능 추가

[0Hooni]

🤔 배경

• 동시 편집에서 활용될 스티커 확대/축소 기능이 필요했다.

📃 작업 내역

• 로컬에서 드래그 제스처로 스티커를 확대/축소 할 수 있게 하였습니다.
• 소유권을 가질 수 있는 스티커만 확대/축소 되게 하였습니다.

✅ 리뷰 노트

StickerView.swift

• StickerView는 다음과 같은 이벤트를 전달해줍니다

protocol StickerViewActionDelegate: AnyObject {
    func stickerView(_ stickerView: StickerView, willBeginResizing sticker: StickerEntity)
    func stickerView(_ stickerView: StickerView, didResize sticker: StickerEntity)
    func stickerView(_ stickerView: StickerView, didEndResize sticker: StickerEntity)
}

CanvasScrollView.swift

• StickerView의 이벤트를 전달 받습니다.
• EditPhotoRoomViewController로 전달해줍니다.

extension CanvasScrollView: StickerViewActionDelegate {
   ...

    func stickerView(_ stickerView: StickerView, willBeginResizing sticker: StickerEntity) {
        canvasScrollViewDelegate?.canvasScrollView(self, didBeginResize: sticker)
    }
    
    ...
}

EditPhotoRoomViewController.swift

• CanvasScrollView로 부터 받은 이벤트를 ViewModel에게 전달해줍니다.

extension EditPhotoRoomGuestViewController: CanvasScrollViewDelegate {
    ...

    func canvasScrollView(_ canvasScrollView: CanvasScrollView, didBeginResize sticker: StickerEntity) {
        input.send(.resizeSticker(sticker, .began))
    }
    
    ...
}

로컬 확대/축소 선반영

StickerView.swift

• 선반영을 빠르게 구현하기 위해서 현재 구현된 상태로는 단방향을 어긴 상황입니다 🥲
• 확대/축소의 최대 최소값을 정해주었습니다.(최대 - 128, 최소 - 48)
• 확대/축소가 시작하고 끝나기 전까지는 사용자의 이벤트를 즉각 반영해줍니다.
• 확대/축소가 끝나면 SoT를 반영하기 위해 ViewModel을 다녀온 뒤 최종 Frame을 반영해주도록 하였습니다.

@objc private func handleResizePanGesture(_ gesture: UIPanGestureRecognizer) {
    ...
    
    resizePanGestureRecognizer.setTranslation(.zero, in: resizeButton)
    let newFrame = CGRect(origin: sticker.frame.origin, size: traslationStickerSize)
    
    switch gesture.state {
    case .began:
        updateFrame(to: newFrame)
        delegate?.stickerView(self, willBeginResizing: sticker)
    case .changed:
        updateFrame(to: newFrame)
        delegate?.stickerView(self, didResize: sticker)
    case .ended:
        delegate?.stickerView(self, didEndResize: sticker)
    default: break
    }
}

선반영 이후 SoT 적용

StickerView.swift

• 이벤트허브로부터 이벤트를 전달받아도 만약 확대/축소 중이라면 해당 스티커의 반영을 무시하게 했습니다.
• 사용자의 확대/축소 이벤트는 정상적으로 이벤트 허브에 전달됩니다.
• 이벤트허브로부터 다시 돌아온 자신의 이벤트는 부자연스러운 동작을 제공해주기에 블락해줍니다.

func update(with sticker: StickerEntity) {
    switch panGestureRecognizer.state {
    case .began, .changed: return
    default: 
        updateOwner(to: sticker.owner)
        if sticker.owner != user { updateFrame(to: sticker.frame) }
    }
}

EditPhotoRoomViewModel.swift

canInteractWithSticker(id: ): 해당 스티커를 소유할 수 있는지 확인해줍니다.
mutateSticker(EventHub/Local): 해당 스티커를 이벤트 허브나 로컬에 반영해준다.

• 아래 두개의 이벤트는 이미 Tap을 했을 때 반영되기에 확대/축소에서는 드래그와 다르게 따로 반영해주지 않습니다\

unlockPreviousSticker(stickerId: ): 이전에 소유하던 스티커의 Lock을 해제해줍니다.
lockTappedSticker(id: ): 스티커의 소유권을 나로 변경하고 Lock을 걸어준다.

private func handleResizeBegan(sticker: StickerEntity) {
    guard canInteractWithSticker(id: sticker.id) else { return }
    
    mutateStickerEventHub(type: .update, with: sticker)
}

private func handleResizeChanged(sticker: StickerEntity) {
    guard canInteractWithSticker(id: sticker.id) else { return }
    
    mutateStickerEventHub(type: .update, with: sticker)
}

private func handleResizeEnded(sticker: StickerEntity) {
    mutateStickerLocal(type: .update, sticker: sticker)
    
    guard canInteractWithSticker(id: sticker.id) else { return }
    
    mutateStickerEventHub(type: .update, with: sticker)
}

🎨 스크린샷

동시 확대 축소

🚀 테스트 방법

• 두개의 시뮬레이터에 EditPhotoRoomFeatureDemo를 실행해줍니다.
• 한개의 기기에서 SendOffer를 해줍니다.
• 각각 Host/Guest로 접속합니다
• 다양한 이벤트를 발생해봅니다.

[hsw1920]

리뷰에 불필요한 diff가 많아서 develop이 아니라 파생 브랜치에 머지하도록 수정했습니다.
그리고 스타커 사이즈 조절 기능 추가 제목 변경했어요!

[Kiyoung-Kim-57]

비율 맞춰 사이즈 조절까지!! 너무 좋아요!!👍👍👍

[youn9k]

메소드들이 단일 책임만 하고 있는 것 같아 가독성도 좋고 유지보수하기 편할 것 같습니다!! 고생하셨어요!!