[Design] 태그뷰 디자인하기

DesignSystem/Views/CustomAlert.swift

@@ -0,0 +1,64 @@
+//
+//  CustomAlert.swift
+//  Reazy
+//
+//  Created by 김예림 on 3/6/25.
+//
+
+import SwiftUI
+
+struct CustomAlert: View {
+    let mainText: String
+    let message: String
+
+    let cancleAction: () -> Void
+    let confirmAction: () -> Void
+
+    var body: some View {
+        VStack(spacing: 0) {
+            VStack(alignment: .center, spacing: 0) {
+                Text(mainText)
+                    .reazyFont(.button1)
+                    .foregroundStyle(.gray900)
+                    .multilineTextAlignment(.center)
+                Text(message)
+                    .reazyFont(.body1)
+                    .foregroundStyle(.gray900)
+                    .lineLimit(1)
+            }
+            .padding(.top, 25)
+            .padding(.horizontal, 30)
+            Spacer()
+
+            Rectangle()
+                .frame(height: 1)
+                .foregroundStyle(.gray400)
+
+            HStack(spacing: 70) {
+                Button {
+                    cancleAction()
+                } label: {
+                    Text("취소")
+                        .reazyFont(.text1)
+                }
+                Rectangle()
+                    .frame(width: 1)
+                    .foregroundStyle(.gray400)
+                Button {
+                    confirmAction()
+                } label: {
+                    Text("삭제")
+                        .reazyFont(.text1)
+                        .foregroundStyle(.pen1)
+                }
+            }
+            .frame(height: 52)
+        }
+        .frame(width: 350, height: 176)
+        .background(
+            RoundedRectangle(cornerRadius: 20)
+                .foregroundStyle(.gray200)
+        )
+
+    }
+}

DesignSystem/Views/DynamicCellLayout.swift

