[회비] 회비 납부 문서를 인터널 DB에 반영하는 회비 내역 동기화 기능 추가

src/api/dues/index.ts

@@ -57,3 +57,7 @@ export const postSendDues = ({ year, month, explanation }: SendDuesData) => {
 export const postSendDuesByDM = () => {
   return accessClient.post('/dues/send/slack/dues/dm');
 };
+
+export const postDuesSheetSync = () => {
+  return accessClient.post('/dues/sheet-sync');
+};

src/page/EditDues/components/AlertModal/index.tsx

@@ -9,32 +9,49 @@ interface AlertModalProps {
   onClose: () => void;
   handleSend: (explanation: string) => void;
   handleSendByDM: () => void;
-  type: 'notice' | 'dm' | undefined;
+  handleSheetSync: () => void;
+  type: 'notice' | 'dm' | 'sheet-sync' | undefined;
 }
 
 export default function AlertModal({
-  open, onClose, handleSend, handleSendByDM, type,
+  open, onClose, handleSend, handleSendByDM, handleSheetSync, type,
 }: AlertModalProps) {
   const [explanation, setExplanation] = useState('');
+
   const handleSubmitNotice = () => {
-    if (type === 'notice') {
-      handleSend(explanation);
-      return;
+    switch (type) {
+      case 'notice':
+        handleSend(explanation);
+        onClose();
+        break;
+      case 'dm':
+        handleSendByDM();
+        onClose();
+        break;
+      case 'sheet-sync':
+        handleSheetSync();
+        onClose();
+        break;
+      default:
+        break;
     }
-    handleSendByDM();
   };
   return (
     <Modal
       open={open}
       onClose={onClose}
     >
       <div css={S.modal}>
-        <h2>주의해주세요! 슬랙으로 메시지가 전송됩니다.</h2>
+        {type === 'sheet-sync' ? (
+          <h2>회비 납부 문서와 인터널 회비 내역이 동기화됩니다.</h2>
+        ) : (
+          <h2>주의해주세요! 슬랙으로 메시지가 전송됩니다.</h2>
+        )}
         {type === 'notice' && (
           <TextareaAutosize css={S.noticeInput} placeholder="추가 공지를 작성해주세요" value={explanation} onChange={(e) => setExplanation(e.target.value)} />
         )}
         <div>
-          <Button onClick={handleSubmitNotice}>전송</Button>
+          <Button onClick={handleSubmitNotice}>{type === 'sheet-sync' ? '동기화' : '전송'}</Button>
         </div>
       </div>
     </Modal>

src/page/EditDues/components/AlertModal/style.ts

@@ -5,7 +5,7 @@ export const modal = css`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 450px;
+  width: 550px;
   display: flex;
   flex-direction: column;
   align-items: center;

src/page/EditDues/index.tsx

@@ -12,7 +12,7 @@ import {
   ChangeEvent, Suspense, useEffect, useState,
 } from 'react';
 import {
-  useDeleteDues, useGetAllDues, usePostDues, usePostSendDues, usePostSendDuesByDM, usePutDues,
+  useDeleteDues, useGetAllDues, usePostDues, usePostDuesSheetSync, usePostSendDues, usePostSendDuesByDM, usePutDues,
 } from 'query/dues';
 import useBooleanState from 'util/hooks/useBooleanState.ts';
 import { STATUS_MAPPING } from 'util/constants/status';
@@ -37,7 +37,7 @@ interface SortAnchorEl {
   unpaidCount: null | HTMLElement;
 }
 
-type NoticeType = 'notice' | 'dm';
+type NoticeType = 'notice' | 'dm' | 'sheet-sync';
 
 function DefaultTable() {
   const param = useQueryParam('page');
@@ -88,6 +88,7 @@ function DefaultTable() {
   const deleteDuesMutation = useDeleteDues();
   const postSendDuesMutation = usePostSendDues();
   const postSendDuesByDMMutation = usePostSendDuesByDM();
+  const postDuesSheetSyncMutation = usePostDuesSheetSync();
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const searchName = e.target.value;
@@ -236,6 +237,10 @@ function DefaultTable() {
     postSendDuesByDMMutation.mutate();
   };
 
+  const handleDuesSheetSync = () => {
+    postDuesSheetSyncMutation.mutate();
+  };
+
   const handleOpenNoticeModal = (e: React.MouseEvent<HTMLButtonElement>) => {
     const { name } = e.target as HTMLButtonElement;
     setNoticeType(name as NoticeType);
@@ -251,6 +256,9 @@ function DefaultTable() {
         <div>
           {(myInfo.authority === 'ADMIN' || myInfo.authority === 'MANAGER') && (
             <>
+              <Button css={S.noticeButton} name="sheet-sync" onClick={(e) => handleOpenNoticeModal(e)}>
+                회비 내역 동기화
+              </Button>
               <Button css={S.noticeButton} name="notice" onClick={(e) => handleOpenNoticeModal(e)}>
                 회비 공지하기
               </Button>
@@ -265,6 +273,7 @@ function DefaultTable() {
               onClose={closeNoticeModal}
               handleSend={handleNoticeDues}
               handleSendByDM={handleSendDuesByDM}
+              handleSheetSync={handleDuesSheetSync}
               type={noticeType}
             />
           )}

src/query/dues.ts

@@ -1,7 +1,7 @@
-import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { QueryClient, useMutation, useSuspenseQuery } from '@tanstack/react-query';
 import {
   DeleteDuesProps,
-  DuesOptions, NewDuesData, deleteDues, getAllDues, postDues, postSendDues, postSendDuesByDM, putDues,
+  DuesOptions, NewDuesData, deleteDues, getAllDues, postDues, postDuesSheetSync, postSendDues, postSendDuesByDM, putDues,
 } from 'api/dues';
 import { DuesInfo } from 'model/dues/allDues';
 import { useSnackBar } from 'ts/useSnackBar';
@@ -73,3 +73,20 @@ export const usePostSendDuesByDM = () => {
   });
   return postSendDuesByDMMutation;
 };
+
+export const usePostDuesSheetSync = () => {
+  const openSnackBar = useSnackBar();
+  const queryClient = new QueryClient();
+
+  return useMutation({
+    mutationKey: ['postDuesSheetSync'],
+    mutationFn: () => postDuesSheetSync(),
+    onError: (error) => openSnackBar({ type: 'error', message: error.message }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['dues'],
+      });
+      openSnackBar({ type: 'success', message: '회비 시트 동기화를 완료했습니다.' });
+    },
+  });
+};