Toast Editor toolbar 에러

🌱에러

Toast Editor를 사용하면서 툴바가 나오지 않는 에러를 만나게 되었습니다.

mvp일정에 맞춰 개발을 하다 보니 코드 리뷰를 할 시간이 많이 없었고, 그러다 보니 이러한 에러가 발생했다는 것을 나중에 발견하게 되었습니다.

 

사진1

 

사진2

 

사진 1처럼 툴바가 잘 나와야 되는데, 사진 2처럼 툴바가 나오지 않는 문제였습니다.

 

🌱의식의 흐름

1. 다크 모드를 건드리다가 color 속성을 잘못 설정했을 것이다.

1번 생각은 다크모드를 지우고 다시 실행해보았지만 여전히 같은 문제가 발생했습니다.

따라서 Toast의 예시와 비교하면서 어떤 것이 빠져있는지 확인해보기로 했습니다.

2. reset css에서 어딘가가 잘못되었다.

Toast에서 toolbar가 어떤 방법으로 렌더링 되는지 확인해보았습니다.

Toast에서는 toolbar의 아이콘을 이미지 스프라이트를 통해서 받은 다음 background-image로 표시하고 있었습니다.

하지만 제 로컬에서는 이미지 자체가 네트워크상에서 받아지지 않았기 때문에 reset css파일에서 막고 있을 수도 있다는 의심을 했습니다.

 

그 이유는 css script가 먼저 받아진 다음에 이미지가 받아지는것을 확인하였고, 그렇다면 어떤 부분에서의 none속성으로 인해 애초에 이미지를 받지 않을 것이라 생각했습니다.

 button,
    [type='button'],
    [type='reset'],
    [type='submit'] {
		background-image: none; 
    }

🌱결론

다음과 같은 속성이 reset css에 적용되어있는것을 확인할 수 있었고 지움으로써 image스프라이트를 잘 받아오는 것을 확인할 수 있었습니다.