[Feat/#158] DBTI 뷰 구현

app/src/main/java/com/paw/key/presentation/ui/dbti/StartScreen.kt

@@ -0,0 +1,158 @@
+package com.paw.key.presentation.ui.dbti
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.paw.key.R
+import com.paw.key.core.designsystem.component.TopBar
+import com.paw.key.core.designsystem.theme.PawKeyTheme
+
+@Composable
+fun StartScreen(
+    navigateUp: () -> Unit,
+    navigateToTest: () -> Unit,
+    showSkipButton: Boolean = false,
+    onSkip: (() -> Unit)? = null,
+    modifier: Modifier = Modifier,
+) {
+    Box(modifier = modifier.fillMaxSize()) {
+        // 이미지를 배경으로
+        Image(
+            painter = painterResource(id = R.drawable.doki_welcome),
+            contentDescription = null,
+            modifier = Modifier.fillMaxSize(),
+            contentScale = ContentScale.Crop
+        )
+
+        Column(
+            modifier = modifier
+                .fillMaxSize()
+        ) {
+            TopBar(
+                title = "DBTI 검사",
+                onBackClick = navigateUp,
+                isBackVisible = true
+            )
+
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 24.dp),
+                horizontalAlignment = Alignment.Start
+            ) {
+                Spacer(modifier = Modifier.height(40.dp))
+
+                Text(
+                    text = "반려견 성향을 알아보는\nDBTI 성격 유형 검사",
+                    fontSize = 24.sp,
+                    fontWeight = FontWeight.Bold,
+                    color = PawKeyTheme.colors.contents,
+                    textAlign = TextAlign.Start,
+                    lineHeight = 32.sp,
+                    style = PawKeyTheme.typography.header1
+                )
+
+                Spacer(modifier = Modifier.height(4.dp))
+
+                Text(
+                    text = "본 조사는 사랑하는 반려견 위한 비정식 테스트입니다.",
+                    fontSize = 14.sp,
+                    color = PawKeyTheme.colors.defaultDark,
+                    textAlign = TextAlign.Center,
+                    style = PawKeyTheme.typography.body14R
+                )
+
+                Spacer(modifier = Modifier.weight(1f))
+
+//            Image(
+//                painter = painterResource(id = R.drawable.doki_welcome),
+//                contentDescription = "DOKI 캐릭터",
+//                modifier = Modifier
+//                    .fillMaxSize(), // 전체 화면 차지
+//                contentScale = ContentScale.Crop
+//            )
+
+                Spacer(modifier = Modifier.weight(1f))
+
+                // 조건부 건너뛰기
+                if (showSkipButton && onSkip != null) {
+                    TextButton(
+                        onClick = onSkip,
+                        modifier = Modifier.fillMaxWidth()
+                    ) {
+                        Text(
+                            text = "건너뛰기",
+                            color = PawKeyTheme.colors.defaultMiddle,
+                            style = PawKeyTheme.typography.subTitle
+                        )
+                    }
+
+                    Spacer(modifier = Modifier.height(8.dp))
+                }
+
+                Button(
+                    onClick = navigateToTest,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(56.dp),
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = PawKeyTheme.colors.primary
+                    ),
+                    shape = RoundedCornerShape(12.dp)
+                ) {
+                    Text(
+                        text = "시작하기",
+                        fontWeight = FontWeight.SemiBold,
+                        color = PawKeyTheme.colors.background,
+                        style = PawKeyTheme.typography.mainButtonActive
+                    )
+                }
+
+                Spacer(modifier = Modifier.height(24.dp))
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun StartScreenWithSkipPreview() {
+    PawKeyTheme {
+        // 회원가입에서 진입 (건너뛰기 있음)
+        StartScreen(
+            navigateUp = {},
+            navigateToTest = {},
+            showSkipButton = true,
+            onSkip = {}
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun StartScreenNoSkipPreview() {
+    PawKeyTheme {
+        // 마이페이지에서 진입 (건너뛰기 없음)
+        StartScreen(
+            navigateUp = {},
+            navigateToTest = {},
+            showSkipButton = false,
+            onSkip = null
+        )
+    }
+}

app/src/main/java/com/paw/key/presentation/ui/dbti/result/ResultScreen.kt

@@ -0,0 +1,119 @@
+package com.paw.key.presentation.ui.dbti.result
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.paw.key.core.designsystem.component.DokiButton
+import com.paw.key.core.designsystem.component.TopBar
+import com.paw.key.core.designsystem.theme.PawKeyTheme
+import com.paw.key.presentation.ui.dbti.result.component.ResultBox
+import com.paw.key.presentation.ui.dbti.result.component.TraitAnalysis
+
+@Composable
+fun ResultScreen(
+    type: String,
+    name: String,
+    imageUrl: String?,
+    keywords: List<String>,
+    description: String,
+    analysis: List<TraitAnalysis>,
+    onRetakeTest: () -> Unit,
+    onGoHome: () -> Unit,
+    navigateUp: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .background(PawKeyTheme.colors.defaultButton)
+    ) {
+        TopBar(
+            title = "DBTI 결과",
+            onBackClick = navigateUp,
+            isBackVisible = true
+        )
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 16.dp),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Spacer(modifier = Modifier.weight(20f))
+
+            ResultBox(
+                type = type,
+                name = name,
+                imageUrl = imageUrl,
+                keywords = keywords,
+                description = description,
+                analysis = analysis
+            )
+
+            Spacer(modifier = Modifier.weight(20f))
+
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                DokiButton(
+                    text = "다시 테스트하기",
+                    onClick = onRetakeTest,
+                    modifier = Modifier.weight(1f),
+                    enabled = true
+                    // TODO: 버튼 바꾸기
+                )
+
+                DokiButton(
+                    text = "홈으로 가기",
+                    onClick = onGoHome,
+                    modifier = Modifier.weight(1f),
+                    enabled = true
+                )
+            }
+
+            Spacer(modifier = Modifier.height(24.dp))
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun ResultScreenPreview() {
+    PawKeyTheme {
+        ResultScreen(
+            type = "EPR",
+            name = "탐험대장 멍멍이",
+            imageUrl = null,
+            keywords = listOf("모험", "활발", "사교성"),
+            description = "활발하고 친구들과 어울리며 모험을 좋아해요.\n집사에게 언제나 애너지를 주는 타입!",
+            analysis = listOf(
+                TraitAnalysis(
+                    leftLabel = "휴식가",
+                    rightLabel = "탐험가",
+                    dominantSide = "right",
+                    score = 2
+                ),
+                TraitAnalysis(
+                    leftLabel = "부끄멍",
+                    rightLabel = "적극멍",
+                    dominantSide = "right",
+                    score = 2
+                ),
+                TraitAnalysis(
+                    leftLabel = "루틴러",
+                    rightLabel = "자유러",
+                    dominantSide = "left",
+                    score = 2
+                )
+            ),
+            onRetakeTest = {},
+            onGoHome = {},
+            navigateUp = {}
+        )
+    }
+}

app/src/main/java/com/paw/key/presentation/ui/dbti/result/component/CharacterChip.kt

@@ -0,0 +1,42 @@
+package com.paw.key.presentation.ui.dbti.result.component
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.paw.key.core.designsystem.theme.PawKeyTheme
+
+@Composable
+fun CharacterChip(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        modifier = modifier,
+        color = PawKeyTheme.colors.primaryGra1,
+        shape = RoundedCornerShape(8.dp)
+    ) {
+        Text(
+            text = text,
+            fontSize = 12.sp,
+            fontWeight = FontWeight.Medium,
+            color = PawKeyTheme.colors.primary,
+            style = PawKeyTheme.typography.subButtonActive,
+            modifier = Modifier.padding(8.dp)
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun CharacterChipPreview() {
+    PawKeyTheme {
+        CharacterChip(text = "# Character")
+    }
+}