Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TNT-185] 트레이니 마이페이지 UI 구현 #58

Merged
merged 21 commits into from
Jan 31, 2025
Merged

Conversation

SeonJeongk
Copy link
Contributor

@SeonJeongk SeonJeongk commented Jan 30, 2025

📝 작업 내용

화면 설명

  • 트레이너와 연결된 경우 트레이너와 연결 끊기가 보여지고 연결되지 않은 경우 트레이너와 연결하기가 보여집니다

  • Dialog가 보여지는 버튼이 3개(로그아웃, 탈퇴, 연결 끊기)이기 때문에 PopupType 을 통해 보여져야 하는 스트링 리소스를 관리하고 있습니다.

    연달아 2개의 dialog가 보여져야 하고, 보여지기 여부는 state로 관리중입니다 (showFirstPopup, showSecondPopup)

  1. 트레이너와 연결하기

    • 버튼 클릭 시 연결 화면으로 이동합니다 (isFromMyPage 연결 화면 수정하면서 바뀔 예정)
  2. 서비스 이용약관, 개인정보 처리방침

    • 버튼 클릭 시 웹뷰 띄우도록 구현 (API 연동하면서 url 넘겨주는 부분 수정할 예정)
  3. 오픈소스 라이선스

    • 버튼 클릭 시 텍스트를 어떻게 띄워줘야 하는지 문의해본 후, API 연동하면서 같이 구현해보겠습니다
  4. 로그아웃, 계정 탈퇴

    • 텍스트 클릭 시 dialog가 연달아 2번 뜨고, 모두 확인을 누르면 로그인 화면으로 이동
    • 첫 번째 dialog 취소 클릭 시 dialog 닫힘
  5. 트레이너와 연결 끊기

    • 버튼 클릭 시 dialog가 연달아 2번 뜨고, 모두 확인을 눌러도 마이페이지 유지
    • 첫 번째 dialog 취소 클릭 시 dialog 닫힘

추가사항

텍스트 사이즈에 대응하도록 화면과 디자인 시스템 버튼을 수정했습니다

두 번째 dialog는 확인 버튼을 누르지 않고 뒤로가기 버튼을 눌러도, 확인 버튼을 눌렀을 때와 같은 동작을 수행하도록 수정했습니다 (로그아웃, 탈퇴, 연결 끊기)


📸 실행 화면

트레이니 마이페이지

trainee_mypage_final.mp4

텍스트 사이즈 최대로 키운 화면

trainee_mypage_fontSize.mp4

🙆🏻 리뷰 요청 사항

API 나오면 수정할 부분이 꽤 있을 것 같습니다..!
최대한 API 연동하기 편하게 구현해봤습니다🥺

👀 레퍼런스

@SeonJeongk SeonJeongk added ✨ Feat 기능 구현 🎨 Design UI 및 디자인 작업 🌻 선정 김씨 집안 막내 김선정 labels Jan 30, 2025
@SeonJeongk SeonJeongk self-assigned this Jan 30, 2025
@github-actions github-actions bot requested a review from hoyahozz January 30, 2025 17:56
@SeonJeongk SeonJeongk added this to the 3차 스프린트 milestone Jan 30, 2025
Copy link
Member

@hoyahozz hoyahozz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다 :->

코멘트 한 번 확인해주세요 _

// Small, XSmall 버튼을 위해 Button minWidth 설정
.defaultMinSize(minWidth = Dp.Hairline),
// Small, XSmall 버튼을 위해 Button minWidth, minHeight 설정
modifier = modifier.defaultMinSize(minWidth = Dp.Hairline, minHeight = size.height),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
modifier = modifier.defaultMinSize(minWidth = Dp.Hairline, minHeight = size.height),
modifier = modifier.defaultMinSize(
minWidth = Dp.Hairline,
minHeight = size.height
),

2줄 이상이면 줄바꿈 해주는게 좋을 것 같습니다!

type = ButtonType.Primary,
text = "텍스트",
text = "텍스트ddddddddddddd",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 프리뷰긴 한데 좀 더 의미있는 텍스트면 더 좋을 것 같아요 ㅋ_ㅋ

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵.. 고민 해보겠습니다ㅋㅋㅋ큐ㅜㅜ

modifier: Modifier = Modifier,
onClick: () -> Unit,
) {
CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides 39.dp) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

옹 얘는 어떤 방식으로 쓰는건가요?

Copy link
Contributor Author

@SeonJeongk SeonJeongk Jan 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Material 3의 버튼과 같은 터치 가능한 컴포넌트는 최소 터치 영역(48.dp) 을 가지도록 설계되어 있습니다. 이로 인해 버튼 높이가 48.dp보다 작을 경우 자동으로 여백이 추가되는 문제가 발생했습니다!

이를 해결하기 위해 LocalMinimumInteractiveComponentSize를 사용하여 디자인에서 정의된 버튼의 최소 높이(39.dp) 로 최소 터치 가능 영역을 설정했습니다

0.dp로 설정하지 않은 이유는 클릭은 가능하지만 리플 효과가 사라지기 때문입니다!

참고 링크

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오호 넵넵 ㅎㅎ 좋습니다!!

Comment on lines 115 to 118
WebViewScreen(
url = state.url,
onBackPress = onDismissWebView,
)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음 이건 별도 스크린 분리해서 navigate 시키는게 맞는 것 같아요!

스크린 전체를 감싸는 컴포저블이 두 개가 생기니, 불필요한 BackHandler 와 같은 로직이 생기는 것 같아요!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 분리해보겠습니다!


private fun loadUserData() {
viewModelScope.launch {
try {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

runCatching 대신 try-catch 를 사용하신 이유가 있으실까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

엇 바꿔두겠습니다

Comment on lines 19 to 20
val showFirstPopup: Boolean = false,
val showSecondPopup: Boolean = false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First, Second 라는 표현은 처음 읽었을 때 조금 갸웃하게 만드는 감이 있는 것 같아요!

Warning, Complete 라는 표현은 어떨까요?

그리고 출력해야 할 다이얼로그가 많은 경우 이런 방식도 생각해볼 수 있을 것 같아요!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PopupType enum class를 state로 관리중이긴 합니다!

val popupType: PopupType = PopupType.LOGOUT,

Warning과 Complete가 더 괜찮네요! 수정해두겠습니다

@Composable
fun TnTSwitch(
checked: Boolean,
onCheckedChange: () -> Unit,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음.. 뭔가 네이밍이 버튼을 누르면 내부에서 checked 를 변화시킬 것 같은 느낌이에요!

단순하게 onClick 도 괜찮아 보입니다!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

좋습니다아! 수정해두겠습니다

val isConnected: Boolean = false,
val isPushEnabled: Boolean = true,
val appVersion: String = "0.0.0",
val popupType: PopupType = PopupType.LOGOUT,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안드로이드 진영에서는 일반적으로 popup 보다는 dialog 라는 표현을 더 많이 사용하는 것 같습니돠!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그렇담 dialog로 통일해오겠습니닥!

Copy link
Member

@hoyahozz hoyahozz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WebViewScreen 으로 분리하고 바로 머지해주세요!

고생 많으셨습니다 👍👍👍👍👍 🏅🏅🏅🏅🏅

@SeonJeongk SeonJeongk merged commit 45870c6 into develop Jan 31, 2025
1 check passed
@SeonJeongk SeonJeongk deleted the feature/TNT-185 branch January 31, 2025 18:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Feat 기능 구현 🌻 선정 김씨 집안 막내 김선정 🎨 Design UI 및 디자인 작업
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[TNT-185] 트레이니 마이페이지 UI 구현
2 participants