[design] #157 링크카드 디자인 변경사항 반영

Author: ShapeKim98

Projects/DSKit/Sources/Components/PokitLinkCard.swift

@@ -12,25 +12,48 @@ import NukeUI
 
 public struct PokitLinkCard<Item: PokitLinkCardItem>: View {
     private let link: Item
+    private let state: PokitLinkCard.State
+    private let type: PokitLinkCard.CardType
     private let action: () -> Void
     private let kebabAction: (() -> Void)?
     private let fetchMetaData: (() -> Void)?
+    private let favoriteAction: (() -> Void)?
+    private let selectAction: (() -> Void)?
 
     public init(
         link: Item,
+        state: PokitLinkCard.State,
+        type: PokitLinkCard.CardType = .accept,
         action: @escaping () -> Void,
         kebabAction: (() -> Void)? = nil,
-        fetchMetaData: (() -> Void)? = nil
+        fetchMetaData: (() -> Void)? = nil,
+        favoriteAction: (() -> Void)? = nil,
+        selectAction: (() -> Void)? = nil
     ) {
         self.link = link
+        self.state = state
+        self.type = type
         self.action = action
         self.kebabAction = kebabAction
         self.fetchMetaData = fetchMetaData
+        self.favoriteAction = favoriteAction
+        self.selectAction = selectAction
     }
 
     public var body: some View {
-        Button(action: action) {
-            buttonLabel
+        VStack(spacing: 20) {
+            Button(action: action) {
+                buttonLabel
+            }
+            .padding(.top, state == .top ? 0 : 20)
+            
+            if case .top = state {
+                divider
+            }
+            
+            if case .middle = state {
+                divider
+            }
         }
     }
 
@@ -68,6 +91,27 @@ public struct PokitLinkCard<Item: PokitLinkCardItem>: View {
                 }
             }
         }
+        .overlay(alignment: .bottomLeading) {
+            if let isFavorite = link.isFavorite {
+                PokitBookmark(
+                    state: isFavorite ? .active : .default,
+                    action: { favoriteAction?() }
+                )
+                .padding(4)
+            }
+        }
+        .overlay(alignment: .topLeading) {
+            if case .unCatgorized(let isSelected) = type {
+                PokitCheckBox(
+                    baseState: .default,
+                    selectedState: .filled,
+                    isSelected: .constant(isSelected),
+                    shape: .rectangle,
+                    action: { selectAction?() }
+                )
+                .padding(4)
+            }
+        }
     }
 
     private var title: some View {
@@ -90,14 +134,18 @@ public struct PokitLinkCard<Item: PokitLinkCardItem>: View {
         let isUnCategorized = link.categoryName == "미분류"
 
         HStack(spacing: 6) {
+            if let isRead = link.isRead, !isRead {
+                PokitBadge(state: .unRead)
+            }
+            
             PokitBadge(
                 state: isUnCategorized
                 ? .unCategorized
                 : .default(link.categoryName)
             )
 
-            if let isRead = link.isRead, !isRead {
-                PokitBadge(state: .unRead)
+            if let memo = link.memo, !memo.isEmpty {
+                PokitBadge(state: .memo)
             }
         }
     }
@@ -150,17 +198,18 @@ public struct PokitLinkCard<Item: PokitLinkCardItem>: View {
         .frame(width: 124, height: 94)
         .clipShape(RoundedRectangle(cornerRadius: 8, style: .continuous))
     }
+}
+
+extension PokitLinkCard {
+    public enum State {
+        case top
+        case middle
+        case bottom
+    }
 
-    @ViewBuilder
-    public func divider(isFirst: Bool, isLast: Bool) -> some View {
-        let edge: Edge.Set = isFirst ? .bottom : isLast ? .top : .vertical
-        
-        self
-            .padding(edge, 20)
-            .background(alignment: .bottom) {
-                if !isLast {
-                    divider
-                }
-            }
+    public enum CardType {
+        case linkList
+        case unCatgorized(isSelected: Bool)
+        case accept
     }
 }

Projects/Feature/FeatureContentCard/Sources/ContentCard/ContentCardView.swift

@@ -14,16 +14,19 @@ import DSKit
 public struct ContentCardView: View {
     /// - Properties
     public var store: StoreOf<ContentCardFeature>
+    private let type: PokitLinkCard<BaseContentItem>.CardType
     private let isFirst: Bool
     private let isLast: Bool
 
     /// - Initializer
     public init(
         store: StoreOf<ContentCardFeature>,
+        type: PokitLinkCard<BaseContentItem>.CardType = .accept,
         isFirst: Bool = false,
         isLast: Bool = false
     ) {
         self.store = store
+        self.type = type
         self.isFirst = isFirst
         self.isLast = isLast
     }
@@ -34,11 +37,14 @@ public extension ContentCardView {
         WithPerceptionTracking {
             PokitLinkCard(
                 link: store.content,
+                state: isFirst
+                ? .top
+                : isLast ? .bottom : .middle,
+                type: type,
                 action: { send(.컨텐츠_항목_눌렀을때) },
                 kebabAction: { send(.컨텐츠_항목_케밥_버튼_눌렀을때) },
                 fetchMetaData: { send(.메타데이터_조회) }
             )
-            .divider(isFirst: isFirst, isLast: isLast)
         }
     }
 }
@@ -55,11 +61,13 @@ private extension ContentCardView {
                 categoryName: "미분류",
                 categoryId: 992 ,
                 title: "youtube",
+                memo: nil,
                 thumbNail: "https://i.ytimg.com/vi/NnOC4_kH0ok/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDN6u6mTjbaVmRZ4biJS_aDq4uvAQ",
                 data: "https://www.youtube.com/watch?v=wtSwdGJzQCQ",
                 domain: "신서유기",
                 createdAt: "2024.08.08",
-                isRead: false
+                isRead: false,
+                isFavorite: true
             )),
             reducer: { ContentCardFeature() }
         )

