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

hhjin1 · web-flow · commit 9a0308efb169 · 2025-04-02T14:48:00.000+09:00
[Fix] Page: edit 디자인 기능 수정 / axios 에러 핸들링
diff --git a/src/components/columnCard/Column.tsx b/src/components/columnCard/Column.tsx
@@ -4,8 +4,8 @@ import Image from "next/image";
 import { CardType } from "@/types/task";
 import TodoModal from "@/components/modalInput/ToDoModal";
 import TodoButton from "@/components/button/TodoButton";
-import ColumnManageModal from "@/components/columnCard/ColumnManageModal";
-import ColumnDeleteModal from "@/components/columnCard/ColumnDeleteModal";
+import ColumnManageModal from "@/components/columncard/ColumnManageModal";
+import ColumnDeleteModal from "@/components/columncard/ColumnDeleteModal";
 import { updateColumn, deleteColumn } from "@/api/columns";
 import { getDashboardMembers, getCardDetail } from "@/api/card";
 import { MemberType } from "@/types/users";
diff --git a/src/components/modal/ChangeBebridge.tsx b/src/components/modal/ChangeBebridge.tsx
@@ -9,7 +9,7 @@ import "react-toastify/dist/ReactToastify.css";
 
 const ChangeBebridge = () => {
   const router = useRouter();
-  const { dashboardId } = router.query; // dashboardId 쿼리값 받기
+  const { dashboardId } = router.query;
   const [dashboardDetail, setdashboardDetail] = useState<{ title?: string }>(
     {}
   );
@@ -33,7 +33,6 @@ const ChangeBebridge = () => {
         if (res.data) {
           const dashboardData = res.data;
           setdashboardDetail(dashboardData);
-          console.log("dashboardData", dashboardData);
         }
       } catch (error) {
         console.error("대시보드 상세내용 불러오는데 오류 발생:", error);
@@ -46,7 +45,7 @@ const ChangeBebridge = () => {
 
   /* 대시보드 이름 변경 버튼 */
   const handleUpdate = async () => {
-    const dashboardIdNumber = Number(dashboardId); // string dashboradId 값 number로 변경
+    const dashboardIdNumber = Number(dashboardId);
     if (!dashboardId || selected === null) return;
 
     const payload = {
@@ -55,32 +54,31 @@ const ChangeBebridge = () => {
     };
 
     try {
-      const response = await axiosInstance.put(
+      await axiosInstance.put(
         apiRoutes.dashboardDetail(dashboardIdNumber),
         payload
       );
-      console.log("업데이트 성공:", response.data);
+
       toast.success("대시보드가 업데이트되었습니다!");
       setTimeout(() => {
         window.location.reload();
       }, 100);
     } catch (error) {
-      console.error("업데이트 실패:", error);
       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">
+    <div className="lg:w-[620px] lg:h-[344px] sm:w-[544px] sm:h-[344px] w-[284px] 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">
+      <h2 className="text-[20px] sm:text-[24px] font-bold">
         {dashboardDetail.title}
       </h2>
       <Input
         type="text"
         onChange={setTitle}
         label="대시보드 이름"
-        labelClassName="text-lg sm:text-base text-black3 mt-6"
+        labelClassName="text-[16px] sm:text-[18px] text-black3 mt-6"
         placeholder="뉴프로젝트"
         className="max-w-[620px] mb-1"
       />
@@ -108,9 +106,9 @@ const ChangeBebridge = () => {
       </div>
       <div className="mt-8 flex">
         <button
-          onClick={handleUpdate} // 버튼 클릭 시 handleUpdate 함수 호출
+          onClick={handleUpdate}
           disabled={selected === null} // color가 없으면 버튼 비활성화
-          className={`cursor-pointer sm:w-[564px] sm:h-[54px] w-[252px] h-[54px] rounded-[8px] border border-[var(--color-gray3)] bg-[var(--primary)] text-[var(--color-white)] ${selected === null ? "bg-gray-300 cursor-not-allowed" : "bg-[var(--primary)]"}`}
+          className={`cursor-pointer sm:w-[572px] sm:h-[54px] w-[252px] h-[54px] rounded-[8px] border border-[var(--color-gray3)] bg-[var(--primary)] text-[var(--color-white)] ${selected === null ? "bg-gray-300 cursor-not-allowed" : "bg-[var(--primary)]"}`}
         >
           변경
         </button>
diff --git a/src/components/modal/DeleteDashboardModal.tsx b/src/components/modal/DeleteDashboardModal.tsx
@@ -3,6 +3,7 @@ import { CustomBtn } from "../button/CustomButton";
 import { useRouter } from "next/router";
 import axiosInstance from "@/api/axiosInstance";
 import { apiRoutes } from "@/api/apiRoutes";
+import { toast } from "react-toastify";
 
 type DeleteDashboardProps = {
   isOpen: boolean;
@@ -25,8 +26,7 @@ export default function DeleteDashboardModal({
       await axiosInstance.delete(apiRoutes.dashboardDetail(dashboardIdNumber));
       router.push(`/mydashboard`);
     } catch (error) {
-      alert("대시보드 삭제에 실패하였습니다 .");
-      console.error("초대 실패:", error);
+      toast.error("대시보드 삭제에 실패하였습니다 .");
 
       window.location.reload();
     }
diff --git a/src/components/modal/DeleteMemberModal.tsx b/src/components/modal/DeleteMemberModal.tsx
@@ -0,0 +1,51 @@
+import { Modal } from "./Modal";
+import { CustomBtn } from "../button/CustomButton";
+import axiosInstance from "@/api/axiosInstance";
+import { apiRoutes } from "@/api/apiRoutes";
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+type DeleteMemberdProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  id: number;
+};
+
+export default function DeleteDashboardModal({
+  isOpen,
+  onClose,
+  id,
+}: DeleteMemberdProps) {
+  /* 멤버삭제 */
+  const handleDelete = async (id: number) => {
+    try {
+      await axiosInstance.delete(apiRoutes.memberDetail(id));
+      window.location.reload();
+    } catch (error) {
+      toast.error("구성원 삭제에 실패하였습니다.");
+      console.error("구성원 삭제 실패:", error);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      width="w-[327px] sm:w-[568px]"
+      height="h-[160px] sm:h-[174px]"
+      backgroundClassName="bg-black/30 z-50"
+    >
+      <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(id)}>
+            삭제
+          </CustomBtn>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/modal/InviteDashboard.tsx b/src/components/modal/InviteDashboard.tsx
@@ -40,7 +40,6 @@ export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
             })
           );
           setInviteList(inviteData);
-          console.log("inviteData", inviteData);
         }
       } catch (error) {
         console.error("초대내역 불러오는데 오류 발생:", error);
@@ -66,30 +65,30 @@ export default function InviteDashboard({ onClose }: { onClose?: () => void }) {
       await axiosInstance.post(apiRoutes.dashboardInvite(dashboardIdNumber), {
         email,
       });
-      onClose?.(); // 함수 있을때만 실행
-      window.location.reload();
-    } catch (error) {
-      console.error("초대 실패:", error);
 
+      toast.success("초대를 성공했습니다.");
+
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    } catch (error) {
       if (error instanceof AxiosError) {
         if (error.response?.status === 403) {
           toast.error("초대 권한이 없습니다.");
+          return;
         } else if (error.response?.status === 404) {
           toast.error("대시보드 또는 유저가 존재하지 않습니다.");
+          return;
         } else if (error.response?.status === 409) {
           toast.error("이미 대시보드에 초대된 멤버입니다.");
+          return;
         } else {
           toast.error("오류가 발생했습니다.");
+          return;
         }
-
-        /** Next.js가 감지하기 전에 강제 새로고침 실행
-         * @fixme 추후 더 좋은 방법 있으면 변경
-         * setTimeout(() => {
-         * window.location.reload();
-         * }, 50);
-         */
       } else {
         toast.error("네트워크 오류가 발생했습니다.");
+        return;
       }
     }
   };
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
@@ -21,6 +21,8 @@ interface ModalProps {
   buttonContainerClassName?: string;
   width?: string;
   height?: string;
+  backgroundClassName?: string; // 배경색 커스터마이징을 위한 클래스 추가
+  backgroundStyle?: React.CSSProperties; // 배경 스타일을 직접 지정할 수 있는 스타일 추가
 }
 
 export function Modal({
@@ -34,12 +36,15 @@ export function Modal({
   buttonContainerClassName = "",
   width = "w-[568px]", // 기본 너비 설정, 필요 시 변경 가능
   height = "h-[266px]", // 기본 높이 설정, 필요 시 변경 가능
+  backgroundClassName = "bg-black/35",
+  backgroundStyle = {},
 }: ModalProps) {
   if (!isOpen) return null;
 
   return createPortal(
     <div
-      className="fixed inset-0 flex items-center justify-center bg-black/35 z-50"
+      className={`fixed inset-0 flex items-center justify-center ${backgroundClassName} z-50`}
+      style={backgroundStyle} // 배경 스타일 적용
       onClick={onClose}
     >
       <div
diff --git a/src/components/table/InviteRecords.tsx b/src/components/table/InviteRecords.tsx
@@ -37,7 +37,6 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
             })
           );
           setInviteList(inviteData);
-          console.log("inviteData", inviteData);
         }
       } catch (error) {
         console.error("초대내역 불러오는데 오류 발생:", error);
@@ -63,13 +62,17 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
       if (error instanceof AxiosError) {
         if (error.response?.status === 403) {
           toast.error("대시보드 초대 취소 권한이 없습니다.");
+          return;
         } else if (error.response?.status === 404) {
           toast.error("대시보드가 존재하지 않습니다.");
+          return;
         } else {
           toast.error("오류가 발생했습니다.");
+          return;
         }
       } else {
         toast.error("네트워크 오류가 발생했습니다.");
+        return;
       }
     }
   };
@@ -98,11 +101,13 @@ 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] ">
+    <div className="relative bg-white p-4 rounded-lg  lg:w-[620px] lg:h-[477px] w-[284px] h-[406px] sm:w-[544px] sm:h-[477px]">
       <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>
+        <p className="md:text-[24px] text-[20px] text-xl font-bold">
+          초대 내역
+        </p>
 
         {/* 페이지네이션 + 초대하기 버튼 컨테이너 */}
         <div className="flex flex-col sm:flex-row items-end sm:items-center gap-2">
@@ -117,7 +122,7 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
           {/* 초대하기 버튼 (모바일에서 페이지네이션 아래로 이동) */}
           <button
             onClick={() => setIsModalOpen(true)}
-            className="cursor-pointer sm:text-[14px] text-[12px] sm:w-[105px] w-[86px] sm:h-[32px] h-[26px] rounded-[4px] bg-[#5534DA] text-white flex items-center justify-center gap-2"
+            className="cursor-pointer sm:text-[14px] text-[12px] sm:w-[105px] w-[86px] sm:h-[32px] h-[26px] rounded-[4px] bg-[#5534DA] text-white flex items-center justify-center gap-2 lg:mr-3 "
           >
             <img src="/svgs/add_white_box.svg" alt="icon" className="w-4 h-4" />
             초대하기
@@ -129,12 +134,12 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
       </div>
 
       {/* 구성원 리스트 */}
-      <p className="sm:text-base text-sm text-gray-500 mt-6 ml-4">이메일</p>
+      <p className="sm:text-base text-sm text-gray-500 mt-6">이메일</p>
       <ul>
         {paginatedInvitation.map((invite, index) => (
           <li
             key={index}
-            className={`flex items-center justify-between p-4 ${
+            className={`flex items-center justify-between mt-3 pb-4 ${
               index !== paginatedInvitation.length - 1
                 ? "border-b border-gray-200"
                 : ""
@@ -146,7 +151,7 @@ const InviteRecords = ({ dashboardId }: { dashboardId: string }) => {
             </div>
             <button
               onClick={() => handleCancel(invite.id)}
-              className="cursor-pointer font-medium sm:text-sm text-xs h-[32px] sm:h-[32px] w-[52px] sm:w-[84px] md:w-[84px] border border-gray-300 text-indigo-600 px-2 py-1 rounded-md hover:bg-gray-100"
+              className="cursor-pointer font-medium sm:text-sm text-xs h-[32px] sm:h-[32px] w-[52px] sm:w-[84px] md:w-[84px] border border-gray-300 text-indigo-600 px-2 py-1 rounded-md hover:bg-gray-100 lg:mr-3"
             >
               취소
             </button>
diff --git a/src/components/table/TablePagination.tsx b/src/components/table/TablePagination.tsx
@@ -15,7 +15,7 @@ const Pagination: React.FC<PaginationProps> = ({
 }) => {
   return (
     <div className="flex items-center">
-      <p className="relative -translate-y-[10px] sm:text-sm text-xs text-gray-700 mt-4 text-center mr-3">
+      <p className="relative -translate-y-[10px] sm:text-xs text-sm text-gray-700 mt-4 text-center mr-3">
         {totalPages} 페이지 중 {currentPage}
       </p>
       <div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
diff --git a/src/components/table/invited/InvitedDashBoard.tsx b/src/components/table/invited/InvitedDashBoard.tsx
@@ -66,13 +66,11 @@ function InvitedList({
         apiRoutes.invitationDetail(inviteId),
         payload
       );
-      console.log("대시보드 수락 성공:", response.data);
       toast.success("대시보드 수락 성공");
       setTimeout(() => {
         window.location.reload();
       }, 100);
     } catch (error) {
-      console.error("대시보드 수락 실패:", error);
       toast.error("대시보드 수락 실패");
     }
   };
@@ -88,13 +86,11 @@ function InvitedList({
         apiRoutes.invitationDetail(inviteId),
         payload
       );
-      console.log("대시보드 거절 성공:", response.data);
       toast.success("대시보드 거절 성공");
       setTimeout(() => {
         window.location.reload();
       }, 100);
     } catch (error) {
-      console.error("대시보드 거절 실패:", error);
       toast.error("대시보드 거절 실패");
     }
   };
diff --git a/src/components/table/member/MemberList.tsx b/src/components/table/member/MemberList.tsx
diff --git a/src/pages/dashboard/[dashboardId]/edit.tsx b/src/pages/dashboard/[dashboardId]/edit.tsx
