Modal api 적용

src/App.tsx

@@ -10,6 +10,8 @@
 import MyPage from './pages/mypage/MyPage';
 import { DashboardProvider } from './contexts/DashboardContext';
 
+import ModalPageTest from './pages/modalPageTest';
+
 /*
 페이지 라우팅 분리,
 */
@@ -22,10 +24,13 @@
           <Route index element={<Home />} />
           <Route path="/mydashboard" element={<MyDashboard />} />
           <Route path="/dashboard/1/edit" element={<DashboardEdit />} />
-          <Route path="/dashboard/:id" element={<DashboardForId />} />
+          <Route path="/dashboard/1" element={<DashboardForId />} />
           <Route path="/login" element={<Login />} />
           <Route path="/signup" element={<SignUp />} />
           <Route path="/mypage" element={<MyPage />} />
+
+          {/* 삭제하기 */}
+          <Route path="/modal" element={<ModalPageTest />} />
         </Routes>
       </DashboardProvider>
     </BrowserRouter>

src/api/cards/apiCards.tsx

@@ -35,6 +35,7 @@ export interface CardOverAll {
   };
   imageUrl?: string;
   columnId: number;
+  dashboardId: number;
   createdAt: string;
   updatedAt: string;
 }

src/api/columns/apiColumns.tsx

