From 916b858c3806096b1a417d2a300957facaa9d027 Mon Sep 17 00:00:00 2001 From: GunHyung Ham <54674781+ham2174@users.noreply.github.com> Date: Tue, 15 Oct 2024 22:15:16 +0900 Subject: [PATCH] =?UTF-8?q?[Fix]=20=EB=AC=B8=EB=8B=B5=20=EC=83=81=EC=84=B8?= =?UTF-8?q?=20=ED=99=94=EB=A9=B4=20=ED=83=AD=EB=B0=94=20UI=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20(#118)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [feat] : BottlesTabItem 컴포넌트 추가 * [fix] : PingPongDetail 화면 탭바 UI 변경 --- .../components/etc/menu/TabItem.kt | 104 ++++++++++++++++++ .../kotlin/com/team/bottles/core/ui/RowTab.kt | 22 ++-- .../pingpong/detail/PingPongDetailScreen.kt | 9 +- .../feat/pingpong/detail/components/Topbar.kt | 20 +++- 4 files changed, 132 insertions(+), 23 deletions(-) create mode 100644 core/design-system/src/main/kotlin/com/team/bottles/core/designsystem/components/etc/menu/TabItem.kt diff --git a/core/design-system/src/main/kotlin/com/team/bottles/core/designsystem/components/etc/menu/TabItem.kt b/core/design-system/src/main/kotlin/com/team/bottles/core/designsystem/components/etc/menu/TabItem.kt new file mode 100644 index 00000000..b95f0822 --- /dev/null +++ b/core/design-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 = {} + ) + } + } +} \ No newline at end of file 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 index 18f42d62..283b90e2 100644 --- 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 BottlesRowTab( + modifier: Modifier = Modifier, tabs: List, - 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 index c0910deb..870d89e5 100644 --- 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 index cd3d1cba..b47fccc7 100644 --- 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 + ) } } \ No newline at end of file