[Feat] 마이페이지 나의 밈 탭 디자인 구현

app/src/main/java/team/ppac/navigation/FarmemeNavHost.kt

@@ -52,6 +52,7 @@ fun FarmemeNavHost(
             analyticsHelper = analyticsHelper,
             navigateToDetail = navigateToDetail,
             navigateToSetting = navigateToSetting,
+            navigateToRegister = navigateToRegister,
         )
     }
 }

core/analytics/src/main/java/team/ppac/analytics/action/Const.kt

@@ -10,3 +10,4 @@ const val PAGINATION_COUNT = "page_count"
 const val CONTENT_TYPE = "content_type"
 const val MY_PAGE_RECENT_MEME = "my_recent_meme"
 const val MY_PAGE_SAVED_MEME = "my_saved_meme"
+const val MY_PAGE_REGISTERED_MEME = "my_registered_meme"

core/analytics/src/main/java/team/ppac/analytics/action/MyPageAction.kt

@@ -7,6 +7,7 @@ enum class MyPageAction(private val tag: String) : ActionType {
     CLICK_MEME("click_meme"),
     CLICK_COPY("click_copy"),
     CLICK_SETTINGS("click_settings"),
+    CLICK_REGISTER("click_register"),
     ;
 
     override fun getAction(): String = tag

core/common/android/src/main/kotlin/team/ppac/common/android/component/error/FarmemeErrorScreen.kt

@@ -38,10 +38,8 @@ fun FarmemeErrorScreen(
         )
         Spacer(modifier = Modifier.size(24.dp))
         FarmemeFilledButton(
-            backgroundColor = FarmemeTheme.backgroundColor.primary,
             text = "새로고침하기",
-            textColor = FarmemeTheme.textColor.inverse,
-            onClick = onRetryClick
+            onClick = onRetryClick,
         )
     }
 }

core/designsystem/src/main/kotlin/team/ppac/designsystem/component/button/Button.kt

