들어가기 전에..

• 우리 메인프로젝트에는 기존의 창을 새로고침하지 않고, 같은 url를 사용하기 위해 모달창에 여러 기능을 넣었다.
  전체 홈 지도 위에 모달이 뜨게 구현해야하고, 지도 위에 약국 리스트들이 떠야하고, 모달 안에 여러기능을 넣다보니.. 모달 크기는 한정되어 있어서 모달 위에 또 모달이 있어야하고, 모달 안에 드롭다운도 있고..🤯🤯
• 그렇다 보니 z-index을 쓰는데.. 혼란이 오고, 또 컴포넌트가 많아질수록 z-index를 수정하면 다른데가 오류가 나는 상황이 발생했다.
  => 멘토님께서 z-index파일을 만들어 관리하면 한눈에 관리하기 쉽다고 추천해주셨고, z-index 파일덕에 전체 프로젝트 기간에 z-index 값 끼리의 관계를 따지면서 진행할수 있었다.

z-index.ts 코드

export const zIndex_KakaoMap = {
  MapContainer: 1,
  MapButtons: 10,
  MapFilter: 11,
};
export const zIndex_PharmList = {
  ListContainer: 10,
};
export const zIndex_Modal = {
  ModalBackDrop: 20,
  ModalContainer: 21,
  CloseBtnContainer: 22,
  AnyDropDown: 22,
  WriteReviewContainer: 23,
};
export const zIndex_MyPage = {
  DropDown: 10,
};
export const zIndex_AdminPage = {
  ModalBackDrop: 20,
  ShowImg: 21,
};
export const zIndex_Header = {
  Header: 100,
  Dropdown: 110,
};
export const zIndex_Loading = {
  Loading: 999,
};

전체 z-index값을 파일로 관리하면서 필요한 곳에 가져다 쓰기

• 코드가 너무 많으므로 모달위의 드롭다운 코드만 적음
• DropDown.tsx

//다른 import는 생략
import { zIndex_MyPage } from "../../Util/z-index";
//나머지 코드 생략
//스타일드 컴포넌트로 구현
const DropDownContainer = styled.section`
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 5px;
  gap: 3px;
  top: 24px;
  background: var(--black-050);
  box-shadow: var(--bs-lg);
  border-radius: 3px;
  z-index: ${zIndex_MyPage.DropDown};
  @media (max-width: 768px) {
    left: -25px;
  }
`;