🔗 :: (#46) 프로필 사진 선택 스크린 퍼블리싱

🔗 :: (#46) 프로필 사진 선택 스크린 퍼블리싱

app/src/main/java/team/retum/jobisandroidv2/navigation/AuthNavigation.kt

@@ -10,6 +10,7 @@ import team.retum.signin.navigation.navigateToSignIn
 import team.retum.signin.navigation.signIn
 import team.retum.signup.navigation.navigateToInputEmail
 import team.retum.signup.navigation.navigateToSelectGender
+import team.retum.signup.navigation.navigateToSetProfile
 import team.retum.signup.navigation.navigateToSettingPassword
 import team.retum.signup.navigation.navigateToSignUp
 import team.retum.signup.navigation.signUp
@@ -34,6 +35,7 @@ internal fun NavGraphBuilder.authNavigation(navController: NavController) {
             onInputEmailClick = navController::navigateToInputEmail,
             onInputPasswordClick = navController::navigateToSettingPassword,
             onSelectGenderClick = navController::navigateToSelectGender,
+            onSetProfileClick = navController::navigateToSetProfile,
         )
     }
 }

feature/signup/src/main/java/team/retum/signup/navigation/SetProfileNavigation.kt

@@ -0,0 +1,22 @@
+package team.retum.signup.navigation
+
+import androidx.navigation.NavController
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
+import team.retum.signup.ui.SetProfile
+
+const val NAVIGATION_SET_PROFILE = "setProfile"
+
+fun NavGraphBuilder.setProfile(
+    onBackPressed: () -> Unit,
+){
+    composable(NAVIGATION_SET_PROFILE){
+        SetProfile(
+            onBackPressed = onBackPressed,
+        )
+    }
+}
+
+fun NavController.navigateToSetProfile(){
+    navigate(NAVIGATION_SET_PROFILE)
+}

feature/signup/src/main/java/team/retum/signup/navigation/SignUpNavigation.kt

@@ -11,6 +11,7 @@ fun NavGraphBuilder.signUp(
     onInputEmailClick: () -> Unit,
     onInputPasswordClick: () -> Unit,
     onSelectGenderClick: () -> Unit,
+    onSetProfileClick: () -> Unit,
 ) {
     navigation(
         route = NAVIGATION_SIGN_UP,
@@ -28,10 +29,12 @@ fun NavGraphBuilder.signUp(
             onBackPressed = onBackPressed,
             onNextClick = onSelectGenderClick,
         )
-        // TODO 다음 스크린 작업 시 onNextClick 추가
         selectGender(
             onBackPressed = onBackPressed,
-            onNextClick = {},
+            onNextClick = onSetProfileClick,
+        )
+        setProfile(
+            onBackPressed = onBackPressed,
         )
     }
 }

feature/signup/src/main/java/team/retum/signup/ui/SetProfileScreen.kt

