feat. login page

 import { client } from './client';
 import { client } from './client';
+import { RecoilState } from 'recoil';
 
 
 export default {
 export default {
-
+    getDoctorRegReqList : (token : RecoilState<any>) => {
+        return client.get('/manage/doctor', {
+            headers : {
+                Authorization : token,
+            },
+        });
+    },
+    getDoctorRegReqDetail : (token : RecoilState<any>, doctorId : string) => {
+        return client.get(`/manage/doctor/${doctorId}`, {
+            headers : {
+                Authorization : token,
+            },
+        });
+    },
+    acceotDoctorRegReq : (token : RecoilState<any>, Data : FormData) => {
+        return client.post('/manage/doctor/accept', Data, {
+            headers : {
+                Authorization : token,
+            },
+        });
+    },
+    rejectDoctorRegReq : (token : RecoilState<any>, Data : FormData) => {
+        return client.post('/manage/doctor/reject', Data, {
+            headers : {
+                Authorization : token,
+            },
+        });
+    },
 };
 };
\ No newline at end of file

 import axios, { AxiosInstance } from 'axios';
 import axios, { AxiosInstance } from 'axios';
-
-require('dotenv').config();
-const { BASE_URL } = process.env;
+import { baseURL } from '../config/config';
 
 
 export const client : AxiosInstance = axios.create({
 export const client : AxiosInstance = axios.create({
-    baseURL : BASE_URL,
+    baseURL,
     headers: {
     headers: {
         'Content-Type': 'application/json',
         'Content-Type': 'application/json',
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Origin': '*',
@@ -20,6 +18,7 @@ client.interceptors.response.use(
         return response;
         return response;
     },
     },
     function (error) {
     function (error) {
+        console.log(error);
         return error;
         return error;
     }
     }
 );
 );

+export const baseURL = 'http://localhost:4000/api';
\ No newline at end of file

 import React, { useState, useEffect } from 'react';
 import React, { useState, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { RouteComponentProps } from 'react-router-dom';
 
 
+import { useRecoilState } from 'recoil';
+import * as recoilUtil from '../../util/recoilUtil';
+
 import LoginPresenter from './LoginPresenter';
 import LoginPresenter from './LoginPresenter';
 
 
-import { authApi } from 'api';
+import { authApi } from '../../api';
+
 
 
 type LoginProps = RouteComponentProps
 type LoginProps = RouteComponentProps
 
 
 const LoginContainer = (props : LoginProps) => {
 const LoginContainer = (props : LoginProps) => {
+
+    const [loginForm, setLoginForm] = useState({
+        userId : '',
+        password : '',
+    });
+    const [token, setToken] = useRecoilState(recoilUtil.token);
+
+    const onSetUserId = (e : React.ChangeEvent<HTMLInputElement>) => {
+        setLoginForm({
+            ...loginForm,
+            userId : e.target.value,
+        });
+    };
+
+    const onSetPassword = (e : React.ChangeEvent<HTMLInputElement>) => {
+        setLoginForm({
+            ...loginForm,
+            password : e.target.value,
+        });
+    };
+
+    const onLogin = async () => {
+        const data : FormData = new FormData();
+        data.append('userId', loginForm.userId);
+        data.append('password', loginForm.password);
+
+        try {
+            const result : any = await authApi.login(data);
+            if(result.token) {
+                setToken(result.token);
+                props.history.push('/');
+            }
+        } catch(e) {
+            console.log(e);
+        }
+
+    };
+
+    useEffect(() => {
+        console.log('loginPage');
+    }, []);
+
     return (
     return (
         <LoginPresenter
         <LoginPresenter
-            temp = {'hi'}
+            loginForm = {loginForm}
+            onSetUserId = {onSetUserId}
+            onSetPassword = {onSetPassword}
+            onLogin = {onLogin}
         />
         />
     )
     )
 };
 };

@@ -3,13 +3,51 @@ import React from 'react';
 import * as styled from './LoginStyled';
 import * as styled from './LoginStyled';
 
 
 interface LoginProps {
 interface LoginProps {
-    temp : string;
+    loginForm : {
+        userId : string,
+        password : string,
+    };
+    onSetUserId : React.ChangeEventHandler<HTMLInputElement>;
+    onSetPassword : React.ChangeEventHandler<HTMLInputElement>;
+    onLogin : React.MouseEventHandler<HTMLButtonElement>;
 }
 }
 
 
 const LoginPresenter = (props : LoginProps) => {
 const LoginPresenter = (props : LoginProps) => {
     return (
     return (
         <styled.Container>
         <styled.Container>
-            This is Login Page {props.temp}
+            <styled.LoginWrapper>
+                <styled.LoginInputWrapper>
+                    <styled.LoginEachInputWrapper>
+                        <styled.LoginInputText
+                        >
+                            로그인 이메일
+                        </styled.LoginInputText>
+                        <styled.LoginInput 
+                            type = 'text'
+                            value = {props.loginForm.userId}
+                            onChange = {props.onSetUserId}
+
+                        />
+                    </styled.LoginEachInputWrapper>
+                    <styled.LoginEachInputWrapper>
+                        <styled.LoginInputText>
+                            비밀번호
+                        </styled.LoginInputText>
+                        <styled.LoginInput 
+                            type = 'password'
+                            value = {props.loginForm.password}
+                            onChange = {props.onSetPassword}
+                        />
+                    </styled.LoginEachInputWrapper>
+                </styled.LoginInputWrapper>
+                <styled.LoginButtonWrapper>
+                    <styled.LoginButton
+                        onClick = {props.onLogin}
+                    >
+                        로그인
+                    </styled.LoginButton>
+                </styled.LoginButtonWrapper>
+            </styled.LoginWrapper>
         </styled.Container>
         </styled.Container>
     );
     );
 };
 };

 import styled from 'styled-components';
 import styled from 'styled-components';
 
 
 export const Container = styled.div `
 export const Container = styled.div `
+    width : 1180px;
+`;
+
+export const LoginWrapper = styled.div `
+    width : 50%;
+    border : 1px solid;
+    display : flex;
+    flex-direction : column;
+    justify-content : center;
+    align-items : center;
+    padding : 20px 3px;
+`;
+
+export const LoginInputWrapper = styled.div `
+    margin : 10px 0;
+    width : 30%;
+`;
+
+export const LoginEachInputWrapper = styled.div `
+    display : flex;
+    flex-direction : column;
+    justify-content : center;
+    align-items : center;
+`;
+
+export const LoginInputText = styled.div `
+    margin : 5px 0;
+
+    text-align : center;
+`;
+
+export const LoginInput = styled.input `
+    border : 1px solid;
+    height : 30px;
+    width : 100%;
+`;
+
+export const LoginButtonWrapper = styled.div `
+    width: 30%;
+    display : flex;
+    flex-direction : row;
+    justify-content : center;
+    align-items : center;
+`;
 
 
+export const LoginButton = styled.button `
+    margin : 5px 0 5px 0;
 `;
 `;
\ No newline at end of file

@@ -6,25 +6,25 @@ import MainPresenter from './MainPresenter';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import * as recoilUtil from '../../util/recoilUtil';
 import * as recoilUtil from '../../util/recoilUtil';
 
 
-import { doctorApi, managerApi, userApi, authApi } from 'api';
+import { doctorApi, managerApi, userApi, authApi } from '../../api';
 
 
 
 
 type MainProps = RouteComponentProps
 type MainProps = RouteComponentProps
 
 
 const MainContainer = (props : MainProps) => {
 const MainContainer = (props : MainProps) => {
 
 
-    const [token, setToken] = useRecoilState(recoilUtil.token);
+    const token = useRecoilValue(recoilUtil.token);
     const userType = useRecoilValue(recoilUtil.userType);
     const userType = useRecoilValue(recoilUtil.userType);
 
 
     useEffect(() => {
     useEffect(() => {
-        if (!token) {
-            console.log('no Token');
+        if(!token || token.length) {
+            props.history.push('/login');
         }
         }
     }, []);
     }, []);
 
 
     return (
     return (
         <MainPresenter
         <MainPresenter
-            temp = {'hi'}
+            userType = {userType}
         />
         />
     );
     );
 };
 };

@@ -4,13 +4,13 @@ import * as styled from './MainStyled';
 
 
 
 
 interface MainProps {
 interface MainProps {
-    temp : string;
+    userType : string;
 }
 }
 
 
 const MainPresenter = (props : MainProps) => {
 const MainPresenter = (props : MainProps) => {
     return (
     return (
         <styled.Container>
         <styled.Container>
-            This is Main Page {props.temp}
+            This is Main Page {props.userType}
         </styled.Container>
         </styled.Container>
     )
     )
 };
 };