@teamsparta/stack-z-index

Z-Index

팀스파르타의 디자인 시스템에서 필요한 z-index 값들을 모아놓은 패키지입니다.

Installation

pnpm add @teamsparta/stack-z-index

yarn add @teamsparta/stack-z-index

npm install @teamsparta/stack-z-index

사용법

기본 사용법

import { zIndex } from "@teamsparta/stack-z-index";

const Component = () => <div css={{ zIndex: zIndex.modal }}>모달 내용</div>;

유틸리티 함수 사용법

특정 z-index 값을 기준으로 증가/감소시킬 수 있습니다.

import {
  zIndex,
  increaseZIndex,
  decreaseZIndex,
} from "@teamsparta/stack-z-index";

const Component = () => (
  <>
    {/* 모달보다 10만큼 더 높은 z-index 값을 사용 */}
    <div css={{ zIndex: increaseZIndex(zIndex.modal, 10) }}>
      모달 위에 렌더링되는 요소
    </div>

    {/* 모달보다 10만큼 더 낮은 z-index 값을 사용 */}
    <div css={{ zIndex: decreaseZIndex(zIndex.modal, 10) }}>
      모달 아래에 렌더링되는 요소
    </div>
  </>
);

제공되는 z-index 값

이름	값	설명
below	-1	기본 레이어 아래에 위치하는 요소
base	0	기본 레이어
popover	100	팝오버, 툴팁, 드롭다운 등
overlay	9999	모달, 바텀시트 등의 배경 (딤 처리된 배경)
modal	10000	모달, 다이얼로그, 바텀시트 등의 컨텐츠