Feature: 글로벌 세부항목 API을 연결 함으로써 데이터베이스에 글로벌 세부항목 CRUD을 할 수 있다.

src/components/common/modal/SWModal.tsx

@@ -101,6 +101,9 @@ const modalForm = (modalType, beforeData) => {
       return <ItemForm beforeData={beforeData} />;
     case EDITGLOBALITEM:
       return <ItemForm beforeData={beforeData} />;
+    default:
+      return <div>default</div>;
+
   }
 };
 

src/components/modalForm/ItemForm.tsx

@@ -28,9 +28,14 @@ import {
   ISEVALUATE_PORTFOLIO,
   ISEVALUATE_FUSION,
   MAX_MAILEAGE,
+  NUM,
 } from 'src/assets/data/fields';
 import { useSelector } from 'react-redux';
-import { EDITITEM } from 'src/assets/data/modal/modals';
+import { ADDGLOBALITEM, EDITGLOBALITEM, EDITITEM } from 'src/assets/data/modal/modals';
+import CancelButton from '../common/modal/CancelButton';
+import SubmitButton from '../common/modal/SubmitButton';
+import axiosInstance from 'src/utils/axios';
+import { useRouter } from 'next/router';
 
 const StyleFieldBox = styled(Box)({
   display: 'flex',
@@ -61,30 +66,97 @@ const StyleFieldForm = styled(Form)({
 export default function ItemForm({ beforeData }) {
   const modalType = useSelector((state) => state.modal.modalType);
   console.log(modalType, beforeData);
+
+  const router = useRouter();
+
+  const handleSubmit = (values, { setSubmitting, resetForm }) => {
+    // 글로벌 세부항목 추가
+    // 1) newData 생성
+    // 2) axios post
+    // 3) alert
+    // 4) reload
+
+    const stuTypeConverter = ({
+      [ISEVALUATE_FUSION]: f,
+      [ISEVALUATE_CSEE]: c,
+    }: {
+      [ISEVALUATE_FUSION]: boolean;
+      [ISEVALUATE_CSEE]: boolean;
+    }) => {
+      if (f && c) {
+        return 'CF';
+      } else if (f) {
+        return 'F';
+      } else if (c) {
+        return 'C';
+      }
+    };
+    const newData = {
+      categoryId: 1,
+      itemName: values[ITEM],
+      // [SEMESTER]: values[SEMESTER],
+      // [MILEAGE]: values[MILEAGE],
+      // [MAX_MAILEAGE]: values[MAX_MAILEAGE],
+      [DESCRIPTION1]: values[DESCRIPTION1],
+      [DESCRIPTION2]: values[DESCRIPTION2],
+      stuType: stuTypeConverter(values),
+      flags: {
+        [ISVISIBLE]: values[ISVISIBLE],
+        isStudentVisible: values[ISVISIBLE_STUDENT],
+        isStudentEditable: values[ISINPUT_STUDENT],
+        isMultiple: values[ISDUPLICATE_RECORD],
+        isPortfolio: values[ISEVALUATE_PORTFOLIO],
+      },
+    };
+
+    switch (modalType) {
+      case ADDGLOBALITEM:
+        axiosInstance
+          .post('/api/mileage/items', newData)
+          .then((res) => {
+            alert('글로벌 항목이 추가되었습니다.');
+            router.reload();
+          })
+          .catch((err) => {
+            console.log(err);
+            alert('글로벌 항목 추가에 실패했습니다.');
+          });
+        break;
+
+      case EDITGLOBALITEM:
+        axiosInstance
+          .patch(`/api/mileage/items/${beforeData[NUM]}`, newData)
+          .then((res) => {
+            alert(`글로벌 항목 ${beforeData[NUM]}번이 수정되었습니다.`);
+            router.reload();
+          })
+          .catch((err) => alert('글로벌 항목 수정에 실패했습니다.'));
+        break;
+    }
+  };
   return (
     <Formik
       initialValues={{
-        [CATEGORY]: modalType === EDITITEM ? beforeData?.[CATEGORY] : '',
-        [SEMESTER]: modalType === EDITITEM ? beforeData?.[SEMESTER] : '',
-        [ITEM]: modalType === EDITITEM ? beforeData?.[ITEM] : '',
-        [MILEAGE]: modalType === EDITITEM ? beforeData?.[MILEAGE] : 0,
-        [MAX_MAILEAGE]: modalType === EDITITEM ? beforeData?.[MAX_MAILEAGE] : 0,
-        [DESCRIPTION1]: modalType === EDITITEM ? beforeData?.[DESCRIPTION1] : '',
-        [DESCRIPTION2]: modalType === EDITITEM ? beforeData?.[DESCRIPTION2] : '',
-        [FILE_DESCRIPTION]: modalType === EDITITEM ? beforeData?.[FILE_DESCRIPTION] : '',
-        [ISVISIBLE]: modalType === EDITITEM ? beforeData?.[ISVISIBLE] : false,
-        [ISVISIBLE_STUDENT]: modalType === EDITITEM ? beforeData?.[ISVISIBLE_STUDENT] : false,
-        [ISINPUT_STUDENT]: modalType === EDITITEM ? beforeData?.[ISINPUT_STUDENT] : false,
-        [ISDUPLICATE_RECORD]: modalType === EDITITEM ? beforeData?.[ISDUPLICATE_RECORD] : false,
-        [ISEVALUATE_CSEE]: modalType === EDITITEM ? beforeData?.[ISEVALUATE_CSEE] : false,
-        [ISEVALUATE_PORTFOLIO]: modalType === EDITITEM ? beforeData?.[ISEVALUATE_PORTFOLIO] : false,
-        [ISEVALUATE_FUSION]: modalType === EDITITEM ? beforeData?.[ISEVALUATE_FUSION] : false,
+        [CATEGORY]: modalType === EDITGLOBALITEM ? beforeData?.[CATEGORY] : '',
+        [SEMESTER]: modalType === EDITGLOBALITEM ? beforeData?.[SEMESTER] : '',
+        [ITEM]: modalType === EDITGLOBALITEM ? beforeData?.[ITEM] : '',
+        [MILEAGE]: modalType === EDITGLOBALITEM ? beforeData?.[MILEAGE] : 0,
+        [MAX_MAILEAGE]: modalType === EDITGLOBALITEM ? beforeData?.[MAX_MAILEAGE] : 0,
+        [DESCRIPTION1]: modalType === EDITGLOBALITEM ? beforeData?.[DESCRIPTION1] : '',
+        [DESCRIPTION2]: modalType === EDITGLOBALITEM ? beforeData?.[DESCRIPTION2] : '',
+        [FILE_DESCRIPTION]: modalType === EDITGLOBALITEM ? beforeData?.[FILE_DESCRIPTION] : '',
+        [ISVISIBLE]: modalType === EDITGLOBALITEM ? beforeData?.[ISVISIBLE] : false,
+        [ISVISIBLE_STUDENT]: modalType === EDITGLOBALITEM ? beforeData?.[ISVISIBLE_STUDENT] : false,
+        [ISINPUT_STUDENT]: modalType === EDITGLOBALITEM ? beforeData?.[ISINPUT_STUDENT] : false,
+        [ISDUPLICATE_RECORD]:
+          modalType === EDITGLOBALITEM ? beforeData?.[ISDUPLICATE_RECORD] : false,
+        [ISEVALUATE_CSEE]: modalType === EDITGLOBALITEM ? beforeData?.[ISEVALUATE_CSEE] : false,
+        [ISEVALUATE_PORTFOLIO]:
+          modalType === EDITGLOBALITEM ? beforeData?.[ISEVALUATE_PORTFOLIO] : false,
+        [ISEVALUATE_FUSION]: modalType === EDITGLOBALITEM ? beforeData?.[ISEVALUATE_FUSION] : false,
       }}
       // validationSchema={CategorySchema}
-      onSubmit={(values, { setSubmitting, resetForm }) => {
-        console.log(values);
-        resetForm();
-      }}
+      onSubmit={handleSubmit}
     >
       {({ isSubmitting, errors, touched }) => (
         <StyleFieldForm>
@@ -156,12 +228,8 @@ export default function ItemForm({ beforeData }) {
           </Box>
 
           <ButtonFlexBox>
-            <Button type="submit" variant="outlined" color="primary">
-              취소
-            </Button>
-            <Button type="submit" variant="contained" color="primary">
-              제출
-            </Button>
+            <CancelButton modalType={modalType} />
+            <SubmitButton />
           </ButtonFlexBox>
         </StyleFieldForm>
       )}

src/pages/_app.js

@@ -35,7 +35,7 @@ import { Provider as ReduxProvider } from 'react-redux';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 // redux
-import { store } from '../redux/store';
+import { persistor, store } from '../redux/store';
 // utils
 import createEmotionCache from '../utils/createEmotionCache';
 // theme
@@ -54,6 +54,10 @@ import { ThemeSettings, SettingsProvider } from '../components/settings';
 
 import { AuthProvider } from '../auth/JwtContext';
 import MainLayout from '../layouts/main/MainLayout';
+
+import { PersistGate } from 'redux-persist/integration/react';
+
+
 // import { AuthProvider } from '../auth/Auth0Context';
 // import { AuthProvider } from '../auth/FirebaseContext';
 // import { AuthProvider } from '../auth/AwsCognitoContext';
@@ -81,24 +85,28 @@ export default function MyApp(props) {
 
       <AuthProvider>
         <ReduxProvider store={store}>
-          <LocalizationProvider dateAdapter={AdapterDateFns}>
-            <SettingsProvider>
-              <MotionLazyContainer>
-                <ThemeProvider>
-                  <ThemeSettings>
-                    <ThemeLocalization>
-                      <SnackbarProvider>
-                        <StyledChart />
-                        <ProgressBar />
-                        {/* 메인 레이아웃 */}
-                        <MainLayout>{getLayout(<Component {...pageProps} />)}</MainLayout>
-                      </SnackbarProvider>
-                    </ThemeLocalization>
-                  </ThemeSettings>
-                </ThemeProvider>
-              </MotionLazyContainer>
-            </SettingsProvider>
-          </LocalizationProvider>
+
+          <PersistGate persistor={persistor}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <SettingsProvider>
+                <MotionLazyContainer>
+                  <ThemeProvider>
+                    <ThemeSettings>
+                      <ThemeLocalization>
+                        <SnackbarProvider>
+                          <StyledChart />
+                          <ProgressBar />
+                          {/* 메인 레이아웃 */}
+                          <MainLayout>{getLayout(<Component {...pageProps} />)}</MainLayout>
+                        </SnackbarProvider>
+                      </ThemeLocalization>
+                    </ThemeSettings>
+                  </ThemeProvider>
+                </MotionLazyContainer>
+              </SettingsProvider>
+            </LocalizationProvider>
+          </PersistGate>
+
         </ReduxProvider>
       </AuthProvider>
     </CacheProvider>

src/pages/index.js

@@ -22,8 +22,6 @@ import { ComponentReturn } from 'src/components/common/Table/TableComponents';
 import { useSelector } from 'react-redux';
 // ----------------------------------------------------------------------
 
-HomePage.getLayout = (page) => <MainLayout> {page} </MainLayout>;
-
 // ----------------------------------------------------------------------
 
 export default function HomePage() {