feat: Confirm 컴포넌트 구현

apps/admin/src/pages/HomePage/HomePage.tsx

@@ -1,4 +1,4 @@
-import { useToast, useDialog } from '@boolti/ui';
+import { useToast, useDialog, useConfirm } from '@boolti/ui';
 import Header from '../../components/Header/Header';
 import Layout from '../../components/Layout/Layout';
 import { PATH } from '../../constants/routes';
@@ -11,6 +11,8 @@ const HomePage = () => {
   const dialog2 = useDialog();
   const dialog3 = useDialog();
 
+  const confirm = useConfirm();
+
   return (
     <Layout
       header={
@@ -112,6 +114,30 @@ const HomePage = () => {
       >
         Open Dialog 2
       </button>
+
+      <button
+        onClick={async () => {
+          const result = await confirm(
+            <>
+              지금 로그아웃하면 작성 중인 내용이 사라져요.
+              <br />
+              로그아웃 할까요?
+            </>,
+            {
+              cancel: '취소하기',
+              confirm: '로그아웃',
+            },
+          );
+
+          if (result) {
+            alert('로그아웃');
+          } else {
+            alert('로그아웃 취소');
+          }
+        }}
+      >
+        Open confirm
+      </button>
     </Layout>
   );
 };

packages/ui/src/components/BooltiUIProvider/index.tsx

@@ -1,3 +1,4 @@
+import ConfirmProvider from '../ConfirmProvider';
 import DialogProvider from '../DialogProvider';
 import ThemeProvider from '../ThemeProvider';
 
@@ -8,7 +9,9 @@ interface BooltiUIProviderProps {
 const BooltiUIProvider = ({ children }: BooltiUIProviderProps) => {
   return (
     <ThemeProvider>
-      <DialogProvider>{children}</DialogProvider>
+      <DialogProvider>
+        <ConfirmProvider>{children}</ConfirmProvider>
+      </DialogProvider>
     </ThemeProvider>
   );
 };

packages/ui/src/components/Confirm/Confirm.styles.ts

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+
+const CONFIRM_WIDTH = '450px';
+
+const DimmedArea = styled.div`
+  position: fixed;
+  inset: 0;
+  background-color: ${({ theme }) => theme.palette.dim.dialog};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Confirm = styled.div`
+  width: ${CONFIRM_WIDTH};
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.palette.grey.w};
+  padding: 32px;
+`;
+
+const ConfirmMessage = styled.p`
+  ${({ theme }) => theme.typo.b3};
+  color: ${({ theme }) => theme.palette.grey.g90};
+  margin-bottom: 32px;
+`;
+
+const ConfirmButtonContainer = styled.div`
+  text-align: right;
+`;
+
+const CancelButton = styled.button`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 48px;
+  padding: 0 20px;
+  border-radius: 4px;
+  border: 1px solid ${({ theme }) => theme.palette.grey.g90};
+  background-color: ${({ theme }) => theme.palette.grey.w};
+  color: ${({ theme }) => theme.palette.grey.g90};
+  ${({ theme }) => theme.typo.sh1};
+  margin-right: 8px;
+  cursor: pointer;
+`;
+
+const ConfirmButton = styled.button`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 48px;
+  padding: 0 20px;
+  border-radius: 4px;
+  background-color: ${({ theme }) => theme.palette.primary.o1};
+  color: ${({ theme }) => theme.palette.grey.w};
+  ${({ theme }) => theme.typo.sh1};
+  cursor: pointer;
+`;
+
+export default {
+  DimmedArea,
+  Confirm,
+  ConfirmMessage,
+  ConfirmButtonContainer,
+  CancelButton,
+  ConfirmButton,
+};

packages/ui/src/components/Confirm/index.tsx

@@ -0,0 +1,32 @@
+import Portal from '../Portal';
+import Styled from './Confirm.styles';
+
+interface ConfirmProps {
+  children: React.ReactNode;
+  cancelText?: string;
+  confirmText?: string;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+}
+
+const Confirm = ({ children, cancelText, confirmText, onCancel, onConfirm }: ConfirmProps) => {
+  return (
+    <Portal>
+      <Styled.DimmedArea>
+        <Styled.Confirm>
+          <Styled.ConfirmMessage>{children}</Styled.ConfirmMessage>
+          <Styled.ConfirmButtonContainer>
+            <Styled.CancelButton type="button" onClick={onCancel}>
+              {cancelText ?? '취소'}
+            </Styled.CancelButton>
+            <Styled.ConfirmButton type="button" onClick={onConfirm}>
+              {confirmText ?? '확인'}
+            </Styled.ConfirmButton>
+          </Styled.ConfirmButtonContainer>
+        </Styled.Confirm>
+      </Styled.DimmedArea>
+    </Portal>
+  );
+};
+
+export default Confirm;

packages/ui/src/components/ConfirmProvider/index.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import confirmContext, { IConfirm } from '../../contexts/confirmContext';
+import Confirm from '../Confirm';
+
+interface ConfirmProviderProps {
+  children: React.ReactNode;
+}
+
+const ConfirmProvider = ({ children }: ConfirmProviderProps) => {
+  const [currentConfirm, setCurrentConfirm] = useState<IConfirm | null>(null);
+
+  return (
+    <confirmContext.Provider value={{ currentConfirm, setCurrentConfirm }}>
+      {children}
+      {currentConfirm && (
+        <Confirm
+          cancelText={currentConfirm.buttonText?.cancel}
+          confirmText={currentConfirm.buttonText?.confirm}
+          onCancel={() => {
+            currentConfirm.resolve(false);
+            setCurrentConfirm(null);
+          }}
+          onConfirm={() => {
+            currentConfirm.resolve(true);
+            setCurrentConfirm(null);
+          }}
+        >
+          {currentConfirm.message}
+        </Confirm>
+      )}
+    </confirmContext.Provider>
+  );
+};
+
+export default ConfirmProvider;

packages/ui/src/contexts/confirmContext.ts

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+
+export interface ConfirmButtonText {
+  cancel?: string;
+  confirm?: string;
+}
+
+export interface IConfirm {
+  message: React.ReactNode;
+  buttonText?: ConfirmButtonText;
+  resolve: (value: boolean | PromiseLike<boolean>) => void;
+}
+
+interface ConfirmContext {
+  currentConfirm: IConfirm | null;
+  setCurrentConfirm: React.Dispatch<React.SetStateAction<IConfirm | null>>;
+}
+
+const confirmContext = createContext<ConfirmContext | null>(null);
+
+export default confirmContext;

packages/ui/src/hooks/index.ts

@@ -1,4 +1,5 @@
 import useToast from './useToast';
 import useDialog from './useDialog';
+import useConfirm from './useConfirm';
 
-export { useToast, useDialog };
+export { useToast, useDialog, useConfirm };

packages/ui/src/hooks/useConfirm.ts

@@ -0,0 +1,17 @@
+import { useCallback, useContext } from 'react';
+import confirmContext, { ConfirmButtonText } from '../contexts/confirmContext';
+
+const useConfirm = () => {
+  const context = useContext(confirmContext);
+
+  return useCallback(
+    (message: React.ReactNode, buttonText?: ConfirmButtonText) => {
+      return new Promise<boolean>((resolve) => {
+        context?.setCurrentConfirm({ message, buttonText, resolve });
+      });
+    },
+    [context],
+  );
+};
+
+export default useConfirm;