✅ 진행한 기능

• HomeScreen 컴포넌트 사이 공백 추가
• HomeScreen 지도 버튼 버그 수정
• 사진 저장 UI에 뒷 배경 추가

💡문제 해결 과정 기록

우선 이전에 지정했던 padding과 spacer값이 사라진 것을 확인하고 HomeScreen에 공백을 추가했다.

수정 전	수정 후

지도 버튼 양 옆 공백과, 화면 하단 마지막으로 지도 버튼과 도감, 카메라 높이 사이에 공백을 추가했다.

그 후에는 피그마 디자인과 같이 뒷 배경을 추가하고자 했다.

왼쪽과 상단에 벡터이미지를 프로젝트에 추가하고 전체 화면을 감싸는 Box를 만들고 이미지를 배치했다.

💥 Topbar 영역에 이미지가 보이지 않는 문제

문제 정의

위 피그마 디자인과 같이 Topbar의 영역에도 이미지가 표시되게 디자인하고자 했다. 하지만 무슨 이유인지 Topbar 영역에 이미지가 표시되지 않았다.

문제 해결 과정

왜 이런 문제가 발생했을까 생각해봤는데 기본적으로 topBar에 지정된 색상때문에 이미지가 안보이는 현상이 발생했던 것이라 예측했다.

하지만 기본적으로 공용 컴포넌트로 만든 topBar에는 색상을 지정하지 않았는데 왜 이런일이 발생했던 걸까?

❓ Topbar에 color 속성을 지정하지 않는다면 어떤 동작을 할까?

Topbar 내부 코드를 확인해봤다.

Topbar 내부 코드에서 colors를 지정하지 않는다면 TopAppBarDefaults.topAppBarColors() 로 호출한 색상을 지정하는 것 같았다.

topAppBarColors() 에서는 테마로 지정된 기본 색상을 사용하는 것을 확인할 수 있었다.

💡 즉, 내가 따로 colors 속성을 지정하지 않아도 내부적으로 테마 색상으로 지정되는 것이다.

색상이 보이게 하기 위해 topbar를 투명하게 만들었고, 이후 정상적으로 이미지가 보이는 것을 확인할 수 있었다.

colors = TopAppBarDefaults.topAppBarColors(
    containerColor = Color.Transparent,
)