Feature/#1 배너 기능 구현

ericKwon95 commented 1 week ago

close #1

📓 Overview

배너 정보로부터 이미지를 가져와 표시하고, 5초마다 자동으로 넘기는 기능을 구현하였습니다.

🤔 고민 내용

Swift Testing 사용 시 이슈

테스트 코드를 작성할 때 새로운 기술인 Swift Testing을 적용해 보고 싶었습니다.
그러나 TCA가 제공하는 TestStore를 사용한 테스트 코드는 Swift Testing에서 제대로 동작하지 않는 오류가 있었습니다. 참고
따라서 XCTest를 사용해 테스트 코드를 작성하였습니다.

실제 네트워킹 없이 테스트하기

테스트 코드에서는 실제 네트워킹을 수행하지 않아야 하기 때문에 테스트를 위한 더미 값이 필요했습니다.

DependencyKey의 testValue를 활용해 더미 값을 넣어주어 테스트 코드에서 활용하였습니다.


// BannerClient.swift
extension BannerClient: DependencyKey {
static var liveValue: BannerClient = .init(
    banners: {
        let endPoint = BannerEndPoint.banners
        return try await APIClient.shared.request(endPoint, decode: BannerDTO.Response.self)
    }
)

static var testValue: BannerClient = .init(
    banners: {
        return [
            BannerDTO.ResponseElement(
                id: 1,
                bannerImageURL: "https://climeet-production-bucket.s3.ap-northeast-2.amazonaws.com/1615cdad-d781-4bf6-a4de-57a136eb0089.jpg",
                bannerTargetURL: "https://www.naver.com/",
                title: "배너테스트1",
                bannerStartDate: "2024-10-03",
                bannerEndDate: "2024-10-31",
                isPopup: false
            ),
            BannerDTO.ResponseElement(
                id: 2,
                bannerImageURL: "https://climeet-production-bucket.s3.ap-northeast-2.amazonaws.com/1615cdad-d781-4bf6-a4de-57a136eb0089.jpg",
                bannerTargetURL: "https://www.naver.com/",
                title: "배너테스트2",
                bannerStartDate: "2024-10-03",
                bannerEndDate: "2024-10-31",
                isPopup: false
            )
        ]
    }
)
}

// BannerReducerTests.swift @MainActor class BannerReducerTest: XCTestCase {

func testbannerRequest() async throws {
    let store = TestStore(initialState: BannerReducer.State()) {
        BannerReducer()
    }

    await store.send(.onFirstAppear)

    await store.receive(\.bannerResponse) {
        $0.bannerInfos = try [
            BannerDTO.ResponseElement(
                id: 1,
                bannerImageURL: "https://climeet-production-bucket.s3.ap-northeast-2.amazonaws.com/1615cdad-d781-4bf6-a4de-57a136eb0089.jpg",
                bannerTargetURL: "https://www.naver.com/",
                title: "배너테스트1",
                bannerStartDate: "2024-10-03",
                bannerEndDate: "2024-10-31",
                isPopup: false
            ),
            BannerDTO.ResponseElement(
                id: 2,
                bannerImageURL: "https://climeet-production-bucket.s3.ap-northeast-2.amazonaws.com/1615cdad-d781-4bf6-a4de-57a136eb0089.jpg",
                bannerTargetURL: "https://www.naver.com/",
                title: "배너테스트2",
                bannerStartDate: "2024-10-03",
                bannerEndDate: "2024-10-31",
                isPopup: false
            )
        ].map {
            try BannerInfo(from: $0)
        }
    }
}

}



### 무한 스크롤 배너 구현법 고민
- 지금은 무한 스크롤이 되지 않는 평범한 배너 입니다.
- Carousel 뷰 처럼, 양방향 무한 스크롤이 되는 것이 자연스러운 배너 동작으로 생각되어 양방향 무한 스크롤 배너를 구현하고자 합니다.
- prev, current, next 세 개의 뷰를 가지는 탭 뷰를 띄우고, 현재 선택한 배너 인덱스에 따라 뷰 내용을 바꿔치기하는 구조를 고민하고 있습니다. [참고](https://stackoverflow.com/questions/65457609/bidirectional-infinite-pageview-in-swiftui)
- 그러나 만족할 만큼 깔끔한 결과가 나오지 않아서... 혹시 관련해 구현해 보신 경험이 있다면 어떤 방법을 사용하셨는지 궁금합니다~

## 📸 Screenshot
| 5초마다 배너 이동 | 손으로 직접 이동 |
| -- | -- |
|<img src="https://github.com/user-attachments/assets/443cbc59-8c25-4514-9c80-09e1229a07d7" width=200>|<img src="https://github.com/user-attachments/assets/63283722-ef0d-421b-9e49-1fe82dcd5c75" width=200>|

iOS-Woong commented 1 week ago

무한 스크롤 배너 구현법 고민

구현하는방법은 많지만 저는 아래와 같이 할 것 같아요

실제 데이터 [ A, B, C] 라면 [ C(가장뒤꺼), A, B, C, A(가장앞꺼) ]로 변환해서 데이터로 활용
최초에는 데이터 A가 초기값으로 표시되도록 설정
스크롤할 경우 위치 재조정
- 인덱스 1(A)에서 인덱스 0(C)으로 스크롤되었을 때, 애니메이션 없이 C로 오프셋 위치를 옮김
- 인덱스 3(C)에서 인덱스 4(A)으로 스크롤되었을 때, 애니메이션 없이 A로 오프셋 위치를 옮김

일케 구현할 것 같아요 적어주신 아이디어에서 바꿔치기한다는 말을 인용하셨는데 그 말과 아마 동일한 맥락일 것 같네요!

몇개의 코멘트 이 외의 이번구현도 저는 너무 좋은 것 같습니다! 코드가 너무 깔끔해요 짱짱맨임니다

ericKwon95 commented 6 days ago

@iOS-Woong

웅님이 주신 아이디어로 제가 생각하는 완벽한 배너를 만들어보고 싶어 작업하고 있었는데요, 구현해보다가 쉽지 않은 부분이 있어서 일단 다른 리뷰만 적용해 머지하도록 하겠습니다!

TheClimeet / climeet-iOS