[feat/#110] 좋아요 안내 툴팁 구현

depromeet · Aug 24, 2024 · 1ffb6a2 · 1ffb6a2
1 parent 0b861e8
commit 1ffb6a2
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 18 deletions.
diff --git a/presentation/src/main/java/com/dpm/presentation/viewfinder/StadiumDetailPictureFragment.kt b/presentation/src/main/java/com/dpm/presentation/viewfinder/StadiumDetailPictureFragment.kt
@@ -17,11 +17,13 @@ import com.depromeet.presentation.R
 import com.depromeet.presentation.databinding.FragmentStadiumDetailPictureBinding
 import com.dpm.core.base.BindingFragment
 import com.dpm.designsystem.SpotSnackBar
+import com.dpm.domain.preference.SharedPreference
 import com.dpm.presentation.util.Utils
 import com.dpm.presentation.viewfinder.compose.detailpicture.StadiumDetailPictureScreen
 import com.dpm.presentation.viewfinder.dialog.ReportDialog
 import com.dpm.presentation.viewfinder.viewmodel.StadiumDetailViewModel
 import dagger.hilt.android.AndroidEntryPoint
+import javax.inject.Inject
 
 enum class DetailReviewEntryPoint {
     TOP_REVIEW, MAIN_REVIEW
@@ -43,6 +45,9 @@ class StadiumDetailPictureFragment : BindingFragment<FragmentStadiumDetailPictur
         }
     }
 
+    @Inject
+    lateinit var sharedPreference: SharedPreference
+
     private val stadiumDetailViewModel: StadiumDetailViewModel by activityViewModels()
     private val utils by lazy {
         Utils(requireActivity())
@@ -66,11 +71,18 @@ class StadiumDetailPictureFragment : BindingFragment<FragmentStadiumDetailPictur
                         reviewId = reviewId,
                         reviewIndex = reviewIndex,
                         type = type,
+                        isFirstLike = sharedPreference.isFirstLike,
                         stadiumDetailViewModel = stadiumDetailViewModel,
+                        onClickLike = {
+                            sharedPreference.isFirstLike = false
+                        },
                         onClickScrap = { id ->
                             if (stadiumDetailViewModel.checkScrap(id)) {
                                 snackBar.show()
                             }
+                        },
+                        onClickShare = {
+                            sharedPreference.isFirstShare = false
                         }
                     )
                 }

