Implement character detail dialog

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,
+            )
+        }
+    }

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(),
+    )
+}

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)
+    }
+}