Feat/#43 프로필 기능을 개발한다

app/build.gradle.kts

@@ -45,6 +45,7 @@ dependencies {
     implementation(project(":feature:mypage"))
     implementation(project(":feature:registerpost"))
     implementation(project(":feature:gallery"))
+    implementation(project(":feature:profileeditor"))
     implementation(project(":core:interceptor"))
     implementation(project(":core:data"))
     implementation(project(":core:network"))

app/src/main/java/com/withpeace/withpeace/WithpeaceApp.kt

@@ -1,10 +1,8 @@
 package com.withpeace.withpeace
 
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
@@ -46,7 +44,8 @@ fun WithpeaceApp(
                 }
             }
         },
-        modifier = Modifier.fillMaxSize().safeDrawingPadding(),
+        modifier = Modifier
+            .fillMaxSize(),
         snackbarHost = { SnackbarHost(snackBarHostState) },
     ) { innerPadding ->
         WithpeaceNavHost(

app/src/main/java/com/withpeace/withpeace/navigation/NavHost.kt

@@ -1,21 +1,16 @@
 package com.withpeace.withpeace.navigation
 
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.rememberNavController
-import androidx.navigation.navOptions
-import com.withpeace.withpeace.feature.home.navigation.homeNavGraph
-import com.withpeace.withpeace.feature.mypage.navigation.myPageNavGraph
-import com.withpeace.withpeace.feature.post.navigation.postNavGraph
 import com.withpeace.withpeace.feature.gallery.navigation.galleryNavGraph
 import com.withpeace.withpeace.feature.gallery.navigation.navigateToGallery
+import com.withpeace.withpeace.feature.home.navigation.homeNavGraph
 import com.withpeace.withpeace.feature.login.navigation.LOGIN_ROUTE
 import com.withpeace.withpeace.feature.login.navigation.loginNavGraph
+import com.withpeace.withpeace.feature.mypage.navigation.myPageNavGraph
+import com.withpeace.withpeace.feature.post.navigation.postNavGraph
 import com.withpeace.withpeace.feature.registerpost.navigation.IMAGE_LIST_ARGUMENT
 import com.withpeace.withpeace.feature.registerpost.navigation.registerPostNavGraph
 
@@ -60,6 +55,11 @@ fun WithpeaceNavHost(
         )
         homeNavGraph(onShowSnackBar)
         postNavGraph(onShowSnackBar)
-        myPageNavGraph(onShowSnackBar)
+        myPageNavGraph(
+            onShowSnackBar = onShowSnackBar,
+            onEditProfile = {},
+            onLogoutClick = {},
+            onWithdrawClick = {},
+        )
     }
 }

core/designsystem/src/main/java/com/withpeace/withpeace/core/designsystem/ui/TitleBar.kt

@@ -0,0 +1,29 @@
+package com.withpeace.withpeace.core.designsystem.ui
+
+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.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.withpeace.withpeace.core.designsystem.theme.WithpeaceTheme
+
+@Composable
+fun TitleBar(title: String, modifier: Modifier = Modifier) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier
+            .fillMaxWidth()
+            .height(56.dp)
+            .padding(start = 24.dp),
+    ) {
+        Text(
+            text = title,
+            style = WithpeaceTheme.typography.title1,
+            color = WithpeaceTheme.colors.SystemBlack,
+        )
+    }
+}

feature/mypage/build.gradle.kts

@@ -7,4 +7,6 @@ android {
 }
 
 dependencies {
+    implementation(libs.skydoves.landscapist.glide)
+    implementation(libs.skydoves.landscapist.bom)
 }

feature/mypage/src/main/java/com/withpeace/withpeace/feature/mypage/MyPageScreen.kt

@@ -1,14 +1,209 @@
 package com.withpeace.withpeace.feature.mypage
 
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Divider
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.skydoves.landscapist.glide.GlideImage
+import com.withpeace.withpeace.core.designsystem.theme.WithpeaceTheme
+import com.withpeace.withpeace.core.designsystem.ui.TitleBar
 
 @Composable
 fun MyPageRoute(
     onShowSnackBar: (message: String) -> Unit = {},
+    onEditProfile: () -> Unit,
+    onLogoutClick: () -> Unit,
+    onWithdrawClick: () -> Unit,
 ) {
-    MyPageScreen()
+    MyPageScreen(
+        onEditProfile = onEditProfile,
+        onLogoutClick = onLogoutClick,
+        onWithdrawClick = onWithdrawClick,
+    )
 }
 
 @Composable
