SwiftUI Project10 : 영화 캐릭터 정보 앱 #2 - 모델생성

 

Project10의 두 번째 포스팅입니다.

 

저번 게시글에 이어서 만들어 보겠습니다.

컬러 익스텐션 만들기

이번에는 컬러 익스텐션을 만들어서 컬러를 다루도록 하겠습니다. SwiftUI에서는 일명 HEX 코드를 그냥 사용할 수 없습니다. 그렇기 때문에 값을 추출해 변환하는 기능을 추가해야만 합니다. 따라서 헥스 코드를 입력받아 Color 타입을 만들어내는 생성자를 추가해주겠습니다.

 

컬러 익스텐션 만드는 방법에 대해 알아보러 가기

 

이 앱에서 자주 쓰일 색을 아래와 같이 추가해주겠습니다.

swift

UNFOLDED

// ColorExtension
 
import SwiftUI
 
extension Color {
    static let lightRed = Color(hex: "c64756")
    static let DarkGreen = Color(hex: "00587a")
    static let deepgray = Color(hex: "6e6e6e")
    static let primartShadow = Color.primary.opacity(0.5)
    static let background = Color(UIColor.systemGray6)
}
 
extension Color {
    
    //헥스(HEX) 코드 활용
    init(hex: String) {
        let scanner = Scanner(string: hex) // 문자열 파서 역할을 하는 클래스
        _ = scanner.scanString("#") // scanString은 iOS 13부터 지원.
        
        var rgb: UInt64 = 0
        //문자열을 Int64 타입으로 변환해 rgb 변수에 저장. 변환할 수 없다면 0을 반환함
        scanner.scanHexInt64(&rgb)
        
        let r = Double((rgb >> 16) & 0xFF) / 255.0   // 좌측 문자열 2개 추출
        let g = Double((rgb >> 8) & 0xFF) / 255.0    // 중간 문자열 2개 추출
        let b = Double((rgb >> 0) & 0xFF) / 255.0    // 우측 문자열 2개 추출
        self.init(red: r, green: g, blue: b)
        
    }
 }

 

이렇게 색을 설정해줬으니 이제 ProductRow.swift 파일로 돌아가서 색을 아래와 같이 수정하겠습니다.

swift

UNFOLDED

.foregroundColor(Color.red)   ->  .foregroundColor(.lightRed)
 
.foregroundColor(Color.green) ->  .foregroundColor(.DarkGreen)
 
.shadow(color: Color.primary.opacity(0.3)) -> .shadow(color: .primaryShadow, radius: 1, x: 2, y: 2)

Product 모델 적용

이제 ProductRow에서 사용한 캐릭터명과 정보 등에 코딩된 값을 바꿔주겠습니다.

Product 모델 생성

새로운 [Swift File] 템플릿을 생성하고 이름은 Product.swift라고 정해주겠습니다. 그리고 데이터를 담을 Product 타입을 아래와 같이 구현하겠습니다.

swift

UNFOLDED

// Product
 
import SwiftUI
 
struct Product {
    let id: UUID = UUID()
    let name: String
    let ImageName: String
    let movie: String
    let price: Int
    let description: String
    var isFavorite: Bool = false
}

그리고 그 아래에는 ProductList 변수에 간단한 Product 데이터를 만들어 넣어주겠습니다. 이것은 프리뷰에서 테스트용으로 사용하는데 유용하게 사용할 수 있습니다.

swift

UNFOLDED

// Product
 
let ProductList = [
    Product(name: "소스케", ImageName: "Sosuke", movie: "벼랑위의 포뇨", price: 124000, description: "5살 남자 아이. 본작품의 주인공. 벼랑 위에 있는 2~3층 정도 되는 주택에서 엄마와 함께 살고 있다."),
    Product(name: "포뇨", ImageName: "Ponyo", movie: "벼랑위의 포뇨", price: 134000, description: "귀여운 물고기. 햄을 굉장히 좋아하며, 자신에게 적대적인 태도를 보이는 사람 에게는 입으로 물총을 쏴서 응수한다."),
    Product(name: "소피아", ImageName: "Sophia", movie: "하울의 움직이는 성", price: 102000, description: "어린 소녀지만 마법 때문에 90살의 늙은 할머니 모습이 되어버렸다. 하지만 삶을 여유롭게 포용할 수 있는 마음의 소유자."),
    Product(name: "하울", ImageName: "Howl", movie: "하울의 움직이는 성", price: 134000, description: "움직이는 성의 주인이자 뛰어난 마법사. 잘생긴 외모로 여성들의 심장을 빼앗아간다는 으스스한 소문의 주인공이기도 하다."),
    Product(name: "캘시퍼", ImageName: "Calcifer", movie: "하울의 움직이는 성", price: 104000, description: "하울이 어렸을 때 하울과 계약을 맺고 하울의 심장을 가진 대신, 하울의 성에 묶여 동력원 겸 관리자가 된다.")
]

Product 모델 활용

이제 만들어준 모델을 ProductRow.swift 파일에서 Product 프로퍼티를 만들고, 하드코딩되어 있던 값을 찾아서 아래와 같이 수정합니다.

swift

UNFOLDED

// ProductRow
 
Struct Product: View {
  let product: Product
  
  var productImage: some View {
      Image("Sosuke") -> Image(product.ImageName)
  }
   var productDescription: some View {
      Text("소스케")  ->  Text(product.name)
      Text("5살 남자 ... 있다.") -> Text(product.description)
  }
   var footerView: some View {
     Text("벼랑위의 포뇨")  ->  Text(product.movie)
  }
}

이렇게 product 프로퍼티를 추가했으니 ProductRow를 생성할 때 초깃값을 지정해줘야 합니다. ProductRow가 사용되는 프리뷰와 Home.swift 파일의 코드를 아래와 같이 수정하겠습니다.

swift

UNFOLDED

// ProductRow
 
struct ProductRow_preview: PreviewProvider {
    static var previews: some View {
        ProductRow(product: ProductList[0])
    }
}

swift

UNFOLDED

// Home
 
struct Home: View {
    var body: some View {
        VStack(spacing: 0) {
                ProductRow(product: ProductList[0])
                ProductRow(product: ProductList[1])
                ProductRow(product: ProductList[2])
                ProductRow(product: ProductList[3])
                ProductRow(product: ProductList[4])
        }
    }
}

이제 Home.swift 파일에서 프리뷰를 확인해보면 전달받은 데이터에 따라 다른 결과가 나타나는 것을 확인할 수 있습니다.

 

읽어주셔서 감사합니다🤟

 

Project10 게시글 관련글

[프로젝트/간단] - SwiftUI Project10 : 영화 캐릭터 정보 앱 #1

[프로젝트/간단] - SwiftUI Project10 : 영화 캐릭터 정보 앱 #3 - JSON