feature. Separate modal root and modal portal

Author: Siyeop

src/components/guide/progress/TProgress.interface.ts

@@ -4,6 +4,6 @@ export interface TProgressProps extends TBaseProps {
     isOpen?: boolean,
     onRequestClose?: () => void,
     message?: string,
-    containerId?: string,
+    appId?: string,
 }
 

src/components/guide/progress/TProgress.tsx

@@ -7,14 +7,14 @@ import {TProgressProps, TLoadingIndicator} from '@/components';
 
 function TProgress({
     message = '잠시만 기다려 주십시오',
-    containerId = 'root',
+    appId = 'root',
     ...restProps
 
 }: TProgressProps) {
 
     // region [Hooks]
 
-    const props: TProgressProps = {message, containerId, ...restProps};
+    const props: TProgressProps = {message, appId, ...restProps};
 
     // endregion
 
@@ -39,7 +39,7 @@ function TProgress({
     // endregion
 
     return (
-        <TModal containerId={props.containerId}
+        <TModal appId={props.appId}
                 isOpen={props.isOpen}
                 onRequestClose={props.onRequestClose}
                 className={`t-progress ${rootClass}`}

src/components/screen/modal/TModal.interface.ts

@@ -6,7 +6,9 @@ export const modalSize = {sm: 'small', md: 'medium', lg: 'large', xlg: 'xlarge',
 type modalSize = typeof modalSize[keyof typeof modalSize];
 
 export interface TModalProps extends TBaseProps {
-    containerId?: string,
+    appId?: string,
+    portalId?: string,
+
     className?: string,
     overlayClassName?: string,
     bodyClassName?: string,

src/components/screen/modal/TModal.tsx

@@ -8,14 +8,15 @@ import {modalSize, TIcon, TModalProps} from '@/components';
 import themeToken from '~style/designToken/ThemeToken.module.scss';
 
 const TModal = ({
-    containerId = 'root',
+    appId = 'root',
+    portalId,
     onRequestClose,
     ...restProps
 }: TModalProps) => {
 
     // region [Hooks]
 
-    const props:TModalProps = {containerId, onRequestClose, ...restProps};
+    const props:TModalProps = {appId, portalId, onRequestClose, ...restProps};
 
     const modalRef = useRef(null);
 
@@ -33,6 +34,16 @@ const TModal = ({
         onRequestClose(e);
     }, [onRequestClose]);
 
+    const parentSelector = useMemo(() => {
+
+        if(portalId) {
+            return () => document.querySelector(`#${portalId}`) as HTMLElement;
+        }
+
+        return undefined;
+
+    }, [portalId])
+
     // endregion
 
 
@@ -76,7 +87,7 @@ const TModal = ({
 
     useLayoutEffect(() => {
 
-        const rootElement: HTMLElement = document.getElementById(props.containerId);
+        const rootElement: HTMLElement = document.getElementById(props.appId);
 
         setDocumentRoot(rootElement);
         ReactModal.setAppElement(rootElement);
@@ -90,20 +101,22 @@ const TModal = ({
     return documentRoot && createPortal(
         (
             // Official document: https://reactcommunity.org/react-modal/
-            <ReactModal ref={modalRef}
-                        id={props.id}
-                        isOpen={props.isOpen}
-                        contentLabel={props.contentLabel}
-                        onAfterOpen={props.onAfterOpen}
-                        onAfterClose={() => props.onAfterClose?.()}
-                        onRequestClose={(event: React.MouseEvent | React.KeyboardEvent) => props.onRequestClose(event)}
-                        bodyOpenClassName={'t-modal-body--open'}
-                        portalClassName={`t-modal ${props.className ?? ''}`.trim()}
-                        overlayClassName={`t-modal__overlay ${props.overlayClassName ?? ''}`.trim()}
-                        className={`t-modal__overlay__body ${bodyClassName ?? ''}`.trim()}
-                        closeTimeoutMS={200}
-                        shouldCloseOnOverlayClick={false}
-                        testId={props.testId}
+            <ReactModal
+                ref={modalRef}
+                id={props.id}
+                isOpen={props.isOpen}
+                contentLabel={props.contentLabel}
+                onAfterOpen={props.onAfterOpen}
+                onAfterClose={() => props.onAfterClose?.()}
+                onRequestClose={(event: React.MouseEvent | React.KeyboardEvent) => props.onRequestClose(event)}
+                bodyOpenClassName={'t-modal-body--open'}
+                portalClassName={`t-modal ${props.className ?? ''}`.trim()}
+                overlayClassName={`t-modal__overlay ${props.overlayClassName ?? ''}`.trim()}
+                className={`t-modal__overlay__body ${bodyClassName ?? ''}`.trim()}
+                closeTimeoutMS={200}
+                shouldCloseOnOverlayClick={false}
+                testId={props.testId}
+                parentSelector={parentSelector}
             >
                 {/* Close Button */}
                 <TIcon

stories/components/guide/progress/TProgress.stories.tsx

@@ -27,7 +27,7 @@ const Template = () => {
 
     return (<>
         <TButton onClick={progressOn}>Progress 3초간 열기</TButton>
-        <TProgress containerId={'storybook-root'}
+        <TProgress appId={'storybook-root'}
                    isOpen={isProgressOpen}
                    onRequestClose={() => setProgressOpen(false)}
                    message={'3초 후 닫힙니다'}

stories/components/screen/modal/TModal.stories.tsx

@@ -1,6 +1,7 @@
 import {Meta, StoryObj} from '@storybook/react';
 
 import {useState} from 'react';
+import ReactModal from 'react-modal';
 import TModal from '@/components/screen/modal/TModal';
 import TButton from '@/components/button/button/TButton';
 
@@ -9,7 +10,8 @@ const meta: Meta<typeof TModal> = {
     title: 'Screen/TModal',
     component: TModal,
     args: {
-        containerId: 'storybook-root',
+        appId: 'storybook-root',
+        portalId: 'storybook-root'
     },
 
 };
@@ -27,8 +29,12 @@ const Template = (args) => {
         <TButton size={'large'} main>저장</TButton>
     </>);
 
+
+    ReactModal.setAppElement('#storybook-root');
+
     return (
         <>
+            <div id={'test-test'} />
             <TButton onClick={() => setIsOpen(true)}>모달 열기</TButton>
             <TModal {...args}
                     title={'클러스터 생성'}

tests/unit/react/tks/component/screen/page/TPage.test.tsx

@@ -126,35 +126,6 @@ describe('TPage', () => {
 
         });
 
-        it('When the space between content and panel is less than 700 px, information area should be invisible', async () => {
-
-            // Arrange
-            const user = userEvent.setup();
-
-            render(<TPage infoPanelContent={'test info content'}>Content</TPage>);
-
-            const icon = screen.getByRole('img', {name: 'info'});
-
-            // Act
-            await user.click(icon);
-
-            // Arrange
-            const resizer = screen.getByTestId('t-page-information-area-resizer');
-
-            // Act
-            await user.pointer([
-                {keys: '[MouseLeft>]', target: resizer},
-                {coords: {x: window.innerWidth - 200, y: 100}, target: document.body},
-                {keys: '[/MouseLeft]'},
-            ]);
-
-            const informationArea = screen.getByTestId('t-page-information-area');
-
-            // Assert
-            expect(informationArea).toHaveClass('t-page__information-area--invisible');
-
-        });
-
 
         it('When clicking info panel icon, information area has t-page__information-area--visible class and flex style', async () => {