✨ Feat: 로그인 폼, 회원가입 폼 모달 연결 및 모달 리팩토링

src/components/Modal/ColumnDeleteModal.tsx

@@ -1,18 +1,10 @@
-import { MouseEventHandler } from 'react';
-
 import ModalActionButton from '@/components/Button/ModalActionButton';
 import ModalCancelButton from '@/components/Button/ModalCancelButton';
 import useModal from '@/hooks/useModal';
 import { deleteColumn } from '@/services/deleteService';
 import { ColumnDeleteModalProps } from '@/types/Modal.interface';
 
-export default function ColumnDeleteModal({
-  handleCloseModal,
-  modalProps,
-}: {
-  handleCloseModal: MouseEventHandler<HTMLButtonElement>;
-  modalProps: ColumnDeleteModalProps;
-}) {
+export default function ColumnDeleteModal({ modalProps }: { modalProps: ColumnDeleteModalProps }) {
   const { closeModal } = useModal();
   const handleDeleteButton = async () => {
     try {
@@ -31,7 +23,7 @@ export default function ColumnDeleteModal({
         </h1>
       </div>
       <div className='flex justify-between md:justify-end md:gap-[15px]'>
-        <ModalCancelButton onClick={handleCloseModal}>취소</ModalCancelButton>
+        <ModalCancelButton onClick={closeModal}>취소</ModalCancelButton>
         <ModalActionButton className='bg-red hover:bg-red-hover' onClick={handleDeleteButton}>
           삭제
         </ModalActionButton>

src/components/Modal/ColumnModifyModal.tsx

@@ -1,28 +1,22 @@
-import { MouseEventHandler, useState } from 'react';
+import { useState } from 'react';
 
 import ModalActionButton from '@/components/Button/ModalActionButton';
 import ModalCancelButton from '@/components/Button/ModalCancelButton';
 import useModal from '@/hooks/useModal';
 import { putColumn } from '@/services/putService';
 import { ColumnModifyModalProps } from '@/types/Modal.interface';
 
-export default function ColumnModifyModal({
-  handleCloseModal,
-  modalProps,
-}: {
-  handleCloseModal: MouseEventHandler<HTMLButtonElement>;
-  modalProps: ColumnModifyModalProps;
-}) {
+export default function ColumnModifyModal({ modalProps }: { modalProps: ColumnModifyModalProps }) {
   const id = modalProps?.columnId;
   const [title, setTitle] = useState(modalProps?.columnTitle || '');
-  const { openModal } = useModal();
+  const { openModal, closeModal } = useModal();
 
   const handleModifyButton = async () => {
     try {
       await putColumn(id, { title });
-      openModal({ type: 'columnModifySuccess' });
+      openModal({ type: 'textModal', modalProps: { text: '컬럼이 성공적으로 변경되었습니다.' } });
     } catch {
-      openModal({ type: 'columnModifyFailed' });
+      openModal({ type: 'textModal', modalProps: { text: '컬럼이 변경되지 않았습니다.' } });
     }
   };
 
@@ -54,7 +48,7 @@ export default function ColumnModifyModal({
           </button>
         </div>
         <div className='flex justify-between md:justify-end md:gap-[15px]'>
-          <ModalCancelButton onClick={handleCloseModal}>취소</ModalCancelButton>
+          <ModalCancelButton onClick={closeModal}>취소</ModalCancelButton>
           <ModalActionButton disabled={!(title?.length > 0)} onClick={handleModifyButton}>
             변경
           </ModalActionButton>

src/components/Modal/DefaultModal.tsx

@@ -1,12 +1,13 @@
-import { MouseEventHandler } from 'react';
-
 import ModalCancelButton from '@/components/Button/ModalCancelButton';
+import useModal from '@/hooks/useModal';
+
+export default function DefaultModal() {
+  const { closeModal } = useModal();
 
-export default function DefaultModal({ handleCloseModal }: { handleCloseModal: MouseEventHandler<HTMLButtonElement> }) {
   return (
     <div className='flex flex-col rounded-[8px] bg-white px-[28px] py-[32px]'>
       <h1>DEFAULT MODAL</h1>
-      <ModalCancelButton onClick={handleCloseModal}>취소</ModalCancelButton>
+      <ModalCancelButton onClick={closeModal}>취소</ModalCancelButton>
     </div>
   );
 }

src/components/Modal/DeleteDashboardModal.tsx

@@ -1,18 +1,10 @@
-import { MouseEventHandler } from 'react';
-
 import ModalActionButton from '@/components/Button/ModalActionButton';
 import ModalCancelButton from '@/components/Button/ModalCancelButton';
 import useModal from '@/hooks/useModal';
 import { deleteDashboard } from '@/services/deleteService';
 import { DeleteDashboardModalProps } from '@/types/Modal.interface';
 
-export default function DeleteDashboardModal({
-  handleCloseModal,
-  modalProps,
-}: {
-  handleCloseModal: MouseEventHandler<HTMLButtonElement>;
-  modalProps: DeleteDashboardModalProps;
-}) {
+export default function DeleteDashboardModal({ modalProps }: { modalProps: DeleteDashboardModalProps }) {
   const { closeModal } = useModal();
   const handleDeleteButton = async () => {
     try {
@@ -31,7 +23,7 @@ export default function DeleteDashboardModal({
         </h1>
       </div>
       <div className='flex justify-between md:justify-end md:gap-[15px]'>
-        <ModalCancelButton onClick={handleCloseModal}>취소</ModalCancelButton>
+        <ModalCancelButton onClick={closeModal}>취소</ModalCancelButton>
         <ModalActionButton className='bg-red hover:bg-red-hover' onClick={handleDeleteButton}>
           삭제
         </ModalActionButton>

src/components/Modal/InviteMemberModal.tsx

@@ -1,20 +1,14 @@
 import { AxiosError } from 'axios';
-import { MouseEventHandler, useState, ChangeEvent } from 'react';
+import { useState, ChangeEvent } from 'react';
 
 import ModalActionButton from '@/components/Button/ModalActionButton';
 import ModalCancelButton from '@/components/Button/ModalCancelButton';
 import useModal from '@/hooks/useModal';
 import { postMemberInvite } from '@/services/postService';
 import { InviteMemberModalProps } from '@/types/Modal.interface';
 
-export default function InviteMemberModal({
-  handleCloseModal,
-  modalProps,
-}: {
-  handleCloseModal: MouseEventHandler<HTMLButtonElement>;
-  modalProps: InviteMemberModalProps;
-}) {
-  const { openModal } = useModal();
+export default function InviteMemberModal({ modalProps }: { modalProps: InviteMemberModalProps }) {
+  const { openModal, closeModal } = useModal();
   const [email, setEmail] = useState('');
   const [isValid, setIsValid] = useState(true);
   const [errorMessage, setErrorMessage] = useState('');
@@ -35,7 +29,7 @@ export default function InviteMemberModal({
   const handleMemberInviteButton = async () => {
     try {
       await postMemberInvite(modalProps.dashboardId, { email });
-      openModal({ type: 'inviteMemberSuccess' });
+      openModal({ type: 'textModal', modalProps: { text: '해당 멤버를 초대하였습니다!' } });
     } catch (error) {
       if (error instanceof AxiosError) {
         setErrorMessage(error.response?.data.message || '초대 중 에러가 발생했습니다.');
@@ -60,7 +54,7 @@ export default function InviteMemberModal({
         {errorMessage && <p className='mt-2 text-[14px] text-red'>{errorMessage}</p>}
       </div>
       <div className='flex justify-between md:justify-end md:gap-[15px]'>
-        <ModalCancelButton onClick={handleCloseModal}>취소</ModalCancelButton>
+        <ModalCancelButton onClick={closeModal}>취소</ModalCancelButton>
         <ModalActionButton disabled={email.length === 0 || !isValid} onClick={handleMemberInviteButton}>
           초대
         </ModalActionButton>

src/components/Modal/NewColumnModal.tsx

@@ -1,27 +1,26 @@
-import { MouseEventHandler, useState } from 'react';
+import { useState } from 'react';
 
 import ModalActionButton from '@/components/Button/ModalActionButton';
 import ModalCancelButton from '@/components/Button/ModalCancelButton';
 import useModal from '@/hooks/useModal';
 import { postNewColumn } from '@/services/postService';
 
 interface NewColumnModalProps {
-  handleCloseModal: MouseEventHandler<HTMLButtonElement>;
   modalProps: { dashboardId: number };
 }
 
-export default function NewColumnModal({ handleCloseModal, modalProps }: NewColumnModalProps) {
-  const { openModal } = useModal();
+export default function NewColumnModal({ modalProps }: NewColumnModalProps) {
+  const { openModal, closeModal } = useModal();
 
   const [column, setColumn] = useState('');
 
   const { dashboardId } = modalProps;
   const handlePostNewColumn = async () => {
     try {
       await postNewColumn({ title: column, dashboardId: dashboardId });
-      openModal({ type: 'newColumnSuccess' });
+      openModal({ type: 'textModal', modalProps: { text: '새로운 컬럼이 생성되었습니다!' } });
     } catch (error) {
-      openModal({ type: 'newColumnFailed' });
+      openModal({ type: 'textModal', modalProps: { text: '컬럼 생성을 실패하였습니다.' } });
     }
   };
 
@@ -40,7 +39,7 @@ export default function NewColumnModal({ handleCloseModal, modalProps }: NewColu
         />
       </div>
       <div className='flex justify-between md:justify-end md:gap-[15px]'>
-        <ModalCancelButton onClick={handleCloseModal}>취소</ModalCancelButton>
+        <ModalCancelButton onClick={closeModal}>취소</ModalCancelButton>
         <ModalActionButton disabled={column.length === 0} onClick={handlePostNewColumn}>
           생성
         </ModalActionButton>

src/components/Modal/NewDashboardModal.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { MouseEventHandler, useState } from 'react';
+import { useState } from 'react';
 
 import ModalActionButton from '@/components/Button/ModalActionButton';
 import ModalCancelButton from '@/components/Button/ModalCancelButton';
@@ -14,19 +14,15 @@ interface DashboardState {
   color: string;
 }
 
-export default function NewDashboardModal({
-  handleCloseModal,
-}: {
-  handleCloseModal: MouseEventHandler<HTMLButtonElement>;
-}) {
+export default function NewDashboardModal() {
   const [value, setValue] = useState<DashboardState>({
     title: '',
     color: DASHBOARD_COLOR_OBJ['green'],
   });
 
   const [selectedColor, setSelectedColor] = useState<DashboardColor>('green');
 
-  const { openModal } = useModal();
+  const { openModal, closeModal } = useModal();
 
   const handleColorSelect = (color: DashboardColor) => {
     setSelectedColor(color);
@@ -39,9 +35,9 @@ export default function NewDashboardModal({
   const handlePostDashboard = async () => {
     try {
       await postNewDashboard(value);
-      openModal({ type: 'newDashboardSuccess' });
+      openModal({ type: 'textModal', modalProps: { text: '새로운 대시보드가 생성되었습니다!' } });
     } catch {
-      openModal({ type: 'newDashboardFailed' });
+      openModal({ type: 'textModal', modalProps: { text: '대시보드 생성을 실패하였습니다.' } });
     }
   };
 
@@ -76,7 +72,7 @@ export default function NewDashboardModal({
         ))}
       </div>
       <div className='flex justify-between md:justify-end md:gap-[15px]'>
-        <ModalCancelButton onClick={handleCloseModal}>취소</ModalCancelButton>
+        <ModalCancelButton onClick={closeModal}>취소</ModalCancelButton>
         <ModalActionButton disabled={value.title.length === 0} onClick={handlePostDashboard}>
           생성
         </ModalActionButton>

src/components/Modal/TextModal.tsx

@@ -1,22 +1,17 @@
-import { MouseEventHandler } from 'react';
-
 import ModalActionButton from '@/components/Button/ModalActionButton';
+import useModal from '@/hooks/useModal';
 import { TextModalProps } from '@/types/Modal.interface';
 
-export default function TextModal({
-  handleCloseModal,
-  modalProps,
-}: {
-  handleCloseModal: MouseEventHandler<HTMLButtonElement>;
-  modalProps: TextModalProps;
-}) {
+export default function TextModal({ modalProps }: { modalProps: TextModalProps }) {
+  const { closeModal } = useModal();
+
   return (
     <div className='h-[220px] w-[327px] rounded-[8px] bg-white px-[28px] py-[32px] md:h-[250px] md:w-[540px]'>
       <div className='relative flex size-full items-center justify-center'>
         <h1 className='mb-[15px] text-[16px] text-black-33 md:text-[18px]'>{modalProps.text}</h1>
         <ModalActionButton
           className='absolute bottom-0 right-1/2 translate-x-1/2 md:right-0 md:translate-x-0'
-          onClick={handleCloseModal}
+          onClick={closeModal}
         >
           확인
         </ModalActionButton>