2021-1-capstone-design1 / RIT_Project1

Go to a project
Toggle navigation Toggle navigation pinning
박권수
08289c61 1 parent 2cf73275

feat. register view

Inline Side-by-side
Showing 14 changed files with 200 additions and 11 deletions
...@@ -44,6 +44,13 @@ export default { ...@@ -44,6 +44,13 @@ export default {
44 }, 44 },
45 }); 45 });
46 }, 46 },
47 + searchPatientById : (token : RecoilState<any>, patientId : string) => {
48 + return client.get(`/doctor/patient/search/${patientId}`, {
49 + headers : {
50 + Authorization : token,
51 + },
52 + });
53 + },
47 registerPatient : (token : RecoilState<any>, Data : any) => { 54 registerPatient : (token : RecoilState<any>, Data : any) => {
48 return client.post('/doctor/patient', Data, { 55 return client.post('/doctor/patient', Data, {
49 headers : { 56 headers : {
......
...@@ -4,8 +4,10 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'; ...@@ -4,8 +4,10 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
4 import Error from '../components/error'; 4 import Error from '../components/error';
5 import Header from '../components/Header'; 5 import Header from '../components/Header';
6 import { LoginContainer } from "./login"; 6 import { LoginContainer } from "./login";
7 +import { RegisterContainer } from './register';
7 import { MainContainer } from "./main"; 8 import { MainContainer } from "./main";
8 9
10 +
9 const Router = () => { 11 const Router = () => {
10 return ( 12 return (
11 <BrowserRouter> 13 <BrowserRouter>
...@@ -14,6 +16,7 @@ const Router = () => { ...@@ -14,6 +16,7 @@ const Router = () => {
14 <Switch> 16 <Switch>
15 <Route exact path = '/' component = {MainContainer}/> 17 <Route exact path = '/' component = {MainContainer}/>
16 <Route exact path = '/login' component = {LoginContainer}/> 18 <Route exact path = '/login' component = {LoginContainer}/>
19 + <Route exact path = '/register' component = {RegisterContainer}/>
17 </Switch> 20 </Switch>
18 </BrowserRouter> 21 </BrowserRouter>
19 ) 22 )
......
...@@ -35,6 +35,10 @@ const LoginContainer = (props : LoginProps) => { ...@@ -35,6 +35,10 @@ const LoginContainer = (props : LoginProps) => {
35 }); 35 });
36 }; 36 };
37 37
38 + const onGoRegister = () => {
39 + props.history.push('/register');
40 + };
41 +
38 const onLogin = async () => { 42 const onLogin = async () => {
39 try { 43 try {
40 const result : any = await authApi.login(loginForm); 44 const result : any = await authApi.login(loginForm);
...@@ -59,6 +63,7 @@ const LoginContainer = (props : LoginProps) => { ...@@ -59,6 +63,7 @@ const LoginContainer = (props : LoginProps) => {
59 loginForm = {loginForm} 63 loginForm = {loginForm}
60 onSetUserId = {onSetUserId} 64 onSetUserId = {onSetUserId}
61 onSetPassword = {onSetPassword} 65 onSetPassword = {onSetPassword}
66 + onGoRegister = {onGoRegister}
62 onLogin = {onLogin} 67 onLogin = {onLogin}
63 /> 68 />
64 ) 69 )
......
...@@ -9,6 +9,7 @@ interface LoginProps { ...@@ -9,6 +9,7 @@ interface LoginProps {
9 }; 9 };
10 onSetUserId : React.ChangeEventHandler<HTMLInputElement>; 10 onSetUserId : React.ChangeEventHandler<HTMLInputElement>;
11 onSetPassword : React.ChangeEventHandler<HTMLInputElement>; 11 onSetPassword : React.ChangeEventHandler<HTMLInputElement>;
12 + onGoRegister : () => void;
12 onLogin : React.MouseEventHandler<HTMLButtonElement>; 13 onLogin : React.MouseEventHandler<HTMLButtonElement>;
13 } 14 }
14 15
...@@ -16,6 +17,7 @@ const LoginPresenter = (props : LoginProps) => { ...@@ -16,6 +17,7 @@ const LoginPresenter = (props : LoginProps) => {
16 return ( 17 return (
17 <styled.Container> 18 <styled.Container>
18 <styled.LoginWrapper> 19 <styled.LoginWrapper>
20 + <styled.LoginTitle>로그인</styled.LoginTitle>
19 <styled.LoginInputWrapper> 21 <styled.LoginInputWrapper>
20 <styled.LoginEachInputWrapper> 22 <styled.LoginEachInputWrapper>
21 <styled.LoginInputText> 23 <styled.LoginInputText>
...@@ -42,7 +44,7 @@ const LoginPresenter = (props : LoginProps) => { ...@@ -42,7 +44,7 @@ const LoginPresenter = (props : LoginProps) => {
42 </styled.LoginInputWrapper> 44 </styled.LoginInputWrapper>
43 <styled.RegisterButtonWrapper> 45 <styled.RegisterButtonWrapper>
44 <styled.RegisterButton 46 <styled.RegisterButton
45 - onClick = {() => console.log('회원가입 버튼')} 47 + onClick = {props.onGoRegister}
46 > 48 >
47 회원가입 49 회원가입
48 </styled.RegisterButton> 50 </styled.RegisterButton>
......
...@@ -11,7 +11,7 @@ export const Container = styled.div ` ...@@ -11,7 +11,7 @@ export const Container = styled.div `
11 11
12 export const LoginWrapper = styled.div ` 12 export const LoginWrapper = styled.div `
13 width : 35%; 13 width : 35%;
14 - border : 1px solid #ddd; 14 + border : none;
15 border-radius : 3px; 15 border-radius : 3px;
16 display : flex; 16 display : flex;
17 flex-direction : column; 17 flex-direction : column;
...@@ -23,6 +23,11 @@ export const LoginWrapper = styled.div ` ...@@ -23,6 +23,11 @@ export const LoginWrapper = styled.div `
23 23
24 `; 24 `;
25 25
26 +export const LoginTitle = styled.div `
27 + font-size : 20px;
28 + font-weight : 700;
29 +`;
30 +
26 export const LoginInputWrapper = styled.div ` 31 export const LoginInputWrapper = styled.div `
27 margin : 10px 0; 32 margin : 10px 0;
28 width : 80%; 33 width : 80%;
......
...@@ -41,25 +41,28 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => { ...@@ -41,25 +41,28 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
41 41
42 const [editModal, setEditModal] = useState<boolean>(false); 42 const [editModal, setEditModal] = useState<boolean>(false);
43 const [newPatientRegisterModal, setNewPatientRegisterModal] = useState<boolean>(false); 43 const [newPatientRegisterModal, setNewPatientRegisterModal] = useState<boolean>(false);
44 + const [newPatientSearchId, setNewPatientSearchId] = useState<string>('');
45 +
44 46
45 47
46 const fetchData = async() => { 48 const fetchData = async() => {
47 try { 49 try {
48 const res = await doctorApi.getDoctorsInfo(token); 50 const res = await doctorApi.getDoctorsInfo(token);
49 if(res.statusText === 'OK') { 51 if(res.statusText === 'OK') {
50 - setDoctorInfo(res.data); 52 + const { doctorInfo } = res.data;
53 + setDoctorInfo(doctorInfo);
51 setInfo({ 54 setInfo({
52 infoType : 'DOCTOR', 55 infoType : 'DOCTOR',
53 - userNm : res.data.doctorNm, 56 + userNm : doctorInfo.doctorNm,
54 - doctorType : res.data.doctorType, 57 + doctorType : doctorInfo.doctorType,
55 - contact : res.data.contact, 58 + contact : doctorInfo.contact,
56 userAge : null, 59 userAge : null,
57 patientInfo : '', 60 patientInfo : '',
58 }); 61 });
59 62
60 //로그인한 환자의 리스트를 가져옴 : 프론트에서 필터로 검색 63 //로그인한 환자의 리스트를 가져옴 : 프론트에서 필터로 검색
61 await doctorApi.getPatientList(token).then(res => { 64 await doctorApi.getPatientList(token).then(res => {
62 - setPatientList(res.data); 65 + setPatientList(res.data.patientList);
63 }).catch(error => console.log(error)); 66 }).catch(error => console.log(error));
64 } 67 }
65 } catch(e) { 68 } catch(e) {
...@@ -104,6 +107,26 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => { ...@@ -104,6 +107,26 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
104 }; 107 };
105 108
106 109
110 + const onSetNewPatientSearchId = (e : React.ChangeEvent<HTMLInputElement>) => {
111 + setNewPatientSearchId(e.target.value);
112 + };
113 +
114 + const onSearchNewPatientByEmail = async () => {
115 + try {
116 + await doctorApi.searchPatientById(token, newPatientSearchId).then(res => {
117 + console.log(res.data);
118 + }).catch(err => console.log(err));
119 + } catch(e) {
120 + console.log(e);
121 + }
122 + };
123 +
124 +
125 + const onGoBottleDetail = (bottleId : number) => {
126 + console.log(bottleId);
127 + };
128 +
129 +
107 useEffect(() => { 130 useEffect(() => {
108 if(!token || !token.length) { 131 if(!token || !token.length) {
109 props.history.push('/login'); 132 props.history.push('/login');
...@@ -131,11 +154,16 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => { ...@@ -131,11 +154,16 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
131 onFetchPatientDetail = {onFetchPatientDetail} 154 onFetchPatientDetail = {onFetchPatientDetail}
132 155
133 onInitialize = {onInitialize} 156 onInitialize = {onInitialize}
157 + onGoBottleDetail = {onGoBottleDetail}
134 158
135 editModal = {editModal} 159 editModal = {editModal}
136 setEditModal = {setEditModal} 160 setEditModal = {setEditModal}
161 +
137 newPatientRegisterModal = {newPatientRegisterModal} 162 newPatientRegisterModal = {newPatientRegisterModal}
138 setNewPatientRegisterModal = {setNewPatientRegisterModal} 163 setNewPatientRegisterModal = {setNewPatientRegisterModal}
164 + newPatientSearchId = {newPatientSearchId}
165 + onSetNewPatientSearchId = {onSetNewPatientSearchId}
166 + onSearchNewPatientByEmail = {onSearchNewPatientByEmail}
139 /> 167 />
140 ); 168 );
141 }; 169 };
......
...@@ -3,6 +3,8 @@ import React from 'react'; ...@@ -3,6 +3,8 @@ import React from 'react';
3 import * as styled from './DoctorMenuStyled'; 3 import * as styled from './DoctorMenuStyled';
4 4
5 const medicineImg = '/static/img/medicine.png'; 5 const medicineImg = '/static/img/medicine.png';
6 +const lensImg = '/static/img/lens.png';
7 +const closeButton = '/static/img/close.png';
6 8
7 9
8 interface DoctorMenuProps { 10 interface DoctorMenuProps {
...@@ -21,11 +23,16 @@ interface DoctorMenuProps { ...@@ -21,11 +23,16 @@ interface DoctorMenuProps {
21 onFetchPatientDetail : (arg0 : string) => void; 23 onFetchPatientDetail : (arg0 : string) => void;
22 24
23 onInitialize : () => void; 25 onInitialize : () => void;
26 + onGoBottleDetail : (arg0 : number) => void;
24 27
25 editModal : boolean; 28 editModal : boolean;
26 setEditModal : any; 29 setEditModal : any;
30 +
27 newPatientRegisterModal : boolean; 31 newPatientRegisterModal : boolean;
28 setNewPatientRegisterModal : any; 32 setNewPatientRegisterModal : any;
33 + newPatientSearchId: string;
34 + onSetNewPatientSearchId : React.ChangeEventHandler<HTMLInputElement>;
35 + onSearchNewPatientByEmail : () => void;
29 } 36 }
30 37
31 const DoctorMenuPresenter = (props : DoctorMenuProps) => { 38 const DoctorMenuPresenter = (props : DoctorMenuProps) => {
...@@ -38,7 +45,7 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => { ...@@ -38,7 +45,7 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
38 <styled.ModalClsButton 45 <styled.ModalClsButton
39 onClick = {() => props.setEditModal(false)} 46 onClick = {() => props.setEditModal(false)}
40 > 47 >
41 - <styled.ModalClsButtonImg /> 48 + <styled.ModalClsButtonImg src = {closeButton}/>
42 <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText> 49 <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
43 </styled.ModalClsButton> 50 </styled.ModalClsButton>
44 </styled.ModalClsButtonWrapper> 51 </styled.ModalClsButtonWrapper>
...@@ -48,9 +55,13 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => { ...@@ -48,9 +55,13 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
48 <styled.NewPatientSearchWrapper> 55 <styled.NewPatientSearchWrapper>
49 <styled.NewPatientSearchInput 56 <styled.NewPatientSearchInput
50 placeholder = '환자 이메일을 입력하세요.' 57 placeholder = '환자 이메일을 입력하세요.'
58 + value = {props.newPatientSearchId}
59 + onChange = {props.onSetNewPatientSearchId}
51 /> 60 />
52 - <styled.NewPatientSearchButton> 61 + <styled.NewPatientSearchButton
53 - <styled.NewPatientSearchButtonImg /> 62 + onClick = {props.onSearchNewPatientByEmail}
63 + >
64 + <styled.NewPatientSearchButtonImg src = {lensImg}/>
54 </styled.NewPatientSearchButton> 65 </styled.NewPatientSearchButton>
55 </styled.NewPatientSearchWrapper> 66 </styled.NewPatientSearchWrapper>
56 <styled.NewPatientSearchResultWrapper> 67 <styled.NewPatientSearchResultWrapper>
...@@ -177,7 +188,8 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => { ...@@ -177,7 +188,8 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
177 props.patientDetail.bottleList.map((bottle : any) => { 188 props.patientDetail.bottleList.map((bottle : any) => {
178 return ( 189 return (
179 <styled.EachBottleWrapper 190 <styled.EachBottleWrapper
180 - key = {bottle._id} 191 + key = {bottle.bottleId}
192 + onClick = {() => props.onGoBottleDetail(bottle.bottleId)}
181 > 193 >
182 <styled.EachBottleImg src = {medicineImg}/> 194 <styled.EachBottleImg src = {medicineImg}/>
183 <styled.EachBottleInfo>{bottle.medicine.name.slice(0, 14)}</styled.EachBottleInfo> 195 <styled.EachBottleInfo>{bottle.medicine.name.slice(0, 14)}</styled.EachBottleInfo>
......
...@@ -131,6 +131,7 @@ export const NewPatientSearchButton = styled.button ` ...@@ -131,6 +131,7 @@ export const NewPatientSearchButton = styled.button `
131 justify-content : center; 131 justify-content : center;
132 align-items : center; 132 align-items : center;
133 133
134 + cursor : pointer;
134 135
135 transition : .25s all; 136 transition : .25s all;
136 &:hover { 137 &:hover {
......
1 +import React, { useState, useEffect } from "react";
2 +import { RouteComponentProps } from 'react-router-dom';
3 +
4 +import { useRecoilValue } from "recoil";
5 +import * as recoilUtil from '../../util/recoilUtil';
6 +
7 +import RegisterPresenter from "./RegisterPresenter";
8 +
9 +type RegisterProps = RouteComponentProps;
10 +
11 +const RegisterContainer = (props : RegisterProps) => {
12 + return (
13 + <RegisterPresenter
14 +
15 + />
16 + )
17 +};
18 +
19 +export default RegisterContainer;
...\ No newline at end of file ...\ No newline at end of file
1 +import React from 'react';
2 +
3 +import * as styled from './RegisterStyled';
4 +
5 +
6 +const RegisterPresenter = () => {
7 + return (
8 + <styled.Container>
9 + <styled.RegisterWrapper>
10 + <styled.RegisterTitle>회원 가입</styled.RegisterTitle>
11 + <styled.RegisterInfo>* 의사만 회원가입이 가능합니다.</styled.RegisterInfo>
12 + <styled.RegisterInfo style = {{fontSize : 10,}}>의사 인증을 위한 정보가 요구됩니다.</styled.RegisterInfo>
13 + <styled.RegisterInputWrapper>
14 + <styled.RegisterInputText>이메일</styled.RegisterInputText>
15 + <styled.RegisterInput
16 + placeholder = 'Email'
17 + />
18 + </styled.RegisterInputWrapper>
19 + <styled.RegisterInputWrapper>
20 + <styled.RegisterInputText>비밀번호</styled.RegisterInputText>
21 + <styled.RegisterInput
22 + placeholder = 'Password'
23 + />
24 + </styled.RegisterInputWrapper>
25 + <styled.RegisterInputWrapper>
26 + <styled.RegisterInputText>비밀번호 확인</styled.RegisterInputText>
27 + <styled.RegisterInput
28 + placeholder = 'Password Again'
29 + />
30 + </styled.RegisterInputWrapper>
31 + </styled.RegisterWrapper>
32 + </styled.Container>
33 + )
34 +};
35 +
36 +export default RegisterPresenter;
...\ 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 + width : 100%;
5 + height : 80vh;
6 + position : absolute;
7 + display : flex;
8 + justify-content : center;
9 + align-items : center;
10 +`;
11 +
12 +export const RegisterWrapper = styled.div `
13 + width : 35%;
14 + border : none;
15 + border-radius : 3px;
16 +
17 + display : flex;
18 + flex-direction : column;
19 +
20 + justify-content : center;
21 + align-items : center;
22 +
23 + padding : 30px 3px;
24 +
25 + box-shadow: 0px 0px 10px #a0a0a0;
26 +
27 +`;
28 +
29 +export const RegisterTitle = styled.div `
30 + font-size : 20px;
31 + font-weight : 700;
32 + margin : 0 0 20px 0;
33 + color : #343434;
34 +`;
35 +
36 +export const RegisterInfo = styled.div `
37 + width : 90%;
38 + font-size : 12px;
39 + color : #a0a0a0;
40 +`;
41 +
42 +export const RegisterInputWrapper = styled.div `
43 + margin : 20px 0 5px 0;
44 + width : 90%;
45 + display : flex;
46 + flex-direction : column;
47 +
48 + justify-content : flex-start;
49 + align-items : center;
50 +`;
51 +
52 +export const RegisterInputText = styled.div `
53 + width : 80%;
54 + font-size : 14px;
55 + font-weight : 600;
56 + margin : 0 0 10px 0;
57 + color : #343434;
58 +
59 +`;
60 +
61 +export const RegisterInput = styled.input `
62 + width : 80%;
63 + padding : 0 0 5px 0;
64 + border : none;
65 + border-bottom : 1px solid #ddd;
66 +
67 + &::placeholder {
68 + color : #ddd;
69 + }
70 +`;
...\ No newline at end of file ...\ No newline at end of file
1 +export { default as RegisterContainer } from './RegisterContainer';
...\ No newline at end of file ...\ No newline at end of file