From 5dfac283ca6a35bf31e8fc15b3b789145db63a48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8F=84=ED=98=95?=
 <108233361+ShapeKim98@users.noreply.github.com>
Date: Wed, 27 Nov 2024 18:23:00 +0900
Subject: [PATCH] =?UTF-8?q?[design]=20#157=20=ED=8F=AC=ED=82=B7=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=95=AD=EB=AA=A9=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DSKit/Sources/Components/PokitList.swift  | 48 ++++++++++++++++---
 .../Sources/Protocols/PokitSelectItem.swift   |  3 ++
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/Projects/DSKit/Sources/Components/PokitList.swift b/Projects/DSKit/Sources/Components/PokitList.swift
index c3ca1b6d..04e39fcb 100644
--- a/Projects/DSKit/Sources/Components/PokitList.swift
+++ b/Projects/DSKit/Sources/Components/PokitList.swift
@@ -8,6 +8,7 @@
 import SwiftUI
 
 import Util
+import NukeUI
 
 public struct PokitList<Item: PokitSelectItem>: View {
     @Namespace
@@ -15,15 +16,18 @@ public struct PokitList<Item: PokitSelectItem>: View {
     
     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)
     }
 }
diff --git a/Projects/Util/Sources/Protocols/PokitSelectItem.swift b/Projects/Util/Sources/Protocols/PokitSelectItem.swift
index e9767209..0fbec838 100644
--- a/Projects/Util/Sources/Protocols/PokitSelectItem.swift
+++ b/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 }
 }