2021-1-capstone-design1 / RIT_Project1

Go to a project
Toggle navigation Toggle navigation pinning
박권수
2fc943ea 1 parent e94de288

style. Modal Component 리팩토링 및 병원 검색 개선

Inline Side-by-side
Showing 13 changed files with 550 additions and 886 deletions
1 +import styled, { keyframes } from 'styled-components';
2 +
3 +
4 +const ModalOn = keyframes `
5 + 0% {
6 + background-color : rgba(52, 52, 52, .0);
7 + }
8 + 20% {
9 + background-color : rgba(52, 52, 52, .2);
10 + }
11 + 40% {
12 + background-color : rgba(52, 52, 52, .4);
13 + }
14 + 60% {
15 + background-color : rgba(52, 52, 52, .5);
16 + }
17 + 80% {
18 + background-color : rgba(52, 52, 52, .6);
19 + }
20 + 100% {
21 + background-color : rgba(52, 52, 52, .7);
22 + }
23 +
24 +`;
25 +
26 +
27 +export const ModalContainer = styled.div `
28 + height : 100%;
29 + width : 100%;
30 + z-index : 99;
31 + position : absolute;
32 +
33 + display : flex;
34 + flex-direction : column;
35 +
36 + animation : ${ModalOn} .5s;
37 +
38 + background-color : rgba(52, 52, 52, .7);
39 +
40 +`;
41 +
42 +export const ModalClsButtonWrapper = styled.div `
43 + flex : 1;
44 +
45 + display : flex;
46 +
47 + justify-content : flex-end;
48 + align-items : center;
49 + padding : 0 20px;
50 +
51 + border : none;
52 + background-color : transprent;
53 +`;
54 +
55 +export const ModalClsButton = styled.button `
56 + border : none;
57 + background-color : transparent;
58 +
59 + cursor : pointer;
60 +
61 + color : #fff;
62 +
63 + display : flex;
64 + flex-direction : row;
65 +
66 + justify-content : center;
67 + align-items : center;
68 +
69 + transition : .25s all;
70 + &:hover {
71 + opacity : .5;
72 + }
73 +`;
74 +
75 +export const ModalClsButtonImg = styled.img `
76 + height : 20px;
77 + width : 20px;
78 +
79 + margin : 0 10px 0 0;
80 +`;
81 +
82 +export const ModalClsButtonText = styled.div `
83 + font-size : 18px;
84 + font-weight : 700;
85 +`;
86 +
87 +export const ModalContentWrapper = styled.div `
88 + flex : 8;
89 +
90 + display : flex;
91 + flex-direction : column;
92 +
93 + justify-content : center;
94 + align-items : center;
95 +
96 + border : none;
97 +`;
98 +
99 +export const ModalContent = styled.div `
100 + width : 600px;
101 + height : 400px;
102 +
103 + background-color : #fff;
104 + border : 1.2px solid #337DFF;
105 + border-radius : 5px;
106 +
107 + display : flex;
108 + flex-direction : column;
109 +
110 + justify-content : center;
111 + align-items : center;
112 +`;
...\ No newline at end of file ...\ No newline at end of file
1 +import React from 'react';
2 +
3 +import * as styled from './ModalStyled';
4 +
5 +const closeButton = '/static/img/close.png';
6 +
7 +
8 +interface ModalProps {
9 + children : JSX.Element,
10 + onModalClose : () => void;
11 +}
12 +
13 +const ModalContainer = (props : ModalProps) => {
14 + return (
15 + <styled.ModalContainer>
16 + <styled.ModalClsButtonWrapper>
17 + <styled.ModalClsButton
18 + onClick = {props.onModalClose}
19 + >
20 + <styled.ModalClsButtonImg src = {closeButton}/>
21 + <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
22 + </styled.ModalClsButton>
23 + </styled.ModalClsButtonWrapper>
24 + <styled.ModalContentWrapper>
25 + <styled.ModalContent>
26 + {props.children}
27 + </styled.ModalContent>
28 + </styled.ModalContentWrapper>
29 + <styled.ModalClsButtonWrapper />
30 + </styled.ModalContainer>
31 + );
32 +};
33 +
34 +export default ModalContainer;
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,10 +2,10 @@ import React from 'react'; ...@@ -2,10 +2,10 @@ import React from 'react';
2 import HighCharts from 'highcharts'; 2 import HighCharts from 'highcharts';
3 import HighchartsReact from 'highcharts-react-official'; 3 import HighchartsReact from 'highcharts-react-official';
4 4
5 +import Modal from '../../components/Modal';
5 import * as styled from './BottleInfoStyled'; 6 import * as styled from './BottleInfoStyled';
6 7
7 const plus = '/static/img/plus.png'; 8 const plus = '/static/img/plus.png';
8 -const closeButton = '/static/img/close.png';
9 9
10 10
11 interface BottleInfoProps { 11 interface BottleInfoProps {
...@@ -32,42 +32,32 @@ const BottleInfoPresenter = (props : BottleInfoProps) => { ...@@ -32,42 +32,32 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
32 <styled.Container> 32 <styled.Container>
33 { 33 {
34 props.medicineInfoModal ? 34 props.medicineInfoModal ?
35 - <styled.ModalContainer> 35 + <Modal onModalClose = {() => props.setMedicineInfoModal(false)}>
36 - <styled.ModalClsButtonWrapper> 36 + <>
37 - <styled.ModalClsButton 37 + <styled.MedicineNameWrapper>
38 - onClick = {() => props.setMedicineInfoModal(false)} 38 + <styled.MedicineName>{props.bottleInfo.medicine.name}</styled.MedicineName>
39 - > 39 + <styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{props.bottleInfo.medicine.company}</styled.MedicineName>
40 - <styled.ModalClsButtonImg src = {closeButton}/> 40 + </styled.MedicineNameWrapper>
41 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText> 41 + <styled.MedicineInfoWrapper>
42 - </styled.ModalClsButton> 42 + <styled.MedicineEachInfoWrapper>
43 - </styled.ModalClsButtonWrapper> 43 + <styled.MedicineEachInfoTitle>효능</styled.MedicineEachInfoTitle>
44 - <styled.ModalContentWrapper> 44 + <styled.MedicineEachInfo>{props.bottleInfo.medicine.target}</styled.MedicineEachInfo>
45 - <styled.ModalContent> 45 + </styled.MedicineEachInfoWrapper>
46 - <styled.MedicineNameWrapper> 46 + <styled.MedicineEachInfoWrapper>
47 - <styled.MedicineName>{props.bottleInfo.medicine.name}</styled.MedicineName> 47 + <styled.MedicineEachInfoTitle>복용 정보</styled.MedicineEachInfoTitle>
48 - <styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{props.bottleInfo.medicine.company}</styled.MedicineName> 48 + <styled.MedicineEachInfo>{props.bottleInfo.medicine.dosage}</styled.MedicineEachInfo>
49 - </styled.MedicineNameWrapper> 49 + </styled.MedicineEachInfoWrapper>
50 - <styled.MedicineInfoWrapper> 50 + <styled.MedicineEachInfoWrapper>
51 - <styled.MedicineEachInfoWrapper> 51 + <styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>주의 사항</styled.MedicineEachInfoTitle>
52 - <styled.MedicineEachInfoTitle>효능</styled.MedicineEachInfoTitle> 52 + <styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.warn}</styled.MedicineEachInfo>
53 - <styled.MedicineEachInfo>{props.bottleInfo.medicine.target}</styled.MedicineEachInfo> 53 + </styled.MedicineEachInfoWrapper>
54 - </styled.MedicineEachInfoWrapper> 54 + <styled.MedicineEachInfoWrapper>
55 - <styled.MedicineEachInfoWrapper> 55 + <styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>부작용</styled.MedicineEachInfoTitle>
56 - <styled.MedicineEachInfoTitle>복용 정보</styled.MedicineEachInfoTitle> 56 + <styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.antiEffect}</styled.MedicineEachInfo>
57 - <styled.MedicineEachInfo>{props.bottleInfo.medicine.dosage}</styled.MedicineEachInfo> 57 + </styled.MedicineEachInfoWrapper>
58 - </styled.MedicineEachInfoWrapper> 58 + </styled.MedicineInfoWrapper>
59 - <styled.MedicineEachInfoWrapper> 59 + </>
60 - <styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>주의 사항</styled.MedicineEachInfoTitle> 60 + </Modal> : null
61 - <styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.warn}</styled.MedicineEachInfo>
62 - </styled.MedicineEachInfoWrapper>
63 - <styled.MedicineEachInfoWrapper>
64 - <styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>부작용</styled.MedicineEachInfoTitle>
65 - <styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.antiEffect}</styled.MedicineEachInfo>
66 - </styled.MedicineEachInfoWrapper>
67 - </styled.MedicineInfoWrapper>
68 - </styled.ModalContent>
69 - </styled.ModalContentWrapper>
70 - </styled.ModalContainer> : null
71 } 61 }
72 <styled.ChartAndFeedbackWrapper> 62 <styled.ChartAndFeedbackWrapper>
73 <styled.ChartWrapper> 63 <styled.ChartWrapper>
...@@ -143,7 +133,6 @@ const BottleInfoPresenter = (props : BottleInfoProps) => { ...@@ -143,7 +133,6 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
143 <styled.NewFeedbackRegButton 133 <styled.NewFeedbackRegButton
144 onClick = {props.onSubmitFeedback} 134 onClick = {props.onSubmitFeedback}
145 > 135 >
146 - {/* <styled.NewFeedbackRegButtonImg /> */}
147 <styled.NewFeedbackRegButtonText>피드백<br/>등록</styled.NewFeedbackRegButtonText> 136 <styled.NewFeedbackRegButtonText>피드백<br/>등록</styled.NewFeedbackRegButtonText>
148 </styled.NewFeedbackRegButton> 137 </styled.NewFeedbackRegButton>
149 </styled.NewFeedbackButtonWrapper> 138 </styled.NewFeedbackButtonWrapper>
......
1 -import styled, { keyframes } from 'styled-components'; 1 +import styled from 'styled-components';
2 -
3 -
4 -const ModalOn = keyframes `
5 - 0% {
6 - background-color : rgba(52, 52, 52, .0);
7 - }
8 - 20% {
9 - background-color : rgba(52, 52, 52, .2);
10 - }
11 - 40% {
12 - background-color : rgba(52, 52, 52, .4);
13 - }
14 - 60% {
15 - background-color : rgba(52, 52, 52, .5);
16 - }
17 - 80% {
18 - background-color : rgba(52, 52, 52, .6);
19 - }
20 - 100% {
21 - background-color : rgba(52, 52, 52, .7);
22 - }
23 -
24 -`;
25 2
26 3
27 export const Container = styled.div ` 4 export const Container = styled.div `
...@@ -32,93 +9,6 @@ export const Container = styled.div ` ...@@ -32,93 +9,6 @@ export const Container = styled.div `
32 justify-content : center; 9 justify-content : center;
33 `; 10 `;
34 11
35 -export const ModalContainer = styled.div `
36 - height : 100%;
37 - width : 100%;
38 - z-index : 99;
39 - position : absolute;
40 -
41 - display : flex;
42 - flex-direction : column;
43 -
44 - animation : ${ModalOn} .5s;
45 -
46 - background-color : rgba(52, 52, 52, .7);
47 -
48 -`;
49 -
50 -export const ModalClsButtonWrapper = styled.div `
51 - flex : 1;
52 -
53 - display : flex;
54 -
55 - justify-content : flex-end;
56 - align-items : center;
57 - padding : 0 20px;
58 -
59 - border : none;
60 - background-color : transprent;
61 -`;
62 -
63 -export const ModalClsButton = styled.button `
64 - border : none;
65 - background-color : transparent;
66 -
67 - cursor : pointer;
68 -
69 - color : #fff;
70 -
71 - display : flex;
72 - flex-direction : row;
73 -
74 - justify-content : center;
75 - align-items : center;
76 -
77 - transition : .25s all;
78 - &:hover {
79 - opacity : .5;
80 - }
81 -`;
82 -
83 -export const ModalClsButtonImg = styled.img `
84 - height : 20px;
85 - width : 20px;
86 -
87 - margin : 0 10px 0 0;
88 -`;
89 -
90 -export const ModalClsButtonText = styled.div `
91 - font-size : 18px;
92 - font-weight : 700;
93 -`;
94 -
95 -export const ModalContentWrapper = styled.div `
96 - flex : 8;
97 -
98 - display : flex;
99 - flex-direction : column;
100 -
101 - justify-content : center;
102 - align-items : center;
103 -
104 - border : none;
105 -`;
106 -
107 -export const ModalContent = styled.div `
108 - width : 700px;
109 - height : 500px;
110 -
111 - background-color : #fff;
112 - border : 1.2px solid #337DFF;
113 - border-radius : 5px;
114 -
115 - display : flex;
116 - flex-direction : column;
117 -
118 - // justify-content : center;
119 - align-items : center;
120 -`;
121 -
122 export const MedicineNameWrapper = styled.div ` 12 export const MedicineNameWrapper = styled.div `
123 border : none; 13 border : none;
124 border-bottom : 1px solid #ddd; 14 border-bottom : 1px solid #ddd;
......
1 import React from 'react'; 1 import React from 'react';
2 2
3 +import Modal from '../../../components/Modal';
4 +
3 import * as styled from './DoctorMenuStyled'; 5 import * as styled from './DoctorMenuStyled';
4 6
5 const medicineImg = '/static/img/medicine.png'; 7 const medicineImg = '/static/img/medicine.png';
6 const addButton = '/static/img/plus.png'; 8 const addButton = '/static/img/plus.png';
7 const lensImg = '/static/img/lens.png'; 9 const lensImg = '/static/img/lens.png';
8 -const closeButton = '/static/img/close.png';
9 const edit = '/static/img/edit.png'; 10 const edit = '/static/img/edit.png';
10 const refreshing = '/static/img/refreshing.png'; 11 const refreshing = '/static/img/refreshing.png';
11 const check = '/static/img/check.png'; 12 const check = '/static/img/check.png';
...@@ -75,242 +76,209 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => { ...@@ -75,242 +76,209 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
75 return ( 76 return (
76 <styled.Container> 77 <styled.Container>
77 { 78 {
78 - props.newPatientRegisterModal ? 79 + props.newPatientRegisterModal ?
79 - <styled.ModalContainer> 80 + <Modal onModalClose = {() => props.setNewPatientRegisterModal(false)}>
80 - <styled.ModalClsButtonWrapper> 81 + <>
81 - <styled.ModalClsButton 82 + <styled.NewPatientRegisterTitle>새 환자 등록</styled.NewPatientRegisterTitle>
82 - onClick = {() => props.setNewPatientRegisterModal(false)} 83 + <styled.NewPatientSearchWrapper>
84 + <styled.NewPatientSearchInput
85 + placeholder = '환자 이메일을 입력하세요.'
86 + value = {props.newPatientSearchId}
87 + onChange = {props.onSetNewPatientSearchId}
88 + />
89 + <styled.NewPatientSearchButton
90 + onClick = {props.onSearchNewPatientByEmail}
83 > 91 >
84 - <styled.ModalClsButtonImg src = {closeButton}/> 92 + <styled.NewPatientSearchButtonImg src = {lensImg}/>
85 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText> 93 + </styled.NewPatientSearchButton>
86 - </styled.ModalClsButton> 94 + </styled.NewPatientSearchWrapper>
87 - </styled.ModalClsButtonWrapper> 95 + <styled.NewPatientSearchResultWrapper>
88 - <styled.ModalContentWrapper> 96 + {
89 - <styled.ModalContent> 97 + props.newPatientSearchResult ?
90 - <styled.NewPatientRegisterTitle>새 환자 등록</styled.NewPatientRegisterTitle> 98 + <styled.NewPatientSearchResult>
91 - <styled.NewPatientSearchWrapper> 99 + <styled.NewPatientSearchResultInfoWrapper>
92 - <styled.NewPatientSearchInput 100 + <styled.NewPatientSearchResultInfo>이름 : </styled.NewPatientSearchResultInfo>
93 - placeholder = '환자 이메일을 입력하세요.' 101 + <styled.NewPatientSearchResultInfoText>
94 - value = {props.newPatientSearchId} 102 + {props.newPatientSearchResult.patientNm}
95 - onChange = {props.onSetNewPatientSearchId} 103 + </styled.NewPatientSearchResultInfoText>
96 - /> 104 + </styled.NewPatientSearchResultInfoWrapper>
97 - <styled.NewPatientSearchButton 105 + </styled.NewPatientSearchResult> :
98 - onClick = {props.onSearchNewPatientByEmail} 106 + '🤔검색 결과가 없습니다.'
99 - > 107 + }
100 - <styled.NewPatientSearchButtonImg src = {lensImg}/> 108 + </styled.NewPatientSearchResultWrapper>
101 - </styled.NewPatientSearchButton> 109 + <styled.NewPatientRegisterButtonWrapper>
102 - </styled.NewPatientSearchWrapper> 110 + <styled.NewPatientRegisterButton
103 - <styled.NewPatientSearchResultWrapper> 111 + onClick = {props.onRegisterNewPatient}
104 - { 112 + >
105 - props.newPatientSearchResult ? 113 + 확인
106 - <styled.NewPatientSearchResult> 114 + </styled.NewPatientRegisterButton>
107 - <styled.NewPatientSearchResultInfoWrapper> 115 + <styled.NewPatientRegisterButton
108 - <styled.NewPatientSearchResultInfo>이름 : </styled.NewPatientSearchResultInfo> 116 + onClick = {props.onCloseModal}
109 - <styled.NewPatientSearchResultInfoText> 117 + >
110 - {props.newPatientSearchResult.patientNm} 118 + 취소
111 - </styled.NewPatientSearchResultInfoText> 119 + </styled.NewPatientRegisterButton>
112 - </styled.NewPatientSearchResultInfoWrapper> 120 + </styled.NewPatientRegisterButtonWrapper>
113 - </styled.NewPatientSearchResult> : 121 + </>
114 - '🤔검색 결과가 없습니다.' 122 + </Modal> : null
115 - }
116 - </styled.NewPatientSearchResultWrapper>
117 - <styled.NewPatientRegisterButtonWrapper>
118 - <styled.NewPatientRegisterButton
119 - onClick = {props.onRegisterNewPatient}
120 - >
121 - 확인
122 - </styled.NewPatientRegisterButton>
123 - <styled.NewPatientRegisterButton
124 - onClick = {props.onCloseModal}
125 - >
126 - 취소
127 - </styled.NewPatientRegisterButton>
128 - </styled.NewPatientRegisterButtonWrapper>
129 - </styled.ModalContent>
130 - </styled.ModalContentWrapper>
131 - <styled.ModalClsButtonWrapper/>
132 - </styled.ModalContainer> : null
133 } 123 }
134 { 124 {
135 props.editModal ? 125 props.editModal ?
136 - <styled.ModalContainer> 126 + <Modal onModalClose = {() => props.setEditModal(false)}>
137 - <styled.ModalClsButtonWrapper> 127 + <>
138 - <styled.ModalClsButton 128 + <styled.PatientInfoViewContainer>
139 - onClick = {() => props.setEditModal(false)} 129 + <styled.PatientInfoPatientNmWrapper>
130 + <styled.PatientInfoPatientNmInfo>이름 : </styled.PatientInfoPatientNmInfo>
131 + <styled.PatientInfoPatientNm>{props.info.userNm}</styled.PatientInfoPatientNm>
132 + </styled.PatientInfoPatientNmWrapper>
133 + <styled.PatientInfoView>
134 +
135 + {
136 + props.info.patientInfo.split('\n\n').map((patientInfoText : string) => {
137 + return (
138 + <div key = {patientInfoText}>
139 + {patientInfoText}<br/><br/>
140 + </div>
141 + )
142 + })
143 + }
144 + </styled.PatientInfoView>
145 + </styled.PatientInfoViewContainer>
146 + <styled.PatientInfoEditWrapper>
147 + <styled.PatientInfoEditInput
148 + value = {props.editPatientInfo}
149 + onChange = {props.onEditPatientInfo}
150 + />
151 + </styled.PatientInfoEditWrapper>
152 + <styled.PatientInfoEditButtonWrapper>
153 + <styled.PatientInfoEditButton
154 + onClick = {props.onSubmitPatientInfo}
140 > 155 >
141 - <styled.ModalClsButtonImg src = {closeButton}/> 156 + 확인
142 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText> 157 + </styled.PatientInfoEditButton>
143 - </styled.ModalClsButton> 158 + <styled.PatientInfoEditButton
144 - </styled.ModalClsButtonWrapper> 159 + onClick = {props.onCloseModal}
145 - <styled.ModalContentWrapper> 160 + >
146 - <styled.ModalContent> 161 + 취소
147 - <styled.PatientInfoViewContainer> 162 + </styled.PatientInfoEditButton>
148 - <styled.PatientInfoPatientNmWrapper> 163 + </styled.PatientInfoEditButtonWrapper>
149 - <styled.PatientInfoPatientNmInfo>이름 : </styled.PatientInfoPatientNmInfo> 164 + </>
150 - <styled.PatientInfoPatientNm>{props.info.userNm}</styled.PatientInfoPatientNm> 165 + </Modal> : null
151 - </styled.PatientInfoPatientNmWrapper>
152 - <styled.PatientInfoView>
153 -
154 - {
155 - props.info.patientInfo.split('\n\n').map((patientInfoText : string) => {
156 - return (
157 - <div key = {patientInfoText}>
158 - {patientInfoText}<br/><br/>
159 - </div>
160 - )
161 - })
162 - }
163 - </styled.PatientInfoView>
164 - </styled.PatientInfoViewContainer>
165 - <styled.PatientInfoEditWrapper>
166 - <styled.PatientInfoEditInput
167 - value = {props.editPatientInfo}
168 - onChange = {props.onEditPatientInfo}
169 - />
170 - </styled.PatientInfoEditWrapper>
171 - <styled.PatientInfoEditButtonWrapper>
172 - <styled.PatientInfoEditButton
173 - onClick = {props.onSubmitPatientInfo}
174 - >
175 - 확인
176 - </styled.PatientInfoEditButton>
177 - <styled.PatientInfoEditButton
178 - onClick = {props.onCloseModal}
179 - >
180 - 취소
181 - </styled.PatientInfoEditButton>
182 - </styled.PatientInfoEditButtonWrapper>
183 - </styled.ModalContent>
184 - </styled.ModalContentWrapper>
185 - <styled.ModalClsButtonWrapper/>
186 - </styled.ModalContainer> : null
187 } 166 }
188 { 167 {
189 props.prescribeModal ? 168 props.prescribeModal ?
190 - <styled.ModalContainer> 169 + <Modal onModalClose = {props.onCloseModal}>
191 - <styled.ModalClsButtonWrapper> 170 + <>
192 - <styled.ModalClsButton 171 + <styled.MedicineSearchTitle>
193 - onClick = {props.onCloseModal} 172 + {
173 + props.prescribeModalStep === 1 ?
174 + '약 검색' :
175 + props.prescribeModalStep === 2 ?
176 + '복용량 입력' :
177 + '처방 정보 QR코드'
178 + }
179 + </styled.MedicineSearchTitle>
180 + {
181 + props.prescribeModalStep === 1 ?
182 + <>
183 + <styled.MedicineSearchInputWrapper>
184 + <styled.MedicineSearchInput
185 + placeholder = '증상, 또는 약 이름을 검색하세요.'
186 + onChange = {props.onSetSearchMedicineKeyword}
187 + value = {props.searchMedicineKeyword}
188 + />
189 + <styled.MedicineSearchButton
190 + onClick = {props.searchMedicine}
191 + >
192 + <styled.MedicineSearchButtonImg src = {lensImg}/>
193 + </styled.MedicineSearchButton>
194 + </styled.MedicineSearchInputWrapper>
195 + <styled.MedicineSearchResultWrapper>
196 + {
197 + props.medicineList.length ?
198 + props.medicineList.map((medicine : any) => {
199 + return (
200 + <styled.MedicineSearchResultEach
201 + key = {medicine.medicineId}
202 + onClick = {() => props.setPrescribeMedicine(
203 + props.prescribeMedicine && props.prescribeMedicine.medicineId === medicine.medicineId ?
204 + null : medicine
205 + )}
206 + >
207 + <styled.MedicineSearchResultEachInfo>
208 + {medicine.name}
209 + </styled.MedicineSearchResultEachInfo>
210 + <styled.MedicineSearchButtonImg
211 + src = {
212 + props.prescribeMedicine && props.prescribeMedicine.medicineId === medicine.medicineId ?
213 + check : uncheck
214 + }
215 + />
216 + </styled.MedicineSearchResultEach>
217 + )
218 + }) :
219 + <styled.NothingWrapper style = {{fontSize : 13,}}>
220 + 🤔검색 결과가 없습니다.
221 + </styled.NothingWrapper>
222 + }
223 + </styled.MedicineSearchResultWrapper>
224 + </>
225 + :
226 + props.prescribeModalStep === 2 ?
227 + <styled.MedicineDosageSetWrapper>
228 + <styled.MedicineDosageInfo>
229 + *하루 복용량을 입력하세요.
230 + </styled.MedicineDosageInfo>
231 + <styled.MedicineDosageInput
232 + value = {props.dosage}
233 + onChange = {props.onSetDosage}
234 + />
235 + </styled.MedicineDosageSetWrapper>
236 + :
237 + <styled.MedicineQRCodeWrapper
238 + id = 'qrCodePrint'
194 > 239 >
195 - <styled.ModalClsButtonImg src = {closeButton}/> 240 + <styled.MedicineQRCodeInfo>
196 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText> 241 + *어플리케이션에서 QR코드를 스캔하면 약병에 약이 등록됩니다.
197 - </styled.ModalClsButton> 242 + </styled.MedicineQRCodeInfo>
198 - </styled.ModalClsButtonWrapper>
199 - <styled.ModalContentWrapper>
200 - <styled.ModalContent>
201 - <styled.MedicineSearchTitle>
202 { 243 {
203 - props.prescribeModalStep === 1 ? 244 + props.qrcodeUrl ?
204 - '약 검색' : 245 + <styled.MedicineQRCode src = {props.qrcodeUrl}/> : null
205 - props.prescribeModalStep === 2 ?
206 - '복용량 입력' :
207 - '처방 정보 QR코드'
208 } 246 }
209 - </styled.MedicineSearchTitle> 247 + </styled.MedicineQRCodeWrapper>
210 - { 248 + }
211 - props.prescribeModalStep === 1 ? 249 + <styled.MedicinePrescribeButtonWrapper>
212 - <> 250 + {
213 - <styled.MedicineSearchInputWrapper> 251 + props.prescribeModalStep === 1 ?
214 - <styled.MedicineSearchInput 252 + <styled.MedicinePrescribeButton
215 - placeholder = '증상, 또는 약 이름을 검색하세요.' 253 + isClose = {false}
216 - onChange = {props.onSetSearchMedicineKeyword} 254 + onClick = {props.onSetNextStepPrescribe}
217 - value = {props.searchMedicineKeyword} 255 + >
218 - /> 256 + 다음 단계
219 - <styled.MedicineSearchButton 257 + </styled.MedicinePrescribeButton> :
220 - onClick = {props.searchMedicine} 258 + props.prescribeModalStep === 2 ?
221 - > 259 + <styled.MedicinePrescribeButton
222 - <styled.MedicineSearchButtonImg src = {lensImg}/> 260 + isClose = {false}
223 - </styled.MedicineSearchButton> 261 + onClick = {props.onPrescribeSubmit}
224 - </styled.MedicineSearchInputWrapper> 262 + >
225 - <styled.MedicineSearchResultWrapper> 263 + 처방
226 - { 264 + </styled.MedicinePrescribeButton>
227 - props.medicineList.length ? 265 + :
228 - props.medicineList.map((medicine : any) => { 266 + <styled.MedicinePrescribeButton
229 - return ( 267 + isClose = {false}
230 - <styled.MedicineSearchResultEach 268 + onClick = {() => props.onPrintQrcode('qrCodePrint')}
231 - key = {medicine.medicineId} 269 + >
232 - onClick = {() => props.setPrescribeMedicine( 270 + 출력
233 - props.prescribeMedicine && props.prescribeMedicine.medicineId === medicine.medicineId ? 271 + </styled.MedicinePrescribeButton>
234 - null : medicine 272 + }
235 - )} 273 + <styled.MedicinePrescribeButton
236 - > 274 + isClose = {true}
237 - <styled.MedicineSearchResultEachInfo> 275 + onClick = {props.onPrescribeCancel}
238 - {medicine.name} 276 + >
239 - </styled.MedicineSearchResultEachInfo> 277 + 취소
240 - <styled.MedicineSearchButtonImg 278 + </styled.MedicinePrescribeButton>
241 - src = { 279 + </styled.MedicinePrescribeButtonWrapper>
242 - props.prescribeMedicine && props.prescribeMedicine.medicineId === medicine.medicineId ? 280 + </>
243 - check : uncheck 281 + </Modal> : null
244 - }
245 - />
246 - </styled.MedicineSearchResultEach>
247 - )
248 - }) :
249 - <styled.NothingWrapper style = {{fontSize : 13,}}>
250 - 🤔검색 결과가 없습니다.
251 - </styled.NothingWrapper>
252 - }
253 - </styled.MedicineSearchResultWrapper>
254 - </>
255 - :
256 - props.prescribeModalStep === 2 ?
257 - <styled.MedicineDosageSetWrapper>
258 - <styled.MedicineDosageInfo>
259 - *하루 복용량을 입력하세요.
260 - </styled.MedicineDosageInfo>
261 - <styled.MedicineDosageInput
262 - value = {props.dosage}
263 - onChange = {props.onSetDosage}
264 - />
265 - </styled.MedicineDosageSetWrapper>
266 - :
267 - <styled.MedicineQRCodeWrapper
268 - id = 'qrCodePrint'
269 - >
270 - <styled.MedicineQRCodeInfo>
271 - *어플리케이션에서 QR코드를 스캔하면 약병에 약이 등록됩니다.
272 - </styled.MedicineQRCodeInfo>
273 - {
274 - props.qrcodeUrl ?
275 - <styled.MedicineQRCode src = {props.qrcodeUrl}/> : null
276 - }
277 - </styled.MedicineQRCodeWrapper>
278 - }
279 - <styled.MedicinePrescribeButtonWrapper>
280 - {
281 - props.prescribeModalStep === 1 ?
282 - <styled.MedicinePrescribeButton
283 - isClose = {false}
284 - onClick = {props.onSetNextStepPrescribe}
285 - >
286 - 다음 단계
287 - </styled.MedicinePrescribeButton> :
288 - props.prescribeModalStep === 2 ?
289 - <styled.MedicinePrescribeButton
290 - isClose = {false}
291 - onClick = {props.onPrescribeSubmit}
292 - >
293 - 처방
294 - </styled.MedicinePrescribeButton>
295 - :
296 - <styled.MedicinePrescribeButton
297 - isClose = {false}
298 - onClick = {() => props.onPrintQrcode('qrCodePrint')}
299 - >
300 - 출력
301 - </styled.MedicinePrescribeButton>
302 - }
303 - <styled.MedicinePrescribeButton
304 - isClose = {true}
305 - onClick = {props.onPrescribeCancel}
306 - >
307 - 취소
308 - </styled.MedicinePrescribeButton>
309 - </styled.MedicinePrescribeButtonWrapper>
310 - </styled.ModalContent>
311 - </styled.ModalContentWrapper>
312 - <styled.ModalClsButtonWrapper/>
313 - </styled.ModalContainer> : null
314 } 282 }
315 <styled.InfoAndSearchWrapper> 283 <styled.InfoAndSearchWrapper>
316 <styled.InfoWrapper> 284 <styled.InfoWrapper>
......
1 -import styled, { keyframes } from 'styled-components'; 1 +import styled from 'styled-components';
2 -
3 -
4 -const ModalOn = keyframes `
5 - 0% {
6 - background-color : rgba(52, 52, 52, .0);
7 - }
8 - 20% {
9 - background-color : rgba(52, 52, 52, .2);
10 - }
11 - 40% {
12 - background-color : rgba(52, 52, 52, .4);
13 - }
14 - 60% {
15 - background-color : rgba(52, 52, 52, .5);
16 - }
17 - 80% {
18 - background-color : rgba(52, 52, 52, .6);
19 - }
20 - 100% {
21 - background-color : rgba(52, 52, 52, .7);
22 - }
23 -
24 -`;
25 2
26 3
27 export const Container = styled.div ` 4 export const Container = styled.div `
...@@ -32,93 +9,6 @@ export const Container = styled.div ` ...@@ -32,93 +9,6 @@ export const Container = styled.div `
32 justify-content : center; 9 justify-content : center;
33 `; 10 `;
34 11
35 -export const ModalContainer = styled.div `
36 - height : 100%;
37 - width : 100%;
38 - z-index : 99;
39 - position : absolute;
40 -
41 - display : flex;
42 - flex-direction : column;
43 -
44 - animation : ${ModalOn} .5s;
45 -
46 - background-color : rgba(52, 52, 52, .7);
47 -
48 -`;
49 -
50 -export const ModalClsButtonWrapper = styled.div `
51 - flex : 1;
52 -
53 - display : flex;
54 -
55 - justify-content : flex-end;
56 - align-items : center;
57 - padding : 0 20px;
58 -
59 - border : none;
60 - background-color : transprent;
61 -`;
62 -
63 -export const ModalClsButton = styled.button `
64 - border : none;
65 - background-color : transparent;
66 -
67 - cursor : pointer;
68 -
69 - color : #fff;
70 -
71 - display : flex;
72 - flex-direction : row;
73 -
74 - justify-content : center;
75 - align-items : center;
76 -
77 - transition : .25s all;
78 - &:hover {
79 - opacity : .5;
80 - }
81 -`;
82 -
83 -export const ModalClsButtonImg = styled.img `
84 - height : 20px;
85 - width : 20px;
86 -
87 - margin : 0 10px 0 0;
88 -`;
89 -
90 -export const ModalClsButtonText = styled.div `
91 - font-size : 18px;
92 - font-weight : 700;
93 -`;
94 -
95 -export const ModalContentWrapper = styled.div `
96 - flex : 8;
97 -
98 - display : flex;
99 - flex-direction : column;
100 -
101 - justify-content : center;
102 - align-items : center;
103 -
104 - border : none;
105 -`;
106 -
107 -export const ModalContent = styled.div `
108 - width : 600px;
109 - height : 400px;
110 -
111 - background-color : #fff;
112 - border : 1.2px solid #337DFF;
113 - border-radius : 5px;
114 -
115 - display : flex;
116 - flex-direction : column;
117 -
118 - justify-content : center;
119 - align-items : center;
120 -`;
121 -
122 export const NewPatientRegisterTitle = styled.div ` 12 export const NewPatientRegisterTitle = styled.div `
123 font-size : 20px; 13 font-size : 20px;
124 font-weight : 700; 14 font-weight : 700;
......
1 import React from 'react'; 1 import React from 'react';
2 2
3 +import Modal from '../../../components/Modal';
3 import * as styled from './ManagerMenuStyled'; 4 import * as styled from './ManagerMenuStyled';
4 5
5 -const closeButton = '/static/img/close.png';
6 -
7 -
8 6
9 interface ManagerMenuProps { 7 interface ManagerMenuProps {
10 doctorRegReqList : any[]; 8 doctorRegReqList : any[];
...@@ -26,84 +24,73 @@ const ManagerMenuPresenter = (props : ManagerMenuProps) => { ...@@ -26,84 +24,73 @@ const ManagerMenuPresenter = (props : ManagerMenuProps) => {
26 <styled.Container> 24 <styled.Container>
27 { 25 {
28 props.modalUp ? 26 props.modalUp ?
29 - <styled.ModalContainer> 27 + <Modal onModalClose = {() => props.setModalUp(false)}>
30 - <styled.ModalClsButtonWrapper> 28 + <>
31 - <styled.ModalClsButton 29 + <styled.ModalTitleWrapper>
32 - onClick = {() => props.setModalUp(false)} 30 + <styled.ModalTitle>가입 요청 정보</styled.ModalTitle>
31 + </styled.ModalTitleWrapper>
32 + <styled.ModalBodyWrapper>
33 + <styled.ModalBodyLeftAndRight>
34 + <styled.ModalInfoWrapper>
35 + <styled.ModalInfoExplain>의사 자격 번호</styled.ModalInfoExplain>
36 + <styled.ModalInfo>
37 + {props.doctorDetail.info.doctorLicense}
38 + <styled.ValidateButton
39 + onClick = {props.onValidate}
40 + disabled = {props.validate !== 'W'}
41 + validate = {props.validate}
42 + >
43 + {
44 + props.validate === 'Y' ?
45 + '검증 완료' :
46 + props.validate === 'W' ?
47 + '검증' :
48 + props.validate === 'N' ?
49 + '검증 실패' : null
50 + }
51 + </styled.ValidateButton>
52 + </styled.ModalInfo>
53 + </styled.ModalInfoWrapper>
54 + <styled.ModalInfoWrapper>
55 + <styled.ModalInfoExplain>이름</styled.ModalInfoExplain>
56 + <styled.ModalInfo>{props.doctorDetail.info.doctorNm}</styled.ModalInfo>
57 + </styled.ModalInfoWrapper>
58 + <styled.ModalInfoWrapper>
59 + <styled.ModalInfoExplain>연락처</styled.ModalInfoExplain>
60 + <styled.ModalInfo>{props.doctorDetail.info.contact}</styled.ModalInfo>
61 + </styled.ModalInfoWrapper>
62 + </styled.ModalBodyLeftAndRight>
63 + <styled.ModalBodyLeftAndRight>
64 + <styled.ModalInfoWrapper>
65 + <styled.ModalInfoExplain>전문 분야</styled.ModalInfoExplain>
66 + <styled.ModalInfo>{props.doctorDetail.info.doctorType}</styled.ModalInfo>
67 + </styled.ModalInfoWrapper>
68 + <styled.ModalInfoWrapper>
69 + <styled.ModalInfoExplain>병원명</styled.ModalInfoExplain>
70 + <styled.ModalInfo>{props.doctorDetail.info.hospitalNm}</styled.ModalInfo>
71 + </styled.ModalInfoWrapper>
72 + <styled.ModalInfoWrapper>
73 + <styled.ModalInfoExplain>병원 주소</styled.ModalInfoExplain>
74 + <styled.ModalInfo>{props.doctorDetail.info.hospitalAddr}</styled.ModalInfo>
75 + </styled.ModalInfoWrapper>
76 + </styled.ModalBodyLeftAndRight>
77 + </styled.ModalBodyWrapper>
78 + <styled.ModalButtonWrapper>
79 + <styled.ModalButton
80 + onClick = {props.onAcceptRequest}
81 + isAccept = {true}
33 > 82 >
34 - <styled.ModalClsButtonImg src = {closeButton}/> 83 + 수락
35 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText> 84 + </styled.ModalButton>
36 - </styled.ModalClsButton> 85 + <styled.ModalButton
37 - </styled.ModalClsButtonWrapper> 86 + onClick = {props.onRejectRequest}
38 - <styled.ModalContentWrapper> 87 + isAccept = {false}
39 - <styled.ModalContent> 88 + >
40 - <styled.ModalTitleWrapper> 89 + 거절
41 - <styled.ModalTitle>가입 요청 정보</styled.ModalTitle> 90 + </styled.ModalButton>
42 - </styled.ModalTitleWrapper> 91 + </styled.ModalButtonWrapper>
43 - <styled.ModalBodyWrapper> 92 + </>
44 - <styled.ModalBodyLeftAndRight> 93 + </Modal> : null
45 - <styled.ModalInfoWrapper>
46 - <styled.ModalInfoExplain>의사 자격 번호</styled.ModalInfoExplain>
47 - <styled.ModalInfo>
48 - {props.doctorDetail.info.doctorLicense}
49 - <styled.ValidateButton
50 - onClick = {props.onValidate}
51 - disabled = {props.validate !== 'W'}
52 - validate = {props.validate}
53 - >
54 - {
55 - props.validate === 'Y' ?
56 - '검증 완료' :
57 - props.validate === 'W' ?
58 - '검증' :
59 - props.validate === 'N' ?
60 - '검증 실패' : null
61 - }
62 - </styled.ValidateButton>
63 - </styled.ModalInfo>
64 - </styled.ModalInfoWrapper>
65 - <styled.ModalInfoWrapper>
66 - <styled.ModalInfoExplain>이름</styled.ModalInfoExplain>
67 - <styled.ModalInfo>{props.doctorDetail.info.doctorNm}</styled.ModalInfo>
68 - </styled.ModalInfoWrapper>
69 - <styled.ModalInfoWrapper>
70 - <styled.ModalInfoExplain>연락처</styled.ModalInfoExplain>
71 - <styled.ModalInfo>{props.doctorDetail.info.contact}</styled.ModalInfo>
72 - </styled.ModalInfoWrapper>
73 - </styled.ModalBodyLeftAndRight>
74 - <styled.ModalBodyLeftAndRight>
75 - <styled.ModalInfoWrapper>
76 - <styled.ModalInfoExplain>전문 분야</styled.ModalInfoExplain>
77 - <styled.ModalInfo>{props.doctorDetail.info.doctorType}</styled.ModalInfo>
78 - </styled.ModalInfoWrapper>
79 - <styled.ModalInfoWrapper>
80 - <styled.ModalInfoExplain>병원명</styled.ModalInfoExplain>
81 - <styled.ModalInfo>{props.doctorDetail.info.hospitalNm}</styled.ModalInfo>
82 - </styled.ModalInfoWrapper>
83 - <styled.ModalInfoWrapper>
84 - <styled.ModalInfoExplain>병원 주소</styled.ModalInfoExplain>
85 - <styled.ModalInfo>{props.doctorDetail.info.hospitalAddr}</styled.ModalInfo>
86 - </styled.ModalInfoWrapper>
87 - </styled.ModalBodyLeftAndRight>
88 - </styled.ModalBodyWrapper>
89 - <styled.ModalButtonWrapper>
90 - <styled.ModalButton
91 - onClick = {props.onAcceptRequest}
92 - isAccept = {true}
93 - >
94 - 수락
95 - </styled.ModalButton>
96 - <styled.ModalButton
97 - onClick = {props.onRejectRequest}
98 - isAccept = {false}
99 - >
100 - 거절
101 - </styled.ModalButton>
102 - </styled.ModalButtonWrapper>
103 - </styled.ModalContent>
104 - </styled.ModalContentWrapper>
105 - <styled.ModalClsButtonWrapper/>
106 - </styled.ModalContainer> : null
107 } 94 }
108 <styled.ContentWrapper> 95 <styled.ContentWrapper>
109 <styled.ContentTitle> 96 <styled.ContentTitle>
......
1 -import styled, { keyframes } from 'styled-components'; 1 +import styled from 'styled-components';
2 2
3 3
4 -const ModalOn = keyframes `
5 - 0% {
6 - background-color : rgba(52, 52, 52, .0);
7 - }
8 - 20% {
9 - background-color : rgba(52, 52, 52, .2);
10 - }
11 - 40% {
12 - background-color : rgba(52, 52, 52, .4);
13 - }
14 - 60% {
15 - background-color : rgba(52, 52, 52, .5);
16 - }
17 - 80% {
18 - background-color : rgba(52, 52, 52, .6);
19 - }
20 - 100% {
21 - background-color : rgba(52, 52, 52, .7);
22 - }
23 -
24 -`;
25 -
26 export const Container = styled.div ` 4 export const Container = styled.div `
27 width : 100%; 5 width : 100%;
28 height : 80vh; 6 height : 80vh;
...@@ -33,92 +11,6 @@ export const Container = styled.div ` ...@@ -33,92 +11,6 @@ export const Container = styled.div `
33 `; 11 `;
34 12
35 13
36 -export const ModalContainer = styled.div `
37 - height : 100%;
38 - width : 100%;
39 - z-index : 99;
40 - position : absolute;
41 -
42 - display : flex;
43 - flex-direction : column;
44 -
45 - animation : ${ModalOn} .5s;
46 -
47 - background-color : rgba(52, 52, 52, .7);
48 -`;
49 -
50 -export const ModalClsButtonWrapper = styled.div `
51 - flex : 1;
52 -
53 - display : flex;
54 -
55 - justify-content : flex-end;
56 - align-items : center;
57 - padding : 0 20px;
58 -
59 - border : none;
60 - background-color : transprent;
61 -`;
62 -
63 -export const ModalClsButton = styled.button `
64 - border : none;
65 - background-color : transparent;
66 -
67 - cursor : pointer;
68 -
69 - color : #fff;
70 -
71 - display : flex;
72 - flex-direction : row;
73 -
74 - justify-content : center;
75 - align-items : center;
76 -
77 - transition : .25s all;
78 - &:hover {
79 - opacity : .5;
80 - }
81 -`;
82 -
83 -export const ModalClsButtonImg = styled.img `
84 - height : 20px;
85 - width : 20px;
86 -
87 - margin : 0 10px 0 0;
88 -`;
89 -
90 -export const ModalClsButtonText = styled.div `
91 - font-size : 18px;
92 - font-weight : 700;
93 -`;
94 -
95 -export const ModalContentWrapper = styled.div `
96 - flex : 8;
97 -
98 - display : flex;
99 - flex-direction : column;
100 -
101 - justify-content : center;
102 - align-items : center;
103 -
104 - border : none;
105 -`;
106 -
107 -export const ModalContent = styled.div `
108 - width : 700px;
109 - height : 500px;
110 -
111 - background-color : #fff;
112 - border : 1.2px solid #337DFF;
113 - border-radius : 5px;
114 -
115 - display : flex;
116 - flex-direction : column;
117 -
118 - // justify-content : center;
119 - align-items : center;
120 -`;
121 -
122 export const ModalTitleWrapper = styled.div ` 14 export const ModalTitleWrapper = styled.div `
123 flex : 1; 15 flex : 1;
124 border : none; 16 border : none;
......
...@@ -67,7 +67,6 @@ const RegisterContainer = (props : RegisterProps) => { ...@@ -67,7 +67,6 @@ const RegisterContainer = (props : RegisterProps) => {
67 } 67 }
68 }; 68 };
69 69
70 -
71 const validateRegisterForm = () => { 70 const validateRegisterForm = () => {
72 if(page === 1) { 71 if(page === 1) {
73 if (!validator.isEmail(registerForm.userId)) { 72 if (!validator.isEmail(registerForm.userId)) {
...@@ -196,8 +195,15 @@ const RegisterContainer = (props : RegisterProps) => { ...@@ -196,8 +195,15 @@ const RegisterContainer = (props : RegisterProps) => {
196 setHospitalSearchPage(Math.ceil(hospitalSearchPage / pageSlice) * pageSlice + 1); 195 setHospitalSearchPage(Math.ceil(hospitalSearchPage / pageSlice) * pageSlice + 1);
197 } 196 }
198 }; 197 };
198 +
199 + const onConfirmSelectHospital = () => {
200 + setSearchHospital(false);
201 + setHospitalSearchPage(1);
202 + setHospitalSearchPageList([1]);
203 + setHospitalList([]);
204 + };
199 205
200 - const onCancelSearchHospital = () => { 206 + const onCancelSelectHospital = () => {
201 Alert.onCheck('병원 등록이 취소됩니다. 계속하시겠습니까?', () => { 207 Alert.onCheck('병원 등록이 취소됩니다. 계속하시겠습니까?', () => {
202 setSearchHospital(false); 208 setSearchHospital(false);
203 setHospitalNm(''); 209 setHospitalNm('');
...@@ -296,7 +302,6 @@ const RegisterContainer = (props : RegisterProps) => { ...@@ -296,7 +302,6 @@ const RegisterContainer = (props : RegisterProps) => {
296 onSetPasswordCheck = {onSetPasswordCheck} 302 onSetPasswordCheck = {onSetPasswordCheck}
297 onSetDoctorLicense = {onSetDoctorLicense} 303 onSetDoctorLicense = {onSetDoctorLicense}
298 hospitalNm = {hospitalNm} 304 hospitalNm = {hospitalNm}
299 - setHospitalNm = {setHospitalNm}
300 onSetHospitalNm = {onSetHospitalNm} 305 onSetHospitalNm = {onSetHospitalNm}
301 onSetContact = {onSetContact} 306 onSetContact = {onSetContact}
302 onSetDoctorType = {onSetDoctorType} 307 onSetDoctorType = {onSetDoctorType}
...@@ -311,7 +316,9 @@ const RegisterContainer = (props : RegisterProps) => { ...@@ -311,7 +316,9 @@ const RegisterContainer = (props : RegisterProps) => {
311 hospitalSearchPageList = {hospitalSearchPageList} 316 hospitalSearchPageList = {hospitalSearchPageList}
312 onSetSearchPrevPage = {onSetSearchPrevPage} 317 onSetSearchPrevPage = {onSetSearchPrevPage}
313 onSetSearchNextPage = {onSetSearchNextPage} 318 onSetSearchNextPage = {onSetSearchNextPage}
314 - onCancelSearchHospital = {onCancelSearchHospital} 319 +
320 + onConfirmSelectHospital = {onConfirmSelectHospital}
321 + onCancelSelectHospital = {onCancelSelectHospital}
315 322
316 hospitalList = {hospitalList} 323 hospitalList = {hospitalList}
317 selectHospital = {selectHospital} 324 selectHospital = {selectHospital}
......
1 import React from 'react'; 1 import React from 'react';
2 2
3 +import Modal from '../../components/Modal';
3 import * as styled from './RegisterStyled'; 4 import * as styled from './RegisterStyled';
4 5
5 6
6 const lensImg = '/static/img/lens.png'; 7 const lensImg = '/static/img/lens.png';
7 -const closeButton = '/static/img/close.png';
8 const check = '/static/img/check.png'; 8 const check = '/static/img/check.png';
9 const uncheck = '/static/img/uncheck.png' 9 const uncheck = '/static/img/uncheck.png'
10 +const next = '/static/img/next.png';
11 +const prev = '/static/img/prev.png';
10 12
11 interface RegisterProps { 13 interface RegisterProps {
12 registerForm : { 14 registerForm : {
...@@ -33,9 +35,7 @@ interface RegisterProps { ...@@ -33,9 +35,7 @@ interface RegisterProps {
33 onSetPasswordCheck : React.ChangeEventHandler<HTMLInputElement>; 35 onSetPasswordCheck : React.ChangeEventHandler<HTMLInputElement>;
34 onSetDoctorLicense : React.ChangeEventHandler<HTMLInputElement>; 36 onSetDoctorLicense : React.ChangeEventHandler<HTMLInputElement>;
35 hospitalNm : string; 37 hospitalNm : string;
36 - setHospitalNm : (arg0 : string) => void;
37 onSetHospitalNm : React.ChangeEventHandler<HTMLInputElement>; 38 onSetHospitalNm : React.ChangeEventHandler<HTMLInputElement>;
38 - // onSetHospitalAddr : React.ChangeEventHandler<HTMLInputElement>;
39 onSetContact : React.ChangeEventHandler<HTMLInputElement>; 39 onSetContact : React.ChangeEventHandler<HTMLInputElement>;
40 onSetDoctorType : React.ChangeEventHandler<HTMLInputElement>; 40 onSetDoctorType : React.ChangeEventHandler<HTMLInputElement>;
41 onSetDoctorNm : React.ChangeEventHandler<HTMLInputElement>; 41 onSetDoctorNm : React.ChangeEventHandler<HTMLInputElement>;
...@@ -50,7 +50,9 @@ interface RegisterProps { ...@@ -50,7 +50,9 @@ interface RegisterProps {
50 hospitalSearchPageList : number[]; 50 hospitalSearchPageList : number[];
51 onSetSearchPrevPage : () => void; 51 onSetSearchPrevPage : () => void;
52 onSetSearchNextPage : () => void; 52 onSetSearchNextPage : () => void;
53 - onCancelSearchHospital : () => void; 53 +
54 + onConfirmSelectHospital : () => void;
55 + onCancelSelectHospital : () => void;
54 56
55 hospitalList : any[]; 57 hospitalList : any[];
56 selectHospital : any; 58 selectHospital : any;
...@@ -62,99 +64,91 @@ const RegisterPresenter = (props : RegisterProps) => { ...@@ -62,99 +64,91 @@ const RegisterPresenter = (props : RegisterProps) => {
62 <styled.Container> 64 <styled.Container>
63 { 65 {
64 props.searchHospital ? 66 props.searchHospital ?
65 - <styled.ModalContainer> 67 + <Modal onModalClose = {props.onCancelSelectHospital}>
66 - <styled.ModalClsButtonWrapper> 68 + <>
67 - <styled.ModalClsButton 69 + <styled.SearchTitle>
68 - onClick = {props.onCancelSearchHospital} 70 + {`[${props.hospitalNm}] 에 대한 검색 결과 : `}
69 - > 71 + <styled.SearchResultCount style = {{marginLeft : 5, marginRight : 5,}}>총 </styled.SearchResultCount>
70 - <styled.ModalClsButtonImg src = {closeButton}/> 72 + {props.hospitalSearchPageList.length}
71 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText> 73 + <styled.SearchResultCount>페이지</styled.SearchResultCount>
72 - </styled.ModalClsButton> 74 + </styled.SearchTitle>
73 - </styled.ModalClsButtonWrapper> 75 + <styled.HospitalListWrapper>
74 - <styled.ModalContentWrapper> 76 + <styled.HospitalListInfo>
75 - <styled.ModalContent> 77 + <styled.HospitalListInfoEach isLast = {false}>이름</styled.HospitalListInfoEach>
76 - <styled.SearchTitle> 78 + <styled.HospitalListInfoEach isLast = {false}>주소</styled.HospitalListInfoEach>
77 - {`"${props.hospitalNm}"에 대한 검색 결과`} 79 + <styled.HospitalListInfoEach isLast = {true}>선택</styled.HospitalListInfoEach>
78 - </styled.SearchTitle> 80 + </styled.HospitalListInfo>
79 - <styled.HospitalListWrapper> 81 + {
80 - <styled.HospitalListInfo> 82 + props.hospitalList.map((hospital : any) => {
81 - <styled.HospitalListInfoEach isLast = {false}>이름</styled.HospitalListInfoEach> 83 + return (
82 - <styled.HospitalListInfoEach isLast = {false}>주소</styled.HospitalListInfoEach> 84 + <styled.HospitalListEach
83 - <styled.HospitalListInfoEach isLast = {true}>선택</styled.HospitalListInfoEach> 85 + key = {hospital.addr}
84 - </styled.HospitalListInfo> 86 + >
85 - { 87 + <styled.HospitalListEachInfo isLast = {false}>
86 - props.hospitalList.map((hospital : any) => { 88 + {hospital.yadmNm}
87 - return ( 89 + </styled.HospitalListEachInfo>
88 - <styled.HospitalListEach 90 + <styled.HospitalListEachInfo isLast = {false}>
89 - key = {hospital.addr} 91 + {hospital.addr}
90 - > 92 + </styled.HospitalListEachInfo>
91 - <styled.HospitalListEachInfo isLast = {false}> 93 + <styled.HospitalListEachInfo isLast = {true}>
92 - {hospital.yadmNm} 94 + <styled.CheckButton
93 - </styled.HospitalListEachInfo> 95 + onClick = {() => props.setSelectHospital(hospital)}
94 - <styled.HospitalListEachInfo isLast = {false}>
95 - {hospital.addr}
96 - </styled.HospitalListEachInfo>
97 - <styled.HospitalListEachInfo isLast = {true}>
98 - <styled.CheckButton
99 - onClick = {() => props.setSelectHospital(hospital)}
100 - >
101 - <styled.CheckButtonImg src = {
102 - props.selectHospital && props.selectHospital.addr === hospital.addr ?
103 - check : uncheck
104 - }/>
105 - </styled.CheckButton>
106 - </styled.HospitalListEachInfo>
107 - </styled.HospitalListEach>
108 - )
109 - })
110 - }
111 - </styled.HospitalListWrapper>
112 - <styled.PageWrapper>
113 - <styled.PageButton
114 - isSelect = {false}
115 - onClick = {props.onSetSearchPrevPage}
116 - >
117 - prev
118 - </styled.PageButton>
119 - {
120 - props.hospitalSearchPageList.slice(Math.floor((props.hospitalSearchPage - 1) / 5) * 5, Math.floor((props.hospitalSearchPage - 1) / 5) * 5 + 5)
121 - .map((page : number) => {
122 - return (
123 - <styled.PageButton
124 - key = {page}
125 - isSelect = {props.hospitalSearchPage === page}
126 - onClick = {() => props.setHospitalSearchPage(page)}
127 > 96 >
128 - {page} 97 + <styled.CheckButtonImg src = {
129 - </styled.PageButton> 98 + props.selectHospital && props.selectHospital.addr === hospital.addr ?
130 - ) 99 + check : uncheck
131 - }) 100 + }/>
132 - } 101 + </styled.CheckButton>
133 - <styled.PageButton 102 + </styled.HospitalListEachInfo>
134 - isSelect = {false} 103 + </styled.HospitalListEach>
135 - onClick = {props.onSetSearchNextPage} 104 + )
136 - > 105 + })
137 - next 106 + }
138 - </styled.PageButton> 107 + </styled.HospitalListWrapper>
139 - </styled.PageWrapper> 108 + <styled.PageWrapper>
140 - <styled.ModalButtonWrapper> 109 + <styled.PageButton
141 - <styled.ModalButton 110 + isSelect = {false}
142 - isCloseButton = {false} 111 + onClick = {props.onSetSearchPrevPage}
143 - onClick = {() => props.setSearchHospital(false)} 112 + >
144 - > 113 + <styled.PageArrowImg src = {prev}/>
145 - 확인 114 + </styled.PageButton>
146 - </styled.ModalButton> 115 + {
147 - <styled.ModalButton 116 + props.hospitalSearchPageList.slice(Math.floor((props.hospitalSearchPage - 1) / 5) * 5, Math.floor((props.hospitalSearchPage - 1) / 5) * 5 + 5)
148 - isCloseButton = {true} 117 + .map((page : number) => {
149 - onClick = {props.onCancelSearchHospital} 118 + return (
150 - > 119 + <styled.PageButton
151 - 취소 120 + key = {page}
152 - </styled.ModalButton> 121 + isSelect = {props.hospitalSearchPage === page}
153 - </styled.ModalButtonWrapper> 122 + onClick = {() => props.setHospitalSearchPage(page)}
154 - </styled.ModalContent> 123 + >
155 - </styled.ModalContentWrapper> 124 + {page}
156 - <styled.ModalClsButtonWrapper /> 125 + </styled.PageButton>
157 - </styled.ModalContainer> 126 + )
127 + })
128 + }
129 + <styled.PageButton
130 + isSelect = {false}
131 + onClick = {props.onSetSearchNextPage}
132 + >
133 + <styled.PageArrowImg src = {next}/>
134 + </styled.PageButton>
135 + </styled.PageWrapper>
136 + <styled.ModalButtonWrapper>
137 + <styled.ModalButton
138 + isCloseButton = {false}
139 + onClick = {props.onConfirmSelectHospital}
140 + >
141 + 확인
142 + </styled.ModalButton>
143 + <styled.ModalButton
144 + isCloseButton = {true}
145 + onClick = {props.onCancelSelectHospital}
146 + >
147 + 취소
148 + </styled.ModalButton>
149 + </styled.ModalButtonWrapper>
150 + </>
151 + </Modal>
158 :null 152 :null
159 } 153 }
160 <styled.RegisterWrapper> 154 <styled.RegisterWrapper>
......
1 -import styled, { keyframes } from 'styled-components'; 1 +import styled from 'styled-components';
2 -
3 -
4 -const ModalOn = keyframes `
5 - 0% {
6 - background-color : rgba(52, 52, 52, .0);
7 - }
8 - 20% {
9 - background-color : rgba(52, 52, 52, .2);
10 - }
11 - 40% {
12 - background-color : rgba(52, 52, 52, .4);
13 - }
14 - 60% {
15 - background-color : rgba(52, 52, 52, .5);
16 - }
17 - 80% {
18 - background-color : rgba(52, 52, 52, .6);
19 - }
20 - 100% {
21 - background-color : rgba(52, 52, 52, .7);
22 - }
23 -
24 -`;
25 2
26 3
27 export const Container = styled.div ` 4 export const Container = styled.div `
...@@ -33,99 +10,22 @@ export const Container = styled.div ` ...@@ -33,99 +10,22 @@ export const Container = styled.div `
33 align-items : center; 10 align-items : center;
34 `; 11 `;
35 12
36 -export const ModalContainer = styled.div ` 13 +export const SearchTitle = styled.div `
37 - height : 100%; 14 + font-weight : 600;
38 - width : 100%; 15 + font-size : 20;
39 - z-index : 99;
40 - position : absolute;
41 -
42 - display : flex;
43 - flex-direction : column;
44 -
45 - animation : ${ModalOn} .5s;
46 -
47 - background-color : rgba(52, 52, 52, .7);
48 -
49 -`;
50 -
51 -export const ModalClsButtonWrapper = styled.div `
52 - flex : 1;
53 -
54 - display : flex;
55 -
56 - justify-content : flex-end;
57 - align-items : center;
58 - padding : 0 20px;
59 -
60 - border : none;
61 - background-color : transprent;
62 -`;
63 -
64 -export const ModalClsButton = styled.button `
65 - border : none;
66 - background-color : transparent;
67 -
68 - cursor : pointer;
69 16
70 - color : #fff; 17 + color : #337DFF;
71 18
72 display : flex; 19 display : flex;
73 flex-direction : row; 20 flex-direction : row;
74 21
75 - justify-content : center;
76 align-items : center; 22 align-items : center;
77 -
78 - transition : .25s all;
79 - &:hover {
80 - opacity : .5;
81 - }
82 -`;
83 -
84 -export const ModalClsButtonImg = styled.img `
85 - height : 20px;
86 - width : 20px;
87 -
88 - margin : 0 10px 0 0;
89 -`;
90 -
91 -export const ModalClsButtonText = styled.div `
92 - font-size : 18px;
93 - font-weight : 700;
94 -`;
95 -
96 -export const ModalContentWrapper = styled.div `
97 - flex : 8;
98 -
99 - display : flex;
100 - flex-direction : column;
101 -
102 justify-content : center; 23 justify-content : center;
103 - align-items : center;
104 24
105 - border : none;
106 `; 25 `;
107 26
108 -export const ModalContent = styled.div ` 27 +export const SearchResultCount = styled.div `
109 - width : 600px; 28 + color : #343434;
110 - height : 400px;
111 -
112 - background-color : #fff;
113 - border : 1.2px solid #337DFF;
114 - border-radius : 5px;
115 -
116 - display : flex;
117 - flex-direction : column;
118 -
119 - justify-content : center;
120 - align-items : center;
121 -`;
122 -
123 -export const SearchTitle = styled.div `
124 - font-weight : 600;
125 - font-size : 20;
126 -
127 - color : #337DFF;
128 -
129 `; 29 `;
130 30
131 export const HospitalListWrapper = styled.div ` 31 export const HospitalListWrapper = styled.div `
...@@ -135,6 +35,7 @@ export const HospitalListWrapper = styled.div ` ...@@ -135,6 +35,7 @@ export const HospitalListWrapper = styled.div `
135 width : 80%; 35 width : 80%;
136 36
137 border : 1px solid #337DFF; 37 border : 1px solid #337DFF;
38 + border-radius : 3px;
138 39
139 display : flex; 40 display : flex;
140 flex-direction : column; 41 flex-direction : column;
...@@ -142,11 +43,11 @@ export const HospitalListWrapper = styled.div ` ...@@ -142,11 +43,11 @@ export const HospitalListWrapper = styled.div `
142 43
143 export const HospitalListInfo = styled.div ` 44 export const HospitalListInfo = styled.div `
144 45
145 - height : 20px; 46 + height : 25px;
146 width : 100%; 47 width : 100%;
147 48
148 border : none; 49 border : none;
149 - border-bottom : 1px solid #ddd; 50 + border-bottom : 2px solid #ddd;
150 51
151 display : flex; 52 display : flex;
152 flex-direction : row; 53 flex-direction : row;
...@@ -171,8 +72,8 @@ export const HospitalListInfoEach = styled.div<{isLast : boolean}> ` ...@@ -171,8 +72,8 @@ export const HospitalListInfoEach = styled.div<{isLast : boolean}> `
171 `; 72 `;
172 73
173 export const HospitalListEach = styled.div ` 74 export const HospitalListEach = styled.div `
174 - min-height : 35px; 75 + min-height : 34px;
175 - max-height : 35px; 76 + max-height : 34px;
176 width : 100%; 77 width : 100%;
177 78
178 display : flex; 79 display : flex;
......