[1주차/필수/Compose] Android UI 구현 기초 : 회원가입 및 로그인 #4

SYAAINN · 2024-04-05T14:48:08Z

Related issue 🛠

closed [1주차/Compose] Android UI 구현 기초 #2

Work Description ✏️

로그인 페이지 구현
회원가입 페이지 구현
메인 페이지 구현

Screenshot 📸

1._Compose_.mp4

Uncompleted Tasks 😅

To Reviewers 📢

Navigation을 이용한 화면 이동 구현을 성공했습니다,,!
페이지 UI 는 천천히 꾸며가겠습니다!

arinming

컴포즈 첨인데도 수고하셨어요!!!! 컴포즈는 뷰가 그대로 코드에 들어가서 반복되는 코드가 조금만 많아져도 코드 길이가 뿅 길어져서 재사용 할 수 있는 건 하는 게 가독성에 도움이 많이 된답니당 파이팅

arinming · 2024-04-05T15:40:04Z

app/src/main/AndroidManifest.xml

@@ -13,7 +13,7 @@
        android:theme="@style/Theme.NOWSOPTAndroid"
        tools:targetApi="31">
        <activity
-            android:name=".MainActivity"
+            android:name=".SignInActivity"


SignIn, SignUp으로 맞춘거 편-안하네요..저도 그래야겠ㅇ어요

arinming · 2024-04-05T15:41:39Z

app/src/main/java/com/sopt/now/compose/MainActivity.kt

+
+            // Title
+            Text(
+                text = "SOPT에 온걸 환영해!",


text = stringResource(id = ) 로 구현하면 짱짱

arinming · 2024-04-05T15:42:38Z

app/src/main/java/com/sopt/now/compose/MainActivity.kt

+                modifier = Modifier.padding(10.dp),
+                fontSize = 20.sp,
+                fontWeight = FontWeight.Bold,
+                textAlign = TextAlign.Center


동일한 size, weight, align이 적용되는 텍스트는 한 컴포저블로 묶으면 재사용하기 편하다는 사아실

arinming · 2024-04-05T15:44:18Z

app/src/main/java/com/sopt/now/compose/SignInActivity.kt

+                value = ID,
+                onValueChange = { ID = it },
+                modifier = Modifier
+                    .fillMaxWidth()


텍스트 필드도 마찬가지로 공통되는 부분을 한 컴포저블로 묶으면 어떤 value인지만 전달해줘서 이후 대규모 작업할 때 가독성이 훨씬 좋아질 것 같아용!

arinming · 2024-04-05T15:44:32Z

app/src/main/java/com/sopt/now/compose/SignInActivity.kt

+                    .fillMaxWidth()
+                    .padding(10.dp),
+                label = { Text("비밀번호를 입력하세요") },
+                leadingIcon = { Icon(Icons.Filled.Lock, contentDescription = "PW Icon") },


아이콘 설정 깨알같구 좋네용 ㅎㅎ

arinming · 2024-04-05T15:46:49Z

app/src/main/java/com/sopt/now/compose/SignInActivity.kt

+                },
+                modifier = Modifier.padding(10.dp),
+                colors = ButtonDefaults.buttonColors(containerColor = Color.Green),
+                shape = RoundedCornerShape(8.dp)


버튼도 동일한 스타일이 반복되는 것 같아요!
대신 OutlineButton 활용하면 자동으로 코너세이프가 적용되어있어서 둥글둥글해여 이외에도 IconButton 등 여러 버튼이 많아서 찾아보면 좋을 것 같읍니다

arinming · 2024-04-05T15:48:46Z

app/src/main/java/com/sopt/now/compose/SignUpActivity.kt

+                    .padding(10.dp),
+                label = { Text("비밀번호를 입력하세요") },
+                leadingIcon = { Icon(Icons.Filled.Lock, contentDescription = "PW Icon") },
+                singleLine = true,


요 설정 좋우네요

yeonjeen

진짜 처음이라 저도 너무 막막했는데 진짜 고생하셨어요..!! 앞으로 컴포즈 열심히 해봐용

yeonjeen · 2024-04-07T14:51:22Z

app/src/main/java/com/sopt/now/compose/MainActivity.kt

-                ) {
-                    Greeting("Android")
-                }
+                MainScreen()


