feat(creator-profile): 콘텐츠 섹션 UI 변경

SodaLive/Sources/Explorer/Profile/UserProfileContentView.swift

@@ -11,19 +11,28 @@ struct UserProfileContentView: View {
     
     let userId: Int
     let items: [GetAudioContentListItem]
+    let totalContentCount: Int
+    let ownedContentCount: Int
+    
+    private var progressBarWidth: CGFloat {
+        let maxWidth: CGFloat = screenSize().width - 48
+        guard totalContentCount > 0 else { return 0 }
+        let percentage = Double(ownedContentCount) / Double(totalContentCount)
+        return maxWidth * percentage
+    }
     
     var body: some View {
         VStack(spacing: 21) {
             HStack(spacing: 0) {
                 Text(userId == UserDefaults.int(forKey: .userId) ? "내 콘텐츠" : "콘텐츠")
-                    .font(.custom(Font.bold.rawValue, size: 18.3))
-                    .foregroundColor(Color.grayee)
+                    .font(.custom(Font.preBold.rawValue, size: 26))
+                    .foregroundColor(Color.white)
                 
                 Spacer()
                 
                 Text("전체보기")
-                    .font(.custom(Font.medium.rawValue, size: 12))
-                    .foregroundColor(Color.graybb)
+                    .font(.custom(Font.preLight.rawValue, size: 14))
+                    .foregroundColor(Color(hex: "78909C"))
                     .onTapGesture {
                         AppState.shared.setAppStep(step: .contentListAll(userId: userId))
                     }
@@ -31,13 +40,15 @@ struct UserProfileContentView: View {
             
             if userId == UserDefaults.int(forKey: .userId) {
                 Text("새로운 콘텐츠 등록하기")
-                    .font(.custom(Font.bold.rawValue, size: 15))
+                    .font(.custom(Font.bold.rawValue, size: 16))
                     .foregroundColor(Color.grayee)
                     .padding(.vertical, 17)
                     .frame(maxWidth: .infinity)
                     .background(Color.button)
-                    .cornerRadius(5.3)
+                    .cornerRadius(12)
                     .onTapGesture { AppState.shared.setAppStep(step: .createContent) }
+            } else {
+                collectionInfoView()
             }
             
             VStack(spacing: 10.7) {
@@ -56,6 +67,56 @@ struct UserProfileContentView: View {
             }
         }
     }
+    
+    @ViewBuilder
+    private func collectionInfoView() -> some View {
+        VStack(spacing: 8) {
+            // 상단 정보 (계산된 % 보유중, 정보 아이콘, 개수)
+            HStack {
+                Text(ownedContentCount > 0 ? "\(Int(round(Double(ownedContentCount) / Double(totalContentCount) * 100)))% 보유중" : "소장 중인 작품이 없어요!")
+                    .font(.custom(Font.preBold.rawValue, size: 18))
+                    .foregroundColor(.white)
+                
+                Spacer()
+            
+                HStack(spacing: 4) {
+                    Text("\(ownedContentCount)")
+                        .font(.custom(Font.preRegular.rawValue, size: 16))
+                        .foregroundColor(Color(hex: "#FDD453"))
+                    
+                    Text("/")
+                        .font(.custom(Font.preRegular.rawValue, size: 16))
+                        .foregroundColor(.white)
+                    
+                    Text("\(totalContentCount)개")
+                        .font(.custom(Font.preRegular.rawValue, size: 16))
+                        .foregroundColor(.white)
+                }
+            }
+            
+            // 진행률 바
+            GeometryReader { geometry in
+                ZStack(alignment: .leading) {
+                    // 배경 바
+                    RoundedRectangle(cornerRadius: 999)
+                        .foregroundColor(Color(hex: "#37474F"))
+                        .frame(height: 9)
+                    
+                    // 진행률 바 (계산된 퍼센트)
+                    RoundedRectangle(cornerRadius: 999)
+                        .fill(
+                            LinearGradient(
+                                colors: [Color(hex: "#80D8FF"), Color(hex: "#6D5ED7")],
+                                startPoint: .leading,
+                                endPoint: .trailing
+                            )
+                        )
+                        .frame(width: min(progressBarWidth, geometry.size.width), height: 9)
+                }
+            }
+            .frame(height: 9)
+        }
+    }
 }
 
 struct UserProfileContentView_Previews: PreviewProvider {
@@ -80,7 +141,9 @@ struct UserProfileContentView_Previews: PreviewProvider {
                     isSoldOut: false,
                     isPointAvailable: true
                 )
-            ]
+            ],
+            totalContentCount: 0,
+            ownedContentCount: 0
         )
     }
 }

SodaLive/Sources/Explorer/Profile/UserProfileView.swift

@@ -203,8 +203,11 @@ struct UserProfileView: View {
                                     if creatorProfile.creator.creatorId == UserDefaults.int(forKey: .userId) || creatorProfile.contentList.count > 0 {
                                         UserProfileContentView(
                                             userId: userId,
-                                            items: creatorProfile.contentList
+                                            items: creatorProfile.contentList,
+                                            totalContentCount: creatorProfile.totalContentCount,
+                                            ownedContentCount: creatorProfile.ownedContentCount
                                         )
+                                        .padding(.horizontal, 24)
                                     }
                                     
                                     if viewModel.communityPostList.count > 0 {