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 | 모달, 다이얼로그, 바텀시트 등의 컨텐츠 |