From f249a20a2276815fcdfd762745280ce6bf4047e1 Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Mon, 8 Feb 2021 02:20:46 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat(ui-kit):=20Modal=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Modal/index.tsx | 72 ++++++++++++++++++++++++++ ui-kit/src/components/index.ts | 1 + ui-kit/src/sass/components/_Modal.scss | 49 ++++++++++++++++++ ui-kit/src/sass/components/_index.scss | 1 + 4 files changed, 123 insertions(+) create mode 100644 ui-kit/src/components/Modal/index.tsx create mode 100644 ui-kit/src/sass/components/_Modal.scss diff --git a/ui-kit/src/components/Modal/index.tsx b/ui-kit/src/components/Modal/index.tsx new file mode 100644 index 00000000..e0117358 --- /dev/null +++ b/ui-kit/src/components/Modal/index.tsx @@ -0,0 +1,72 @@ +import React, { ReactNode } from 'react'; +import Button from 'components/Button'; +import classnames from 'classnames'; +import { colors } from 'constants/colors'; + +interface ModalProps { + open: boolean; + title?: string; + size?: 'small' | 'medium'; + buttonText?: string; + children?: ReactNode; + cancel?: boolean; + onClose?: () => void; + handleClick: () => void; +} + +const Modal = ({ + open = false, + size = 'small', + children, + title, + buttonText = '저장하기', + cancel = true, + onClose, + handleClick, +}: ModalProps) => { + const visibleClass = open ? 'lubycon-modal__visible' : undefined; + + return ( + <> +
+
+
+ {title && ( +

+ {title} +

+ )} +

+ {children} +

+
+ {cancel && ( + + )} + +
+
+
+ + ); +}; + +export default Modal; diff --git a/ui-kit/src/components/index.ts b/ui-kit/src/components/index.ts index 3d96c6df..4dad2b66 100644 --- a/ui-kit/src/components/index.ts +++ b/ui-kit/src/components/index.ts @@ -7,3 +7,4 @@ export { default as Switch } from './Switch'; export { default as Text } from './Text'; export { default as LubyconUIKitProvider } from './LubyconUIKitProvider'; export { default as Toast } from './Toast'; +export { default as Modal } from './Modal'; diff --git a/ui-kit/src/sass/components/_Modal.scss b/ui-kit/src/sass/components/_Modal.scss new file mode 100644 index 00000000..9ee3af53 --- /dev/null +++ b/ui-kit/src/sass/components/_Modal.scss @@ -0,0 +1,49 @@ +.lubycon-modal { + display: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + z-index: 1000; + + &__visible { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + &__overlay { + background-color: get-color('gray100'); + opacity: 0.5; + } + &__content { + background-color: get-color('gray10'); + border-radius: 4px; + &__small { + min-width: 280px; + padding: 16px 20px; + } + &__medium { + min-width: 400px; + padding: 20px 24px; + } + } + &__title { + color: get-color('gray100'); + font-weight: normal; + margin-top: 0; + margin-bottom: 12px; + } + &__description { + color: get-color('gray70'); + margin-top: 0; + margin-bottom: 24px; + } + &__buttons { + display: flex; + align-items: center; + justify-content: flex-end; + } +} diff --git a/ui-kit/src/sass/components/_index.scss b/ui-kit/src/sass/components/_index.scss index 11b4db9f..1344cde1 100644 --- a/ui-kit/src/sass/components/_index.scss +++ b/ui-kit/src/sass/components/_index.scss @@ -8,3 +8,4 @@ @import './Selection'; @import './Icon'; @import './Toast'; +@import './Modal'; From cdaadc1b51c85f3f55061bacf1761bbdc6fd567a Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Mon, 8 Feb 2021 02:20:56 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat(ui-kit):=20Modal=20=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/stories/Modal.stories.tsx | 29 ++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 ui-kit/src/stories/Modal.stories.tsx diff --git a/ui-kit/src/stories/Modal.stories.tsx b/ui-kit/src/stories/Modal.stories.tsx new file mode 100644 index 00000000..3949d08f --- /dev/null +++ b/ui-kit/src/stories/Modal.stories.tsx @@ -0,0 +1,29 @@ +import { Meta } from '@storybook/react/types-6-0'; +import React, { useState } from 'react'; +import Modal from 'components/Modal'; +import Button from 'components/Button'; + +export default { + title: 'Lubycon UI kit/Modal', + component: Modal, +} as Meta; + +export const Default = () => { + const [openModal, setModal] = useState(false); + + const onClose = () => setModal(false); + const onConfirm = () => setModal(false); + + return ( +
+ + + 여기에 본문 텍스트가 들어갑니다 +
+ 여기에 본문 텍스트가 들어갑니다 + +
+ ); +}; From 1bea9b14759edb7e7ed26d1bf555cb33a3f1b9ef Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Mon, 8 Feb 2021 02:21:03 +0900 Subject: [PATCH 03/13] feat(ui-kit): Modal TODO --- ui-kit/src/components/LubyconUIKitProvider/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui-kit/src/components/LubyconUIKitProvider/index.tsx b/ui-kit/src/components/LubyconUIKitProvider/index.tsx index e13bffc6..9cd7bbd0 100644 --- a/ui-kit/src/components/LubyconUIKitProvider/index.tsx +++ b/ui-kit/src/components/LubyconUIKitProvider/index.tsx @@ -1,6 +1,7 @@ import React, { ReactNode } from 'react'; import { ToastProvider } from 'contexts/Toast'; import { PortalProvider } from 'contexts/Portal'; +// import { ModalProvider } from 'contexts/Modal'; interface Props { children: ReactNode; @@ -10,6 +11,7 @@ function LubyconUIKitProvider({ children }: Props) { return ( {children} + {/* {children} */} ); } From a894e1aa14ec02456a1f75572c06cc37ccab44f1 Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Sun, 21 Feb 2021 03:02:29 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat(ui-kit):=20Modal=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/LubyconUIKitProvider/index.tsx | 9 +- ui-kit/src/components/Modal/ModalBackdrop.tsx | 18 +++ ui-kit/src/components/Modal/index.tsx | 73 +++++++---- ui-kit/src/contexts/Modal.tsx | 64 ++++++++++ ui-kit/src/sass/components/_Modal.scss | 17 +-- ui-kit/src/stories/Modal.stories.tsx | 119 ++++++++++++++++-- 6 files changed, 252 insertions(+), 48 deletions(-) create mode 100644 ui-kit/src/components/Modal/ModalBackdrop.tsx create mode 100644 ui-kit/src/contexts/Modal.tsx diff --git a/ui-kit/src/components/LubyconUIKitProvider/index.tsx b/ui-kit/src/components/LubyconUIKitProvider/index.tsx index 407c2c7e..0765eef3 100644 --- a/ui-kit/src/components/LubyconUIKitProvider/index.tsx +++ b/ui-kit/src/components/LubyconUIKitProvider/index.tsx @@ -2,6 +2,7 @@ import React, { ReactNode } from 'react'; import { ToastProvider } from 'contexts/Toast'; import { PortalProvider } from 'contexts/Portal'; import { SnackbarProvider } from 'src/contexts/Snackbar'; +import { ModalProvider } from 'src/contexts/Modal'; interface Props { children: ReactNode; @@ -10,9 +11,11 @@ interface Props { function LubyconUIKitProvider({ children }: Props) { return ( - - {children} - + + + {children} + + ); } diff --git a/ui-kit/src/components/Modal/ModalBackdrop.tsx b/ui-kit/src/components/Modal/ModalBackdrop.tsx new file mode 100644 index 00000000..e5dbbf87 --- /dev/null +++ b/ui-kit/src/components/Modal/ModalBackdrop.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import classnames from 'classnames'; + +interface OverlayProps { + visibleClass: string | null; +} + +const ModalBackdrop = ({ visibleClass }: OverlayProps) => { + return ( +
+ ); +}; + +export default ModalBackdrop; diff --git a/ui-kit/src/components/Modal/index.tsx b/ui-kit/src/components/Modal/index.tsx index e0117358..a5f7758e 100644 --- a/ui-kit/src/components/Modal/index.tsx +++ b/ui-kit/src/components/Modal/index.tsx @@ -1,62 +1,87 @@ -import React, { ReactNode } from 'react'; +import React, { useEffect, useRef } from 'react'; import Button from 'components/Button'; +import Text from 'components/Text'; import classnames from 'classnames'; import { colors } from 'constants/colors'; +import ModalBackdrop from './ModalBackdrop'; -interface ModalProps { - open: boolean; +export interface ModalProps extends React.HTMLAttributes { + show: boolean; + modalIsNested?: boolean; title?: string; + message?: string; size?: 'small' | 'medium'; + cancelButton?: boolean; + cancelButtonText?: string; buttonText?: string; - children?: ReactNode; - cancel?: boolean; + handleClick?: () => void; onClose?: () => void; - handleClick: () => void; } const Modal = ({ - open = false, - size = 'small', - children, + show = false, + modalIsNested = false, title, + message, + size = 'small', + cancelButton = false, + cancelButtonText = '취소', buttonText = '저장하기', - cancel = true, - onClose, handleClick, + onClose, + style, }: ModalProps) => { - const visibleClass = open ? 'lubycon-modal__visible' : undefined; + const visibleClass = show ? 'lubycon-modal--visible' : null; + + const onKeydown = (event: KeyboardEvent) => { + if (event.key === 'Escape') onClose?.(); + }; + useEffect(() => { + window.addEventListener('keydown', onKeydown); + return () => { + window.removeEventListener('keydown', onKeydown); + }; + }, []); + + const modalWindowRef = useRef(null); + const handleBackdropClick = (event: React.MouseEvent) => { + if (event.target === modalWindowRef.current) onClose?.(); + }; return ( <> + {!modalIsNested && }
-
+ aria-hidden={true} + >
{title && (

- {title} + {title}

)} -

- {children} -

+
+ {message} +
- {cancel && ( + {cancelButton && ( )} - - 여기에 본문 텍스트가 들어갑니다 -
- 여기에 본문 텍스트가 들어갑니다 - +
+ + + + + + + +
); }; From 1d0f32e7e352a352334f1784d9ec5b44cd8ae7df Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Sun, 21 Feb 2021 03:22:04 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat(ui-kit):=20=ED=83=80=EC=9D=B4?= =?UTF-8?q?=ED=8B=80=20=EB=B6=80=EB=B6=84=20=ED=83=9C=EA=B7=B8=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Modal/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-kit/src/components/Modal/index.tsx b/ui-kit/src/components/Modal/index.tsx index a5f7758e..0ac98f9e 100644 --- a/ui-kit/src/components/Modal/index.tsx +++ b/ui-kit/src/components/Modal/index.tsx @@ -67,9 +67,9 @@ const Modal = ({ style={style} > {title && ( -

+
{title} -

+
)}
{message} From 1bd277e3a96d5413c348c94f3e054afd44a26ff5 Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Sun, 21 Feb 2021 17:28:51 +0900 Subject: [PATCH 06/13] =?UTF-8?q?chore:=20=EB=A6=AC=EB=B7=B0=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EB=B0=98=EC=98=81-=EB=B0=B1=EB=93=9C=EB=A1=AD=20fo?= =?UTF-8?q?rwradRef?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Modal/ModalBackdrop.tsx | 14 ++++++++------ ui-kit/src/components/Modal/index.tsx | 6 ++++++ 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/ui-kit/src/components/Modal/ModalBackdrop.tsx b/ui-kit/src/components/Modal/ModalBackdrop.tsx index e5dbbf87..015a17fc 100644 --- a/ui-kit/src/components/Modal/ModalBackdrop.tsx +++ b/ui-kit/src/components/Modal/ModalBackdrop.tsx @@ -1,18 +1,20 @@ -import React from 'react'; +import React, { Ref, forwardRef } from 'react'; import classnames from 'classnames'; -interface OverlayProps { - visibleClass: string | null; +interface ModalBackdropProps { + onClick: (event: React.MouseEvent) => void; } -const ModalBackdrop = ({ visibleClass }: OverlayProps) => { +const ModalBackdrop = ({ onClick }: ModalBackdropProps, ref: Ref) => { return (
); }; -export default ModalBackdrop; +export default forwardRef(ModalBackdrop); diff --git a/ui-kit/src/components/Modal/index.tsx b/ui-kit/src/components/Modal/index.tsx index 0ac98f9e..1036540d 100644 --- a/ui-kit/src/components/Modal/index.tsx +++ b/ui-kit/src/components/Modal/index.tsx @@ -32,6 +32,11 @@ const Modal = ({ style, }: ModalProps) => { const visibleClass = show ? 'lubycon-modal--visible' : null; + const backdropRef = useRef(null); + const onBackdropClick = (event: React.MouseEvent) => { + if (!backdropRef.current) return; + if (event.target === backdropRef.current) onClose?.(); + }; const onKeydown = (event: KeyboardEvent) => { if (event.key === 'Escape') onClose?.(); @@ -92,6 +97,7 @@ const Modal = ({
); + }; export default Modal; From a689de542846334c6e935018eae05211d04a8fd7 Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Sun, 21 Feb 2021 17:29:27 +0900 Subject: [PATCH 07/13] =?UTF-8?q?chore:=20=EB=A6=AC=EB=B7=B0=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EB=B0=98=EC=98=81-=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=ED=95=A9=EC=84=B1=20=EB=B0=A9=EC=8B=9D=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Modal/ModalContent.tsx | 21 +++++ ui-kit/src/components/Modal/ModalFooter.tsx | 15 ++++ ui-kit/src/components/Modal/ModalHeader.tsx | 19 ++++ ui-kit/src/components/Modal/ModalWindow.tsx | 17 ++++ ui-kit/src/components/Modal/index.tsx | 95 +++++--------------- ui-kit/src/index.ts | 7 +- ui-kit/src/sass/components/_Modal.scss | 17 ++-- 7 files changed, 105 insertions(+), 86 deletions(-) create mode 100644 ui-kit/src/components/Modal/ModalContent.tsx create mode 100644 ui-kit/src/components/Modal/ModalFooter.tsx create mode 100644 ui-kit/src/components/Modal/ModalHeader.tsx create mode 100644 ui-kit/src/components/Modal/ModalWindow.tsx diff --git a/ui-kit/src/components/Modal/ModalContent.tsx b/ui-kit/src/components/Modal/ModalContent.tsx new file mode 100644 index 00000000..3b5c93a4 --- /dev/null +++ b/ui-kit/src/components/Modal/ModalContent.tsx @@ -0,0 +1,21 @@ +import React, { ReactNode } from 'react'; +import classnames from 'classnames'; +import Text from 'components/Text'; + +interface ModalContentProps extends React.HTMLAttributes { + size?: 'small' | 'medium'; + children?: ReactNode; + isCustom?: boolean; +} + +const ModalContent = ({ children, isCustom = false, size }: ModalContentProps) => { + const typography = size === 'small' ? 'p2' : 'p1'; + + return ( +
+ {isCustom ? children : {children}} +
+ ); +}; + +export default ModalContent; diff --git a/ui-kit/src/components/Modal/ModalFooter.tsx b/ui-kit/src/components/Modal/ModalFooter.tsx new file mode 100644 index 00000000..4f263394 --- /dev/null +++ b/ui-kit/src/components/Modal/ModalFooter.tsx @@ -0,0 +1,15 @@ +import React, { ReactNode } from 'react'; + +interface ModalFooterProps { + children?: ReactNode; +} + +const ModalFooter = ({ children }: ModalFooterProps) => { + return ( +
+ {children} +
+ ); +}; + +export default ModalFooter; diff --git a/ui-kit/src/components/Modal/ModalHeader.tsx b/ui-kit/src/components/Modal/ModalHeader.tsx new file mode 100644 index 00000000..ab29e879 --- /dev/null +++ b/ui-kit/src/components/Modal/ModalHeader.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import Text from 'components/Text'; + +interface ModalHeaderProps { + size?: 'small' | 'medium'; + title: string; +} + +const ModalHeader = ({ size, title }: ModalHeaderProps) => { + const typography = size === 'small' ? 'subtitle' : 'h6'; + + return ( +
+ {title} +
+ ); +}; + +export default ModalHeader; diff --git a/ui-kit/src/components/Modal/ModalWindow.tsx b/ui-kit/src/components/Modal/ModalWindow.tsx new file mode 100644 index 00000000..467d0ba2 --- /dev/null +++ b/ui-kit/src/components/Modal/ModalWindow.tsx @@ -0,0 +1,17 @@ +import React, { ReactNode } from 'react'; +import classnames from 'classnames'; + +interface ModalWindowProps { + children: ReactNode; + size: 'small' | 'medium'; +} + +const ModalWindow = ({ children, size }: ModalWindowProps) => { + return ( +
+ {children} +
+ ); +}; + +export default ModalWindow; diff --git a/ui-kit/src/components/Modal/index.tsx b/ui-kit/src/components/Modal/index.tsx index 1036540d..f7fe283f 100644 --- a/ui-kit/src/components/Modal/index.tsx +++ b/ui-kit/src/components/Modal/index.tsx @@ -1,37 +1,19 @@ -import React, { useEffect, useRef } from 'react'; -import Button from 'components/Button'; -import Text from 'components/Text'; -import classnames from 'classnames'; -import { colors } from 'constants/colors'; +import React, { ReactElement, cloneElement, useRef } from 'react'; import ModalBackdrop from './ModalBackdrop'; +import ModalWindow from './ModalWindow'; +import classnames from 'classnames'; +import { generateID } from 'utils/index'; +import { useEffect } from 'react'; export interface ModalProps extends React.HTMLAttributes { show: boolean; - modalIsNested?: boolean; - title?: string; - message?: string; size?: 'small' | 'medium'; - cancelButton?: boolean; - cancelButtonText?: string; - buttonText?: string; - handleClick?: () => void; + children: ReactElement[]; + onOpen?: () => void; onClose?: () => void; } -const Modal = ({ - show = false, - modalIsNested = false, - title, - message, - size = 'small', - cancelButton = false, - cancelButtonText = '취소', - buttonText = '저장하기', - handleClick, - onClose, - style, -}: ModalProps) => { - const visibleClass = show ? 'lubycon-modal--visible' : null; +const Modal = ({ show, size = 'small', children, onClose }: ModalProps) => { const backdropRef = useRef(null); const onBackdropClick = (event: React.MouseEvent) => { if (!backdropRef.current) return; @@ -48,56 +30,19 @@ const Modal = ({ }; }, []); - const modalWindowRef = useRef(null); - const handleBackdropClick = (event: React.MouseEvent) => { - if (event.target === modalWindowRef.current) onClose?.(); - }; - - return ( - <> - {!modalIsNested && } -
-
- {title && ( -
- {title} -
- )} -
- {message} -
-
- {cancelButton && ( - - )} - -
-
-
- - ); + return show ? ( +
+ + {children.map((element) => { + return cloneElement(element, { key: generateID('lubycon-modal__children'), size: size }); + })} + +
+ ) : null; }; export default Modal; +export { default as ModalHeader } from './ModalHeader'; +export { default as ModalContent } from './ModalContent'; +export { default as ModalFooter } from './ModalFooter'; diff --git a/ui-kit/src/index.ts b/ui-kit/src/index.ts index 645e6572..451313ec 100644 --- a/ui-kit/src/index.ts +++ b/ui-kit/src/index.ts @@ -23,7 +23,12 @@ export { default as List, ListItem } from './components/List'; export { default as Input } from './components/Input'; export { default as ProgressBar } from './components/ProgressBar'; export { default as Accordion } from './components/Accordion'; -export { default as Modal } from './components/Modal'; +export { + default as Modal, + ModalHeader, + ModalContent, + ModalFooter, +} from './components/Modal'; export { Portal } from './contexts/Portal'; export { useToast } from './contexts/Toast'; export { useSnackbar } from './contexts/Snackbar'; diff --git a/ui-kit/src/sass/components/_Modal.scss b/ui-kit/src/sass/components/_Modal.scss index 0a4c7c8c..d5cc0bfa 100644 --- a/ui-kit/src/sass/components/_Modal.scss +++ b/ui-kit/src/sass/components/_Modal.scss @@ -1,5 +1,8 @@ .lubycon-modal { - display: none; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; position: fixed; top: 0; right: 0; @@ -8,12 +11,6 @@ overflow: auto; z-index: 1000; - &--visible { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } &__overlay { background-color: get-color('gray100'); opacity: 0.5; @@ -22,6 +19,7 @@ background-color: get-color('gray10'); border-radius: 4px; box-sizing: border-box; + z-index: 1001; &--small { width: 280px; padding: 16px 20px; @@ -36,13 +34,12 @@ margin-top: 0; margin-bottom: 12px; } - &__message { + &__content { color: get-color('gray70'); - margin-top: 0; margin-bottom: 24px; white-space: pre-wrap; } - &__buttons { + &__footer { display: flex; align-items: center; justify-content: flex-end; From 3cc526682b29afcb125a8ce1b246de63eb1ae7e9 Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Sun, 21 Feb 2021 17:29:39 +0900 Subject: [PATCH 08/13] =?UTF-8?q?chore:=20=EB=AA=A8=EB=8B=AC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/stories/Modal.stories.tsx | 120 ++++----------------------- 1 file changed, 16 insertions(+), 104 deletions(-) diff --git a/ui-kit/src/stories/Modal.stories.tsx b/ui-kit/src/stories/Modal.stories.tsx index d1a46d22..3167eae6 100644 --- a/ui-kit/src/stories/Modal.stories.tsx +++ b/ui-kit/src/stories/Modal.stories.tsx @@ -1,8 +1,7 @@ import { Meta } from '@storybook/react/types-6-0'; -import React from 'react'; -import Modal from 'components/Modal'; +import React, { useState } from 'react'; +import { Modal, ModalHeader, ModalContent, ModalFooter } from 'src'; import Button from 'components/Button'; -import { useModal } from 'contexts/Modal'; export default { title: 'Lubycon UI kit/Modal', @@ -10,108 +9,21 @@ export default { } as Meta; export const Default = () => { - const { openModal } = useModal(); + const [showModal, setShowModal] = useState(false); return ( -
- - - - - - - - -
+ <> + + setShowModal(false)}> + + +
여기에 본문 텍스트가 들어갑니다
+
여기에 본문 텍스트가 들어갑니다
+ + + + + + ); }; From 4d0adb5dbe2b5871d183f65f96c83f391296e513 Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Sun, 28 Feb 2021 01:04:41 +0900 Subject: [PATCH 09/13] =?UTF-8?q?chore:=20=EB=A6=AC=EB=B7=B0=EB=B0=98?= =?UTF-8?q?=EC=98=81=20-=20=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD,=20?= =?UTF-8?q?=EC=97=98=EB=A6=AC=EB=A8=BC=ED=8A=B8=20=EC=9C=A0=ED=9A=A8?= =?UTF-8?q?=EC=84=B1=20=EA=B2=80=EC=82=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Modal/ModalContent.tsx | 15 +++++++++------ ui-kit/src/components/Modal/ModalHeader.tsx | 11 ++++++----- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/ui-kit/src/components/Modal/ModalContent.tsx b/ui-kit/src/components/Modal/ModalContent.tsx index 3b5c93a4..545289fd 100644 --- a/ui-kit/src/components/Modal/ModalContent.tsx +++ b/ui-kit/src/components/Modal/ModalContent.tsx @@ -1,19 +1,22 @@ -import React, { ReactNode } from 'react'; +import React, { ReactNode, isValidElement } from 'react'; import classnames from 'classnames'; import Text from 'components/Text'; +import { Typographys } from 'components/Text/types'; +import { CombineElementProps } from 'types/utils'; -interface ModalContentProps extends React.HTMLAttributes { +interface BaseProps { size?: 'small' | 'medium'; children?: ReactNode; - isCustom?: boolean; } -const ModalContent = ({ children, isCustom = false, size }: ModalContentProps) => { - const typography = size === 'small' ? 'p2' : 'p1'; +type ModalContentProps = CombineElementProps<'div', BaseProps>; + +const ModalContent = ({ children, size }: ModalContentProps) => { + const typography: Typographys = size === 'small' ? 'p2' : 'p1'; return (
- {isCustom ? children : {children}} + {isValidElement(children) ? children : {children}}
); }; diff --git a/ui-kit/src/components/Modal/ModalHeader.tsx b/ui-kit/src/components/Modal/ModalHeader.tsx index ab29e879..04ca2bd4 100644 --- a/ui-kit/src/components/Modal/ModalHeader.tsx +++ b/ui-kit/src/components/Modal/ModalHeader.tsx @@ -1,17 +1,18 @@ -import React from 'react'; +import React, { ReactNode, isValidElement } from 'react'; import Text from 'components/Text'; +import { Typographys } from 'components/Text/types'; interface ModalHeaderProps { size?: 'small' | 'medium'; - title: string; + children?: ReactNode; } -const ModalHeader = ({ size, title }: ModalHeaderProps) => { - const typography = size === 'small' ? 'subtitle' : 'h6'; +const ModalHeader = ({ size, children }: ModalHeaderProps) => { + const typography: Typographys = size === 'small' ? 'subtitle' : 'h6'; return (
- {title} + {isValidElement(children) ? children : {children}}
); }; From 5871cdcc3bac85b99130c742e9219d00fc83aca1 Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Sun, 28 Feb 2021 01:05:28 +0900 Subject: [PATCH 10/13] =?UTF-8?q?chore:=20=EB=A6=AC=EB=B7=B0=EB=B0=98?= =?UTF-8?q?=EC=98=81=20-=20onOpen=20=EC=9D=B4=EB=B2=A4=ED=8A=B8,=20?= =?UTF-8?q?=EB=B0=B1=EB=93=9C=EB=A1=AD=20=EC=9D=B4=EB=B2=A4=ED=8A=B8?= =?UTF-8?q?=EB=AA=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Modal/index.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/ui-kit/src/components/Modal/index.tsx b/ui-kit/src/components/Modal/index.tsx index f7fe283f..278ac529 100644 --- a/ui-kit/src/components/Modal/index.tsx +++ b/ui-kit/src/components/Modal/index.tsx @@ -13,10 +13,10 @@ export interface ModalProps extends React.HTMLAttributes { onClose?: () => void; } -const Modal = ({ show, size = 'small', children, onClose }: ModalProps) => { +const Modal = ({ show, size = 'small', children, onOpen, onClose }: ModalProps) => { const backdropRef = useRef(null); - const onBackdropClick = (event: React.MouseEvent) => { - if (!backdropRef.current) return; + const handleBackdropClick = (event: React.MouseEvent) => { + if (backdropRef.current == null) return; if (event.target === backdropRef.current) onClose?.(); }; @@ -30,9 +30,15 @@ const Modal = ({ show, size = 'small', children, onClose }: ModalProps) => { }; }, []); + useEffect(() => { + if (show === true) { + onOpen?.(); + } + }, [show]); + return show ? (
- + {children.map((element) => { return cloneElement(element, { key: generateID('lubycon-modal__children'), size: size }); From 50d8da5e558bfa5488331a281069b4f6ab2b354c Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Sun, 28 Feb 2021 01:05:57 +0900 Subject: [PATCH 11/13] =?UTF-8?q?chore:=20=EB=A6=AC=EB=B7=B0=EB=B0=98?= =?UTF-8?q?=EC=98=81=20-=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=A0=9C=EB=84=A4=EB=A6=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Modal/ModalBackdrop.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/ui-kit/src/components/Modal/ModalBackdrop.tsx b/ui-kit/src/components/Modal/ModalBackdrop.tsx index 015a17fc..83397573 100644 --- a/ui-kit/src/components/Modal/ModalBackdrop.tsx +++ b/ui-kit/src/components/Modal/ModalBackdrop.tsx @@ -1,11 +1,14 @@ -import React, { Ref, forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import classnames from 'classnames'; interface ModalBackdropProps { onClick: (event: React.MouseEvent) => void; } -const ModalBackdrop = ({ onClick }: ModalBackdropProps, ref: Ref) => { +const ModalBackdrop = forwardRef(function ModalBackdrop( + { onClick }, + ref +) { return (
onClick={onClick} /> ); -}; +}); -export default forwardRef(ModalBackdrop); +export default ModalBackdrop; From 98770589f3cd5f3e929570b0b889ee3b546078c6 Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Sun, 28 Feb 2021 01:06:11 +0900 Subject: [PATCH 12/13] =?UTF-8?q?chore:=20=EB=A6=B0=ED=8A=B8=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Modal/ModalFooter.tsx | 6 +----- ui-kit/src/index.ts | 7 +------ 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/ui-kit/src/components/Modal/ModalFooter.tsx b/ui-kit/src/components/Modal/ModalFooter.tsx index 4f263394..c9a338f5 100644 --- a/ui-kit/src/components/Modal/ModalFooter.tsx +++ b/ui-kit/src/components/Modal/ModalFooter.tsx @@ -5,11 +5,7 @@ interface ModalFooterProps { } const ModalFooter = ({ children }: ModalFooterProps) => { - return ( -
- {children} -
- ); + return
{children}
; }; export default ModalFooter; diff --git a/ui-kit/src/index.ts b/ui-kit/src/index.ts index 451313ec..74b7ddcd 100644 --- a/ui-kit/src/index.ts +++ b/ui-kit/src/index.ts @@ -23,12 +23,7 @@ export { default as List, ListItem } from './components/List'; export { default as Input } from './components/Input'; export { default as ProgressBar } from './components/ProgressBar'; export { default as Accordion } from './components/Accordion'; -export { - default as Modal, - ModalHeader, - ModalContent, - ModalFooter, -} from './components/Modal'; +export { default as Modal, ModalHeader, ModalContent, ModalFooter } from './components/Modal'; export { Portal } from './contexts/Portal'; export { useToast } from './contexts/Toast'; export { useSnackbar } from './contexts/Snackbar'; From 466da73b86afe5755d06bd6bae105bebbb6e7619 Mon Sep 17 00:00:00 2001 From: JunKim <93kimhyunjun@gmail.com> Date: Sun, 28 Feb 2021 01:06:30 +0900 Subject: [PATCH 13/13] =?UTF-8?q?chore:=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/stories/Modal.stories.tsx | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/ui-kit/src/stories/Modal.stories.tsx b/ui-kit/src/stories/Modal.stories.tsx index 3167eae6..58e32057 100644 --- a/ui-kit/src/stories/Modal.stories.tsx +++ b/ui-kit/src/stories/Modal.stories.tsx @@ -2,6 +2,7 @@ import { Meta } from '@storybook/react/types-6-0'; import React, { useState } from 'react'; import { Modal, ModalHeader, ModalContent, ModalFooter } from 'src'; import Button from 'components/Button'; +import { colors } from 'constants/colors'; export default { title: 'Lubycon UI kit/Modal', @@ -11,17 +12,29 @@ export default { export const Default = () => { const [showModal, setShowModal] = useState(false); + const closeModal = () => setShowModal(false); + const handleOpen = () => console.info('open'); + return ( <> - setShowModal(false)}> - - + + 타이틀입니다 +
여기에 본문 텍스트가 들어갑니다
여기에 본문 텍스트가 들어갑니다
 - + +