[week07] 7주차 과제

[rosejinse]

#️⃣ 연관된 이슈

• resolve [week07] 7주차 과제 #6

📝 작업 내용

SwiftUI로 TVING 메인 화면을 구현하였습니다.

• Model 작업
• header
• MainPoster
• '오늘의 티빙 TOP 20'
• 실시간 인기 LIVE
• 실시간 인기 영화
• 야구 로고
• 채널 로고
• PD의 인생작 TOP 5
• footer
• scrollView
• header 영역 고정

🖥️ 주요 코드 설명

LiveItemView
생성해둔 Model의 데이터를 불러와서 화면을 구성할 수 있도록 아래와 같이 ItemView를 만들었습니다.

struct LiveItemView: View {
    let item: LiveModel
    
    var body: some View {
        VStack (alignment: .leading, spacing: 8){
            Image(uiImage: item.thumbnail)
                .resizable()
                .scaledToFill()
                .frame(width: 160, height: 80)
                .cornerRadius(3)
            
            HStack(alignment: .top, spacing: 8){
                Text(item.ranking)
                    .font(.system(size: 19, weight: .bold, design: .default))
                    .italic(true)
                    .foregroundColor(.white)
                VStack(alignment: .leading) {
                    Text(item.name)
                        .font(.caption)
                        .foregroundColor(.white)
                    Text(item.detail)
                        .font(.caption2)
                        .foregroundColor(.gray)
                    Text(item.rating)
                        .font(.caption2)
                        .foregroundColor(.gray)
                }
            }
        }
    }
}

LiveView
만들어둔 LiveItemView를 불러와서 LiveModel의 더미데이터와 연결하는 작업과 타이틀, 가로스크롤뷰의 배치를 해주었습니다.

struct LiveView: View {
    @State private var liveItems = LiveModel.dummy()
    
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            HStack {
                Text("실시간 인기 LIVE")
                    .font(.title3)
                    .bold()
                    .foregroundColor(.white)
                    .padding(.horizontal)
                Spacer()
                Text("더보기")
                    .font(.caption)
                    .foregroundColor(.gray)
            }
            .padding(.horizontal, 10)
            
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 8) {
                    ForEach(liveItems.indices, id: \.self) { index in LiveItemView(item: liveItems[index])
                    }
                }
                .padding(.horizontal)
            }
        }
        .padding(.top, 20)
    }
}

HomeView
MainHeaderView, TabBarView는 스크롤 되지 않도록 ScrollView 외부에 위치시켰으며, 나머지 View들은 세로 ScrollView에 넣어 구현했습니다.

struct HomeView: View {
    var body: some View {
        VStack(spacing: 0) {
            MainHeaderView()
            TabBarView()
            ScrollView {
                VStack(spacing: 28) {
                    MainPosterView()
                    Top20SectionView()
                    LiveView()
                    MovieView()
                    BaseballView()
                    ChannelView()
                    PdPickView()
                    FooterView()
                }
            }
        }
        .background(Color.black)
    }
}

📷 스크린샷

과제 구현 화면

📢 리뷰어에게

사실 SwiftUI를 처음 사용해봐서 코드가 효율적으로 잘 작성된 건 지 모르겠습니다
불필요한 코드나 이건 왜 쓴 거지? 싶은 코드가 있다면 편하게 리뷰에 코멘트 남겨주십쇼!!!
스유 관련된 것 뿐만 아니라 프로젝트 구조나 모든 것에 대한 피드백 환영합니당 🙌

[KHW01104]

제가 작성한 코드와 전체적인 흐름이 유사해서 보기 좋았습니다!
수고하셨어요! 😃

[KHW01104]

dusan이 아니라 doosan 입니다! 😂

[rosejinse]

헐. 가장 큰 실수를 저지르다.
어쩐지 쓰면서 이상하더라니..... 바로 수정해야겟습니다

[KHW01104]

저와 같은 방식으로 HomeView를 작성하셨네요~!

[KHW01104]

ZStack으로 정리하는 방법도 있겠네요....😯

[hye0njuoo]

정말 깔끔하고 필요한부분만 딱 있는 정석 코드인것 같아요! 저는 모델을 한곳에 몰아뒀는데 분리하는게 더 가독성 좋은것 같습니당! 그리고 배열에서 Indices로 순회하는 방식도 인상 깊었어요!! 많이 배워갑니다~! 늦은 코리 죄송해요! 수고하셨습니당

[hye0njuoo]

uikit 말고도 foundation을 import하면 struct, let을 사용할수 있어요!!요!!https://developer.apple.com/documentation/foundation

[hye0njuoo]

깔끔한 레이아웃 배치 너무 좋은거 같아요!!!

[hye0njuoo]

요기에 init을 따로 추가해둔 이유가 있을까요??

[hye0njuoo]

저는 반복문 요소에 대해서 identifiable로 구별했는데 indices로도 되는군요??? 더 깔끔하고 안전한것 같아요!! 덕분에 배워갑니다~!
https://developer.apple.com/documentation/swiftui/binding/indices-swift.property