Projects/Feature/FeatureRemind/Sources/Remind/RemindView.swift

@@ -258,16 +258,18 @@ extension RemindView {
                     }
 
                     ForEach(unreadContents, id: \.id) { content in
-                        let isFirst = content == unreadContents.elements.first
-                        let isLast = content == unreadContents.elements.last
+                        let isFirst = content.id == unreadContents.first?.id
+                        let isLast = content.id == unreadContents.last?.id
 
                         PokitLinkCard(
                             link: content,
+                            state: isFirst
+                            ? .top
+                            : isLast ? .bottom : .middle,
                             action: { send(.컨텐츠_항목_눌렀을때(content: content)) },
                             kebabAction: { send(.컨텐츠_항목_케밥_버튼_눌렀을때(content: content)) },
                             fetchMetaData: { send(.읽지않음_항목_이미지_조회(contentId: content.id)) }
                         )
-                        .divider(isFirst: isFirst, isLast: isLast)
                     }
                 }
             }
@@ -289,16 +291,18 @@ extension RemindView {
                 .padding(.top, 16)
             } else {
                 ForEach(favoriteContents, id: \.id) { content in
-                    let isFirst = content == favoriteContents.elements.first
-                    let isLast = content == favoriteContents.elements.last
+                    let isFirst = content.id == favoriteContents.first?.id
+                    let isLast = content.id == favoriteContents.last?.id
 
                     PokitLinkCard(
                         link: content,
+                        state: isFirst
+                        ? .top
+                        : isLast ? .bottom : .middle,
                         action: { send(.컨텐츠_항목_눌렀을때(content: content)) },
                         kebabAction: { send(.컨텐츠_항목_케밥_버튼_눌렀을때(content: content)) },
                         fetchMetaData: { send(.즐겨찾기_항목_이미지_조회(contentId: content.id)) }
                     )
-                    .divider(isFirst: isFirst, isLast: isLast)
                 }
             }
         }