[FEAT] #70 - Login.js MVC패턴으로 리팩토링

jung0115 · Sep 3, 2024 · f17a5f9 · f17a5f9
1 parent 6efa2f0
commit f17a5f9
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 90 deletions.
diff --git a/src/controller/LoginController.js b/src/controller/LoginController.js
@@ -0,0 +1,23 @@
+import useUserModel from "../model/useUserModel";
+import { useAuth } from "../components/Context";
+
+const LoginController = ({ onClose }) => {
+    const { user, token, authSignIn } = useUserModel();
+    const { login } = useAuth();
+
+    const handleLogin = async (userId, userPw) => {
+        if (!userId || !userPw) {
+            alert('아이디 또는 비밀번호를 입력해주세요.');
+        } 
+
+        await authSignIn(userId, userPw);
+
+        if (token) {
+            onClose(user.name);
+            login(user);
+        }
+    };
+
+    return { handleLogin, user, token };
+}
+export default LoginController;
diff --git a/src/model/useUserModel.js b/src/model/useUserModel.js
@@ -0,0 +1,69 @@
+import { useState, useEffect } from "react";
+import { Cookies } from "react-cookie";
+import client from 'gamja-backend-client';
+
+const useUserModel = () => {
+    const [user, setUser] = useState('');
+    const [token, setToken] = useState(null);
+    const cookies = new Cookies();
+
+    const host = 'https://api.miruku.dog';
+
+    const getConnection = () => {
+        return {
+            host: host,
+            headers: {
+                ...token ? {
+                'Authorization': `Bearer ${token}`
+                } : null
+            }
+        }
+    }
+
+    const setCookie = (name, value, option) => {
+        return cookies.set(name, value, {...option});
+    }
+
+    useEffect(() => {
+        if (token) {
+            setCookie("token", `${token}`, {
+                path: '/',
+                sameSite: 'strict'
+            });
+
+            const getMyUser = async () => {
+                try {
+                    await client.functional.user.me.getMyUser(
+                        getConnection()
+                    ).then(response => {
+                        const user = response.user;
+                        setUser(user);
+                    });
+                } catch (error) {
+                    console.error("사용자 정보 가져오기 오류: ", error);
+                }
+            };
+            getMyUser();
+        }
+    }, [token]);
+
+    const authSignIn = async (userId, userPw) => {
+        try {
+            await client.functional.auth.signIn(
+                getConnection(),
+                {
+                    id: userId, 
+                    password: userPw
+                }
+            ).then(response => {
+                setToken(response.token);
+            });
+        } catch (error) {
+            console.error("로그인 에러: ", error);
+            alert('아이디 또는 비밀번호가 일치하지 않습니다.')
+        }
+    };
+
+    return { user, token, authSignIn };
+}
+export default useUserModel;
diff --git a/src/pages/Login.js b/src/pages/Login.js
@@ -1,64 +1,15 @@
-import React from "react";
-import { useState, useEffect } from "react";
-import { Cookies } from "react-cookie";
+import React, { useState } from "react";
 import styled from "styled-components";
-import client from 'gamja-backend-client';
-
-import { useAuth } from "../components/Context";
-
+import LoginController from "../controller/LoginController";
 import cancel from '../contents/cancel.svg';
 
 const Login = ({ onClose }) => {
+    const { handleLogin, token } = LoginController();
     const [userId, setUserId] = useState('');
     const [userPw, setUserPw] = useState('');
-    const [user, setUser] = useState('');
-    const [token, setToken] = useState(null);
-
-    const { login } = useAuth();
-    const cookies = new Cookies();
-
-    const host = 'https://api.miruku.dog';
-
+
     const isInputCheck = userId  && userPw;
 
-    const getConnection = () => {
-        return {
-            host: host,
-            headers: {
-                ...token ? {
-                'Authorization': `Bearer ${token}`
-                } : null
-            }
-        }
-    }
-
-    const setCookie = (name, value, option) => {
-        return cookies.set(name, value, {...option});
-    }
-
-    useEffect(() => {
-        if (token) {
-            setCookie("token", `${token}`, {
-                path: '/',
-                sameSite: 'strict'
-            });
-
-            const getMyUser = async () => {
-                try {
-                    await client.functional.user.me.getMyUser(
-                        getConnection()
-                    ).then(response => {
-                        const user = response.user;
-                        setUser(user);
-                    });
-                } catch (error) {
-                    console.error("사용자 정보 가져오기 오류: ", error);
-                }
-            };
-            getMyUser();
-        }
-    }, [token]);
-
     const onChangeId = (e) => {
         setUserId(e.target.value);
     }
@@ -67,41 +18,6 @@ const Login = ({ onClose }) => {
         setUserPw(e.target.value);
     }
 
-    const authSignIn = async () => {
-        if (!userId || !userPw) {
-            // 입력 필드에 값이 없으면 요청을 보내지 않음
-            return;
-        }
-        try {
-            await client.functional.auth.signIn(
-                getConnection(),
-                {
-                    id: userId, 
-                    password: userPw
-                }
-            ).then(response => {
-                setToken(response.token);
-            });
-        } catch (error) {
-            console.error("로그인 에러: ", error);
-            alert('아이디 또는 비밀번호가 일치하지 않습니다.')
-        }
-    };
-
-    const CheckLogin = () => {
-        authSignIn();
-
-        if (!userId || !userPw) {
-            alert('아이디 또는 비밀번호를 입력해주세요.');
-        } else if (!token) {
-            return;
-        } else {
-            onClose(user.name);
-            login(user);
-        }
-    };
-    // console.log(token);
-
     return (
         <Container>
             <Header>
@@ -116,7 +32,6 @@ const Login = ({ onClose }) => {
                     />
                 }
             </Header>
-            {/* <Line/> */}
             <Body>
                 <BodyTitle> 아이디 </BodyTitle>
                 <InputForm 
@@ -133,7 +48,7 @@ const Login = ({ onClose }) => {
                 />
             </Body>
             <LoginBtn 
-                onClick={() => CheckLogin()}
+                onClick={() => handleLogin()}
                 isinputcheck={isInputCheck}
             > 로그인 </LoginBtn>
         </Container>