대화상자 패턴
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);
}