Add book dialog

app/build.gradle.kts

@@ -67,6 +67,8 @@ dependencies {
     androidTestImplementation(libs.androidx.ui.test.junit4)
     debugImplementation(libs.androidx.ui.tooling)
     debugImplementation(libs.androidx.ui.test.manifest)
+    implementation(libs.coil.compose)
+    implementation(libs.grid)
 }
 
 ktlint {

app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt

@@ -1,6 +1,7 @@
 package univ.earthbreaker.namu.compose
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -20,21 +21,33 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
 import univ.earthbreaker.namu.R
 import univ.earthbreaker.namu.ui.theme.GTTheme
 
 @Composable
 fun CommonDialogWithXIcon(
-    modifier: Modifier = Modifier,
+    onDismissRequest: () -> Unit,
+    properties: DialogProperties = DialogProperties(),
     content: @Composable () -> Unit,
-    dismiss: () -> Unit,
 ) {
-    Dialog(onDismissRequest = (dismiss)) {
+    Dialog(
+        onDismissRequest = onDismissRequest,
+        properties = properties.let {
+            DialogProperties(
+                dismissOnBackPress = it.dismissOnBackPress,
+                dismissOnClickOutside = it.dismissOnClickOutside,
+                securePolicy = it.securePolicy,
+                usePlatformDefaultWidth = false,
+            )
+        },
+    ) {
         Column(
-            modifier = modifier
-                .background(color = Color.Transparent)
-                .fillMaxWidth(0.89f),
+            modifier = Modifier
+                .fillMaxWidth(0.88f)
+                .background(color = Color.Transparent),
             horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
         ) {
             Box(
                 modifier = Modifier
@@ -52,7 +65,7 @@ fun CommonDialogWithXIcon(
                     .size(size = 64.dp)
                     .clip(shape = RoundedCornerShape(100.dp))
                     .background(GTTheme.colors.white)
-                    .noRippleClickable(onClick = dismiss),
+                    .noRippleClickable(onClick = onDismissRequest),
                 contentAlignment = Alignment.Center,
             ) {
                 Icon(
@@ -79,7 +92,7 @@ fun CommonDialogWithXIconPreview() {
                     }
                 }
             },
-            dismiss = {},
+            onDismissRequest = {},
         )
     }
 }

app/src/main/java/univ/earthbreaker/namu/feature/book/BookDialog.kt

@@ -0,0 +1,82 @@
+package univ.earthbreaker.namu.feature.book
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import univ.earthbreaker.namu.R
+import univ.earthbreaker.namu.compose.CommonDialogWithXIcon
+import univ.earthbreaker.namu.feature.book.component.CharacterTypeItem
+import univ.earthbreaker.namu.ui.theme.GTTheme
+
+@Composable
+fun BookDialog(modifier: Modifier = Modifier, characterCount: Int = 0, onDismissRequest: () -> Unit) {
+    val mockCharacterCategoryList = listOf("아름다움", "생명력", "정화력", "아름다움")
+
+    CommonDialogWithXIcon(
+        onDismissRequest = onDismissRequest,
+    ) {
+        Column(
+            modifier = Modifier.padding(horizontal = 20.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Text(
+                modifier = modifier.padding(top = 22.dp, bottom = 10.dp),
+                text = stringResource(id = R.string.book),
+                style = GTTheme.typography.titleSemiBold16,
+            )
+            Row(
+                modifier = Modifier
+                    .background(
+                        color = GTTheme.colors.blue2,
+                        shape = RoundedCornerShape(60.dp),
+                    )
+                    .padding(horizontal = 10.dp, vertical = 4.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Text(
+                    "전체 획득 수",
+                    style = GTTheme.typography.detailMedium12,
+                    color = GTTheme.colors.gray6,
+                )
+                Spacer(modifier = Modifier.width(6.dp))
+                Text(
+                    characterCount.toString(),
+                    style = GTTheme.typography.detailSemiBold14,
+                    color = GTTheme.colors.blue1,
+                )
+            }
+            Spacer(modifier = Modifier.height(25.dp))
+            LazyColumn(modifier = Modifier.fillMaxHeight(0.7f)) {
+                items(mockCharacterCategoryList) {
+                    CharacterTypeItem(
+                        characterCategory = it,
+                        userCharacters = emptyList(),
+                        totalCharacterCount = 7,
+                    )
+                    Spacer(modifier = Modifier.height(27.dp))
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun BookContentPreview() {
+    BookDialog(onDismissRequest = {})
+}

app/src/main/java/univ/earthbreaker/namu/feature/book/component/CharacterTypeItem.kt

@@ -0,0 +1,118 @@
+package univ.earthbreaker.namu.feature.book.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+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.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import io.woong.compose.grid.SimpleGridCells
+import io.woong.compose.grid.VerticalGrid
+import univ.earthbreaker.namu.R
+import univ.earthbreaker.namu.ui.theme.GTTheme
+
+@Composable
+fun CharacterTypeItem(
+    characterCategory: String,
+    userCharacters: List<String>,
+    totalCharacterCount: Int,
+) {
+    Column {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Text(
+                text = characterCategory,
+                color = GTTheme.colors.gray5,
+                style = GTTheme.typography.detailSemiBold14,
+            )
+            Spacer(modifier = Modifier.width(10.dp))
+            Box(
+                modifier = Modifier.background(
+                    color = GTTheme.colors.green2,
+                    shape = RoundedCornerShape(60.dp),
+                ),
+            ) {
+                Text(
+                    modifier = Modifier.padding(horizontal = 6.dp),
+                    text = "${userCharacters.size}/$totalCharacterCount",
+                    style = GTTheme.typography.detailBold11,
+                    color = GTTheme.colors.green1,
+                )
+            }
+        }
+        Spacer(modifier = Modifier.height(13.dp))
+        VerticalGrid(
+            modifier = Modifier
+                .border(
+                    width = 1.dp,
+                    color = GTTheme.colors.gray2,
+                    shape = RoundedCornerShape(10.dp),
+                )
+                .padding(vertical = 10.dp, horizontal = 3.dp),
+            columns = SimpleGridCells.Fixed(4),
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            userCharacters.forEachIndexed { index, url ->
+                Column {
+                    AsyncImage(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 7.dp)
+                            .aspectRatio(1f),
+                        model = url,
+                        contentDescription = null,
+                    )
+                    if (index !in (totalCharacterCount - totalCharacterCount % 4) until totalCharacterCount) {
+                        Spacer(modifier = Modifier.height(14.dp))
+                    }
+                }
+            }
+            repeat(totalCharacterCount - userCharacters.size) { index ->
+                Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                    Image(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 7.dp)
+                            .aspectRatio(1f)
+                            .background(
+                                color = GTTheme.colors.bg3Black,
+                                shape = RoundedCornerShape(10.dp),
+                            )
+                            .padding(16.dp),
+                        painter = painterResource(id = R.drawable.ic_lock),
+                        contentDescription = null,
+                    )
+
+                    if (index !in (totalCharacterCount - totalCharacterCount % 4) until totalCharacterCount) {
+                        Spacer(modifier = Modifier.height(14.dp))
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun CharacterTypeItemPreview() {
+    CharacterTypeItem(
+        characterCategory = "아름다움",
+        userCharacters = emptyList(),
+        totalCharacterCount = 7,
+    )
+}

app/src/main/java/univ/earthbreaker/namu/feature/home/HomeScreen.kt

@@ -28,7 +28,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import univ.earthbreaker.namu.R
-import univ.earthbreaker.namu.compose.CommonDialogWithXIcon
+import univ.earthbreaker.namu.feature.book.BookDialog
 import univ.earthbreaker.namu.feature.home.component.OpenDialogCard
 import univ.earthbreaker.namu.feature.home.component.TreeEnergyCard
 import univ.earthbreaker.namu.feature.home.component.UserEnergyCard
@@ -37,7 +37,7 @@ import univ.earthbreaker.namu.ui.theme.GTTheme
 
 @Composable
 fun HomeScreen(level: Int, exp: Float, energyCount: Int, currentEnergy: Int, requiredEnergy: Int) {
-    var doesDialogExist by rememberSaveable {
+    var doesBookDialogExist by rememberSaveable {
         mutableStateOf(false)
     }
 
@@ -48,36 +48,33 @@ fun HomeScreen(level: Int, exp: Float, energyCount: Int, currentEnergy: Int, req
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.SpaceBetween,
     ) {
-        HomeTopCard(level, exp, energyCount, onProfileClick = { doesDialogExist = true })
+        HomeTopCard(
+            level,
+            exp,
+            energyCount,
+            onBookClick = { doesBookDialogExist = true },
+        )
         Image(
             painter = painterResource(id = R.drawable.img_mock_character),
             contentDescription = null,
         )
         HomeBottomCard(currentEnergy = currentEnergy, requiredEnergy = requiredEnergy)
     }
-    if (doesDialogExist) {
-        Column(
-            modifier = Modifier.fillMaxSize(),
-        ) {
-            CommonDialogWithXIcon(
-                content = {
-                    Column {
-                        repeat(15) {
-                            Text(
-                                text = "Hello World!",
-                                style = GTTheme.typography.titleSemiBold20,
-                            )
-                        }
-                    }
-                },
-                dismiss = { doesDialogExist = false },
-            )
-        }
+
+    if (doesBookDialogExist) {
+        BookDialog(
+            onDismissRequest = { doesBookDialogExist = false },
+        )
     }
 }
 
 @Composable
-fun HomeTopCard(level: Int, exp: Float, energyCount: Int, onProfileClick: () -> Unit = {}) {
+fun HomeTopCard(
+    level: Int,
+    exp: Float,
+    energyCount: Int,
+    onBookClick: () -> Unit = {},
+) {
     Column {
         Row(
             modifier = Modifier.padding(start = 18.dp, end = 18.dp, top = 30.dp),
@@ -107,7 +104,7 @@ fun HomeTopCard(level: Int, exp: Float, energyCount: Int, onProfileClick: () ->
             horizontalArrangement = Arrangement.SpaceBetween,
         ) {
             Column {
-                WeeklyTopRankerProfileCard(onClick = onProfileClick)
+                WeeklyTopRankerProfileCard()
                 Spacer(Modifier.height(7.dp))
                 OpenDialogCard(
                     text = stringResource(R.string.adding_friends),
@@ -124,7 +121,10 @@ fun HomeTopCard(level: Int, exp: Float, energyCount: Int, onProfileClick: () ->
             Column {
                 UserEnergyCard(energyCount = energyCount)
                 Spacer(Modifier.height(7.dp))
-                OpenDialogCard(text = stringResource(R.string.book), onClick = {})
+                OpenDialogCard(
+                    text = stringResource(R.string.book),
+                    onClick = onBookClick,
+                )
                 Spacer(Modifier.height(7.dp))
                 OpenDialogCard(text = stringResource(R.string.mission), onClick = {})
                 Spacer(Modifier.height(7.dp))

app/src/main/java/univ/earthbreaker/namu/ui/theme/Color.kt

@@ -20,6 +20,7 @@ data class Colors(
     val black: Color = Black,
     val bgBlack: Color = BgBlack,
     val bg2Black: Color = Bg2Black,
+    val bg3Black: Color = Bg3Black,
     val bgWhite: Color = BgWhite,
 )
 
@@ -51,4 +52,5 @@ val Black = Color(0xFF1C1C1F)
 
 val BgBlack = Color(0x991C1C1F)
 val Bg2Black = Color(0x661C1C1F)
+val Bg3Black = Color(0x8E8C8C96)
 val BgWhite = Color(0x4DFFFFFF)

app/src/main/res/drawable/ic_lock.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="23dp"
+    android:height="25dp"
+    android:viewportWidth="23"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M11.25,0C13.191,-0 15.056,0.752 16.453,2.098C17.851,3.444 18.672,5.28 18.745,7.219L18.75,7.5H20C20.631,7.5 21.238,7.738 21.701,8.167C22.163,8.596 22.446,9.184 22.494,9.813L22.5,10V22.5C22.5,23.131 22.262,23.738 21.833,24.201C21.404,24.663 20.816,24.946 20.188,24.994L20,25H2.5C1.869,25 1.262,24.762 0.799,24.333C0.337,23.904 0.054,23.316 0.006,22.688L0,22.5V10C-0,9.369 0.238,8.762 0.667,8.299C1.096,7.837 1.684,7.554 2.313,7.506L2.5,7.5H3.75C3.75,5.511 4.54,3.603 5.947,2.197C7.353,0.79 9.261,0 11.25,0ZM20,10H2.5V22.5H20V10ZM11.25,12.5C11.783,12.5 12.302,12.671 12.732,12.987C13.161,13.303 13.478,13.748 13.637,14.258C13.795,14.767 13.786,15.313 13.612,15.817C13.438,16.321 13.107,16.756 12.667,17.059L12.5,17.165V18.75C12.5,19.069 12.378,19.375 12.159,19.607C11.94,19.838 11.641,19.978 11.323,19.997C11.005,20.015 10.692,19.912 10.448,19.707C10.203,19.503 10.046,19.213 10.009,18.896L10,18.75V17.165C9.523,16.89 9.151,16.465 8.94,15.957C8.73,15.448 8.693,14.884 8.835,14.353C8.978,13.821 9.292,13.352 9.728,13.017C10.165,12.682 10.7,12.5 11.25,12.5ZM11.25,2.5C9.924,2.5 8.652,3.027 7.714,3.964C6.777,4.902 6.25,6.174 6.25,7.5H16.25C16.25,6.174 15.723,4.902 14.785,3.964C13.848,3.027 12.576,2.5 11.25,2.5Z"
+      android:fillColor="#444444"/>
+</vector>