[design] #157 포킷 리스트 항목 디자인 변경사항 반영

Author: ShapeKim98

Projects/DSKit/Sources/Components/PokitList.swift

@@ -8,22 +8,26 @@
 import SwiftUI
 
 import Util
+import NukeUI
 
 public struct PokitList<Item: PokitSelectItem>: View {
     @Namespace
     private var heroEffect
 
     private let selectedItem: Item?
     private let list: [Item]
+    private let isDisabled: Bool
     private let action: (Item) -> Void
 
     public init(
         selectedItem: Item?,
         list: [Item],
+        isDisabled: Bool = false,
         action: @escaping (Item) -> Void
     ) {
         self.selectedItem = selectedItem
         self.list = list
+        self.isDisabled = isDisabled
         self.action = action
     }
 
@@ -54,29 +58,61 @@ public struct PokitList<Item: PokitSelectItem>: View {
         Button {
             action(item)
         } label: {
-            HStack {
+            HStack(spacing: 12) {
+                thumbNail(url: item.categoryImage.imageURL)
+                
                 VStack(alignment: .leading, spacing: 4) {
                     Text(item.categoryName)
                         .pokitFont(.b1(.b))
-                        .foregroundStyle(.pokit(.text(.primary)))
+                        .foregroundStyle(
+                            isDisabled
+                            ? .pokit(.text(.disable))
+                            : .pokit(.text(.primary))
+                        )
 
                     Text("링크 \(item.contentCount)개")
                         .pokitFont(.detail1)
-                        .foregroundStyle(.pokit(.text(.tertiary)))
+                        .foregroundStyle(
+                            isDisabled
+                            ? .pokit(.text(.disable))
+                            : .pokit(.text(.tertiary))
+                        )
                 }
 
                 Spacer()
             }
-            .padding(.leading, 28)
-            .padding(.trailing, 20)
-            .padding(.vertical, 13)
+            .padding(.vertical, 18)
+            .padding(.horizontal, 20)
             .background {
                 if isSelected {
                     Color.pokit(.bg(.primary))
                         .matchedGeometryEffect(id: "SELECT", in: heroEffect)
+                } else {
+                    isDisabled
+                    ? Color.pokit(.bg(.disable))
+                    : Color.pokit(.bg(.base))
                 }
             }
         }
         .animation(.pokitDissolve, value: isSelected)
+        .disabled(isDisabled)
+    }
+    
+    @MainActor
+    private func thumbNail(url: String) -> some View {
+        LazyImage(url: URL(string: url)) { state in
+            Group {
+                if let image = state.image {
+                    image
+                        .resizable()
+                } else {
+                    PokitSpinner()
+                        .foregroundStyle(.pokit(.icon(.brand)))
+                        .frame(width: 48, height: 48)
+                }
+            }
+            .animation(.pokitDissolve, value: state.image)
+        }
+        .frame(width: 60, height: 60)
     }
 }

Projects/Util/Sources/Protocols/PokitSelectItem.swift

@@ -8,6 +8,9 @@
 import Foundation
 
 public protocol PokitSelectItem: Identifiable, Equatable {
+    associatedtype Thumbnail: CategoryImage
+    
     var categoryName: String { get }
     var contentCount: Int { get }
+    var categoryImage: Thumbnail { get }
 }