Feature/tgyuu/#63

[tgyuuAn]

1. 📄 관련된 이슈 및 소개

#63

File Changed가 너무 커지는 것 같아서 일차적으로 PR날립니다.

2. 🔥변경된 점

- 바텀 네비게이션 설문 페이지 화면 작아졌다 커졌다 하는 이슈 수정

- 프로필 화면 UI 개선

- 프로필 화면 UI 완성

- 프로필 더 보기 화면 UI 완성

- 관리 화면 일정, 설문 데이터 병렬로 가져오도록 변경

- 관리 화면 Lottie 적용

- WappTheme.colors 색상 정리

3. 📸 스크린샷(선택)

1. 프로필 화면 UI 개선

2. WappTheme.colors 색상 정리

3. 관리 화면 데이터 병렬로 가져오도록 변경

3-1. 기존 (데이터 순서대로 가져옴)

3-2. 변경 (데이터 동시에 가져옴)

4. 설문 화면 작아졌다가 보여지는 이슈 수정

5. 관리 페이지 Lottie 적용

6. 프로필 화면 비회원 화면

로그인 했을 때 화면은 위 움짤에서 많이 보이므로 따로 올리진 않겠습니다!

위 화면에서 로그인 하기 버튼을 누르면 초기 SignIn 화면으로 돌아갑니다.

뒤로가기를 누르면 다시 해당 화면으로 돌아옵니다.

움짤찍기 귀찮아서 안올렸습니다. 하하

7. 프로필 더 보기 화면

좌측 상단 화살표 누르면 당연하겠지만 프로필 화면으로 돌아갑니다.

4. 💡알게된 혹은 궁금한 사항들

1. compose에서 Span 적용

buildAnnotatedString {
    append("로그인하여\n")
    withStyle(
        style = SpanStyle(
            color = WappTheme.colors.yellow34,
            textDecoration = TextDecoration.Underline,
        ),
    ) {
        append("WAPP")
    }
    append(" 와 ")
    withStyle(
        style = SpanStyle(
            color = WappTheme.colors.yellow34,
            textDecoration = TextDecoration.Underline,
        ),
    ) {
        append("추억")
    }
    append("을 쌓아보세요!")
}

와 같이 buildAnnotatedString을 사용하여 Span을 적용할 수 있음.

출처 : Compose 로 Span 주는 방법

2. 코루틴으로 데이터를 여러 개 가져올 때 병렬적으로 동시에 가져오는 방법

    fun getEventSurveyList() = viewModelScope.launch {
        getMonthEventList()
        getSurveyList()
    }

를

    fun getEventSurveyList() = viewModelScope.launch {
        launch { getMonthEventList() }
        getSurveyList()
    }

으로 수정하면 데이터를 동시에 병렬적으로 가져올 수 있음.

출처 : 코틀린 코루틴 서적

블로그에 정리해봤씁니다.

3. 진호님이 작업하셨던 설문 페이지 네비게이션에서 이동 시 화면이 작아졌다 커졌다 하는 이슈

internal fun SurveyScreen(
    viewModel: SurveyViewModel,
    navigateToSurveyAnswer: (Int) -> Unit,
) {
    val context = LocalContext.current
    val surveyFormListUiState = viewModel.surveyFormListUiState.collectAsState().value
    val snackBarHostState = remember { SnackbarHostState() }

    LaunchedEffect(true) {
        viewModel.surveyEvent.collectLatest {
            when (it) {
                is SurveyViewModel.SurveyUiEvent.Failure -> {
                    snackBarHostState.showSnackbar(it.throwable.toSupportingText())
                }

                is SurveyViewModel.SurveyUiEvent.AlreadySubmitted -> {
                    snackBarHostState.showSnackbar(
                        context.getString(R.string.alreay_submitted_description),
                    )
                }

                is SurveyViewModel.SurveyUiEvent.NotSubmitted -> {
                    navigateToSurveyAnswer(it.eventId)
                }
            }
        }
    }

    when (surveyFormListUiState) {
        is SurveyViewModel.SurveyFormListUiState.Init -> { }
        is SurveyViewModel.SurveyFormListUiState.Success -> {
            SurveyContent(
                surveyFormList = surveyFormListUiState.surveyFormList,
                snackBarHostState = snackBarHostState,
                selectedSurveyForm = viewModel::isSubmittedSurvey,
            )
        }
    }
}

