feat : 게시글 목록 화면 탭 UI 구현

WithPeace · Mar 18, 2024 · 419f456 · 419f456
1 parent 29611b1
commit 419f456
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/app/src/main/java/com/withpeace/withpeace/WithpeaceApp.kt b/app/src/main/java/com/withpeace/withpeace/WithpeaceApp.kt
@@ -1,6 +1,5 @@
 package com.withpeace.withpeace
 
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -17,6 +16,7 @@ import androidx.compose.ui.unit.dp
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
+import com.withpeace.withpeace.core.designsystem.theme.WithpeaceTheme
 import com.withpeace.withpeace.navigation.WithpeaceNavHost
 import kotlinx.coroutines.launch
 
@@ -46,8 +46,11 @@ fun WithpeaceApp(
                 }
             }
         },
-        modifier = Modifier.fillMaxSize().safeDrawingPadding(),
+        modifier = Modifier
+            .fillMaxSize()
+            .safeDrawingPadding(),
         snackbarHost = { SnackbarHost(snackBarHostState) },
+        containerColor = WithpeaceTheme.colors.SystemWhite,
     ) { innerPadding ->
         WithpeaceNavHost(
             modifier = Modifier.padding(innerPadding),

diff --git a/feature/postlist/src/main/java/com/withpeace/withpeace/feature/postlist/PostListScreen.kt b/feature/postlist/src/main/java/com/withpeace/withpeace/feature/postlist/PostListScreen.kt
@@ -1,10 +1,13 @@
 package com.withpeace.withpeace.feature.postlist
 
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import com.withpeace.withpeace.core.designsystem.theme.WithpeaceTheme
 
 @Composable
@@ -19,9 +22,8 @@ fun PostListScreen(
 
 ) {
     Column(modifier = Modifier.fillMaxSize()) {
-        TopicTabs {
-
-        }
+        Spacer(modifier = Modifier.height(8.dp))
+        TopicTabs {}
     }
 }
 

diff --git a/feature/postlist/src/main/java/com/withpeace/withpeace/feature/postlist/TopicTabs.kt b/feature/postlist/src/main/java/com/withpeace/withpeace/feature/postlist/TopicTabs.kt
@@ -1,12 +1,19 @@
 package com.withpeace.withpeace.feature.postlist
 
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRow
+import androidx.compose.material3.TabRowDefaults
+import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import com.withpeace.withpeace.core.designsystem.theme.WithpeaceTheme
 import com.withpeace.withpeace.core.domain.model.post.PostTopic
 import com.withpeace.withpeace.core.ui.PostTopicUiState
@@ -16,18 +23,36 @@ fun TopicTabs(
     currentTopic: PostTopic = PostTopic.FREEDOM,
     onClick: (PostTopic) -> Unit,
 ) {
-    TabRow(selectedTabIndex = PostTopic.findIndex(currentTopic)) {
+    val index = rememberSaveable { PostTopic.findIndex(currentTopic) }
+    TabRow(
+        modifier = Modifier.wrapContentSize(),
+        selectedTabIndex = index,
+        containerColor = WithpeaceTheme.colors.SystemWhite,
+        indicator = { tabPositions ->
+            TabRowDefaults.PrimaryIndicator(
+                modifier = Modifier.tabIndicatorOffset(tabPositions[index]),
+                color = WithpeaceTheme.colors.MainPink
+            )
+        },
+    ) {
         PostTopicUiState.entries.forEachIndexed { index, postTopicUiState ->
+            val color = if (currentTopic == postTopicUiState.topic) WithpeaceTheme.colors.MainPink
+            else WithpeaceTheme.colors.SystemGray2
             Tab(
                 selected = postTopicUiState.topic == currentTopic,
                 onClick = { onClick(postTopicUiState.topic) },
-                text = { Text(text = stringResource(id = postTopicUiState.textResId)) },
+                text = {
+                    Text(
+                        text = stringResource(id = postTopicUiState.textResId),
+                        color = color,
+                    )
+                },
                 icon = {
                     Icon(
+                        modifier = Modifier.size(28.dp),
                         painter = painterResource(id = postTopicUiState.iconResId),
                         contentDescription = stringResource(id = postTopicUiState.textResId),
-                        tint = if (currentTopic == postTopicUiState.topic) WithpeaceTheme.colors.MainPink
-                        else WithpeaceTheme.colors.SystemGray2,
+                        tint = color,
                     )
                 },
             )