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

* style : 헤더 컴포넌트 완성

* style : sidebar(drawer) 완성

* feat : Drawer와 상태를 연결

* feat : 커스텀 테이블 생성

* refactor : 커스텀 테이블의 pagination을 refactoring함

* Refactor(custom): 테이블 관련 데이터 파일 분리

* 커밋 컨밴션을 위한 cz-commitizen 설정

* Docs: pR 문서 템플릿 작성

* Refactor: 테이블 컴포넌트를 다양한 데이터를 넣을 수 있도록 Row 부분을 리펙토링 하여 정의한이터에 따라 값이 유연하게 들어갈 수 있게 함(#4)

* Feat: 테이블 관련 필드를 field 파일에 모아둠 (#4)

* Refactor: boardList정의 + 사이드바 블럭 리펙터링

* Refactor: milleageHeader를 컴포넌트로 꺼내면서 로직을 포함하고 있는 함수들과 UI를 리펙터링함

* Feat: 마일리지 카테고리 리스트에 필요한 리스트들을 enum을 이용하여 정리

* Refactor: 마일리지 카테고리 게시판 리펙터링 완료 (#4)

* Feat: 마일리지 항목 게시판 enum 설정 (#4)

* Feat: 마일리지 항목 데이터 인터페이스 설정(#4)

* Feat: 마일리지 항목 관련 데이터 생성 함수(#4)

* Feat: 마일리지 항목 관련 테이블 헤더(#4)

* Feat: 마일리지 항목 row값 설정

* Feat: 마일리지 조회 게시판 enum 설정(#4)

* Feat: 마일리지 조회 데이터 인터페이스 설정(#4)

* Feat: 마일리지 조회 데이터 생성 함수(#4)

* Feat: 마일리지 조회 데이터 생성 함수(#4)

* Feat: 마일리지 조회 데이터 추가(#4)

* Feat: 마일리지 등록 enum 설계(#4)

* Feat: 마일리지 조회 데이터 인터페이스 + 데이터 생성 함수(#4)

* Feat: 마일리지 등록 테이블 헤더(#4)

* Feat: 마일리지 등록 더미데이터 입력(#4)

* Fix: semester을 number -\> string으로 타입 수정 , 테이블 데이터들이 모두 select 되지 않는  버그 수정(#4)

* Style: mediaQuery와 styled-component를 이용하여 테이블의 반응형 구축(#4)

* Feat: 신청자 관리 데이터 인터페이스(4)

* Feat: 신청자 관리 enum (#4)

* Feat: 신청자 관리 데이터 생성함수 (#4)

* Fix: 신청자 관리 카테고리를 제외 시킴(#4)

* Feat: 신청자 관리 헤더 내용 정리(#4)

* Feat: 신청자 관리 더미데이터(#4)

* Feat: 학생 관리 테이블 완성(#4)

* Feat: 사용자 관리 테이블 enum 설정(#4)

* Feat: 사용자 관리 데이터 인터페이스 설정(#4)

* Feat: 사용자 관리 데이터 생성함수(#4)

* Feat: 사용자 관리 테이블 studentName -\> name으로 필드 이름 변경

* Feat: 사용자관리 테이블 데이터생성함수(#4)

* Feat: 사용자 관리 테이블 완료(#4)

* Feat: 마일리지 선정 결과 enum 설정(#4)

* Feat: 마일리지 선정결과 인터페이스 + 데이터 생성함수(#4)

* Fix: 마일리지 선정 결과에서 register num을 삭제하였음(#4)

* Feat: 마일리지 선정결과 테이블 헤더 설정(#4)

* Feat: 마일리지 선정결과 완료(#4)

* Chore: 빌드 시 esLint를 무시할 수 있도록 next.config.js를 수정해주었음

* Feat: 마일리지 카테고리 모달관련 reducers를 만듬 (open , close) (#7)

* Feat: 마일리지 카테고리 관련 모달을 열고 닫는 액션 export(#7)

* Fix: 문법에 맞게 reducers return 값 수정(#7)

* Feat: mUI 모달 컴포넌트 생성(#7)

* Feat: root Reducer에 modal Reducer를 연결하고 모달의 useState를 selector와 dispatch로 대체함으로 써 모달을 컴포넌트에 연결 시킴

* Feat: 카테고리 관련 모달 이름 data파일에 정의(#7)

* Fix: 모달 관련 state를 재사용 하기로 결정하여 state의 갯수를 줄임(#7)

* Feat: icon Converter를 통해 어떤 타입의 모달이냐에 따라 다른 아이콘을 부여(#7)

* Feat: title Converter를 두어 모달의 제목을 모달의 타입에 따라 융통성있게 가져감(#7)

* Fix: 모달이 type을 인식하지 못하는 이슈로 인해 modalType을 reducer에서 관리(#7)

* Feat: formik , yup 설치 및 활용을 통한 모달 속 폼 제작(#7)

* Feat: 마일리지 카테고리 추가 기능 폼 구현 완료(#7)

* Style: mui템플릿 Theme기본 설정을 변경 시켜서 텍스트 필드의 스타일을 변경시킴(#7)

* Feat: 관리를 눌렀을 때 초기값을 전달하여 세팅하는 것 까지 연결 (#7)

* Feat: 마일리지 카테고리 모달 완성 + 컴포넌트 분리(#7)

* Refactor: 모달 제목 , 모달 열기 버튼 리펙터링(#7)

* Feat: 테이블에 타입 지정하고 타입을 활용해서 제목 변경(#7)

* Feat: 타입 컨버터를 통해 각 모달의 기능에 맞춰줌(#7)

* Feat: 카테고리 항목 모달 폼 제작(#7)

* Feat: 카테고리 항목 모달에 토글 추가(#7)

* Feat: 영어를 한글로 UI를 보여주는 함수 구현(#7)

* Feat: 마일리지 항목 모달 리펙터링(#7)

* Feat: 마일리지 카테고리,  마일리지 항목 모달 연결(#7)

* Feat: 게시판 데이터에 마일리지 글로벌 항목 추가(#12)

* Feat: 각각의 컴포넌트에 type을 지정해주어 각 컴포넌트에 맞는 테이블의 제목을 나타나게 한다.(#12)

* Feat: 마일리지 글로벌 항목 관련 테이블 생성(#12)

* Fix: 마일리지 항목 -\> 마일리지 학기별 항목으로 수정(#12)

* Feat: 자동완성 state연결(#15)

* Feat: 카테고리 filter 관련 Reducer 생성 (#15)

* Feat: 카테고리 필터링 완료(#15)

* Feat: 마일리지 글로벌 항목 리스트 상태를 리덕스로 관리(#15)

* Feat: 마일리지 학기별 항목 리스트도 리덕스로 관리 (#15)

* Feat: 학기 필터링 상태 Reducer에 추가(#15)

* Feat: 학기 필터링 드롭다운 컴포넌트(#15)

* Feat: 학기 필터링 적용 완료(#15)

* Feat: 보이기 필터링 드롭다운 컴포넌트 생성 , reducer 생성(#15)

* Feat: 보이기 필터링 연결(#15)

* Feat: 항목명 필터링 컴포넌트, 상태 생성(#15)

* Fix: 마일리지 학기별 항목의 보이기 값이 boolean임에 맞춰 데이터를 true/false로 변경(#15)

* Feat: 카테고리 CRUD API apitest 페이지에서 연결테스트(#16)

* Refactor: pages 폴더 내에서만 서버사이드 렌더링이 작동하기 때문에 header와 drawer를 main layout으로 리펙터링 한다(#15))

* Fix: 테이블 리스트 컴포넌트들을 페이지로 이동 시키기 이전에 현재 페이지 상태에 대한 상태를 reducer로 관리(#15)

* Fix: 컴포넌트 리턴 함수를 drawer컴포넌트에서 메인 페이지로 꺼내옴

* Refactor: 서버 사이드 렌더링을 위하여 board 컴포넌트를 페이지로 리펙터링(#15)

* Feat: 마일리지 카테고리 서버사이드 fetching API 연결(#15)

* Feat: 카테고리 추가 API 연결 완료(#15)

* Feat: 카테고리 수정 API 연결 (#15)

* Feat: 삭제 API를 여러개 동시에 하기 위해 선택 된 것을 삭제할 수 있도록 선택된 id들전역상태로 관리(#16)

* Feat: 선택된 번호들을 다른 페이지로 갔을 시 초기화 되도록 설정(#16)

* Feat: 카테고리 다중 삭제 API 연결 완료(#16)

* Feat: 글로벌 세부항목 가져오기 API 연결(#18)

* Refactor: 글로벌 카테고리 모달 버튼 리펙터링(#18)

* Feat: 메뉴바 state가redux persist로 유지되도록 함(#18)

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() {