Blanket

블랭킷은 모달 다이얼로그·드로어 같은 레이어 컴포넌트 뒤의 화면을 덮어요.

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/blanket.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/blanket.json

아래 코드를 components/ui/blanket.tsx 에 복사해요.

components/ui/steel/blanket.tsx

/** * @title Blanket * @description 모달 다이얼로그·드로어 같은 레이어 컴포넌트 뒤의 화면을 덮는 오버레이예요. */import * as React from 'react';import { cn } from '@/lib/utils';// Atlassian @atlaskit/blanket 스펙// inset:0 · position:fixed · z-index:500 · background-color:var(--ds-blanket) · overflow-y:auto// shouldAllowClickThrough → pointer-events:none, !isTinted → background-color:transparentexport interface BlanketProps extends Omit<React.ComponentProps<'div'>, 'onClick'> {  /** 블랭킷 아래 요소를 클릭할 수 있게 해요. `true` 면 `onBlanketClicked` 가 호출되지 않아요. */  shouldAllowClickThrough?: boolean;  /** 반투명 배경색을 깔아요. */  isTinted?: boolean;  /** 블랭킷(자식 바깥 영역)을 클릭했을 때 호출돼요. */  onBlanketClicked?: (event: React.MouseEvent<HTMLDivElement>) => void;  testId?: string;  children?: React.ReactNode;}function Blanket({  shouldAllowClickThrough = false,  isTinted = false,  onBlanketClicked,  testId,  className,  children,  onMouseDown,  ...props}: BlanketProps) {  // 블랭킷에서 눌렀다가 블랭킷에서 뗀 경우에만 클릭으로 본다 (자식 안에서 드래그해 나온 경우 제외)  const mouseDownTarget = React.useRef<EventTarget | null>(null);  const handleClick = React.useCallback(    (event: React.MouseEvent<HTMLDivElement>) => {      if (event.currentTarget === event.target && mouseDownTarget.current === event.target) {        onBlanketClicked?.(event);      }    },    [onBlanketClicked],  );  return (    <div      role="presentation"      data-slot="blanket"      data-tinted={isTinted || undefined}      data-testid={testId}      onMouseDown={(event) => {        mouseDownTarget.current = event.target;        onMouseDown?.(event);      }}      onClick={shouldAllowClickThrough ? undefined : handleClick}      className={cn(        'pointer-events-auto fixed inset-0 z-[500] overflow-y-auto bg-ds-blanket',        shouldAllowClickThrough && 'pointer-events-none',        !isTinted && 'bg-transparent',        className,      )}      {...props}    >      {children}    </div>  );}export { Blanket };

Examples

Default

isTinted 를 주면 반투명 배경(color.blanket)이 깔려요. 블랭킷을 클릭하면 onBlanketClicked 가 호출되니 여기서 레이어를 닫아요.

Click through

shouldAllowClickThrough 를 주면 블랭킷이 마우스 이벤트를 막지 않아 아래 요소를 그대로 누를 수 있어요. 이때 onBlanketClicked 는 호출되지 않아요.

블랭킷이 덮여 있어도 아래 버튼을 그대로 누를 수 있어요.

Children

블랭킷 안에 넣은 자식은 틴트 위에 그대로 보여요. 자식 안을 클릭하거나, 자식 안에서 누른 채 바깥으로 끌어도 블랭킷 클릭으로 처리되지 않아요.

Usage guidelines

블랭킷은 레이어 컴포넌트 아래에 깔려 뒤 화면을 덮어요. 가장 흔한 짝은 Modal Dialog 이고, Drawer 나 스포트라이트도 블랭킷을 써요. 모달과 드로어는 블랭킷을 내장하고 있어서 따로 붙일 필요가 없어요.

뒤 화면과 상호작용하면 안 될 때는 틴트를 깔아 막혀 있다는 신호를 줘요.
뒤 화면을 계속 쓸 수 있다면 틴트를 빼요. 틴트가 색 대비를 떨어뜨리기 때문이에요.

Do· 막혔을 때만 틴트

뒤 화면을 쓸 수 없을 때만 isTinted 로 어둡게 덮어요.

Don't· 쓸 수 있는데 어둡게

아래 요소를 계속 눌러야 하는데 틴트를 깔면 대비가 떨어져 읽기 어려워요.

Accessibility

블랭킷은 role="presentation" 이라 보조 기술에 읽히지 않아요.
블랭킷을 쓰는 레이어 컴포넌트가 닫는 방법을 책임져요. 마우스 클릭뿐 아니라 Esc 같은 키보드로도 닫을 수 있어야 해요.
아래 요소와 상호작용할 수 있다면 틴트를 빼 색 대비를 지켜요.

