[FEAT/#53] 스티커를 추가 기능 및 테스트 코드 구현

[0Hooni]

🤔 배경

• 동시 편집을 위한 더미 데이터로 스티커가 필요했다.
• 해당 더미데이터를 편집 화면에 놓을 수 있어야 됐다.

📃 작업 내역

• Sticker 더미 데이터를 추가했습니다.
• Sticker 버튼을 눌러 랜던한 스티커를 편집 화면 위에 놓을 수 있습니다.
• 또한 매번 사용자 기준 같은 크기의 스티거가 같은 위치에 추가되도록 하였습니다.

✅ 리뷰 노트

오늘 구현 내용 정리 겸 조금 길 수 있음 주의
오늘 구현한것들을 현재 위치한 Layer와 저희가 설계한 아키텍처 설계도를 기반으로 이해한 내용으로 구성해봤습니다!
혹시 잘못 이해한 정보가 있거나 모호하게 이해했다고 보이는 부분이 있다면 집어주시면 감사하겠습니다 ☺️

시작은 기존 사각형 추가때와 마찬가지로 stickerButton의 tapPublisher에 의해 발동됩니다. 이를 통해 ViewModel에서 addStickerToCanvas() 메서드가 실행됩니다.

addStickerToCanvas()

• ViewModel 생성 시점에 bind() 메서드가 호출됩니다.
• bind() 메서드에서는 fetchStickerList() 메서드가 호출됩니다.

private func addStickerToCanvas() {
    output.send(.sticker(data: stickerList.randomElement()!))
}

fetchStickerList()

• 해당 메서드는 fetchStickerList 행동을 하도록 합니다.
• 이후 fetch 데이터를 viewModel에 있는 stickerList 인스턴스에 데이터를 저장하도록 합니다.
• 이 덕분에 addStickerToCanvas() 메서드에서 바로 랜덤한 스티커를 가져올 수 있었습니다.

private func fetchStickerList() {
    fetchStickerListUseCase.execute()
        .sink { [weak self] datas in
            self?.stickerList = datas
        }
        .store(in: &cancellables)
}

개선 예정 사항

• 현재 해당 메서드는 결국 전역에 위치한 인스턴스에 저장된 데이터에서 가져오도록 합니다.
• 추 후 ViewModel의 Output 케이스로 모든 데이터를 보내게 할 예정입니다.
• 이후 ViewController에서 Output에서 나온 데이터들을 알아서 처리하도록 할 예정입니다.

fetchStickerListUseCase는 추상 타입입니다. ViewModel을 생성하는 시점에 주입받을 수 있도록 해줍니다.
현재는 EditPhotoRoomHostViewController가 InitialViewController로 설정해주기 위해 SceneDelegate에서 생성되고 있는데 이 때 UseCase를 주입해주고 있습니다.

fetchStickerListUseCase는 DomainInterface 모듈에 위치합니다. 이후 fetchStickerListUseCaseImpl의 경우에는 Domain 모듈에 위치합니다.

FetchStickerListUseCaseImpl

• UseCase의 구현체입니다.
• execute() 메서드만 실행하여 해당 UseCase의 동작을 수행하도록 합니다.
• repository를 주입받습니다.

public final class FetchStickerListUseCaseImpl: FetchStickerListUseCase {
    public func execute() -> AnyPublisher<[Data], Never> {
        return shapeRepository.fetchStickerList()
    }
    
    private let shapeRepository: ShapeRepository
    
    public init(shapeRepository: ShapeRepository) {
        self.shapeRepository = shapeRepository
    }
}

shapeRepository

• 편집 화면 위에 올라갈 수 있는 다양한 오브젝트를 위한 메서드들이 추가되는곳 입니다.
• repositoryImpl의 경우 Data 모듈에 존재하는 이유에 대해 좀 학습도 해봤습니다.
  • DomainLayer는 비즈니스 로직들만 존재함
  • DB, API와 같은 외부 구현체와 독립적이여야 되기에 인터페이스는 Domain에 존재함
  • 또한 Domain에 추상체를 두어 어떠한 접근 방식을 사용해야 되는지 정도는 알 수 있도록 해줌
  • 반면 Impl의 경우는 실제 DataSource와 상호 작용이 필요함
  • 그래서 Data 모듈에 존재함

🎨 스크린샷

iPhone SE(2세대)	iPhone 14	iPhone 16 Pro Max

🚀 테스트 방법

EditPhotoRoomFeatureDemo를 실행시킨 후 하단의 스티커 버튼을 눌러주시면 됩니다. 또한 줌을 하거나 위치를 이동해도 원하는 동작이 잘 작동하는지 확인 가능합니다.

[hsw1920]

라이브 코드리뷰 완료
@hsw1920 @0Hooni @Kiyoung-Kim-57 @youn9k

[youn9k]

라이브코드리뷰쇼!!