[FE][Feat] #416 : 채널 삭제 화면 구현

boostcampwm-2024 · Dec 4, 2024 · 45e7ad0 · 45e7ad0
1 parent e097f2b
commit 45e7ad0
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 18 deletions.
diff --git a/frontend/src/component/confirm/Confirm.tsx b/frontend/src/component/confirm/Confirm.tsx
@@ -0,0 +1,45 @@
+interface IConfirmProps {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  type: 'confirm' | 'alert';
+  confirmText?: string;
+  cancelText?: string;
+}
+
+export const Confirm = (props: IConfirmProps) => {
+  return (
+    <div className="fixed inset-0 z-[5000] flex items-center justify-center bg-black bg-opacity-70">
+      <div className="absolute left-1/2 top-1/2 z-[6000] mx-auto flex w-[22rem] max-w-md -translate-x-1/2 flex-col items-center justify-center gap-6 rounded-md bg-gray-50 p-6 text-white shadow-lg">
+        <div className="text-blueGray-800 whitespace-pre py-2 text-center text-lg font-medium">
+          {props.message}
+        </div>
+        {props.type === 'alert' ? (
+          <div className="flex w-full items-center justify-between gap-4">
+            <button
+              className="bg-blueGray-800 w-full cursor-pointer rounded-md border-none px-2.5 py-2.5 text-sm font-medium text-white"
+              onClick={props.onConfirm}
+            >
+              {props.confirmText || '확인'}
+            </button>
+          </div>
+        ) : (
+          <div className="flex w-full items-center justify-between gap-4">
+            <button
+              className="bg-blueGray-800 w-full cursor-pointer rounded-md border-none px-2.5 py-2.5 text-sm font-medium text-white"
+              onClick={props.onConfirm}
+            >
+              {props.confirmText || '확인'}
+            </button>
+            <button
+              className="w-full cursor-pointer rounded-md border-none bg-gray-400 px-2.5 py-2.5 text-sm font-medium text-white"
+              onClick={props.onCancel}
+            >
+              {props.cancelText || '취소'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/component/content/Content.tsx b/frontend/src/component/content/Content.tsx
@@ -1,6 +1,6 @@
 import { MdGroup, MdMoreVert } from 'react-icons/md';
 import { useNavigate } from 'react-router-dom';
-import { getChannelInfo, deleteChannel } from '@/api/channel.api';
+import { getChannelInfo } from '@/api/channel.api';
 import { useContext } from 'react';
 import { ChannelContext } from '@/context/ChannelContext';
 import { Dropdown } from '../common/dropdown/Dropdown';
@@ -12,7 +12,7 @@ interface IContentProps {
   link: string;
   time: string;
   channelId: string;
-  setIsDeleted?: () => void;
+  onDelete?: (channelId: string) => void;
 }
 
 /**
@@ -65,15 +65,7 @@ export const Content = (props: IContentProps) => {
   };
 
   const deleteChannelItem = async () => {
-    try {
-      const result = window.confirm('정말로 삭제하시겠습니까?');
-      if (result) {
-        await deleteChannel(props.channelId);
-        props.setIsDeleted?.();
-      }
-    } catch (error) {
-      console.error('Failed to delete channel info:', error);
-    }
+    props.onDelete?.(props.channelId);
   };
 
   const goToChannelInfoPage = () => {

diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
@@ -1,11 +1,11 @@
-import { Fragment, useContext, useEffect, useState } from 'react';
+import { Fragment, useContext, useEffect, useRef, useState, ReactNode } from 'react';
 import { MdLogout } from 'react-icons/md';
 import { FooterContext } from '@/component/layout/footer/LayoutFooterProvider';
 import { useNavigate } from 'react-router-dom';
 import { buttonActiveType } from '@/component/layout/enumTypes';
 import { loadLocalData, saveLocalData, removeLocalData } from '@/utils/common/manageLocalData.ts';
 import { AuthModal } from '@/component/authmodal/AuthModal';
-import { getUserChannels } from '@/api/channel.api.ts';
+import { deleteChannel, getUserChannels } from '@/api/channel.api.ts';
 import { BottomSheet } from '@/component/bottomsheet/BottomSheet.tsx';
 import { Content } from '@/component/content/Content.tsx';
 import { AppConfig } from '@/lib/constants/commonConstants.ts';
@@ -15,6 +15,7 @@ import { MapCanvasForView } from '@/component/canvasWithMap/canvasWithMapForView
 import { LoadingSpinner } from '@/component/common/loadingSpinner/LoadingSpinner.tsx';
 import { UserContext } from '@/context/UserContext';
 import { ToggleProvider } from '@/context/DropdownContext.tsx';
+import { Confirm } from '@/component/confirm/Confirm.tsx';
 
 export const Main = () => {
   const {
@@ -31,11 +32,59 @@ export const Main = () => {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
   const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
   const [channels, setChannels] = useState<any[]>([]);
-  const [isDeleted, setIsDeleted] = useState<boolean>(false);
+  const [modalState, setModalState] = useState<'none' | 'confirm' | 'alert'>('none');
+  const [modal, setModal] = useState<ReactNode>(false);
+
+  const deleteTargetRef = useRef<string>('');
 
   const { resetUsers } = useContext(UserContext);
 
+  const handleDeleteChannel = (channelId: string) => {
+    setModalState('confirm');
+    deleteTargetRef.current = channelId;
+    // setIsDeleted(prev => !prev);
+  };
+
+  const handleDeleteModalCancel = () => {
+    setModalState('none');
+  };
+
+  const handleDeleteModalConfirm = async () => {
+    try {
+      await deleteChannel(deleteTargetRef.current);
+      setModalState('alert');
+      console.log(modalState);
+    } catch (err) {
+      console.error('Failed to delete channel info:', err);
+    }
+  };
+
   useEffect(() => {
+    if (modalState === 'confirm') {
+      setModal(
+        <Confirm
+          type="confirm"
+          message="채널을 삭제 하시겠습니까?"
+          onConfirm={handleDeleteModalConfirm}
+          onCancel={handleDeleteModalCancel}
+        />,
+      );
+      return;
+    }
+    if (modalState === 'alert') {
+      setModal(
+        <Confirm
+          message="삭제 되었습니다."
+          onConfirm={() => {
+            setModalState('none');
+          }}
+          onCancel={() => {}}
+          type="alert"
+        />,
+      );
+      return;
+    }
+
     const token = loadLocalData(AppConfig.KEYS.LOGIN_TOKEN);
     setIsLoggedIn(!!token);
 
@@ -53,7 +102,7 @@ export const Main = () => {
           });
       }
     }
-  }, [isDeleted]);
+  }, [modalState]);
 
   const navigate = useNavigate();
 
@@ -174,9 +223,7 @@ export const Main = () => {
                   link={`/channel/${item.id}/host`}
                   person={item.guest_count}
                   time={item.generated_at}
-                  setIsDeleted={() => {
-                    setIsDeleted(prev => !prev);
-                  }}
+                  onDelete={handleDeleteChannel}
                 />
                 <hr className="my-2" />
               </Fragment>
@@ -195,6 +242,8 @@ export const Main = () => {
           </BottomSheet>
         )}
 
+        {modalState !== 'none' && modal}
+
         {/* 로그인 모달 */}
         <AuthModal isOpen={showLoginModal} onClose={handleCloseLoginModal} type="login" />
       </div>