♻️ refactor(#121, #114, #21): 컬럼 수정 모달 리팩토링 및 적용

src/components/Modal/ModifyColumnModal.tsx

@@ -0,0 +1,105 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useRouter } from 'next/router';
+import { useState } 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 { putColumn } from '@/services/putService';
+import { ModifyColumnModalProps } from '@/types/Modal.interface';
+
+export default function ModifyColumnModal({ columnId, columnTitle = '', columns }: ModifyColumnModalProps) {
+  const { openModal, closeModal } = useModal();
+  const queryClient = useQueryClient();
+
+  const router = useRouter();
+  const { id: dashboardId } = router.query;
+  const [title, setTitle] = useState(columnTitle);
+  const [errorMessage, setErrorMessage] = useState('');
+  const columnNames = columns.map((column) => column.title);
+
+  const handleValidCheck = () => {
+    if (!title) {
+      setErrorMessage('이름을 입력해주세요');
+    } else if (title.length > 10) {
+      setErrorMessage('10자 이내로 입력해주세요');
+    } else if (columnNames.includes(title)) {
+      setErrorMessage('중복된 컬럼 이름입니다');
+    } else {
+      setErrorMessage('');
+    }
+  };
+
+  const handleModifyClick = async () => {
+    try {
+      await putColumn(columnId, { title });
+      queryClient.invalidateQueries({ queryKey: ['columns', dashboardId] });
+      openModal({ type: 'notification', modalProps: { text: '컬럼이 성공적으로 변경되었습니다.' } });
+    } catch (error) {
+      if (error instanceof AxiosError) {
+        setErrorMessage(error.response?.data.message || '컬럼 변경을 실패하였습니다.');
+      } else {
+        setErrorMessage('컬럼 변경을 실패하였습니다.');
+        console.log(error);
+      }
+    }
+  };
+
+  const handleDeleteClick = async () => {
+    try {
+      await deleteColumn(columnId);
+      queryClient.invalidateQueries({ queryKey: ['columns', dashboardId] });
+      openModal({ type: 'notification', modalProps: { text: '컬럼이 삭제되었습니다.' } });
+    } catch (error) {
+      if (error instanceof AxiosError && error.response?.data.message) {
+        openModal({ type: 'notification', modalProps: { text: error.response.data.message } });
+      } else {
+        openModal({ type: 'notification', modalProps: { text: '컬럼이 삭제에 실패했습니다.' } });
+        console.log(error);
+      }
+    }
+  };
+
+  return (
+    <div className='modal w-[327px] md:w-[540px]'>
+      <h2 className='section-title'>컬럼 관리</h2>
+
+      <div className='my-6 md:mb-7 md:mt-8'>
+        <label className='label'>이름</label>
+        <input
+          type='text'
+          className={`input mt-[10px] ${errorMessage ? 'border-2 border-red' : ''}`}
+          placeholder='변경될 컬럼 이름을 입력해 주세요'
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          onBlur={handleValidCheck}
+        />
+        {errorMessage && <p className='mt-2 text-sm text-red'>{errorMessage}</p>}
+      </div>
+
+      <div className='flex flex-col gap-4 md:flex-row md:items-end md:justify-between'>
+        <button
+          className='text-left text-sm text-gray-9f underline hover:font-bold active:text-gray-78'
+          onClick={() => {
+            openModal({
+              type: 'confirm',
+              modalProps: { text: '컬럼의 모든 카드가 삭제됩니다.', onActionClick: handleDeleteClick },
+            });
+          }}
+        >
+          삭제하기
+        </button>
+        <div className='flex justify-between md:justify-end md:gap-3'>
+          <ModalCancelButton type='button' onClick={closeModal}>
+            취소
+          </ModalCancelButton>
+          <ModalActionButton type='button' onClick={handleModifyClick} disabled={!!errorMessage}>
+            변경
+          </ModalActionButton>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Modal/NewColumnModal.tsx

@@ -23,6 +23,8 @@ export default function NewColumnModal({ columns }: NewColumnModalProps) {
   const handleValidCheck = () => {
     if (!name) {
       setErrorMessage('이름을 입력해주세요');
+    } else if (name.length > 10) {
+      setErrorMessage('10자 이내로 입력해주세요');
     } else if (columnNames.includes(name)) {
       setErrorMessage('중복된 컬럼 이름입니다');
     } else {
@@ -36,10 +38,10 @@ export default function NewColumnModal({ columns }: NewColumnModalProps) {
       queryClient.invalidateQueries({ queryKey: ['columns', id] });
       openModal({ type: 'notification', modalProps: { text: '새로운 컬럼이 생성되었습니다!' } });
     } catch (error) {
-      if (error instanceof AxiosError && error.response?.data.message) {
-        openModal({ type: 'notification', modalProps: { text: error.response.data.message } });
+      if (error instanceof AxiosError) {
+        setErrorMessage(error.response?.data.message || '컬럼 생성을 실패하였습니다.');
       } else {
-        openModal({ type: 'notification', modalProps: { text: '컬럼 생성을 실패하였습니다.' } });
+        setErrorMessage('컬럼 생성을 실패하였습니다.');
         console.log(error);
       }
     }
@@ -64,7 +66,7 @@ export default function NewColumnModal({ columns }: NewColumnModalProps) {
         <ModalCancelButton type='button' onClick={closeModal}>
           취소
         </ModalCancelButton>
-        <ModalActionButton type='button' onClick={handlePostNewColumn} disabled={!!errorMessage}>
+        <ModalActionButton type='button' onClick={handlePostNewColumn} disabled={!(name && !errorMessage)}>
           생성
         </ModalActionButton>
       </div>

src/components/Modal/index.tsx

@@ -1,17 +1,17 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
-import ColumnModifyModal from './ColumnModifyModal';
 import ConfirmModal from './ConfirmModal';
 import InviteMemberModal from './InviteMemberModal';
+import ModifyColumnModal from './ModifyColumnModal';
 import NewColumnModal from './NewColumnModal';
 import NewDashboardModal from './NewDashboardModal';
 import NotificationModal from './NotificationModal';
 
 import useModal from '@/hooks/useModal';
 import { modalSelector } from '@/store/reducers/modalSlice';
 import {
-  ColumnModifyModalProps,
+  ModifyColumnModalProps,
   ConfirmModalProps,
   InviteMemberModalProps,
   NewColumnModalProps,
@@ -59,8 +59,8 @@ export default function Modal() {
       case 'inviteMember':
         return modalProps ? <InviteMemberModal modalProps={modalProps as InviteMemberModalProps} /> : null;
 
-      case 'columnModify':
-        return modalProps ? <ColumnModifyModal modalProps={modalProps as ColumnModifyModalProps} /> : null;
+      case 'modifyColumn':
+        return modalProps ? <ModifyColumnModal {...(modalProps as ModifyColumnModalProps)} /> : null;
 
       default:
         return <NotificationModal text='' />;

src/containers/dashboard/Column.tsx

@@ -1,5 +1,4 @@
 import Image from 'next/image';
-import React from 'react';
 
 import Card from './Card';
 
@@ -11,9 +10,10 @@ import { Column as ColumnType } from '@/types/Column.interface';
 
 interface ColumnProps {
   column: ColumnType;
+  columns: ColumnType[];
 }
 
-function Column({ column }: ColumnProps) {
+function Column({ column, columns }: ColumnProps) {
   const { openModal } = useModal();
   const {
     data: cardList,
@@ -43,9 +43,12 @@ function Column({ column }: ColumnProps) {
           </div>
           {/* Column Edit Button */}
           <button
-            className='duration-400 transition ease-in-out hover:rotate-90'
+            className='transition duration-300 ease-in-out hover:rotate-90'
             onClick={() => {
-              openModal({ type: 'columnModify', modalProps: { columnId: column.id, columnTitle: column.title } });
+              openModal({
+                type: 'modifyColumn',
+                modalProps: { columnId: column.id, columnTitle: column.title, columns },
+              });
             }}
           >
             <Image src='/icons/gear.svg' width={24} height={24} alt='톱니바퀴 아이콘' />

src/containers/dashboard/ColumnsSection.tsx

@@ -31,7 +31,8 @@ export default function ColumnsSection({ id }: ColumnsSectionProps) {
     <section>
       <div className='block lg:flex lg:h-[calc(100dvh-70px)] lg:w-[calc(100dvw-270px)] lg:overflow-x-auto'>
         <ul className='block lg:flex'>
-          {columns?.data && columns.data.map((column) => <Column key={column.id} column={column} />)}
+          {columns?.data &&
+            columns.data.map((column) => <Column key={column.id} column={column} columns={columns.data} />)}
           {columns?.data.length === 0 && <p>컬럼이 없습니다.</p>}
         </ul>
         <div className='p-5'>

src/types/Modal.interface.ts

@@ -26,7 +26,8 @@ export interface NewColumnModalProps extends ModalProps {
   columns: Column[];
 }
 
-export interface ColumnModifyModalProps {
+export interface ModifyColumnModalProps extends ModalProps {
+  columns: Column[];
   columnTitle: string;
   columnId: number;
 }