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.

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

refactor: 업로드 뷰 디자인 변경 #381

Merged
merged 12 commits into from
Oct 4, 2023
Merged

refactor: 업로드 뷰 디자인 변경 #381

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
811753f
refactor: 업로드 뷰 디자인 변경
krrong Oct 2, 2023
e990ef9
refactor: 사용하지 않는 변수 삭제
krrong Oct 2, 2023
bb2d7e4
refactor: AppCompatButton 사용해서 배경색 지정하도록 변경
krrong Oct 2, 2023
d72796a
refactor: editText에 hint 추가
krrong Oct 2, 2023
2fd0d1a
refactor: ktlint
krrong Oct 2, 2023
e28f68b
refactor: 버튼 배경 변경
krrong Oct 4, 2023
25790ae
refactor: editText 밑줄 삭제
krrong Oct 4, 2023
ef42cc1
refactor: editText marginTop 수정
krrong Oct 4, 2023
6bc1833
refactor: 이미지뷰 marginTop 수정
krrong Oct 4, 2023
4a33dae
Merge branch 'dev_android' of https://github.com/woowacourse-teams/20…
krrong Oct 4, 2023
6485bc1
fix: 버튼 id 수정
krrong Oct 4, 2023
753094c
refactor: 사용하지 않는 함수 삭제
krrong Oct 4, 2023
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
33 changes: 3 additions & 30 deletions android/app/src/main/java/com/now/naaga/presentation/upload/UploadActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import com.now.naaga.R
import com.now.naaga.data.firebase.analytics.AnalyticsDelegate
import com.now.naaga.data.firebase.analytics.DefaultAnalyticsDelegate
import com.now.naaga.data.firebase.analytics.UPLOAD_OPEN_CAMERA
import com.now.naaga.data.firebase.analytics.UPLOAD_SET_COORDINATE
import com.now.naaga.data.throwable.DataThrowable
import com.now.naaga.databinding.ActivityUploadBinding
import com.now.naaga.presentation.beginadventure.LocationPermissionDialog
Expand Down Expand Up @@ -97,7 +96,7 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
UploadStatus.PENDING -> { changeVisibility(binding.lottieUploadLoading, View.VISIBLE) }
UploadStatus.FAIL -> {
changeVisibility(binding.lottieUploadLoading, View.GONE)
shortToast(MESSAGE_FAIL_UPLOAD)
shortToast(getString(R.string.upload_fail_submit))
}
}
}
Expand All @@ -106,14 +105,10 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
UploadViewModel.ERROR_STORE_PHOTO -> {
shortToast(getString(R.string.upload_error_store_photo_message))
}

UploadViewModel.ALREADY_EXISTS_NEARBY -> {
shortToast(getString(R.string.upload_error_already_exists_nearby_message))
}

UploadViewModel.ERROR_POST_BODY -> {
shortToast(getString(R.string.upload_error_post_message))
}
UploadViewModel.ERROR_POST_BODY -> { shortToast(getString(R.string.upload_error_post_message)) }
}
}
}
Expand All @@ -140,11 +135,7 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
val fusedLocationClient = LocationServices.getFusedLocationProviderClient(this)
fusedLocationClient.getCurrentLocation(PRIORITY_HIGH_ACCURACY, createCancellationToken())
.addOnSuccessListener { location ->
if (location != null) {
val coordinate = getCoordinate(location)
binding.tvUploadPhotoCoordinate.text = coordinate.toText()
viewModel.setCoordinate(coordinate)
}
location.let { viewModel.setCoordinate(getCoordinate(location)) }
}
.addOnFailureListener { }
}
Expand Down Expand Up @@ -178,18 +169,10 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
logClickEvent(getViewEntryName(it), UPLOAD_OPEN_CAMERA)
checkCameraPermission()
}