컴포즈에서 유독 screen이라는 표현을 자주 보는 것 같아요!

activity를 쓰는 xml 대신 screen으로 선언하는 것처럼 보이네요 🧐

yeonjeen · 2024-04-07T14:52:05Z

app/src/main/java/com/sopt/now/compose/SignInActivity.kt

+            var PW by remember { mutableStateOf("") }
+            val context = LocalContext.current
+
+            // Title


리펙할때 주석 지워주세용

yeonjeen · 2024-04-07T14:53:16Z

app/src/main/java/com/sopt/now/compose/SignUpActivity.kt

+            // Sign Up
+            Button(
+                onClick = {
+                    val intent = Intent(context, SignInActivity::class.java)


인텐트 부분도 함수로 분리해보셔도 좋을 것 같아용

junseo511

기능까지 모두 구현해서 시연영상 올려보도록 하죠~~!!

도움이 필요하시다면 언제든지 부르세요 파이팅입니다 😄

junseo511 · 2024-04-07T15:33:04Z

app/src/main/AndroidManifest.xml

+        <activity
+            android:name=".MainActivity"
+            android:exported="false"
+            android:theme="@style/Theme.NOWSOPTAndroid" />
+        <activity
+            android:name=".SignUpActivity"
+            android:exported="false"
+            android:theme="@style/Theme.NOWSOPTAndroid" />


activity를 하나만 쓰는 방법도 있다던데 같이 알아봐요~~!!

junseo511 · 2024-04-07T15:33:33Z

app/src/main/java/com/sopt/now/compose/MainActivity.kt

-                ) {
-                    Greeting("Android")
-                }
+                MainScreen()


activity를 쓰는 xml 대신 screen으로 선언하는 것처럼 보이네요 🧐

junseo511 · 2024-04-07T15:33:51Z

app/src/main/java/com/sopt/now/compose/MainActivity.kt

+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 30.dp),


예쁘게 전체 modifier를 넎어주셧네요 굿굿~

junseo511 · 2024-04-07T15:34:21Z

app/src/main/java/com/sopt/now/compose/SignInActivity.kt

