[TNT-110] 트레이너 회원 정보 입력 화면 구현 #22

SeonJeongk · 2025-01-15T15:12:38Z

📝 작업 내용

Closes [TNT-110] 트레이너 회원 정보 입력 화면 구현 #15

구현한 화면

트레이너/트레이니 선택 UI
트레이너 프로필 만들기 UI (프로필 사진, 이름)
트레이너 프로필 생성 완료 UI

전달사항

약관 동의 UI는 로그인과 이어져서 [TNT-103] 로그인 화면 구현 #13 여기서 구현할 예정입니다
단순 UI 작업만 완료한 상태이기 때문에 TODO로 구현해야 할 기능 정리해뒀습니다
[TNT-114] 회원가입 기능 구현 #17 에서 데이터 취합 전략 설정 후에 기능도 이어 구현하겠습니다

📸 실행 화면

트레이너/트레이니 선택

default.mp4

트레이너 프로필 만들기

default.mp4

트레이너 프로필 생성 완료

default.mp4

🙆🏻 리뷰 요청 사항

트레이너 프로필 만들기 UI를 구현하면서 TextField에서 여러 줄 입력 시 키보드에 가려져 첫 번째 줄만 보이는 문제가 발생했습니다. 이를 해결하기 위해 BringIntoViewRequester를 사용하여 TextField가 항상 화면에 보이도록 처리했습니다.
줄바꿈이 생길 때 BringIntoViewRequester를 활용해 해당 줄로 스크롤이 자동으로 내려가도록 구현했는데
이 방식이 적절한지, 대체 방법이 있는지 확인 부탁드립니다!!

👀 레퍼런스

- 간격 추가 - 배경색 변경

- RoleSelectionScreen에 추가한 strings 적용

hoyahozz

우선 1차로 보이는 것만 리뷰 적어뒀습니당! 이따 한 번 더 볼게요 ~~

hoyahozz · 2025-01-16T03:40:29Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TopBar.kt

-        modifier = modifier,
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(start = 12.dp, top = 20.dp, end = 12.dp, bottom = 12.dp),


vertical, horizontal 파라미터를 사용해도 될 것 같아요~

top이 20.dp이고 bottom이 12.dp라 분리해서 써놨습니다 ;ㅅ;

hoyahozz · 2025-01-16T03:54:20Z

feature/signup/src/main/java/co/kr/tnt/signup/trainer/SetTrainerProfileScreen.kt

