Refactor/282/에피그램작성 코드수정

src/apis/epigram/epigram.queries.ts

@@ -15,8 +15,10 @@ import {
   disLikeEpigram,
   getTodayEpigram,
   getEpigramComments,
+  createEpigram,
+  updateEpigram,
 } from './epigram.service';
-import { Epigram, EpigramDetail } from './epigram.type';
+import { CreateEpigramFormType, Epigram, EpigramDetail } from './epigram.type';
 
 export const useEpigramSearchInfiniteQuery = (params: Omit<SearchableQueryParams, 'cursor'>) => {
   return useInfiniteQuery({
@@ -146,3 +148,25 @@ export const useFeedCommentsInFiniteQuery = (
     getNextPageParam: (lastPage) => lastPage.nextCursor || undefined,
   });
 };
+
+export const useCreateEpigram = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: CreateEpigramFormType) => createEpigram(data),
+    onSuccess: (result) => {
+      queryClient.invalidateQueries({ queryKey: ['epigrams', result.id] });
+    },
+  });
+};
+
+export const useUpdateEpigram = (epigramId: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: CreateEpigramFormType) => updateEpigram(epigramId, data),
+    onSuccess: (result) => {
+      queryClient.setQueryData(['epigrams', epigramId], result);
+    },
+  });
+};

src/app/(after-login)/epigrams/[id]/edit/page.tsx

@@ -1,12 +1,10 @@
 'use client';
 
 import { use } from 'react';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useSession } from 'next-auth/react';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/navigation';
-import { useEpigram } from '@/apis/epigram/epigram.queries';
-import { updateEpigram } from '@/apis/epigram/epigram.service';
+import { useEpigram, useUpdateEpigram } from '@/apis/epigram/epigram.queries';
 import { CreateEpigramFormType } from '@/apis/epigram/epigram.type';
 import ErrorPage from '@/app/error';
 import Inner from '@/components/Inner';
@@ -23,20 +21,14 @@ export default function EditEpigramPage({ params }: EditEpigramPageProps) {
   const { id } = use(params);
   const { data: session } = useSession();
   const sessionUserId = session?.user?.id;
-  const queryClient = useQueryClient();
   const epigramId = Number(id);
 
   const { details } = useEpigram(epigramId);
   const data = details.data;
   const isLoading = details.isLoading;
   const isError = details.isError;
 
-  const { mutateAsync, isPending } = useMutation({
-    mutationFn: (data: CreateEpigramFormType) => updateEpigram(epigramId, data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['epigrams'] });
-    },
-  });
+  const { mutateAsync, isPending } = useUpdateEpigram(epigramId);
 
   const handleUpdate = async (formData: CreateEpigramFormType) => {
     try {

src/app/(after-login)/epigrams/create/page.tsx

@@ -1,22 +1,16 @@
 'use client';
 
-import { useMutation } from '@tanstack/react-query';
-import { useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/navigation';
-import { createEpigram } from '@/apis/epigram/epigram.service';
+import { useCreateEpigram } from '@/apis/epigram/epigram.queries';
 import { CreateEpigramFormType } from '@/apis/epigram/epigram.type';
 import Inner from '@/components/Inner';
 import { Section } from '@/components/Section';
 import EpigramForm from '../_components/EpigramForm';
 
 export default function Page() {
   const router = useRouter();
-  const { mutateAsync, isPending } = useMutation({
-    mutationFn: createEpigram,
-  });
-  const methods = useForm();
-  const { reset } = methods;
+  const { mutateAsync, isPending } = useCreateEpigram();
 
   return (
     <Inner className='p-6 lg:py-8'>
@@ -28,7 +22,6 @@ export default function Page() {
           try {
             const result = await mutateAsync(data);
             toast.success('에피그램이 작성되었습니다.');
-            reset();
             router.push(`/epigrams/${result.id}`);
           } catch (error) {
             console.error('에피그램 작성 실패:', error);