Skip to content

[feat/#12] SnackBar 컴포넌트 구현 #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
seungjae708 merged 6 commits into from
Jan 10, 2026
Merged

[feat/#12] SnackBar 컴포넌트 구현 #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0bec3e4
feature/#12: snackbar 구현
seungjae708 Jan 8, 2026
30e2256
feature/#12: MainAppState에 스낵바 노출 로직 추가
seungjae708 Jan 8, 2026
31d9e61
feature/#12: MainScreen에 스낵바 연결
seungjae708 Jan 8, 2026
05b8c24
feat/#12: MainAppState 스낵바의 표시 역할 제거
seungjae708 Jan 9, 2026
5eb93f9
feat/#12: MainScreen 수정 및 todo 추가
seungjae708 Jan 9, 2026
2973f59
feat/#12: KieroSnackbar noRippleClickable 제거
seungjae708 Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions app/src/main/java/com/kiero/core/designsystem/component/KieroSnackbar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
package com.kiero.core.designsystem.component

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.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.kiero.core.designsystem.theme.KieroTheme

@Composable
fun KieroSnackbar(
Copy link
Member

@vvan2 vvan2 Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p3) 굳굳슨, 공통 컴포넌트 작업시에 컴포져블 함수 네이밍은 Kiero+컴포넌트명으로 통일할까요?
서비스명을 안붙히고 역할+컴포넌트명 으로 하는 상황도 많이 봤어서 통일하고 가는게 좋을 것 같습니당
@seungjae708 @sonms @dmp100

Copy link
Collaborator

@dmp100 dmp100 Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

괜찮다고 생각합니다 ! 공통 컴포넌트로 쓰기엔 적합한거같아요 !

Copy link
Member

@sonms sonms Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

공통이라는 것을 한눈에 알기쉬워서 키어로+컴포넌트명으로 통일하는 것으로 하는 것이 좋을 것 같아요!

message: String,
modifier: Modifier = Modifier,
) {
Box(
modifier = modifier
.fillMaxWidth()
.clip(RoundedCornerShape(12.dp))
.background(KieroTheme.colors.gray900)
.padding(16.dp),
contentAlignment = Alignment.Center
) {
Text(
text = message,
style = KieroTheme.typography.regular.body4,
color = KieroTheme.colors.schedule1,
textAlign = TextAlign.Center
)
}
}

@Preview(showBackground = true)
@Composable
private fun KieroSnackbarPreview() {
Copy link
Member

@vvan2 vvan2 Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

KieroTheme {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.CenterHorizontally,
) {
KieroSnackbar(
message = "이 메세지는 토스트 메세지 입니다",
modifier = Modifier.padding(16.dp),
)
}
}
}
5 changes: 4 additions & 1 deletion app/src/main/java/com/kiero/presentation/main/navigation/MainAppState.kt
View file
Open in desktop
Copy link
Member

@vvan2 vvan2 Jan 8, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p1) AppState 를 통해 navigation 상태 관리를 하는게 저도 처음이라, 사실 보고 좀 생각을 해봤습니다.
snackbar와 같은 경우 MainAppState 에서 파라미터로 전달하는 방식도 있긴한데, 다른 프로젝트를 좀 찾아보니까
전역적으로 compositionlocal 을 사용해서 필요한 곳에 만 사용하는 방법도 많더라구요!!
사용예시로 올려주신 방법처럼 host-> graph -> route -> screen 으로 전달 하게 되면 사용하는 모든 화면에 명시적으로 전달해야 되는 리소스가 생기지만,
compositionLocalprovider 로 필요한 screen 에서만 선언해주면 편리할 것 같습니다.

