[FEAT/#77] 스티커를 선택할 수 있는 기능을 구현합니다.

[hsw1920]

커밋단위로 리뷰하는게 가장 편하십니다.

• 작업이 복잡하여 잘 분리하여 커밋해두었습니다.

🤔 배경

• 스티커뷰에 닉네임을 표시하거나 owner를 표기하기 위해 커스텀 UIImageView가 필요했습니다.
• 해당 스티커뷰는 탭 이벤트를 제공해야했습니다.
• EventHub를 거쳐 Host, Guest간 통신에 문제가 없었어야 했습니다.

📃 작업 내역

• StickerView 구현: StickerView UI 와 tapPublisher를 통한 탭 이벤트 처리 구현
• StickerView 업데이트 최적화: StickerEntity 상태 비교를 통해 불필요한 업데이트 방지
• 스티커 선택 비즈니스 로직 구현: StickerView의 tap시 unlock/lock 및 EventHub 반영 처리.
• StickerEntity 배열 확장: owner 확인, unlock/lock 로직 재사용을 위한 유틸리티 메서드 추가
• Host/Guest 구분 기능 추가: 임시적으로 사용자 역할을 구분합니다.
  • private let owner = "GUEST" + UUID().uuidString.prefix(4)
  • 임시로 UUID를 이용해 각 Guest들의 owner를 유니크하게 구분할 수 있습니다.

✅ 리뷰 노트

StickerView에서 tap관련 cancellable 관리

// StickerView.swift
    func tapHandler(_ completion: @escaping (UUID) -> Void) {
        tapPublisher
            .sink { [weak self] _ in
                guard let self else { return }
                completion(sticker.id)
            }
            .store(in: &cancellables)
    }

// EditPhotoRoomViewController.swift
    private func addNewSticker(to sticker: StickerEntity, isLocal: Bool) {
        registerSticker(for: sticker)
        
        let stickerView = StickerView(sticker: sticker)
        stickerView.tapHandler { [weak self] stickerID in
            self?.input.send(.stickerViewDidTap(stickerID))
        }
        
        canvasScrollView.imageView.addSubview(stickerView)
        stickerView.update(with: sticker)
        input.send(.createSticker(sticker))
    }

가장 큰 이유는 StickerView가 자주 생성되고 삭제된다는 점에 있었습니다.

스티커는 동적으로 생성/삭제 되므로 ViewController가 개별 스티커의 이벤트 구독을 관리하기에 불편했습니다.

스티커가 삭제될 때 구독을 해제해야 하며, 이를 ViewController에서 수동으로 추적하여 처리하기에는 오버헤드가 크다고 판단했습니다.

따라서 tapHandler(_:) 탈출 클로저를 제공하여 구독은 StickerView 내부에서 관리하고, StickerView가 삭제되면 내부적으로

cancellable이 해제되어 메모리 누수를 방지하고자 이 방식을 채택했습니다.

같은 값일 때 불필요한 할당 방지

    private func updateFrame(to frame: CGRect) {
        guard sticker.frame != frame else { return }
        
        sticker.updateFrame(to: frame)
        self.frame = frame
    }
    
    private func updateOwner(to owner: String?) {
        guard sticker.owner != owner else { return }
        
        sticker.updateOwner(to: owner)
        if let owner = owner {
            nicknameLabel.text = owner
            layer.borderWidth = 1
        } else {
            nicknameLabel.text = nil
            layer.borderWidth = 0
        }
    }

• 같은 값을 재할당하는 것으로 불필요한 오버헤드를 발생시킬 수 있을 것 같아 변경여부를 확인한 뒤 할당하였습니다.
• StickerView또한 ViewModel을 두어 removeDuplicate()를 통해 관리할 수도 있었지만,

1. 추가적인 ViewModel 구현을 지양하고 struct를 고수하고자
2. 추가적인 StickerEntity를 관리하는 DataSource를 두는 것을 지양하고자
   이 방식을 택하였습니다.

SitckerView 탭 이벤트 처리 비즈니스 로직 구현

    private func handleStickerViewDidTap(with stickerID: UUID) {
        // MARK: 선택할 수 있는 객체인지 확인함
        guard canInteractWithSticker(id: stickerID) else { return }
        
        // MARK: 필요시 이전 스티커를 unlock하고 반영함
        unlockPreviousSticker()
        
        // MARK: Tap한 스티커를 lock하고 반영한다.
        lockTappedSticker(id: stickerID)
    }

선택 가능한 객체 확인 (canInteractWithSticker)

• StickerView 탭 이벤트 발생 시, 해당 스티커가 선택 가능한 상태인지(소유 여부 확인) 판단하는 로직 추가.
• stickerList.isOwned 메서드 활용으로 코드를 간결하게 구성했습니다.

이전 선택된 스티커 해제 (unlockPreviousSticker)

• 기존에 선택된 스티커를 해제하고, EventHub에 해제 상태를 반영하도록 처리.
• 스티커 해제는 lockedSticker와 unlock 메서드를 활용해 구현.

현재 선택된 스티커 잠금 (lockTappedSticker)

• 선택된 스티커를 잠금 상태로 설정하고, EventHub에 업데이트 요청.
• stickerList.lock 메서드를 사용해 간결하게 구현.

상태 관리 최적화

• stickerObjectListSubject.value를 활용해 상태를 읽고 업데이트하며, 변경 시 필요한 부분만 EventHub와 동기화.

🎨 스크린샷

• 탭한 이벤트가 전파됩니다.
• 소유하지 못한 객체는 비즈니스 로직에서 이벤트를 전파하지 못하도록 걸러집니다.

🚀 테스트 방법

1. EditPhotoRoomFeatureDemo에서 Host, Guest로 두 개의 디바이스로 런
2. 임시: [프레임] 버튼을 눌러 커넥션 연결
3. 스티커 버튼을 생성하고 tap을 통해 테스트가 가능합니다.

[Kiyoung-Kim-57]

우와...설계부터 구현까지 엄청 복잡하네요!! 고생하셨습니다!

[0Hooni]

LGTM 💯

수고 많으셨습니다!

[youn9k]

고생하셨습니다! 손이 빠른 구현 고수..