[UI/#206] 프로필 수정 뷰 / UI 구현 #207

leeeyubin · 2024-08-27T20:46:47Z

closed [UI] 프로필 수정 뷰 / UI 구현 #206

⛳️ Work Description

프로필 수정 뷰 UI
네비게이션 전면 수정

📸 Screenshot

Screen_Recording_20240905_032900_.terning.mp4

➕추가 수정사항

마이페이지와 네비게이션 연결
이름 유효성 로직 검사를 회원가입과 통합
Regex 패턴 수정 (앞으로 패턴 쓰는 것들은 이 파일에다가 넣어두면 검사를 할 때마다 Regex 객체를 생성하지 않아도 될 것 같습니다!)
디자인 GUI 수정사항 반영 (화면 전환 시 슬라이드 추가, 바텀시트 로직, 수정사항 로직)

📌확인해주세요

자세한 사항은 노션에 넣어뒀습니다! [터닝 노션 링크!!!]

우선, 제가 마이페이지에서 화면 전환을 해야 하는데 이때 바텀 네비에 애니메이션이 자꾸 적용되어 불가피하게 미리 이를 수정해보았습니다. 보시고 의견 있으면 남겨주세요!
화면 전환할 때 배경색을 지정 안 해주면, 어색하게 화면전환이 되어서(배경만 투명색으로 뜸) 홈 뷰 배경색을 흰색으로 바꾸어줬어요! 효빈언니 확인 부탁합니당
NavHost 안에다가 저렇게 넣어주면 지금처럼 모든 composable 안에 작성해줄 필요가 없을 것 같아서 바로 적용했습니다

 NavHost(
    enterTransition = {
        EnterTransition.None
    },
    exitTransition = {
        ExitTransition.None
    },
    popEnterTransition = {
        EnterTransition.None
    },
    popExitTransition = {
        ExitTransition.None
    },
    navController = navigator.navController,
    startDestination = navigator.startDestination
)

into ui/#206-profile-edit

boiledEgg-s

역시 리드네요,, 본받아서 열심히 해야겠습니닷

boiledEgg-s · 2024-08-30T03:05:27Z

feature/src/main/java/com/terning/feature/mypage/profileedit/ProfileEditRoute.kt

+    LaunchedEffect(viewModel.sideEffects, lifecycleOwner) {
+        viewModel.sideEffects.flowWithLifecycle(lifecycle = lifecycleOwner.lifecycle)
+            .collect { sideEffect ->
+                when (sideEffect) {
+                    is ProfileEditSideEffect.NavigateUp -> navigateUp()
+                }
+            }
+    }


viewModel -> sideEffect -> navigate 식으로 탐색을 하는 건 리컴포지션을 줄이기 위한 이유도 있는건가요? 아니면 단순히 로직 분리를 위한건가요??

흠 처음에 의도한 건 로직분리를 위함이었습니다! navigateUp도 어떻게 보면 화면이 전환되는 것이기 때문에 sideEffect를 통해 처리해줘야 된다고 생각했어요!

boiledEgg-s · 2024-08-30T05:40:02Z

feature/src/main/java/com/terning/feature/mypage/profileedit/ProfileEditRoute.kt

+        RectangleButton(
+            style = TerningTheme.typography.button1,
+            paddingVertical = 20.dp,
+            text = R.string.profile_edit_save,


컴포넌트마다 문자열을 인자로 받는게 있고 리소스를 인자로 받는게 있는데, 이런 부분들은 통일성을 주는게 좋을 것 같아요!

boiledEgg-s · 2024-08-30T05:41:09Z

feature/src/main/java/com/terning/feature/mypage/profileedit/ProfileEditRoute.kt

+                    .align(Alignment.CenterHorizontally),
+                index = profileEditState.character
+            )
+            Spacer(modifier = Modifier.height(48.dp))


Spacer는 새로운 Modifier객체를 사용하고 Scope 컴포저블에는 상위 컴포저블에서 넘겨받은 modifier를 사용하는 이유는 뭔가요??

그리고 들은 바론 같은 수정자를 반복해서 사용해야 하는 경우, 하나의 객체를 만들어놓고 재사용하는게 낫답니다!! 지금처럼 Spacer 마다 Modifier를 생성하면 새로운 객체가 생성되서 하나로 관리하는 것보다 비효율적이라네요,,

아하 좋은 의견 감사합니당 ㅎㅎ

boiledEgg-s · 2024-08-30T05:45:20Z

feature/src/main/java/com/terning/feature/mypage/profileedit/ProfileEditRoute.kt

+        onInputChange = { editName ->
+            viewModel.isInputValid(editName)
+        },


이렇게 하나의 함수만 사용하고, 람다 내 변수의 타입이 함수 매개변수 타입과 같으면 참조 연산자 (::)를 사용할 수 있답니다!

Suggested change

onInputChange = { editName ->

viewModel.isInputValid(editName)

},

onInputChange = viewModel::isInputValid,

취향따라 사용하면 되지만 저는 이게 더 깔끔해보이더라요ㅎㅎ

boiledEgg-s · 2024-08-30T05:49:00Z

feature/src/main/java/com/terning/feature/mypage/profileedit/ProfileEditRoute.kt

+            .addFocusCleaner(focusManager)
+    ) {
+        BackButtonTopAppBar(
+            onBackButtonClick = { onBackButtonClick() },


이런 부분에도 중괄호는 굳이 없어도 될 것 같아요!

얼른 습관화를 들여야겠어요,,

boiledEgg-s · 2024-08-30T05:50:22Z

feature/src/main/java/com/terning/feature/mypage/profileedit/ProfileEditViewModel.kt

+    }
+
+    companion object {
+        const val NAME_ERROR = "[!@#\$%^&*(),.?\":{}|<>\\[\\]\\\\/\\-=+~`\\p{S}\\p{P}]"


이거 관련해서 수정해봤는데 확인부탁드려요!!

boiledEgg-s · 2024-08-30T05:52:35Z

feature/src/main/java/com/terning/feature/onboarding/signup/SignUpRoute.kt

@@ -44,6 +45,8 @@ fun SignUpRoute(
    val context = LocalContext.current
    val lifecycleOwner = LocalLifecycleOwner.current

+    var showBottomSheet by remember { mutableStateOf(false) }


이렇게 바텀시트, 다이얼로그 등이 부가적인 화면을 표현하는 경우, 컴포저블 내부의 remember로 관리하는게 더 효율적인가요??
뷰모델에서 관리해야하는지 여기 방법처럼 관리해야하는지 항상 헷갈려요ㅠ

음 저도 이 부분에 대해서 고민이 되더라구요
이전까진 아무 생각 없이 사용하긴 했는데 다시 생각해보니까 뷰모델에서 한번에 관리하는 게 좋을 것 같아서 이젠 바꿔서 사용하려구 했습니당
요 부분은 수정해놓을게요!

arinming

복잡한 부분 easy하게 하는 짱리드.., 고생하셨어용 !!!!!!

arinming · 2024-09-02T10:20:14Z

core/src/main/java/com/terning/core/designsystem/component/item/ProfileWithPlusButton.kt

+        Image(
+            painter = painterResource(id = R.drawable.ic_sign_up_button),
+            contentDescription = "plus button",
+            modifier = Modifier.align(Alignment.BottomEnd)
+        )


여기는 터닝이미지 적용이 안되는 건가욥?

지난번 회의 때 나눴던 내용인데 Image에서 contentDescription 사용을 지향하자는 방향으로 얘기가 나왔어요!
확인해보구 궁금한 점 있으면 말해주세요!!

arinming · 2024-09-02T10:25:21Z

core/src/main/java/com/terning/core/designsystem/component/textfield/NameTextField.kt

 ) {
    val focusManager = LocalFocusManager.current
    val keyboardController = LocalSoftwareKeyboardController.current

+    val nameErrorRegex = NAME_ERROR_REGEX
+    val trimmedName: String
+    var outOfBoundName = false


outOfBoundName보다 좀 더 boolean 타입스러운 네이밍이면 좋을 것 같아용!

into ui/#206-profile-edit

leeeyubin added 7 commits August 27, 2024 17:22

[MOVE/#206] 마이페이지 파일 위치 이동

ff74393

[MOVE/#206] 마이페이지 프로필 파일 위치 이동

acf62e8

[UI/#206] 프로필 수정 뷰 UI

3a43748

[FEAT/#206] 네비게이션 추가

d457c3f

[FEAT/#206] TODO: FIX

cbfd195

[FEAT/#206] 에러 수정

6a3e69d

[FEAT/#206] 프로필 수정, 회원가입 리팩

a3bd94e

leeeyubin added UI 💐 UI 작업 유빈💙 유빈 labels Aug 27, 2024

leeeyubin added this to the 2차 스프린트 작업 milestone Aug 27, 2024

leeeyubin requested review from arinming, Hyobeen-Park and boiledEgg-s August 27, 2024 20:46

leeeyubin self-assigned this Aug 27, 2024

leeeyubin removed request for arinming, Hyobeen-Park and boiledEgg-s August 28, 2024 14:39

leeeyubin added 7 commits August 28, 2024 23:45

[FEAT/#206] 프로필 이미지 수정

e03fc45

[FEAT/#206] 프로필 수정 뷰 UI 수정

690e933

[FEAT/#206] navigateUp 수정

7bbc7f9

[FIX/#206] state 관리 수정

eb8f82b

[FIX/#206] state 관리 수정

bfbd58a

[FIX/#206] state 변수명 수정

4779222

Merge branch 'develop' of https://github.com/teamterning/Terning-Android

cd21cd4

into ui/#206-profile-edit

boiledEgg-s approved these changes Aug 30, 2024

View reviewed changes

leeeyubin added 5 commits August 31, 2024 18:47

[FIX/#206] fix Regex

a4d5191

[FIX/#206] resolving conflict

e620f67

[FIX/#206] NameTextField 로직 통합

64ff32a

[FIX/#206] authType -> profile 수정

f9f2e1d

[FIX/#206] 네비게이션 연결

1955b81

leeeyubin added 11 commits September 1, 2024 01:31

[FIX/#206] 상태바 수정

8cddc31

[FIX/#206] 유저 이름 전달

478d46e

[FIX/#206] 바텀시트 이름 수정

4e6001c

[FIX/#206] 바텀시트 로직 수정

fa02460

[FIX/#206] 화면 전환 로직 추가

21dfe08

[REFACTOR/#206] 네비게이션 전면 수정

2e95e39

[REFACTOR/#206] 네비게이션 추가 수정

abbb004

[CHORE/#206] 바텀시트 너비 조정

1c87f3f

[CHORE/#206] 바텀시트 너비 조정

0906e9c

[FEAT/#206] 수정 정보 유효성 검사 로직

23bf23b

[FEAT/#206] 수정 정보 유효성 검사 로직 수정

4d1ec63

arinming approved these changes Sep 2, 2024

View reviewed changes

leeeyubin requested a review from Hyobeen-Park September 2, 2024 13:58

leeeyubin added 15 commits September 3, 2024 18:56

[FIX/#206] 회원가입 간격 조절

6aad38f

[FEAT/#206] resolving conflict

9eb3a73

[FEAT/#206] 수정사항 로직 수정

46ddf25

[FEAT/#206] 수정사항 로직 수정

d0ac79a

[FEAT/#206] 스플래쉬 modifier 위치 수정

862ce98

[FEAT/#206] 스플래쉬 modifier 위치 수정

44af5c0

[FEAT/#206] pull from develop

d93e0ec

Merge branch 'develop' of https://github.com/teamterning/Terning-Android

d0f394c

into ui/#206-profile-edit

[FEAT/#206] paddingValues 적용

2c3ac87

[FEAT/#206] 화면 전환 로직 삭제

197b16f

[FEAT/#206] 마이페이지 아이콘 수정

cf12689

[FEAT/#206] 마이페이지 프로필 수정

3ff3cff

[FEAT/#206] 마이페이지 프로필 수정

4ab99e1

[FEAT/#206] 코드 수정

17955e4

[FEAT/#206] 코드 수정

4569241

leeeyubin merged commit 171dac8 into develop Sep 4, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI/#206] 프로필 수정 뷰 / UI 구현 #207

[UI/#206] 프로필 수정 뷰 / UI 구현 #207

leeeyubin commented Aug 27, 2024 •

edited

Loading

boiledEgg-s left a comment

boiledEgg-s Aug 30, 2024

leeeyubin Aug 31, 2024

boiledEgg-s Aug 30, 2024

boiledEgg-s Aug 30, 2024

leeeyubin Aug 31, 2024

boiledEgg-s Aug 30, 2024

boiledEgg-s Aug 30, 2024

leeeyubin Aug 31, 2024

boiledEgg-s Aug 30, 2024

leeeyubin Aug 31, 2024

boiledEgg-s Aug 30, 2024

leeeyubin Aug 31, 2024

arinming left a comment

arinming Sep 2, 2024

leeeyubin Sep 4, 2024

arinming Sep 2, 2024

[UI/#206] 프로필 수정 뷰 / UI 구현 #207

[UI/#206] 프로필 수정 뷰 / UI 구현 #207

Conversation

leeeyubin commented Aug 27, 2024 • edited Loading

⛳️ Work Description

📸 Screenshot

➕추가 수정사항

📌확인해주세요

boiledEgg-s 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

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

leeeyubin commented Aug 27, 2024 •

edited

Loading