Apply new NotificationListCell UI

wafflestudio · Jan 8, 2024 · 2209fef · 2209fef
1 parent 482feae
commit 2209fef
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/SNUTT-2022/SNUTT/Assets/STColor.swift b/SNUTT-2022/SNUTT/Assets/STColor.swift
@@ -22,6 +22,12 @@ struct STColor {
     /// RGB 196-196-196 /
     /// 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))
 

diff --git a/SNUTT-2022/SNUTT/Views/Components/NotificationList.swift b/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)
@@ -71,7 +73,7 @@ extension NotificationList {
         }
 
         static var previews: some View {
-            var container: DIContainer = {
+            let container: DIContainer = {
                 let container = DIContainer.preview
                 container.appState.notification.notifications = Self.notifications
                 return container

diff --git a/SNUTT-2022/SNUTT/Views/Components/NotificationListCell.swift b/SNUTT-2022/SNUTT/Views/Components/NotificationListCell.swift
@@ -9,29 +9,43 @@ 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) {
+                    Spacer().frame(height: 7)
+
+                    HStack {
+                        Text(notification.title)
+                            .font(.system(size: 13, weight: .semibold))
 
-                    Spacer()
+                        Spacer()
 
-                    Text(notification.dateString)
-                        .font(STFont.detailLabel)
-                        .foregroundColor(Color(uiColor: .secondaryLabel))
-                }
+                        Text(notification.dateString)
+                            .font(.system(size: 13))
+                            .foregroundColor(STColor.gray30)
+                    }
+
+                    Spacer().frame(height: 6)
 
-                Text(notification.message)
-                    .font(STFont.detailLabel)
+                    Text(notification.message)
+                        .font(.system(size: 13))
+
+                    Spacer().frame(height: 7)
+                }
             }
+            .padding(.vertical, 8)
+
+            Rectangle()
+                .foregroundColor(STColor.divider)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .frame(height: 0.5)
         }
-        .padding(.vertical, 5)
         .frame(maxWidth: .infinity, alignment: .leading)
     }
 }