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, + ) + } + } 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..4787216 --- /dev/null +++ b/app/src/main/java/univ/earthbreaker/namu/feature/character/CharacterDetailDialog.kt @@ -0,0 +1,102 @@ +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 +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.shape.RoundedCornerShape +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, + isEndangered: Boolean, + 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, + ) + } + 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, + 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" + + "이름은 '이삭이 패다'라는 데서 왔다는 어원설도 있고, 여름에 팽나무 열매를 대나무 꼬챙이에 꽂아 휘두르면, 열매가 마치 총알처럼 날아가는데, 이때 날아가는 소리가 '팽~'하고 나서라는 어원설도 있다.", + isEndangered = true, + scrollState = rememberScrollState(), + ) +} 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) + } +}