[design] #157 포킷 뱃지 디자인 변경사항 반영

YAPP-Github · Nov 27, 2024 · 389daa5 · 389daa5
1 parent ead2ee6
commit 389daa5
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 23 deletions.
diff --git a/Projects/DSKit/Sources/Components/PokitBadge.swift b/Projects/DSKit/Sources/Components/PokitBadge.swift
@@ -8,51 +8,101 @@
 import SwiftUI
 
 public struct PokitBadge: View {
-    private let labelText: String
     private let state: PokitBadge.State
 
-    public init(
-        _ labelText: String,
-        state: PokitBadge.State
-    ) {
-        self.labelText = labelText
+    public init(state: PokitBadge.State) {
         self.state = state
     }
 
     public var body: some View {
-        Text(labelText)
-            .pokitFont(.l4)
-            .foregroundStyle(
-                state == .unCategorized ? .pokit(.text(.secondary)) : .pokit(.text(.tertiary))
-            )
-            .padding(.horizontal, state == .small ? 4 : 8)
-            .padding(.vertical, state == .small ? 2 : 4)
+        label
             .background {
                 RoundedRectangle(cornerRadius: 4, style: .continuous)
                     .fill(backgroundColor)
                     .overlay {
                         if state == .unRead {
                             RoundedRectangle(cornerRadius: 4, style: .continuous)
-                                .stroke(.pokit(.border(.tertiary)), lineWidth: 1)
+                                .stroke(.pokit(.border(.brand)), lineWidth: 1)
                         }
                     }
             }
     }
 
     private var backgroundColor: Color {
         switch self.state {
-        case .default, .small: return .pokit(.bg(.primary))
+        case .default, .small, .memo, .member: return .pokit(.bg(.primary))
         case .unCategorized: return .pokit(.color(.grayScale(._50)))
         case .unRead: return .pokit(.bg(.base))
         }
     }
+
+    private var labelColor: Color {
+        switch self.state {
+        case .default, .small: return .pokit(.text(.tertiary))
+        case .unCategorized: return .pokit(.text(.secondary))
+        case .unRead: return .pokit(.text(.brand))
+        case .memo, .member: return .pokit(.icon(.secondary))
+        }
+    }
+
+    private var label: some View {
+        Group {
+            switch self.state {
+            case let .default(labelText):
+                Text(labelText)
+                    .pokitFont(.l4)
+                    .padding(.horizontal, 8)
+                    .padding(.vertical, 4)
+            case let .small(labelText):
+                Text(labelText)
+                    .pokitFont(.l4)
+                    .padding(.horizontal, 4)
+                    .padding(.vertical, 2)
+            case .unCategorized:
+                Text("미분류")
+                    .pokitFont(.l4)
+                    .padding(.horizontal, 8)
+                    .padding(.vertical, 4)
+            case .unRead:
+                Text("안읽음")
+                    .pokitFont(.l4)
+                    .padding(.horizontal, 8)
+                    .padding(.vertical, 4)
+            case .memo:
+                Image(.icon(.memo))
+                    .resizable()
+                    .frame(width: 16, height: 16)
+                    .padding(2)
+            case .member:
+                Image(.icon(.member))
+                    .resizable()
+                    .frame(width: 16, height: 16)
+                    .padding(2)
+            }
+        }
+        .foregroundStyle(labelColor)
+    }
 }
 
 public extension PokitBadge {
-    enum State {
-        case `default`
-        case small
+    enum State: Equatable {
+        case `default`(String)
+        case small(String)
         case unCategorized
         case unRead
+        case memo
+        case member
     }
 }
+
+#Preview {
+    PokitBadge(state: .unRead)
+
+    PokitBadge(state: .default("포킷명"))
+
+    PokitBadge(state: .unCategorized)
+
+    PokitBadge(state: .memo)
+
+    PokitBadge(state: .member)
+}
diff --git a/Projects/DSKit/Sources/Components/PokitLinkCard.swift b/Projects/DSKit/Sources/Components/PokitLinkCard.swift
@@ -91,12 +91,13 @@ public struct PokitLinkCard<Item: PokitLinkCardItem>: View {
 
         HStack(spacing: 6) {
             PokitBadge(
-                link.categoryName,
-                state: isUnCategorized ? .unCategorized : .default
+                state: isUnCategorized
+                ? .unCategorized
+                : .default(link.categoryName)
             )
 
             if let isRead = link.isRead, !isRead {
-                PokitBadge("안읽음", state: .unRead)
+                PokitBadge(state: .unRead)
             }
         }
     }

diff --git a/Projects/Feature/FeatureContentDetail/Sources/ContentDetail/ContentDetailView.swift b/Projects/Feature/FeatureContentDetail/Sources/ContentDetail/ContentDetailView.swift
@@ -90,7 +90,7 @@ private extension ContentDetailView {
                     }
             }
 
-            PokitBadge(content.category.categoryName, state: .default)
+            PokitBadge(state: .default(content.category.categoryName))
 
             Spacer()
         }

diff --git a/Projects/Feature/FeatureRemind/Sources/Remind/RemindView.swift b/Projects/Feature/FeatureRemind/Sources/Remind/RemindView.swift
@@ -156,7 +156,7 @@ extension RemindView {
             )
 
             VStack(alignment: .leading, spacing: 0) {
-                PokitBadge(content.categoryName, state: .small)
+                PokitBadge(state: .small(content.categoryName))
 
                 HStack(spacing: 4) {
                     Text(content.title)
-Original file line number
+Diff line change
@@ Expand Up / @@ -90,7 +90,7 @@ private extension ContentDetailView { @@
                         }
                 }
-                PokitBadge(content.category.categoryName, state: .default)
+                PokitBadge(state: .default(content.category.categoryName))
                 Spacer()
             }
@@ Expand Down @@