💡

Dialog

Created

2026/01/22 07:23

Context

Alert나 Confirm과 같이 사용자가 상호작용하는 모달을 만들 때 화면에 별도의 창을 띄우는 컴포넌트가 필요하다. shadcn/ui에서는 이를 Dialog를 활용해서 만드는데, 이 글에서는 이 Dialog에 대한 내용을 다룬다.

Agenda

•

Dialog 컴포넌트의 내용을 분석하고 이해하는 것을 목표로 함

사용자에게 데이터를 입력하는 모달을 제공하고싶거나 Context를 분리하여 데이터 작업을 하고 싶은 경우가 존재한다. 이 때 모달을 화면에 띄워 사용자의 관심을 끄는 전환 작업을 수행한다. shadcn/ui에서는 Dialog 컴포넌트를 사용하여 이를 구현하는데 Dialog를 구성하는 컴포넌트 또한 여럿 존재한다.

Dialog

const Dialog = ({
	...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) => {
	return <DialogPrimitive.Root data-slot='dialog' {...props} />;
};
TypeScript
복사

Dialog 컴포넌트이다. radix-ui의 Dialog - Root를 감싸는 wrapper 형식으로 컴포넌트가 구성되어 있다. 후에 나올 Dialog를 구성하는 컴포넌트들을 감싸는 형태로 사용된다.

DialogTrigger

const DialogTrigger = ({
	...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) => {
	return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />;
};
TypeScript
복사

DialogTrigger 컴포넌트이다. radix-ui의 Dialog - Trigger를 감싸는 wrapper 형태로 컴포넌트가 구현되어 있다. Dialog의 열림 상태를 토글 할 수 있는 기능을 제공한다.

DialogPortal

const DialogPortal = ({
	...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) => {
	return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />;
};
TypeScript
복사

DialogPortal 컴포넌트이다. radix-ui의 Dialog - Portal을 감싸는 wrapper 형태로 컴포넌트가 구현되어 있다. DialogPortal은 컴포넌트를 배치한 위치와 상관 없이 DOM의 다른 위치에 렌더링 하게 해주는 기능을 수행한다. UI에서 툴팁, 드롭다운, 모달같은 경우는 부모 DOM 구조에 영향을 받으면 안 되는 경우가 많은데 대표적으로 z-index 지옥과 같이 부모 컴포넌트의 스타일링에 영향을 받아 컴포넌트가 올바르게 렌더링 되지 않는 경우이다.

DialogClose

const DialogClose = ({
	...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) => {
	return <DialogPrimitive.Close data-slot='dialog-close' {...props} />;
};
TypeScript
복사

Dialog를 닫을 수 있게 하는 컴포넌트이다. radix-ui의 Dialog - Close 컴포넌트를 감싸는 형태로 구현 되어있다.

DialogOverlay

const DialogOverlay = ({
	className,
	...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) => {
	return (
		<DialogPrimitive.Overlay
			data-slot='dialog-overlay'
			className={cn(
				'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fase-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
				className,
			)}
			{...props}
		/>
	);
};
TypeScript
복사

Dialog의 배경 컴포넌트이다. fixed와 inset을 사용하여 화면 전체를 감싸고 data-state 속성을 활용하여 열림 상태에 따라 스타일링을 적용한다.

DialogContent

const DialogContent = ({
	className,
	children,
	showCloseButton = true,
	...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
	showCloseButton?: boolean;
}) => {
	return (
		<DialogPortal data-slot='dialog-portal'>
			<DialogOverlay />
			<DialogPrimitive.Content
				data-slot='dialog-content'
				className={cn(
					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',
					className,
				)}
				{...props}
			>
				{children}
				{showCloseButton && (
					<DialogPrimitive.Close
						data-slot='dialog-close'
						className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
					>
						<XIcon />
						<span className='sr-only'>Close</span>
					</DialogPrimitive.Close>
				)}
			</DialogPrimitive.Content>
		</DialogPortal>
	);
};
TypeScript
복사

DialogContent 컴포넌트이다. Dialog의 컨텐츠를 표시하며 이전에 작성한 컴포넌트들을 재활용하여 구현한다. DialogContent에 표시 되는 컨텐츠들은 children으로 radix-ui의 Dialog - Content 내부에 렌더링 된다.

DialogHeader

const DialogHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {
	return (
		<div
			data-slot='dialog-header'
			className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
			{...props}
		/>
	);
};
TypeScript
복사

Dialog의 상단에 표시 되는 Header를 위한 컴포넌트이다. flex display이고 세로로 컴포넌트들을 배치한다.

DialogFooter

const DialogFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {
	return (
		<div
			data-slot='dialog-footer'
			className={cn(
				'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
				className,
			)}
			{...props}
		/>
	);
};
TypeScript
복사

Dialog 하단에 배치 되는 DialogFooter 컴포넌트이다. 특이한 부분이 있는데 바로 flex-col-reverse이다. flex로 배치 되는 순서를 변경한건데 예시는 다음과 같다.

[Save] [Cancel]
Plain Text
복사

위의 형식으로 버튼이 배치 되어있다고 가정한다. sm:flex-row는 데스크톱 크기의 화면에서 요소를 가로로 배치한다. 그리고 모바일 화면으로 가면 원래는 아래와 같이 세로로 배치 되어야 한다.

[Save]
[Cancel]
Plain Text
복사

하지만, flex-col-reverse로 인해 아래와 같이 배치 된다.

[Cancel]
[Save]
Plain Text
복사

버튼의 기능에 중요도를 부여하여 버튼의 우선순위를 생각한 배치라고 생각한다.

DialogTitle

const DialogTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {
	return (
		<DialogPrimitive.Title
			data-slot='dialog-title'
			className={cn('text-lg leading-none font-semibold', className)}
			{...props}
		/>
	);
};
TypeScript
복사

DialogTitle 내부에 배치 되는 Title 컴포넌트이다.

DialogDescription

const DialogDescription = ({
	className,
	...props
}: React.ComponentProps<'div'>) => {
	return (
		<DialogPrimitive.Description
			data-slot='dialog-description'
			className={cn('text-muted-foreground text-sm', className)}
			{...props}
		/>
	);
};
TypeScript
복사

이 컴포넌트는 Dialog에 대한 설명을 표시하기 위한 컴포넌트이다. 예제를 보면 주로 DialogHeader 안에 DialogTitle과 형제 depth에 배치 된다.

Dialog

Context

Agenda

Contents