Feature/#94 mypage route connect

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

@@ -41,16 +41,16 @@ import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.layout.positionInParent
 import androidx.compose.ui.platform.LocalDensity
 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.AsyncImage
 import com.record.designsystem.component.navbar.TopNavigationBar
 import com.record.designsystem.theme.RecordyTheme
+import com.record.model.SampleData
+import com.record.model.VideoType
 import com.record.mypage.screen.BookmarkScreen
 import com.record.mypage.screen.RecordScreen
-import com.record.mypage.screen.SampleData
 import com.record.mypage.screen.TasteScreen
 import com.record.ui.extension.customClickable
 import kotlinx.coroutines.CoroutineScope
@@ -62,6 +62,9 @@ fun MypageRoute(
     modifier: Modifier = Modifier,
     viewModel: MypageViewModel = hiltViewModel(),
     navigateToSetting: () -> Unit,
+    navigateToFollower: () -> Unit,
+    navigateToFollowing: () -> Unit,
+    navigateToVideo: (VideoType, Int) -> Unit,
 ) {
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
     Box(
@@ -73,9 +76,10 @@ fun MypageRoute(
         MypageScreen(
             state = uiState,
             onTabSelected = { viewModel.selectTab(it) },
-            onFollowingClick = {},
-            onFollowerClick = {},
+            onFollowingClick = navigateToFollowing,
+            onFollowerClick = navigateToFollower,
             navigateToSetting = navigateToSetting,
+            navigateToVideo = navigateToVideo,
         )
     }
 }
@@ -88,6 +92,7 @@ fun MypageScreen(
     navigateToSetting: () -> Unit,
     onFollowerClick: () -> Unit,
     onFollowingClick: () -> Unit,
+    navigateToVideo: (VideoType, Int) -> Unit,
 ) {
     val pagerState = rememberPagerState(
         initialPage = state.mypageTab.ordinal,
@@ -183,41 +188,26 @@ fun MypageScreen(
                     }
 
                     MypageTab.RECORD.ordinal -> {
-                        RecordScreen(videoItems = SampleData.sampleVideos, recordCount = SampleData.sampleVideos.size)
-                        // RecordScreen(emptyList(), 0)
+                        RecordScreen(
+                            videoItems = SampleData.sampleVideos,
+                            recordCount = SampleData.sampleVideos.size,
+                            onItemClick = navigateToVideo,
+                        )
                     }
 
                     MypageTab.BOOKMARK.ordinal -> {
-                        BookmarkScreen(videoItems = SampleData.sampleVideos, recordCount = SampleData.sampleVideos.size)
-                        // BookmarkScreen(emptyList(), 0)
+                        BookmarkScreen(
+                            videoItems = SampleData.sampleVideos,
+                            recordCount = SampleData.sampleVideos.size,
+                            onItemClick = navigateToVideo,
+                        )
                     }
                 }
             }
         }
     }
 }
 
