Feat/#11 week4 compose 필수 과제 구현 #13

hyeeum · 2024-05-03T14:09:06Z

📌𝘐𝘴𝘴𝘶𝘦𝘴

[FEAT] Week4 compose 필수 과제 #11

📎𝘞𝘰𝘳𝘬 𝘋𝘦𝘴𝘤𝘳𝘪𝘱𝘵𝘪𝘰𝘯

로그인을 서버통신을 통해 다른 기기에서 로그인을 시도시에도 성공할 수 있게 해주세요
로그인 성공 / 실패 여부에 따라서
내 정보를 구현
- 로그인이 성공했을 시, UserId (로그인 할 때 id 아님 주의) 를 토스트 메세지에 넣어주세요! (세미나 자료 참고)

📷𝘚𝘤𝘳𝘦𝘦𝘯𝘴𝘩𝘰𝘵

compose.mp4

💬𝘛𝘰 𝘙𝘦𝘷𝘪𝘦𝘸𝘦𝘳𝘴

홈 프래그먼트 팔로워랑 비밀번호 부분을 아직 완성못했는데 완성하는대로 바로 푸쉬하겠습니다!

api 연결은 컴포즈와 xml 코드가 거의 동일하게 작성되었습니다..!
코리 남겨주시면 열심히열심히 반영하겠습니다..!

앗 그리고 api를 이리저리 시도하다보니 이번에 커밋을 쪼개지 못했네요..담번에는 꼭 세밀하게 커밋하겠습니다!

코리 반영하기

l2hyunwoo

안녕하세요 혜음님. 안드로이드 파트 명예 OB 이현우입니다. 만나서 반갑습니다.

앞으로의 과제들에 대한 코드리뷰를 맡게 되었습니다. 고민해보시다가 궁금한 점이 있으시면 지식 공유방/디스코드 연락 해주세요. 대면/비대면 자유형식으로 추가 피드백 가능합니다.

우선 과제 어려우셨을텐데 빠르게 과제 수행해주신점 너무 좋습니다. 관련해서 추가적으로 피드백/질문 남긴 것들이 있습니다. 질문을 남긴 경우 코드에 문제가 있어서 질문이 남긴 것이 아니고 정말 혜음님의 작성 의도가 궁금해서 남긴 것이니 이 점 참고해주시면 감사하겠습니다.

앞으로 잘 부탁드리겠습니다.

l2hyunwoo · 2024-05-03T16:10:23Z

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

@@ -13,7 +13,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp

 @Composable
