feat. Web Component View Edit

+import styled from 'styled-components';
+
+export const Container = styled.div `
+    width : 100%;
+    position : relative;
+    display : inline-block;
+    padding : 20px 0;
+    box-shadow: 0px 0px 10px #a0a0a0;
+    margin : 0 0 15px 0;
+    z-index : 50;
+`;
+
+export const HeaderWrapper = styled.div `
+    display : flex;
+    justify-content : center;
+    align-items : center;
+`;
+
+export const Title = styled.div `
+    flex : 1;
+    text-align : center;
+    font-size : 17px;
+    font-weight : 800;
+`;
\ No newline at end of file

+import React from 'react';
+
+import * as styled from './HeaderStyled';
+
+
+const Header = () => {
+    return (
+        <styled.Container>
+            <styled.HeaderWrapper>
+                <styled.Title>내 손 안의 주치의</styled.Title>
+            </styled.HeaderWrapper>
+        </styled.Container>
+    )
+};
+
+export default Header;
\ No newline at end of file

+import styled from 'styled-components';
+
+export const Container = styled.div `
+    // height : 100vh;
+    // width : 100%;
+    position : absolute;
+    z-index : 99;
+`;
\ No newline at end of file

+import React, { useEffect } from 'react';
+import * as recoilUtil from '../../util/recoilUtil';
+import { useRecoilState } from 'recoil';
+
+import * as styled from './ErrorStyled';
+
+
+const ErrorContainer = () => {
+
+    const [error, setError] = useRecoilState(recoilUtil.error);
+
+    useEffect(() => {
+        console.log(error);
+    }, [error]);
+
+    return (
+        <>
+            {
+                error ?
+                <styled.Container>
+                    {error}
+                </styled.Container> : null
+            }
+        </>
+    );
+}; 
+
+export default ErrorContainer;

@@ -14,3 +14,9 @@ export const userTypeCd = atom({
     default : 'NORMAL',
     effects_UNSTABLE : [persistAtom],
 });
