크리에이터 콘텐츠 리스트 - 고정 콘텐츠 핀 추가

- 미리듣기 없는 콘텐츠는 재생 버튼이 보이지 않도록 수정

Podfile.lock

@@ -51,4 +51,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: cdff30c96e85662f4de75ddd8d54358311c1e629
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.14.3

SodaLive.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -180,6 +180,24 @@
         "version" : "6.6.0"
       }
     },
+    {
+      "identity" : "sdwebimage",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/SDWebImage/SDWebImage.git",
+      "state" : {
+        "revision" : "59730af512c06fb569c119d737df4c1c499e001d",
+        "version" : "5.18.10"
+      }
+    },
+    {
+      "identity" : "sdwebimageswiftui",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/SDWebImage/SDWebImageSwiftUI.git",
+      "state" : {
+        "revision" : "261b6cec35686d2dc192b809ab50742b4502a73b",
+        "version" : "2.2.6"
+      }
+    },
     {
       "identity" : "swift-protobuf",
       "kind" : "remoteSourceControl",

SodaLive/Resources/Assets.xcassets/btn_add.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "btn_add.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/btn_minus_round_rect.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "btn_minus_round_rect.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/btn_plus_round_rect.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "btn_plus_round_rect.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/ic_coupon.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "ic_coupon.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/ic_logo2.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "ic_logo2.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/ic_notice_triangle.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "ic_notice_triangle.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/ic_pin.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "ic_pin.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/ic_pin_cancel.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "ic_pin_cancel.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/ic_refresh.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "ic_refresh.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/ic_roulette.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "ic_roulette.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/ic_roulette_settings.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "ic_roulette_settings.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/ic_trash_can.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "ic_trash_can.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/img_sample.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "img_sample.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/splash/splash_bg_2024.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "splash_bg_2024.jpg",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/splash/splash_logo_2024.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "splash_logo_2024.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/splash/splash_logo_dragon_2024.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "splash_logo_dragon_2024.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Sources/App/AppStep.swift

@@ -72,8 +72,6 @@ enum AppStep {
     
     case userProfileFanTalkAll(userId: Int)
     
-    case creatorNoticeWrite(notice: String)
-    
     case createLive(
         timeSettingMode: LiveRoomCreateViewModel.TimeSettingMode,
         onSuccess: (CreateLiveRoomResponse) -> Void
@@ -113,4 +111,12 @@ enum AppStep {
     case curationAll(title: String, curationId: Int)
     
     case contentRankingAll
+    
+    case creatorCommunityAll(creatorId: Int)
+    
+    case creatorCommunityWrite(onSuccess: () -> Void)
+    
+    case creatorCommunityModify(postId: Int, onSuccess: () -> Void)
+    
+    case canCoupon
 }

SodaLive/Sources/Content/All/ContentNewAllItemView.swift

@@ -15,40 +15,43 @@ struct ContentNewAllItemView: View {
     @State var width: CGFloat = 0
     
     var body: some View {
-        VStack(alignment: .leading, spacing: 8) {
-            KFImage(URL(string: item.coverImageUrl))
-                .resizable()
-                .scaledToFill()
-                .frame(width: width, height: width, alignment: .top)
-                .cornerRadius(2.7)
-            
-            Text(item.title)
-                .font(.custom(Font.medium.rawValue, size: 13.3))
-                .foregroundColor(Color(hex: "d2d2d2"))
-                .frame(width: width, alignment: .leading)
-                .multilineTextAlignment(.leading)
-                .fixedSize(horizontal: false, vertical: true)
-                .lineLimit(2)
-            
-            HStack(spacing: 5.3) {
-                KFImage(URL(string: item.creatorProfileImageUrl))
+        NavigationLink {
+            ContentDetailView(contentId: item.contentId)
+        } label: {
+            VStack(alignment: .leading, spacing: 8) {
+                KFImage(URL(string: item.coverImageUrl))
                     .resizable()
                     .scaledToFill()
-                    .frame(width: 21.3, height: 21.3)
-                    .clipShape(Circle())
-                    .onTapGesture { AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId)) }
+                    .frame(width: width, height: width, alignment: .top)
+                    .cornerRadius(2.7)
                 
-                Text(item.creatorNickname)
-                    .font(.custom(Font.medium.rawValue, size: 12))
-                    .foregroundColor(Color(hex: "777777"))
-                    .lineLimit(1)
+                Text(item.title)
+                    .font(.custom(Font.medium.rawValue, size: 13.3))
+                    .foregroundColor(Color(hex: "d2d2d2"))
+                    .frame(width: width, alignment: .leading)
+                    .multilineTextAlignment(.leading)
+                    .fixedSize(horizontal: false, vertical: true)
+                    .lineLimit(2)
+                
+                HStack(spacing: 5.3) {
+                    KFImage(URL(string: item.creatorProfileImageUrl))
+                        .resizable()
+                        .scaledToFill()
+                        .frame(width: 21.3, height: 21.3)
+                        .clipShape(Circle())
+                        .onTapGesture { AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId)) }
+                    
+                    Text(item.creatorNickname)
+                        .font(.custom(Font.medium.rawValue, size: 12))
+                        .foregroundColor(Color(hex: "777777"))
+                        .lineLimit(1)
+                }
+                .padding(.bottom, 10)
+            }
+            .frame(width: width)
+            .onAppear {
+                width = (screenSize().width - 40) / 2
             }
-            .padding(.bottom, 10)
-        }
-        .frame(width: width)
-        .onTapGesture { AppState.shared.setAppStep(step: .contentDetail(contentId: item.contentId)) }
-        .onAppear {
-            width = (screenSize().width - 40) / 2
         }
     }
 }

SodaLive/Sources/Content/All/ContentNewAllView.swift

@@ -17,63 +17,63 @@ struct ContentNewAllView: View {
     ]
     
     var body: some View {
-        BaseView(isLoading: $viewModel.isLoading) {
-            VStack(spacing: 0) {
-                DetailNavigationBar(title: "새로운 콘텐츠")
-                
-                Text("※ 최근 2주간 등록된 새로운 콘텐츠 입니다.")
-                    .font(.custom(Font.medium.rawValue, size: 14.7))
-                    .foregroundColor(Color(hex: "bbbbbb"))
-                    .padding(.horizontal, 13.3)
-                    .padding(.vertical, 8)
-                    .frame(width: screenSize().width, alignment: .leading)
-                    .background(Color(hex: "222222"))
-                    .padding(.top, 13.3)
-                
-                ContentMainNewContentThemeView(
-                    themes: viewModel.themeList,
-                    selectTheme: {
-                        viewModel.selectedTheme = $0
-                    },
-                    selectedTheme: $viewModel.selectedTheme
-                ).padding(.top, 13.3)
-                
-                HStack(spacing: 0) {
-                    Text("전체")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(Color(hex: "e2e2e2"))
+        NavigationView {
+            BaseView(isLoading: $viewModel.isLoading) {
+                VStack(alignment: .leading, spacing: 0) {
+                    DetailNavigationBar(title: "새로운 콘텐츠")
                     
-                    Text("\(viewModel.totalCount)")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(Color(hex: "ff5c49"))
-                        .padding(.leading, 8)
+                    Text("※ 최근 2주간 등록된 새로운 콘텐츠 입니다.")
+                        .font(.custom(Font.medium.rawValue, size: 14.7))
+                        .foregroundColor(Color(hex: "bbbbbb"))
+                        .padding(.horizontal, 13.3)
+                        .padding(.vertical, 8)
+                        .frame(width: screenSize().width, alignment: .leading)
+                        .background(Color(hex: "222222"))
+                        .padding(.top, 13.3)
                     
-                    Text("개")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(Color(hex: "e2e2e2"))
-                        .padding(.leading, 2)
+                    ContentMainNewContentThemeView(
+                        themes: viewModel.themeList,
+                        selectTheme: {
+                            viewModel.selectedTheme = $0
+                        },
+                        selectedTheme: $viewModel.selectedTheme
+                    ).padding(.top, 13.3)
                     
-                    Spacer()
-                }
-                .padding(.vertical, 13.3)
-                .padding(.horizontal, 20)
-                
-                ScrollView(.vertical, showsIndicators: false) {
-                    LazyVGrid(columns: columns, spacing: 13.3) {
-                        ForEach(0..<viewModel.newContentList.count, id: \.self) { index in
-                            ContentNewAllItemView(item: viewModel.newContentList[index])
-                                .onAppear {
-                                    if index == viewModel.newContentList.count - 1 {
-                                        viewModel.getNewContentList()
+                    HStack(spacing: 0) {
+                        Text("전체")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "e2e2e2"))
+                        
+                        Text("\(viewModel.totalCount)")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "ff5c49"))
+                            .padding(.leading, 8)
+                        
+                        Text("개")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "e2e2e2"))
+                            .padding(.leading, 2)
+                    }
+                    .padding(.vertical, 13.3)
+                    .padding(.horizontal, 20)
+                    
+                    ScrollView(.vertical, showsIndicators: false) {
+                        LazyVGrid(columns: columns, spacing: 13.3) {
+                            ForEach(0..<viewModel.newContentList.count, id: \.self) { index in
+                                ContentNewAllItemView(item: viewModel.newContentList[index])
+                                    .onAppear {
+                                        if index == viewModel.newContentList.count - 1 {
+                                            viewModel.getNewContentList()
+                                        }
                                     }
-                                }
+                            }
                         }
                     }
                 }
-            }
-            .onAppear {
-                viewModel.getThemeList()
-                viewModel.getNewContentList()
+                .onAppear {
+                    viewModel.getThemeList()
+                    viewModel.getNewContentList()
+                }
             }
         }
     }

SodaLive/Sources/Content/All/ContentRankingAllView.swift

@@ -13,135 +13,145 @@ struct ContentRankingAllView: View {
     @StateObject var viewModel = ContentRankingAllViewModel()
     
     var body: some View {
-        BaseView(isLoading: $viewModel.isLoading) {
-            VStack(spacing: 0) {
-                DetailNavigationBar(title: "인기 콘텐츠")
-                
-                VStack(spacing: 8) {
-                    Text("\(viewModel.dateString)")
-                        .font(.custom(Font.bold.rawValue, size: 14.7))
-                        .foregroundColor(Color(hex: "eeeeee"))
+        NavigationView {
+            BaseView(isLoading: $viewModel.isLoading) {
+                VStack(spacing: 0) {
+                    DetailNavigationBar(title: "인기 콘텐츠")
                     
-                    Text("※ 인기 콘텐츠의 순위는 매주 업데이트됩니다.")
-                        .font(.custom(Font.light.rawValue, size: 13.3))
-                        .foregroundColor(Color(hex: "bbbbbb"))
-                }
-                .padding(.vertical, 8)
-                .frame(width: screenSize().width - 26.7)
-                .background(Color(hex: "222222"))
-                .padding(.top, 13.3)
-                
-                ScrollView(.vertical, showsIndicators: false) {
-                    VStack(spacing: 20) {
-                        ForEach(0..<viewModel.contentRankingItemList.count, id: \.self) { index in
-                            let item = viewModel.contentRankingItemList[index]
-                            HStack(spacing: 0) {
-                                KFImage(URL(string: item.coverImageUrl))
-                                    .resizable()
-                                    .scaledToFill()
-                                    .frame(width: 66.7, height: 66.7, alignment: .top)
-                                    .clipped()
-                                    .cornerRadius(5.3)
-                                
-                                Text("\(index + 1)")
-                                    .font(.custom(Font.bold.rawValue, size: 16.7))
-                                    .foregroundColor(Color(hex: "3bb9f1"))
-                                    .padding(.horizontal, 12)
-                                
-                                VStack(alignment: .leading, spacing: 0) {
-                                    HStack(spacing: 8) {
-                                        Text(item.themeStr)
-                                            .font(.custom(Font.medium.rawValue, size: 8))
-                                            .foregroundColor(Color(hex: "3bac6a"))
-                                            .padding(2.6)
-                                            .background(Color(hex: "28312b"))
-                                            .cornerRadius(2.6)
-                                        
-                                        Text(item.duration)
-                                            .font(.custom(Font.medium.rawValue, size: 8))
-                                            .foregroundColor(Color(hex: "777777"))
-                                            .padding(2.6)
-                                            .background(Color(hex: "222222"))
-                                            .cornerRadius(2.6)
-                                    }
-                                    
-                                    Text(item.creatorNickname)
-                                        .font(.custom(Font.medium.rawValue, size: 10.7))
-                                        .foregroundColor(Color(hex: "777777"))
-                                        .padding(.vertical, 8)
-                                    
-                                    Text(item.title)
-                                        .font(.custom(Font.medium.rawValue, size: 12))
-                                        .foregroundColor(Color(hex: "d2d2d2"))
-                                        .lineLimit(2)
-                                        .padding(.top, 2.7)
-                                }
-                                
-                                Spacer()
-                                
-                                if item.price > 0 {
-                                    HStack(spacing: 8) {
-                                        Image("ic_can")
+                    VStack(spacing: 8) {
+                        Text("\(viewModel.dateString)")
+                            .font(.custom(Font.bold.rawValue, size: 14.7))
+                            .foregroundColor(Color(hex: "eeeeee"))
+                        
+                        Text("※ 인기 콘텐츠의 순위는 매주 업데이트됩니다.")
+                            .font(.custom(Font.light.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "bbbbbb"))
+                    }
+                    .padding(.vertical, 8)
+                    .frame(width: screenSize().width - 26.7)
+                    .background(Color(hex: "222222"))
+                    .padding(.top, 13.3)
+                    
+                    ContentMainRankingSortView(
+                        sorts: viewModel.contentRankingSortList,
+                        selectSort: { viewModel.selectedContentRankingSort = $0 },
+                        selectedSort: $viewModel.selectedContentRankingSort
+                    )
+                    .frame(width: screenSize().width - 26.7)
+                    .padding(.vertical, 16.7)
+                    
+                    ScrollView(.vertical, showsIndicators: false) {
+                        LazyVStack(spacing: 20) {
+                            ForEach(0..<viewModel.contentRankingItemList.count, id: \.self) { index in
+                                let item = viewModel.contentRankingItemList[index]
+                                NavigationLink {
+                                    ContentDetailView(contentId: item.contentId)
+                                } label: {
+                                    HStack(spacing: 0) {
+                                        KFImage(URL(string: item.coverImageUrl))
                                             .resizable()
-                                            .frame(width: 17, height: 17)
+                                            .scaledToFill()
+                                            .frame(width: 66.7, height: 66.7, alignment: .top)
+                                            .clipped()
+                                            .cornerRadius(5.3)
                                         
-                                        Text("\(item.price)")
-                                            .font(.custom(Font.medium.rawValue, size: 12))
-                                            .foregroundColor(Color(hex: "909090"))
+                                        Text("\(index + 1)")
+                                            .font(.custom(Font.bold.rawValue, size: 16.7))
+                                            .foregroundColor(Color(hex: "3bb9f1"))
+                                            .padding(.horizontal, 12)
+                                        
+                                        VStack(alignment: .leading, spacing: 0) {
+                                            HStack(spacing: 8) {
+                                                Text(item.themeStr)
+                                                    .font(.custom(Font.medium.rawValue, size: 8))
+                                                    .foregroundColor(Color(hex: "3bac6a"))
+                                                    .padding(2.6)
+                                                    .background(Color(hex: "28312b"))
+                                                    .cornerRadius(2.6)
+                                                
+                                                Text(item.duration)
+                                                    .font(.custom(Font.medium.rawValue, size: 8))
+                                                    .foregroundColor(Color(hex: "777777"))
+                                                    .padding(2.6)
+                                                    .background(Color(hex: "222222"))
+                                                    .cornerRadius(2.6)
+                                            }
+                                            
+                                            Text(item.creatorNickname)
+                                                .font(.custom(Font.medium.rawValue, size: 10.7))
+                                                .foregroundColor(Color(hex: "777777"))
+                                                .padding(.vertical, 8)
+                                            
+                                            Text(item.title)
+                                                .font(.custom(Font.medium.rawValue, size: 12))
+                                                .foregroundColor(Color(hex: "d2d2d2"))
+                                                .lineLimit(2)
+                                                .padding(.top, 2.7)
+                                        }
+                                        
+                                        Spacer()
+                                        
+                                        if item.price > 0 {
+                                            HStack(spacing: 8) {
+                                                Image("ic_can")
+                                                    .resizable()
+                                                    .frame(width: 17, height: 17)
+                                                
+                                                Text("\(item.price)")
+                                                    .font(.custom(Font.medium.rawValue, size: 12))
+                                                    .foregroundColor(Color(hex: "909090"))
+                                            }
+                                        } else {
+                                            Text("무료")
+                                                .font(.custom(Font.medium.rawValue, size: 12))
+                                                .foregroundColor(Color(hex: "ffffff"))
+                                                .padding(.horizontal, 5.3)
+                                                .padding(.vertical, 2.7)
+                                                .background(Color(hex: "cf5c37"))
+                                                .cornerRadius(2.6)
+                                        }
+                                    }
+                                    .frame(height: 66.7)
+                                    .contentShape(Rectangle())
+                                    .onAppear {
+                                        if index == viewModel.contentRankingItemList.count - 1 {
+                                            viewModel.getContentRanking()
+                                        }
                                     }
-                                } else {
-                                    Text("무료")
-                                        .font(.custom(Font.medium.rawValue, size: 12))
-                                        .foregroundColor(Color(hex: "ffffff"))
-                                        .padding(.horizontal, 5.3)
-                                        .padding(.vertical, 2.7)
-                                        .background(Color(hex: "cf5c37"))
-                                        .cornerRadius(2.6)
-                                }
-                            }
-                            .frame(height: 66.7)
-                            .contentShape(Rectangle())
-                            .onTapGesture {
-                                AppState
-                                    .shared
-                                    .setAppStep(step: .contentDetail(contentId: item.contentId))
-                            }
-                            .onAppear {
-                                if index == viewModel.contentRankingItemList.count - 1 {
-                                    viewModel.getContentRanking()
                                 }
                             }
                         }
                     }
+                    .padding(13.3)
                 }
-                .padding(13.3)
-            }
-            
-            if viewModel.isLoading {
-                LoadingView()
-            }
-        }
-        .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
-            GeometryReader { geo in
-                HStack {
-                    Spacer()
-                    Text(viewModel.errorMessage)
-                        .padding(.vertical, 13.3)
-                        .padding(.horizontal, 6.7)
-                        .frame(width: geo.size.width - 66.7, alignment: .center)
-                        .font(.custom(Font.medium.rawValue, size: 12))
-                        .background(Color(hex: "9970ff"))
-                        .foregroundColor(Color.white)
-                        .multilineTextAlignment(.leading)
-                        .fixedSize(horizontal: false, vertical: true)
-                        .cornerRadius(20)
-                        .padding(.top, 66.7)
-                    Spacer()
+                
+                if viewModel.isLoading {
+                    LoadingView()
                 }
             }
-        }
-        .onAppear {
-            viewModel.getContentRanking()
+            .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
+                GeometryReader { geo in
+                    HStack {
+                        Spacer()
+                        Text(viewModel.errorMessage)
+                            .padding(.vertical, 13.3)
+                            .padding(.horizontal, 6.7)
+                            .frame(width: geo.size.width - 66.7, alignment: .center)
+                            .font(.custom(Font.medium.rawValue, size: 12))
+                            .background(Color(hex: "9970ff"))
+                            .foregroundColor(Color.white)
+                            .multilineTextAlignment(.leading)
+                            .fixedSize(horizontal: false, vertical: true)
+                            .cornerRadius(20)
+                            .padding(.top, 66.7)
+                        Spacer()
+                    }
+                }
+            }
+            .onAppear {
+                viewModel.getContentRankingSortType()
+                viewModel.getContentRanking()
+            }
         }
     }
 }

SodaLive/Sources/Content/All/ContentRankingAllViewModel.swift

@@ -19,6 +19,15 @@ final class ContentRankingAllViewModel: ObservableObject {
     
     @Published var dateString = ""
     @Published var contentRankingItemList = [GetAudioContentRankingItem]()
+    @Published var contentRankingSortList = [String]()
+    
+    @Published var selectedContentRankingSort = "매출" {
+        didSet {
+            page = 1
+            isLast = false
+            getContentRanking()
+        }
+    }
     
     var page = 1
     var isLast = false
@@ -28,7 +37,7 @@ final class ContentRankingAllViewModel: ObservableObject {
         if (!isLast && !isLoading && page <= 5) {
             isLoading = true
             
-            repository.getContentRanking(page: page, size: pageSize)
+            repository.getContentRanking(page: page, size: pageSize, sortType: selectedContentRankingSort)
                 .sink { result in
                     switch result {
                     case .finished:
@@ -76,4 +85,40 @@ final class ContentRankingAllViewModel: ObservableObject {
                 .store(in: &subscription)
         }
     }
+    
+    func getContentRankingSortType() {
+        repository.getContentRankingSortType()
+            .sink { result in
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                }
+            } receiveValue: { [unowned self] response in
+                let responseData = response.data
+                
+                do {
+                    let jsonDecoder = JSONDecoder()
+                    let decoded = try jsonDecoder.decode(ApiResponse<[String]>.self, from: responseData)
+                    
+                    if let data = decoded.data, decoded.success {
+                        self.contentRankingSortList.removeAll()
+                        self.contentRankingSortList.append(contentsOf: data)
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
+    }
 }

SodaLive/Sources/Content/ContentApi.swift

@@ -22,14 +22,20 @@ enum ContentApi {
     case getAudioContentCommentReplyList(commentId: Int, page: Int, size: Int)
     case deleteAudioContent(audioContentId: Int)
     case modifyAudioContent(parameters: [MultipartFormData])
-    case getMain
+    case getNewContentUploadCreatorList
+    case getMainBannerList
+    case getMainOrderList
     case getNewContentOfTheme(theme: String)
+    case getCurationList(page: Int, size: Int)
     case donation(request: AudioContentDonationRequest)
     case modifyComment(request: ModifyCommentRequest)
     case getNewContentThemeList
     case getNewContentAllOfTheme(theme: String, page: Int, size: Int)
     case getAudioContentListByCurationId(curationId: Int, page: Int, size: Int, sort: ContentCurationViewModel.Sort)
-    case getContentRanking(page: Int, size: Int)
+    case getContentRanking(page: Int, size: Int, sortType: String)
+    case getContentRankingSortType
+    case pinContent(contentId: Int)
+    case unpinContent(contentId: Int)
 }
 
 extension ContentApi: TargetType {
@@ -78,12 +84,21 @@ extension ContentApi: TargetType {
         case .modifyAudioContent:
             return "/audio-content"
             
-        case .getMain:
-            return "/audio-content/main"
+        case .getNewContentUploadCreatorList:
+            return "/audio-content/main/new-content-upload-creator"
+            
+        case .getMainBannerList:
+            return "/audio-content/main/banner-list"
+            
+        case .getMainOrderList:
+            return "/audio-content/main/order-list"
             
         case .getNewContentOfTheme:
             return "/audio-content/main/new"
             
+        case .getCurationList:
+            return "/audio-content/main/curation-list"
+            
         case .donation:
             return "/audio-content/donation"
             
@@ -101,20 +116,33 @@ extension ContentApi: TargetType {
             
         case .getContentRanking:
             return  "/audio-content/ranking"
+            
+        case .getContentRankingSortType:
+            return  "/audio-content/ranking-sort-type"
+            
+        case .pinContent(let contentId):
+            return  "/audio-content/pin-to-the-top/\(contentId)"
+            
+        case .unpinContent(let contentId):
+            return  "/audio-content/unpin-at-the-top/\(contentId)"
         }
     }
     
     var method: Moya.Method {
         switch self {
         case .getAudioContentList, .getAudioContentDetail, .getOrderList, .getAudioContentThemeList,
-                .getAudioContentCommentList, .getAudioContentCommentReplyList, .getMain, .getNewContentOfTheme,
-                .getNewContentThemeList, .getNewContentAllOfTheme, .getAudioContentListByCurationId, .getContentRanking:
+                .getAudioContentCommentList, .getAudioContentCommentReplyList, .getNewContentOfTheme,
+                .getNewContentThemeList, .getNewContentAllOfTheme, .getAudioContentListByCurationId, .getContentRanking,
+                .getContentRankingSortType:
             return .get
             
-        case .likeContent, .modifyAudioContent, .modifyComment:
+        case .getMainBannerList, .getMainOrderList, .getNewContentUploadCreatorList, .getCurationList:
+            return .get
+            
+        case .likeContent, .modifyAudioContent, .modifyComment, .unpinContent:
             return .put
             
-        case .registerComment, .orderAudioContent, .addAllPlaybackTracking, .uploadAudioContent, .donation:
+        case .registerComment, .orderAudioContent, .addAllPlaybackTracking, .uploadAudioContent, .donation, .pinContent:
             return .post
             
         case .deleteAudioContent:
@@ -158,7 +186,7 @@ extension ContentApi: TargetType {
         case .addAllPlaybackTracking(let request):
             return .requestJSONEncodable(request)
             
-        case .getAudioContentThemeList, .getMain:
+        case .getAudioContentThemeList, .getMainBannerList, .getMainOrderList, .getNewContentUploadCreatorList:
             return .requestPlain
             
         case .uploadAudioContent(let parameters):
@@ -220,13 +248,28 @@ extension ContentApi: TargetType {
             
             return .requestParameters(parameters: parameters, encoding: URLEncoding.queryString)
             
-        case .getContentRanking(let page, let size):
+        case .getContentRanking(let page, let size, let sortType):
             let parameters = [
                 "page": page - 1,
                 "size": size,
+                "sort-type": sortType
             ] as [String : Any]
             
             return .requestParameters(parameters: parameters, encoding: URLEncoding.queryString)
+            
+        case .getContentRankingSortType:
+            return .requestPlain
+            
+        case .getCurationList(let page, let size):
+            let parameters = [
+                "page": page - 1,
+                "size": size
+            ] as [String : Any]
+            
+            return .requestParameters(parameters: parameters, encoding: URLEncoding.queryString)
+            
+        case .pinContent, .unpinContent:
+            return .requestPlain
         }
     }
     

SodaLive/Sources/Content/ContentListItemView.swift

@@ -26,6 +26,15 @@ struct ContentListItemView: View {
                 
                 VStack(alignment: .leading, spacing: 0) {
                     HStack(spacing: 8) {
+                        if item.isScheduledToOpen {
+                            Text("오픈예정")
+                                .font(.custom(Font.medium.rawValue, size: 8))
+                                .foregroundColor(Color(hex: "3bb9f1"))
+                                .padding(2.6)
+                                .background(Color(hex: "003851"))
+                                .cornerRadius(2.6)
+                        }
+                        
                         Text(item.themeStr)
                             .font(.custom(Font.medium.rawValue, size: 8))
                             .foregroundColor(Color(hex: "3bac6a"))
@@ -39,6 +48,12 @@ struct ContentListItemView: View {
                             .padding(2.6)
                             .background(Color(hex: "222222"))
                             .cornerRadius(2.6)
+                        
+                        if item.isPin {
+                            Image("ic_pin")
+                                .resizable()
+                                .frame(width: 13.3, height: 13.3)
+                        }
                     }
                     
                     Text(item.title)
@@ -112,7 +127,9 @@ struct ContentListItemView_Previews: PreviewProvider {
                 duration: "00:04:43",
                 likeCount: 2,
                 commentCount: 0,
-                isAdult: false
+                isPin: true,
+                isAdult: false,
+                isScheduledToOpen: true
             )
         )
     }

SodaLive/Sources/Content/ContentListView.swift

@@ -13,148 +13,147 @@ struct ContentListView: View {
     @StateObject var viewModel = ContentListViewModel()
     
     var body: some View {
-        BaseView(isLoading: $viewModel.isLoading) {
-            VStack(spacing: 0) {
-                HStack(spacing: 0) {
-                    Button {
-                        AppState.shared.back()
-                    } label: {
-                        Image("ic_back")
-                            .resizable()
-                            .frame(width: 20, height: 20)
-                        
-                        Text("콘텐츠 전체보기")
-                            .font(.custom(Font.bold.rawValue, size: 18.3))
-                            .foregroundColor(Color(hex: "eeeeee"))
-                    }
-                    
-                    Spacer()
-                }
-                .padding(.horizontal, 13.3)
-                .frame(height: 50)
-                .background(Color.black)
-                
-                if userId == UserDefaults.int(forKey: .userId) {
-                    Text("새로운 콘텐츠 등록하기")
-                        .font(.custom(Font.bold.rawValue, size: 15))
-                        .foregroundColor(Color(hex: "eeeeee"))
-                        .padding(.vertical, 17)
-                        .frame(maxWidth: .infinity)
-                        .background(Color(hex: "9970ff"))
-                        .cornerRadius(5.3)
-                        .padding(.top, 13.3)
-                        .padding(.horizontal, 13.3)
-                        .onTapGesture { AppState.shared.setAppStep(step: .createContent) }
-                }
-                
-                HStack(spacing: 13.3) {
-                    Spacer()
-                    
-                    Text("최신순")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(
-                            Color(hex: "e2e2e2")
-                                .opacity(viewModel.sort == .NEWEST ? 1 : 0.5)
-                        )
-                        .onTapGesture {
-                            if viewModel.sort != .NEWEST {
-                                viewModel.sort = .NEWEST
-                            }
-                        }
-                    
-                    Text("높은 가격순")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(
-                            Color(hex: "e2e2e2")
-                                .opacity(viewModel.sort == .PRICE_HIGH ? 1 : 0.5)
-                        )
-                        .onTapGesture {
-                            if viewModel.sort != .PRICE_HIGH {
-                                viewModel.sort = .PRICE_HIGH
-                            }
-                        }
-                    
-                    Text("낮은 가격순")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(
-                            Color(hex: "e2e2e2")
-                                .opacity(viewModel.sort == .PRICE_LOW ? 1 : 0.5)
-                        )
-                        .onTapGesture {
-                            if viewModel.sort != .PRICE_LOW {
-                                viewModel.sort = .PRICE_LOW
-                            }
-                        }
-                }
-                .padding(.vertical, 13.3)
-                .padding(.horizontal, 20)
-                .background(Color(hex: "161616"))
-                .padding(.top, 13.3)
-                
-                HStack(spacing: 0) {
-                    Text("전체")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(Color(hex: "e2e2e2"))
-                    
-                    Text("\(viewModel.totalCount)")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(Color(hex: "ff5c49"))
-                        .padding(.leading, 8)
-                    
-                    Text("개")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(Color(hex: "e2e2e2"))
-                        .padding(.leading, 2)
-                    
-                    Spacer()
-                }
-                .padding(.vertical, 13.3)
-                .padding(.horizontal, 20)
-                
-                ScrollViewReader { reader in
-                    ScrollView(.vertical, showsIndicators: false) {
-                        LazyVStack(spacing: 10.7) {
-                            ScrollerToTop(reader: reader, scrollOnChange: $viewModel.scrollToTop)
+        NavigationView {
+            BaseView(isLoading: $viewModel.isLoading) {
+                VStack(spacing: 0) {
+                    HStack(spacing: 0) {
+                        Button {
+                            AppState.shared.back()
+                        } label: {
+                            Image("ic_back")
+                                .resizable()
+                                .frame(width: 20, height: 20)
                             
-                            ForEach(0..<viewModel.audioContentList.count, id: \.self) { index in
-                                let audioContent = viewModel.audioContentList[index]
-                                ContentListItemView(item: audioContent)
-                                    .contentShape(Rectangle())
-                                    .onTapGesture {
-                                        AppState
-                                            .shared
-                                            .setAppStep(
-                                                step: .contentDetail(contentId: audioContent.contentId)
-                                            )
-                                    }
-                                    .onAppear {
-                                        if index == viewModel.audioContentList.count - 1 {
-                                            viewModel.getAudioContentList()
-                                        }
+                            Text("콘텐츠 전체보기")
+                                .font(.custom(Font.bold.rawValue, size: 18.3))
+                                .foregroundColor(Color(hex: "eeeeee"))
+                        }
+                        
+                        Spacer()
+                    }
+                    .padding(.horizontal, 13.3)
+                    .frame(height: 50)
+                    .background(Color.black)
+                    
+                    if userId == UserDefaults.int(forKey: .userId) {
+                        Text("새로운 콘텐츠 등록하기")
+                            .font(.custom(Font.bold.rawValue, size: 15))
+                            .foregroundColor(Color(hex: "eeeeee"))
+                            .padding(.vertical, 17)
+                            .frame(maxWidth: .infinity)
+                            .background(Color(hex: "3bb9f1"))
+                            .cornerRadius(5.3)
+                            .padding(.top, 13.3)
+                            .padding(.horizontal, 13.3)
+                            .onTapGesture { AppState.shared.setAppStep(step: .createContent) }
+                    }
+                    
+                    HStack(spacing: 13.3) {
+                        Spacer()
+                        
+                        Text("최신순")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(
+                                Color(hex: "e2e2e2")
+                                    .opacity(viewModel.sort == .NEWEST ? 1 : 0.5)
+                            )
+                            .onTapGesture {
+                                if viewModel.sort != .NEWEST {
+                                    viewModel.sort = .NEWEST
+                                }
+                            }
+                        
+                        Text("높은 가격순")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(
+                                Color(hex: "e2e2e2")
+                                    .opacity(viewModel.sort == .PRICE_HIGH ? 1 : 0.5)
+                            )
+                            .onTapGesture {
+                                if viewModel.sort != .PRICE_HIGH {
+                                    viewModel.sort = .PRICE_HIGH
+                                }
+                            }
+                        
+                        Text("낮은 가격순")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(
+                                Color(hex: "e2e2e2")
+                                    .opacity(viewModel.sort == .PRICE_LOW ? 1 : 0.5)
+                            )
+                            .onTapGesture {
+                                if viewModel.sort != .PRICE_LOW {
+                                    viewModel.sort = .PRICE_LOW
+                                }
+                            }
+                    }
+                    .padding(.vertical, 13.3)
+                    .padding(.horizontal, 20)
+                    .background(Color(hex: "161616"))
+                    .padding(.top, 13.3)
+                    
+                    HStack(spacing: 0) {
+                        Text("전체")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "e2e2e2"))
+                        
+                        Text("\(viewModel.totalCount)")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "ff5c49"))
+                            .padding(.leading, 8)
+                        
+                        Text("개")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "e2e2e2"))
+                            .padding(.leading, 2)
+                        
+                        Spacer()
+                    }
+                    .padding(.vertical, 13.3)
+                    .padding(.horizontal, 20)
+                    
+                    ScrollViewReader { reader in
+                        ScrollView(.vertical, showsIndicators: false) {
+                            LazyVStack(spacing: 10.7) {
+                                ScrollerToTop(reader: reader, scrollOnChange: $viewModel.scrollToTop)
+                                
+                                ForEach(0..<viewModel.audioContentList.count, id: \.self) { index in
+                                    let audioContent = viewModel.audioContentList[index]
+                                    NavigationLink {
+                                        ContentDetailView(contentId: audioContent.contentId)
+                                    } label: {
+                                        ContentListItemView(item: audioContent)
+                                            .contentShape(Rectangle())
+                                            .onAppear {
+                                                if index == viewModel.audioContentList.count - 1 {
+                                                    viewModel.getAudioContentList()
+                                                }
+                                            }
                                     }
+                                }
                             }
                         }
                     }
+                    .padding(.top, 13.3)
                 }
-                .padding(.top, 13.3)
-            }
-            .onAppear {
-                viewModel.userId = userId
-                viewModel.getAudioContentList()
-            }
-            .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .bottom, autohideIn: 2) {
-                HStack {
-                    Spacer()
-                    Text(viewModel.errorMessage)
-                        .padding(.vertical, 13.3)
-                        .frame(width: screenSize().width - 66.7, alignment: .center)
-                        .font(.custom(Font.medium.rawValue, size: 12))
-                        .background(Color(hex: "9970ff"))
-                        .foregroundColor(Color.white)
-                        .multilineTextAlignment(.leading)
-                        .cornerRadius(20)
-                        .padding(.bottom, 66.7)
-                    Spacer()
+                .onAppear {
+                    viewModel.userId = userId
+                    viewModel.getAudioContentList()
+                }
+                .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .bottom, autohideIn: 2) {
+                    HStack {
+                        Spacer()
+                        Text(viewModel.errorMessage)
+                            .padding(.vertical, 13.3)
+                            .frame(width: screenSize().width - 66.7, alignment: .center)
+                            .font(.custom(Font.medium.rawValue, size: 12))
+                            .background(Color(hex: "3bb9f1"))
+                            .foregroundColor(Color.white)
+                            .multilineTextAlignment(.leading)
+                            .cornerRadius(20)
+                            .padding(.bottom, 66.7)
+                        Spacer()
+                    }
                 }
             }
         }

SodaLive/Sources/Content/ContentRepository.swift

@@ -65,14 +65,26 @@ final class ContentRepository {
         return api.requestPublisher(.modifyAudioContent(parameters: parameters))
     }
     
-    func getMain() -> AnyPublisher<Response, MoyaError> {
-        return api.requestPublisher(.getMain)
+    func getNewContentUploadCreatorList() -> AnyPublisher<Response, MoyaError> {
+        return api.requestPublisher(.getNewContentUploadCreatorList)
+    }
+    
+    func getMainBannerList() -> AnyPublisher<Response, MoyaError> {
+        return api.requestPublisher(.getMainBannerList)
+    }
+    
+    func getMainOrderList() -> AnyPublisher<Response, MoyaError> {
+        return api.requestPublisher(.getMainOrderList)
     }
     
     func getNewContentOfTheme(theme: String) -> AnyPublisher<Response, MoyaError> {
         return api.requestPublisher(.getNewContentOfTheme(theme: theme))
     }
     
+    func getCurationList(page: Int, size: Int) -> AnyPublisher<Response, MoyaError> {
+        return api.requestPublisher(.getCurationList(page: page, size: size))
+    }
+    
     func donation(contentId: Int, can: Int, comment: String) -> AnyPublisher<Response, MoyaError> {
         return api.requestPublisher(.donation(request: AudioContentDonationRequest(contentId: contentId, donationCan: can, comment: comment)))
     }
@@ -93,7 +105,19 @@ final class ContentRepository {
         return api.requestPublisher(.getAudioContentListByCurationId(curationId: curationId, page: page, size: size, sort: sort))
     }
     
-    func getContentRanking(page: Int, size: Int) -> AnyPublisher<Response, MoyaError> {
-        return api.requestPublisher(.getContentRanking(page: page, size: size))
+    func getContentRankingSortType() -> AnyPublisher<Response, MoyaError> {
+        return api.requestPublisher(.getContentRankingSortType)
+    }
+    
+    func getContentRanking(page: Int, size: Int, sortType: String = "매출") -> AnyPublisher<Response, MoyaError> {
+        return api.requestPublisher(.getContentRanking(page: page, size: size, sortType: sortType))
+    }
+    
+    func pinContent(contentId: Int) -> AnyPublisher<Response, MoyaError> {
+        return api.requestPublisher(.pinContent(contentId: contentId))
+    }
+    
+    func unpinContent(contentId: Int) -> AnyPublisher<Response, MoyaError> {
+        return api.requestPublisher(.unpinContent(contentId: contentId))
     }
 }

SodaLive/Sources/Content/Create/ContentCreateView.swift

@@ -16,6 +16,8 @@ struct ContentCreateView: View {
     @State private var isShowPhotoPicker = false
     @State private var isShowSelectAudioView = false
     @State private var isShowSelectThemeView = false
+    @State private var isShowSelectDateView = false
+    @State private var isShowSelectTimeView = false
     
     var body: some View {
         BaseView(isLoading: $viewModel.isLoading) {
@@ -37,7 +39,7 @@ struct ContentCreateView: View {
                                             .resizable()
                                             .scaledToFill()
                                             .frame(width: 107, height: 107)
-                                            .background(Color(hex: "3e3358"))
+                                            .background(Color(hex: "13181b"))
                                             .cornerRadius(8)
                                             .clipped()
                                     } else {
@@ -46,13 +48,13 @@ struct ContentCreateView: View {
                                             .scaledToFit()
                                             .padding(13.3)
                                             .frame(width: 107, height: 107)
-                                            .background(Color(hex: "3e3358"))
+                                            .background(Color(hex: "13181b"))
                                             .cornerRadius(8)
                                     }
                                     
                                     Image("ic_camera")
                                         .padding(10)
-                                        .background(Color(hex: "9970ff"))
+                                        .background(Color(hex: "3bb9f1"))
                                         .cornerRadius(30)
                                         .offset(x: 50, y: 36)
                                 }
@@ -67,15 +69,15 @@ struct ContentCreateView: View {
                                 
                                 Text(viewModel.fileName.trimmingCharacters(in: .whitespacesAndNewlines) == "" ? "파일선택" : viewModel.fileName)
                                     .font(.custom(Font.medium.rawValue, size: 16.7))
-                                    .foregroundColor(Color(hex: "9970ff"))
+                                    .foregroundColor(Color(hex: "3bb9f1"))
                                     .padding(.vertical, 10)
                                     .frame(maxWidth: .infinity)
-                                    .background(Color(hex: "9970ff").opacity(0.2))
+                                    .background(Color(hex: "13181b"))
                                     .cornerRadius(5.3)
                                     .overlay(
                                         RoundedCorner(radius: 8)
                                             .stroke(lineWidth: 2)
-                                            .foregroundColor(Color(hex: "9970ff"))
+                                            .foregroundColor(Color(hex: "3bb9f1"))
                                     )
                                     .padding(.top, 13.3)
                                     .onTapGesture { isShowSelectAudioView = true }
@@ -150,16 +152,16 @@ struct ContentCreateView: View {
                                          viewModel.theme!.theme :
                                             "테마 선택")
                                     .font(.custom(Font.bold.rawValue, size: 16.7))
-                                    .foregroundColor(Color(hex: "9970ff"))
+                                    .foregroundColor(Color(hex: "3bb9f1"))
                                 }
                                 .padding(.vertical, viewModel.theme != nil ? 8 : 13.3)
                                 .frame(maxWidth: .infinity)
-                                .background(Color(hex: "9970ff").opacity(0.2))
+                                .background(Color(hex: "13181b"))
                                 .cornerRadius(24)
                                 .overlay(
                                     RoundedRectangle(cornerRadius: 24)
                                         .stroke(lineWidth: 2)
-                                        .foregroundColor(Color(hex: "9970ff"))
+                                        .foregroundColor(Color(hex: "3bb9f1"))
                                 )
                                 .padding(.top, 13.3)
                                 .onTapGesture {
@@ -286,6 +288,84 @@ struct ContentCreateView: View {
                                             .frame(maxWidth: .infinity, alignment: .leading)
                                     }
                                     .padding(.top, 26.7)
+                                    
+                                    VStack(spacing: 13.3) {
+                                        Text("미리듣기")
+                                            .font(.custom(Font.bold.rawValue, size: 16.7))
+                                            .foregroundColor(Color(hex: "eeeeee"))
+                                            .frame(maxWidth: .infinity, alignment: .leading)
+                                        
+                                        HStack(spacing: 13.3) {
+                                            SelectButtonView(title: "생성", isChecked: viewModel.isGeneratePreview) {
+                                                if !viewModel.isGeneratePreview {
+                                                    viewModel.isGeneratePreview = true
+                                                }
+                                            }
+                                            
+                                            SelectButtonView(title: "생성 안 함", isChecked: !viewModel.isGeneratePreview) {
+                                                if viewModel.isGeneratePreview {
+                                                    viewModel.isGeneratePreview = false
+                                                }
+                                            }
+                                        }
+                                    }
+                                    .padding(.top, 26.7)
+                                    
+                                    if viewModel.isGeneratePreview {
+                                        VStack(spacing: 10) {
+                                            Text("미리듣기 시간 설정")
+                                                .font(.custom(Font.bold.rawValue, size: 16.7))
+                                                .foregroundColor(Color(hex: "eeeeee"))
+                                                .frame(maxWidth: .infinity, alignment: .leading)
+                                            
+                                            Text("미리듣기 시간을 직접 설정하지 않으면 콘텐츠 앞부분 30초가 자동으로 설정됩니다. 미리듣기의 시간제한은 없습니다.")
+                                                .font(.custom(Font.medium.rawValue, size: 13.3))
+                                                .foregroundColor(Color(hex: "777777"))
+                                                .frame(maxWidth: .infinity, alignment: .leading)
+                                            
+                                            HStack(spacing: 13.3) {
+                                                VStack(spacing: 5.3) {
+                                                    Text("시작 시간")
+                                                        .font(.custom(Font.medium.rawValue, size: 13.3))
+                                                        .foregroundColor(Color(hex: "d2d2d2"))
+                                                        .frame(maxWidth: .infinity, alignment: .leading)
+                                                    
+                                                    TextField("00:00:00", text: $viewModel.previewStartTime)
+                                                        .autocapitalization(.none)
+                                                        .disableAutocorrection(true)
+                                                        .font(.custom(Font.bold.rawValue, size: 14.6))
+                                                        .foregroundColor(Color(hex: "777777"))
+                                                        .padding(.vertical, 16.7)
+                                                        .padding(.horizontal, 13.3)
+                                                        .background(Color(hex: "222222"))
+                                                        .cornerRadius(6.7)
+                                                        .keyboardType(.default)
+                                                        .multilineTextAlignment(.center)
+                                                }
+                                                
+                                                VStack(spacing: 5.3) {
+                                                    Text("종료 시간")
+                                                        .font(.custom(Font.medium.rawValue, size: 13.3))
+                                                        .foregroundColor(Color(hex: "d2d2d2"))
+                                                        .frame(maxWidth: .infinity, alignment: .leading)
+                                                    
+                                                    TextField("00:00:30", text: $viewModel.previewEndTime)
+                                                        .autocapitalization(.none)
+                                                        .disableAutocorrection(true)
+                                                        .font(.custom(Font.bold.rawValue, size: 14.6))
+                                                        .foregroundColor(Color(hex: "777777"))
+                                                        .padding(.vertical, 16.7)
+                                                        .padding(.horizontal, 13.3)
+                                                        .background(Color(hex: "222222"))
+                                                        .cornerRadius(6.7)
+                                                        .keyboardType(.default)
+                                                        .multilineTextAlignment(.center)
+                                                }
+                                            }
+                                            .padding(.top, 3.3)
+                                        }
+                                        .padding(.top, 26.7)
+                                    }
                                 }
                             }
                             .padding(.top, 26.7)
@@ -343,62 +423,79 @@ struct ContentCreateView: View {
                             .padding(.top, 26.7)
                             .padding(.horizontal, 13.3)
                             
-                            if !viewModel.isFree {
-                                VStack(spacing: 10) {
-                                    Text("미리듣기 시간 설정")
-                                        .font(.custom(Font.bold.rawValue, size: 16.7))
-                                        .foregroundColor(Color(hex: "eeeeee"))
-                                        .frame(maxWidth: .infinity, alignment: .leading)
-                                    
-                                    Text("미리듣기 시간을 직접 설정하지 않으면 콘텐츠 앞부분 30초가 자동으로 설정됩니다. 미리듣기의 시간제한은 없습니다.")
-                                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                                        .foregroundColor(Color(hex: "777777"))
-                                        .frame(maxWidth: .infinity, alignment: .leading)
-                                    
-                                    HStack(spacing: 13.3) {
-                                        VStack(spacing: 5.3) {
-                                            Text("시작 시간")
-                                                .font(.custom(Font.medium.rawValue, size: 13.3))
-                                                .foregroundColor(Color(hex: "d2d2d2"))
-                                                .frame(maxWidth: .infinity, alignment: .leading)
-                                            
-                                            TextField("00:00:00", text: $viewModel.previewStartTime)
-                                                .autocapitalization(.none)
-                                                .disableAutocorrection(true)
-                                                .font(.custom(Font.bold.rawValue, size: 14.6))
-                                                .foregroundColor(Color(hex: "777777"))
-                                                .padding(.vertical, 16.7)
-                                                .padding(.horizontal, 13.3)
-                                                .background(Color(hex: "222222"))
-                                                .cornerRadius(6.7)
-                                                .keyboardType(.default)
-                                                .multilineTextAlignment(.center)
-                                        }
-                                        
-                                        VStack(spacing: 5.3) {
-                                            Text("종료 시간")
-                                                .font(.custom(Font.medium.rawValue, size: 13.3))
-                                                .foregroundColor(Color(hex: "d2d2d2"))
-                                                .frame(maxWidth: .infinity, alignment: .leading)
-                                            
-                                            TextField("00:00:30", text: $viewModel.previewEndTime)
-                                                .autocapitalization(.none)
-                                                .disableAutocorrection(true)
-                                                .font(.custom(Font.bold.rawValue, size: 14.6))
-                                                .foregroundColor(Color(hex: "777777"))
-                                                .padding(.vertical, 16.7)
-                                                .padding(.horizontal, 13.3)
-                                                .background(Color(hex: "222222"))
-                                                .cornerRadius(6.7)
-                                                .keyboardType(.default)
-                                                .multilineTextAlignment(.center)
+                            VStack(spacing: 13.3) {
+                                Text("예약 공개")
+                                    .font(.custom(Font.bold.rawValue, size: 16.7))
+                                    .foregroundColor(Color(hex: "eeeeee"))
+                                    .frame(maxWidth: .infinity, alignment: .leading)
+                                
+                                HStack(spacing: 13.3) {
+                                    SelectButtonView(title: "지금 공개", isChecked: !viewModel.isActiveReservation) {
+                                        if viewModel.isActiveReservation {
+                                            viewModel.isActiveReservation = false
+                                        }
+                                    }
+                                    
+                                    SelectButtonView(title: "예약 공개", isChecked: viewModel.isActiveReservation) {
+                                        if !viewModel.isActiveReservation {
+                                            viewModel.isActiveReservation = true
                                         }
                                     }
-                                    .padding(.top, 3.3)
                                 }
-                                .padding(.top, 26.7)
-                                .padding(.horizontal, 13.3)
+                                
+                                if viewModel.isActiveReservation {
+                                    HStack(spacing: 13.3) {
+                                        VStack(alignment: .leading, spacing: 6.7) {
+                                            Text("예약 날짜")
+                                                .font(.custom(Font.medium.rawValue, size: 13.3))
+                                                .foregroundColor(Color(hex: "eeeeee"))
+                                            
+                                            Button(action: {
+                                                hideKeyboard()
+                                                self.isShowSelectDateView = true
+                                            }) {
+                                                Text(viewModel.releaseDateString)
+                                                    .font(.custom(Font.medium.rawValue, size: 14.7))
+                                                    .foregroundColor(Color(hex: "eeeeee"))
+                                                    .frame(maxWidth: .infinity)
+                                                    .frame(height: 48.7)
+                                                    .overlay(
+                                                        RoundedRectangle(cornerRadius: 6.7)
+                                                            .stroke(Color(hex: "3bb9f1"), lineWidth: 1.3)
+                                                    )
+                                            }
+                                        }
+                                        
+                                        VStack(alignment: .leading, spacing: 6.7) {
+                                            Text("예약 시간")
+                                                .font(.custom(Font.medium.rawValue, size: 13.3))
+                                                .foregroundColor(Color(hex: "eeeeee"))
+                                            
+                                            Button(action: {
+                                                hideKeyboard()
+                                                self.isShowSelectTimeView = true
+                                            }) {
+                                                Text(viewModel.releaseTimeString)
+                                                    .font(.custom(Font.medium.rawValue, size: 14.7))
+                                                    .foregroundColor(Color(hex: "eeeeee"))
+                                                    .frame(maxWidth: .infinity)
+                                                    .frame(height: 48.7)
+                                                    .overlay(
+                                                        RoundedRectangle(cornerRadius: 6.7)
+                                                            .stroke(Color(hex: "3bb9f1"), lineWidth: 1.3)
+                                                    )
+                                            }
+                                        }
+                                    }
+                                    .padding(.horizontal, 13.3)
+                                    .padding(.vertical, 14.2)
+                                    .frame(maxWidth: .infinity)
+                                    .background(Color(hex: "222222"))
+                                    .padding(.top, 22.7)
+                                }
                             }
+                            .padding(.top, 26.7)
+                            .padding(.horizontal, 13.3)
                             
                             VStack(spacing: 0) {
                                 HStack(alignment: .top, spacing: 0) {
@@ -407,7 +504,7 @@ struct ContentCreateView: View {
                                         .foregroundColor(Color.white)
                                         .frame(height: 50)
                                         .frame(maxWidth: .infinity)
-                                        .background(Color(hex: "9970ff"))
+                                        .background(Color(hex: "3bb9f1"))
                                         .cornerRadius(10)
                                         .padding(13.3)
                                 }
@@ -449,6 +546,14 @@ struct ContentCreateView: View {
                         }
                     }
                     
+                    if isShowSelectDateView {
+                        SelectDatePicker(selectedDate: $viewModel.releaseDate, isShowing: $isShowSelectDateView)
+                    }
+                    
+                    if isShowSelectTimeView {
+                        QuarterTimePickerView(selectedTime: $viewModel.releaseTime, isShowing: $isShowSelectTimeView)
+                    }
+                    
                     if isShowPhotoPicker {
                         ImagePicker(
                             isShowing: $isShowPhotoPicker,
@@ -494,7 +599,7 @@ struct ContentCreateView: View {
                                 .padding(.vertical, 13.3)
                                 .frame(width: screenSize().width - 66.7, alignment: .center)
                                 .font(.custom(Font.medium.rawValue, size: 12))
-                                .background(Color(hex: "9970ff"))
+                                .background(Color(hex: "3bb9f1"))
                                 .foregroundColor(Color.white)
                                 .multilineTextAlignment(.center)
                                 .cornerRadius(20)
@@ -522,11 +627,11 @@ struct SelectButtonView: View {
             
             Text(title)
                 .font(.custom(Font.bold.rawValue, size: 14.7))
-                .foregroundColor(isChecked ? .white : Color(hex: "9970ff"))
+                .foregroundColor(isChecked ? .white : Color(hex: "80D8FF"))
         }
         .frame(height: 48.7)
         .frame(maxWidth: .infinity)
-        .background(isChecked ? Color(hex: "9970ff") : Color(hex: "1f1734"))
+        .background(isChecked ? Color(hex: "3BB9F1") : Color(hex: "13181B"))
         .cornerRadius(6.7)
         .onTapGesture {
             hideKeyboard()

SodaLive/Sources/Content/Create/ContentCreateViewModel.swift

@@ -34,6 +34,7 @@ final class ContentCreateViewModel: ObservableObject {
     }
     
     @Published var isAvailableComment = true
+    @Published var isActiveReservation = false
     @Published var isAdult = false
     @Published var priceString = "0" {
         didSet {
@@ -55,14 +56,30 @@ final class ContentCreateViewModel: ObservableObject {
             if isFree {
                 priceString = "0"
                 isOnlyRental = false
+                isGeneratePreview = true
             }
         }
     }
     
     @Published var isOnlyRental = false
+    @Published var isGeneratePreview = true
     
     @Published var previewStartTime: String = ""
     @Published var previewEndTime: String = ""
+    @Published var releaseDateString: String = Date().convertDateFormat(dateFormat: "yyyy.MM.dd")
+    @Published var releaseTimeString: String = Date().convertDateFormat(dateFormat: "a hh:mm")
+    
+    var releaseDate = Date() {
+        willSet {
+            releaseDateString = newValue.convertDateFormat(dateFormat: "yyyy.MM.dd")
+        }
+    }
+    
+    var releaseTime = Date() {
+        willSet {
+            releaseTimeString = newValue.convertDateFormat(dateFormat: "a hh:mm")
+        }
+    }
     
     var placeholder = "내용을 입력하세요"
     
@@ -75,12 +92,15 @@ final class ContentCreateViewModel: ObservableObject {
                 detail: detail,
                 tags: hashtags,
                 price: price,
+                releaseDate: isActiveReservation ? "\(releaseDate.convertDateFormat(dateFormat: "yyyy-MM-dd")) \(releaseTime.convertDateFormat(dateFormat: "HH:mm"))" : nil,
+                timezone: TimeZone.current.identifier,
                 themeId: theme!.id,
                 isAdult: isAdult,
-                isOnlyRental: isOnlyRental,
+                isOnlyRental: isOnlyRental, 
+                isGeneratePreview: isGeneratePreview,
                 isCommentAvailable: isAvailableComment,
-                previewStartTime: previewStartTime.trimmingCharacters(in: .whitespacesAndNewlines).count > 0 ? previewStartTime : nil,
-                previewEndTime: previewEndTime.trimmingCharacters(in: .whitespacesAndNewlines).count > 0 ? previewEndTime : nil
+                previewStartTime: isGeneratePreview && previewStartTime.trimmingCharacters(in: .whitespacesAndNewlines).count > 0 ? previewStartTime : nil,
+                previewEndTime: isGeneratePreview && previewEndTime.trimmingCharacters(in: .whitespacesAndNewlines).count > 0 ? previewEndTime : nil
             )
             
             var multipartData = [MultipartFormData]()

SodaLive/Sources/Content/Create/CreateAudioContentRequest.swift

@@ -12,9 +12,12 @@ struct CreateAudioContentRequest: Encodable {
     let detail: String
     let tags: String
     let price: Int
+    let releaseDate: String?
+    let timezone: String
     let themeId: Int
     let isAdult: Bool
     let isOnlyRental: Bool
+    let isGeneratePreview: Bool
     let isCommentAvailable: Bool
     let previewStartTime: String?
     let previewEndTime: String?

SodaLive/Sources/Content/Create/QuarterTimePickerView.swift

@@ -0,0 +1,63 @@
+//
+//  QuarterTimePickerView.swift
+//  SodaLive
+//
+//  Created by klaus on 2024/01/10.
+//
+
+import SwiftUI
+
+struct QuarterTimePickerView: View {
+    
+    @Binding var selectedTime: Date
+    @Binding var isShowing: Bool
+    
+    var body: some View {
+        GeometryReader { proxy in
+            ZStack {
+                Color
+                    .black
+                    .opacity(0.5)
+                    .edgesIgnoringSafeArea(.all)
+                
+                VStack(spacing: 0) {
+                    DatePicker(
+                        "",
+                        selection: $selectedTime,
+                        displayedComponents: .hourAndMinute
+                    )
+                    .datePickerStyle(WheelDatePickerStyle())
+                    .labelsHidden()
+                    .environment(\.locale, Locale.init(identifier: "ko"))
+                    .frame(width: proxy.size.width - 53.4)
+                    .onAppear {
+                        UIDatePicker.appearance().minuteInterval = 15
+                    }
+                    .onDisappear {
+                        UIDatePicker.appearance().minuteInterval = 1
+                    }
+                    
+                    Button(action: { self.isShowing = false }) {
+                        Text("확인")
+                            .font(.system(size: 16))
+                            .foregroundColor(Color(hex: "eeeeee"))
+                            .padding(.vertical, 10)
+                            .frame(width: proxy.size.width)
+                    }
+                }
+                .background(Color(hex: "222222"))
+                .cornerRadius(6.7)
+            }
+            .frame(width: proxy.size.width)
+        }
+    }
+}
+
+struct QuarterTimePickerView_Previews: PreviewProvider {
+    static var previews: some View {
+        QuarterTimePickerView(
+            selectedTime: .constant(Date()),
+            isShowing: .constant(true)
+        )
+    }
+}

SodaLive/Sources/Content/Create/SelectDatePicker.swift

@@ -0,0 +1,53 @@
+//
+//  SelectDatePicker.swift
+//  SodaLive
+//
+//  Created by klaus on 2024/01/10.
+//
+
+import SwiftUI
+
+struct SelectDatePicker: View {
+    
+    @Binding var selectedDate: Date
+    @Binding var isShowing: Bool
+    
+    var body: some View {
+        GeometryReader { proxy in
+            ZStack {
+                Color
+                    .black
+                    .opacity(0.5)
+                    .edgesIgnoringSafeArea(.all)
+                
+                VStack(spacing: 0) {
+                    DatePicker("", selection: $selectedDate, in: Date()..., displayedComponents: .date)
+                        .datePickerStyle(WheelDatePickerStyle())
+                        .labelsHidden()
+                        .environment(\.locale, Locale.init(identifier: "ko"))
+                        .frame(width: proxy.size.width)
+                    
+                    Button(action: { self.isShowing = false }) {
+                        Text("확인")
+                            .font(.system(size: 16))
+                            .foregroundColor(Color(hex: "eeeeee"))
+                            .padding(.vertical, 10)
+                            .frame(width: proxy.size.width - 53.4)
+                    }
+                }
+                .background(Color(hex: "222222"))
+                .cornerRadius(6.7)
+            }
+            .frame(width: proxy.size.width)
+        }
+    }
+}
+
+struct SelectDatePicker_Previews: PreviewProvider {
+    static var previews: some View {
+        SelectDatePicker(
+            selectedDate: .constant(Date()),
+            isShowing: .constant(true)
+        )
+    }
+}

SodaLive/Sources/Content/Curation/ContentCurationView.swift

@@ -20,90 +20,92 @@ struct ContentCurationView: View {
     ]
     
     var body: some View {
-        BaseView(isLoading: $viewModel.isLoading) {
-            VStack(spacing: 0) {
-                DetailNavigationBar(title: title)
-                
-                HStack(spacing: 13.3) {
-                    Spacer()
+        NavigationView {
+            BaseView(isLoading: $viewModel.isLoading) {
+                VStack(spacing: 0) {
+                    DetailNavigationBar(title: title)
                     
-                    Text("최신순")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(
-                            Color(hex: "e2e2e2")
-                                .opacity(viewModel.sort == .NEWEST ? 1 : 0.5)
-                        )
-                        .onTapGesture {
-                            if viewModel.sort != .NEWEST {
-                                viewModel.sort = .NEWEST
-                            }
-                        }
-                    
-                    Text("높은 가격순")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(
-                            Color(hex: "e2e2e2")
-                                .opacity(viewModel.sort == .PRICE_HIGH ? 1 : 0.5)
-                        )
-                        .onTapGesture {
-                            if viewModel.sort != .PRICE_HIGH {
-                                viewModel.sort = .PRICE_HIGH
-                            }
-                        }
-                    
-                    Text("낮은 가격순")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(
-                            Color(hex: "e2e2e2")
-                                .opacity(viewModel.sort == .PRICE_LOW ? 1 : 0.5)
-                        )
-                        .onTapGesture {
-                            if viewModel.sort != .PRICE_LOW {
-                                viewModel.sort = .PRICE_LOW
-                            }
-                        }
-                }
-                .padding(.vertical, 13.3)
-                .padding(.horizontal, 20)
-                .background(Color(hex: "161616"))
-                .padding(.top, 13.3)
-                
-                HStack(spacing: 0) {
-                    Text("전체")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(Color(hex: "e2e2e2"))
-                    
-                    Text("\(viewModel.totalCount)")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(Color(hex: "ff5c49"))
-                        .padding(.leading, 8)
-                    
-                    Text("개")
-                        .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(Color(hex: "e2e2e2"))
-                        .padding(.leading, 2)
-                    
-                    Spacer()
-                }
-                .padding(.vertical, 13.3)
-                .padding(.horizontal, 20)
-                
-                ScrollView(.vertical, showsIndicators: false) {
-                    LazyVGrid(columns: columns, spacing: 13.3) {
-                        ForEach(0..<viewModel.contentList.count, id: \.self) { index in
-                            ContentNewAllItemView(item: viewModel.contentList[index])
-                                .onAppear {
-                                    if index == viewModel.contentList.count - 1 {
-                                        viewModel.getContentList()
-                                    }
+                    HStack(spacing: 13.3) {
+                        Spacer()
+                        
+                        Text("최신순")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(
+                                Color(hex: "e2e2e2")
+                                    .opacity(viewModel.sort == .NEWEST ? 1 : 0.5)
+                            )
+                            .onTapGesture {
+                                if viewModel.sort != .NEWEST {
+                                    viewModel.sort = .NEWEST
                                 }
+                            }
+                        
+                        Text("높은 가격순")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(
+                                Color(hex: "e2e2e2")
+                                    .opacity(viewModel.sort == .PRICE_HIGH ? 1 : 0.5)
+                            )
+                            .onTapGesture {
+                                if viewModel.sort != .PRICE_HIGH {
+                                    viewModel.sort = .PRICE_HIGH
+                                }
+                            }
+                        
+                        Text("낮은 가격순")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(
+                                Color(hex: "e2e2e2")
+                                    .opacity(viewModel.sort == .PRICE_LOW ? 1 : 0.5)
+                            )
+                            .onTapGesture {
+                                if viewModel.sort != .PRICE_LOW {
+                                    viewModel.sort = .PRICE_LOW
+                                }
+                            }
+                    }
+                    .padding(.vertical, 13.3)
+                    .padding(.horizontal, 20)
+                    .background(Color(hex: "161616"))
+                    .padding(.top, 13.3)
+                    
+                    HStack(spacing: 0) {
+                        Text("전체")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "e2e2e2"))
+                        
+                        Text("\(viewModel.totalCount)")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "ff5c49"))
+                            .padding(.leading, 8)
+                        
+                        Text("개")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "e2e2e2"))
+                            .padding(.leading, 2)
+                        
+                        Spacer()
+                    }
+                    .padding(.vertical, 13.3)
+                    .padding(.horizontal, 20)
+                    
+                    ScrollView(.vertical, showsIndicators: false) {
+                        LazyVGrid(columns: columns, spacing: 13.3) {
+                            ForEach(0..<viewModel.contentList.count, id: \.self) { index in
+                                ContentNewAllItemView(item: viewModel.contentList[index])
+                                    .onAppear {
+                                        if index == viewModel.contentList.count - 1 {
+                                            viewModel.getContentList()
+                                        }
+                                    }
+                            }
                         }
                     }
                 }
-            }
-            .onAppear {
-                viewModel.curationId = curationId
-                viewModel.getContentList()
+                .onAppear {
+                    viewModel.curationId = curationId
+                    viewModel.getContentList()
+                }
             }
         }
     }

SodaLive/Sources/Content/Detail/Comment/AudioContentCommentItemView.swift

@@ -63,12 +63,12 @@ struct AudioContentCommentItemView: View {
                     .padding(.horizontal, 6.7)
                     .padding(.vertical, 2.7)
                     .background(
-                        commentItem.donationCan >= 100000 ? Color(hex: "973a3a") :
-                            commentItem.donationCan >= 50000 ? Color(hex: "d85e37") :
-                            commentItem.donationCan >= 10000 ? Color(hex: "d38c38") :
-                            commentItem.donationCan >= 5000 ? Color(hex: "59548f") :
-                            commentItem.donationCan >= 1000 ? Color(hex: "4d6aa4") :
-                            commentItem.donationCan >= 500 ? Color(hex: "2d7390") :
+                        commentItem.donationCan >= 10000 ? Color(hex: "973a3a") :
+                            commentItem.donationCan >= 5000 ? Color(hex: "d85e37") :
+                            commentItem.donationCan >= 1000 ? Color(hex: "d38c38") :
+                            commentItem.donationCan >= 500 ? Color(hex: "59548f") :
+                            commentItem.donationCan >= 100 ? Color(hex: "4d6aa4") :
+                            commentItem.donationCan >= 50 ? Color(hex: "2d7390") :
                             Color(hex: "548f7d")
                     )
                     .cornerRadius(10.7)

SodaLive/Sources/Content/Detail/ContentDetailInfoView.swift

@@ -21,6 +21,16 @@ struct ContentDetailInfoView: View {
         VStack(alignment: .leading, spacing: 0) {
             VStack(alignment: .leading, spacing: 8) {
                 HStack(spacing: 5.3) {
+                    if let _ = audioContent.releaseDate {
+                        Text("오픈예정")
+                            .font(.custom(Font.medium.rawValue, size: 12))
+                            .foregroundColor(Color(hex: "3bb9f1"))
+                            .padding(.horizontal, 5.3)
+                            .padding(.vertical, 3.3)
+                            .background(Color(hex: "003851"))
+                            .cornerRadius(2.6)
+                    }
+                    
                     Text(audioContent.themeStr)
                         .font(.custom(Font.medium.rawValue, size: 12))
                         .foregroundColor(Color(hex: "3bac6a"))

SodaLive/Sources/Content/Detail/ContentDetailMenuView.swift

@@ -11,7 +11,10 @@ struct ContentDetailMenuView: View {
     
     @Binding var isShowing: Bool
     
+    let isPin: Bool
     let isShowCreatorMenu: Bool
+    
+    let pinAction: () -> Void
     let modifyAction: () -> Void
     let deleteAction: () -> Void
     let reportAction: () -> Void
@@ -28,7 +31,26 @@ struct ContentDetailMenuView: View {
                 
                 VStack(spacing: 13.3) {
                     if isShowCreatorMenu {
-                        HStack(spacing: 0) {
+                        HStack(spacing: 13.3) {
+                            Image(isPin ? "ic_pin_cancel" : "ic_pin")
+                            
+                            Text(isPin ? "내 채널에 고정 취소" : "내 채널에 고정")
+                                .font(.custom(Font.medium.rawValue, size: 16.7))
+                                .foregroundColor(.white)
+                            
+                            Spacer()
+                        }
+                        .padding(.vertical, 8)
+                        .padding(.horizontal, 26.7)
+                        .contentShape(Rectangle())
+                        .onTapGesture {
+                            isShowing = false
+                            pinAction()
+                        }
+                        
+                        HStack(spacing: 13.3) {
+                            Image("ic_make_message")
+                            
                             Text("수정")
                                 .font(.custom(Font.medium.rawValue, size: 16.7))
                                 .foregroundColor(.white)
@@ -43,7 +65,9 @@ struct ContentDetailMenuView: View {
                             modifyAction()
                         }
                         
-                        HStack(spacing: 0) {
+                        HStack(spacing: 13.3) {
+                            Image("ic_trash_can")
+                            
                             Text("삭제")
                                 .font(.custom(Font.medium.rawValue, size: 16.7))
                                 .foregroundColor(.white)

SodaLive/Sources/Content/Detail/ContentDetailPlayView.swift

@@ -35,26 +35,28 @@ struct ContentDetailPlayView: View {
                     )
                     .cornerRadius(10.7, corners: [.topLeft, .topRight])
                 
-                Image(isPlaying() ? "btn_audio_content_pause" : isAlertPreview ? "btn_audio_content_preview_play" : "btn_audio_content_play")
-                    .onTapGesture {
-                        if isPlaying() {
-                            contentPlayManager.pauseAudio()
-                        } else {
-                            contentPlayManager.startTimer = startTimer
-                            contentPlayManager.stopTimer = stopTimer
-                            
-                            contentPlayManager.playAudio(
-                                contentId: audioContent.contentId,
-                                title: audioContent.title,
-                                nickname: audioContent.creator.nickname,
-                                coverImage: audioContent.coverImageUrl,
-                                contentUrl: audioContent.contentUrl,
-                                isFree: audioContent.price <= 0,
-                                isPreview: !audioContent.existOrdered && audioContent.price > 0
-                            )
-                            isShowPreviewAlert = true
+                if audioContent.releaseDate == nil && !isAlertPreview || (isAlertPreview && audioContent.isActivePreview) {
+                    Image(isPlaying() ? "btn_audio_content_pause" : isAlertPreview ? "btn_audio_content_preview_play" : "btn_audio_content_play")
+                        .onTapGesture {
+                            if isPlaying() {
+                                contentPlayManager.pauseAudio()
+                            } else {
+                                contentPlayManager.startTimer = startTimer
+                                contentPlayManager.stopTimer = stopTimer
+                                
+                                contentPlayManager.playAudio(
+                                    contentId: audioContent.contentId,
+                                    title: audioContent.title,
+                                    nickname: audioContent.creator.nickname,
+                                    coverImage: audioContent.coverImageUrl,
+                                    contentUrl: audioContent.contentUrl,
+                                    isFree: audioContent.price <= 0,
+                                    isPreview: !audioContent.existOrdered && audioContent.price > 0
+                                )
+                                isShowPreviewAlert = true
+                            }
                         }
-                    }
+                }
                 
                 VStack(alignment: .leading, spacing: 13.3) {
                     Spacer()

SodaLive/Sources/Content/Detail/ContentDetailView.swift

@@ -12,6 +12,8 @@ import RefreshableScrollView
 struct ContentDetailView: View {
     
     let contentId: Int
+    
+    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
     @StateObject private var viewModel = ContentDetailViewModel()
     
     @State private var isShowOrderView = false
@@ -24,7 +26,11 @@ struct ContentDetailView: View {
                 VStack(spacing: 0) {
                     HStack(spacing: 0) {
                         Button {
-                            AppState.shared.back()
+                            if presentationMode.wrappedValue.isPresented {
+                                presentationMode.wrappedValue.dismiss()
+                            } else {
+                                AppState.shared.back()
+                            }
                         } label: {
                             Image("ic_back")
                                 .resizable()
@@ -87,7 +93,17 @@ struct ContentDetailView: View {
                                         )
                                         .padding(.horizontal, 13.3)
                                         
-                                        if audioContent.price > 0 &&
+                                        if let releaseDate = audioContent.releaseDate {
+                                            Text(releaseDate)
+                                                .font(.custom(Font.bold.rawValue, size: 13.3))
+                                                .foregroundColor(.white)
+                                                .frame(maxWidth: .infinity)
+                                                .frame(height: 48.7)
+                                                .background(Color(hex: "525252"))
+                                                .cornerRadius(5.3)
+                                                .padding(.top, 18.3)
+                                                .padding(.horizontal, 13.3)
+                                        } else if audioContent.price > 0 &&
                                             !audioContent.existOrdered &&
                                             audioContent.orderType == nil &&
                                             audioContent.creator.creatorId != UserDefaults.int(forKey: .userId) {
@@ -151,6 +167,8 @@ struct ContentDetailView: View {
                     
                     Spacer()
                 }
+                .navigationTitle("")
+                .navigationBarBackButtonHidden()
                 .onAppear {
                     viewModel.contentId = contentId
                     AppState.shared.pushAudioContentId = 0
@@ -201,7 +219,19 @@ struct ContentDetailView: View {
                         VStack(spacing: 0) {
                             ContentDetailMenuView(
                                 isShowing: $viewModel.isShowReportMenu,
+                                isPin: viewModel.audioContent!.isPin,
                                 isShowCreatorMenu: viewModel.audioContent!.creator.creatorId == UserDefaults.int(forKey: .userId),
+                                pinAction: {
+                                    if viewModel.audioContent!.isPin {
+                                        viewModel.unpinContent(contentId: contentId)
+                                    } else {
+                                        if viewModel.audioContent!.isAvailablePin {
+                                            viewModel.pinContent(contentId: contentId)
+                                        } else {
+                                            viewModel.isShowNoticePinContentPopup = true
+                                        }
+                                    }
+                                },
                                 modifyAction: {
                                     if viewModel.audioContent!.creator.creatorId == UserDefaults.int(forKey: .userId) {
                                         AppState
@@ -266,6 +296,21 @@ struct ContentDetailView: View {
                             viewModel.donation(can: can, comment: comment)
                         }
                     }
+                    
+                    if viewModel.isShowNoticePinContentPopup {
+                        SodaDialog(
+                            title: "고정 한도 도달",
+                            desc: "이 콘텐츠를 고정하시겠어요? " +
+                            "채널에 콘텐츠를 최대 3개까지 고정할 수 있습니다." +
+                            "이 콘텐츠를 고정하면 가장 오래된 콘텐츠가 대체됩니다.",
+                            confirmButtonTitle: "확인",
+                            confirmButtonAction: {
+                                viewModel.pinContent(contentId: contentId)
+                            },
+                            cancelButtonTitle: "취소",
+                            cancelButtonAction: {}
+                        )
+                    }
                 }
             }
             .sheet(

SodaLive/Sources/Content/Detail/ContentDetailViewModel.swift

@@ -34,6 +34,7 @@ final class ContentDetailViewModel: ObservableObject {
     @Published var isShowReportMenu = false
     @Published var isShowReportView = false
     @Published var isShowDeleteConfirm = false
+    @Published var isShowNoticePinContentPopup = false
     
     var contentId: Int = 0 {
         didSet {
@@ -305,6 +306,11 @@ final class ContentDetailViewModel: ObservableObject {
                     } else {
                         if let message = decoded.message {
                             self.errorMessage = message
+                            if message.contains("캔이 부족합니다") {
+                                DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
+                                    AppState.shared.setAppStep(step: .canCharge(refresh: {}, afterCompletionToGoBack: true))
+                                }
+                            }
                         } else {
                             self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
                         }
@@ -443,4 +449,84 @@ final class ContentDetailViewModel: ObservableObject {
                 .store(in: &subscription)
         }
     }
+    
+    func pinContent(contentId: Int) {
+        isLoading = true
+        repository.pinContent(contentId: contentId)
+            .sink { result in
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                }
+            } receiveValue: { [unowned self] response in
+                self.isLoading = false
+                let responseData = response.data
+                
+                do {
+                    let jsonDecoder = JSONDecoder()
+                    let decoded = try jsonDecoder.decode(ApiResponseWithoutData.self, from: responseData)
+                    
+                    if decoded.success {
+                        self.errorMessage = "고정되었습니다"
+                        self.isShowPopup = true
+                        
+                        self.getAudioContentDetail()
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
+    }
+    
+    func unpinContent(contentId: Int) {
+        isLoading = true
+        repository.unpinContent(contentId: contentId)
+            .sink { result in
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                }
+            } receiveValue: { [unowned self] response in
+                self.isLoading = false
+                let responseData = response.data
+                
+                do {
+                    let jsonDecoder = JSONDecoder()
+                    let decoded = try jsonDecoder.decode(ApiResponseWithoutData.self, from: responseData)
+                    
+                    if decoded.success {
+                        self.errorMessage = "해제되었습니다"
+                        self.isShowPopup = true
+                        
+                        self.getAudioContentDetail()
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
+    }
 }

SodaLive/Sources/Content/Detail/GetAudioContentDetailResponse.swift

@@ -17,6 +17,8 @@ struct GetAudioContentDetailResponse: Decodable {
     let tag: String
     let price: Int
     let duration: String
+    let releaseDate: String?
+    let isActivePreview: Bool
     let isAdult: Bool
     let isMosaic: Bool
     let isOnlyRental: Bool
@@ -30,6 +32,8 @@ struct GetAudioContentDetailResponse: Decodable {
     let likeCount: Int
     let commentList: [GetAudioContentCommentListItem]
     let commentCount: Int
+    let isPin: Bool
+    let isAvailablePin: Bool
     let creator: AudioContentCreator
 }
 

SodaLive/Sources/Content/Detail/LiveRoomDonationDialogView.swift

@@ -44,7 +44,7 @@ struct LiveRoomDonationDialogView: View {
                         
                         Text("후원하기")
                             .font(.custom(Font.bold.rawValue, size: 18.3))
-                            .foregroundColor(Color(hex: "eeeeee"))
+                            .foregroundColor(Color.grayee)
                         
                         Spacer()
                         
@@ -55,12 +55,12 @@ struct LiveRoomDonationDialogView: View {
                             
                             Text("\(can)")
                                 .font(.custom(Font.bold.rawValue, size: 18.3))
-                                .foregroundColor(Color(hex: "eeeeee"))
+                                .foregroundColor(Color.grayee)
                             
                             Image("ic_forward")
                         }
                         .onTapGesture {
-                            AppState.shared.setAppStep(step: .canCharge(refresh: {}))
+                            AppState.shared.setAppStep(step: .canCharge(refresh: {}, afterCompletionToGoBack: true))
                             self.isShowing = false
                         }
                     }
@@ -69,15 +69,15 @@ struct LiveRoomDonationDialogView: View {
                     
                     Rectangle()
                         .frame(height: 1)
-                        .foregroundColor(Color(hex: "909090"))
+                        .foregroundColor(Color.gray90)
                         .padding(.top, 16)
                     
                     TextField("몇 캔을 후원할까요?", text: $donationCan)
                         .font(.custom(Font.medium.rawValue, size: 13.3))
-                        .foregroundColor(Color(hex: "eeeeee"))
+                        .foregroundColor(Color.grayee)
                         .padding(13.3)
                         .keyboardType(.numberPad)
-                        .background(Color(hex: "303030"))
+                        .background(Color.gray30)
                         .cornerRadius(6.7)
                         .padding(.horizontal, 20)
                         .padding(.top, 16)
@@ -88,7 +88,7 @@ struct LiveRoomDonationDialogView: View {
                             .foregroundColor(.white)
                             .padding(.vertical, 12.7)
                             .frame(width: 74)
-                            .background(Color(hex: "9970ff"))
+                            .background(Color.button)
                             .cornerRadius(6.7)
                             .onTapGesture {
                                 if !donationCan.trimmingCharacters(in: .whitespaces).isEmpty,
@@ -106,7 +106,7 @@ struct LiveRoomDonationDialogView: View {
                             .foregroundColor(.white)
                             .padding(.vertical, 12.7)
                             .frame(width: 74)
-                            .background(Color(hex: "9970ff"))
+                            .background(Color.button)
                             .cornerRadius(6.7)
                             .onTapGesture {
                                 if !donationCan.trimmingCharacters(in: .whitespaces).isEmpty, let can = Int(donationCan) {
@@ -122,7 +122,7 @@ struct LiveRoomDonationDialogView: View {
                             .foregroundColor(.white)
                             .padding(.vertical, 12.7)
                             .frame(width: 74)
-                            .background(Color(hex: "9970ff"))
+                            .background(Color.button)
                             .cornerRadius(6.7)
                             .onTapGesture {
                                 if !donationCan.trimmingCharacters(in: .whitespaces).isEmpty,
@@ -140,7 +140,7 @@ struct LiveRoomDonationDialogView: View {
                             .foregroundColor(.white)
                             .padding(.vertical, 12.7)
                             .frame(width: 74)
-                            .background(Color(hex: "9970ff"))
+                            .background(Color.button)
                             .cornerRadius(6.7)
                             .onTapGesture {
                                 if !donationCan.trimmingCharacters(in: .whitespaces).isEmpty,
@@ -156,7 +156,7 @@ struct LiveRoomDonationDialogView: View {
                     
                     Rectangle()
                         .frame(height: 1)
-                        .foregroundColor(Color(hex: "909090"))
+                        .foregroundColor(Color.gray90)
                         .padding(.vertical, 18.7)
                         .padding(.horizontal, 20)
                     
@@ -169,14 +169,14 @@ struct LiveRoomDonationDialogView: View {
                             .clipShape(Circle())
                             .overlay(
                                 Circle()
-                                    .stroke(Color(hex: "bbbbbb"), lineWidth: 1)
+                                    .stroke(Color.graybb, lineWidth: 1)
                             )
                         
                         TextField("함께 보낼 메시지 입력(최대 50자)", text: $donationMessage)
                             .font(.custom(Font.medium.rawValue, size: 13.3))
-                            .foregroundColor(Color(hex: "eeeeee"))
+                            .foregroundColor(Color.grayee)
                             .padding(13.3)
-                            .background(Color(hex: "303030"))
+                            .background(Color.gray30)
                             .cornerRadius(6.7)
                             .onReceive(Just(donationMessage)) { _ in
                                 limitText()
@@ -187,15 +187,15 @@ struct LiveRoomDonationDialogView: View {
                     HStack(spacing: 13.3) {
                         Text("취소")
                             .font(.custom(Font.bold.rawValue, size: 15))
-                            .foregroundColor(Color(hex: "9970ff"))
+                            .foregroundColor(Color.button)
                             .padding(.vertical, 16)
                             .frame(width: (screenSize().width - 53.3) / 3)
-                            .background(Color(hex: "9970ff").opacity(0.2))
+                            .background(Color.button.opacity(0.2))
                             .cornerRadius(10)
                             .overlay(
                                 RoundedRectangle(cornerRadius: 10)
                                     .strokeBorder()
-                                    .foregroundColor(Color(hex: "9970ff"))
+                                    .foregroundColor(Color.button)
                             )
                             .onTapGesture {
                                 isShowing = false
@@ -206,7 +206,7 @@ struct LiveRoomDonationDialogView: View {
                             .foregroundColor(.white)
                             .padding(.vertical, 16)
                             .frame(width: (screenSize().width - 53.3) * 2 / 3)
-                            .background(Color(hex: "9970ff"))
+                            .background(Color.button)
                             .cornerRadius(10)
                             .onTapGesture {
                                 if !donationCan.trimmingCharacters(in: .whitespaces).isEmpty,
@@ -224,7 +224,7 @@ struct LiveRoomDonationDialogView: View {
                 }
                 .padding(.top, 21.3)
                 .padding(.bottom, 16)
-                .background(Color(hex: "222222"))
+                .background(Color.gray22)
                 .cornerRadius(20, corners: [.topLeft, .topRight])
             }
             .popup(isPresented: $isShowErrorPopup, type: .toast, position: .bottom, autohideIn: 1.3) {
@@ -234,7 +234,7 @@ struct LiveRoomDonationDialogView: View {
                         .padding(.vertical, 13.3)
                         .frame(width: screenSize().width - 66.7, alignment: .center)
                         .font(.custom(Font.medium.rawValue, size: 12))
-                        .background(Color(hex: "9970ff"))
+                        .background(Color.button)
                         .foregroundColor(Color.white)
                         .multilineTextAlignment(.leading)
                         .cornerRadius(20)

SodaLive/Sources/Content/Main/Banner/ContentMainBannerView.swift

@@ -0,0 +1,122 @@
+//
+//  ContentMainBannerView.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/08/11.
+//
+
+import SwiftUI
+import Kingfisher
+
+struct ContentMainBannerView: View {
+    
+    @StateObject private var viewModel = ContentMainBannerViewModel()
+    
+    var body: some View {
+        ZStack {
+            if !viewModel.bannerList.isEmpty {
+                VStack(spacing: 0) {
+                    TabView(selection: $viewModel.currentIndex) {
+                        ForEach(0..<viewModel.bannerList.count, id: \.self) { index in
+                            let item = viewModel.bannerList[index]
+                            if let url = item.thumbnailImageUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) {
+                                KFImage(URL(string: url))
+                                    .resizable()
+                                    .scaledToFill()
+                                    .frame(
+                                        width: screenSize().width - 26.7,
+                                        height: (screenSize().width - 26.7) * 0.53
+                                    )
+                                    .onTapGesture {
+                                        switch item.type {
+                                        case .EVENT:
+                                            AppState.shared.setAppStep(step: .eventDetail(event: item.eventItem!))
+                                        case .CREATOR:
+                                            AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId!))
+                                        case .LINK:
+                                            if let link = item.link, link.trimmingCharacters(in: .whitespaces).count > 0, let url = URL(string: link), UIApplication.shared.canOpenURL(url) {
+                                                UIApplication.shared.open(url)
+                                            }
+                                        }
+                                    }
+                                    .cornerRadius(4.7)
+                            } else {
+                                KFImage(URL(string: item.thumbnailImageUrl))
+                                    .resizable()
+                                    .scaledToFill()
+                                    .frame(
+                                        width: screenSize().width - 26.7,
+                                        height: (screenSize().width - 26.7) * 0.53
+                                    )
+                                    .onTapGesture {
+                                        switch item.type {
+                                        case .EVENT:
+                                            AppState.shared.setAppStep(step: .eventDetail(event: item.eventItem!))
+                                        case .CREATOR:
+                                            AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId!))
+                                        case .LINK:
+                                            if let link = item.link, link.trimmingCharacters(in: .whitespaces).count > 0, let url = URL(string: link), UIApplication.shared.canOpenURL(url) {
+                                                UIApplication.shared.open(url)
+                                            }
+                                        }
+                                    }
+                                    .cornerRadius(4.7)
+                            }
+                        }
+                    }
+                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
+                    .frame(
+                        width: screenSize().width - 26.7,
+                        height: (screenSize().width - 26.7) * 0.53
+                    )
+                    
+                    HStack(spacing: 4) {
+                        ForEach(0..<viewModel.bannerList.count, id: \.self) { index in
+                            Capsule()
+                                .foregroundColor(index == viewModel.currentIndex ? Color(hex: "3bb9f1") : Color(hex: "909090"))
+                                .frame(
+                                    width: index == viewModel.currentIndex ? 18 : 6,
+                                    height: 6
+                                )
+                                .tag(index)
+                        }
+                    }
+                    .padding(.top, 13.3)
+                }
+                .frame(maxWidth: .infinity)
+                .onAppear {
+                    viewModel.timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
+                }
+                .onDisappear {
+                    viewModel.timer.upstream.connect().cancel()
+                }
+                .onReceive(viewModel.timer) { _ in
+                    DispatchQueue.main.async {
+                        withAnimation {
+                            if viewModel.currentIndex == viewModel.bannerList.count - 1 {
+                                viewModel.currentIndex = 0
+                            } else {
+                                viewModel.currentIndex += 1
+                            }
+                        }
+                    }
+                }
+            }
+            
+            if viewModel.isLoading {
+                ActivityIndicatorView()
+                    .frame(width: 100, height: 100)
+            }
+        }
+        .frame(maxWidth: .infinity)
+        .onAppear {
+            viewModel.getBannerList()
+        }
+    }
+}
+
+struct ContentMainBannerView_Previews: PreviewProvider {
+    static var previews: some View {
+        ContentMainBannerView()
+    }
+}

SodaLive/Sources/Content/Main/Banner/ContentMainBannerViewModel.swift

@@ -0,0 +1,65 @@
+//
+//  ContentMainBannerViewModel.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/11.
+//
+
+import Foundation
+import Combine
+
+final class ContentMainBannerViewModel: ObservableObject {
+    
+    private let repository = ContentRepository()
+    private var subscription = Set<AnyCancellable>()
+    
+    @Published var errorMessage = ""
+    @Published var isShowPopup = false
+    @Published var isLoading = false
+    
+    @Published var currentIndex = 0
+    @Published var timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
+    
+    @Published var bannerList = [GetAudioContentBannerResponse]()
+    
+    func getBannerList() {
+        isLoading = true
+        
+        repository.getMainBannerList()
+            .sink { result in
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                }
+            } receiveValue: { [unowned self] response in
+                self.isLoading = false
+                let responseData = response.data
+                
+                do {
+                    let jsonDecoder = JSONDecoder()
+                    let decoded = try jsonDecoder.decode(ApiResponse<[GetAudioContentBannerResponse]>.self, from: responseData)
+                    self.isLoading = false
+                    
+                    if let data = decoded.data, decoded.success {
+                        self.bannerList.removeAll()
+                        self.bannerList.append(contentsOf: data)
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "배너를 불러오지 못했습니다. 다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.errorMessage = "배너를 불러오지 못했습니다. 다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                    self.isLoading = false
+                }
+            }
+            .store(in: &subscription)
+    }
+}

SodaLive/Sources/Content/Main/ContentMainBannerView.swift

@@ -1,114 +0,0 @@
-//
-//  ContentMainBannerView.swift
-//  SodaLive
-//
-//  Created by klaus on 2023/08/11.
-//
-
-import SwiftUI
-import Kingfisher
-
-struct ContentMainBannerView: View {
-    
-    let items: [GetAudioContentBannerResponse]
-    @State private var currentIndex = 0
-    @State private var timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
-    
-    var body: some View {
-        VStack(spacing: 0) {
-            TabView(selection: $currentIndex) {
-                ForEach(0..<items.count, id: \.self) { index in
-                    let item = items[index]
-                    if let url = item.thumbnailImageUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) {
-                        KFImage(URL(string: url))
-                            .resizable()
-                            .scaledToFill()
-                            .frame(
-                                width: screenSize().width - 26.7,
-                                height: (screenSize().width - 26.7) * 0.53
-                            )
-                            .onTapGesture {
-                                switch item.type {
-                                case .EVENT:
-                                    AppState.shared.setAppStep(step: .eventDetail(event: item.eventItem!))
-                                case .CREATOR:
-                                    AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId!))
-                                case .LINK:
-                                    if let link = item.link, link.trimmingCharacters(in: .whitespaces).count > 0, let url = URL(string: link), UIApplication.shared.canOpenURL(url) {
-                                        UIApplication.shared.open(url)
-                                    }
-                                }
-                            }
-                            .cornerRadius(4.7)
-                    } else {
-                        KFImage(URL(string: item.thumbnailImageUrl))
-                            .resizable()
-                            .scaledToFill()
-                            .frame(
-                                width: screenSize().width - 26.7,
-                                height: (screenSize().width - 26.7) * 0.53
-                            )
-                            .onTapGesture {
-                                switch item.type {
-                                case .EVENT:
-                                    AppState.shared.setAppStep(step: .eventDetail(event: item.eventItem!))
-                                case .CREATOR:
-                                    AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId!))
-                                case .LINK:
-                                    if let link = item.link, link.trimmingCharacters(in: .whitespaces).count > 0, let url = URL(string: link), UIApplication.shared.canOpenURL(url) {
-                                        UIApplication.shared.open(url)
-                                    }
-                                }
-                            }
-                            .cornerRadius(4.7)
-                    }
-                }
-            }
-            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
-            .frame(
-                width: screenSize().width - 26.7,
-                height: (screenSize().width - 26.7) * 0.53
-            )
-            
-            HStack(spacing: 4) {
-                ForEach(0..<items.count, id: \.self) { index in
-                    Capsule()
-                        .foregroundColor(index == currentIndex ? Color(hex: "9970ff") : Color(hex: "909090"))
-                        .frame(
-                            width: index == currentIndex ? 18 : 6,
-                            height: 6
-                        )
-                        .tag(index)
-                }
-            }
-            .padding(.top, 13.3)
-        }
-        .frame(width: screenSize().width - 26.7)
-        .onAppear {
-            timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
-        }
-        .onDisappear {
-            timer.upstream.connect().cancel()
-        }
-        .onReceive(timer) { _ in
-            DispatchQueue.main.async {
-                withAnimation {
-                    if currentIndex == items.count - 1 {
-                        currentIndex = 0
-                    } else {
-                        currentIndex += 1
-                    }
-                }
-            }
-        }
-    }
-}
-
-struct ContentMainBannerView_Previews: PreviewProvider {
-    static var previews: some View {
-        ContentMainBannerView(
-            items: [
-            ]
-        )
-    }
-}

SodaLive/Sources/Content/Main/ContentMainCurationView.swift

@@ -1,22 +0,0 @@
-//
-//  ContentMainCurationView.swift
-//  SodaLive
-//
-//  Created by klaus on 2023/08/11.
-//
-
-import SwiftUI
-
-struct ContentMainCurationView: View {
-    
-    let items: [GetAudioContentCurationResponse]
-    
-    var body: some View {
-        LazyVStack(spacing: 40) {
-            ForEach(0..<items.count, id: \.self) {
-                ContentMainCurationItemView(item: items[$0])
-                    .padding(.horizontal, 13.3)
-            }
-        }
-    }
-}

SodaLive/Sources/Content/Main/ContentMainMyStashView.swift

@@ -1,58 +0,0 @@
-//
-//  ContentMainMyStashView.swift
-//  SodaLive
-//
-//  Created by klaus on 2023/08/11.
-//
-
-import SwiftUI
-
-struct ContentMainMyStashView: View {
-    
-    let items: [GetAudioContentMainItem]
-    
-    var body: some View {
-        VStack(alignment: .leading, spacing: 13.3) {
-            HStack(spacing: 0) {
-                Text("내 보관함")
-                    .font(.custom(Font.bold.rawValue, size: 18.3))
-                    .foregroundColor(Color(hex: "eeeeee"))
-                
-                Spacer()
-                
-                Text("전체보기")
-                    .font(.custom(Font.light.rawValue, size: 11.3))
-                    .foregroundColor(Color(hex: "bbbbbb"))
-                    .onTapGesture {
-                        AppState.shared.setAppStep(step: .orderListAll)
-                    }
-            }
-            
-            ScrollView(.horizontal, showsIndicators: false) {
-                LazyHStack(alignment: .top, spacing: 13.3) {
-                    ForEach(0..<items.count, id: \.self) { index in
-                        let item = items[index]
-                        ContentMainItemView(item: item)
-                    }
-                }
-            }
-        }
-    }
-}
-
-struct ContentMainMyStashView_Previews: PreviewProvider {
-    static var previews: some View {
-        ContentMainMyStashView(
-            items: [
-                GetAudioContentMainItem(
-                    contentId: 1,
-                    coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
-                    title: "테스트",
-                    creatorId: 7,
-                    creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
-                    creatorNickname: "유저1"
-                )
-            ]
-        )
-    }
-}

SodaLive/Sources/Content/Main/ContentMainNewContentCreatorView.swift

@@ -1,48 +0,0 @@
-//
-//  ContentMainNewContentCreatorView.swift
-//  SodaLive
-//
-//  Created by klaus on 2023/08/11.
-//
-
-import SwiftUI
-
-struct ContentMainNewContentCreatorView: View {
-    
-    let items: [GetNewContentUploadCreator]
-    
-    var body: some View {
-        ScrollView(.horizontal, showsIndicators: false) {
-            LazyHStack(spacing: 21.3) {
-                ForEach(0..<items.count, id: \.self) { index in
-                    let item = items[index]
-                    ContentMainNewContentCreatorItemView(item: item)
-                }
-            }
-        }
-    }
-}
-
-struct ContentMainNewContentCreatorView_Previews: PreviewProvider {
-    static var previews: some View {
-        ContentMainNewContentCreatorView(
-            items: [
-                GetNewContentUploadCreator(
-                    creatorId: 1,
-                    creatorNickname: "수다친구1",
-                    creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png"
-                ),
-                GetNewContentUploadCreator(
-                    creatorId: 2,
-                    creatorNickname: "수다친구2",
-                    creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png"
-                ),
-                GetNewContentUploadCreator(
-                    creatorId: 3,
-                    creatorNickname: "수다친구3",
-                    creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png"
-                )
-            ]
-        )
-    }
-}

SodaLive/Sources/Content/Main/ContentMainNewContentView.swift

@@ -1,67 +0,0 @@
-//
-//  ContentMainNewContentView.swift
-//  SodaLive
-//
-//  Created by klaus on 2023/08/11.
-//
-
-import SwiftUI
-
-struct ContentMainNewContentView: View {
-    
-    let themes: [String]
-    let items: [GetAudioContentMainItem]
-    
-    let selectTheme: (String) -> Void
-    @Binding var selectedTheme: String
-    
-    var body: some View {
-        VStack(alignment: .leading, spacing: 0) {
-            HStack(spacing: 0) {
-                Text("새로운 콘텐츠")
-                    .font(.custom(Font.bold.rawValue, size: 18.3))
-                    .foregroundColor(Color(hex: "eeeeee"))
-                
-                Spacer()
-                
-                Image("ic_forward")
-                    .resizable()
-                    .frame(width: 20, height: 20)
-                    .onTapGesture {
-                        AppState.shared.setAppStep(step: .newContentAll)
-                    }
-            }
-            
-            ContentMainNewContentThemeView(themes: themes, selectTheme: selectTheme, selectedTheme: $selectedTheme)
-                .padding(.vertical, 16.7)
-            
-            ScrollView(.horizontal, showsIndicators: false) {
-                HStack(alignment: .top, spacing: 13.3) {
-                    ForEach(0..<items.count, id: \.self) {
-                        ContentMainItemView(item: items[$0])
-                    }
-                }
-            }
-        }
-    }
-}
-
-struct ContentMainNewContentView_Previews: PreviewProvider {
-    static var previews: some View {
-        ContentMainNewContentView(
-            themes: ["전체", "테마1", "테마2"],
-            items: [
-                GetAudioContentMainItem(
-                    contentId: 1,
-                    coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
-                    title: "테스트",
-                    creatorId: 7,
-                    creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
-                    creatorNickname: "유저1"
-                )
-            ],
-            selectTheme: { _ in },
-            selectedTheme: .constant("전체")
-        )
-    }
-}

SodaLive/Sources/Content/Main/ContentMainView.swift

@@ -19,50 +19,38 @@ struct ContentMainView: View {
             RefreshableScrollView(
                 refreshing: $viewModel.isLoading,
                 action: {
-                    viewModel.getMain()
+                    viewModel.refresh()
                 }
             ) {
-                LazyVStack(alignment: .leading, spacing: 0) {
+                VStack(alignment: .leading, spacing: 0) {
                     Text("콘텐츠 마켓")
                         .font(.custom(Font.bold.rawValue, size: 21.3))
-                        .foregroundColor(Color(hex: "9970ff"))
+                        .foregroundColor(Color(hex: "3bb9f1"))
                         .padding(.bottom, 26.7)
                         .padding(.horizontal, 13.3)
                     
-                    if viewModel.newContentUploadCreatorList.count > 0 {
-                        ContentMainNewContentCreatorView(items: viewModel.newContentUploadCreatorList)
+                    if !viewModel.isLoading {
+                        ContentMainNewContentCreatorView()
                             .padding(.bottom, 26.7)
                             .padding(.horizontal, 13.3)
-                    }
-                    
-                    if viewModel.bannerList.count > 0 {
-                        ContentMainBannerView(items: viewModel.bannerList)
+                        
+                        ContentMainBannerView()
                             .padding(.bottom, 40)
                             .padding(.horizontal, 13.3)
-                    }
-                    
-                    if viewModel.orderList.count > 0 {
-                        ContentMainMyStashView(items: viewModel.orderList)
+                        
+                        ContentMainMyStashView()
                             .padding(.bottom, 40)
                             .padding(.horizontal, 13.3)
-                    }
-                    
-                    ContentMainNewContentView(
-                        themes: viewModel.themeList,
-                        items: viewModel.newContentList,
-                        selectTheme: { viewModel.selectedTheme = $0 },
-                        selectedTheme: $viewModel.selectedTheme
-                    )
-                    .padding(.horizontal, 13.3)
-                    
-                    if let contentRanking = viewModel.contentRanking {
-                        ContentMainRankingView(item: contentRanking)
+                        
+                        ContentMainNewContentView()
+                            .padding(.horizontal, 13.3)
+                        
+                        ContentMainRankingView()
                             .padding(.top, 40)
                             .padding(.horizontal, 13.3)
-                    }
-                    
-                    if viewModel.curationList.count > 0 {
-                        ContentMainCurationView(items: viewModel.curationList)
+                            .animation(nil)
+                        
+                        ContentMainCurationView()
                             .padding(.top, 40)
                             .padding(.bottom, 20)
                     }
@@ -81,7 +69,7 @@ struct ContentMainView: View {
                         .foregroundColor(.white)
                 }
                 .padding(13.3)
-                .background(Color(hex: "9970ff"))
+                .background(Color(hex: "3bb9f1"))
                 .cornerRadius(44)
                 .padding(.trailing, 16.7)
                 .padding(.bottom, 16.7)
@@ -94,28 +82,6 @@ struct ContentMainView: View {
                 LoadingView()
             }
         }
-        .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
-            GeometryReader { geo in
-                HStack {
-                    Spacer()
-                    Text(viewModel.errorMessage)
-                        .padding(.vertical, 13.3)
-                        .padding(.horizontal, 6.7)
-                        .frame(width: geo.size.width - 66.7, alignment: .center)
-                        .font(.custom(Font.medium.rawValue, size: 12))
-                        .background(Color(hex: "9970ff"))
-                        .foregroundColor(Color.white)
-                        .multilineTextAlignment(.leading)
-                        .fixedSize(horizontal: false, vertical: true)
-                        .cornerRadius(20)
-                        .padding(.top, 66.7)
-                    Spacer()
-                }
-            }
-        }
-        .onAppear {
-            viewModel.getMain()
-        }
     }
 }
 

SodaLive/Sources/Content/Main/ContentMainViewModel.swift

@@ -10,118 +10,13 @@ import Foundation
 import Combine
 
 final class ContentMainViewModel: ObservableObject {
-    
-    private let repository = ContentRepository()
-    private var subscription = Set<AnyCancellable>()
-    
-    @Published var errorMessage = ""
-    @Published var isShowPopup = false
     @Published var isLoading = false
     
-    @Published var newContentUploadCreatorList = [GetNewContentUploadCreator]()
-    @Published var newContentList = [GetAudioContentMainItem]()
-    @Published var bannerList = [GetAudioContentBannerResponse]()
-    @Published var orderList = [GetAudioContentMainItem]()
-    @Published var themeList = [String]()
-    @Published var curationList = [GetAudioContentCurationResponse]()
-    @Published var contentRanking: GetAudioContentRanking? = nil
-    
-    @Published var selectedTheme = "전체" {
-        didSet {
-            getNewContentOfTheme()
-        }
-    }
-    
-    func getMain() {
+    func refresh() {
         isLoading = true
         
-        repository.getMain()
-            .sink { result in
-                switch result {
-                case .finished:
-                    DEBUG_LOG("finish")
-                case .failure(let error):
-                    ERROR_LOG(error.localizedDescription)
-                }
-            } receiveValue: { [unowned self] response in
-                self.isLoading = false
-                let responseData = response.data
-                
-                do {
-                    let jsonDecoder = JSONDecoder()
-                    let decoded = try jsonDecoder.decode(ApiResponse<GetAudioContentMainResponse>.self, from: responseData)
-                    self.isLoading = false
-                    
-                    if let data = decoded.data, decoded.success {
-                        self.newContentUploadCreatorList.removeAll()
-                        self.newContentList.removeAll()
-                        self.bannerList.removeAll()
-                        self.orderList.removeAll()
-                        self.curationList.removeAll()
-                        self.themeList.removeAll()
-                        
-                        self.newContentUploadCreatorList.append(contentsOf: data.newContentUploadCreatorList)
-                        self.newContentList.append(contentsOf: data.newContentList)
-                        self.bannerList.append(contentsOf: data.bannerList)
-                        self.orderList.append(contentsOf: data.orderList)
-                        self.curationList.append(contentsOf: data.curationList)
-                        self.contentRanking = data.contentRanking
-                        
-                        self.themeList.append("전체")
-                        self.themeList.append(contentsOf: data.themeList)
-                    } else {
-                        if let message = decoded.message {
-                            self.errorMessage = message
-                        } else {
-                            self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
-                        }
-                        
-                        self.isShowPopup = true
-                    }
-                } catch {
-                    print(error)
-                    self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
-                    self.isShowPopup = true
-                    self.isLoading = false
-                }
-            }
-            .store(in: &subscription)
-    }
-    
-    func getNewContentOfTheme() {
-        repository.getNewContentOfTheme(theme: selectedTheme == "전체" ? "" : selectedTheme)
-            .sink { result in
-                switch result {
-                case .finished:
-                    DEBUG_LOG("finish")
-                case .failure(let error):
-                    ERROR_LOG(error.localizedDescription)
-                }
-            } receiveValue: { [unowned self] response in
-                self.isLoading = false
-                let responseData = response.data
-                
-                do {
-                    let jsonDecoder = JSONDecoder()
-                    let decoded = try jsonDecoder.decode(ApiResponse<[GetAudioContentMainItem]>.self, from: responseData)
-                    
-                    if let data = decoded.data, decoded.success {
-                        self.newContentList.removeAll()
-                        self.newContentList.append(contentsOf: data)
-                    } else {
-                        if let message = decoded.message {
-                            self.errorMessage = message
-                        } else {
-                            self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
-                        }
-                        
-                        self.isShowPopup = true
-                    }
-                } catch {
-                    self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
-                    self.isShowPopup = true
-                }
-            }
-            .store(in: &subscription)
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { [unowned self] in
+            self.isLoading = false
+        }
     }
 }

SodaLive/Sources/Content/Main/Curation/ContentMainCurationView.swift

@@ -0,0 +1,42 @@
+//
+//  ContentMainCurationView.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/08/11.
+//
+
+import SwiftUI
+
+struct ContentMainCurationView: View {
+    
+    @StateObject private var viewModel = ContentMainCurationViewModel()
+    
+    var body: some View {
+        VStack {
+            if !viewModel.curationList.isEmpty {
+                LazyVStack(spacing: 40) {
+                    ForEach(0..<viewModel.curationList.count, id: \.self) { index in
+                        ContentMainCurationItemView(item: viewModel.curationList[index])
+                            .padding(.horizontal, 13.3)
+                            .onAppear {
+                                if index == viewModel.curationList.count - 1 {
+                                    viewModel.getCurationList()
+                                }
+                            }
+                    }
+                }
+            }
+            
+            if viewModel.isLoading {
+                ActivityIndicatorView()
+                    .frame(width: 100, height: 100)
+            }
+        }
+        .frame(maxWidth: .infinity)
+        .onAppear {
+            viewModel.page = 1
+            viewModel.isLast = false
+            viewModel.getCurationList()
+        }
+    }
+}

SodaLive/Sources/Content/Main/Curation/ContentMainCurationViewModel.swift

@@ -0,0 +1,76 @@
+//
+//  ContentMainCurationViewModel.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/11.
+//
+
+import Foundation
+import Combine
+
+final class ContentMainCurationViewModel: ObservableObject {
+    private let repository = ContentRepository()
+    private var subscription = Set<AnyCancellable>()
+    
+    @Published var errorMessage = ""
+    @Published var isShowPopup = false
+    @Published var isLoading = false
+    
+    @Published var curationList = [GetAudioContentCurationResponse]()
+    
+    var isLast = false
+    var page = 1
+    private let size = 10
+    
+    func getCurationList() {
+        if !isLoading && !isLast {
+            isLoading = true
+            
+            repository.getCurationList(page: page, size: size)
+                .sink { result in
+                    switch result {
+                    case .finished:
+                        DEBUG_LOG("finish")
+                    case .failure(let error):
+                        ERROR_LOG(error.localizedDescription)
+                    }
+                } receiveValue: { [unowned self] response in
+                    self.isLoading = false
+                    let responseData = response.data
+                    
+                    do {
+                        let jsonDecoder = JSONDecoder()
+                        let decoded = try jsonDecoder.decode(ApiResponse<[GetAudioContentCurationResponse]>.self, from: responseData)
+                        self.isLoading = false
+                        
+                        if let data = decoded.data, decoded.success {
+                            if page == 1 {
+                                self.curationList.removeAll()
+                            }
+                            
+                            if !data.isEmpty {
+                                page += 1
+                                self.curationList.append(contentsOf: data)
+                            } else {
+                                isLast = true
+                            }
+                            
+                        } else {
+                            if let message = decoded.message {
+                                self.errorMessage = message
+                            } else {
+                                self.errorMessage = "큐레이션을 불러오지 못했습니다. 다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                            }
+                            
+                            self.isShowPopup = true
+                        }
+                    } catch {
+                        self.errorMessage = "큐레이션을 불러오지 못했습니다. 다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        self.isShowPopup = true
+                        self.isLoading = false
+                    }
+                }
+                .store(in: &subscription)
+        }
+    }
+}

SodaLive/Sources/Content/Main/GetAudioContentMainResponse.swift

@@ -14,6 +14,7 @@ struct GetAudioContentMainResponse: Decodable {
     let themeList: [String]
     let newContentList: [GetAudioContentMainItem]
     let curationList: [GetAudioContentCurationResponse]
+    let contentRankingSortTypeList: [String]
     let contentRanking: GetAudioContentRanking
 }
 

SodaLive/Sources/Content/Main/NewContent/ContentMainNewContentThemeView.swift

@@ -15,23 +15,23 @@ struct ContentMainNewContentThemeView: View {
     
     var body: some View {
         ScrollView(.horizontal, showsIndicators: false) {
-            HStack(alignment: .top, spacing: 8) {
+            HStack(spacing: 8) {
                 ForEach(0..<themes.count, id: \.self) { index in
                     let theme = themes[index]
                     Text(theme)
                         .font(.custom(Font.medium.rawValue, size: 14.7))
-                        .foregroundColor(Color(hex: selectedTheme == theme ? "9970ff" : "777777"))
+                        .foregroundColor(Color(hex: selectedTheme == theme ? "3bb9f1" : "777777"))
                         .padding(.horizontal, 13.3)
                         .padding(.vertical, 9.3)
                         .border(
-                            Color(hex: selectedTheme == theme ? "9970ff" : "eeeeee"),
+                            Color(hex: selectedTheme == theme ? "3bb9f1" : "eeeeee"),
                             width: 0.5
                         )
                         .cornerRadius(16.7)
                         .overlay(
                             RoundedRectangle(cornerRadius: CGFloat(16.7))
                                 .stroke(lineWidth: 0.5)
-                                .foregroundColor(Color(hex: selectedTheme == theme ? "9970ff" : "eeeeee"))
+                                .foregroundColor(Color(hex: selectedTheme == theme ? "3bb9f1" : "eeeeee"))
                         )
                         .onTapGesture {
                             if selectedTheme != theme {

SodaLive/Sources/Content/Main/NewContent/ContentMainNewContentView.swift

@@ -0,0 +1,68 @@
+//
+//  ContentMainNewContentView.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/08/11.
+//
+
+import SwiftUI
+
+struct ContentMainNewContentView: View {
+    
+    @StateObject private var viewModel = ContentMainNewContentViewModel()
+    
+    var body: some View {
+        LazyVStack(spacing: 16.7) {
+            HStack(spacing: 0) {
+                Text("새로운 콘텐츠")
+                    .font(.custom(Font.bold.rawValue, size: 18.3))
+                    .foregroundColor(Color(hex: "eeeeee"))
+                
+                Spacer()
+                
+                Image("ic_forward")
+                    .resizable()
+                    .frame(width: 20, height: 20)
+                    .onTapGesture {
+                        AppState.shared.setAppStep(step: .newContentAll)
+                    }
+            }
+            
+            if !viewModel.themeList.isEmpty {
+                ContentMainNewContentThemeView(
+                    themes: viewModel.themeList,
+                    selectTheme: { theme in
+                        viewModel.selectedTheme = theme
+                    },
+                    selectedTheme: $viewModel.selectedTheme
+                )
+            }
+            
+            if !viewModel.newContentList.isEmpty {
+                ScrollView(.horizontal, showsIndicators: false) {
+                    LazyHStack(alignment: .top, spacing: 13.3) {
+                        ForEach(0..<viewModel.newContentList.count, id: \.self) {
+                            ContentMainItemView(item: viewModel.newContentList[$0])
+                        }
+                    }
+                }
+            }
+            
+            if viewModel.isLoading {
+                ActivityIndicatorView()
+                    .frame(width: 100, height: 100)
+            }
+        }
+        .frame(maxWidth: .infinity)
+        .onAppear {
+            viewModel.getThemeList()
+            viewModel.getNewContentOfTheme()
+        }
+    }
+}
+
+struct ContentMainNewContentView_Previews: PreviewProvider {
+    static var previews: some View {
+        ContentMainNewContentView()
+    }
+}

SodaLive/Sources/Content/Main/NewContent/ContentMainNewContentViewModel.swift

@@ -0,0 +1,105 @@
+//
+//  ContentMainNewContentViewModel.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/11.
+//
+
+import Foundation
+import Combine
+
+final class ContentMainNewContentViewModel: ObservableObject {
+    
+    private let repository = ContentRepository()
+    private var subscription = Set<AnyCancellable>()
+    
+    @Published var errorMessage = ""
+    @Published var isShowPopup = false
+    @Published var isLoading = false
+    
+    @Published var themeList = [String]()
+    @Published var newContentList = [GetAudioContentMainItem]()
+    
+    @Published var selectedTheme = "전체" {
+        didSet {
+            newContentList.removeAll()
+            getNewContentOfTheme()
+        }
+    }
+    
+    func getThemeList() {
+        repository.getNewContentThemeList()
+            .sink { result in
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                }
+            } receiveValue: { [unowned self] response in
+                let responseData = response.data
+                
+                do {
+                    let jsonDecoder = JSONDecoder()
+                    let decoded = try jsonDecoder.decode(ApiResponse<[String]>.self, from: responseData)
+                    
+                    if let data = decoded.data, decoded.success {
+                        self.themeList.removeAll()
+                        self.themeList.append("전체")
+                        self.themeList.append(contentsOf: data)
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
+    }
+    
+    func getNewContentOfTheme() {
+        isLoading = true
+        
+        repository.getNewContentOfTheme(theme: selectedTheme == "전체" ? "" : selectedTheme)
+            .sink { result in
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                }
+            } receiveValue: { [unowned self] response in
+                self.isLoading = false
+                let responseData = response.data
+                
+                do {
+                    let jsonDecoder = JSONDecoder()
+                    let decoded = try jsonDecoder.decode(ApiResponse<[GetAudioContentMainItem]>.self, from: responseData)
+                    
+                    if let data = decoded.data, decoded.success {
+                        self.newContentList.removeAll()
+                        self.newContentList.append(contentsOf: data)
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
+    }
+}

SodaLive/Sources/Content/Main/NewContentUploadCreator/ContentMainNewContentCreatorView.swift

@@ -0,0 +1,43 @@
+//
+//  ContentMainNewContentCreatorView.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/08/11.
+//
+
+import SwiftUI
+
+struct ContentMainNewContentCreatorView: View {
+    
+    @StateObject private var viewModel = ContentMainNewContentCreatorViewModel()
+    
+    var body: some View {
+        ZStack {
+            if !viewModel.newContentUploadCreatorList.isEmpty {
+                ScrollView(.horizontal, showsIndicators: false) {
+                    HStack(spacing: 21.3) {
+                        ForEach(0..<viewModel.newContentUploadCreatorList.count, id: \.self) { index in
+                            let item = viewModel.newContentUploadCreatorList[index]
+                            ContentMainNewContentCreatorItemView(item: item)
+                        }
+                    }
+                }
+            }
+            
+            if viewModel.isLoading {
+                ActivityIndicatorView()
+                    .frame(width: 100, height: 100)
+            }
+        }
+        .frame(maxWidth: .infinity)
+        .onAppear {
+            viewModel.getNewContentUploadCreatorList()
+        }
+    }
+}
+
+struct ContentMainNewContentCreatorView_Previews: PreviewProvider {
+    static var previews: some View {
+        ContentMainNewContentCreatorView()
+    }
+}

SodaLive/Sources/Content/Main/NewContentUploadCreator/ContentMainNewContentCreatorViewModel.swift

@@ -0,0 +1,62 @@
+//
+//  ContentMainNewContentCreatorViewModel.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/11.
+//
+
+import Foundation
+import Combine
+
+final class ContentMainNewContentCreatorViewModel: ObservableObject {
+    
+    private let repository = ContentRepository()
+    private var subscription = Set<AnyCancellable>()
+    
+    @Published var errorMessage = ""
+    @Published var isShowPopup = false
+    @Published var isLoading = false
+    
+    @Published var newContentUploadCreatorList = [GetNewContentUploadCreator]()
+    
+    func getNewContentUploadCreatorList() {
+        isLoading = true
+        
+        repository.getNewContentUploadCreatorList()
+            .sink { result in
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                }
+            } receiveValue: { [unowned self] response in
+                self.isLoading = false
+                let responseData = response.data
+                
+                do {
+                    let jsonDecoder = JSONDecoder()
+                    let decoded = try jsonDecoder.decode(ApiResponse<[GetNewContentUploadCreator]>.self, from: responseData)
+                    self.isLoading = false
+                    
+                    if let data = decoded.data, decoded.success {
+                        self.newContentUploadCreatorList.removeAll()
+                        self.newContentUploadCreatorList.append(contentsOf: data)
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "크리에이터 리스트를 불러오지 못했습니다. 다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.errorMessage = "크리에이터 리스트를 불러오지 못했습니다. 다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                    self.isLoading = false
+                }
+            }
+            .store(in: &subscription)
+    }
+}

SodaLive/Sources/Content/Main/Order/ContentMainMyStashView.swift

@@ -0,0 +1,60 @@
+//
+//  ContentMainMyStashView.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/08/11.
+//
+
+import SwiftUI
+
+struct ContentMainMyStashView: View {
+    
+    @StateObject private var viewModel = ContentMainMyStashViewModel()
+    
+    var body: some View {
+        ZStack {
+            if !viewModel.orderList.isEmpty {
+                VStack(alignment: .leading, spacing: 13.3) {
+                    HStack(spacing: 0) {
+                        Text("내 보관함")
+                            .font(.custom(Font.bold.rawValue, size: 18.3))
+                            .foregroundColor(Color(hex: "eeeeee"))
+                        
+                        Spacer()
+                        
+                        Text("전체보기")
+                            .font(.custom(Font.light.rawValue, size: 11.3))
+                            .foregroundColor(Color(hex: "bbbbbb"))
+                            .onTapGesture {
+                                AppState.shared.setAppStep(step: .orderListAll)
+                            }
+                    }
+                    
+                    ScrollView(.horizontal, showsIndicators: false) {
+                        LazyHStack(alignment: .top, spacing: 13.3) {
+                            ForEach(0..<viewModel.orderList.count, id: \.self) { index in
+                                let item = viewModel.orderList[index]
+                                ContentMainItemView(item: item)
+                            }
+                        }
+                    }
+                }
+            }
+            
+            if viewModel.isLoading {
+                ActivityIndicatorView()
+                    .frame(width: 100, height: 100)
+            }
+        }
+        .frame(maxWidth: .infinity)
+        .onAppear {
+            viewModel.getOrderList()
+        }
+    }
+}
+
+struct ContentMainMyStashView_Previews: PreviewProvider {
+    static var previews: some View {
+        ContentMainMyStashView()
+    }
+}

SodaLive/Sources/Content/Main/Order/ContentMainMyStashViewModel.swift

@@ -0,0 +1,62 @@
+//
+//  ContentMainMyStashViewModel.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/11.
+//
+
+import Foundation
+import Combine
+
+final class ContentMainMyStashViewModel: ObservableObject {
+    
+    private let repository = ContentRepository()
+    private var subscription = Set<AnyCancellable>()
+    
+    @Published var errorMessage = ""
+    @Published var isShowPopup = false
+    @Published var isLoading = false
+    
+    @Published var orderList = [GetAudioContentMainItem]()
+    
+    func getOrderList() {
+        isLoading = true
+        
+        repository.getMainOrderList()
+            .sink { result in
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                }
+            } receiveValue: { [unowned self] response in
+                self.isLoading = false
+                let responseData = response.data
+                
+                do {
+                    let jsonDecoder = JSONDecoder()
+                    let decoded = try jsonDecoder.decode(ApiResponse<[GetAudioContentMainItem]>.self, from: responseData)
+                    self.isLoading = false
+                    
+                    if let data = decoded.data, decoded.success {
+                        self.orderList.removeAll()
+                        self.orderList.append(contentsOf: data)
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "주문정보를 불러오지 못했습니다. 다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.errorMessage = "주문정보를 불러오지 못했습니다. 다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                    self.isLoading = false
+                }
+            }
+            .store(in: &subscription)
+    }
+}

SodaLive/Sources/Content/Main/Ranking/ContentMainRankingSortView.swift

@@ -0,0 +1,55 @@
+//
+//  ContentMainRankingSortView.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/11/03.
+//
+
+import SwiftUI
+
+struct ContentMainRankingSortView: View {
+    let sorts: [String]
+    let selectSort: (String) -> Void
+    
+    @Binding var selectedSort: String
+    
+    var body: some View {
+        ScrollView(.horizontal, showsIndicators: false) {
+            HStack(alignment: .top, spacing: 8) {
+                ForEach(0..<sorts.count, id: \.self) { index in
+                    let sort = sorts[index]
+                    Text(sort)
+                        .font(.custom(Font.medium.rawValue, size: 14.7))
+                        .foregroundColor(selectedSort == sort ? Color.button : Color.gray77)
+                        .padding(.horizontal, 13.3)
+                        .padding(.vertical, 9.3)
+                        .border(
+                            selectedSort == sort ? Color.button : Color.grayee,
+                            width: 0.5
+                        )
+                        .cornerRadius(16.7)
+                        .overlay(
+                            RoundedRectangle(cornerRadius: CGFloat(16.7))
+                                .stroke(lineWidth: 0.5)
+                                .foregroundColor(selectedSort == sort ? Color.button : Color.grayee)
+                        )
+                        .onTapGesture {
+                            if selectedSort != sort {
+                                selectSort(sort)
+                            }
+                        }
+                }
+            }
+        }
+    }
+}
+
+struct ContentMainRankingSortView_Previews: PreviewProvider {
+    static var previews: some View {
+        ContentMainRankingSortView(
+            sorts: ["전체", "테마1", "테마2"],
+            selectSort: { _ in },
+            selectedSort: .constant("전체")
+        )
+    }
+}

SodaLive/Sources/Content/Main/Ranking/ContentMainRankingView.swift

@@ -10,7 +10,7 @@ import Kingfisher
 
 struct ContentMainRankingView: View {
     
-    let item: GetAudioContentRanking
+    @StateObject private var viewModel = ContentMainRankingViewModel()
     
     let rows = [
         GridItem(.fixed(60), alignment: .leading),
@@ -19,7 +19,7 @@ struct ContentMainRankingView: View {
     ]
     
     var body: some View {
-        VStack(spacing: 0) {
+        LazyVStack(spacing: 16.7) {
             HStack(spacing: 0) {
                 Text("인기 콘텐츠")
                     .font(.custom(Font.bold.rawValue, size: 18.3))
@@ -34,7 +34,7 @@ struct ContentMainRankingView: View {
             }
             
             VStack(spacing: 8) {
-                Text("\(item.startDate) ~ \(item.endDate)")
+                Text("\(viewModel.dateString)")
                     .font(.custom(Font.bold.rawValue, size: 14.7))
                     .foregroundColor(Color(hex: "eeeeee"))
                 
@@ -45,12 +45,19 @@ struct ContentMainRankingView: View {
             .padding(.vertical, 8)
             .frame(width: screenSize().width - 26.7)
             .background(Color(hex: "222222"))
-            .padding(.top, 13.3)
+            
+            if !viewModel.contentRankingSortList.isEmpty {
+                ContentMainRankingSortView(
+                    sorts: viewModel.contentRankingSortList,
+                    selectSort: { viewModel.selectedContentRankingSort = $0 },
+                    selectedSort: $viewModel.selectedContentRankingSort
+                )
+            }
             
             ScrollView(.horizontal, showsIndicators: false) {
                 LazyHGrid(rows: rows, spacing: 13.3) {
-                    ForEach(0..<item.items.count, id: \.self) { index in
-                        let content = item.items[index]
+                    ForEach(0..<viewModel.contentRankingItemList.count, id: \.self) { index in
+                        let content = viewModel.contentRankingItemList[index]
                         HStack(spacing: 0) {
                             KFImage(URL(string: content.coverImageUrl))
                                 .resizable()
@@ -84,60 +91,17 @@ struct ContentMainRankingView: View {
                 }
                 .frame(height: 207)
             }
-            .padding(.top, 13.3)
+        }
+        .frame(maxWidth: .infinity)
+        .onAppear {
+            viewModel.getContentRankingSortType()
+            viewModel.getContentRanking()
         }
     }
 }
 
 struct ContentMainRankingView_Previews: PreviewProvider {
     static var previews: some View {
-        ContentMainRankingView(
-            item: GetAudioContentRanking(
-                startDate: "2023년 10월 2일",
-                endDate: "10월 9일",
-                items: [
-                    GetAudioContentRankingItem(
-                        contentId: 10,
-                        title: "sdffsfddfs",
-                        coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
-                        themeStr: "커버곡",
-                        price: 10,
-                        duration: "00:30:20",
-                        creatorId: 1,
-                        creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
-                    ),
-                    GetAudioContentRankingItem(
-                        contentId: 10,
-                        title: "sdffsfddfs",
-                        coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
-                        themeStr: "커버곡",
-                        price: 10,
-                        duration: "00:30:20",
-                        creatorId: 1,
-                        creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
-                    ),
-                    GetAudioContentRankingItem(
-                        contentId: 10,
-                        title: "sdffsfddfs",
-                        coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
-                        themeStr: "커버곡",
-                        price: 10,
-                        duration: "00:30:20",
-                        creatorId: 1,
-                        creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
-                    ),
-                    GetAudioContentRankingItem(
-                        contentId: 10,
-                        title: "sdffsfddfs",
-                        coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
-                        themeStr: "커버곡",
-                        price: 10,
-                        duration: "00:30:20",
-                        creatorId: 1,
-                        creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
-                    ),
-                ]
-            )
-        )
+        ContentMainRankingView()
     }
 }

SodaLive/Sources/Content/Main/Ranking/ContentMainRankingViewModel.swift

@@ -0,0 +1,105 @@
+//
+//  ContentMainRankingViewModel.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/11.
+//
+
+import Foundation
+import Combine
+
+final class ContentMainRankingViewModel: ObservableObject {
+    
+    private let repository = ContentRepository()
+    private var subscription = Set<AnyCancellable>()
+    
+    @Published var errorMessage = ""
+    @Published var isShowPopup = false
+    @Published var isLoading = false
+    
+    @Published var dateString = ""
+    @Published var contentRankingSortList = [String]()
+    @Published var contentRankingItemList = [GetAudioContentRankingItem]()
+    
+    @Published var selectedContentRankingSort = "매출" {
+        didSet {
+            getContentRanking()
+        }
+    }
+    
+    func getContentRankingSortType() {
+        repository.getContentRankingSortType()
+            .sink { result in
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                }
+            } receiveValue: { [unowned self] response in
+                let responseData = response.data
+                
+                do {
+                    let jsonDecoder = JSONDecoder()
+                    let decoded = try jsonDecoder.decode(ApiResponse<[String]>.self, from: responseData)
+                    
+                    if let data = decoded.data, decoded.success {
+                        self.contentRankingSortList.removeAll()
+                        self.contentRankingSortList.append(contentsOf: data)
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
+    }
+    
+    func getContentRanking() {
+        isLoading = true
+        
+        repository.getContentRanking(page: 1, size: 12, sortType: selectedContentRankingSort)
+            .sink { result in
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                }
+            } receiveValue: { [unowned self] response in
+                self.isLoading = false
+                let responseData = response.data
+                
+                do {
+                    let jsonDecoder = JSONDecoder()
+                    let decoded = try jsonDecoder.decode(ApiResponse<GetAudioContentRanking>.self, from: responseData)
+                    
+                    if let data = decoded.data, decoded.success {
+                        dateString = "\(data.startDate)~\(data.endDate)"
+                        self.contentRankingItemList.removeAll()
+                        self.contentRankingItemList.append(contentsOf: data.items)
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
+    }
+}

SodaLive/Sources/ContentView.swift

@@ -95,9 +95,6 @@ struct ContentView: View {
             case .followerList(let userId):
                 FollowerListView(userId: userId)
                 
-            case .creatorNoticeWrite(let notice):
-                CreatorNoticeWriteView(notice: notice)
-                
             case .modifyContent(let contentId):
                 ContentModifyView(contentId: contentId)
                 
@@ -166,6 +163,18 @@ struct ContentView: View {
             case .contentRankingAll:
                 ContentRankingAllView()
                 
+            case .creatorCommunityAll(let creatorId):
+                CreatorCommunityAllView(creatorId: creatorId)
+                
+            case .creatorCommunityWrite(let onSuccess):
+                CreatorCommunityWriteView(onSuccess: onSuccess)
+                
+            case .creatorCommunityModify(let postId, let onSuccess):
+                CreatorCommunityModifyView(postId: postId, onSuccess: onSuccess)
+                
+            case .canCoupon:
+                CanCouponView()
+                
             default:
                 EmptyView()
                     .frame(width: 0, height: 0, alignment: .topLeading)

SodaLive/Sources/CustomView/IconAndTitleButton.swift

@@ -0,0 +1,40 @@
+//
+//  IconAndTitleButton.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/15.
+//
+
+import SwiftUI
+
+struct IconAndTitleButton: View {
+    
+    let iconName: String
+    let title: String
+    let onClick: () -> Void
+    
+    var body: some View {
+        HStack(spacing: 4) {
+            Image(iconName)
+            
+            Text(title)
+                .font(.custom(Font.medium.rawValue, size: 13.3))
+                .foregroundColor(Color(hex: "d2d2d2"))
+        }
+        .padding(.horizontal, 13.3)
+        .padding(.vertical, 5.3)
+        .background(Color(hex: "ffffff").opacity(0.1))
+        .cornerRadius(26.7)
+        .onTapGesture { onClick() }
+    }
+}
+
+struct IconAndTitleButton_Previews: PreviewProvider {
+    static var previews: some View {
+        IconAndTitleButton(
+            iconName: "ic_audio_content_share",
+            title: "공유",
+            onClick: {}
+        )
+    }
+}

SodaLive/Sources/CustomView/IconAndTitleToggleButton.swift

@@ -0,0 +1,44 @@
+//
+//  IconAndTitleToggleButton.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/15.
+//
+
+import SwiftUI
+
+struct IconAndTitleToggleButton: View {
+    
+    let isChecked: Bool
+    let title: String
+    let normalIconName: String
+    let checkedIconName: String
+    
+    let onClick: () -> Void
+    
+    var body: some View {
+        HStack(spacing: 4) {
+            Image(isChecked ? checkedIconName : normalIconName)
+            
+            Text("\(title)")
+                .font(.custom(Font.medium.rawValue, size: 13.3))
+                .foregroundColor(Color(hex: "d2d2d2"))
+        }
+        .padding(.horizontal, 13.3)
+        .padding(.vertical, 5.3)
+        .background(Color(hex: "ffffff").opacity(0.1))
+        .cornerRadius(26.7)
+        .onTapGesture { onClick() }
+    }
+}
+
+struct IconAndTitleToggleButton_Previews: PreviewProvider {
+    static var previews: some View {
+        IconAndTitleToggleButton(
+            isChecked: true,
+            title: "100",
+            normalIconName: "ic_audio_content_heart_normal",
+            checkedIconName: "ic_audio_content_heart_pressed"
+        ) {}
+    }
+}

SodaLive/Sources/Dialog/LivePaymentDialog.swift

@@ -0,0 +1,116 @@
+//
+//  LivePaymentDialog.swift
+//  SodaLive
+//
+//  Created by klaus on 1/21/24.
+//
+
+import SwiftUI
+
+struct LivePaymentDialog: View {
+    
+    let title: String
+    let desc: String
+    let desc2: String?
+    let confirmButtonTitle: String
+    let confirmButtonAction: () -> Void
+    let cancelButtonTitle: String
+    let cancelButtonAction: () -> Void
+    
+    let startDateTime: String?
+    let nowDateTime: String?
+    
+    var body: some View {
+        VStack {
+            Text(title)
+                .font(.custom(Font.bold.rawValue, size: 18.3))
+                .foregroundColor(Color.graybb)
+            
+            Text(desc)
+                .font(.custom(Font.medium.rawValue, size: 15))
+                .foregroundColor(Color.graybb)
+                .multilineTextAlignment(.center)
+                .lineSpacing(6)
+                .padding(.top, 21.3)
+            
+            if let startDateTime = startDateTime, let nowDateTime = nowDateTime, let desc = desc2 {
+                VStack(spacing: 13.3) {
+                    HStack(spacing: 6.7) {
+                        Text("- 시작 시각 : ")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color.graybb)
+                        
+                        Text(startDateTime)
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color.graybb)
+                    }
+                    
+                    HStack(spacing: 6.7) {
+                        Text("- 현재 시각 :")
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color.graybb)
+                            .multilineTextAlignment(.leading)
+                        
+                        Text(nowDateTime)
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color.graybb)
+                    }
+                }
+                .padding(.vertical, 13.3)
+                .padding(.horizontal, 26.7)
+                .background(Color.gray30)
+                .cornerRadius(13.3)
+                .padding(.top, 21.3)
+                
+                Text(desc)
+                    .font(.custom(Font.medium.rawValue, size: 15))
+                    .foregroundColor(Color.graybb)
+                    .lineSpacing(6)
+                    .padding(.top, 21.3)
+            }
+            
+            HStack(spacing: 13.3) {
+                Text("취소")
+                    .font(.custom(Font.bold.rawValue, size: 18.3))
+                    .foregroundColor(Color.button)
+                    .padding(.vertical, 16)
+                    .frame(maxWidth: .infinity)
+                    .background(Color.bg)
+                    .cornerRadius(10)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: 8)
+                        .stroke(Color(hex: "3bb9f1"), lineWidth: 1)
+                    )
+                    .onTapGesture { cancelButtonAction() }
+                
+                Text("결제 후 입장")
+                    .font(.custom(Font.bold.rawValue, size: 18.3))
+                    .padding(.vertical, 16)
+                    .frame(maxWidth: .infinity)
+                    .background(Color.button)
+                    .cornerRadius(10)
+                    .onTapGesture { confirmButtonAction() }
+            }
+            .padding(.top, 45)
+        }
+        .padding(.horizontal, 16.7)
+        .padding(.bottom, 16.7)
+        .padding(.top, 40)
+        .background(Color(hex: "222222"))
+        .cornerRadius(10)
+    }
+}
+
+#Preview {
+    LivePaymentDialog(
+        title: "유료 라이브 입장",
+        desc: "OO캔을 차감하고\n라이브에 입장 하시겠습니까?",
+        desc2: "라이브가 시작한 지 1시간 10분이 지났습니다. 라이브에 입장 후 30분 이내에 라이브가 종료될 수도 있습니다.",
+        confirmButtonTitle: "",
+        confirmButtonAction: {},
+        cancelButtonTitle: "",
+        cancelButtonAction: {},
+        startDateTime: "2024-01-01 15:00",
+        nowDateTime: "2024-01-02 15:00"
+    )
+}

SodaLive/Sources/Dialog/LiveRoomPasswordDialog.swift

@@ -50,14 +50,14 @@ struct LiveRoomPasswordDialog: View {
                     HStack(spacing: 13.3) {
                         Text("취소")
                             .font(.custom(Font.bold.rawValue, size: 15.3))
-                            .foregroundColor(Color(hex: "9970ff"))
+                            .foregroundColor(Color(hex: "3bb9f1"))
                             .padding(.vertical, 16)
                             .frame(width: (geo.size.width - 66.7) / 3)
-                            .background(Color(hex: "9970ff").opacity(0.13))
+                            .background(Color(hex: "13181b"))
                             .cornerRadius(8)
                             .overlay(
                                 RoundedRectangle(cornerRadius: 8)
-                                    .stroke(Color(hex: "9970ff"), lineWidth: 1)
+                                    .stroke(Color(hex: "3bb9f1"), lineWidth: 1)
                             )
                             .onTapGesture {
                                 isShowing = false
@@ -79,7 +79,7 @@ struct LiveRoomPasswordDialog: View {
                             }
                             .padding(.vertical, 16)
                             .frame(width: (geo.size.width - 66.7) * 2 / 3)
-                            .background(Color(hex: "9970ff"))
+                            .background(Color(hex: "3bb9f1"))
                             .cornerRadius(8)
                             .onTapGesture {
                                 if password.trimmingCharacters(in: .whitespaces).isEmpty {
@@ -95,7 +95,7 @@ struct LiveRoomPasswordDialog: View {
                                 .foregroundColor(Color(hex: "ffffff"))
                                 .padding(.vertical, 16)
                                 .frame(width: (geo.size.width - 66.7) * 2 / 3)
-                                .background(Color(hex: "9970ff"))
+                                .background(Color(hex: "3bb9f1"))
                                 .cornerRadius(8)
                                 .onTapGesture {
                                     if password.trimmingCharacters(in: .whitespaces).isEmpty {