CoinDetail 화면 오류 처리 개선 - 스낵바 사용

[helpingstar]

문제

현재 오류 발생 시 화면 전체를 에러 메시지로 덮어버려 UX가 나쁩니다.

현재 동작:

// CoinDetailScreen.kt
when {
    state.isLoading -> { CircularProgressIndicator() }
    state.errorMsg != null -> {
        Text(state.errorMsg)  // 화면 전체를 덮음
    }
    else -> { CoinDetailContent(state) }
}

문제점:

• 연결 오류 시 이전 데이터가 모두 사라짐
• 사용자가 마지막 가격 정보를 볼 수 없음
• 재연결 시도 중에도 빈 화면만 표시

해결 방안

1. 마지막 데이터 유지 + 스낵바 표시

항상 CoinDetailContent를 표시하고, 오류 발생 시에만 스낵바를 띄웁니다.

// 항상 CoinDetailContent 표시
CoinDetailContent(state = state)

// 오류 발생 시 스낵바만 표시
LaunchedEffect(state.errorMsg) {
    state.errorMsg?.let {
        snackbarHostState.showSnackbar(it)
    }
}

2. CoinDetailUiState 구조 변경

data class CoinDetailUiState(
    // 데이터는 항상 유지
    val currentPrice: String = "",
    
    // 오류는 별도로 관리 (일회성)
    val errorMsg: String? = null, // 스낵바용
    val isLoading: Boolean = true,
)

필요 작업

• CoinDetailScreen에 SnackbarHost 추가
• 오류 발생 시에도 마지막 데이터 유지하도록 수정
• LaunchedEffect로 스낵바 표시
• 오류 메시지 노출 후 자동 제거 (consume pattern)

기대 효과

• 오류 발생 시에도 마지막 가격 정보 확인 가능
• 비침투적 오류 알림 (non-blocking)
• 더 나은 사용자 경험

우선순위

• Medium - UX 개선이지만 기능적 결함은 아님

다음으로 이 로직을 구현하기 위해 ViewModel에서 에러 상태를 처리하는 코드를 작성해 드릴까요?