@@ -0,0 +1,171 @@
+package team.retum.signup.ui
+
+import android.net.Uri
+import androidx.activity.compose.ManagedActivityResultLauncher
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.PickVisualMediaRequest
+import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.Arrangement
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+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
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import team.retum.signup.R
+import team.returm.jobisdesignsystemv2.appbar.JobisLargeTopAppBar
+import team.returm.jobisdesignsystemv2.button.ButtonColor
+import team.returm.jobisdesignsystemv2.button.JobisButton
+import team.returm.jobisdesignsystemv2.foundation.JobisIcon
+import team.returm.jobisdesignsystemv2.foundation.JobisTheme
+import team.returm.jobisdesignsystemv2.foundation.JobisTypography
+
+@Composable
+fun SetProfile(
+    onBackPressed: () -> Unit,
+) {
+    // TODO viewModel로 옮기기
+    var uri: Uri? by remember { mutableStateOf(null) }
+    val activityResultLauncher = rememberLauncherForActivityResult(
+        contract = ActivityResultContracts.PickVisualMedia(),
+        onResult = { uri = it },
+    )
+
+    SetProfileScreen(
+        onBackPressed = onBackPressed,
+        activityResultLauncher = activityResultLauncher,
+        uri = uri,
+    )
+}
+
+@Composable
+private fun SetProfileScreen(
+    onBackPressed: () -> Unit,
+    activityResultLauncher: ManagedActivityResultLauncher<PickVisualMediaRequest, Uri?>,
+    uri: Uri?,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(JobisTheme.colors.background)
+            .padding(horizontal = 24.dp),
+    ) {
+        JobisLargeTopAppBar(
+            title = stringResource(id = R.string.set_profile),
+            onBackPressed = onBackPressed,
+        )
+        SetImage(
+            uri = uri,
+            onClick = {
+                val mediaType = ActivityResultContracts.PickVisualMedia.ImageOnly
+                val request = PickVisualMediaRequest(mediaType)
+                activityResultLauncher.launch(request)
+            },
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        JobisButton(
+            modifier = Modifier.padding(bottom = 24.dp),
+            text = stringResource(id = R.string.next),
+            onClick = { },
+            color = ButtonColor.Primary,
+        )
+    }
+}
+
+@Composable
+private fun SetImage(
+    uri: Uri?,
+    onClick: () -> Unit,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        // TODO async image 사용
+        Image(
+            modifier = Modifier
+                .size(80.dp)
+                .clip(CircleShape),
+            painter = painterResource(id = team.retum.common.R.drawable.ic_person),
+            contentDescription = "user profile",
+        )
+        // TODO jobis medium button 구현하기
+        SetImageButton(
+            text = stringResource(id = R.string.edit_image),
+            onClick = onClick,
+        )
+    }
+}
+
+@Composable
+private fun SetImageButton(
+    text: String,
+    onClick: () -> Unit,
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val pressed by interactionSource.collectIsPressedAsState()
+    val scale by animateFloatAsState(
+        targetValue = if (pressed) 0.98f
+        else 1f,
+        label = "",
+    )
+
+    Row(
+        modifier = Modifier
+            .graphicsLayer {
+                scaleX = scale
+                scaleY = scale
+            }
+            .clip(RoundedCornerShape(12.dp))
+            .background(JobisTheme.colors.primary)
+            .clickable(
+                onClick = onClick,
+                interactionSource = interactionSource,
+                indication = rememberRipple(),
+            )
+            .padding(
+                vertical = 8.dp,
+                horizontal = 12.dp,
+            ),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.ic_pencil),
+            contentDescription = "pencil",
+            tint = JobisTheme.colors.onPrimary,
+        )
+        Text(
+            text = text,
+            style = JobisTypography.SubHeadLine,
+            color = JobisTheme.colors.onPrimary,
+        )
+    }
+}

feature/signup/src/main/res/drawable/ic_pencil.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="24dp"
+    android:viewportWidth="25"
+    android:viewportHeight="24">
+  <group>
+    <clip-path
+        android:pathData="M0.5,0h24v24h-24z"/>
+    <path
+        android:pathData="M5.5,19H6.761L16.998,8.763L15.737,7.502L5.5,17.739V19ZM4.904,20.5C4.648,20.5 4.433,20.413 4.26,20.24C4.087,20.067 4,19.852 4,19.596V17.864C4,17.62 4.047,17.387 4.14,17.166C4.234,16.945 4.363,16.753 4.527,16.588L17.19,3.931C17.342,3.793 17.509,3.687 17.691,3.612C17.874,3.537 18.066,3.5 18.266,3.5C18.467,3.5 18.661,3.536 18.849,3.607C19.037,3.678 19.203,3.791 19.348,3.946L20.569,5.183C20.724,5.328 20.835,5.494 20.901,5.683C20.967,5.871 21,6.06 21,6.248C21,6.449 20.966,6.641 20.897,6.824C20.828,7.007 20.719,7.174 20.569,7.325L7.911,19.973C7.747,20.137 7.555,20.266 7.334,20.36C7.113,20.453 6.88,20.5 6.636,20.5H4.904ZM16.356,8.144L15.737,7.502L16.998,8.763L16.356,8.144Z"
+        android:fillColor="#135C9D"/>
+  </group>
+</vector>

feature/signup/src/main/res/values/strings.xml

@@ -21,4 +21,7 @@
     <string name="select_gender">성별을 선택해주세요</string>
     <string name="gender_man">남성</string>
     <string name="gender_woman">여성</string>
+
+    <string name="set_profile">프로필 사진을 등록해주세요</string>
+    <string name="edit_image">이미지 수정하기</string>
 </resources>