[Project] WishListApp #2 / UI 작업 및 데이터 적용하기

 

 

오늘은 위시 리스트의 UI작업과 화면에 Data를 띄우는 작업을 하였습니다!

그럼 시작해볼까욧?! ✨

 

WishListApp UI

WishListApp의 메인화면은 그저 깔끔하고 심플했으면 좋겠다라고 생각을 했어요!

그래서 평소에 제가 즐겨쓰는 앱인 " 29CM "의 상품 화면과 비슷하게 만들어보자고 생각하게 되었습니다! 

 

29CM 앱의 상품 페이지 캡쳐 화면

 

내가 구현한 Main.storyBoard

 

아래 Add to Wish 버튼과 Next to Item 이 있는 View는 고정인 상태로 Description이 길어지게 되면 View가 스크롤이 되게끔 구현을 해보려고 합니다! 글씨체는 다르지만 그래도 정말 깔끔한 UI 같아요!ㅎㅎ

 

 

 

 

WishListApp Data 적용하기

 

URLSession을 통해 변환한 데이터를 사용하기 위해 ProductDataManager의 인스턴스를 만들어줍니다!

let dataManager = ProductDataManager()

 

랜덤한 id 값을 형성하여 데이터를 가져오기 위해 randomID 변수와 함수를 만들어주었어요~!

var randomid = 0

func setRandomID() {
    guard let randomId = (1...100).randomElement() else { return }
    randomid = randomId
}

 

이제 dataManager를 통해 getProductData의 콜백 함수를 사용해 값을 데이터를 꺼내옵시다!

func setDataAndLabel() {
    dataManager.getProductData(id: randomid ) { product in
        DispatchQueue.main.async {
            if let product = product {
                dump(product)
                // 데이터 사용하는 코드
            }
        }
    }
}

이 때, 데이터를 UI작업에 사용하기 위해서는 DispatchQueue.main.async 를 꼭 사용해야 합니다! 백그라운드 쓰레드에서 처리된 데이터를 메인 쓰레드로 안전하게 전송해줍니다.

 

데이터를 UI에 표시하기 위한 코드를 재사용하여 사용하기 위해서 따로 함수로 만들어주었습니다.

func setData(_ product: Product) {
    
    if let url = URL(string: product.thumbnail) {
        URLSession.shared.dataTask(with: url) { data, response, error in
            if let data = data, error == nil {
                DispatchQueue.main.async {
                    self.productImageView.image = UIImage(data: data)
                }
            }
        }.resume()
    }
    productBrandLabel.text = product.brand
    productTitleLabel.text = product.title
    productPriceLabel.text = "\(product.price) 원"
    productDescriptionLabel.text = product.description
}

이 때, url 주소로 이루어진 이미지 파일을 사용하기 위해서는 URLSession을 통한 data를 빼내는 작업을 수행해주었어야 했어요!

 

setDataAndLabel() 함수의 // 데이터 사용하는 코드 에 해당 setData(product) 함수를 넣어주었습니다.

이제 함수를 만들었으면 실행을 시켜야겠죠?!

viewDidLoad()에 함수를 넣어서 초기화면 구현을 해주었습니다.

override func viewDidLoad() {
    super.viewDidLoad()
    setRandomID()
    setDataAndLabel()
}

 

 

추가로 Next to Item 버튼이 클릭되었을 때, 화면에 나타나는 데이터를 변화시키기 위해서 randomID를 출력하는 함수와 해당 data를 가져와서 ui를 그리는 함수를 추가해주었어요!

@IBAction func nextToItemTapped(_ sender: UIButton) {
    setRandomID()
    setDataAndLabel()
}

 

 

 

ViewController의 전체코드

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var productImageView: UIImageView!
    @IBOutlet weak var productBrandLabel: UILabel!
    @IBOutlet weak var productTitleLabel: UILabel!
    @IBOutlet weak var productPriceLabel: UILabel!
    @IBOutlet weak var productDescriptionLabel: UILabel!
    @IBOutlet weak var addToWishButton: UIButton!
    
    let dataManager = ProductDataManager()
    
    var randomid = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setRandomID()
        setDataAndLabel()
    }
    
    func setRandomID() {
        guard let randomId = (1...100).randomElement() else { return }
        randomid = randomId
    }
    
    func setDataAndLabel() {
        dataManager.getProductData(id: randomid ) { product in
            DispatchQueue.main.async {
                if let product = product {
                    dump(product)
                    self.setData(product)
                }
            }
        }
    }
    
    func setData(_ product: Product) {
        
        if let url = URL(string: product.thumbnail) {
            URLSession.shared.dataTask(with: url) { data, response, error in
                if let data = data, error == nil {
                    DispatchQueue.main.async {
                        self.productImageView.image = UIImage(data: data)
                    }
                }
            }.resume()
        }
        productBrandLabel.text = product.brand
        productTitleLabel.text = product.title
        productPriceLabel.text = "\(product.price) 원"
        productDescriptionLabel.text = product.description
    }
    
    @IBAction func addToWishTapped(_ sender: UIButton) {
        
    }
    
    @IBAction func nextToItemTapped(_ sender: UIButton) {
        setRandomID()
        setDataAndLabel()
    }
}

 

 

 

 

구현 화면

 

 

 

오늘은 여기까지~!

내일은 Add to Wish 버튼이 클릭되었을 때, 해당 값을 CoreData에 저장하는 로직을 구현해보도록 하겠습니다~!