woowacourse-teams · ukkodeveloper · Nov 23, 2023 · Nov 3, 2023 · Nov 3, 2023 · Nov 4, 2023
@@ -75,7 +75,6 @@ const RegisterButton = styled.button`
 
   @media (min-width: ${({ theme }) => theme.breakPoints.md}) {
     padding: 11px 15px;
-
     font-size: 18px;
   }
 `;

@@ -0,0 +1,89 @@
+import styled from 'styled-components';
+import ConfirmProvider from './ConfirmModalProvider';
+import { useConfirm } from './hooks/useConfirm';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ConfirmProvider> = {
+  title: 'shared/Confirm',
+  component: ConfirmProvider,
+  decorators: [
+    (Story) => (
+      <ConfirmProvider>
+        <Story />
+      </ConfirmProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConfirmProvider>;
+
+export const Example: Story = {
+  render: () => {
+    const Modal = () => {
+      const { confirm } = useConfirm();
+
+      const clickHiByeBtn = async () => {
+        const isConfirmed = await confirm({
+          title: '하이바이 모달',
+          content: (
+            <>
+              <p>도밥은 정말 도밥입니까?</p>
+              <p>코난은 정말 코난입니까?</p>
+            </>
+          ),
+          denial: '바이',
+          confirmation: '하이',
+        });
+
+        if (isConfirmed) {
+          alert('confirmed');
+          return;
+        }
+
+        alert('denied');
+      };
+
+      // denial과 confirmation 기본값은 '닫기'와 '확인'입니다.
+      const clickOpenCloseBtn = async () => {
+        const isConfirmed = await confirm({
+          title: '오쁜클로즈 모달',
+          content: (
+            <>
+              <p>코난은 정말 코난입니까?</p>
+              <p>도밥은 정말 도밥입니까?</p>
+            </>
+          ),
+        });
+
+        if (isConfirmed) {
+          alert('confirmed');
+          return;
+        }
+
+        alert('denied');
+      };
+
+      return (
+        <Body>
+          <Button onClick={clickHiByeBtn}>하이바이 모달열기</Button>
+          <Button onClick={clickOpenCloseBtn}>닫기확인 모달열기</Button>
+        </Body>
+      );
+    };
+
+    return <Modal />;
+  },
+};
+
+const Body = styled.div`
+  height: 2400px;
+`;
+
+const Button = styled.button`
+  padding: 4px 11px;
+  color: white;
+  border: 2px solid white;
+  border-radius: 4px;
+`;
@@ -0,0 +1,106 @@
+import { createPortal } from 'react-dom';
+import { Flex } from 'shook-layout';
+import styled, { css } from 'styled-components';
+import Spacing from '../Spacing';
+import type { ReactNode } from 'react';
+
+interface ConfirmModalProps {
+  title: string;
+  content: ReactNode;
+  denial: string;
+  confirmation: string;
+  onDeny: () => void;
+  onConfirm: () => void;
+}
+
+const ConfirmModal = ({
+  title,
+  content,
+  denial,
+  confirmation,
+  onDeny,
+  onConfirm,
+}: ConfirmModalProps) => {
+  return createPortal(
+    <>
+      <Backdrop role="dialog" aria-modal="true" />
+      <Container>
+        <Title>{title}</Title>
+        <Spacing direction="vertical" size={10} />
+        <Content>{content}</Content>
+        <Spacing direction="vertical" size={10} />
+        <ButtonFlex $gap={16}>
+          <CancelButton onClick={onDeny}>{denial}</CancelButton>
+          <ConfirmButton onClick={onConfirm}>{confirmation}</ConfirmButton>
+        </ButtonFlex>
+      </Container>
+    </>,
+    document.body
+  );
+};
+
+export default ConfirmModal;
+
+const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  background-color: rgba(0, 0, 0, 0.7);
+`;
+
+const Container = styled.section`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  min-width: 300px;
+  margin: 0 auto;
+  padding: 24px;
+
+  color: #ffffff;
+
+  background-color: #17171c;
+  border: none;
+  border-radius: 16px;
+`;
+
+const ButtonFlex = styled(Flex)`
+  width: 100%;
+`;
+
+const Title = styled.header`
+  font-size: 18px;
+  text-align: left;
+`;
+
+const Content = styled.div``;
+
+const buttonStyle = css`
+  flex: 1;
+
+  width: 100%;
+  height: 36px;
+
+  color: ${({ theme: { color } }) => color.white};
+
+  border-radius: 10px;
+`;
+
+const CancelButton = styled.button`
+  background-color: ${({ theme: { color } }) => color.secondary};
+  ${buttonStyle}
+`;
+
+const ConfirmButton = styled.button`
+  background-color: ${({ theme: { color } }) => color.primary};
+  ${buttonStyle}
+`;
@@ -0,0 +1,112 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { createContext, useCallback, useEffect, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import ConfirmModal from './ConfirmModal';
+import type { ReactNode } from 'react';
+
+export const ConfirmContext = createContext<null | {
+  confirm: (modalState: ModalContents) => Promise<boolean>;
+}>(null);
+
+interface ModalContents {
+  title: string;
+  content: ReactNode;
+  denial?: string;
+  confirmation?: string;
+}
+
+const ConfirmProvider = ({ children }: { children: ReactNode }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const resolverRef = useRef<{
+    resolve: (value: boolean | PromiseLike<boolean>) => void;
+  } | null>(null);
+  const [modalContents, setModalContents] = useState<ModalContents>({
+    title: '',
+    content: '',
+    denial: '닫기',
+    confirmation: '확인',
+  });
+  const { title, content, denial, confirmation } = modalContents;
+
+  // ContextAPI를 통해 confirm 함수만 제공합니다.
+  const confirm = (contents: ModalContents) => {
+    openModal();
+    setModalContents(contents);
+
+    const promise = new Promise<boolean>((resolve) => {
+      resolverRef.current = { resolve };
+    });
+
+    return promise;
+  };
+
+  const closeModal = () => {
+    setIsOpen(false);
+  };
+
+  const openModal = () => {
+    setIsOpen(true);
+  };
+
+  const resolveConfirmation = (status: boolean) => {
+    if (resolverRef?.current) {
+      resolverRef.current.resolve(status);
+    }
+  };
+
+  const onDeny = useCallback(() => {
+    resolveConfirmation(false);
+    closeModal();
+  }, []);
+
+  const onConfirm = useCallback(() => {
+    resolveConfirmation(true);
+    closeModal();
+  }, []);
+
+  const onKeyDown = useCallback((event: KeyboardEvent) => {
+    const { key } = event;
+    if (key === 'Enter') {
+      event.preventDefault();
+      resolveConfirmation(false);
+      closeModal();
+    }
+
+    if (key === 'Escape') {
+      resolveConfirmation(false);
+      closeModal();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('keydown', onKeyDown);
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.body.style.overflow = 'auto';
+    };
+  }, [isOpen]);
+
+  return (
+    <ConfirmContext.Provider value={{ confirm }}>
+      {children}
+      {isOpen &&
+        createPortal(
+          <ConfirmModal
+            title={title}
+            content={content}
+            denial={denial ?? '닫기'}
+            confirmation={confirmation ?? '확인'}
+            onDeny={onDeny}
+            onConfirm={onConfirm}
+          />,
+          document.body
+        )}
+    </ConfirmContext.Provider>
+  );
+};
+
+export default ConfirmProvider;
diff --git a/frontend/src/shared/components/ConfirmModal/hooks/useConfirm.ts b/frontend/src/shared/components/ConfirmModal/hooks/useConfirm.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { ConfirmContext } from '../ConfirmModalProvider';
+
+export const useConfirm = () => {
+  const contextValue = useContext(ConfirmContext);
+  if (!contextValue) {
+    throw new Error('ConfirmContext Provider 내부에서 사용 가능합니다.');
+  }
+
+  return contextValue;
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,7 +75,6 @@ const RegisterButton = styled.button` @@
       @media (min-width: ${({ theme }) => theme.breakPoints.md}) {
         padding: 11px 15px;
         font-size: 18px;
       }
     `;
@@ Expand Down @@