Skip to content

Commit 17d4791

Browse files
TaewoongRTaewoongR
authored
Merge pull request #90 from YAPP-Github/fix/home
[Fix/#89] 홈 화면 그룹 목록 UI 변경
2 parents f08cce5 + d271048 commit 17d4791

File tree

22 files changed

+756
-532
lines changed

22 files changed

+756
-532
lines changed

‎core/designsystem/src/main/java/com/yapp/breake/core/designsystem/theme/Color.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import androidx.compose.ui.graphics.Color
44

55
val White = Color(0xFFF2F2F2)
66

7+
val Gray950 = Color(0xFF0B0C0D)
78
val Gray900 = Color(0xFF1E2023)
89
val Gray850 = Color(0xFF292C31)
910
val Gray800 = Color(0xFF3A3D45)
@@ -20,7 +21,7 @@ val InsightBlue = Color(0xFF2684FF)
2021
val BrakeYellow = Color(0xFFF2FF5E)
2122
val ButtonYellow = Color(0xFFF3FF6E)
2223
val KakaoYellow = Color(0xFFFFE502)
23-
val Error = Color(0xFFE75B5D)
24+
val Error = Color(0xFFFF5762)
2425

2526
val Red = Color(0xFFFF4343)
2627
val Red2 = Color(0xFFFF5656)

‎core/designsystem/src/main/java/com/yapp/breake/core/designsystem/theme/Gradient.kt‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,11 @@ val AppItemGradient = Brush.linearGradient(
2929
),
3030
)
3131

