refactor: (#17) Modal 컴포넌트 onModalClose props에 setStateAction 대신 일반함수…

…(closeModal) 전달하도록 수정
woowacourse-teams · Jul 12, 2023 · cef518a · cef518a
1 parent b1fc803
commit cef518a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/frontend/src/components/common/Modal/Modal.stories.tsx b/frontend/src/components/common/Modal/Modal.stories.tsx
@@ -20,11 +20,14 @@ export const Default = () => {
  setIsOpen(true);
  };
 
+ const closeModal = () => {
+ if (isOpen === true) setIsOpen(false);
+ };
  return (
  <>
  <button onClick={openModal}>Open Modal</button>
  {isOpen && (
- <Modal size="sm" onModalClose={setIsOpen}>
+ <Modal size="sm" onModalClose={closeModal}>
  <p>This is Default Modal</p>
  </Modal>
  )}
@@ -39,11 +42,15 @@ export const Wide = () => {
  setIsOpen(true);
  };
 
+ const closeModal = () => {
+ if (isOpen === true) setIsOpen(false);
+ };
+
  return (
  <>
  <button onClick={openModal}>Open Modal</button>
  {isOpen && (
- <Modal size="lg" onModalClose={setIsOpen}>
+ <Modal size="lg" onModalClose={closeModal}>
  <p>This is Default Modal</p>
  </Modal>
  )}
@@ -66,7 +73,7 @@ export const WithCloseButton = () => {
  <>
  <button onClick={openModal}>Open Modal</button>
  {isOpen && (
- <Modal size="sm" onModalClose={setIsOpen}>
+ <Modal size="sm" onModalClose={closeModal}>
  <>
  <S.Header>
  <p>Modal Title</p>

diff --git a/frontend/src/components/common/Modal/index.tsx b/frontend/src/components/common/Modal/index.tsx
@@ -1,33 +1,29 @@
-import React, { useEffect, useRef, Dispatch } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { ModalSizeType } from '@type/modalSize';
 
 import * as S from './style';
 
 interface ModalProps {
- onModalClose: Dispatch<React.SetStateAction<boolean>>;
+ onModalClose: () => void;
  children: React.JSX.Element;
  size: ModalSizeType;
 }
 
 export default function Modal({ onModalClose, children, size }: ModalProps) {
  const BackDropRef = useRef<HTMLDivElement>(null);
 
- const closeModal = () => {
- onModalClose(false);
- };
-
  useEffect(() => {
  const handler = (e: MouseEvent) => {
  if (e.target === BackDropRef.current) {
- closeModal();
+ onModalClose();
  }
  };
 
  document.addEventListener('click', handler);
 
  return () => document.removeEventListener('click', handler);
- }, [BackDropRef, closeModal]);
+ }, [BackDropRef, onModalClose]);
 
  return (
  <S.All>