@Composable
fun AuthScreen(
    paddingValues: PaddingValues,
    navigateUp: () -> Unit,
    navigateToParent: () -> Unit,
    navigateToKid: () -> Unit,
    modifier: Modifier = Modifier,
) {
    val showSnackbar = SnackbarController.Local.current

또한, snackBar 와 더불어 저희 프로젝트에서는 dialog 또한 사용하고 있는데 추후 사용될 dialog 까지 생각하면

CompositionLocalProvider(
    // 여기서 전역으로 provide 해주고
    AppController.SnackbarLocal provides appState::showSnackbar,
    AppController.DialogLocal provides dialogController::show,
) {
    KieroNavHost(
        // NavHost 내부에서는 navigation 로직만을 명시적 전달
        navigateToParent = appState::navigateToParent,
        navigateToKid = appState::navigateToKid,
    )
}

이러한 구조도 나쁘지 않을 것 같다는 생각인데, 팀원들의 의견을 듣고 싶네용

Copy link
Collaborator

@dmp100 dmp100 Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확장성까지 고려했을 때, CompositionLocal 방식도 괜찮을 것 같습니다!

현재 파라미터 전달 방식은 모든 중간 레이어에 파라미터를 전달해야 하고,
Dialog 등이 추가되면 파라미터가 계속 늘어날 수 있어서
CompositionLocal 방식으로 개선하는 것도 좋아보입니다!
다만, 어떤 화면이 무엇을 사용하는지 파악이 어려울 수도 있어서 이부분은 조금 조심해야할 것 같아요 !

Copy link
Member

@sonms sonms Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CompositionLocalProvider 이 더 나을 것 같습니다 !

현재 어디서 어느 뷰에서 사용될지는 모르겠으나 MainAppState 부터 시작해서 feature의 기능 발생까지 내려 가야하는데
사용예시만 보더라도 하나의 메세지 발생을 위해 약6~7개의 파라미터를 내려주게 됩니다

이 방식은 보일러플레이트가 존재할 뿐더러 파라미터로 넘어가는 단계마다 비교 비용이 발생하게됩니다

따라서 CompositionLocalProvider을 적용해서 중앙 집중화와 일관성을 통해 단일 진실 소스를 보장하게 하는 방식이 더 좋을 것 같다고 생각합니다.

@dmp100

다만, 어떤 화면이 무엇을 사용하는지 파악이 어려울 수도 있어서 이부분은 조금 조심해야할 것 같아요 !

우려하시는 부분은 이해합니다 파라미터로 흐름을 파악 가능 했어서 우려하신 것 같은데
오히려 파라미터를 위에서 사용하는 뷰까지 내릴 동안 중간 뷰들이 가지는 파라미터 드릴링 방식이 더 구현의 파악이 어렵게 만드는 것 같아요
그래서 필요한 곳에서만 공구함에서 딱 꺼내 쓰는 느낌으로 사용해서 해당 컴포저블의 관심사를 파악하는데 더 직관적일 것 같습니다

Copy link
Collaborator Author

@seungjae708 seungjae708 Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CompositionLocalProvider를 활용하면 현재보다 훨씬 깔끔하게 관리될 것 같아 좋은 것 같습니다!
반영해볼게요.

Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package com.kiero.presentation.main.navigation

import androidx.compose.material3.SnackbarHostState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable
import androidx.compose.runtime.remember
Expand Down Expand Up @@ -86,6 +87,7 @@ class MainAppState(
initialValue = false
)


fun navigateToParent() {
navController.navigate(ParentGraph) {
popUpTo(AuthGraph) { inclusive = true }
Expand Down Expand Up @@ -156,9 +158,10 @@ class MainAppState(
@Composable
fun rememberMainAppState(
navController: NavHostController = rememberNavController(),
snackbarHostState: SnackbarHostState = remember { SnackbarHostState() },
coroutineScope: CoroutineScope = rememberCoroutineScope(),
): MainAppState {
return remember(navController, coroutineScope) {
return remember(navController, snackbarHostState, coroutineScope) {
MainAppState(
navController = navController,
coroutineScope = coroutineScope
Expand Down
11 changes: 9 additions & 2 deletions app/src/main/java/com/kiero/presentation/main/screen/MainScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.kiero.core.designsystem.component.KieroSnackbar
import com.kiero.presentation.main.navigation.KidMainTab
import com.kiero.presentation.main.navigation.KieroNavHost
import com.kiero.presentation.main.navigation.MainAppState
Expand All @@ -22,7 +23,7 @@ import kotlinx.collections.immutable.toImmutableList

@Composable
fun MainRoute(
appState: MainAppState = rememberMainAppState(),
appState: MainAppState = rememberMainAppState()
) {
val snackBarHostState = remember { SnackbarHostState() }

Expand Down Expand Up @@ -59,7 +60,13 @@ fun MainScreen(
Scaffold(
modifier = modifier.fillMaxSize(),
snackbarHost = {
SnackbarHost(hostState = snackBarHostState)
SnackbarHost(hostState = snackBarHostState) { data ->
KieroSnackbar(
message = data.visuals.message,
// TODO: 디자인 확정 후 스낵바 높이 및 패딩 수정 필요
modifier = Modifier.padding(16.dp)
)
}
},
bottomBar = {
MainBottomBar(
Expand Down