🐭 해당 화면의 기능

1. 위로 당기면 알림 리스트를 새로 갱신 할 수 있다.
2. 서버에서 알림 리스트 데이터는 한번에 10개씩 가져오고 맨 아래로 스크롤시 새로 10개를 더 가져온다.
3. 알림 아이템을 클릭시 다른 화면으로 이동한다.

🍎 1. 알림 리스트 전체화면 위, 아래 공백 주기

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setStatusBarTransparent() // 상태 바 투명으로 설정(전체화면)

        setContent {
            YafitMoveTheme {
                // A surface container using the 'background' color from the theme
                AlarmScreen(
                    statusBarHeight = GraphicUtils.convertPxToDp(statusBarHeight()),
                    navigationHeight = if (hasPhysicalButtons()) GraphicUtils.convertPxToDp(navigationHeight()) else 0
                )
            }
        }
    }

//우리 앱은 full 화면 기반이라 full 화면이 필요없는 화면은 statusbar, navigationbar 길이를
//구해서 화면 사이즈를 조절한다.
@Composable
fun AlarmScreen(
    statusBarHeight: Int = 0,
    navigationHeight: Int = 0,
) {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = Gray1B212A
    ) {
        Column {
            Spacer(modifier = Modifier.height(statusBarHeight.dp))
            Scaffold(
                topBar = {
                    TitleBar(
                        title = stringResource(id = R.string.mypage_alarm),
                        leftButton = painterResource(id = R.drawable.ic_back_btn_white),
                        leftClick = { Timber.d("leftButton Click") }
                    )
                },
                containerColor = Gray1B212A
            ) {
                Column(
                    modifier = Modifier.padding(it)
                ) {
                    Alarm()
                }
            }
            Spacer(modifier = Modifier.height(navigationHeight.dp))
        }
    }
}

💡 Surface

Material Design 시스템에 기반한 Compose의 컨테이너

그림자, 경계선, 배경색 등과 같은 시각적 효과를 자동으로 처리하며, 표면에 콘텐츠를 배치하는데 사용된다.

💡 Scaffold

Material Design 가이드라인을 따르며, 앱의 상단 앱바, 하단 탐색 막대, 콘텐츠 영역 등을 설정할 수 있다.

나는 공통적인 화면에 들어가는 titlebar를 넣었다!

🍎 2. 알림 리스트가 0개 일때 화면, 알림 목록화면을 보여줄지 체크

이 부분에서부터 AlarmViewModel이 들어간다!

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun Alarm(
    viewModel: AlarmViewModel = hiltViewModel(),
) {
    Timber.d("Alarm")
    val alarmList by viewModel.alarmListBlue.collectAsState()

		// 컴포즈가 처음 생성 될때 서버에서 알림 리스트 데이터를 가져온다.
    LaunchedEffect(Unit) {
        viewModel.getAlarm()
    }

    if (alarmList.isEmpty()) {
        EmptyAlarm()
    } else {
        val isRefreshing by viewModel.isRefreshing.collectAsStateWithLifecycle()
        val pullRefreshState = rememberPullRefreshState(isRefreshing, { viewModel.getAlarm(isRefresh = true) })

        AlarmList(
            alarmList = alarmList,
            reachedBottom = { viewModel.getAlarm() },
            pullRefreshState = pullRefreshState,
            isRefreshing = isRefreshing,
            onItemClick = { viewModel.item }
        )
    }
}

💡 위로 당겨서 알림 리스트를 새로 갱신 하기위해 rememberPullRefreshState 사용!

해당 기능은 사라질수도있기때문에 @OptIn(ExperimentalMaterialApi::class) 어노테이션을 추가해줘야한다.

💡 reachedBottom : 맨 아래로 스크롤시 새로운 데이터를 가져오기 위해