Skip to content

[Fix] write review photo UI 수정 #492

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.

Sign up for GitHub

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

Open
HI-JIN2 wants to merge 3 commits into
base: develop
Choose a base branch
from
+112 −32
Open

[Fix] write review photo UI 수정 #492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
221f08c
chore: 이미지 추가 된후 우측 상단에 - 추가
HI-JIN2 Mar 5, 2026
5602730
chore: 사진 추가 버튼 수정
HI-JIN2 Mar 5, 2026
25970de
chore: 리뷰 관련 토스트 수정
HI-JIN2 Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 79 additions & 28 deletions ...src/main/java/com/eatssu/android/presentation/cafeteria/review/write/WriteReviewScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,23 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
Expand All @@ -27,6 +33,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
Expand All @@ -53,7 +60,9 @@ import com.eatssu.design_system.theme.Gray200
import com.eatssu.design_system.theme.Gray300
import com.eatssu.design_system.theme.Gray400
import com.eatssu.design_system.theme.Gray500
import com.eatssu.design_system.theme.Gray700
import com.eatssu.design_system.theme.Primary
import androidx.core.net.toUri

const val MAX_TEXT_COUNT = 300

Expand Down Expand Up @@ -242,10 +251,10 @@ internal fun WriteReviewScreen(
},
shape = RoundedCornerShape(10.dp),
colors = androidx.compose.material3.OutlinedTextFieldDefaults.colors(
focusedContainerColor = Gray100,
unfocusedContainerColor = Gray100,
unfocusedBorderColor = Gray200,
focusedBorderColor = Gray200,
focusedContainerColor = Gray100, //fill
unfocusedContainerColor = Gray100, //fill
unfocusedBorderColor = Gray200, //stroke
focusedBorderColor = Gray200, //storke
unfocusedLabelColor = Gray400,
focusedLabelColor = Gray400,
cursorColor = Primary
Expand All @@ -270,42 +279,58 @@ internal fun WriteReviewScreen(
if (selectedImageUri != null) {
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) // 실제 아이콘
)
}
}
}
Comment on lines 280 to 311
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Mar 5, 2026

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) // 실제 아이콘
                                            )
                                        }
                                    }

Text(
modifier = Modifier.padding(top = 8.dp),
text = stringResource(R.string.review_photo_delete_hint),
color = Gray500,
style = EatssuTheme.typography.caption3
)
} else {
Column(
Row (
modifier = Modifier
.size(60.dp)
.fillMaxWidth()
.height(60.dp)
.clip(RoundedCornerShape(5.dp))
.background(Gray100)
.border(1.dp, Gray200, RoundedCornerShape(5.dp))
// .background(White)
.border(1.dp, Gray200, RoundedCornerShape(12.dp))
Comment on lines 317 to +319
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Mar 5, 2026

Choose a reason for hiding this comment

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

medium

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

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

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

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

.clickable(enabled = !isPosting) { onImageSelect() },
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
painter = painterResource(R.drawable.ic_camera_light),
painter = painterResource(R.drawable.ic_camera_24),
contentDescription = "add photo",
tint = Gray300
tint = Gray700
)
Spacer(Modifier.width(8.dp))
Text(
stringResource(R.string.review_photo_count, 0, 1),
color = Gray400,
style = EatssuTheme.typography.caption3
color = Gray700,
style = EatssuTheme.typography.body1
)
}
}
Expand Down Expand Up @@ -341,3 +366,29 @@ private fun ReviewWritePreview() {
)
}
}


