From 50c0bad9bddf02626c9046e8466bd1b8d3a8400a Mon Sep 17 00:00:00 2001 From: un0211 Date: Mon, 1 Jul 2024 12:39:21 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor(#121,=20#1?= =?UTF-8?q?14,=20#21):=20=EC=BB=AC=EB=9F=BC=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 중복 이름 방지 - 변경사항 바로 반영되도록 쿼리 무효화 - 사용처인 dashboard 변경 (추가 파일 정리) --- src/components/Modal/ColumnModifyModal.tsx | 59 ----------- src/components/Modal/ModifyColumnModal.tsx | 103 ++++++++++++++++++++ src/components/Modal/index.tsx | 8 +- src/containers/dashboard/Column.tsx | 11 ++- src/containers/dashboard/ColumnsSection.tsx | 3 +- src/types/Modal.interface.ts | 3 +- 6 files changed, 118 insertions(+), 69 deletions(-) delete mode 100644 src/components/Modal/ColumnModifyModal.tsx create mode 100644 src/components/Modal/ModifyColumnModal.tsx diff --git a/src/components/Modal/ColumnModifyModal.tsx b/src/components/Modal/ColumnModifyModal.tsx deleted file mode 100644 index 51c33691..00000000 --- a/src/components/Modal/ColumnModifyModal.tsx +++ /dev/null @@ -1,59 +0,0 @@ -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({ modalProps }: { modalProps: ColumnModifyModalProps }) { - const id = modalProps?.columnId; - const [title, setTitle] = useState(modalProps?.columnTitle || ''); - const { openModal, closeModal } = useModal(); - - const handleModifyButton = async () => { - try { - await putColumn(id, { title }); - openModal({ type: 'textModal', modalProps: { text: '컬럼이 성공적으로 변경되었습니다.' } }); - } catch { - openModal({ type: 'textModal', modalProps: { text: '컬럼이 변경되지 않았습니다.' } }); - } - }; - - return ( -
-

컬럼 관리

-
- - { - setTitle(e.target.value); - }} - /> -
- -
-
- -
-
- 취소 - 0)} onClick={handleModifyButton}> - 변경 - -
-
-
- ); -} diff --git a/src/components/Modal/ModifyColumnModal.tsx b/src/components/Modal/ModifyColumnModal.tsx new file mode 100644 index 00000000..69c05cfc --- /dev/null +++ b/src/components/Modal/ModifyColumnModal.tsx @@ -0,0 +1,103 @@ +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 (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 && error.response?.data.message) { + openModal({ type: 'notification', modalProps: { text: error.response.data.message } }); + } else { + openModal({ type: 'notification', modalProps: { text: '컬럼이 변경에 실패했습니다.' } }); + 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 ( +
+

컬럼 관리

+ +
+ + setTitle(e.target.value)} + onBlur={handleValidCheck} + /> + {errorMessage &&

{errorMessage}

} +
+ +
+ +
+ + 취소 + + + 변경 + +
+
+
+ ); +} diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 89b8f309..1ce1f205 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -1,9 +1,9 @@ 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'; @@ -11,7 +11,7 @@ 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 ? : null; - case 'columnModify': - return modalProps ? : null; + case 'modifyColumn': + return modalProps ? : null; default: return ; diff --git a/src/containers/dashboard/Column.tsx b/src/containers/dashboard/Column.tsx index 6379b236..90368290 100644 --- a/src/containers/dashboard/Column.tsx +++ b/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) { {/* Column Edit Button */}