32-
val BackgroundGradient = Brush.verticalGradient(
33-
colorStops = arrayOf(
34-
0f to Color(0x26C0DBFF),
35-
0.5817f to Color(0x0BC0DBFF),
36-
1f to Color(0x00C0DBFF),
32+
val BlockingTimerBackgroundGradient = Brush.verticalGradient(
33+
colors = listOf(
34+
Color(0xFF353A42),
35+
Color(0xFF292C31),
3736
),
37+
startY = 0f,
38+
endY = Float.POSITIVE_INFINITY,
3839
)

‎presentation/home/src/main/java/com/yapp/breake/presentation/home/HomeScreen.kt‎

Lines changed: 26 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ import android.content.pm.PackageManager
55
import android.os.Build
66
import androidx.activity.compose.rememberLauncherForActivityResult
77
import androidx.activity.result.contract.ActivityResultContracts
8-
import androidx.compose.animation.AnimatedContent
9-
import androidx.compose.animation.fadeIn
10-
import androidx.compose.animation.fadeOut
11-
import androidx.compose.animation.togetherWith
128
import androidx.compose.foundation.background
139
import androidx.compose.foundation.layout.Box
1410
import androidx.compose.foundation.layout.PaddingValues
@@ -33,10 +29,9 @@ import com.yapp.breake.presentation.home.component.StopUsingDialog
3329
import com.yapp.breake.presentation.home.contract.HomeEvent
3430
import com.yapp.breake.presentation.home.contract.HomeModalState
3531
import com.yapp.breake.presentation.home.contract.HomeUiState
36-
import com.yapp.breake.presentation.home.screen.BlockingScreen
3732
import com.yapp.breake.presentation.home.screen.ListScreen
3833
import com.yapp.breake.presentation.home.screen.NothingScreen
39-
import com.yapp.breake.presentation.home.screen.UsingScreen
34+
import com.yapp.breake.presentation.home.screen.TickingScreen
4035

4136
@Composable
4237
internal fun HomeRoute(
@@ -123,52 +118,34 @@ private fun HomeContent(
123118
onShowAddScreen: () -> Unit,
124119
onShowEditScreen: (Long) -> Unit,
125120
) {
126-
AnimatedContent(
127-
targetState = homeUiState,
128-
transitionSpec = {
129-
fadeIn() togetherWith fadeOut()
130-
},
131-
label = "HomeContent",
132-
) { state ->
133-
when (state) {
134-
HomeUiState.Loading -> {}
121+
when (val state = homeUiState) {
122+
HomeUiState.Loading -> {}
135123

136-
HomeUiState.Nothing -> {
137-
NothingScreen(
138-
onAddClick = onShowAddScreen,
139-
)
140-
}
141-
142-
is HomeUiState.GroupList -> {
143-
ListScreen(
144-
appGroups = state.appGroups,
145-
onEditClick = {
146-
onShowEditScreen(it.id)
147-
},
148-
onAddClick = onShowAddScreen,
149-
)
150-
}
124+
HomeUiState.Nothing -> {
125+
NothingScreen(
126+
onAddClick = onShowAddScreen,
127+
)
128+
}
151129

152-
is HomeUiState.Blocking -> {
153-
BlockingScreen(
154-
appGroup = state.appGroup,
155-
onEditClick = {
156-
onShowEditScreen(state.appGroup.id)
157-
},
158-
)
159-
}
130+
is HomeUiState.GroupList -> {
131+
ListScreen(
132+
appGroups = state.appGroups,
133+
onEditClick = {
134+
onShowEditScreen(it.id)
135+
},
136+
onAddClick = onShowAddScreen,
137+
)
138+
}
160139

161-
is HomeUiState.Using -> {
162-
UsingScreen(
163-
appGroup = state.appGroup,
164-
onEditClick = {
165-
onShowEditScreen(state.appGroup.id)
166-
},
167-
onStopClick = {
168-
viewModel.showStopUsingDialog(state.appGroup)
169-
},
170-
)
171-
}
140+
is HomeUiState.Ticking -> {
141+
TickingScreen(
142+
appGroups = state.appGroups,
143+
onAddClick = onShowAddScreen,
144+
onEditClick = {
145+
onShowEditScreen(it.id)
146+
},
147+
onStopClick = viewModel::showStopUsingDialog,
148+
)
172149
}
173150
}
174151
}

‎presentation/home/src/main/java/com/yapp/breake/presentation/home/HomeViewModel.kt‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import com.yapp.breake.presentation.home.contract.HomeEvent
1212
import com.yapp.breake.presentation.home.contract.HomeModalState
1313
import com.yapp.breake.presentation.home.contract.HomeUiState
1414
import dagger.hilt.android.lifecycle.HiltViewModel
15+
import kotlinx.collections.immutable.toPersistentList
1516
import kotlinx.coroutines.flow.MutableSharedFlow
1617
import kotlinx.coroutines.flow.MutableStateFlow
1718
import kotlinx.coroutines.flow.SharingStarted
@@ -52,16 +53,15 @@ internal class HomeViewModel @Inject constructor(
5253

5354
appGroups.forEach { appGroup ->
5455
when (appGroup.appGroupState) {
55-
AppGroupState.Using -> return HomeUiState.Using(appGroup)
56-
AppGroupState.Blocking, AppGroupState.SnoozeBlocking -> return HomeUiState.Blocking(
57-
appGroup,
56+
AppGroupState.Blocking, AppGroupState.SnoozeBlocking, AppGroupState.Using -> return HomeUiState.Ticking(
57+
appGroups.toPersistentList(),
5858
)
5959

6060
AppGroupState.NeedSetting -> {}
6161
}
6262
}
6363

64-
return HomeUiState.GroupList(appGroups)
64+
return HomeUiState.GroupList(appGroups.toPersistentList())
6565
}
6666

6767
fun showStopUsingDialog(appGroup: AppGroup) {

‎presentation/home/src/main/java/com/yapp/breake/presentation/home/component/AppGroupComponent.kt‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
package com.yapp.breake.presentation.home.component
22

33
import androidx.compose.foundation.Image
4-
import androidx.compose.foundation.background
54
import androidx.compose.foundation.clickable
65
import androidx.compose.foundation.layout.Arrangement
76
import androidx.compose.foundation.layout.Box
87
import androidx.compose.foundation.layout.Column
98
import androidx.compose.foundation.layout.ColumnScope
109
import androidx.compose.foundation.layout.Row
1110
import androidx.compose.foundation.layout.fillMaxWidth
12-
import androidx.compose.foundation.layout.padding
1311
import androidx.compose.foundation.layout.size
1412
import androidx.compose.foundation.shape.CircleShape
1513
import androidx.compose.foundation.shape.RoundedCornerShape
@@ -27,63 +25,64 @@ import androidx.compose.ui.res.painterResource
2725
import androidx.compose.ui.res.stringResource
2826
import androidx.compose.ui.unit.dp
2927
import com.yapp.breake.core.designsystem.component.HorizontalSpacer
30-
import com.yapp.breake.core.designsystem.theme.AppItemGradient
3128
import com.yapp.breake.core.designsystem.theme.BrakeTheme
3229
import com.yapp.breake.core.model.app.App
30+
import com.yapp.breake.core.model.app.AppGroupState
3331
import com.yapp.breake.core.util.toImageBitmap
3432
import com.yapp.breake.presentation.home.R
3533

3634
@Composable
3735
internal fun AppGroupBox(
3836
modifier: Modifier = Modifier,
37+
innerModifier: Modifier = Modifier,
3938
content: @Composable ColumnScope.() -> Unit,
4039
) {
4140
Box(
42-
modifier = modifier
41+
modifier = Modifier
42+
.fillMaxWidth()
4343
.clip(RoundedCornerShape(16.dp))
44-
.background(AppItemGradient),
44+
then(modifier),
4545
) {
4646
Column(
4747
content = content,
4848
modifier = Modifier
4949
.fillMaxWidth()
50-
.padding(16.dp),
50+
.then(innerModifier),
5151
)
5252
}
5353
}
5454

5555
@Composable
5656
internal fun AppGroupTitle(
5757
name: String,
58+
appGroupState: AppGroupState,
5859
clickable: Boolean,
5960
onEditClick: () -> Unit,
6061
) {
6162
Row(
6263
verticalAlignment = Alignment.CenterVertically,
6364
modifier = Modifier.fillMaxWidth(),
6465
) {
65-
Image(
66-
painter = painterResource(R.drawable.ic_app_group),
67-
contentDescription = stringResource(R.string.app_group_icon_content_description),
68-
)
69-
HorizontalSpacer(8.dp)
7066
Text(
7167
text = name,
7268
style = BrakeTheme.typography.body16M,
7369
color = MaterialTheme.colorScheme.onSurface,
7470
)
75-
HorizontalSpacer(1f)
71+
HorizontalSpacer(8.dp)
7672
Image(
7773
painter = painterResource(R.drawable.ic_edit),
7874
contentDescription = stringResource(R.string.edit_app_group_icon_content_description),
7975
modifier = Modifier
76+
.size(24.dp)
8077
.clip(CircleShape)
8178
.clickable(
8279
enabled = clickable,
8380
onClick = onEditClick,
8481
),
8582
alpha = if (clickable) 1f else 0.4f,
8683
)
84+
HorizontalSpacer(1f)
85+
GroupStateIcon.entries.find { it.groupState == appGroupState }?.icon?.invoke(Modifier)
8786
}
8887
}
8988

@@ -106,8 +105,7 @@ internal fun AppsList(
106105
horizontalArrangement = Arrangement.spacedBy(4.dp),
107106
verticalAlignment = Alignment.CenterVertically,
108107
modifier = Modifier
109-
.fillMaxWidth()
110-
.padding(horizontal = 12.dp),
108+
.fillMaxWidth(),
111109
) {
112110
apps.forEach { app ->
113111
val icon = app.icon?.toImageBitmap()

presentation/home/src/main/java/com/yapp/breake/presentation/home/component/AppGroupList.kt renamed to presentation/home/src/main/java/com/yapp/breake/presentation/home/component/AppGroupItem.kt

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,26 @@
11
package com.yapp.breake.presentation.home.component
22

3-
import androidx.compose.foundation.layout.Arrangement
43
import androidx.compose.foundation.layout.Column
54
import androidx.compose.foundation.layout.fillMaxWidth
6-
import androidx.compose.foundation.lazy.LazyColumn
7-
import androidx.compose.foundation.lazy.items
85
import androidx.compose.runtime.Composable
9-
import androidx.compose.ui.Alignment
106
import androidx.compose.ui.Modifier
117
import androidx.compose.ui.tooling.preview.Preview
128
import androidx.compose.ui.unit.dp
139
import com.yapp.breake.core.designsystem.component.VerticalSpacer
1410
import com.yapp.breake.core.designsystem.theme.BrakeTheme
1511
import com.yapp.breake.core.model.app.AppGroup
1612

17-
@Composable
18-
internal fun AppGroupList(
19-
appGroups: List<AppGroup>,
20-
onEditClick: (AppGroup) -> Unit,
21-
modifier: Modifier = Modifier,
22-
) {
23-
LazyColumn(
24-
verticalArrangement = Arrangement.spacedBy(12.dp),
25-
horizontalAlignment = Alignment.CenterHorizontally,
26-
) {
27-
items(appGroups) { appGroup ->
28-
AppGroupItem(
29-
appGroup = appGroup,
30-
onEditClick = {
31-
onEditClick(appGroup)
32-
},
33-
modifier = modifier.fillMaxWidth(),
34-
)
35-
}
36-
}
37-
}
38-
3913
@Composable
4014
internal fun AppGroupItem(
4115
modifier: Modifier = Modifier,
16+
innerModifier: Modifier = Modifier,
4217
appGroup: AppGroup,
4318
clickable: Boolean = true,
4419
onEditClick: () -> Unit,
4520
) {
4621
AppGroupBox(
4722
modifier = modifier,
23+
innerModifier = innerModifier,
4824
) {
4925
AppGroupItemContent(
5026
appGroup = appGroup,
@@ -67,6 +43,7 @@ internal fun AppGroupItemContent(
6743
) {
6844
AppGroupTitle(
6945
name = appGroup.name,
46+
appGroupState = appGroup.appGroupState,
7047
clickable = clickable,
7148
onEditClick = onEditClick,
7249
)

‎presentation/home/src/main/java/com/yapp/breake/presentation/home/component/AppGroupSubtitle.kt‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
package com.yapp.breake.presentation.home.component
2+
3+
import androidx.annotation.StringRes
4+
import androidx.compose.foundation.layout.Row
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.foundation.layout.padding
7+
import androidx.compose.material3.MaterialTheme
8+
import androidx.compose.material3.Text
9+
import androidx.compose.runtime.Composable
10+
import androidx.compose.ui.Alignment
11+
import androidx.compose.ui.Modifier
12+
import androidx.compose.ui.res.stringResource
13+
import androidx.compose.ui.text.SpanStyle
14+
import androidx.compose.ui.text.buildAnnotatedString
15+
import androidx.compose.ui.text.withStyle
16+
import androidx.compose.ui.unit.dp
17+
import com.yapp.breake.core.designsystem.component.HorizontalSpacer
18+
import com.yapp.breake.core.designsystem.theme.BrakeTheme
19+
import com.yapp.breake.core.designsystem.theme.BrakeYellow
20+
import com.yapp.breake.core.designsystem.theme.Gray700
21+
22+
@Composable
23+
internal fun AppGroupSubtitle(
24+
modifier: Modifier = Modifier,
25+
@StringRes titleResId: Int,
26+
currentIndex: Int,
27+
totalCount: Int,
28+
) {
29+
Row(
30+
verticalAlignment = Alignment.Bottom,
31+
modifier = Modifier.fillMaxWidth().then(modifier),
32+
) {
33+
Text(
34+
text = stringResource(titleResId),
35+
style = BrakeTheme.typography.subtitle18SB,
36+
color = MaterialTheme.colorScheme.onSurface,
37+
)
38+
39+
HorizontalSpacer(1f)
40+
val annotatedString = buildAnnotatedString {
41+
withStyle(
42+
style = SpanStyle(
43+
color = BrakeYellow,
44+
),
45+
) {
46+
append("$currentIndex")
47+
}
48+
append("/$totalCount")
49+
}
50+
Text(
51+
text = annotatedString,
52+
modifier = Modifier.padding(end = 12.dp),
53+
style = BrakeTheme.typography.body12B,
54+
color = Gray700,
55+
)
56+
}
57+
}

0 commit comments

Comments
 (0)