@Preview(showBackground = true)
@Composable
private fun ReviewWritePreviewPhoto() {
EatssuTheme {
WriteReviewScreen(
title = "리뷰 작성하기",
menuList = listOf(
MenuMini(1, "김치"), MenuMini(2, "계란말이"), MenuMini(3, "닭볶음탕")
),
rating = 3,
content = "맛있었습니다!",
likedMenuIds = setOf(1L),
selectedImageUri = "https://static.wtable.co.kr/image-resize/production/service/recipe/2167/4x3/c9d9173f-d3e1-43cd-871d-339614b0dbac.jpg".toUri(),
isPosting = false,
onBack = {},
onRatingChanged = {},
onContentChanged = {},
onToggleLike = {},
onImageSelect = {},
onImageDelete = {},
onSubmit = {}
)
}
}
13 changes: 13 additions & 0 deletions app/src/main/res/drawable/ic_camera_24.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:pathData="M12,9.75C10.205,9.75 8.75,11.205 8.75,13C8.75,14.795 10.205,16.25 12,16.25C13.795,16.25 15.25,14.795 15.25,13C15.25,11.205 13.795,9.75 12,9.75Z"
android:fillColor="#1F1F1F"/>
<path
android:pathData="M15.65,2.241C13.568,0.391 10.432,0.391 8.35,2.241L8.134,2.433C7.542,2.959 6.777,3.25 5.985,3.25C3.37,3.25 1.25,5.37 1.25,7.985V13.045C1.25,14.882 1.25,16.321 1.374,17.463C1.5,18.629 1.762,19.573 2.348,20.38C2.703,20.868 3.132,21.297 3.62,21.652C4.427,22.238 5.371,22.5 6.536,22.626C7.679,22.75 9.118,22.75 10.955,22.75H13.045C14.882,22.75 16.321,22.75 17.463,22.626C18.629,22.5 19.573,22.238 20.38,21.652C20.868,21.297 21.297,20.868 21.652,20.38C22.238,19.573 22.5,18.629 22.626,17.463C22.75,16.321 22.75,14.882 22.75,13.045V7.985C22.75,5.37 20.63,3.25 18.015,3.25C17.223,3.25 16.458,2.959 15.866,2.433L15.65,2.241ZM7.25,13C7.25,10.377 9.377,8.25 12,8.25C14.623,8.25 16.75,10.377 16.75,13C16.75,15.623 14.623,17.75 12,17.75C9.377,17.75 7.25,15.623 7.25,13ZM18,9C17.448,9 17,8.552 17,8C17,7.448 17.448,7 18,7C18.552,7 19,7.448 19,8C19,8.552 18.552,9 18,9Z"
android:fillColor="#1F1F1F"
android:fillType="evenOdd"/>
</vector>
16 changes: 16 additions & 0 deletions app/src/main/res/drawable/ic_minus.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="20dp"
android:viewportWidth="20"
android:viewportHeight="20">
<path
android:pathData="M10,0L10,0A10,10 0,0 1,20 10L20,10A10,10 0,0 1,10 20L10,20A10,10 0,0 1,0 10L0,10A10,10 0,0 1,10 0z"
android:fillColor="#565656"/>
<path
android:pathData="M5.5,10H14.5"
android:strokeLineJoin="round"
android:strokeWidth="1.5"
android:fillColor="#00000000"
android:strokeColor="#ffffff"
android:strokeLineCap="round"/>
</vector>
8 changes: 4 additions & 4 deletions app/src/main/res/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,11 @@
<!-- ========================== -->
<!-- Toast Messages - Review -->
<!-- ========================== -->
<string name="toast_review_write_success">리뷰가 작성되었습니다.</string>
<string name="toast_review_write_success">리뷰가 등록되었어요.</string>
<string name="toast_review_write_failed">리뷰 작성에 실패하였습니다.</string>
<string name="toast_review_modify_success">리뷰를 수정했습니다.</string>
<string name="toast_review_modify_failed">리뷰 수정이 실패했습니다.</string>
<string name="toast_review_delete_success">리뷰를 삭제했습니다.</string>
<string name="toast_review_delete_success">리뷰가 삭제되었어요.</string>
<string name="toast_review_delete_failed">리뷰 삭제에 실패했습니다.</string>
<string name="toast_review_load_failed">리뷰를 불러오지 못했습니다.</string>

Expand All @@ -88,7 +88,7 @@
<!-- ========================== -->
<!-- Toast Messages - Report -->
<!-- ========================== -->
<string name="toast_report_success">신고가 완료되었습니다.</string>
<string name="toast_report_success">신고가 성공적으로 접수되었어요!</string>
<string name="toast_report_failed">신고가 실패하였습니다.</string>

<!-- ========================== -->
Expand Down Expand Up @@ -141,7 +141,7 @@
<string name="review_posting">작성 중...</string>
<string name="review_modifying">수정 중...</string>
<string name="review_photo_delete_hint">사진 클릭 시, 삭제됩니다.</string>
<string name="review_photo_count">사진 %1$d/%2$d</string>
<string name="review_photo_count">사진 추가(%1$d/%2$d)</string>
<string name="review_settings">리뷰 설정</string>
<string name="review_error_occurred">에러가 발생했습니다.</string>
<string name="review_write">리뷰 작성하기</string>
Expand Down