From 1a46c7e03cb8be86f7b6ddb70454b736fdda1e50 Mon Sep 17 00:00:00 2001 From: giovannijunseokim Date: Wed, 10 Apr 2024 00:02:22 +0900 Subject: [PATCH 1/4] feat: implement circleLayout() --- .../earthbreaker/namu/compose/CircleLayout.kt | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 app/src/main/java/univ/earthbreaker/namu/compose/CircleLayout.kt diff --git a/app/src/main/java/univ/earthbreaker/namu/compose/CircleLayout.kt b/app/src/main/java/univ/earthbreaker/namu/compose/CircleLayout.kt new file mode 100644 index 0000000..fc7f123 --- /dev/null +++ b/app/src/main/java/univ/earthbreaker/namu/compose/CircleLayout.kt @@ -0,0 +1,24 @@ +package univ.earthbreaker.namu.compose + +import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.layout + +fun Modifier.circleLayout() = + layout { measurable, constraints -> + // Measure the composable + val placeable = measurable.measure(constraints) + + // get the current max dimension to assign width=height + val currentHeight = placeable.height + val currentWidth = placeable.width + val newDiameter = maxOf(currentHeight, currentWidth) + + // assign the dimension and the center position + layout(newDiameter, newDiameter) { + // Where the composable gets placed + placeable.placeRelative( + (newDiameter - currentWidth) / 2, + (newDiameter - currentHeight) / 2, + ) + } + } From 0b1d83f4be9c7acbb71b9c0dcf2e3facea2c5d48 Mon Sep 17 00:00:00 2001 From: giovannijunseokim Date: Wed, 10 Apr 2024 00:02:30 +0900 Subject: [PATCH 2/4] feat: implement GenderCard --- .../feature/character/component/GenderCard.kt | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 app/src/main/java/univ/earthbreaker/namu/feature/character/component/GenderCard.kt diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/character/component/GenderCard.kt b/app/src/main/java/univ/earthbreaker/namu/feature/character/component/GenderCard.kt new file mode 100644 index 0000000..2c90b33 --- /dev/null +++ b/app/src/main/java/univ/earthbreaker/namu/feature/character/component/GenderCard.kt @@ -0,0 +1,61 @@ +package univ.earthbreaker.namu.feature.character.component + +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.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import univ.earthbreaker.namu.compose.circleLayout +import univ.earthbreaker.namu.ui.theme.GTTheme + +@Composable +fun GenderCard(isMale: Boolean) { + Row { + Text( + text = "남", + modifier = Modifier + .background( + color = if (isMale) GTTheme.colors.green2 else GTTheme.colors.gray1, + shape = CircleShape, + ) + .circleLayout() + .padding(vertical = 6.dp, horizontal = 12.dp), + textAlign = TextAlign.Center, + color = if (isMale) GTTheme.colors.green1 else GTTheme.colors.gray3, + style = if (isMale) GTTheme.typography.titleSemiBold16 else GTTheme.typography.bodyMedium16, + ) + Spacer(modifier = Modifier.width(20.dp)) + Text( + text = "여", + modifier = Modifier + .background( + color = if (!isMale) GTTheme.colors.green2 else GTTheme.colors.gray1, + shape = CircleShape, + ) + .circleLayout() + .padding(vertical = 6.dp, horizontal = 12.dp), + textAlign = TextAlign.Center, + color = if (!isMale) GTTheme.colors.green1 else GTTheme.colors.gray3, + style = if (!isMale) GTTheme.typography.titleSemiBold16 else GTTheme.typography.bodyMedium16, + ) + } +} + +@Preview +@Composable +private fun GenderCardPreview() { + Column { + GenderCard(isMale = true) + Spacer(modifier = Modifier.height(50.dp)) + GenderCard(isMale = false) + } +} From 9999a8ffa180fc4003efedaa1a01345a97c0dad8 Mon Sep 17 00:00:00 2001 From: giovannijunseokim Date: Wed, 10 Apr 2024 00:02:45 +0900 Subject: [PATCH 3/4] feat: implement CharacterDetailDialog --- .../character/CharacterDetailDialog.kt | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 app/src/main/java/univ/earthbreaker/namu/feature/character/CharacterDetailDialog.kt diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/character/CharacterDetailDialog.kt b/app/src/main/java/univ/earthbreaker/namu/feature/character/CharacterDetailDialog.kt new file mode 100644 index 0000000..5cec6cb --- /dev/null +++ b/app/src/main/java/univ/earthbreaker/namu/feature/character/CharacterDetailDialog.kt @@ -0,0 +1,86 @@ +package univ.earthbreaker.namu.feature.character + +import androidx.compose.foundation.Image +import androidx.compose.foundation.ScrollState +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.rememberScrollState +import androidx.compose.foundation.verticalScroll +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 univ.earthbreaker.namu.R +import univ.earthbreaker.namu.compose.CommonDialogWithXIcon +import univ.earthbreaker.namu.feature.character.component.GenderCard +import univ.earthbreaker.namu.ui.theme.GTTheme + +@Composable +fun CharacterDetailDialog( + characterResId: Int, + isMale: Boolean, + characterName: String, + characterCount: Int, + characterDescription: String, + scrollState: ScrollState, +) { + CommonDialogWithXIcon(onDismissRequest = { /*TODO*/ }) { + Column( + modifier = Modifier.padding(top = 40.dp, bottom = 30.dp, start = 38.dp, end = 38.dp), + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Image(painterResource(id = characterResId), contentDescription = null) + Spacer(modifier = Modifier.height(14.dp)) + GenderCard(isMale = isMale) + Spacer(modifier = Modifier.height(8.dp)) + Text( + characterName, + style = GTTheme.typography.titleSemiBold20, + color = GTTheme.colors.gray8, + ) + Spacer(modifier = Modifier.height(5.dp)) + Row(verticalAlignment = Alignment.CenterVertically) { + Text( + "획득한 수", + style = GTTheme.typography.detailMedium14, + color = GTTheme.colors.gray6, + ) + Spacer(modifier = Modifier.width(7.dp)) + Text( + characterCount.toString(), + style = GTTheme.typography.detailSemiBold14, + color = GTTheme.colors.blue1, + ) + } + Spacer(modifier = Modifier.height(30.dp)) + Text( + text = characterDescription, + style = GTTheme.typography.detailMedium14, + color = GTTheme.colors.gray6, + modifier = Modifier.fillMaxHeight(0.35f).verticalScroll(scrollState), + ) + } + } +} + +@Preview +@Composable +private fun CharacterDetailDialogPreview() { + CharacterDetailDialog( + characterResId = R.drawable.img_mock_character, + isMale = true, + characterName = "단풍나무", + characterCount = 4, + characterDescription = "느릅나무과에 속하는 낙엽교목으로 바닷바람을 버텨낼 수 있는 강인한 생명력을 가졌다.\n" + + "이름은 '이삭이 패다'라는 데서 왔다는 어원설도 있고, 여름에 팽나무 열매를 대나무 꼬챙이에 꽂아 휘두르면, 열매가 마치 총알처럼 날아가는데, 이때 날아가는 소리가 '팽~'하고 나서라는 어원설도 있다.", + scrollState = rememberScrollState(), + ) +} From 9d8ccc061be9416569a9fbc89963fdbb070c021c Mon Sep 17 00:00:00 2001 From: giovannijunseokim Date: Wed, 10 Apr 2024 00:48:04 +0900 Subject: [PATCH 4/4] feat: add isEndangered card --- .../feature/character/CharacterDetailDialog.kt | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/character/CharacterDetailDialog.kt b/app/src/main/java/univ/earthbreaker/namu/feature/character/CharacterDetailDialog.kt index 5cec6cb..4787216 100644 --- a/app/src/main/java/univ/earthbreaker/namu/feature/character/CharacterDetailDialog.kt +++ b/app/src/main/java/univ/earthbreaker/namu/feature/character/CharacterDetailDialog.kt @@ -2,6 +2,7 @@ package univ.earthbreaker.namu.feature.character import androidx.compose.foundation.Image import androidx.compose.foundation.ScrollState +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer @@ -10,6 +11,7 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -30,6 +32,7 @@ fun CharacterDetailDialog( characterName: String, characterCount: Int, characterDescription: String, + isEndangered: Boolean, scrollState: ScrollState, ) { CommonDialogWithXIcon(onDismissRequest = { /*TODO*/ }) { @@ -60,6 +63,18 @@ fun CharacterDetailDialog( color = GTTheme.colors.blue1, ) } + if (isEndangered) { + Spacer(modifier = Modifier.height(8.dp)) + Text( + "멸종위기종 지정", + style = GTTheme.typography.detailMedium12, + color = GTTheme.colors.blue1, + modifier = Modifier.background(color = GTTheme.colors.blue2, shape = RoundedCornerShape(100.dp)).padding( + horizontal = 10.dp, + vertical = 5.dp, + ), + ) + } Spacer(modifier = Modifier.height(30.dp)) Text( text = characterDescription, @@ -81,6 +96,7 @@ private fun CharacterDetailDialogPreview() { characterCount = 4, characterDescription = "느릅나무과에 속하는 낙엽교목으로 바닷바람을 버텨낼 수 있는 강인한 생명력을 가졌다.\n" + "이름은 '이삭이 패다'라는 데서 왔다는 어원설도 있고, 여름에 팽나무 열매를 대나무 꼬챙이에 꽂아 휘두르면, 열매가 마치 총알처럼 날아가는데, 이때 날아가는 소리가 '팽~'하고 나서라는 어원설도 있다.", + isEndangered = true, scrollState = rememberScrollState(), ) }