myinfo, login, signup design modified

snuhcs-course · Nov 13, 2023 · 0cec211 · 0cec211
1 parent 8e1f83e
commit 0cec211
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 26 deletions.
diff --git a/frontend/app/src/main/java/com/team13/fooriend/ui/screen/mypage/ChangePwdScreen.kt b/frontend/app/src/main/java/com/team13/fooriend/ui/screen/mypage/ChangePwdScreen.kt
@@ -31,14 +31,12 @@ fun ChangePwdScreen(
         //textfield 로 바꾸기
         //현재 비번 맞는지 확인->맞아야 바뀌게
         //새 비번, 확인 필드 일치하는지 확인->맞아야 넘어가게
-
-
-//        TextField(
-//            text = "현재 비밀번호 :",
-//            modifier = Modifier.align(Alignment.Start)
-//        )
-//        TextField(text = "새 비밀번호 :", modifier = Modifier.align(Alignment.Start))
-//        TextField(text = "비밀번호 확인 :", modifier = Modifier.align(Alignment.Start))
+        Text(
+            text = "현재 비밀번호 :",
+            modifier = Modifier.align(Alignment.Start)
+        )
+        Text(text = "새 비밀번호 :", modifier = Modifier.align(Alignment.Start))
+        Text(text = "비밀번호 확인 :", modifier = Modifier.align(Alignment.Start))
         Button(
             onClick = { onConfirmClick() },
             colors = ButtonDefaults.buttonColors(

diff --git a/frontend/app/src/main/java/com/team13/fooriend/ui/screen/mypage/MyInformationScreen.kt b/frontend/app/src/main/java/com/team13/fooriend/ui/screen/mypage/MyInformationScreen.kt
@@ -1,13 +1,21 @@
 package com.team13.fooriend.ui.screen.mypage
 
+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.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
+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.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Face
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
@@ -16,10 +24,16 @@ 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.shadow
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import com.team13.fooriend.data.User
+import com.team13.fooriend.ui.theme.BaseGray
 import com.team13.fooriend.ui.theme.BaseGreen
 
 @Composable
@@ -37,38 +51,78 @@ fun MyInformationScreen(
     )
     Column(
         modifier = Modifier
-            .fillMaxSize()
-            .padding(10.dp, 0.dp),
+            .fillMaxWidth()
+            .fillMaxHeight(),
 
-        verticalArrangement = Arrangement.Top,
-        horizontalAlignment = Alignment.Start,
     ) {
-        IconButton(onClick = onBackClick) {
-            Icon(
-                imageVector = Icons.Default.ArrowBack,
-                contentDescription = "Back",
-                tint = Color.Black
+        Column(
+            modifier = Modifier
+                .background(BaseGreen)
+                .fillMaxWidth()
+                .fillMaxHeight(0.3f)
+
+        ){
+            IconButton(onClick = onBackClick) {
+                Icon(
+                    imageVector = Icons.Default.ArrowBack,
+                    contentDescription = "Back",
+                    tint = Color.Black
+                )
+            }
+        }
+        Box(
+            modifier = Modifier
+                .fillMaxHeight(0.3f),
+            contentAlignment = Alignment.TopCenter,
+        ) {
+            Box(
+                modifier = Modifier
+                    .background(BaseGreen, shape = RoundedCornerShape(bottomEnd = 80.dp, bottomStart = 80.dp))
+                    .fillMaxWidth()
+                    .fillMaxHeight(0.7f)
             )
+
+            Box(
+                modifier = Modifier
+                    .align(Alignment.Center)
+            ) {
+                Box(
+                    modifier = Modifier
+                        .size(100.dp)
+                        .background(Color.Transparent)
+                        .clip(RoundedCornerShape(50.dp))
+                )
+                Icon(
+                    imageVector = Icons.Default.Face,
+                    contentDescription = "profile",
+                    modifier = Modifier
+                        .size(180.dp)
+                        .background(BaseGray, shape = RoundedCornerShape(15.dp))
+                        .clip(RoundedCornerShape(50.dp))
+                )
+            }
         }
+
         Column(
             modifier = Modifier
+                .background(Color.White)
                 .fillMaxSize(),
-
-            verticalArrangement = Arrangement.Center,
+            verticalArrangement = Arrangement.Top,
             horizontalAlignment = Alignment.CenterHorizontally,
+
         ) {
-            //profile photo?
-            Text(text = "Name : ${user.name}")
-            Spacer(modifier = Modifier.height(20.dp))
-            Text(text = "ID : ${user.id}")
+            Spacer(modifier = Modifier.height(50.dp))
+            Text(text = user.name, fontSize = 30.sp, fontWeight = FontWeight.SemiBold)
             Spacer(modifier = Modifier.height(20.dp))
-//        Text(text = "Email : ${user.email}")
-//        Text(text = "Password : ${user.password}")
+            Text(text = user.userID, fontSize = 20.sp, fontWeight = FontWeight.SemiBold)
+            Spacer(modifier = Modifier.height(35.dp))
             Button(
                 onClick = onChangePwd,
                 colors = ButtonDefaults.buttonColors(
                     BaseGreen,//CMidGreen,
                 )) {
+                Icon(imageVector = Icons.Default.Edit, contentDescription = "edit", modifier = Modifier.size(18.dp),)
+                Spacer(modifier = Modifier.width(8.dp))
                 Text(text = "비밀번호 변경하기")
             }
         }