diff --git a/feature/mypage/src/main/java/com/record/mypage/MypageScreen.kt b/feature/mypage/src/main/java/com/record/mypage/MypageScreen.kt index 29b107d9..66859515 100644 --- a/feature/mypage/src/main/java/com/record/mypage/MypageScreen.kt +++ b/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,13 +188,19 @@ 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, + ) } } } @@ -197,27 +208,6 @@ fun MypageScreen( } } -@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), diff --git a/feature/mypage/src/main/java/com/record/mypage/navigation/MypageNavigation.kt b/feature/mypage/src/main/java/com/record/mypage/navigation/MypageNavigation.kt index 1fe6c0fc..79ca2ff0 100644 --- a/feature/mypage/src/main/java/com/record/mypage/navigation/MypageNavigation.kt +++ b/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" } diff --git a/feature/mypage/src/main/java/com/record/mypage/screen/BookmarkScreen.kt b/feature/mypage/src/main/java/com/record/mypage/screen/BookmarkScreen.kt index db6b02ae..54a886b2 100644 --- a/feature/mypage/src/main/java/com/record/mypage/screen/BookmarkScreen.kt +++ b/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, recordCount: Int) { - val videos = remember { mutableStateListOf(*videoItems.filter { it.isBookmark }.toTypedArray()) } +fun BookmarkScreen( + videoItems: List, + 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, 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, 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, - ) - } -} diff --git a/feature/mypage/src/main/java/com/record/mypage/screen/RecordScreen.kt b/feature/mypage/src/main/java/com/record/mypage/screen/RecordScreen.kt index ccb63314..e797d61d 100644 --- a/feature/mypage/src/main/java/com/record/mypage/screen/RecordScreen.kt +++ b/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, recordCount: Int) { - val videos = remember { mutableStateListOf(*videoItems.filter { it.isBookmark }.toTypedArray()) } +fun RecordScreen( + videoItems: List, + 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, 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, 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, - ) - } -} diff --git a/feature/navigator/src/main/java/com/record/navigator/MainNavigator.kt b/feature/navigator/src/main/java/com/record/navigator/MainNavigator.kt index e43fef47..bfde953f 100644 --- a/feature/navigator/src/main/java/com/record/navigator/MainNavigator.kt +++ b/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 { }) } diff --git a/feature/navigator/src/main/java/com/record/navigator/MainScreen.kt b/feature/navigator/src/main/java/com/record/navigator/MainScreen.kt index d72c4da6..9764ad44 100644 --- a/feature/navigator/src/main/java/com/record/navigator/MainScreen.kt +++ b/feature/navigator/src/main/java/com/record/navigator/MainScreen.kt @@ -98,6 +98,9 @@ internal fun MainScreen( mypageNavGraph( padding = innerPadding, navigateToSetting = { navigator.navigateSetting() }, + navigateToFollowing = { navigator.navigateToFollowing() }, + navigateToFollower = { navigator.navigateToFollower() }, + navigateToVideo = navigator::navigateVideoDetail, ) settingNavGraph( diff --git a/feature/video/src/main/java/com/record/video/navigation/VideoNavigation.kt b/feature/video/src/main/java/com/record/video/navigation/VideoNavigation.kt index 3ddcd480..6619cc4d 100644 --- a/feature/video/src/main/java/com/record/video/navigation/VideoNavigation.kt +++ b/feature/video/src/main/java/com/record/video/navigation/VideoNavigation.kt @@ -15,7 +15,7 @@ fun NavController.navigateVideo(navOptions: NavOptions) { navigate(VideoRoute.route, navOptions) } -fun NavController.navigateVideoDetail(videoType: VideoType, index: Int, keyword: String? = "", userId: Long = 0) { +fun NavController.navigateVideoDetail(videoType: VideoType, index: Int, keyword: String? = "all", userId: Long = 0) { navigate(VideoRoute.detailRoute(videoType.toString(), index.toString(), keyword, userId.toString())) }