Modality

기존 화면 위에 새로운 화면을 슬라이드 방식으로 표시하는 오버레이 컴포넌트입니다. 배경 화면이 축소되며, 새로운 화면이 하단에서 올라오는 형태로 네이티브 모달과 유사하게 동작합니다.

기본 사용법

import { useOverlay } from '@0610studio/zs-ui';

function MyComponent() {
  const { showModality } = useOverlay();

  const handleOpenModal = () => {
    showModality({
      component: <MyModalContent />,
    });
  };

  return <Button title="모달 열기" onPress={handleOpenModal} />;
}

API 참조

showModality 함수

showModality(props: ModalityProps): void

ModalityProps 인터페이스

Prop	Type	Default	Description
component	React.ReactNode	Required	모달로 표시할 컴포넌트
foldableSingleScreen	boolean	false	폴더블 디바이스에서 단일 화면 모드 사용 여부

특징

• 부드러운 애니메이션: 배경 화면이 축소되고 새 화면이 슬라이드됩니다
• 전체 화면: 모달 컴포넌트는 전체 화면 높이를 차지합니다
• SafeArea 지원: iOS의 SafeArea를 자동으로 고려합니다
• 폴더블 디바이스 지원: 폴더블 디바이스에서도 올바르게 동작합니다

예제

import { useOverlay, ZSContainer, ZSText, ZSPressable } from '@0610studio/zs-ui';

function MyModalContent() {
  const { hideOverlay } = useOverlay();

  return (
    <ZSContainer>
      <ZSText typo="heading.1">모달 제목</ZSText>
      <ZSText typo="body.2">모달 내용</ZSText>
      <ZSPressable onPress={() => hideOverlay('modal')}>
        <ZSText typo="body.2">닫기</ZSText>
      </ZSPressable>
    </ZSContainer>
  );
}

function MyComponent() {
  const { showModality } = useOverlay();

  return (
    <ZSPressable
      onPress={() => showModality({ component: <MyModalContent /> })}
    >
      <ZSText typo="body.2">모달 열기</ZSText>
    </ZSPressable>
  );
}