diff --git a/src/apis/epigram/epigram.queries.ts b/src/apis/epigram/epigram.queries.ts index 2cf115d..7e2ba77 100644 --- a/src/apis/epigram/epigram.queries.ts +++ b/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) => { 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); + }, + }); +}; diff --git a/src/app/(after-login)/epigrams/[id]/edit/page.tsx b/src/app/(after-login)/epigrams/[id]/edit/page.tsx index 67b742b..418ef6a 100644 --- a/src/app/(after-login)/epigrams/[id]/edit/page.tsx +++ b/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,7 +21,6 @@ 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); @@ -31,12 +28,7 @@ export default function EditEpigramPage({ params }: EditEpigramPageProps) { 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 { diff --git a/src/app/(after-login)/epigrams/create/page.tsx b/src/app/(after-login)/epigrams/create/page.tsx index 967e2cf..91d22f5 100644 --- a/src/app/(after-login)/epigrams/create/page.tsx +++ b/src/app/(after-login)/epigrams/create/page.tsx @@ -1,10 +1,8 @@ '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'; @@ -12,11 +10,7 @@ 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 ( @@ -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);