From 8fff6fc426b6d21d55caaf070025c64e383b6615 Mon Sep 17 00:00:00 2001 From: giovannijunseokim Date: Wed, 20 Mar 2024 20:10:55 +0900 Subject: [PATCH 1/7] chore: add libraries --- app/build.gradle.kts | 2 ++ gradle/libs.versions.toml | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/app/build.gradle.kts b/app/build.gradle.kts index 470d9fd..e01b974 100644 --- a/app/build.gradle.kts +++ b/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 { diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index bf45115..fc5c5c5 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -1,5 +1,7 @@ [versions] agp = "8.3.0" +coilCompose = "2.6.0" +grid = "1.0.0" kotlin = "1.9.0" coreKtx = "1.12.0" junit = "4.13.2" @@ -12,6 +14,8 @@ ktlint = "12.1.0" [libraries] androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" } +coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coilCompose" } +grid = { module = "io.woong.compose.grid:grid", version.ref = "grid" } junit = { group = "junit", name = "junit", version.ref = "junit" } androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" } androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" } From 6f37a15df299e552e8664426cb5e4d997c20842d Mon Sep 17 00:00:00 2001 From: giovannijunseokim Date: Wed, 20 Mar 2024 20:11:02 +0900 Subject: [PATCH 2/7] chore: add icon --- app/src/main/res/drawable/ic_lock.xml | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 app/src/main/res/drawable/ic_lock.xml diff --git a/app/src/main/res/drawable/ic_lock.xml b/app/src/main/res/drawable/ic_lock.xml new file mode 100644 index 0000000..fb36602 --- /dev/null +++ b/app/src/main/res/drawable/ic_lock.xml @@ -0,0 +1,9 @@ + + + From 5edf0ca87fc3964be432ec6cc5ac61ed3318c067 Mon Sep 17 00:00:00 2001 From: giovannijunseokim Date: Wed, 20 Mar 2024 20:11:12 +0900 Subject: [PATCH 3/7] feat: implement CharacterTypeItem --- .../book/component/CharacterTypeItem.kt | 118 ++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 app/src/main/java/univ/earthbreaker/namu/feature/book/component/CharacterTypeItem.kt diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/book/component/CharacterTypeItem.kt b/app/src/main/java/univ/earthbreaker/namu/feature/book/component/CharacterTypeItem.kt new file mode 100644 index 0000000..edd5421 --- /dev/null +++ b/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, + 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, + ) +} From c9560695080ce150403f5f985a6f08ac61ac8fd6 Mon Sep 17 00:00:00 2001 From: giovannijunseokim Date: Wed, 20 Mar 2024 20:11:17 +0900 Subject: [PATCH 4/7] feat: implement BookDialog --- .../namu/feature/book/BookDialog.kt | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 app/src/main/java/univ/earthbreaker/namu/feature/book/BookDialog.kt diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/book/BookDialog.kt b/app/src/main/java/univ/earthbreaker/namu/feature/book/BookDialog.kt new file mode 100644 index 0000000..221de8d --- /dev/null +++ b/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 = {}) +} From ce480f4bee897aa1010a7aa645d2efd24cc65b71 Mon Sep 17 00:00:00 2001 From: giovannijunseokim Date: Wed, 20 Mar 2024 20:11:24 +0900 Subject: [PATCH 5/7] chore: add color --- app/src/main/java/univ/earthbreaker/namu/ui/theme/Color.kt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/src/main/java/univ/earthbreaker/namu/ui/theme/Color.kt b/app/src/main/java/univ/earthbreaker/namu/ui/theme/Color.kt index 91acb71..d9b28dd 100644 --- a/app/src/main/java/univ/earthbreaker/namu/ui/theme/Color.kt +++ b/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) From 4ecdbb5efbf9ee4be9ce3ee94519d8041c5f8cfb Mon Sep 17 00:00:00 2001 From: giovannijunseokim Date: Wed, 20 Mar 2024 20:11:49 +0900 Subject: [PATCH 6/7] chore: make usePlatformDefaultWidth false --- .../namu/compose/CommonDialogWithXIcon.kt | 29 ++++++++++++++----- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt b/app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt index 209cb50..efea46d 100644 --- a/app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt +++ b/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 = {}, ) } } From a3987de6984687f91580d243a525ae4f14572993 Mon Sep 17 00:00:00 2001 From: giovannijunseokim Date: Wed, 20 Mar 2024 20:12:33 +0900 Subject: [PATCH 7/7] feat: add BookDialogCard Click Event --- .../namu/feature/home/HomeScreen.kt | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeScreen.kt b/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeScreen.kt index 88dcdd0..7e09c0b 100644 --- a/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeScreen.kt +++ b/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))