Skip to content

Commit 7fe0b67

Browse files
haeti-devhaeti-dev
committed
[feature/#34] 결과화면 구현
1 parent a49a9a1 commit 7fe0b67

File tree

6 files changed

+148
-45
lines changed

6 files changed

+148
-45
lines changed

‎feature/main/src/commonMain/kotlin/com/nexters/emotia/feature/main/MainNavHost.kt‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
package com.nexters.emotia.feature.main
22

3+
import androidx.compose.foundation.background
34
import androidx.compose.runtime.Composable
45
import androidx.compose.ui.Modifier
56
import androidx.navigation.compose.NavHost
7+
import com.nexters.emotia.core.designsystem.theme.EmotiaTheme.colors
68
import com.nexters.emotia.feature.chatting.navigation.chattingScreen
79
import com.nexters.emotia.feature.onboarding.navigation.onBoardingScreen
810
import com.nexters.emotia.feature.result.navigation.fairyScreen
@@ -16,7 +18,7 @@ internal fun MainNavHost(
1618
NavHost(
1719
navController = navigator.navController,
1820
startDestination = navigator.startDestination,
19-
modifier = modifier
21+
modifier = modifier.background(color = colors.black)
2022
) {
2123
onBoardingScreen(
2224
onNavigateNext = {
@@ -41,8 +43,8 @@ internal fun MainNavHost(
4143
onNavigateToLetter = { id, name, image, chatRoomId ->
4244
navigator.navigateToLetter(id, name, image, chatRoomId)
4345
},
44-
onNavigateToResult = { fairyId, fairyName, fairyImage, contents ->
45-
navigator.navigateToLetterResult(fairyId, fairyName, fairyImage, contents)
46+
onNavigateToResult = { fairyName, contents ->
47+
navigator.navigateToLetterResult(fairyName, contents)
4648
}
4749
)
4850
}

‎feature/main/src/commonMain/kotlin/com/nexters/emotia/feature/main/MainNavigator.kt‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,10 @@ internal class MainNavigator(
4949
}
5050

5151
fun navigateToLetterResult(
52-
fairyId: Int,
5352
fairyName: String,
54-
fairyImage: String,
5553
contents: String,
5654
) {
57-
navController.navigateTo(FairyRoute.Result(fairyId, fairyName, fairyImage, contents))
55+
navController.navigateTo(FairyRoute.Result(fairyName, contents))
5856
}
5957

6058
private fun popBackStack() {

‎feature/result/src/commonMain/kotlin/com/nexters/emotia/feature/result/letter/LetterScreen.kt‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import androidx.compose.foundation.layout.size
1919
import androidx.compose.foundation.rememberScrollState
2020
import androidx.compose.foundation.shape.RoundedCornerShape
2121
import androidx.compose.foundation.verticalScroll
22-
import androidx.compose.material3.CircularProgressIndicator
2322
import androidx.compose.material3.Text
2423
import androidx.compose.runtime.Composable
2524
import androidx.compose.runtime.LaunchedEffect
@@ -59,7 +58,7 @@ fun LetterScreen(
5958
fairyName: String,
6059
fairyImage: String,
6160
chatRoomId: Int,
62-
onNavigateToResult: (Int, String, String, String) -> Unit,
61+
onNavigateToResult: (String, String) -> Unit,
6362
onNavigateToChatting: () -> Unit,
6463
modifier: Modifier = Modifier,
6564
viewModel: LetterViewModel = koinViewModel(),
@@ -83,9 +82,7 @@ fun LetterScreen(
8382
when (sideEffect) {
8483
is LetterSideEffect.NavigateToResult -> {
8584
onNavigateToResult(
86-
sideEffect.letter.fairyId,
8785
sideEffect.letter.name,
88-
sideEffect.letter.image,
8986
sideEffect.letter.contents
9087
)
9188
}
@@ -220,20 +217,21 @@ fun LetterScreen(
220217
}
221218
}
222219

223-
// 로딩 오버레이
224-
if (uiState.isLoading) {
225-
Box(
226-
modifier = Modifier
227-
.fillMaxSize()
228-
.background(Color.Black.copy(alpha = 0.5f))
229-
.clickable { /* 터치 차단 */ },
230-
contentAlignment = Alignment.Center
231-
) {
232-
CircularProgressIndicator(
233-
color = colors.primaryDark
234-
)
235-
}
236-
}
220+
// TODO : 로딩이 빨라서 보류. 다른 정책 필요
221+
// // 로딩 오버레이
222+
// if (uiState.isLoading) {
223+
// Box(
224+
// modifier = Modifier
225+
// .fillMaxSize()
226+
// .background(Color.Black.copy(alpha = 0.5f))
227+
// .clickable { /* 터치 차단 */ },
228+
// contentAlignment = Alignment.Center
229+
// ) {
230+
// CircularProgressIndicator(
231+
// color = colors.primaryDark
232+
// )
233+
// }
234+
// }
237235
}
238236
}
239237

‎feature/result/src/commonMain/kotlin/com/nexters/emotia/feature/result/navigation/FairyNavigation.kt‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ fun NavGraphBuilder.fairyScreen(
1111
onNavigateToOnBoarding: () -> Unit,
1212
onNavigateToChatting: () -> Unit,
1313
onNavigateToLetter: (Int, String, String, Int) -> Unit,
14-
onNavigateToResult: (Int, String, String, String) -> Unit,
14+
onNavigateToResult: (String, String) -> Unit,
1515
) {
1616
composable<FairyRoute.FairyMain> { backStackEntry ->
1717
val data = backStackEntry.toRoute<FairyRoute.FairyMain>()
@@ -36,8 +36,8 @@ fun NavGraphBuilder.fairyScreen(
3636
fairyName = data.name,
3737
fairyImage = data.imageUrl,
3838
chatRoomId = data.chatRoomId,
39-
onNavigateToResult = { fairyId, fairyName, fairyImage, contents ->
40-
onNavigateToResult(fairyId, fairyName, fairyImage, contents)
39+
onNavigateToResult = { fairyName, contents ->
40+
onNavigateToResult(fairyName, contents)
4141
},
4242
onNavigateToChatting = onNavigateToChatting
4343
)
@@ -47,10 +47,9 @@ fun NavGraphBuilder.fairyScreen(
4747
val data = backStackEntry.toRoute<FairyRoute.Result>()
4848

4949
ResultScreen(
50-
fairyId = data.fairyId,
5150
fairyName = data.fairyName,
52-
fairyImage = data.fairyImage,
53-
contents = data.contents
51+
contents = data.contents,
52+
onNavigateToOnBoarding = onNavigateToOnBoarding
5453
)
5554
}
5655
}

‎feature/result/src/commonMain/kotlin/com/nexters/emotia/feature/result/navigation/FairyRoute.kt‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@ sealed interface FairyRoute : Route {
1212
val imageUrl: String,
1313
val silhouetteImageUrl: String,
1414
val chatRoomId: Int,
15-
) : FairyRoute
15+
) : FairyRoute
1616

1717
@Serializable
18-
data class Letter(val id: Int, val name: String, val imageUrl: String, val chatRoomId: Int) : FairyRoute
18+
data class Letter(val id: Int, val name: String, val imageUrl: String, val chatRoomId: Int) :
19+
FairyRoute
1920

2021
@Serializable
21-
data class Result(val fairyId: Int, val fairyName: String, val fairyImage: String, val contents: String) : FairyRoute
22+
data class Result(val fairyName: String, val contents: String) : FairyRoute
2223
}

‎feature/result/src/commonMain/kotlin/com/nexters/emotia/feature/result/result/ResultScreen.kt‎

Lines changed: 117 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,139 @@
11
package com.nexters.emotia.feature.result.result
22

3-
import androidx.compose.foundation.layout.Box
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.Arrangement
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Spacer
48
import androidx.compose.foundation.layout.fillMaxSize
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.layout.height
511
import androidx.compose.foundation.layout.padding
12+
import androidx.compose.foundation.shape.RoundedCornerShape
613
import androidx.compose.material3.Text
714
import androidx.compose.runtime.Composable
815
import androidx.compose.ui.Alignment
916
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.graphics.Brush
18+
import androidx.compose.ui.graphics.Color
19+
import androidx.compose.ui.text.SpanStyle
20+
import androidx.compose.ui.text.buildAnnotatedString
1021
import androidx.compose.ui.text.style.TextAlign
22+
import androidx.compose.ui.text.withStyle
1123
import androidx.compose.ui.unit.dp
24+
import com.nexters.emotia.core.designsystem.component.EmotiaButton
1225
import com.nexters.emotia.core.designsystem.theme.EmotiaTheme.colors
1326
import com.nexters.emotia.core.designsystem.theme.EmotiaTheme.typography
27+
import emotia.core.designsystem.generated.resources.Res
28+
import emotia.core.designsystem.generated.resources.img_divider_above
29+
import emotia.core.designsystem.generated.resources.img_divider_below
30+
import org.jetbrains.compose.resources.painterResource
31+
import org.jetbrains.compose.ui.tooling.preview.Preview
1432

1533
@Composable
1634
fun ResultScreen(
17-
fairyId: Int,
1835
fairyName: String,
19-
fairyImage: String,
2036
contents: String,
2137
modifier: Modifier = Modifier,
38+
onNavigateToOnBoarding: () -> Unit = {},
2239
) {
23-
Box(
24-
modifier = modifier.fillMaxSize(),
25-
contentAlignment = Alignment.Center
40+
Column(
41+
modifier = modifier
42+
.fillMaxSize()
43+
.background(
44+
brush = Brush.verticalGradient(
45+
colors = listOf(
46+
colors.backgroundBlue,
47+
Color.Black
48+
)
49+
)
50+
),
51+
verticalArrangement = Arrangement.Center
2652
) {
27-
Text(
28-
text = "편지가 전송되었습니다!\n\n요정 ID: $fairyId\n요정 이름: $fairyName\n편지 내용: $contents",
29-
style = typography.emotia16M.copy(color = colors.white),
30-
textAlign = TextAlign.Center,
31-
modifier = Modifier.padding(24.dp)
53+
54+
Column(
55+
modifier = Modifier
56+
.fillMaxWidth()
57+
.padding(horizontal = 30.dp)
58+
.background(color = colors.transparencyBlack, shape = RoundedCornerShape(16.dp))
59+
.padding(24.dp),
60+
horizontalAlignment = Alignment.CenterHorizontally
61+
) {
62+
63+
Text(
64+
text = buildAnnotatedString {
65+
withStyle(style = SpanStyle(color = colors.white)) {
66+
append("너의 ")
67+
}
68+
withStyle(style = SpanStyle(color = colors.pinkLight)) {
69+
append(fairyName)
70+
}
71+
withStyle(style = SpanStyle(color = colors.white)) {
72+
append("에게 보내는 위로")
73+
}
74+
},
75+
style = typography.emotia18M
76+
)
77+
78+
Spacer(modifier = Modifier.height(24.dp))
79+
80+
Image(
81+
painter = painterResource(Res.drawable.img_divider_above),
82+
contentDescription = "Divider",
83+
)
84+
85+
Spacer(modifier = Modifier.height(24.dp))
86+
87+
Text(
88+
text = contents,
89+
style = typography.emotia16R,
90+
textAlign = TextAlign.Center,
91+
color = colors.white
92+
)
93+
94+
Spacer(modifier = Modifier.height(24.dp))
95+
96+
Image(
97+
painter = painterResource(Res.drawable.img_divider_below),
98+
contentDescription = "Divider",
99+
)
100+
101+
Spacer(modifier = Modifier.height(24.dp))
102+
103+
Text(
104+
text = "- 너의 마음 속 ${fairyName}으로부터",
105+
textAlign = TextAlign.Center,
106+
style = typography.emotia14M,
107+
color = colors.lightGray
108+
)
109+
}
110+
111+
Spacer(modifier = Modifier.height(40.dp))
112+
113+
EmotiaButton(
114+
text = "홈 화면으로",
115+
onClick = onNavigateToOnBoarding,
116+
modifier = Modifier.fillMaxWidth().padding(horizontal = 24.dp)
117+
)
118+
119+
Spacer(modifier = Modifier.height(16.dp))
120+
121+
EmotiaButton(
122+
text = "도감 보기 (준비 중)",
123+
enabled = false,
124+
onClick = {},
125+
modifier = Modifier.fillMaxWidth().padding(horizontal = 24.dp)
32126
)
33127
}
34-
}
128+
}
129+
130+
@Preview
131+
@Composable
132+
fun ResultScreenPreview() {
133+
ResultScreen(
134+
fairyName = "행복한 요정",
135+
contents = "이 위로의 글은 너의 마음을 달래줄 것이야.",
136+
modifier = Modifier
137+
)
138+
}
139+

0 commit comments

Comments
 (0)