[feature] 프로필 이미지 변경

[yuni-ju]

#️⃣연관된 이슈

• resolved : [유저 정보] 프로필 이미지 변경 #186

📝작업 내용 및 코드

프로필 이미지 수정 기능

기존에는 프로필 사진이 구글 로그인 시 구글의 프로필 이미지로 고정되었으나, 이를 변경할 수 있도록 합니다.

1. 옵션 메뉴 디자인

라이트 모드	다크 모드

기본 이미지로 변경 시 db에는 null로 저장하고, 앱에서 지정해둔 기본 이미지가 나타납니다.

2. 프로필 수정 조건을 변경

닉네임이나 사진 중 하나만 변경 시에도 업데이트가 가능합니다.

3. 이미지와 닉네임 업데이트 상태를 추가

sealed class UserNameState {
    data object Unchanged : UserNameState()
    data class New(val userName: String) : UserNameState()
}

sealed class ProfileImageState {
    data object Unchanged : ProfileImageState()
    data object Remove : ProfileImageState()
    data class New(val userProfileImage: Uri) : ProfileImageState()
}

변경하지 않는 상태와 기본 이미지로 변경한 상태를 구분하기 위해 추가했습니다.

4. 성공 조건 상태 추가

data class UpdateState(
    val nameSuccess: Boolean,
    val imageSuccess: Boolean
)

이름과 이미지 성공 상태를 updateState하나로 관찰하기 위해 생성했습니다.

5. 프로필 이미지 업데이트 기능 (UpdateUserProfileImageUseCase)

storage의 용량을 절약하기 위해 유저 당 하나의 이미지만 저장하도록 합니다.

새 이미지를 업로드 시 해당 이미지 주소를 db에 업데이트 합니다.
이때, db에 업데이트를 성공하면 이전 이미지를 스토리지에서 제거하고, 실패 시 업로드 했던 새 이미지를 제거합니다.

이전 이미지와 새 이미지를 구분하기 위해서 파일명에 타임스탬프를 추가했습니다.

6. 기본 이미지로 변경 기능 (DeleteUserProfileImageUseCase)

기본 이미지로 변경 시 이미지 파일을 삭제하고, db의 필드를 null로 설정합니다.

7. 회원 탈퇴 시 스토리지에 존재하는 프로필 이미지를 삭제하는 로직을 추가

8. 업로드할 이미지 압축

프로필 이미지가 최대 180.dp이기 때문에, 저장소에 저장하는 이미지의 용량을 압축했습니다.

이미지 크기를 가져와 비율을 계산하고, inSampleSize로 샘플링합니다.
이를 비트맵으로 바꾸고 JPEG로 압축하는 과정을 거쳤습니다.

9. 프로필 설정 시 화면 회전 대응

프로필 이미지 수정 영역이 추가되면서 화면 회전 시 UI가 가려지지 않도록 스크롤을 추가했습니다.

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

FIRESTORE_STORAGE_ID 를 위해 local.properties를 업데이트 해야합니다.

팀 노션에 추가해두겠습니다!

[miller198]

좋아요~깔끔하군용 고생하셧씀다