야야톤 - 출시작 : 등신사(SwiftUI)

Groot·2022년 10월 10일

TIL 프로젝트

TIL

목록 보기

70/153

TIL

🌱 난 오늘 무엇을 공부했을까?

📌 야야톤 - 출시작 : 등신사(SwiftUI)

📍 개요

등린이를 위한 등산복 추천 어플로, 다나와에서 "등린이를 위한 등산복 추천"이란 키워드로 판매하고 있는 아웃도어 브랜드의 신상품 4가지 등산복에 대한 정보를 보여주고, 최저가 사러가기 누르면 해당 옷을 살 수 있는 다나와 사이트로 이동하여 바로 구매가 가능하게 해주었다.
OpenAPI가 있었다면 좋았겠지만, 쇼핑몰 사이트의 OpenAPI를 어떻게 구해야 할 지 몰라 데이터를 직접 만들어줘서 그런지 더 애착이 간다..

📍 View 구성

3개의 뷰를 구성해주고 각 뷰를 나누어 구조체로 만들어줬다.
가장 상위뷰에서 Category.allCases로 모든 브랜드를 카테고리를 배열에 넣어주고 그 배열의 원소를 ProductGroupView를 넣어서 인스턴스화 하는 부분을 ForEach로 처리하였다.

struct ProductMainView: View {
    let models = Category.allCases
    
    var body: some View {
        VStack {
            Text("등린아 이거 입고 가")
                .bold()
                .font(.body)
            ScrollView(showsIndicators: false) {
                VStack(alignment: .leading) {
                    ForEach(models, id: \.self) { model in
                        Text(model.rawValue)
                            .font(.title3.bold())
                        ProductGroupView(category: model)
                    }
                }
            }
            .padding()
        }
        .background(Image("img").resizable().frame(width: UIScreen.main.bounds.width,
                                                   height: UIScreen.main.bounds.height + 10,
                                                   alignment: .center).opacity(0.3))
    }
}

가로 스크롤뷰에 4개의 상품뷰를 넣어서 스크롤이 가능하도록 하였다.

struct ProductGroupView: View {
    var category: Category
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack{
                ProductView(category: category)
            }
        }
    }
}

filteringModel 함수를 사용해서 category에 맞는 상품들만 받아와서 화면에 띄울 수 있도록 구현했다.

struct ProductView: View {
    private let model = ModelData().products
    var category: Category
    
    var body: some View {
        ForEach(0..<4) { number in
            VStack(spacing: 4) {
                Image(filteringModel(category: category)[number].imageName)
                    .resizable()
                    .frame(width: 150, height: 150)
                    .aspectRatio(contentMode: .fit)
                Text(filteringModel(category: category)[number].name)
                    .font(Font.caption)
                Text(filteringModel(category: category)[number].price)
                    .font(Font.body)
                    .bold()
                let url = filteringModel(category: category)[number].url
                Link(destination: URL(string: url)!) {
                    Text("최저가 보러가기")
                        .font(Font.caption)
                        .foregroundColor(.blue)
                }
            }
            .frame(width: 180, height: 180)
            .padding()
            .border(Color(.systemGray5), width: 0.8)
        }
        .background(.white)
    }
    
    func filteringModel(category: Category) -> [Product] {
        let newModel = model.filter { $0.category == category }
        
        return newModel
    }
}