Merge pull request #263 from U2DJ2/frontend/refactor

refactor: 로그인 부분 코드 리팩토링 진행

frontend/moim_front/src/components/AlertModal/index.jsx

@@ -0,0 +1,30 @@
+import { HiOutlineExclamationCircle } from "react-icons/hi";
+import { Modal } from "flowbite-react";
+import ModalTheme from "../AlertModal/modalTheme.js";
+
+export default function AlertModal({show, onClose, message}) {
+    return(
+        <>
+            <Modal show={show} size="lg" onClose={onClose} 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={onClose}
+                            >
+                                다시 입력하기
+                            </button>
+                        </div>
+                    </div>
+                </Modal.Body>
+            </Modal>
+        </>
+    )
+}
+

frontend/moim_front/src/components/AlertModal/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;

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,17 +39,25 @@ function AuthLeft({
         const errorCode = error.response.data.statusCode;
 
         if (errorCode === "404") {
-          setOpenAlertModal(true);
-          setMessage(error.response.data.message);
-        } else {
-          setOpenAlertModal(true);
-          setMessage(error.message);
+          console.log(setOpenAlertModal)
+          setOpenAlertModal(error.response.data.message);
+        }
+
+        else {
+          console.log(setOpenAlertModal)
+          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}

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

frontend/moim_front/src/components/Modal/ModalTest.jsx → 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

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}
+}

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;
+}

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

frontend/moim_front/src/pages/Login/index.jsx

@@ -1,111 +1,28 @@
 // React
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
-// UI
-import { Modal } from "flowbite-react";
-import { HiOutlineExclamationCircle } from "react-icons/hi";
+//UI
 
 // Components
 import AuthRight from "../../components/AuthRight";
 import AuthLeft from "../../components/AuthLeft";
+import AlertModal from "../../components/AlertModal/index.jsx";
+
+// hook
+import useResize from "../../hook/useResize.js";
+import useModal from "../../hook/useModal.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("");
   const [password, setPassword] = useState("");
-  const [message, setMessage] = useState("");
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
-  const [openAlertModal, setOpenAlertModal] = useState(false);
 
-  // 화면 크기가 작은지 여부를 판단하는 함수
-  const handleResize = () => {
-    setIsSmallScreen(window.innerWidth <= 1280); // 작은 화면 기준 (예: 모바일 화면)
-  };
+  const isSmallScreen = useResize(1280);
+    const {setShowModal, openModal, showModal, closeModal, message} = useModal();
 
-  // 컴포넌트가 마운트될 때와 화면 크기가 변경될 때 이벤트 리스너 등록
-  useEffect(() => {
-    window.addEventListener("resize", handleResize);
-    handleResize(); // 초기 화면 크기 설정
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
-  return (
+    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={showModal} onClose={closeModal} message={message} />
       <div className={`flex h-screen overflow-hidden relative gap-24 ${isSmallScreen ? 'justify-center items-center' : 'ml-36'}`}>
         <AuthLeft
           title={"로그인"}
@@ -117,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"} />}
@@ -128,4 +44,4 @@ function LoginPage() {
   );
 }
 
-export default LoginPage;
+export default LoginPage;

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";