feat: react-query 적용

package.json

@@ -65,6 +65,7 @@
     "react-otp-input-rc-17": "^2.4.1-minor",
     "react-pdf": "^5.7.2",
     "react-perfect-scrollbar": "^1.5.8",
+    "react-query": "^3.39.1",
     "react-quill": "^2.0.0-beta.4",
     "react-redux": "^7.2.6",
     "react-resizable": "^3.0.4",

src/index.js

@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom';
 // third party
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query/devtools';
+
 import { PersistGate } from 'redux-persist/integration/react';
 import { transitions, positions, Provider as AlertProvider, types } from 'react-alert';
 import AlertTemplate from 'react-alert-template-basic';
@@ -32,17 +35,22 @@ const options = {
   }
 };
 
+const queryClient = new QueryClient();
+
 ReactDOM.render(
   <Provider store={store}>
-    <PersistGate loading={null} persistor={persister}>
-      <ConfigProvider>
-        <BrowserRouter basename={BASE_PATH}>
-          <AlertProvider template={AlertTemplate} {...options}>
-            <App />
-          </AlertProvider>
-        </BrowserRouter>
-      </ConfigProvider>
-    </PersistGate>
+    <QueryClientProvider client={queryClient}>
+      <PersistGate loading={null} persistor={persister}>
+        <ConfigProvider>
+          <BrowserRouter basename={BASE_PATH}>
+            <AlertProvider template={AlertTemplate} {...options}>
+              <App />
+            </AlertProvider>
+          </BrowserRouter>
+        </ConfigProvider>
+      </PersistGate>
+      <ReactQueryDevtools initialIsOpen />
+    </QueryClientProvider>
   </Provider>,
   document.getElementById('root')
 );

src/views/biz/pboard/PublicBoard.jsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 
 // material-ui
 import { Button, Grid, Link } from '@mui/material';
@@ -22,6 +23,7 @@ import { removeAlert, saveAlert } from '../../../commons/XitCmm';
 
 const PublicBoard = () => {
   const { user } = useAuth();
+  const queryClient = useQueryClient();
   const [owner, setOwner] = useState();
   const [totalCount, setTotalCount] = useState(0);
   const [rowsState, setRowsState] = useState({
@@ -72,24 +74,24 @@ const PublicBoard = () => {
     { headerName: '조회수', headerAlign: 'center', field: 'inHit', align: 'right', width: 80 }
   ];
 
-  const search = useCallback(() => {
-    const params = {
-      page: rowsState.page,
-      size: rowsState.pageSize
-    };
-
-    findPublicBoards(params).then((response) => {
-      // console.log(response);
-      if (response && response.data) {
-        setTotalCount(response.count);
-        setRowsState((prevState) => ({ ...prevState, rows: response.data }));
-      }
-    });
-  }, [rowsState.page, rowsState.pageSize]);
-
-  useEffect(() => {
-    search();
-  }, [search]); // rowsState.page, rowsState.pageSize, rowsState.rows]);
+  const params = {
+    page: rowsState.page,
+    size: rowsState.pageSize
+  };
+
+  const search = async () => {
+    const res = await findPublicBoards(params);
+    if (res && res.data) {
+      setTotalCount(res.count);
+      setRowsState((prevState) => ({ ...prevState, rows: res.data }));
+    }
+  };
+  useQuery(['pboards', params.page, params.size], search);
+  // const { isLoading, data, isError } = useQuery(['pboards', params.page, params.size], search);
+
+  // useEffect(() => {
+  //   search();
+  // }, [search]); // rowsState.page, rowsState.pageSize, rowsState.rows]);
 
   const handleOnCellClick = (e) => {
     if (e?.field === 'inTitle') {
@@ -97,6 +99,12 @@ const PublicBoard = () => {
       setTitle('공지사항 상세');
       setSelectedRow(e?.row);
       setOwner(user.name === e?.row.inName);
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      // useMutation(modifyPublicBoardHitCount(e?.row?.inCode), {
+      //   onSuccess: () => {
+      //     queryClient.invalidateQueries('pboards');
+      //   }
+      // });
       modifyPublicBoardHitCount(e?.row?.inCode);
       setOpen(true);
     }
@@ -108,26 +116,16 @@ const PublicBoard = () => {
         setOpen(false);
 
         saveAlert(() =>
-          savePublicBoard(payload).then((res) => {
-            if (res?.success) {
-              search();
-            } else {
-              alert.show(`${res?.data.message}`);
-            }
-          })
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          useMutation(savePublicBoard(payload))
         );
         break;
       case 'DELETE':
         setOpen(false);
 
-        removeAlert(() =>
-          removePublicBoard(payload).then((res) => {
-            if (res?.success) {
-              search();
-            } else {
-              alert.show(`${res?.data.message}`);
-            }
-          })
+        removeAlert(
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          () => useMutation(removePublicBoard(payload))
         );
         break;
       default:

src/views/cmm/file-ctl/FileForm.jsx

@@ -26,7 +26,7 @@ const FileForm = ({
           <TextField
             fullWidth
             placeholder={labelName}
-            value={selectedFile}
+            value={selectedFile || ''}
             size="small"
             InputProps={{
               display: 'none',
@@ -39,7 +39,7 @@ const FileForm = ({
             onClick={handleFileDownload}
           />
         ) : (
-          <TextField fullWidth placeholder={labelName} value={selectedFile} size="small" />
+          <TextField fullWidth placeholder={labelName} value={selectedFile || ''} size="small" />
         )}
       </Grid>
       <Grid item xs={4.5}>