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

[Feat, Fix] Moal : 디자인 수정, 대시보드 삭제 확인 모달 추가 / 초대 모달 중복 문제 해결

Author: MINJI121

src/api/axiosInstance.ts

@@ -1,8 +1,5 @@
 import axios from "axios";
 
-console.log("🔐 BASE_URL:", process.env.NEXT_PUBLIC_BASE_URL);
-console.log("🔐 API_TOKEN:", process.env.NEXT_PUBLIC_API_TOKEN);
-
 const axiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
 });

src/components/modal/DeleteDashboardModal.tsx

@@ -0,0 +1,54 @@
+import { Modal } from "./Modal";
+import { CustomBtn } from "../button/CustomButton";
+import { useRouter } from "next/router";
+import axiosInstance from "@/api/axiosInstance";
+import { apiRoutes } from "@/api/apiRoutes";
+
+type DeleteDashboardProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  dashboardid: string;
+};
+
+export default function DeleteDashboardModal({
+  isOpen,
+  onClose,
+  dashboardid,
+}: DeleteDashboardProps) {
+  const router = useRouter();
+
+  /* 대시보드 삭제 */
+  const handleDelete = async () => {
+    const dashboardIdNumber = Number(dashboardid);
+    if (!dashboardid) return;
+    try {
+      await axiosInstance.delete(apiRoutes.DashboardDetail(dashboardIdNumber));
+      router.push(`/mydashboard`);
+    } catch (error) {
+      alert("대시보드 삭제에 실패하였습니다 .");
+      console.error("초대 실패:", error);
+
+      window.location.reload();
+    }
+  };
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      width="w-[327px] sm:w-[568px]"
+      height="h-[160px] sm:h-[174px]"
+    >
+      <div className="flex flex-col sm:gap-10 gap-6 text-center">
+        <p className="text-xl mt-1.5">대시보드를 삭제하시겠습니까?</p>
+        <div className="flex justify-between gap-3">
+          <CustomBtn variant="outlineDisabled" onClick={onClose}>
+            취소
+          </CustomBtn>
+          <CustomBtn variant="primary" onClick={handleDelete}>
+            삭제
+          </CustomBtn>
+        </div>
+      </div>
+    </Modal>
+  );
+}

src/components/modal/InviteDashboard.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import Input from "../input/Input";
 import Image from "next/image";
@@ -13,15 +13,55 @@ export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
   const router = useRouter();
   const { dashboardId } = router.query;
 
+  const [invitelist, setInviteList] = useState<{ email: string }[]>([]);
+
   const isValidEmail = (email: string) => {
     return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
   };
 
