95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
// apps/cs/src/pages/group/ui/modify-page.tsx
|
|
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { GroupApi, type GroupFormData } from "../api/group-api";
|
|
import { ENDPOINT } from "@/shared/config";
|
|
import { useAlertStore } from "@/shared/lib/use-alert-store";
|
|
import { GroupForm } from "./group-form";
|
|
import { z } from "zod";
|
|
|
|
// Group 스키마 정의
|
|
const groupFormSchema = z.object({
|
|
groupId: z.string(),
|
|
groupNm: z.string().min(1, "그룹명을 입력해주세요"),
|
|
groupSeCd: z.string().min(1, "그룹구분을 선택해주세요"),
|
|
groupExpln: z.string(),
|
|
delYn: z.string(),
|
|
authrtId: z.string(),
|
|
siteId: z.string(),
|
|
});
|
|
|
|
function ModifyPage({ groupId }: { groupId: string }) {
|
|
const router = useRouter();
|
|
const queryClient = useQueryClient();
|
|
const { setMessage: alert } = useAlertStore((state) => state);
|
|
|
|
const { data: groupDetail } = useQuery({
|
|
queryKey: [ENDPOINT.CMS_SERVICE.GROUP, groupId],
|
|
queryFn: () => GroupApi.getGroup(groupId),
|
|
select: (data) => {
|
|
const keys = Object.keys(groupFormSchema.shape);
|
|
const filteredData = Object.fromEntries(
|
|
Object.entries(data).filter(([key]) => keys.includes(key)),
|
|
);
|
|
return filteredData;
|
|
},
|
|
enabled: !!groupId,
|
|
});
|
|
|
|
const { mutateAsync: updateGroup } = useMutation({
|
|
mutationFn: (data: GroupFormData) => GroupApi.updateGroup(groupId, data),
|
|
onSuccess: () => {
|
|
alert("수정되었습니다.", () => {
|
|
queryClient.invalidateQueries({
|
|
queryKey: [ENDPOINT.CMS_SERVICE.GROUP],
|
|
});
|
|
});
|
|
},
|
|
onError: (error) => {
|
|
if(error.response.data){
|
|
alert(error.response.data.message);
|
|
}else{
|
|
alert(error.message);
|
|
}
|
|
},
|
|
});
|
|
|
|
const { mutateAsync: deleteGroup } = useMutation({
|
|
mutationFn: () => GroupApi.deleteGroup(groupId),
|
|
onSuccess: () => {
|
|
alert("삭제되었습니다.", router.back);
|
|
},
|
|
onError: (error) => {
|
|
if(error.response.data){
|
|
alert(error.response.data.message);
|
|
}else{
|
|
alert(error.message);
|
|
}
|
|
},
|
|
});
|
|
|
|
const form = useForm<GroupFormData>({
|
|
resolver: zodResolver(groupFormSchema),
|
|
values: groupDetail as GroupFormData,
|
|
});
|
|
|
|
return (
|
|
<div className="card card-border !mb-0 !mt-6">
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">그룹 수정</h3>
|
|
</div>
|
|
<GroupForm
|
|
form={form}
|
|
groupId={groupId}
|
|
handleSave={updateGroup}
|
|
handleDelete={deleteGroup}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { ModifyPage }; |