+
{children}
)
diff --git a/src/useBoolean/_useBoolean.test.ts b/src/useBoolean/_useBoolean.test.ts
index 0bd7858..9b79935 100644
--- a/src/useBoolean/_useBoolean.test.ts
+++ b/src/useBoolean/_useBoolean.test.ts
@@ -3,7 +3,7 @@ import { renderHook, act } from '@testing-library/react';
describe('useBoolean 기능테스트', () => {
it('useBoolean은 boolean상태를 나타내는 값과 그 boolean을 변경할 수 있는 값을 배열로 반환한다.', () => {
- const { result } = renderHook(() => useBoolean(false));
+ const { result } = renderHook(() => useBoolean());
expect(result.current[0]).toBe(false);
act(() => {
diff --git a/src/useDisclosure/_useDisclosure.test.ts b/src/useDisclosure/_useDisclosure.test.ts
index 6e4f45a..cea0bf3 100644
--- a/src/useDisclosure/_useDisclosure.test.ts
+++ b/src/useDisclosure/_useDisclosure.test.ts
@@ -3,7 +3,7 @@ import { renderHook, act } from '@testing-library/react';
describe('useDisclosure 기능테스트', () => {
it('useDisclosure는 modal, disclosure와 같이 컴포넌트의 열림과 닫힘 상태를 조절할 수 있는 기능들을 반환한다.', () => {
- const { result } = renderHook(() => useDisclosure(false));
+ const { result } = renderHook(() => useDisclosure());
expect(result.current.isOpen).toBe(false);
act(() => {
diff --git a/src/useModal/useModal.test.tsx b/src/useModal/useModal.test.tsx
new file mode 100644
index 0000000..89bbf62
--- /dev/null
+++ b/src/useModal/useModal.test.tsx
@@ -0,0 +1,152 @@
+import useModal from './useModal';
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+const SHOW_CLASSNAME = 'show';
+const HIDE_CLASSNAME = 'hide';
+
+describe('useModal 기능 테스트', () => {
+ it('modal을 열면 portal을 통해 element 내부에 렌더링 할 수 있다.', async () => {
+ const Test = () => {
+ const { Modal, show, hide } = useModal();
+ return (
+
+
+
+
+
+
+
+ );
+ };
+ render(
);
+ fireEvent.click(await screen.findByRole('show'));
+ expect(await screen.findByRole('test')).toBeTruthy();
+ });
+
+ it('overlayClose가 true인 경우, overlay를 눌러 modal을 닫을 수 있다.', async () => {
+ const Test = () => {
+ const { Modal, show, hide } = useModal();
+ return (
+
+
+
+
+
+
+
+
+ );
+ };
+ render(
);
+ fireEvent.click(await screen.findByRole('show'));
+ expect(await screen.findByRole('test')).toBeTruthy();
+ fireEvent.click(await screen.findByRole('hide'));
+ await expect(screen.findByRole('test')).rejects.toThrow();
+
+ fireEvent.click(await screen.findByRole('show'));
+ expect(await screen.findByRole('test')).toBeTruthy();
+ fireEvent.click(await screen.findByRole('modal-hide'));
+ await expect(screen.findByRole('test')).rejects.toThrow();
+
+ fireEvent.click(await screen.findByRole('show'));
+ const modalInner = await screen.findByRole('test');
+ fireEvent.click(modalInner!.parentElement!.parentElement!);
+ await expect(screen.findByRole('test')).rejects.toThrow();
+ });
+
+ it('overlayClose가 false인 경우, overlay를 누르면 modal이 닫히지 않는다.', async () => {
+ const Test = () => {
+ const { Modal, show, hide } = useModal({ overlayClose: false });
+ return (
+
+
+
+
+
+
+
+
+ );
+ };
+ render(
);
+
+ fireEvent.click(await screen.findByRole('show'));
+ expect(await screen.findByRole('test')).toBeTruthy();
+ const modalInner = await screen.findByRole('test');
+ fireEvent.click(modalInner!.parentElement!.parentElement!);
+ await expect(screen.findByRole('test')).toBeTruthy();
+ });
+
+ it('지정한 element에 modal을 렌더링할 수 있다.', async () => {
+ const testRoot = document.createElement('div');
+ testRoot.id = 'test-root';
+ document.body.appendChild(testRoot);
+
+ const Test = () => {
+ const { Modal, show, hide } = useModal({
+ modalRoot: testRoot,
+ });
+ return (
+
+
+
+
+
+
+
+ );
+ };
+ render(
);
+ fireEvent.click(await screen.findByRole('show'));
+ expect(testRoot.querySelector('#test')).toBeTruthy();
+ });
+
+ it('modal에 animation이 적용된 경우, className을 열고 닫을 때 변경할 수 있다.', async () => {
+ const Test = () => {
+ const { Modal, show, hide } = useModal({
+ modalAnimation: {
+ showClassName: SHOW_CLASSNAME,
+ hideClassName: HIDE_CLASSNAME,
+ },
+ });
+ return (
+
+
+
+
+
+
+
+ );
+ };
+ render(
);
+ fireEvent.click(await screen.findByRole('show'));
+ const modalInner = await screen.findByRole('test');
+ expect(modalInner.parentElement?.className).toContain(SHOW_CLASSNAME);
+ });
+});
diff --git a/src/useModal/useModal.tsx b/src/useModal/useModal.tsx
new file mode 100644
index 0000000..c630762
--- /dev/null
+++ b/src/useModal/useModal.tsx
@@ -0,0 +1,65 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { useAnimation } from '..';
+type ModalRoot = Element | DocumentFragment;
+
+export interface UseModalAnimations {
+ overlayAnimation?: {
+ showClassName?: string;
+ hideClassName?: string;
+ };
+ modalAnimation?: {
+ showClassName?: string;
+ hideClassName?: string;
+ };
+}
+
+interface UseModalProps extends UseModalAnimations {
+ modalRoot?: ModalRoot;
+ overlayClose?: boolean;
+}
+
+interface ModalProps {
+ overlayClassName?: string;
+ modalClassName?: string;
+ style?: CSSProperties;
+ children: ReactNode;
+}
+
+const DefaultModal = ({ children, modalRoot }: { children: ReactNode; modalRoot?: ModalRoot }) => {
+ return createPortal(children, modalRoot || document.body);
+};
+
+export default function useModal(modalProps?: UseModalProps) {
+ const overlayClose = modalProps?.overlayClose || true;
+ const ModalAnimation = useAnimation({
+ mountClassName: modalProps?.modalAnimation?.showClassName,
+ unmountClassName: modalProps?.modalAnimation?.hideClassName,
+ });
+ const OverlayAnimation = useAnimation({
+ mountClassName: modalProps?.overlayAnimation?.showClassName,
+ unmountClassName: modalProps?.overlayAnimation?.hideClassName,
+ });
+
+ const show = () => {
+ OverlayAnimation.show();
+ ModalAnimation.show();
+ };
+
+ const hide = () => {
+ OverlayAnimation.hide();
+ ModalAnimation.hide();
+ };
+
+ const Modal = ({ children, overlayClassName, modalClassName, style }: ModalProps) => (
+
+
+ e.stopPropagation()}>
+ {children}
+
+
+
+ );
+
+ return { Modal, show, hide, isShow: OverlayAnimation.isShow };
+}
diff --git a/src/useSwitch/_useSwitch.test.ts b/src/useSwitch/_useSwitch.test.ts
index 89f81ba..75b0b2c 100644
--- a/src/useSwitch/_useSwitch.test.ts
+++ b/src/useSwitch/_useSwitch.test.ts
@@ -3,7 +3,7 @@ import { renderHook, act } from '@testing-library/react';
describe('useSwitch 기능테스트', () => {
it('useSwitch는 스위치(혹은 토글)의 켜짐 상태와 켜짐상태를 조절할 수 있는 함수들을 반환한다.', () => {
- const { result } = renderHook(() => useSwitch(false));
+ const { result } = renderHook(() => useSwitch());
expect(result.current.isOn).toBe(false);
act(() => {