-fun HomeUi(viewModel: HomeViewModel) {
+fun HomeScreen(viewModel: HomeViewModel) {


Suggested change

fun HomeScreen(viewModel: HomeViewModel) {

fun HomeScreen(viewModel: HomeViewModel = viewModel()) {

Compose에서 ViewModel은 함수 내에서 멤버변수로 직접 사용하거나 매개변수로 주입받는 경우에는 이런식으로 디폴트 매개변수로 주입받아서 호출부에서는

HomeScreen()

으로만 사용할 수 있게 작성하는 경향이 있습니다. 이 역시 취향의 영역이니 다른 분들 코드 종합적으로 보고, 직접 코드를 적어보시면서 어떤게 더 좋을지 판단해보시는 것이 좋을 것 같아요.

l2hyunwoo · 2024-05-03T16:11:14Z

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

@@ -37,6 +37,7 @@ import androidx.compose.ui.unit.sp
 import com.sopt.now.compose.ui.theme.NOWSOPTAndroidTheme

 class LoginActivity : ComponentActivity() {
+    private val viewModel by viewModels<LoginViewModel>()


View 기반에서는 이와 같이 선언을 해도 되지만, 저희는 Compose를 사용하니 이 방식보다는 Compose 코드 내부에서 선언을 해보는 방식으로 변경해보는 것도 좋을 것 같습니다.

l2hyunwoo · 2024-05-03T16:12:37Z

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

+    private fun initObserver() {
+        viewModel.liveData.observe(this) { loginState ->
+            Toast.makeText(
+                this@LoginActivity,
+                loginState.message,
+                Toast.LENGTH_SHORT
+            ).show()


컴포즈 내부에서는 이런 상태들이나 이벤트들을 관찰해서 처리를 할 수 없을까요? 어떻게 구현해야 컴포즈 내부에서 상태/이벤트를 처리할 수 있을까요?

l2hyunwoo · 2024-05-03T16:13:32Z

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

+                intent = Intent(this@LoginActivity,MainActivity::class.java)
+                intent.putExtra("userId", viewModel.userId)


지금은 Intent 기반으로 화면이동을 하지만 이후에는 Compose-navigation을 사용하시면서 화면전환 로직 구축해보는 것도 좋을 것 같습니다.

l2hyunwoo · 2024-05-03T16:14:00Z

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

+        pw: String,
+        onIdChange: (String) -> Unit,
+        onPwChange: (String) -> Unit


축약어는 지양하시는 것이 가독성에 좋습니다. pw -> password로 변경해보면 어떨까요?

l2hyunwoo · 2024-05-03T16:20:52Z

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

+    private fun initViews(userId: String) {
+        viewModel.userInfo(userId.toInt())
+    }


함수분리 좋습니다.

l2hyunwoo · 2024-05-03T16:22:24Z

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

                when (selectedItem) {
                    0 -> {
-                        HomeUi(HomeViewModel())
+                        HomeScreen(HomeViewModel())
                    }

                    1 -> {
                        Text(text = "Search")
                    }

                    2 -> {
-                        ProfileUi(userId, userPw, userNick)
+                        initObserver()
+                        ProfileScreen(userNick, userId, userPhone)
                    }


selectedItem이 무엇이 있는지 모르는데 다른 개발자들이 0, 1, 2가 어떤건지 알고 추가적인 코드리뷰를 할 수 있을까요...? 물론 여기에서는 대략 홈, 검색, 프로필 화면인 것을 인지할 수 있긴 합니다만 코드가 좀만 더 길어지면 코드 보기가 더 어려워질 수 있으니 이 점 유의해서 코드 작성해주시면 좋을 것 같아요.

l2hyunwoo · 2024-05-03T16:23:30Z

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

                    SignUpScreen(
                        id,
                        pw,
                        nick,
-                        etc,
+                        phone,
                        onIdChange = { id = it },
                        onPwChange = { pw = it },
                        onNickChange = { nick = it },
-                        onEtcChange = { etc = it })
+                        onPhoneChange = { phone = it })


함수의 경우를 제외하고, 변수의 경우에는 각 패러미터에 어떤 값들이 들어가야 하는지 명시가 안되어있어서 에러를 일으킬 가능성이 농후해집니다. 컴포즈에서는 named argument 꼭 활용하시길 바랍니다.

l2hyunwoo · 2024-05-03T16:23:41Z

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

                    var id by remember { mutableStateOf("") }
                    var pw by remember { mutableStateOf("") }
                    var nick by remember { mutableStateOf("") }
-                    var etc by remember { mutableStateOf("") }
+                    var phone by remember { mutableStateOf("") }


축약어 지양해주세요.

pw, nick

l2hyunwoo · 2024-05-03T16:25:00Z

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

+        viewModel.liveData.observe(this) { signUpState ->
+            Toast.makeText(
+                this@SignUpActivity,
+                signUpState.message,
+                Toast.LENGTH_SHORT
+            ).show()
+
+            if (signUpState.isSuccess) {
+                finish()
+            }
+        }


Toast는 따지고 보면 화면에 영원히 띄워질 상태가 아니고 한번 띄워지고 말아야하는 상황이자나요. 지금 구현된 코드 기반에서는 화면 회전을 하거나 다크모드 전환을 했을 때 토스트가 한번 더 띄워질 수 있는 코드로 보여집니다. 확인 부탁드립니다.

boiledEgg-s

이번주도 너무 고생하셨어요!! 남은 부분은 후딱 해서 올려주세요~ 3조 더욱 열심히 정진합시다~

chattymin

고생하셨습니다!!!
xml과 공통되는 부분은 일부러 코멘트 안달았으니 xml에 달린 것들은 여기서도 수정부탁드립니다!!

chattymin · 2024-05-05T13:46:14Z

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

+interface UserService {
+    @GET("/member/info")
+    fun userInfo(
+        @Header("memberId") userId : Int
+    ) : Call<ResponseUserInfoDto>
+}


헤더도 인터셉터로 넣어봐요~

chattymin · 2024-05-05T13:47:17Z

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

+            Text(
+                text = stringResource(R.string.text_id)
+            )
+            TextField(
+                value = id,
+                onValueChange = onIdChange,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(10.dp),
+                placeholder = { Text(stringResource(R.string.tf_login_id)) },
+                singleLine = true,
+                leadingIcon = { Icon(Icons.Filled.Person, contentDescription = "User Icon") }
+            )
+            Spacer(modifier = Modifier.height(30.dp))
+            Text(text = stringResource(R.string.text_pw))
+            TextField(
+                value = pw,
+                onValueChange = onPwChange,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(10.dp),
+                placeholder = { Text(stringResource(R.string.tf_login_pw)) },
+                singleLine = true,
+                visualTransformation = PasswordVisualTransformation(),
+                leadingIcon = { Icon(Icons.Filled.Lock, contentDescription = "Lock Icon") },
+            )


중복되는 친구들은 component로 빼보는건 어떨까용

youjin09222

이번 주차도 고생하셨습니다👏👏
저도 xml과 거의 동일하게 구현해서 반갑네요...
이번주에 같이 보완해봅시다!!

youjin09222 · 2024-05-05T14:58:55Z

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

+    private fun initObserver() {
+        viewModel.liveData.observe(this) { loginState ->
+            Toast.makeText(
+                this@LoginActivity,
+                loginState.message,
+                Toast.LENGTH_SHORT
+            ).show()


오 저는 xml 그대로 사용하려다가 오류가 나서 찾아보니 컴포즈에서 observeAsState()를 사용하더라구요! 요것도 한번 찾아보시면 좋을 것 같아요!

hyeeum · 2024-05-06T17:05:07Z

안녕하세요 혜음님. 안드로이드 파트 명예 OB 이현우입니다. 만나서 반갑습니다.

앞으로의 과제들에 대한 코드리뷰를 맡게 되었습니다. 고민해보시다가 궁금한 점이 있으시면 지식 공유방/디스코드 연락 해주세요. 대면/비대면 자유형식으로 추가 피드백 가능합니다.

우선 과제 어려우셨을텐데 빠르게 과제 수행해주신점 너무 좋습니다. 관련해서 추가적으로 피드백/질문 남긴 것들이 있습니다. 질문을 남긴 경우 코드에 문제가 있어서 질문이 남긴 것이 아니고 정말 혜음님의 작성 의도가 궁금해서 남긴 것이니 이 점 참고해주시면 감사하겠습니다.

앞으로 잘 부탁드리겠습니다.

안녕하세요! 귀한 시간 내어 코드리뷰 달아주신 점 너무 감사드립니다! 리뷰에 달아주신 내용들은 반영할 수 있는만큼 최대한으로 반영하여 좋은 코드 작성할 수 있도록 노력하겠습니다. 아직 부족한 실력이지만 앞으로 잘부탁드립니다 :)

hyeeum added 4 commits May 3, 2024 15:38

add#11/: api 연결 - manifest/gradle

0f0b9cb

add#11/: 회원가입 api

2aacd51

add#11/: 로그인 api

850073c

add#11/: 회원정보 api

2ad43c3

hyeeum requested review from kez-lab and a team May 3, 2024 14:12

hyeeum self-assigned this May 3, 2024

l2hyunwoo suggested changes May 3, 2024

View reviewed changes

boiledEgg-s approved these changes May 5, 2024

View reviewed changes

chattymin requested changes May 5, 2024

View reviewed changes

youjin09222 approved these changes May 5, 2024

View reviewed changes

youjin09222 reviewed May 5, 2024

View reviewed changes

hyeeum added 13 commits May 7, 2024 02:38

add#11/: import 추가

4fac3a2

mod#10/: service 메소드+함수명

76a33f0

mod#11/: viewmodel state 분리

f7d83d6

mod#11/: backing properties

541a90e

chore#11/: 패키지 구조 변경

0b8559a

mod#11/: 축약어 nick -> nickname

9dde444

mod#11/: 축약어 nick -> nickname

f7b43ee

mod#11/: 축약어 pw -> password

12942d2

mod#11/: location -> companion object

99b6fc1

feat#11/: 인터셉터

65bfdc1

del#11/: 헤더 어노테이션 삭제

adb2c17

feat#11/: customTextField 생성

8134e9a

chore#11/: liveData -> 상황에 맞게 변수명 변경

a31cff5

hyeeum merged commit a2a2bad into develop-compose May 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/#11 week4 compose 필수 과제 구현 #13

Feat/#11 week4 compose 필수 과제 구현 #13

hyeeum commented May 3, 2024 •

edited

Loading

l2hyunwoo left a comment

l2hyunwoo May 3, 2024

l2hyunwoo May 3, 2024

l2hyunwoo May 3, 2024

l2hyunwoo May 3, 2024

l2hyunwoo May 3, 2024

l2hyunwoo May 3, 2024

l2hyunwoo May 3, 2024

l2hyunwoo May 3, 2024

l2hyunwoo May 3, 2024

l2hyunwoo May 3, 2024

boiledEgg-s left a comment

chattymin left a comment

chattymin May 5, 2024

chattymin May 5, 2024

youjin09222 left a comment •

edited

Loading

youjin09222 May 5, 2024 •

edited

Loading

hyeeum commented May 6, 2024

	fun HomeScreen(viewModel: HomeViewModel) {
	fun HomeScreen(viewModel: HomeViewModel = viewModel()) {

		intent = Intent(this@LoginActivity,MainActivity::class.java)
		intent.putExtra("userId", viewModel.userId)

Feat/#11 week4 compose 필수 과제 구현 #13

Feat/#11 week4 compose 필수 과제 구현 #13

Conversation

hyeeum commented May 3, 2024 • edited Loading

📌𝘐𝘴𝘴𝘶𝘦𝘴

📎𝘞𝘰𝘳𝘬 𝘋𝘦𝘴𝘤𝘳𝘪𝘱𝘵𝘪𝘰𝘯

📷𝘚𝘤𝘳𝘦𝘦𝘯𝘴𝘩𝘰𝘵

💬𝘛𝘰 𝘙𝘦𝘷𝘪𝘦𝘸𝘦𝘳𝘴

코리 반영하기

l2hyunwoo 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

boiledEgg-s left a comment

Choose a reason for hiding this comment

chattymin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youjin09222 left a comment • edited Loading

Choose a reason for hiding this comment

youjin09222 May 5, 2024 • edited Loading

Choose a reason for hiding this comment

hyeeum commented May 6, 2024

hyeeum commented May 3, 2024 •

edited

Loading

youjin09222 left a comment •

edited

Loading

youjin09222 May 5, 2024 •

edited

Loading