QNA 사용자 문의 수정 api 연결

src/components/cstmrService/inquiry/InquiryWrite.js

@@ -2,7 +2,6 @@ import '../../../assets/css/custom.css';
 import '@styles/react/libs/flatpickr/flatpickr.scss';
 import '@styles/react/libs/tables/react-dataTable-component.scss';
 import { useState, useEffect, useRef } from 'react';
-import { useParams, Link, useHistory } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import {
   Button,
@@ -44,7 +43,7 @@ function InquiryWrite({
   return (
     <Modal
       isOpen={isInquiryModalOpen}
-      toggle={handlerInquiryModal}
+      toggle={() => handlerInquiryModal()}
       className='modal-dialog-centered modal-xl faq-modal'
     >
       <ModalHeader toggle={handlerInquiryModal}>1:1 문의하기</ModalHeader>
@@ -179,7 +178,7 @@ function InquiryWrite({
                     id='inputFile'
                     name=''
                     className='custom-file-input pal'
-                    onChange={() => handleFileChange()}
+                    onChange={e => handleFileChange(e)}
                     ref={fileInputRef}
                   />
                   {/* 현재는 text만 바뀌는상태! input 초기화 작업해주세용 */}
@@ -209,23 +208,23 @@ function InquiryWrite({
         </ModalBody>
         <ModalFooter>
           <div className='pal-form-btn'>
-            <Button
-              color='danger'
-              onClick={() => handlerDeleteConfirmInquiry()}
-            >
+            <Button color='danger' onClick={handlerDeleteConfirmInquiry}>
               삭제
             </Button>
             <Button color='secondary' onClick={() => handlerInquiryModal()}>
               취소
             </Button>
             {detail.createDt ? (
-              <Button color='primary' onClick={() => {}}>
+              <Button
+                color='primary'
+                onClick={() => handlerSubmitInquiryForm('edit')}
+              >
                 수정
               </Button>
             ) : (
               <Button
                 color='primary'
-                onClick={() => handlerSubmitInquiryForm()}
+                onClick={() => handlerSubmitInquiryForm('post')}
               >
                 저장
               </Button>

src/containers/cstmrService/inquiry/UserInquiryContainer.js

@@ -147,8 +147,8 @@ export default function UserInquiryContainer({ memberName }) {
   );
 
   // 문의 등록 event handler
-  const handlerSubmitInquiryForm = () => {
-    const { category, title, content, contact } = inquiryForm;
+  const handlerSubmitInquiryForm = type => {
+    const { category, title, content, contact, qnaSno } = inquiryForm;
 
     if (!contact) {
       setValidationModal({
@@ -192,13 +192,26 @@ export default function UserInquiryContainer({ memberName }) {
       return;
     }
 
-    let form = new FormData();
-    form.append('category', category);
-    form.append('contact', contact);
-    form.append('title', title);
-    form.append('content', content);
+    if (type === 'post') {
+      let form = new FormData();
+      form.append('category', category);
+      form.append('contact', contact);
+      form.append('title', title);
+      form.append('content', content);
+
+      dispatch(Actions.USER_INQUIRY.request(form));
+    } else if (type === 'edit') {
+      dispatch(
+        Actions.USER_INQUIRY_EDIT.request({
+          qnaSno,
+          category,
+          contact,
+          title,
+          content
+        })
+      );
+    }
 
-    dispatch(Actions.USER_INQUIRY.request(form));
     setIsInquiryModalOpen(false);
   };
 
@@ -227,13 +240,7 @@ export default function UserInquiryContainer({ memberName }) {
         <AppCollapse data={handlerQnaList()} accordion type='margin' />
       </div>
       <div className='inquiry-btn'>
-        <Button
-          color='primary'
-          size='lg'
-          onClick={() => {
-            handlerInquiryModal();
-          }}
-        >
+        <Button color='primary' size='lg' onClick={() => handlerInquiryModal()}>
           1:1 문의하기
         </Button>
       </div>

src/modules/cstmrService/inquiry/action/index.ts

@@ -9,7 +9,8 @@ import {
   IQnaAdminFileDown,
   IQnaUserList,
   IQnaUserSearch,
-  IQnaUserInquiry
+  IQnaUserInquiry,
+  IQnaUserInquiryEdit
 } from '../model';
 
 // 관리자 목록 조회
@@ -50,6 +51,11 @@ const USER_INQUIRY_REQUEST = 'cstmrService/qna/USER_INQUIRY_REQUEST';
 const USER_INQUIRY_SUCCESS = 'cstmrService/qna/USER_INQUIRY_SUCCESS';
 const USER_INQUIRY_FAILURE = 'cstmrService/qna/USER_INQUIRY_FAILURE';
 
+// 사용자 문의 수정
+const USER_INQUIRY_EDIT_REQUEST = 'cstmrService/qna/USER_INQUIRY_EDIT_REQUEST';
+const USER_INQUIRY_EDIT_SUCCESS = 'cstmrService/qna/USER_INQUIRY_EDIT_SUCCESS';
+const USER_INQUIRY_EDIT_FAILURE = 'cstmrService/qna/USER_INQUIRY_EDIT_FAILURE';
+
 export const ADMIN_LIST = createAsyncAction(
   ADMIN_LIST_REQUEST,
   ADMIN_LIST_SUCCESS,
@@ -102,7 +108,13 @@ export const USER_INQUIRY = createAsyncAction(
   USER_INQUIRY_REQUEST,
   USER_INQUIRY_SUCCESS,
   USER_INQUIRY_FAILURE
-)<IQnaUserInquiry, { count: number; data: boolean }, AxiosError>();
+)<IQnaUserInquiry, {}, AxiosError>();
+
+export const USER_INQUIRY_EDIT = createAsyncAction(
+  USER_INQUIRY_EDIT_REQUEST,
+  USER_INQUIRY_EDIT_SUCCESS,
+  USER_INQUIRY_EDIT_FAILURE
+)<IQnaUserInquiryEdit, {}, AxiosError>();
 
 const actions = {
   ADMIN_LIST,
@@ -112,7 +124,8 @@ const actions = {
   ADMIN_FILE_DOWN,
   ADMIN_DELETE,
   USER_LIST,
-  USER_INQUIRY
+  USER_INQUIRY,
+  USER_INQUIRY_EDIT
 };
 
 export type QnaAction = ActionType<typeof actions>;

src/modules/cstmrService/inquiry/apis/index.ts

@@ -1,6 +1,6 @@
 import axios from '../../../utils/customAxiosUtil';
 import qs from 'qs';
-import { IQnaUserInquiry, IQnaUserSearch } from '../model';
+import { IQnaUserInquiry, IQnaUserInquiryEdit, IQnaUserSearch } from '../model';
 
 export const qnaAPI = {
   adminList: async (data: {
@@ -68,5 +68,19 @@ export const qnaAPI = {
         'Content-Type': 'multipart/form-data'
       }
     });
+  },
+  userInquiryEdit: async (data: IQnaUserInquiryEdit) => {
+    const params = {};
+    Object.keys(data).forEach(i => {
+      if (data[i]) {
+        params[`${i}`] = data[i];
+      }
+    });
+    const queryString = qs.stringify(params, {
+      addQueryPrefix: true,
+      arrayFormat: 'repeat'
+    });
+
+    return await axios.put(`api/cns/qna${queryString}`);
   }
 };

src/modules/cstmrService/inquiry/model/index.ts

@@ -96,6 +96,10 @@ export interface IQnaUserInquiry {
   content: string;
 }
 
+export interface IQnaUserInquiryEdit extends IQnaUserInquiry {
+  qnaSno: number;
+}
+
 export const initalState = {
   adminList: [],
   adminDetail: {

src/modules/cstmrService/inquiry/sagas/index.ts

@@ -224,7 +224,46 @@ function* userInquirySaga(
     );
     // yield put(Actions.USER_INQUIRY.success(data));
   } catch (error) {
-    yield put(Actions.ADMIN_ANSWER.failure(error));
+    yield put(Actions.USER_INQUIRY.failure(error));
+  }
+}
+
+function* userInquiryEditSaga(
+  action: ActionType<typeof Actions.USER_INQUIRY_EDIT.request>
+) {
+  try {
+    const payload = action.payload;
+    const res = yield call(Apis.qnaAPI.userInquiryEdit, payload);
+    const { errorCode, data } = res;
+
+    if (errorCode) {
+      // 오류메시지 호출
+      yield put(
+        MessageActions.IS_ERROR({
+          errorCode: errorCode,
+          errorMessage: '처리중 오류가 발생하였습니다',
+          isHistoryBack: false,
+          isRefresh: false
+        })
+      );
+    }
+
+    if (data) {
+      yield put(
+        MessageActions.IS_MESSAGE({
+          messageCode: SAVE_MESSAGE.code,
+          message: SAVE_MESSAGE.message,
+          isHistoryBack: false,
+          isRefresh: false
+        })
+      );
+    }
+    yield put(
+      Actions.USER_LIST.request({ category: '', searchType: '', word: '' })
+    );
+    // yield put(Actions.USER_INQUIRY_EDIT.success(data));
+  } catch (error) {
+    yield put(Actions.USER_INQUIRY_EDIT.failure(error));
   }
 }
 
@@ -236,4 +275,5 @@ export function* qnaSaga() {
   yield takeEvery(Actions.ADMIN_DELETE.request, adminDeleteSaga);
   yield takeEvery(Actions.USER_LIST.request, userListSaga);
   yield takeEvery(Actions.USER_INQUIRY.request, userInquirySaga);
+  yield takeEvery(Actions.USER_INQUIRY_EDIT.request, userInquiryEditSaga);
 }