✨ 변경된 스팩에 따라 도전중인 챌린지 상세 페이지 변경

Team-Walkie · Aug 25, 2023 · 8d8f4d4 · 8d8f4d4
1 parent 4d79cc7
commit 8d8f4d4
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 26 deletions.
diff --git 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,21 +37,24 @@ 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
 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/...ation/src/main/java/com/whyranoid/presentation/screens/challenge/ChallengeDetailScreen.kt b/...ation/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/...ntation/src/main/java/com/whyranoid/presentation/screens/challenge/ChallengeMainScreen.kt b/...ntation/src/main/java/com/whyranoid/presentation/screens/challenge/ChallengeMainScreen.kt
@@ -178,7 +178,7 @@ fun ChallengeMainContent(
 
             item {
                 Text(
-                    text = "인기",
+                    text = "인기 챌린지",
                     fontSize = 16.sp,
                     color = Color.Black,
                     fontWeight = FontWeight(700)
@@ -222,7 +222,7 @@ fun ChallengeMainContent(
 
             item {
                 Text(
-                    text = "유형",
+                    text = "유형별 챌린지",
                     fontSize = 16.sp,
                     color = Color.Black,
                     fontWeight = FontWeight(700)
@@ -236,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 ->