From bdc54d37d74203da3337b0a5615496e89e07cde8 Mon Sep 17 00:00:00 2001
From: sryung <sryung1225@gmail.com>
Date: Tue, 26 Dec 2023 22:59:19 +0900
Subject: [PATCH] =?UTF-8?q?[=F0=9F=A5=81=20:=20feat]=20esc=ED=82=A4?=
 =?UTF-8?q?=EB=A1=9C=20=EB=8B=AB=EA=B8=B0=20=ED=95=A8=EC=88=98=20=EC=9C=A0?=
 =?UTF-8?q?=ED=8B=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20=ED=9B=84=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=20=EC=A0=81=EC=9A=A9=20(#18)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/edit-profile-form.tsx |  2 ++
 src/components/edit-tweet-form.tsx   |  3 ++-
 src/components/sign-in.tsx           | 15 +++------------
 src/components/sign-up.tsx           | 15 +++------------
 src/utils/use-esc-close.tsx          | 17 +++++++++++++++++
 5 files changed, 27 insertions(+), 25 deletions(-)
 create mode 100644 src/utils/use-esc-close.tsx

diff --git a/src/components/edit-profile-form.tsx b/src/components/edit-profile-form.tsx
index dd6be9e..2927871 100644
--- a/src/components/edit-profile-form.tsx
+++ b/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 ? (
diff --git a/src/components/edit-tweet-form.tsx b/src/components/edit-tweet-form.tsx
index a0d0db6..4543d98 100644
--- a/src/components/edit-tweet-form.tsx
+++ b/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
diff --git a/src/components/sign-in.tsx b/src/components/sign-in.tsx
index c7ffc78..e3cb620 100644
--- a/src/components/sign-in.tsx
+++ b/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>
diff --git a/src/components/sign-up.tsx b/src/components/sign-up.tsx
index 8845235..34110a4 100644
--- a/src/components/sign-up.tsx
+++ b/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>
diff --git a/src/utils/use-esc-close.tsx b/src/utils/use-esc-close.tsx
new file mode 100644
index 0000000..51b2365
--- /dev/null
+++ b/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;