[FEATURE]: 마이페이지 UI 개선 및 기능 구현

[tgyuuAn]

작업 사항

• 마이페이지 UI 개선 및 기능 구현

Todo

• 마이페이지 UI 개선

아래 2개에서 위 2개로 개선 하였습니다.

• 마이페이지 기능을 구현합니다.

기타사항

[tgyuuAn]

1. Compose 로 Span 주는 방법

2. Compose Early Return 할 때 에러

Column {
    /* ... */
    return@Column // < 이렇게 하면 앱 크러시남
}

Column {
    /* ... */
    return  // 이렇게 해야함.
}

3. Box 혹은 Card 안에 TextView 넣을 때 가운데 정렬

            Card(
                shape = RoundedCornerShape(10.dp),
                backgroundColor = WappTheme.colors.yellow34,
                modifier = Modifier
                    .padding(horizontal = 15.dp)
                    .padding(top = 40.dp)
                    .height(50.dp)
                    .fillMaxWidth()
                    .clickable { navigateToLogin() },
            ) {
                Text(
                    text = "로그인 하러 가기",
                    style = WappTheme.typography.contentMedium,
                    color = WappTheme.colors.white,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.wrapContentHeight(),  // <- wrapContentHeight() 하면 가운데 정렬 됨.
                )
            }

[tgyuuAn]

4. BottomNaivgation Hide/Visible 로직에서 Background Color

기존 (바텀 시트 쪽 하단 주목)

변경 후 (바텀 시트 쪽 하단 주목)

                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    containerColor = WappTheme.colors.backgroundBlack,  // containerColor를 추가해주면 된다.
                    bottomBar = {
                        val navBackStackEntry by
                        navController.currentBackStackEntryAsState()

                        val currentRoute = navBackStackEntry?.destination?.route
                        var bottomBarState by rememberSaveable { mutableStateOf(false) }

                        handleBottomBarState(
                            currentRoute,
                            setBottomBarState = { boolean ->
                                bottomBarState = boolean
                            },
                        )

                        WappBottomBar(
                            currentRoute = currentRoute,
                            bottomBarState = bottomBarState,
                            onNavigateToDestination = { destination ->
                                navigateToTopLevelDestination(
                                    navController,
                                    destination,
                                )
                            },
                            modifier = Modifier.height(70.dp),
                        )
                    },
                ) { innerPadding ->
                    WappNavHost(
                        signInUseCase = signInUseCase,
                        navController = navController,
                        modifier = Modifier.padding(innerPadding),
                    )
                }

와 같이

containerColor = WappTheme.colors.backgroundBlack,  // containerColor를 추가해주면 된다.

를 추가해주면 뒤에 흰색 배경이 해결된다