왜 Padding을 안줬는데 Padding이 변할까

나는 요즘 P를 위한 가계부를 만들고 있다.

직접 판매를 목표하다보니까 생각보다 볼륨이 많아 졌다.

내가 피그마로 만든 프로토타입

쨋든 각설하고 이제 개발을 들어갔다. 

내가 맨 처음에 만들려고 했던 뷰는 이거였다.

메인뷰에 여러 요소가 들어가 있어서 이번에 작업할때 여러 요소를 분리해서 메인뷰에 합치도록 작업하려고 해봤다.

메인 헤더를 만드는데, 

오늘 부분을 누르면 하프시트가 떠서 데이터피커가 뜨는 걸 기대했는데 

데이트 피커를 활성화하려면 데이트피커를 누르는 뷰 모양이 디폴트인것 같아서 여러 궁리하다가 일단 넘겼다.

빨리 메인뷰라도 만들고 싶은데, 데이트 피커 버튼 모양을 커스터마이징 방법을 찾는 게 조금 어려웠다. 

일단 이 부분은 기존 데이트 피커 선택 부분을 선택하고, 나중에 바꿔봐야 겠다.

이걸 만드는 과정에서 패딩이 자동적(?)으로 변하는 일이 생겼다.

여기서 컴포넌트 설명을 조금 더 하자면, 오늘 날짜 같은 경우는 <와 데이트피커만 보이고, <를 누르는 등 날짜를 변경시키면 > 와 오늘 버튼이 뜬다. chevron( <, >)에만 padding을 주고 '오늘'에는 padding을 안줬다.

이게 뭐지 싶었는데, 저 헤더에 있는 요소 하나하나를 주석처리해서 없애가면서 어떤 요소가 padding을 변하게 하는지 찾았다.

처음에 원인을 예상할때 오늘 버튼은 원인이 아닐거라 생각했는데, 오늘 버튼만 존재했을때 padding이 변했다!

그래서 padding을 <, >주는 것처럼 동일하게 줬더니 문제가 해결됐다. 왜 그럴까?

추측으로 미루어 보아 모든 요소에는 기본 padding이 있고, padding을 따로 정해주지 않으면 기본 패딩이 적용되는 것 같다. 

---

번외) datepicker는 leading과 trailing에 기본 padding이 있다. 그래서 그 앞의 padding을 -8을 줘서 없앨 수 있다.