+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            NOWSOPTAndroidTheme {


https://developer.android.com/codelabs/jetpack-compose-theming?hl=ko

공식문서는 잘 보셨나요~~?

arinming

컴포즈 천재인가료????? 수고해씁니다

arinming · 2024-04-14T12:13:59Z

app/src/main/java/com/sopt/now/compose/MainActivity.kt

 class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
-            NOWSOPTAndroidTheme {
-                MainScreen()
+            val navController = rememberNavController()
+
+            NavHost(navController = navController, startDestination = "SignIn") {
+                composable("SignIn?ID={ID}&PW={PW}&Name={Name}&Place={Place}") { backStackEntry ->
+                    SignInScreen(
+                        navController = navController,
+                        ID = backStackEntry.arguments?.getString("ID") ?: "",
+                        PW = backStackEntry.arguments?.getString("PW") ?: "",
+                        Name = backStackEntry.arguments?.getString("Name") ?: "",
+                        Place = backStackEntry.arguments?.getString("Place") ?: ""
+                    )
+                }
+                composable("SignUp") {
+                    SignUpScreen(navController = navController)
+                }
+                composable("MyPage?ID={InputID}&PW={InputPW}&Name={Name}&Place={Place}") {backStackEntry ->
+                    MyPageScreen(
+                        ID = backStackEntry.arguments?.getString("InputID") ?: "",
+                        PW = backStackEntry.arguments?.getString("InputPW") ?: "",
+                        Name = backStackEntry.arguments?.getString("Name") ?: "",
+                        Place = backStackEntry.arguments?.getString("Place") ?: "")


여러 액티비티 없이 NavHost로 구현 성공하셨네요!!!! 최곱니당

arinming · 2024-04-14T12:16:07Z

app/src/main/java/com/sopt/now/compose/Sources.kt

+fun MyPageText(
+    text: String
+) {
+    Text(
+        text = text,
+        modifier = Modifier.padding(10.dp),
+        fontSize = 20.sp,
+        fontWeight = FontWeight.Bold,
+        textAlign = TextAlign.Center)
+}


컴포넌트 따로 분리하니까 훨씬 깔끔하네용!

arinming · 2024-04-14T12:16:26Z

app/src/main/java/com/sopt/now/compose/Sources.kt

+fun isSignUpValid(
+    navController: NavController,
+    context: Context,
+    ID: String,
+    IDValid: Boolean,
+    PW: String,
+    PWValid: Boolean,
+    Name: String,
+    NameValid: Boolean,
+    Place: String
+) {
+    if (IDValid && PWValid && NameValid) {
+        showToast(context, R.string.toast_SignUp_ValidSignUp)
+        navController.navigate("SignIn?ID=$ID&PW=$PW&Name=$Name&Place=$Place")
+    }
+}


추후 뷰모델로도 구현해보고 싶은 부분이군욥!

arinming · 2024-04-14T12:17:27Z

app/src/main/java/com/sopt/now/compose/screen/MyPageScreen.kt

+        MyPageText(text = stringResource(R.string.txt_MyPage_Title))
+        MyPageText(text = Name)
+        MyPageText(text = stringResource(R.string.txt_MyPage_Id))
+        MyPageText(text = ID)
+        MyPageText(text = stringResource(R.string.txt_MyPage_Pw))
+        MyPageText(text = PW)
+        MyPageText(text = stringResource(R.string.txt_MyPage_Place))
+        MyPageText(text = Place)


하드코딩 문자열 처리까지 하시고 너무너무 깔끔하네ㅕ

arinming · 2024-04-14T12:18:25Z

app/src/main/java/com/sopt/now/compose/screen/SignUpScreen.kt

+        SignUpTextField(
+            PW,
+            { newPW ->
+                PW = newPW
+                isPWValid = newPW.trim().length in 8..12
+            },
+            stringResource(R.string.tf_SignUp_PW_Hint),
+            Icons.Filled.Lock,
+            isPassword = true
+        )
+
+        SignUpTextField(
+            Name,
+            { newName ->
+                Name = newName
+                isNameValid = newName.trim().isNotEmpty()
+            },
+            stringResource(R.string.tf_SignUp_Name_Hint),


SignUp, SignIn이 분리되어서 좋으네요

junseo511

와~~ 정말로 집념과 노력이 느껴지는 리팩토링 👏👏

고생 많이하셨습니다!!!!

junseo511 · 2024-04-14T13:08:48Z

app/build.gradle

@@ -50,15 +50,17 @@ dependencies {
    implementation 'androidx.core:core-ktx:1.12.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0'
    implementation 'androidx.activity:activity-compose:1.8.2'
-    implementation platform('androidx.compose:compose-bom:2024.03.00')
+    implementation platform('androidx.compose:compose-bom:2024.04.00')


갑자기 업데이트된 이유가 있나요?!

junseo511 · 2024-04-14T13:09:09Z

app/build.gradle

+    // Navigation
+    implementation 'androidx.navigation:navigation-compose:2.7.7'


이친구 주석 그대로 붙여두고 아래로 분리해주시면 읽기 좋을거같아요~~

junseo511 · 2024-04-14T13:09:39Z

app/src/main/java/com/sopt/now/compose/MainActivity.kt

+            NavHost(navController = navController, startDestination = "SignIn") {
+                composable("SignIn?ID={ID}&PW={PW}&Name={Name}&Place={Place}") { backStackEntry ->
+                    SignInScreen(
+                        navController = navController,
+                        ID = backStackEntry.arguments?.getString("ID") ?: "",
+                        PW = backStackEntry.arguments?.getString("PW") ?: "",
+                        Name = backStackEntry.arguments?.getString("Name") ?: "",
+                        Place = backStackEntry.arguments?.getString("Place") ?: ""
+                    )
+                }
+                composable("SignUp") {
+                    SignUpScreen(navController = navController)
+                }
+                composable("MyPage?ID={InputID}&PW={InputPW}&Name={Name}&Place={Place}") { backStackEntry ->
+                    MyPageScreen(
+                        ID = backStackEntry.arguments?.getString("InputID") ?: "",
+                        PW = backStackEntry.arguments?.getString("InputPW") ?: "",
+                        Name = backStackEntry.arguments?.getString("Name") ?: "",
+                        Place = backStackEntry.arguments?.getString("Place") ?: ""
+                    )
                }
            }


크 NavHost를 배우셨군요~~ 저도 리팩할때 넣어야겠슴당

SYAAINN added 4 commits April 5, 2024 21:58

reset

725eaed

[feat] 로그인, 회원가입, 메인화면 UI 기초 구현

52e4846

[refactor] 주석 수정

1244772

[feat] 화면 간 이동 기능 구현

9231414

SYAAINN added 📗[필수 과제] 세미나_필수과제 🍯 [FEAT] 🔮 [민재] [COMPOSE] labels Apr 5, 2024

SYAAINN requested a review from a team April 5, 2024 14:48

SYAAINN self-assigned this Apr 5, 2024

SYAAINN changed the title ~~Feat/week compose1~~ [1주차/필수] 안드로이드 UI 구현 기초 : 로그인, 회원가입 Apr 5, 2024

SYAAINN changed the title ~~[1주차/필수] 안드로이드 UI 구현 기초 : 로그인, 회원가입~~ [1주차/필수/Compose] Android UI 구현 기초 : 회원가입 및 로그인 Apr 5, 2024

arinming reviewed Apr 5, 2024

View reviewed changes

SYAAINN added 2 commits April 7, 2024 20:34

[refactor] extract strings

33cd85b

[refactor] add string comment

a59a0e4

yeonjeen reviewed Apr 7, 2024

View reviewed changes

junseo511 requested changes Apr 7, 2024

View reviewed changes

SYAAINN added 7 commits April 9, 2024 10:18

feat : navigation implementation 추가

c535420

feat : navigation을 이용한 화면 이동과 정보 전달 구현

70339ac

feat: 로그인 검사 함수 구현 및 함수화

9075838

feat: 회원가입 검사 함수 구현 및 함수화

1bd49b1

feat : 로그인 화면 비밀번호 타입 구현

a358c97

ãrefactor : import문 정리

9a3a8fd

refactor: 회원가입 조건 상수 변수화

2594bae

arinming approved these changes Apr 14, 2024

View reviewed changes

SYAAINN added 3 commits April 14, 2024 21:31

feat : MyPage에 image 삽입

fc1e6db

feat: 로그인 예외 처리 추가

c891ca1

feat : 회원가입 예외 처리 추가

6068ebe

junseo511 approved these changes Apr 14, 2024

View reviewed changes

refactor: 각 스크린에 맞는 함수 파일 재배치

d7f5efa

SYAAINN merged commit 0309c38 into develope-compose Apr 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차/필수/Compose] Android UI 구현 기초 : 회원가입 및 로그인 #4

[1주차/필수/Compose] Android UI 구현 기초 : 회원가입 및 로그인 #4

SYAAINN commented Apr 5, 2024 •

edited

Loading

arinming left a comment

arinming Apr 5, 2024

arinming Apr 5, 2024

arinming Apr 5, 2024

arinming Apr 5, 2024

arinming Apr 5, 2024

arinming Apr 5, 2024

arinming Apr 5, 2024

yeonjeen left a comment

yeonjeen Apr 7, 2024

junseo511 Apr 7, 2024

yeonjeen Apr 7, 2024

yeonjeen Apr 7, 2024

junseo511 left a comment

junseo511 Apr 7, 2024

junseo511 Apr 7, 2024

junseo511 Apr 7, 2024

junseo511 Apr 7, 2024

arinming left a comment

arinming Apr 14, 2024

arinming Apr 14, 2024

arinming Apr 14, 2024

arinming Apr 14, 2024

arinming Apr 14, 2024

junseo511 left a comment

junseo511 Apr 14, 2024

junseo511 Apr 14, 2024

junseo511 Apr 14, 2024

		// Navigation
		implementation 'androidx.navigation:navigation-compose:2.7.7'

[1주차/필수/Compose] Android UI 구현 기초 : 회원가입 및 로그인 #4

[1주차/필수/Compose] Android UI 구현 기초 : 회원가입 및 로그인 #4

Conversation

SYAAINN commented Apr 5, 2024 • edited Loading

Related issue 🛠

Work Description ✏️

Screenshot 📸

Uncompleted Tasks 😅

To Reviewers 📢

arinming left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yeonjeen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

junseo511 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arinming left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

junseo511 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SYAAINN commented Apr 5, 2024 •

edited

Loading