콘텐츠 메인

- 시리즈 탭 UI 페이지 생성

SodaLive/Sources/Content/Main/V2/Series/OriginalAudioDrama/ContentMainOriginalAudioDramaItemView.swift

@@ -6,13 +6,103 @@
 //
 
 import SwiftUI
+import Kingfisher
 
 struct ContentMainOriginalAudioDramaItemView: View {
+    
+    let itemWidth: CGFloat
+    let item: SeriesListItem
+    let isAll: Bool
+    
     var body: some View {
-        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
+        VStack(alignment: .leading, spacing: 8) {
+            ZStack {
+                KFImage(URL(string: item.coverImage))
+                    .cancelOnDisappear(true)
+                    .downsampling(
+                        size: CGSize(
+                            width: itemWidth,
+                            height: (itemWidth * 636) / 450
+                        )
+                    )
+                    .resizable()
+                    .scaledToFill()
+                    .frame(width: itemWidth, height: (itemWidth * 636) / 450, alignment: .center)
+                    .cornerRadius(5)
+                    .clipped()
+                    .onTapGesture {
+                        AppState.shared
+                            .setAppStep(step: .seriesDetail(seriesId: item.seriesId))
+                    }
+                
+                VStack(alignment: .leading, spacing: 0) {
+                    HStack(spacing: 3.3) {
+                        if !item.isComplete && item.isNew {
+                            SeriesItemBadgeView(title: "신작", backgroundColor: .button)
+                        }
+                        
+                        if item.isComplete {
+                            SeriesItemBadgeView(title: "완결", backgroundColor: Color(hex: "002abd"))
+                        }
+                        
+                        if item.isPopular {
+                            SeriesItemBadgeView(title: "인기", backgroundColor: Color(hex: "ec6033"))
+                        }
+                        
+                        Spacer()
+                        
+                        if !isAll {
+                            SeriesItemBadgeView(title: "총 \(item.numberOfContent)화", backgroundColor: Color.gray33.opacity(0.7))
+                        }
+                    }
+                    
+                    Spacer()
+                    
+                    HStack {
+                        Spacer()
+                        
+                        if isAll {
+                            SeriesItemBadgeView(title: "총 \(item.numberOfContent)화", backgroundColor: Color.gray33.opacity(0.7))
+                        }
+                    }
+                }
+                .padding(3.3)
+            }
+            .frame(width: itemWidth, height: (itemWidth * 636) / 450, alignment: .center)
+            
+            Text(item.title)
+                .font(.custom(Font.medium.rawValue, size: 12))
+                .foregroundColor(Color.grayee)
+                .lineLimit(1)
+            
+            if isAll {
+                Text(item.publishedDaysOfWeek)
+                    .font(.custom(Font.medium.rawValue, size: 11))
+                    .foregroundColor(Color.gray77)
+            }
+        }
+        .frame(width: itemWidth)
     }
 }
 
 #Preview {
-    ContentMainOriginalAudioDramaItemView()
+    ContentMainOriginalAudioDramaItemView(
+        itemWidth: 150,
+        item: SeriesListItem(
+            seriesId: 1,
+            title: "제목, 관심사,프로필+방장, 참여인원(어딘가..)",
+            coverImage: "https://test-cf.sodalive.net/profile/default-profile.png",
+            publishedDaysOfWeek: "매주 수, 토요일",
+            isComplete: true,
+            creator: SeriesListItemCreator(
+                creatorId: 1,
+                nickname: "creator",
+                profileImage: "https://test-cf.sodalive.net/profile/default-profile.png"
+            ),
+            numberOfContent: 10,
+            isNew: false,
+            isPopular: true
+        ),
+        isAll: false
+    )
 }

SodaLive/Sources/Content/Main/V2/Series/OriginalAudioDrama/ContentMainOriginalAudioDramaView.swift

@@ -8,11 +8,75 @@
 import SwiftUI
 
 struct ContentMainOriginalAudioDramaView: View {
+    
+    let itemList: [SeriesListItem]
+    let onClickMore: () -> Void
+    
     var body: some View {
-        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
+        VStack(spacing: 13.3) {
+            HStack(spacing: 0) {
+                Text("오리지널 오디오 드라마")
+                    .font(.custom(Font.bold.rawValue, size: 18.3))
+                    .foregroundColor(.grayee)
+                
+                Spacer()
+                
+                Image("ic_forward")
+                    .onTapGesture { onClickMore() }
+            }
+            .padding(.horizontal, 13.3)
+            
+            ScrollView(.horizontal, showsIndicators: false) {
+                HStack(spacing: 13.3) {
+                    ForEach(0..<itemList.count, id: \.self) { index in
+                        let item = itemList[index]
+                        
+                        ContentMainOriginalAudioDramaItemView(
+                            itemWidth: 150,
+                            item: item,
+                            isAll: false
+                        )
+                    }
+                }
+                .padding(.horizontal, 13.3)
+            }
+        }
     }
 }
 
 #Preview {
-    ContentMainOriginalAudioDramaView()
+    ContentMainOriginalAudioDramaView(
+        itemList: [
+            SeriesListItem(
+                seriesId: 1,
+                title: "제목, 관심사,프로필+방장, 참여인원(어딘가..)",
+                coverImage: "https://test-cf.sodalive.net/profile/default-profile.png",
+                publishedDaysOfWeek: "매주 수, 토요일",
+                isComplete: true,
+                creator: SeriesListItemCreator(
+                    creatorId: 1,
+                    nickname: "creator",
+                    profileImage: "https://test-cf.sodalive.net/profile/default-profile.png"
+                ),
+                numberOfContent: 10,
+                isNew: false,
+                isPopular: true
+            ),
+            SeriesListItem(
+                seriesId: 2,
+                title: "제목2",
+                coverImage: "https://test-cf.sodalive.net/profile/default-profile.png",
+                publishedDaysOfWeek: "랜덤",
+                isComplete: false,
+                creator: SeriesListItemCreator(
+                    creatorId: 1,
+                    nickname: "creator",
+                    profileImage: "https://test-cf.sodalive.net/profile/default-profile.png"
+                ),
+                numberOfContent: 10,
+                isNew: true,
+                isPopular: false
+            )
+        ]
+    ) {}
 }