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

#441 refactor 프로필 화면 파일 분리 및 중간 부분 UI 작업 #444

Open
wants to merge 9 commits into
base: improve
Choose a base branch
from

Conversation

zunione
Copy link
Collaborator

@zunione zunione commented Mar 2, 2025

#️⃣연관된 이슈

#441

📝작업 내용

  1. 기존 ProfileFragment 클래스 안에 존재했던 컴포저블 함수들을 ProfileScreen 파일로 따로 분리
    1-1. 프리뷰 생성 시 리소스 절감
  2. 소개 링크를 이름과 자기소개 사이로 위치를 옮기고 가운데 정렬
  3. 관심분야 칩을 시각적 블럭 안으로 넣어 가독성 향상

스크린샷

💬리뷰 요구사항

진행한/참여한 스터디도 동일하게 블럭으로 넣어보려고 합니다!
사진에서는 색감이 조금 두드러지고 파랗게 나왔는데 실제 휴대폰에서는 조금 더 흰끼 도는 색감입니다

@zunione zunione linked an issue Mar 2, 2025 that may be closed by this pull request
7 tasks
@zunione zunione self-assigned this Mar 2, 2025
@zunione zunione added UI 화면 작업 리팩터링 아키텍처 구조 변경 등 리팩터링 작업 labels Mar 2, 2025
Copy link
Collaborator

@language7606 language7606 left a comment

Choose a reason for hiding this comment

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

분리하신 것을 보니 확실히 깔끔하네요! ㅎㅎ 디자인은 저는 마음에 듭니다! 몇가지 코멘트 달아놨으니 확인부탁드려요~!!

Comment on lines +73 to +75
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ProfileScreen(
Copy link
Collaborator

Choose a reason for hiding this comment

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

여러가지 고민하시다가 넣으셨겠지만, 가능하다면 OptIn 어노테이션은 지양하는게 좋습니다! 안정화 작업이 덜 된 Api일 때 넣는건데, 꼭 필요한 기능이라면 커스텀이 가능한지 등 많이 따져보시고 어쩔 수 없을 때 사용해주세요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

TopAppBar와 FlowRow가 해당 어노테이션을 필요로 하던데 이 둘은 커스텀이 조금 어려워서 사용을 해야 할 것 같습니다 ㅜㅜ

Copy link
Collaborator

Choose a reason for hiding this comment

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

저도 FlowRow사용 목적으로 OptIn 어노테이션을 사용하긴 했습니다. ㄷㄷㄷ
FlowRow 사용하지 않고는 구현이 번거롭긴 한데 방법을 모색해보면 좋은 공부가 될 것 같기도 합니다.

Comment on lines +161 to +195
links.forEach { link ->
val domain = extractDomain(link)
val iconRes = domainIcons[domain] ?: R.drawable.icon_link

Image(
painter = painterResource(id = iconRes),
contentDescription = "$domain icon",
modifier = Modifier
.size(32.dp)
.padding(end = 8.dp)
.clickable { changeToLinkWebView(link) }
)
}

}

if (intro.isNotBlank()) {
Text(
text = intro,
fontSize = 14.sp,
lineHeight = 18.sp,
color = Color(0xFF777777),
modifier = Modifier.fillMaxWidth().padding(start = 4.dp, end = 4.dp, top = 4.dp)
)
}
}

}

private fun extractDomain(url: String): String {
return try {
val uri = URL(url)
val domain = uri.host
if (domain.startsWith("www.")) domain.substring(4) else domain
} catch (e: Exception) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

맥락상 extractDomain 함수가 받는 인자 url이 IntroSection 의 links 에서 추출한 link니까 이름을 통일해주는 것도 가독성에 좋을 것 같아요! 모두 link로 해도 되고 아니면 url로 해도 될 것 같구요!

Comment on lines +202 to +226
fun InterestsSection(interests: String) {
Column(
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(32.dp)) // 모서리 둥글게
.background(Color(0x66e3eeff)) // 배경색 변경
.padding(16.dp) // 내부 패딩 추가
) {
Text(text = "관심분야", fontSize = 16.sp, fontWeight = FontWeight.Bold, modifier = Modifier.padding(start = 8.dp))
HorizontalDivider(modifier = Modifier.padding(top = 8.dp, bottom = 4.dp), color = Color(0x55777777))
FlowRow(
verticalArrangement = Arrangement.spacedBy((-8).dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
interests.split(",").forEach { interest ->
SuggestionChip(
onClick = { /*TODO: 이거 삭제하기*/ },
label = { Text(interest, color = Color(0xff666666)) },
colors = SuggestionChipDefaults.suggestionChipColors(containerColor = Color(0x10888888)),
border = BorderStroke(1.dp, Color(0xff888888))
)
}
}
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

위 주석과 TODO부분은 의도하신걸까요? ㅎㅎ 코드로도 충분히 이해가능한 부분일 것 같아 삭제해도 무방할 것 같습니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
UI 화면 작업 리팩터링 아키텍처 구조 변경 등 리팩터링 작업
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Refactor] 프로필 화면 파일 분리 및 중간 부분 UI 작업
3 participants