[#465] 태그편집 기능 구현

Author: Dorii0513

DesignSystem/Views/DynamicCellLayout.swift

@@ -11,6 +11,7 @@ import SwiftUI
  Cell들의 폭의 반응하여 List를 만드는 구조체
  */
 struct DynamicCellLayout<Data: RandomAccessCollection>: View where Data.Element: DynamicCell {
+    @EnvironmentObject var tagViewModel: TagViewModel
     let data: Data
     let action: (String) -> Void
     let screenWidth: CGFloat
@@ -21,15 +22,14 @@ struct DynamicCellLayout<Data: RandomAccessCollection>: View where Data.Element:
     }
 
     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() + 16
+            let itemWidth = item.itemWidth(isEditMode: tagViewModel.isEditMode)
             if currentWidth + itemWidth + 20 >= screenWidth {
                 resultRows.append(currentArrays)
                 currentArrays.removeAll()

Presentation/Home/HomeSearch/Cell/PDFTagCell.swift

@@ -24,15 +24,27 @@ struct PDFTagCell<Tag: DynamicCell>: View {
             action()
         } label: {
             // TODO: 태그 title
-            Text(tag.name)
-                .reazyFont(.h3)
-                .foregroundStyle(isSelected ? .gray300 : .gray800)
-                .frame(width: tag.getCellWidth(), height: 24)
-                .padding(.horizontal, 8)
-                .background {
-                    RoundedRectangle(cornerRadius: 4)
-                        .foregroundStyle(isSelected ? .point4 : .primary3)
+            HStack(spacing: 8) {
+                Text(tag.name)
+                    .reazyFont(.h3)
+                    .foregroundStyle(isSelected ? .gray300 : .gray800)
+                    .frame(width: tag.getCellWidth())
+                if tagViewModel.isEditMode {
+                    Button {
+                        tagViewModel.deleteTag(id: tag.id)
+                    } label: {
+                        Image(systemName: "x.circle.fill")
+                            .foregroundStyle(.gray700)
+                            .font(.system(size: 12))
+                    }
                 }
+            }
+            .padding(.horizontal, 8)
+            .frame(height: 24)
+            .background {
+                RoundedRectangle(cornerRadius: 4)
+                    .foregroundStyle(isSelected ? .point4 : .primary3)
+            }
         }
     }
 }
@@ -65,3 +77,11 @@ protocol DynamicCell: Hashable, Identifiable {
 
     func getCellWidth() -> CGFloat
 }
+
+extension DynamicCell {
+    /// 편집 모드 여부에 따라 동적으로 셀 너비를 계산
+    func itemWidth(isEditMode: Bool) -> CGFloat {
+        let additionalPadding: CGFloat = isEditMode ? 40 : 16
+        return getCellWidth() + additionalPadding
+    }
+}

Presentation/Home/TagSearch/TagView.swift

@@ -10,7 +10,6 @@ import SwiftUI
 // MARK: - [쿠로] 태그 뷰!
 struct TagView: View {
     @EnvironmentObject private var tagViewModel: TagViewModel
-    @State private var popover = false
     @Namespace private var nsPopover
 
     var body: some View {
@@ -50,14 +49,28 @@ struct TagView: View {
                         // 편집 버튼
                         HStack(spacing: 0) {
                             Spacer()
-                            EllipsisView(ellipsisAction: {
-                                withAnimation {
-                                    popover.toggle()
+                            if tagViewModel.isEditMode {
+                                Button {
+                                    withAnimation {
+                                        tagViewModel.isEditMode = false
+                                    }
+                                } label: {
+                                    Text("완료")
+                                        .reazyFont(.button1)
+                                        .foregroundColor(.primary1)
+                                        .padding(.trailing, 24)
+                                        .padding(.bottom, 20)
                                 }
-                            })
-                            .matchedGeometryEffect(id: "popover",
-                                                   in: nsPopover,
-                                                   anchor: .topTrailing)
+                            } else {
+                                EllipsisView(ellipsisAction: {
+                                    withAnimation {
+                                        tagViewModel.popover.toggle()
+                                    }
+                                })
+                                .matchedGeometryEffect(id: "popover",
+                                                       in: nsPopover,
+                                                       anchor: .topTrailing)
+                            }
                         }
                     }
                     .frame(maxWidth: .infinity,maxHeight: geometry.size.height * 0.4)
@@ -68,7 +81,7 @@ struct TagView: View {
                 }
                 .padding([.top, .horizontal], 20)
             }
-            if popover {
+            if tagViewModel.popover {
                 EllipsisButtonView(namespace: nsPopover)
                     .transition(.opacity.combined(with: .scale))
             }
@@ -77,7 +90,7 @@ struct TagView: View {
         .ignoresSafeArea(.all)
         .onTapGesture {
             withAnimation {
-                popover = false
+                tagViewModel.popover = false
             }
         }
     }
@@ -134,11 +147,16 @@ struct TagListView: View {
 
 // MARK: - 태그 전체 리스트 뷰
 private struct EllipsisButtonView: View {
+    @EnvironmentObject private var tagViewModel: TagViewModel
     let namespace: Namespace.ID
+    
     var body: some View {
         VStack(spacing: 0) {
             Button {
-                
+                withAnimation {
+                    tagViewModel.isEditMode = true
+                    tagViewModel.popover = false
+                }
             } label: {
                 HStack {
                     Text("태그 목록 편집")
@@ -178,7 +196,8 @@ private struct EllipsisButtonView: View {
         .background(
             RoundedRectangle(cornerRadius: 10)
                 .fill(.gray100)
-                .shadow(color: Color(hex: "#3C3D4B").opacity(0.08), radius: 12, x: 0, y: 0)
+                .shadow(color: Color(hex: "#3C3D4B").opacity(0.08),
+                        radius: 12, x: 0, y: 0)
         )
         .padding(.trailing, 70)
         .matchedGeometryEffect(id: "popover",

Presentation/Home/TagSearch/TagViewModel.swift

@@ -12,6 +12,7 @@ import Combine
 class TagViewModel: ObservableObject {
 
     private let tagViewUseCase: TagViewUseCase
+    // MARK: - [부리] tags에 사용자가 만든 태그들 다 저장
     @Published public var tags: [TemporaryTag] = []
     @Published public var selectedTags: [String] = [] {
         didSet {
@@ -20,6 +21,8 @@ class TagViewModel: ObservableObject {
     }
     @Published public private(set) var isTagExist: Bool = false
     @Published public var isTagSelected: Bool = false
+    @Published public var isEditMode: Bool = false
+    @Published public var popover: Bool = false
     private var cancellables = Set<AnyCancellable>()
 
     init(
@@ -47,4 +50,8 @@ class TagViewModel: ObservableObject {
                 selectedTags.append(tagName)
             }
     }
+    
+    func deleteTag(id: UUID) {
+        tags.removeAll { $0.id == id }
+    }
 }