z-index 기준 세우기

[suhyun113]

❓이슈

z-index 사용이 많아지면서, 적절한 기준이 없어 의도한 대로 요소 간의 상대적인 깊이가 결정되지 않는 문제 발생

⚠️ 발견한 문제

1. 모달 위에 헤더가 떠버리는 현상(상세페이지 지원서 선택 모달, 상세페이지 클럽 이미지 모달)
2. 스크롤 버튼이 모달 위에 떠버리는 현상

💡 논의하고 싶은 내용

1) 현재 코드에 의미없는 z-index 사용 존재

- position 속성 없이 사용되고 있는 경우

export const LoginBox = styled.div`
  width: 610px;
  height: 640px;
  padding: 92px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.4);
  text-align: center;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

- 겹치는 문제가 발생하지 않는 경우 등

=> z-index 사용을 필요한 경우가 아니라면 지양하는 것이 좋을 것 같습니다.

2) z-index 상수화

export const Z = {
	dropdown: 10, // 일반 페이지 위 메뉴/드롭다운
	sticky: 100, // 영역 내 붙는 바
	header: 1000, // 전역 상단 헤더
	floating: 1050, // 스크롤 버튼 등
	overlay: 1100, // dim
	modal: 1200, // 모달 본체
	} as const;

z-index: ${Z.floating};

=> 당장 사용되고 있는 요소를 기준으로 z-index를 상수화했습니다.

• 전역 레이어는 1000 정도로, 현재 대부분의 파일에서 header, overlay, modal의 z-index가 1000으로 동일합니다.
• 따라서, header를 1000으로 기준을 잡고, 나머지 요소의 값을 변경했습니다.
• 스크롤 버튼 역시 overlay보다 아래에 와야 문제가 해결되기 때문에, 1050으로 했습니다.
• 로컬 UI는 드롭다운, 작은 메뉴가 10~50이고,
• 페이지 내 sticky바는 50~200 정도로 구성된다고 하여 이에 맞게 했습니다.

=> 기준을 정하고 사용하면, 겹치는 문제를 방지할 수 있을 것 같습니다.

💬 논의하고 싶은 내용

• 현재 기준을 정하지 않고 사용하고 있어서 위에 간단하게 기준을 세워봤는데, 다양한 의견을 주시면 좋을 것 같습니다.