+  /* 초대내역 목록 api 호출*/
+  useEffect(() => {
+    const fetchMembers = async () => {
+      try {
+        const dashboardIdNumber = Number(dashboardId);
+        const res = await axiosInstance.get(
+          apiRoutes.DashboardInvite(dashboardIdNumber),
+          {
+            params: {
+              dashboardId,
+            },
+          }
+        );
+        if (res.data && Array.isArray(res.data.invitations)) {
+          // 초대내역 리스트
+          const inviteData = res.data.invitations.map(
+            (item: { invitee: { email: string } }) => ({
+              email: item.invitee.email,
+            })
+          );
+          setInviteList(inviteData);
+          console.log("inviteData", inviteData);
+        }
+      } catch (error) {
+        console.error("초대내역 불러오는데 오류 발생:", error);
+      }
+    };
+
+    if (dashboardId) {
+      fetchMembers();
+    }
+  }, [dashboardId]);
+
   /* 초대하기 버튼 */
   const handleSubmit = async () => {
     const dashboardIdNumber = Number(dashboardId);
     if (!dashboardId || !email) return;
 
+    if (invitelist?.some((invite) => invite.email === email)) {
+      toast.error("이미 초대한 멤버입니다.");
+      return;
+    }
+
     try {
       await axiosInstance.post(apiRoutes.DashboardInvite(dashboardIdNumber), {
         email,
@@ -92,7 +132,7 @@ export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
                 border border-[var(--color-gray3)] text-[var(--color-white)] 
             ${!email || !isValidEmail(email) ? "bg-gray-300 cursor-not-allowed" : "bg-[var(--primary)]"}`}
           >
-            생성
+            초대
           </button>
         </div>
       </div>

src/components/modal/NewDashboard.tsx

@@ -47,7 +47,7 @@ export default function NewDashboard({
 
       onCreate?.(response.data);
       onClose?.();
-    } catch (error) {
+    } catch {
       alert("대시보드 생성에 실패했습니다.");
     } finally {
       setLoading(false);

src/components/table/invited/InvitedDashBoard.tsx

@@ -131,18 +131,18 @@ function InvitedList({
                     <span className="text-[#333236]">{invite.nickname}</span>
                   </p>
                   <div className="flex gap-2 mt-2 justify-center">
-                    <button
-                      className="cursor-pointer bg-[var(--primary)] text-white px-3 py-1 rounded-md w-[84px] h-[32px]"
-                      onClick={() => acceptInvite(invite.id)}
-                    >
-                      수락
-                    </button>
                     <button
                       className="cursor-pointer border px-3 py-1 rounded-md w-[84px] h-[32px] text-[var(--primary)] border-[var(--color-gray3)]"
                       onClick={() => rejectInvite(invite.id)}
                     >
                       거절
                     </button>
+                    <button
+                      className="cursor-pointer bg-[var(--primary)] text-white px-3 py-1 rounded-md w-[84px] h-[32px]"
+                      onClick={() => acceptInvite(invite.id)}
+                    >
+                      수락
+                    </button>
                   </div>
                 </div>
 
@@ -154,18 +154,18 @@ function InvitedList({
                   {invite.nickname}
                 </p>
                 <div className="lg:mr-5 gap-2 mt-1 mr-2 justify-between sm:justify-start hidden sm:flex">
-                  <button
-                    className="cursor-pointer bg-[var(--primary)] text-white px-3 py-1 rounded-md w-[84px] h-[32px]"
-                    onClick={() => acceptInvite(invite.id)}
-                  >
-                    수락
-                  </button>
                   <button
                     className="cursor-pointer border px-3 py-1 rounded-md w-[84px] h-[32px] text-[var(--primary)] border-[var(--color-gray3)]"
                     onClick={() => rejectInvite(invite.id)}
                   >
                     거절
                   </button>
+                  <button
+                    className="cursor-pointer bg-[var(--primary)] text-white px-3 py-1 rounded-md w-[84px] h-[32px]"
+                    onClick={() => acceptInvite(invite.id)}
+                  >
+                    수락
+                  </button>
                 </div>
               </div>
             ))

src/pages/dashboard/[dashboardId]/edit.tsx

@@ -6,25 +6,16 @@ import MemberList from "@/components/table/member/MemberList";
 import SideMenu from "@/components/sideMenu/SideMenu";
 import InviteRecords from "@/components/table/InviteRecords";
 import Image from "next/image";
-import axiosInstance from "@/api/axiosInstance";
-import { apiRoutes } from "@/api/apiRoutes";
 import { getDashboards } from "@/api/dashboards";
-
-interface Dashboard {
-  id: number;
-  title: string;
-  color: string;
-  userId: number;
-  createdAt: string;
-  updatedAt: string;
-  createdByMe: boolean;
-}
+import DeleteDashboardModal from "@/components/modal/DeleteDashboardModal";
+import { DashboardType } from "@/types/task";
 
 export default function EditDashboard() {
   const teamId = "13-4";
   const router = useRouter();
-  const [dashboardList, setDashboardList] = useState<Dashboard[]>([]);
+  const [dashboardList, setDashboardList] = useState<DashboardType[]>([]);
   const { dashboardId } = router.query;
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const dashboardIdString = Array.isArray(dashboardId)
     ? dashboardId[0]
     : dashboardId;
@@ -34,19 +25,13 @@ export default function EditDashboard() {
     router.push(`/dashboard/${dashboardId}`);
   };
 
-  /* 대시보드 삭제 */
-  const handleDelete = async () => {
-    const dashboardIdNumber = Number(dashboardId);
-    if (!dashboardId) return;
-    try {
-      await axiosInstance.delete(apiRoutes.DashboardDetail(dashboardIdNumber));
-      router.push(`/mydashboard`);
-    } catch (error) {
-      alert("대시보드 삭제에 실패하였습니다 .");
-      console.error("초대 실패:", error);
+  /* 대시보드 삭제 모달 */
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
 
-      window.location.reload();
-    }
+  const closeModal = () => {
+    setIsModalOpen(false);
   };
 
   /* SideMenu 값 불러오기 */
@@ -102,11 +87,19 @@ export default function EditDashboard() {
           </div>
           <div className="flex mt-15 sm:mt-0 ml-8">
             <button
-              onClick={handleDelete}
+              onClick={openModal}
               className="text-base sm:text-lg cursor-pointer w-[320px] h-[62px] text-black3 rounded-[8px] border-[1px] border-[var(--color-gray3)] hover:scale-105 transition-transform duration-200"
             >
               대시보드 삭제하기
             </button>
+
+            {isModalOpen && (
+              <DeleteDashboardModal
+                isOpen={isModalOpen}
+                onClose={closeModal}
+                dashboardid={String(dashboardId)}
+              />
+            )}
           </div>
         </div>
       </div>

src/types/dashboard.ts

@@ -2,8 +2,8 @@ export interface DashboardType {
   id: number;
   title: string;
   color: string;
+  userId: number;
   createdAt: string;
   updatedAt: string;
   createdByMe: boolean;
-  userId: number;
 }