Merge pull request #17 from teamterning/add/#15-top-app-bar

[ADD/#15] TopAppBar
teamterning · Jul 7, 2024 · 8302624 · 8302624
2 parents 0c48be2 + dc5d081
commit 8302624
Show file tree

Hide file tree

Showing 13 changed files with 226 additions and 22 deletions.
diff --git a/core/src/main/java/com/terning/core/designsystem/topappbar/BackButtonTopAppBar.kt b/core/src/main/java/com/terning/core/designsystem/topappbar/BackButtonTopAppBar.kt
@@ -0,0 +1,14 @@
+package com.terning.core.designsystem.topappbar
+
+import androidx.compose.runtime.Composable
+
+@Composable
+fun BackButtonTopAppBar(
+    title: String, onBackButtonClick: (() -> Unit),
+) {
+    TerningTopAppBar(
+        title = title,
+        showBackButton = true,
+        onBackButtonClick = { onBackButtonClick.invoke() },
+    )
+}
diff --git a/core/src/main/java/com/terning/core/designsystem/topappbar/LogoTopAppBar.kt b/core/src/main/java/com/terning/core/designsystem/topappbar/LogoTopAppBar.kt
@@ -0,0 +1,20 @@
+package com.terning.core.designsystem.topappbar
+
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import com.terning.core.R
+
+@Composable
+fun LogoTopAppBar() {
+    TerningTopAppBar(
+        showBackButton = false,
+        actions = listOf {
+            Icon(
+                painter = painterResource(id = R.drawable.ic_logo),
+                contentDescription = stringResource(id = R.string.ic_logo),
+            )
+        }
+    )
+}
diff --git a/core/src/main/java/com/terning/core/designsystem/topappbar/MyPageTopAppBar.kt b/core/src/main/java/com/terning/core/designsystem/topappbar/MyPageTopAppBar.kt
@@ -0,0 +1,41 @@
+package com.terning.core.designsystem.topappbar
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import com.terning.core.R
+import com.terning.core.designsystem.theme.TerningTypography
+
+@Composable
+fun MyPageTopAppBar() {
+    TerningTopAppBar(
+        showBackButton = false,
+        actions = listOf(
+            {},
+            {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        text = stringResource(id = R.string.my_page_top_app_bar),
+                        style = TerningTypography().button3,
+                        textAlign = TextAlign.Center
+                    )
+                    IconButton(onClick = {
+                    }) {
+                        Icon(
+                            painter = painterResource(id = R.drawable.ic_right),
+                            contentDescription = stringResource(id = R.string.ic_20_right)
+                        )
+                    }
+                }
+            }
+        )
+    )
+}
diff --git a/core/src/main/java/com/terning/core/designsystem/topappbar/TerningTopAppBar.kt b/core/src/main/java/com/terning/core/designsystem/topappbar/TerningTopAppBar.kt
@@ -0,0 +1,57 @@
+package com.terning.core.designsystem.topappbar
+
+import androidx.compose.foundation.layout.Box
+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.runtime.Composable
+import androidx.compose.ui.Alignment
+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.R
+import com.terning.core.designsystem.theme.TerningTypography
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TerningTopAppBar(
+    title: String = "",
+    showBackButton: Boolean = false,
+    actions: List<@Composable () -> Unit> = emptyList(),
+    onBackButtonClick: () -> Unit = {},
+) {
+    CenterAlignedTopAppBar(
+        title = {
+
+            Text(
+                text = title,
+                textAlign = TextAlign.Center,
+                style = TerningTypography().title2
+            )
+
+        },
+        navigationIcon = {
+            if (showBackButton) {
+                IconButton(onClick = {
+                    onBackButtonClick.invoke()
+                }) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.ic_back),
+                        contentDescription = stringResource(id = R.string.ic_back)
+                    )
+                }
+            } else {
+                actions.getOrNull(0)?.invoke()
+            }
+        },
+        actions = {
+            actions.drop(1).forEach { action ->
+                action()
+            }
+        },
+    )
+}
diff --git a/core/src/main/res/drawable/ic_back.xml b/core/src/main/res/drawable/ic_back.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+  <group>
+    <clip-path
+        android:pathData="M0,0h32v32h-32z"/>
+    <path
+        android:pathData="M10.561,16.748C10.571,16.406 10.692,16.115 10.963,15.854L18.798,8.19C19.009,7.969 19.29,7.858 19.612,7.858C20.264,7.858 20.777,8.36 20.777,9.013C20.777,9.335 20.646,9.626 20.425,9.857L13.364,16.748L20.425,23.638C20.646,23.859 20.777,24.151 20.777,24.472C20.777,25.135 20.264,25.637 19.612,25.637C19.29,25.637 19.009,25.527 18.798,25.306L10.963,17.642C10.692,17.381 10.561,17.089 10.561,16.748Z"
+        android:fillColor="#373737"/>
+  </group>
+</vector>
diff --git a/core/src/main/res/drawable/ic_logo.xml b/core/src/main/res/drawable/ic_logo.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="149dp"
+    android:height="36dp"
+    android:viewportWidth="149"
+    android:viewportHeight="36">
+  <path
+      android:pathData="M147.52,1H2.07L74.8,17.82L147.52,1ZM147.9,1.31L75.66,18.02L147.9,34.73V1.31ZM73.93,18.02L1.95,1.37V34.67L73.93,18.02ZM2.26,35L74.8,18.22L147.33,35H2.26ZM0.95,34.92V35V36H1.95H147.9H148.9V35V1V0H147.9H1.95H0.95V1V1.12L0.9,1.13L0.95,1.14V34.9L0.9,34.91L0.95,34.92Z"
+      android:fillColor="#666666"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M59.97,13.51H60.8V21.25H64.82V22H59.97V13.51ZM73.03,17.76C73.03,18.63 72.87,19.4 72.56,20.06C72.25,20.71 71.81,21.22 71.25,21.58C70.69,21.94 70.06,22.12 69.34,22.12C68.63,22.12 67.99,21.94 67.43,21.58C66.87,21.22 66.44,20.71 66.12,20.05C65.81,19.39 65.65,18.63 65.65,17.76C65.65,16.88 65.81,16.12 66.12,15.46C66.44,14.8 66.87,14.29 67.43,13.94C67.99,13.58 68.63,13.4 69.34,13.4C70.06,13.4 70.69,13.58 71.25,13.94C71.81,14.29 72.25,14.8 72.56,15.46C72.87,16.12 73.03,16.88 73.03,17.76ZM66.47,17.76C66.47,18.49 66.59,19.13 66.84,19.67C67.08,20.21 67.43,20.62 67.86,20.91C68.3,21.19 68.79,21.33 69.34,21.33C69.89,21.33 70.39,21.19 70.82,20.91C71.26,20.62 71.6,20.21 71.85,19.67C72.09,19.13 72.21,18.49 72.21,17.76C72.21,17.02 72.09,16.39 71.84,15.85C71.6,15.31 71.26,14.89 70.82,14.61C70.39,14.32 69.89,14.18 69.34,14.18C68.79,14.18 68.3,14.32 67.86,14.61C67.43,14.89 67.09,15.3 66.84,15.84C66.59,16.38 66.47,17.02 66.47,17.76ZM80.55,16.17C80.45,15.78 80.28,15.44 80.05,15.15C79.81,14.85 79.52,14.61 79.17,14.44C78.82,14.27 78.43,14.18 77.99,14.18C77.45,14.18 76.96,14.32 76.52,14.61C76.09,14.89 75.75,15.3 75.51,15.84C75.26,16.38 75.14,17.02 75.14,17.76C75.14,18.49 75.26,19.13 75.51,19.67C75.76,20.21 76.1,20.62 76.54,20.91C76.98,21.19 77.48,21.33 78.05,21.33C78.55,21.33 79,21.22 79.39,21C79.78,20.78 80.09,20.46 80.31,20.05C80.53,19.64 80.65,19.16 80.65,18.61H78.23V17.86H81.47V18.59C81.47,19.3 81.32,19.92 81.03,20.45C80.74,20.99 80.33,21.4 79.81,21.69C79.3,21.97 78.71,22.12 78.05,22.12C77.31,22.12 76.66,21.94 76.1,21.58C75.54,21.23 75.1,20.72 74.79,20.06C74.48,19.4 74.33,18.63 74.33,17.76C74.33,16.88 74.48,16.11 74.79,15.46C75.1,14.8 75.53,14.29 76.08,13.94C76.64,13.58 77.27,13.4 77.99,13.4C78.59,13.4 79.13,13.52 79.61,13.77C80.1,14.01 80.49,14.35 80.8,14.77C81.12,15.19 81.32,15.65 81.41,16.17H80.55ZM90.19,17.76C90.19,18.63 90.03,19.4 89.72,20.06C89.4,20.71 88.97,21.22 88.41,21.58C87.85,21.94 87.21,22.12 86.5,22.12C85.78,22.12 85.15,21.94 84.59,21.58C84.03,21.22 83.6,20.71 83.28,20.05C82.97,19.39 82.81,18.63 82.81,17.76C82.81,16.88 82.97,16.12 83.28,15.46C83.6,14.8 84.03,14.29 84.59,13.94C85.15,13.58 85.78,13.4 86.5,13.4C87.21,13.4 87.85,13.58 88.41,13.94C88.97,14.29 89.4,14.8 89.72,15.46C90.03,16.12 90.19,16.88 90.19,17.76ZM83.62,17.76C83.62,18.49 83.75,19.13 83.99,19.67C84.24,20.21 84.58,20.62 85.02,20.91C85.45,21.19 85.95,21.33 86.5,21.33C87.05,21.33 87.55,21.19 87.98,20.91C88.42,20.62 88.76,20.21 89,19.67C89.25,19.13 89.37,18.49 89.37,17.76C89.37,17.02 89.25,16.39 89,15.85C88.75,15.31 88.41,14.89 87.98,14.61C87.55,14.32 87.05,14.18 86.5,14.18C85.95,14.18 85.46,14.32 85.02,14.61C84.59,14.89 84.25,15.3 84,15.84C83.75,16.38 83.62,17.02 83.62,17.76Z"
+      android:fillColor="#171717"/>
+</vector>
diff --git a/core/src/main/res/drawable/ic_right.xml b/core/src/main/res/drawable/ic_right.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <group>
+    <clip-path
+        android:pathData="M20,0l-20,0l-0,20l20,0z"/>
+    <path
+        android:pathData="M13.399,10.092C13.393,9.879 13.318,9.697 13.148,9.534L8.251,4.744C8.119,4.605 7.944,4.536 7.743,4.536C7.335,4.536 7.015,4.85 7.015,5.258C7.015,5.459 7.096,5.641 7.234,5.786L11.648,10.092L7.234,14.399C7.096,14.537 7.015,14.719 7.015,14.92C7.015,15.334 7.335,15.648 7.743,15.648C7.944,15.648 8.119,15.579 8.251,15.441L13.148,10.651C13.318,10.488 13.399,10.306 13.399,10.092Z"
+        android:fillColor="#666666"/>
+  </group>
+</vector>
diff --git a/core/src/main/res/values/strings.xml b/core/src/main/res/values/strings.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!--    ContentDescription-->
+    <string name="ic_back">뒤로가기 버튼</string>
+    <string name="ic_logo">탑 바 로고</string>
+    <string name="ic_20_right">오른쪽 버튼</string>
+
+    <!--    MyPage-->
+    <string name="my_page_top_app_bar">프로필 수정</string>
+</resources>
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
@@ -21,6 +21,10 @@ import androidx.navigation.compose.NavHost
 import com.terning.core.designsystem.theme.Grey300
 import com.terning.core.designsystem.theme.TerningMain
 import com.terning.core.designsystem.theme.White
