Merge pull request #22 from SOPT-all/feat/component-progressbar

[feat] Progress Bar 컴포넌트 구현

app/src/main/java/org/android/bbangzip/presentation/component/card/SubjectCard.kt

@@ -11,14 +11,12 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
@@ -28,6 +26,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import org.android.bbangzip.R
 import org.android.bbangzip.presentation.component.chip.BbangZipChip
+import org.android.bbangzip.presentation.component.pushicon.BbangZipPushIconWithText
 import org.android.bbangzip.presentation.model.card.SubjectCardModel
 import org.android.bbangzip.presentation.util.modifier.applyFilterOnClick
 import org.android.bbangzip.presentation.util.modifier.applyShadows
@@ -121,15 +120,15 @@ fun SubjectInfo(
         Spacer(modifier = Modifier.height(44.dp))
 
         Column {
-            BbangZipPushIcon(
+            BbangZipPushIconWithText(
                 backgroundColor = BbangZipTheme.colors.statusDestructive_FF8345,
                 count = data.pendingCount,
                 text = stringResource(R.string.card_subject_pending_icon_description),
             )
 
             Spacer(modifier = Modifier.height(4.dp))
 
-            BbangZipPushIcon(
+            BbangZipPushIconWithText(
                 backgroundColor = BbangZipTheme.colors.statusPositive_3D3730,
                 count = data.inProgressCount,
                 text = stringResource(R.string.card_subject_studying_icon_description),
@@ -138,41 +137,6 @@ fun SubjectInfo(
     }
 }
 
-@Composable
-fun BbangZipPushIcon(
-    backgroundColor: Color,
-    count: Int,
-    text: String,
-    modifier: Modifier = Modifier,
-) {
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-        modifier = modifier,
-    ) {
-        Box(
-            contentAlignment = Alignment.Center,
-            modifier =
-                Modifier
-                    .background(color = backgroundColor, shape = CircleShape)
-                    .padding(horizontal = 6.dp, vertical = 3.dp),
-        ) {
-            Text(
-                text = count.toString(),
-                style = BbangZipTheme.typography.caption2Bold,
-                color = BbangZipTheme.colors.staticWhite_FFFFFF,
-            )
-        }
-
-        Spacer(modifier = Modifier.width(4.dp))
-
-        Text(
-            text = text,
-            style = BbangZipTheme.typography.caption1Bold,
-            color = BbangZipTheme.colors.labelAssistive_282119_28,
-        )
-    }
-}
-
 @Preview(showBackground = true)
 @Composable
 fun SubjectCardPreview() {

app/src/main/java/org/android/bbangzip/presentation/component/progressbar/BbangZipBasicProgressBar.kt

@@ -0,0 +1,60 @@
+package org.android.bbangzip.presentation.component.progressbar
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.android.bbangzip.ui.theme.BbangZipTheme
+
+@Composable
+fun BbangZipBasicProgressBar(
+    progress: Float,
+    modifier: Modifier = Modifier,
+    backgroundColor: Color = BbangZipTheme.colors.fillStrong_68645E_16,
+    progressColor: Color = BbangZipTheme.colors.labelNormal_282119,
+    clipShape: Shape = RoundedCornerShape(4.dp),
+) {
+    Box(
+        modifier =
+            modifier
+                .clip(clipShape)
+                .background(backgroundColor)
+                .height(8.dp)
+                .fillMaxWidth(),
+    ) {
+        Box(
+            modifier =
+                Modifier
+                    .clip(clipShape)
+                    .background(progressColor)
+                    .fillMaxHeight()
+                    .fillMaxWidth(progress),
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun BbangZipProgressBarPreview() {
+    Column(
+        modifier =
+            Modifier
+                .background(color = Color.Gray)
+                .fillMaxSize(),
+    ) {
+        BbangZipBasicProgressBar(
+            progress = 0.5f,
+        )
+    }
+}

app/src/main/java/org/android/bbangzip/presentation/component/progressbar/BbangZipLevelProgressBar.kt

@@ -0,0 +1,116 @@
+package org.android.bbangzip.presentation.component.progressbar
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+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.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.android.bbangzip.R
+import org.android.bbangzip.presentation.component.chip.BbangZipChip
+import org.android.bbangzip.presentation.type.BbangZipLevelType
+import org.android.bbangzip.ui.theme.BBANGZIPTheme
+import org.android.bbangzip.ui.theme.BbangZipTheme
+
+@Composable
+fun BbangZipLevelProgressBar(
+    level: Int,
+    currentPoint: Int,
+    modifier: Modifier = Modifier,
+) {
+    val levelType = BbangZipLevelType.entries[level - 1]
+
+    Column(
+        modifier = modifier,
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Row {
+                BbangZipChip(
+                    backgroundColor = BbangZipTheme.colors.statusPositive_3D3730,
+                    text = stringResource(R.string.progressbar_chip_level, level.toString()),
+                )
+
+                Spacer(modifier = Modifier.padding(8.dp))
+
+                Text(
+                    text = levelType.bbangZipName,
+                    style = BbangZipTheme.typography.body1Bold,
+                    color = BbangZipTheme.colors.labelNormal_282119,
+                )
+            }
+
+            BbangZipPoint(
+                currentPoint = currentPoint.toString(),
+                totalPoint = levelType.bbangZipLevelPoint.toString(),
+            )
+        }
+
+        Spacer(Modifier.height(4.dp))
+
+        BbangZipBasicProgressBar(
+            progress = currentPoint.toFloat() / levelType.bbangZipLevelPoint.toFloat(),
+        )
+    }
+}
+
+@Composable
+private fun BbangZipPoint(
+    modifier: Modifier = Modifier,
+    currentPoint: String,
+    totalPoint: String,
+) {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Icon(
+            imageVector = ImageVector.vectorResource(R.drawable.ic_trophy_default_24),
+            contentDescription = stringResource(R.string.bbangzip_trophy_description),
+            tint = BbangZipTheme.colors.labelAlternative_282119_61,
+        )
+
+        Text(
+            text = stringResource(R.string.bbangzip_level_point, currentPoint, totalPoint),
+            modifier = Modifier.padding(start = 1.dp),
+            style = BbangZipTheme.typography.label2Medium,
+            color = BbangZipTheme.colors.labelAlternative_282119_61,
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun BbangZipLevelProgressBarPreview() {
+    BBANGZIPTheme {
+        Column(
+            modifier =
+                Modifier
+                    .background(Color.Yellow)
+                    .fillMaxSize(),
+        ) {
+            BbangZipLevelProgressBar(
+                level = 1,
+                currentPoint = 50,
+            )
+        }
+    }
+}

app/src/main/java/org/android/bbangzip/presentation/component/progressbar/OnboardingProgressBar.kt

@@ -0,0 +1,74 @@
+package org.android.bbangzip.presentation.component.progressbar
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.android.bbangzip.presentation.component.pushicon.BbangZipPushIcon
+import org.android.bbangzip.presentation.model.BbangZipPushIconState
+import org.android.bbangzip.presentation.type.OnboardingType
+import org.android.bbangzip.ui.theme.BbangZipTheme
+
+@Composable
+fun OnboardingProgressBar(
+    onboardingType: OnboardingType,
+    modifier: Modifier = Modifier,
+) {
+    val currentPage = onboardingType.ordinal + 1
+    val progress =
+        when (onboardingType) {
+            OnboardingType.FIRST -> 0.04f
+            OnboardingType.SECOND -> 0.5f
+            OnboardingType.THIRD -> 1f
+        }
+
+    Column(modifier = modifier) {
+        Row(
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            OnboardingType.entries.forEachIndexed { index, _ ->
+                val state =
+                    if (index < currentPage) {
+                        BbangZipPushIconState.Positive
+                    } else {
+                        BbangZipPushIconState.Disable
+                    }
+
+                BbangZipPushIcon(
+                    pushIconText = (index + 1).toString(),
+                    bbangZipPushIconState = state,
+                )
+            }
+        }
+    }
+
+    Spacer(modifier = Modifier.height(8.dp))
+
+    BbangZipBasicProgressBar(
+        progress = progress,
+        backgroundColor = BbangZipTheme.colors.fillStrong_68645E_16,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun OnboardingProgressBarPreview() {
+    val testPages = listOf(0, 1, 2)
+
+    Column {
+        testPages.forEach { currentPage ->
+            OnboardingProgressBar(
+                onboardingType = OnboardingType.entries[currentPage],
+            )
+
+            Spacer(modifier = Modifier.height(8.dp))
+        }
+    }
+}

app/src/main/java/org/android/bbangzip/presentation/component/pushicon/BbangZipPushIcon.kt

@@ -0,0 +1,56 @@
+package org.android.bbangzip.presentation.component.pushicon
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.android.bbangzip.presentation.model.BbangZipPushIconState
+import org.android.bbangzip.presentation.model.getBackgroundColor
+import org.android.bbangzip.ui.theme.BBANGZIPTheme
+import org.android.bbangzip.ui.theme.BbangZipTheme
+
+@Composable
+fun BbangZipPushIcon(
+    modifier: Modifier = Modifier,
+    pushIconText: String,
+    bbangZipPushIconState: BbangZipPushIconState = BbangZipPushIconState.Disable,
+) {
+    Box(
+        contentAlignment = Alignment.Center,
+        modifier =
+            modifier
+                .background(color = bbangZipPushIconState.getBackgroundColor(), shape = CircleShape)
+                .padding(horizontal = 6.dp, vertical = 3.dp),
+    ) {
+        Text(
+            text = pushIconText,
+            style = BbangZipTheme.typography.caption2Bold,
+            color = BbangZipTheme.colors.staticWhite_FFFFFF,
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BbangZipPushIconPreview() {
+    BBANGZIPTheme {
+        Row {
+            BbangZipPushIcon(
+                pushIconText = "1",
+                bbangZipPushIconState = BbangZipPushIconState.Positive,
+            )
+
+            BbangZipPushIcon(
+                pushIconText = "2",
+                bbangZipPushIconState = BbangZipPushIconState.Disable,
+            )
+        }
+    }
+}