@@ -47,7 +47,7 @@ interface UploadCardImageResponse {
 export async function apiCreateColumn(
   body: CreateColumnBody,
 ): Promise<ColumnOverAllResponse> {
-  const res = await instance.post<ColumnOverAllResponse>('/cards', body);
+  const res = await instance.post<ColumnOverAllResponse>('/columns', body);
   return handleResponse(res);
 }
 
@@ -56,7 +56,7 @@ export async function apiCreateColumn(
 export async function apiGetColumnList(
   dashboardId: number,
 ): Promise<GetColumnResponse> {
-  const res = await instance.get<GetColumnResponse>('/cards', {
+  const res = await instance.get<GetColumnResponse>('/columns', {
     params: {
       dashboardId,
     },
@@ -71,7 +71,7 @@ export async function apiUpdateColumn(
   columnId: number,
 ): Promise<ColumnOverAllResponse> {
   const res = await instance.put<ColumnOverAllResponse>(
-    `/cards/${columnId}`,
+    `/columns/${columnId}`,
     body,
   );
   return handleResponse(res);
@@ -80,7 +80,7 @@ export async function apiUpdateColumn(
 // 컬럼 삭제
 // columnId를 파라미터로 받습니다.
 export async function apiDeleteColumn(columnId: number) {
-  const res = await instance.delete(`/cards/${columnId}`);
+  const res = await instance.delete(`/columns/${columnId}`);
   return handleResponse(res);
 }
 
@@ -91,7 +91,7 @@ export async function apiUploadCardImage(
   columnId: number,
 ): Promise<UploadCardImageResponse> {
   const res = await instance.post<UploadCardImageResponse>(
-    `/cards/${columnId}/card-image`,
+    `/columns/${columnId}/card-image`,
     body,
   );
   return handleResponse(res);

src/pages/modal/DeleteColumnModal/DeleteColumnModal.tsx

@@ -1,30 +1,50 @@
 import { useCallback } from 'react';
 import ModalContainer from '../ModalContainer/ModalContainer';
+import { apiDeleteColumn } from '../../../api/apiModule';
 import { DeleteBtn, ChangeAndSaveBtn } from '../../../components/Btn/Btn';
 import styles from './DeleteColumnModal.module.scss';
 
 /*
-  컬럼 삭제할 수 있는 모달입니다.
+  컬럼의 모든 카드를 삭제하는 모달입니다.
+
+  컬럼 관리 모달과 연결을 위해 직접 사용하는 것이 아닌 EditColumnManagement를 통해 사용합니다.
 */
 
 interface ModalProps {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
+  openEditModal: () => void;
+  columnId: number;
 }
 
-function DeleteColumnModal({ isOpen, setIsOpen }: ModalProps) {
-  // 모달 닫기
-  const close = useCallback(() => {
-    setIsOpen(false);
-  }, [setIsOpen]);
+function DeleteColumnModal({
+  isOpen,
+  setIsOpen,
+  openEditModal,
+  columnId,
+}: ModalProps) {
+  // 컬럼의 모든 카드를 삭제하는 동작
+  const handleDelete = async () => {
+    try {
+      await apiDeleteColumn(columnId);
+      setIsOpen(false);
+    } catch (error) {
+      throw new Error('error');
+    }
+  };
+
+  // 취소를 클릭하면 컬럼 관리 모달로 돌아갑니다.
+  const handleClose = useCallback(() => {
+    openEditModal();
+  }, [openEditModal]);
 
   return (
     <ModalContainer isOpen={isOpen} setIsOpen={setIsOpen}>
       <div className={styles.container}>
         <p>컬럼의 모든 카드가 삭제됩니다.</p>
         <div className={styles.buttonBlock}>
-          <DeleteBtn BtnText="취소" handleBtn={close} />
-          <ChangeAndSaveBtn BtnText="삭제" handleBtn={close} />
+          <DeleteBtn BtnText="취소" handleBtn={handleClose} />
+          <ChangeAndSaveBtn BtnText="삭제" handleBtn={handleDelete} />
         </div>
       </div>
     </ModalContainer>

src/pages/modal/EditColumnManagement/EditColumnManagement.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import EditColumnModal from '../EditColumnModal/EditColumnModal';
+import DeleteColumnModal from '../DeleteColumnModal/DeleteColumnModal';
+
+/*
+  컬럼 수정 모달과 삭제하기 모달을 관리합니다.
+
+  EditColumnModal에서 "삭제하기" 버튼을 클릭하면
+  EditColumnModal은 닫고 DeleteColumnModal이 열립니다.
+*/
+
+interface ModalProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  dashboardId: number;
+  columnId: number;
+  columnTitle: string;
+}
+
+function EditColumnManagement({
+  isOpen,
+  setIsOpen,
+  dashboardId,
+  columnId,
+  columnTitle,
+}: ModalProps) {
+  const [editModalOpen, setEditModalOpen] = useState(true);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+
+  const openDeleteModal = () => {
+    setDeleteModalOpen(true);
+    setEditModalOpen(false);
+  };
+
+  const openEditModal = () => {
+    setDeleteModalOpen(false);
+    setEditModalOpen(true);
+  };
+
+  return (
+    <>
+      {editModalOpen && (
+        <EditColumnModal
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          openDeleteModal={openDeleteModal}
+          columnTitle={columnTitle}
+          columnId={columnId}
+          dashboardId={dashboardId}
+        />
+      )}
+      {deleteModalOpen && (
+        <DeleteColumnModal
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          openEditModal={openEditModal}
+          columnId={columnId}
+        />
+      )}
+    </>
+  );
+}
+
+export default EditColumnManagement;

src/pages/modal/EditColumnModal/EditColumnModal.module.scss

@@ -101,7 +101,6 @@
     border-radius: 0.5rem;
     font-size: 1rem;
     font-weight: 500;
-    cursor: pointer;
 
     @include mobile{
       width: 8.625rem;
@@ -124,7 +123,7 @@
 
 .delete {
   position: absolute;
-  bottom: 3.5rem;
+  bottom: 3.1rem;
   width: 3.4rem;
   padding: 0;
   background-color: transparent;
@@ -135,4 +134,30 @@
   font-weight: 400;
   text-decoration-line: underline;
   cursor: pointer;
+}
+
+.errorMessage {
+  color: $red_D6173A;
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+
+.inactiveButton {
+  background: var(--gray-gray_9FA6B2, #9FA6B2);
+  color: var(--white, #FFF);
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.activeButton {
+  background: var(--violet-violet_5534DA, #5534da);
+  border-radius: 4px;
+  border: 0px;
+  color: #ffffff;
 }