구현 할 메인 모달 디자인
처음 내가 담당한 작업 중 하나는 메인 페이지에서 사용할 공통 모달을 만드는 것.
그 디자인은 아래와 같다.
Calendar, Kanban, Todo 탭이 같은 위치에 겹쳐 있고
QueryString에 따라 각 모달이 팝업되어야 했다.
즉 아래처럼 세 모달이 겹쳐있어야 하는 상태!
그리고 숫자가 높을수록 위에 위치해 있어야 했다.
접근 방법
처음에는 position: absolute 속성을 이용해 각 모달 레이아웃을 작성하려고 했지만, 사이드바 처럼 밑에서 팝업 해서 나타나는 구조기 때문에 absolute 속성을 사용할 수 없었다.
결국 absolute 속성은 스크롤에 포함되기 때문에, 스크롤에 영향을 주지 않는 position : fixed 속성을 사용하였다. 스크롤 혹은 화면에 포함되어야 하는 필요에 의해 두 선택 중 필요한 것을 적절히 사용해야함을 알게 되었다.
fixed 속성을 이용해 화면 밖에 위치시키고, transition을 주어 탭 클릭시 부드럽게 창이 전환되어 사용자가 실제로 파일을 사용하듯이 부드러운 움직임을 주었다.
또한 같은 위치에 있기에 각 모달에 Z-index를 주어야 한다 생각했지만,
html에서 형제 요소는 아래에 위치할수록 우선순위가 높아 굳이 해당 속성을 적용할 필요가 없었다.
<!-- 형제 요소는 위에서 아래로 가중치 부여 -->
<ProjectLayout>
{/* 캘린더 */}
<CalendarModal/>
{/* 칸반 */}
<KanbanModal/>
{/* 투두 */}
<TodoModal/>
<ProjectLayoutFooter /> <!-- 아래 노란 선! -->
</ProjectLayout>
정리
머릿속으로 absolute와 fixed는 단순히 화면에 고정할 수 있고 위치를 부모에게서 받아오는 차이만 있다고 이해하고 있었다.
하지만 이번에 공통 모달을 작업하면서 사용자에게 보여주기에 제일 적합한 CSS 속성을 고민하고 직접 구현하는 과정을 통해 프론트엔드 개발자라면 로직도 능통해야 하지만 화면 내 html 요소에 대해 제대로 이해하고 있어야 함을 좀 더 이해하게 되었다.
