feat: 이미지 등록 작업

apps/cs/src/pages/image/api/image-service.ts

@@ -31,7 +31,7 @@ export class ImageApiService implements ImageService {
     return response.data;
   }
 
-  public async updateImage(imgSn: string, data: Partial<Image>): Promise<void> {
+  public async updateImage(imgSn: string, data: ImageFormData): Promise<void> {
     const response = await client.put<void>(
       `${ENDPOINT.CMS_SERVICE.IMAGES}/${imgSn}`,
       data,

apps/cs/src/pages/image/model/image-interface.ts

@@ -35,8 +35,8 @@ export const imageFormSchema = z.object({
   sortSeq: z.number(),
   imgTypeCd: z.string(),
   atflYn: z.string(),
-  atflCd: z.string().optional(),
-  lnkgUrlAddr: z.string().optional(),
+  atflCd: z.string().nullish(),
+  lnkgUrlAddr: z.string().nullish(),
   useYn: z.string(),
 });
 

apps/cs/src/pages/image/ui/create-page.tsx

@@ -1,11 +1,25 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
-import { ImageForm } from "./image-form";
-import { imageFormSchema, type ImageFormData } from "../model/image-interface";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { imageFormSchema, type ImageFormData } from "../model/image-interface";
+import { ImageApi } from "../api/image-service";
+import { ImageForm } from "./image-form";
 
 function CreatePage() {
+  const router = useRouter();
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const { mutateAsync: createImage } = useMutation({
+    mutationFn: (data: ImageFormData) => ImageApi.createImage(data),
+    onSuccess: () => {
+      alert("등록되었습니다.", router.back);
+    },
+  });
+
   const form = useForm<ImageFormData>({
     resolver: zodResolver(imageFormSchema),
     defaultValues: {
@@ -13,16 +27,12 @@ function CreatePage() {
     },
   });
 
-  const handleSave = async (data: ImageFormData) => {
-    console.log(data);
-  };
-
   return (
     <div className="card card-border !mt-6">
       <div className="card-header">
         <h3 className="text-2xl font-medium text-label">이미지 등록</h3>
       </div>
-      <ImageForm form={form} handleSave={handleSave} />
+      <ImageForm form={form} handleSave={createImage} />
     </div>
   );
 }

apps/cs/src/pages/image/ui/image-form.tsx

@@ -55,7 +55,7 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
 
     await handleConfirm(async () => {
       if (await confirm(confirmMessage)) {
-        handleSave(data);
+        await handleSave(data);
       }
     });
   };