+
+            Spacer(Modifier.padding(top = 60.dp))
+
+            TnTLabeledTextField(


요거 근데 maxLine 확인해보는게 좋을 것 같아요

이름 입력칸에서 줄바꿈하는 경우가 있을까요?

현재 이름 입력에 대한 글자 수와 maxLine 제한이 없습니다!
줄바꿈이 아니더라도 디자인 상 길게 입력하면 줄이 바뀔 수 있다는걸 고려해 이렇게 구현했습니다.

maxLine을 1줄로 제한하는게 좋을 것 같긴 합니다🤔
해당 부분에 대해 정호님은 어떻게 생각하시나요?

이름 입력칸에서 두 줄이 되어야 하는 이유를 잘 모르겠...어요

근데 이건 기획 디자인 영역이라 한 번 여쭤보는게 좋을 것 같아여

제가 여쭤보고 가능하면 한 줄로 바꿔오도록 하겠습니다!

한 줄로 수정했습니다👍 6e3c8c8

hoyahozz · 2025-01-16T04:01:58Z

feature/signup/src/main/java/co/kr/tnt/signup/trainer/SetTrainerProfileScreen.kt

+/**
+ * 입력 값을 검사해 한글/영어/공백만 허용하고 특수문자는 제거
+ */
+fun validateInput(input: String): String {


private !

끼악 수정하겠습니다

hoyahozz · 2025-01-16T04:02:45Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TextField.kt


            Text(
-                text = "${value.length}/$maxLength",
+                text = "${value.length}/${maxLength}자",


요것도 스트링 리소스로 빼야할 것 같아요!!

- BringIntoViewRequester 삭제

hoyahozz · 2025-01-16T07:09:27Z

feature/signup/src/main/java/co/kr/tnt/signup/trainer/SetTrainerProfileScreen.kt

+        ) {
+            // TODO 버튼 클릭 시 트레이너/트레이니 화면으로 이동
+            TnTTopBar(onBackClick = {})
+


혹시 각 컴포저블 사이에 개행을 넣으시는 이유가 있으실까요?

Compose 코드가 익숙하지 않아서 각 컴포저블 구분이 잘 되도록 개행을 넣고있었습니다!
개행을 안 넣는게 맞을까요?

프로그래밍 관점에서 개행이 들어가면, 현재 단락이 종료되고 새로운 개념이 시작된다는 느낌이라서 안넣는게 더 좋을 것 같다는 생각이긴 합니다 '-'

그렇군요.. 그러면 앞으로 각 컴포저블 사이에 개행 없이 작성하겠습니다! 수정해서 올려둘게요

hoyahozz · 2025-01-16T07:29:09Z

feature/signup/src/main/java/co/kr/tnt/signup/trainer/SetTrainerProfileScreen.kt

+    var text by remember { mutableStateOf("") }
+    var warningState by remember { mutableStateOf(false) }
+
+    warningState = text.length > maxLength


음.. 이렇게 상태를 주입해주면, 다른 상태가 변경되었을 때도 이 코드가 동작하게 될 것 같아요

지금 상태에선 text 만 있어서 상관없을 것 같기는 한데,

만약 해당 화면에서 다른 상태가 또 있다고 가정하면, 그 상태가 변경될 때마다 이 코드도 다시 실행될 것 같다는 생각이 드네요!

onValueChange 에서 텍스트 길이에 따라 warningState 를 변경시켜주는 방식이 좋을 것 같습니당~

아니면 derivedStateOf 에 대해 공부하고 적용하면 좋을 것 같네요 :->

onValueChange = { newValue -> val filteredText = validateInput(newValue) text = filteredText warningState = text.length > maxLength },

움 그럼 51번줄 삭제하고 이렇게 수정하면 될까요?

제안해드린 두 가지 방법 모두 고민해보시고, 더 나은 방법으로 선택하시면 될 것 같습니다

아 새로고침이 안 돼서 derivedStateOf코멘트는 확인을 못했습니다
derivedStateOf가 유효성 검사에 더 맞는 것 같습니다! 새로 알아가네용
해당 방법 사용해서 수정해두겠습니다

참고: https://velog.io/@beokbeok/%EC%96%B8%EC%A0%9C-derivedStateOf%EB%A5%BC-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C

hoyahozz · 2025-01-16T09:33:45Z

feature/signup/src/main/java/co/kr/tnt/signup/trainer/SetTrainerProfileScreen.kt

+import co.kr.tnt.designsystem.theme.TnTTheme
+
+@Composable
+fun SetTrainerProfileScreen(


흐음 뭔가 Set 이라는 표현은 동사에 가까워보이는데 명사로 이름을 지을순 없을까용 ㅎ.ㅎ

TrainerProfileFormScreen ?..

한 번 생각해봅시다!!

TrainerProfileSetupScreen 으로 수정하겠습니다
다른 것들도 명사로 다 수정해둘게요!

hoyahozz · 2025-01-16T09:35:49Z

feature/signup/src/main/java/co/kr/tnt/signup/trainer/SetTrainerProfileScreen.kt

+}
+
+@Composable
+private fun SetProfileImage(


여기도 이름 바꿔봅시다!

컴포넌트명을 지을 땐, 특별한 경우가 아니라면 최대한 다른 화면에서도 '언제든지' 사용할 수 있다고 가정하고 이름을 짓는게 좋아요!

요 컴포넌트는 실제로 나중에 '내 프로필' 화면에서도 사용될 수 있는 컴포넌트겠네요!

범용적인 이름을 생각해봅시다!!

옹 내 프로필에서도 쓸 수 있겠네요..!

안그래도 트레이니 화면에서도 쓰이기 때문에 해당 부분 TNT-113 브랜치에서 ProfileImageSection으로 분리해서 구현하고 있었습니다

이번 PR에서는 일단 그대루 둬도 될까요?!

넵넵 다음 PR에서 적용해봅시다!

hoyahozz · 2025-01-16T09:53:01Z

feature/signup/src/main/java/co/kr/tnt/signup/trainer/SetTrainerProfileScreen.kt

+            modifier = modifier
+                .fillMaxSize()
+                .imePadding()
+                .verticalScroll(rememberScrollState()),


엇 이거 스크롤은 왜 들어간건가요? 이러면 탑바도 같이 스크롤될 것 같은데여 !?

기기로 테스트 하다보니 imePadding()만 넣으면 TextField가 키보드에 가려져서 스크롤까지 추가하게 됐습니다!
탑바는 스크롤에서 제외하면 아래 화면들이 올라가면서 탑바에 가려지는 문제가 생겨서 같이 올라가도록 해놨습니다..

어떻게 수정해야 할까요😢 다른 회원가입 화면들에서도 TextField가 많이 쓰이기 때문에 정해두고 가면 좋을 것 같습니다🙏

hoyahozz · 2025-01-16T10:11:43Z

feature/signup/src/main/java/co/kr/tnt/signup/trainer/SetTrainerProfileScreen.kt

+            onClick = { },
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(top = 20.dp),


이 패딩은 왜 들어갔을까용?

엇 빼겠습니다

hoyahozz · 2025-01-16T10:16:10Z

feature/signup/src/main/java/co/kr/tnt/signup/trainer/SetTrainerProfileScreen.kt

+    // TODO 상태 관리 따로 빼기
+    val maxLength = 15
+    var text by remember { mutableStateOf("") }
+    val warningState by remember { derivedStateOf { text.length > maxLength } }


isWarning 라는 변수명은 어떨까요?

hoyahozz · 2025-01-16T10:19:00Z

feature/signup/src/main/java/co/kr/tnt/signup/trainer/SetTrainerProfileCompleteScreen.kt

+                contentDescription = null,
+                modifier = Modifier.size(200.dp),
+            )
+            Spacer(Modifier.weight(0.7f))


요 weight 는 어떤 의미인가용?

두 Text와 Image영역 위 아래에 3:7로 여백을 주고 싶어서 저렇게 구현했습니다
정수로 쓰는게 좋을까요?

뭔가 디자인 의도는 이미지가 정중앙에 배치되어 있고, 그 위에 텍스트를 배치하는 느낌인데..

권장되진 않지만 지금 상황에서는 ConstraintLayout 를 사용하는 것도 방법일 수 있겠네요!

hoyahozz · 2025-01-16T10:20:51Z

feature/signup/src/main/java/co/kr/tnt/signup/common/role/RoleSelectionScreen.kt

+    val trainerText = stringResource(R.string.trainer)
+    val traineeText = stringResource(R.string.trainee)
+
+    var selectedRole by remember { mutableStateOf(trainerText) }


스트링 리소스를 기반으로 선택한 직군을 판단하고 있군요!

enum 으로 트레이너, 트레이니를 정의하면 좀 더 명확하게 와닿을 것 같아요!

도메인 모델에 들어갈 수 있겠네요!

hoyahozz · 2025-01-16T10:21:14Z

feature/signup/src/main/java/co/kr/tnt/signup/common/role/RoleSelectionScreen.kt

+            modifier = Modifier.align(Alignment.CenterHorizontally),
+        )
+
+        Spacer(modifier = Modifier.weight(1.2f))


1.2..는 어떤 숫자일까요?!

얘도 위랑 동일한 이유로 설정해둔 값입니당..

제 생각에 이 부분은 SpaceBetween 만으로도 충분하지 않을까 싶은데 다른 이슈가 있나요?

확인해보니 없습니다! SpaceBetween만 쓰도록 수정했습니다

hoyahozz · 2025-01-16T12:49:29Z

domain/src/main/java/co/kr/tnt/domain/model/Role.kt

@@ -0,0 +1,6 @@
+package co.kr.tnt.domain.model
+
+enum class Role(val displayName: String) {


'도메인' 모듈은 어떤 데이터를 담아야할까요?

displayName 은 어디서 보여주는 데이터인가요?

비즈니스 로직들.. 프레젠테이션 계층은 모르는게 맞아요ㅠㅠ 수정하겠습니다..

hoyahozz · 2025-01-17T03:41:14Z

feature/signup/src/main/java/co/kr/tnt/signup/common/role/model/RoleState.kt

+
+import co.kr.tnt.core.designsystem.R
+
+sealed class RoleState(


Role 은 왜 삭제됐나요!? 우리 앱의 중요한 도메인 모델이지 않을까요?

🥹 다시 추가하겠습니다

hoyahozz

도메인 모델인 Role 을 기반으로 RoleState 를 만들어주면 더 깔끔할 것 같아요 ㅎㅎ

우선 구현해주신 UI 모두 정상적으로 동작하는지 한 번 더 확인해보시고,
괜찮다면 머지하셔도 될 것 같습니다!

고생하셨습니다 ~ LGTM 👍👍👍

SeonJeongk · 2025-01-17T06:44:28Z

도메인 모델인 Role 을 기반으로 RoleState 를 만들어주면 더 깔끔할 것 같아요 ㅎㅎ

우선 구현해주신 UI 모두 정상적으로 동작하는지 한 번 더 확인해보시고, 괜찮다면 머지하셔도 될 것 같습니다!

고생하셨습니다 ~ LGTM 👍👍👍

모두 다 잘 동작합니다!! 며칠간 꼼꼼한 리뷰 감사합니다😭

SeonJeongk added 12 commits January 14, 2025 19:35

[TNT-110] feat: BaseViewModel 구현

1456e2c

[TNT-110] chore: feature:signup 모듈 최초 생성

410466b

[TNT-110] feat: 트레이너/트레이니 선택 화면 UI 구현

6f8004d

[TNT-110] fix: UI 시스템 바 겹침 문제 해결

6e0bd1f

[TNT-110] refactor: 트레이너/트레이니 선택 화면 배경색 추가

eafd3bd

[TNT-110] design: TopBar 컴포넌트 디자인 수정

0be88f7

- 간격 추가 - 배경색 변경

[TNT-110] feat: strings 추가

0191b5e

- RoleSelectionScreen에 추가한 strings 적용

[TNT-110] feat: 트레이너 프로필 생성 UI 구현

cd72f6d

[TNT-110] fix: Lint 위반 공백 추가

7b9970f

[TNT-110] feat: 트레이너 프로필 생성 완료 UI 구현

5d19811

[TNT-110] fix: 트레이너/트레이니 선택 화면 간격 수정

1941357

[TNT-110] fix: Lint UnusedParameter 해결

ba5c56e

SeonJeongk added ✨ Feat 기능 구현 🎨 Design UI 및 디자인 작업 🌻 선정 김씨 집안 막내 김선정 labels Jan 15, 2025

SeonJeongk requested a review from hoyahozz January 15, 2025 15:12

SeonJeongk self-assigned this Jan 15, 2025

SeonJeongk removed the ✨ Feat 기능 구현 label Jan 15, 2025

SeonJeongk added 3 commits January 16, 2025 02:07

[TNT-110] fix: Lint 위반 import 순서 변경

1a5df16

[TNT-110] feat: 선택한 역할에 맞는 이미지 띄우기

9b25b0f

[TNT-110] fix: Lint 위반 import 순서 변경

fd1b61f

hoyahozz reviewed Jan 16, 2025

View reviewed changes

SeonJeongk added 3 commits January 16, 2025 14:50

[TNT-110] fix: private 추가

29d319e

[TNT-110] refactor: counter stringResource로 변경

22e6982

[TNT-110] fix: 이름 입력 한 줄로 제한

6e3c8c8

- BringIntoViewRequester 삭제

hoyahozz requested changes Jan 16, 2025

View reviewed changes

SeonJeongk added 2 commits January 16, 2025 17:15

[TNT-110] refactor: 컴포저블 사이 공백 제거

8598c1b

[TNT-110] refactor: derivedStateOf 도입 및 컴포저블 사이 공백 제거

4535114

hoyahozz reviewed Jan 16, 2025

View reviewed changes

[TNT-110] refactor: 함수명 명사로 변경

5439114

SeonJeongk added 3 commits January 16, 2025 20:23

[TNT-110] refactor: 트레이너/트레이니 Role로 정의

aa4a3b3

[TNT-110] fix: 불필요한 padding 제거

a0f0a94

[TNT-110] refactor: 트레이너 프로필 설정 화면 이름 수정

a08b865

hoyahozz reviewed Jan 16, 2025

View reviewed changes

hoyahozz and others added 6 commits January 17, 2025 00:47

[TNT-110] fix: TnTTopAppbar 디자인 수정

6e74466

[TNT-110] design: TnTBottomButton 변경된 디자인 적용

b2cd573

[TNT-110] feat: 트레이너 프로필 설정 화면 내 키보드 대응 로직 구현

02b1a84

[TNT-110] fix: Role 삭제 및 RoleState 생성

1a51bc0

[TNT-110] fix: innerPadding에 맞춰 수정

42b2a5e

[TNT-110] fix: 불필요한 코드 제거

9fc4334

hoyahozz reviewed Jan 17, 2025

View reviewed changes

[TNT-110] fix: Role 다시 추가 및 RoleState 수정

ce96908

hoyahozz approved these changes Jan 17, 2025

View reviewed changes

[TNT-110] feat: Role 기반으로 RoleState 수정

f526491

SeonJeongk merged commit dee761b into develop Jan 17, 2025
1 check passed

SeonJeongk deleted the feature/TNT-110 branch January 17, 2025 07:56

		@@ -0,0 +1,6 @@
		package co.kr.tnt.domain.model

		enum class Role(val displayName: String) {

[TNT-110] 트레이너 회원 정보 입력 화면 구현 #22

[TNT-110] 트레이너 회원 정보 입력 화면 구현 #22

Uh oh!

Conversation

SeonJeongk commented Jan 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 작업 내용

구현한 화면

전달사항

📸 실행 화면

트레이너/트레이니 선택

트레이너 프로필 만들기

트레이너 프로필 생성 완료

🙆🏻 리뷰 요청 사항

👀 레퍼런스

Uh oh!

hoyahozz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SeonJeongk Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SeonJeongk Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hoyahozz Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SeonJeongk Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SeonJeongk Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

SeonJeongk commented Jan 15, 2025 •

edited

Loading

SeonJeongk Jan 16, 2025 •

edited

Loading

SeonJeongk Jan 16, 2025 •

edited

Loading

hoyahozz Jan 16, 2025 •

edited

Loading

SeonJeongk Jan 16, 2025 •

edited

Loading

SeonJeongk Jan 16, 2025 •

edited

Loading