Feature/#72 others profile

feature/mypage/src/main/java/com/record/mypage/UserDataContainer.kt → core/designsystem/src/main/java/com/record/designsystem/component/container/UserDataContainer.kt

@@ -1,4 +1,4 @@
-package com.record.mypage
+package com.record.designsystem.component.container
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background

core/designsystem/src/main/java/com/record/designsystem/theme/Typography.kt

@@ -29,6 +29,7 @@ class RecordyTypography internal constructor(
     body1M: TextStyle,
     body1R: TextStyle,
     body2M: TextStyle,
+    body2B: TextStyle,
     body2L: TextStyle,
     caption1: TextStyle,
     caption1U: TextStyle,
@@ -60,6 +61,8 @@ class RecordyTypography internal constructor(
         private set
     var body2M: TextStyle by mutableStateOf(body2M)
         private set
+    var body2B: TextStyle by mutableStateOf(body2B)
+        private set
     var body2L: TextStyle by mutableStateOf(body2L)
         private set
     var caption1: TextStyle by mutableStateOf(caption1)
@@ -97,6 +100,7 @@ class RecordyTypography internal constructor(
         body1M: TextStyle = this.body1M,
         body1R: TextStyle = this.body1R,
         body2M: TextStyle = this.body2M,
+        body2B: TextStyle = this.body2B,
         body2L: TextStyle = this.body2L,
         caption1: TextStyle = this.caption1,
         caption1U: TextStyle = this.caption1U,
@@ -120,6 +124,7 @@ class RecordyTypography internal constructor(
         body1M,
         body1R,
         body2M,
+        body2B,
         body2L,
         caption1,
         caption1U,
@@ -145,6 +150,7 @@ class RecordyTypography internal constructor(
         body1M = other.body1M
         body1R = other.body1R
         body2M = other.body2M
+        body2B = other.body2B
         body2L = other.body2L
         caption1 = other.caption1
         caption1U = other.caption1U
@@ -208,6 +214,12 @@ fun RecordyTypography(): RecordyTypography {
             lineHeight = 20.sp,
             letterSpacing = (-0.5).sp,
         ),
+        body2B = TextStyle(
+            fontFamily = PretendardBold,
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            letterSpacing = (-0.5).sp,
+        ),
         body2L = TextStyle(
             fontFamily = PretendardMedium,
             fontSize = 14.sp,

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

@@ -1,11 +1,12 @@
-package com.record.mypage
+package com.record.mypage.follow
 
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import com.record.designsystem.component.container.UserDataContainer
 import com.record.designsystem.theme.RecordyTheme
 import com.record.model.UserData
 import kotlinx.collections.immutable.ImmutableList

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

@@ -1,4 +1,4 @@
-package com.record.mypage
+package com.record.mypage.follow
 
 import com.record.model.UserData
 import com.record.ui.base.SideEffect

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

@@ -1,4 +1,4 @@
-package com.record.mypage
+package com.record.mypage.follow
 
 import androidx.lifecycle.viewModelScope
 import com.record.model.UserData
@@ -10,7 +10,9 @@ import kotlinx.coroutines.launch
 import javax.inject.Inject
 
 @HiltViewModel
-class FollowViewModel @Inject constructor() : BaseViewModel<FollowState, FollowSideEffect>(FollowState()) {
+class FollowViewModel @Inject constructor() : BaseViewModel<FollowState, FollowSideEffect>(
+    FollowState(),
+) {
 
     fun toggleFollow(user: UserData) {
         intent {

feature/mypage/src/main/java/com/record/mypage/FollowerScreen.kt → feature/mypage/src/main/java/com/record/mypage/follow/FollowerScreen.kt

@@ -1,11 +1,13 @@
-package com.record.mypage
+package com.record.mypage.follow
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -14,10 +16,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import coil.compose.rememberAsyncImagePainter
 import com.record.designsystem.theme.RecordyTheme
 import com.record.ui.lifecycle.LaunchedEffectWithLifecycle
 import kotlinx.coroutines.flow.collectLatest
@@ -71,17 +74,32 @@ fun EmptyFollowerScreen() {
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            Image(
-                painter = rememberAsyncImagePainter("https://picsum.photos/id/200/200"),
-                contentDescription = null,
-                modifier = Modifier.size(120.dp),
-            )
+            Row() {
+                Spacer(modifier = Modifier.weight(13f))
+                Image(
+                    painter = painterResource(com.record.designsystem.R.drawable.img_no_follower),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .weight(10f)
+                        .aspectRatio(1f),
+                )
+                Spacer(modifier = Modifier.weight(13f))
+            }
+
             Spacer(modifier = Modifier.size(32.dp))
             Text(
-                text = "아직 팔로우하는 사람이 없어요",
-                style = RecordyTheme.typography.body2M,
+                text = "아직 팔로워가 없어요",
+                style = RecordyTheme.typography.emptybody,
                 color = RecordyTheme.colors.white,
             )
         }
     }
 }
+
+@Preview
+@Composable
+fun PreviewEmptyFollowerScreen() {
+    RecordyTheme {
+        EmptyFollowerScreen()
+    }
+}

feature/mypage/src/main/java/com/record/mypage/FollowingScreen.kt → feature/mypage/src/main/java/com/record/mypage/follow/FollowingScreen.kt

@@ -1,15 +1,19 @@
-package com.record.mypage
+package com.record.mypage.follow
 
 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.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.component.container.UserDataContainer
 import com.record.designsystem.theme.RecordyTheme
 import com.record.model.UserData
 import com.record.ui.lifecycle.LaunchedEffectWithLifecycle
@@ -21,7 +25,7 @@ fun FollowingRoute(
     modifier: Modifier = Modifier,
     viewModel: FollowViewModel = hiltViewModel(),
 ) {
-    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    val followState by viewModel.uiState.collectAsStateWithLifecycle()
 
     LaunchedEffectWithLifecycle(Unit) {
         viewModel.sideEffect.collectLatest { sideEffect ->
@@ -41,27 +45,37 @@ fun FollowingRoute(
             .background(RecordyTheme.colors.background)
             .padding(padding),
     ) {
-        if (uiState.followingList.isEmpty()) {
-            EmptyFollowingScreen()
-        } else {
-            FollowScreen(
-                followingList = uiState.followingList,
-                onClick = { user -> viewModel.toggleFollow(user) },
-            )
-        }
+        DefaultProfileScreen(followState, viewModel::toggleFollow)
     }
 }
 
 @Composable
-fun EmptyFollowingScreen() {
-    UserDataContainer(
-        user = UserData(
+fun DefaultProfileScreen(followState: FollowState, onclickEvent: (UserData) -> Unit) {
+    val defaultUser =
+        UserData(
             id = 0,
             profileImageResId = com.record.designsystem.R.drawable.img_profile,
             name = "유영",
             isFollowing = false,
-        ),
-        onClick = {},
-        showFollowButton = false,
-    )
+        )
+
+    val sortedList = listOf(defaultUser) + followState.followingList
+
+    LazyColumn {
+        items(sortedList) { user ->
+            UserDataContainer(
+                user = user,
+                onClick = { onclickEvent(user) },
+                showFollowButton = user.name != "유영",
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun DefaultProfileScreenPreview() {
+    RecordyTheme {
+        DefaultProfileScreen(FollowState(), onclickEvent = {})
+    }
 }

feature/profile/build.gradle.kts

@@ -5,3 +5,7 @@ plugins {
 android {
     namespace = "com.record.profile"
 }
+
+dependencies {
+    implementation(projects.feature.video)
+}

feature/profile/src/main/java/com/record/profile/ProfileScreen.kt

@@ -1,18 +1,77 @@
 package com.record.profile
 
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Text
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.record.designsystem.component.RecordyVideoThumbnail
+import com.record.designsystem.component.container.UserDataContainer
+import com.record.designsystem.theme.RecordyTheme
+import com.record.video.SampleData
 
 @Composable
 fun ProfileRoute(
     padding: PaddingValues,
     modifier: Modifier = Modifier,
 ) {
-    Box(modifier = modifier.fillMaxSize()) {
-        Text("profile")
+    ProfileScreen(
+        padding = padding,
+        modifier = modifier,
+    )
+}
+
+@Composable
+fun ProfileScreen(
+    padding: PaddingValues,
+    modifier: Modifier = Modifier,
+    viewModel: ProfileViewModel = hiltViewModel(),
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+    Column(modifier = modifier.fillMaxSize()) {
+        UserDataContainer(
+            user = uiState.user,
+            onClick = { user ->
+                viewModel.toggleFollow(user)
+            },
+        )
+
+        LazyVerticalGrid(
+            modifier = Modifier
+                .fillMaxHeight()
+                .padding(horizontal = 16.dp)
+                .padding(bottom = padding.calculateBottomPadding()),
+            columns = GridCells.Fixed(2),
+            verticalArrangement = Arrangement.spacedBy(12.dp),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            items(SampleData.sampleVideos) { item ->
+                RecordyVideoThumbnail(
+                    imageUri = item.previewUri,
+                    isBookmarkable = true,
+                    isBookmark = false,
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ProfileScreenPreview() {
+    RecordyTheme {
+        ProfileScreen(padding = PaddingValues(0.dp))
     }
 }

feature/profile/src/main/java/com/record/profile/ProfileState.kt

@@ -0,0 +1,19 @@
+package com.record.profile
+
+import com.record.model.UserData
+import com.record.ui.base.SideEffect
+import com.record.ui.base.UiState
+
+data class ProfileState(
+    val user: UserData = UserData(
+        id = 1,
+        profileImage = "https://picsum.photos/id/200/60",
+        name = "John Doe",
+        isFollowing = true,
+    ),
+) : UiState
+
+sealed class ProfileSideEffect : SideEffect {
+    data object Following : ProfileSideEffect()
+    data object Unfollowing : ProfileSideEffect()
+}

feature/profile/src/main/java/com/record/profile/ProfileViewModel.kt

@@ -0,0 +1,28 @@
+package com.record.profile
+
+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 ProfileViewModel @Inject constructor() : BaseViewModel<ProfileState, ProfileSideEffect>(ProfileState()) {
+
+    fun toggleFollow(user: UserData) {
+        viewModelScope.launch {
+            val updatedUser = user.copy(isFollowing = !user.isFollowing)
+            intent {
+                copy(user = updatedUser)
+            }
+            postSideEffect(
+                if (updatedUser.isFollowing) {
+                    ProfileSideEffect.Following
+                } else {
+                    ProfileSideEffect.Unfollowing
+                },
+            )
+        }
+    }
+}