69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogClose,
|
|
Select,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
SelectContent,
|
|
SelectItem,
|
|
Textarea,
|
|
} from "@common/components";
|
|
import { useSelectPrompt } from "../lib/use-select-prompt";
|
|
|
|
function SelectPromptDialog() {
|
|
const { selectData, selectionGuide, isOpen, onSubmit, onCancel } =
|
|
useSelectPrompt();
|
|
const [value, setValue] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (isOpen) setValue("");
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onCancel}>
|
|
<DialogContent aria-describedby={undefined}>
|
|
<div className="flex flex-col gap-6 pb-4 pt-8">
|
|
<p className="whitespace-pre-line text-center text-[1.4rem] text-foreground">
|
|
{selectionGuide}
|
|
</p>
|
|
<div className="flex flex-col gap-2">
|
|
<Select onValueChange={setValue}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{selectData?.map((data) => (
|
|
<SelectItem key={data.value} value={data.value}>
|
|
{data.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Textarea
|
|
value={value}
|
|
className="!text-[1.3rem] !leading-6"
|
|
onChange={(e) => setValue(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter className="!justify-center">
|
|
<DialogClose asChild>
|
|
<Button onClick={() => onSubmit(value)}>확인</Button>
|
|
</DialogClose>
|
|
<DialogClose asChild>
|
|
<Button onClick={onCancel} color="white">
|
|
취소
|
|
</Button>
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export { SelectPromptDialog };
|