+import com.terning.core.designsystem.topappbar.BackButtonTopAppBar
+import com.terning.core.designsystem.topappbar.LogoTopAppBar
+import com.terning.core.designsystem.topappbar.MyPageTopAppBar
+import com.terning.core.designsystem.topappbar.TerningTopAppBar
 import com.terning.feature.calendar.navigation.calendarNavGraph
 import com.terning.feature.home.navigation.homeNavGraph
 import com.terning.feature.mypage.navigation.myPageNavGraph
@@ -35,6 +39,18 @@ fun MainScreen(
     navigator: MainNavigator = rememberMainNavigator(),
 ) {
     Scaffold(
+        topBar = {
+            when (navigator.currentTab) {
+                MainTab.HOME -> LogoTopAppBar()
+                MainTab.CALENDAR -> BackButtonTopAppBar(
+                    title = "dkssud",
+                    onBackButtonClick = { navigator.navigateUp() })
+
+                MainTab.SEARCH -> LogoTopAppBar()
+                MainTab.MY_PAGE -> MyPageTopAppBar()
+                null -> TerningTopAppBar()
+            }
+        },
         bottomBar = {
             MainBottomBar(
                 isVisible = navigator.showBottomBar(),

diff --git a/feature/src/main/java/com/terning/feature/mypage/MyPageRoute.kt b/feature/src/main/java/com/terning/feature/mypage/MyPageRoute.kt
@@ -14,6 +14,7 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.flowWithLifecycle
+import com.terning.core.designsystem.topappbar.MyPageTopAppBar
 import com.terning.core.extension.toast
 import com.terning.core.state.UiState
 import com.terning.domain.entity.response.MockResponseModel
@@ -46,13 +47,13 @@ fun MyPageRoute(
         is UiState.Loading -> {}
         is UiState.Failure -> {}
         is UiState.Success -> {
-            MockScreen(mockList = (state.followers as UiState.Success<List<MockResponseModel>>).data)
+            MyPageScreen(mockList = (state.followers as UiState.Success<List<MockResponseModel>>).data)
         }
     }
 }
 
 @Composable
-fun MockScreen(
+fun MyPageScreen(
     mockList: List<MockResponseModel>,
 ) {
     LazyColumn(

diff --git a/feature/src/main/java/com/terning/feature/search/SearchRoute.kt b/feature/src/main/java/com/terning/feature/search/SearchRoute.kt
@@ -0,0 +1,25 @@
+package com.terning.feature.search
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.terning.core.designsystem.topappbar.LogoTopAppBar
+
+@Composable
+fun SearchRoute() {
+    SearchScreen()
+}
+
+@Composable
+fun SearchScreen(modifier: Modifier = Modifier) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+    ) {
+        Text(text = "탐색 스크린")
+    }
+}
diff --git a/feature/src/main/java/com/terning/feature/search/SearchRouth.kt b/feature/src/main/java/com/terning/feature/search/SearchRouth.kt
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ class MainNavigator( @@
             }
         }
-        private fun navigateUp() {
+        fun navigateUp() {
             navController.navigateUp()
         }
@@ Expand Down @@