Merge pull request #91 from pknu-wap/refactor/#89/use-portal

Refactor/#89/use portal

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

.eslintignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+yarn.lock

.eslintrc.json

@@ -6,7 +6,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
-    "plgin:react-hooks/recommended",
+    "plugin:react-hooks/recommended",
     "plugin:storybook/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended"

.prettierignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+yarn.lock

README.md

@@ -45,6 +45,8 @@ To use WAP UI, Install the `@wap-ui/react` package and its peer dependencies.
 (`@emotion/react`, `@emotion/styled`, `framer-motion`)
 
 ```sh
+pnpm add @wap-ui/react @emotion/react @emotion/styled framer-motion
+# or
 yarn add @wap-ui/react @emotion/react @emotion/styled framer-motion
 # or
 npm i @wap-ui/react @emotion/react @emotion/styled framer-motion

packages/react/.storybook/preview-head.html

@@ -1 +1,3 @@
-<div id="modal"></div>
+<script>
+  window.global = window;
+</script>

packages/react/README.md

@@ -30,10 +30,10 @@
   </tr>
   <tr>
     <td width="50%">
-      <img src="https://user-images.githubusercontent.com/75781414/209562230-7f3e9d0d-fa5f-452c-be92-dfeebb251e48.gif"  />
+      <img src="https://user-images.githubusercontent.com/75781414/209572114-dfa9b08a-052b-446e-afd5-388545d09c6b.gif"  />
     </td>
     <td width="50%">
-      <img src="https://user-images.githubusercontent.com/75781414/209560781-9994d09d-6768-4555-833d-35d6ebe16a11.gif" />
+      <img src="https://user-images.githubusercontent.com/75781414/209572876-2720e0ef-94bb-441d-b24e-b282fefc683d.gif" />
     </td>
   </tr>
   </tr>
@@ -45,6 +45,8 @@ To use WAP UI, Install the `@wap-ui/react` package and its peer dependencies.
 (`@emotion/react`, `@emotion/styled`, `framer-motion`)
 
 ```sh
+pnpm add @wap-ui/react @emotion/react @emotion/styled framer-motion
+# or
 yarn add @wap-ui/react @emotion/react @emotion/styled framer-motion
 # or
 npm i @wap-ui/react @emotion/react @emotion/styled framer-motion
@@ -141,7 +143,7 @@ export default Home;
 ## `Links`
 
 - #### [Documents](https://github.com/pknu-wap/wap-ui/tree/main/docs)
-- #### [NPM](https://www.npmjs.com/package/wap-ui)
+- #### [NPM](https://www.npmjs.com/package/@wap-ui/react)
 - #### [Playground](https://wap-ui.vercel.app/)
 - #### [Presentations](https://github.com/pknu-wap/wap-ui/tree/main/ppt)
 - #### [Example](https://github.com/pknu-wap/wap-ui/tree/main/example)

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wap-ui/react",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "WAP UI / React UI Components Library",
   "repository": "https://github.com/pknu-wap/2022_2_WAP_WEB_TEAM1.git",
   "author": "neko113 <alstn113@gmail.com>",

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -1,10 +1,10 @@
 import React, { useRef, useState } from 'react';
-import useOnClickOutside from '../../hooks/useOnClickOutside';
 import { DropdownMenu } from './DropdownMenu';
 import { DropdownMenuItem } from './DropdownMenuItem';
 import { DropdownButton } from './DropdownButton/DropdownButton';
 import { DropdownContext } from './DropdownContext';
-import { Portal } from '../Portal';
+import { usePortal, useOnClickOutside } from '../../hooks';
+import { createPortal } from 'react-dom';
 
 export interface DropdownProps {
   children: React.ReactNode[];
@@ -27,6 +27,7 @@ export interface DropdownProps {
  * ```
  */
 export const Dropdown = ({ children }: DropdownProps) => {
+  const el = usePortal('dropdown');
   /** triggerRef은 Context를 타고 DropdownButton으로 전달됨 */
   const triggerRef = useRef<HTMLButtonElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -42,6 +43,8 @@ export const Dropdown = ({ children }: DropdownProps) => {
     }
   });
 
+  if (!el) return null;
+
   return (
     <DropdownContext.Provider
       value={{
@@ -54,7 +57,7 @@ export const Dropdown = ({ children }: DropdownProps) => {
       {/* tirgger button <Dropdown.Button>Actions</Dropdown.Button> */}
       {trigger}
       {/* content menu <Dropdown.Menu>...</Dropdown.Menu> */}
-      <Portal>{content}</Portal>
+      {createPortal(content, el)}
     </DropdownContext.Provider>
   );
 };

packages/react/src/components/Modal/Modal.tsx

@@ -1,10 +1,11 @@
 import { AnimatePresence, useWillChange, type Variants } from 'framer-motion';
 import React, { useLayoutEffect } from 'react';
-import { Portal } from '../Portal';
 import * as S from './Modal.styles';
 import { ModalBody } from './ModalBody/ModalBody';
 import { ModalFooter } from './ModalFooter/ModalFooter';
 import { ModalHeader } from './ModalHeader/ModalHeader';
+import { usePortal } from '../../hooks';
+import { createPortal } from 'react-dom';
 
 export interface ModalProps {
   /**
@@ -52,6 +53,7 @@ export const Modal = ({
   children,
 }: ModalProps) => {
   const willChange = useWillChange();
+  const el = usePortal('modal');
 
   useLayoutEffect(() => {
     if (isOpen) {
@@ -88,37 +90,38 @@ export const Modal = ({
     },
   };
 
-  return (
-    <Portal target="modal">
-      <AnimatePresence>
-        {isOpen && (
-          <>
-            <S.Overlay
-              variants={overlayVariants}
+  if (!el) return null;
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <S.Overlay
+            variants={overlayVariants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={{ duration: 0.3 }}
+            blur={blur.toString()}
+            onClick={onClose}
+            style={{ willChange }}
+          />
+          <S.Positioner>
+            <S.ModalContainer
+              variants={modalVariants}
               initial="initial"
               animate="animate"
               exit="exit"
               transition={{ duration: 0.3 }}
-              blur={blur.toString()}
-              onClick={onClose}
               style={{ willChange }}
-            />
-            <S.Positioner>
-              <S.ModalContainer
-                variants={modalVariants}
-                initial="initial"
-                animate="animate"
-                exit="exit"
-                transition={{ duration: 0.3 }}
-                style={{ willChange }}
-              >
-                {children}
-              </S.ModalContainer>
-            </S.Positioner>
-          </>
-        )}
-      </AnimatePresence>
-    </Portal>
+            >
+              {children}
+            </S.ModalContainer>
+          </S.Positioner>
+        </>
+      )}
+    </AnimatePresence>,
+    el,
   );
 };