Feature/#127 mypage modify

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

@@ -8,10 +8,10 @@ val ViskitYellow400 = Color(0xFFF1E150)
 val ViskitYellow300 = Color(0xFFF5E97C)
 val ViskitYellow200 = Color(0xFFF8F0A8)
 val ViskitYellow100 = Color(0xFFFCF8D3)
-val ViskitYellow80 = Color(0xCCF1E150)
-val ViskitYellow60 = Color(0x99F1E150)
-val ViskitYellow40 = Color(0x66F1E150)
-val ViskitYellow20 = Color(0x33F1E150)
+val ViskitYellow80 = Color(0xCCEDDDA0)
+val ViskitYellow60 = Color(0x99EDDDA0)
+val ViskitYellow40 = Color(0x66EDDDA0)
+val ViskitYellow20 = Color(0x33EDDDA0)
 
 // System
 val Alert01 = Color(0xFFC1492F)

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

@@ -16,8 +16,7 @@ data class MypageState(
     val bookmarkIsEnd: Boolean = false,
     val recordCursor: Long = 0,
     val recordIsEnd: Boolean = false,
-    val mypageTab: MypageTab = MypageTab.TASTE,
-    val preferences: ImmutableList<Pair<String, Int>> = emptyList<Pair<String, Int>>().toImmutableList(),
+    val mypageTab: MypageTab = MypageTab.RECORD,
     val myRecordList: ImmutableList<VideoData> = emptyList<VideoData>().toImmutableList(),
     val recordVideoCount: Int = 0,
     val myBookmarkList: ImmutableList<VideoData> = emptyList<VideoData>().toImmutableList(),

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

@@ -1,7 +1,6 @@
 package com.record.mypage
 
 import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.animation.core.snap
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
@@ -29,7 +28,6 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
@@ -40,7 +38,6 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 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.unit.dp
@@ -52,7 +49,6 @@ import com.record.designsystem.theme.RecordyTheme
 import com.record.model.VideoType
 import com.record.mypage.screen.BookmarkScreen
 import com.record.mypage.screen.RecordScreen
-import com.record.mypage.screen.TasteScreen
 import com.record.ui.extension.customClickable
 import com.record.ui.lifecycle.LaunchedEffectWithLifecycle
 import kotlinx.coroutines.CoroutineScope
@@ -68,12 +64,12 @@ fun MypageRoute(
     navigateToFollower: () -> Unit,
     navigateToFollowing: () -> Unit,
     navigateToUplaod: () -> Unit,
+    navigateToHome: () -> Unit,
     navigateToVideo: (VideoType, Long) -> Unit,
 ) {
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
 
     LaunchedEffectWithLifecycle {
-        viewModel.fetchUserPreferences()
         viewModel.fetchUserProfile()
         viewModel.initialData()
         viewModel.sideEffect.collectLatest { sideEffect ->
@@ -113,6 +109,7 @@ fun MypageRoute(
             onLoadMoreRecords = viewModel::loadMoreUserVideos,
             onBookmarkClick = viewModel::bookmark,
             navigateToUpload = navigateToUplaod,
+            navigateToHome = navigateToHome,
         )
     }
 }
@@ -127,13 +124,14 @@ fun MypageScreen(
     onFollowingClick: () -> Unit,
     navigateToVideo: (VideoType, Long) -> Unit,
     navigateToUpload: () -> Unit,
+    navigateToHome: () -> Unit,
     onLoadMoreRecords: () -> Unit,
     onLoadMoreBookmarks: () -> Unit,
     onBookmarkClick: (Long) -> Unit,
 ) {
     val pagerState = rememberPagerState(
         initialPage = state.mypageTab.ordinal,
-        pageCount = { 3 },
+        pageCount = { 2 },
     )
     val coroutineScope = rememberCoroutineScope()
 
@@ -166,7 +164,7 @@ fun MypageScreen(
             Box(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(horizontal = 16.dp),
+                    .padding(horizontal = 10.dp),
                 contentAlignment = Alignment.CenterStart,
             ) {
                 Row(
@@ -189,7 +187,7 @@ fun MypageScreen(
                             color = RecordyTheme.colors.white,
                         )
                         Spacer(modifier = Modifier.height(4.dp))
-                        buildFollowerFollowingRow(
+                        BuildFollowerFollowingRow(
                             followerNum = state.followerNum,
                             followingNum = state.followingNum,
                             onFollowerClick = onFollowerClick,
@@ -199,7 +197,7 @@ fun MypageScreen(
                 }
             }
 
-            Spacer(modifier = Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(32.dp))
 
             CustomTabRow(
                 selectedTabIndex = state.mypageTab.ordinal,
@@ -213,17 +211,6 @@ fun MypageScreen(
                 userScrollEnabled = false,
             ) { page ->
                 when (page) {
-                    MypageTab.TASTE.ordinal -> {
-                        Box(
-                            modifier = Modifier.fillMaxSize(),
-                        ) {
-                            TasteScreen(
-                                dataAvailable = state.preferences,
-                                navigateToUpload = navigateToUpload,
-                            )
-                        }
-                    }
-
                     MypageTab.RECORD.ordinal -> {
                         RecordScreen(
                             videoItems = state.myRecordList,
@@ -242,6 +229,7 @@ fun MypageScreen(
                             onItemClick = navigateToVideo,
                             onLoadMore = onLoadMoreBookmarks,
                             onBookmarkClick = onBookmarkClick,
+                            navigateToHome = navigateToHome,
                         )
                     }
                 }
@@ -258,23 +246,24 @@ fun CustomTabRow(
     pagerState: PagerState,
     coroutineScope: CoroutineScope,
 ) {
-    val tabWidths = remember { mutableStateListOf(0f, 0f, 0f) }
-    val tabOffsets = remember { mutableStateListOf(0f, 0f, 0f) }
-
-    var indicatorWidth by remember { mutableStateOf(0.dp) }
+    var tabWidth by remember { mutableStateOf(0.dp) }
     var indicatorOffset by remember { mutableStateOf(0.dp) }
 
-    var animateIndicator by remember { mutableStateOf(false) }
+    val animatedIndicatorOffset by animateDpAsState(
+        targetValue = indicatorOffset,
+        animationSpec = tween(200),
+    )
 
-    val animatedIndicatorWidth by animateDpAsState(targetValue = indicatorWidth, animationSpec = if (animateIndicator) tween(200) else snap())
-    val animatedIndicatorOffset by animateDpAsState(targetValue = indicatorOffset, animationSpec = if (animateIndicator) tween(200) else snap())
+    val animatedIndicatorWidth by animateDpAsState(
+        targetValue = tabWidth - 12.dp,
+        animationSpec = tween(200),
+    )
 
     val density = LocalDensity.current
 
     LaunchedEffect(selectedTabIndex) {
-        if (selectedTabIndex in tabWidths.indices) {
-            indicatorWidth = with(density) { tabWidths[selectedTabIndex].toDp() }
-            indicatorOffset = with(density) { tabOffsets[selectedTabIndex].toDp() }
+        if (tabWidth > 0.dp) {
+            indicatorOffset = (tabWidth * selectedTabIndex) + 6.dp
         }
     }
 
@@ -290,29 +279,25 @@ fun CustomTabRow(
             horizontalArrangement = Arrangement.SpaceEvenly,
             verticalAlignment = Alignment.Bottom,
         ) {
-            MypageTab.entries.forEachIndexed { index, tab ->
+            MypageTab.entries.take(2).forEachIndexed { index, tab ->
                 val selected = index == selectedTabIndex
-                val textColor = if (selected) RecordyTheme.colors.gray01 else RecordyTheme.colors.gray06
-                val textStyle = if (selected) RecordyTheme.typography.body2L else RecordyTheme.typography.body2M
+                val textColor = if (selected) RecordyTheme.colors.gray01 else RecordyTheme.colors.gray05
+                val textStyle = if (selected) RecordyTheme.typography.body2B else RecordyTheme.typography.body2M
 
-                Column(
+                Box(
                     modifier = Modifier
+                        .weight(1f)
+                        .fillMaxHeight()
                         .clickable {
                             onTabSelected(tab)
                             coroutineScope.launch {
-                                animateIndicator = true
                                 pagerState.animateScrollToPage(index)
                             }
                         }
                         .onGloballyPositioned { layoutCoordinates ->
-                            val width = layoutCoordinates.size.width.toFloat()
-                            val offset = layoutCoordinates.positionInParent().x
-
-                            tabWidths[index] = width
-                            tabOffsets[index] = offset
+                            tabWidth = with(density) { layoutCoordinates.size.width.toDp() }
                         },
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Center,
+                    contentAlignment = Alignment.Center,
                 ) {
                     Text(
                         text = tab.displayName,
@@ -322,7 +307,6 @@ fun CustomTabRow(
                 }
             }
         }
-        Spacer(modifier = Modifier.height(6.dp))
         Box(
             modifier = Modifier
                 .fillMaxWidth()
@@ -348,7 +332,7 @@ fun formatNumber(number: Int): String {
 }
 
 @Composable
-private fun buildFollowerFollowingRow(
+private fun BuildFollowerFollowingRow(
     followerNum: Int,
     followingNum: Int,
     onFollowerClick: () -> Unit,

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

@@ -1,7 +1,6 @@
 package com.record.mypage
 
 enum class MypageTab(val displayName: String) {
-    TASTE("내 취향"),
     RECORD("내 기록"),
     BOOKMARK("북마크"),
 }

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

@@ -41,34 +41,6 @@ class MypageViewModel @Inject constructor(
         postSideEffect(MypageSideEffect.NavigateToVideoDetail(type, videoId))
     }
 
-    fun fetchUserPreferences() {
-        viewModelScope.launch {
-            userRepository.getUserPreference().onSuccess { preferences ->
-                val preferenceList = preferences.toList().map {
-                    Pair(it.keyword, it.percentage)
-                }.toImmutableList()
-                intent {
-                    copy(
-                        preferences = preferenceList,
-                    )
-                }
-            }.onFailure {
-                when (it) {
-                    is ApiError -> {
-                        Log.e("error", it.message)
-                    }
-                    is IndexOutOfBoundsException -> {
-                        intent {
-                            copy(
-                                preferences = emptyList<Pair<String, Int>>().toImmutableList(),
-                            )
-                        }
-                    }
-                }
-            }
-        }
-    }
-
     fun fetchUserProfile() {
         viewModelScope.launch {
             userRepository.getUserId().onSuccess { userId ->

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

@@ -30,6 +30,7 @@ fun NavGraphBuilder.mypageNavGraph(
     navigateToFollowing: () -> Unit,
     navigateToFollower: () -> Unit,
     navigateToUpload: () -> Unit,
+    navigateToHome: () -> Unit,
     navigateToProfile: (Long) -> Unit,
     navigateToVideo: (VideoType, Long) -> Unit,
 ) {
@@ -42,6 +43,7 @@ fun NavGraphBuilder.mypageNavGraph(
             navigateToFollower = navigateToFollower,
             navigateToVideo = navigateToVideo,
             navigateToUplaod = navigateToUpload,
+            navigateToHome = navigateToHome,
         )
     }
     composable(route = MypageRoute.followingRoute) {

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

@@ -2,6 +2,7 @@ package com.record.mypage.screen
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -18,6 +19,7 @@ import androidx.compose.ui.unit.dp
 import com.record.designsystem.component.RecordyVideoThumbnail
 import com.record.designsystem.theme.RecordyTheme
 import com.record.model.VideoType
+import com.record.mypage.MypageTab
 import com.record.ui.scroll.OnBottomReached
 import com.record.video.model.VideoData
 import kotlinx.collections.immutable.ImmutableList
@@ -29,17 +31,42 @@ fun BookmarkScreen(
     onItemClick: (VideoType, Long) -> Unit,
     onLoadMore: () -> Unit,
     onBookmarkClick: (Long) -> Unit,
+    navigateToHome: () -> Unit,
 ) {
     val lazyGridState = rememberLazyGridState()
     lazyGridState.OnBottomReached(2) {
         onLoadMore()
     }
+
     if (recordCount == 0) {
-        EmptyDataScreen(
-            imageRes = com.record.designsystem.R.drawable.img_bookmark,
-            message = "자유롭게 취향을 북마크해 보세요",
-            showButton = false,
-        )
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 16.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 16.dp),
+                contentAlignment = Alignment.TopEnd,
+            ) {
+                Text(
+                    text = buildRecordCountText(recordCount),
+                    style = RecordyTheme.typography.caption1R,
+                )
+            }
+
+            EmptyDataScreen(
+                imageRes = com.record.designsystem.R.drawable.img_camera,
+                message = "북마크한 영상이 없어요.\n영상을 둘러보고 저장해 보세요!",
+                showButton = true,
+                selectedTab = MypageTab.BOOKMARK,
+                onButtonClick = {
+                    navigateToHome()
+                },
+            )
+        }
     } else {
         LazyVerticalGrid(
             state = lazyGridState,
@@ -54,13 +81,12 @@ fun BookmarkScreen(
                 Box(
                     modifier = Modifier
                         .fillMaxWidth()
-                        .padding(top = 28.dp, bottom = 12.dp),
+                        .padding(top = 16.dp, bottom = 10.dp),
                     contentAlignment = Alignment.TopEnd,
                 ) {
                     Text(
                         text = buildRecordCountText(recordCount),
-                        style = RecordyTheme.typography.body2M,
-                        color = RecordyTheme.colors.gray01,
+                        style = RecordyTheme.typography.caption1R,
                     )
                 }
             }