dialog란?

주로 사용자의 주의가 필요한 중요한 정보나 액션을 보여줄 때 사용되는
팝업 형태의 UI 요소이다.

---

사용

1. 확인 Dialog (Confirmation Dialog)

사용자가 중요한 작업을 수행하기 전에 한 번 더 확인하는 용도

• 게시글/파일 삭제
• 결제 진행
• 중요한 설정 변경

2. 폼 Dialog (Form Dialog)

사용자 입력이 필요한 정보를 받을 때 사용

• 회원가입/로그인
• 프로필 설정
• 새 항목 생성

3. 경고 Dialog (Alert Dialog)

사용자에게 중요한 경고나 주의사항을 전달할 때 사용

• 저장되지 않은 변경사항 경고
• 보안 관련 경고
• 시스템 오류 알림

4. 공유 Dialog (Share Dialog)

콘텐츠 공유 관련 옵션을 제공할 때 사용

• SNS 공유
• 링크 복사
• 파일 공유 설정

---

특징

• 배경이 어두워지면서 현재 작업을 일시 중단시킴
• ESC키나 배경 클릭으로 닫을 수 있음
• 키보드 포커스가 Dialog 내부로 제한됨
• 중요도에 따라 강제로 응답하게 만들 수 있음

코드에서 Dialog를 식별하는 방법

🖥️ javascript

// Dialog 관련 상태 변수
const [showDialog, setShowDialog] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false);

// Dialog 컴포넌트 이름
<Dialog>
<Modal>
<AlertDialog>
<ConfirmationDialog>

// Dialog 스타일 클래스
"fixed inset-0"  // 전체 화면 오버레이
"bg-black bg-opacity-50"  // 배경 어둡게
"z-50"  // 최상위 레이어

➡️ 이러한 Dialog들은 사용자의 주의를 필요로 하는 중요한 상호작용에서 사용되므로,
꼭 필요한 경우에만 적절하게 사용하는 것이 좋다.