Skip to content

Commit cd215bc

Browse files
authored
Merge pull request #161 from PAW-KEY/feat/#158
[Feat/#158] DBTI 뷰 구현
2 parents cb49bd3 + 6614b13 commit cd215bc

File tree

10 files changed

+910
-2
lines changed

10 files changed

+910
-2
lines changed
Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
package com.paw.key.presentation.ui.dbti
2+
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.*
6+
import androidx.compose.foundation.shape.RoundedCornerShape
7+
import androidx.compose.material3.Button
8+
import androidx.compose.material3.ButtonDefaults
9+
import androidx.compose.material3.Text
10+
import androidx.compose.material3.TextButton
11+
import androidx.compose.runtime.Composable
12+
import androidx.compose.ui.Alignment
13+
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.layout.ContentScale
15+
import androidx.compose.ui.res.painterResource
16+
import androidx.compose.ui.text.font.FontWeight
17+
import androidx.compose.ui.text.style.TextAlign
18+
import androidx.compose.ui.tooling.preview.Preview
19+
import androidx.compose.ui.unit.dp
20+
import androidx.compose.ui.unit.sp
21+
import com.paw.key.R
22+
import com.paw.key.core.designsystem.component.TopBar
23+
import com.paw.key.core.designsystem.theme.PawKeyTheme
24+
25+
@Composable
26+
fun StartScreen(
27+
navigateUp: () -> Unit,
28+
navigateToTest: () -> Unit,
29+
showSkipButton: Boolean = false,
30+
onSkip: (() -> Unit)? = null,
31+
modifier: Modifier = Modifier,
32+
) {
33+
Box(modifier = modifier.fillMaxSize()) {
34+
// 이미지를 배경으로
35+
Image(
36+
painter = painterResource(id = R.drawable.doki_welcome),
37+
contentDescription = null,
38+
modifier = Modifier.fillMaxSize(),
39+
contentScale = ContentScale.Crop
40+
)
41+
42+
Column(
43+
modifier = modifier
44+
.fillMaxSize()
45+
) {
46+
TopBar(
47+
title = "DBTI 검사",
48+
onBackClick = navigateUp,
49+
isBackVisible = true
50+
)
51+
52+
Column(
53+
modifier = Modifier
54+
.fillMaxSize()
55+
.padding(horizontal = 24.dp),
56+
horizontalAlignment = Alignment.Start
57+
) {
58+
Spacer(modifier = Modifier.height(40.dp))
59+
60+
Text(
61+
text = "반려견 성향을 알아보는\nDBTI 성격 유형 검사",
62+
fontSize = 24.sp,
63+
fontWeight = FontWeight.Bold,
64+
color = PawKeyTheme.colors.contents,
65+
textAlign = TextAlign.Start,
66+
lineHeight = 32.sp,
67+
style = PawKeyTheme.typography.header1
68+
)
69+
70+
Spacer(modifier = Modifier.height(4.dp))
71+
72+
Text(
73+
text = "본 조사는 사랑하는 반려견 위한 비정식 테스트입니다.",
74+
fontSize = 14.sp,
75+
color = PawKeyTheme.colors.defaultDark,
76+
textAlign = TextAlign.Center,
77+
style = PawKeyTheme.typography.body14R
78+
)
79+
80+
Spacer(modifier = Modifier.weight(1f))
81+
82+
// Image(
83+
// painter = painterResource(id = R.drawable.doki_welcome),
84+
// contentDescription = "DOKI 캐릭터",
85+
// modifier = Modifier
86+
// .fillMaxSize(), // 전체 화면 차지
87+
// contentScale = ContentScale.Crop
88+
// )
89+
90+
Spacer(modifier = Modifier.weight(1f))
91+
92+
// 조건부 건너뛰기
93+
if (showSkipButton && onSkip != null) {
94+
TextButton(
95+
onClick = onSkip,
96+
modifier = Modifier.fillMaxWidth()
97+
) {
98+
Text(
99+
text = "건너뛰기",
100+
color = PawKeyTheme.colors.defaultMiddle,
101+
style = PawKeyTheme.typography.subTitle
102+
)
103+
}
104+
105+
Spacer(modifier = Modifier.height(8.dp))
106+
}
107+
108+
Button(
109+
onClick = navigateToTest,
110+
modifier = Modifier
111+
.fillMaxWidth()
112+
.height(56.dp),
113+
colors = ButtonDefaults.buttonColors(
114+
containerColor = PawKeyTheme.colors.primary
115+
),
116+
shape = RoundedCornerShape(12.dp)
117+
) {
118+
Text(
119+
text = "시작하기",
120+
fontWeight = FontWeight.SemiBold,
121+
color = PawKeyTheme.colors.background,
122+
style = PawKeyTheme.typography.mainButtonActive
123+
)
124+
}
125+
126+
Spacer(modifier = Modifier.height(24.dp))
127+
}
128+
}
129+
}
130+
}
131+
132+
@Preview(showBackground = true)
133+
@Composable
134+
private fun StartScreenWithSkipPreview() {
135+
PawKeyTheme {
136+
// 회원가입에서 진입 (건너뛰기 있음)
137+
StartScreen(
138+
navigateUp = {},
139+
navigateToTest = {},
140+
showSkipButton = true,
141+
onSkip = {}
142+
)
143+
}
144+
}
145+
146+
@Preview(showBackground = true)
147+
@Composable
148+
private fun StartScreenNoSkipPreview() {
149+
PawKeyTheme {
150+
// 마이페이지에서 진입 (건너뛰기 없음)
151+
StartScreen(
152+
navigateUp = {},
153+
navigateToTest = {},
154+
showSkipButton = false,
155+
onSkip = null
156+
)
157+
}
158+
}
Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
package com.paw.key.presentation.ui.dbti.result
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.*
5+
import androidx.compose.runtime.Composable
6+
import androidx.compose.ui.Alignment
7+
import androidx.compose.ui.Modifier
8+
import androidx.compose.ui.tooling.preview.Preview
9+
import androidx.compose.ui.unit.dp
10+
import com.paw.key.core.designsystem.component.DokiButton
11+
import com.paw.key.core.designsystem.component.TopBar
12+
import com.paw.key.core.designsystem.theme.PawKeyTheme
13+
import com.paw.key.presentation.ui.dbti.result.component.ResultBox
14+
import com.paw.key.presentation.ui.dbti.result.component.TraitAnalysis
15+
16+
@Composable
17+
fun ResultScreen(
18+
type: String,
19+
name: String,
20+
imageUrl: String?,
21+
keywords: List<String>,
22+
description: String,
23+
analysis: List<TraitAnalysis>,
24+
onRetakeTest: () -> Unit,
25+
onGoHome: () -> Unit,
26+
navigateUp: () -> Unit,
27+
modifier: Modifier = Modifier,
28+
) {
29+
Column(
30+
modifier = modifier
31+
.fillMaxSize()
32+
.background(PawKeyTheme.colors.defaultButton)
33+
) {
34+
TopBar(
35+
title = "DBTI 결과",
36+
onBackClick = navigateUp,
37+
isBackVisible = true
38+
)
39+
40+
Column(
41+
modifier = Modifier
42+
.fillMaxSize()
43+
.padding(horizontal = 16.dp),
44+
horizontalAlignment = Alignment.CenterHorizontally
45+
) {
46+
Spacer(modifier = Modifier.weight(20f))
47+
48+
ResultBox(
49+
type = type,
50+
name = name,
51+
imageUrl = imageUrl,
52+
keywords = keywords,
53+
description = description,
54+
analysis = analysis
55+
)
56+
57+
Spacer(modifier = Modifier.weight(20f))
58+
59+
Row(
60+
modifier = Modifier.fillMaxWidth(),
61+
horizontalArrangement = Arrangement.spacedBy(12.dp)
62+
) {
63+
DokiButton(
64+
text = "다시 테스트하기",
65+
onClick = onRetakeTest,
66+
modifier = Modifier.weight(1f),
67+
enabled = true
68+
// TODO: 버튼 바꾸기
69+
)
70+
71+
DokiButton(
72+
text = "홈으로 가기",
73+
onClick = onGoHome,
74+
modifier = Modifier.weight(1f),
75+
enabled = true
76+
)
77+
}
78+
79+
Spacer(modifier = Modifier.height(24.dp))
80+
}
81+
}
82+
}
83+
84+
@Preview(showBackground = true)
85+
@Composable
86+
private fun ResultScreenPreview() {
87+
PawKeyTheme {
88+
ResultScreen(
89+
type = "EPR",
90+
name = "탐험대장 멍멍이",
91+
imageUrl = null,
92+
keywords = listOf("모험", "활발", "사교성"),
93+
description = "활발하고 친구들과 어울리며 모험을 좋아해요.\n집사에게 언제나 애너지를 주는 타입!",
94+
analysis = listOf(
95+
TraitAnalysis(
96+
leftLabel = "휴식가",
97+
rightLabel = "탐험가",
98+
dominantSide = "right",
99+
score = 2
100+
),
101+
TraitAnalysis(
102+
leftLabel = "부끄멍",
103+
rightLabel = "적극멍",
104+
dominantSide = "right",
105+
score = 2
106+
),
107+
TraitAnalysis(
108+
leftLabel = "루틴러",
109+
rightLabel = "자유러",
110+
dominantSide = "left",
111+
score = 2
112+
)
113+
),
114+
onRetakeTest = {},
115+
onGoHome = {},
116+
navigateUp = {}
117+
)
118+
}
119+
}
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
package com.paw.key.presentation.ui.dbti.result.component
2+
3+
import androidx.compose.foundation.layout.padding
4+
import androidx.compose.foundation.shape.RoundedCornerShape
5+
import androidx.compose.material3.Surface
6+
import androidx.compose.material3.Text
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.ui.Modifier
9+
import androidx.compose.ui.text.font.FontWeight
10+
import androidx.compose.ui.tooling.preview.Preview
11+
import androidx.compose.ui.unit.dp
12+
import androidx.compose.ui.unit.sp
13+
import com.paw.key.core.designsystem.theme.PawKeyTheme
14+
15+
@Composable
16+
fun CharacterChip(
17+
text: String,
18+
modifier: Modifier = Modifier,
19+
) {
20+
Surface(
21+
modifier = modifier,
22+
color = PawKeyTheme.colors.primaryGra1,
23+
shape = RoundedCornerShape(8.dp)
24+
) {
25+
Text(
26+
text = text,
27+
fontSize = 12.sp,
28+
fontWeight = FontWeight.Medium,
29+
color = PawKeyTheme.colors.primary,
30+
style = PawKeyTheme.typography.subButtonActive,
31+
modifier = Modifier.padding(8.dp)
32+
)
33+
}
34+
}
35+
36+
@Preview(showBackground = true)
37+
@Composable
38+
private fun CharacterChipPreview() {
39+
PawKeyTheme {
40+
CharacterChip(text = "# Character")
41+
}
42+
}

0 commit comments

Comments
 (0)