[FEATURE]: 상담화면 UI 작성

[tgyuuAn]

작업 사항

• 상담화면 UI를 작성합니다.

Todo

• [x] 상담화면 UI 작성

기타사항

-

[tgyuuAn]

BottomNavigation Visibility 애니메이션 부드럽게 만들기.

기존에는 BottomNavigation이 생기면 위의 Screen이 점프하는 현상이 생겼음.

AnimatedVisibility (기존)

    AnimatedVisibility(
        visible = bottomBarState,
        enter = slideInVertically(initialOffsetY = { it }),
        exit = slideOutVertically(targetOffsetY = { it }),
        content = {
            BottomNavigation(
                backgroundColor = BaekyoungTheme.colors.white,
                modifier = modifier
            ) {
                TopLevelDestination.entries.forEach { destination ->
                    val isSelect = currentRoute == destination.route
                    BottomNavigationItem(
                        selected = isSelect,
                        onClick = { onNavigateToDestination(destination) },
                        selectedContentColor = BaekyoungTheme.colors.blueFF,
                        unselectedContentColor = BaekyoungTheme.colors.gray95,
                        icon = {
                            Icon(
                                painter = painterResource(id = destination.selectedIcon),
                                contentDescription = null,
                            )
                        },
                        label = {
                            Text(
                                text = stringResource(id = destination.titleTextId),
                                style = BaekyoungTheme.typography.labelNormal,
                                color = if (isSelect) BaekyoungTheme.colors.blueFF
                                else BaekyoungTheme.colors.gray95,
                            )
                        }
                    )
                }
            }
        }
    )

AnimatedContent (변경)

    AnimatedContent(
        targetState = bottomBarState,
        label = "",
        transitionSpec = {
            slideInVertically { height -> height } with
                    slideOutVertically { height -> height }
        },
        content = { isVisible ->
            if (isVisible) {
                BottomNavigation(
                    backgroundColor = BaekyoungTheme.colors.white,
                    modifier = modifier
                ) {
                    TopLevelDestination.entries.forEach { destination ->
                        val isSelect = currentRoute == destination.route
                        BottomNavigationItem(
                            selected = isSelect,
                            onClick = { onNavigateToDestination(destination) },
                            selectedContentColor = BaekyoungTheme.colors.blueFF,
                            unselectedContentColor = BaekyoungTheme.colors.gray95,
                            icon = {
                                Icon(
                                    painter = painterResource(id = destination.selectedIcon),
                                    contentDescription = null,
                                )
                            },
                            label = {
                                Text(
                                    text = stringResource(id = destination.titleTextId),
                                    style = BaekyoungTheme.typography.labelNormal,
                                    color = if (isSelect) BaekyoungTheme.colors.blueFF
                                    else BaekyoungTheme.colors.gray95,
                                )
                            }
                        )
                    }
                }
            }
        },
    )

레퍼런스