원래 위에 처럼 작업이 되어있었는데,

SurveyFormListUiState를 ViewModel에서 Success로 가져올 때 까지 화면에 아무것도 뛰워주지 않아요.

그래서 Compose에서 띄워줄 화면이 없다고 판단하고 화면을 보여주지 않아요.

이후, Success를 가져오면 다시 화면을 띄워주므로 작아졌다 커지는 것처럼 보였습니다.

그냥 단순히 위의 코드를 Column(modifier.fillMaxSize())로 묶어주면 끝이에요.

그러면 ViewModel에서 Success를 가져오지 않더라도, 빈 화면을 띄워주니까 화면이 작아지는 이슈가 사라집니다!

(빈 화면이라도 꽉 차있기 때문에 작아지는 현상이 사라져요)

그리고, 이 빈 화면의 시간을 떼워주기 위해서 CircleLoader Lottie를 넣어놨습니다.

4. LazyColumn 쓸 때, items 안에 key

이건 뭐 별 거 없습니다. xml쓸 때 RecyclerView랑 ListAdapter차이랑 똑같아요.

레퍼런스

---

아직 프로필 화면에서 유저 정보, 유저가 비회원, 회원, 운영진인지 판단, 나의 출결 현황, 나의 출석 을 구현하지 못했어요.

유저 정보를 어떻게 가져오는 지 몰라서 구현되어있는 지 몰라서 보류했습니다잇.

[tgyuuAn]

지금 출석, 결석 이 그냥 벡터로 들어가서 그런지 글자가 잘 안보여요,

추후에 그냥 String + Box로 바꾸겠습니다.

[jeongjaino]

태규상 많은 기능 구현한다고 고생 많으셨어요 ~.

오늘 하루도 화이팅입니닷!

[jeongjaino]

🤩😎🤩😎

[jeongjaino]

🤩😎🤩😎

[jeongjaino]

🤩😎🤩😎

[jeongjaino]

위 Events랑 SurveysState 모두 Failure를 빼는게 낫지않을까요 ?

errorflow에서 Failure를 다 처리하고 있고,
사용하신 when 절에서도 Failure를 따로 처리 안하고 계시니 따로 필요 없는 것 같아요.

[tgyuuAn]

저도 이 부분이 조금 마음에 걸렸는데,

            when (eventsState) {
                is ManagementViewModel.EventsState.Loading -> CircleLoader(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp),
                )

                is ManagementViewModel.EventsState.Success -> {
                    LazyColumn(
                        verticalArrangement = Arrangement.spacedBy(16.dp),
                    ) {
                        itemsIndexed(
                            items = eventsState.events.takeLast(2),
                            key = { index, event -> event.eventId },
                        ) { currentIndex, event ->
                            ManagementEventItem(
                                item = event,
                                cardColor = ManagementCardColor(currentIndex = currentIndex),
                                onCardClicked = { eventId -> onCardClicked(eventId) },
                            )
                        }
                    }

                    WappButton(
                        textRes = R.string.event_registration,
                        onClick = { onAddEventButtonClicked() },
                    )
                }

                is ManagementViewModel.EventsState.Failure -> {}
            }

이렇게 UiState를 분기로 Lottie뛰워주는 부분에서 Failure로 들어오면 ErrorFlow로 SnackBar나 Toast만 띄워주고 화면에서는 아무것도 안 띄워줘요

.

그래서 만약 데이터가 안 들어왔을 경우 특별한 분기 처리를 해주려고 여지를 남겨둔 거였어요.

지금은 저희끼리 테스트하는 거라서 Failure로 들어오는 경우가 잘 없겠지만요.

[jeongjaino]

현재 로직에서 Failure로 방출하는 값의 조건은 예외가 발생한 경우로 알고 있어요 !

조회를 했는데 빈 값인 경우는 Success -> data -> isEmpty로 검증해야 할 것 같아요

태규님이 말씀하신게 네트워크 불안정이나, 서버 불안정 등으로 발생한 실패에 대해
약간 배달의 민족처럼 전체 화면을 "화면을 불러오지 못했습니다. "로 채울꺼라면 위의 경우처럼 처리하는게 맞을 것 같네요.

