Merge pull request #10 from Team-ComIT/#5Jiwon@LoginModal_API연결

#5 Login modal api연결
Team-ComIT · Dec 2, 2022 · 7476346 · 7476346
2 parents e71750b + 557515c
commit 7476346
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 145 deletions.
diff --git a/apis/auth.ts b/apis/auth.ts
@@ -1,8 +1,7 @@
 import axios from 'axios';
-import { loginInfoType } from '../types/authType';
+import { loginInfoType, responseType } from '../types/authType';
 
-export const postLogin = (info: loginInfoType) => {
-    const copyInfo = { ...info };
-    copyInfo.employee_number as number;
-    return axios.post('https://{BASE_URL}/users/tokens', copyInfo);
+export const postLogin = async (loginInfo: loginInfoType): Promise<responseType> => {
+    const { data } = await axios.post('http://3.39.162.197:8888/admins/tokens', loginInfo);
+    return data;
 };
diff --git a/apis/instance.ts b/apis/instance.ts
@@ -1,7 +1,9 @@
 import axios from 'axios';
 
 export const instance = axios.create({
-    baseURL: 'https://',
+    baseURL: 'http://3.39.162.197:8888',
     timeout: 10000,
-    headers: {},
+    headers: { Authorization: `Bearer ${localStorage.getItem('access_token')}` },
 });
+
+axios.defaults.baseURL = 'http://3.39.162.197:8888';
diff --git a/components/LoginModal/LoginModal.tsx b/components/LoginModal/LoginModal.tsx
@@ -1,19 +1,51 @@
-import React, { useState } from 'react';
-import useInputs from '../../hooks/useInputs';
-import { loginInfoType } from '../../types/authType';
+import React, { useRef, useState, Dispatch, SetStateAction } from 'react';
+import { useRouter } from 'next/router';
+import { postLogin } from '../../apis/auth';
+import { loginInfoType, responseType } from '../../types/authType';
 import { useMutation } from 'react-query';
 import styled from '@emotion/styled';
-import { postLogin } from '../../apis/auth';
+import OutSideClickHandler from 'react-outside-click-handler';
+import { AxiosError } from 'axios';
 
-const LoginModal = () => {
+interface propsType {
+    setIsModal: Dispatch<SetStateAction<boolean>>;
+}
+
+const LoginModal = ({ setIsModal }: propsType) => {
+    const router = useRouter();
     const [loginInfo, setLoginInfo] = useState<loginInfoType>({
-        employee_number: 0,
+        employee_number: '',
         password: '',
     });
+    const { mutate } = useMutation(postLogin, {
+        onSuccess: (data: responseType) => {
+            localStorage.setItem('access_token', data.access_token);
+            localStorage.setItem('refresh_token', data.refresh_token);
+        },
+        onError: () => {
+            alert('로그인에 실패했습니다');
+        },
+    });
+
+    const onLogin = () => {
+        const { employee_number, password } = loginInfo;
+        if (employee_number && password) {
+            let copyInfo = { ...loginInfo };
+            copyInfo.employee_number = parseInt(copyInfo.employee_number as string);
+            mutate(copyInfo);
+        } else if (employee_number == '' && password) {
+            alert('사원번호를 입력해주세요');
+        } else if (employee_number && password == '') {
+            alert('비밀번호를 입력해주세요');
+        } else {
+            alert('정보를 입력해주세요');
+        }
+    };
 
     const changeLoginState = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { value, name } = e.target;
-        const insertValue = name == 'employee_number' ? value.replace(/[^0-9]/g, '') : value;
+        const insertValue =
+            name == 'employee_number' ? value.replace(/[^0-9]/g, '') : value.replace(/\s| /gi, '');
         setLoginInfo({
             ...loginInfo,
             [name]: insertValue,
@@ -22,31 +54,34 @@ const LoginModal = () => {
 
     return (
         <_ModalBackground>
-            <_LoginLayout>
-                <_LoginTitle>LOGIN</_LoginTitle>
-                <_LoginLine />
-                <_InputLayout>
-                    <_InputName>사원번호</_InputName>
-                    <_TestInput
-                        name="employee_number"
-                        onChange={changeLoginState}
-                        value={loginInfo.employee_number}
-                    />
-                </_InputLayout>
-                <_InputLayout>
-                    <_InputName>어드민 번호</_InputName>
-                    <_TestInput
-                        name="password"
-                        onChange={changeLoginState}
-                        value={loginInfo.password}
-                    />
-                </_InputLayout>
-                <_LoginButton>로그인</_LoginButton>
-                <_SearhEmployeeNumberText>
-                    사원번호를 잊으셨다면?{' '}
-                    <_SearhEmployeeNumber>사원번호 찾기</_SearhEmployeeNumber>
-                </_SearhEmployeeNumberText>
-            </_LoginLayout>
+            <OutSideClickHandler onOutsideClick={() => setIsModal(false)}>
+                <_LoginLayout>
+                    <h1>LOGIN</h1>
+                    <_LoginLine />
+                    <_InputLayout>
+                        <p>사원번호</p>
+                        <input
+                            name="employee_number"
+                            onChange={changeLoginState}
+                            value={loginInfo?.employee_number}
+                        />
+                    </_InputLayout>
+                    <_InputLayout>
+                        <p>비밀 번호</p>
+                        <input
+                            name="password"
+                            type="password"
+                            onChange={changeLoginState}
+                            value={loginInfo.password}
+                        />
+                    </_InputLayout>
+                    <button onClick={onLogin}>로그인</button>
+                    <_SearhEmployeeNumberText>
+                        사원번호를 잊으셨다면?{' '}
+                        <span onClick={() => router.push('/find-number')}>사원번호 찾기</span>
+                    </_SearhEmployeeNumberText>
+                </_LoginLayout>
+            </OutSideClickHandler>
         </_ModalBackground>
     );
 };
@@ -73,14 +108,33 @@ const _LoginLayout = styled.div`
     width: 540px;
     height: 600px;
     gap: 25px;
-`;
 
-const _LoginTitle = styled.h1`
-    font-family: 'NanumSquare';
-    font-weight: 800;
-    font-size: 32px;
-    color: #e84045;
-    margin: 0px;
+    h1 {
+        font-family: 'NanumSquare';
+        font-weight: 800;
+        font-size: 32px;
+        color: #e84045;
+        margin: 0px;
+    }
+
+    button {
+        cursor: pointer;
+        transition: all 0.3s;
+        width: 400px;
+        height: 42px;
+        background: #242424;
+        border: none;
+        border-radius: 5px;
+        margin-top: 10px;
+        font-family: 'NanumSquare';
+        font-weight: 700;
+        font-size: 16px;
+        color: #ffffff;
+
+        &:hover {
+            background: #111111;
+        }
+    }
 `;
 
 const _LoginLine = styled.div`
@@ -95,39 +149,19 @@ const _InputLayout = styled.div`
     flex-direction: column;
     align-items: flex-start;
     gap: 15px;
-`;
-
-const _InputName = styled.p`
-    font-family: 'NanumSquare';
-    font-weight: 700;
-    font-size: 18px;
-    color: #343434;
-    margin: 0px;
-`;
-
-const _TestInput = styled.input`
-    width: 400px;
-    height: 42px;
-    border: 1px solid #d3d3d3;
-    border-radius: 5px;
-`;
-
-const _LoginButton = styled.button`
-    cursor: pointer;
-    transition: all 0.3s;
-    width: 400px;
-    height: 42px;
-    background: #242424;
-    border: none;
-    border-radius: 5px;
-    margin-top: 10px;
-    font-family: 'NanumSquare';
-    font-weight: 700;
-    font-size: 16px;
-    color: #ffffff;
 
-    &:hover {
-        background: #111111;
+    p {
+        font-family: 'NanumSquare';
+        font-weight: 700;
+        font-size: 18px;
+        color: #343434;
+        margin: 0px;
+    }
+    input {
+        width: 400px;
+        height: 42px;
+        border: 1px solid #d3d3d3;
+        border-radius: 5px;
     }
 `;
 
@@ -136,15 +170,14 @@ const _SearhEmployeeNumberText = styled.p`
     font-weight: 400;
     font-size: 18px;
     color: #5a5a5a;
-`;
-
-const _SearhEmployeeNumber = styled.span`
-    cursor: pointer;
-    font-family: 'NanumSquare';
-    font-weight: 400;
-    font-size: 18px;
-    text-decoration-line: underline;
-    color: #e84045;
+    span {
+        cursor: pointer;
+        font-family: 'NanumSquare';
+        font-weight: 400;
+        font-size: 18px;
+        text-decoration-line: underline;
+        color: #e84045;
+    }
 `;
 
 export default LoginModal;