From cae1a15a29cb40119a6caa6bd241efe7aeaeb156 Mon Sep 17 00:00:00 2001 From: abg3000 Date: Sat, 27 Jul 2024 00:39:42 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/common/components/Modal/Modal.tsx | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 packages/web-domains/src/common/components/Modal/Modal.tsx diff --git a/packages/web-domains/src/common/components/Modal/Modal.tsx b/packages/web-domains/src/common/components/Modal/Modal.tsx new file mode 100644 index 00000000..fbecb2e8 --- /dev/null +++ b/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 { + isOpen: boolean; + width?: number; + footer?: ReactNode; + onClose?: () => void; +} + +export const Modal = ({ isOpen, width, onClose, children, footer, ...rest }: PropsWithChildren) => { + const [modalState, setIsModalState] = useState(isOpen); + const [element, setElement] = useState(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( +
+ +
, + element, + ); +}; From 3abf1959b70bfe47e55f95048f8c6a9da1f84448 Mon Sep 17 00:00:00 2001 From: abg3000 Date: Sat, 27 Jul 2024 00:41:07 +0900 Subject: [PATCH 2/5] fix: eslint fix --- packages/core/sds/src/components/Button/Button.tsx | 5 +++-- packages/core/sds/src/components/Button/styles.ts | 2 ++ .../core/sds/src/components/TextButton/TextButton.tsx | 8 +++++--- packages/core/sds/src/components/TextButton/styles.ts | 1 - 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/core/sds/src/components/Button/Button.tsx b/packages/core/sds/src/components/Button/Button.tsx index 6556cfb9..182eed76 100644 --- a/packages/core/sds/src/components/Button/Button.tsx +++ b/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 { size?: ButtonSize; diff --git a/packages/core/sds/src/components/Button/styles.ts b/packages/core/sds/src/components/Button/styles.ts index c7233874..fa18353b 100644 --- a/packages/core/sds/src/components/Button/styles.ts +++ b/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'; diff --git a/packages/core/sds/src/components/TextButton/TextButton.tsx b/packages/core/sds/src/components/TextButton/TextButton.tsx index 962d9b0a..4062dddb 100644 --- a/packages/core/sds/src/components/TextButton/TextButton.tsx +++ b/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 { variant?: TextButtonVariant; diff --git a/packages/core/sds/src/components/TextButton/styles.ts b/packages/core/sds/src/components/TextButton/styles.ts index 78526efc..d7561378 100644 --- a/packages/core/sds/src/components/TextButton/styles.ts +++ b/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', From f6771dcd4db866862949c91d41a9657fb1420a5b Mon Sep 17 00:00:00 2001 From: abg3000 Date: Sat, 27 Jul 2024 00:42:20 +0900 Subject: [PATCH 3/5] chore: delete unused domains --- apps/web/app/page.tsx | 6 ++--- apps/web/app/second/page.tsx | 8 +----- ...FeatureOfFirstDomainTestButton.stories.tsx | 25 ------------------- .../src/first-domain/common/.gitkeep | 0 .../FirstFeatureOfFirstDomainTestBox.tsx | 23 ----------------- .../FirstFeatureOfFirstDomainTestButton.tsx | 25 ------------------- ...FirstFeatureOfFirstDomainTestContainer.tsx | 20 --------------- .../useFirstFeatureOfFirstDomainTestButton.ts | 14 ----------- ...useFirstFeatureOfFirstDomainTestService.ts | 19 -------------- .../web-domains/src/first-domain/index.ts | 3 --- .../screens/FirstDomainExampleScreen.tsx | 16 ------------ .../src/second-domain/common/.gitkeep | 0 .../FirstFeatureOfSecondDomainTestBox.tsx | 24 ------------------ .../FirstFeatureOfSecondDomainTestButton.tsx | 23 ----------------- ...irstFeatureOfSecondDomainTestContainer.tsx | 19 -------------- .../useFirstFeatureOfFirstDomainTestButton.ts | 14 ----------- ...seFirstFeatureOfSecondDomainTestService.ts | 14 ----------- .../web-domains/src/second-domain/index.ts | 1 - .../screens/SecondDomainExampleScreen.tsx | 10 -------- 19 files changed, 4 insertions(+), 260 deletions(-) delete mode 100644 apps/web/stories/FirstFeatureOfFirstDomainTestButton.stories.tsx delete mode 100644 packages/web-domains/src/first-domain/common/.gitkeep delete mode 100644 packages/web-domains/src/first-domain/features/components/FirstFeatureOfFirstDomainTestBox.tsx delete mode 100644 packages/web-domains/src/first-domain/features/components/FirstFeatureOfFirstDomainTestButton.tsx delete mode 100644 packages/web-domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer.tsx delete mode 100644 packages/web-domains/src/first-domain/features/hooks/useFirstFeatureOfFirstDomainTestButton.ts delete mode 100644 packages/web-domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts delete mode 100644 packages/web-domains/src/first-domain/index.ts delete mode 100644 packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx delete mode 100644 packages/web-domains/src/second-domain/common/.gitkeep delete mode 100644 packages/web-domains/src/second-domain/features/components/FirstFeatureOfSecondDomainTestBox.tsx delete mode 100644 packages/web-domains/src/second-domain/features/components/FirstFeatureOfSecondDomainTestButton.tsx delete mode 100644 packages/web-domains/src/second-domain/features/containers/FirstFeatureOfSecondDomainTestContainer.tsx delete mode 100644 packages/web-domains/src/second-domain/features/hooks/useFirstFeatureOfFirstDomainTestButton.ts delete mode 100644 packages/web-domains/src/second-domain/features/services/useFirstFeatureOfSecondDomainTestService.ts delete mode 100644 packages/web-domains/src/second-domain/index.ts delete mode 100644 packages/web-domains/src/second-domain/screens/SecondDomainExampleScreen.tsx diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 207b7aba..1a5f7346 100644 --- a/apps/web/app/page.tsx +++ b/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
; +} diff --git a/apps/web/app/second/page.tsx b/apps/web/app/second/page.tsx index b518ea82..1ca7709d 100644 --- a/apps/web/app/second/page.tsx +++ b/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 ( -
- -
- ); + return
; } diff --git a/apps/web/stories/FirstFeatureOfFirstDomainTestButton.stories.tsx b/apps/web/stories/FirstFeatureOfFirstDomainTestButton.stories.tsx deleted file mode 100644 index 8d1aadd2..00000000 --- a/apps/web/stories/FirstFeatureOfFirstDomainTestButton.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { FirstFeatureOfFirstDomainTestButton } from '@sambad/web-domains/first-domain'; - -import type { Meta, StoryObj } from '@storybook/react'; - -const meta = { - title: 'Components/FirstFeatureOfFirstDomainTestButton', - component: FirstFeatureOfFirstDomainTestButton, - tags: ['autodocs'], - argTypes: { - children: { - control: 'text', - description: 'FirstFeatureOfFirstDomainTestButton 컴포넌트가 표시할 내용을 정의합니다.', - }, - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - children: 'Button', - }, - render: (args) => , -}; diff --git a/packages/web-domains/src/first-domain/common/.gitkeep b/packages/web-domains/src/first-domain/common/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/web-domains/src/first-domain/features/components/FirstFeatureOfFirstDomainTestBox.tsx b/packages/web-domains/src/first-domain/features/components/FirstFeatureOfFirstDomainTestBox.tsx deleted file mode 100644 index 5f0d2e04..00000000 --- a/packages/web-domains/src/first-domain/features/components/FirstFeatureOfFirstDomainTestBox.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Button } from '@sambad/sds/components'; - -import type { PropsWithChildren } from 'react'; -interface FirstFeatureOfFirstDomainBoxProps { - displayText: string; - onClick?: () => void; -} - -export const FirstFeatureOfFirstDomainBox = ({ - displayText, - onClick, - children, -}: PropsWithChildren) => { - return ( -
- - {displayText} - {children} -
- ); -}; diff --git a/packages/web-domains/src/first-domain/features/components/FirstFeatureOfFirstDomainTestButton.tsx b/packages/web-domains/src/first-domain/features/components/FirstFeatureOfFirstDomainTestButton.tsx deleted file mode 100644 index f8dcc86c..00000000 --- a/packages/web-domains/src/first-domain/features/components/FirstFeatureOfFirstDomainTestButton.tsx +++ /dev/null @@ -1,25 +0,0 @@ -'use client'; - -import { Button } from '@sambad/sds/components'; - -import { useFirstFeatureOfFirstDomainTestButton } from '../hooks/useFirstFeatureOfFirstDomainTestButton'; - -import type { HTMLAttributes, ReactNode } from 'react'; - -export interface FirstFeatureOfFirstDomainTestButtonProps extends HTMLAttributes { - children?: ReactNode; -} - -export const FirstFeatureOfFirstDomainTestButton = ({ - children, - ...rest -}: FirstFeatureOfFirstDomainTestButtonProps) => { - const { testText, handleChangeTestText } = useFirstFeatureOfFirstDomainTestButton(); - - return ( - - ); -}; diff --git a/packages/web-domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer.tsx b/packages/web-domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer.tsx deleted file mode 100644 index 4642b622..00000000 --- a/packages/web-domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer.tsx +++ /dev/null @@ -1,20 +0,0 @@ -'use client'; - -import { FirstFeatureOfFirstDomainBox } from '../components/FirstFeatureOfFirstDomainTestBox'; -import { FirstFeatureOfFirstDomainTestButton } from '../components/FirstFeatureOfFirstDomainTestButton'; -import { useFirstFeatureOfFirstDomainService } from '../services/useFirstFeatureOfFirstDomainTestService'; - -export const FirstFeatureOfFirstDomainTestContainer = () => { - const { displayText, handleChangeDisplayText, data } = useFirstFeatureOfFirstDomainService(); - - return ( - - { - alert('Button is Clicked at Container'); - }} - /> -
{data}
- - ); -}; diff --git a/packages/web-domains/src/first-domain/features/hooks/useFirstFeatureOfFirstDomainTestButton.ts b/packages/web-domains/src/first-domain/features/hooks/useFirstFeatureOfFirstDomainTestButton.ts deleted file mode 100644 index e8f39b8e..00000000 --- a/packages/web-domains/src/first-domain/features/hooks/useFirstFeatureOfFirstDomainTestButton.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useState } from 'react'; - -export const useFirstFeatureOfFirstDomainTestButton = () => { - const [testText, setTestText] = useState('Default Button Text'); - - const handleChangeTestText = () => { - setTestText('Test Button is Clicked!!'); - }; - - return { - testText, - handleChangeTestText, - }; -}; diff --git a/packages/web-domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts b/packages/web-domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts deleted file mode 100644 index 76ee3a4d..00000000 --- a/packages/web-domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { useState } from 'react'; - -import { useHealthCheckQuery } from '../../../common/apis/queries/useHealthCheckQuery'; - -export const useFirstFeatureOfFirstDomainService = () => { - const [displayText, setDisplayText] = useState(''); - - const { data } = useHealthCheckQuery(); - - const handleChangeDisplayText = () => { - setDisplayText('Test Container Button Clicked'); - }; - - return { - data, - displayText, - handleChangeDisplayText, - }; -}; diff --git a/packages/web-domains/src/first-domain/index.ts b/packages/web-domains/src/first-domain/index.ts deleted file mode 100644 index b41a40bb..00000000 --- a/packages/web-domains/src/first-domain/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { FirstDomainExampleScreen } from './screens/FirstDomainExampleScreen'; -export { FirstFeatureOfFirstDomainTestButton } from './features/components/FirstFeatureOfFirstDomainTestButton'; -export type { FirstFeatureOfFirstDomainTestButtonProps } from './features/components/FirstFeatureOfFirstDomainTestButton'; diff --git a/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx b/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx deleted file mode 100644 index a0202cfb..00000000 --- a/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { HydrationBoundary, dehydrate } from '@tanstack/react-query'; - -import { useHealthCheckPrefetchQuery } from '../../common/apis/queries/useHealthCheckQuery'; -import { FirstFeatureOfFirstDomainTestContainer } from '../features/containers/FirstFeatureOfFirstDomainTestContainer'; - -export const FirstDomainExampleScreen = async () => { - const { queryClient } = await useHealthCheckPrefetchQuery(); - return ( - -
-

도메인 화면을 전체 담당 하는 컴포넌트입니다.

- -
- - ); -}; diff --git a/packages/web-domains/src/second-domain/common/.gitkeep b/packages/web-domains/src/second-domain/common/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/web-domains/src/second-domain/features/components/FirstFeatureOfSecondDomainTestBox.tsx b/packages/web-domains/src/second-domain/features/components/FirstFeatureOfSecondDomainTestBox.tsx deleted file mode 100644 index 950bf110..00000000 --- a/packages/web-domains/src/second-domain/features/components/FirstFeatureOfSecondDomainTestBox.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Button } from '@sambad/sds/components'; - -import type { PropsWithChildren } from 'react'; - -interface FirstFeatureOfSecondDomainBoxProps { - displayText: string; - onClick?: () => void; -} - -export const FirstFeatureOfSecondDomainTestBox = ({ - displayText, - onClick, - children, -}: PropsWithChildren) => { - return ( -
- - {displayText} - {children} -
- ); -}; diff --git a/packages/web-domains/src/second-domain/features/components/FirstFeatureOfSecondDomainTestButton.tsx b/packages/web-domains/src/second-domain/features/components/FirstFeatureOfSecondDomainTestButton.tsx deleted file mode 100644 index 716130aa..00000000 --- a/packages/web-domains/src/second-domain/features/components/FirstFeatureOfSecondDomainTestButton.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Button } from '@sambad/sds/components'; - -import { useFirstFeatureOfFirstDomainTestButton } from '../hooks/useFirstFeatureOfFirstDomainTestButton'; - -import type { HTMLAttributes, ReactNode } from 'react'; - -interface FirstFeaturedOfSecondDomainTestButtonProps extends HTMLAttributes { - children?: ReactNode; -} - -export const FirstFeatureOfSecondDomainTestButton = ({ - children, - ...rest -}: FirstFeaturedOfSecondDomainTestButtonProps) => { - const { testText, handleChangeTestText } = useFirstFeatureOfFirstDomainTestButton(); - - return ( - - ); -}; diff --git a/packages/web-domains/src/second-domain/features/containers/FirstFeatureOfSecondDomainTestContainer.tsx b/packages/web-domains/src/second-domain/features/containers/FirstFeatureOfSecondDomainTestContainer.tsx deleted file mode 100644 index 8ae1754d..00000000 --- a/packages/web-domains/src/second-domain/features/containers/FirstFeatureOfSecondDomainTestContainer.tsx +++ /dev/null @@ -1,19 +0,0 @@ -'use client'; - -import { FirstFeatureOfSecondDomainTestBox } from '../components/FirstFeatureOfSecondDomainTestBox'; -import { FirstFeatureOfSecondDomainTestButton } from '../components/FirstFeatureOfSecondDomainTestButton'; -import { useFirstFeatureOfSecondDomainService } from '../services/useFirstFeatureOfSecondDomainTestService'; - -export const FirstFeatureOfSecondDomainTestContainer = () => { - const { displayText, handleChangeDisplayText } = useFirstFeatureOfSecondDomainService(); - - return ( - - { - alert('Button is Clicked at Container'); - }} - /> - - ); -}; diff --git a/packages/web-domains/src/second-domain/features/hooks/useFirstFeatureOfFirstDomainTestButton.ts b/packages/web-domains/src/second-domain/features/hooks/useFirstFeatureOfFirstDomainTestButton.ts deleted file mode 100644 index e8f39b8e..00000000 --- a/packages/web-domains/src/second-domain/features/hooks/useFirstFeatureOfFirstDomainTestButton.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useState } from 'react'; - -export const useFirstFeatureOfFirstDomainTestButton = () => { - const [testText, setTestText] = useState('Default Button Text'); - - const handleChangeTestText = () => { - setTestText('Test Button is Clicked!!'); - }; - - return { - testText, - handleChangeTestText, - }; -}; diff --git a/packages/web-domains/src/second-domain/features/services/useFirstFeatureOfSecondDomainTestService.ts b/packages/web-domains/src/second-domain/features/services/useFirstFeatureOfSecondDomainTestService.ts deleted file mode 100644 index dfe0a1f2..00000000 --- a/packages/web-domains/src/second-domain/features/services/useFirstFeatureOfSecondDomainTestService.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useState } from 'react'; - -export const useFirstFeatureOfSecondDomainService = () => { - const [displayText, setDisplayText] = useState(''); - - const handleChangeDisplayText = () => { - setDisplayText('Test Container Button Clicked'); - }; - - return { - displayText, - handleChangeDisplayText, - }; -}; diff --git a/packages/web-domains/src/second-domain/index.ts b/packages/web-domains/src/second-domain/index.ts deleted file mode 100644 index cd9e0478..00000000 --- a/packages/web-domains/src/second-domain/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { SecondDomainExampleScreen } from './screens/SecondDomainExampleScreen'; diff --git a/packages/web-domains/src/second-domain/screens/SecondDomainExampleScreen.tsx b/packages/web-domains/src/second-domain/screens/SecondDomainExampleScreen.tsx deleted file mode 100644 index 107c800e..00000000 --- a/packages/web-domains/src/second-domain/screens/SecondDomainExampleScreen.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { FirstFeatureOfSecondDomainTestContainer } from '../features/containers/FirstFeatureOfSecondDomainTestContainer'; - -export const SecondDomainExampleScreen = () => { - return ( -
-

도메인 화면을 전체 담당 하는 컴포넌트입니다.

- -
- ); -}; From 80cbf5baea5fdc46f1907db8b4cab236160be994 Mon Sep 17 00:00:00 2001 From: abg3000 Date: Sat, 27 Jul 2024 01:07:24 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=20=EC=9E=90=EC=B2=B4=20=EC=83=81=ED=83=9C=EA=B0=92=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web-domains/src/common/components/Modal/Modal.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/web-domains/src/common/components/Modal/Modal.tsx b/packages/web-domains/src/common/components/Modal/Modal.tsx index fbecb2e8..1fdcf671 100644 --- a/packages/web-domains/src/common/components/Modal/Modal.tsx +++ b/packages/web-domains/src/common/components/Modal/Modal.tsx @@ -12,13 +12,11 @@ export interface ModalProps extends HTMLAttributes { } export const Modal = ({ isOpen, width, onClose, children, footer, ...rest }: PropsWithChildren) => { - const [modalState, setIsModalState] = useState(isOpen); const [element, setElement] = useState(null); const modalWidth = width ? `${width}px` : '100%'; const handleClose = () => { - setIsModalState(false); onClose?.(); }; @@ -27,7 +25,7 @@ export const Modal = ({ isOpen, width, onClose, children, footer, ...rest }: Pro }, []); useEffect(() => { - if (modalState) { + if (isOpen) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = 'auto'; @@ -36,7 +34,7 @@ export const Modal = ({ isOpen, width, onClose, children, footer, ...rest }: Pro return () => { document.body.style.overflow = 'auto'; }; - }, [modalState]); + }, [isOpen]); if (typeof window === 'undefined') { return <>; @@ -46,7 +44,7 @@ export const Modal = ({ isOpen, width, onClose, children, footer, ...rest }: Pro return <>; } - if (!modalState) { + if (!isOpen) { return null; } From 69893bbb242b247b4d7151da9aaf9ce94f08830a Mon Sep 17 00:00:00 2001 From: abg3000 Date: Sat, 27 Jul 2024 01:13:59 +0900 Subject: [PATCH 5/5] =?UTF-8?q?chore:=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/common/components/Modal/Modal.tsx | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/packages/web-domains/src/common/components/Modal/Modal.tsx b/packages/web-domains/src/common/components/Modal/Modal.tsx index 1fdcf671..9180887c 100644 --- a/packages/web-domains/src/common/components/Modal/Modal.tsx +++ b/packages/web-domains/src/common/components/Modal/Modal.tsx @@ -6,16 +6,13 @@ import { createPortal } from 'react-dom'; export interface ModalProps extends HTMLAttributes { isOpen: boolean; - width?: number; footer?: ReactNode; onClose?: () => void; } -export const Modal = ({ isOpen, width, onClose, children, footer, ...rest }: PropsWithChildren) => { +export const Modal = ({ isOpen, onClose, children, footer, ...rest }: PropsWithChildren) => { const [element, setElement] = useState(null); - const modalWidth = width ? `${width}px` : '100%'; - const handleClose = () => { onClose?.(); }; @@ -36,18 +33,10 @@ export const Modal = ({ isOpen, width, onClose, children, footer, ...rest }: Pro }; }, [isOpen]); - if (typeof window === 'undefined') { - return <>; - } - - if (!element) { + if (typeof window === 'undefined' || !element || !isOpen) { return <>; } - if (!isOpen) { - return null; - } - return createPortal(