[QA] 프로필 수정 화면 패딩 수정 #71
Conversation
- 친구 프로필 수정 화면에서 기념일 섹션과 다음 섹션 사이의 간격을 `32.dp`에서 `16.dp`로 줄여 불필요한 공백을 통일하였습니다.
- 친구 프로필 화면의 기념일 정보 섹션에서, 기념일 종류(`category`)와 날짜(`content`) 텍스트가 서로 다른 높이에 표시되던 문제를 수정했습니다. - `category` 텍스트에 `align(Alignment.Top)`을 적용하고, `content` 텍스트에 `padding(start = 54.dp)`를 추가하여 두 텍스트가 상단 기준으로 정렬되도록 레이아웃을 조정했습니다.
Summary of ChangesHello @stopstone, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 프로필 상세 및 편집 화면의 UI/UX를 개선하는 데 중점을 둡니다. 기념일 관련 정보의 시각적 표현을 다듬기 위해 패딩과 간격을 조정하여, 특히 기념일 텍스트 영역과 추가 영역에서 보다 일관되고 사용자 친화적인 레이아웃을 보장합니다. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
안녕하세요. 프로필 수정 화면의 패딩을 수정하는 PR을 리뷰했습니다.
전반적으로 기념일 관련 UI의 간격을 조정하여 디자인을 개선한 점이 좋습니다. FriendProfileScreen.kt에서 기념일 등 여러 줄로 표시될 수 있는 항목의 레이아웃을 수정하셨는데, 이 과정에서 content 텍스트 정렬에 문제가 발생할 수 있는 부분을 발견했습니다. Arrangement.SpaceBetween과 padding을 함께 사용하는 현재 방식 대신, 보다 견고한 2단 레이아웃을 구현하는 방법을 제안하는 코멘트를 남겼습니다. 해당 코멘트를 확인하시고 레이아웃을 개선하는 것을 고려해 보시기 바랍니다.
| Text( | ||
| category, | ||
| modifier = Modifier.align(Alignment.Top), | ||
| text = category, | ||
| style = NearTheme.typography.B2_14_MEDIUM, | ||
| color = NearTheme.colors.GRAY01_888888, | ||
| ) | ||
| Text( | ||
| content, | ||
| modifier = Modifier.padding(start = 54.dp), | ||
| text = content, | ||
| style = NearTheme.typography.B2_14_MEDIUM, | ||
| color = NearTheme.colors.BLACK_1A1A1A, | ||
| ) |
There was a problem hiding this comment.
현재 Row의 horizontalArrangement = Arrangement.SpaceBetween 속성과 함께 content Text에 modifier = Modifier.padding(start = 54.dp)를 사용하는 방식은 content 내용들을 세로로 정렬하는 데 효과적이지 않을 수 있습니다. SpaceBetween은 두 번째 자식 요소를 오른쪽 끝으로 밀어내므로, content Text는 항상 오른쪽에 정렬됩니다. 이로 인해 category의 길이에 따라 content의 시작 위치가 달라져 일관된 UI를 제공하기 어렵습니다.
또한, 54.dp는 의미를 알기 어려운 '매직 넘버'이므로 사용을 지양하는 것이 좋습니다.
더 견고한 2단 레이아웃을 구현하려면 부모 Row에서 horizontalArrangement를 제거하고, category Text에 Modifier.width()로 고정 너비를 주거나 Spacer를 사용하여 컴포넌트 사이의 간격을 조절하는 방법을 고려해 보세요. 예를 들면 다음과 같습니다.
Row(
modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 16.dp),
verticalAlignment = Alignment.Top
) {
Text(
modifier = Modifier.width(80.dp), // 카테고리에 고정 너비 부여
text = category,
// ...
)
Spacer(modifier = Modifier.width(16.dp)) // 카테고리와 내용 사이 간격
Text(
modifier = Modifier.weight(1f), // 내용이 남은 공간을 채우도록 함
text = content,
// ...
)
}이러한 리팩토링을 통해 더 예측 가능하고 유지보수하기 쉬운 레이아웃을 만들 수 있습니다.
작업 내용