미디어 쿼리 삽질

기존의 코드에서 모바일 뷰 포트로 변경되면 네비게이션을 오른쪽에 숨겼다가 버튼 클릭하면 보여주는 식의 css를 짰다. 그런데 왠걸 뷰포트를 변경해보니 transform: translateX(100%);에 있어야할 네비게이션이 0 > 100%로 움직이는게 보이지 않는 가?!

이걸 해결하기 위해서 1시간을 구글링해 보니 결국 답을 찾지 못했다. 다시 천천히 css 변경이 일어나는 지점이 어디일까 생각해보니, 데스크탑 뷰의 css에서 모바일뷰의 css로 변경되는 시점이 머리에 스쳐 지나갔다.

아니나 다를까, 이게 문제 였다. 원인을 찾았으니 css만으로 해결 가능하겠지 라는 생각을 했으나, 결국 해결하지 못했다. 데스크탑에서 transform을 모바일뷰와 같은 값을 가지게 해야하는데 그렇게 되면 데스크탑의 뷰가 깨지는 문제가 발생했다.

고민 끝에 javascript로 해결하기로 했다. 먼저 react에서 값이 변경되어도 랜더링이 일어나지 않는 useRef를 사용하여 초기값으로 0을 주고 네비게이션이 나오는 버튼을 클릭하면 1이 커지게 했다.

className={navVisibleState ? [style.header,style.openNav].join(" "): 
	  firstClick.current ? style.header :style.firstHeader}

이 값이 0일 경우 falsy한 값이니까 클래스 명에 firstHeader가 들어가고 firstHeader에는 display: none이 적용되어 있다. 이후 최초로 버튼을 클릭하게 되면 navVisibleState가 true로 변경되어 네비가 나오고 다시 누르면 false가 되지만 firstClick.current의 값이 2가 되어 있기 때문에 firstHeader가 아닌 header가 클래스로 들어가게 된다.

오늘의 삽질 해결!