feat(ui): modal 컴포넌트 개발 (#104)

* chore(ui): 라이브러리 버전 업데이트

* chore(ui): portal isopen prop 추가

* feat(ui): modal 컴포넌트 개발

* feat(ui): modal storybook 작성

* fix(ui): portal 버그 수정

* chore(ui): height 수정

apps/admin/package.json

@@ -18,16 +18,16 @@
     "@tanstack/react-query-devtools": "^5.7.2",
     "framer-motion": "^10.16.4",
     "next": "14.0.2",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2"
   },
   "devDependencies": {
     "@sickgyun/tsconfig":"workspace:*",
     "@sickgyun/eslint-config": "workspace:*",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "eslint": "^8",
     "eslint-config-next": "14.0.2",
     "typescript": "^5"

apps/client/package.json

@@ -25,8 +25,8 @@
     "framer-motion": "^10.16.4",
     "jotai": "^2.6.0",
     "next": "14.0.2",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "recoil": "^0.7.7"
   },
@@ -39,8 +39,8 @@
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.10",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "eslint": "^8.52.0",
     "eslint-config-next": "14.0.1",
     "jest": "^29.7.0",

packages/design-token/package.json

@@ -10,10 +10,10 @@
   "devDependencies": {
     "@sickgyun/eslint-config": "workspace:*",
     "@sickgyun/tsconfig": "workspace:*",
-    "@types/react": "^18.2.45"
+    "@types/react": "^18.2.0"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
-    "react": "^18"
+    "react": "^18.2.0"
   }
 }

packages/ui/package.json

@@ -20,8 +20,8 @@
     "@storybook/react": "^7.6.6",
     "@storybook/react-vite": "^7.6.6",
     "@storybook/test": "^7.6.6",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "eslint-plugin-storybook": "^0.6.15",
     "storybook": "^7.6.6",
     "typescript": "^5"
@@ -30,7 +30,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@sickgyun/design-token": "workspace:*",
-    "react": "^18",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
 }

packages/ui/src/Modal/Modal.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Modal as ModalComponent } from '.';
+
+type Modal = typeof ModalComponent;
+
+const meta: Meta<Modal> = {
+  component: ModalComponent,
+  title: 'Components/Modal',
+};
+
+export default meta;
+
+export const Default: StoryObj<Modal> = {
+  args: {
+    isOpen: false,
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <ModalComponent {...args} isOpen={isOpen}>
+          <button
+            type="button"
+            onClick={() => {
+              setIsOpen(false);
+            }}
+          >
+            Close!
+          </button>
+        </ModalComponent>
+        <button
+          type="button"
+          onClick={() => {
+            setIsOpen(true);
+          }}
+        >
+          Open!
+        </button>
+      </>
+    );
+  },
+};

packages/ui/src/Modal/index.tsx

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+import type { ForwardedRef, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import Portal from '../Portal';
+
+type ModalProps = {
+  isOpen: boolean;
+  width?: string;
+  height?: string;
+  children: ReactNode;
+};
+
+export const Modal = forwardRef(function Modal(
+  { isOpen, width = '600px', height = 'auto', children, ...props }: ModalProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <Portal isOpen={isOpen}>
+      <StyledDIM>
+        <StyledModal ref={ref} width={width} height={height} {...props}>
+          {children}
+        </StyledModal>
+      </StyledDIM>
+    </Portal>
+  );
+});
+
+const StyledDIM = styled.div`
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: #d8e3ff99;
+  backdrop-filter: blur(12.5px);
+`;
+
+const StyledModal = styled.div<{ width: string; height: string }>`
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  min-height: 350px;
+  background-color: ${({ theme }) => theme.colors.white};
+  padding: 36px;
+  border-radius: 16px;
+`;

packages/ui/src/Portal/index.tsx

@@ -1,10 +1,10 @@
 import { type PropsWithChildren, useState } from 'react';
 import { createPortal } from 'react-dom';
-import useDidMount from './useDidMount';
+import { useDidMount } from './useDidMount';
 
-type PortalProps = PropsWithChildren;
+type PortalProps = PropsWithChildren<{ isOpen: boolean }>;
 
-export const Portal = ({ children }: PortalProps) => {
+export const Portal = ({ isOpen, children }: PortalProps) => {
   const [container, setContainer] = useState<Element | null>(null);
 
   useDidMount(() => {
@@ -15,7 +15,7 @@ export const Portal = ({ children }: PortalProps) => {
 
   if (!container) return null;
 
-  return createPortal(children, container);
+  return createPortal(isOpen && children, container);
 };
 
 export default Portal;

packages/ui/src/Portal/useDidMount.ts

@@ -1,6 +1,6 @@
 import { type EffectCallback, useEffect, useRef } from 'react';
 
-const useDidMount = (callback: EffectCallback) => {
+export const useDidMount = (callback: EffectCallback) => {
   const didMountRef = useRef(false);
 
   useEffect(() => {
@@ -10,5 +10,3 @@ const useDidMount = (callback: EffectCallback) => {
     callback();
   }, []);
 };
-
-export default useDidMount;

packages/ui/src/index.ts

@@ -1,5 +1,4 @@
 export * from './Text';
 export * from './Flex';
 export * from './Button';
-export * from './Portal';
 export * from './Stack';