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 214 additions and 550 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,17 +32,8 @@ const BottleInfoPresenter = (props : BottleInfoProps) => { ...@@ -32,17 +32,8 @@ 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
38 - onClick = {() => props.setMedicineInfoModal(false)}
39 - >
40 - <styled.ModalClsButtonImg src = {closeButton}/>
41 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
42 - </styled.ModalClsButton>
43 - </styled.ModalClsButtonWrapper>
44 - <styled.ModalContentWrapper>
45 - <styled.ModalContent>
46 <styled.MedicineNameWrapper> 37 <styled.MedicineNameWrapper>
47 <styled.MedicineName>{props.bottleInfo.medicine.name}</styled.MedicineName> 38 <styled.MedicineName>{props.bottleInfo.medicine.name}</styled.MedicineName>
48 <styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{props.bottleInfo.medicine.company}</styled.MedicineName> 39 <styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{props.bottleInfo.medicine.company}</styled.MedicineName>
...@@ -65,9 +56,8 @@ const BottleInfoPresenter = (props : BottleInfoProps) => { ...@@ -65,9 +56,8 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
65 <styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.antiEffect}</styled.MedicineEachInfo> 56 <styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.antiEffect}</styled.MedicineEachInfo>
66 </styled.MedicineEachInfoWrapper> 57 </styled.MedicineEachInfoWrapper>
67 </styled.MedicineInfoWrapper> 58 </styled.MedicineInfoWrapper>
68 - </styled.ModalContent> 59 + </>
69 - </styled.ModalContentWrapper> 60 + </Modal> : null
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';
...@@ -76,17 +77,8 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => { ...@@ -76,17 +77,8 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
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 - onClick = {() => props.setNewPatientRegisterModal(false)}
83 - >
84 - <styled.ModalClsButtonImg src = {closeButton}/>
85 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
86 - </styled.ModalClsButton>
87 - </styled.ModalClsButtonWrapper>
88 - <styled.ModalContentWrapper>
89 - <styled.ModalContent>
90 <styled.NewPatientRegisterTitle>새 환자 등록</styled.NewPatientRegisterTitle> 82 <styled.NewPatientRegisterTitle>새 환자 등록</styled.NewPatientRegisterTitle>
91 <styled.NewPatientSearchWrapper> 83 <styled.NewPatientSearchWrapper>
92 <styled.NewPatientSearchInput 84 <styled.NewPatientSearchInput
...@@ -126,24 +118,13 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => { ...@@ -126,24 +118,13 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
126 취소 118 취소
127 </styled.NewPatientRegisterButton> 119 </styled.NewPatientRegisterButton>
128 </styled.NewPatientRegisterButtonWrapper> 120 </styled.NewPatientRegisterButtonWrapper>
129 - </styled.ModalContent> 121 + </>
130 - </styled.ModalContentWrapper> 122 + </Modal> : null
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
139 - onClick = {() => props.setEditModal(false)}
140 - >
141 - <styled.ModalClsButtonImg src = {closeButton}/>
142 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
143 - </styled.ModalClsButton>
144 - </styled.ModalClsButtonWrapper>
145 - <styled.ModalContentWrapper>
146 - <styled.ModalContent>
147 <styled.PatientInfoViewContainer> 128 <styled.PatientInfoViewContainer>
148 <styled.PatientInfoPatientNmWrapper> 129 <styled.PatientInfoPatientNmWrapper>
149 <styled.PatientInfoPatientNmInfo>이름 : </styled.PatientInfoPatientNmInfo> 130 <styled.PatientInfoPatientNmInfo>이름 : </styled.PatientInfoPatientNmInfo>
...@@ -180,24 +161,13 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => { ...@@ -180,24 +161,13 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
180 취소 161 취소
181 </styled.PatientInfoEditButton> 162 </styled.PatientInfoEditButton>
182 </styled.PatientInfoEditButtonWrapper> 163 </styled.PatientInfoEditButtonWrapper>
183 - </styled.ModalContent> 164 + </>
184 - </styled.ModalContentWrapper> 165 + </Modal> : null
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
193 - onClick = {props.onCloseModal}
194 - >
195 - <styled.ModalClsButtonImg src = {closeButton}/>
196 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
197 - </styled.ModalClsButton>
198 - </styled.ModalClsButtonWrapper>
199 - <styled.ModalContentWrapper>
200 - <styled.ModalContent>
201 <styled.MedicineSearchTitle> 171 <styled.MedicineSearchTitle>
202 { 172 {
203 props.prescribeModalStep === 1 ? 173 props.prescribeModalStep === 1 ?
...@@ -307,10 +277,8 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => { ...@@ -307,10 +277,8 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
307 취소 277 취소
308 </styled.MedicinePrescribeButton> 278 </styled.MedicinePrescribeButton>
309 </styled.MedicinePrescribeButtonWrapper> 279 </styled.MedicinePrescribeButtonWrapper>
310 - </styled.ModalContent> 280 + </>
311 - </styled.ModalContentWrapper> 281 + </Modal> : null
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,17 +24,8 @@ const ManagerMenuPresenter = (props : ManagerMenuProps) => { ...@@ -26,17 +24,8 @@ 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
32 - onClick = {() => props.setModalUp(false)}
33 - >
34 - <styled.ModalClsButtonImg src = {closeButton}/>
35 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
36 - </styled.ModalClsButton>
37 - </styled.ModalClsButtonWrapper>
38 - <styled.ModalContentWrapper>
39 - <styled.ModalContent>
40 <styled.ModalTitleWrapper> 29 <styled.ModalTitleWrapper>
41 <styled.ModalTitle>가입 요청 정보</styled.ModalTitle> 30 <styled.ModalTitle>가입 요청 정보</styled.ModalTitle>
42 </styled.ModalTitleWrapper> 31 </styled.ModalTitleWrapper>
...@@ -100,10 +89,8 @@ const ManagerMenuPresenter = (props : ManagerMenuProps) => { ...@@ -100,10 +89,8 @@ const ManagerMenuPresenter = (props : ManagerMenuProps) => {
100 거절 89 거절
101 </styled.ModalButton> 90 </styled.ModalButton>
102 </styled.ModalButtonWrapper> 91 </styled.ModalButtonWrapper>
103 - </styled.ModalContent> 92 + </>
104 - </styled.ModalContentWrapper> 93 + </Modal> : null
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)) {
...@@ -197,7 +196,14 @@ const RegisterContainer = (props : RegisterProps) => { ...@@ -197,7 +196,14 @@ const RegisterContainer = (props : RegisterProps) => {
197 } 196 }
198 }; 197 };
199 198
200 - const onCancelSearchHospital = () => { 199 + const onConfirmSelectHospital = () => {
200 + setSearchHospital(false);
201 + setHospitalSearchPage(1);
202 + setHospitalSearchPageList([1]);
203 + setHospitalList([]);
204 + };
205 +
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,19 +64,13 @@ const RegisterPresenter = (props : RegisterProps) => { ...@@ -62,19 +64,13 @@ 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
68 - onClick = {props.onCancelSearchHospital}
69 - >
70 - <styled.ModalClsButtonImg src = {closeButton}/>
71 - <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
72 - </styled.ModalClsButton>
73 - </styled.ModalClsButtonWrapper>
74 - <styled.ModalContentWrapper>
75 - <styled.ModalContent>
76 <styled.SearchTitle> 69 <styled.SearchTitle>
77 - {`"${props.hospitalNm}"에 대한 검색 결과`} 70 + {`[${props.hospitalNm}] 에 대한 검색 결과 : `}
71 + <styled.SearchResultCount style = {{marginLeft : 5, marginRight : 5,}}>총 </styled.SearchResultCount>
72 + {props.hospitalSearchPageList.length}
73 + <styled.SearchResultCount>페이지</styled.SearchResultCount>
78 </styled.SearchTitle> 74 </styled.SearchTitle>
79 <styled.HospitalListWrapper> 75 <styled.HospitalListWrapper>
80 <styled.HospitalListInfo> 76 <styled.HospitalListInfo>
...@@ -114,7 +110,7 @@ const RegisterPresenter = (props : RegisterProps) => { ...@@ -114,7 +110,7 @@ const RegisterPresenter = (props : RegisterProps) => {
114 isSelect = {false} 110 isSelect = {false}
115 onClick = {props.onSetSearchPrevPage} 111 onClick = {props.onSetSearchPrevPage}
116 > 112 >
117 - prev 113 + <styled.PageArrowImg src = {prev}/>
118 </styled.PageButton> 114 </styled.PageButton>
119 { 115 {
120 props.hospitalSearchPageList.slice(Math.floor((props.hospitalSearchPage - 1) / 5) * 5, Math.floor((props.hospitalSearchPage - 1) / 5) * 5 + 5) 116 props.hospitalSearchPageList.slice(Math.floor((props.hospitalSearchPage - 1) / 5) * 5, Math.floor((props.hospitalSearchPage - 1) / 5) * 5 + 5)
...@@ -134,27 +130,25 @@ const RegisterPresenter = (props : RegisterProps) => { ...@@ -134,27 +130,25 @@ const RegisterPresenter = (props : RegisterProps) => {
134 isSelect = {false} 130 isSelect = {false}
135 onClick = {props.onSetSearchNextPage} 131 onClick = {props.onSetSearchNextPage}
136 > 132 >
137 - next 133 + <styled.PageArrowImg src = {next}/>
138 </styled.PageButton> 134 </styled.PageButton>
139 </styled.PageWrapper> 135 </styled.PageWrapper>
140 <styled.ModalButtonWrapper> 136 <styled.ModalButtonWrapper>
141 <styled.ModalButton 137 <styled.ModalButton
142 isCloseButton = {false} 138 isCloseButton = {false}
143 - onClick = {() => props.setSearchHospital(false)} 139 + onClick = {props.onConfirmSelectHospital}
144 > 140 >
145 확인 141 확인
146 </styled.ModalButton> 142 </styled.ModalButton>
147 <styled.ModalButton 143 <styled.ModalButton
148 isCloseButton = {true} 144 isCloseButton = {true}
149 - onClick = {props.onCancelSearchHospital} 145 + onClick = {props.onCancelSelectHospital}
150 > 146 >
151 취소 147 취소
152 </styled.ModalButton> 148 </styled.ModalButton>
153 </styled.ModalButtonWrapper> 149 </styled.ModalButtonWrapper>
154 - </styled.ModalContent> 150 + </>
155 - </styled.ModalContentWrapper> 151 + </Modal>
156 - <styled.ModalClsButtonWrapper />
157 - </styled.ModalContainer>
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 -
105 - border : none;
106 -`;
107 -
108 -export const ModalContent = styled.div `
109 - width : 600px;
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 24
119 - justify-content : center;
120 - align-items : center;
121 `; 25 `;
122 26
123 -export const SearchTitle = styled.div ` 27 +export const SearchResultCount = styled.div `
124 - font-weight : 600; 28 + color : #343434;
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;
......