그래도 지금은 따로 처리를 안하고 있으니, 빼는게 어떻겠냐는게 코멘트 내용이였습니다. 하하
따로 여지를 남겨두는 것과 같은 의도때문이라면 나두셔도 무방할 것 같습니다.

[tgyuuAn]

@jeongjaino

네트워크 불안정 이나 서버 불안정에 대한 실패의 경우 맞습니다!

추후에 반드시 해당 분기를 채워놓겠씁니다!

[jeongjaino]

어떤 항목이 불러오고 있는지 확인하기 위해서

일부로 컬럼 안, Title(설문, 행사) 밑에 when절 처리하신거죠 ??

[tgyuuAn]

네 지금 설문, 행사 각각 로띠가 돌아가는데,

그냥 두개를 하나의 로띠로 합칠 수 있는데 이럴 경우 둘 중에 하나만 잘못 들어와도 로띠가 계쏙 돌아가서 이렇게 했씁니다.....!

[jeongjaino]

근데 혹시 관리 화면에서 스크롤 안되는 이슈 해결 했나요 ,,, ??

각 설문, 이벤트 아이템이 2개 이상이면 화면을 초과하게 되는데, 따로 스크롤이 안되더라고요 ㅠ

[tgyuuAn]

@jeongjaino

오호 그거 아마도 LazyColumn이 Scrollable이라, 가장 바깥 Composable을 Scrollable로 하게 되면

Scrollable 안에 LazyColumn이라는 Scrollable이 또 있기 때문에 크래시가 날꺼에요.

xml에서 Scrollview안에 RecyclerView가 있을 경우, NestedScrollView를 사용했던 것 처럼요.

이거 해결하는 방법이 있었는데 좀 까다로웠던 걸로 기억해요. (저도 찾아보다가 귀찮고 어려워서 잠시 포기했음)

지금은 아니고 나중에 이슈 하나 파서 해결해보겠씁니다!

[jeongjaino]

해당 EventsState에서도 Failure를 따로 처리 안하시고 계셔서
굳이 Failure를 만드실 필요는 없는 것 같아요 !

[tgyuuAn]

DB에서 데이터를 제대로 가져오지 못하는 경우는 없을까요 ?!

[jeongjaino]

위의 리뷰와 답이 같습니다 !

[jeongjaino]

😋😋

[jeongjaino]

해당 WapAttendance 보다는 AttendanceItem와 같은

어떤 컴포넌트인지 확 와닿는 다른 네이밍 없을까요 ,, ?

[tgyuuAn]

WapAttendance가 위 그림 부분인데 더 좋은 네이밍 어떤게 있을까요 ㅠㅠㅠ 네이밍 지옥 봉착

[jeongjaino]

저는 ProfileAttendanceCard 한표 드립니다 ☺☺

[tgyuuAn]

저는 마땅한 아이디어도 없으니 그걸로 바로 가겠습니다!

[jeongjaino]

My 보다는 Profile은 어떤 것 같아요 ??

ProfileAttendanceCard ?

[tgyuuAn]

더 좋은 것 같아요! 수정해놨습니다!

[jeongjaino]

헉 짓다보니 위에랑 겹치네요

근데 위에가 더 어울리는 것 같아요,,,,,,,,

MyAttendanceStatus AttendanceStatusColumn 한표 드리겠습니다 ...

[tgyuuAn]

MyAttendanceStatus 로 가겠습니다!

[jeongjaino]

태규상 저 대신 문제 파악해주시고, 해결까지 해주셔서 너무너무너무 (자꾸자꾸자꾸 ~~) 감사합니다 !!

해당 문제를 해결하기 위해서 따로 Column을 안넣어주셔도 되구, 사실 Scaffold만 올리니까 되네용 !!

따로 구현한 코드 붙여 넣어주시면 감사하겠습니다 !

package com.wap.wapp.feature.survey

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.wap.designsystem.WappTheme
import com.wap.designsystem.component.WappTitle
import com.wap.wapp.core.commmon.extensions.toSupportingText
import com.wap.wapp.core.commmon.util.DateUtil.yyyyMMddFormatter
import com.wap.wapp.core.model.survey.SurveyForm
import kotlinx.coroutines.flow.collectLatest
import java.time.Duration
import java.time.LocalDateTime

