Skip to content

Commit 97cd2cb

Browse files
wjdrjs00wjdrjs00
authored
Merge pull request #48 from YAPP-Github/ui/#45-common-component
[UI/#45] 디자인 컴포넌트 구현 및 ui 화면 퍼블리싱 작업 진행
2 parents c836a38 + f3f1f14 commit 97cd2cb

File tree

124 files changed

+2208
-1276
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

124 files changed

+2208
-1276
lines changed

‎app/src/main/java/com/threegap/bitnagil/navigation/home/HomeNavHost.kt‎

Lines changed: 81 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,28 @@ package com.threegap.bitnagil.navigation.home
33
import android.annotation.SuppressLint
44
import android.app.Activity
55
import androidx.activity.compose.BackHandler
6+
import androidx.compose.foundation.background
7+
import androidx.compose.foundation.layout.Box
68
import androidx.compose.foundation.layout.fillMaxSize
9+
import androidx.compose.foundation.layout.padding
710
import androidx.compose.material3.Scaffold
811
import androidx.compose.runtime.Composable
912
import androidx.compose.runtime.getValue
1013
import androidx.compose.runtime.mutableLongStateOf
14+
import androidx.compose.runtime.mutableStateOf
1115
import androidx.compose.runtime.remember
1216
import androidx.compose.runtime.setValue
17+
import androidx.compose.ui.Alignment
1318
import androidx.compose.ui.Modifier
1419
import androidx.compose.ui.platform.LocalContext
20+
import androidx.compose.ui.unit.dp
1521
import androidx.navigation.compose.NavHost
1622
import androidx.navigation.compose.composable
23+
import com.threegap.bitnagil.designsystem.BitnagilTheme
24+
import com.threegap.bitnagil.designsystem.R
25+
import com.threegap.bitnagil.designsystem.component.atom.BitnagilFloatingActionMenu
26+
import com.threegap.bitnagil.designsystem.component.atom.FloatingActionItem
27+
import com.threegap.bitnagil.designsystem.modifier.clickableWithoutRipple
1728
import com.threegap.bitnagil.presentation.home.HomeScreenContainer
1829
import com.threegap.bitnagil.presentation.mypage.MyPageScreenContainer
1930
import com.threegap.bitnagil.presentation.recommendroutine.RecommendRoutineScreenContainer
@@ -31,48 +42,83 @@ fun HomeNavHost(
3142
navigateToEmotion: () -> Unit,
3243
) {
3344
val navigator = rememberHomeNavigator()
45+
var showFloatingOverlay by remember { mutableStateOf(false) }
3446

3547
DoubleBackButtonPressedHandler()
3648

37-
Scaffold(
38-
modifier = Modifier.fillMaxSize(),
39-
bottomBar = {
40-
HomeBottomNavigationBar(navController = navigator.navController)
41-
},
42-
content = { _ ->
43-
NavHost(
44-
navController = navigator.navController,
45-
startDestination = navigator.startDestination,
46-
modifier = modifier,
47-
) {
48-
composable(HomeRoute.Home.route) {
49-
HomeScreenContainer(
50-
navigateToRegisterRoutine = {
51-
navigateToRegisterRoutine(null)
52-
},
53-
navigateToEditRoutine = navigateToEditRoutine,
54-
navigateToEmotion = navigateToEmotion,
55-
)
56-
}
49+
Box(modifier = Modifier.fillMaxSize()) {
50+
Scaffold(
51+
modifier = Modifier.fillMaxSize(),
52+
bottomBar = {
53+
HomeBottomNavigationBar(navController = navigator.navController)
54+
},
55+
content = { _ ->
56+
NavHost(
57+
navController = navigator.navController,
58+
startDestination = navigator.startDestination,
59+
modifier = modifier,
60+
) {
61+
composable(HomeRoute.Home.route) {
62+
HomeScreenContainer(
63+
navigateToRegisterRoutine = {
64+
navigateToRegisterRoutine(null)
65+
},
66+
navigateToEditRoutine = navigateToEditRoutine,
67+
navigateToEmotion = navigateToEmotion,
68+
)
69+
}
5770

58-
composable(HomeRoute.RecommendRoutine.route) {
59-
RecommendRoutineScreenContainer(
60-
navigateToEmotion = navigateToEmotion,
61-
navigateToRegisterRoutine = navigateToRegisterRoutine,
62-
)
63-
}
71+
composable(HomeRoute.RecommendRoutine.route) {
72+
RecommendRoutineScreenContainer(
73+
navigateToEmotion = navigateToEmotion,
74+
navigateToRegisterRoutine = navigateToRegisterRoutine,
75+
)
76+
}
6477

65-
composable(HomeRoute.MyPage.route) {
66-
MyPageScreenContainer(
67-
navigateToSetting = navigateToSetting,
68-
navigateToOnBoarding = navigateToOnBoarding,
69-
navigateToNotice = navigateToNotice,
70-
navigateToQnA = navigateToQnA,
71-
)
78+
composable(HomeRoute.MyPage.route) {
79+
MyPageScreenContainer(
80+
navigateToSetting = navigateToSetting,
81+
navigateToOnBoarding = navigateToOnBoarding,
82+
navigateToNotice = navigateToNotice,
83+
navigateToQnA = navigateToQnA,
84+
)
85+
}
7286
}
87+
},
88+
)
89+
90+
if (navigator.shouldShowFloatingAction()) {
91+
if (showFloatingOverlay) {
92+
Box(
93+
modifier = Modifier
94+
.fillMaxSize()
95+
.background(BitnagilTheme.colors.black.copy(alpha = 0.7f))
96+
.clickableWithoutRipple { showFloatingOverlay = false },
97+
)
7398
}
74-
},
75-
)
99+
100+
BitnagilFloatingActionMenu(
101+
actions = listOf(
102+
FloatingActionItem(
103+
icon = R.drawable.ic_report,
104+
text = "제보하기",
105+
onClick = {},
106+
),
107+
FloatingActionItem(
108+
icon = R.drawable.ic_add_routine,
109+
text = "루틴 등록",
110+
onClick = { navigateToRegisterRoutine(null) },
111+
),
112+
),
113+
isExpanded = showFloatingOverlay,
114+
onToggle = { expanded -> showFloatingOverlay = expanded },
115+
modifier = Modifier
116+
.align(Alignment.BottomEnd)
117+
.padding(16.dp)
118+
.padding(bottom = 80.dp),
119+
)
120+
}
121+
}
76122
}
77123

78124
@Composable

‎app/src/main/java/com/threegap/bitnagil/navigation/home/HomeNavigator.kt‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,24 @@ package com.threegap.bitnagil.navigation.home
33
import androidx.compose.runtime.Composable
44
import androidx.compose.runtime.remember
55
import androidx.navigation.NavHostController
6+
import androidx.navigation.compose.currentBackStackEntryAsState
67
import androidx.navigation.compose.rememberNavController
78

89
class HomeNavigator(
910
val navController: NavHostController,
1011
) {
1112
val startDestination = HomeRoute.Home.route
13+
14+
@Composable
15+
fun getCurrentRoute(): String? {
16+
return navController.currentBackStackEntryAsState().value?.destination?.route
17+
}
18+
19+
@Composable
20+
fun shouldShowFloatingAction(): Boolean {
21+
val currentRoute = getCurrentRoute()
22+
return currentRoute == HomeRoute.Home.route || currentRoute == HomeRoute.RecommendRoutine.route
23+
}
1224
}
1325

1426
@Composable

‎core/designsystem/src/main/java/com/threegap/bitnagil/designsystem/color/BitnagilColors.kt‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ data class BitnagilColors(
1515
val emotionLonely: Color = EmotionLonely,
1616
val emotionSad: Color = EmotionSad,
1717
val emotionAnxiety: Color = EmotionAnxiety,
18+
val progressBarGradientStartColor: Color = ProgressBarGradientStartColor,
19+
val progressBarGradientEndColor: Color = ProgressBarGradientEndColor,
20+
val homeGradientStartColor: Color = HomeGradientStartColor,
21+
val homeGradientEndColor: Color = HomeGradientEndColor,
1822
val coolGray99: Color = CoolGray99,
1923
val coolGray98: Color = CoolGray98,
2024
val coolGray97: Color = CoolGray97,

‎core/designsystem/src/main/java/com/threegap/bitnagil/designsystem/color/Color.kt‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ val EmotionLethargy = Color(0xFFFFC0A1)
1111
val EmotionLonely = Color(0xFFC8C1DE)
1212
val EmotionSad = Color(0xFFA9B9FF)
1313
val EmotionAnxiety = Color(0xFF96D8AD)
14+
val ProgressBarGradientStartColor = Color(0xFFA9CFFF)
15+
val ProgressBarGradientEndColor = Color(0xFFFFCDB3)
16+
val HomeGradientStartColor = Color(0xFFFFEADF)
17+
val HomeGradientEndColor = Color(0xFFF0F7FF)
1418

1519
val CoolGray99 = Color(0xFFF7F7F8)
1620
val CoolGray98 = Color(0xFFF4F4F5)
@@ -26,7 +30,7 @@ val CoolGray40 = Color(0xFF5A5C63)
2630
val CoolGray30 = Color(0xFF46474C)
2731
val CoolGray20 = Color(0xFF292A2D)
2832
val CoolGray10 = Color(0xFF171719)
29-
val CoolGray7 = Color(0xFF0F0F10)
33+
val CoolGray7 = Color(0xFF141415)
3034
val CoolGray5 = Color(0xFF0F0F10)
3135

3236
val Navy900 = Color(0xFF050B1B)

‎core/designsystem/src/main/java/com/threegap/bitnagil/designsystem/component/atom/BitnagilCheckBox.kt‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
package com.threegap.bitnagil.designsystem.component.atom
2+
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.size
7+
import androidx.compose.foundation.shape.RoundedCornerShape
8+
import androidx.compose.runtime.Composable
9+
import androidx.compose.runtime.getValue
10+
import androidx.compose.runtime.mutableStateOf
11+
import androidx.compose.runtime.remember
12+
import androidx.compose.runtime.setValue
13+
import androidx.compose.ui.Alignment
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.graphics.Color
16+
import androidx.compose.ui.graphics.ColorFilter
17+
import androidx.compose.ui.graphics.vector.ImageVector
18+
import androidx.compose.ui.res.vectorResource
19+
import androidx.compose.ui.tooling.preview.Preview
20+
import androidx.compose.ui.unit.dp
21+
import com.threegap.bitnagil.designsystem.BitnagilTheme
22+
import com.threegap.bitnagil.designsystem.R
23+
import com.threegap.bitnagil.designsystem.modifier.clickableWithoutRipple
24+
25+
@Composable
26+
fun BitnagilCheckBox(
27+
checked: Boolean,
28+
modifier: Modifier = Modifier,
29+
onCheckedChange: ((Boolean) -> Unit)? = null,
30+
colors: BitnagilCheckBoxColor = BitnagilCheckBoxColor.terms(),
31+
) {
32+
val iconColor = if (checked) colors.checkedColor else colors.uncheckedColor
33+
34+
Box(
35+
modifier = modifier
36+
.let {
37+
if (onCheckedChange != null) {
38+
it.clickableWithoutRipple { onCheckedChange(!checked) }
39+
} else {
40+
it
41+
}
42+
}
43+
.background(
44+
color = BitnagilTheme.colors.white,
45+
shape = RoundedCornerShape(6.dp),
46+
),
47+
contentAlignment = Alignment.Center,
48+
) {
49+
Image(
50+
imageVector = ImageVector.vectorResource(R.drawable.ic_check),
51+
contentDescription = null,
52+
colorFilter = ColorFilter.tint(iconColor),
53+
modifier = modifier.size(24.dp),
54+
)
55+
}
56+
}
57+
58+
data class BitnagilCheckBoxColor(
59+
val uncheckedColor: Color,
60+
val checkedColor: Color,
61+
) {
62+
companion object {
63+
@Composable
64+
fun terms(): BitnagilCheckBoxColor = BitnagilCheckBoxColor(
65+
uncheckedColor = BitnagilTheme.colors.navy50,
66+
checkedColor = BitnagilTheme.colors.navy500,
67+
)
68+
}
69+
}
70+
71+
@Preview
72+
@Composable
73+
private fun BitnagilCheckBoxPreview() {
74+
var checked by remember { mutableStateOf(false) }
75+
BitnagilCheckBox(
76+
checked = checked,
77+
onCheckedChange = { checked = !checked },
78+
)
79+
}

0 commit comments

Comments
 (0)