From 45e7ad02b56f21cdf9bf5c543d8d7795a2c2098d Mon Sep 17 00:00:00 2001 From: effozen Date: Wed, 4 Dec 2024 22:07:53 +0900 Subject: [PATCH] =?UTF-8?q?[FE][Feat]=20#416=20:=20=EC=B1=84=EB=84=90=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=ED=99=94=EB=A9=B4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/confirm/Confirm.tsx | 45 ++++++++++++++++ frontend/src/component/content/Content.tsx | 14 ++--- frontend/src/pages/Main.tsx | 63 +++++++++++++++++++--- 3 files changed, 104 insertions(+), 18 deletions(-) create mode 100644 frontend/src/component/confirm/Confirm.tsx diff --git a/frontend/src/component/confirm/Confirm.tsx b/frontend/src/component/confirm/Confirm.tsx new file mode 100644 index 0000000..47efcdc --- /dev/null +++ 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 ( +
+
+
+ {props.message} +
+ {props.type === 'alert' ? ( +
+ +
+ ) : ( +
+ + +
+ )} +
+
+ ); +}; diff --git a/frontend/src/component/content/Content.tsx b/frontend/src/component/content/Content.tsx index 2d6802a..cb16e56 100644 --- 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 index 1185ed1..1e599d7 100644 --- 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(false); const [showLoginModal, setShowLoginModal] = useState(false); const [channels, setChannels] = useState([]); - const [isDeleted, setIsDeleted] = useState(false); + const [modalState, setModalState] = useState<'none' | 'confirm' | 'alert'>('none'); + const [modal, setModal] = useState(false); + + const deleteTargetRef = useRef(''); 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( + , + ); + return; + } + if (modalState === 'alert') { + setModal( + { + 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} />
@@ -195,6 +242,8 @@ export const Main = () => { )} + {modalState !== 'none' && modal} + {/* 로그인 모달 */}