Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor/#570 confirmPopup을 overlay를 활용하도록 변경 #571

Merged
merged 3 commits into from
May 13, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: overlay를 활용한 useConfirmModal 훅 구현 및 ConfirmModalContext 제거
cruelladevil committed May 13, 2024
commit 8f248e514a1fe7a9f6f5c82f1253ffdf36a8f9db
5 changes: 1 addition & 4 deletions frontend/src/index.tsx
Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import React from 'react';
import { createRoot } from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { ThemeProvider } from 'styled-components';
import ConfirmModalProvider from '@/shared/components/ConfirmModal/ConfirmModalProvider';
import GlobalStyles from '@/shared/styles/GlobalStyles';
import AuthProvider from './features/auth/components/AuthProvider';
import { loadIFrameApi } from './features/youtube/remotes/loadIframeApi';
@@ -37,9 +36,7 @@ async function main() {
<ThemeProvider theme={theme}>
<ToastProvider>
<QueryClientProvider client={queryClient}>
<ConfirmModalProvider>
<RouterProvider router={router} />
</ConfirmModalProvider>
<RouterProvider router={router} />
<ReactQueryDevtools />
</QueryClientProvider>
</ToastProvider>
105 changes: 0 additions & 105 deletions frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { useOverlay } from '@/shared/hooks/useOverlay';
import ConfirmModal from '../ConfirmModal';
import type { ReactNode } from 'react';

interface OpenConfirmModalProps {
/**
* 제목
*/
title: string;
/**
* 내용
*/
content: ReactNode;
/**
* 취소 버튼 이름
*/
denial?: string;
/**
* 확인 버튼 이름
*/
confirmation?: string;
}

export const useConfirmModal = () => {
const overlay = useOverlay();

const openConfirmModal = ({
title,
content,
denial = '닫기',
confirmation = '확인',
}: OpenConfirmModalProps) => {
return new Promise<boolean>((resolve) =>
overlay.open(({ isOpen, close }) => (
<ConfirmModal
isOpen={isOpen}
closeModal={() => {
resolve(false);
close();
}}
title={title}
content={content}
denial={denial}
confirmation={confirmation}
onDeny={() => {
resolve(false);
close();
}}
onConfirm={() => {
resolve(true);
close();
}}
/>
))
);
};

return { openConfirmModal };
};