139 lines
4.2 KiB
TypeScript
139 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
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 {
|
|
getCoreRowModel,
|
|
useReactTable,
|
|
type RowSelectionState,
|
|
} from "@tanstack/react-table";
|
|
import { useConfirm } from "@frontend-opensource/use-react-hooks";
|
|
import { Button, DataTable } from "@common/components/ui";
|
|
import { PostingApi, type WithModePost } from "@/entities/posting";
|
|
import { useAlertStore } from "@/shared/lib/use-alert-store";
|
|
import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
|
|
import { ENDPOINT } from "@/shared/config";
|
|
import { imageFormSchema, type ImageFormData } from "../model/image-interface";
|
|
import { columns } from "../model/posting-table-columns";
|
|
import { ImageApi } from "../api/image-service";
|
|
import { ImageForm } from "./image-form";
|
|
|
|
function ModifyPage({ sequential }: { sequential: string }) {
|
|
const router = useRouter();
|
|
const { confirm } = useConfirm();
|
|
const queryClient = useQueryClient();
|
|
const { setMessage: alert } = useAlertStore((state) => state);
|
|
|
|
const [onConfirm, setOnConfirm] = useState(false);
|
|
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
|
|
|
|
const { data: imageDetail } = useQuery({
|
|
queryKey: [ENDPOINT.CMS_SERVICE.IMAGES, sequential],
|
|
queryFn: () => ImageApi.getImageInfo(sequential),
|
|
});
|
|
|
|
const { data: postHistory } = useQuery({
|
|
queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
|
|
queryFn: () =>
|
|
PostingApi.getPostingHistory({ pstgTrgtNo: Number(sequential) }),
|
|
});
|
|
|
|
const { mutateAsync: updateImage } = useMutation({
|
|
mutationFn: (data: ImageFormData) => ImageApi.updateImage(sequential, data),
|
|
onSuccess: () => {
|
|
alert("수정되었습니다.");
|
|
},
|
|
});
|
|
|
|
const { mutateAsync: deleteImage } = useMutation({
|
|
mutationFn: () => ImageApi.deleteImage(sequential),
|
|
onSuccess: () => {
|
|
alert("삭제되었습니다.", router.back);
|
|
},
|
|
});
|
|
|
|
const { mutateAsync: requestPosting } = useMutation({
|
|
mutationFn: (data: WithModePost[]) => PostingApi.requestPosting(data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({
|
|
queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
|
|
});
|
|
},
|
|
});
|
|
|
|
const form = useForm<ImageFormData>({
|
|
resolver: zodResolver(imageFormSchema),
|
|
values: imageDetail,
|
|
});
|
|
|
|
const table = useReactTable({
|
|
data: postHistory?.content ?? [],
|
|
columns,
|
|
state: {
|
|
rowSelection,
|
|
},
|
|
enableMultiRowSelection: true,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
onRowSelectionChange: setRowSelection,
|
|
});
|
|
|
|
const handleDeletePostingHistory = async () => {
|
|
const data = table.getFilteredSelectedRowModel().rows.map((row) => ({
|
|
...row.original,
|
|
mode: "D",
|
|
}));
|
|
|
|
setOnConfirm(true);
|
|
if (await confirm("삭제하시겠습니까?")) {
|
|
setOnConfirm(false);
|
|
await requestPosting(data);
|
|
alert("삭제되었습니다.");
|
|
}
|
|
setOnConfirm(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="mt-6 flex flex-col">
|
|
<div className="card card-border">
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">이미지 수정</h3>
|
|
</div>
|
|
<ImageForm
|
|
form={form}
|
|
imgSn={sequential}
|
|
handleSave={updateImage}
|
|
handleDelete={deleteImage}
|
|
/>
|
|
</div>
|
|
<div className="card card-border">
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">
|
|
사이트 게시 이력
|
|
</h3>
|
|
</div>
|
|
<div className="card">
|
|
<div className="mb-4 flex justify-end">
|
|
<Button
|
|
size="sm"
|
|
color="red"
|
|
disabled={!table.getFilteredSelectedRowModel().rows.length}
|
|
onClick={handleDeletePostingHistory}
|
|
>
|
|
이력삭제
|
|
</Button>
|
|
</div>
|
|
<DataTable table={table} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ConfirmDialog open={onConfirm} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export { ModifyPage };
|