[feat] #51 LockedBadgeImage 구현

SOPT-all · Jan 21, 2025 · e101d18 · e101d18
1 parent feff3db
commit e101d18
Show file tree

Hide file tree

Showing 12 changed files with 252 additions and 64 deletions.
diff --git a/app/src/main/java/org/android/bbangzip/presentation/component/balloon/BalloonContainer.kt b/app/src/main/java/org/android/bbangzip/presentation/component/balloon/BalloonContainer.kt
@@ -25,7 +25,6 @@ fun BalloonContainer(
     Box(
         modifier =
             modifier
-                .applyShadows(BbangZipShadowType.STRONG, shape = RoundedCornerShape(size = 20.dp))
                 .fillMaxWidth()
                 .background(
                     color = BbangZipTheme.colors.staticWhite_FFFFFF,

diff --git a/app/src/main/java/org/android/bbangzip/presentation/component/balloon/TopTailBalloon.kt b/app/src/main/java/org/android/bbangzip/presentation/component/balloon/TopTailBalloon.kt
@@ -7,6 +7,7 @@ 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.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -17,6 +18,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import org.android.bbangzip.R
+import org.android.bbangzip.presentation.type.BbangZipShadowType
+import org.android.bbangzip.presentation.util.modifier.applyShadows
 import org.android.bbangzip.ui.theme.BbangZipTheme
 import org.android.bbangzip.ui.theme.defaultBbangZipColors
 
@@ -30,9 +33,10 @@ fun TopTailBalloon(
 ) {
     Column(
         modifier =
-            modifier
-                .fillMaxWidth()
-                .padding(horizontal = horizontalPadding),
+        modifier
+            .fillMaxWidth()
+            .padding(horizontal = horizontalPadding)
+            .applyShadows(BbangZipShadowType.STRONG, shape = RoundedCornerShape(size = 20.dp)),
     ) {
         Icon(
             imageVector = ImageVector.vectorResource(R.drawable.ic_balloon_tail_up_8),

diff --git a/app/src/main/java/org/android/bbangzip/presentation/model/BadgeDetail.kt b/app/src/main/java/org/android/bbangzip/presentation/model/BadgeDetail.kt
@@ -5,11 +5,11 @@ import kotlinx.parcelize.Parcelize
 
 @Parcelize
 data class BadgeDetail(
-    val name: String = "",
-    val categoryName: String = "",
-    val imageUrl: String = "",
-    val hashTags: List<String> = listOf(),
-    val achievementCondition: String = "",
-    val reward: Int = 0,
-    val isLocked: Boolean = false,
+    val name: String = "안녕",
+    val categoryName: String = "안녕",
+    val imageUrl: String = "https://www.chosun.com/resizer/v2/HRGER65PGPIW36FJOBRNAP2PJM.jpg?auth=9da0c167de2cfb03a5d344ce4098faa669a22d7a2b90cb6a21fdc518b0af3558&width=530&height=757&smart=true",
+    val hashTags: List<String> = listOf("안녕","안녕"),
+    val achievementCondition: String = "안녕",
+    val reward: Int = 50,
+    val isLocked: Boolean = true,
 ) : Parcelable
diff --git a/...n/java/org/android/bbangzip/presentation/ui/my/mybadgecategory/MyBadgeCategoryContract.kt b/...n/java/org/android/bbangzip/presentation/ui/my/mybadgecategory/MyBadgeCategoryContract.kt
@@ -10,8 +10,46 @@ import org.android.bbangzip.presentation.util.base.BaseContract
 class MyBadgeCategoryContract {
     @Parcelize
     data class MyBadgeCategoryState(
-        val badgeCategoryList1: List<BadgeCategory> = listOf(),
-        val badgeCategoryList2: List<BadgeCategory> = listOf(),
+        val badgeCategoryList1: List<BadgeCategory> = listOf(
+            BadgeCategory(
+                name = "Badge 1",
+                categoryName = "Category 1",
+                isLocked = true,
+                imageUrl = "https://www.chosun.com/resizer/v2/HRGER65PGPIW36FJOBRNAP2PJM.jpg?auth=9da0c167de2cfb03a5d344ce4098faa669a22d7a2b90cb6a21fdc518b0af3558&width=530&height=757&smart=true"
+            ),
+            BadgeCategory(
+                name = "Badge 2",
+                categoryName = "Category 1",
+                isLocked = false,
+                imageUrl = "https://www.chosun.com/resizer/v2/HRGER65PGPIW36FJOBRNAP2PJM.jpg?auth=9da0c167de2cfb03a5d344ce4098faa669a22d7a2b90cb6a21fdc518b0af3558&width=530&height=757&smart=true"
+            ),
+            BadgeCategory(
+                name = "Badge 3",
+                categoryName = "Category 1",
+                isLocked = true,
+                imageUrl = "https://www.chosun.com/resizer/v2/HRGER65PGPIW36FJOBRNAP2PJM.jpg?auth=9da0c167de2cfb03a5d344ce4098faa669a22d7a2b90cb6a21fdc518b0af3558&width=530&height=757&smart=true"
+            )
+        ),
+        val badgeCategoryList2: List<BadgeCategory> = listOf(
+            BadgeCategory(
+                name = "Badge 4",
+                categoryName = "Category 2",
+                isLocked = true,
+                imageUrl = "https://www.chosun.com/resizer/v2/HRGER65PGPIW36FJOBRNAP2PJM.jpg?auth=9da0c167de2cfb03a5d344ce4098faa669a22d7a2b90cb6a21fdc518b0af3558&width=530&height=757&smart=true"
+            ),
+            BadgeCategory(
+                name = "Badge 5",
+                categoryName = "Category 2",
+                isLocked = false,
+                imageUrl = "https://www.chosun.com/resizer/v2/HRGER65PGPIW36FJOBRNAP2PJM.jpg?auth=9da0c167de2cfb03a5d344ce4098faa669a22d7a2b90cb6a21fdc518b0af3558&width=530&height=757&smart=true"
+            ),
+            BadgeCategory(
+                name = "Badge 6",
+                categoryName = "Category 2",
+                isLocked = true,
+                imageUrl = "https://www.chosun.com/resizer/v2/HRGER65PGPIW36FJOBRNAP2PJM.jpg?auth=9da0c167de2cfb03a5d344ce4098faa669a22d7a2b90cb6a21fdc518b0af3558&width=530&height=757&smart=true"
+            )
+        ),
         val badgeDetailBottomSheetState: Boolean = false,
         val badgeDetail: BadgeDetail = BadgeDetail()
     ) : BaseContract.State, Parcelable {

diff --git a/...main/java/org/android/bbangzip/presentation/ui/my/mybadgecategory/MyBadgeCategoryRoute.kt b/...main/java/org/android/bbangzip/presentation/ui/my/mybadgecategory/MyBadgeCategoryRoute.kt
@@ -1,12 +1,16 @@
 package org.android.bbangzip.presentation.ui.my.mybadgecategory
 
+import android.app.Activity
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalView
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import kotlinx.coroutines.flow.collectLatest
+import org.android.bbangzip.ui.theme.BbangZipTheme
 
 @Composable
 fun MyBadgeCategoryRoute(
@@ -15,6 +19,10 @@ fun MyBadgeCategoryRoute(
 ) {
     val badgeCategoryState by viewModel.uiState.collectAsStateWithLifecycle()
     val success by viewModel.success.collectAsStateWithLifecycle(initialValue = false)
+    val view = LocalView.current
+    val activity = view.context as Activity
+
+    activity.window.statusBarColor = BbangZipTheme.colors.backgroundAccent_FFDAA0.toArgb()
 
     LaunchedEffect(viewModel.uiSideEffect) {
         viewModel.uiSideEffect.collectLatest { effect ->

diff --git a/...ain/java/org/android/bbangzip/presentation/ui/my/mybadgecategory/MyBadgeCategoryScreen.kt b/...ain/java/org/android/bbangzip/presentation/ui/my/mybadgecategory/MyBadgeCategoryScreen.kt
@@ -40,6 +40,7 @@ import org.android.bbangzip.presentation.component.topbar.BbangZipBaseTopBar
 import org.android.bbangzip.presentation.model.BadgeCategory
 import org.android.bbangzip.presentation.model.BadgeDetail
 import org.android.bbangzip.presentation.ui.my.mybadgecategory.component.BbangZipBadgeDetailBottomSheet
+import org.android.bbangzip.presentation.ui.my.mybadgecategory.component.LockedBadgeImage
 import org.android.bbangzip.ui.theme.BbangZipTheme
 
 @OptIn(ExperimentalFoundationApi::class)
@@ -66,7 +67,7 @@ fun MyBadgeCategoryScreen(
     ) {
         stickyHeader {
             BbangZipBaseTopBar(
-                title = "얻은 뱃지",
+                title = stringResource(R.string.badge_category_top_bar_title),
                 leadingIcon = R.drawable.ic_chevronleft_thick_small_24,
                 onLeadingIconClick = onBackIconClicked,
                 backGroundColor = BbangZipTheme.colors.backgroundAccent_FFDAA0,
@@ -173,19 +174,8 @@ fun BadgeCategoryGridList(
                     contentAlignment = Alignment.Center
                 ) {
                     if (!badgeCategoryList[index].isLocked) {
-                        AsyncImage(
-                            model = badgeCategoryList[index].imageUrl,
-                            contentDescription = null,
-                            modifier = Modifier
-                                .fillMaxSize()
-                                .clip(RoundedCornerShape(24.dp))
-                                .blur(24.dp),
-                        )
-
-                        Icon(
-                            imageVector = ImageVector.vectorResource(id = R.drawable.ic_lock_default_28),
-                            contentDescription = null,
-                            tint = BbangZipTheme.colors.staticWhite_FFFFFF // 색상 설정
+                        LockedBadgeImage(
+                            imgUrl = badgeCategoryList[index].imageUrl
                         )
                     } else {
                         AsyncImage(

diff --git a/...g/android/bbangzip/presentation/ui/my/mybadgecategory/component/BadgeDetailBottomSheet.kt b/...g/android/bbangzip/presentation/ui/my/mybadgecategory/component/BadgeDetailBottomSheet.kt
@@ -1,29 +1,38 @@
 package org.android.bbangzip.presentation.ui.my.mybadgecategory.component
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 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.RoundedCornerShape
-import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
+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.draw.blur
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
 import org.android.bbangzip.R
 import org.android.bbangzip.presentation.component.balloon.TopTailBalloon
 import org.android.bbangzip.presentation.component.bottomsheet.BbangZipBasicModalBottomSheet
+import org.android.bbangzip.presentation.component.button.BbangZipButton
 import org.android.bbangzip.presentation.component.chip.BbangZipChip
 import org.android.bbangzip.presentation.model.BadgeDetail
+import org.android.bbangzip.presentation.type.BbangZipButtonSize
+import org.android.bbangzip.presentation.type.BbangZipButtonType
 import org.android.bbangzip.ui.theme.BbangZipTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -45,26 +54,45 @@ fun BbangZipBadgeDetailBottomSheet(
                 modifier = Modifier.fillMaxWidth(),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
-                Spacer(modifier = Modifier.height(44.dp))
-
-                AsyncImage(
-                    model = badgeDetail.imageUrl,
-                    contentDescription = null,
-                    modifier = Modifier
-                        .height((LocalConfiguration.current.screenHeightDp / 5).dp)
-                        .clip(RoundedCornerShape(48.dp))
-                )
-
-                Spacer(modifier = Modifier.height(24.dp))
-
-                TopTailBalloon(text = badgeDetail.name, horizontalPadding = 132.dp)
-
-                Spacer(modifier = Modifier.height(32.dp))
-
-                HashTagText(badgeDetail.hashTags)
-
-                Spacer(modifier = Modifier.height(32.dp))
-
+                if (!badgeDetail.isLocked) {
+                    BadgeDetailInfo(badgeDetail = badgeDetail)
+                } else {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .clip(RoundedCornerShape(48.dp)),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Column(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .blur(48.dp),
+                            horizontalAlignment = Alignment.CenterHorizontally
+                        ) {
+                            Spacer(modifier = Modifier.height(44.dp))
+
+                            AsyncImage(
+                                model = badgeDetail.imageUrl,
+                                contentDescription = null,
+                                modifier = Modifier
+                                    .height((LocalConfiguration.current.screenHeightDp / 5).dp)
+                                    .aspectRatio(1f)
+                                    .clip(RoundedCornerShape(48.dp))
+                            )
+
+                            Spacer(modifier = Modifier.height(160.dp))
+                        }
+                        Icon(
+                            imageVector = ImageVector.vectorResource(id = R.drawable.ic_lock_default_28),
+                            contentDescription = null,
+                            tint = BbangZipTheme.colors.lineStrong_68645E_52,
+                            modifier = Modifier
+                                .height(58.dp)
+                                .width(41.dp)
+                        )
+                    }
+                    Spacer(modifier = Modifier.height(18.dp))
+                }
                 Column(
                     modifier = Modifier
                         .padding(horizontal = 40.dp)
@@ -90,33 +118,38 @@ fun BbangZipBadgeDetailBottomSheet(
                         .padding(horizontal = 40.dp)
                         .fillMaxWidth(),
                     verticalAlignment = Alignment.CenterVertically
-                ){
+                ) {
                     Text(
                         text = stringResource(R.string.badge_detail_reward),
                         style = BbangZipTheme.typography.body1Bold,
                         color = BbangZipTheme.colors.primaryNormal_282119,
                     )
 
+                    Spacer(modifier = Modifier.weight(1f))
+
                     BbangZipChip(
                         backgroundColor = BbangZipTheme.colors.statusCautionary_FFB84A,
-                        text = badgeDetail.reward.toString(),
+                        text = stringResource(
+                            R.string.badge_bottom_sheet_reward,
+                            badgeDetail.reward
+                        ),
                     )
                 }
-
             }
         },
         cancelButton = {
             Spacer(modifier = Modifier.height(32.dp))
 
-            Button(
-                onClick = onClickCancelButton,
-            ) {
-                Text(
-                    text = cancelButtonText,
-                    style = BbangZipTheme.typography.body1Bold,
-                    color = BbangZipTheme.colors.primaryNormal_282119,
-                )
-            }
+            BbangZipButton(
+                bbangZipButtonType = BbangZipButtonType.Solid,
+                bbangZipButtonSize = BbangZipButtonSize.Large,
+                onClick = { onClickCancelButton() },
+                label = cancelButtonText,
+                modifier = Modifier.fillMaxWidth(),
+                trailingIcon = R.drawable.ic_chevronright_thick_small_24,
+            )
+
+            Spacer(modifier = Modifier.height(16.dp))
         },
     )
 }
@@ -127,14 +160,18 @@ fun HashTagText(
     modifier: Modifier = Modifier
 ) {
     Column(
-        modifier = modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally
+        modifier = modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Text(
             text = "#${hashTags[0]}",
             style = BbangZipTheme.typography.body2Bold,
             color = BbangZipTheme.colors.labelAssistive_282119_28,
         )
-        Row(modifier = Modifier.fillMaxWidth()) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.Center
+        ) {
             Text(
                 text = "#${hashTags[1]}",
                 style = BbangZipTheme.typography.body2Bold,
@@ -153,3 +190,36 @@ fun HashTagText(
         }
     }
 }
+
+@Composable
+fun BadgeDetailInfo(
+    badgeDetail: BadgeDetail,
+    modifier: Modifier = Modifier
+) {
+    Column(
+        modifier = modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Spacer(modifier = Modifier.height(44.dp))
+
+        AsyncImage(
+            model = badgeDetail.imageUrl,
+            contentDescription = null,
+            modifier = Modifier
+                .height((LocalConfiguration.current.screenHeightDp / 5).dp)
+                .aspectRatio(1f)
+                .clip(RoundedCornerShape(48.dp))
+        )
+    }
+
+    Spacer(modifier = Modifier.height(24.dp))
+
+    TopTailBalloon(text = badgeDetail.name, horizontalPadding = 132.dp)
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    HashTagText(badgeDetail.hashTags)
+
+    Spacer(modifier = Modifier.height(32.dp))
+}
+