fix(timeletter): 서버 실패 상태와 재시도 처리 (#714)

app/src/androidTest/java/com/afternote/afternote_fe/ReceiverSessionIsolationAndroidTest.kt

@@ -1,17 +1,20 @@
 package com.afternote.afternote_fe
 
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.graphics.asAndroidBitmap
 import androidx.compose.ui.test.assertIsDisplayed
 import androidx.compose.ui.test.captureToImage
 import androidx.compose.ui.test.junit4.createComposeRule
 import androidx.compose.ui.test.onNodeWithText
 import androidx.compose.ui.test.onRoot
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.test.ext.junit.runners.AndroidJUnit4
 import com.afternote.afternote_fe.test.FailureArtifactRule
 import com.afternote.afternote_fe.test.appTestUserRepository
 import com.afternote.core.model.user.Receiver
 import com.afternote.core.ui.theme.AfternoteTheme
 import com.afternote.feature.timeletter.presentation.screen.sender.RecipientListScreen
+import com.afternote.feature.timeletter.presentation.viewmodel.RecipientListUiState
 import com.afternote.feature.timeletter.presentation.viewmodel.RecipientListViewModel
 import org.junit.Rule
 import org.junit.Test
@@ -43,22 +46,26 @@ class ReceiverSessionIsolationAndroidTest {
 
         composeRule.setContent {
             AfternoteTheme {
+                val uiState by viewModel.uiState.collectAsStateWithLifecycle()
                 RecipientListScreen(
+                    uiState = uiState,
                     onBackClick = {},
                     onConfirmClick = {},
-                    viewModel = viewModel,
+                    onRetry = viewModel::retry,
                 )
             }
         }
 
         composeRule.waitUntil(timeoutMillis = TIMEOUT_MILLIS) {
-            viewModel.recipients.value.any { it.name == PREVIOUS_ACCOUNT_RECEIVER }
+            (viewModel.uiState.value as? RecipientListUiState.Success)
+                ?.recipients
+                ?.any { it.name == PREVIOUS_ACCOUNT_RECEIVER } == true
         }
         composeRule.onNodeWithText(PREVIOUS_ACCOUNT_RECEIVER).assertIsDisplayed()
 
         composeRule.runOnIdle { repository.receiverState.value = emptyList() }
         composeRule.waitUntil(timeoutMillis = TIMEOUT_MILLIS) {
-            viewModel.recipients.value.isEmpty()
+            (viewModel.uiState.value as? RecipientListUiState.Success)?.recipients?.isEmpty() == true
         }
 
         composeRule.onNodeWithText("수신인 목록").assertIsDisplayed()

app/src/androidTest/java/com/afternote/afternote_fe/TimeLetterMindRecordCompletionAndroidTest.kt

@@ -234,13 +234,15 @@ class TimeLetterMindRecordCompletionAndroidTest {
         composeRule.setContent {
             AfternoteTheme {
                 if (showRecipient) {
+                    val recipientUiState by recipientViewModel.uiState.collectAsStateWithLifecycle()
                     RecipientListScreen(
+                        uiState = recipientUiState,
                         onBackClick = { showRecipient = false },
                         onConfirmClick = { recipients ->
                             writeViewModel.setRecipients(recipients.map { it.receiverId })
                             showRecipient = false
                         },
-                        viewModel = recipientViewModel,
+                        onRetry = recipientViewModel::retry,
                     )
                 } else {
                     val uiState by writeViewModel.uiState.collectAsStateWithLifecycle()

feature/timeletter/presentation/src/main/kotlin/com/afternote/feature/timeletter/presentation/component/AlignButton.kt

@@ -20,6 +20,7 @@ fun AlignButton(
     selected: Boolean,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
+    enabled: Boolean = true,
 ) {
     Box(
         modifier =
@@ -33,7 +34,7 @@ fun AlignButton(
                     } else {
                         Modifier
                     },
-                ).clickable(onClick = onClick),
+                ).clickable(enabled = enabled, onClick = onClick),
         contentAlignment = Alignment.Center,
     ) {
         Icon(

feature/timeletter/presentation/src/main/kotlin/com/afternote/feature/timeletter/presentation/component/RecipientCard.kt

@@ -24,14 +24,15 @@ fun RecipientCard(
     recipientName: String,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
+    enabled: Boolean = true,
 ) {
     Row(
         modifier =
             modifier
                 .fillMaxWidth()
                 .height(115.dp)
                 .background(AfternoteDesign.colors.gray2)
-                .clickable(onClick = onClick)
+                .clickable(enabled = enabled, onClick = onClick)
                 .padding(horizontal = 20.dp, vertical = 16.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {

feature/timeletter/presentation/src/main/kotlin/com/afternote/feature/timeletter/presentation/component/SendScheduleRow.kt

@@ -24,6 +24,7 @@ fun SendScheduleRow(
     onDateClick: () -> Unit,
     onTimeClick: () -> Unit,
     modifier: Modifier = Modifier,
+    enabled: Boolean = true,
 ) {
     Row(
         modifier =
@@ -39,7 +40,7 @@ fun SendScheduleRow(
         )
         Spacer(modifier = Modifier.width(12.dp))
         Row(
-            modifier = Modifier.clickable(onClick = onDateClick),
+            modifier = Modifier.clickable(enabled = enabled, onClick = onDateClick),
             verticalAlignment = Alignment.CenterVertically,
         ) {
             Text(
@@ -65,7 +66,7 @@ fun SendScheduleRow(
         )
         Spacer(modifier = Modifier.width(12.dp))
         Row(
-            modifier = Modifier.clickable(onClick = onTimeClick),
+            modifier = Modifier.clickable(enabled = enabled, onClick = onTimeClick),
             verticalAlignment = Alignment.CenterVertically,
         ) {
             Text(

feature/timeletter/presentation/src/main/kotlin/com/afternote/feature/timeletter/presentation/component/TimeLetterBottomBar.kt

@@ -40,6 +40,7 @@ fun TimeLetterBottomBar(
     onDraftClick: () -> Unit,
     onDraftCountClick: () -> Unit,
     modifier: Modifier = Modifier,
+    enabled: Boolean = true,
 ) {
     Row(
         modifier =
@@ -54,7 +55,7 @@ fun TimeLetterBottomBar(
             modifier =
                 Modifier
                     .size(24.dp)
-                    .clickable(onClick = onMediaAddClick),
+                    .clickable(enabled = enabled, onClick = onMediaAddClick),
             contentAlignment = Alignment.Center,
         ) {
             Icon(
@@ -71,7 +72,7 @@ fun TimeLetterBottomBar(
             modifier =
                 Modifier
                     .size(24.dp)
-                    .clickable(onClick = onTextStyleClick),
+                    .clickable(enabled = enabled, onClick = onTextStyleClick),
             contentAlignment = Alignment.Center,
         ) {
             Icon(
@@ -99,22 +100,25 @@ fun TimeLetterBottomBar(
                 painter = painterResource(CoreUiR.drawable.core_ui_ic_align_center),
                 selected = textAlign == TextAlign.Center, // 상태 반영
                 onClick = onAlignCenterClick,
+                enabled = enabled,
             )
             AlignButton(
                 painter = painterResource(CoreUiR.drawable.core_ui_ic_align_left),
                 selected = textAlign == TextAlign.Start,
                 onClick = onAlignLeftClick,
+                enabled = enabled,
             )
             AlignButton(
                 painter = painterResource(CoreUiR.drawable.core_ui_ic_align_right),
                 selected = textAlign == TextAlign.End,
                 onClick = onAlignRightClick,
+                enabled = enabled,
             )
         }
 
         Spacer(modifier = Modifier.weight(1f))
 
-        TextButton(onClick = onDraftClick) {
+        TextButton(onClick = onDraftClick, enabled = enabled) {
             Text(
                 text = "임시저장",
                 style = AfternoteDesign.typography.captionLargeR,
@@ -126,6 +130,7 @@ fun TimeLetterBottomBar(
                 Modifier
                     .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
                     .clickable(
+                        enabled = enabled,
                         onClickLabel = "임시저장 목록 열기",
                         role = Role.Button,
                         onClick = onDraftCountClick,

feature/timeletter/presentation/src/main/kotlin/com/afternote/feature/timeletter/presentation/component/TimeLetterLoadErrorContent.kt

@@ -0,0 +1,39 @@
+package com.afternote.feature.timeletter.presentation.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import com.afternote.core.ui.theme.AfternoteDesign
+import com.afternote.feature.timeletter.presentation.R
+
+@Composable
+fun TimeLetterLoadErrorContent(
+    message: String,
+    onRetry: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Text(
+            text = message,
+            style = AfternoteDesign.typography.bodyLargeR,
+            color = AfternoteDesign.colors.gray7,
+        )
+        TextButton(onClick = onRetry) {
+            Text(
+                text = stringResource(R.string.timeletter_retry),
+                style = AfternoteDesign.typography.bodyLargeB,
+                color = AfternoteDesign.colors.gray9,
+            )
+        }
+    }
+}

feature/timeletter/presentation/src/main/kotlin/com/afternote/feature/timeletter/presentation/component/TimeLetterTextButton.kt

@@ -6,8 +6,10 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -23,6 +25,8 @@ fun TimeLetterTextButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     isActive: Boolean = false,
+    isLoading: Boolean = false,
+    enabled: Boolean = true,
 ) {
     val shape = RoundedCornerShape(6.dp)
     val backgroundColor =
@@ -38,14 +42,22 @@ fun TimeLetterTextButton(
                 .height(36.dp)
                 .clip(shape)
                 .background(color = backgroundColor, shape = shape)
-                .clickable(onClick = onClick)
+                .clickable(enabled = enabled && !isLoading, onClick = onClick)
                 .padding(start = 18.dp, top = 8.dp, end = 18.dp, bottom = 8.dp),
     ) {
-        Text(
-            text = text,
-            style = AfternoteDesign.typography.bodySmallR,
-            color = textColor,
-        )
+        if (isLoading) {
+            CircularProgressIndicator(
+                modifier = Modifier.size(18.dp),
+                color = AfternoteDesign.colors.gray7,
+                strokeWidth = 2.dp,
+            )
+        } else {
+            Text(
+                text = text,
+                style = AfternoteDesign.typography.bodySmallR,
+                color = textColor,
+            )
+        }
     }
 }
 

feature/timeletter/presentation/src/main/kotlin/com/afternote/feature/timeletter/presentation/navigation/TimeLetterNavGraph.kt

@@ -17,6 +17,7 @@ import com.afternote.feature.timeletter.presentation.screen.sender.RecipientList
 import com.afternote.feature.timeletter.presentation.screen.sender.TimeLetterDetailScreen
 import com.afternote.feature.timeletter.presentation.screen.sender.TimeLetterWriteScreen
 import com.afternote.feature.timeletter.presentation.screen.sender.TimeletterScreen
+import com.afternote.feature.timeletter.presentation.viewmodel.RecipientListViewModel
 import com.afternote.feature.timeletter.presentation.viewmodel.TimeLetterWriteViewModel
 import com.afternote.feature.timeletter.presentation.viewmodel.TimeletterViewModel
 
@@ -63,6 +64,7 @@ fun NavGraphBuilder.timeLetterNavGraph(
                 onDraftClick = { title, textContents -> viewModel.saveDraft(title, textContents) },
                 onNavigateToDraft = actions::onNavigateToDraft,
                 onErrorShown = { viewModel.clearError() },
+                onRetryEditingLetter = viewModel::retryEditingLetter,
                 onRecipientClick = { title, textContents ->
                     viewModel.updateDraftContent(title, textContents)
                     actions.onNavigateToRecipient()
@@ -122,12 +124,16 @@ fun NavGraphBuilder.timeLetterNavGraph(
                         ?: navController.getBackStackEntry(TimeLetterRoute.TimeLetterWriteRoute())
                 }
             val writeViewModel: TimeLetterWriteViewModel = hiltViewModel(writeEntry)
+            val recipientListViewModel: RecipientListViewModel = hiltViewModel()
+            val recipientListUiState by recipientListViewModel.uiState.collectAsStateWithLifecycle()
             RecipientListScreen(
+                uiState = recipientListUiState,
                 onBackClick = actions::onRecipientBack,
                 onConfirmClick = { recipients ->
                     writeViewModel.setRecipients(recipients.map { it.receiverId })
                     actions.onRecipientBack()
                 },
+                onRetry = recipientListViewModel::retry,
             )
         }
 
@@ -137,12 +143,16 @@ fun NavGraphBuilder.timeLetterNavGraph(
                     navController.getBackStackEntry(TimeLetterRoute.TimeLetterHomeRoute)
                 }
             val timeletterViewModel: TimeletterViewModel = hiltViewModel(homeEntry)
+            val recipientListViewModel: RecipientListViewModel = hiltViewModel()
+            val recipientListUiState by recipientListViewModel.uiState.collectAsStateWithLifecycle()
             RecipientListScreen(
+                uiState = recipientListUiState,
                 onBackClick = actions::onRecipientFilterBack,
                 onConfirmClick = { recipients ->
                     timeletterViewModel.setReceiverFilter(recipients.map { it.receiverId })
                     actions.onRecipientFilterBack()
                 },
+                onRetry = recipientListViewModel::retry,
                 allowEmptyConfirm = true,
             )
         }