시리즈 상세 작품소개 키워드

- 글자가 2줄로 보이거나 잘리는 버그 수정

SodaLive/Sources/Content/Series/Detail/SeriesDetailIntroductionView.swift

@@ -6,7 +6,7 @@
 //
 
 import SwiftUI
-import TagLayoutView
+import SwiftUIFlowLayout
 
 struct SeriesDetailIntroductionView: View {
     
@@ -21,12 +21,7 @@ struct SeriesDetailIntroductionView: View {
                 .padding(.top, 16)
                 .padding(.horizontal, 13.3)
             
-            TagLayoutView(
-                seriesDetail.keywordList,
-                tagFont: UIFont(name: Font.medium.rawValue, size: 12)!,
-                padding: 5.3,
-                parentWidth: width
-            ) {
+            FlowLayout(mode: .scrollable, items: seriesDetail.keywordList, itemSpacing: 5.3) {
                 SeriesKeywordChipView(keyword: $0)
             }
             .padding(.horizontal, 13.3)

SodaLive/Sources/UI/Component/SeriesKeywordChipView.swift

@@ -19,6 +19,7 @@ struct SeriesKeywordChipView: View {
             .padding(.vertical, 5.3)
             .background(Color.gray22)
             .cornerRadius(26.7)
+            .lineLimit(1)
     }
 }
 

SodaLive/Sources/UI/Component/TagsView.swift

@@ -0,0 +1,60 @@
+//
+//  TagsView.swift
+//  SodaLive
+//
+//  Created by klaus on 4/30/24.
+//
+
+import SwiftUI
+
+struct TagsView<T: Hashable, V: View>: View {
+    let items: [T] //Hashable items
+    var lineLimit: Int //How many lines do you want
+    var grouptedItems: [[T]] = [[T]]()
+    let cloudTagView: (T) -> V
+
+    init(items: [T], lineLimit: Int, cloudTagView: @escaping (T) -> V) {
+        self.items = items
+        self.cloudTagView = cloudTagView
+        self.lineLimit = lineLimit
+        self.grouptedItems = self.createGroupedItems(items, lineLimit:
+            lineLimit)
+    }
+
+    var body: some View {
+        ScrollView(.horizontal, showsIndicators: false) {
+            VStack(alignment: .leading) {
+                ForEach(self.grouptedItems, id: \.self) { subItems in
+                    HStack {
+                        ForEach(subItems, id: \.self) { word in
+                            cloudTagView(word)
+                        }
+                        Spacer()
+                    }.padding(.horizontal, 16)
+                }
+            }
+        }
+    }
+
+    private func createGroupedItems(_ items: [T], lineLimit: Int) -> [[T]]
+    {
+        var grouptedItems: [[T]] = [[T]]()
+        var tempItems: [T] = [T]()
+
+        let temp = items.count % lineLimit
+        let count = (items.count - temp) / lineLimit
+
+        for word in items {
+            if tempItems.count < count + 1 {
+                tempItems.append(word)
+            } else {
+                grouptedItems.append(tempItems)
+                tempItems.removeAll()
+                tempItems.append(word)
+            }
+        }
+
+        grouptedItems.append(tempItems)
+        return grouptedItems
+    }
+}