대화상자 패턴

Grunfeld는 다양한 대화상자 패턴을 지원합니다. 각 패턴은 특정 사용 사례에 최적화되어 있습니다.

알림 (Alert)#

사용자에게 정보를 전달하는 간단한 알림입니다. 반환값이 없으며 확인 버튼만 제공합니다.

grunfeld.add(() => (
  <div>
    <p>Task completed successfully!</p>
    <button onClick={() => grunfeld.remove()}>OK</button>
  </div>
));

확인 (Confirm)#

사용자의 결정이 필요한 경우 사용합니다. 일반적으로 boolean 값을 반환합니다.

const confirmed = await grunfeld.add<boolean>((removeWith) => ({
  element: (
    <div>
      <p>Are you sure you want to delete this?</p>
      <button onClick={() => removeWith(true)}>Delete</button>
      <button onClick={() => removeWith(false)}>Cancel</button>
    </div>
  ),
}));

if (confirmed) {
  // Proceed with deletion
}

프롬프트 (Prompt)#

사용자로부터 텍스트 입력을 받습니다. 입력된 문자열을 반환합니다.

const name = await grunfeld.add<string>((removeWith) => ({
  element: (
    <div>
      <h3>Enter your name</h3>
      <input
        type="text"
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            removeWith(e.currentTarget.value);
          }
        }}
      />
      <button onClick={(e) => {
        const input = e.currentTarget.previousElementSibling as HTMLInputElement;
        removeWith(input.value);
      }}>
        OK
      </button>
    </div>
  ),
}));

console.log("Entered name:", name);

커스텀 대화상자#

복잡한 UI나 여러 단계의 상호작용이 필요한 경우 커스텀 컴포넌트를 사용합니다.

interface FormData {
  email: string;
  password: string;
}

const data = await grunfeld.add<FormData>((removeWith) => ({
  element: <CustomLoginForm onSubmit={removeWith} />,
  position: "center",
  lightDismiss: false,
}));

if (data) {
  // Handle login
  await login(data.email, data.password);
}