File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import {type ChangeEvent, useMemo, useState} from "react";
import {useNavigate} from "react-router-dom";
import {toast} from "react-toastify";
import type {FormActionsModel, FormMode, HeaderModel, StatusModel} from "../../../../../type/viewModel.ts";
import {ADMIN_CONTENT_LIST_ROUTE} from "../../../../route/adminRouteMap.ts";
import type {ContentFormItem} from "../../type/content.types.ts";
import {useContentDetail} from "../query/useContentDetail.ts";
import {useCreateContent} from "../mutation/useCreateContent.ts";
import {useUpdateContent} from "../mutation/useUpdateContent.ts";
import {useDeleteContent} from "../mutation/useDeleteContent.ts";
type ContentFormPageModel = {
header: HeaderModel;
status: StatusModel;
form: {
form: ContentFormItem;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
onContentChange: (value: string) => void;
disabled: boolean;
};
actions: FormActionsModel<FormMode>;
};
const initContentFormData: ContentFormItem = {
cntId: '',
cntDtId: '',
cntName: '',
cntCn: '',
registerId: '',
registPnttm: '',
updusrId: '',
updtPnttm: '',
};
const createInitialForm = (
item?: ContentFormItem,
cntId = '',
cntDtId = '',
) => ({
...initContentFormData,
cntId,
cntDtId,
...item,
});
export const useContentFormPage = (cntId: string, cntDtId: string): ContentFormPageModel => {
const navigate = useNavigate();
const mode: FormMode = cntId ? 'update' : 'create';
const [formDraft, setFormDraft] = useState<Partial<ContentFormItem>>({});
const {data, isLoading, error} = useContentDetail(cntId, cntDtId, {enabled: !!cntId});
console.log(data);
const {mutateAsync: createContent, isPending: isCreating} = useCreateContent();
const {mutateAsync: updateContent, isPending: isUpdating} = useUpdateContent();
const {mutateAsync: deleteContent, isPending: isDeleting} = useDeleteContent();
const isPending = isCreating || isUpdating || isDeleting;
const title = `콘텐츠 ${mode === 'create' ? '등록' : '수정'}`;
const breadcrumb = [
{label: '콘텐츠 관리', url: ADMIN_CONTENT_LIST_ROUTE},
{label: title},
];
const baseForm = useMemo(
() => createInitialForm(data, cntId, cntDtId),
[cntDtId, cntId, data],
);
const form = {
...baseForm,
...formDraft,
};
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
const {name, value} = event.target;
setFormDraft((prev) => ({
...prev,
[name]: value,
}));
};
const handleContentChange = (value: string) => {
setFormDraft((prev) => ({
...prev,
cntCn: value,
}));
};
const validateForm = () => {
if (!form.cntName.trim()) {
toast.warning('콘텐츠 이름을 입력해주세요.');
return false;
}
if (!form.cntCn.trim() || form.cntCn === '<p></p>') {
toast.warning('내용을 입력해주세요.');
return false;
}
return true;
};
const handleCreate = async () => {
if (!validateForm()) {
return;
}
await toast.promise(
createContent(form),
{
pending: '등록 중...',
success: '등록 완료',
error: '등록 실패',
},
);
handleList();
};
const handleUpdate = async () => {
if (!validateForm()) {
return;
}
await toast.promise(
updateContent(form),
{
pending: '수정 중...',
success: '수정 완료',
error: '수정 실패',
},
);
handleList();
};
const handleDelete = async () => {
if (!cntId || !window.confirm('콘텐츠를 삭제하시겠습니까?')) {
return;
}
await toast.promise(
deleteContent(cntId),
{
pending: '삭제 중...',
success: '삭제 완료',
error: '삭제 실패',
},
);
handleList();
};
const handleList = () => {
navigate(ADMIN_CONTENT_LIST_ROUTE);
};
return {
header: {
title,
breadcrumb,
homeUrl: '#',
},
status: {
isLoading,
error,
successMessage: '콘텐츠 조회가 완료되었습니다.',
},
form: {
form,
onChange: handleChange,
onContentChange: handleContentChange,
disabled: isPending,
},
actions: {
mode,
disabled: isPending,
onCreate: handleCreate,
onUpdate: handleUpdate,
onDelete: handleDelete,
onList: handleList,
},
};
};