diff --git a/domain/src/main/java/com/whyranoid/domain/model/challenge/ChallengePreview.kt b/domain/src/main/java/com/whyranoid/domain/model/challenge/ChallengePreview.kt index 6b29ac00..0d68eed9 100644 --- a/domain/src/main/java/com/whyranoid/domain/model/challenge/ChallengePreview.kt +++ b/domain/src/main/java/com/whyranoid/domain/model/challenge/ChallengePreview.kt @@ -5,6 +5,7 @@ data class ChallengePreview( val title: String, val badgeImageUrl: String, val progress: Float?, + val type: ChallengeType ) { // TODO: Delete companion object { @@ -41,6 +42,7 @@ data class ChallengePreview( title = DUMMY_NAME_LIST.shuffled().first(), badgeImageUrl = "https://picsum.photos/250/250", progress = DUMMY_PROGRESS_LIST.shuffled().first(), + type = ChallengeType.values().toList().shuffled().first(), ) } } diff --git a/presentation/src/main/java/com/whyranoid/presentation/component/ChallengeGoalContent.kt b/presentation/src/main/java/com/whyranoid/presentation/component/ChallengeGoalContent.kt index 236d1914..9082b962 100644 --- a/presentation/src/main/java/com/whyranoid/presentation/component/ChallengeGoalContent.kt +++ b/presentation/src/main/java/com/whyranoid/presentation/component/ChallengeGoalContent.kt @@ -15,13 +15,13 @@ import androidx.compose.foundation.layout.width import androidx.compose.foundation.progressSemantics import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Divider -import androidx.compose.material.ProgressIndicatorDefaults import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.graphics.StrokeCap import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.platform.LocalContext @@ -37,6 +37,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.whyranoid.domain.model.challenge.Challenge import com.whyranoid.presentation.R +import com.whyranoid.presentation.theme.ChallengeColor.getColor @OptIn(ExperimentalTextApi::class) @Composable @@ -44,14 +45,16 @@ fun ChallengeGoalContent( challenge: Challenge ) { + val challengeColor = challenge.challengeType.getColor() + Column( modifier = Modifier .fillMaxWidth() .clip(shape = RoundedCornerShape(15.dp)) - .background(Color(0xFFF7F7F7)), + .background(challengeColor.backgroundColor), ) { - val progressBarColor = Color(0xFFFFB763) + val progressBarColor = challengeColor.progressBarColor val progress = requireNotNull(challenge.process) / 100f @@ -85,15 +88,14 @@ fun ChallengeGoalContent( val isLtr = layoutDirection == LayoutDirection.Ltr val barStart = (if (isLtr) 0f else 1f - progress) * width - val barEnd = (if (isLtr) progress else 1f - 0f) * width + val barEnd = (if (isLtr) progress else 1f) * width // draw Background drawLine( - progressBarColor - .copy(alpha = ProgressIndicatorDefaults.IndicatorBackgroundOpacity), + Color.White, Offset(0f, yOffset), Offset(1f * width, yOffset), - 8.dp.toPx(), + 4.dp.toPx(), cap = StrokeCap.Round, ) @@ -102,7 +104,7 @@ fun ChallengeGoalContent( progressBarColor, Offset(barStart, yOffset), Offset(barEnd, yOffset), - 8.dp.toPx(), + 4.dp.toPx(), cap = StrokeCap.Round, ) @@ -113,8 +115,9 @@ fun ChallengeGoalContent( dstSize = bitMapIconSize, dstOffset = IntOffset( (barEnd - bitMapIconSize.width / 2).toInt(), - (yOffset - bitMapIconSize.height / 2).toInt() - ) + - bitMapIconSize.height / 2, + ), + colorFilter = ColorFilter.tint(progressBarColor) ) val progressText = "${(progress * 100).toInt()}%" @@ -129,14 +132,12 @@ fun ChallengeGoalContent( drawText( textMeasurer = textMeasure, text = progressText, style = TextStyle( - fontSize = 15.sp, + fontSize = 14.sp, + color = challengeColor.progressBarColor ), topLeft = Offset( - barEnd - - progressTextMeasured.size.width / 2, - yOffset - - bitMapIconSize.height / 2 - - progressTextMeasured.size.height + width - progressTextMeasured.size.width, + yOffset + progressTextMeasured.size.height / 2 ), softWrap = false, @@ -158,7 +159,7 @@ fun ChallengeGoalContent( ) Divider( - color = Color(0xFFBABABA), + color = challengeColor.progressBarColor, modifier = Modifier .height(52.dp) .width(1.dp) diff --git a/presentation/src/main/java/com/whyranoid/presentation/component/ChallengeItem.kt b/presentation/src/main/java/com/whyranoid/presentation/component/ChallengeItem.kt index 9d82e52a..68f77f73 100644 --- a/presentation/src/main/java/com/whyranoid/presentation/component/ChallengeItem.kt +++ b/presentation/src/main/java/com/whyranoid/presentation/component/ChallengeItem.kt @@ -13,16 +13,16 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp +import com.whyranoid.presentation.theme.ChallengeColor import com.whyranoid.presentation.util.bouncingClickable -// Todo: set Color System @Composable fun ChallengeItem( modifier: Modifier = Modifier, + challengeColor: ChallengeColor.ChallengeColorInterface, text: String, onClicked: () -> Unit = {} ) { @@ -34,7 +34,7 @@ fun ChallengeItem( .fillMaxWidth() .height(90.dp) .clip(shape = RoundedCornerShape(20.dp)) - .background(color = Color(0xFFECECEC)), + .background(color = challengeColor.backgroundColor), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { @@ -49,7 +49,8 @@ fun ChallengeItem( textAlign = TextAlign.Start, text = text, overflow = TextOverflow.Ellipsis, - maxLines = 2) + maxLines = 2 + ) } } } \ No newline at end of file diff --git a/presentation/src/main/java/com/whyranoid/presentation/component/ChallengingItem.kt b/presentation/src/main/java/com/whyranoid/presentation/component/ChallengingItem.kt index 8a38ea34..a932e15d 100644 --- a/presentation/src/main/java/com/whyranoid/presentation/component/ChallengingItem.kt +++ b/presentation/src/main/java/com/whyranoid/presentation/component/ChallengingItem.kt @@ -1,35 +1,31 @@ package com.whyranoid.presentation.component import androidx.compose.foundation.background -import androidx.compose.foundation.border -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.LinearProgressIndicator +import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp -import com.whyranoid.presentation.reusable.TextWithImageSpaceBetween +import com.whyranoid.presentation.theme.ChallengeColor import com.whyranoid.presentation.util.bouncingClickable -import com.whyranoid.presentation.util.conditional // TODO: set Color System @Composable fun ChallengingItem( text: String, progress: Float, - imageUrl: String, + challengeColor: ChallengeColor.ChallengeColorInterface, onClicked: () -> Unit = {} ) { - Column( + Box( modifier = Modifier .bouncingClickable { onClicked() @@ -37,38 +33,49 @@ fun ChallengingItem( .fillMaxWidth() .height(105.dp) .clip(shape = RoundedCornerShape(20.dp)) - .background(color = Color(0xFFECECEC)) - .conditional(progress == 1f) { - border( - 3.dp, - Color(0xFFFB8947), - shape = RoundedCornerShape(20.dp) - ) - }, - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center + .background(color = challengeColor.backgroundColor) + , ) { - TextWithImageSpaceBetween( + Box( modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 26.dp, vertical = 20.dp), - text = text, - imageUrl = imageUrl, - imageSize = 50.dp, - paddingValues = PaddingValues(end = 10.dp) - ) + .fillMaxSize() + .padding(start = 26.dp), + contentAlignment = Alignment.CenterStart + ) { + Text(text) + } + - LinearProgressIndicator( + Box( modifier = Modifier .fillMaxWidth() - .height(6.dp) - .padding(horizontal = 26.dp) - .clip(RoundedCornerShape(15.dp)), - progress = progress, - color = Color(0xFFFFB763), - ) + .fillMaxHeight() + .height(7.dp), + contentAlignment = Alignment.BottomStart + ) { + + + Box( + modifier = Modifier + .fillMaxWidth() + .height(7.dp) + .background(color = challengeColor.progressBackgroundColor), + contentAlignment = Alignment.BottomCenter + ) { + + } + + Box( + modifier = Modifier + .fillMaxWidth(progress) + .height(7.dp) + .background(color = challengeColor.progressBarColor), + contentAlignment = Alignment.BottomCenter + ) { + + } + } - Spacer(modifier = Modifier.height(12.dp)) } } diff --git a/presentation/src/main/java/com/whyranoid/presentation/screens/challenge/ChallengeDetailScreen.kt b/presentation/src/main/java/com/whyranoid/presentation/screens/challenge/ChallengeDetailScreen.kt index 6a9d0f4a..e6fba06b 100644 --- a/presentation/src/main/java/com/whyranoid/presentation/screens/challenge/ChallengeDetailScreen.kt +++ b/presentation/src/main/java/com/whyranoid/presentation/screens/challenge/ChallengeDetailScreen.kt @@ -1,7 +1,9 @@ package com.whyranoid.presentation.screens.challenge import androidx.compose.foundation.Image +import androidx.compose.foundation.background import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize @@ -13,6 +15,7 @@ import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.ModalBottomSheetValue @@ -26,6 +29,7 @@ import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight @@ -128,13 +132,31 @@ fun ChallengeDetailContent( Spacer(modifier = Modifier.height(10.dp)) - Text( - text = challenge.contents, - fontSize = 15.sp, - fontWeight = FontWeight(500), - ) + Box( + modifier = Modifier + .fillMaxWidth() + .clip(RoundedCornerShape(15.dp)) + .background( + Color(0xFFF7F7F7), + ), + contentAlignment = Alignment.Center + ) { + Text( + modifier = Modifier.padding( + horizontal = 18.dp, + vertical = 12.dp + ), + color = Color(0xFF989898), + text = challenge.contents, + fontSize = 15.sp, + fontWeight = FontWeight(500) + , + ) + } - Spacer(modifier = Modifier.height(40.dp)) + + + Spacer(modifier = Modifier.height(24.dp)) Text( text = "도전 내용", diff --git a/presentation/src/main/java/com/whyranoid/presentation/screens/challenge/ChallengeMainScreen.kt b/presentation/src/main/java/com/whyranoid/presentation/screens/challenge/ChallengeMainScreen.kt index 94b25160..944db524 100644 --- a/presentation/src/main/java/com/whyranoid/presentation/screens/challenge/ChallengeMainScreen.kt +++ b/presentation/src/main/java/com/whyranoid/presentation/screens/challenge/ChallengeMainScreen.kt @@ -35,6 +35,7 @@ import com.whyranoid.domain.model.challenge.ChallengeType import com.whyranoid.presentation.component.ChallengeItem import com.whyranoid.presentation.component.ChallengingItem import com.whyranoid.presentation.reusable.WalkieCircularProgressIndicator +import com.whyranoid.presentation.theme.ChallengeColor.getColor import com.whyranoid.presentation.theme.WalkieTypography import com.whyranoid.presentation.util.chunkedList import com.whyranoid.presentation.viewmodel.ChallengeMainState @@ -105,6 +106,7 @@ fun ChallengeMainContent( item { ChallengeItem( Modifier.fillParentMaxWidth(0.9f), + it.type.getColor(), text = it.title ) { onChallengeItemClicked(it, false) @@ -139,7 +141,7 @@ fun ChallengeMainContent( ChallengingItem( text = it.title, progress = it.progress!!, - imageUrl = it.badgeImageUrl, + challengeColor = it.type.getColor(), ) { onChallengeItemClicked(it, true) } @@ -176,7 +178,7 @@ fun ChallengeMainContent( item { Text( - text = "인기", + text = "인기 챌린지", fontSize = 16.sp, color = Color.Black, fontWeight = FontWeight(700) @@ -197,6 +199,7 @@ fun ChallengeMainContent( list.forEach { ChallengeItem( Modifier.fillParentMaxWidth(0.9f), + it.type.getColor(), text = it.title ) { onChallengeItemClicked(it, false) @@ -219,7 +222,7 @@ fun ChallengeMainContent( item { Text( - text = "유형", + text = "유형별 챌린지", fontSize = 16.sp, color = Color.Black, fontWeight = FontWeight(700) @@ -233,7 +236,7 @@ fun ChallengeMainContent( Row( modifier = Modifier .fillMaxWidth() - .padding(horizontal = 15.dp), + .padding(horizontal = 40.dp), horizontalArrangement = Arrangement.SpaceBetween ) { ChallengeType.values().forEachIndexed { page, challengeType -> @@ -265,6 +268,7 @@ fun ChallengeMainContent( typedChallengePreviewsState[pagerState.currentPage].forEach { challengePreview -> ChallengeItem( + challengeColor = challengePreview.type.getColor(), text = challengePreview.title ) { onChallengeItemClicked(challengePreview, false) diff --git a/presentation/src/main/java/com/whyranoid/presentation/theme/Color.kt b/presentation/src/main/java/com/whyranoid/presentation/theme/Color.kt index 1cdc9a22..096db252 100644 --- a/presentation/src/main/java/com/whyranoid/presentation/theme/Color.kt +++ b/presentation/src/main/java/com/whyranoid/presentation/theme/Color.kt @@ -1,6 +1,7 @@ package com.whyranoid.presentation.theme import androidx.compose.ui.graphics.Color +import com.whyranoid.domain.model.challenge.ChallengeType // TODO: secondary / Tertiary object WalkieColor { @@ -16,3 +17,39 @@ object SystemColor { val Positive = Color(0xFF414EF5) val Negative = Color(0xFF999999) } + + +object ChallengeColor { + + interface ChallengeColorInterface { + val backgroundColor: Color + val progressBarColor: Color + val progressBackgroundColor: Color + } + + val Life = object : ChallengeColorInterface { + override val backgroundColor = Color(0xFFEBF5FF) + override val progressBarColor = Color(0xFF50ABFF) + override val progressBackgroundColor = Color(0xFFB8DDFF) + } + + val Calorie = object : ChallengeColorInterface { + override val backgroundColor = Color(0xFFE5FBF8) + override val progressBarColor = Color(0xFF49E0CE) + override val progressBackgroundColor = Color(0xFF9FEFE5) + } + + val Distance = object : ChallengeColorInterface { + override val backgroundColor = Color(0xFFE6FCDE) + override val progressBarColor = Color(0xFF7CF053) + override val progressBackgroundColor = Color(0xFFC2F8AF) + } + + fun ChallengeType.getColor() : ChallengeColorInterface { + return when(this) { + ChallengeType.LIFE -> Life + ChallengeType.CALORIE -> Calorie + ChallengeType.DISTANCE -> Distance + } + } +}