diff --git a/...c/main/java/com/dpm/presentation/viewfinder/compose/detailpicture/DetailViewPagerLayer.kt b/...c/main/java/com/dpm/presentation/viewfinder/compose/detailpicture/DetailViewPagerLayer.kt
@@ -21,6 +21,7 @@ fun DetailViewPagerLayer(
     context: Context,
     isLike: Boolean,
     likeCount: Long,
+    isFirstLike: Boolean,
     isDimmed: Boolean,
     verticalPagerState: PagerState,
     pictures: List<ResponseBlockReview.ResponseReview.ResponseReviewImage>,
@@ -40,6 +41,7 @@ fun DetailViewPagerLayer(
             isLike = isLike,
             context = context,
             pictures = pictures,
+            isFirstLike = isFirstLike,
             likeCount = likeCount,
             verticalPagerState = verticalPagerState,
             onClickLike = onClickLike,
@@ -74,6 +76,7 @@ private fun DetailViewPagerLayerPreview() {
         context = LocalContext.current,
         isDimmed = true,
         isLike = true,
+        isFirstLike = true,
         likeCount = 1,
         pictures = pictures,
         verticalPagerState = pagerState,

diff --git a/...tation/src/main/java/com/dpm/presentation/viewfinder/compose/detailpicture/LikeTooltip.kt b/...tation/src/main/java/com/dpm/presentation/viewfinder/compose/detailpicture/LikeTooltip.kt
@@ -64,7 +64,6 @@ fun LikeTooltip(
         Canvas(
             modifier = Modifier
                 .height(triangleHeight)
-                .offset(y = tooltipHeight.dp)
         ) {
             val trianglePath = Path().apply {
                 moveTo(tooltipWidth * bias, triangleHeight.toPx()) // 삼각형 꼭짓점

diff --git a/.../java/com/dpm/presentation/viewfinder/compose/detailpicture/StadiumDetailPictureScreen.kt b/.../java/com/dpm/presentation/viewfinder/compose/detailpicture/StadiumDetailPictureScreen.kt
@@ -14,12 +14,15 @@ import com.dpm.presentation.viewfinder.viewmodel.StadiumDetailViewModel
 
 @Composable
 fun StadiumDetailPictureScreen(
-    context: Context = LocalContext.current,
-    stadiumDetailViewModel: StadiumDetailViewModel = viewModel(),
     reviewId: Long,
     reviewIndex: Int,
     type: String,
-    onClickScrap: (id: Long) -> Unit = {}
+    isFirstLike: Boolean,
+    context: Context = LocalContext.current,
+    stadiumDetailViewModel: StadiumDetailViewModel = viewModel(),
+    onClickLike:() -> Unit = {},
+    onClickScrap: (id: Long) -> Unit = {},
+    onClickShare: () -> Unit = {}
 ) {
     val reviews = stadiumDetailViewModel.detailUiState.collectAsStateWithLifecycle()
     val bottomPadding by stadiumDetailViewModel.bottomPadding.collectAsStateWithLifecycle()
@@ -32,8 +35,11 @@ fun StadiumDetailPictureScreen(
                 reviewId = reviewId,
                 reviewIndex = reviewIndex,
                 bottomPadding = bottomPadding,
+                isFirstLike = isFirstLike,
                 stadiumDetailViewModel = stadiumDetailViewModel,
-                onClickScrap = onClickScrap
+                onClickLike = onClickLike,
+                onClickScrap = onClickScrap,
+                onClickShare = onClickShare
             )
         }
 
@@ -44,8 +50,11 @@ fun StadiumDetailPictureScreen(
                 reviewId = reviewId,
                 reviewIndex = reviewIndex,
                 bottomPadding = bottomPadding,
+                isFirstLike = isFirstLike,
                 stadiumDetailViewModel = stadiumDetailViewModel,
-                onClickScrap = onClickScrap
+                onClickLike = onClickLike,
+                onClickScrap = onClickScrap,
+                onClickShare = onClickShare
             )
         }
     }
@@ -55,6 +64,7 @@ fun StadiumDetailPictureScreen(
 @Composable
 private fun StadiumDetailPictureScreenMainPreview() {
     StadiumDetailPictureScreen(
+        isFirstLike = true,
         context = LocalContext.current,
         reviewId = 1,
         reviewIndex = 0,
@@ -66,6 +76,7 @@ private fun StadiumDetailPictureScreenMainPreview() {
 @Composable
 private fun StadiumDetailPictureScreenTopPreview() {
     StadiumDetailPictureScreen(
+        isFirstLike = true,
         context = LocalContext.current,
         reviewId = 1,
         reviewIndex = 0,

diff --git a/...va/com/dpm/presentation/viewfinder/compose/detailpicture/StadiumDetailPictureViewPager.kt b/...va/com/dpm/presentation/viewfinder/compose/detailpicture/StadiumDetailPictureViewPager.kt
@@ -1,18 +1,17 @@
 package com.dpm.presentation.viewfinder.compose.detailpicture
 
 import android.content.Context
-import android.util.Log
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentHeight
@@ -22,10 +21,6 @@ import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -46,6 +41,7 @@ import com.dpm.domain.entity.response.viewfinder.ResponseBlockReview
 fun StadiumDetailPictureViewPager(
     context: Context,
     isLike: Boolean,
+    isFirstLike: Boolean,
     likeCount: Long,
     verticalPagerState: PagerState,
     pictures: List<ResponseBlockReview.ResponseReview.ResponseReviewImage>,
@@ -116,6 +112,7 @@ fun StadiumDetailPictureViewPager(
                 }
             }
         }
+
         Box(
             modifier = Modifier
                 .fillMaxWidth()
@@ -129,6 +126,15 @@ fun StadiumDetailPictureViewPager(
                 onClickScrap = onClickScrap,
                 onClickShare = onClickShare
             )
+            if (isFirstLike) {
+                LikeTooltip(
+                    modifier = Modifier
+                        .align(Alignment.TopEnd)
+                        .offset(y = (-32).dp),
+                    bias = 0.8f,
+                    content = "유용했다면, 도움돼요를 눌러주세요!",
+                )
+            }
         }
     }
 
@@ -146,6 +152,7 @@ private fun StadiumDetailPictureViewPagerPreview() {
         context = LocalContext.current,
         isLike = true,
         likeCount = 1,
+        isFirstLike = true,
         verticalPagerState = pagerState,
         pictures = listOf(
             ResponseBlockReview.ResponseReview.ResponseReviewImage(

diff --git a/...ava/com/dpm/presentation/viewfinder/compose/detailpicture/StadiumDetailReviewViewPager.kt b/...ava/com/dpm/presentation/viewfinder/compose/detailpicture/StadiumDetailReviewViewPager.kt
@@ -26,15 +26,16 @@ fun StadiumDetailReviewViewPager(
     context: Context,
     position: Int,
     hasNext: Boolean = false,
+    isFirstLike: Boolean,
     pagerState: PagerState,
     pageIndex: Int,
     bottomPadding: Float,
     reviews: List<ResponseBlockReview.ResponseReview>,
     visited: List<Boolean> = emptyList(),
     modifier: Modifier = Modifier,
     onLoadPaging: () -> Unit = {},
-    onClickLike: (id:Long) -> Unit = {},
-    onClickScrap: (id:Long) -> Unit = {},
+    onClickLike: (id: Long) -> Unit = {},
+    onClickScrap: (id: Long) -> Unit = {},
     onClickShare: (imagePosition: Int) -> Unit = {}
 ) {
     if (pageIndex == reviews.size - 1 && hasNext) {
@@ -85,6 +86,7 @@ fun StadiumDetailReviewViewPager(
                 context = context,
                 isDimmed = isDimmed,
                 isLike = reviews[page].isLike,
+                isFirstLike = isFirstLike,
                 likeCount = reviews[page].likesCount,
                 pictures = reviews[page].images,
                 verticalPagerState = verticalPagerState,
@@ -180,6 +182,7 @@ private fun StadiumDetailReviewViewPagerPreview() {
     StadiumDetailReviewViewPager(
         context = LocalContext.current,
         reviews = reviews,
+        isFirstLike = true,
         visited = emptyList(),
         position = 1,
         hasNext = false,
@@ -265,6 +268,7 @@ private fun StadiumDetailReviewViewPagerMorePreview() {
         reviews = reviews,
         visited = emptyList(),
         position = 1,
+        isFirstLike = true,
         hasNext = false,
         pagerState = pagerState,
         pageIndex = 0,

diff --git a/...m/dpm/presentation/viewfinder/compose/detailpicture/main/StadiumDetailPictureTopScreen.kt b/...m/dpm/presentation/viewfinder/compose/detailpicture/main/StadiumDetailPictureTopScreen.kt
@@ -29,10 +29,13 @@ fun StadiumDetailPictureTopScreen(
     reviewId: Long,
     reviewIndex: Int,
     bottomPadding: Float,
+    isFirstLike: Boolean,
     reviews: StadiumDetailUiState,
     modifier: Modifier = Modifier,
     stadiumDetailViewModel: StadiumDetailViewModel = viewModel(),
-    onClickScrap: (id: Long) -> Unit = {}
+    onClickLike: () -> Unit = {},
+    onClickScrap: (id: Long) -> Unit = {},
+    onClickShare: () -> Unit = {}
 ) {
     reviews.let { uiState ->
         when (uiState) {
@@ -46,6 +49,10 @@ fun StadiumDetailPictureTopScreen(
                     initialPage = initPage
                 )
 
+                var isFirstLikeState by remember {
+                    mutableStateOf(isFirstLike)
+                }
+
                 var pageIndex by remember {
                     mutableStateOf(0)
                 }
@@ -60,13 +67,19 @@ fun StadiumDetailPictureTopScreen(
                     context = context,
                     reviews = uiState.topReviewImages,
                     position = reviewIndex,
+                    isFirstLike = isFirstLikeState,
                     pagerState = pagerState,
                     pageIndex = pageIndex,
                     bottomPadding = bottomPadding,
                     modifier = modifier,
-                    onClickLike = stadiumDetailViewModel::updateLike,
+                    onClickLike = { id ->
+                        onClickLike()
+                        isFirstLikeState = false
+                        stadiumDetailViewModel.updateLike(id)
+                    },
                     onClickScrap = onClickScrap,
                     onClickShare = { imagePosition ->
+                        onClickShare()
                         KakaoUtils().share(
                             context,
                             seatFeed(
@@ -99,6 +112,7 @@ private fun StadiumDetailPictureTopScreenPreview() {
         reviewId = 1,
         reviewIndex = 0,
         bottomPadding = 0f,
+        isFirstLike = false,
         reviews = StadiumDetailUiState.Empty,
     )
 }
diff --git a/...m/dpm/presentation/viewfinder/compose/detailpicture/top/StadiumDetailPictureMainScreen.kt b/...m/dpm/presentation/viewfinder/compose/detailpicture/top/StadiumDetailPictureMainScreen.kt
@@ -29,10 +29,13 @@ fun StadiumDetailPictureMainScreen(
     reviewId: Long,
     reviewIndex: Int,
     bottomPadding: Float,
+    isFirstLike: Boolean,
     reviews: StadiumDetailUiState,
     modifier: Modifier = Modifier,
     stadiumDetailViewModel: StadiumDetailViewModel = viewModel(),
-    onClickScrap: (id: Long) -> Unit = {}
+    onClickLike: () -> Unit = {},
+    onClickScrap: (id: Long) -> Unit = {},
+    onClickShare: () -> Unit = {}
 ) {
     reviews.let { uiState ->
         when (uiState) {
@@ -60,6 +63,10 @@ fun StadiumDetailPictureMainScreen(
                     mutableStateOf(0)
                 }
 
+                var isFirstLikeState by remember {
+                    mutableStateOf(isFirstLike)
+                }
+
                 LaunchedEffect(key1 = pagerState) {
                     snapshotFlow { pagerState.currentPage }.collect {
                         pageIndex = it
@@ -81,15 +88,21 @@ fun StadiumDetailPictureMainScreen(
                     reviews = uiState.reviews,
                     visited = visited,
                     position = reviewIndex,
+                    isFirstLike = isFirstLikeState,
                     hasNext = uiState.hasNext,
                     pagerState = pagerState,
                     pageIndex = pageIndex,
                     bottomPadding = bottomPadding,
                     modifier = modifier,
                     onLoadPaging = stadiumDetailViewModel::getBlockReviews,
-                    onClickLike = stadiumDetailViewModel::updateLike,
+                    onClickLike = { id ->
+                        onClickLike()
+                        isFirstLikeState = false
+                        stadiumDetailViewModel.updateLike(id)
+                    },
                     onClickScrap = onClickScrap,
                     onClickShare = { imagePosition ->
+                        onClickShare()
                         KakaoUtils().share(
                             context,
                             seatFeed(
@@ -122,6 +135,7 @@ private fun StadiumDetailPictureMainScreenPreview() {
         reviewId = 1,
         reviewIndex = 0,
         bottomPadding = 0f,
+        isFirstLike = false,
         reviews = StadiumDetailUiState.Empty,
     )
 }