✨ 프로필 좋아요 기능 구현

presentation/src/main/java/com/whyranoid/presentation/component/community/RunningFollowerItem.kt

@@ -1,6 +1,7 @@
 package com.whyranoid.presentation.component.community
 
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -14,16 +15,19 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 import com.whyranoid.domain.model.user.User
 import com.whyranoid.presentation.theme.WalkieColor
+import com.whyranoid.presentation.theme.WalkieTheme
 
 @Composable
 fun RunningFollowerItem(
     user: User = User.DUMMY,
     isDisplayName: Boolean = true,
     circularBorderColor: Color = WalkieColor.Primary,
+    onClickProfile: (user: User) -> Unit = { },
 ) {
     Column(
         modifier = Modifier.padding(10.dp),
@@ -33,7 +37,10 @@ fun RunningFollowerItem(
             modifier = Modifier
                 .size(76.dp)
                 .border(2.dp, circularBorderColor, CircleShape)
-                .clip(CircleShape),
+                .clip(CircleShape)
+                .clickable {
+                    onClickProfile(user)
+                },
             contentAlignment = Alignment.Center,
         ) {
             AsyncImage(
@@ -48,9 +55,17 @@ fun RunningFollowerItem(
         }
 
         if (isDisplayName) {
-            Spacer(modifier = Modifier.size(2.dp))
+            Spacer(modifier = Modifier.size(6.dp))
 
             Text(text = "내 기록")
         }
     }
 }
+
+@Preview
+@Composable
+fun RunningFollowerItemPreview() {
+    WalkieTheme {
+        RunningFollowerItem()
+    }
+}

presentation/src/main/java/com/whyranoid/presentation/component/running/RunningFollowerItemWithLikable.kt

@@ -1,18 +1,21 @@
 package com.whyranoid.presentation.component.running
 
+import android.util.Log
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Favorite
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -21,29 +24,46 @@ import com.whyranoid.presentation.component.community.RunningFollowerItem
 import com.whyranoid.presentation.theme.WalkieColor
 import com.whyranoid.presentation.theme.WalkieTheme
 
+// TODO 오프라인 때 = 테두리 회색 + 하트 버튼 X, 온라인일 때 = 테두리 주황 + 하트 버튼 O
 @Composable
 fun RunningFollowerItemWithLikable(
     user: User = User.DUMMY,
-    onClick: ((uid: Long) -> Unit)? = null,
+    onClickProfile: (user: User) -> Unit = { Log.d("t", "ju0828 called none") },
+    onClick: (uid: Long) -> Unit = { Log.d("t", "ju0828 called none") },
     circleBorderColor: Color = WalkieColor.Primary,
+    isDisplayName: Boolean = false,
     isLiked: Boolean = false,
 ) {
-    // var isLiked by rememberSaveable { mutableStateOf(false) }
-
     Box(
-        modifier = Modifier.clip(CircleShape).clickable {
-            onClick?.invoke(user.uid)
-//                .onSuccess {
-//                isLiked = true
-//            }
-        },
+        modifier = Modifier.wrapContentSize(),
+        contentAlignment = Alignment.TopEnd,
     ) {
-        RunningFollowerItem(user = user, isDisplayName = false, circleBorderColor)
-        if (isLiked) {
+        RunningFollowerItem(
+            user = user,
+            isDisplayName = isDisplayName,
+            circleBorderColor,
+            onClickProfile = onClickProfile,
+        )
+        Box(
+            modifier = Modifier
+                .padding(top = 50.dp)
+                .clip(CircleShape)
+                .clickable {
+                    onClick.invoke(user.uid)
+                }
+                .size(48.dp)
+                .padding(4.dp)
+                .clip(CircleShape)
+                .size(40.dp)
+                .padding(4.dp)
+                .shadow(elevation = 1.dp, shape = CircleShape)
+                .clip(CircleShape)
+                .background(Color.White),
+        ) {
             Icon(
                 Icons.Default.Favorite,
-                tint = WalkieColor.Primary,
-                modifier = Modifier.size(20.dp).align(Alignment.BottomCenter),
+                tint = if (isLiked) WalkieColor.Primary else WalkieColor.GrayBorder,
+                modifier = Modifier.size(20.dp).align(Alignment.Center),
                 contentDescription = "like image",
             )
         }

presentation/src/main/java/com/whyranoid/presentation/screens/CommunityScreen.kt

@@ -22,7 +22,7 @@ import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import com.whyranoid.presentation.component.bar.WalkieTopBar
 import com.whyranoid.presentation.component.community.PostItem
-import com.whyranoid.presentation.component.community.RunningFollowerItem
+import com.whyranoid.presentation.component.running.RunningFollowerItemWithLikable
 import com.whyranoid.presentation.theme.WalkieTypography
 import com.whyranoid.presentation.viewmodel.CommunityScreenViewModel
 import org.koin.androidx.compose.koinViewModel
@@ -32,7 +32,6 @@ import org.orbitmvi.orbit.compose.collectAsState
 fun CommunityScreen(
     navController: NavController,
 ) {
-
     val viewModel = koinViewModel<CommunityScreenViewModel>()
     val state by viewModel.collectAsState()
 
@@ -88,7 +87,7 @@ fun CommunityScreen(
             item {
                 LazyRow {
                     repeat(10) {
-                        item { RunningFollowerItem() }
+                        item { RunningFollowerItemWithLikable(isDisplayName = true) }
                     }
                 }
             }

presentation/src/main/java/com/whyranoid/presentation/screens/running/RunningScreen.kt

@@ -74,6 +74,7 @@ import com.naver.maps.map.compose.PathOverlay
 import com.naver.maps.map.compose.rememberCameraPositionState
 import com.naver.maps.map.overlay.OverlayImage
 import com.whyranoid.domain.model.running.UserLocation
+import com.whyranoid.domain.model.user.User
 import com.whyranoid.presentation.component.running.RunningFollowerItemWithLikable
 import com.whyranoid.presentation.model.running.SavingState
 import com.whyranoid.presentation.model.running.TrackingMode
@@ -124,6 +125,10 @@ fun RunningScreen(
         viewModel::saveHistory,
         viewModel::takeSnapShot,
         viewModel::sendLike,
+        onClickProfile = { user ->
+            Log.d("t", "ju0828 - c")
+            navController.navigate("userPage/${user.uid}/${user.nickname}/${true}")
+        },
     )
 }
 
@@ -142,6 +147,7 @@ fun RunningContent(
     saveHistory: (Bitmap, RunningFinishData) -> Unit,
     onTakeSnapShot: (RunningFinishData) -> Unit,
     onSendLike: (uid: Long) -> Unit,
+    onClickProfile: (user: User) -> Unit,
 ) {
     Column(
         modifier = Modifier.fillMaxHeight(),
@@ -155,6 +161,7 @@ fun RunningContent(
             onEditClose,
             saveHistory,
             onSendLike,
+            onClickProfile,
         )
         RunningInfoScreen(
             modifier = Modifier.height(280.dp),
@@ -191,6 +198,7 @@ fun RunningMapScreen(
     onEditClose: () -> Unit,
     onSaveHistory: (Bitmap, RunningFinishData) -> Unit,
     onSendLike: (uid: Long) -> Unit,
+    onClickProfile: (user: User) -> Unit,
 ) {
     var mapProperties by remember {
         mutableStateOf(
@@ -486,6 +494,7 @@ fun RunningMapScreen(
                     items(running.size) {
                         RunningFollowerItemWithLikable(
                             user = running[it].user,
+                            onClickProfile = onClickProfile,
                             onClick = onSendLike,
                             circleBorderColor = WalkieColor.Primary,
                             isLiked = running[it].isLiked,