Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | import { UploadOutlined } from '@ant-design/icons';
import { usePostImageUploadMutation, usePostQuestMutation } from '@lib/api/mutations';
import { CreateOrUpdateQuestRequestDto } from '@uniquegood/realworld-adventure-interface';
import { Button, DatePicker, Form, Input, Modal, ModalProps, Upload, message } from 'antd';
import { Dayjs } from 'dayjs';
interface CreateModalProps {
modalData: ModalProps;
closeModal: () => unknown;
campaignId: string;
}
export default function CreateModal({ modalData, closeModal, campaignId }: CreateModalProps) {
const [form] = Form.useForm();
const { mutateAsync: postQuest } = usePostQuestMutation({ campaignId });
const { mutateAsync: postImage } = usePostImageUploadMutation();
const handleSubmit = async (
values: Omit<CreateOrUpdateQuestRequestDto, 'campaignId'> & {
date: [Dayjs, Dayjs];
image: { file: File; fileList: FileList };
}
) => {
if (!campaignId) {
message.error('캠페인을 선택해주세요.');
}
const {
data: { url }
} = await postImage({ file: values.image.file });
const [startAt, endAt] = values.date || [null, null];
const { success } = await postQuest({
...values,
startAt: startAt?.format('YYYY-MM-DDTHH:mm'),
endAt: endAt?.format('YYYY-MM-DDTHH:mm'),
imageUrl: url || ''
});
if (success) {
message.success('퀘스트를 생성했습니다.');
closeModal();
}
};
return (
<Modal {...modalData} title="퀘스트 생성" onOk={form.submit} okText="확인" cancelText="닫기">
<Form
form={form}
onFinish={handleSubmit}
preserve={false}
labelCol={{ span: 24 }}
wrapperCol={{ span: 24 }}
// eslint-disable-next-line no-template-curly-in-string
validateMessages={{ required: '${label}을(를) 입력해주세요.' }}
>
<Form.Item name="title" label="이름" rules={[{ required: true }]}>
<Input placeholder="이름을 입력해주세요." />
</Form.Item>
<Form.Item name="description" label="설명" rules={[{ required: true }]}>
<Input placeholder="설명을 입력해주세요." />
</Form.Item>
<Form.Item name="image" label="이미지" rules={[{ required: true }]}>
<Upload listType="picture" maxCount={1} beforeUpload={() => false}>
<Button icon={<UploadOutlined />}>이미지 업로드</Button>
</Upload>
</Form.Item>
<Form.Item
name="date"
label="퀘스트 기간"
rules={[{ required: true, message: '시작일은 필수값입니다.' }]}
>
<DatePicker.RangePicker
format="YYYY-MM-DD HH:mm:00"
showTime={{ format: 'HH:mm' }}
style={{ width: '100%' }}
allowEmpty={[false, true]}
/>
</Form.Item>
</Form>
</Modal>
);
}
|