[FEAT/#15] CenterAlignedTopAppBar로 변경하여 구현

teamterning · Jul 6, 2024 · 10074f4 · 10074f4
1 parent 2f58463
commit 10074f4
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 12 deletions.
diff --git a/feature/src/main/java/com/terning/feature/component/topappbar/BackWithTitleTopAppBar.kt b/feature/src/main/java/com/terning/feature/component/topappbar/BackWithTitleTopAppBar.kt
@@ -0,0 +1,11 @@
+package com.terning.feature.component.topappbar
+
+import androidx.compose.runtime.Composable
+
+@Composable
+fun BackWithTitleTopAppBar(title: String, onBackButtonClick: () -> Unit) {
+    TerningTopAppBar(
+        title = title,
+        showBackButton = true,
+        onBackButtonClick = { onBackButtonClick.invoke() })
+}
diff --git a/feature/src/main/java/com/terning/feature/component/topappbar/BackWithoutTitleTopAppBar.kt b/feature/src/main/java/com/terning/feature/component/topappbar/BackWithoutTitleTopAppBar.kt
@@ -0,0 +1,10 @@
+package com.terning.feature.component.topappbar
+
+import androidx.compose.runtime.Composable
+
+@Composable
+fun BackWithTitleTopAppBar(onBackButtonClick: () -> Unit) {
+    TerningTopAppBar(
+        showBackButton = true,
+        onBackButtonClick = { onBackButtonClick.invoke() })
+}
diff --git a/feature/src/main/java/com/terning/feature/component/topappbar/TerningTopAppBar.kt b/feature/src/main/java/com/terning/feature/component/topappbar/TerningTopAppBar.kt
@@ -1,29 +1,30 @@
 package com.terning.feature.component.topappbar
 
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
+import com.terning.core.designsystem.theme.TerningTypography
 import com.terning.feature.R
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TerningTopAppBar(
-    title: String,
+    title: String = "",
     showBackButton: Boolean = false,
     customActions: List<@Composable (() -> Unit)>? = null,
     onBackButtonClick: (() -> Unit)? = null,
 ) {
-    TopAppBar(
+    CenterAlignedTopAppBar(
         title = {
-            Text(text = title, modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Center)
+            Text(
+                text = title,
+                style = TerningTypography().title2,
+            )
         },
         navigationIcon = {
             if (showBackButton) {
@@ -41,6 +42,6 @@ fun TerningTopAppBar(
             customActions?.forEach { customAction ->
                 customAction()
             }
-        },
+        }
     )
 }
diff --git a/feature/src/main/java/com/terning/feature/main/MainNavigator.kt b/feature/src/main/java/com/terning/feature/main/MainNavigator.kt
@@ -46,7 +46,7 @@ class MainNavigator(
         }
     }
 
-    private fun navigateUp() {
+    fun navigateUp() {
         navController.navigateUp()
     }
 

diff --git a/feature/src/main/java/com/terning/feature/main/MainScreen.kt b/feature/src/main/java/com/terning/feature/main/MainScreen.kt
@@ -18,12 +18,11 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.navigation.compose.NavHost
-import com.terning.feature.component.topappbar.TerningTopAppBar
 import com.terning.core.designsystem.theme.Grey300
 import com.terning.core.designsystem.theme.TerningMain
 import com.terning.core.designsystem.theme.White
-import com.terning.feature.R
 import com.terning.feature.calendar.navigation.calendarNavGraph
+import com.terning.feature.component.topappbar.BackWithTitleTopAppBar
 import com.terning.feature.home.navigation.homeNavGraph
 import com.terning.feature.mypage.navigation.myPageNavGraph
 import com.terning.feature.search.navigation.searchNavGraph
@@ -35,7 +34,7 @@ fun MainScreen(
     navigator: MainNavigator = rememberMainNavigator(),
 ) {
     Scaffold(
-        topBar = { TerningTopAppBar(title = stringResource(id = R.string.app_name)) },
+        topBar = { BackWithTitleTopAppBar(title = "Terning") { navigator.navigateUp() } },
         bottomBar = {
             MainBottomBar(
                 isVisible = navigator.showBottomBar(),
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ class MainNavigator( @@
             }
         }
-        private fun navigateUp() {
+        fun navigateUp() {
             navController.navigateUp()
         }
@@ Expand Down @@