feat. Main Container, Login Container Structure

@@ -13,8 +13,11 @@
     "axios": "^0.21.1",
     "axios": "^0.21.1",
     "react": "^17.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-scripts": "4.0.3",
     "recoil": "^0.4.0",
     "recoil": "^0.4.0",
+    "recoil-persist": "^3.0.0",
+    "styled-components": "^5.3.0",
     "typescript": "^4.1.2",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
     "web-vitals": "^1.0.1"
   },
   },
@@ -43,6 +46,8 @@
     ]
     ]
   },
   },
   "devDependencies": {
   "devDependencies": {
+    "@types/react-router-dom": "^5.1.8",
+    "@types/styled-components": "^5.1.12",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
     "eslint": "^7.32.0",
     "eslint": "^7.32.0",

 import React from 'react';
 import React from 'react';
 
 
+import Router from 'views/Router';
+import { RecoilRoot } from 'recoil';
+
 function App() {
 function App() {
   return (
   return (
-     <div>
-       For Manager Web
-     </div>
+     <RecoilRoot>
+       <Router />
+     </RecoilRoot>
   );
   );
 }
 }
 
 
+App.defaultProps = {};
+
 export default App;
 export default App;

 import { client } from "./client";
 import { client } from "./client";
 
 
-export const authApi = {
+export default {
     register : (Data : FormData) => {
     register : (Data : FormData) => {
         return client.post('/auth/register', Data);
         return client.post('/auth/register', Data);
     },
     },

 import { client } from "./client";
 import { client } from "./client";
 import { RecoilState } from "recoil";
 import { RecoilState } from "recoil";
 
 
-export const doctorApi = {
+export default {
     getPatientList : (token : RecoilState<any>) => {
     getPatientList : (token : RecoilState<any>) => {
         return client.get('/doctor/patient', {
         return client.get('/doctor/patient', {
             headers : {
             headers : {

+import { client } from './client';
+
+export default {
+
+};
\ No newline at end of file

 import { client } from './client';
 import { client } from './client';
 import { RecoilState } from 'recoil';
 import { RecoilState } from 'recoil';
 
 
-export const userApi = {
+export default {
     getMyInfo : (token : RecoilState<any>) => {
     getMyInfo : (token : RecoilState<any>) => {
         return client.get('/user', {
         return client.get('/user', {
             headers : {
             headers : {

+export { default as authApi } from './api-auth';
+export { default as doctorApi } from './api-doctor';
+export { default as managerApi } from './api-manager';
+export { default as userApi } from './api-user';
\ No newline at end of file

@@ -2,10 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactDOM from 'react-dom';
 import App from './App';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import reportWebVitals from './reportWebVitals';
+import { RecoilRoot } from 'recoil';
 
 
 ReactDOM.render(
 ReactDOM.render(
   <React.StrictMode>
   <React.StrictMode>
-    <App />
+    <RecoilRoot>
+      <App />
+    </RecoilRoot>
   </React.StrictMode>,
   </React.StrictMode>,
   document.getElementById('root')
   document.getElementById('root')
 );
 );

+import { atom } from 'recoil';
+import { recoilPersist } from 'recoil-persist';
+
+const { persistAtom } = recoilPersist();
+
+export const token = atom({
+    key : 'token',
+    default : null,
+    effects_UNSTABLE : [persistAtom],
+});
+
+export const userType = atom({
+    key : 'userType',
+    default : 'NORMAL',
+    effects_UNSTABLE : [persistAtom],
+});
\ No newline at end of file

+import React from "react";
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+
+import { LoginContainer } from "./login";
+import { MainContainer } from "./main";
+
+const Router = () => {
+    return (
+        <BrowserRouter>
+            <Switch>
+                <Route exact path = '/' component = {MainContainer}/>
+                <Route exact path = '/login' component = {LoginContainer}/>
+            </Switch>
+        </BrowserRouter>
+    )
+};
+
+export default Router;
\ No newline at end of file

+import React, { useState, useEffect } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import LoginPresenter from './LoginPresenter';
+
+import { authApi } from 'api';
+
+type LoginProps = RouteComponentProps
+
+const LoginContainer = (props : LoginProps) => {
+    return (
+        <LoginPresenter
+            temp = {'hi'}
+        />
+    )
+};
+
+export default LoginContainer;
\ No newline at end of file

+import React from 'react';
+
+import * as styled from './LoginStyled';
+
+interface LoginProps {
+    temp : string;
+}
+
+const LoginPresenter = (props : LoginProps) => {
+    return (
+        <styled.Container>
+            This is Login Page {props.temp}
+        </styled.Container>
+    );
+};
+
+export default LoginPresenter;
\ No newline at end of file

+import styled from 'styled-components';
+
+export const Container = styled.div `
+    
+`;
\ No newline at end of file

+export { default as LoginContainer } from './LoginContainer';
\ No newline at end of file

+import React, { useState, useEffect } from 'react';
+import { RouteComponentProps} from 'react-router-dom';
+
+import MainPresenter from './MainPresenter';
+
+import { useRecoilState, useRecoilValue } from 'recoil';
+import * as recoilUtil from '../../util/recoilUtil';
+
+import { doctorApi, managerApi, userApi, authApi } from 'api';
+
+
+type MainProps = RouteComponentProps
+
+const MainContainer = (props : MainProps) => {
+
+    const [token, setToken] = useRecoilState(recoilUtil.token);
+    const userType = useRecoilValue(recoilUtil.userType);
+
+    useEffect(() => {
+        if (!token) {
+            console.log('no Token');
+        }
+    }, []);
+
+    return (
+        <MainPresenter
+            temp = {'hi'}
+        />
+    );
+};
+
+export default MainContainer;
\ No newline at end of file

+import React from 'react';
+
+import * as styled from './MainStyled';
+
+
+interface MainProps {
+    temp : string;
+}
+
+const MainPresenter = (props : MainProps) => {
+    return (
+        <styled.Container>
+            This is Main Page {props.temp}
+        </styled.Container>
+    )
+};
+
+export default MainPresenter;
\ No newline at end of file

+import styled from 'styled-components';
+
+export const Container = styled.div `
+
+`;
\ No newline at end of file

+export { default as MainContainer } from './MainContainer';
\ No newline at end of file