Merge pull request #169 from codeit-sprint-part3-6team/#59_페이지_대시보드_수정

Author: whdjh

src/components/product/edit/InviteTitle/InviteList.module.css

@@ -18,6 +18,50 @@
   border-top: 1px solid var(--gray-bright); 
 }
 
+.modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-section {
+  background: var(--gray-bright);
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.modal-button {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-around;
+}
+
+.cancel-button {
+  background: var(--gray-medium);
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.confirm-button {
+  background: var(--violet);
+  color: var(--white);
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
 @media screen and (max-width: 743px) {
   .container {
     padding-left: 20px;

src/components/product/edit/InviteTitle/InviteList.tsx

@@ -1,9 +1,38 @@
+import { useState } from 'react';
 import CDSButton from '@/components/common/button/CDSButton';
 import { Invitaion } from '@/type/dashboard';
 import deleteInvitation from '@/lib/editdashboard/deleteDashboardsInvitations';
 import { useRouter } from 'next/router';
 import styles from './InviteList.module.css';
 
+function ConfirmModal({
+  isOpen,
+  onClose,
+  onConfirm,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}) {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles['modal-container']}>
+      <div className={styles['modal-section']}>
+        <h3>정말 초대를 취소하시겠습니까?</h3>
+        <div className={styles['modal-button']}>
+          <button onClick={onClose} className={styles['cancel-button']}>
+            취소
+          </button>
+          <button onClick={onConfirm} className={styles['confirm-button']}>
+            확인
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 interface InviteListProps {
   members: Invitaion[];
   setMembers: React.Dispatch<React.SetStateAction<Invitaion[]>>;
@@ -12,34 +41,54 @@ interface InviteListProps {
 export default function InviteList({ members, setMembers }: InviteListProps) {
   const router = useRouter();
   const dashboardId = Number(router.query.id);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedInvitationId, setSelectedInvitationId] = useState<
+    number | null
+  >(null);
+
+  const handleDeleteClick = async () => {
+    if (selectedInvitationId === null) return;
 
-  const handleDeleteClick = async (invitationId: number) => {
     try {
-      await deleteInvitation(dashboardId, invitationId);
+      await deleteInvitation(dashboardId, selectedInvitationId);
       setMembers((prevMembers) =>
-        prevMembers.filter((member) => member.id !== invitationId),
+        prevMembers.filter((member) => member.id !== selectedInvitationId),
       );
     } catch (error) {
       throw new Error(`${error}`);
+    } finally {
+      closeModal();
     }
   };
 
+  const openModal = (invitationId: number) => {
+    setSelectedInvitationId(invitationId);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setSelectedInvitationId(null);
+  };
+
   return (
     <div>
       {members?.map((member, index) => (
         <div key={member.id}>
           <div className={styles.container}>
             <h1 className={styles.title}>{member.invitee.email}</h1>
-            <CDSButton
-              btnType="delete"
-              onClick={() => handleDeleteClick(member.id)}
-            >
+            <CDSButton btnType="delete" onClick={() => openModal(member.id)}>
               취소
             </CDSButton>
           </div>
           {index < members.length - 1 && <hr className={styles.line} />}
         </div>
       ))}
+      <ConfirmModal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        onConfirm={handleDeleteClick}
+      />
     </div>
   );
 }

src/components/product/edit/InviteTitle/InviteTitle.tsx

@@ -53,7 +53,6 @@ export default function InviteTitle() {
     fetchInvitations();
   }, [router.query.id, currentPage, isModalOpen]);
 
-  // 초대 요청을 보내고 alert
   useEffect(() => {
     if (!isModalOpen && alertMessage) {
       toast.success(alertMessage);
@@ -126,7 +125,7 @@ export default function InviteTitle() {
       <div className={styles['name-section']}>
         <h2 className={styles['sub-title']}>이메일</h2>
         <div className={styles['list']}>
-           <InviteList members={members} setMembers={setMembers} />
+          <InviteList members={members} setMembers={setMembers} />
         </div>
       </div>
       <InviteModal

src/components/product/edit/MainTitle/MainTitle.module.css

@@ -40,6 +40,50 @@
   max-width: 100%;
 }
 
+.modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-section {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.modal-button {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-around;
+}
+
+.cancel-button {
+  background: var(--gray-medium);
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.confirm-button {
+  background: var(--violet);
+  color: var(--white);
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
 @media screen and (max-width: 1199px) {
   .title-container {
     width: 544px;

src/components/product/edit/MainTitle/MainTitle.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/router';
 import CDSButton from '@/components/common/button/CDSButton';
 import TitleTagInput from '@/components/common/input/info-input/TitleTagInput';
@@ -8,6 +8,36 @@ import styles from './MainTitle.module.css';
 import { toast } from 'react-toastify';
 import useSidebarDashboards from '@/hooks/useSidebar';
 
+function EditConfirmModal({
+  isOpen,
+  onClose,
+  onConfirm,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}) {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className={styles['modal-container']}>
+      <div className={styles['modal-section']}>
+        <h3>제목 또는 색상을 변경하시겠습니까?</h3>
+        <div className={styles['modal-button']}>
+          <button onClick={onClose} className={styles['cancel-button']}>
+            취소
+          </button>
+          <button onClick={onConfirm} className={styles['confirm-button']}>
+            확인
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 interface MainTitleProps {
   dashboardtitle: string | null;
   dashboardColor: string | null;
@@ -20,31 +50,40 @@ export default function MainTitle({
   const [selectedColor, setSelectedColor] = useState<string>(dashboardColor);
   const [title, setTitle] = useState(dashboardtitle || '');
   const [newTitle, setNewTitle] = useState(dashboardtitle || '');
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const router = useRouter();
   const dashboardId = Number(router.query.id);
-
   const { fetchSidebarDashboards } = useSidebarDashboards();
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setTitle(e.target.value);
   };
 
-  const handleEditClick = async () => {
+  const handleEditClick = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const confirmEdit = async () => {
     try {
       const updatedDashboard = await putDashboards({
         title,
         color: selectedColor,
         dashboardId,
       });
-
       setNewTitle(updatedDashboard.title);
       setTitle(updatedDashboard.title);
       setSelectedColor(updatedDashboard.color);
-
       toast.success('변경 사항이 저장되었습니다.');
       fetchSidebarDashboards(1);
     } catch (error) {
+      toast.error('변경에 실패했습니다.');
       throw new Error(`${error}`);
+    } finally {
+      closeModal();
     }
   };
 
@@ -78,6 +117,11 @@ export default function MainTitle({
           </CDSButton>
         </div>
       </div>
+      <EditConfirmModal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        onConfirm={confirmEdit}
+      />
     </div>
   );
 }

src/components/product/edit/MemberTitle/MemberList.module.css

@@ -18,6 +18,50 @@
   border-top: 1px solid var(--gray-bright); 
 }
 
+.modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-section {
+  background: var(--gray-bright);
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.modal-button {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-around;
+}
+
+.cancel-button {
+  background: var(--gray-medium);
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.confirm-button {
+  background: var(--violet);
+  color: var(--white);
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
 @media screen and (max-width: 743px) {
   .container {
     margin-bottom: 12px;