[Fix] 문답 상세 화면 탭바 UI 변경 (#118)

* [feat] : BottlesTabItem 컴포넌트 추가 * [fix] : PingPongDetail 화면 탭바 UI 변경
Nexters · Oct 15, 2024 · 916b858 · 916b858
1 parent 8cd60eb
commit 916b858
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 23 deletions.
diff --git a/...-system/src/main/kotlin/com/team/bottles/core/designsystem/components/etc/menu/TabItem.kt b/...-system/src/main/kotlin/com/team/bottles/core/designsystem/components/etc/menu/TabItem.kt
@@ -0,0 +1,104 @@
+package com.team.bottles.core.designsystem.components.etc.menu
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.team.bottles.core.designsystem.modifier.noRippleClickable
+import com.team.bottles.core.designsystem.theme.BottlesTheme
+
+enum class BottlesTabItemState {
+    SELECTED,
+    ENABLED,
+    DISABLED,
+    ;
+}
+
+@Composable
+fun BottlesTabItem(
+    modifier: Modifier = Modifier,
+    text: String,
+    state: BottlesTabItemState,
+    onClickTab: () -> Unit
+) {
+    val textColor = when (state) {
+        BottlesTabItemState.DISABLED -> BottlesTheme.color.text.disabledSecondary
+        BottlesTabItemState.ENABLED -> BottlesTheme.color.text.enabledSecondary
+        BottlesTabItemState.SELECTED -> BottlesTheme.color.text.selectedPrimary
+    }
+    val textStyle = when (state) {
+        BottlesTabItemState.DISABLED,
+        BottlesTabItemState.ENABLED -> BottlesTheme.typography.body
+
+        BottlesTabItemState.SELECTED -> BottlesTheme.typography.subTitle2
+    }
+    val dividerColor = BottlesTheme.color.border.selected
+
+    Box(
+        modifier = Modifier
+            .height(height = 42.dp)
+            .drawBehind {
+                if (state == BottlesTabItemState.SELECTED) {
+                    drawRoundRect(
+                        color = dividerColor,
+                        size = Size(
+                            width = size.width,
+                            height = 2.dp.toPx()
+                        ),
+                        topLeft = Offset(
+                            x = 0f,
+                            y = size.height - 2.dp.toPx()
+                        ),
+                        cornerRadius = CornerRadius(4.dp.toPx())
+                    )
+                }
+            }
+            .noRippleClickable(onClick = onClickTab)
+    ) {
+        Text(
+            modifier = Modifier
+                .align(alignment = Alignment.Center)
+                .padding(horizontal = BottlesTheme.spacing.small),
+            text = text,
+            style = textStyle,
+            color = textColor,
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun TabItemPreview() {
+    BottlesTheme {
+        Row(horizontalArrangement = Arrangement.spacedBy(3.dp)) {
+            BottlesTabItem(
+                text = "sad",
+                state = BottlesTabItemState.ENABLED,
+                onClickTab = {}
+            )
+
+            BottlesTabItem(
+                text = "sad",
+                state = BottlesTabItemState.SELECTED,
+                onClickTab = {}
+            )
+
+            BottlesTabItem(
+                text = "sad",
+                state = BottlesTabItemState.DISABLED,
+                onClickTab = {}
+            )
+        }
+    }
+}
diff --git a/core/ui/src/main/kotlin/com/team/bottles/core/ui/RowTab.kt b/core/ui/src/main/kotlin/com/team/bottles/core/ui/RowTab.kt
@@ -6,9 +6,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import com.team.bottles.core.designsystem.components.buttons.BottlesOutLinedButton
-import com.team.bottles.core.designsystem.components.buttons.OutlinedButtonState
-import com.team.bottles.core.designsystem.components.buttons.OutlinedButtonType
+import com.team.bottles.core.designsystem.components.etc.menu.BottlesTabItem
+import com.team.bottles.core.designsystem.components.etc.menu.BottlesTabItemState
 import com.team.bottles.core.designsystem.theme.BottlesTheme
 
 interface TabItem {
@@ -17,25 +16,24 @@ interface TabItem {
 
 @Composable
 fun <T> BottlesRowTab(
+    modifier: Modifier = Modifier,
     tabs: List<T>,
-    stateProvider: (T) -> OutlinedButtonState,
+    stateProvider: (T) -> BottlesTabItemState,
     onIntent: (T) -> Unit,
 ) where T : TabItem {
     Row(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
-            .padding(BottlesTheme.padding.medium),
+            .padding(horizontal = BottlesTheme.spacing.medium),
         horizontalArrangement = Arrangement.spacedBy(
-            space = BottlesTheme.spacing.extraSmall
+            space = BottlesTheme.spacing.doubleExtraSmall
         )
     ) {
         tabs.forEach { tab ->
-            BottlesOutLinedButton(
+            BottlesTabItem(
                 text = tab.tabName,
-                buttonType = OutlinedButtonType.SM,
-                onClick = { onIntent(tab) },
-                contentHorizontalPadding = BottlesTheme.spacing.small,
-                state = stateProvider(tab)
+                state = stateProvider(tab),
+                onClickTab = { onIntent(tab) }
             )
         }
     }

diff --git a/feat/ping-pong/src/main/kotlin/com/team/bottles/feat/pingpong/detail/PingPongDetailScreen.kt b/feat/ping-pong/src/main/kotlin/com/team/bottles/feat/pingpong/detail/PingPongDetailScreen.kt
@@ -1,6 +1,5 @@
 package com.team.bottles.feat.pingpong.detail
 
-import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Box
@@ -42,8 +41,8 @@ import com.team.bottles.feat.pingpong.detail.components.matchingContents
 import com.team.bottles.feat.pingpong.detail.components.pingPongContents
 import com.team.bottles.feat.pingpong.detail.mvi.PingPongCard
 import com.team.bottles.feat.pingpong.detail.mvi.PingPongDetailIntent
-import com.team.bottles.feat.pingpong.detail.mvi.PingPongTab
 import com.team.bottles.feat.pingpong.detail.mvi.PingPongDetailUiState
+import com.team.bottles.feat.pingpong.detail.mvi.PingPongTab
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -59,10 +58,6 @@ internal fun PingPongDetailScreen(
         enabled = { uiState.currentTab == PingPongTab.PING_PONG }
     )
 
-    BackHandler {
-        onIntent(PingPongDetailIntent.ClickBackButton)
-    }
-
     LaunchedEffect(uiState.isRefreshing) {
         if (uiState.isRefreshing) {
             pullRefreshState.startRefresh()
@@ -238,7 +233,7 @@ private fun PingPongScreenPreview() {
     BottlesTheme {
         PingPongDetailScreen(
             uiState = PingPongDetailUiState(
-                showDialog = true,
+                //showDialog = true,
                 currentTab = PingPongTab.INTRODUCTION,
                 pingPongMatchStatus = PingPongMatchStatus.NONE,
                 partnerProfile = UserProfile.sampleUserProfile(),

diff --git a/feat/ping-pong/src/main/kotlin/com/team/bottles/feat/pingpong/detail/components/Topbar.kt b/feat/ping-pong/src/main/kotlin/com/team/bottles/feat/pingpong/detail/components/Topbar.kt
@@ -2,15 +2,19 @@ package com.team.bottles.feat.pingpong.detail.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.material3.HorizontalDivider
 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.unit.dp
 import com.team.bottles.core.designsystem.R
 import com.team.bottles.core.designsystem.components.bars.BottlesTopBar
-import com.team.bottles.core.designsystem.components.buttons.OutlinedButtonState
+import com.team.bottles.core.designsystem.components.etc.menu.BottlesTabItemState
 import com.team.bottles.core.designsystem.modifier.noRippleClickable
 import com.team.bottles.core.designsystem.theme.BottlesTheme
 import com.team.bottles.core.domain.bottle.model.PingPongMatchStatus
@@ -64,18 +68,26 @@ internal fun PingPongTopBar(
             }
         )
 
+        Spacer(modifier = Modifier.height(height = BottlesTheme.spacing.medium))
+
         BottlesRowTab(
             tabs = PingPongTab.entries,
             stateProvider = { tab ->
                 when {
                     tab == PingPongTab.MATCHING &&
-                            (pingPongMatchStatus == PingPongMatchStatus.NONE || pingPongMatchStatus == PingPongMatchStatus.REQUIRE_SELECT) -> OutlinedButtonState.DISABLED
+                            (pingPongMatchStatus == PingPongMatchStatus.NONE || pingPongMatchStatus == PingPongMatchStatus.REQUIRE_SELECT) -> BottlesTabItemState.DISABLED
 
-                    currentTab == tab -> OutlinedButtonState.SELECTED
-                    else -> OutlinedButtonState.ENABLED
+                    currentTab == tab -> BottlesTabItemState.SELECTED
+                    else -> BottlesTabItemState.ENABLED
                 }
             },
             onIntent = onClickTab
         )
+
+        HorizontalDivider(
+            modifier = Modifier.fillMaxWidth(),
+            thickness = 1.dp,
+            color = BottlesTheme.color.border.secondary
+        )
     }
 }