From 2c40d92b66464ea5f3cf94fa01574feaa6481c20 Mon Sep 17 00:00:00 2001
From: "@u_limit_" <yurim@ajou.ac.kr>
Date: Wed, 20 Nov 2024 00:20:10 +0900
Subject: [PATCH 1/7] =?UTF-8?q?refactor(Modal):=20=EB=84=A4=EC=9D=B4?=
 =?UTF-8?q?=EB=B0=8D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

다른 모달과의 구분을 위해 Modal에서 CloseModal로 네이밍을 변경했습니다.
---
 .../{Modal/ModalTest.css => CloseModal/CloseModalTest.css}      | 0
 .../{Modal/ModalTest.jsx => CloseModal/CloseModalTest.jsx}      | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename frontend/moim_front/src/components/{Modal/ModalTest.css => CloseModal/CloseModalTest.css} (100%)
 rename frontend/moim_front/src/components/{Modal/ModalTest.jsx => CloseModal/CloseModalTest.jsx} (96%)

diff --git a/frontend/moim_front/src/components/Modal/ModalTest.css b/frontend/moim_front/src/components/CloseModal/CloseModalTest.css
similarity index 100%
rename from frontend/moim_front/src/components/Modal/ModalTest.css
rename to frontend/moim_front/src/components/CloseModal/CloseModalTest.css
diff --git a/frontend/moim_front/src/components/Modal/ModalTest.jsx b/frontend/moim_front/src/components/CloseModal/CloseModalTest.jsx
similarity index 96%
rename from frontend/moim_front/src/components/Modal/ModalTest.jsx
rename to frontend/moim_front/src/components/CloseModal/CloseModalTest.jsx
index 2a664707..2fa46e3f 100644
--- a/frontend/moim_front/src/components/Modal/ModalTest.jsx
+++ b/frontend/moim_front/src/components/CloseModal/CloseModalTest.jsx
@@ -1,4 +1,4 @@
-import "./ModalTest.css";
+import "./CloseModalTest.css";
 
 export default function Modal({ isOpen, setIsOpen, message }) {
   // Add class to body when modal is active to remove scroll bar

From 78dbbfa6d772425c0a9f647cde3bbeea0505c34f Mon Sep 17 00:00:00 2001
From: "@u_limit_" <yurim@ajou.ac.kr>
Date: Wed, 20 Nov 2024 01:08:12 +0900
Subject: [PATCH 2/7] =?UTF-8?q?refactor(LoginPage):=20Modal=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Modal을 컴포넌트화 했습니다.
---
 .../moim_front/src/components/Modal/index.jsx | 29 +++++++
 .../src/components/Modal/modalTheme.js        | 54 +++++++++++++
 frontend/moim_front/src/pages/Login/index.jsx | 81 ++-----------------
 3 files changed, 88 insertions(+), 76 deletions(-)
 create mode 100644 frontend/moim_front/src/components/Modal/index.jsx
 create mode 100644 frontend/moim_front/src/components/Modal/modalTheme.js

diff --git a/frontend/moim_front/src/components/Modal/index.jsx b/frontend/moim_front/src/components/Modal/index.jsx
new file mode 100644
index 00000000..43707198
--- /dev/null
+++ b/frontend/moim_front/src/components/Modal/index.jsx
@@ -0,0 +1,29 @@
+import { Modal } from "flowbite-react";
+import { HiOutlineExclamationCircle } from "react-icons/hi";
+
+export default function AlertModal({show, onClose, message, theme}) {
+    return(
+        <>
+            <Modal show={show} size="lg" onClose={onClose} theme={theme} popup>
+                <Modal.Header />
+                <Modal.Body>
+                    <div className="text-center">
+                        <HiOutlineExclamationCircle className="mx-auto mb-4 h-14 w-14 text-gray-400 dark:text-gray-200" />
+                        <h3 className="mb-5 text-base font-Pretendard_Normal text-black">
+                            {message}
+                        </h3>
+                        <div className="flex justify-center gap-4">
+                            <button
+                                className="py-3 px-5 w-fit text-base font-Pretendard_Normal text-white bg-scarlet rounded-[50px] hover:cursor-pointer"
+                                onClick={onClose}
+                            >
+                                다시 입력하기
+                            </button>
+                        </div>
+                    </div>
+                </Modal.Body>
+            </Modal>
+        </>
+    )
+}
+
diff --git a/frontend/moim_front/src/components/Modal/modalTheme.js b/frontend/moim_front/src/components/Modal/modalTheme.js
new file mode 100644
index 00000000..262b9905
--- /dev/null
+++ b/frontend/moim_front/src/components/Modal/modalTheme.js
@@ -0,0 +1,54 @@
+const modalTheme = {
+    "root": {
+        "base": "fixed inset-x-0 top-0 z-50 h-screen overflow-y-auto overflow-x-hidden md:inset-0 md:h-full",
+        "show": {
+            "on": "flex bg-gray-900 bg-opacity-50 dark:bg-opacity-80",
+            "off": "hidden"
+        },
+        "sizes": {
+            "sm": "max-w-sm",
+            "md": "max-w-md",
+            "lg": "max-w-lg",
+            "xl": "max-w-xl",
+            "2xl": "max-w-2xl",
+            "3xl": "max-w-3xl",
+            "4xl": "max-w-4xl",
+            "5xl": "max-w-5xl",
+            "6xl": "max-w-6xl",
+            "7xl": "max-w-7xl"
+        },
+        "positions": {
+            "top-left": "items-start justify-start",
+            "top-center": "items-start justify-center",
+            "top-right": "items-start justify-end",
+            "center-left": "items-center justify-start",
+            "center": "items-center justify-center",
+            "center-right": "items-center justify-end",
+            "bottom-right": "items-end justify-end",
+            "bottom-center": "items-end justify-center",
+            "bottom-left": "items-end justify-start"
+        }
+    },
+    "content": {
+        "base": "relative h-full w-full p-4 md:h-auto",
+        "inner": "relative flex max-h-[90dvh] flex-col rounded-xl bg-white shadow dark:bg-gray-700"
+    },
+    "body": {
+        "base": "flex-1 overflow-auto p-6",
+        "popup": "pt-0"
+    },
+    "header": {
+        "base": "flex items-start justify-between rounded-t border-b mt-0.5 p-5 dark:border-gray-600",
+        "popup": "border-b-0 p-2",
+        "title": "pt-0.5 text-xl font-Pretendard_SemiBold text-gray-900 dark:text-white",
+        "close": {
+            "base": "ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white",
+            "icon": "h-5 w-5"
+        }
+    },
+    "footer": {
+        "base": "flex items-center space-x-2 rounded-b border-gray-200 p-6 dark:border-gray-600",
+        "popup": "border-t"
+    }
+}
+export default modalTheme;
diff --git a/frontend/moim_front/src/pages/Login/index.jsx b/frontend/moim_front/src/pages/Login/index.jsx
index 1ee76a92..be47ed7c 100644
--- a/frontend/moim_front/src/pages/Login/index.jsx
+++ b/frontend/moim_front/src/pages/Login/index.jsx
@@ -2,66 +2,14 @@
 import { useState, useEffect } from "react";
 
 // UI
-import { Modal } from "flowbite-react";
-import { HiOutlineExclamationCircle } from "react-icons/hi";
+
 
 // Components
 import AuthRight from "../../components/AuthRight";
 import AuthLeft from "../../components/AuthLeft";
+import AlertModal from "../../components/Modal/index.jsx";
+import ModalTheme from "../../components/Modal/modalTheme.js";
 
-const modalTheme = {
-  "root": {
-    "base": "fixed inset-x-0 top-0 z-50 h-screen overflow-y-auto overflow-x-hidden md:inset-0 md:h-full",
-    "show": {
-      "on": "flex bg-gray-900 bg-opacity-50 dark:bg-opacity-80",
-      "off": "hidden"
-    },
-    "sizes": {
-      "sm": "max-w-sm",
-      "md": "max-w-md",
-      "lg": "max-w-lg",
-      "xl": "max-w-xl",
-      "2xl": "max-w-2xl",
-      "3xl": "max-w-3xl",
-      "4xl": "max-w-4xl",
-      "5xl": "max-w-5xl",
-      "6xl": "max-w-6xl",
-      "7xl": "max-w-7xl"
-    },
-    "positions": {
-      "top-left": "items-start justify-start",
-      "top-center": "items-start justify-center",
-      "top-right": "items-start justify-end",
-      "center-left": "items-center justify-start",
-      "center": "items-center justify-center",
-      "center-right": "items-center justify-end",
-      "bottom-right": "items-end justify-end",
-      "bottom-center": "items-end justify-center",
-      "bottom-left": "items-end justify-start"
-    }
-  },
-  "content": {
-    "base": "relative h-full w-full p-4 md:h-auto",
-    "inner": "relative flex max-h-[90dvh] flex-col rounded-xl bg-white shadow dark:bg-gray-700"
-  },
-  "body": {
-    "base": "flex-1 overflow-auto p-6",
-    "popup": "pt-0"
-  },
-  "header": {
-    "base": "flex items-start justify-between rounded-t border-b mt-0.5 p-5 dark:border-gray-600",
-    "popup": "border-b-0 p-2",
-    "title": "pt-0.5 text-xl font-Pretendard_SemiBold text-gray-900 dark:text-white",
-    "close": {
-      "base": "ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white",
-      "icon": "h-5 w-5"
-    }
-  },
-  "footer": {
-    "base": "flex items-center space-x-2 rounded-b border-gray-200 p-6 dark:border-gray-600",
-    "popup": "border-t"
-  }
-}
 
 function LoginPage() {
   const [email, setEmail] = useState("");
@@ -86,26 +34,7 @@ function LoginPage() {
 
   return (
     <>
-      <Modal show={openAlertModal} size="lg" onClose={() => setOpenAlertModal(false)} theme={modalTheme} popup>
-        <Modal.Header />
-        <Modal.Body>
-          <div className="text-center">
-            <HiOutlineExclamationCircle className="mx-auto mb-4 h-14 w-14 text-gray-400 dark:text-gray-200" />
-            <h3 className="mb-5 text-base font-Pretendard_Normal text-black">
-              {message}
-            </h3>
-            <div className="flex justify-center gap-4">
-              <button
-                className="py-3 px-5 w-fit text-base font-Pretendard_Normal text-white bg-scarlet rounded-[50px] hover:cursor-pointer"
-                onClick={() => setOpenAlertModal(false)}
-              >
-                헉! 오또케
-              </button>
-            </div>
-          </div>
-        </Modal.Body>
-      </Modal>
-
+      <AlertModal show={openAlertModal} onClose={()=>setOpenAlertModal(false)} message={"이메일 혹은 비밀번호를 다시 입력해주세요."} theme={ModalTheme}/>
       <div className={`flex h-screen overflow-hidden relative gap-24 ${isSmallScreen ? 'justify-center items-center' : 'ml-36'}`}>
         <AuthLeft
           title={"로그인"}
@@ -128,4 +57,4 @@ function LoginPage() {
   );
 }
 
-export default LoginPage;
\ No newline at end of file
+export default LoginPage;

From 700c5a7f9d480f592b2ad2ae1ceabdd52a2b7bb3 Mon Sep 17 00:00:00 2001
From: "@u_limit_" <yurim@ajou.ac.kr>
Date: Wed, 20 Nov 2024 01:09:21 +0900
Subject: [PATCH 3/7] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=20=EA=B0=80?=
 =?UTF-8?q?=EB=8F=85=EC=84=B1=20=ED=96=A5=EC=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

코드 가독성 향상을 위해 else문에 공백 추가 및 사용하지 않는 함수의 선언 및 사용하지 않는 변수의 삭제를 했습니다.
---
 frontend/moim_front/src/components/AuthLeft/index.jsx | 4 +++-
 frontend/moim_front/src/components/Button/index.jsx   | 3 +--
 frontend/moim_front/src/pages/Home/Home.jsx           | 1 -
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/moim_front/src/components/AuthLeft/index.jsx b/frontend/moim_front/src/components/AuthLeft/index.jsx
index a37024d8..da31b396 100644
--- a/frontend/moim_front/src/components/AuthLeft/index.jsx
+++ b/frontend/moim_front/src/components/AuthLeft/index.jsx
@@ -42,7 +42,9 @@ function AuthLeft({
         if (errorCode === "404") {
           setOpenAlertModal(true);
           setMessage(error.response.data.message);
-        } else {
+        }
+
+        else {
           setOpenAlertModal(true);
           setMessage(error.message);
         }
diff --git a/frontend/moim_front/src/components/Button/index.jsx b/frontend/moim_front/src/components/Button/index.jsx
index a8e3c1eb..a86636a0 100644
--- a/frontend/moim_front/src/components/Button/index.jsx
+++ b/frontend/moim_front/src/components/Button/index.jsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { useNavigate } from "react-router";
 
-function Button({ name, textColor, bgColor, btnType, onClick }) {
-  const navigation = useNavigate();
+function Button({ name, textColor, bgColor,  onClick }) {
 
   return (
     <button
diff --git a/frontend/moim_front/src/pages/Home/Home.jsx b/frontend/moim_front/src/pages/Home/Home.jsx
index 9af7a2dc..59e579e7 100644
--- a/frontend/moim_front/src/pages/Home/Home.jsx
+++ b/frontend/moim_front/src/pages/Home/Home.jsx
@@ -6,7 +6,6 @@ import axios from "axios";
 
 // Components
 import Dropdown from "../../components/Dropdown/Simple";
-import Filter from "../../components/Dropdown/Filter";
 import CardContainer from "./CardContainer";
 
 // UI

From a54daa26a4246f8079192a71f6c22c0abd73879b Mon Sep 17 00:00:00 2001
From: "@u_limit_" <yurim@ajou.ac.kr>
Date: Wed, 20 Nov 2024 01:33:06 +0900
Subject: [PATCH 4/7] =?UTF-8?q?refactor(LoginPage):=20=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=85=80=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EA=B0=90=EC=A7=80=20=EB=A1=9C=EC=A7=81=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/moim_front/src/hook/useResize.js     | 25 +++++++++++++++++++
 frontend/moim_front/src/pages/Login/index.jsx | 25 ++++++-------------
 2 files changed, 32 insertions(+), 18 deletions(-)
 create mode 100644 frontend/moim_front/src/hook/useResize.js

diff --git a/frontend/moim_front/src/hook/useResize.js b/frontend/moim_front/src/hook/useResize.js
new file mode 100644
index 00000000..d84c5136
--- /dev/null
+++ b/frontend/moim_front/src/hook/useResize.js
@@ -0,0 +1,25 @@
+import {useState, useEffect} from 'react'
+
+/**
+ * 화면 크기가 작은지 여부를 반환하는 커스텀 훅
+ * @param {number} breakpoint - 기준 화면 크기 (픽셀)
+ * @returns {boolean} isSmall - 화면 크기가 작은지 여부
+ */
+
+export default function useResize(breakpoint){
+    const [isSmall, setIsSmall] = useState(false);
+
+    useEffect(()=>{
+        const handleResize = () => {
+            setIsSmall(window.innerWidth < breakpoint);
+        }
+
+        window.addEventListener("resize", handleResize);
+        handleResize();
+
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        }
+    }, [breakpoint]);
+    return isSmall;
+}
diff --git a/frontend/moim_front/src/pages/Login/index.jsx b/frontend/moim_front/src/pages/Login/index.jsx
index be47ed7c..3a2bccca 100644
--- a/frontend/moim_front/src/pages/Login/index.jsx
+++ b/frontend/moim_front/src/pages/Login/index.jsx
@@ -1,36 +1,25 @@
 // React
-import { useState, useEffect } from "react";
-
-// UI
+import { useState } from "react";
 
+//UI
+import ModalTheme from "../../components/Modal/modalTheme.js";
 
 // Components
 import AuthRight from "../../components/AuthRight";
 import AuthLeft from "../../components/AuthLeft";
 import AlertModal from "../../components/Modal/index.jsx";
-import ModalTheme from "../../components/Modal/modalTheme.js";
+
+// hook
+import useResize from "../../hook/useResize.js";
 
 
 function LoginPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [message, setMessage] = useState("");
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
   const [openAlertModal, setOpenAlertModal] = useState(false);
 
-  // 화면 크기가 작은지 여부를 판단하는 함수
-  const handleResize = () => {
-    setIsSmallScreen(window.innerWidth <= 1280); // 작은 화면 기준 (예: 모바일 화면)
-  };
-
-  // 컴포넌트가 마운트될 때와 화면 크기가 변경될 때 이벤트 리스너 등록
-  useEffect(() => {
-    window.addEventListener("resize", handleResize);
-    handleResize(); // 초기 화면 크기 설정
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
+  const isSmallScreen = useResize(1280);
 
   return (
     <>

From 0be9fd933f4ff059d4b18cc5bd68c690d0de9b9d Mon Sep 17 00:00:00 2001
From: "@u_limit_" <yurim@ajou.ac.kr>
Date: Wed, 20 Nov 2024 01:34:53 +0900
Subject: [PATCH 5/7] =?UTF-8?q?refactor(CloseModal):=20CloseModal=EB=A1=9C?=
 =?UTF-8?q?=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/moim_front/src/pages/RegisterPage/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/moim_front/src/pages/RegisterPage/index.jsx b/frontend/moim_front/src/pages/RegisterPage/index.jsx
index 9679aac2..420bec5d 100644
--- a/frontend/moim_front/src/pages/RegisterPage/index.jsx
+++ b/frontend/moim_front/src/pages/RegisterPage/index.jsx
@@ -7,7 +7,7 @@ import axios from "axios";
 
 // Components
 import AuthRight from "../../components/AuthRight";
-import Modal from "../../components/Modal/ModalTest.jsx";
+import Modal from "../../components/CloseModal/CloseModalTest.jsx";
 
 // Pages
 import Account from "./Account";

From 5f6116b94647a09114e37bf4f704a53252227e57 Mon Sep 17 00:00:00 2001
From: "@u_limit_" <yurim@ajou.ac.kr>
Date: Fri, 22 Nov 2024 01:29:09 +0900
Subject: [PATCH 6/7] =?UTF-8?q?refactor(Modal):=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/{Modal => AlertModal}/index.jsx |  7 ++++---
 .../{Modal => AlertModal}/modalTheme.js        |  0
 .../src/components/AuthLeft/index.jsx          |  9 ++++-----
 frontend/moim_front/src/hook/useModal.js       | 18 ++++++++++++++++++
 frontend/moim_front/src/pages/Login/index.jsx  | 16 +++++++---------
 5 files changed, 33 insertions(+), 17 deletions(-)
 rename frontend/moim_front/src/components/{Modal => AlertModal}/index.jsx (89%)
 rename frontend/moim_front/src/components/{Modal => AlertModal}/modalTheme.js (100%)
 create mode 100644 frontend/moim_front/src/hook/useModal.js

diff --git a/frontend/moim_front/src/components/Modal/index.jsx b/frontend/moim_front/src/components/AlertModal/index.jsx
similarity index 89%
rename from frontend/moim_front/src/components/Modal/index.jsx
rename to frontend/moim_front/src/components/AlertModal/index.jsx
index 43707198..d257b160 100644
--- a/frontend/moim_front/src/components/Modal/index.jsx
+++ b/frontend/moim_front/src/components/AlertModal/index.jsx
@@ -1,10 +1,11 @@
-import { Modal } from "flowbite-react";
 import { HiOutlineExclamationCircle } from "react-icons/hi";
+import { Modal } from "flowbite-react";
+import ModalTheme from "../AlertModal/modalTheme.js";
 
-export default function AlertModal({show, onClose, message, theme}) {
+export default function AlertModal({show, onClose, message}) {
     return(
         <>
-            <Modal show={show} size="lg" onClose={onClose} theme={theme} popup>
+            <Modal show={show} size="lg" onClose={onClose} theme={ModalTheme} popup>
                 <Modal.Header />
                 <Modal.Body>
                     <div className="text-center">
diff --git a/frontend/moim_front/src/components/Modal/modalTheme.js b/frontend/moim_front/src/components/AlertModal/modalTheme.js
similarity index 100%
rename from frontend/moim_front/src/components/Modal/modalTheme.js
rename to frontend/moim_front/src/components/AlertModal/modalTheme.js
diff --git a/frontend/moim_front/src/components/AuthLeft/index.jsx b/frontend/moim_front/src/components/AuthLeft/index.jsx
index da31b396..7dd4df9f 100644
--- a/frontend/moim_front/src/components/AuthLeft/index.jsx
+++ b/frontend/moim_front/src/components/AuthLeft/index.jsx
@@ -16,7 +16,6 @@ function AuthLeft({
   password,
   setPassword,
   setOpenAlertModal,
-  setMessage,
   className,
 }) {
   const [memory, setMemory] = useState(true);
@@ -40,13 +39,13 @@ function AuthLeft({
         const errorCode = error.response.data.statusCode;
 
         if (errorCode === "404") {
-          setOpenAlertModal(true);
-          setMessage(error.response.data.message);
+          console.log(setOpenAlertModal)
+          setOpenAlertModal(error.response.data.message);
         }
 
         else {
-          setOpenAlertModal(true);
-          setMessage(error.message);
+          console.log(setOpenAlertModal)
+          setOpenAlertModal(error.message);
         }
       });
   };
diff --git a/frontend/moim_front/src/hook/useModal.js b/frontend/moim_front/src/hook/useModal.js
new file mode 100644
index 00000000..7e6e640d
--- /dev/null
+++ b/frontend/moim_front/src/hook/useModal.js
@@ -0,0 +1,18 @@
+import { useState, useCallback } from "react";
+
+export default function useModal () {
+    const [showModal, setShowModal] = useState(false);
+    const [message, setMessage] = useState("");
+
+    const openModal = useCallback((newMessage) => {
+        setMessage(newMessage);
+        setShowModal(true)
+    },[]);
+
+    const closeModal = useCallback(()=>{
+        setShowModal(false);
+        setMessage("");
+    },[])
+
+    return {showModal, setShowModal, message, openModal, closeModal}
+}
diff --git a/frontend/moim_front/src/pages/Login/index.jsx b/frontend/moim_front/src/pages/Login/index.jsx
index 3a2bccca..69a45228 100644
--- a/frontend/moim_front/src/pages/Login/index.jsx
+++ b/frontend/moim_front/src/pages/Login/index.jsx
@@ -2,28 +2,27 @@
 import { useState } from "react";
 
 //UI
-import ModalTheme from "../../components/Modal/modalTheme.js";
 
 // Components
 import AuthRight from "../../components/AuthRight";
 import AuthLeft from "../../components/AuthLeft";
-import AlertModal from "../../components/Modal/index.jsx";
+import AlertModal from "../../components/AlertModal/index.jsx";
 
 // hook
 import useResize from "../../hook/useResize.js";
+import useModal from "../../hook/useModal.js";
 
 
 function LoginPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [message, setMessage] = useState("");
-  const [openAlertModal, setOpenAlertModal] = useState(false);
 
   const isSmallScreen = useResize(1280);
+    const {setShowModal, openModal, showModal, closeModal, message} = useModal();
 
-  return (
+    return (
     <>
-      <AlertModal show={openAlertModal} onClose={()=>setOpenAlertModal(false)} message={"이메일 혹은 비밀번호를 다시 입력해주세요."} theme={ModalTheme}/>
+      <AlertModal show={showModal} onClose={closeModal} message={message} />
       <div className={`flex h-screen overflow-hidden relative gap-24 ${isSmallScreen ? 'justify-center items-center' : 'ml-36'}`}>
         <AuthLeft
           title={"로그인"}
@@ -35,9 +34,8 @@ function LoginPage() {
           setEmail={setEmail}
           password={password}
           setPassword={setPassword}
-          setOpenAlertModal={setOpenAlertModal}
-          message={message}
-          setMessage={setMessage}
+          setShowModal = {setShowModal}
+          setOpenAlertModal={openModal}
           className={`${isSmallScreen ? '' : 'mt-6'} flex flex-col w-fit justify-center items-center overflow-hidden sm:overflow-visible`}
         />
         {!isSmallScreen && <AuthRight textColor={"white"} cardColor={"scarlet"} />}

From d0dec9b7ae982a5f8b6be6c14999e49e4d5e9544 Mon Sep 17 00:00:00 2001
From: "@u_limit_" <yurim@ajou.ac.kr>
Date: Fri, 22 Nov 2024 01:39:48 +0900
Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=EC=97=94=ED=84=B0=EC=8B=9C=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/moim_front/src/components/AuthLeft/index.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/moim_front/src/components/AuthLeft/index.jsx b/frontend/moim_front/src/components/AuthLeft/index.jsx
index 7dd4df9f..da96975e 100644
--- a/frontend/moim_front/src/components/AuthLeft/index.jsx
+++ b/frontend/moim_front/src/components/AuthLeft/index.jsx
@@ -45,13 +45,19 @@ function AuthLeft({
 
         else {
           console.log(setOpenAlertModal)
-          setOpenAlertModal(error.message);
+          setOpenAlertModal("로그인 정보를 입력해주세요.");
         }
       });
   };
 
+  const activeEnter= (e) => {
+    if(e.key === "Enter"){
+      onLoginClick();
+    }
+  }
+
   return (
-    <div className={`${className}`}>
+    <div className={`${className}`} onKeyDown={activeEnter}>
       <div className="w-full max-w-lg">
         <AuthTitle
           title={title}