[Design] 태그뷰 디자인하기

DesignSystem/Views/DynamicCellLayout.swift

@@ -12,25 +12,29 @@ import SwiftUI
  */
 struct DynamicCellLayout<Data: RandomAccessCollection>: View where Data.Element: DynamicCell {
     let data: Data
-    let action: (String) -> Void
+    let screenWidth: CGFloat
+    let selectedTags: [String]
+
+    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()
-
-            if currentWidth + itemWidth >= screenWidth {
+            let itemWidth = item.itemWidth(isEditMode: isEditMode)
+            if currentWidth + itemWidth + 10 >= screenWidth {
                 resultRows.append(currentArrays)
                 currentArrays.removeAll()
                 currentWidth = 0
@@ -42,20 +46,24 @@ struct DynamicCellLayout<Data: RandomAccessCollection>: View where Data.Element:
                 break
             }
 
-            currentWidth += itemWidth
+            currentWidth += itemWidth + 20
             currentArrays.append(item)
         }
-
         return VStack(alignment: .leading) {
             ForEach(resultRows, id: \.self) { row in
-                HStack {
+                HStack(spacing: 10) {
                     ForEach(row) { tag in
-                        PDFTagCell(tag: tag) {
-                            action(tag.name)
-                        }
+                        PDFTagCell(isMultiSelectable: isMultiSelectable,
+                                   isEditMode: isEditMode,
+                                   selectedTags: selectedTags,
+                                   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/Interfaces/DynamicCell.swift

@@ -14,3 +14,10 @@ protocol DynamicCell: Hashable, Identifiable {
 
     func getCellWidth() -> CGFloat
 }
+
+extension DynamicCell {
+    func itemWidth(isEditMode: Bool) -> CGFloat {
+        let additionalPadding: CGFloat = isEditMode ? 40 : 16
+        return getCellWidth() + additionalPadding
+    }
+}

Domain/UseCases/TagViewUseCase.swift

@@ -0,0 +1,16 @@
+//
+//  TagViewUseCase.swift
+//  Reazy
+//
+//  Created by 김예림 on 2/17/25.
+//
+
+import Foundation
+
+protocol TagViewUseCase {
+    //TODO: - 태그 저장, 수정, 삭제
+}
+
+class DefaultTagViewUseCase: TagViewUseCase {
+
+}

GoogleService-Info.plist

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>API_KEY</key>
+	<string>AIzaSyAT_wmkbWRbdvZJFiARSLRTquTXlyFFTxI</string>
+	<key>GCM_SENDER_ID</key>
+	<string>309584491328</string>
+	<key>PLIST_VERSION</key>
+	<string>1</string>
+	<key>BUNDLE_ID</key>
+	<string>com.chillin.reazy</string>
+	<key>PROJECT_ID</key>
+	<string>reazy-924ee</string>
+	<key>STORAGE_BUCKET</key>
+	<string>reazy-924ee.firebasestorage.app</string>
+	<key>IS_ADS_ENABLED</key>
+	<false></false>
+	<key>IS_ANALYTICS_ENABLED</key>
+	<false></false>
+	<key>IS_APPINVITE_ENABLED</key>
+	<true></true>
+	<key>IS_GCM_ENABLED</key>
+	<true></true>
+	<key>IS_SIGNIN_ENABLED</key>
+	<true></true>
+	<key>GOOGLE_APP_ID</key>
+	<string>1:309584491328:ios:cb4ebfa2ccbff0c08240a5</string>
+</dict>
+</plist>

Presentation/Home/HomeSearch/Cell/HomePDFCell.swift

@@ -112,9 +112,12 @@ private struct PaperInformationView: View {
 
             HStack {
                 ForEach(tags) { tag in
-                    PDFTagCell(tag: tag) {
-                        tagAction(tag.id)
-                    }
+                    PDFTagCell(isMultiSelectable: false,
+                               isEditMode: false,
+                               selectedTags: [],
+                               tag: tag,
+                               selectAction: {tagAction(tag.id)},
+                               deleteAction: {})
                 }
             }
             .padding(.bottom, 22)
@@ -123,28 +126,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,50 @@ import SwiftUI
 
 
 struct PDFTagCell<Tag: DynamicCell>: View {
+    var isSelected: Bool {
+        return isMultiSelectable && selectedTags.contains(tag.name)
+    }
+    @State var isAlertPresented: Bool = false
+    let isMultiSelectable: Bool      // 멀티선택 가능 여부
+    let isEditMode: Bool            // 편집 가능 여부
+
+    let selectedTags: [String]
     let tag: Tag
 
-    let action: () -> Void
+    let selectAction: () -> Void
+    let deleteAction: () -> Void
 
     var body: some View {
         Button {
-            action()
+            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: 8) {
+                Text(tag.name)
+                    .reazyFont(isMultiSelectable ? .body1 : .h3)
+                    .foregroundStyle(isSelected ? .gray300 : .gray800)
+                    .frame(width: tag.getCellWidth())
+                if isEditMode {
+                    Button {
+                        isAlertPresented = true
+                    } label: {
+                        Image(systemName: "x.circle.fill")
+                            .foregroundStyle(.gray700)
+                            .font(.system(size: 12))
+                    }
+                    .alert("“\(tag.name)”\n태그를 삭제하시겠습니까?\n해당 태그가 달린 모든 논문에서도 삭제됩니다.", isPresented: $isAlertPresented) {
+                        Button("삭제", role: .destructive, action: {
+                            deleteAction()
+                        })
+                    }
                 }
+            }
+            .padding(.horizontal, 8)
+            .frame(height: 24)
+            .background {
+                RoundedRectangle(cornerRadius: 4)
+                    .foregroundStyle(isSelected ? .point4 : .primary3)
+            }
         }
     }
 }

Presentation/Home/HomeSearch/HomeSearchView.swift

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