Nutri Capture 프론트엔드 - Card

#1 개요

스크롤 관련해서는 한시름 놓았다. 본 게시글에선 LazyColumn의 아이템을 Card로 감싸고 약간의 디자인적 수정을 할 것이다. 본 게시글까지해서 프론트엔드는 중간 맺음을 할 것이고 다음 게시글부터는 아마 백엔드 구현으로 넘어갈듯 싶다.

 

#2 코드

#2-1 (틀 잡기) Card()

...

@Composable
fun NutrientScreen(
    ...
) {
    LaunchedEffect(key1 = true) {
        // State 초기화
        ...

        // ViewModel로부터 받은 이벤트 처리
        ...
    }

    LaunchedEffect(key1 = viewModel.isInitialized.value) {
        ...
    }

    LazyColumn(
        ...
    ) {
        val dailyMeals = viewModel.nutrientScreenState.value.dailyMeals
        items(dailyMeals) { dailyMeal ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(
                        start = 8.dp,
                        top = 8.dp,
                        end = 8.dp,
                    ),
                elevation = CardDefaults.cardElevation(8.dp)
            ) {
                Text(
                    ...
                )
            }
        }
    }
}

item을 Card로 감싼다. 너비는 부모의 최대 너비를 차지하게 두고 적당한 padding을 넣어주었다. 또, Card와 특징인 elevation도 적당한 값으로 넣어주었다. 

 

#2-2 (모양 잡기 준비) utils 패키지 만들고 DateFormatter.kt 생성

// package com.example.nutri_capture_new.utils

import java.time.LocalDate
import java.time.format.TextStyle
import java.util.Locale

object DateFormatter {
    fun formatDateForNutrientScreen(date: LocalDate): String {
        val month = date.monthValue
        val day = date.dayOfMonth
        val dayOfWeek = date.dayOfWeek.getDisplayName(TextStyle.FULL, Locale.KOREAN)

        return "${month}월 ${day}일 $dayOfWeek"
    }
}

"2024-10-17"와 같은 형식으로 표시되던 날짜를 "10월 17일 목요일"와 같은 형식으로 변환시켜주는 함수다.

 

#2-3 (모양 잡기) Text() 수정 및 Column으로 감싸기

...

@Composable
fun NutrientScreen(
    ...
) {
    LaunchedEffect(key1 = true) {
        ...
    }

    LaunchedEffect(key1 = viewModel.isInitialized.value) {
        ...
    }

    LazyColumn(
        state = listState,
        modifier = Modifier.fillMaxSize()
    ) {
        val dailyMeals = viewModel.nutrientScreenState.value.dailyMeals
        items(dailyMeals) { dailyMeal ->
            Card(
                ...
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(8.dp)
                ) {
                    Text(
                        text = DateFormatter.formatDateForNutrientScreen(dailyMeal.date),
                        modifier = Modifier.fillMaxWidth(),
                        fontSize = 15.sp,
                        textAlign = TextAlign.End
                    )
                }
            }
        }
    }
}

LazyColumn()의 배경색과 Text()의 글자색을 지정하는 코드를 삭제한다. 즉 기본값 색으로 둔다.

 

Text()에서 글자 크기를 15.sp로 줄이고 기본값인 좌측 정렬 설정을 우측 정렬로 바꿨다. 또 #2-2의 함수를 활용해, 날짜가 "10월 17일 목요일"과 같은 형식으로 표시되도록 수정했다.

 

마지막으로 수정한 Text()를 Column()으로 감싼다. Column에는 padding을 8.dp로 지정했다.

 

#2-4 샘플 컨텐츠 Column에 넣어주기

...

@Composable
fun NutrientScreen(
    scope: CoroutineScope,
    snackbarHostState: SnackbarHostState,
    viewModel: NutrientViewModel = viewModel<NutrientViewModel>(),
    listState: LazyListState = rememberLazyListState()
) {
    LaunchedEffect(key1 = true) {
        // State 초기화
        ...

        // ViewModel로부터 받은 이벤트 처리
        ...
    }

    LaunchedEffect(key1 = viewModel.isInitialized.value) {
        ...
    }

    LazyColumn(
        ...
    ) {
        ...
        items(dailyMeals) { dailyMeal ->
            Card(
                ...
            ) {
                Column(
                    ...
                ) {
                    Text(
                        ...
                    )

                    SampleContent(
                        text = "Sample 영양 정보",
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(100.dp),
                        scope = scope,
                        snackbarHostState = snackbarHostState
                    )
                }
            }
        }
    }
}

Column()에 Text() 하나만 있는 건 허전하니까, MainActivity.kt에 정의해두었던 SampleContent()를 넣어준다.

 

#3 요약

LazyColumn의 아이템을 Card()로 감싸고, 디자인적으로 살짝 다듬었다.

 

#4 완성된 앱

#4-1 스크린샷

 

#4-2 이 게시글 시점의 Commit

GitHub - Kanmanemone/nutri-capture-new

 

#4-3 본 프로젝트의 가장 최신 Commit

GitHub - Kanmanemone/nutri-capture-new