[TIL] 231202_React: Icon 위에 Icon 배치하기

알림바를 구현하면서 알림이 존재하지 않을 때와 알림이 존재할 때를 다음과 같이 아예 다른 아이콘으로 구분했다.

보다 보니 사용자가 알림 존재 여부를 쉽게 확인하기는 어려울 것 같았다.

업로드한 PR에 대해 위와 같은 코멘트를 받았다. 구현해 낼 자신은 없었지만 알아보기로 했다.

현재 작성되어 있는 코드를 살펴보자.

AlertPosition은 내가 화면 내에서 구역을 정의하기 위해 설정한 의미 없는 컴포넌트라 pass.

하위 컴포넌트인 AlertButton 아래에 종 모양 아이콘인 HiBell 컴포넌트와 알림 아이콘인 IoMdAlert 컴포넌트가 존재하는 것을 확인할 수 있다.

이 둘을 어떻게 배치할 수 있을까 ? 단순히 저렇게 두면 각각의 아이콘으로 나란히 배치된다.

해결 방법 ! 💡

상위 컴포넌트인 AlertButton에서 position 속성 값을 relative로 설정하였다.

다음으로 하위 컴포넌트인 IoMdAlert 컴포넌트에 style 속성 값으로 position을 absolute로 설정한다. 그 후 style 속성 내 top, right, left 등으로 원하는 위치를 배정한다 !

결국 해결 ! 뿌듯 ! 🐥