[Feat/#23] 프로필 화면 UI 구현 #24
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| package com.poti.android.presentation.user.component | ||
|
|
||
| import androidx.compose.foundation.background | ||
| import androidx.compose.foundation.layout.Arrangement | ||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.Row | ||
| import androidx.compose.foundation.layout.heightIn | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.foundation.layout.size | ||
| import androidx.compose.foundation.shape.CircleShape | ||
| import androidx.compose.material3.Icon | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Alignment | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.draw.clip | ||
| import androidx.compose.ui.graphics.vector.ImageVector | ||
| import androidx.compose.ui.res.vectorResource | ||
| import androidx.compose.ui.tooling.preview.Preview | ||
| import androidx.compose.ui.unit.dp | ||
| import com.poti.android.R | ||
| import com.poti.android.core.common.extension.noRippleClickable | ||
| import com.poti.android.core.designsystem.theme.PotiTheme | ||
|
|
||
| @Composable | ||
| fun BadgeButton( | ||
| bias: String, | ||
| onClick: () -> Unit, | ||
| modifier: Modifier = Modifier, | ||
| ) { | ||
| Row( | ||
| modifier = modifier | ||
| .heightIn(min = 40.dp) | ||
| .clip(CircleShape) | ||
| .background(PotiTheme.colors.poti200) | ||
| .noRippleClickable(onClick) | ||
| .padding(vertical = 8.dp) | ||
| .padding(start = 16.dp, end = 8.dp), | ||
| horizontalArrangement = Arrangement.Center, | ||
| verticalAlignment = Alignment.CenterVertically, | ||
| ) { | ||
| Text( | ||
| text = bias, | ||
| color = PotiTheme.colors.poti800, | ||
| style = PotiTheme.typography.body14m, | ||
| ) | ||
|
|
||
| Icon( | ||
| imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_right_sm), | ||
| contentDescription = null, | ||
| modifier = Modifier.size(20.dp), | ||
| tint = PotiTheme.colors.poti800, | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| @Preview(showBackground = true) | ||
| @Composable | ||
| private fun BadgeButtonPreview() { | ||
| PotiTheme { | ||
| Column( | ||
| modifier = Modifier.padding(16.dp), | ||
| verticalArrangement = Arrangement.spacedBy(12.dp), | ||
| ) { | ||
| BadgeButton( | ||
| bias = "나의 최애 선택하기", | ||
| onClick = {}, | ||
| modifier = Modifier, | ||
| ) | ||
|
|
||
| BadgeButton( | ||
| bias = "아이브", | ||
| onClick = {}, | ||
| modifier = Modifier, | ||
| ) | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,183 @@ | ||
| package com.poti.android.presentation.user.component | ||
|
|
||
| import androidx.compose.foundation.background | ||
| import androidx.compose.foundation.interaction.MutableInteractionSource | ||
| import androidx.compose.foundation.interaction.collectIsPressedAsState | ||
| import androidx.compose.foundation.layout.Arrangement | ||
| import androidx.compose.foundation.layout.Box | ||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.Row | ||
| import androidx.compose.foundation.layout.Spacer | ||
| import androidx.compose.foundation.layout.fillMaxWidth | ||
| import androidx.compose.foundation.layout.height | ||
| import androidx.compose.foundation.layout.heightIn | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.foundation.layout.width | ||
| import androidx.compose.foundation.layout.widthIn | ||
| import androidx.compose.foundation.shape.RoundedCornerShape | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.getValue | ||
| import androidx.compose.runtime.remember | ||
| import androidx.compose.runtime.setValue | ||
| import androidx.compose.ui.Alignment | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.draw.clip | ||
| import androidx.compose.ui.tooling.preview.Preview | ||
| import androidx.compose.ui.unit.dp | ||
| import com.poti.android.core.common.extension.noRippleClickable | ||
| import com.poti.android.core.designsystem.theme.PotiTheme | ||
|
|
||
| enum class HistorySummaryType { | ||
|
Contributor
Author
There was a problem hiding this comment. 음 서버 연결할 때 쓰일까봐 만들어뒀는데 지금은 안 쓰이니까 일단 지울게용 |
||
| PARTICIPATED_ALL, | ||
| PARTICIPATED_IN_PROGRESS, | ||
| PARTICIPATED_FINISHED, | ||
| RECRUITED_ALL, | ||
| RECRUITED_IN_PROGRESS, | ||
| RECRUITED_FINISHED, | ||
| } | ||
|
Comment on lines
+33
to
+37
Contributor
There was a problem hiding this comment. P1: 이거 participated, recruited 안 나누고 all, in progress, finished 로만 해서 HistorySummaryCard 에 entires.forEach로 하면 HistoryItem 각각 안 넣어줘도 될 것 같네욤 |
||
|
|
||
| @Composable | ||
| fun HistorySummaryCard( | ||
| title: String, | ||
| totalCount: Int, | ||
| inProgressCount: Int, | ||
| finishedCount: Int, | ||
| modifier: Modifier = Modifier, | ||
| ) { | ||
| Column( | ||
| modifier = modifier | ||
| .widthIn(min = 328.dp), | ||
|
||
| verticalArrangement = Arrangement.Center, | ||
| horizontalAlignment = Alignment.Start, | ||
| ) { | ||
| Text( | ||
| text = title, | ||
| color = PotiTheme.colors.black, | ||
| style = PotiTheme.typography.body16sb, | ||
| ) | ||
|
|
||
| Spacer(Modifier.height(12.dp)) | ||
|
|
||
| Row( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .clip(RoundedCornerShape(12.dp)) | ||
| .background(PotiTheme.colors.gray100) | ||
| .padding(8.dp), | ||
| horizontalArrangement = Arrangement.SpaceBetween, | ||
|
||
| verticalAlignment = Alignment.CenterVertically, | ||
| ) { | ||
| HistoryItem( | ||
| title = "전체", | ||
|
||
| count = totalCount, | ||
| onClick = { }, | ||
|
||
| modifier = Modifier.weight(1f), | ||
| ) | ||
|
|
||
| DividerSm( | ||
| modifier = Modifier | ||
| .height(56.dp) | ||
| .padding(horizontal = 8.dp), | ||
| ) | ||
|
|
||
| HistoryItem( | ||
| title = "진행중", | ||
| count = inProgressCount, | ||
| onClick = { }, | ||
| modifier = Modifier.weight(1f), | ||
| ) | ||
|
|
||
| DividerSm( | ||
| modifier = Modifier | ||
| .height(56.dp) | ||
| .padding(horizontal = 8.dp), | ||
| ) | ||
|
|
||
| HistoryItem( | ||
| title = "종료", | ||
| count = finishedCount, | ||
| onClick = { }, | ||
| modifier = Modifier.weight(1f), | ||
| ) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @Composable | ||
| private fun HistoryItem( | ||
| title: String, | ||
| count: Int, | ||
| onClick: () -> Unit, | ||
| modifier: Modifier = Modifier, | ||
| ) { | ||
| val interactionSource = remember { MutableInteractionSource() } | ||
| val isPressed by interactionSource.collectIsPressedAsState() | ||
| val backgroundColor = if (isPressed) PotiTheme.colors.gray300 else PotiTheme.colors.gray100 | ||
|
|
||
| Column( | ||
| modifier = modifier | ||
| .heightIn(88.dp) | ||
| .widthIn(92.dp) | ||
| .clip(RoundedCornerShape(12.dp)) | ||
| .background(backgroundColor) | ||
| .noRippleClickable( | ||
| interactionSource = interactionSource, | ||
| onClick = onClick, | ||
| ) | ||
| .padding(vertical = 8.dp), | ||
| horizontalAlignment = Alignment.CenterHorizontally, | ||
| verticalArrangement = Arrangement.Center, | ||
| ) { | ||
| Text( | ||
| text = count.toString(), | ||
| color = PotiTheme.colors.poti600, | ||
| style = PotiTheme.typography.title18sb, | ||
| ) | ||
| Spacer(modifier = Modifier.height(8.dp)) | ||
|
||
| Text( | ||
| text = title, | ||
| color = PotiTheme.colors.gray800, | ||
| style = PotiTheme.typography.caption12m, | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| // TODO: [예림] 공통 컴포넌트로 변경 | ||
| @Composable | ||
| private fun DividerSm( | ||
| modifier: Modifier = Modifier, | ||
| ) { | ||
| Box( | ||
| modifier = modifier | ||
| .width(1.dp) | ||
| .background(PotiTheme.colors.gray300), | ||
| ) | ||
| } | ||
|
|
||
| @Preview(showBackground = true) | ||
| @Composable | ||
| private fun HistorySummaryCardPreview() { | ||
| PotiTheme { | ||
| Column( | ||
| modifier = Modifier.padding(16.dp), | ||
| verticalArrangement = Arrangement.spacedBy(12.dp), | ||
| ) { | ||
| HistorySummaryCard( | ||
| title = "참여 내역", | ||
| totalCount = 3, | ||
| inProgressCount = 2, | ||
| finishedCount = 1, | ||
| modifier = Modifier.width(328.dp), | ||
| ) | ||
|
|
||
| HistorySummaryCard( | ||
| title = "참여 내역", | ||
| totalCount = 3, | ||
| inProgressCount = 2, | ||
| finishedCount = 1, | ||
| modifier = Modifier.width(440.dp), | ||
| ) | ||
| } | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| package com.poti.android.presentation.user.component | ||
|
|
||
| import androidx.compose.foundation.background | ||
| import androidx.compose.foundation.layout.Arrangement | ||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.Row | ||
| import androidx.compose.foundation.layout.heightIn | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.foundation.layout.width | ||
| import androidx.compose.foundation.shape.CircleShape | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Alignment | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.draw.clip | ||
| import androidx.compose.ui.tooling.preview.Preview | ||
| import androidx.compose.ui.unit.dp | ||
| import com.poti.android.core.common.extension.noRippleClickable | ||
| import com.poti.android.core.designsystem.component.display.PotiRating | ||
| import com.poti.android.core.designsystem.theme.PotiTheme | ||
|
|
||
| @Composable | ||
| fun RatingBadge( | ||
| rating: String, | ||
| onClick: () -> Unit, | ||
|
||
| modifier: Modifier = Modifier, | ||
| ) { | ||
| Row( | ||
| modifier = modifier | ||
| .heightIn(min = 40.dp) | ||
| .clip(CircleShape) | ||
| .background(PotiTheme.colors.black) | ||
| .noRippleClickable(onClick) | ||
| .padding(horizontal = 12.dp, vertical = 8.dp), | ||
|
Contributor
There was a problem hiding this comment. p1: 여기도 develop 풀 받음 기기 대응 확장함수 적용해야할 듯 해요!!
Contributor
There was a problem hiding this comment. P1: 근데 이런 조그만 버튼이나 컴포넌트들은 굳이 안 해도 될 듯!! |
||
| horizontalArrangement = Arrangement.Start, | ||
| verticalAlignment = Alignment.CenterVertically, | ||
| ) { | ||
| PotiRating( | ||
| rating = rating, | ||
| iconTint = PotiTheme.colors.poti200, | ||
| textColor = PotiTheme.colors.poti200, | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| @Preview(showBackground = true) | ||
| @Composable | ||
| private fun RatingBadgePreview() { | ||
| PotiTheme { | ||
| Column( | ||
| modifier = Modifier.padding(16.dp), | ||
| verticalArrangement = Arrangement.spacedBy(12.dp), | ||
| ) { | ||
| RatingBadge( | ||
| rating = "4.8", | ||
| onClick = {}, | ||
| modifier = Modifier.width(71.dp), | ||
| ) | ||
| } | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
P1: navGraph에는 navController를 직접 넘기고 그래프가 각 Route에 내비게이션 이벤트를 전달하도록 하는 것 더 확장성 있을 것 같습니당