🔀 :: (#956) AI 챗봇 채팅 화면 사용성 개선

app/src/main/kotlin/team/aliens/dms/android/app/ui/DmsApp.kt

@@ -7,48 +7,59 @@
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
-import androidx.compose.material3.windowsizeclass.WindowSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation3.runtime.entryProvider
 import androidx.navigation3.runtime.rememberNavBackStack
 import androidx.navigation3.ui.NavDisplay
+import team.aliens.dms.android.app.MainActivityViewModel
 import team.aliens.dms.android.app.navigation.AdjustProfileScreenNav
 import team.aliens.dms.android.app.navigation.ApplicationScreenNav
 import team.aliens.dms.android.app.navigation.BottomNavigationBar
+import team.aliens.dms.android.app.navigation.ChatBotScreenNav
 import team.aliens.dms.android.app.navigation.CheckPasswordScreenNav
+import team.aliens.dms.android.app.navigation.EditPasswordScreenNav
+import team.aliens.dms.android.app.navigation.FindIdScreenNav
 import team.aliens.dms.android.app.navigation.HomeScreenNav
+import team.aliens.dms.android.app.navigation.LateStudyNav
 import team.aliens.dms.android.app.navigation.MealScreenNav
 import team.aliens.dms.android.app.navigation.MyPageScreenNav
-import team.aliens.dms.android.app.navigation.FindIdScreenNav
-import team.aliens.dms.android.app.navigation.ResetPasswordScreenNav
 import team.aliens.dms.android.app.navigation.NoticeDetailScreenNav
 import team.aliens.dms.android.app.navigation.NotificationScreenNav
 import team.aliens.dms.android.app.navigation.OnboardingScreenNav
 import team.aliens.dms.android.app.navigation.PointHistoryScreenNav
 import team.aliens.dms.android.app.navigation.RemainScreenNav
-import team.aliens.dms.android.app.navigation.EditPasswordScreenNav
+import team.aliens.dms.android.app.navigation.ResetPasswordScreenNav
 import team.aliens.dms.android.app.navigation.SelectProfileScreenNav
 import team.aliens.dms.android.app.navigation.SettingScreenNav
 import team.aliens.dms.android.app.navigation.SignInScreenNav
+import team.aliens.dms.android.app.navigation.SignUpCompleteNav
+import team.aliens.dms.android.app.navigation.SignUpEnterEmailNav
+import team.aliens.dms.android.app.navigation.SignUpEnterEmailVerificationCodeNav
+import team.aliens.dms.android.app.navigation.SignUpEnterSchoolVerificationCodeNav
+import team.aliens.dms.android.app.navigation.SignUpEnterSchoolVerificationQuestionNav
+import team.aliens.dms.android.app.navigation.SignUpEnterStudentNumberNav
+import team.aliens.dms.android.app.navigation.SignUpSetIdNav
+import team.aliens.dms.android.app.navigation.SignUpSetPasswordNav
+import team.aliens.dms.android.app.navigation.SignUpTermsNav
 import team.aliens.dms.android.app.navigation.VoteScreenNav
-import team.aliens.dms.android.app.MainActivityViewModel
-import team.aliens.dms.android.app.navigation.LateStudyNav
 import team.aliens.dms.android.core.designsystem.snackbar.DmsSnackBar
 import team.aliens.dms.android.core.designsystem.snackbar.DmsSnackBarVisuals
 import team.aliens.dms.android.core.ui.navigation.LocalResultStore
 import team.aliens.dms.android.core.ui.navigation.rememberResultStore
 import team.aliens.dms.android.data.voting.model.AllVoteSearch
+import team.aliens.dms.android.feature.chatbot.ui.ChatBotRoute
+import team.aliens.dms.android.feature.editpassword.navigation.CheckPasswordRoute
+import team.aliens.dms.android.feature.editpassword.navigation.EditPasswordRoute
+import team.aliens.dms.android.feature.findid.navigation.FindIdRoute
+import team.aliens.dms.android.feature.latestudy.navigation.LateStudyRoute
 import team.aliens.dms.android.feature.main.application.navigation.ApplicationRoute
 import team.aliens.dms.android.feature.main.home.navigation.HomeRoute
 import team.aliens.dms.android.feature.main.mypage.navigation.MyPageRoute
@@ -60,9 +71,6 @@
 import team.aliens.dms.android.feature.profile.route.AdjustProfileRoute
 import team.aliens.dms.android.feature.profile.route.SelectProfileRoute
 import team.aliens.dms.android.feature.remain.navigation.RemainApplicationRoute
-import team.aliens.dms.android.feature.editpassword.navigation.CheckPasswordRoute
-import team.aliens.dms.android.feature.editpassword.navigation.EditPasswordRoute
-import team.aliens.dms.android.feature.findid.navigation.FindIdRoute
 import team.aliens.dms.android.feature.resetpassword.navigation.ResetPasswordRoute
 import team.aliens.dms.android.feature.setting.navigation.SettingRoute
 import team.aliens.dms.android.feature.signin.navigation.SignInRoute
@@ -76,20 +84,7 @@
 import team.aliens.dms.android.feature.signup.navigation.SignUpSetPasswordRoute
 import team.aliens.dms.android.feature.signup.navigation.SignUpTermsRoute
 import team.aliens.dms.android.feature.vote.navigation.VoteRoute
-import team.aliens.dms.android.app.navigation.SignUpCompleteNav
-import team.aliens.dms.android.app.navigation.SignUpEnterEmailNav
-import team.aliens.dms.android.app.navigation.SignUpEnterEmailVerificationCodeNav
-import team.aliens.dms.android.app.navigation.SignUpEnterSchoolVerificationCodeNav
-import team.aliens.dms.android.app.navigation.SignUpEnterSchoolVerificationQuestionNav
-import team.aliens.dms.android.app.navigation.SignUpEnterStudentNumberNav
-import team.aliens.dms.android.app.navigation.SignUpSetIdNav
-import team.aliens.dms.android.app.navigation.SignUpSetPasswordNav
-import team.aliens.dms.android.app.navigation.SignUpTermsNav
-import team.aliens.dms.android.feature.latestudy.navigation.LateStudyRoute
 import java.util.UUID
-import team.aliens.dms.android.app.navigation.ChatBotScreenNav
-import team.aliens.dms.android.feature.chatbot.ui.ChatBotRoute
-
 
 @Composable
 fun DmsApp(
@@ -102,14 +97,13 @@
 
     val backStack = rememberNavBackStack(OnboardingScreenNav)
     val resultStore = rememberResultStore()
-    var isChatInputFocused by remember { mutableStateOf(false) }
     val currentScreen = backStack.lastOrNull()
     val shouldShowBottomBar = currentScreen in listOf(
         HomeScreenNav,
         ApplicationScreenNav,
         ChatBotScreenNav,
         MyPageScreenNav,
-    ) && !(currentScreen == ChatBotScreenNav && isChatInputFocused)
+    )
 
     LaunchedEffect(isStartupResolved, isOnboardingCompleted, isJwtAvailable) {
         if (!isStartupResolved) return@LaunchedEffect
@@ -127,8 +121,7 @@
     }
 
     Box(
-        modifier = Modifier
-            .fillMaxSize(),
+        modifier = Modifier.fillMaxSize(),
     ) {
         Scaffold(
             bottomBar = {
@@ -145,16 +138,15 @@
                                 }
                                 backStack.add(destination)
                             }
-                        }
+                        },
                     )
                 }
             },
             contentWindowInsets = WindowInsets(0),
         ) { paddingValues ->
             CompositionLocalProvider(LocalResultStore provides resultStore) {
                 NavDisplay(
-                    modifier = Modifier
-                        .padding(paddingValues),
+                    modifier = Modifier.padding(paddingValues),
                     backStack = backStack,
                     onBack = { backStack.removeLastOrNull() },
                     entryProvider = entryProvider {
@@ -214,22 +206,18 @@
                                 },
                                 onNavigateLateStudyApplication = {
                                     backStack.add(LateStudyNav)
-                                }
+                                },
                             )
                         }
                         entry<ChatBotScreenNav> {
-                            ChatBotRoute(
-                                onInputFocusChange = { focused ->
-                                    isChatInputFocused = focused
-                                },
-                            )
+                            ChatBotRoute()
                         }
                         entry<VoteScreenNav> {
                             VoteRoute(
                                 onNavigateBack = { backStack.remove(VoteScreenNav) },
                                 onShowSnackBar = { snackBarType, message ->
                                     appState.showSnackBar(snackBarType, message)
-                                }
+                                },
                             )
                         }
                         entry<RemainScreenNav> {
@@ -240,7 +228,7 @@
                                 },
                                 onShowSnackBar = { snackBarType, message ->
                                     appState.showSnackBar(snackBarType, message)
-                                }
+                                },
                             )
                         }
                         entry<LateStudyNav> {
@@ -274,7 +262,7 @@
                         }
                         entry<MealScreenNav> {
                             MealRoute(
-                                onNavigateBack = { backStack.remove(MealScreenNav) }
+                                onNavigateBack = { backStack.remove(MealScreenNav) },
                             )
                         }
                         entry<SettingScreenNav> {
@@ -288,13 +276,13 @@
                                 },
                                 onShowSnackBar = { snackBarType, message ->
                                     appState.showSnackBar(snackBarType, message)
-                                }
+                                },
                             )
                         }
                         entry<PointHistoryScreenNav> {
                             PointHistoryRoute(
                                 pointType = it.pointType,
-                                onBackClick = { backStack.remove(PointHistoryScreenNav(it.pointType)) }
+                                onBackClick = { backStack.remove(PointHistoryScreenNav(it.pointType)) },
                             )
                         }
                         entry<EditPasswordScreenNav> {
@@ -316,7 +304,7 @@
                                 onNavigateEditPassword = { backStack.add(EditPasswordScreenNav(it)) },
                                 onShowSnackBar = { snackBar, message ->
                                     appState.showSnackBar(snackBar, message)
-                                }
+                                },
                             )
                         }
                         entry<SelectProfileScreenNav> {
@@ -325,7 +313,7 @@
                                 onNavigateAdjustProfile = { backStack.add(AdjustProfileScreenNav(model = it)) },
                                 onShowSnackBar = { snackBar, message ->
                                     appState.showSnackBar(snackBar, message)
-                                }
+                                },
                             )
                         }
                         entry<AdjustProfileScreenNav> {
@@ -334,7 +322,7 @@
                                 model = it.model,
                                 onShowSnackBar = { snackBar, message ->
                                     appState.showSnackBar(snackBar, message)
-                                }
+                                },
                             )
                         }
                         entry<NotificationScreenNav> {
@@ -349,7 +337,7 @@
                                 },
                                 onShowSnackBar = { snackBarType, message ->
                                     appState.showSnackBar(snackBarType, message)
-                                }
+                                },
                             )
                         }
                         entry<NoticeDetailScreenNav> {

feature/src/main/kotlin/team/aliens/dms/android/feature/chatbot/ui/ChatBotScreen.kt

@@ -1,13 +1,17 @@
 package team.aliens.dms.android.feature.chatbot.ui
 
+import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.ime
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
@@ -35,6 +39,13 @@ import team.aliens.dms.android.feature.chatbot.viewmodel.ChatBotMessage
 import team.aliens.dms.android.feature.chatbot.viewmodel.ChatBotState
 import team.aliens.dms.android.feature.chatbot.viewmodel.ChatBotViewModel
 
+private val ChatBotInputBarHeight = 64.dp
+private val ChatBotKeyboardInputBottomPadding = 12.dp
+private val ChatBotBottomNavigationInputPadding = 16.dp
+private val ChatBotScaffoldBottomBarPadding = 104.dp
+private val ChatBotInputBarHorizontalPadding = 20.dp
+private val ChatBotMessageBottomSpacing = 24.dp
+
 @Composable
 fun ChatBotRoute(
     onInputFocusChange: (Boolean) -> Unit = {},
@@ -68,6 +79,28 @@ private fun ChatBotScreen(
 ) {
     var isInputFocused by remember { mutableStateOf(false) }
     val listState = rememberLazyListState()
+    val keyboardBottomPadding = WindowInsets.ime
+        .asPaddingValues()
+        .calculateBottomPadding()
+    val isKeyboardVisible = keyboardBottomPadding > 0.dp
+
+    val targetInputBottomPadding = if (isKeyboardVisible) {
+        (
+                keyboardBottomPadding -
+                        ChatBotScaffoldBottomBarPadding +
+                        ChatBotKeyboardInputBottomPadding
+                ).coerceAtLeast(ChatBotKeyboardInputBottomPadding)
+    } else {
+        ChatBotBottomNavigationInputPadding
+    }
+
+    val inputBottomPadding by animateDpAsState(
+        targetValue = targetInputBottomPadding,
+        label = "ChatBotInputBottomPadding",
+    )
+
+    val inputBackgroundHeight = inputBottomPadding + ChatBotInputBarHeight
+    val messageBottomPadding = inputBackgroundHeight + ChatBotMessageBottomSpacing
 
     LaunchedEffect(state.messages.size, state.isLoading) {
         if (state.messages.isNotEmpty() || state.isLoading) {
@@ -92,6 +125,7 @@ private fun ChatBotScreen(
                 horizontalAlignment = Alignment.CenterHorizontally,
             ) {
                 ChatBotHeader()
+
                 ChatBotSuggestionQuestions(
                     onSuggestionClick = onSuggestionClick,
                 )
@@ -104,19 +138,11 @@ private fun ChatBotScreen(
                     .padding(horizontal = 20.dp),
                 contentPadding = PaddingValues(
                     top = 72.dp,
-                    bottom = if (isInputFocused) {
-                        112.dp
-                    } else {
-                        132.dp
-                    },
+                    bottom = messageBottomPadding,
                 ),
                 verticalArrangement = Arrangement.spacedBy(12.dp),
                 horizontalAlignment = Alignment.CenterHorizontally,
             ) {
-                item {
-                    ChatBotCompactHeader()
-                }
-
                 state.messages.forEach { message ->
                     item {
                         ChatBotMessageItem(message = message)
@@ -131,26 +157,29 @@ private fun ChatBotScreen(
             }
         }
 
+        Box(
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .fillMaxWidth()
+                .height(inputBackgroundHeight)
+                .background(DmsTheme.colorScheme.background),
+        )
+
         ChatBotInputBar(
             value = state.input,
             onValueChange = onInputChange,
             onSendClick = onSendClick,
-            enabled = !state.isLoading,
+            enabled = true,
             onFocusChange = { focused ->
                 isInputFocused = focused
                 onInputFocusChange(focused)
             },
             modifier = Modifier
                 .align(Alignment.BottomCenter)
-                .imePadding()
                 .padding(
-                    start = 20.dp,
-                    end = 20.dp,
-                    bottom = if (isInputFocused) {
-                        12.dp
-                    } else {
-                        16.dp
-                    },
+                    start = ChatBotInputBarHorizontalPadding,
+                    end = ChatBotInputBarHorizontalPadding,
+                    bottom = inputBottomPadding,
                 ),
         )
     }
@@ -173,27 +202,14 @@ private fun ChatBotHeader() {
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(top = 22.dp),
-            text = "외출, 점호, 벌점, 세탁실 이용 등 기숙사 규정을 AI\n가 빠르고 정확하게 안내해 드립니다.",
+            text = "외출, 점호, 벌점, 세탁실 이용 등 기숙사 규정을 \nAI가 빠르고 정확하게 안내해 드립니다.",
             color = DmsTheme.colorScheme.inverseSurface,
             style = DmsTheme.typography.body3,
             textAlign = TextAlign.Center,
         )
     }
 }
 
-@Composable
-private fun ChatBotCompactHeader() {
-    Text(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(top = 8.dp),
-        text = "외출, 점호, 벌점, 세탁실 이용 등 기숙사 규정을 AI\n가 빠르고 정확하게 안내해 드립니다.",
-        color = DmsTheme.colorScheme.inverseSurface,
-        style = DmsTheme.typography.body3,
-        textAlign = TextAlign.Center,
-    )
-}
-
 @Composable
 private fun ChatBotSuggestionQuestions(
     onSuggestionClick: (String) -> Unit,