diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt new file mode 100644 index 00000000..85d81de8 --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt @@ -0,0 +1,37 @@ +package com.susu.core.designsystem.component.appbar + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp + +@Composable +fun BasicAppBar( + modifier: Modifier = Modifier, + containerHeight: Dp = 44.dp, + leftIcon: @Composable () -> Unit, + title: @Composable () -> Unit, + actions: @Composable () -> Unit = {}, +) { + Box( + modifier = modifier + .fillMaxWidth() + .height(containerHeight), + contentAlignment = Alignment.Center, + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + leftIcon() + Spacer(modifier = modifier.weight(1f)) + actions() + } + title() + } +} diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt new file mode 100644 index 00000000..43b86ffe --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt @@ -0,0 +1,24 @@ +package com.susu.core.designsystem.component.appbar + +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.StrokeCap +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.susu.core.designsystem.theme.Orange30 +import com.susu.core.designsystem.theme.Orange60 + +enum class ProgressBarStyle( + val progressBarColor: Color, + val progressBarTrackColor: Color, + val progressBarWidth: Dp, + val progressBarHeight: Dp, + val progressBarStrokeCap: StrokeCap, +) { + SusuProgressBar( + progressBarColor = Orange60, + progressBarTrackColor = Orange30, + progressBarWidth = 72.dp, + progressBarHeight = 4.dp, + progressBarStrokeCap = StrokeCap.Round, + ), +} diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt new file mode 100644 index 00000000..0a80b1d1 --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt @@ -0,0 +1,169 @@ +package com.susu.core.designsystem.component.appbar + +import android.util.Log +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.susu.core.designsystem.R +import com.susu.core.designsystem.theme.Gray100 +import com.susu.core.designsystem.theme.SusuTheme +import com.susu.core.ui.extension.susuClickable + +@Composable +fun SusuDefaultAppBar( + modifier: Modifier = Modifier, + leftIcon: @Composable () -> Unit = {}, + title: String? = null, + actions: @Composable () -> Unit = {}, +) { + BasicAppBar( + modifier = modifier, + leftIcon = leftIcon, + title = { + title?.let { + Text( + text = title, + style = SusuTheme.typography.title_xs, + color = Gray100, + textAlign = TextAlign.Center, + ) + } + }, + actions = actions, + ) +} + +/** + * SusuDefaultAppBar의 경우의 수 + * 1. 왼쪽 로고 + 타이틀 + 오른쪽 아이콘 2개 + * 2. 왼쪽 로고 + 오른쪽 아이콘 2개 + * 3. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 아이콘 2개 + * 4. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 아이콘 1개 + * 5. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 텍스트 2개 + * 6. 왼쪽 뒤로가기 + 타이틀 + 오른족 텍스트 1개 + * 7. 왼쪽 뒤로가기 + 타이틀 + * 8. 왼쪽 뒤로가기 + 오른쪽 텍스트 2개 + * 9. 왼쪽 뒤로가기 + * */ + +@Preview(showBackground = true, backgroundColor = 0xFFFFFFFF) +@Composable +fun SusuDefaultAppBarPreview() { + SusuTheme { + Column( + verticalArrangement = Arrangement.spacedBy(20.dp), + ) { + // 1. 왼쪽 로고 + 타이틀 + 오른쪽 아이콘 2개 + LogoWithTwoIconsPreview() + + // 5. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 텍스트 2개 + BackBtnWithTwoTextPreview() + } + } +} + +@Composable +private fun LogoWithTwoIconsPreview( + modifier: Modifier = Modifier, + clickPadding: Dp = 10.dp, +) { + SusuDefaultAppBar( + leftIcon = { + Image( + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = "로고", + modifier = modifier.padding(clickPadding), + ) + }, + title = "타이틀", + actions = { + Icon( + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = null, + modifier = modifier + .susuClickable( + rippleEnabled = true, // 클릭 영역 확인을 위해 true로 설정 + onClick = { + Log.d("확인", "오른쪽 버튼1 클릭") + }, + ) + .padding(clickPadding), + ) + Icon( + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = null, + modifier = modifier + .susuClickable( + rippleEnabled = true, // 클릭 영역 확인을 위해 true로 설정 + onClick = { + Log.d("확인", "오른쪽 버튼2 클릭") + }, + ) + .padding(clickPadding), + ) + }, + ) +} + +@Composable +private fun BackBtnWithTwoTextPreview( + modifier: Modifier = Modifier, + clickPadding: Dp = 10.dp, + textPadding: Dp = 16.dp, +) { + SusuDefaultAppBar( + leftIcon = { + Icon( + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = "뒤로가기", + modifier = modifier + .susuClickable( + rippleEnabled = true, + onClick = { + Log.d("확인", "왼쪽 뒤로가기 클릭") + }, + ) + .padding(clickPadding), + ) + }, + title = "타이틀", + actions = { + Text( + text = "편집", + style = SusuTheme.typography.title_xxs, + color = Gray100, + modifier = modifier + .padding(end = textPadding) + .susuClickable( + rippleEnabled = true, + onClick = { + Log.d("확인", "오른쪽 텍스트1 클릭") + }, + ), + ) + Text( + text = "삭제", + style = SusuTheme.typography.title_xxs, + color = Gray100, + modifier = modifier + .padding(end = textPadding) + .susuClickable( + rippleEnabled = true, + onClick = { + Log.d("확인", "오른쪽 텍스트2 클릭") + }, + ), + ) + }, + ) +} diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt new file mode 100644 index 00000000..458407c0 --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt @@ -0,0 +1,98 @@ +package com.susu.core.designsystem.component.appbar + +import android.util.Log +import androidx.annotation.DrawableRes +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.material3.Button +import androidx.compose.material3.Icon +import androidx.compose.material3.LinearProgressIndicator +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.susu.core.designsystem.R +import com.susu.core.designsystem.theme.SusuTheme +import com.susu.core.ui.extension.susuClickable + +@Composable +fun SusuProgressAppBar( + modifier: Modifier = Modifier, + @DrawableRes leftIcon: Int? = null, + leftIconContentDescription: String? = null, + leftIconPadding: Dp = SusuTheme.spacing.spacing_xs, + currentStep: Int, + entireStep: Int, + progressBar: ProgressBarStyle = ProgressBarStyle.SusuProgressBar, + onClickBackButton: () -> Unit, +) { + BasicAppBar( + modifier = modifier, + leftIcon = { + leftIcon?.let { + Icon( + painter = painterResource(id = leftIcon), + contentDescription = leftIconContentDescription, + modifier = Modifier + .susuClickable( + rippleEnabled = true, + onClick = onClickBackButton, + ) + .padding(leftIconPadding), + ) + } + }, + title = { + LinearProgressIndicator( + progress = { currentStep / entireStep.toFloat() }, + color = progressBar.progressBarColor, + trackColor = progressBar.progressBarTrackColor, + modifier = modifier + .size( + width = progressBar.progressBarWidth, + height = progressBar.progressBarHeight, + ), + strokeCap = progressBar.progressBarStrokeCap, + ) + }, + ) +} + +@Preview(showBackground = true, backgroundColor = 0xFFFFFFFF) +@Composable +fun SusuProgressAppBarPreview() { + val entireStep = 6 + var currentStep by remember { mutableStateOf(1) } + + SusuTheme { + Column( + verticalArrangement = Arrangement.spacedBy(20.dp), + ) { + SusuProgressAppBar( + leftIcon = R.drawable.ic_arrow_left, + leftIconContentDescription = "뒤로가기", + currentStep = currentStep, + entireStep = entireStep, + onClickBackButton = { + Log.d("확인", "왼쪽 뒤로가기 클릭") + }, + ) + Button( + onClick = { + currentStep += 1 + }, + ) { + Text(text = "다음") + } + } + } +} diff --git a/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigationTab.kt b/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigationTab.kt index 6a6fba16..22b88f46 100644 --- a/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigationTab.kt +++ b/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigationTab.kt @@ -2,7 +2,6 @@ package com.susu.feature.navigator import androidx.annotation.DrawableRes import androidx.annotation.StringRes -import com.susu.core.designsystem.R import com.susu.feature.community.navigation.CommunityRoute import com.susu.feature.mypage.navigation.MyPageRoute import com.susu.feature.received.navigation.ReceivedRoute @@ -18,31 +17,31 @@ enum class MainNavigationTab( SENT( selectedIconId = R.drawable.ic_sent_filled, unselectedIconId = R.drawable.ic_sent_outlined, - labelId = com.susu.feature.navigator.R.string.bottom_navigation_item_label_sent, + labelId = R.string.bottom_navigation_item_label_sent, route = SentRoute.route, ), RECEIVED( selectedIconId = R.drawable.ic_received_filled, unselectedIconId = R.drawable.ic_received_outlined, - labelId = com.susu.feature.navigator.R.string.bottom_navigation_item_label_received, + labelId = R.string.bottom_navigation_item_label_received, route = ReceivedRoute.route, ), STATISTICS( selectedIconId = R.drawable.ic_statistics_filled, unselectedIconId = R.drawable.ic_statistics_outlined, - labelId = com.susu.feature.navigator.R.string.bottom_navigation_item_label_statistics, + labelId = R.string.bottom_navigation_item_label_statistics, route = StatisticsRoute.route, ), COMMUNITY( selectedIconId = R.drawable.ic_community_filled, unselectedIconId = R.drawable.ic_community_outlined, - labelId = com.susu.feature.navigator.R.string.bottom_navigation_item_label_community, + labelId = R.string.bottom_navigation_item_label_community, route = CommunityRoute.route, ), MY_PAGE( selectedIconId = R.drawable.ic_my_page_filled, unselectedIconId = R.drawable.ic_my_page_outlined, - labelId = com.susu.feature.navigator.R.string.bottom_navigation_item_label_my_page, + labelId = R.string.bottom_navigation_item_label_my_page, route = MyPageRoute.route, ), ; diff --git a/core/designsystem/src/main/res/drawable/ic_community_filled.xml b/feature/navigator/src/main/res/drawable/ic_community_filled.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_community_filled.xml rename to feature/navigator/src/main/res/drawable/ic_community_filled.xml diff --git a/core/designsystem/src/main/res/drawable/ic_community_outlined.xml b/feature/navigator/src/main/res/drawable/ic_community_outlined.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_community_outlined.xml rename to feature/navigator/src/main/res/drawable/ic_community_outlined.xml diff --git a/core/designsystem/src/main/res/drawable/ic_my_page_filled.xml b/feature/navigator/src/main/res/drawable/ic_my_page_filled.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_my_page_filled.xml rename to feature/navigator/src/main/res/drawable/ic_my_page_filled.xml diff --git a/core/designsystem/src/main/res/drawable/ic_my_page_outlined.xml b/feature/navigator/src/main/res/drawable/ic_my_page_outlined.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_my_page_outlined.xml rename to feature/navigator/src/main/res/drawable/ic_my_page_outlined.xml diff --git a/core/designsystem/src/main/res/drawable/ic_received_filled.xml b/feature/navigator/src/main/res/drawable/ic_received_filled.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_received_filled.xml rename to feature/navigator/src/main/res/drawable/ic_received_filled.xml diff --git a/core/designsystem/src/main/res/drawable/ic_received_outlined.xml b/feature/navigator/src/main/res/drawable/ic_received_outlined.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_received_outlined.xml rename to feature/navigator/src/main/res/drawable/ic_received_outlined.xml diff --git a/core/designsystem/src/main/res/drawable/ic_sent_filled.xml b/feature/navigator/src/main/res/drawable/ic_sent_filled.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_sent_filled.xml rename to feature/navigator/src/main/res/drawable/ic_sent_filled.xml diff --git a/core/designsystem/src/main/res/drawable/ic_sent_outlined.xml b/feature/navigator/src/main/res/drawable/ic_sent_outlined.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_sent_outlined.xml rename to feature/navigator/src/main/res/drawable/ic_sent_outlined.xml diff --git a/core/designsystem/src/main/res/drawable/ic_statistics_filled.xml b/feature/navigator/src/main/res/drawable/ic_statistics_filled.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_statistics_filled.xml rename to feature/navigator/src/main/res/drawable/ic_statistics_filled.xml diff --git a/core/designsystem/src/main/res/drawable/ic_statistics_outlined.xml b/feature/navigator/src/main/res/drawable/ic_statistics_outlined.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_statistics_outlined.xml rename to feature/navigator/src/main/res/drawable/ic_statistics_outlined.xml