2021-1-capstone-design1 / RIT_Project1

Go to a project
Toggle navigation Toggle navigation pinning
박권수
a3d3c413 1 parent 5e91ab3c

feat. 매니저 상세정보 뷰 수정

Inline Side-by-side
Showing 3 changed files with 107 additions and 13 deletions
...@@ -38,7 +38,7 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => { ...@@ -38,7 +38,7 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => {
38 }).catch(err => { 38 }).catch(err => {
39 Alert.onError(err.response.data.error, () => null); 39 Alert.onError(err.response.data.error, () => null);
40 }) 40 })
41 - } catch(e) { 41 + } catch(e : any) {
42 Alert.onError(e.response.data.error, () => null); 42 Alert.onError(e.response.data.error, () => null);
43 } 43 }
44 }; 44 };
...@@ -55,11 +55,16 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => { ...@@ -55,11 +55,16 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => {
55 setModalUp(true); 55 setModalUp(true);
56 } 56 }
57 }) 57 })
58 - } catch(e) { 58 + } catch(e : any) {
59 Alert.onError(e.response.data.error, () => setModalUp(false)); 59 Alert.onError(e.response.data.error, () => setModalUp(false));
60 } 60 }
61 }; 61 };
62 62
63 + const onViewLicenseDetail = async (url : string) => {
64 + const licensePage : any = window.open(url);
65 + licensePage.focus();
66 + };
67 +
63 //회원 가입 수락 68 //회원 가입 수락
64 const onAcceptRequest = () => { 69 const onAcceptRequest = () => {
65 if(validate === 'W') { 70 if(validate === 'W') {
...@@ -78,7 +83,7 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => { ...@@ -78,7 +83,7 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => {
78 Alert.onSuccess('회원 등록이 완료되었습니다.', fetchData); 83 Alert.onSuccess('회원 등록이 완료되었습니다.', fetchData);
79 } 84 }
80 }) 85 })
81 - } catch(e) { 86 + } catch(e : any) {
82 Alert.onError(e.response.data.error, () => setModalUp(false)); 87 Alert.onError(e.response.data.error, () => setModalUp(false));
83 } 88 }
84 }; 89 };
...@@ -96,7 +101,7 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => { ...@@ -96,7 +101,7 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => {
96 Alert.onSuccess('회원 등록이 취소되었습니다.', fetchData); 101 Alert.onSuccess('회원 등록이 취소되었습니다.', fetchData);
97 } 102 }
98 }) 103 })
99 - } catch(e) { 104 + } catch(e : any) {
100 Alert.onError(e.response.data.error, () => setModalUp(false)); 105 Alert.onError(e.response.data.error, () => setModalUp(false));
101 } 106 }
102 }; 107 };
...@@ -118,7 +123,7 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => { ...@@ -118,7 +123,7 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => {
118 setValidate('W'); 123 setValidate('W');
119 }); 124 });
120 }) 125 })
121 - } catch(e) { 126 + } catch(e : any) {
122 Alert.onError(e.response.data, () => { 127 Alert.onError(e.response.data, () => {
123 setModalUp(false); 128 setModalUp(false);
124 setValidate('W'); 129 setValidate('W');
...@@ -138,6 +143,8 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => { ...@@ -138,6 +143,8 @@ const ManagerMenuContainer = (props : ManagerMenuProps) => {
138 modalUp = {modalUp} 143 modalUp = {modalUp}
139 setModalUp = {setModalUp} 144 setModalUp = {setModalUp}
140 onViewDetailReq = {onViewDetailReq} 145 onViewDetailReq = {onViewDetailReq}
146 + onViewLicenseDetail = {onViewLicenseDetail}
147 +
141 validate = {validate} 148 validate = {validate}
142 onValidate = {onValidate} 149 onValidate = {onValidate}
143 150
......
...@@ -11,6 +11,8 @@ interface ManagerMenuProps { ...@@ -11,6 +11,8 @@ interface ManagerMenuProps {
11 modalUp : boolean; 11 modalUp : boolean;
12 setModalUp : any; 12 setModalUp : any;
13 onViewDetailReq : (arg0 : string) => void; 13 onViewDetailReq : (arg0 : string) => void;
14 + onViewLicenseDetail : (arg0 : string) => void;
15 +
14 validate : string; 16 validate : string;
15 onValidate : () => void; 17 onValidate : () => void;
16 18
...@@ -32,13 +34,27 @@ const ManagerMenuPresenter = (props : ManagerMenuProps) => { ...@@ -32,13 +34,27 @@ const ManagerMenuPresenter = (props : ManagerMenuProps) => {
32 <styled.ModalBodyWrapper> 34 <styled.ModalBodyWrapper>
33 <styled.ModalBodyLeftAndRight> 35 <styled.ModalBodyLeftAndRight>
34 <styled.ModalInfoWrapper> 36 <styled.ModalInfoWrapper>
35 - <styled.ModalInfoExplain>의사 자격 번호</styled.ModalInfoExplain> 37 + <styled.DoctorLicenseViewWrapper>
38 + <styled.ModalInfoExplain>
39 + 의사 자격 번호
40 + </styled.ModalInfoExplain>
41 + <styled.DoctorLicenseViewButton onClick = {() => props.onViewLicenseDetail(props.doctorDetail.info.doctorLicense)}>
42 + 자격정보 확인
43 + </styled.DoctorLicenseViewButton>
44 + </styled.DoctorLicenseViewWrapper>
45 + <styled.ModalInfoNotice>
46 + * 자격 정보 확인 버튼을 눌러 정보를 확인하세요.
47 + <br/>* 정보 확인은 15분간 유효합니다.
48 + <br/>* 확인한 면허 번호를 입력 후 검증하세요.
49 + </styled.ModalInfoNotice>
36 <styled.ModalInfo> 50 <styled.ModalInfo>
37 - {props.doctorDetail.info.doctorLicense} 51 + <styled.DoctorLicenseViewInput
52 + placeholder = '의사 면허 번호'
53 + />
38 <styled.ValidateButton 54 <styled.ValidateButton
39 onClick = {props.onValidate} 55 onClick = {props.onValidate}
40 disabled = {props.validate !== 'W'} 56 disabled = {props.validate !== 'W'}
41 - validate = {props.validate} 57 + validate = {props.validate}
42 > 58 >
43 { 59 {
44 props.validate === 'Y' ? 60 props.validate === 'Y' ?
......
...@@ -75,25 +75,96 @@ export const ModalInfoExplain = styled.div ` ...@@ -75,25 +75,96 @@ export const ModalInfoExplain = styled.div `
75 75
76 letter-spacing : 1px; 76 letter-spacing : 1px;
77 77
78 + display : flex;
79 + flex-direction : row;
80 + justify-content : center;
81 + align-items : center;
82 +
78 border : none; 83 border : none;
79 border-bottom : 1px solid #337DFF; 84 border-bottom : 1px solid #337DFF;
80 85
81 color : #337DFF; 86 color : #337DFF;
82 - padding : 2px 5px; 87 + padding : 2px 1px;
83 `; 88 `;
84 89
85 export const ModalInfo = styled.div ` 90 export const ModalInfo = styled.div `
86 - margin : 5px 0 20px 0; 91 + margin : 5px 0 10px 0;
87 - font-size : 20px; 92 + font-size : 13px;
88 - font-weight : 700; 93 + font-weight : 600;
94 +
95 + letter-spacing : 1px;
96 +
97 + display : flex;
98 + flex-direction : row;
99 + align-items : center;
100 +`;
101 +
102 +export const ModalInfoNotice = styled.div `
103 + font-size : 11px;
104 + color : #bbb;
105 +
106 + font-weight : 400;
107 +
108 + letter-spacing : 0px;
109 +
110 + margin : 5px 0 0px 0;
111 +`;
89 112
113 +export const DoctorLicenseViewWrapper = styled.div `
90 display : flex; 114 display : flex;
91 flex-direction : row; 115 flex-direction : row;
116 +
117 + justify-content : center;
92 align-items : center; 118 align-items : center;
119 +
120 + border : none;
121 + background-color : transparent;
122 +`;
123 +
124 +export const DoctorLicenseViewButton = styled.button `
125 + margin : 5px 0 0 7px;
126 +
127 + border : 1px solid #343434;
128 + border-radius : 3px;
129 + background-color : #EAF2FF;
130 + padding : 2px 5px;
131 +
132 + display : flex;
133 + flex-direction : row;
134 + justify-content : center;
135 + align-items : center;
136 +
137 + cursor : pointer;
138 + transition : .25s all;
139 +
140 + &:hover {
141 + border : 1px solid #337DFF;
142 + background-color : #337DFF;
143 + color : #fff;
144 + }
145 +
146 + font-size : 11px;
147 +`;
148 +
149 +export const DoctorLicenseViewInput = styled.input `
150 + padding : 2px 1px;
151 +
152 + font-size : 11px;
153 + letter-spacing : 1px;
154 + color : #343434;
155 +
156 + border : none;
157 + border-bottom : 1px solid #343434;
158 +
159 + &::placeholder {
160 + color : #ccc;
161 + }
93 `; 162 `;
94 163
95 export const ValidateButton = styled.button<{validate : string}> ` 164 export const ValidateButton = styled.button<{validate : string}> `
96 - margin : 0 0 0 15px; 165 + font-size : 11px;
166 +
167 + margin : 0 0 0 5px;
97 padding : 2px 5px; 168 padding : 2px 5px;
98 169
99 border-radius : 3px; 170 border-radius : 3px;
......