@@ -79,9 +79,9 @@ fun FarmemeWeakButton(
 @Composable
 fun FarmemeFilledButton(
     modifier: Modifier = Modifier,
-    backgroundColor: Color,
+    backgroundColor: Color = FarmemeTheme.backgroundColor.primary,
     text: String,
-    textColor: Color,
+    textColor: Color = FarmemeTheme.textColor.inverse,
     onClick: () -> Unit = { },
 ) {
     Box(
@@ -136,8 +136,6 @@ private fun FarmemeWeakButtonPreview() {
 @Preview
 private fun FarmemeFilledButtonPreview() {
     FarmemeFilledButton(
-        backgroundColor = FarmemeTheme.backgroundColor.primary,
         text = "버튼",
-        textColor = FarmemeTheme.textColor.inverse,
     )
 }

core/designsystem/src/main/kotlin/team/ppac/designsystem/foundation/Icon.kt

@@ -401,16 +401,6 @@ object FarmemeIcon {
         contentDescription = null,
     )
 
-    @Composable
-    fun EmptyResult(
-        modifier: Modifier = Modifier,
-    ) = Icon(
-        modifier = modifier,
-        painter = painterResource(R.drawable.ic_empty_80),
-        contentDescription = null,
-        tint = Color.Unspecified
-    )
-
     @Composable
     fun Required(
         modifier: Modifier = Modifier,
@@ -434,7 +424,7 @@ object FarmemeIcon {
     @Composable
     fun Upload(
         modifier: Modifier = Modifier,
-    )= Icon(
+    ) = Icon(
         modifier = modifier,
         painter = painterResource(R.drawable.ic_upload_16),
         contentDescription = null,

feature/mypage/src/main/java/team/ppac/mypage/MyPageRoute.kt

@@ -24,14 +24,14 @@ import team.ppac.common.android.util.ComposableLifecycle
 import team.ppac.designsystem.foundation.FarmemeIcon
 import team.ppac.mypage.mvi.MyPageIntent
 import team.ppac.mypage.mvi.MyPageSideEffect
-import timber.log.Timber
 
 @Composable
 internal fun MyPageRoute(
     analyticsHelper: AnalyticsHelper,
     viewModel: MyPageViewModel = hiltViewModel(),
     navigateToDetail: (String) -> Unit,
     navigateToSetting: () -> Unit,
+    navigateToRegister: () -> Unit,
 ) {
     var lastPage by remember { mutableIntStateOf(0) }
 
@@ -86,6 +86,15 @@ internal fun MyPageRoute(
                         navigateToSetting()
                     }
 
+                    MyPageSideEffect.NavigateToRegister -> {
+                        analyticsHelper.reportAction(
+                            action = MyPageAction.CLICK_REGISTER,
+                            screen = ScreenType.MY_PAGE
+                        )
+
+                        navigateToRegister()
+                    }
+
                     is MyPageSideEffect.ShowLevelUpSnackBar -> {
                         viewModel.showSnackbar(
                             message = "LV.${sideEffect.level}로 레벨업했어요!",

feature/mypage/src/main/java/team/ppac/mypage/MyPageScreen.kt

@@ -43,14 +43,17 @@ import team.ppac.designsystem.component.toolbar.FarmemeActionToolBar
 import team.ppac.designsystem.foundation.FarmemeRadius
 import team.ppac.domain.repository.SavedMemeEvent
 import team.ppac.mypage.component.MyPageLevelBox
+import team.ppac.mypage.component.MyPageMemesTabBar
 import team.ppac.mypage.component.MyPageProgressBar
 import team.ppac.mypage.component.MyPagePullRefreshIndicator
 import team.ppac.mypage.component.MyPageSpeechBubble
 import team.ppac.mypage.component.RecentMemeContent
+import team.ppac.mypage.component.RegisteredMemeContent
 import team.ppac.mypage.component.SavedMemeContent
 import team.ppac.mypage.model.LevelUiModel
 import team.ppac.mypage.model.MyPageLevel
 import team.ppac.mypage.mvi.MyPageIntent
+import team.ppac.mypage.mvi.MyPageTabType
 import team.ppac.mypage.mvi.MyPageUiState
 
 @OptIn(ExperimentalMaterialApi::class)
@@ -61,6 +64,7 @@ internal fun MyPageScreen(
     onIntent: (MyPageIntent) -> Unit,
 ) {
     val savedMemes = uiState.savedMemes.collectAsLazyPagingItems()
+    val registeredMemes = uiState.registeredMemes.collectAsLazyPagingItems()
     val pullRefreshState = rememberPullRefreshState(
         refreshing = uiState.isRefreshing,
         onRefresh = {
@@ -126,14 +130,48 @@ internal fun MyPageScreen(
                         },
                         isLoading = uiState.isLoading,
                     )
+                    MyPageMemesTabBar(
+                        currentTabType = uiState.currentTabType,
+                        onClick = { tab ->
+                            onIntent(MyPageIntent.ClickMemesTab(currentTabType = tab))
+                        },
+                    )
+                    Spacer(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(1.dp)
+                            .background(FarmemeTheme.borderColor.tertiary),
+                    )
+                    Spacer(modifier = Modifier.height(20.dp))
                     if (!uiState.isLoading) {
-                        SavedMemeContent(
-                            savedMemes = savedMemes,
-                            onMemeClick = { memeId ->
-                                onIntent(MyPageIntent.ClickSavedMemeItem(memeId = memeId))
-                            },
-                            onCopyClick = { onIntent(MyPageIntent.ClickCopy(it)) }
-                        )
+                        when (uiState.currentTabType) {
+                            MyPageTabType.REGISTERED_MEMES -> {
+                                RegisteredMemeContent(
+                                    registeredMemes = registeredMemes,
+                                    onMemeClick = { memeId ->
+                                        onIntent(MyPageIntent.ClickRegisteredMemeItem(memeId = memeId))
+                                    },
+                                    onCopyClick = {
+                                        onIntent(MyPageIntent.ClickCopy(it))
+                                    },
+                                    onRegisterClick = {
+                                        onIntent(MyPageIntent.ClickRegister)
+                                    },
+                                )
+                            }
+
+                            MyPageTabType.SAVED_MEMES -> {
+                                SavedMemeContent(
+                                    savedMemes = savedMemes,
+                                    onMemeClick = { memeId ->
+                                        onIntent(MyPageIntent.ClickSavedMemeItem(memeId = memeId))
+                                    },
+                                    onCopyClick = {
+                                        onIntent(MyPageIntent.ClickCopy(it))
+                                    },
+                                )
+                            }
+                        }
                     }
                 }
                 MyPagePullRefreshIndicator(

feature/mypage/src/main/java/team/ppac/mypage/MyPageViewModel.kt

@@ -72,6 +72,12 @@ class MyPageViewModel @Inject constructor(
                 memeId = intent.memeId
             )
 
+            is MyPageIntent.ClickRegisteredMemeItem -> navigateToDetail(
+                contentType = intent.contentType,
+                memeId = intent.memeId
+            )
+
+            MyPageIntent.ClickRegister -> navigateToRegister()
             MyPageIntent.ClickSettingButton -> navigateToSetting()
             is MyPageIntent.ClickRetryButton -> {
                 initialAction()
@@ -85,6 +91,13 @@ class MyPageViewModel @Inject constructor(
             MyPageIntent.InitView -> initialAction()
             MyPageIntent.RefreshData -> refreshAction()
             is MyPageIntent.ClickCopy -> postSideEffect(MyPageSideEffect.LogClickCopy(intent.meme))
+            is MyPageIntent.ClickMemesTab -> {
+                reduce {
+                    copy(
+                        currentTabType = intent.currentTabType,
+                    )
+                }
+            }
         }
     }
 
@@ -101,6 +114,10 @@ class MyPageViewModel @Inject constructor(
         postSideEffect(MyPageSideEffect.NavigateToSetting)
     }
 
+    private fun navigateToRegister() {
+        postSideEffect(MyPageSideEffect.NavigateToRegister)
+    }
+
     private fun initialAction() {
         launch {
             getUserData()

feature/mypage/src/main/java/team/ppac/mypage/component/EmptyMemeContent.kt

@@ -0,0 +1,73 @@
+package team.ppac.mypage.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import team.ppac.designsystem.FarmemeTheme
+import team.ppac.designsystem.component.button.FarmemeFilledButton
+import team.ppac.mypage.mvi.MyPageTabType
+
+@Composable
+fun EmptyMemeContent(
+    modifier: Modifier = Modifier,
+    tabType: MyPageTabType,
+    onUploadClick: () -> Unit = {},
+) {
+    val (title, content) = when (tabType) {
+        MyPageTabType.REGISTERED_MEMES -> "올린 밈이 없어요" to "공유하고 싶은 밈이 있다면\n업로드해보세요."
+        MyPageTabType.SAVED_MEMES -> "저장한 밈이 없어요" to "관심있는 밈을 저장하고\n필요할 때 편하게 사용해보세요."
+    }
+
+    Column(
+        modifier = modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Spacer(modifier = Modifier.height(160.dp))
+        Image(
+            modifier = Modifier.size(80.dp),
+            painter = painterResource(id = team.ppac.designsystem.R.drawable.img_empty),
+            contentDescription = null,
+        )
+        Spacer(modifier = Modifier.height(20.dp))
+        Text(
+            text = title,
+            textAlign = TextAlign.Center,
+            style = FarmemeTheme.typography.heading.small.bold.copy(
+                color = FarmemeTheme.textColor.primary
+            ),
+        )
+        Spacer(modifier = Modifier.height(9.dp))
+        Text(
+            text = content,
+            textAlign = TextAlign.Center,
+            style = FarmemeTheme.typography.body.large.medium.copy(
+                color = FarmemeTheme.textColor.tertiary
+            ),
+        )
+        if (tabType == MyPageTabType.REGISTERED_MEMES) {
+            Spacer(modifier = Modifier.height(20.dp))
+            FarmemeFilledButton(
+                text = "밈 올리기",
+                onClick = onUploadClick,
+            )
+        }
+        Spacer(modifier = Modifier.height(220.dp))
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun EmptyMemeContentPreview() {
+    EmptyMemeContent(tabType = MyPageTabType.REGISTERED_MEMES)
+}