diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx index c72b7294..8c64a52b 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.stories.tsx @@ -21,7 +21,7 @@ type Story = StoryObj; export const Example: Story = { render: () => { - const RegistrationModal = () => { + const Modal = () => { const { confirm } = useConfirm(); const clickHiByeBtn = async () => { @@ -33,8 +33,8 @@ export const Example: Story = {

코난은 정말 코난입니까?

), - cancelName: '바이', - confirmName: '하이', + denial: '바이', + confirmation: '하이', }); if (isConfirmed) { @@ -45,6 +45,7 @@ export const Example: Story = { alert('denied'); }; + // denial과 confirmation 기본값은 '닫기'와 '확인'입니다. const clickOpenCloseBtn = async () => { const isConfirmed = await confirm({ title: '오쁜클로즈 모달', @@ -72,7 +73,7 @@ export const Example: Story = { ); }; - return ; + return ; }, }; diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx index 5a25aa03..3c9d5b40 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModal.tsx @@ -7,18 +7,18 @@ import type { ReactNode } from 'react'; interface ConfirmModalProps { title: string; content: ReactNode; - cancelName: string; - confirmName: string; - onCancel: () => void; + denial: string; + confirmation: string; + onDeny: () => void; onConfirm: () => void; } const ConfirmModal = ({ title, content, - cancelName, - confirmName, - onCancel, + denial, + confirmation, + onDeny, onConfirm, }: ConfirmModalProps) => { return createPortal( @@ -30,8 +30,8 @@ const ConfirmModal = ({ {content} - {cancelName} - {confirmName} + {denial} + {confirmation} , diff --git a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx index 3de4659a..56a731e0 100644 --- a/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx +++ b/frontend/src/shared/components/ConfirmModal/ConfirmModalProvider.tsx @@ -5,14 +5,14 @@ import ConfirmModal from './ConfirmModal'; import type { ReactNode } from 'react'; export const ConfirmContext = createContext Promise; + confirm: (modalState: ModalContents) => Promise; }>(null); -interface ModalState { +interface ModalContents { title: string; content: ReactNode; - cancelName?: string; - confirmName?: string; + denial?: string; + confirmation?: string; } const ConfirmProvider = ({ children }: { children: ReactNode }) => { @@ -20,17 +20,18 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { const resolverRef = useRef<{ resolve: (value: boolean | PromiseLike) => void; } | null>(null); - const [modalState, setModalState] = useState({ + const [modalContents, setModalContents] = useState({ title: '', content: '', - cancelName: '닫기', - confirmName: '확인', + denial: '닫기', + confirmation: '확인', }); - const { title, content, cancelName, confirmName } = modalState; + const { title, content, denial, confirmation } = modalContents; - const confirm = (modal: ModalState) => { + // ContextAPI를 통해 confirm 함수만 제공합니다. + const confirm = (contents: ModalContents) => { openModal(); - setModalState(modal); + setModalContents(contents); const promise = new Promise((resolve) => { resolverRef.current = { resolve }; @@ -53,7 +54,7 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { } }; - const onCancel = useCallback(() => { + const onDeny = useCallback(() => { resolveConfirmation(false); closeModal(); }, []); @@ -97,9 +98,9 @@ const ConfirmProvider = ({ children }: { children: ReactNode }) => { , document.body