-fun MyPageScreen() {
+fun MyPageScreen(
+    modifier: Modifier = Modifier,
+    onEditProfile: () -> Unit,
+    onLogoutClick: () -> Unit,
+    onWithdrawClick: () -> Unit,
+) {
+    Column(
+        modifier,
+    ) {
+        TitleBar(title = stringResource(R.string.my_page))
+        Column(modifier = modifier.padding(horizontal = WithpeaceTheme.padding.BasicHorizontalPadding)) {
+            Row(
+                modifier = modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    val imageModifier = modifier
+                        .size(54.dp)
+                        .border(
+                            BorderStroke(0.dp, Color.Transparent),
+                            shape = CircleShape,
+                        )
+                    GlideImage(
+                        modifier = imageModifier,
+                        imageModel = { "" },
+                        failure = {
+                            Image(
+                                painterResource(id = R.drawable.ic_default_profile),
+                                modifier = imageModifier,
+                                contentDescription = "",
+                            )
+                        },
+                    )
+                    Text(
+                        style = WithpeaceTheme.typography.body,
+                        text = "닉네임닉네임",
+                        modifier = modifier.padding(start = 8.dp),
+                    )
+                }
+                TextButton(
+                    onClick = { onEditProfile() },
+                ) {
+                    Text(
+                        color = WithpeaceTheme.colors.MainPink,
+                        text = stringResource(R.string.edit_profile),
+                        style = WithpeaceTheme.typography.caption,
+                    )
+                }
+            }
+        }
+        Spacer(modifier = modifier.height(16.dp))
+        Divider(
+            color = WithpeaceTheme.colors.SystemGray3,
+            modifier = modifier
+                .fillMaxWidth()
+                .height(4.dp),
+        )
+        MyPageSections(
+            modifier = modifier,
+            onLogoutClick = onLogoutClick,
+            onWithdrawClick = onWithdrawClick,
+        )
+    }
+}
+
+@Composable
+fun MyPageSections(
+    modifier: Modifier,
+    onLogoutClick: () -> Unit,
+    onWithdrawClick: () -> Unit,
+) {
+    Column(modifier = modifier.padding(horizontal = WithpeaceTheme.padding.BasicHorizontalPadding)) {
+        AccountSection(modifier)
+        Divider(
+            modifier = modifier
+                .fillMaxWidth()
+                .height(1.dp),
+            color = WithpeaceTheme.colors.SystemGray3,
+        )
+        EtcSection(modifier, onLogoutClick = onLogoutClick, onWithdrawClick = onWithdrawClick)
+    }
+}
+
+@Composable
+private fun AccountSection(modifier: Modifier) {
+    Section(title = stringResource(R.string.account)) {
+        Spacer(modifier = modifier.height(16.dp))
+        Row(modifier = modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+            Text(
+                text = stringResource(R.string.connected_account),
+                style = WithpeaceTheme.typography.body,
+                color = WithpeaceTheme.colors.SystemBlack,
+            )
+            Text(
+                text = "abc@gmail.com",
+                style = WithpeaceTheme.typography.caption,
+                color = WithpeaceTheme.colors.SystemGray2,
+            )
+        }
+    }
+}
+
+@Composable
+private fun EtcSection(
+    modifier: Modifier,
+    onLogoutClick: () -> Unit,
+    onWithdrawClick: () -> Unit,
+) {
+    Section(title = stringResource(R.string.etc)) {
+        Spacer(modifier = modifier.height(8.dp))
+        Text(
+            text = stringResource(R.string.logout),
+            style = WithpeaceTheme.typography.body,
+            color = WithpeaceTheme.colors.SystemBlack,
+            modifier = modifier
+                .fillMaxWidth()
+                .clickable {
+                    onLogoutClick()
+                }
+                .padding(vertical = 8.dp),
+        )
+        Text(
+            text = stringResource(R.string.withdraw),
+            style = WithpeaceTheme.typography.body,
+            color = WithpeaceTheme.colors.SystemBlack,
+            modifier = modifier
+                .fillMaxWidth()
+                .clickable {
+                    onWithdrawClick()
+                }
+                .padding(vertical = 8.dp),
+        )
+    }
+}
+
+@Composable
+private fun Section(
+    title: String,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit = {},
+) {
+    Column {
+        Spacer(modifier = modifier.height(16.dp))
+        Text(text = title, style = WithpeaceTheme.typography.caption, color = Color(0xFF858585))
+        content()
+        Spacer(modifier = modifier.height(16.dp))
+    }
+
+}
+
+@Preview
+@Composable
+fun MyPagePreview() {
+    WithpeaceTheme {
+        MyPageScreen(
+            onEditProfile = {
+            },
+            modifier = Modifier,
+            onLogoutClick = {},
+            onWithdrawClick = {},
+        )
+    }
 }

