Merge pull request #52 from kkkkkSE/fix/add-auto-reply

[fix] 자동응답 추가, 수정 기능 개선 및 에러 대응
kkkkkSE · Aug 17, 2023 · 044215c · 044215c
2 parents 99d7ce5 + b32c596
commit 044215c
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 14 deletions.
diff --git 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
@@ -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<FormValues>();
 
+  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
@@ -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
@@ -43,6 +43,10 @@ export default function AutoReplyEditForm({
 
   const { control, handleSubmit } = useForm<FormValues>();
 
+  useEffect(() => {
+    store.reset();
+  }, []);
+
   useEffect(() => {
     if (done) {
       store.reset();

diff --git 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();