-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/#52 mypage followlist #65
Changes from 5 commits
8369831
3e3da7f
506c415
1083f43
e8a000e
09d95f6
cbe8690
2289fec
b2ce561
e9d9421
623b09e
9a84322
d4289e2
f11075a
b8da2b8
2e048ce
0624c2d
49d6fd6
cf74710
5c341d6
bfa1dc7
d0c31dd
865ebd2
41a66eb
99ce8b3
7f491e3
640f724
2ae2b1f
5934950
c19179a
8268879
bbd80b2
5c83353
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
package com.record.designsystem.component.button | ||
|
||
import androidx.compose.foundation.layout.PaddingValues | ||
import androidx.compose.foundation.shape.RoundedCornerShape | ||
import androidx.compose.material3.Button | ||
import androidx.compose.material3.ButtonDefaults | ||
import androidx.compose.material3.Text | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.graphics.Color | ||
import androidx.compose.ui.tooling.preview.Preview | ||
import androidx.compose.ui.unit.dp | ||
import com.record.designsystem.theme.RecordyTheme | ||
|
||
@Composable | ||
fun FollowButton( | ||
isFollowing: Boolean, | ||
onClick: () -> Unit, | ||
) { | ||
val colors = getButtonAndTextColor(isFollowing) | ||
|
||
Button( | ||
onClick = onClick, | ||
colors = ButtonDefaults.buttonColors( | ||
containerColor = colors.first, | ||
), | ||
shape = RoundedCornerShape(8.dp), | ||
contentPadding = PaddingValues(horizontal = 20.dp, vertical = 8.dp), | ||
) { | ||
Text( | ||
text = if (isFollowing) "ํ๋ก์" else "ํ๋ก์ฐ", | ||
color = colors.second, | ||
style = RecordyTheme.typography.button2, | ||
) | ||
} | ||
} | ||
|
||
@Composable | ||
fun getButtonAndTextColor(isFollowed: Boolean): Pair<Color, Color> { | ||
return if (isFollowed) { | ||
Pair(RecordyTheme.colors.gray08, RecordyTheme.colors.white) | ||
} else { | ||
Pair(RecordyTheme.colors.white, RecordyTheme.colors.gray08) | ||
} | ||
} | ||
Comment on lines
+38
to
+44
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ํ ์คํธ์ ๋ฒํผ์ ์ปฌ๋ฌ๋ฅผ ํ๋๋ก Pair ๋ฅผ ํ์ฉํด์ ๋ฐ๋๊ฑด ์๊ฐ ๋ชปํด๋ดค๋๋ฐ ์ ์ดํด๋ณด๊ณ ๊ฐ์ |
||
|
||
@Preview(showBackground = true) | ||
@Composable | ||
fun FollowButtonPreview() { | ||
RecordyTheme { | ||
FollowButton( | ||
isFollowing = false, | ||
onClick = {}, | ||
) | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,11 +8,12 @@ import androidx.compose.material3.ButtonDefaults | |
import androidx.compose.material3.Text | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.tooling.preview.Preview | ||
import androidx.compose.ui.unit.dp | ||
import com.record.designsystem.theme.RecordyTheme | ||
|
||
@Composable | ||
fun RecordyButton( | ||
fun RecordyButtonLarge( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ์ด๋ฆ ๋ณ๊ฒฝ์ผ๋ก ์ธํด conflict๊ฐ ๋๊ฑฐ ๊ฐ์์ rebase๋ฅผ ํตํด ํ๋๋ก ํต์ผํ์
์ผํ ๊ฑฐ ๊ฐ์์ There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ํด๊ฒฐ์๋ฃ ๊ฐ์ฌํฉ๋๋น |
||
text: String, | ||
enabled: Boolean, | ||
onClick: () -> Unit, | ||
|
@@ -40,3 +41,15 @@ fun RecordyButton( | |
) | ||
} | ||
} | ||
|
||
@Composable | ||
@Preview(showBackground = true) | ||
private fun RecordyButtonPreview() { | ||
RecordyTheme { | ||
RecordyButtonLarge( | ||
text = "Click Me", | ||
enabled = true, | ||
onClick = {}, | ||
) | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
package com.record.designsystem.component.button | ||
|
||
import androidx.compose.foundation.layout.fillMaxWidth | ||
import androidx.compose.foundation.layout.padding | ||
import androidx.compose.foundation.shape.RoundedCornerShape | ||
import androidx.compose.material3.Button | ||
import androidx.compose.material3.ButtonDefaults | ||
import androidx.compose.material3.Text | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.tooling.preview.Preview | ||
import androidx.compose.ui.unit.dp | ||
import com.record.designsystem.theme.RecordyTheme | ||
|
||
@Composable | ||
fun RecordyButtonMedium( | ||
text: String, | ||
enabled: Boolean, | ||
onClick: () -> Unit, | ||
modifier: Modifier = Modifier, | ||
) { | ||
Button( | ||
onClick = onClick, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. CustomClickable๋ง๋ค์ด ๋์ ๊ฑฐ ์ฌ์ฉํด์ ๋ฆฌํ๊ฐ์ ๊ฒ๋ ๊ณ ๋ฃํ๋ฉด ๋์ฑ ์ข์๊ฑฐ ๊ฐ์ต๋๋ค. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ๋ต ๊ฐ์ฌํฉ๋๋น |
||
enabled = enabled, | ||
|
||
colors = ButtonDefaults.buttonColors( | ||
containerColor = RecordyTheme.colors.main, | ||
contentColor = RecordyTheme.colors.gray09, | ||
disabledContainerColor = RecordyTheme.colors.gray08, | ||
disabledContentColor = RecordyTheme.colors.gray04, | ||
), | ||
|
||
shape = RoundedCornerShape(8.dp), | ||
modifier = modifier | ||
.fillMaxWidth() | ||
.padding(horizontal = 16.dp), | ||
) { | ||
Text( | ||
text = text, | ||
style = RecordyTheme.typography.button1, | ||
) | ||
} | ||
} | ||
|
||
@Composable | ||
@Preview(showBackground = true) | ||
private fun RecordyButtonPreview() { | ||
RecordyTheme { | ||
RecordyButtonMedium( | ||
text = "Click Me", | ||
enabled = true, | ||
onClick = {}, | ||
) | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
package com.record.model | ||
|
||
data class UserData( | ||
val id: Int, | ||
val profileImage: String, | ||
val name: String, | ||
val isFollowing: Boolean, | ||
) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
package com.record.mypage | ||
|
||
import android.util.Log | ||
import androidx.compose.foundation.background | ||
import androidx.compose.foundation.layout.Box | ||
import androidx.compose.foundation.layout.PaddingValues | ||
import androidx.compose.foundation.layout.fillMaxSize | ||
import androidx.compose.foundation.layout.padding | ||
import androidx.compose.foundation.lazy.LazyColumn | ||
import androidx.compose.foundation.lazy.items | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.runtime.LaunchedEffect | ||
import androidx.compose.runtime.getValue | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.tooling.preview.Preview | ||
import androidx.hilt.navigation.compose.hiltViewModel | ||
import androidx.lifecycle.compose.collectAsStateWithLifecycle | ||
import com.record.designsystem.theme.RecordyTheme | ||
import com.record.model.UserData | ||
import kotlinx.coroutines.flow.collectLatest | ||
|
||
@Composable | ||
fun FollowRoute( | ||
padding: PaddingValues, | ||
modifier: Modifier = Modifier, | ||
viewModel: FollowViewModel = hiltViewModel(), | ||
) { | ||
val uiState by viewModel.uiState.collectAsStateWithLifecycle() | ||
|
||
LaunchedEffect(Unit) { | ||
viewModel.sideEffect.collectLatest { sideEffect -> | ||
when (sideEffect) { | ||
is FollowSideEffect.Following -> { | ||
Log.d("FollowRoute", "$sideEffect") | ||
} | ||
|
||
is FollowSideEffect.UnFollowing -> { | ||
Log.d("FollowRoute", "$sideEffect") | ||
} | ||
} | ||
} | ||
} | ||
|
||
Box( | ||
modifier = modifier | ||
.fillMaxSize() | ||
.background(RecordyTheme.colors.background) | ||
.padding(padding), | ||
) { | ||
FollowScreen( | ||
state = uiState, | ||
onClick = { user -> viewModel.toggleFollow(user) }, | ||
) | ||
} | ||
} | ||
|
||
@Composable | ||
fun FollowScreen(state: FollowState, onClick: (UserData) -> Unit) { | ||
LazyColumn( | ||
modifier = Modifier.fillMaxSize(), | ||
) { | ||
items(state.userList) { user -> | ||
UserDataContainer( | ||
user = user, | ||
onClick = onClick, | ||
) | ||
} | ||
} | ||
} | ||
|
||
@Preview(showBackground = true) | ||
@Composable | ||
private fun PreviewFollowScreen() { | ||
val sampleState = FollowState() | ||
RecordyTheme { | ||
FollowScreen(state = sampleState, onClick = {}) | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
package com.record.mypage | ||
|
||
import com.record.model.UserData | ||
import com.record.ui.base.SideEffect | ||
import com.record.ui.base.UiState | ||
|
||
data class FollowState( | ||
val userList: List<UserData> = listOf( | ||
UserData(id = 1, profileImage = "https://via.placeholder.com/150", name = "John Doe", isFollowing = false), | ||
UserData(id = 2, profileImage = "https://via.placeholder.com/150", name = "Jane Smith", isFollowing = false), | ||
UserData(id = 3, profileImage = "https://via.placeholder.com/150", name = "Alice Johnson", isFollowing = false), | ||
UserData(id = 4, profileImage = "https://via.placeholder.com/150", name = "Bob Brown", isFollowing = false), | ||
), | ||
) : UiState | ||
|
||
sealed interface FollowSideEffect : SideEffect { | ||
data object Following : FollowSideEffect | ||
data object UnFollowing : FollowSideEffect | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
package com.record.mypage | ||
|
||
import androidx.lifecycle.viewModelScope | ||
import com.record.model.UserData | ||
import com.record.ui.base.BaseViewModel | ||
import dagger.hilt.android.lifecycle.HiltViewModel | ||
import kotlinx.coroutines.launch | ||
import javax.inject.Inject | ||
|
||
@HiltViewModel | ||
class FollowViewModel @Inject constructor() : BaseViewModel<FollowState, FollowSideEffect>(FollowState()) { | ||
|
||
fun toggleFollow(user: UserData) { | ||
intent { | ||
val newList = uiState.value.userList.toMutableList() | ||
val index = newList.indexOfFirst { it.id == user.id } | ||
if (index >= 0) { | ||
val updatedUser = newList[index].copy(isFollowing = !newList[index].isFollowing) | ||
newList[index] = updatedUser | ||
} | ||
|
||
copy(userList = newList) | ||
} | ||
|
||
viewModelScope.launch { | ||
if (user.isFollowing) { | ||
postSideEffect(FollowSideEffect.Following) | ||
} else { | ||
postSideEffect(FollowSideEffect.UnFollowing) | ||
} | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
package com.record.mypage | ||
|
||
import androidx.compose.foundation.Image | ||
import androidx.compose.foundation.background | ||
import androidx.compose.foundation.layout.Row | ||
import androidx.compose.foundation.layout.Spacer | ||
import androidx.compose.foundation.layout.fillMaxWidth | ||
import androidx.compose.foundation.layout.padding | ||
import androidx.compose.foundation.layout.size | ||
import androidx.compose.foundation.shape.CircleShape | ||
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.tooling.preview.Preview | ||
import androidx.compose.ui.unit.dp | ||
import coil.compose.AsyncImagePainter.State.Empty.painter | ||
import coil.compose.rememberAsyncImagePainter | ||
import com.record.designsystem.component.button.FollowButton | ||
import com.record.designsystem.theme.RecordyTheme | ||
import com.record.model.UserData | ||
|
||
@Composable | ||
fun UserDataContainer(user: UserData, onClick: (UserData) -> Unit) { | ||
Row( | ||
modifier = Modifier | ||
.background(RecordyTheme.colors.background) | ||
.fillMaxWidth(), | ||
verticalAlignment = Alignment.CenterVertically, | ||
) { | ||
Image( | ||
painter = rememberAsyncImagePainter(user.profileImage), | ||
contentDescription = null, | ||
modifier = Modifier | ||
.padding(vertical = 10.dp, horizontal = 16.dp) | ||
.size(54.dp) | ||
.clip(CircleShape), | ||
) | ||
Text( | ||
text = user.name, | ||
style = RecordyTheme.typography.body1M, | ||
color = RecordyTheme.colors.white, | ||
) | ||
Spacer(modifier = Modifier.weight(1f)) | ||
FollowButton( | ||
isFollowing = user.isFollowing, | ||
onClick = { onClick(user) }, | ||
) | ||
Spacer(modifier = Modifier.size(16.dp)) | ||
} | ||
} | ||
|
||
@Preview(showBackground = true) | ||
@Composable | ||
fun UserDataContainerPreview() { | ||
val sampleUser = UserData( | ||
id = 1, | ||
profileImage = "https://via.placeholder.com/150", | ||
name = "John Doe", | ||
isFollowing = false, | ||
) | ||
RecordyTheme { | ||
UserDataContainer(user = sampleUser, onClick = {}) | ||
} | ||
} |
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.
์๋ฌํ ๋ถ๋ถ๋ค stalessํ๊ฒ ํธ์ด์คํ ํด๋ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค
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.
๊ฐ์ฌํฉ๋๋ค!!!