현성필
112 lines
3.2 KiB
React
112 lines
3.2 KiB
React
import React, { useState } from 'react';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import ErrorAlertDialog from '@/components/shared/ErrorAlertDialog.jsx';
|
|
|
|
const AddScenarioDialog = ({ open, onOpenChange, onSubmit }) => {
|
|
const [scenarioName, setScenarioName] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [showErrorDialog, setShowErrorDialog] = useState(false);
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!scenarioName.trim()) {
|
|
setError('시나리오 이름을 입력해주세요');
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
try {
|
|
const success = await onSubmit(scenarioName.trim());
|
|
if (success) {
|
|
setScenarioName('');
|
|
setError('');
|
|
onOpenChange(false);
|
|
} else {
|
|
setError('시나리오 생성에 실패했습니다');
|
|
setShowErrorDialog(true);
|
|
}
|
|
} catch (err) {
|
|
setError(err.message || '시나리오 생성에 실패했습니다');
|
|
setShowErrorDialog(true);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleOpenChange = (open) => {
|
|
if (!open) {
|
|
setScenarioName('');
|
|
setError('');
|
|
}
|
|
onOpenChange(open);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>새 시나리오 추가</DialogTitle>
|
|
<DialogDescription>
|
|
새로운 시나리오의 이름을 입력해주세요
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="name">시나리오 이름</Label>
|
|
<Input
|
|
id="name"
|
|
value={scenarioName}
|
|
onChange={(e) => {
|
|
setScenarioName(e.target.value);
|
|
setError('');
|
|
}}
|
|
placeholder="시나리오 이름을 입력하세요"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => handleOpenChange(false)}
|
|
disabled={isSubmitting}
|
|
>
|
|
취소
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
>
|
|
{isSubmitting ? '생성 중...' : '생성'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<ErrorAlertDialog
|
|
open={showErrorDialog}
|
|
onOpenChange={setShowErrorDialog}
|
|
title="시나리오 생성 오류"
|
|
description={error}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AddScenarioDialog;
|