2021-1-capstone-design1 / RIT_Project1

Go to a project
Toggle navigation Toggle navigation pinning
박권수
c05ce4cf 1 parent 8e07943e

feat. Main View seperated by Uesr Type / Main View (Doctor)

Inline Side-by-side
Showing 10 changed files with 904 additions and 7 deletions
...@@ -2,6 +2,13 @@ import { client } from "./client"; ...@@ -2,6 +2,13 @@ import { client } from "./client";
2 import { RecoilState } from "recoil"; 2 import { RecoilState } from "recoil";
3 3
4 export default { 4 export default {
5 + getDoctorsInfo : (token : RecoilState<any>) => {
6 + return client.get('/doctor', {
7 + headers : {
8 + Authorization : token,
9 + },
10 + });
11 + },
5 getPatientList : (token : RecoilState<any>) => { 12 getPatientList : (token : RecoilState<any>) => {
6 return client.get('/doctor/patient', { 13 return client.get('/doctor/patient', {
7 headers : { 14 headers : {
......
1 import React, { useState, useEffect } from 'react'; 1 import React, { useState, useEffect } from 'react';
2 import { RouteComponentProps} from 'react-router-dom'; 2 import { RouteComponentProps} from 'react-router-dom';
3 3
4 -import MainPresenter from './MainPresenter'; 4 +import { useRecoilValue } from 'recoil';
5 -
6 -import { useRecoilState, useRecoilValue } from 'recoil';
7 import * as recoilUtil from '../../util/recoilUtil'; 5 import * as recoilUtil from '../../util/recoilUtil';
8 6
9 -import { doctorApi, managerApi, userApi, authApi } from '../../api'; 7 +import DoctorMenuContainer from './doctor';
8 +import ManagerMenuContainer from './manager';
10 9
11 10
12 type MainProps = RouteComponentProps 11 type MainProps = RouteComponentProps
...@@ -23,9 +22,9 @@ const MainContainer = (props : MainProps) => { ...@@ -23,9 +22,9 @@ const MainContainer = (props : MainProps) => {
23 }, []); 22 }, []);
24 23
25 return ( 24 return (
26 - <MainPresenter 25 + userTypeCd === 'DOCTOR' ?
27 - userTypeCd = {userTypeCd} 26 + <DoctorMenuContainer {...props}/> :
28 - /> 27 + <ManagerMenuContainer {...props}/>
29 ); 28 );
30 }; 29 };
31 30
......
1 +import React, { useState, useEffect } from 'react';
2 +import { RouteComponentProps} from 'react-router-dom';
3 +
4 +import DoctorMenuPresenter from './DoctorMenuPresenter';
5 +
6 +import { useRecoilState, useRecoilValue } from 'recoil';
7 +import * as recoilUtil from '../../../util/recoilUtil';
8 +
9 +import { doctorApi, authApi } from '../../../api';
10 +
11 +
12 +type DoctorMenuProps = RouteComponentProps
13 +
14 +const DoctorMenuContainer = (props : DoctorMenuProps) => {
15 +
16 + const token = useRecoilValue(recoilUtil.token);
17 +
18 + const [doctorInfo, setDoctorInfo] = useState<any>({
19 + doctorNm : '',
20 + doctorType : '',
21 + hospitalNm : '',
22 + hospitalAddr : '',
23 + contact : '',
24 + });
25 +
26 + const [patientList, setPatientList] = useState<any>([]);
27 +
28 + const [info, setInfo] = useState<any>({
29 + infoType : 'DOCTOR',
30 + userNm : '',
31 + userAge : 0,
32 + contact : '',
33 + doctorType : '',
34 + patientInfo : '',
35 + });
36 +
37 + const [searchPatientKeyword, setSearchPatientKeyword] = useState<string>('');
38 + const [filteringPatientList, setFilteringPatientList] = useState<any>([]);
39 +
40 + const [patientDetail, setPatientDetail] = useState<any>();
41 +
42 + const [editModal, setEditModal] = useState<boolean>(false);
43 + const [newPatientRegisterModal, setNewPatientRegisterModal] = useState<boolean>(false);
44 +
45 +
46 + const fetchData = async() => {
47 + try {
48 + const res = await doctorApi.getDoctorsInfo(token);
49 + if(res.statusText === 'OK') {
50 + setDoctorInfo(res.data);
51 + setInfo({
52 + infoType : 'DOCTOR',
53 + userNm : res.data.doctorNm,
54 + doctorType : res.data.doctorType,
55 + contact : res.data.contact,
56 + userAge : null,
57 + patientInfo : '',
58 + });
59 +
60 + //로그인한 환자의 리스트를 가져옴 : 프론트에서 필터로 검색
61 + await doctorApi.getPatientList(token).then(res => {
62 + setPatientList(res.data);
63 + }).catch(error => console.log(error));
64 + }
65 + } catch(e) {
66 + console.log(e);
67 + }
68 + };
69 +
70 + const onSetKeyword = (e : React.ChangeEvent<HTMLInputElement>) => {
71 + setSearchPatientKeyword(e.target.value);
72 + };
73 +
74 + const onFetchPatientDetail = async (patientId : string) => {
75 + try {
76 + await doctorApi.getPatientDetail(token, patientId).then(res => {
77 + setPatientDetail(res.data);
78 + setInfo({
79 + infoType : 'PATIENT',
80 + userNm : res.data.profile.userNm,
81 + userAge : res.data.profile.userAge,
82 + contact : res.data.profile.contact,
83 + doctorType : null,
84 + patientInfo : res.data.info,
85 + });
86 + }).catch(err => console.log(err));
87 + } catch(e) {
88 + console.log(e);
89 + }
90 + };
91 +
92 + const onInitialize = () => {
93 + setInfo({
94 + infoType : 'DOCTOR',
95 + userNm : doctorInfo.doctorNm,
96 + doctorType : doctorInfo.doctorType,
97 + contact : doctorInfo.contact,
98 + userAge : null,
99 + patientInfo : '',
100 + });
101 + setFilteringPatientList([]);
102 + setSearchPatientKeyword('');
103 + setPatientDetail(null);
104 + };
105 +
106 +
107 + useEffect(() => {
108 + if(!token || !token.length) {
109 + props.history.push('/login');
110 + } else fetchData();
111 + }, []);
112 +
113 + useEffect(() => {
114 + setFilteringPatientList(searchPatientKeyword === '' ? [] :
115 + patientList.filter((patient : any) =>
116 + patient.contact.includes(searchPatientKeyword)
117 + || patient.userNm.includes(searchPatientKeyword)
118 + || patient.userId.includes(searchPatientKeyword)
119 + )
120 + );
121 + }, [searchPatientKeyword]);
122 +
123 + return (
124 + <DoctorMenuPresenter
125 + info = {info}
126 + searchPatientKeyword = {searchPatientKeyword}
127 + onSetKeyword = {onSetKeyword}
128 +
129 + filteringPatientList = {filteringPatientList}
130 + patientDetail = {patientDetail}
131 + onFetchPatientDetail = {onFetchPatientDetail}
132 +
133 + onInitialize = {onInitialize}
134 +
135 + editModal = {editModal}
136 + setEditModal = {setEditModal}
137 + newPatientRegisterModal = {newPatientRegisterModal}
138 + setNewPatientRegisterModal = {setNewPatientRegisterModal}
139 + />
140 + );
141 +};
142 +
143 +export default DoctorMenuContainer;
...\ No newline at end of file ...\ No newline at end of file
1 +import React from 'react';
2 +
3 +import * as styled from './DoctorMenuStyled';
4 +
5 +
6 +interface DoctorMenuProps {
7 + info : {
8 + infoType : string;
9 + userNm : string;
10 + doctorType : string | null;
11 + contact : string;
12 + userAge : number | null;
13 + patientInfo : string;
14 + };
15 + searchPatientKeyword : string;
16 + onSetKeyword : React.ChangeEventHandler<HTMLInputElement>;
17 + filteringPatientList : any[];
18 + patientDetail : any;
19 + onFetchPatientDetail : (arg0 : string) => void;
20 +
21 + onInitialize : () => void;
22 +
23 + editModal : boolean;
24 + setEditModal : any;
25 + newPatientRegisterModal : boolean;
26 + setNewPatientRegisterModal : any;
27 +}
28 +
29 +const DoctorMenuPresenter = (props : DoctorMenuProps) => {
30 + return (
31 + <styled.Container>
32 + {
33 + props.editModal ?
34 + <styled.ModalContainer>
35 + <styled.ModalClsButtonWrapper>
36 + <styled.ModalClsButton
37 + onClick = {() => props.setEditModal(false)}
38 + >
39 + <styled.ModalClsButtonImg />
40 + <styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
41 + </styled.ModalClsButton>
42 + </styled.ModalClsButtonWrapper>
43 + <styled.ModalContentWrapper>
44 + <styled.ModalContent>
45 + <styled.NewPatientRegisterTitle>새 환자 등록</styled.NewPatientRegisterTitle>
46 + <styled.NewPatientSearchWrapper>
47 + <styled.NewPatientSearchInput
48 + placeholder = '환자 이메일을 입력하세요.'
49 + />
50 + <styled.NewPatientSearchButton>
51 + <styled.NewPatientSearchButtonImg />
52 + </styled.NewPatientSearchButton>
53 + </styled.NewPatientSearchWrapper>
54 + <styled.NewPatientSearchResultWrapper>
55 + 🤔검색 결과가 없습니다.
56 + </styled.NewPatientSearchResultWrapper>
57 + <styled.NewPatientRegisterButtonWrapper>
58 + <styled.NewPatientRegisterButton>
59 + 확인
60 + </styled.NewPatientRegisterButton>
61 + <styled.NewPatientRegisterButton>
62 + 취소
63 + </styled.NewPatientRegisterButton>
64 + </styled.NewPatientRegisterButtonWrapper>
65 + </styled.ModalContent>
66 + </styled.ModalContentWrapper>
67 + <styled.ModalClsButtonWrapper/>
68 + </styled.ModalContainer> : null
69 + }
70 + <styled.InfoAndSearchWrapper>
71 + <styled.InfoWrapper>
72 + {
73 + props.info.infoType === 'DOCTOR' ?
74 + <styled.InfoSquare>
75 + <styled.InfoEachWrapper>
76 + <styled.InfoEachTopic>분야</styled.InfoEachTopic>
77 + <styled.InfoEachText>{props.info.doctorType}</styled.InfoEachText>
78 + </styled.InfoEachWrapper>
79 + <styled.InfoEachWrapper>
80 + <styled.InfoEachTopic>이름</styled.InfoEachTopic>
81 + <styled.InfoEachText>{props.info.userNm}</styled.InfoEachText>
82 + </styled.InfoEachWrapper>
83 + <styled.InfoEachWrapper>
84 + <styled.InfoEachTopic>연락처</styled.InfoEachTopic>
85 + <styled.InfoEachText>{props.info.contact}</styled.InfoEachText>
86 + </styled.InfoEachWrapper>
87 + </styled.InfoSquare> :
88 + <styled.InfoSquare>
89 + <styled.EditPatientInfoButton>
90 + <styled.EditPatientInfoButtonImg />
91 + <styled.EditPatientInfoButtonText>수정</styled.EditPatientInfoButtonText>
92 + </styled.EditPatientInfoButton>
93 + <styled.InfoEachWrapper>
94 + <styled.InfoEachTopic>이름</styled.InfoEachTopic>
95 + <styled.InfoEachText>{props.info.userNm}</styled.InfoEachText>
96 + </styled.InfoEachWrapper>
97 + <styled.InfoEachWrapper>
98 + <styled.InfoEachTopic>생년월일</styled.InfoEachTopic>
99 + <styled.InfoEachText>{props.info.userAge}세</styled.InfoEachText>
100 + </styled.InfoEachWrapper>
101 + <styled.InfoEachWrapper>
102 + <styled.InfoEachTopic>연락처</styled.InfoEachTopic>
103 + <styled.InfoEachText>{props.info.contact}</styled.InfoEachText>
104 + </styled.InfoEachWrapper>
105 + <styled.InfoEachWrapper
106 + style = {{margin : '10px 0 0 0'}}
107 + >
108 + <styled.InfoEachTopic>환자 기록</styled.InfoEachTopic>
109 + <styled.PatientInfo>
110 + {
111 + props.info.patientInfo.split('\n\n').map((patientInfoText : string) => {
112 + return (
113 + <div key = {patientInfoText}>
114 + {patientInfoText}<br/><br/>
115 + </div>
116 + )
117 + })
118 + }
119 + </styled.PatientInfo>
120 + </styled.InfoEachWrapper>
121 + </styled.InfoSquare>
122 + }
123 + <styled.NewPatientButton
124 + onClick = {() => props.setEditModal(true)}
125 + >
126 + 새 환자 등록
127 + </styled.NewPatientButton>
128 + </styled.InfoWrapper>
129 + <styled.SearchAndDetailWrapper>
130 + <styled.SearchBarWrapper>
131 + <styled.SearchBar
132 + placeholder = '환자 정보(이름, 이메일, 휴대폰 번호)'
133 + value = {props.searchPatientKeyword}
134 + onChange = {props.onSetKeyword}
135 + />
136 + <styled.SearchButton>
137 + 검색
138 + </styled.SearchButton>
139 + <styled.SearchButton
140 + onClick = {props.onInitialize}
141 + >
142 + 초기화
143 + </styled.SearchButton>
144 + </styled.SearchBarWrapper>
145 + <styled.SearchResultWrapper>
146 + <styled.SearchResultInfo>
147 + <styled.SearchResultInfoEach isLast = {false}>이름</styled.SearchResultInfoEach>
148 + <styled.SearchResultInfoEach isLast = {false}>생년월일</styled.SearchResultInfoEach>
149 + <styled.SearchResultInfoEach isLast = {true}>연락처</styled.SearchResultInfoEach>
150 + </styled.SearchResultInfo>
151 + {
152 + props.filteringPatientList.length ?
153 + props.filteringPatientList.map(patient => {
154 + return (
155 + <styled.SearchResultEach
156 + key = {patient._id}
157 + onClick = {() => props.onFetchPatientDetail(patient.userId)}
158 + >
159 + <styled.SearchResultEachText isLast = {false}>{patient.userNm}</styled.SearchResultEachText>
160 + <styled.SearchResultEachText isLast = {false}>{patient.userAge}세</styled.SearchResultEachText>
161 + <styled.SearchResultEachText isLast = {true}>{patient.contact}</styled.SearchResultEachText>
162 + </styled.SearchResultEach>
163 + )
164 + }) :
165 + <styled.NothingWrapper>
166 + 🤔검색 결과가 없습니다.
167 + </styled.NothingWrapper>
168 + }
169 + </styled.SearchResultWrapper>
170 + </styled.SearchAndDetailWrapper>
171 + </styled.InfoAndSearchWrapper>
172 + <styled.BottleListWrapper>
173 + {
174 + props.patientDetail && props.patientDetail.bottleList ?
175 + props.patientDetail.bottleList.map((bottle : any) => {
176 + return (
177 + <styled.EachBottleWrapper
178 + key = {bottle._id}
179 + >
180 + {
181 + bottle.bottleId
182 + }
183 + </styled.EachBottleWrapper>
184 + )
185 + }) :
186 + <styled.NothingWrapper>
187 + 🤔먼저 환자를 선택하세요.
188 + </styled.NothingWrapper>
189 + }
190 + </styled.BottleListWrapper>
191 + </styled.Container>
192 + )
193 +};
194 +
195 +export default DoctorMenuPresenter;
...\ No newline at end of file ...\ No newline at end of file
1 +import styled from 'styled-components';
2 +
3 +export const Container = styled.div `
4 + height : 100vh;
5 + width : 100%;
6 + display : flex;
7 + flex-direction : column;
8 + justify-content : center;
9 +`;
10 +
11 +export const ModalContainer = styled.div `
12 + height : 100%;
13 + width : 100%;
14 + z-index : 99;
15 + position : absolute;
16 +
17 + display : flex;
18 + flex-direction : column;
19 +
20 + background-color : rgba(52, 52, 52, .7);
21 +
22 +`;
23 +
24 +export const ModalClsButtonWrapper = styled.div `
25 + flex : 1;
26 +
27 + display : flex;
28 +
29 + justify-content : flex-end;
30 + align-items : center;
31 + padding : 0 20px;
32 +
33 + border : none;
34 + background-color : transprent;
35 +`;
36 +
37 +export const ModalClsButton = styled.button `
38 + border : none;
39 + background-color : transparent;
40 +
41 + cursor : pointer;
42 +
43 + color : #fff;
44 +
45 + display : flex;
46 + flex-direction : row;
47 +
48 + justify-content : center;
49 + align-items : center;
50 +
51 + transition : .25s all;
52 + &:hover {
53 + opacity : .5;
54 + }
55 +`;
56 +
57 +export const ModalClsButtonImg = styled.img `
58 + height : 25px;
59 + width : 25px;
60 +
61 + margin : 0 10px 0 0;
62 +`;
63 +
64 +export const ModalClsButtonText = styled.div `
65 + font-size : 18px;
66 + font-weight : 700;
67 +`;
68 +
69 +export const ModalContentWrapper = styled.div `
70 + flex : 8;
71 +
72 + display : flex;
73 + flex-direction : column;
74 +
75 + justify-content : center;
76 + align-items : center;
77 +
78 + border : none;
79 +`;
80 +
81 +export const ModalContent = styled.div `
82 + width : 600px;
83 + height : 400px;
84 +
85 + background-color : #fff;
86 + border : 1.2px solid #337DFF;
87 + border-radius : 5px;
88 +
89 + display : flex;
90 + flex-direction : column;
91 +
92 + justify-content : center;
93 + align-items : center;
94 +`;
95 +
96 +export const NewPatientRegisterTitle = styled.div `
97 + font-size : 20px;
98 + font-weight : 700;
99 +
100 + color : #337DFF;
101 + letter-spacing : 1px;
102 +`;
103 +
104 +export const NewPatientSearchWrapper = styled.div `
105 + margin : 20px 0 0 0;
106 +
107 + border : none;
108 + border-bottom : 1px solid #ddd;
109 +
110 + width : 80%;
111 + padding : 0 10px 5px 10px;
112 +
113 + display : flex;
114 + flex-direction : row;
115 +
116 + justify-content : space-between;
117 +`;
118 +
119 +export const NewPatientSearchInput = styled.input `
120 + border : none;
121 + width : 80%;
122 +`;
123 +
124 +export const NewPatientSearchButton = styled.button `
125 + border : none;
126 + background-color : transparent;
127 +
128 + display : flex;
129 + flex-direction : row;
130 +
131 + justify-content : center;
132 + align-items : center;
133 +
134 +
135 + transition : .25s all;
136 + &:hover {
137 + opacity : .5;
138 + }
139 +`;
140 +
141 +export const NewPatientSearchButtonImg = styled.img `
142 + height : 20px;
143 + width : 20px;
144 +`;
145 +
146 +export const NewPatientSearchResultWrapper = styled.div `
147 + border : 1px solid #337DFF;
148 + margin : 10px 0 0 0;
149 +
150 + width : 80%;
151 + padding : 10px;
152 +
153 + height : 100px;
154 +
155 + display : flex;
156 + justify-content : center;
157 + align-items : center;
158 +
159 + font-size : 14px;
160 + color : #a0a0a0;
161 +`;
162 +
163 +export const NewPatientRegisterButtonWrapper = styled.div `
164 + display : flex;
165 + flex-direction : row;
166 +
167 + justify-content : center;
168 + align-items :center;
169 +
170 + margin : 20px 0 0 0;
171 +`;
172 +
173 +export const NewPatientRegisterButton = styled.button `
174 + background-color : #fff;
175 + color : #337DFF;
176 + border : 1px solid #337DFF;
177 + border-radius : 3px;
178 +
179 + cursor : pointer;
180 +
181 + transition : .25s all;
182 +
183 + font-size : 16px;
184 + font-weight : 600;
185 +
186 + padding : 10px 30px;
187 + margin : 0 10px;
188 +
189 + &:hover {
190 + background-color : #337DFF;
191 + color : #fff;
192 + border : 1px solid transparent;
193 + }
194 +`;
195 +
196 +
197 +export const InfoAndSearchWrapper = styled.div `
198 + flex : 3;
199 + display : flex;
200 + flex-direction : row;
201 +
202 + margin : 0 0 10px 0;
203 +`;
204 +
205 +export const InfoWrapper = styled.div `
206 + flex : 2;
207 +
208 + display : flex;
209 + flex-direction : column;
210 + padding : 10px;
211 +`;
212 +
213 +export const InfoSquare = styled.div `
214 + overflow : scroll;
215 +
216 + border : 1px solid #ddd;
217 + border-radius : 5px;
218 +
219 + background-color : transparent;
220 +
221 + height : 300px;
222 +
223 + margin : 0 0 20px 0;
224 +
225 + box-shadow: 0px 0px 5px #a0a0a0;
226 +
227 + padding : 20px;
228 + display : flex;
229 + flex-direction : column;
230 + align-items : center;
231 +
232 + &::-webkit-scrollbar {
233 + width : 3px;
234 + background-color : transparent;
235 + height : 1px;
236 + }
237 +
238 + &::-webkit-scrollbar-thumb {
239 + background-color : #337DFF;
240 + }
241 +
242 +`;
243 +
244 +export const EditPatientInfoButton = styled.button `
245 + display : flex;
246 + flex-direction : row;
247 +
248 + align-self : flex-end;
249 +
250 + justify-content : center;
251 + align-items : center;
252 +
253 + border : none;
254 + background-color : transparent;
255 +
256 + cursor : pointer;
257 +
258 + transition : .25s all;
259 + &:hover {
260 + opacity : .5;
261 + }
262 +`;
263 +
264 +export const EditPatientInfoButtonImg = styled.img `
265 + height : 15px;
266 + width : 15px;
267 + margin : 0 5px 0 0;
268 +`;
269 +
270 +export const EditPatientInfoButtonText = styled.div `
271 + font-size : 12px;
272 + font-weight : 600;
273 +`;
274 +
275 +export const InfoEachWrapper = styled.div `
276 + display : flex;
277 + flex-direction : column;
278 +
279 + justify-content : flex-start;
280 + align-items : flex-start;
281 +
282 + width : 100%;
283 + border : none;
284 +
285 + margin : 0 0 20px 0;
286 +`;
287 +
288 +export const InfoEachTopic = styled.div `
289 + margin : 0 0 5px 0;
290 + font-size : 14px;
291 + font-weight : 700;
292 +
293 + color : #337DFF;
294 +`;
295 +
296 +export const InfoEachText = styled.div `
297 + font-size : 18px;
298 + font-weight : bold;
299 +
300 + border : none;
301 + border-bottom : 2px solid #337DFF;
302 +
303 + padding : 0px 10px 2px 10px;
304 +`;
305 +
306 +export const PatientInfo = styled.div `
307 + font-size : 15px;
308 +`;
309 +
310 +export const NewPatientButton = styled.button `
311 + flex : 1;
312 + border : 1px solid #ddd;
313 + border-radius : 3px;
314 +
315 + background-color : #fff;
316 + color : #337DFF;
317 +
318 + padding : 10px 30px;
319 +
320 + transition : .25s all;
321 +
322 + font-size : 18px;
323 + font-weight : 700;
324 +
325 + cursor : pointer;
326 +
327 + &:hover {
328 + background-color : #337DFF;
329 + color : #fff;
330 + }
331 +`;
332 +
333 +export const SearchAndDetailWrapper = styled.div `
334 + flex : 5;
335 +
336 + display : flex;
337 + flex-direction : column;
338 +
339 + padding : 10px;
340 +
341 +`;
342 +
343 +export const SearchBarWrapper = styled.div `
344 + flex : 1;
345 + border : 1px solid #ddd;
346 + border-radius : 3px;
347 + background-color : transparent;
348 +
349 + display : flex;
350 + flex-direction : row;
351 +
352 + padding : 10px;
353 +
354 + align-items : center;
355 + justify-content : space-around;
356 +
357 + margin : 0 0 10px 0;
358 +
359 +`;
360 +
361 +export const SearchBar = styled.input `
362 + border : none;
363 + border-bottom : 2px solid #ddd;
364 + width : 80%;
365 + margin : 0 10px 0 20px;
366 + padding : 10px 0px;
367 +`;
368 +
369 +export const SearchButton = styled.button `
370 + border : 1px solid #ddd;
371 +
372 + background-color : transparent;
373 +
374 + height : 50px;
375 + width : 50px;
376 +
377 + transition : .25s all;
378 +
379 + cursor : pointer;
380 +
381 + &:hover {
382 + color : #fff;
383 + background-color : #343434;
384 + }
385 +`;
386 +
387 +export const SearchResultWrapper = styled.div `
388 + flex : 5;
389 + border : 1px solid #ddd;
390 + border-radius : 3px;
391 + background-color : transparent;
392 +
393 +`;
394 +
395 +export const SearchResultInfo = styled.div `
396 + display : flex;
397 + flex-direction : row;
398 +
399 + border : none;
400 + border-bottom : 2px solid #ddd;
401 +
402 + padding : 5px 20px;
403 +`;
404 +
405 +export const SearchResultInfoEach = styled.div<{isLast : boolean}> `
406 + flex : 1;
407 + text-align : center;
408 +
409 + font-size : 18px;
410 + font-weight : 600;
411 +
412 + border : none;
413 + border-right : ${props => props.isLast ? 'none' : '1px solid #ddd'};
414 +`;
415 +
416 +export const SearchResultEach = styled.div `
417 + display : flex;
418 + flex-direction : row;
419 +
420 + border : none;
421 + border-bottom : 1px solid #ddd;
422 + align-items : center;
423 +
424 + background-color : transparent;
425 + color : #337DFF;
426 +
427 + padding : 10px 20px;
428 +
429 + cursor : pointer;
430 +
431 + transition : .25s all;
432 + &:hover {
433 + background-color : #337DFF;
434 + color : #fff;
435 + }
436 +`;
437 +
438 +export const SearchResultEachText = styled.div<{isLast : boolean}> `
439 + flex : 1;
440 +
441 + text-align : center;
442 + border : none;
443 + border-right : ${props => props.isLast ? 'none' : '1px solid #ddd'};
444 +`;
445 +
446 +export const BottleListWrapper = styled.div `
447 + overflow : scroll;
448 +
449 + flex : 2;
450 + display : flex;
451 + flex-direction : row;
452 +
453 + border : 1px solid #ddd;
454 + border-radius : 3px;
455 +
456 + padding : 20px;
457 +
458 + margin : 0 0 10px 0;
459 +
460 + box-shadow: 0px 2px 5px 0px #a0a0a0;
461 +
462 + &::-webkit-scrollbar {
463 + width : 0px;
464 + background-color : transparent;
465 + height : 3px;
466 + }
467 +
468 + &::-webkit-scrollbar-thumb {
469 + background-color : #337DFF;
470 + }
471 +
472 +`;
473 +
474 +export const EachBottleWrapper = styled.div `
475 + height : 100%;
476 + min-width : 200px;
477 + border : 1px solid #ddd;
478 + border-radius : 3px;
479 +
480 + display : flex;
481 + flex-direction : column;
482 +
483 + justify-content : center;
484 + align-items : center;
485 +
486 + margin : 0 20px 0 0;
487 +
488 + cursor : pointer;
489 + transition : .25s all;
490 + &:hover {
491 + opacity : .5;
492 + }
493 +`;
494 +
495 +export const NothingWrapper = styled.div `
496 + height : 100%;
497 + width : 100%;
498 +
499 + display : flex;
500 + justify-content : center;
501 + align-items : center;
502 +
503 + color : #a0a0a0;
504 +`;
...\ No newline at end of file ...\ No newline at end of file
1 +import DoctorMenuContainer from './DoctorMenuContainer';
2 +
3 +export default DoctorMenuContainer;
...\ No newline at end of file ...\ No newline at end of file
1 +import React, { useState, useEffect } from "react";
2 +
3 +import { RouteComponentProps} from 'react-router-dom';
4 +
5 +import { useRecoilValue } from "recoil";
6 +import * as recoilUtil from '../../../util/recoilUtil';
7 +
8 +import ManagerMenuPresenter from "./ManagerMenuPresenter";
9 +
10 +
11 +type ManagerMenuProps = RouteComponentProps;
12 +
13 +const ManagerMenuContainer = (props : ManagerMenuProps) => {
14 + return (
15 + <ManagerMenuPresenter
16 +
17 + />
18 + );
19 +};
20 +
21 +export default ManagerMenuContainer;
...\ No newline at end of file ...\ No newline at end of file
1 +import React from 'react';
2 +
3 +import * as styled from './ManagerMenuStyled';
4 +
5 +
6 +// eslint-disable-next-line @typescript-eslint/no-empty-interface
7 +interface ManagerMenuProps {}
8 +
9 +const ManagerMenuPresenter = (props : ManagerMenuProps) => {
10 + return (
11 + <styled.Container>
12 + 관리자 메뉴
13 + </styled.Container>
14 + )
15 +};
16 +
17 +export default ManagerMenuPresenter;
...\ No newline at end of file ...\ No newline at end of file
1 +import styled from 'styled-components';
2 +
3 +export const Container = styled.div `
4 +
5 +`;
...\ No newline at end of file ...\ No newline at end of file
1 +import ManagerMenuContainer from "./ManagerMenuContainer";
2 +
3 +export default ManagerMenuContainer;
...\ No newline at end of file ...\ No newline at end of file