Feature/#52 mypage followlist

core/designsystem/src/main/java/com/record/designsystem/component/button/FollowButton.kt

@@ -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)
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun FollowButtonPreview() {
+    RecordyTheme {
+        FollowButton(
+            isFollowing = false,
+            onClick = {},
+        )
+    }
+}

core/designsystem/src/main/java/com/record/designsystem/component/button/RecordyButton.kt

@@ -1,42 +1,45 @@
 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.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.record.designsystem.theme.RecordyTheme
 
 @Composable
 fun RecordyButton(
     text: String,
+    containerColor: Color = RecordyTheme.colors.main,
+    contentColor: Color = RecordyTheme.colors.gray09,
+    textStyle: TextStyle = RecordyTheme.typography.button1,
+    cornerShape: Dp = 12.dp,
     enabled: Boolean,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Button(
         onClick = onClick,
         enabled = enabled,
-
         colors = ButtonDefaults.buttonColors(
-            containerColor = RecordyTheme.colors.main,
-            contentColor = RecordyTheme.colors.gray09,
+            containerColor = containerColor,
+            contentColor = contentColor,
             disabledContainerColor = RecordyTheme.colors.gray08,
             disabledContentColor = RecordyTheme.colors.gray04,
         ),
-
-        shape = RoundedCornerShape(12.dp),
+        shape = RoundedCornerShape(cornerShape),
         modifier = modifier
-            .fillMaxWidth()
-            .padding(horizontal = 16.dp),
+            .fillMaxWidth(),
     ) {
         Text(
             text = text,
-            style = RecordyTheme.typography.button1,
+            style = textStyle,
         )
     }
 }

core/model/src/main/java/com/record/model/UserData.kt

@@ -0,0 +1,8 @@
+package com.record.model
+
+data class UserData(
+    val id: Int,
+    val profileImage: String,
+    val name: String,
+    val isFollowing: Boolean,
+)

feature/mypage/src/main/java/com/record/mypage/FollowScreen.kt

@@ -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 = {})
+    }
+}

feature/mypage/src/main/java/com/record/mypage/FollowState.kt

@@ -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
+}

feature/mypage/src/main/java/com/record/mypage/FollowViewModel.kt

@@ -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)
+            }
+        }
+    }
+}

feature/mypage/src/main/java/com/record/mypage/UserDataContainer.kt

@@ -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 = {})
+    }
+}