diff --git a/src/components/auto-reply-company/AutoReplyAddForm.test.tsx b/src/components/auto-reply-company/AutoReplyAddForm.test.tsx index 3d80f9a..fe49383 100644 --- a/src/components/auto-reply-company/AutoReplyAddForm.test.tsx +++ b/src/components/auto-reply-company/AutoReplyAddForm.test.tsx @@ -8,6 +8,7 @@ const context = describe; const store = { addAutoReply: jest.fn(), + reset: jest.fn(), }; jest.mock('../../hooks/useAutoReplyFormStore', () => () => [{}, store]); diff --git a/src/components/auto-reply-company/AutoReplyAddForm.tsx b/src/components/auto-reply-company/AutoReplyAddForm.tsx index 675aa7f..1f21d19 100644 --- a/src/components/auto-reply-company/AutoReplyAddForm.tsx +++ b/src/components/auto-reply-company/AutoReplyAddForm.tsx @@ -4,8 +4,11 @@ import { useNavigate } from 'react-router-dom'; import { Controller, useForm } from 'react-hook-form'; +import { useQueryClient } from '@tanstack/react-query'; + import useAutoReplyFormStore from '../../hooks/useAutoReplyFormStore'; +import { QUERY_KEY } from '../../constants/reactQuery'; import { STATIC_ROUTES } from '../../constants/routes'; import TextArea from '../ui/TextArea'; @@ -18,6 +21,8 @@ const MAX_LENGTH = { }; export default function AutoReplyAddForm() { + const queryClient = useQueryClient(); + const navigate = useNavigate(); const [{ done, errorMessage }, store] = useAutoReplyFormStore(); @@ -31,10 +36,16 @@ export default function AutoReplyAddForm() { const { control, handleSubmit } = useForm(); + useEffect(() => { + store.reset(); + }, []); + useEffect(() => { if (done) { store.reset(); + queryClient.invalidateQueries(QUERY_KEY.AUTO_REPLY_ADMIN_LIST); + navigate(STATIC_ROUTES.AUTO_REPLIES); } }, [done]); diff --git a/src/components/auto-reply-company/AutoReplyEditForm.test.tsx b/src/components/auto-reply-company/AutoReplyEditForm.test.tsx index 2870b67..2407bbf 100644 --- a/src/components/auto-reply-company/AutoReplyEditForm.test.tsx +++ b/src/components/auto-reply-company/AutoReplyEditForm.test.tsx @@ -10,6 +10,7 @@ const context = describe; const store = { modifyAutoReply: jest.fn(), + reset: jest.fn(), }; jest.mock('../../hooks/useAutoReplyFormStore', () => () => [{}, store]); diff --git a/src/components/auto-reply-company/AutoReplyEditForm.tsx b/src/components/auto-reply-company/AutoReplyEditForm.tsx index b1ba069..1c94320 100644 --- a/src/components/auto-reply-company/AutoReplyEditForm.tsx +++ b/src/components/auto-reply-company/AutoReplyEditForm.tsx @@ -43,6 +43,10 @@ export default function AutoReplyEditForm({ const { control, handleSubmit } = useForm(); + useEffect(() => { + store.reset(); + }, []); + useEffect(() => { if (done) { store.reset(); diff --git a/src/stores/AutoReplyFormStore.ts b/src/stores/AutoReplyFormStore.ts index 9819166..446ed30 100644 --- a/src/stores/AutoReplyFormStore.ts +++ b/src/stores/AutoReplyFormStore.ts @@ -40,20 +40,18 @@ export default class AutoReplyFormStore { answer: string, ) { try { - const trimQuestion = question.trim(); - const trimAnswer = answer.trim(); - - if (!trimQuestion) { + // react-hook-form data value 초기값 undefined + if (!question || !question.trim()) { throw Error('질문을 작성해주세요'); } - if (!trimAnswer) { + if (!answer || !answer.trim()) { throw Error('답변을 작성해주세요'); } await apiService.createAutoReply({ - question: trimQuestion, - answer: trimAnswer, + question, + answer, }); this.setDone(); @@ -79,21 +77,19 @@ export default class AutoReplyFormStore { answer: string, ) { try { - const trimQuestion = question.trim(); - const trimAnswer = answer.trim(); - - if (!trimQuestion) { + // react-hook-form data value 초기값 undefined + if (!question || !question.trim()) { throw Error('질문을 작성해주세요'); } - if (!trimAnswer) { + if (!answer || !answer.trim()) { throw Error('답변을 작성해주세요'); } await apiService.modifyAutoReply({ id, - question: trimQuestion, - answer: trimAnswer, + question, + answer, }); this.setDone();