Dialog

사용자를 중요한 내용으로 중단시키고 응답을 기대하는 모달 다이얼로그입니다. 주의를 필요로 하는 중요한 정보를 표시하거나 사용자의 결정이 필요한 상황에서 사용합니다. 폼 레이아웃을 포함할 수 있어 프로필 편집과 같은 작업에도 적합합니다.

기본 사용법

import { Dialog } from 'react-common-components-library';
import { useState } from 'react';

function BasicDialogExample() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        다이얼로그 열기
      </button>
      
      <Dialog
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="다이얼로그 제목"
        description="이것은 기본 다이얼로그 내용입니다. 모달 형태로 표시되며 배경을 클릭하거나 ESC 키를 눌러 닫을 수 있습니다."
        footer={
          <div>
            <button onClick={() => setIsOpen(false)}>
              취소
            </button>
            <button 
              onClick={() => {
                alert('확인 버튼이 클릭되었습니다.');
                setIsOpen(false);
              }}
            >
              확인
            </button>
          </div>
        }
      >
        <p>다이얼로그 내용을 여기에 작성합니다.</p>
      </Dialog>
    </>
  );
}

폼 레이아웃 사용법

Dialog 컴포넌트는 프로필 편집과 같은 폼 레이아웃에 최적화되어 있습니다:

import { Dialog, FormField } from 'react-common-components-library';
import { useState } from 'react';

function ProfileFormDialog() {
  const [isOpen, setIsOpen] = useState(false);
  const [formData, setFormData] = useState({
    name: 'John Doe',
    username: '@johndoe'
  });
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`저장된 데이터: ${JSON.stringify(formData)}`);
    setIsOpen(false);
  };
  
  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        프로필 편집
      </button>
      
      <Dialog
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Edit profile"
        description="Make changes to your profile here. Click save when you're done."
        onSubmit={handleSubmit}
      >
        <FormField label="Name">
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            placeholder="Enter your name"
          />
        </FormField>
        
        <FormField label="Username">
          <input
            type="text"
            name="username"
            value={formData.username}
            onChange={handleChange}
            placeholder="Enter your username"
          />
        </FormField>
      </Dialog>
    </>
  );
}

닫기 옵션 제어

배경 클릭이나 ESC 키로 다이얼로그를 닫는 기능을 제어할 수 있습니다:

import { Dialog } from 'react-common-components-library';
import { useState } from 'react';

function ControlledClosingDialog() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        다이얼로그 열기
      </button>
      
      <Dialog
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="중요한 작업"
        description="이 다이얼로그는 배경 클릭이나 ESC 키로 닫을 수 없습니다."
        closeOnOverlayClick={false}
        closeOnEsc={false}
      >
        <p>이 작업을 완료하려면 아래 버튼을 클릭하세요.</p>
        <button onClick={() => setIsOpen(false)}>
          완료
        </button>
      </Dialog>
    </>
  );
}

API 참조

Dialog Props

속성	타입	기본값	설명
isOpen	boolean	필수	다이얼로그 열림 상태
onClose	() => void	필수	다이얼로그 닫기 핸들러
title	ReactNode	-	다이얼로그 제목
`