최종 프로젝트 21일 차 @헤더 반응형 적용, 검색 페이지 분리

오늘은 본격적으로 반응형 적용 작업에 들어갔다. 개발자 도구의 기기 툴바 전환 기능을 이용해서 모바일 버전을 쉽게 확인하고 css를 적용할 수 있었는데 이러한 것들을 적용하는 과정이 좀 복잡하고 번거롭기는 했지만, 진짜 문제들에 비하면 그렇게 어려운 것도 아니었다. 

 

검색 페이지 분리

우선 이전부터 준비했던 검색 페이지 분리에 대해 말하자면, pc 버전에서는 검색 페이지를 따로 분리할 필요가 없었지만 모바일에서 원활한 동작이 일어나도록 하려면 검색 페이지를 분리해야했다. 그 과정에서 기존에 쿼리 스트링으로 관리하던 검색기능을 path로 관리하게 되었고, 이와 관련된 로직들을 수정해야 했다. 

 

css 적용은 덜 되었지만, 아래와 같이 페이지를 재구성할 수 있었다. pc 버전에서는 헤더의 검색창에 검색어를 입력하면 자동으로 검색 페이지로 넘어가고, 모바일 버전에서는 하단의 검색 버튼을 누르면 검색 페이지로 넘어가도록 했다. 

 

헤더 반응형 적용

그리고 또 고생했던 것이 위의 두 캡쳐에 나타난 것과 같이 헤더를 2개로 나눠서 위치를 상하로 나누어주어야 했던 것이다. 게다가 pc에는 없는 버튼이 모바일에서 생겨나는 것이 있어 이와 관련된 버튼을 새로 만들고, 기존 위치에 있던 것의 위치를 옮겨주는 등의 작업이 필요했다. 

 

아래가 기존의 헤더를 모바일 환경에서 두 개로 나눠주는 css요소이다. 이 작업을 하면서 가장 크게 와닿았던 것이 바로 tailwindCSS의 유용성이었는데, css 파일이나 styled-components에서 따로 작성해주지 않고 내가 적용하길 원하는 태그에 바로 css를 작성할 수 있어서 세세한 변경점을 확인하거나 css 적용 지점을 바꾸는 등의 작업이 매우 간결해진 것을 느낄 수 있었다. 여태껏 굳이 tailwindCSS를 사용해야 하는건가 의문이 들었었는데, 이번 반응형 작업을 하면서 세세한 css 작업을 할 때에는 tailwindCSS가 확실히 좋다는 생각이 들었다. 

className={`flex justify-end items-center gap-2 bg-static-white 
  mobile:fixed mobile:bottom-0 mobile:px-[20px] mobile:justify-between mobile:shadow-2xl mobile:body-xs-bold mobile:w-full`}

 

또 좋은 것이 css를 동적으로 넣는 것이 간편하다는 것도 tailwindCSS의 장점이다. 

 

아래는 검색 바에 적용한 css인데, 이 css는 실패라서 나중에 수정해야 하기는 하지만, 이렇게 동적으로 css를 넣을 수 있는 것이 큰 장점이라는 것은 느낄 수 있었다. 

      className={`flex py-[4px] px-[16px] gap-[4px] justify-center items-center rounded-2xl bg-gray-50 relative
    ${pathname.startsWith('/search') ? 'mobile:fixed' : 'mobile:hidden'}
    mobile:top-[108px] mobile:w-[303px]`}