최종 프로젝트 22일 차 @모바일 검색창, 모달 창 하단 고정, 모바일용 헤더

주말과 오늘은 반응형 구현을 위해서 다시금 큰 틀들을 만들었다. 

 

토요일에는 드롭다운을 모달창처럼 보이게 하는 작업을 했고(하다 보니 이제는 그냥 모달 창을 만들 수 있을 것 같다는 느낌이 들기 시작했다.)

 

일요일에는 모바일 검색창을 새로 만들었고(엔터 치면 검색, 자동완성 목록)

 

월요일(오늘)은 모달 창 하단 고정과 모바일용 헤더 제작을 했다. 

 

드롭다운 => 모달창

거의 다 얼추 완성은 되었는데, 드랍다운을 모달창처럼 보이게 하는 작업만 실패해서 내일 아예 새로 만들어야 한다. 모달창처럼 보이게 하는 것 자체는 성공했는데 아래 캡쳐에 있는 빨간 x표시가 있는 부분에 들어갈 탭 기능을 구현할 수가 없었던 것이다. 

 

뒤쪽 어두운 배경을 보면 최신순, 구독 채널의 두 가지 드롭다운이 있는데 이 두 드롭다운은 각각의 ref로 관리되고 있기 때문에 외부에서 마음대로 열었다 닫았다 하는 작동을 시킬 수가 없었다. 이 탭 기능을 구현하기 위해서는 드롭다운을 모달 창 처럼 보이게 하는 게 아니라 진짜 모달 창을 새로 하나 만들어서 관리해주어야 할 것 같다.

드롭다운 => 모달 창

 

모바일 검색창

모바일 검색창을 구현하는 것은 다른 팀원 분이 작성한 코드를 참고해서 생각보다 쉽게 할 수 있었다. 아래 캡쳐의 초록색 네모가 모바일 검색창의 특징인데, 드롭다운으로 예상 검색 결과를 띄워주고 이 중 하나를 선택하거나 엔터키를 누르면 검색이 되는 기능이다. 사용 가능한 메서드 부족 문제로 본래의 검색 기능이 다소 애매한데, 시간이 좀 된다면 이를 pc버전 검색창에 붙여넣어도 좋을 것 같다.  

모바일 검색창

모달 창 하단 고정

그리고 오늘 한 것은 모바일에서의 모달 창 하단 고정인데, css에 대한 이해가 좀 부족해서 하단에 '제대로' 고정하려면 어떤 css를 사용해야 할 지에 대해서 헤매었다. 

 

바로 아래와 같이 모바일 검색 키보드가 하단에서 올라올 때 모달창도 같이 올라가도록 하는 것이다. 여러 시도를 해보았는데, 이렇게 자연스럽게 모달창이 올라가도록 하려면 fixed bottom-0을 쓰는 것 말고는 영 시원찮았다. 

 

다만 한 가지 문제는 이 모달이 열리는 포탈이 기존에 body 태그 밖에 있었기 때문에 fixed bottom-0을 제대로 적용할 수가 없었던 것이다. 때문에 모달 창을 하단에 고정 시켜 줄 필요가 있는 모달 창 두개의 구조를 완전히 바꿔주어야 했다. 모달이 열리는 곳을 body 태그 안으로 옮겨주어야 했기 때문이다. 

 

ref를 사용하여 컴포넌트 안에서 자체 해결볼 수 있도록 했다. 사실 아직도 ref에 대해서는 잘 모르는데, 너무 잘 써먹고 있어서 이번 프로젝트가 끝나면 반드시 잘 조사해보아야 할 것 같다. 겪어본 바로는 모달, 드롭다운, 검색... 등등의 사용자에게 편리한 기능, 즉 거의 필수적인 기능들에 사용되기 때문에 특히 잘 알아보아야 할 것이다. 

 

모바일용 헤더

또 잠깐 시간을 내서 모바일용 헤더를 만들었다. 뒤로가기 버튼과 X버튼(홈버튼)만 있는 컴포넌트라 만들기는 쉬웠지만, 분기처리가 약간 성가셨다. 어떤 페이지에서는 보이면 안 되고, 어떤 페이지에서는 뒤로가기만 보이고, 어떤 페이지에서는 둘 다 보이고... 같은 처리다. 다만 이것도 다른 분이 하신 코드를 보니 이러한 분기 처리를 아래와 같은 잘 정리해두셔서 잘 참고해 써먹을 수 있었다. 

  const hideHeader = !(pathname === '/' || (pathname.startsWith('/search') && pathname !== '/search'));

  const hideBack = pathname === '/recruit/firstPage';
  const hideX = ['/search', '/party', '/my-page', '/warming'].some((n) => pathname.startsWith(n));