Merge pull request #108 from gyoyeon-kim/card-table

[Refactor] alret > toast 변경 / 관리 버튼 권한 추가

Author: rover1523

package-lock.json

@@ -20,6 +20,7 @@
     "react-datetime": "^3.3.1",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
+    "react-toastify": "^11.0.5",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

package.json

@@ -1,22 +1,16 @@
 import axiosInstance from "./axiosInstance";
-import { MemberType } from "@/types/users";
 
-interface MembersResponse {
-  members: MemberType[]; // 실제 데이터
-  totalCount: number;
-}
-
-export const getMembers = async (dashboardId?: string | string[]) => {
+export const getMembers = async ({ dashboardId }: { dashboardId: number }) => {
   if (!dashboardId) {
     console.error("dashboardID가 없습니다.");
     return [];
   }
-  const dashboardIdNum =
-    typeof dashboardId === "string" ? Number(dashboardId) : undefined;
 
-  const response = await axiosInstance.get<MembersResponse>(
-    `https://sp-taskify-api.vercel.app/13-4/members?page=1&size=20&dashboardId=${dashboardIdNum}`
-  );
+  const response = await axiosInstance.get(`/13-4/members`, {
+    params: {
+      dashboardId,
+    },
+  });
 
   return response.data.members || [];
 };

src/api/members.ts

@@ -11,6 +11,8 @@ import { MemberAvatars, UserAvatars } from "@/components/gnb/Avatars";
 import UserMenu from "@/components/gnb/UserMenu";
 import MemberListMenu from "@/components/gnb/MemberListMenu";
 import InviteDashboard from "@/components/modal/InviteDashboard";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 interface HeaderDashboardProps {
   variant?: "mydashboard" | "dashboard" | "mypage";
@@ -47,7 +49,9 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
   useEffect(() => {
     const fetchMembers = async () => {
       try {
-        const members = await getMembers(dashboardId);
+        const members = await getMembers({
+          dashboardId: Number(dashboardId),
+        });
         setMembers(members);
       } catch (error) {
         console.error("멤버 불러오기 실패:", error);
@@ -110,6 +114,7 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
 
   return (
     <header className="w-full h-[60px] md:h-[70px] flex items-center justify-center bg-white border-b-[1px] border-b-[#D9D9D9]">
+      <ToastContainer position="top-center" />
       <div className="w-full flex items-center justify-between pl-[4vw]">
         {errorMessage && (
           <p className="text-sm text-[var(--color-red)] px-4 py-2">
@@ -147,7 +152,11 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
             <button
               onClick={() => {
                 if (dashboardId) {
-                  router.push(`/dashboard/${dashboardId}/edit`);
+                  if (dashboard && dashboard.createdByMe === true) {
+                    router.push(`/dashboard/${dashboardId}/edit`);
+                  } else {
+                    toast.error("대시보드 수정 권한이 없습니다.");
+                  }
                 } else {
                   router.push("/mypage");
                 }

src/components/gnb/HeaderDashboard.tsx

@@ -4,6 +4,8 @@ import Input from "../input/Input";
 import Image from "next/image";
 import axiosInstance from "@/api/axiosInstance";
 import { apiRoutes } from "@/api/apiRoutes";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 const ChangeBebridge = () => {
   const router = useRouter();
@@ -58,16 +60,19 @@ const ChangeBebridge = () => {
         payload
       );
       console.log("업데이트 성공:", response.data);
-      alert("대시보드가 업데이트되었습니다!"); // 추후에 toast로 변경
-      window.location.reload();
+      toast.success("대시보드가 업데이트되었습니다!");
+      setTimeout(() => {
+        window.location.reload();
+      }, 100);
     } catch (error) {
       console.error("업데이트 실패:", error);
-      alert("업데이트에 실패했습니다."); // 추후에 toast로 변경
+      toast.error("업데이트에 실패했습니다.");
     }
   };
 
   return (
     <div className="sm:w-[620px] sm:h-[344px] w-[327px] h-[312px] bg-white sm:rounded-[16px] rounded-[8px] p-[24px] flex flex-col">
+      <ToastContainer position="top-center" />
       <h2 className="text-sm sm:text-[24px] font-bold">
         {dashboardDetail.title}
       </h2>

src/components/modal/ChangeBebridge.tsx

@@ -5,6 +5,8 @@ import Image from "next/image";
 import axiosInstance from "@/api/axiosInstance";
 import { apiRoutes } from "@/api/apiRoutes";
 import { AxiosError } from "axios";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
   const [email, setEmail] = useState("");
@@ -20,42 +22,41 @@ export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
     const dashboardIdNumber = Number(dashboardId);
     if (!dashboardId || !email) return;
 
-    const payload = {
-      email,
-    };
-
     try {
-      const response = await axiosInstance.post(
-        apiRoutes.DashboardInvite(dashboardIdNumber),
-        payload
-      );
+      await axiosInstance.post(apiRoutes.DashboardInvite(dashboardIdNumber), {
+        email,
+      });
       onClose?.(); // 함수 있을때만 실행
       window.location.reload();
     } catch (error) {
       console.error("초대 실패:", error);
 
       if (error instanceof AxiosError) {
         if (error.response?.status === 403) {
-          alert("초대 권한이 없습니다.");
+          toast.error("초대 권한이 없습니다.");
         } else if (error.response?.status === 404) {
-          alert("대시보드 또는 유저가 존재하지 않습니다.");
+          toast.error("대시보드 또는 유저가 존재하지 않습니다.");
         } else if (error.response?.status === 409) {
-          alert("이미 대시보드에 초대된 멤버입니다.");
+          toast.error("이미 대시보드에 초대된 멤버입니다.");
         } else {
-          alert("오류가 발생했습니다.");
+          toast.error("오류가 발생했습니다.");
         }
-        // Next.js가 감지하기 전에 강제 새로고침 실행 > 추후 더 좋은 방법 있으면 변경
-        setTimeout(() => {
-          window.location.reload();
-        }, 50);
+
+        /** Next.js가 감지하기 전에 강제 새로고침 실행
+         * @fixme 추후 더 좋은 방법 있으면 변경
+         * setTimeout(() => {
+         * window.location.reload();
+         * }, 50);
+         */
       } else {
-        alert("네트워크 오류가 발생했습니다.");
+        toast.error("네트워크 오류가 발생했습니다.");
       }
     }
   };
 
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-black/35 z-50">
+      <ToastContainer position="top-center" autoClose={2000} />
       <div className="bg-white p-6 rounded-lg shadow-lg w-[327px] sm:w-[568px] sm:h-[279px]">
         <div className="flex justify-between items-center">
           <h2 className="text-sm sm:text-[24px] font-bold">초대하기</h2>

src/components/modal/InviteDashboard.tsx

@@ -4,6 +4,8 @@ import InviteDashboard from "../modal/InviteDashboard";
 import { apiRoutes } from "@/api/apiRoutes";
 import axiosInstance from "@/api/axiosInstance";
 import { AxiosError } from "axios";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
   const [inviteList, setInviteList] = useState<
@@ -52,22 +54,22 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
     const dashboardIdNumber = Number(dashboardId);
     if (!dashboardId) return;
     try {
-      const response = await axiosInstance.delete(
+      await axiosInstance.delete(
         apiRoutes.DashboardInviteDelete(dashboardIdNumber, id)
       );
       window.location.reload();
     } catch (error) {
       console.error("초대 취소 실패:", error);
       if (error instanceof AxiosError) {
         if (error.response?.status === 403) {
-          alert("대시보드 초대 취소 권한이 없습니다.");
+          toast.error("대시보드 초대 취소 권한이 없습니다.");
         } else if (error.response?.status === 404) {
-          alert("대시보드가 존재하지 않습니다.");
+          toast.error("대시보드가 존재하지 않습니다.");
         } else {
-          alert("오류가 발생했습니다.");
+          toast.error("오류가 발생했습니다.");
         }
       } else {
-        alert("네트워크 오류가 발생했습니다.");
+        toast.error("네트워크 오류가 발생했습니다.");
       }
     }
   };
@@ -96,6 +98,7 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
 
   return (
     <div className="relative bg-white p-4 rounded-lg  lg:w-[620px] lg:h-[477px] md:w-[544px] md:h-[477px] sm:w-[284px] h-[406px] ">
+      <ToastContainer position="top-center" autoClose={2000} />
       <div className="flex justify-between items-start sm:items-center">
         {/* 제목 */}
         <p className="sm:text-2xl text-xl font-bold">초대 내역</p>

src/components/table/InviteRecords.tsx

@@ -6,6 +6,8 @@ import { apiRoutes } from "@/api/apiRoutes";
 import axiosInstance from "@/api/axiosInstance";
 import { Invite } from "@/types/invite";
 import useUserStore from "@/store/useUserStore";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 const ITEMS_PER_PAGE = 6; // 한 번에 보여줄 개수
 
@@ -65,11 +67,13 @@ function InvitedList({
         payload
       );
       console.log("대시보드 수락 성공:", response.data);
-      alert("대시보드 수락 성공"); // 추후에 toast로 변경
-      window.location.reload();
+      toast.success("대시보드 수락 성공");
+      setTimeout(() => {
+        window.location.reload();
+      }, 100);
     } catch (error) {
       console.error("대시보드 수락 실패:", error);
-      alert("대시보드 수락 실패"); // 추후에 toast로 변경
+      toast.error("대시보드 수락 실패");
     }
   };
 
@@ -85,16 +89,19 @@ function InvitedList({
         payload
       );
       console.log("대시보드 거절 성공:", response.data);
-      alert("대시보드 거절 성공"); // 추후에 toast로 변경
-      window.location.reload();
+      toast.success("대시보드 거절 성공");
+      setTimeout(() => {
+        window.location.reload();
+      }, 100);
     } catch (error) {
       console.error("대시보드 거절 실패:", error);
-      alert("대시보드 거절 실패"); // 추후에 toast로 변경
+      toast.error("대시보드 거절 실패");
     }
   };
 
   return (
     <div className="relative bg-white w-[260px] sm:w-[504px] lg:w-[1022px] h-[770px] sm:h-[592px] lg:h-[620px] mx-auto mt-[40px]">
+      <ToastContainer position="top-center" autoClose={2000} />
       {filteredData.length > 0 && (
         <div className="hidden sm:flex p-6 w-full h-[26px] justify-start items-center pl-[43px] pr-[76px] md:gap-x-[130px] lg:gap-x-[280px]">
           <p className="lg:ml-10 font-normal text-[var(--color-gray2)]">이름</p>
@@ -165,13 +172,11 @@ function InvitedList({
           : !hasMore && <NoResultDashBoard searchTitle={searchTitle} />}{" "}
         {/* 검색 내역이 없을 경우 */}
         {filteredData.length > 0 && !hasMore && (
-          <p className="lg:mr-18 text-center text-gray-400 py-4">
+          <p className="lg:mr-18 text-center text-gray-400 bg-transparent">
             더 이상 초대 목록이 없습니다.
           </p>
         )}
-        {hasMore && (
-          <div ref={observerRef} className="h-[50px] w-[50px] bg-red"></div>
-        )}
+        {hasMore && <div ref={observerRef} className="h-[50px] w-[50px]"></div>}
       </div>
     </div>
   );

src/components/table/invited/InvitedDashBoard.tsx

@@ -5,7 +5,8 @@ import { MemberType } from "@/types/users";
 import { getMembers } from "@/api/members";
 import { apiRoutes } from "@/api/apiRoutes";
 import axiosInstance from "@/api/axiosInstance";
-import Image from "next/image";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 interface HeaderBebridgeProps {
   dashboardId?: string | string[];
@@ -27,10 +28,10 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
   /*버튼(삭제, 이전, 다음)*/
   const handleDelete = async (id: number) => {
     try {
-      const response = await axiosInstance.delete(apiRoutes.memberDetail(id));
+      await axiosInstance.delete(apiRoutes.memberDetail(id));
       window.location.reload();
     } catch (error) {
-      alert("구성원원 삭제에 실패하였습니다 .");
+      toast.error("구성원원 삭제에 실패하였습니다 .");
       console.error("구성원 삭제 실패:", error);
     }
   };
@@ -48,7 +49,9 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
     const fetchMembers = async () => {
       try {
         if (dashboardId) {
-          const members = await getMembers(dashboardId);
+          const members = await getMembers({
+            dashboardId: Number(dashboardId),
+          });
           setMembers(members);
           console.log("member_list", members);
         }
@@ -62,6 +65,7 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
 
   return (
     <div className="lg:h-[404px] md:h-[404px] sm:h-[337px] lg:w-[620px] md:w-[544px] sm:w-[337px] relative bg-white p-6 rounded-lg max-w-md w-full  sm:max-w-lg md:max-w-xl lg:max-w-2xl">
+      <ToastContainer position="top-center" autoClose={2000} />
       <div className="flex justify-between items-center">
         <p className="text-xl sm:text-2xl font-bold">구성원</p>
         <Pagination

src/components/table/member/MemberList.tsx

@@ -39,9 +39,7 @@ export default function EditDashboard() {
     const dashboardIdNumber = Number(dashboardId);
     if (!dashboardId) return;
     try {
-      const response = await axiosInstance.delete(
-        apiRoutes.DashboardDetail(dashboardIdNumber)
-      );
+      await axiosInstance.delete(apiRoutes.DashboardDetail(dashboardIdNumber));
       router.push(`/mydashboard`);
     } catch (error) {
       alert("대시보드 삭제에 실패하였습니다 .");