+
+export const error = atom({
+    key : 'error',
+    default : null,
+    effects_UNSTABLE : [persistAtom],
+})
\ No newline at end of file

 import React from "react";
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
+import Error from '../components/error';
+import Header from '../components/Header';
 import { LoginContainer } from "./login";
 import { MainContainer } from "./main";
 
 const Router = () => {
     return (
         <BrowserRouter>
+            <Error />
+            <Header />
             <Switch>
                 <Route exact path = '/' component = {MainContainer}/>
                 <Route exact path = '/login' component = {LoginContainer}/>

@@ -19,6 +19,7 @@ const LoginContainer = (props : LoginProps) => {
     });
     const [token, setToken] = useRecoilState(recoilUtil.token);
     const [userTypeCd, setUserTypeCd] = useRecoilState(recoilUtil.userTypeCd);
+    const [error, setError] = useRecoilState(recoilUtil.error);
 
     const onSetUserId = (e : React.ChangeEvent<HTMLInputElement>) => {
         setLoginForm({
@@ -43,6 +44,7 @@ const LoginContainer = (props : LoginProps) => {
                 props.history.push('/');
             }
         } catch(e) {
+            setError('로그인에 실패했습니다.');
             console.log(e);
         }
 

@@ -36,7 +36,7 @@ const LoginPresenter = (props : LoginProps) => {
                             type = 'password'
                             value = {props.loginForm.password}
                             onChange = {props.onSetPassword}
-                            placeholder = 'password'
+                            placeholder = 'Password'
                         />
                     </styled.LoginEachInputWrapper>
                 </styled.LoginInputWrapper>

 import styled from 'styled-components';
 
 export const Container = styled.div `
-    width : 1180px;
+    width : 100%;
+    height : 80vh;
+    position : absolute;
+    display : flex;
+    justify-content : center;
+    align-items : center;
 `;
 
 export const LoginWrapper = styled.div `
-    width : 50%;
-    border : 1px solid;
+    width : 35%;
+    border : 1px solid #ddd;
+    border-radius : 3px;
     display : flex;
     flex-direction : column;
     justify-content : center;
     align-items : center;
-    padding : 20px 3px;
+    padding : 30px 3px;
+
+    box-shadow: 0px 0px 10px #a0a0a0;
+
 `;
 
 export const LoginInputWrapper = styled.div `
     margin : 10px 0;
-    width : 30%;
+    width : 80%;
 `;
 
 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;
+    width : 100%;
+    margin : 30px 0 10px 0;
 `;
 
 export const LoginInput = styled.input `
-    border : 1px solid;
-    height : 30px;
+    border : 1px solid #a0a0a0;
+    padding : 10px;
+    border-radius : 3px;
     width : 100%;
+    align-self : center;
 `;
 
 export const LoginButtonWrapper = styled.div `
@@ -47,5 +57,20 @@ export const LoginButtonWrapper = styled.div `
 `;
 
 export const LoginButton = styled.button `
-    margin : 5px 0 5px 0;
+    margin : 30px 0 5px 0;
+    background-color : #fff;
+    border : 1px solid #a0a0a0;
+    border-radius : 5px;
+    padding : 10px 30px;
+
+    cursor : pointer;
+    
+    transition : .25s all;
+
+    color : #343434;
+
+    &:hover {
+        background-color : #343434;
+        color : #fff;
+    }
 `;
\ No newline at end of file

@@ -10,7 +10,30 @@ interface MainProps {
 const MainPresenter = (props : MainProps) => {
     return (
         <styled.Container>
-            This is Main Page for {props.userTypeCd}
+            <styled.InfoAndSearchWrapper>
+                <styled.InfoWrapper>
+                    <styled.InfoSquare>
+
+                    </styled.InfoSquare>
+                    <styled.NewPatientButton>새 환자 등록</styled.NewPatientButton>
+                </styled.InfoWrapper>
+                <styled.SearchAndDetailWrapper>
+                    <styled.SearchBarWrapper>
+                        <styled.SearchBar 
+                            placeholder = '환자 이름'
+                        />
+                        <styled.SearchButton>
+                            검색
+                        </styled.SearchButton>
+                    </styled.SearchBarWrapper>
+                    <styled.SearchResultWrapper>
+
+                    </styled.SearchResultWrapper>
+                </styled.SearchAndDetailWrapper>
+            </styled.InfoAndSearchWrapper>
+            <styled.BottleListWrapper>
+                bottleListWrapper
+            </styled.BottleListWrapper>
         </styled.Container>
     )
 };

 import styled from 'styled-components';
 
 export const Container = styled.div `
+    height : 100vh;
+    width : 100%;
+    display : flex;
+    flex-direction : column;
+    justify-content : center;
+`;
+
+export const InfoAndSearchWrapper = styled.div `
+    flex : 3;
+    display : flex;
+    flex-direction : row;
+
+    margin : 0 0 30px 0;
+`;
+
+export const InfoWrapper = styled.div `
+    flex : 2;
+
+    display : flex;
+    flex-direction : column;
+    padding : 10px;
+`;
+
+export const InfoSquare = styled.div `
+    border : 1px solid #ddd;
+    border-radius : 5px;
+
+    background-color : transparent;
+    flex : 10;
+
+    margin : 0 0 20px 0;
+
+    box-shadow: 0px 0px 5px #a0a0a0;
+
+`;
+
+export const NewPatientButton = styled.button `
+    flex : 1;
+    border : 1px solid #ddd;
+    background-color : transparent;
+    border-radius : 3px;
+
+    padding : 10px 30px;
+
+    transition : .25s all;
+    color : #343434;
+
+    cursor : pointer;
+
+    &:hover { 
+        background-color : #343434;
+        color : #fff;
+    }
+`;
+
+export const SearchAndDetailWrapper = styled.div `
+    flex : 5;
+
+    display : flex;
+    flex-direction : column;
+
+    padding : 10px;
+
+`;
+
+export const SearchBarWrapper = styled.div `
+    flex : 1;
+    border : 1px solid #ddd;
+    border-radius : 3px;    
+    background-color : transparent;
+
+    display : flex;
+    flex-direction : row;
+    
+    padding : 10px;
+
+    align-items : center;
+    justify-content : space-between;
+
+    margin : 0 0 10px 0;
+
+`;
+
+export const SearchBar = styled.input `
+    border : none;
+    border-bottom : 2px solid #ddd;
+    width : 80%;
+    margin : 0 0 0 20px;
+    padding : 10px 0px;
+`;
+
+export const SearchButton = styled.button `
+    border : 1px solid #ddd;
+
+    background-color : transparent;
+
+    height : 50px;
+    width : 50px;
+
+    transition : .25s all;
+
+    cursor : pointer;
+
+    &:hover {
+        color : #fff;
+        background-color : #343434;
+    }
+`;
+
+export const SearchResultWrapper = styled.div `
+    flex : 5;
+    border : 1px solid #ddd;
+    border-radius : 3px;
+    background-color : transparent;
+
+`;
+
+export const BottleListWrapper = styled.div `
+    flex : 2;
+    display : flex;
+    flex-direction : row;
 
+    background-color : #ddd;
+    margin : 0 0 10px 0;
 `;
\ No newline at end of file