2021-1-capstone-design1 / RIT_Project1

Go to a project
Toggle navigation Toggle navigation pinning
박권수
3d3ed3eb 1 parent 4b1443cf

feat. Web Component View Edit

Inline Side-by-side
Showing 11 changed files with 274 additions and 15 deletions
1 +import styled from 'styled-components';
2 +
3 +export const Container = styled.div `
4 + width : 100%;
5 + position : relative;
6 + display : inline-block;
7 + padding : 20px 0;
8 + box-shadow: 0px 0px 10px #a0a0a0;
9 + margin : 0 0 15px 0;
10 + z-index : 50;
11 +`;
12 +
13 +export const HeaderWrapper = styled.div `
14 + display : flex;
15 + justify-content : center;
16 + align-items : center;
17 +`;
18 +
19 +export const Title = styled.div `
20 + flex : 1;
21 + text-align : center;
22 + font-size : 17px;
23 + font-weight : 800;
24 +`;
...\ No newline at end of file ...\ No newline at end of file
1 +import React from 'react';
2 +
3 +import * as styled from './HeaderStyled';
4 +
5 +
6 +const Header = () => {
7 + return (
8 + <styled.Container>
9 + <styled.HeaderWrapper>
10 + <styled.Title>내 손 안의 주치의</styled.Title>
11 + </styled.HeaderWrapper>
12 + </styled.Container>
13 + )
14 +};
15 +
16 +export default Header;
...\ No newline at end of file ...\ No newline at end of file
1 +import styled from 'styled-components';
2 +
3 +export const Container = styled.div `
4 + // height : 100vh;
5 + // width : 100%;
6 + position : absolute;
7 + z-index : 99;
8 +`;
...\ No newline at end of file ...\ No newline at end of file
1 +import React, { useEffect } from 'react';
2 +import * as recoilUtil from '../../util/recoilUtil';
3 +import { useRecoilState } from 'recoil';
4 +
5 +import * as styled from './ErrorStyled';
6 +
7 +
8 +const ErrorContainer = () => {
9 +
10 + const [error, setError] = useRecoilState(recoilUtil.error);
11 +
12 + useEffect(() => {
13 + console.log(error);
14 + }, [error]);
15 +
16 + return (
17 + <>
18 + {
19 + error ?
20 + <styled.Container>
21 + {error}
22 + </styled.Container> : null
23 + }
24 + </>
25 + );
26 +};
27 +
28 +export default ErrorContainer;
...@@ -13,4 +13,10 @@ export const userTypeCd = atom({ ...@@ -13,4 +13,10 @@ export const userTypeCd = atom({
13 key : 'userTypeCd', 13 key : 'userTypeCd',
14 default : 'NORMAL', 14 default : 'NORMAL',
15 effects_UNSTABLE : [persistAtom], 15 effects_UNSTABLE : [persistAtom],
16 -});
...\ No newline at end of file ...\ No newline at end of file
16 +});
17 +
18 +export const error = atom({
19 + key : 'error',
20 + default : null,
21 + effects_UNSTABLE : [persistAtom],
22 +})
...\ No newline at end of file ...\ No newline at end of file
......
1 import React from "react"; 1 import React from "react";
2 import { BrowserRouter, Route, Switch } from 'react-router-dom'; 2 import { BrowserRouter, Route, Switch } from 'react-router-dom';
3 3
4 +import Error from '../components/error';
5 +import Header from '../components/Header';
4 import { LoginContainer } from "./login"; 6 import { LoginContainer } from "./login";
5 import { MainContainer } from "./main"; 7 import { MainContainer } from "./main";
6 8
7 const Router = () => { 9 const Router = () => {
8 return ( 10 return (
9 <BrowserRouter> 11 <BrowserRouter>
12 + <Error />
13 + <Header />
10 <Switch> 14 <Switch>
11 <Route exact path = '/' component = {MainContainer}/> 15 <Route exact path = '/' component = {MainContainer}/>
12 <Route exact path = '/login' component = {LoginContainer}/> 16 <Route exact path = '/login' component = {LoginContainer}/>
......
...@@ -19,6 +19,7 @@ const LoginContainer = (props : LoginProps) => { ...@@ -19,6 +19,7 @@ const LoginContainer = (props : LoginProps) => {
19 }); 19 });
20 const [token, setToken] = useRecoilState(recoilUtil.token); 20 const [token, setToken] = useRecoilState(recoilUtil.token);
21 const [userTypeCd, setUserTypeCd] = useRecoilState(recoilUtil.userTypeCd); 21 const [userTypeCd, setUserTypeCd] = useRecoilState(recoilUtil.userTypeCd);
22 + const [error, setError] = useRecoilState(recoilUtil.error);
22 23
23 const onSetUserId = (e : React.ChangeEvent<HTMLInputElement>) => { 24 const onSetUserId = (e : React.ChangeEvent<HTMLInputElement>) => {
24 setLoginForm({ 25 setLoginForm({
...@@ -43,6 +44,7 @@ const LoginContainer = (props : LoginProps) => { ...@@ -43,6 +44,7 @@ const LoginContainer = (props : LoginProps) => {
43 props.history.push('/'); 44 props.history.push('/');
44 } 45 }
45 } catch(e) { 46 } catch(e) {
47 + setError('로그인에 실패했습니다.');
46 console.log(e); 48 console.log(e);
47 } 49 }
48 50
......
...@@ -36,7 +36,7 @@ const LoginPresenter = (props : LoginProps) => { ...@@ -36,7 +36,7 @@ const LoginPresenter = (props : LoginProps) => {
36 type = 'password' 36 type = 'password'
37 value = {props.loginForm.password} 37 value = {props.loginForm.password}
38 onChange = {props.onSetPassword} 38 onChange = {props.onSetPassword}
39 - placeholder = 'password' 39 + placeholder = 'Password'
40 /> 40 />
41 </styled.LoginEachInputWrapper> 41 </styled.LoginEachInputWrapper>
42 </styled.LoginInputWrapper> 42 </styled.LoginInputWrapper>
......
1 import styled from 'styled-components'; 1 import styled from 'styled-components';
2 2
3 export const Container = styled.div ` 3 export const Container = styled.div `
4 - width : 1180px; 4 + width : 100%;
5 + height : 80vh;
6 + position : absolute;
7 + display : flex;
8 + justify-content : center;
9 + align-items : center;
5 `; 10 `;
6 11
7 export const LoginWrapper = styled.div ` 12 export const LoginWrapper = styled.div `
8 - width : 50%; 13 + width : 35%;
9 - border : 1px solid; 14 + border : 1px solid #ddd;
15 + border-radius : 3px;
10 display : flex; 16 display : flex;
11 flex-direction : column; 17 flex-direction : column;
12 justify-content : center; 18 justify-content : center;
13 align-items : center; 19 align-items : center;
14 - padding : 20px 3px; 20 + padding : 30px 3px;
21 +
22 + box-shadow: 0px 0px 10px #a0a0a0;
23 +
15 `; 24 `;
16 25
17 export const LoginInputWrapper = styled.div ` 26 export const LoginInputWrapper = styled.div `
18 margin : 10px 0; 27 margin : 10px 0;
19 - width : 30%; 28 + width : 80%;
20 `; 29 `;
21 30
22 export const LoginEachInputWrapper = styled.div ` 31 export const LoginEachInputWrapper = styled.div `
23 display : flex; 32 display : flex;
24 flex-direction : column; 33 flex-direction : column;
25 justify-content : center; 34 justify-content : center;
26 - align-items : center; 35 +
27 `; 36 `;
28 37
29 export const LoginInputText = styled.div ` 38 export const LoginInputText = styled.div `
30 - margin : 5px 0; 39 + width : 100%;
31 - 40 + margin : 30px 0 10px 0;
32 - text-align : center;
33 `; 41 `;
34 42
35 export const LoginInput = styled.input ` 43 export const LoginInput = styled.input `
36 - border : 1px solid; 44 + border : 1px solid #a0a0a0;
37 - height : 30px; 45 + padding : 10px;
46 + border-radius : 3px;
38 width : 100%; 47 width : 100%;
48 + align-self : center;
39 `; 49 `;
40 50
41 export const LoginButtonWrapper = styled.div ` 51 export const LoginButtonWrapper = styled.div `
...@@ -47,5 +57,20 @@ export const LoginButtonWrapper = styled.div ` ...@@ -47,5 +57,20 @@ export const LoginButtonWrapper = styled.div `
47 `; 57 `;
48 58
49 export const LoginButton = styled.button ` 59 export const LoginButton = styled.button `
50 - margin : 5px 0 5px 0; 60 + margin : 30px 0 5px 0;
61 + background-color : #fff;
62 + border : 1px solid #a0a0a0;
63 + border-radius : 5px;
64 + padding : 10px 30px;
65 +
66 + cursor : pointer;
67 +
68 + transition : .25s all;
69 +
70 + color : #343434;
71 +
72 + &:hover {
73 + background-color : #343434;
74 + color : #fff;
75 + }
51 `; 76 `;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -10,7 +10,30 @@ interface MainProps { ...@@ -10,7 +10,30 @@ interface MainProps {
10 const MainPresenter = (props : MainProps) => { 10 const MainPresenter = (props : MainProps) => {
11 return ( 11 return (
12 <styled.Container> 12 <styled.Container>
13 - This is Main Page for {props.userTypeCd} 13 + <styled.InfoAndSearchWrapper>
14 + <styled.InfoWrapper>
15 + <styled.InfoSquare>
16 +
17 + </styled.InfoSquare>
18 + <styled.NewPatientButton>새 환자 등록</styled.NewPatientButton>
19 + </styled.InfoWrapper>
20 + <styled.SearchAndDetailWrapper>
21 + <styled.SearchBarWrapper>
22 + <styled.SearchBar
23 + placeholder = '환자 이름'
24 + />
25 + <styled.SearchButton>
26 + 검색
27 + </styled.SearchButton>
28 + </styled.SearchBarWrapper>
29 + <styled.SearchResultWrapper>
30 +
31 + </styled.SearchResultWrapper>
32 + </styled.SearchAndDetailWrapper>
33 + </styled.InfoAndSearchWrapper>
34 + <styled.BottleListWrapper>
35 + bottleListWrapper
36 + </styled.BottleListWrapper>
14 </styled.Container> 37 </styled.Container>
15 ) 38 )
16 }; 39 };
......
1 import styled from 'styled-components'; 1 import styled from 'styled-components';
2 2
3 export const Container = styled.div ` 3 export const Container = styled.div `
4 + height : 100vh;
5 + width : 100%;
6 + display : flex;
7 + flex-direction : column;
8 + justify-content : center;
9 +`;
4 10
11 +export const InfoAndSearchWrapper = styled.div `
12 + flex : 3;
13 + display : flex;
14 + flex-direction : row;
15 +
16 + margin : 0 0 30px 0;
17 +`;
18 +
19 +export const InfoWrapper = styled.div `
20 + flex : 2;
21 +
22 + display : flex;
23 + flex-direction : column;
24 + padding : 10px;
25 +`;
26 +
27 +export const InfoSquare = styled.div `
28 + border : 1px solid #ddd;
29 + border-radius : 5px;
30 +
31 + background-color : transparent;
32 + flex : 10;
33 +
34 + margin : 0 0 20px 0;
35 +
36 + box-shadow: 0px 0px 5px #a0a0a0;
37 +
38 +`;
39 +
40 +export const NewPatientButton = styled.button `
41 + flex : 1;
42 + border : 1px solid #ddd;
43 + background-color : transparent;
44 + border-radius : 3px;
45 +
46 + padding : 10px 30px;
47 +
48 + transition : .25s all;
49 + color : #343434;
50 +
51 + cursor : pointer;
52 +
53 + &:hover {
54 + background-color : #343434;
55 + color : #fff;
56 + }
57 +`;
58 +
59 +export const SearchAndDetailWrapper = styled.div `
60 + flex : 5;
61 +
62 + display : flex;
63 + flex-direction : column;
64 +
65 + padding : 10px;
66 +
67 +`;
68 +
69 +export const SearchBarWrapper = styled.div `
70 + flex : 1;
71 + border : 1px solid #ddd;
72 + border-radius : 3px;
73 + background-color : transparent;
74 +
75 + display : flex;
76 + flex-direction : row;
77 +
78 + padding : 10px;
79 +
80 + align-items : center;
81 + justify-content : space-between;
82 +
83 + margin : 0 0 10px 0;
84 +
85 +`;
86 +
87 +export const SearchBar = styled.input `
88 + border : none;
89 + border-bottom : 2px solid #ddd;
90 + width : 80%;
91 + margin : 0 0 0 20px;
92 + padding : 10px 0px;
93 +`;
94 +
95 +export const SearchButton = styled.button `
96 + border : 1px solid #ddd;
97 +
98 + background-color : transparent;
99 +
100 + height : 50px;
101 + width : 50px;
102 +
103 + transition : .25s all;
104 +
105 + cursor : pointer;
106 +
107 + &:hover {
108 + color : #fff;
109 + background-color : #343434;
110 + }
111 +`;
112 +
113 +export const SearchResultWrapper = styled.div `
114 + flex : 5;
115 + border : 1px solid #ddd;
116 + border-radius : 3px;
117 + background-color : transparent;
118 +
119 +`;
120 +
121 +export const BottleListWrapper = styled.div `
122 + flex : 2;
123 + display : flex;
124 + flex-direction : row;
125 +
126 + background-color : #ddd;
127 + margin : 0 0 10px 0;
5 `; 128 `;
...\ No newline at end of file ...\ No newline at end of file
......