Feature/#132 프로필 수정 ui 구현

core/designsystem/src/main/java/com/teamsolply/solply/designsystem/component/dropdown/SolplyBasicDropDown.kt

@@ -0,0 +1,103 @@
+package com.teamsolply.solply.designsystem.component.dropdown
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.teamsolply.solply.designsystem.R
+import com.teamsolply.solply.designsystem.theme.SolplyTheme
+import com.teamsolply.solply.ui.extension.customClickable
+
+@Composable
+fun SolplyBasicDropDown(
+    defaultLabel: String,
+    onClickDropIcon: () -> Unit,
+    modifier: Modifier = Modifier,
+    isDropped: Boolean = false,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    Column(
+        modifier = modifier
+            .clip(
+                RoundedCornerShape(20.dp)
+            )
+            .border(
+                width = 1.dp,
+                color = SolplyTheme.colors.gray300,
+                shape = RoundedCornerShape(20.dp)
+            )
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .then(
+                    if (isDropped) {
+                        Modifier.background(
+                            color = SolplyTheme.colors.gray100
+                        )
+                    } else {
+                        Modifier.background(
+                            color = SolplyTheme.colors.white
+                        )
+                    }
+                ),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = defaultLabel,
+                color = SolplyTheme.colors.gray900,
+                style = SolplyTheme.typography.body16M,
+                modifier = Modifier.padding(start = 20.dp)
+            )
+            Icon(
+                painter = painterResource(R.drawable.ic_arrow_down),
+                contentDescription = "",
+                modifier = Modifier
+                    .padding(end = 20.dp, top = 14.dp, bottom = 14.dp)
+                    .height(24.dp)
+                    .width(24.dp)
+                    .scale(
+                        scaleX = 1f,
+                        scaleY = if (isDropped) -1f else 1f
+                    )
+                    .customClickable(
+                        rippleEnabled = false,
+                        onClick = onClickDropIcon
+                    )
+            )
+        }
+        HorizontalDivider(color = SolplyTheme.colors.gray300)
+        AnimatedVisibility(
+            visible = isDropped,
+            enter = slideInVertically(),
+            exit = slideOutVertically()
+        ) {
+            Column(
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                content()
+            }
+        }
+    }
+}

core/designsystem/src/main/res/drawable/ic_arrow_down.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M8.286,10.552L12.143,14.49L16,10.552"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#242424"
+      android:strokeLineCap="round"/>
+</vector>

feature/main/src/main/java/com/teamsolply/solply/main/MainNavigator.kt

@@ -17,6 +17,7 @@ import com.teamsolply.solply.course.navigation.navigateCourse
 import com.teamsolply.solply.main.splash.Splash
 import com.teamsolply.solply.maps.navigation.navigateMaps
 import com.teamsolply.solply.mypage.navigation.navigateMypage
+import com.teamsolply.solply.mypage.profile.navigation.navigateProfile
 import com.teamsolply.solply.oauth.navigation.navigateOauth
 import com.teamsolply.solply.onboarding.navigation.navigateOnBoarding
 import com.teamsolply.solply.place.navigation.navigatePlace
@@ -137,6 +138,22 @@ internal class MainNavigator(
         )
     }
 
+    fun navigateToMypage(
+        navOptions: NavOptions
+    ) {
+        navController.navigateMypage(
+            navOptions = navOptions
+        )
+    }
+
+    fun navigateToProfile(
+        navOptions: NavOptions
+    ) {
+        navController.navigateProfile(
+            navOptions = navOptions
+        )
+    }
+
     fun navigateToFavoriteTown(navOptions: NavOptions = navOptions {}) {
         navController.navigateFavoriteTown(navOptions)
     }

feature/main/src/main/java/com/teamsolply/solply/main/MainScreen.kt

@@ -39,7 +39,10 @@ import com.teamsolply.solply.main.model.SolplySnackBarData
 import com.teamsolply.solply.main.splash.splashNavGraph
 import com.teamsolply.solply.maps.navigation.mapsNavGraph
 import com.teamsolply.solply.model.SnackBarType
