Skip to content

[Fix] write review photo UI 수정#492

Open
HI-JIN2 wants to merge 3 commits intodevelopfrom
fix/write-review-photo-ui
Open

[Fix] write review photo UI 수정#492
HI-JIN2 wants to merge 3 commits intodevelopfrom
fix/write-review-photo-ui

Conversation

@HI-JIN2
Copy link
Member

@HI-JIN2 HI-JIN2 commented Mar 5, 2026

Summary

  • 사진 추가 버튼 ui 변경
  • 사진 삭제 uiux 변경
as-is to-be
image 스크린샷 2026-03-05 오후 5 23 05
image 스크린샷 2026-03-05 오후 5 23 17

Describe your changes

Screen_recording_20260305_171402.webm

Issue

To reviewers

  • 나령, 제훈님께 질문!
    • 추가된 사진 정사각에 맞춰 확대해서 보여줄지 (그렇게 하지않으면 영역에 다 차지 않아서 코너 rounded 적용 안됨. 둥둥 떠보임)
    • 메뉴 개수가 많아서 화면에서 넘칠때에 스크롤영역 어떻게 할지 (지금은 별점 밑에 영역만 스크롤로 되어있음)

@HI-JIN2 HI-JIN2 requested a review from PeraSite March 5, 2026 08:19
@HI-JIN2 HI-JIN2 self-assigned this Mar 5, 2026
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello, 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가 재설계되었고, 사진 삭제 방식이 사진 자체를 클릭하는 것에서 전용 마이너스 아이콘을 클릭하는 방식으로 업데이트되었습니다. 이는 사용자가 더욱 직관적으로 사진을 관리할 수 있도록 돕습니다.

Highlights

  • 사진 추가 버튼 UI 변경: 리뷰 작성 화면에서 사진을 추가하는 버튼의 디자인이 변경되었습니다.
  • 사진 삭제 UI/UX 개선: 사진 삭제 방식이 기존의 사진 클릭 방식에서, 사진 위에 표시되는 전용 '-' 아이콘을 클릭하는 방식으로 변경되어 사용자 경험이 개선되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • app/src/main/java/com/eatssu/android/presentation/cafeteria/review/write/WriteReviewScreen.kt
    • 사진 추가 및 삭제 UI 로직이 업데이트되었습니다.
    • 새로운 UI 컴포넌트 임포트가 추가되었습니다.
    • OutlinedTextField의 색상이 수정되었습니다.
    • 사진 리뷰 화면을 위한 새로운 미리보기 함수가 추가되었습니다.
  • app/src/main/res/drawable/ic_camera_24.xml
    • 새로운 카메라 아이콘이 추가되었습니다.
  • app/src/main/res/drawable/ic_minus.xml
    • 사진 삭제를 위한 새로운 마이너스 아이콘이 추가되었습니다.
  • app/src/main/res/values/strings.xml
    • 사진 개수 표시를 위한 문자열 리소스가 업데이트되었습니다.
Activity
  • 이 PR은 이슈 #369를 해결합니다.
  • 추가된 사진을 전체 크기로 보여줄지에 대한 질문이 리뷰어들에게 있습니다.
Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

리뷰 작성 화면의 사진 첨부 UI를 개선하는 PR이네요. 사진 추가 버튼과 사진 삭제 UI/UX를 변경하여 사용성을 높인 점이 좋습니다. 코드 변경 사항을 검토했으며, 레이아웃을 단순화하고 UI 일관성을 개선하기 위한 몇 가지 제안을 남겼습니다. 또한, 불필요한 주석 처리된 코드를 제거하는 것을 제안합니다. 전반적으로 좋은 개선입니다.

Comment on lines 280 to 311
Column(
modifier = Modifier
.size(120.dp)
.clip(RoundedCornerShape(8.dp))
.clickable(enabled = !isPosting) { onImageDelete() }
.size(150.dp)
// .clickable(enabled = !isPosting) { onImageDelete() }
) {
AsyncImage(
model = selectedImageUri,
contentDescription = "Selected image",
modifier = Modifier.fillMaxSize()
)
Box(
modifier = Modifier.size(92.dp)
) {
AsyncImage(
model = selectedImageUri,
contentDescription = "Selected image",
modifier = Modifier
.size(80.dp)
.clip(RoundedCornerShape(4.dp))
)

IconButton(
onClick = { onImageDelete() },
modifier = Modifier
.size(24.dp) // 터치 영역
.align(Alignment.TopEnd)
.offset(x = 5.dp, y = (-5).dp) // 이미지 위에 살짝 겹치게
) {
Icon(
painter = painterResource(R.drawable.ic_minus),
contentDescription = "remove photo",
tint = Color.Unspecified,
modifier = Modifier.size(20.dp) // 실제 아이콘
)
}
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

medium

Column 컴포저블은 단일 Box를 감싸고 있으며, Box의 크기(92.dp)보다 큰 150.dp의 고정 크기를 설정하고 있습니다. 이는 불필요한 레이아웃 계층과 사용되지 않는 공간을 추가합니다. Column을 제거하고 Box를 직접 배치하는 것을 고려해 보세요. 이 변경은 주석 처리된 코드(clickable)도 함께 제거하여 코드를 더 깔끔하게 만듭니다.

                                    Box(
                                        modifier = Modifier.size(92.dp)
                                    ) {
                                        AsyncImage(
                                            model = selectedImageUri,
                                            contentDescription = "Selected image",
                                            modifier = Modifier
                                                .size(80.dp)
                                                .clip(RoundedCornerShape(4.dp))
                                        )

                                        IconButton(
                                            onClick = { onImageDelete() },
                                            modifier = Modifier
                                                .size(24.dp) // 터치 영역
                                                .align(Alignment.TopEnd)
                                                .offset(x = 5.dp, y = (-5).dp) // 이미지 위에 살짝 겹치게
                                        ) {
                                            Icon(
                                                painter = painterResource(R.drawable.ic_minus),
                                                contentDescription = "remove photo",
                                                tint = Color.Unspecified,
                                                modifier = Modifier.size(20.dp) // 실제 아이콘
                                            )
                                        }
                                    }

Comment on lines 317 to +319
.clip(RoundedCornerShape(5.dp))
.background(Gray100)
.border(1.dp, Gray200, RoundedCornerShape(5.dp))
// .background(White)
.border(1.dp, Gray200, RoundedCornerShape(12.dp))
Copy link
Contributor

Choose a reason for hiding this comment

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

medium

여기에 몇 가지 개선점이 있습니다:

  1. clip 수정자는 5.dpRoundedCornerShape을 사용하지만 border 수정자는 12.dp를 사용합니다. 이 불일치로 인해 배경 클리핑이 테두리의 모서리와 일치하지 않을 수 있습니다. 일관된 UI를 위해 두 수정자 모두 동일한 모서리 반경을 사용해야 합니다.
  2. 주석 처리된 background 코드가 있습니다. 코드를 깔끔하게 유지하기 위해 제거해야 합니다.

아래 제안은 일관된 12.dp 반경을 사용하고 주석 처리된 코드를 제거하여 두 가지 문제를 모두 해결합니다.

                                        .clip(RoundedCornerShape(12.dp))
                                        .border(1.dp, Gray200, RoundedCornerShape(12.dp))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

리뷰 이미지 삭제 아이콘 크게하기

1 participant