feature/mypage/src/main/java/com/withpeace/withpeace/feature/mypage/navigation/MyPageNavigation.kt

@@ -14,8 +14,16 @@ fun NavController.navigateMyPage(navOptions: NavOptions? = null) {
 
 fun NavGraphBuilder.myPageNavGraph(
     onShowSnackBar: (message: String) -> Unit,
+    onEditProfile: () -> Unit,
+    onLogoutClick: () -> Unit,
+    onWithdrawClick: () -> Unit,
 ) {
     composable(route = MY_PAGE_ROUTE) {
-        MyPageRoute(onShowSnackBar = onShowSnackBar)
+        MyPageRoute(
+            onShowSnackBar = onShowSnackBar,
+            onEditProfile = onEditProfile,
+            onLogoutClick = onLogoutClick,
+            onWithdrawClick = onWithdrawClick,
+        )
     }
 }

feature/mypage/src/main/res/drawable/ic_default_profile.xml

@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="120dp"
+    android:height="120dp"
+    android:viewportWidth="120"
+    android:viewportHeight="120">
+  <path
+      android:pathData="M120,60C120,93.14 93.14,120 60,120C26.86,120 0,93.14 0,60C0,26.86 26.86,0 60,0C93.14,0 120,26.86 120,60Z"
+      android:fillColor="#E8E8FC"/>
+  <path
+      android:pathData="M86,53C86,67.36 74.36,79 60,79C45.64,79 34,67.36 34,53C34,38.64 45.64,27 60,27C74.36,27 86,38.64 86,53Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M49,47C49,45.9 49.9,45 51,45C52.1,45 53,45.9 53,47V51C53,52.1 52.1,53 51,53C49.9,53 49,52.1 49,51V47Z"
+      android:fillColor="#D9D9D9"/>
+  <path
+      android:pathData="M67,47C67,45.9 67.9,45 69,45C70.1,45 71,45.9 71,47V51C71,52.1 70.1,53 69,53C67.9,53 67,52.1 67,51V47Z"
+      android:fillColor="#D9D9D9"/>
+  <path
+      android:pathData="M69.47,59.35C70.03,59.55 70.34,60.15 70.12,60.7C69.35,62.69 68.09,64.42 66.47,65.7C64.59,67.19 62.33,68 60.01,68C57.69,68 55.42,67.2 53.54,65.71C51.92,64.43 50.66,62.7 49.88,60.71C49.67,60.16 49.98,59.56 50.53,59.36C51.13,59.15 51.78,59.49 52.03,60.07C52.66,61.54 53.62,62.81 54.83,63.77C56.34,64.96 58.15,65.6 60.01,65.6C61.86,65.6 63.67,64.96 65.18,63.76C66.39,62.8 67.35,61.53 67.98,60.06C68.22,59.47 68.87,59.14 69.47,59.35Z"
+      android:fillColor="#D9D9D9"/>
+  <path
+      android:pathData="M19,103.36C22.15,83.32 39.31,68 60,68C80.69,68 97.85,83.32 101,103.36C90.35,113.67 75.91,120 60,120C44.09,120 29.65,113.67 19,103.36Z"
+      android:fillColor="#ffffff"/>
+</vector>

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

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="my_page">마이페이지</string>
+    <string name="edit_profile">프로필 수정</string>
+    <string name="account">계정</string>
+    <string name="connected_account">연결된 계정</string>
+    <string name="etc">기타</string>
+    <string name="logout">로그아웃</string>
+    <string name="withdraw">탈퇴하기</string>
+</resources>

feature/profileeditor/.gitignore

@@ -0,0 +1 @@
+/build

feature/profileeditor/build.gradle.kts

@@ -0,0 +1,12 @@
+plugins {
+    id("convention.feature")
+}
+
+android {
+    namespace = "com.withpeace.withpeace.feature.profileeditor"
+}
+
+dependencies {
+    implementation(libs.skydoves.landscapist.glide)
+    implementation(libs.skydoves.landscapist.bom)
+}