Change NotificationListCell icon and use title from NotificationDto

SNUTT-2022/SNUTT/Assets/Assets.xcassets/Icons/noti.calendar.imageset/Contents.json

@@ -17,7 +17,7 @@
       "scale" : "1x"
     },
     {
-      "filename" : "timetable@2x-1.png",
+      "filename" : "noti.calendar@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
@@ -28,12 +28,12 @@
           "value" : "dark"
         }
       ],
-      "filename" : "timetable@2x.png",
+      "filename" : "noti.calendar.dark@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "timetable@3x-1.png",
+      "filename" : "noti.calendar@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     },
@@ -44,7 +44,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "timetable@3x.png",
+      "filename" : "noti.calendar.dark@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

SNUTT-2022/SNUTT/Assets/Assets.xcassets/Icons/noti.exclamation.imageset/Contents.json

@@ -17,7 +17,7 @@
       "scale" : "1x"
     },
     {
-      "filename" : "warning@2x-2.png",
+      "filename" : "noti.exclamation@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
@@ -28,12 +28,12 @@
           "value" : "dark"
         }
       ],
-      "filename" : "warning@2x.png",
+      "filename" : "noti.exclamation.dark@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "warning@3x-1.png",
+      "filename" : "noti.exclamation@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     },
@@ -44,7 +44,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "warning@3x.png",
+      "filename" : "noti.exclamation.dark@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

SNUTT-2022/SNUTT/Assets/Assets.xcassets/Icons/noti.megaphone.imageset/Contents.json

@@ -17,7 +17,7 @@
       "scale" : "1x"
     },
     {
-      "filename" : "info@2x-1.png",
+      "filename" : "noti.megaphone@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
@@ -28,12 +28,12 @@
           "value" : "dark"
         }
       ],
-      "filename" : "info@2x.png",
+      "filename" : "noti.megaphone.dark@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "info@3x-1.png",
+      "filename" : "noti.megaphone@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     },
@@ -44,7 +44,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "info@3x.png",
+      "filename" : "noti.megaphone.dark@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

SNUTT-2022/SNUTT/Assets/Assets.xcassets/Icons/noti.refresh.imageset/Contents.json

@@ -17,7 +17,7 @@
       "scale" : "1x"
     },
     {
-      "filename" : "update@2x.png",
+      "filename" : "noti.refresh@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
@@ -28,12 +28,12 @@
           "value" : "dark"
         }
       ],
-      "filename" : "update@2x-1.png",
+      "filename" : "noti.refresh.dark@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "update@3x.png",
+      "filename" : "noti.refresh@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     },
@@ -44,7 +44,7 @@
           "value" : "dark"
         }
       ],
-      "filename" : "update@3x-1.png",
+      "filename" : "noti.refresh.dark@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

SNUTT-2022/SNUTT/Assets/STColor.swift