binding.ivUploadPhoto.setOnClickListener {
logClickEvent(getViewEntryName(it), UPLOAD_OPEN_CAMERA)
checkCameraPermission()
}
binding.ivUploadPhotoCoordinate.setOnClickListener {
logClickEvent(getViewEntryName(it), UPLOAD_SET_COORDINATE)
checkLocationPermission()
}
binding.ivUploadClose.setOnClickListener {
finish()
}
binding.btnUploadSubmit.setOnClickListener {
if (isFormValid().not()) {
shortToast(getString(R.string.upload_error_insufficient_info_message))
Expand All @@ -211,14 +194,6 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
cameraLauncher.launch(null)
}

private fun checkLocationPermission() {
if (checkSelfPermission(Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_DENIED) {
LocationPermissionDialog().show(supportFragmentManager, TAG_LOCATION_DIALOG)
} else {
setCoordinate()
}
}

private fun setImage(bitmap: Bitmap) {
binding.ivUploadCameraIcon.visibility = View.GONE
binding.ivUploadPhoto.setImageBitmap(bitmap)
Expand Down Expand Up @@ -270,8 +245,6 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
Manifest.permission.CAMERA,
)

private const val MESSAGE_FAIL_UPLOAD = "장소등록에 실패했어요!"

val contentValues = ContentValues().apply {
put(MediaStore.Images.Media.DISPLAY_NAME, "ImageTitle")
put(MediaStore.Images.Media.MIME_TYPE, "image/jpeg")
Expand Down
7 changes: 2 additions & 5 deletions android/app/src/main/java/com/now/naaga/presentation/upload/UploadViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ class UploadViewModel @Inject constructor(

val name = MutableLiveData<String>()

val description = MutableLiveData<String>()

private val _successUpload = MutableSingleLiveData<UploadStatus>()
val successUpload: SingleLiveData<UploadStatus> = _successUpload

Expand All @@ -43,8 +41,7 @@ class UploadViewModel @Inject constructor(
}

fun isFormValid(): Boolean {
return (imageUri != URI_EMPTY) && (_coordinate.value != null) &&
(name.value != null) && (description.value != null)
return (imageUri != URI_EMPTY) && (_coordinate.value != null) && (name.value != null)
}

fun postPlace() {
Expand All @@ -54,7 +51,7 @@ class UploadViewModel @Inject constructor(
runCatching {
placeRepository.postPlace(
name = name.value.toString(),
description = description.value.toString(),
description = "",
coordinate = coordinate,
image = imageUri,
)
Expand Down
154 changes: 56 additions & 98 deletions android/app/src/main/res/layout/activity_upload.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,40 @@
app:lottie_loop="true"
app:lottie_rawRes="@raw/simple_loading" />

<ImageView
android:id="@+id/iv_upload_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:paddingHorizontal="20dp"
android:paddingVertical="@dimen/space_default_medium"
android:src="@drawable/ic_arrow"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/tv_upload_activity_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/upload_title"
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="@id/iv_upload_back"
app:layout_constraintStart_toEndOf="@id/iv_upload_back"
app:layout_constraintTop_toTopOf="@id/iv_upload_back" />

<ImageView
android:id="@+id/iv_upload_photo"
android:layout_width="180dp"
android:layout_height="180dp"
android:layout_marginTop="@dimen/space_default_large"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="@dimen/space_default_medium"
Copy link
Collaborator

Choose a reason for hiding this comment

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

[P5]
여기도 좀 간격이 더 띄워지면 좋을 것 같아요!
이건 단순 제 제안(완전 갠취의 영역)이니 크롱이 원하는 걸로 하시면 됩니다!👍

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

space_default_large로 반영했어요!

android:background="@drawable/rect_radius_small"
android:backgroundTint="@color/white"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@id/tv_upload_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
app:layout_constraintTop_toBottomOf="@id/tv_upload_activity_title" />

<ImageView
android:id="@+id/iv_upload_camera_icon"
Expand All @@ -55,127 +78,62 @@
app:layout_constraintStart_toStartOf="@id/iv_upload_photo"
app:layout_constraintTop_toTopOf="@id/iv_upload_photo" />

<EditText
android:id="@+id/et_upload_photo_title"
android:layout_width="0dp"
<TextView
android:id="@+id/tv_upload_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/space_default_large"
android:layout_marginTop="@dimen/space_default_medium"
android:autofillHints="no"
android:ellipsize="end"
android:hint="@string/upload_photo_title"
android:inputType="text"
android:maxLines="1"
android:text="@={viewModel.name}"
android:textAlignment="textStart"
android:layout_marginTop="@dimen/space_default_large"
android:text="@string/upload_photo_title"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/iv_upload_photo"
tools:text="선정릉 돌담길" />

<ImageView
android:id="@+id/iv_upload_photo_coordinate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/space_default_medium"
android:src="@drawable/ic_coordinate"
app:layout_constraintEnd_toStartOf="@id/tv_upload_photo_coordinate"
app:layout_constraintStart_toStartOf="@id/et_upload_photo_title"
app:layout_constraintTop_toBottomOf="@id/et_upload_photo_title" />

<TextView
android:id="@+id/tv_upload_photo_coordinate"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/rect_radius_small"
android:backgroundTint="@color/white"
android:fontFamily="@font/pretendard_medium"
android:gravity="center"
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="@id/iv_upload_photo_coordinate"
app:layout_constraintEnd_toEndOf="@id/et_upload_photo_title"
app:layout_constraintStart_toEndOf="@id/iv_upload_photo_coordinate"
app:layout_constraintTop_toTopOf="@id/iv_upload_photo_coordinate"
tools:text="35.123, 127.345" />
app:layout_constraintTop_toBottomOf="@id/iv_upload_photo" />

<View
android:id="@+id/v_upload_divide_line_1"
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_marginTop="@dimen/space_default_large"
android:background="@color/black"
app:layout_constraintEnd_toEndOf="@id/et_upload_photo_title"
app:layout_constraintStart_toStartOf="@id/et_upload_photo_title"
app:layout_constraintTop_toBottomOf="@id/tv_upload_photo_coordinate" />

<TextView
android:id="@+id/tv_upload_description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/space_default_large"
android:fontFamily="@font/pretendard_bold"
android:text="@string/upload_description"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="@id/et_upload_photo_title"
app:layout_constraintStart_toStartOf="@id/et_upload_photo_title"
app:layout_constraintTop_toBottomOf="@id/v_upload_divide_line_1" />
android:layout_marginHorizontal="@dimen/space_default_large"
android:layout_marginTop="@dimen/space_default_medium"
android:background="@color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_upload_title" />

<EditText
Copy link
Collaborator

Choose a reason for hiding this comment

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

[P5]
android:background="@null" 를 추가해서 EditText의 밑줄을 없애는 건 어떻게 생각하시나요?!
밑줄을 없애면 아래의 그림처럼 보인답니다! 이건 단순 제 제안이니 크롱이 원하는 걸로 하시면 됩니다!
image

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

반영했어요!
다만, 유저가 글자를 입력하는 곳이 어디인지 모르지는 않을까.. 조금 걱정이긴합니다! 그래서 hint를 조금 수정했어요
사용자 유치를 열심히 해서 피드백을 반영해보도록 하죠!

android:id="@+id/et_upload_photo_description"
android:id="@+id/et_upload_place_name"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/space_default_medium"
Copy link
Collaborator

Choose a reason for hiding this comment

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

[P5]
지금은 너무 위의 선과 붙어있는 것 같은데 좀만 더 간격을 띄우면 어떨까요?!
이것도 위의 리뷰와 마찬가지로 제안일 뿐이니 크롱이 원하는 대로 하면 됩니다!😎

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

space_default_large로 반영했어요!

android:autofillHints="no"
android:background="@drawable/rect_radius_small"
android:backgroundTint="@color/white"
android:fontFamily="@font/pretendard_medium"
android:gravity="top"
android:hint="@string/upload_photo_description"
android:ellipsize="end"
android:hint="@string/upload_photo_title_hint"
android:textColorHint="@color/white"
android:inputType="text"
android:padding="@dimen/space_default_medium"
android:text="@={viewModel.description}"
app:layout_constraintBottom_toTopOf="@id/v_upload_divide_line_2"
app:layout_constraintEnd_toEndOf="@id/et_upload_photo_title"
app:layout_constraintStart_toStartOf="@id/et_upload_photo_title"
app:layout_constraintTop_toBottomOf="@id/tv_upload_description"
app:layout_constraintVertical_chainStyle="spread" />

<View
android:id="@+id/v_upload_divide_line_2"
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_marginTop="@dimen/space_default_large"
android:background="@color/black"
app:layout_constraintBottom_toTopOf="@id/btn_upload_submit"
app:layout_constraintEnd_toEndOf="@id/et_upload_photo_title"
app:layout_constraintStart_toStartOf="@id/et_upload_photo_title"
app:layout_constraintTop_toBottomOf="@id/et_upload_photo_description" />
android:maxLines="1"
android:text="@={viewModel.name}"
android:textAlignment="textEnd"
android:textColor="@color/white"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="@id/v_upload_divide_line_1"
app:layout_constraintStart_toStartOf="@id/v_upload_divide_line_1"
app:layout_constraintTop_toBottomOf="@id/tv_upload_title"/>

<Button
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/btn_upload_submit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/space_default_large"
android:layout_marginTop="@dimen/space_default_large"
android:layout_marginBottom="@dimen/space_default_large"
android:fontFamily="@font/pretendard_bold"
android:background="@drawable/rect_radius_small"
android:backgroundTint="@color/main_yellow"
Copy link
Collaborator

Choose a reason for hiding this comment

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

[P2]
버튼이 이제 확정되었으니, 확정된 버튼 이미지를 추출해서 background에 넣으면 될 것 같아요!
저도 모험 결과 뷰에 해당 작업을 해놔서 참고를 위한 링크 첨부할게요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

반영했습니다! 버튼이 게임틱하니 예쁘네요~

android:text="@string/upload_submit"
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/v_upload_divide_line_2" />

<ImageView
android:id="@+id/iv_upload_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_close" />
app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
19 changes: 9 additions & 10 deletions android/app/src/main/res/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,15 @@
<string name="adventureResult_rank">%d등</string>

<!-- UploadActivity -->
<string name="upload_description">Description</string>
<string name="upload_photo_description">장소에 대한 설명을 입력해주세요! \n\n자세할수록 좋습니다!</string>
<string name="upload_submit">등록할게요!</string>
<string name="upload_photo_title">장소명을 입력해주세요!</string>
<string name="upload_title">장소 등록</string>
<string name="upload_photo_title">장소이름</string>
<string name="upload_photo_title_hint">장소이름을 적어주세요!</string>
<string name="upload_submit">장소 등록</string>
<string name="upload_fail_submit">장소등록에 실패했어요!</string>
<string name="upload_error_store_photo_message">사진을 저장하는데 문제가 생겼어요! 다시 시도해주세요!</string>
<string name="upload_error_already_exists_nearby_message">근방에 다른 미션장소가 존재해서 추가할 수 없어요!</string>
<string name="upload_error_post_message">전송에 실패했어요! 다시 시도해주세요!</string>
<string name="upload_error_insufficient_info_message">모든 정보를 입력해주세요.</string>

<!-- CameraDialog-->
<string name="cameraDialog_description">장소를 올리기 위해서는\n카메라 접근 권한이 필요해요!</string>
Expand Down Expand Up @@ -100,12 +105,6 @@
<!-- LoginActivity -->
<string name="login_app_title">NAAGA</string>

<!-- UploadActivity -->
<string name="upload_error_store_photo_message">사진을 저장하는데 문제가 생겼어요! 다시 시도해주세요!</string>
<string name="upload_error_already_exists_nearby_message">근방에 다른 미션장소가 존재해서 추가할 수 없어요!</string>
<string name="upload_error_post_message">전송에 실패했어요! 다시 시도해주세요!</string>
<string name="upload_error_insufficient_info_message">모든 정보를 입력해주세요.</string>

<!-- SettingActivity -->
<string name="setting_withdrawal_success_message">"성공적으로 회원 탈퇴 되었습니다."</string>
<string name="setting_wrong_error_message">"인증 정보가 잘 못 되었어요!"</string>
Expand Down
1 change: 1 addition & 0 deletions android/app/src/main/res/values/themes.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<item name="android:textColor">@color/white</item>
Copy link
Collaborator

Choose a reason for hiding this comment

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

오 좋은데요?!👍

<item name="android:fontFamily">@font/main_font</item>
<!-- Customize your theme here. -->
<item name="android:windowBackground">@color/main_dark_blue</item>
Expand Down
2 changes: 1 addition & 1 deletion android/app/src/test/java/com/now/naaga/UploadViewModelTestWithRobolectric.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ class UploadViewModelTestWithRobolectric {
.get()

// EditText 찾기
val editTextTitle = activity.findViewById<EditText>(R.id.et_upload_photo_title)
val editTextTitle = activity.findViewById<EditText>(R.id.et_upload_place_name)

// when : EditText 값 변경
val testInput = "Test Input"
Expand Down
Loading