Merge pull request #25 from YAPP-Github/feature/MZ-157-appbar

Feature/mz 157 appbar

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()
+    }
+}

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,
+    ),
+}

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 클릭")
+                        },
+                    ),
+            )
+        },
+    )
+}

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 = "다음")
+            }
+        }
+    }
+}

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,
     ),
     ;