/** * @title Blanket * @description 모달 다이얼로그·드로어 같은 레이어 컴포넌트 뒤의 화면을 덮는 오버레이예요. */ import * as React from 'react'; import { cn } from '@/lib/utils'; // Atlassian @atlaskit/blanket 스펙 // inset:0 · position:fixed · z-index:500 · background-color:var(--ds-blanket) · overflow-y:auto // shouldAllowClickThrough → pointer-events:none, !isTinted → background-color:transparent export interface BlanketProps extends Omit<React.ComponentProps<'div'>, 'onClick'> { /** 블랭킷 아래 요소를 클릭할 수 있게 해요. `true` 면 `onBlanketClicked` 가 호출되지 않아요. */ shouldAllowClickThrough?: boolean; /** 반투명 배경색을 깔아요. */ isTinted?: boolean; /** 블랭킷(자식 바깥 영역)을 클릭했을 때 호출돼요. */ onBlanketClicked?: (event: React.MouseEvent<HTMLDivElement>) => void; testId?: string; children?: React.ReactNode; } function Blanket({ shouldAllowClickThrough = false, isTinted = false, onBlanketClicked, testId, className, children, onMouseDown, ...props }: BlanketProps) { // 블랭킷에서 눌렀다가 블랭킷에서 뗀 경우에만 클릭으로 본다 (자식 안에서 드래그해 나온 경우 제외) const mouseDownTarget = React.useRef<EventTarget | null>(null); const handleClick = React.useCallback( (event: React.MouseEvent<HTMLDivElement>) => { if (event.currentTarget === event.target && mouseDownTarget.current === event.target) { onBlanketClicked?.(event); } }, [onBlanketClicked], ); return ( <div role="presentation" data-slot="blanket" data-tinted={isTinted || undefined} data-testid={testId} onMouseDown={(event) => { mouseDownTarget.current = event.target; onMouseDown?.(event); }} onClick={shouldAllowClickThrough ? undefined : handleClick} className={cn( 'pointer-events-auto fixed inset-0 z-[500] overflow-y-auto bg-ds-blanket', shouldAllowClickThrough && 'pointer-events-none', !isTinted && 'bg-transparent', className, )} {...props} > {children} </div> ); } export { Blanket };

/** * @title Blanket * @description 모달 다이얼로그·드로어 같은 레이어 컴포넌트 뒤의 화면을 덮는 오버레이예요. */import * as React from 'react';import { cn } from '@/lib/utils';// Atlassian @atlaskit/blanket 스펙// inset:0 · position:fixed · z-index:500 · background-color:var(--ds-blanket) · overflow-y:auto// shouldAllowClickThrough → pointer-events:none, !isTinted → background-color:transparentexport interface BlanketProps extends Omit<React.ComponentProps<'div'>, 'onClick'> { /** 블랭킷 아래 요소를 클릭할 수 있게 해요. `true` 면 `onBlanketClicked` 가 호출되지 않아요. */ shouldAllowClickThrough?: boolean; /** 반투명 배경색을 깔아요. */ isTinted?: boolean; /** 블랭킷(자식 바깥 영역)을 클릭했을 때 호출돼요. */ onBlanketClicked?: (event: React.MouseEvent<HTMLDivElement>) => void; testId?: string; children?: React.ReactNode;}function Blanket({ shouldAllowClickThrough = false, isTinted = false, onBlanketClicked, testId, className, children, onMouseDown, ...props}: BlanketProps) { // 블랭킷에서 눌렀다가 블랭킷에서 뗀 경우에만 클릭으로 본다 (자식 안에서 드래그해 나온 경우 제외) const mouseDownTarget = React.useRef<EventTarget | null>(null); const handleClick = React.useCallback( (event: React.MouseEvent<HTMLDivElement>) => { if (event.currentTarget === event.target && mouseDownTarget.current === event.target) { onBlanketClicked?.(event); } }, [onBlanketClicked], ); return ( <div role="presentation" data-slot="blanket" data-tinted={isTinted || undefined} data-testid={testId} onMouseDown={(event) => { mouseDownTarget.current = event.target; onMouseDown?.(event); }} onClick={shouldAllowClickThrough ? undefined : handleClick} className={cn( 'pointer-events-auto fixed inset-0 z-[500] overflow-y-auto bg-ds-blanket', shouldAllowClickThrough && 'pointer-events-none', !isTinted && 'bg-transparent', className, )} {...props} > {children} </div> );}export { Blanket };

설치Copy Anchor Link

수동 설치

ExamplesCopy Anchor Link

DefaultCopy Anchor Link

Click throughCopy Anchor Link

ChildrenCopy Anchor Link

Usage guidelinesCopy Anchor Link

AccessibilityCopy Anchor Link

PropsCopy Anchor Link

On this page