@@ -23,6 +23,12 @@ struct STColor {
     /// Hex #C4C4C4
     static let gray: Color = .init(hex: "#C4C4C4")
 
+    /// Hex #A6A6A6
+    static let gray30: Color = .init(hex: "#A6A6A6")
+
+    /// Hex #EBEBEB
+    static let divider: Color = .init(hex: "#EBEBEB")
+
     static let disabled: Color = .init(uiColor: .label.withAlphaComponent(0.6))
 
     static let navBackground: Color = .init("nav.background")

SNUTT-2022/SNUTT/Models/STNotification.swift

@@ -8,6 +8,7 @@
 import Foundation
 
 struct STNotification: Hashable {
+    let title: String
     let message: String
     let created_at: String
     let type: NotificationType
@@ -20,25 +21,6 @@ struct STNotification: Hashable {
         return DateFormatter.parse(date: date)
     }
 
-    var title: String {
-        switch type {
-        case .normal:
-            return "공지"
-        case .courseBook:
-            return "수강편람"
-        case .lectureUpdate:
-            return "업데이트 알림"
-        case .lectureRemove:
-            return "폐강 알림"
-        case .lectureVacancy:
-            return "빈자리 알림"
-        case .friend:
-            return "친구"
-        case .newFeature:
-            return "신규 기능"
-        }
-    }
-
     var imageName: String {
         switch type {
         case .normal:
@@ -62,6 +44,7 @@ struct STNotification: Hashable {
 extension STNotification {
     init(from dto: NotificationDto
     ) {
+        title = dto.title
         message = dto.message
         created_at = dto.created_at
         type = NotificationType(rawValue: dto.type) ?? .normal

SNUTT-2022/SNUTT/Repositories/Dto/NotificationDto.swift

@@ -8,13 +8,15 @@
 import Foundation
 
 struct NotificationDto: Decodable {
+    let title: String
     let message: String
     let created_at: String
     let type: Int
     let user_id: String?
     var detail: Any?
 
     enum CodingKeys: String, CodingKey {
+        case title
         case message
         case created_at
         case type
@@ -24,6 +26,7 @@ struct NotificationDto: Decodable {
 
     init(from decoder: Decoder) throws {
         let container = try decoder.container(keyedBy: CodingKeys.self)
+        title = try container.decode(String.self, forKey: .title)
         message = try container.decode(String.self, forKey: .message)
         created_at = try container.decode(String.self, forKey: .created_at)
         self.type = try container.decode(Int.self, forKey: .type)

SNUTT-2022/SNUTT/Views/Components/NotificationList.swift

@@ -20,9 +20,11 @@ struct NotificationList: View {
                         }
                     }
                     .listRowBackground(STColor.systemBackground)
+                    .listRowInsets(EdgeInsets())
                     .listRowSeparator(.hidden)
             }
         }
+        .padding(.horizontal, 16)
         .listStyle(.plain)
         .navigationTitle(Text("알림"))
         .navigationBarTitleDisplayMode(.inline)
@@ -64,14 +66,14 @@ extension NotificationList {
     struct NotificationList_Previews: PreviewProvider {
         static var notifications: [STNotification] {
             return [
-                .init(message: "공지", created_at: "2022-04-30T08:11:04.200Z", type: .normal, user_id: ""),
-                .init(message: "공지", created_at: "2022-04-30T08:11:04.201Z", type: .normal, user_id: ""),
-                .init(message: "공지", created_at: "2022-04-30T08:11:04.202Z", type: .normal, user_id: ""),
+                .init(title: "공지", message: "공지예시 1", created_at: "2022-04-30T08:11:04.200Z", type: .normal, user_id: ""),
+                .init(title: "공지", message: "공지예시 2", created_at: "2022-04-30T08:11:04.201Z", type: .normal, user_id: ""),
+                .init(title: "공지", message: "공지예시 3", created_at: "2022-04-30T08:11:04.202Z", type: .normal, user_id: ""),
             ]
         }
 
         static var previews: some View {
-            var container: DIContainer = {
+            let container: DIContainer = {
                 let container = DIContainer.preview
                 container.appState.notification.notifications = Self.notifications
                 return container

SNUTT-2022/SNUTT/Views/Components/NotificationListCell.swift

@@ -9,41 +9,53 @@ import SwiftUI
 
 struct NotificationListCell: View {
     let notification: STNotification
+
     var body: some View {
-        HStack(alignment: .top, spacing: 10) {
-            Image(notification.imageName)
-                .resizable()
-                .frame(width: 30, height: 30)
+        VStack(spacing: 0) {
+            HStack(alignment: .top, spacing: 10) {
+                Image(notification.imageName)
+                    .resizable()
+                    .frame(width: 30, height: 30)
 
-            VStack(alignment: .leading, spacing: 10) {
-                HStack {
-                    Text(notification.title)
-                        .font(.system(size: 14, weight: .bold))
+                VStack(alignment: .leading, spacing: 0) {
+                    HStack(alignment: .top) {
+                        Text(notification.title)
+                            .font(.system(size: 14, weight: .semibold))
 
-                    Spacer()
+                        Spacer()
 
-                    Text(notification.dateString)
-                        .font(STFont.detailLabel)
-                        .foregroundColor(Color(uiColor: .secondaryLabel))
-                }
+                        Text(notification.dateString)
+                            .font(.system(size: 14))
+                            .foregroundColor(STColor.gray30)
+                    }
+
+                    Spacer().frame(height: 6)
 
-                Text(notification.message)
-                    .font(STFont.detailLabel)
+                    Text(notification.message)
+                        .font(.system(size: 14))
+                }
+                .padding(.vertical, 7)
+                .padding(.trailing, 2)
             }
+            .padding(.vertical, 8)
+
+            Rectangle()
+                .foregroundColor(STColor.divider)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .frame(height: 0.5)
         }
-        .padding(.vertical, 5)
         .frame(maxWidth: .infinity, alignment: .leading)
     }
 }
 
 struct NotificationListCell_Previews: PreviewProvider {
     static var previews: some View {
         VStack {
-            NotificationListCell(notification: .init(message: "공지", created_at: "2022-04-30T08:11:04.200Z", type: .normal, user_id: ""))
-            NotificationListCell(notification: .init(message: "알림", created_at: "2022-04-30T08:11:04.200Z", type: .lectureVacancy, user_id: ""))
-            NotificationListCell(notification: .init(message: "아무내용", created_at: "2022-04-30T08:11:04.200Z", type: .lectureUpdate, user_id: ""))
-            NotificationListCell(notification: .init(message: String(repeating: "공지입니다. ", count: 10), created_at: "2022-04-30T08:11:04.200Z", type: .lectureRemove, user_id: ""))
-            NotificationListCell(notification: .init(message: String(repeating: "공지입니다. ", count: 30), created_at: "2022-04-30T08:11:04.200Z", type: .courseBook, user_id: ""))
+            NotificationListCell(notification: .init(title: "공지", message: "공지 예시입니다", created_at: "2022-04-30T08:11:04.200Z", type: .normal, user_id: ""))
+            NotificationListCell(notification: .init(title: "새로운 알림", message: "알림 예시입니다", created_at: "2022-04-30T08:11:04.200Z", type: .lectureVacancy, user_id: ""))
+            NotificationListCell(notification: .init(title: "친구 요청", message: "SNUTT#1234님이 친구 요청을 보냈습니다", created_at: "2022-04-30T08:11:04.200Z", type: .friend, user_id: ""))
+            NotificationListCell(notification: .init(title: "폐강 알림", message: String(repeating: "공지입니다. ", count: 10), created_at: "2022-04-30T08:11:04.200Z", type: .lectureRemove, user_id: ""))
+            NotificationListCell(notification: .init(title: "2099년 2학기 수강편람이 공개되었습니다.", message: String(repeating: "공지입니다. ", count: 30), created_at: "2022-04-30T08:11:04.200Z", type: .courseBook, user_id: ""))
         }
     }
 }