유료방 입장 팝업 - UI 수정, 알림 문구 수정

- 오픈 예정 날짜 데이터가 있더라도 콘텐츠를 올린 크리에이터의 경우 재생버튼이 동작하도록 수정

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_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/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,6 +15,9 @@ struct ContentNewAllItemView: View {
     @State var width: CGFloat = 0
     
     var body: some View {
+        NavigationLink {
+            ContentDetailView(contentId: item.contentId)
+        } label: {
             VStack(alignment: .leading, spacing: 8) {
                 KFImage(URL(string: item.coverImageUrl))
                     .resizable()
@@ -46,9 +49,9 @@ struct ContentNewAllItemView: View {
                 .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,8 +17,9 @@ struct ContentNewAllView: View {
     ]
     
     var body: some View {
+        NavigationView {
             BaseView(isLoading: $viewModel.isLoading) {
-            VStack(spacing: 0) {
+                VStack(alignment: .leading, spacing: 0) {
                     DetailNavigationBar(title: "새로운 콘텐츠")
                     
                     Text("※ 최근 2주간 등록된 새로운 콘텐츠 입니다.")
@@ -52,8 +53,6 @@ struct ContentNewAllView: View {
                             .font(.custom(Font.medium.rawValue, size: 13.3))
                             .foregroundColor(Color(hex: "e2e2e2"))
                             .padding(.leading, 2)
-                    
-                    Spacer()
                     }
                     .padding(.vertical, 13.3)
                     .padding(.horizontal, 20)
@@ -78,6 +77,7 @@ struct ContentNewAllView: View {
             }
         }
     }
+}
 
 struct ContentNewAllView_Previews: PreviewProvider {
     static var previews: some View {

SodaLive/Sources/Content/All/ContentRankingAllView.swift

@@ -13,6 +13,7 @@ struct ContentRankingAllView: View {
     @StateObject var viewModel = ContentRankingAllViewModel()
     
     var body: some View {
+        NavigationView {
             BaseView(isLoading: $viewModel.isLoading) {
                 VStack(spacing: 0) {
                     DetailNavigationBar(title: "인기 콘텐츠")
@@ -40,9 +41,12 @@ struct ContentRankingAllView: View {
                     .padding(.vertical, 16.7)
                     
                     ScrollView(.vertical, showsIndicators: false) {
-                    VStack(spacing: 20) {
+                        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()
@@ -109,11 +113,6 @@ struct ContentRankingAllView: View {
                                     }
                                     .frame(height: 66.7)
                                     .contentShape(Rectangle())
-                            .onTapGesture {
-                                AppState
-                                    .shared
-                                    .setAppStep(step: .contentDetail(contentId: item.contentId))
-                            }
                                     .onAppear {
                                         if index == viewModel.contentRankingItemList.count - 1 {
                                             viewModel.getContentRanking()
@@ -122,6 +121,7 @@ struct ContentRankingAllView: View {
                                 }
                             }
                         }
+                    }
                     .padding(13.3)
                 }
                 
@@ -154,6 +154,7 @@ struct ContentRankingAllView: View {
             }
         }
     }
+}
 
 struct ContentRankingAllView_Previews: PreviewProvider {
     static var previews: some View {

SodaLive/Sources/Content/ContentApi.swift

@@ -22,8 +22,11 @@ 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
@@ -79,12 +82,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"
             
@@ -111,11 +123,14 @@ extension ContentApi: TargetType {
     var method: Moya.Method {
         switch self {
         case .getAudioContentList, .getAudioContentDetail, .getOrderList, .getAudioContentThemeList,
-                .getAudioContentCommentList, .getAudioContentCommentReplyList, .getMain, .getNewContentOfTheme,
+                .getAudioContentCommentList, .getAudioContentCommentReplyList, .getNewContentOfTheme,
                 .getNewContentThemeList, .getNewContentAllOfTheme, .getAudioContentListByCurationId, .getContentRanking,
                 .getContentRankingSortType:
             return .get
             
+        case .getMainBannerList, .getMainOrderList, .getNewContentUploadCreatorList, .getCurationList:
+            return .get
+            
         case .likeContent, .modifyAudioContent, .modifyComment:
             return .put
             
@@ -163,7 +178,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):
@@ -236,6 +251,14 @@ extension ContentApi: TargetType {
             
         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)
         }
     }
     

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"))
@@ -112,7 +121,8 @@ struct ContentListItemView_Previews: PreviewProvider {
                 duration: "00:04:43",
                 likeCount: 2,
                 commentCount: 0,
-                isAdult: false
+                isAdult: false,
+                isScheduledToOpen: true
             )
         )
     }

SodaLive/Sources/Content/ContentListView.swift

@@ -13,6 +13,7 @@ struct ContentListView: View {
     @StateObject var viewModel = ContentListViewModel()
     
     var body: some View {
+        NavigationView {
             BaseView(isLoading: $viewModel.isLoading) {
                 VStack(spacing: 0) {
                     HStack(spacing: 0) {
@@ -40,7 +41,7 @@ struct ContentListView: View {
                             .foregroundColor(Color(hex: "eeeeee"))
                             .padding(.vertical, 17)
                             .frame(maxWidth: .infinity)
-                        .background(Color(hex: "9970ff"))
+                            .background(Color(hex: "3bb9f1"))
                             .cornerRadius(5.3)
                             .padding(.top, 13.3)
                             .padding(.horizontal, 13.3)
@@ -118,15 +119,11 @@ struct ContentListView: View {
                                 
                                 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())
-                                    .onTapGesture {
-                                        AppState
-                                            .shared
-                                            .setAppStep(
-                                                step: .contentDetail(contentId: audioContent.contentId)
-                                            )
-                                    }
                                             .onAppear {
                                                 if index == viewModel.audioContentList.count - 1 {
                                                     viewModel.getAudioContentList()
@@ -136,6 +133,7 @@ struct ContentListView: View {
                                 }
                             }
                         }
+                    }
                     .padding(.top, 13.3)
                 }
                 .onAppear {
@@ -149,7 +147,7 @@ struct ContentListView: 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(.leading)
                             .cornerRadius(20)
@@ -160,6 +158,7 @@ struct ContentListView: View {
             }
         }
     }
+}
 
 struct ScrollerToTop: View {
     let reader: ScrollViewProxy

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)))
     }

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 {
@@ -287,6 +289,62 @@ struct ContentCreateView: View {
                                     }
                                     .padding(.top, 26.7)
                                 }
+                                
+                                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)
+                                            }
+                                        }
+                                        .padding(.top, 3.3)
+                                    }
+                                    .padding(.top, 26.7)
+                                }
                             }
                             .padding(.top, 26.7)
                             .padding(.horizontal, 13.3)
@@ -343,62 +401,79 @@ struct ContentCreateView: View {
                             .padding(.top, 26.7)
                             .padding(.horizontal, 13.3)
                             
-                            if !viewModel.isFree {
-                                VStack(spacing: 10) {
-                                    Text("미리듣기 시간 설정")
+                            VStack(spacing: 13.3) {
+                                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("시작 시간")
+                                    SelectButtonView(title: "지금 공개", isChecked: !viewModel.isActiveReservation) {
+                                        if viewModel.isActiveReservation {
+                                            viewModel.isActiveReservation = false
+                                        }
+                                    }
+                                    
+                                    SelectButtonView(title: "예약 공개", isChecked: viewModel.isActiveReservation) {
+                                        if !viewModel.isActiveReservation {
+                                            viewModel.isActiveReservation = true
+                                        }
+                                    }
+                                }
+                                
+                                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: "d2d2d2"))
-                                                .frame(maxWidth: .infinity, alignment: .leading)
+                                                .foregroundColor(Color(hex: "eeeeee"))
                                             
-                                            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)
+                                            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(spacing: 5.3) {
-                                            Text("종료 시간")
+                                        VStack(alignment: .leading, spacing: 6.7) {
+                                            Text("예약 시간")
                                                 .font(.custom(Font.medium.rawValue, size: 13.3))
-                                                .foregroundColor(Color(hex: "d2d2d2"))
-                                                .frame(maxWidth: .infinity, alignment: .leading)
+                                                .foregroundColor(Color(hex: "eeeeee"))
                                             
-                                            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)
+                                            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"))
-                                                .cornerRadius(6.7)
-                                                .keyboardType(.default)
-                                                .multilineTextAlignment(.center)
+                                    .padding(.top, 22.7)
                                 }
                             }
-                                    .padding(.top, 3.3)
-                                }
                             .padding(.top, 26.7)
                             .padding(.horizontal, 13.3)
-                            }
                             
                             VStack(spacing: 0) {
                                 HStack(alignment: .top, spacing: 0) {
@@ -407,7 +482,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 +524,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 +577,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 +605,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 {
@@ -63,6 +64,20 @@ final class ContentCreateViewModel: ObservableObject {
     
     @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,6 +90,8 @@ 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,

SodaLive/Sources/Content/Create/CreateAudioContentRequest.swift

@@ -12,6 +12,8 @@ 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

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,6 +20,7 @@ struct ContentCurationView: View {
     ]
     
     var body: some View {
+        NavigationView {
             BaseView(isLoading: $viewModel.isLoading) {
                 VStack(spacing: 0) {
                     DetailNavigationBar(title: title)
@@ -108,3 +109,4 @@ struct ContentCurationView: View {
             }
         }
     }
+}

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/ContentDetailPlayView.swift

@@ -35,6 +35,7 @@ struct ContentDetailPlayView: View {
                     )
                     .cornerRadius(10.7, corners: [.topLeft, .topRight])
                 
+                if audioContent.releaseDate == nil || audioContent.creator.creatorId == UserDefaults.int(forKey: .userId) {
                     Image(isPlaying() ? "btn_audio_content_pause" : isAlertPreview ? "btn_audio_content_preview_play" : "btn_audio_content_play")
                         .onTapGesture {
                             if isPlaying() {
@@ -55,6 +56,7 @@ struct ContentDetailPlayView: View {
                                 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 {
+                            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

SodaLive/Sources/Content/Detail/GetAudioContentDetailResponse.swift

@@ -17,6 +17,7 @@ struct GetAudioContentDetailResponse: Decodable {
     let tag: String
     let price: Int
     let duration: String
+    let releaseDate: String?
     let isAdult: Bool
     let isMosaic: Bool
     let isOnlyRental: Bool

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,7 +55,7 @@ struct LiveRoomDonationDialogView: View {
                             
                             Text("\(can)")
                                 .font(.custom(Font.bold.rawValue, size: 18.3))
-                                .foregroundColor(Color(hex: "eeeeee"))
+                                .foregroundColor(Color.grayee)
                             
                             Image("ic_forward")
                         }
@@ -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,56 +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
-                    )
+                        ContentMainNewContentView()
                             .padding(.horizontal, 13.3)
                         
-                    if let contentRanking = viewModel.contentRanking {
-                        ContentMainRankingView(
-                            sorts: viewModel.contentRankingSortList,
-                            item: contentRanking,
-                            selectSort: { viewModel.selectedContentRankingSort = $0 },
-                            selectedSort: $viewModel.selectedContentRankingSort
-                        )
+                        ContentMainRankingView()
                             .padding(.top, 40)
                             .padding(.horizontal, 13.3)
                             .animation(nil)
-                    }
                         
-                    if viewModel.curationList.count > 0 {
-                        ContentMainCurationView(items: viewModel.curationList)
+                        ContentMainCurationView()
                             .padding(.top, 40)
                             .padding(.bottom, 20)
                     }
@@ -87,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)
@@ -100,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,165 +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 contentRankingSortList = [String]()
-    @Published var contentRanking: GetAudioContentRanking? = nil
-    
-    @Published var selectedTheme = "전체" {
-        didSet {
-            getNewContentOfTheme()
-        }
-    }
-    
-    @Published var selectedContentRankingSort = "매출" {
-        didSet {
-            getContentRanking()
-        }
-    }
-    
-    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.contentRankingSortList.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.contentRankingSortList.append(contentsOf: data.contentRankingSortTypeList)
-                        
-                        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
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { [unowned self] in
             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)
-    }
-    
-    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 {
-                        self.contentRanking = 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/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/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/ContentMainRankingView.swift

@@ -10,11 +10,7 @@ import Kingfisher
 
 struct ContentMainRankingView: View {
     
-    let sorts: [String]
-    let item: GetAudioContentRanking
-    
-    let selectSort: (String) -> Void
-    @Binding var selectedSort: String
+    @StateObject private var viewModel = ContentMainRankingViewModel()
     
     let rows = [
         GridItem(.fixed(60), alignment: .leading),
@@ -23,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))
@@ -38,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"))
                 
@@ -49,15 +45,19 @@ struct ContentMainRankingView: View {
             .padding(.vertical, 8)
             .frame(width: screenSize().width - 26.7)
             .background(Color(hex: "222222"))
-            .padding(.top, 13.3)
             
-            ContentMainRankingSortView(sorts: sorts, selectSort: selectSort, selectedSort: $selectedSort)
-                .padding(.vertical, 16.7)
+            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()
@@ -91,63 +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(
-            sorts: ["매출", "후원", "댓글"],
-            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: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
-                    ),
-                ]
-            ),
-            selectSort: { _ in },
-            selectedSort: .constant("매출")
-        )
+        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 {

SodaLive/Sources/Dialog/SodaDialog.swift

@@ -57,14 +57,14 @@ struct SodaDialog: View {
                         if cancelButtonTitle.count > 0 {
                             Text(cancelButtonTitle)
                                 .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 {
                                     cancelButtonAction()
@@ -76,7 +76,7 @@ struct SodaDialog: 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 {
                                 confirmButtonAction()

SodaLive/Sources/Explorer/ExplorerSectionView.swift

@@ -114,7 +114,7 @@ struct ExplorerSectionView: View {
                             
                             Text(creator.tags)
                                 .font(.custom(Font.medium.rawValue, size: 10))
-                                .foregroundColor(Color(hex: "9970ff"))
+                                .foregroundColor(Color(hex: "3bb9f1"))
                                 .lineLimit(1)
                                 .frame(width: 93.3)
                                 .padding(.top, 3.3)

SodaLive/Sources/Explorer/ExplorerView.swift

@@ -101,7 +101,7 @@ struct ExplorerView: View {
                             .padding(.vertical, 13.3)
                             .frame(width: geo.size.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)

SodaLive/Sources/Explorer/Profile/CreatorCommunity/All/Comment/CreateCommunityPostCommentRequest.swift

@@ -0,0 +1,12 @@
+//
+//  CreateCommunityPostCommentRequest.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/20.
+//
+
+struct CreateCommunityPostCommentRequest: Encodable {
+    let comment: String
+    let postId: Int
+    let parentId: Int?
+}

SodaLive/Sources/Explorer/Profile/CreatorCommunity/All/Comment/CreatorCommunityCommentItemView.swift

@@ -0,0 +1,150 @@
+//
+//  CreatorCommunityCommentItemView.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/20.
+//
+
+import SwiftUI
+import Kingfisher
+
+struct CreatorCommunityCommentItemView: View {
+    let creatorId: Int
+    let postId: Int
+    let commentItem: GetCommunityPostCommentListItem
+    let isReplyComment: Bool
+    let isShowPopupMenuButton: Bool
+    
+    let modifyComment: (Int, String) -> Void
+    let onClickDelete: (Int) -> Void
+    
+    @State var isShowPopupMenu: Bool = false
+    @State var isModeModify: Bool = false
+    @State var comment: String = ""
+    
+    var body: some View {
+        ZStack(alignment: .topTrailing) {
+            VStack(alignment: .leading, spacing: 0) {
+                HStack(spacing: 6.7) {
+                    KFImage(URL(string: commentItem.profileUrl))
+                        .resizable()
+                        .frame(width: 40, height: 40)
+                        .clipShape(Circle())
+                    
+                    VStack(alignment: .leading, spacing: 0) {
+                        Text(commentItem.nickname)
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "eeeeee"))
+                        
+                        Text(commentItem.date)
+                            .font(.custom(Font.medium.rawValue, size: 10.3))
+                            .foregroundColor(Color(hex: "525252"))
+                            .padding(.top, 4)
+                    }
+                    
+                    Spacer()
+                    
+                    if isShowPopupMenuButton && (creatorId == UserDefaults.int(forKey: .userId) || commentItem.writerId == UserDefaults.int(forKey: .userId)) {
+                        Image("ic_seemore_vertical")
+                            .onTapGesture { isShowPopupMenu.toggle() }
+                    }
+                }
+                
+                HStack(spacing: 0) {
+                    if isModeModify {
+                        HStack(spacing: 0) {
+                            TextField("댓글을 입력해 보세요.", text: $comment)
+                                .autocapitalization(.none)
+                                .disableAutocorrection(true)
+                                .font(.custom(Font.medium.rawValue, size: 13.3))
+                                .foregroundColor(Color(hex: "eeeeee"))
+                                .accentColor(Color(hex: "3bb9f1"))
+                                .keyboardType(.default)
+                                .padding(.horizontal, 13.3)
+                            
+                            Spacer()
+                            
+                            Image("btn_message_send")
+                                .resizable()
+                                .frame(width: 35, height: 35)
+                                .padding(6.7)
+                                .onTapGesture {
+                                    hideKeyboard()
+                                    if commentItem.comment != comment {
+                                        modifyComment(commentItem.id, comment)
+                                    }
+                                    isModeModify = false
+                                }
+                        }
+                        .background(Color(hex: "232323"))
+                        .cornerRadius(10)
+                        .overlay(
+                            RoundedRectangle(cornerRadius: 10)
+                                .strokeBorder(lineWidth: 1)
+                                .foregroundColor(Color(hex: "3bb9f1"))
+                        )
+                    } else {
+                        VStack(alignment: .leading, spacing: 13.3) {
+                            Text(commentItem.comment)
+                                .font(.custom(Font.medium.rawValue, size: 12))
+                                .foregroundColor(Color(hex: "777777"))
+                                .fixedSize(horizontal: false, vertical: true)
+                                .padding(.top, 13.3)
+                            
+                            if !isReplyComment {
+                                NavigationLink(
+                                    destination: CreatorCommunityCommentReplyView(
+                                        creatorId: creatorId,
+                                        postId: postId,
+                                        parentComment: commentItem
+                                    )
+                                ) {
+                                    Text(commentItem.replyCount > 0 ? "답글 \(commentItem.replyCount)개" : "답글 쓰기")
+                                        .font(.custom(Font.medium.rawValue, size: 13.3))
+                                        .foregroundColor(Color(hex: "9970ff"))
+                                }
+                            }
+                        }
+                    }
+                    
+                    Spacer()
+                }
+                .padding(.leading, 46.7)
+                
+                Rectangle()
+                    .foregroundColor(Color(hex: "595959"))
+                    .frame(height: 0.5)
+                    .padding(.top, 16.7)
+            }
+            
+            if isShowPopupMenu {
+                VStack(spacing: 10) {
+                    if commentItem.writerId == UserDefaults.int(forKey: .userId) {
+                        Text("수정")
+                            .font(.custom(Font.medium.rawValue, size: 14))
+                            .foregroundColor(Color(hex: "777777"))
+                            .onTapGesture {
+                                isModeModify = true
+                                isShowPopupMenu = false
+                            }
+                    }
+                    
+                    if creatorId == UserDefaults.int(forKey: .userId) ||
+                        commentItem.writerId == UserDefaults.int(forKey: .userId)
+                    {
+                        Text("삭제")
+                            .font(.custom(Font.medium.rawValue, size: 14))
+                            .foregroundColor(Color(hex: "777777"))
+                            .onTapGesture {
+                                onClickDelete(commentItem.id)
+                                isShowPopupMenu = false
+                            }
+                    }
+                }
+                .padding(10)
+                .background(Color(hex: "222222"))
+            }
+        }
+        .onAppear { comment = commentItem.comment }
+    }
+}

SodaLive/Sources/Explorer/Profile/CreatorCommunity/All/Comment/CreatorCommunityCommentListView.swift

@@ -0,0 +1,187 @@
+//
+//  CreatorCommunityCommentListView.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/20.
+//
+
+import SwiftUI
+import Kingfisher
+
+struct CreatorCommunityCommentListView: View {
+    
+    @Binding var isPresented: Bool
+    
+    let creatorId: Int
+    let postId: Int
+    
+    @State private var commentId: Int = 0
+    @State private var isShowDeletePopup: Bool = false
+    @StateObject var viewModel = CreatorCommunityCommentListViewModel()
+    
+    var body: some View {
+        NavigationView {
+            ZStack {
+                VStack(spacing: 0) {
+                    HStack(spacing: 0) {
+                        Text("댓글")
+                            .font(.custom(Font.medium.rawValue, size: 14.7))
+                            .foregroundColor(.white)
+                            .padding(.leading, 13.3)
+                        
+                        Text("\(viewModel.totalCommentCount)")
+                            .font(.custom(Font.medium.rawValue, size: 12))
+                            .foregroundColor(Color(hex: "909090"))
+                            .padding(.leading, 6.7)
+                        
+                        Spacer()
+                        
+                        Image("ic_close_white")
+                            .onTapGesture { isPresented = false}
+                    }
+                    .padding(.horizontal, 13.3)
+                    .padding(.top, 12)
+                    
+                    Rectangle()
+                        .foregroundColor(Color(hex: "595959"))
+                        .frame(height: 0.5)
+                        .padding(.top, 12)
+                        .padding(.bottom, 13.3)
+                        .padding(.horizontal, 13.3)
+                    
+                    HStack(spacing: 8) {
+                        KFImage(URL(string: UserDefaults.string(forKey: .profileImage)))
+                            .cancelOnDisappear(true)
+                            .downsampling(size: CGSize(width: 33.3, height: 33.3))
+                            .resizable()
+                            .frame(width: 33.3, height: 33.3)
+                            .clipShape(Circle())
+                        
+                        HStack(spacing: 0) {
+                            TextField("댓글을 입력해 보세요.", text: $viewModel.comment)
+                                .autocapitalization(.none)
+                                .disableAutocorrection(true)
+                                .font(.custom(Font.medium.rawValue, size: 13.3))
+                                .foregroundColor(Color(hex: "eeeeee"))
+                                .accentColor(Color(hex: "3bb9f1"))
+                                .keyboardType(.default)
+                                .padding(.horizontal, 13.3)
+                            
+                            Spacer()
+                            
+                            Image("btn_message_send")
+                                .resizable()
+                                .frame(width: 35, height: 35)
+                                .padding(6.7)
+                                .onTapGesture {
+                                    hideKeyboard()
+                                    viewModel.createCommunityPostComment()
+                                }
+                        }
+                        .background(Color(hex: "232323"))
+                        .cornerRadius(10)
+                        .overlay(
+                            RoundedRectangle(cornerRadius: 10)
+                                .strokeBorder(lineWidth: 1)
+                                .foregroundColor(Color(hex: "3bb9f1"))
+                        )
+                        
+                        Spacer()
+                    }
+                    .padding(.horizontal, 13.3)
+                    
+                    Rectangle()
+                        .foregroundColor(Color(hex: "595959"))
+                        .frame(height: 0.5)
+                        .padding(.top, 12)
+                        .padding(.bottom, 13.3)
+                        .padding(.horizontal, 13.3)
+                    
+                    ScrollView(.vertical, showsIndicators: false) {
+                        LazyVStack(spacing: 13.3) {
+                            ForEach(0..<viewModel.commentList.count, id: \.self) { index in
+                                let comment = viewModel.commentList[index]
+                                VStack {
+                                    CreatorCommunityCommentItemView(
+                                        creatorId: creatorId,
+                                        postId: postId,
+                                        commentItem: comment,
+                                        isReplyComment: false,
+                                        isShowPopupMenuButton: true,
+                                        modifyComment: { commentId, comment in
+                                            hideKeyboard()
+                                            viewModel.modifyComment(commentId: commentId, postId: postId, comment: comment)
+                                        },
+                                        onClickDelete: {
+                                            commentId = $0
+                                            isShowDeletePopup = true
+                                        }
+                                    )
+                                    .padding(.horizontal, 26.7)
+                                    .onAppear {
+                                        if index == viewModel.commentList.count - 1 {
+                                            viewModel.getCommentList()
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                
+                if isShowDeletePopup && commentId > 0 {
+                    SodaDialog(
+                        title: "댓글 삭제",
+                        desc: "삭제하시겠습니까?",
+                        confirmButtonTitle: "삭제",
+                        confirmButtonAction: {
+                            viewModel.modifyComment(commentId: commentId, postId: postId, isActive: false)
+                            commentId = 0
+                            isShowDeletePopup = false
+                        },
+                        cancelButtonTitle: "취소",
+                        cancelButtonAction: {
+                            commentId = 0
+                            isShowDeletePopup = false
+                        }
+                    )
+                }
+                
+                if viewModel.isLoading {
+                    LoadingView()
+                }
+            }
+            .onAppear {
+                viewModel.postId = postId
+                viewModel.getCommentList()
+            }
+            .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
+                GeometryReader { geo in
+                    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(.center)
+                            .cornerRadius(20)
+                            .padding(.top, 66.7)
+                        Spacer()
+                    }
+                }
+            }
+        }
+    }
+}
+
+struct CreatorCommunityCommentListView_Previews: PreviewProvider {
+    static var previews: some View {
+        CreatorCommunityCommentListView(
+            isPresented: .constant(true),
+            creatorId: 0,
+            postId: 0
+        )
+    }
+}

SodaLive/Sources/Explorer/Profile/CreatorCommunity/All/Comment/CreatorCommunityCommentListViewModel.swift

@@ -0,0 +1,195 @@
+//
+//  CreatorCommunityCommentListViewModel.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/20.
+//
+
+import Foundation
+import Combine
+
+final class CreatorCommunityCommentListViewModel: ObservableObject {
+    private let repository = CreatorCommunityRepository()
+    private var subscription = Set<AnyCancellable>()
+    
+    @Published var isLoading = false
+    @Published var errorMessage = ""
+    @Published var isShowPopup = false
+    
+    @Published var comment = ""
+    @Published var totalCommentCount = 0
+    @Published var commentList = [GetCommunityPostCommentListItem]()
+    
+    var postId = 0
+    var page = 1
+    var isLast = false
+    private let pageSize = 10
+    
+    func getCommentList() {
+        if (!isLast && !isLoading) {
+            repository
+                .getCommunityPostCommentList(postId: postId, page: page, size: pageSize)
+                .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<GetCommunityPostCommentListResponse>.self, from: responseData)
+                        
+                        if let data = decoded.data, decoded.success {
+                            if page == 1 {
+                                commentList.removeAll()
+                            }
+                            
+                            if !data.items.isEmpty {
+                                page += 1
+                                self.totalCommentCount = data.totalCount
+                                self.commentList.append(contentsOf: data.items)
+                            } 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)
+        }
+    }
+    
+    func createCommunityPostComment(parentId: Int? = nil) {
+        if !isLoading {
+            isLoading = true
+            
+            repository.createCommunityPostComment(comment: comment, postId: postId, parentId: parentId)
+                .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
+                    self.isLoading = false
+                    
+                    do {
+                        let jsonDecoder = JSONDecoder()
+                        let decoded = try jsonDecoder.decode(ApiResponseWithoutData.self, from: responseData)
+                        
+                        if decoded.success {
+                            DispatchQueue.main.async {
+                                self.comment = ""
+                                self.page = 1
+                                self.isLast = false
+                                self.getCommentList()
+                            }
+                        } 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 modifyComment(
+        commentId: Int,
+        postId: Int,
+        comment: String? = nil,
+        isActive: Bool? = nil
+    ) {
+        if comment == nil && isActive == nil {
+            errorMessage = "변경사항이 없습니다."
+            isShowPopup = true
+            return
+        }
+        
+        if let comment = comment, comment.trimmingCharacters(in: .whitespaces).isEmpty {
+            errorMessage = "내용을 입력하세요."
+            isShowPopup = true
+            return
+        }
+        
+        isLoading = true
+        
+        var request = ModifyCommunityPostCommentRequest(commentId: commentId)
+        
+        if let comment = comment {
+            request.comment = comment
+        }
+        
+        if let isActive = isActive {
+            request.isActive = isActive
+        }
+        
+        repository.modifyComment(request: request)
+            .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.comment = ""
+                        self.page = 1
+                        self.isLast = false
+                        
+                        self.commentList.removeAll()
+                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+                            self.getCommentList()
+                        }
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.isLoading = false
+                    self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
+    }
+}

SodaLive/Sources/Explorer/Profile/CreatorCommunity/All/Comment/CreatorCommunityCommentReplyView.swift

@@ -0,0 +1,184 @@
+//
+//  CreatorCommunityCommentReplyView.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/20.
+//
+
+import SwiftUI
+import Kingfisher
+
+struct CreatorCommunityCommentReplyView: View {
+    
+    let creatorId: Int
+    let postId: Int
+    let parentComment: GetCommunityPostCommentListItem
+    
+    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
+    @StateObject var viewModel = CreatorCommunityCommentReplyViewModel()
+    
+    @State private var commentId: Int = 0
+    @State private var isShowDeletePopup: Bool = false
+    
+    var body: some View {
+        ZStack {
+            VStack(spacing: 0) {
+                HStack(spacing: 6.7) {
+                    Image("ic_back")
+                    
+                    Text("답글")
+                        .font(.custom(Font.medium.rawValue, size: 14.7))
+                        .foregroundColor(.white)
+                    
+                    Spacer()
+                }
+                .padding(.horizontal, 13.3)
+                .padding(.top, 12)
+                .onTapGesture { presentationMode.wrappedValue.dismiss() }
+                
+                Rectangle()
+                    .foregroundColor(Color(hex: "595959"))
+                    .frame(height: 0.5)
+                    .padding(.top, 12)
+                    .padding(.bottom, 13.3)
+                    .padding(.horizontal, 13.3)
+                
+                HStack(spacing: 8) {
+                    KFImage(URL(string: UserDefaults.string(forKey: .profileImage)))
+                        .cancelOnDisappear(true)
+                        .downsampling(size: CGSize(width: 33.3, height: 33.3))
+                        .resizable()
+                        .frame(width: 33.3, height: 33.3)
+                        .clipShape(Circle())
+                    
+                    HStack(spacing: 0) {
+                        TextField("댓글을 입력해 보세요.", text: $viewModel.comment)
+                            .autocapitalization(.none)
+                            .disableAutocorrection(true)
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "eeeeee"))
+                            .accentColor(Color(hex: "3bb9f1"))
+                            .keyboardType(.default)
+                            .padding(.horizontal, 13.3)
+                        
+                        Spacer()
+                        
+                        Image("btn_message_send")
+                            .resizable()
+                            .frame(width: 35, height: 35)
+                            .padding(6.7)
+                            .onTapGesture {
+                                hideKeyboard()
+                                viewModel.createCommunityPostComment(parentId: parentComment.id)
+                            }
+                    }
+                    .background(Color(hex: "232323"))
+                    .cornerRadius(10)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: 10)
+                            .strokeBorder(lineWidth: 1)
+                            .foregroundColor(Color(hex: "3bb9f1"))
+                    )
+                    
+                    Spacer()
+                }
+                .padding(.horizontal, 13.3)
+                
+                Rectangle()
+                    .foregroundColor(Color(hex: "595959"))
+                    .frame(height: 0.5)
+                    .padding(.top, 12)
+                    .padding(.bottom, 13.3)
+                    .padding(.horizontal, 13.3)
+                
+                CreatorCommunityCommentItemView(
+                    creatorId: creatorId,
+                    postId: postId,
+                    commentItem: parentComment,
+                    isReplyComment: true,
+                    isShowPopupMenuButton: false,
+                    modifyComment: { _, _ in },
+                    onClickDelete: { _ in }
+                )
+                .padding(.horizontal, 26.7)
+                .padding(.bottom, 13.3)
+                
+                ScrollView(.vertical, showsIndicators: false) {
+                    LazyVStack(spacing: 13.3) {
+                        ForEach(0..<viewModel.commentList.count, id: \.self) { index in
+                            let comment = viewModel.commentList[index]
+                            CreatorCommunityCommentItemView(
+                                creatorId: creatorId,
+                                postId: postId,
+                                commentItem: comment,
+                                isReplyComment: true,
+                                isShowPopupMenuButton: true,
+                                modifyComment: { commentId, comment in
+                                    hideKeyboard()
+                                    viewModel.modifyComment(commentId: commentId, postId: postId, comment: comment)
+                                },
+                                onClickDelete: {
+                                    commentId = $0
+                                    isShowDeletePopup = true
+                                }
+                            )
+                            .padding(.horizontal, 26.7)
+                            .onAppear {
+                                if index == viewModel.commentList.count - 1 {
+                                    viewModel.getCommentList()
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .navigationTitle("")
+            .navigationBarBackButtonHidden()
+            
+            if isShowDeletePopup && commentId > 0 {
+                SodaDialog(
+                    title: "댓글 삭제",
+                    desc: "삭제하시겠습니까?",
+                    confirmButtonTitle: "삭제",
+                    confirmButtonAction: {
+                        viewModel.modifyComment(commentId: commentId, postId: postId, isActive: false)
+                        commentId = 0
+                        isShowDeletePopup = false
+                    },
+                    cancelButtonTitle: "취소",
+                    cancelButtonAction: {
+                        commentId = 0
+                        isShowDeletePopup = false
+                    }
+                )
+            }
+            
+            if viewModel.isLoading {
+                LoadingView()
+            }
+        }
+        .onAppear {
+            viewModel.postId = postId
+            viewModel.commentId = parentComment.id
+            viewModel.getCommentList()
+        }
+    }
+}
+
+struct CreatorCommunityCommentReplyView_Previews: PreviewProvider {
+    static var previews: some View {
+        CreatorCommunityCommentReplyView(
+            creatorId: 0,
+            postId: 0,
+            parentComment: GetCommunityPostCommentListItem(
+                id: 0,
+                writerId: 0,
+                nickname: "댓글",
+                profileUrl: "",
+                comment: "부모 댓글입니다.",
+                date: "1시간전",
+                replyCount: 1
+            )
+        )
+    }
+}

SodaLive/Sources/Explorer/Profile/CreatorCommunity/All/Comment/CreatorCommunityCommentReplyViewModel.swift

@@ -0,0 +1,197 @@
+//
+//  CreatorCommunityCommentReplyViewModel.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/20.
+//
+
+import Foundation
+import Combine
+
+final class CreatorCommunityCommentReplyViewModel: ObservableObject {
+    
+    private let repository = CreatorCommunityRepository()
+    private var subscription = Set<AnyCancellable>()
+    
+    @Published var isLoading = false
+    @Published var errorMessage = ""
+    @Published var isShowPopup = false
+    
+    @Published var comment = ""
+    @Published var totalCommentCount = 0
+    @Published var commentList = [GetCommunityPostCommentListItem]()
+    
+    var postId = 0
+    var commentId = 0
+    var page = 1
+    var isLast = false
+    private let pageSize = 10
+    
+    func getCommentList() {
+        if (!isLast && !isLoading) {
+            repository
+                .getCommentReplyList(commentId: commentId, page: page, size: pageSize)
+                .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<GetCommunityPostCommentListResponse>.self, from: responseData)
+                        
+                        if let data = decoded.data, decoded.success {
+                            if page == 1 {
+                                commentList.removeAll()
+                            }
+                            
+                            if !data.items.isEmpty {
+                                page += 1
+                                self.totalCommentCount = data.totalCount
+                                self.commentList.append(contentsOf: data.items)
+                            } 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)
+        }
+    }
+    
+    func createCommunityPostComment(parentId: Int? = nil) {
+        if !isLoading {
+            isLoading = true
+            
+            repository.createCommunityPostComment(comment: comment, postId: postId, parentId: parentId)
+                .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
+                    self.isLoading = false
+                    
+                    do {
+                        let jsonDecoder = JSONDecoder()
+                        let decoded = try jsonDecoder.decode(ApiResponseWithoutData.self, from: responseData)
+                        
+                        if decoded.success {
+                            DispatchQueue.main.async {
+                                self.comment = ""
+                                self.page = 1
+                                self.isLast = false
+                                self.getCommentList()
+                            }
+                        } 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 modifyComment(
+        commentId: Int,
+        postId: Int,
+        comment: String? = nil,
+        isActive: Bool? = nil
+    ) {
+        if comment == nil && isActive == nil {
+            errorMessage = "변경사항이 없습니다."
+            isShowPopup = true
+            return
+        }
+        
+        if let comment = comment, comment.trimmingCharacters(in: .whitespaces).isEmpty {
+            errorMessage = "내용을 입력하세요."
+            isShowPopup = true
+            return
+        }
+        
+        isLoading = true
+        
+        var request = ModifyCommunityPostCommentRequest(commentId: commentId)
+        
+        if let comment = comment {
+            request.comment = comment
+        }
+        
+        if let isActive = isActive {
+            request.isActive = isActive
+        }
+        
+        repository.modifyComment(request: request)
+            .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.comment = ""
+                        self.page = 1
+                        self.isLast = false
+                        
+                        self.commentList.removeAll()
+                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+                            self.getCommentList()
+                        }
+                    } else {
+                        if let message = decoded.message {
+                            self.errorMessage = message
+                        } else {
+                            self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self.isShowPopup = true
+                    }
+                } catch {
+                    self.isLoading = false
+                    self.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
+    }
+}

SodaLive/Sources/Explorer/Profile/CreatorCommunity/All/Comment/CreatorCommunityCommentView.swift

@@ -0,0 +1,105 @@
+//
+//  CreatorCommunityCommentView.swift
+//  SodaLive
+//
+//  Created by klaus on 2023/12/15.
+//
+
+import SwiftUI
+import Kingfisher
+
+struct CreatorCommunityCommentView: View {
+    let commentCount: Int
+    let commentItem: GetCommunityPostCommentListItem?
+    
+    let onClickWriteComment: (String) -> Void
+    
+    @State private var comment = ""
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 11) {
+            HStack(spacing: 5.3) {
+                Text("댓글")
+                    .font(.custom(Font.medium.rawValue, size: 12))
+                    .foregroundColor(.white)
+                
+                Text("\(commentCount)")
+                    .font(.custom(Font.medium.rawValue, size: 12))
+                    .foregroundColor(Color(hex: "909090"))
+                
+                Spacer()
+            }
+            
+            HStack(spacing: 8) {
+                if let comment = commentItem {
+                    KFImage(URL(string: comment.profileUrl))
+                    .resizable()
+                    .frame(width: 33.3, height: 33.3)
+                    .clipShape(Circle())
+                
+                    Text(comment.comment)
+                        .font(.custom(Font.medium.rawValue, size: 12))
+                        .foregroundColor(Color(hex: "bbbbbb"))
+                        .lineLimit(1)
+                        .padding(.leading, 3)
+                } else {
+                    KFImage(URL(string: UserDefaults.string(forKey: .profileImage)))
+                    .resizable()
+                    .frame(width: 33.3, height: 33.3)
+                    .clipShape(Circle())
+                    
+                    HStack(spacing: 0) {
+                        TextField("댓글을 입력해 보세요.", text: $comment)
+                            .autocapitalization(.none)
+                            .disableAutocorrection(true)
+                            .font(.custom(Font.medium.rawValue, size: 13.3))
+                            .foregroundColor(Color(hex: "eeeeee"))
+                            .accentColor(Color(hex: "3bb9f1"))
+                            .keyboardType(.default)
+                            .padding(.horizontal, 13.3)
+                        
+                        Spacer()
+                        
+                        Image("btn_message_send")
+                            .resizable()
+                            .frame(width: 35, height: 35)
+                            .padding(6.7)
+                            .onTapGesture {
+                                hideKeyboard()
+                                onClickWriteComment(comment)
+                                comment = ""
+                            }
+                    }
+                    .background(Color(hex: "232323"))
+                    .cornerRadius(10)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: 10)
+                            .strokeBorder(lineWidth: 1)
+                            .foregroundColor(Color(hex: "3bb9f1"))
+                    )
+                }
+            }
+        }
+        .padding(11)
+        .background(Color(hex: "ffffff").opacity(0.1))
+        .cornerRadius(5.3)
+    }
+}
+
+struct CreatorCommunityCommentView_Previews: PreviewProvider {
+    static var previews: some View {
+        CreatorCommunityCommentView(
+            commentCount: 0,
+            commentItem: GetCommunityPostCommentListItem(
+                id: 1,
+                writerId: 1,
+                nickname: "닉네임",
+                profileUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
+                comment: "댓글 테스트",
+                date: "1시간전",
+                replyCount: 0
+            ),
+            onClickWriteComment: { _ in }
+        )
+    }
+}