Feat: 공용 모달 컴포넌트 추가

src/components/Modal/Modal.css.ts

@@ -0,0 +1,32 @@
+import { style } from '@vanilla-extract/css';
+
+export const background = style({
+  width: '100vw',
+  height: '100vh',
+  zIndex: 100,
+
+  position: 'fixed',
+  top: '0px',
+  left: '0px',
+
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  backgroundColor: 'rgba(25, 25, 27, 0.3)',
+});
+
+export const container = style({
+  width: '326px',
+  padding: '24px',
+
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '2.4rem',
+
+  backgroundColor: '#fff',
+
+  borderRadius: '8px',
+});

src/components/Modal/Modal.tsx

@@ -0,0 +1,35 @@
+import { FormEvent, MouseEventHandler, ReactNode, useEffect, useRef, useState } from 'react';
+import ModalPortal from '@/components/ModalPortal';
+import * as styles from './Modal.css';
+import ModalTitle from './ModalTitle';
+import ModalButton from './ModalButton';
+import useOnClickOutside from '@/hooks/useOnClickOutside';
+import useBooleanOutput from '@/hooks/useBooleanOutput';
+
+interface ModalMainProps {
+  children?: ReactNode;
+  handleModalClose: () => void;
+}
+
+function ModalMain({ children, handleModalClose }: ModalMainProps) {
+  const { ref } = useOnClickOutside(() => {
+    handleModalClose();
+  });
+
+  return (
+    <ModalPortal>
+      <div className={styles.background}>
+        <div ref={ref} className={styles.container}>
+          {children}
+        </div>
+      </div>
+    </ModalPortal>
+  );
+}
+
+const Modal = Object.assign(ModalMain, {
+  Title: ModalTitle,
+  Button: ModalButton,
+});
+
+export default Modal;

src/components/Modal/ModalButton.css.ts

@@ -0,0 +1,41 @@
+import { style } from '@vanilla-extract/css';
+
+export const buttonContainer = style({
+  width: '100%',
+
+  display: 'flex',
+  justifyContent: 'flex-end',
+  gap: '16px',
+});
+
+export const baseButton = style({
+  padding: '12px 16px',
+
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  flexShrink: '0',
+
+  borderRadius: '12px',
+  fontSize: '1.4rem',
+  fontWeight: '500',
+  lineHeight: '20px',
+  letterSpacing: '-0.4px',
+});
+
+export const primaryButton = style([
+  baseButton,
+  {
+    backgroundColor: '#0047FF',
+    color: '#fff',
+  },
+]);
+
+export const secondaryButton = style([
+  baseButton,
+  {
+    backgroundColor: '#EBF4FF',
+    color: '#0047FF',
+  },
+]);

src/components/Modal/ModalButton.tsx

@@ -0,0 +1,21 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import * as styles from './ModalButton.css';
+
+interface ModalButtonProps {
+  children: ReactNode;
+  onCancel: MouseEventHandler<HTMLButtonElement>;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+export default function ModalButton({ children, onCancel, onClick }: ModalButtonProps) {
+  return (
+    <div className={styles.buttonContainer}>
+      <button type="button" className={styles.secondaryButton} onClick={onCancel}>
+        취소
+      </button>
+      <button type="button" className={styles.primaryButton} onClick={onClick}>
+        {children}
+      </button>
+    </div>
+  );
+}

src/components/Modal/ModalTitle.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const title = style({
+  width: '100%',
+  fontSize: '1.6rem',
+  fontWeight: '600',
+  lineHeight: '150%',
+});

src/components/Modal/ModalTitle.tsx

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import * as styles from './ModalTitle.css';
+
+export default function ModalTitle({ children }: { children: ReactNode }) {
+  return <div className={styles.title}>{children}</div>;
+}

src/components/ModalPortal.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import ReactDOM from 'react-dom';
+
+interface Props {
+  children: ReactNode;
+}
+
+const ModalPortal = ({ children }: Props) => {
+  const el = document.getElementById('modal-root') as HTMLElement;
+
+  return ReactDOM.createPortal(children, el);
+};
+
+export default ModalPortal;

src/hooks/useBooleanOutput.ts

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useState } from 'react';
+
+interface useBooleanOutput {
+  isOn: boolean;
+  toggle: () => void;
+  handleSetOn: () => void;
+  handleSetOff: () => void;
+}
+
+export default function useBooleanOutput(defaultValue?: boolean): useBooleanOutput {
+  const [isOn, setIsOn] = useState<boolean>(!!defaultValue);
+
+  const toggle = useCallback(() => setIsOn((prev) => !prev), []);
+  const handleSetOn = useCallback(() => setIsOn(true), []);
+  const handleSetOff = useCallback(() => setIsOn(false), []);
+
+  useEffect(() => {
+    setIsOn(false);
+  }, []);
+
+  return { isOn, toggle, handleSetOn, handleSetOff };
+}

src/hooks/useOnClickOutside.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef, useState } from 'react';
+
+const useOnClickOutside = (handler: () => void) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: Event) => {
+      if (ref.current !== null && !ref.current.contains(e.target as Node)) {
+        handler();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [ref]);
+
+  return { ref };
+};
+
+export default useOnClickOutside;