feat(home): 장르 크리에이터 섹션을 연결한다

SodaLive/Sources/V2/Component/Button/FollowAllButton.swift

@@ -24,19 +24,31 @@ struct FollowAllButton: View {
             HStack(spacing: SodaSpacing.s6) {
                 if isCompleted {
                     Image("ic_new_following")
+                        .resizable()
+                        .renderingMode(.template)
+                        .foregroundColor(.black)
+                        .frame(width: 20, height: 20)
+                } else {
+                    Image("ic_new_follow")
                         .resizable()
                         .renderingMode(.template)
                         .foregroundColor(.white)
-                        .frame(width: 16, height: 16)
+                        .frame(width: 20, height: 20)
                 }
 
                 Text(isCompleted ? I18n.HomeRecommendation.followAllCompleted : I18n.HomeRecommendation.followAll)
                     .appFont(.body5)
-                    .foregroundColor(.white)
+                    .foregroundColor(isCompleted ? .black : .white)
+            }
+            .padding(SodaSpacing.s12)
+            .frame(maxWidth: .infinity)
+            .background(isCompleted ? Color.white : Color.clear)
+            .overlay {
+                if !isCompleted {
+                    Capsule()
+                        .stroke(Color.white.opacity(0.3), lineWidth: 1)
+                }
             }
-            .padding(.horizontal, SodaSpacing.s16)
-            .frame(height: 36)
-            .background(isCompleted ? Color.gray700 : Color.button)
             .clipShape(Capsule())
             .opacity(isLoading ? 0.6 : 1)
         }

SodaLive/Sources/V2/Component/Creator/CreatorProfileItem.swift

@@ -4,17 +4,23 @@ struct CreatorProfileItem: View {
     let imageUrl: String?
     let name: String
     let subtitle: String?
+    let imageSize: CGSize
+    let spacing: CGFloat
     let action: (() -> Void)?
 
     init(
         imageUrl: String?,
         name: String,
         subtitle: String? = nil,
+        imageSize: CGSize = CGSize(width: 72, height: 72),
+        spacing: CGFloat = SodaSpacing.s8,
         action: (() -> Void)? = nil
     ) {
         self.imageUrl = imageUrl
         self.name = name
         self.subtitle = subtitle
+        self.imageSize = imageSize
+        self.spacing = spacing
         self.action = action
     }
 
@@ -22,7 +28,7 @@ struct CreatorProfileItem: View {
         Button {
             action?()
         } label: {
-            VStack(alignment: .center, spacing: SodaSpacing.s8) {
+            VStack(alignment: .center, spacing: spacing) {
                 profileImage
 
                 VStack(alignment: .center, spacing: 2) {
@@ -48,7 +54,7 @@ struct CreatorProfileItem: View {
     }
 
     private var profileImage: some View {
-        DownsampledKFImage(url: URL(string: imageUrl ?? ""), size: CGSize(width: 72, height: 72))
+        DownsampledKFImage(url: URL(string: imageUrl ?? ""), size: imageSize)
             .background(Color.gray800)
             .clipShape(Circle())
     }