Skip to content

Commit

Permalink
덕퀴즈, 시험 결과 화면 분기해서 보여줄 수 있도록 변경 (#476)
Browse files Browse the repository at this point in the history
* feat: Exam Result 분기 처리하여 보여주도록 변경

* feat: time HH:MM:SS 형식으로 보여주는 함수 구현

* test: times test 추가

* refactor: 하드코딩 제거

* refactor: ./gradlew build
  • Loading branch information
EvergreenTree97 authored May 12, 2023
1 parent fe0b511 commit 64e8890
Show file tree
Hide file tree
Showing 9 changed files with 284 additions and 91 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/*
* Designed and developed by Duckie Team, 2022
*
* Licensed under the MIT.
* Please see full license: https://github.com/duckie-team/duckie-android/blob/develop/LICENSE
*/

package team.duckie.app.android.feature.ui.exam.result.common

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import team.duckie.quackquack.ui.color.QuackColor

// TODO(EvergreenTree97): QuackLoadingIndicator로 통합 필요
@Composable
internal fun LoadingIndicator() {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center,
) {
CircularProgressIndicator(color = QuackColor.DuckieOrange.composeColor)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/*
* Designed and developed by Duckie Team, 2022
*
* Licensed under the MIT.
* Please see full license: https://github.com/duckie-team/duckie-android/blob/develop/LICENSE
*/

package team.duckie.app.android.feature.ui.exam.result.common

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import team.duckie.app.android.feature.ui.exam.result.R
import team.duckie.quackquack.ui.border.QuackBorder
import team.duckie.quackquack.ui.color.QuackColor
import team.duckie.quackquack.ui.component.QuackSmallButton
import team.duckie.quackquack.ui.component.QuackSmallButtonType
import team.duckie.quackquack.ui.component.QuackSubtitle
import team.duckie.quackquack.ui.component.QuackSurface

@Composable
internal fun ResultBottomBar(
onClickRetryButton: () -> Unit,
onClickExitButton: () -> Unit,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(
horizontal = 20.dp,
vertical = 12.dp,
),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(space = 8.dp),
) {
GrayBorderSmallButton(
modifier = Modifier
.heightIn(min = 44.dp)
.weight(1f),
text = stringResource(id = R.string.solve_retry),
onClick = onClickRetryButton,
)
QuackSmallButton(
modifier = Modifier
.heightIn(44.dp)
.weight(1f),
type = QuackSmallButtonType.Fill,
text = stringResource(id = R.string.exit_exam),
enabled = true,
onClick = onClickExitButton,
)
}
}

@Composable
private fun GrayBorderSmallButton(
modifier: Modifier = Modifier,
text: String,
onClick: () -> Unit,
) {
QuackSurface(
modifier = modifier,
backgroundColor = QuackColor.White,
border = QuackBorder(color = QuackColor.Gray3),
shape = RoundedCornerShape(size = 8.dp),
onClick = onClick,
) {
QuackSubtitle(
modifier = Modifier.padding(
vertical = 12.dp,
horizontal = 12.dp,
),
text = text,
singleLine = true,
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,29 @@

package team.duckie.app.android.feature.ui.exam.result.screen

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import team.duckie.app.android.feature.ui.exam.result.ExamResultActivity
import team.duckie.app.android.feature.ui.exam.result.R
import team.duckie.app.android.feature.ui.exam.result.common.LoadingIndicator
import team.duckie.app.android.feature.ui.exam.result.common.ResultBottomBar
import team.duckie.app.android.feature.ui.exam.result.screen.exam.ExamResultContent
import team.duckie.app.android.feature.ui.exam.result.screen.quiz.QuizResultContent
import team.duckie.app.android.feature.ui.exam.result.viewmodel.ExamResultState
import team.duckie.app.android.feature.ui.exam.result.viewmodel.ExamResultViewModel
import team.duckie.app.android.shared.ui.compose.ErrorScreen
import team.duckie.app.android.shared.ui.compose.quack.QuackCrossfade
import team.duckie.app.android.util.compose.activityViewModel
import team.duckie.quackquack.ui.border.QuackBorder
import team.duckie.quackquack.ui.color.QuackColor
import team.duckie.quackquack.ui.component.QuackImage
import team.duckie.quackquack.ui.component.QuackSmallButton
import team.duckie.quackquack.ui.component.QuackSmallButtonType
import team.duckie.quackquack.ui.component.QuackSubtitle
import team.duckie.quackquack.ui.component.QuackSurface
import team.duckie.quackquack.ui.component.QuackTopAppBar
import team.duckie.quackquack.ui.icon.QuackIcon

Expand Down Expand Up @@ -70,54 +58,37 @@ internal fun ExamResultScreen(
)
},
bottomBar = {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(
horizontal = 20.dp,
vertical = 12.dp,
),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(space = 8.dp),
) {
GrayBorderSmallButton(
modifier = Modifier
.heightIn(min = 44.dp)
.weight(1f),
text = stringResource(id = R.string.solve_retry),
onClick = { // TODO(EvergreenTree97) 해당 시험 본 적 있는지 플래그 생기면 enabled 설정 해야함
viewModel.clickRetry(activity.getString(R.string.feature_prepare))
},
)
QuackSmallButton(
modifier = Modifier
.heightIn(44.dp)
.weight(1f),
type = QuackSmallButtonType.Fill,
text = stringResource(id = R.string.exit_exam),
enabled = true,
onClick = viewModel::exitExam,
)
}
ResultBottomBar(
onClickRetryButton = {
viewModel.clickRetry(activity.getString(R.string.feature_prepare))
},
onClickExitButton = viewModel::exitExam,
)
},
) { padding ->
QuackCrossfade(targetState = state) {
QuackCrossfade(
modifier = Modifier
.fillMaxSize()
.padding(padding),
targetState = state,
) {
when (it) {
is ExamResultState.Loading -> {
LoadingIndicator()
}

is ExamResultState.Success -> {
Box(
modifier = Modifier
.fillMaxSize()
.padding(padding)
.padding(all = 16.dp),
contentAlignment = Alignment.Center,
) {
QuackImage(
modifier = Modifier.fillMaxSize(),
src = it.reportUrl,
if (it.isQuiz) {
QuizResultContent(
resultImageUrl = it.reportUrl,
correctProblemCount = 1,
time = 2,
mainTag = "메인",
rank = 3,
)
} else {
ExamResultContent(
resultImageUrl = it.reportUrl,
)
}
}
Expand All @@ -133,38 +104,3 @@ internal fun ExamResultScreen(
}
}
}

@Composable
internal fun GrayBorderSmallButton(
modifier: Modifier = Modifier,
text: String,
onClick: () -> Unit,
) {
QuackSurface(
modifier = modifier,
backgroundColor = QuackColor.White,
border = QuackBorder(color = QuackColor.Gray3),
shape = RoundedCornerShape(size = 8.dp),
onClick = onClick,
) {
QuackSubtitle(
modifier = Modifier.padding(
vertical = 12.dp,
horizontal = 12.dp,
),
text = text,
singleLine = true,
)
}
}

// TODO(EvergreenTree97): QuackLoadingIndicator로 통합 필요
@Composable
internal fun LoadingIndicator() {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center,
) {
CircularProgressIndicator(color = QuackColor.DuckieOrange.composeColor)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*
* Designed and developed by Duckie Team, 2022
*
* Licensed under the MIT.
* Please see full license: https://github.com/duckie-team/duckie-android/blob/develop/LICENSE
*/

package team.duckie.app.android.feature.ui.exam.result.screen.exam

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import team.duckie.quackquack.ui.component.QuackImage

@Composable
internal fun ExamResultContent(
resultImageUrl: String,
) {
Box(
modifier = Modifier
.fillMaxSize()
.padding(all = 16.dp),
contentAlignment = Alignment.Center,
) {
QuackImage(
modifier = Modifier.fillMaxSize(),
src = resultImageUrl,
)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/*
* Designed and developed by Duckie Team, 2022
*
* Licensed under the MIT.
* Please see full license: https://github.com/duckie-team/duckie-android/blob/develop/LICENSE
*/

package team.duckie.app.android.feature.ui.exam.result.screen.quiz

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import kotlinx.collections.immutable.persistentListOf
import team.duckie.app.android.feature.ui.exam.result.R
import team.duckie.app.android.shared.ui.compose.QuackAnnotatedText
import team.duckie.app.android.shared.ui.compose.Spacer
import team.duckie.app.android.util.kotlin.toHourMinuteSecond
import team.duckie.quackquack.ui.component.QuackBody1
import team.duckie.quackquack.ui.component.QuackDivider
import team.duckie.quackquack.ui.component.QuackImage
import team.duckie.quackquack.ui.textstyle.QuackTextStyle

@Composable
internal fun QuizResultContent(
resultImageUrl: String,
time: Int,
correctProblemCount: Int,
mainTag: String,
rank: Int,
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(all = 16.dp),
) {
QuackImage(
modifier = Modifier.fillMaxWidth(),
src = resultImageUrl,
)
Spacer(space = 28.dp)
QuackDivider()
Spacer(space = 20.dp)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
) {
QuackBody1(text = stringResource(id = R.string.total_time))
QuackBody1(text = time.toHourMinuteSecond())
}
Spacer(space = 8.dp)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
) {
QuackBody1(text = stringResource(id = R.string.correct_problem))
QuackBody1(
text = stringResource(
id = R.string.correct_problem_unit,
correctProblemCount.toString(),
),
)
}
Spacer(space = 28.dp)
QuackAnnotatedText(
text = stringResource(id = R.string.rank_by_tag, mainTag, rank.toString()),
highlightTextPairs = persistentListOf(
mainTag to null,
rank.toString() to null,
),
style = QuackTextStyle.HeadLine1,
)
Spacer(space = 38.dp)
}
}
Loading

0 comments on commit 64e8890

Please sign in to comment.