feat(web-domains): 공통 모달 컴포넌트

apps/web/app/page.tsx

@@ -1,3 +1,3 @@
-import { FirstDomainExampleScreen } from '@sambad/web-domains/first-domain';
-
-export default FirstDomainExampleScreen;
+export default function Second() {
+  return <div></div>;
+}

apps/web/app/second/page.tsx

@@ -1,11 +1,5 @@
-import { SecondDomainExampleScreen } from '@sambad/web-domains/second-domain';
-
 import styles from '../page.module.css';
 
 export default function Second() {
-  return (
-    <main className={styles.main}>
-      <SecondDomainExampleScreen />
-    </main>
-  );
+  return <main className={styles.main}></main>;
 }

packages/core/sds/src/components/Button/Button.tsx

@@ -1,6 +1,7 @@
-import { ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';
-import { ButtonSize, ButtonVariant } from './types';
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
 import { buttonCss, buttonDisabledVariants, buttonSizeVariants, buttonVariantVariants } from './styles';
+import { ButtonSize, ButtonVariant } from './types';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   size?: ButtonSize;

packages/core/sds/src/components/Button/styles.ts

@@ -1,5 +1,7 @@
 import { css } from '@emotion/react';
+
 import { borderRadiusVariants, colors } from '../../theme';
+
 import { ButtonSize, ButtonVariant } from './types';
 
 const buttonHeightVar = '--sambad-button-height';

packages/core/sds/src/components/TextButton/TextButton.tsx

@@ -1,8 +1,10 @@
-import { ButtonHTMLAttributes, Children, forwardRef } from 'react';
-import { TextButtonVariant } from './types';
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+import { colors } from '../../theme';
 import { Icon } from '../Icon';
+
 import { arrowIconCss, textButtonCss } from './styles';
-import { colors } from '../../theme';
+import { TextButtonVariant } from './types';
 
 export interface TextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: TextButtonVariant;

packages/core/sds/src/components/TextButton/styles.ts

@@ -1,5 +1,4 @@
 import { css } from '@emotion/react';
-import { colors } from '../../theme';
 
 export const textButtonCss = css({
   display: 'inline-flex',

packages/web-domains/src/common/components/Modal/Modal.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { borderRadiusVariants, colors } from '@sambad/sds/theme';
+import { HTMLAttributes, PropsWithChildren, ReactNode, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  isOpen: boolean;
+  width?: number;
+  footer?: ReactNode;
+  onClose?: () => void;
+}
+
+export const Modal = ({ isOpen, width, onClose, children, footer, ...rest }: PropsWithChildren<ModalProps>) => {
+  const [modalState, setIsModalState] = useState<boolean>(isOpen);
+  const [element, setElement] = useState<HTMLElement | null>(null);
+
+  const modalWidth = width ? `${width}px` : '100%';
+
+  const handleClose = () => {
+    setIsModalState(false);
+    onClose?.();
+  };
+
+  useEffect(() => {
+    setElement(document.body);
+  }, []);
+
+  useEffect(() => {
+    if (modalState) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [modalState]);
+
+  if (typeof window === 'undefined') {
+    return <></>;
+  }
+
+  if (!element) {
+    return <></>;
+  }
+
+  if (!modalState) {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      css={{ width: '100%', height: '100%', background: '#00000066', position: 'fixed', top: 0 }}
+      onClick={handleClose}
+    >
+      <div
+        id="modal"
+        css={{
+          padding: '20px',
+          width: modalWidth,
+          maxWidth: '335px',
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          backgroundColor: colors.white,
+          borderRadius: borderRadiusVariants.medium,
+          zIndex: '10000',
+        }}
+        {...rest}
+      >
+        {children}
+        <div id="modal-footer">{footer}</div>
+      </div>
+    </div>,
+    element,
+  );
+};