[🥁 : feat] esc키로 닫기 함수 유틸로 분리 후 공통 적용 (#18)

src/components/edit-profile-form.tsx

@@ -10,6 +10,7 @@ import {
 import { auth, db, storage } from '../firebase.ts';
 import IUser from '../interfaces/IUser.ts';
 import CompressImage from '../utils/compress-image.tsx';
+import useEscClose from '../utils/use-esc-close.tsx';
 import * as S from '../styles/profile-form.ts';
 import { ReactComponent as IconUser } from '../assets/images/i-user.svg';
 import { ReactComponent as LoadingSpinner } from '../assets/images/loading-spinner-mini.svg';
@@ -92,6 +93,7 @@ export default function EditProfileForm({
       onClose();
     }
   };
+  useEscClose(onClose);
   return (
     <S.Form onSubmit={onSubmit}>
       {avatarPreview ? (

src/components/edit-tweet-form.tsx

@@ -9,6 +9,7 @@ import {
 import { auth, db, storage } from '../firebase.ts';
 import ITweet from '../interfaces/ITweet.ts';
 import CompressImage from '../utils/compress-image.tsx';
+import useEscClose from '../utils/use-esc-close.tsx';
 import * as S from '../styles/tweet-form.ts';
 import { ReactComponent as IconPhoto } from '../assets/images/i-photo.svg';
 import { ReactComponent as LoadingSpinner } from '../assets/images/loading-spinner-mini.svg';
@@ -24,7 +25,6 @@ export default function EditTweetForm({
   onClose,
 }: IEditTweetForm) {
   const [isLoading, setLoading] = useState(false);
-
   const [tweet, setTweet] = useState(initialTweet);
   const onTweetChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setTweet(e.target.value);
@@ -87,6 +87,7 @@ export default function EditTweetForm({
       onClose();
     }
   };
+  useEscClose(onClose);
   return (
     <S.EditForm onSubmit={onSubmit}>
       <S.TextArea

src/components/sign-in.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { FirebaseError } from 'firebase/app';
 import { signInWithEmailAndPassword } from 'firebase/auth';
 import { auth } from '../firebase.ts';
+import useEscClose from '../utils/use-esc-close.tsx';
 import * as S from '../styles/auth.ts';
 import * as P from '../styles/popup.ts';
 import ImageComputer from '../assets/images/logo-small.png';
@@ -25,17 +26,6 @@ export default function SignIn({ onClose }: ISignInProps) {
   const [userEmail, setUserEmail] = useState('');
   const [userPassword, setUserPassword] = useState('');
   const [firebaseError, setFirebaseError] = useState('');
-  useEffect(() => {
-    const handleEscKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-    document.addEventListener('keydown', handleEscKey);
-    return () => {
-      document.removeEventListener('keydown', handleEscKey);
-    };
-  }, [onClose]);
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const {
       target: { name, value },
@@ -62,6 +52,7 @@ export default function SignIn({ onClose }: ISignInProps) {
       setLoading(false);
     }
   };
+  useEscClose(onClose);
   return (
     <P.PopupWrapper>
       <P.Popup>

src/components/sign-up.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { FirebaseError } from 'firebase/app';
 import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
 import { doc, setDoc } from 'firebase/firestore';
 import { auth, db } from '../firebase.ts';
+import useEscClose from '../utils/use-esc-close.tsx';
 import * as S from '../styles/auth.ts';
 import * as P from '../styles/popup.ts';
 import ImageComputer from '../assets/images/logo-small.png';
@@ -27,17 +28,6 @@ export default function SignUp({ onClose }: ISignUpProps) {
   const [userEmail, setUserEmail] = useState('');
   const [userPassword, setUserPassword] = useState('');
   const [firebaseError, setFirebaseError] = useState('');
-  useEffect(() => {
-    const handleEscKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-    document.addEventListener('keydown', handleEscKey);
-    return () => {
-      document.removeEventListener('keydown', handleEscKey);
-    };
-  }, [onClose]);
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const {
       target: { name, value },
@@ -80,6 +70,7 @@ export default function SignUp({ onClose }: ISignUpProps) {
       setLoading(false);
     }
   };
+  useEscClose(onClose);
   return (
     <P.PopupWrapper>
       <P.Popup>

src/utils/use-esc-close.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+const useEscClose = (onClose: () => void) => {
+  useEffect(() => {
+    const handleEscKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscKey);
+    return () => {
+      document.removeEventListener('keydown', handleEscKey);
+    };
+  }, [onClose]);
+};
+
+export default useEscClose;