-@Preview(showBackground = true, backgroundColor = 0x0000)
-@Composable
-fun MypageScreenPreview() {
-    val exampleState = MypageState(
-        profileImg = "",
-        nickname = "공간수집가열글자아아",
-        followerNum = 1260,
-        followingNum = 96880,
-        mypageTab = MypageTab.TASTE,
-    )
-    RecordyTheme {
-        MypageScreen(
-            state = exampleState,
-            onTabSelected = {},
-            navigateToSetting = {},
-            onFollowerClick = {},
-            onFollowingClick = {},
-        )
-    }
-}
-
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun CustomTabRow(
@@ -326,7 +316,7 @@ private fun buildFollowerFollowingRow(
     ) {
         Row(
             modifier = Modifier
-                .clickable(onClick = onFollowerClick),
+                .customClickable { onFollowerClick() },
         ) {
             Text(
                 text = formatNumber(followerNum),
@@ -346,7 +336,7 @@ private fun buildFollowerFollowingRow(
         )
         Row(
             modifier = Modifier
-                .clickable(onClick = onFollowingClick),
+                .customClickable { onFollowingClick() },
         ) {
             Text(
                 text = formatNumber(followingNum),

feature/mypage/src/main/java/com/record/mypage/navigation/MypageNavigation.kt

@@ -6,26 +6,57 @@ import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptions
 import androidx.navigation.compose.composable
+import com.record.model.VideoType
 import com.record.mypage.MypageRoute
+import com.record.mypage.follow.FollowerRoute
+import com.record.mypage.follow.FollowingRoute
 
 fun NavController.navigateMypage(navOptions: NavOptions) {
     navigate(MypageRoute.route, navOptions)
 }
 
+fun NavController.navigateToFollowing() {
+    navigate(MypageRoute.followingRoute)
+}
+
+fun NavController.navigateToFollower() {
+    navigate(MypageRoute.followerRoute)
+}
+
 fun NavGraphBuilder.mypageNavGraph(
     padding: PaddingValues,
     modifier: Modifier = Modifier,
     navigateToSetting: () -> Unit,
+    navigateToFollowing: () -> Unit,
+    navigateToFollower: () -> Unit,
+    navigateToVideo: (VideoType, Int) -> Unit,
 ) {
     composable(route = MypageRoute.route) {
         MypageRoute(
             padding = padding,
             modifier = modifier,
             navigateToSetting = navigateToSetting,
+            navigateToFollowing = navigateToFollowing,
+            navigateToFollower = navigateToFollower,
+            navigateToVideo = navigateToVideo,
+        )
+    }
+    composable(route = MypageRoute.followingRoute) {
+        FollowingRoute(
+            padding = padding,
+            modifier = modifier,
+        )
+    }
+    composable(route = MypageRoute.followerRoute) {
+        FollowerRoute(
+            padding = padding,
+            modifier = modifier,
         )
     }
 }
 
 object MypageRoute {
     const val route = "mypage"
+    const val followerRoute = "follower"
+    const val followingRoute = "following"
 }

feature/mypage/src/main/java/com/record/mypage/screen/BookmarkScreen.kt

@@ -5,32 +5,33 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.foundation.lazy.grid.items
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.grid.itemsIndexed
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.record.designsystem.component.RecordyVideoThumbnail
 import com.record.designsystem.theme.RecordyTheme
 import com.record.model.VideoData
+import com.record.model.VideoType
 import com.record.mypage.R
 
 @Composable
-fun BookmarkScreen(videoItems: List<VideoData>, recordCount: Int) {
-    val videos = remember { mutableStateListOf(*videoItems.filter { it.isBookmark }.toTypedArray()) }
+fun BookmarkScreen(
+    videoItems: List<VideoData>,
+    recordCount: Int,
+    onItemClick: (VideoType, Int) -> Unit,
+) {
+    val videos = remember { mutableStateOf(videoItems) }
 
-    if (videos.isEmpty()) {
+    if (videos.value.isEmpty()) {
         EmptyDataScreen(
             imageRes = com.record.designsystem.R.drawable.img_bookmark,
             message = "자유롭게 취향을 북마크해 보세요",
@@ -59,7 +60,7 @@ fun BookmarkScreen(videoItems: List<VideoData>, recordCount: Int) {
                     )
                 }
             }
-            items(videos) { item ->
+            itemsIndexed(videos.value) { index, item ->
                 val isBookmarked = remember { mutableStateOf(item.isBookmark) }
 
                 RecordyVideoThumbnail(
@@ -68,36 +69,17 @@ fun BookmarkScreen(videoItems: List<VideoData>, recordCount: Int) {
                     isBookmark = isBookmarked.value,
                     onBookmarkClick = {
                         isBookmarked.value = !isBookmarked.value
-                        val index = videos.indexOfFirst { it.id == item.id }
+                        val index = videos.value.indexOfFirst { it.id == item.id }
                         if (index != -1) {
-                            videos[index] = videos[index].copy(isBookmark = isBookmarked.value)
+                            videos.value = videos.value.toMutableList().apply {
+                                set(index, get(index).copy(isBookmark = isBookmarked.value))
+                            }
                         }
                     },
                     location = item.location,
+                    onClick = { onItemClick(VideoType.BOOKMARK, index) },
                 )
             }
         }
     }
 }
-
-@Preview
-@Composable
-fun PreviewBookmarkScreenWithSampleList() {
-    RecordyTheme {
-        BookmarkScreen(
-            SampleData.sampleVideos,
-            SampleData.sampleVideos.size,
-        )
-    }
-}
-
-@Preview
-@Composable
-fun PreviewBookmarkScreeEmptyList() {
-    RecordyTheme {
-        BookmarkScreen(
-            emptyList(),
-            0,
-        )
-    }
-}

feature/mypage/src/main/java/com/record/mypage/screen/RecordScreen.kt

@@ -5,15 +5,12 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.foundation.lazy.grid.items
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.grid.itemsIndexed
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -22,17 +19,21 @@ import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.withStyle
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.record.designsystem.component.RecordyVideoThumbnail
 import com.record.designsystem.theme.RecordyTheme
 import com.record.model.VideoData
+import com.record.model.VideoType
 
 @Composable
-fun RecordScreen(videoItems: List<VideoData>, recordCount: Int) {
-    val videos = remember { mutableStateListOf(*videoItems.filter { it.isBookmark }.toTypedArray()) }
+fun RecordScreen(
+    videoItems: List<VideoData>,
+    recordCount: Int,
+    onItemClick: (VideoType, Int) -> Unit,
+) {
+    val videos = remember { mutableStateOf(videoItems) }
 
-    if (videos.isEmpty()) {
+    if (videos.value.isEmpty()) {
         EmptyDataScreen(
             imageRes = com.record.designsystem.R.drawable.img_camera,
             message = "내 첫 번째 공간 기록을\n작성해 보세요",
@@ -64,7 +65,7 @@ fun RecordScreen(videoItems: List<VideoData>, recordCount: Int) {
                     )
                 }
             }
-            items(videos) { item ->
+            itemsIndexed(videos.value) { index, item ->
                 val isBookmarked = remember { mutableStateOf(item.isBookmark) }
 
                 RecordyVideoThumbnail(
@@ -73,12 +74,15 @@ fun RecordScreen(videoItems: List<VideoData>, recordCount: Int) {
                     isBookmark = isBookmarked.value,
                     onBookmarkClick = {
                         isBookmarked.value = !isBookmarked.value
-                        val index = videos.indexOfFirst { it.id == item.id }
+                        val index = videos.value.indexOfFirst { it.id == item.id }
                         if (index != -1) {
-                            videos[index] = videos[index].copy(isBookmark = isBookmarked.value)
+                            videos.value = videos.value.toMutableList().apply {
+                                set(index, get(index).copy(isBookmark = isBookmarked.value))
+                            }
                         }
                     },
                     location = item.location,
+                    onClick = { onItemClick(VideoType.MY, index) },
                 )
             }
         }
@@ -96,22 +100,3 @@ fun buildRecordCountText(recordCount: Int): AnnotatedString {
         }
     }
 }
-
-@Preview
-@Composable
-fun PreviewRecordEmptyScreen() {
-    RecordyTheme {
-        RecordScreen(emptyList(), recordCount = 0)
-    }
-}
-
-@Preview
-@Composable
-fun PreviewRecordScreen() {
-    RecordyTheme {
-        RecordScreen(
-            SampleData.sampleVideos,
-            SampleData.sampleVideos.size,
-        )
-    }
-}

feature/navigator/src/main/java/com/record/navigator/MainNavigator.kt

@@ -13,6 +13,8 @@ import com.record.login.navigation.LoginRoute
 import com.record.login.navigation.SignupRoute
 import com.record.model.VideoType
 import com.record.mypage.navigation.navigateMypage
+import com.record.mypage.navigation.navigateToFollower
+import com.record.mypage.navigation.navigateToFollowing
 import com.record.profile.navigation.navigateProfile
 import com.record.setting.navigate.navigateSetting
 import com.record.video.navigation.navigateVideo
@@ -75,7 +77,7 @@ internal class MainNavigator(
         navController.navigateMypage(navOptions { })
     }
 
-    fun navigateVideoDetail(videoType: VideoType, index: Int, keyword: String? = "", userId: Long = 0) {
+    fun navigateVideoDetail(videoType: VideoType, index: Int, keyword: String? = "all", userId: Long = 0) {
         navController.navigateVideoDetail(
             videoType = videoType,
             index = index,
@@ -84,6 +86,14 @@ internal class MainNavigator(
         )
     }
 
+    fun navigateToFollowing() {
+        navController.navigateToFollowing()
+    }
+
+    fun navigateToFollower() {
+        navController.navigateToFollower()
+    }
+
     fun navigateProfile(id: Int) {
         navController.navigateProfile(navOptions { })
     }