feat(notification): 알림 목록 화면과 읽음 처리 추가

app/src/main/java/com/example/it_da/navigation/AppNavigation.kt

@@ -7,6 +7,7 @@ import androidx.navigation.compose.rememberNavController
 import com.example.it_da.ui.screen.home.HomeRoute
 import com.example.it_da.ui.screen.login.LoginLaunchRoute
 import com.example.it_da.ui.screen.login.LoginRoute
+import com.example.it_da.ui.screen.notification.route.NotificationRoute
 import com.example.it_da.ui.screen.projectcreate.route.ProjectCreateRoute
 import com.example.it_da.ui.screen.signup.route.SignUpAccountRoute
 import com.example.it_da.ui.screen.signup.route.SignUpAdditionalInfoRoute
@@ -44,6 +45,11 @@ fun AppNavigation() {
             launchSingleTop = true
         }
     }
+    val navigateNotification: () -> Unit = {
+        navController.navigate(NotificationDestination) {
+            launchSingleTop = true
+        }
+    }
     NavHost(
         navController = navController,
         startDestination = LoginLaunchDestination
@@ -89,7 +95,8 @@ fun AppNavigation() {
 
         composable<HomeDestination> {
             HomeRoute(
-                onCreateProjectClick = navigateProjectCreate
+                onCreateProjectClick = navigateProjectCreate,
+                onNotificationClick = navigateNotification
             )
         }
 
@@ -102,7 +109,20 @@ fun AppNavigation() {
                 onHomeTabClick = navigateHome,
                 onExploreTabClick = {},
                 onCreateProjectClick = navigateProjectCreate,
-                onNotificationTabClick = {},
+                onNotificationTabClick = navigateNotification,
+                onProfileTabClick = {}
+            )
+        }
+
+        composable<NotificationDestination> {
+            NotificationRoute(
+                onBackClick = {
+                    navController.popBackStack()
+                },
+                onHomeTabClick = navigateHome,
+                onExploreTabClick = {},
+                onCreateProjectClick = navigateProjectCreate,
+                onNotificationTabClick = navigateNotification,
                 onProfileTabClick = {}
             )
         }

app/src/main/java/com/example/it_da/navigation/AppRoute.kt

@@ -20,3 +20,6 @@ data object HomeDestination
 
 @Serializable
 data object ProjectCreateDestination
+
+@Serializable
+data object NotificationDestination

app/src/main/java/com/example/it_da/ui/screen/notification/NotificationUiStateMapper.kt

@@ -0,0 +1,15 @@
+package com.example.it_da.ui.screen.notification
+
+import com.example.it_da.domain.model.Notification
+import com.example.it_da.ui.screen.notification.state.NotificationUiModel
+
+// Converts shared domain notification values into notification screen UI values.
+fun Notification.toNotificationUiModel(): NotificationUiModel {
+    return NotificationUiModel(
+        id = id,
+        title = title,
+        description = message,
+        elapsedTime = elapsedTime,
+        isRead = isRead
+    )
+}

app/src/main/java/com/example/it_da/ui/screen/notification/component/NotificationCard.kt

@@ -0,0 +1,97 @@
+package com.example.it_da.ui.screen.notification.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.example.it_da.R
+import com.example.it_da.ui.commonComponent.ItdaCard
+import com.example.it_da.ui.screen.notification.state.NotificationUiModel
+import com.example.it_da.ui.theme.ItdaPrimaryTextColor
+import com.example.it_da.ui.theme.ItdaSecondaryTextColor
+
+private val NotificationTitleDescriptionSpacing = 8.dp
+private val NotificationDescriptionMetadataSpacing = 22.dp
+private const val NotificationMetadataFlexibleSpacingWeight = 1f
+
+// Displays one notification with its read state image and elapsed time.
+@Composable
+fun NotificationCard(
+    notification: NotificationUiModel,
+    onClick: (String) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    ItdaCard(
+        modifier = modifier
+            .fillMaxWidth()
+            .heightIn(min = 112.dp)
+            .clickable {
+                onClick(notification.id)
+            }
+    ) {
+        Column(
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 15.dp)
+        ) {
+            Text(
+                text = notification.title,
+                color = ItdaPrimaryTextColor,
+                style = MaterialTheme.typography.titleMedium
+            )
+
+            Spacer(modifier = Modifier.height(NotificationTitleDescriptionSpacing))
+
+            Text(
+                text = notification.description,
+                color = ItdaSecondaryTextColor,
+                style = MaterialTheme.typography.bodyLarge
+            )
+
+            Spacer(modifier = Modifier.height(NotificationDescriptionMetadataSpacing))
+
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Image(
+                    painter = painterResource(
+                        id = if (notification.isRead) {
+                            R.drawable.check
+                        } else {
+                            R.drawable.not_check
+                        }
+                    ),
+                    contentDescription = stringResource(
+                        id = if (notification.isRead) {
+                            R.string.notification_read_description
+                        } else {
+                            R.string.notification_unread_description
+                        }
+                    ),
+                    modifier = Modifier.size(14.dp)
+                )
+
+                Spacer(modifier = Modifier.weight(NotificationMetadataFlexibleSpacingWeight))
+
+                Text(
+                    text = notification.elapsedTime,
+                    color = ItdaSecondaryTextColor,
+                    style = MaterialTheme.typography.bodySmall
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/example/it_da/ui/screen/notification/component/NotificationFilterDropdown.kt

@@ -0,0 +1,95 @@
+package com.example.it_da.ui.screen.notification.component
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.example.it_da.R
+import com.example.it_da.ui.screen.notification.state.NotificationFilter
+import com.example.it_da.ui.theme.ItdaInputBorderGray
+import com.example.it_da.ui.theme.ItdaSecondaryTextColor
+
+// Displays the notification filter label, selected category, and selectable dropdown options.
+@Composable
+fun NotificationFilterDropdown(
+    selectedFilter: NotificationFilter,
+    isExpanded: Boolean,
+    onClick: () -> Unit,
+    onDismiss: () -> Unit,
+    onFilterSelected: (NotificationFilter) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier = modifier.fillMaxWidth()) {
+        Text(
+            text = stringResource(id = R.string.notification_filter_label),
+            color = ItdaSecondaryTextColor,
+            style = MaterialTheme.typography.titleMedium
+        )
+
+        Row(
+            modifier = Modifier
+                .padding(top = 14.dp)
+                .fillMaxWidth()
+                .height(48.dp)
+                .border(
+                    width = 1.dp,
+                    color = ItdaInputBorderGray,
+                    shape = RoundedCornerShape(10.dp)
+                )
+                .clickable(onClick = onClick)
+                .padding(horizontal = 16.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                text = stringResource(id = selectedFilter.labelResId),
+                modifier = Modifier.weight(1f),
+                color = ItdaSecondaryTextColor,
+                style = MaterialTheme.typography.titleMedium
+            )
+
+            Icon(
+                painter = painterResource(id = R.drawable.ic_down_arrow),
+                contentDescription = stringResource(
+                    id = R.string.notification_filter_open_description
+                ),
+                tint = ItdaSecondaryTextColor,
+                modifier = Modifier.size(24.dp)
+            )
+        }
+
+        DropdownMenu(
+            expanded = isExpanded,
+            onDismissRequest = onDismiss
+        ) {
+            NotificationFilter.entries.forEach { filter ->
+                DropdownMenuItem(
+                    text = {
+                        Text(
+                            text = stringResource(id = filter.labelResId),
+                            style = MaterialTheme.typography.bodyLarge
+                        )
+                    },
+                    onClick = {
+                        onFilterSelected(filter)
+                    }
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/example/it_da/ui/screen/notification/component/NotificationHeaderSection.kt

@@ -0,0 +1,75 @@
+package com.example.it_da.ui.screen.notification.component
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.example.it_da.R
+import com.example.it_da.ui.commonComponent.ItdaImageButton
+import com.example.it_da.ui.theme.ItdaButtonTextColor
+import com.example.it_da.ui.theme.ItdaHomeExploreButtonGray
+import com.example.it_da.ui.theme.ItdaPrimaryTextColor
+
+private const val NotificationHeaderFlexibleSpacingWeight = 1f
+
+// Displays the notification screen back action.
+@Composable
+fun NotificationBackButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    ItdaImageButton(
+        imageResId = R.drawable.backbutton,
+        contentDescription = stringResource(id = R.string.notification_back_description),
+        onClick = onClick,
+        modifier = modifier
+            .size(35.dp),
+        imageModifier = Modifier.fillMaxSize(),
+        shape = RoundedCornerShape(21.dp)
+    )
+}
+
+// Displays the notification title and the action that marks every item as read.
+@Composable
+fun NotificationHeaderSection(
+    onReadAllClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            text = stringResource(id = R.string.notification_screen_title),
+            color = ItdaPrimaryTextColor,
+            style = MaterialTheme.typography.displayLarge
+        )
+
+        Spacer(modifier = Modifier.weight(NotificationHeaderFlexibleSpacingWeight))
+
+        Surface(
+            modifier = Modifier.clickable(onClick = onReadAllClick),
+            shape = RoundedCornerShape(10.dp),
+            color = ItdaHomeExploreButtonGray
+        ) {
+            Text(
+                text = stringResource(id = R.string.notification_read_all),
+                modifier = Modifier.padding(horizontal = 10.dp, vertical = 9.dp),
+                color = ItdaButtonTextColor,
+                style = MaterialTheme.typography.bodySmall
+            )
+        }
+    }
+}

app/src/main/java/com/example/it_da/ui/screen/notification/route/NotificationRoute.kt

@@ -0,0 +1,37 @@
+package com.example.it_da.ui.screen.notification.route
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
+import com.example.it_da.ui.screen.notification.screen.NotificationScreen
+import com.example.it_da.ui.screen.notification.viewmodel.NotificationViewModel
+
+// Connects notification screen events and StateFlow state to the notification UI.
+@Composable
+fun NotificationRoute(
+    onBackClick: () -> Unit,
+    onHomeTabClick: () -> Unit,
+    onExploreTabClick: () -> Unit,
+    onCreateProjectClick: () -> Unit,
+    onNotificationTabClick: () -> Unit,
+    onProfileTabClick: () -> Unit,
+    viewModel: NotificationViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+    NotificationScreen(
+        uiState = uiState,
+        onBackClick = onBackClick,
+        onReadAllClick = viewModel::onReadAllClick,
+        onFilterMenuClick = viewModel::onFilterMenuClick,
+        onFilterMenuDismiss = viewModel::onFilterMenuDismiss,
+        onFilterSelected = viewModel::onFilterSelected,
+        onNotificationClick = viewModel::onNotificationClick,
+        onHomeTabClick = onHomeTabClick,
+        onExploreTabClick = onExploreTabClick,
+        onCreateProjectClick = onCreateProjectClick,
+        onNotificationTabClick = onNotificationTabClick,
+        onProfileTabClick = onProfileTabClick
+    )
+}