Fix: edit때 사용되는 기존 데이터를 전달하는 beforeData를 전역적으로 관리하여 기존의 전달되지 않던 오류 수정(#…

…29)
HGU-WALAB · Sep 6, 2023 · 9248473 · 9248473
1 parent 6cb7006
commit 9248473
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 102 deletions.
diff --git a/src/components/common/CustomTable.tsx b/src/components/common/CustomTable.tsx
@@ -316,7 +316,6 @@ export default function EnhancedTable({ originalRows, headCells, type }) {
    * @field 필터링을 거치고 보여주는 값들 (rows)
    */
   const [rows, setRows] = React.useState(originalRows);
-  console.log('debug', rows, originalRows);
 
   /**
    * @brief 필터링 요소

diff --git a/src/components/common/modal/ModalIconButton.tsx b/src/components/common/modal/ModalIconButton.tsx
@@ -2,11 +2,16 @@ import { IconButton } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { dispatch } from 'src/redux/store';
-import { openModal } from 'src/redux/slices/modal';
+import { openModal, setBeforeData } from 'src/redux/slices/modal';
+import { useDispatch } from 'react-redux';
 
-export default function ModalIconButton({ type }) {
-  const handleOpen = () => dispatch(openModal(type));
+export default function ModalIconButton({ type, beforeData }) {
+  const dispatch = useDispatch();
+
+  const handleOpen = () => {
+    dispatch(openModal(type));
+    dispatch(setBeforeData(beforeData));
+  };
 
   const IconConverter = (type) => {
     const slicedType = type?.slice(0, 3);

diff --git a/src/components/common/modal/SWModal.tsx b/src/components/common/modal/SWModal.tsx
@@ -78,7 +78,7 @@ import { styled } from '@mui/styles';
 import CategoryForm from 'src/components/modalForm/CategoryForm';
 import ModalIconButton from './ModalIconButton';
 import ModalTitle from './ModalTitle';
-import { values } from 'lodash';
+import { before, values } from 'lodash';
 import ItemForm from 'src/components/modalForm/GlobalItemForm';
 import GlobalItemForm from 'src/components/modalForm/GlobalItemForm';
 import SemesterItemForm from 'src/components/modalForm/SemesterItemForm';
@@ -112,25 +112,25 @@ const style = {
 const modalForm = (modalType, beforeData) => {
   switch (modalType) {
     case ADDCATEGORY:
-      return <CategoryForm beforeData={beforeData} />;
+      return <CategoryForm />;
     case EDITCATEGORY:
-      return <CategoryForm beforeData={beforeData} />;
+      return <CategoryForm />;
     case ADDITEM:
-      return <SemesterItemForm beforeData={beforeData} />;
+      return <SemesterItemForm />;
     case EDITITEM:
-      return <SemesterItemForm beforeData={beforeData} />;
+      return <SemesterItemForm />;
     case ADDGLOBALITEM:
-      return <GlobalItemForm beforeData={beforeData} />;
+      return <GlobalItemForm />;
     case EDITGLOBALITEM:
-      return <GlobalItemForm beforeData={beforeData} />;
+      return <GlobalItemForm />;
     case ADDSTUDENT:
-      return <StudentForm beforeData={beforeData} />;
+      return <StudentForm />;
     case EDITSTUDENT:
-      return <StudentForm beforeData={beforeData} />;
+      return <StudentForm />;
     case ADDMILEAGEREGISTER:
-      return <MileageRegisterForm beforeData={beforeData} />;
+      return <MileageRegisterForm />;
     case EDITMILEAGEREGISTER:
-      return <MileageRegisterForm beforeData={beforeData} />;
+      return <MileageRegisterForm />;
 
     default:
       return <div>default</div>;
@@ -209,8 +209,6 @@ export const engToKor = (eng) => {
 };
 
 export default function SWModal({ type, beforeData }) {
-  console.log('debug', beforeData);
-
   const dispatch = useDispatch();
   const open = useSelector((state) => state.modal.isOpen);
   const modalType = useSelector((state) => state.modal.modalType);
@@ -219,7 +217,7 @@ export default function SWModal({ type, beforeData }) {
 
   return (
     <div>
-      <ModalIconButton type={type} />
+      <ModalIconButton beforeData={beforeData} type={type} />
       <Modal
         open={open}
         onClose={handleClose}

diff --git a/src/components/modalForm/CategoryForm.tsx b/src/components/modalForm/CategoryForm.tsx
@@ -13,7 +13,9 @@ import SubmitButton from '../common/modal/SubmitButton';
 import axiosInstance from 'src/utils/axios';
 import { useRouter } from 'next/router';
 
-export default function CategoryForm({ beforeData }) {
+export default function CategoryForm() {
+  const beforeData = useSelector((state) => state.modal.beforeData);
+
   const modalType = useSelector((state) => state.modal.modalType);
   const router = useRouter();
 

diff --git a/src/components/modalForm/GlobalItemForm.tsx b/src/components/modalForm/GlobalItemForm.tsx
@@ -19,7 +19,6 @@ import {
   MILEAGE,
   DESCRIPTION1,
   DESCRIPTION2,
-  FILE_DESCRIPTION,
   ISVISIBLE,
   ISVISIBLE_STUDENT,
   ISINPUT_STUDENT,
@@ -28,7 +27,7 @@ import {
   ISEVALUATE_PORTFOLIO,
   ISEVALUATE_FUSION,
   MAX_MAILEAGE,
-  NUM,
+  ID,
 } from 'src/assets/data/fields';
 import { useSelector } from 'react-redux';
 import { ADDGLOBALITEM, EDITGLOBALITEM, EDITITEM } from 'src/assets/data/modal/modals';
@@ -63,10 +62,12 @@ const StyleFieldForm = styled(Form)({
   gap: '20px',
 });
 
-export default function GlobalItemForm({ beforeData }) {
+export default function GlobalItemForm() {
   const modalType = useSelector((state) => state.modal.modalType);
-  console.log(modalType, beforeData);
+  // console.log('dbug', modalType, beforeData);
 
+  const beforeData = useSelector((state) => state.modal.beforeData);
+  console.log('d', beforeData);
   const router = useRouter();
 
   const handleSubmit = (values, { setSubmitting, resetForm }) => {
@@ -92,7 +93,7 @@ export default function GlobalItemForm({ beforeData }) {
       }
     };
     const newData = {
-      categoryId: 1,
+      categoryId: 106,
       itemName: values[ITEM],
       [DESCRIPTION1]: values[DESCRIPTION1],
       [DESCRIPTION2]: values[DESCRIPTION2],
@@ -106,6 +107,8 @@ export default function GlobalItemForm({ beforeData }) {
       },
     };
 
+    console.log('!', newData);
+
     switch (modalType) {
       case ADDGLOBALITEM:
         axiosInstance
@@ -122,25 +125,23 @@ export default function GlobalItemForm({ beforeData }) {
 
       case EDITGLOBALITEM:
         axiosInstance
-          .patch(`/api/mileage/items/${beforeData[NUM]}`, newData)
+          .patch(`/api/mileage/items/${beforeData[ID]}`, newData)
           .then((res) => {
-            alert(`글로벌 항목 ${beforeData[NUM]}번이 수정되었습니다.`);
+            alert(`글로벌 항목 ${beforeData[ID]}번이 수정되었습니다.`);
             router.reload();
           })
           .catch((err) => alert('글로벌 항목 수정에 실패했습니다.'));
         break;
     }
   };
+
   return (
     <Formik
       initialValues={{
         [CATEGORY]: modalType === EDITGLOBALITEM ? beforeData?.[CATEGORY] : '',
-
         [ITEM]: modalType === EDITGLOBALITEM ? beforeData?.[ITEM] : '',
-
         [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,
@@ -158,21 +159,19 @@ export default function GlobalItemForm({ beforeData }) {
         <StyleFieldForm>
           <Box sx={{ display: 'flex', width: '100%', gap: '30px' }}>
             <StyleFieldBox>
-              {[CATEGORY, ITEM, DESCRIPTION1, DESCRIPTION2, FILE_DESCRIPTION].map(
-                (field: string, index: number) => (
-                  <Box key={index}>
-                    <Field
-                      sx={{ width: '300px' }}
-                      name={field}
-                      as={TextField}
-                      type="text"
-                      label={engToKor(field)}
-                      variant="standard"
-                    />
-                    <ErrorMessage name={field} />
-                  </Box>
-                )
-              )}
+              {[CATEGORY, ITEM, DESCRIPTION1, DESCRIPTION2].map((field: string, index: number) => (
+                <Box key={index}>
+                  <Field
+                    sx={{ width: '300px' }}
+                    name={field}
+                    as={TextField}
+                    type="text"
+                    label={engToKor(field)}
+                    variant="standard"
+                  />
+                  <ErrorMessage name={field} />
+                </Box>
+              ))}
             </StyleFieldBox>
             <StyleFieldBox>
               {[

diff --git a/src/components/modalForm/MileageRegisterForm.tsx b/src/components/modalForm/MileageRegisterForm.tsx
@@ -23,7 +23,9 @@ import {
 import { STUDENT_ID } from 'src/assets/data/fields';
 import { ADDMILEAGEREGISTER, EDITMILEAGEREGISTER } from 'src/assets/data/modal/modals';
 
-export default function MileageRegisterForm({ beforeData }) {
+export default function MileageRegisterForm() {
+  const beforeData = useSelector((state) => state.modal.beforeData);
+
   const modalType = useSelector((state) => state.modal.modalType);
   const router = useRouter();
   console.log('beforeData', beforeData);

diff --git a/src/components/modalForm/SemesterItemForm.tsx b/src/components/modalForm/SemesterItemForm.tsx
@@ -23,7 +23,8 @@ import SubmitButton from '../common/modal/SubmitButton';
 import axiosInstance from 'src/utils/axios';
 import { useRouter } from 'next/router';
 
-export default function SemesterItemForm({ beforeData }) {
+export default function SemesterItemForm() {
+  const beforeData = useSelector((state) => state.modal.beforeData);
   const modalType = useSelector((state) => state.modal.modalType);
   const router = useRouter();
 

diff --git a/src/components/modalForm/StudentForm.tsx b/src/components/modalForm/StudentForm.tsx
@@ -80,7 +80,8 @@ const StyleFieldForm = styled(Form)({
   gap: '20px',
 });
 
-export default function StudentForm({ beforeData }) {
+export default function StudentForm() {
+  const beforeData = useSelector((state) => state.modal.beforeData);
   const modalType = useSelector((state) => state.modal.modalType);
   console.log('debug2', modalType, beforeData);
 

diff --git a/src/pages/mileage/category/index.tsx b/src/pages/mileage/category/index.tsx
@@ -3,7 +3,6 @@ import {
   MAX_MILEAGE,
   MANAGE,
   CHECK_BOX,
-  NUM,
   DESCRIPTION,
   NAME,
   ID,
@@ -22,7 +21,7 @@ import { setMileageCategoryList } from 'src/redux/slices/data';
  */
 
 export enum MileageCategoryBoard {
-  'ID' = ID,
+  'NUM' = NUM,
   'CATEGORY' = CATEGORY,
   'DESCRIPTION1' = DESCRIPTION1,
   'DESCRIPTION2' = DESCRIPTION2,
@@ -35,7 +34,7 @@ export enum MileageCategoryBoard {
  */
 
 interface Data {
-  [MileageCategoryBoard.ID]: number;
+  [MileageCategoryBoard.NUM]: number;
   [MileageCategoryBoard.CATEGORY]: string;
   [MileageCategoryBoard.DESCRIPTION1]: string;
   [MileageCategoryBoard.DESCRIPTION2]: string;
@@ -49,14 +48,14 @@ interface Data {
  *  */
 
 function createData(
-  ID: number,
+  NUM: number,
   CATEGORY: string,
   DESCRIPTION1: string,
   DESCRIPTION2: string,
   MANAGE: ReactNode
 ): Data {
   return {
-    [MileageCategoryBoard.ID]: ID,
+    [MileageCategoryBoard.NUM]: NUM,
     [MileageCategoryBoard.CATEGORY]: CATEGORY,
     [MileageCategoryBoard.DESCRIPTION1]: DESCRIPTION1,
     [MileageCategoryBoard.DESCRIPTION2]: DESCRIPTION2,
@@ -70,7 +69,7 @@ function createData(
  */
 const headCells = [
   {
-    id: [MileageCategoryBoard.ID],
+    id: [MileageCategoryBoard.NUM],
     numeric: false,
     disablePadding: true,
     label: '번호',
@@ -106,7 +105,7 @@ const headCells = [
  * 더미 객체
  */
 const IParams = {
-  [ID]: 1,
+  [NUM]: 1,
   [CATEGORY]: '카테고리테스트',
   [DESCRIPTION1]: '설명 테스트',
   [DESCRIPTION2]: '설명 테스트',
@@ -120,7 +119,7 @@ import axiosInstance from 'src/utils/axios';
 import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
 import MileageCategory from 'src/components/board/MileageCategory';
 import { setCategoryList } from 'src/redux/slices/filter';
-import { DESCRIPTION1, CATEGORY, DESCRIPTION2 } from '../../../assets/data/fields';
+import { DESCRIPTION1, CATEGORY, DESCRIPTION2, NUM } from '../../../assets/data/fields';
 
 interface IList {
   id: number;