+import com.teamsolply.solply.mypage.navigation.Mypage
 import com.teamsolply.solply.mypage.navigation.mypageNavGraph
+import com.teamsolply.solply.mypage.profile.navigation.Profile
+import com.teamsolply.solply.mypage.profile.navigation.profileNavGraph
 import com.teamsolply.solply.oauth.navigation.oauthNavGraph
 import com.teamsolply.solply.onboarding.navigation.onBoardingNavGraph
 import com.teamsolply.solply.place.navigation.placeNavGraph
@@ -333,7 +336,22 @@ internal fun MainScreen(
                     )
                     mypageNavGraph(
                         paddingValues = innerPadding,
-                        navigateToBack = navigator::navigateToBack
+                        navigateToBack = navigator::navigateToBack,
+                        navigateToProfile = {
+                            val navOptions = navOptions { }
+                            navigator.navigateToProfile(navOptions)
+                        }
+                    )
+                    profileNavGraph(
+                        paddingValues = innerPadding,
+                        navigateToBack = navigator::navigateToBack,
+                        navigateToMypage = {
+                            val navOptions = navOptions {
+                                popUpTo<Mypage> { inclusive = true }
+                                launchSingleTop = true
+                            }
+                            navigator.navigateToMypage(navOptions = navOptions)
+                        }
                     )
                     favoriteTownNavGraph(
                         paddingValues = innerPadding,

feature/mypage/src/main/java/com/teamsolply/solply/mypage/MypageContract.kt

@@ -1,13 +1,22 @@
 package com.teamsolply.solply.mypage
 
+import com.teamsolply.solply.mypage.model.DropDownPersonaItem
 import com.teamsolply.solply.ui.base.SideEffect
 import com.teamsolply.solply.ui.base.UiIntent
 import com.teamsolply.solply.ui.base.UiState
+import kotlinx.collections.immutable.persistentListOf
 
 data class MypageState(
-    val town: String = "연희동"
+    val town: String = "연희동",
+    val nickname: String = "",
 ) : UiState
 
-sealed interface MypageIntent : UiIntent
+sealed interface MypageIntent : UiIntent {
 
-sealed interface MypageSideEffect : SideEffect
+}
+
+sealed interface MypageSideEffect : SideEffect {
+    data object NavigateToBack : MypageSideEffect
+    data object NavigateToProfile : MypageSideEffect
+    data object NavigateToMypage : MypageSideEffect
+}

feature/mypage/src/main/java/com/teamsolply/solply/mypage/MypageScreen.kt

@@ -34,17 +34,20 @@ import com.teamsolply.solply.ui.extension.customClickable
 fun MypageRoute(
     paddingValues: PaddingValues,
     navigateToBack: () -> Unit,
+    navigateToProfile: () -> Unit,
     viewModel: MypageViewModel = hiltViewModel()
 ) {
     MypageScreen(
+        onBackButtonClick = navigateToBack,
+        onProfileEditClick = navigateToProfile,
         modifier = Modifier.padding(paddingValues),
-        onBackButtonClick = navigateToBack
     )
 }
 
 @Composable
 fun MypageScreen(
     onBackButtonClick: () -> Unit,
+    onProfileEditClick: () -> Unit,
     modifier: Modifier = Modifier
 ) {
     Column(
@@ -85,7 +88,12 @@ fun MypageScreen(
             style = SolplyTheme.typography.display20Sb
         )
         Row(
-            modifier = Modifier.padding(top = 12.dp)
+            modifier = Modifier
+                .padding(top = 12.dp)
+                .customClickable(
+                    rippleEnabled = false,
+                    onClick = onProfileEditClick
+                )
         ) {
             Text(
                 text = "프로필 수정",
@@ -172,7 +180,8 @@ fun MypageScreen(
 private fun MypageScreenPreview() {
     SolplyTheme {
         MypageScreen(
-            onBackButtonClick = {}
+            onBackButtonClick = {},
+            onProfileEditClick = {}
         )
     }
 }

feature/mypage/src/main/java/com/teamsolply/solply/mypage/component/SolplyPersonaDropDown.kt

@@ -0,0 +1,137 @@
+package com.teamsolply.solply.mypage.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.teamsolply.solply.designsystem.component.dropdown.SolplyBasicDropDown
+import com.teamsolply.solply.designsystem.theme.SolplyTheme
+import com.teamsolply.solply.mypage.model.DropDownPersonaItem
+import com.teamsolply.solply.ui.extension.customClickable
+import kotlinx.collections.immutable.persistentListOf
+
+@Composable
+fun SolplyPersonaDropDown(
+    placeholder: String,
+    onClickItem: (Int) -> Unit,
+    onClickDropIcon: () -> Unit,
+    dropDownContents: List<DropDownPersonaItem>,
+    selectedIndex: Int,
+    modifier: Modifier = Modifier,
+    isDropped: Boolean = false,
+    isSelected: Boolean = false
+) {
+    SolplyBasicDropDown(
+        defaultLabel = if (isSelected) dropDownContents.get(selectedIndex).label else placeholder,
+        onClickDropIcon = onClickDropIcon,
+        isDropped = isDropped,
+        modifier = modifier
+    ) {
+        dropDownContents.forEachIndexed { index, item ->
+            if (index != selectedIndex) {
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .background(
+                            color = SolplyTheme.colors.white
+                        )
+                        .customClickable(
+                            rippleEnabled = false,
+                            onClick = { onClickItem(index) }
+                        ),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Start
+                ) {
+                    Text(
+                        text = item.label,
+                        color = SolplyTheme.colors.gray900,
+                        style = SolplyTheme.typography.body16M,
+                        modifier = Modifier.padding(
+                            start = 20.dp,
+                            top = 14.dp,
+                            bottom = 14.dp
+                        )
+                    )
+                }
+                HorizontalDivider(color = SolplyTheme.colors.gray300)
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun SolplyPersonaDropDownPreview() {
+    var isDropped by remember { mutableStateOf(false) }
+    var isSelected by remember { mutableStateOf(false) }
+    var selectedIndex by remember { mutableIntStateOf(-1) }
+    SolplyTheme {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(SolplyTheme.colors.white)
+        ) {
+            SolplyPersonaDropDown(
+                placeholder = "조용한 공간에 오래 머물고 싶어요",
+                onClickItem = {},
+                onClickDropIcon = {},
+                dropDownContents = persistentListOf(
+                    DropDownPersonaItem(
+                        "이곳저곳 둘러보고 싶어요"
+                    ),
+                    DropDownPersonaItem(
+                        "취향이 담긴 곳을 찾고 싶어요"
+                    ),
+                    DropDownPersonaItem(
+                        "자연을 감상하며 쉬고 싶어요"
+                    ),
+                    DropDownPersonaItem(
+                        "조용한 공간에 오래 머물고 싶어요"
+                    ),
+                ),
+                isDropped = false,
+                selectedIndex = 0,
+                isSelected = false
+            )
+            SolplyPersonaDropDown(
+                isDropped = isDropped,
+                placeholder = "선택해주세요",
+                onClickItem = {
+                    selectedIndex = it
+                    isSelected = true
+                },
+                onClickDropIcon = { isDropped = !isDropped },
+                dropDownContents = persistentListOf(
+                    DropDownPersonaItem(
+                        "이곳저곳 둘러보고 싶어요"
+                    ),
+                    DropDownPersonaItem(
+                        "취향이 담긴 곳을 찾고 싶어요"
+                    ),
+                    DropDownPersonaItem(
+                        "자연을 감상하며 쉬고 싶어요"
+                    ),
+                    DropDownPersonaItem(
+                        "조용한 공간에 오래 머물고 싶어요"
+                    ),
+                ),
+                selectedIndex = selectedIndex,
+                isSelected = isSelected
+            )
+        }
+    }
+}