모달 관련 문제

모달이 나타날 때 모달 배경이 완벽하게 화면을 덮지 못하는 현상

문제상황

• 초기에는 BottomNav 컴포넌트에서 안에 ModalBackground 컴포넌트가 존재하였으며, 사용자가 모달의 상태를 바꾸면 ModalBackground가 현재 페이지의 배경을 덮도록 설계하였습니다.
  여기서 각 페이지에서 ModalBackground컴포넌트가 나타날 때 페이지의 전체 height를 감싸지 못하는 문제가 발생했습니다.

해결과정

• 문제 원인 1)
  각 페이지를 감싸고 있는 height 값이 뷰포트 값으로 설정되어 있어, 페이지 안의 컨텐츠가 자동으로 줄어들고 있었습니다.

  ✅   해결방안 1)
  각 페이지에 최소 높이를 주고, 그 이상으로 컨텐츠가 늘어나게 되면 자동으로 늘어나도록 높이값을 설정해주었습니다. 이로 인해 ModalBackground가 감쌀 수 있는 height값을 제대로 설정해줄 수 있었습니다.

• 문제 원인 2)
  ModalBackground가 존재하는 컴포넌트가 페이지마다 자식컴포넌트로 들어가있는게 아니라 모달이 뜰 때 형제컴포넌트로 생성되고 있었습니다. 따라서 현재 페이지의 height만큼을 전부 다 감쌀 수가 없었습니다.

  ✅   해결방안 2)
  ModalBackground를 공용 컴포넌트로 따로 빼주었고, 페이지마다 불러와서 넣어주었습니다.
  모달이 화면에 나타나있는지 상태를 관리하는 isActive를 리덕스에 저장해서 전역으로 관리하도록 하였고,
  페이지마다 isactive 가 true일 때만 ModalBackground가 나타나도록 수정하였습니다.

  이로 인해 전체 페이지에서 ModalBackground가 화면을 완벽하게 덮을 수 있었습니다.