@@ -12,23 +12,26 @@ import SwiftUI
  */
 struct DynamicCellLayout<Data: RandomAccessCollection>: View where Data.Element: DynamicCell {
     let data: Data
-    let action: (String) -> Void
+    let screenWidth: CGFloat
+
+    let isMultiSelectable: Bool     // 여러 셀 선택 가능
+    let isEditMode: Bool           // x마크
+
+    let selectAction: (String) -> Void
+    let deleteAction: (UUID) -> Void
 
     var body: some View {
         generateLayout(items: data)
     }
 
     private func generateLayout(items: Data) -> some View {
-        let screenWidth = UIScreen.main.bounds.width
 
         var currentWidth: CGFloat = 0
         var currentArrays = [Data.Element]()
-
         var resultRows = [[Data.Element]]()
 
-
         for (index, item) in items.enumerated() {
-            let itemWidth = item.getCellWidth()
+            let itemWidth = item.itemWidth(isEditMode: isEditMode)
 
             if currentWidth + itemWidth >= screenWidth {
                 resultRows.append(currentArrays)
@@ -45,17 +48,20 @@ struct DynamicCellLayout<Data: RandomAccessCollection>: View where Data.Element:
             currentWidth += itemWidth
             currentArrays.append(item)
         }
-
         return VStack(alignment: .leading) {
             ForEach(resultRows, id: \.self) { row in
                 HStack {
                     ForEach(row) { tag in
-                        PDFTagCell(tag: tag) {
-                            action(tag.name)
-                        }
+                        PDFTagCell(isMultiSelectable: isMultiSelectable,
+                                   isEditMode: isEditMode,
+                                   tag: tag,
+                                   selectAction: {selectAction(tag.name)},
+                                   deleteAction: {deleteAction(tag.id)}
+                        )
                     }
                 }
             }
+            .padding(.bottom, 10)
         }
     }
 }

DesignSystem/Views/EllipsisView.swift

@@ -0,0 +1,29 @@
+//
+//  Component.swift
+//  Reazy
+//
+//  Created by 김예림 on 2/17/25.
+//
+
+import SwiftUI
+
+struct EllipsisView: View {
+    let ellipsisAction: () -> Void
+
+    var body: some View {
+        VStack {
+            Spacer()
+
+            Button {
+                ellipsisAction()
+            } label: {
+                Image(systemName: "ellipsis.circle")
+                    .font(.system(size: 24))
+                    .foregroundStyle(.gray550)
+            }
+            .padding(.trailing, 24)
+            .padding(.bottom, 20)
+        }
+    }
+}
+

Domain/Entities/Tag.swift

@@ -10,10 +10,12 @@ import Foundation
 struct Tag: DynamicCell {
     let id: UUID
     var name: String
+    var isSeleted: Bool
 
-    init(id: UUID = .init(), name: String) {
+    init(id: UUID = .init(), name: String, isSeleted: Bool = false) {
         self.id = id
         self.name = name
+        self.isSeleted = isSeleted
     }
 
     func getCellWidth() -> CGFloat {

Domain/Interfaces/DynamicCell.swift

@@ -11,6 +11,14 @@ import Foundation
 protocol DynamicCell: Hashable, Identifiable {
     var id: UUID { get }
     var name: String { get }
+    var isSeleted: Bool { get set }
 
     func getCellWidth() -> CGFloat
 }
+
+extension DynamicCell {
+    func itemWidth(isEditMode: Bool) -> CGFloat {
+        let padding: CGFloat = isEditMode ? 35 : 16
+        return getCellWidth() + padding
+    }
+}

Domain/UseCases/TagViewUseCase.swift

@@ -0,0 +1,24 @@
+//
+//  TagViewUseCase.swift
+//  Reazy
+//
+//  Created by 김예림 on 2/17/25.
+//
+
+import Foundation
+
+//MARK: - TODO : - 코어데이터 연결
+protocol TagViewUseCase {
+    func deleteTag(id: UUID, from tags: inout [Tag])
+    func createTag(name: String, in tags: inout [Tag])
+}
+
+class DefaultTagViewUseCase: TagViewUseCase {
+    func deleteTag(id: UUID, from tags: inout [Tag]) {
+        tags.removeAll { $0.id == id }
+    }
+
+    func createTag(name: String, in tags: inout [Tag]) {
+        tags.append(Tag(name: name))
+    }
+}

Presentation/Home/HomeSearch/Cell/HomePDFCell.swift

@@ -112,9 +112,11 @@ private struct PaperInformationView: View {
 
             HStack {
                 ForEach(tags) { tag in
-                    PDFTagCell(tag: tag) {
-                        tagAction(tag.id)
-                    }
+                    PDFTagCell(isMultiSelectable: false,
+                               isEditMode: false,
+                               tag: tag,
+                               selectAction: {tagAction(tag.id)},
+                               deleteAction: {})
                 }
             }
             .padding(.bottom, 22)
@@ -123,28 +125,6 @@ private struct PaperInformationView: View {
     }
 }
 
-
-private struct EllipsisView: View {
-    let ellipsisAction: () -> Void
-
-    var body: some View {
-        VStack {
-            Spacer()
-
-            Button {
-                ellipsisAction()
-            } label: {
-                Image(systemName: "ellipsis.circle")
-                    .font(.system(size: 24))
-                    .foregroundStyle(.gray550)
-            }
-            .padding(.trailing, 24)
-            .padding(.bottom, 20)
-        }
-    }
-}
-
-
 // MARK: - Epllipsis 버튼 뷰
 private struct EllipsisButtonView: View {
     let editTitleAction: () -> Void

Presentation/Home/HomeSearch/Cell/PDFTagCell.swift

@@ -9,24 +9,45 @@ import SwiftUI
 
 
 struct PDFTagCell<Tag: DynamicCell>: View {
-    let tag: Tag
+    @State private var isAlertPresented: Bool = false
+    let isMultiSelectable: Bool      // 멀티선택 가능 여부
+    let isEditMode: Bool            // 편집 가능 여부
+
+    var tag: Tag
 
-    let action: () -> Void
+    let selectAction: () -> Void
+    let deleteAction: () -> Void
 
     var body: some View {
         Button {
-            action()
+            if !isEditMode {
+                selectAction()
+            }
         } label: {
             // TODO: 태그 title
-            Text(tag.name)
-                .reazyFont(.h3)
-                .foregroundStyle(.gray800)
-                .frame(height: 24)
-                .padding(.horizontal, 8)
-                .background {
-                    RoundedRectangle(cornerRadius: 4)
-                        .foregroundStyle(.primary3)
+            HStack(spacing: 0) {
+                Text(tag.name)
+                    .reazyFont(isMultiSelectable ? .body1 : .h3)
+                    .foregroundStyle(tag.isSeleted ? .gray300 : .gray800)
+                    .fixedSize(horizontal: true, vertical: false)
+
+                // 삭제 버튼
+                if isEditMode {
+                    Button {
+                        deleteAction()
+                    } label: {
+                        Image(systemName: "x.circle.fill")
+                            .foregroundStyle(.gray700)
+                            .font(.system(size: 12))
+                    }
                 }
+            }
+            .frame(height: 24)
+            .padding(.horizontal, 8)
+            .background {
+                RoundedRectangle(cornerRadius: 4)
+                    .foregroundStyle(tag.isSeleted ? .point4 : .primary3)
+            }
         }
     }
 }

Presentation/Home/HomeSearch/HomeSearchView.swift

@@ -153,9 +153,13 @@ private struct RecentlySearchedKeywordView: View {
                     .foregroundStyle(.primary1)
                 }
 
-                DynamicCellLayout(data: homeSearchViewModel.recentSearches) { title in
+                DynamicCellLayout(data: homeSearchViewModel.recentSearches,
+                                  screenWidth: UIScreen.main.bounds.width,
+                                  isMultiSelectable: false,
+                                  isEditMode: false,
+                                  selectAction: { title in
                     homeSearchViewModel.cellTapped(title: title)
-                }
+                }, deleteAction: {_ in })
                 .padding(.top, 20)
 
                 Spacer()