2021-1-capstone-design1 / RIT_Project1

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

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

Expand all
Inline Side-by-side
Showing 13 changed files with 266 additions and 564 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 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}
......
This diff is collapsed. Click to expand it.
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;
......