@Composable
internal fun SurveyScreen(
    viewModel: SurveyViewModel,
    navigateToSurveyAnswer: (Int) -> Unit,
) {
    val context = LocalContext.current
    val surveyFormListUiState = viewModel.surveyFormListUiState.collectAsState().value
    val snackBarHostState = remember { SnackbarHostState() }

    LaunchedEffect(true) {
        viewModel.surveyEvent.collectLatest {
            when (it) {
                is SurveyViewModel.SurveyUiEvent.Failure -> {
                    snackBarHostState.showSnackbar(it.throwable.toSupportingText())
                }

                is SurveyViewModel.SurveyUiEvent.AlreadySubmitted -> {
                    snackBarHostState.showSnackbar(
                        context.getString(R.string.alreay_submitted_description),
                    )
                }

                is SurveyViewModel.SurveyUiEvent.NotSubmitted -> {
                    navigateToSurveyAnswer(it.eventId)
                }
            }
        }
    }

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        containerColor = WappTheme.colors.backgroundBlack,
        snackbarHost = { SnackbarHost(snackBarHostState) },
    ) { paddingValues ->
        when (surveyFormListUiState) {
            is SurveyViewModel.SurveyFormListUiState.Init -> { }
            is SurveyViewModel.SurveyFormListUiState.Success -> {
                SurveyContent(
                    surveyFormList = surveyFormListUiState.surveyFormList,
                    paddingValues = paddingValues,
                    selectedSurveyForm = viewModel::isSubmittedSurvey,
                )
            }
        }
    }
}

@Composable
private fun SurveyContent(
    surveyFormList: List<SurveyForm>,
    paddingValues: PaddingValues,
    selectedSurveyForm: (Int) -> Unit,
) {
    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        modifier = Modifier
            .padding(paddingValues)
            .padding(vertical = 16.dp, horizontal = 8.dp),
    ) {
        WappTitle(
            title = stringResource(R.string.survey_title),
            content = stringResource(R.string.survey_content),
        )

        LazyColumn(
            verticalArrangement = Arrangement.spacedBy(8.dp),
        ) {
            items(surveyFormList) { surveyForm ->
                SurveyFormItemCard(
                    surveyForm = surveyForm,
                    selectedSurveyForm = selectedSurveyForm,
                )
            }
        }
    }
}

@Composable
private fun SurveyFormItemCard(
    surveyForm: SurveyForm,
    selectedSurveyForm: (Int) -> Unit,
) {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = WappTheme.colors.black25,
        ),
        modifier = Modifier
            .fillMaxWidth()
            .clickable { selectedSurveyForm(surveyForm.eventId) },
    ) {
        Column(
            verticalArrangement = Arrangement.spacedBy(16.dp),
            modifier = Modifier
                .padding(16.dp),
        ) {
            Row(
                modifier = Modifier.fillMaxWidth(),
            ) {
                Text(
                    text = surveyForm.title,
                    color = WappTheme.colors.white,
                    style = WappTheme.typography.titleBold,
                )
                Text(
                    text = calculateDeadline(surveyForm.deadline),
                    color = WappTheme.colors.yellow34,
                    style = WappTheme.typography.captionMedium,
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.End,
                )
            }

            Text(
                text = surveyForm.content,
                color = WappTheme.colors.grayBD,
                style = WappTheme.typography.contentMedium,
            )
        }
    }
}

private fun calculateDeadline(deadline: LocalDateTime): String {
    val currentDateTime = LocalDateTime.now()
    val duration = Duration.between(currentDateTime, deadline)

    if (duration.toMinutes() < 60) {
        val leftMinutes = duration.toMinutes().toString()
        return leftMinutes + "분 후 마감"
    }

    if (duration.toHours() < 24) {
        val leftHours = duration.toHours().toString()
        return leftHours + "시간 후 마감"
    }

    if (duration.toDays() < 31) {
        val leftDays = duration.toDays().toString()
        return leftDays + "일 후 마감"
    }

    return deadline.format(yyyyMMddFormatter) + " 마감"
}

[tgyuuAn]

수정해놨습니다!