Overlay

Overlay

부모 요소를 어떤 색상과 불투명도의 div 요소로 덮는 다형성 컴포넌트예요. 전체 너비와 높이를 차지하며, fixed prop이 설정되면 뷰포트 전체를 덮어요.

출처: 문서

본문

사용법 (Usage)

Overlay는 부모 컨테이너의 너비와 높이 100%를 차지하며, fixed prop이 설정되면 뷰포트 전체를 덮어요. color와 backgroundOpacity prop으로 Overlay의 background-color를 변경해요. backgroundOpacity prop은 CSS opacity 속성을 바꾸는 게 아니라 background-color를 바꿔요. 예를 들어 color="#000"과 backgroundOpacity={0.85}를 설정하면 background-color는 rgba(0, 0, 0, 0.85)가 돼요.

import { useState } from 'react';
import { Button, Overlay, AspectRatio } from '@mantine/core';

function Demo() {
  const [visible, setVisible] = useState(true);
  return (
    <>
      <AspectRatio ratio={16 / 9} maw={400} mx="auto" pos="relative">
        {visible && <Overlay color="#000" backgroundOpacity={0.85} />}
      </AspectRatio>
      <Button onClick={() => setVisible((v) => !v)} fullWidth maw={200} mx="auto" mt="xl">
        Toggle overlay
      </Button>
    </>
  );
}

그라데이션 (Gradient)

gradient prop을 설정하면 background-color 대신 background-image를 사용해요. gradient prop이 설정되면 color와 backgroundOpacity prop은 무시돼요.

import { useState } from 'react';
import { Button, Overlay, AspectRatio } from '@mantine/core';

function Demo() {
  const [visible, setVisible] = useState(true);
  return (
    <>
      <AspectRatio ratio={16 / 9} maw={400} mx="auto" pos="relative">
        {visible && (
          <Overlay gradient="linear-gradient(145deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.1) 100%)" />
        )}
      </AspectRatio>
      <Button onClick={() => setVisible((v) => !v)} fullWidth maw={200} mx="auto" mt="xl">
        Toggle overlay
      </Button>
    </>
  );
}

블러 (Blur)

blur prop을 설정하면 backdrop-filter: blur({value}) 스타일이 추가돼요. backdrop-filter는 모든 브라우저에서 지원되지는 않아요.

import { Overlay, AspectRatio } from '@mantine/core';

function Demo() {
  return (
    <AspectRatio ratio={16 / 9} maw={400} mx="auto" pos="relative">
      <Overlay color="#000" backgroundOpacity={0.6} blur={15} />
    </AspectRatio>
  );
}

다형성 컴포넌트 (Polymorphic component)

Overlay는 다형성 컴포넌트예요. 기본 루트 요소는 div이지만, component prop으로 다른 요소나 컴포넌트로 바꿀 수 있어요.

import { Overlay } from '@mantine/core';

function Demo() {
  return <Overlay component="section">{/* ... */}</Overlay>;
}

component prop에는 예를 들어 Next.js의 Link 같은 컴포넌트도 사용할 수 있어요.

import Link from 'next/link';
import { Overlay } from '@mantine/core';

function Demo() {
  return <Overlay component={Link} href="/">{/* ... */}</Overlay>;
}

TypeScript와 다형성 컴포넌트 (Polymorphic components with TypeScript)

다형성 컴포넌트의 prop 타입은 일반 컴포넌트와 달라요. 기본 요소의 HTML 요소 prop을 확장하지 않아요. 예를 들어 OverlayProps는 div가 기본 요소임에도 React.ComponentProps<'div'>를 확장하지 않아요.

다형성이 아닌 다형성 컴포넌트의 래퍼를 만들려면 컴포넌트 prop 인터페이스가 HTML 요소 prop을 확장해야 해요. 예:

import type { OverlayProps, ElementProps } from '@mantine/core';

interface MyOverlayProps extends OverlayProps<'div'>, ElementProps<'div', 'color'> {}

래핑 후에도 컴포넌트가 다형성으로 유지되게 하려면 이 가이드에서 설명하는 polymorphic 함수를 사용해요.

더 알아보기 (Learn more)

• Modal
• Popover
• 다형성 컴포넌트 가이드