Merge pull request #193 from part3-4team-Taskify/minji

ozen0718 · web-flow · commit 0e26c0554186 · 2025-04-10T10:48:17.000+09:00
[Fix, Refactor] edit, mydashboard: 페이지 변경사항 즉시 반영 / edit_MemberList: 멤버 삭제 시 다른 멤버가 삭제되는 버그 fix
diff --git a/src/components/modal/ChangeBebridge.tsx b/src/components/modal/ChangeBebridge.tsx
@@ -7,10 +7,14 @@ import { apiRoutes } from "@/api/apiRoutes";
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
-const ChangeBebridge = () => {
+interface ChangeBebridgeProps {
+  onUpdate?: () => void;
+}
+
+const ChangeBebridge = ({ onUpdate }: ChangeBebridgeProps) => {
   const router = useRouter();
   const { dashboardId } = router.query;
-  const [dashboardDetail, setdashboardDetail] = useState<{ title?: string }>(
+  const [dashboardDetail, setDashboardDetail] = useState<{ title?: string }>(
     {}
   );
   const [title, setTitle] = useState("");
@@ -32,7 +36,7 @@ const ChangeBebridge = () => {
         );
         if (res.data) {
           const dashboardData = res.data;
-          setdashboardDetail(dashboardData);
+          setDashboardDetail(dashboardData);
         }
       } catch (error) {
         console.error("대시보드 상세내용 불러오는데 오류 발생:", error);
@@ -58,11 +62,14 @@ const ChangeBebridge = () => {
         apiRoutes.dashboardDetail(dashboardIdNumber),
         payload
       );
+      setDashboardDetail((prev) => ({
+        ...prev,
+        title: title,
+        color: colors[selected],
+      }));
 
       toast.success("대시보드가 변경되었습니다!");
-      setTimeout(() => {
-        router.reload();
-      }, 1500);
+      if (onUpdate) onUpdate();
     } catch (error) {
       console.error("대시보드 변경 실패:", error);
       toast.error("대시보드 변경에 실패했습니다.");
diff --git a/src/components/modal/DeleteDashboardModal.tsx b/src/components/modal/DeleteDashboardModal.tsx
@@ -28,8 +28,6 @@ export default function DeleteDashboardModal({
     } catch (error) {
       console.error("대시보드 삭제 실패:", error);
       toast.error("대시보드 삭제에 실패하였습니다 .");
-
-      window.location.reload();
     }
   };
   return (
diff --git a/src/components/modal/DeleteMemberModal.tsx b/src/components/modal/DeleteMemberModal.tsx
@@ -9,21 +9,26 @@ type DeleteMemberdProps = {
   isOpen: boolean;
   onClose: () => void;
   id: number;
+  memberDelete?: () => void;
 };
 
 export default function DeleteDashboardModal({
   isOpen,
   onClose,
   id,
+  memberDelete,
 }: DeleteMemberdProps) {
   /* 멤버삭제 */
   const handleDelete = async (id: number) => {
     try {
       await axiosInstance.delete(apiRoutes.memberDetail(id));
-      window.location.reload();
+      if (memberDelete) memberDelete();
+      toast.success("멤버가 삭제되었습니다.");
     } catch (error) {
-      toast.error("구성원 삭제에 실패했습니다.");
-      console.error("구성원 삭제 실패:", error);
+      toast.error("멤버 삭제에 실패했습니다.");
+      console.error("멤버 삭제 실패:", error);
+    } finally {
+      onClose();
     }
   };
 
diff --git a/src/components/table/InviteRecords.tsx b/src/components/table/InviteRecords.tsx
@@ -30,9 +30,9 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
         if (res.data && Array.isArray(res.data.invitations)) {
           // 이메일 리스트를 객체 배열로 저장
           const inviteData = res.data.invitations.map(
-            (item: { id: number; invitee: { email: string } }) => ({
+            (item: { id: number; invite: { email: string } }) => ({
               id: item.id,
-              email: item.invitee.email,
+              email: item.invite.email,
             })
           );
           setInviteList(inviteData);
@@ -55,12 +55,13 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
       await axiosInstance.delete(
         apiRoutes.dashboardInviteDelete(dashboardIdNumber, id)
       );
-      window.location.reload();
+      setInviteList((prev) => prev.filter((invite) => invite.id !== id));
+      toast.success("초대가 취소되었습니다.");
     } catch (error) {
       console.error("초대 취소 실패:", error);
       if (error instanceof AxiosError) {
         if (error.response?.status === 403) {
-          toast.error("초대 취소 권한이 없습니다.");
+          toast.error("초대 취소에 실패했습니다.");
           return;
         } else if (error.response?.status === 404) {
           toast.error("대시보드가 존재하지 않습니다.");
diff --git a/src/components/table/invited/InvitedDashBoard.tsx b/src/components/table/invited/InvitedDashBoard.tsx
@@ -10,17 +10,23 @@ import { Search } from "lucide-react";
 
 const ITEMS_PER_PAGE = 6; // 한 번에 보여줄 개수
 
+interface InvitedProps {
+  searchTitle: string;
+  invitationData: Invite[];
+  fetchNextPage: () => void;
+  hasMore: boolean;
+  agreeInvitation?: () => void;
+  onDecision?: (inviteId: number) => void;
+}
+
 function InvitedList({
   searchTitle,
   invitationData: invitationData,
   fetchNextPage,
   hasMore,
-}: {
-  searchTitle: string;
-  invitationData: Invite[];
-  fetchNextPage: () => void;
-  hasMore: boolean;
-}) {
+  agreeInvitation,
+  onDecision,
+}: InvitedProps) {
   const observerRef = useRef<HTMLDivElement | null>(null);
 
   /* IntersectionObserver 설정 */
@@ -62,10 +68,9 @@ function InvitedList({
     };
     try {
       await axiosInstance.put(apiRoutes.invitationDetail(inviteId), payload);
-      toast.success("대시보드 수락 성공");
-      setTimeout(() => {
-        window.location.reload();
-      }, 1500);
+      if (agreeInvitation) agreeInvitation();
+      if (onDecision) onDecision(inviteId);
+      toast.success("초대가 수락되었습니다.");
     } catch (error) {
       console.error("수락 실패:", error);
       toast.error("초대 수락에 실패했습니다");
@@ -80,10 +85,8 @@ function InvitedList({
     };
     try {
       await axiosInstance.put(apiRoutes.invitationDetail(inviteId), payload);
-      toast.success("대시보드 거절 성공");
-      setTimeout(() => {
-        window.location.reload();
-      }, 1500);
+      if (onDecision) onDecision(inviteId);
+      toast.success("초대가 거절되었습니다.");
     } catch (error) {
       console.error("거절 실패:", error);
       toast.error("초대 거절에 실패했습니다");
@@ -187,8 +190,13 @@ function InvitedList({
 }
 
 type CursorId = number;
+type InvitedDashBoardProps = {
+  agreeInvitation?: () => void;
+};
 
-export default function InvitedDashBoard() {
+export default function InvitedDashBoard({
+  agreeInvitation,
+}: InvitedDashBoardProps) {
   const { user } = useUserStore();
   const [searchTitle, setSearchTitle] = useState("");
   const [invitationData, setInvitationData] = useState<Map<CursorId, Invite[]>>(
@@ -270,6 +278,19 @@ export default function InvitedDashBoard() {
 
   const invitationArray = Array.from(invitationData.values()).flat();
 
+  const removeInvitation = (inviteId: number) => {
+    setInvitationData((prev) => {
+      const newMap = new Map();
+      for (const [key, list] of prev) {
+        newMap.set(
+          key,
+          list.filter((invite) => invite.id !== inviteId)
+        );
+      }
+      return newMap;
+    });
+  };
+
   return (
     <div>
       {invitationArray.length === 0 ? (
@@ -303,6 +324,8 @@ export default function InvitedDashBoard() {
                 invitationData={invitationArray}
                 fetchNextPage={fetchNextPage}
                 hasMore={hasMore}
+                agreeInvitation={agreeInvitation}
+                onDecision={removeInvitation}
               />
             </div>
           </div>
diff --git a/src/components/table/member/MemberList.tsx b/src/components/table/member/MemberList.tsx
@@ -12,6 +12,7 @@ interface HeaderBebridgeProps {
 
 const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
   const [members, setMembers] = useState<MemberType[]>([]);
+  const [selectedMemberId, setSelectedMemberId] = useState<number | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   /* 페이지네이션 */
@@ -24,7 +25,7 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
     currentPage * itemsPerPage
   );
 
-  /* 구성원 삭제 모달 */
+  /* 멤버 삭제 모달 */
   const openModal = () => {
     setIsModalOpen(true);
   };
@@ -43,21 +44,20 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
   };
 
   /*멤버 목록 api 호출*/
-  useEffect(() => {
-    const fetchMembers = async () => {
-      try {
-        if (dashboardId) {
-          const members = await getMembers({
-            dashboardId: Number(dashboardId),
-          });
-          setMembers(members);
-          console.log("member_list", members);
-        }
-      } catch (error) {
-        console.error("멤버 불러오기 실패:", error);
+  const fetchMembers = async () => {
+    try {
+      if (dashboardId) {
+        const members = await getMembers({
+          dashboardId: Number(dashboardId),
+        });
+        setMembers(members);
       }
-    };
+    } catch (error) {
+      console.error("멤버 불러오기 실패:", error);
+    }
+  };
 
+  useEffect(() => {
     fetchMembers();
   }, [dashboardId]);
 
@@ -111,17 +111,21 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
             {!member.isOwner && (
               <>
                 <button
-                  onClick={openModal}
+                  onClick={() => {
+                    setSelectedMemberId(member.id);
+                    setIsModalOpen(true);
+                  }}
                   className="text-12m cursor-pointer sm:font-sm h-[32px] sm:h-[32px] w-[52px] sm:w-[84px] md:w-[84px] border border-[var(--color-gray3)] text-[var(--primary)] px-2 py-1 rounded-md hover:bg-gray-100"
                 >
                   삭제
                 </button>
 
-                {isModalOpen && (
+                {isModalOpen && selectedMemberId !== null && (
                   <DelteMemberModal
                     isOpen={isModalOpen}
                     onClose={closeModal}
-                    id={member.id}
+                    id={selectedMemberId}
+                    memberDelete={fetchMembers}
                   />
                 )}
               </>
diff --git a/src/pages/dashboard/[dashboardId]/edit.tsx b/src/pages/dashboard/[dashboardId]/edit.tsx
@@ -72,7 +72,7 @@ export default function EditDashboard() {
           </div>
           {/* 백버튼 아래 전체 아이템 컨테이너 */}
           <div className="flex flex-col items-center lg:items-start px-6 mt-6 gap-6">
-            <ChangeBebridge />
+            <ChangeBebridge onUpdate={fetchDashboards} />
             {/* MemberList는 아래쪽에 배치 */}
             <MemberList dashboardId={dashboardId} />
             <InviteRecords dashboardId={dashboardIdString || ""} />{" "}
diff --git a/src/pages/mydashboard.tsx b/src/pages/mydashboard.tsx
@@ -231,7 +231,7 @@ export default function MyDashboardPage() {
             )}
 
             <div className="mt-[25px]">
-              <InvitedDashBoard />
+              <InvitedDashBoard agreeInvitation={fetchDashboards} />
             </div>
           </section>
         </main>
diff --git a/src/pages/mypage.tsx b/src/pages/mypage.tsx
@@ -1,20 +1,17 @@
 import React, { useState, useEffect } from "react";
 import { useAuthGuard } from "@/hooks/useAuthGuard";
-import useUserStore from "@/store/useUserStore";
 import HeaderMyPage from "@/components/gnb/HeaderDashboard";
 import SideMenu from "@/components/sideMenu/SideMenu";
 import { ProfileCard } from "@/components/card/Profile";
 import ChangePassword from "@/components/card/ChangePassword";
 import BackButton from "@/components/button/BackButton";
 import { Dashboard, getDashboards } from "@/api/dashboards";
-import { getUserInfo } from "@/api/users";
 import { TEAM_ID } from "@/constants/team";
 import LoadingSpinner from "@/components/common/LoadingSpinner";
 import { toast } from "react-toastify";
 
 export default function MyPage() {
   const { user, isInitialized } = useAuthGuard();
-  const { setUser } = useUserStore();
   const [dashboards, setDashboards] = useState<Dashboard[]>([]);
 
   // 사이드메뉴 대시보드 목록 api 호출

Original file line number	Diff line number	Diff line change
`@@ -28,8 +28,6 @@ export default function DeleteDashboardModal({`
`28`	`28`	`} catch (error) {`
`29`	`29`	`console.error("대시보드 삭제 실패:", error);`
`30`	`30`	`toast.error("대시보드 삭제에 실패하였습니다 .");`
`31`		`-`
`32`		`- window.location.reload();`
`33`	`31`	`}`
`34`	`32`	`};`
`35`	`33`	`return (`