Feat: 공용 모달 컴포넌트 추가 (#11)

* Feat: 공용 모달 컴포넌트 추가

* Refactor: 불필요 코드 제거

* Refactor: 불필요 코드 제거

* Feat: layout에 Portal 위치 추가

* Refactor: 불필요 코드 제거

* Refactor: CreatePortal 임포트 방식 변경 및 포탈 성능 개선

* Refactor: 추론 가능한 타입 지정 코드 제거

* Chore: import문 띄어쓰기 수정

* Fix: 미사용 import 삭제 및 dependency list 추가

* Design: 버튼 비활성화 스타일 추가

* Refactor: ModalButton 비활성화 속성 추가

* Fix: 프리티어 줄바꿈 에러 수정

src/components/ModalPortal.ts

@@ -1,14 +1,18 @@
 import { ReactNode } from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 
 interface Props {
   children: ReactNode;
 }
 
 const ModalPortal = ({ children }: Props) => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
   const el = document.getElementById('modal-root') as HTMLElement;
 
-  return ReactDOM.createPortal(children, el);
+  return createPortal(children, el);
 };
 
 export default ModalPortal;

src/hooks/useBooleanOutput.ts

@@ -8,7 +8,7 @@ interface useBooleanOutput {
 }
 
 export default function useBooleanOutput(defaultValue?: boolean): useBooleanOutput {
-  const [isOn, setIsOn] = useState<boolean>(!!defaultValue);
+  const [isOn, setIsOn] = useState(!!defaultValue);
 
   const toggle = useCallback(() => setIsOn((prev) => !prev), []);
   const handleSetOn = useCallback(() => setIsOn(true), []);

src/hooks/useOnClickOutside.ts

@@ -1,4 +1,4 @@
-import { EventHandler, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 
 const useOnClickOutside = (handler: () => void) => {
   const ref = useRef<HTMLDivElement>(null);
@@ -15,7 +15,7 @@ const useOnClickOutside = (handler: () => void) => {
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
     };
-  }, [ref]);
+  }, [ref, handler]);
 
   return { ref };
 };