fix: 카드 생성 시 동기화 안되는 오류 수정

harigari · Jan 4, 2024 · 46fcc53 · 46fcc53
1 parent db582ac
commit 46fcc53
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 31 deletions.
diff --git a/components/Column/Column.tsx b/components/Column/Column.tsx
@@ -1,27 +1,26 @@
-import ChipNum from "../Chips/ChipNum/ChipNum";
-import ChipPlus from "../Chips/ChipPlus/ChipPlus";
-import ChipTodo from "../Chips/ChipTodo/ChipTodo";
-import style from "./Column.module.css";
+import sender from "@/apis/sender";
 import Card from "@/components/Card/Card";
-import stylesFromSingle from "@/modals/Modal.module.css";
-import Image from "next/image";
-import Button from "../Buttons/Button/Button";
-import { Dispatch, FormEvent, SetStateAction, useEffect, useState } from "react";
-import MultiInputModal from "@/modals/MultiInputModal";
-import InputWrapper from "../Input/InputWrapper";
-import ModalWrapper from "@/modals/ModalWrapper";
-import clsx from "clsx";
-import Input from "../Input/Input";
+import useApi from "@/hooks/useApi";
+import useInfScroll from "@/hooks/useInfScroll";
 import useInputController from "@/hooks/useInputController";
 import AlertModal from "@/modals/AlertModal";
-import useApi from "@/hooks/useApi";
-import { getAccessTokenFromDocument } from "@/utils/getAccessToken";
-import { CardData, ColumnData, EntireData, Member } from "@/types/api.type";
+import stylesFromSingle from "@/modals/Modal.module.css";
+import ModalWrapper from "@/modals/ModalWrapper";
+import MultiInputModal from "@/modals/MultiInputModal";
 import ModalButton from "@/modals/components/ModalButton/ModalButton";
-import { useRouter } from "next/router";
-import useInfScroll from "@/hooks/useInfScroll";
-import sender from "@/apis/sender";
+import { CardData, EntireData, Member } from "@/types/api.type";
+import { getAccessTokenFromDocument } from "@/utils/getAccessToken";
 import { Droppable } from "@hello-pangea/dnd";
+import clsx from "clsx";
+import Image from "next/image";
+import { Dispatch, FormEvent, SetStateAction, useEffect, useState } from "react";
+import Button from "../Buttons/Button/Button";
+import ChipNum from "../Chips/ChipNum/ChipNum";
+import ChipPlus from "../Chips/ChipPlus/ChipPlus";
+import ChipTodo from "../Chips/ChipTodo/ChipTodo";
+import Input from "../Input/Input";
+import InputWrapper from "../Input/InputWrapper";
+import style from "./Column.module.css";
 
 interface ColumnProps {
   accessToken: string;
@@ -73,7 +72,7 @@ export const Column = ({
   });
 
   //  카드리스트 가져오기
-  const getComments = async () => {
+  const getCards = async () => {
     const { id, size, cursorId } = pagination;
     let response;
     if (cursorId) {
@@ -100,7 +99,7 @@ export const Column = ({
   useEffect(() => {
     if (pagination.cursorId === null) return;
     if (isVisible) {
-      getComments();
+      getCards();
     }
   }, [isVisible]);
 

diff --git a/modals/MultiInputModal.tsx b/modals/MultiInputModal.tsx
@@ -73,10 +73,12 @@ const MultiInputModal = ({
       const cardRes = await postData({ path: "card", data, accessToken });
 
       if (cardRes?.status === 201) {
-        // setCardList((prevValue) => [...prevValue, cardRes.data]);
         setEntireList((prev) => ({
           ...prev,
-          cards: { ...prev.cards, [columnId]: prev.cards[columnId].splice(cardRes.data.id, 1, cardRes.data) },
+          cards: {
+            ...prev.cards,
+            [columnId]: (prev.cards[columnId].push(cardRes.data), prev.cards[columnId]),
+          },
         }));
         handleModalClose();
       }
@@ -90,10 +92,9 @@ const MultiInputModal = ({
       const cardRes = await postData({ path: "card", data: dataWithImage, accessToken });
 
       if (cardRes?.status === 201) {
-        // setCardList((prevValue) => [...prevValue, cardRes.data]);
         setEntireList((prev) => ({
           ...prev,
-          cards: { ...prev.cards, [columnId]: prev.cards[columnId].splice(cardRes.data.id, 1, cardRes.data) },
+          cards: { ...prev.cards, [columnId]: (prev.cards[columnId].push(cardRes.data), prev.cards[columnId]) },
         }));
         handleModalClose();
       }

diff --git a/pages/dashboard/[boardId]/index.tsx b/pages/dashboard/[boardId]/index.tsx
@@ -57,13 +57,12 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   }
 
   return {
-    props: { accessToken, columnData, assigneeList, boardId, dashboards, entireData },
+    props: { accessToken, assigneeList, boardId, dashboards, entireData },
   };
 };
 
 const Dashboard = ({
   accessToken,
-  columnData,
   assigneeList,
   boardId,
   dashboards,
@@ -152,6 +151,7 @@ const Dashboard = ({
     [entireList]
   );
 
+  if (!mount) return null;
   return (
     <>
       {/* 대시보드에 맞는 레이아웃으로 설정-헤더 수정 */}
@@ -195,7 +195,6 @@ const Dashboard = ({
           <form className={stylesFromSingle.form} onSubmit={handleSubmit} noValidate>
             <div className={stylesFromSingle.modal}>
               <div className={stylesFromSingle.modalTitle}>새 컬럼 생성</div>
-
               <InputWrapper {...createModal.wrapper}>
                 <Input {...createModal.input} />
               </InputWrapper>

diff --git a/pages/mydashboard/index.module.css b/pages/mydashboard/index.module.css
@@ -19,16 +19,16 @@
 }
 
 .dashboard a {
-  width: 100%;
   display: flex;
   justify-content: space-between;
   padding: 0 3rem;
+  width: 100%;
 }
 
 .dashboard__title {
   display: flex;
-  align-items: center;
   gap: 1.2rem;
+  align-items: center;
 }
 
 .dashboard__icon {

diff --git a/pages/mypage/mypage.module.css b/pages/mypage/mypage.module.css
@@ -1,7 +1,7 @@
 .main {
-  padding: 2rem;
   display: grid;
   gap: 2rem;
+  padding: 2rem;
 }
 
 .section {