2021-1-capstone-design1 / RIT_Project1

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

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

Inline Side-by-side
Showing 13 changed files with 550 additions and 886 deletions
import styled, { keyframes } from 'styled-components';
const ModalOn = keyframes `
0% {
background-color : rgba(52, 52, 52, .0);
}
20% {
background-color : rgba(52, 52, 52, .2);
}
40% {
background-color : rgba(52, 52, 52, .4);
}
60% {
background-color : rgba(52, 52, 52, .5);
}
80% {
background-color : rgba(52, 52, 52, .6);
}
100% {
background-color : rgba(52, 52, 52, .7);
}
`;
export const ModalContainer = styled.div `
height : 100%;
width : 100%;
z-index : 99;
position : absolute;
display : flex;
flex-direction : column;
animation : ${ModalOn} .5s;
background-color : rgba(52, 52, 52, .7);
`;
export const ModalClsButtonWrapper = styled.div `
flex : 1;
display : flex;
justify-content : flex-end;
align-items : center;
padding : 0 20px;
border : none;
background-color : transprent;
`;
export const ModalClsButton = styled.button `
border : none;
background-color : transparent;
cursor : pointer;
color : #fff;
display : flex;
flex-direction : row;
justify-content : center;
align-items : center;
transition : .25s all;
&:hover {
opacity : .5;
}
`;
export const ModalClsButtonImg = styled.img `
height : 20px;
width : 20px;
margin : 0 10px 0 0;
`;
export const ModalClsButtonText = styled.div `
font-size : 18px;
font-weight : 700;
`;
export const ModalContentWrapper = styled.div `
flex : 8;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
border : none;
`;
export const ModalContent = styled.div `
width : 600px;
height : 400px;
background-color : #fff;
border : 1.2px solid #337DFF;
border-radius : 5px;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
`;
\ No newline at end of file
import React from 'react';
import * as styled from './ModalStyled';
const closeButton = '/static/img/close.png';
interface ModalProps {
children : JSX.Element,
onModalClose : () => void;
}
const ModalContainer = (props : ModalProps) => {
return (
<styled.ModalContainer>
<styled.ModalClsButtonWrapper>
<styled.ModalClsButton
onClick = {props.onModalClose}
>
<styled.ModalClsButtonImg src = {closeButton}/>
<styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
</styled.ModalClsButton>
</styled.ModalClsButtonWrapper>
<styled.ModalContentWrapper>
<styled.ModalContent>
{props.children}
</styled.ModalContent>
</styled.ModalContentWrapper>
<styled.ModalClsButtonWrapper />
</styled.ModalContainer>
);
};
export default ModalContainer;
\ No newline at end of file
......@@ -2,10 +2,10 @@ import React from 'react';
import HighCharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import Modal from '../../components/Modal';
import * as styled from './BottleInfoStyled';
const plus = '/static/img/plus.png';
const closeButton = '/static/img/close.png';
interface BottleInfoProps {
......@@ -32,42 +32,32 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
<styled.Container>
{
props.medicineInfoModal ?
<styled.ModalContainer>
<styled.ModalClsButtonWrapper>
<styled.ModalClsButton
onClick = {() => props.setMedicineInfoModal(false)}
>
<styled.ModalClsButtonImg src = {closeButton}/>
<styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
</styled.ModalClsButton>
</styled.ModalClsButtonWrapper>
<styled.ModalContentWrapper>
<styled.ModalContent>
<styled.MedicineNameWrapper>
<styled.MedicineName>{props.bottleInfo.medicine.name}</styled.MedicineName>
<styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{props.bottleInfo.medicine.company}</styled.MedicineName>
</styled.MedicineNameWrapper>
<styled.MedicineInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle>효능</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo>{props.bottleInfo.medicine.target}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle>복용 정보</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo>{props.bottleInfo.medicine.dosage}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>주의 사항</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.warn}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>부작용</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.antiEffect}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
</styled.MedicineInfoWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
</styled.ModalContainer> : null
<Modal onModalClose = {() => props.setMedicineInfoModal(false)}>
<>
<styled.MedicineNameWrapper>
<styled.MedicineName>{props.bottleInfo.medicine.name}</styled.MedicineName>
<styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{props.bottleInfo.medicine.company}</styled.MedicineName>
</styled.MedicineNameWrapper>
<styled.MedicineInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle>효능</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo>{props.bottleInfo.medicine.target}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle>복용 정보</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo>{props.bottleInfo.medicine.dosage}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>주의 사항</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.warn}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>부작용</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.antiEffect}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
</styled.MedicineInfoWrapper>
</>
</Modal> : null
}
<styled.ChartAndFeedbackWrapper>
<styled.ChartWrapper>
......@@ -143,7 +133,6 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
<styled.NewFeedbackRegButton
onClick = {props.onSubmitFeedback}
>
{/* <styled.NewFeedbackRegButtonImg /> */}
<styled.NewFeedbackRegButtonText>피드백<br/>등록</styled.NewFeedbackRegButtonText>
</styled.NewFeedbackRegButton>
</styled.NewFeedbackButtonWrapper>
......
import styled, { keyframes } from 'styled-components';
const ModalOn = keyframes `
0% {
background-color : rgba(52, 52, 52, .0);
}
20% {
background-color : rgba(52, 52, 52, .2);
}
40% {
background-color : rgba(52, 52, 52, .4);
}
60% {
background-color : rgba(52, 52, 52, .5);
}
80% {
background-color : rgba(52, 52, 52, .6);
}
100% {
background-color : rgba(52, 52, 52, .7);
}
`;
import styled from 'styled-components';
export const Container = styled.div `
......@@ -32,93 +9,6 @@ export const Container = styled.div `
justify-content : center;
`;
export const ModalContainer = styled.div `
height : 100%;
width : 100%;
z-index : 99;
position : absolute;
display : flex;
flex-direction : column;
animation : ${ModalOn} .5s;
background-color : rgba(52, 52, 52, .7);
`;
export const ModalClsButtonWrapper = styled.div `
flex : 1;
display : flex;
justify-content : flex-end;
align-items : center;
padding : 0 20px;
border : none;
background-color : transprent;
`;
export const ModalClsButton = styled.button `
border : none;
background-color : transparent;
cursor : pointer;
color : #fff;
display : flex;
flex-direction : row;
justify-content : center;
align-items : center;
transition : .25s all;
&:hover {
opacity : .5;
}
`;
export const ModalClsButtonImg = styled.img `
height : 20px;
width : 20px;
margin : 0 10px 0 0;
`;
export const ModalClsButtonText = styled.div `
font-size : 18px;
font-weight : 700;
`;
export const ModalContentWrapper = styled.div `
flex : 8;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
border : none;
`;
export const ModalContent = styled.div `
width : 700px;
height : 500px;
background-color : #fff;
border : 1.2px solid #337DFF;
border-radius : 5px;
display : flex;
flex-direction : column;
// justify-content : center;
align-items : center;
`;
export const MedicineNameWrapper = styled.div `
border : none;
border-bottom : 1px solid #ddd;
......
import React from 'react';
import Modal from '../../../components/Modal';
import * as styled from './DoctorMenuStyled';
const medicineImg = '/static/img/medicine.png';
const addButton = '/static/img/plus.png';
const lensImg = '/static/img/lens.png';
const closeButton = '/static/img/close.png';
const edit = '/static/img/edit.png';
const refreshing = '/static/img/refreshing.png';
const check = '/static/img/check.png';
......@@ -75,242 +76,209 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
return (
<styled.Container>
{
props.newPatientRegisterModal ?
<styled.ModalContainer>
<styled.ModalClsButtonWrapper>
<styled.ModalClsButton
onClick = {() => props.setNewPatientRegisterModal(false)}
props.newPatientRegisterModal ?
<Modal onModalClose = {() => props.setNewPatientRegisterModal(false)}>
<>
<styled.NewPatientRegisterTitle>새 환자 등록</styled.NewPatientRegisterTitle>
<styled.NewPatientSearchWrapper>
<styled.NewPatientSearchInput
placeholder = '환자 이메일을 입력하세요.'
value = {props.newPatientSearchId}
onChange = {props.onSetNewPatientSearchId}
/>
<styled.NewPatientSearchButton
onClick = {props.onSearchNewPatientByEmail}
>
<styled.ModalClsButtonImg src = {closeButton}/>
<styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
</styled.ModalClsButton>
</styled.ModalClsButtonWrapper>
<styled.ModalContentWrapper>
<styled.ModalContent>
<styled.NewPatientRegisterTitle>새 환자 등록</styled.NewPatientRegisterTitle>
<styled.NewPatientSearchWrapper>
<styled.NewPatientSearchInput
placeholder = '환자 이메일을 입력하세요.'
value = {props.newPatientSearchId}
onChange = {props.onSetNewPatientSearchId}
/>
<styled.NewPatientSearchButton
onClick = {props.onSearchNewPatientByEmail}
>
<styled.NewPatientSearchButtonImg src = {lensImg}/>
</styled.NewPatientSearchButton>
</styled.NewPatientSearchWrapper>
<styled.NewPatientSearchResultWrapper>
{
props.newPatientSearchResult ?
<styled.NewPatientSearchResult>
<styled.NewPatientSearchResultInfoWrapper>
<styled.NewPatientSearchResultInfo>이름 : </styled.NewPatientSearchResultInfo>
<styled.NewPatientSearchResultInfoText>
{props.newPatientSearchResult.patientNm}
</styled.NewPatientSearchResultInfoText>
</styled.NewPatientSearchResultInfoWrapper>
</styled.NewPatientSearchResult> :
'🤔검색 결과가 없습니다.'
}
</styled.NewPatientSearchResultWrapper>
<styled.NewPatientRegisterButtonWrapper>
<styled.NewPatientRegisterButton
onClick = {props.onRegisterNewPatient}
>
확인
</styled.NewPatientRegisterButton>
<styled.NewPatientRegisterButton
onClick = {props.onCloseModal}
>
취소
</styled.NewPatientRegisterButton>
</styled.NewPatientRegisterButtonWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
<styled.ModalClsButtonWrapper/>
</styled.ModalContainer> : null
<styled.NewPatientSearchButtonImg src = {lensImg}/>
</styled.NewPatientSearchButton>
</styled.NewPatientSearchWrapper>
<styled.NewPatientSearchResultWrapper>
{
props.newPatientSearchResult ?
<styled.NewPatientSearchResult>
<styled.NewPatientSearchResultInfoWrapper>
<styled.NewPatientSearchResultInfo>이름 : </styled.NewPatientSearchResultInfo>
<styled.NewPatientSearchResultInfoText>
{props.newPatientSearchResult.patientNm}
</styled.NewPatientSearchResultInfoText>
</styled.NewPatientSearchResultInfoWrapper>
</styled.NewPatientSearchResult> :
'🤔검색 결과가 없습니다.'
}
</styled.NewPatientSearchResultWrapper>
<styled.NewPatientRegisterButtonWrapper>
<styled.NewPatientRegisterButton
onClick = {props.onRegisterNewPatient}
>
확인
</styled.NewPatientRegisterButton>
<styled.NewPatientRegisterButton
onClick = {props.onCloseModal}
>
취소
</styled.NewPatientRegisterButton>
</styled.NewPatientRegisterButtonWrapper>
</>
</Modal> : null
}
{
props.editModal ?
<styled.ModalContainer>
<styled.ModalClsButtonWrapper>
<styled.ModalClsButton
onClick = {() => props.setEditModal(false)}
<Modal onModalClose = {() => props.setEditModal(false)}>
<>
<styled.PatientInfoViewContainer>
<styled.PatientInfoPatientNmWrapper>
<styled.PatientInfoPatientNmInfo>이름 : </styled.PatientInfoPatientNmInfo>
<styled.PatientInfoPatientNm>{props.info.userNm}</styled.PatientInfoPatientNm>
</styled.PatientInfoPatientNmWrapper>
<styled.PatientInfoView>
{
props.info.patientInfo.split('\n\n').map((patientInfoText : string) => {
return (
<div key = {patientInfoText}>
{patientInfoText}<br/><br/>
</div>
)
})
}
</styled.PatientInfoView>
</styled.PatientInfoViewContainer>
<styled.PatientInfoEditWrapper>
<styled.PatientInfoEditInput
value = {props.editPatientInfo}
onChange = {props.onEditPatientInfo}
/>
</styled.PatientInfoEditWrapper>
<styled.PatientInfoEditButtonWrapper>
<styled.PatientInfoEditButton
onClick = {props.onSubmitPatientInfo}
>
<styled.ModalClsButtonImg src = {closeButton}/>
<styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
</styled.ModalClsButton>
</styled.ModalClsButtonWrapper>
<styled.ModalContentWrapper>
<styled.ModalContent>
<styled.PatientInfoViewContainer>
<styled.PatientInfoPatientNmWrapper>
<styled.PatientInfoPatientNmInfo>이름 : </styled.PatientInfoPatientNmInfo>
<styled.PatientInfoPatientNm>{props.info.userNm}</styled.PatientInfoPatientNm>
</styled.PatientInfoPatientNmWrapper>
<styled.PatientInfoView>
{
props.info.patientInfo.split('\n\n').map((patientInfoText : string) => {
return (
<div key = {patientInfoText}>
{patientInfoText}<br/><br/>
</div>
)
})
}
</styled.PatientInfoView>
</styled.PatientInfoViewContainer>
<styled.PatientInfoEditWrapper>
<styled.PatientInfoEditInput
value = {props.editPatientInfo}
onChange = {props.onEditPatientInfo}
/>
</styled.PatientInfoEditWrapper>
<styled.PatientInfoEditButtonWrapper>
<styled.PatientInfoEditButton
onClick = {props.onSubmitPatientInfo}
>
확인
</styled.PatientInfoEditButton>
<styled.PatientInfoEditButton
onClick = {props.onCloseModal}
>
취소
</styled.PatientInfoEditButton>
</styled.PatientInfoEditButtonWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
<styled.ModalClsButtonWrapper/>
</styled.ModalContainer> : null
확인
</styled.PatientInfoEditButton>
<styled.PatientInfoEditButton
onClick = {props.onCloseModal}
>
취소
</styled.PatientInfoEditButton>
</styled.PatientInfoEditButtonWrapper>
</>
</Modal> : null
}
{
props.prescribeModal ?
<styled.ModalContainer>
<styled.ModalClsButtonWrapper>
<styled.ModalClsButton
onClick = {props.onCloseModal}
<Modal onModalClose = {props.onCloseModal}>
<>
<styled.MedicineSearchTitle>
{
props.prescribeModalStep === 1 ?
'약 검색' :
props.prescribeModalStep === 2 ?
'복용량 입력' :
'처방 정보 QR코드'
}
</styled.MedicineSearchTitle>
{
props.prescribeModalStep === 1 ?
<>
<styled.MedicineSearchInputWrapper>
<styled.MedicineSearchInput
placeholder = '증상, 또는 약 이름을 검색하세요.'
onChange = {props.onSetSearchMedicineKeyword}
value = {props.searchMedicineKeyword}
/>
<styled.MedicineSearchButton
onClick = {props.searchMedicine}
>
<styled.MedicineSearchButtonImg src = {lensImg}/>
</styled.MedicineSearchButton>
</styled.MedicineSearchInputWrapper>
<styled.MedicineSearchResultWrapper>
{
props.medicineList.length ?
props.medicineList.map((medicine : any) => {
return (
<styled.MedicineSearchResultEach
key = {medicine.medicineId}
onClick = {() => props.setPrescribeMedicine(
props.prescribeMedicine && props.prescribeMedicine.medicineId === medicine.medicineId ?
null : medicine
)}
>
<styled.MedicineSearchResultEachInfo>
{medicine.name}
</styled.MedicineSearchResultEachInfo>
<styled.MedicineSearchButtonImg
src = {
props.prescribeMedicine && props.prescribeMedicine.medicineId === medicine.medicineId ?
check : uncheck
}
/>
</styled.MedicineSearchResultEach>
)
}) :
<styled.NothingWrapper style = {{fontSize : 13,}}>
🤔검색 결과가 없습니다.
</styled.NothingWrapper>
}
</styled.MedicineSearchResultWrapper>
</>
:
props.prescribeModalStep === 2 ?
<styled.MedicineDosageSetWrapper>
<styled.MedicineDosageInfo>
*하루 복용량을 입력하세요.
</styled.MedicineDosageInfo>
<styled.MedicineDosageInput
value = {props.dosage}
onChange = {props.onSetDosage}
/>
</styled.MedicineDosageSetWrapper>
:
<styled.MedicineQRCodeWrapper
id = 'qrCodePrint'
>
<styled.ModalClsButtonImg src = {closeButton}/>
<styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
</styled.ModalClsButton>
</styled.ModalClsButtonWrapper>
<styled.ModalContentWrapper>
<styled.ModalContent>
<styled.MedicineSearchTitle>
<styled.MedicineQRCodeInfo>
*어플리케이션에서 QR코드를 스캔하면 약병에 약이 등록됩니다.
</styled.MedicineQRCodeInfo>
{
props.prescribeModalStep === 1 ?
'약 검색' :
props.prescribeModalStep === 2 ?
'복용량 입력' :
'처방 정보 QR코드'
props.qrcodeUrl ?
<styled.MedicineQRCode src = {props.qrcodeUrl}/> : null
}
</styled.MedicineSearchTitle>
{
props.prescribeModalStep === 1 ?
<>
<styled.MedicineSearchInputWrapper>
<styled.MedicineSearchInput
placeholder = '증상, 또는 약 이름을 검색하세요.'
onChange = {props.onSetSearchMedicineKeyword}
value = {props.searchMedicineKeyword}
/>
<styled.MedicineSearchButton
onClick = {props.searchMedicine}
>
<styled.MedicineSearchButtonImg src = {lensImg}/>
</styled.MedicineSearchButton>
</styled.MedicineSearchInputWrapper>
<styled.MedicineSearchResultWrapper>
{
props.medicineList.length ?
props.medicineList.map((medicine : any) => {
return (
<styled.MedicineSearchResultEach
key = {medicine.medicineId}
onClick = {() => props.setPrescribeMedicine(
props.prescribeMedicine && props.prescribeMedicine.medicineId === medicine.medicineId ?
null : medicine
)}
>
<styled.MedicineSearchResultEachInfo>
{medicine.name}
</styled.MedicineSearchResultEachInfo>
<styled.MedicineSearchButtonImg
src = {
props.prescribeMedicine && props.prescribeMedicine.medicineId === medicine.medicineId ?
check : uncheck
}
/>
</styled.MedicineSearchResultEach>
)
}) :
<styled.NothingWrapper style = {{fontSize : 13,}}>
🤔검색 결과가 없습니다.
</styled.NothingWrapper>
}
</styled.MedicineSearchResultWrapper>
</>
:
props.prescribeModalStep === 2 ?
<styled.MedicineDosageSetWrapper>
<styled.MedicineDosageInfo>
*하루 복용량을 입력하세요.
</styled.MedicineDosageInfo>
<styled.MedicineDosageInput
value = {props.dosage}
onChange = {props.onSetDosage}
/>
</styled.MedicineDosageSetWrapper>
:
<styled.MedicineQRCodeWrapper
id = 'qrCodePrint'
>
<styled.MedicineQRCodeInfo>
*어플리케이션에서 QR코드를 스캔하면 약병에 약이 등록됩니다.
</styled.MedicineQRCodeInfo>
{
props.qrcodeUrl ?
<styled.MedicineQRCode src = {props.qrcodeUrl}/> : null
}
</styled.MedicineQRCodeWrapper>
}
<styled.MedicinePrescribeButtonWrapper>
{
props.prescribeModalStep === 1 ?
<styled.MedicinePrescribeButton
isClose = {false}
onClick = {props.onSetNextStepPrescribe}
>
다음 단계
</styled.MedicinePrescribeButton> :
props.prescribeModalStep === 2 ?
<styled.MedicinePrescribeButton
isClose = {false}
onClick = {props.onPrescribeSubmit}
>
처방
</styled.MedicinePrescribeButton>
:
<styled.MedicinePrescribeButton
isClose = {false}
onClick = {() => props.onPrintQrcode('qrCodePrint')}
>
출력
</styled.MedicinePrescribeButton>
}
<styled.MedicinePrescribeButton
isClose = {true}
onClick = {props.onPrescribeCancel}
>
취소
</styled.MedicinePrescribeButton>
</styled.MedicinePrescribeButtonWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
<styled.ModalClsButtonWrapper/>
</styled.ModalContainer> : null
</styled.MedicineQRCodeWrapper>
}
<styled.MedicinePrescribeButtonWrapper>
{
props.prescribeModalStep === 1 ?
<styled.MedicinePrescribeButton
isClose = {false}
onClick = {props.onSetNextStepPrescribe}
>
다음 단계
</styled.MedicinePrescribeButton> :
props.prescribeModalStep === 2 ?
<styled.MedicinePrescribeButton
isClose = {false}
onClick = {props.onPrescribeSubmit}
>
처방
</styled.MedicinePrescribeButton>
:
<styled.MedicinePrescribeButton
isClose = {false}
onClick = {() => props.onPrintQrcode('qrCodePrint')}
>
출력
</styled.MedicinePrescribeButton>
}
<styled.MedicinePrescribeButton
isClose = {true}
onClick = {props.onPrescribeCancel}
>
취소
</styled.MedicinePrescribeButton>
</styled.MedicinePrescribeButtonWrapper>
</>
</Modal> : null
}
<styled.InfoAndSearchWrapper>
<styled.InfoWrapper>
......
import styled, { keyframes } from 'styled-components';
const ModalOn = keyframes `
0% {
background-color : rgba(52, 52, 52, .0);
}
20% {
background-color : rgba(52, 52, 52, .2);
}
40% {
background-color : rgba(52, 52, 52, .4);
}
60% {
background-color : rgba(52, 52, 52, .5);
}
80% {
background-color : rgba(52, 52, 52, .6);
}
100% {
background-color : rgba(52, 52, 52, .7);
}
`;
import styled from 'styled-components';
export const Container = styled.div `
......@@ -32,93 +9,6 @@ export const Container = styled.div `
justify-content : center;
`;
export const ModalContainer = styled.div `
height : 100%;
width : 100%;
z-index : 99;
position : absolute;
display : flex;
flex-direction : column;
animation : ${ModalOn} .5s;
background-color : rgba(52, 52, 52, .7);
`;
export const ModalClsButtonWrapper = styled.div `
flex : 1;
display : flex;
justify-content : flex-end;
align-items : center;
padding : 0 20px;
border : none;
background-color : transprent;
`;
export const ModalClsButton = styled.button `
border : none;
background-color : transparent;
cursor : pointer;
color : #fff;
display : flex;
flex-direction : row;
justify-content : center;
align-items : center;
transition : .25s all;
&:hover {
opacity : .5;
}
`;
export const ModalClsButtonImg = styled.img `
height : 20px;
width : 20px;
margin : 0 10px 0 0;
`;
export const ModalClsButtonText = styled.div `
font-size : 18px;
font-weight : 700;
`;
export const ModalContentWrapper = styled.div `
flex : 8;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
border : none;
`;
export const ModalContent = styled.div `
width : 600px;
height : 400px;
background-color : #fff;
border : 1.2px solid #337DFF;
border-radius : 5px;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
`;
export const NewPatientRegisterTitle = styled.div `
font-size : 20px;
font-weight : 700;
......
import React from 'react';
import Modal from '../../../components/Modal';
import * as styled from './ManagerMenuStyled';
const closeButton = '/static/img/close.png';
interface ManagerMenuProps {
doctorRegReqList : any[];
......@@ -26,84 +24,73 @@ const ManagerMenuPresenter = (props : ManagerMenuProps) => {
<styled.Container>
{
props.modalUp ?
<styled.ModalContainer>
<styled.ModalClsButtonWrapper>
<styled.ModalClsButton
onClick = {() => props.setModalUp(false)}
<Modal onModalClose = {() => props.setModalUp(false)}>
<>
<styled.ModalTitleWrapper>
<styled.ModalTitle>가입 요청 정보</styled.ModalTitle>
</styled.ModalTitleWrapper>
<styled.ModalBodyWrapper>
<styled.ModalBodyLeftAndRight>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>의사 자격 번호</styled.ModalInfoExplain>
<styled.ModalInfo>
{props.doctorDetail.info.doctorLicense}
<styled.ValidateButton
onClick = {props.onValidate}
disabled = {props.validate !== 'W'}
validate = {props.validate}
>
{
props.validate === 'Y' ?
'검증 완료' :
props.validate === 'W' ?
'검증' :
props.validate === 'N' ?
'검증 실패' : null
}
</styled.ValidateButton>
</styled.ModalInfo>
</styled.ModalInfoWrapper>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>이름</styled.ModalInfoExplain>
<styled.ModalInfo>{props.doctorDetail.info.doctorNm}</styled.ModalInfo>
</styled.ModalInfoWrapper>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>연락처</styled.ModalInfoExplain>
<styled.ModalInfo>{props.doctorDetail.info.contact}</styled.ModalInfo>
</styled.ModalInfoWrapper>
</styled.ModalBodyLeftAndRight>
<styled.ModalBodyLeftAndRight>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>전문 분야</styled.ModalInfoExplain>
<styled.ModalInfo>{props.doctorDetail.info.doctorType}</styled.ModalInfo>
</styled.ModalInfoWrapper>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>병원명</styled.ModalInfoExplain>
<styled.ModalInfo>{props.doctorDetail.info.hospitalNm}</styled.ModalInfo>
</styled.ModalInfoWrapper>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>병원 주소</styled.ModalInfoExplain>
<styled.ModalInfo>{props.doctorDetail.info.hospitalAddr}</styled.ModalInfo>
</styled.ModalInfoWrapper>
</styled.ModalBodyLeftAndRight>
</styled.ModalBodyWrapper>
<styled.ModalButtonWrapper>
<styled.ModalButton
onClick = {props.onAcceptRequest}
isAccept = {true}
>
<styled.ModalClsButtonImg src = {closeButton}/>
<styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
</styled.ModalClsButton>
</styled.ModalClsButtonWrapper>
<styled.ModalContentWrapper>
<styled.ModalContent>
<styled.ModalTitleWrapper>
<styled.ModalTitle>가입 요청 정보</styled.ModalTitle>
</styled.ModalTitleWrapper>
<styled.ModalBodyWrapper>
<styled.ModalBodyLeftAndRight>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>의사 자격 번호</styled.ModalInfoExplain>
<styled.ModalInfo>
{props.doctorDetail.info.doctorLicense}
<styled.ValidateButton
onClick = {props.onValidate}
disabled = {props.validate !== 'W'}
validate = {props.validate}
>
{
props.validate === 'Y' ?
'검증 완료' :
props.validate === 'W' ?
'검증' :
props.validate === 'N' ?
'검증 실패' : null
}
</styled.ValidateButton>
</styled.ModalInfo>
</styled.ModalInfoWrapper>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>이름</styled.ModalInfoExplain>
<styled.ModalInfo>{props.doctorDetail.info.doctorNm}</styled.ModalInfo>
</styled.ModalInfoWrapper>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>연락처</styled.ModalInfoExplain>
<styled.ModalInfo>{props.doctorDetail.info.contact}</styled.ModalInfo>
</styled.ModalInfoWrapper>
</styled.ModalBodyLeftAndRight>
<styled.ModalBodyLeftAndRight>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>전문 분야</styled.ModalInfoExplain>
<styled.ModalInfo>{props.doctorDetail.info.doctorType}</styled.ModalInfo>
</styled.ModalInfoWrapper>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>병원명</styled.ModalInfoExplain>
<styled.ModalInfo>{props.doctorDetail.info.hospitalNm}</styled.ModalInfo>
</styled.ModalInfoWrapper>
<styled.ModalInfoWrapper>
<styled.ModalInfoExplain>병원 주소</styled.ModalInfoExplain>
<styled.ModalInfo>{props.doctorDetail.info.hospitalAddr}</styled.ModalInfo>
</styled.ModalInfoWrapper>
</styled.ModalBodyLeftAndRight>
</styled.ModalBodyWrapper>
<styled.ModalButtonWrapper>
<styled.ModalButton
onClick = {props.onAcceptRequest}
isAccept = {true}
>
수락
</styled.ModalButton>
<styled.ModalButton
onClick = {props.onRejectRequest}
isAccept = {false}
>
거절
</styled.ModalButton>
</styled.ModalButtonWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
<styled.ModalClsButtonWrapper/>
</styled.ModalContainer> : null
수락
</styled.ModalButton>
<styled.ModalButton
onClick = {props.onRejectRequest}
isAccept = {false}
>
거절
</styled.ModalButton>
</styled.ModalButtonWrapper>
</>
</Modal> : null
}
<styled.ContentWrapper>
<styled.ContentTitle>
......
import styled, { keyframes } from 'styled-components';
import styled from 'styled-components';
const ModalOn = keyframes `
0% {
background-color : rgba(52, 52, 52, .0);
}
20% {
background-color : rgba(52, 52, 52, .2);
}
40% {
background-color : rgba(52, 52, 52, .4);
}
60% {
background-color : rgba(52, 52, 52, .5);
}
80% {
background-color : rgba(52, 52, 52, .6);
}
100% {
background-color : rgba(52, 52, 52, .7);
}
`;
export const Container = styled.div `
width : 100%;
height : 80vh;
......@@ -33,92 +11,6 @@ export const Container = styled.div `
`;
export const ModalContainer = styled.div `
height : 100%;
width : 100%;
z-index : 99;
position : absolute;
display : flex;
flex-direction : column;
animation : ${ModalOn} .5s;
background-color : rgba(52, 52, 52, .7);
`;
export const ModalClsButtonWrapper = styled.div `
flex : 1;
display : flex;
justify-content : flex-end;
align-items : center;
padding : 0 20px;
border : none;
background-color : transprent;
`;
export const ModalClsButton = styled.button `
border : none;
background-color : transparent;
cursor : pointer;
color : #fff;
display : flex;
flex-direction : row;
justify-content : center;
align-items : center;
transition : .25s all;
&:hover {
opacity : .5;
}
`;
export const ModalClsButtonImg = styled.img `
height : 20px;
width : 20px;
margin : 0 10px 0 0;
`;
export const ModalClsButtonText = styled.div `
font-size : 18px;
font-weight : 700;
`;
export const ModalContentWrapper = styled.div `
flex : 8;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
border : none;
`;
export const ModalContent = styled.div `
width : 700px;
height : 500px;
background-color : #fff;
border : 1.2px solid #337DFF;
border-radius : 5px;
display : flex;
flex-direction : column;
// justify-content : center;
align-items : center;
`;
export const ModalTitleWrapper = styled.div `
flex : 1;
border : none;
......
......@@ -67,7 +67,6 @@ const RegisterContainer = (props : RegisterProps) => {
}
};
const validateRegisterForm = () => {
if(page === 1) {
if (!validator.isEmail(registerForm.userId)) {
......@@ -196,8 +195,15 @@ const RegisterContainer = (props : RegisterProps) => {
setHospitalSearchPage(Math.ceil(hospitalSearchPage / pageSlice) * pageSlice + 1);
}
};
const onConfirmSelectHospital = () => {
setSearchHospital(false);
setHospitalSearchPage(1);
setHospitalSearchPageList([1]);
setHospitalList([]);
};
const onCancelSearchHospital = () => {
const onCancelSelectHospital = () => {
Alert.onCheck('병원 등록이 취소됩니다. 계속하시겠습니까?', () => {
setSearchHospital(false);
setHospitalNm('');
......@@ -296,7 +302,6 @@ const RegisterContainer = (props : RegisterProps) => {
onSetPasswordCheck = {onSetPasswordCheck}
onSetDoctorLicense = {onSetDoctorLicense}
hospitalNm = {hospitalNm}
setHospitalNm = {setHospitalNm}
onSetHospitalNm = {onSetHospitalNm}
onSetContact = {onSetContact}
onSetDoctorType = {onSetDoctorType}
......@@ -311,7 +316,9 @@ const RegisterContainer = (props : RegisterProps) => {
hospitalSearchPageList = {hospitalSearchPageList}
onSetSearchPrevPage = {onSetSearchPrevPage}
onSetSearchNextPage = {onSetSearchNextPage}
onCancelSearchHospital = {onCancelSearchHospital}
onConfirmSelectHospital = {onConfirmSelectHospital}
onCancelSelectHospital = {onCancelSelectHospital}
hospitalList = {hospitalList}
selectHospital = {selectHospital}
......
import React from 'react';
import Modal from '../../components/Modal';
import * as styled from './RegisterStyled';
const lensImg = '/static/img/lens.png';
const closeButton = '/static/img/close.png';
const check = '/static/img/check.png';
const uncheck = '/static/img/uncheck.png'
const next = '/static/img/next.png';
const prev = '/static/img/prev.png';
interface RegisterProps {
registerForm : {
......@@ -33,9 +35,7 @@ interface RegisterProps {
onSetPasswordCheck : React.ChangeEventHandler<HTMLInputElement>;
onSetDoctorLicense : React.ChangeEventHandler<HTMLInputElement>;
hospitalNm : string;
setHospitalNm : (arg0 : string) => void;
onSetHospitalNm : React.ChangeEventHandler<HTMLInputElement>;
// onSetHospitalAddr : React.ChangeEventHandler<HTMLInputElement>;
onSetContact : React.ChangeEventHandler<HTMLInputElement>;
onSetDoctorType : React.ChangeEventHandler<HTMLInputElement>;
onSetDoctorNm : React.ChangeEventHandler<HTMLInputElement>;
......@@ -50,7 +50,9 @@ interface RegisterProps {
hospitalSearchPageList : number[];
onSetSearchPrevPage : () => void;
onSetSearchNextPage : () => void;
onCancelSearchHospital : () => void;
onConfirmSelectHospital : () => void;
onCancelSelectHospital : () => void;
hospitalList : any[];
selectHospital : any;
......@@ -62,99 +64,91 @@ const RegisterPresenter = (props : RegisterProps) => {
<styled.Container>
{
props.searchHospital ?
<styled.ModalContainer>
<styled.ModalClsButtonWrapper>
<styled.ModalClsButton
onClick = {props.onCancelSearchHospital}
>
<styled.ModalClsButtonImg src = {closeButton}/>
<styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
</styled.ModalClsButton>
</styled.ModalClsButtonWrapper>
<styled.ModalContentWrapper>
<styled.ModalContent>
<styled.SearchTitle>
{`"${props.hospitalNm}"에 대한 검색 결과`}
</styled.SearchTitle>
<styled.HospitalListWrapper>
<styled.HospitalListInfo>
<styled.HospitalListInfoEach isLast = {false}>이름</styled.HospitalListInfoEach>
<styled.HospitalListInfoEach isLast = {false}>주소</styled.HospitalListInfoEach>
<styled.HospitalListInfoEach isLast = {true}>선택</styled.HospitalListInfoEach>
</styled.HospitalListInfo>
{
props.hospitalList.map((hospital : any) => {
return (
<styled.HospitalListEach
key = {hospital.addr}
>
<styled.HospitalListEachInfo isLast = {false}>
{hospital.yadmNm}
</styled.HospitalListEachInfo>
<styled.HospitalListEachInfo isLast = {false}>
{hospital.addr}
</styled.HospitalListEachInfo>
<styled.HospitalListEachInfo isLast = {true}>
<styled.CheckButton
onClick = {() => props.setSelectHospital(hospital)}
>
<styled.CheckButtonImg src = {
props.selectHospital && props.selectHospital.addr === hospital.addr ?
check : uncheck
}/>
</styled.CheckButton>
</styled.HospitalListEachInfo>
</styled.HospitalListEach>
)
})
}
</styled.HospitalListWrapper>
<styled.PageWrapper>
<styled.PageButton
isSelect = {false}
onClick = {props.onSetSearchPrevPage}
>
prev
</styled.PageButton>
{
props.hospitalSearchPageList.slice(Math.floor((props.hospitalSearchPage - 1) / 5) * 5, Math.floor((props.hospitalSearchPage - 1) / 5) * 5 + 5)
.map((page : number) => {
return (
<styled.PageButton
key = {page}
isSelect = {props.hospitalSearchPage === page}
onClick = {() => props.setHospitalSearchPage(page)}
<Modal onModalClose = {props.onCancelSelectHospital}>
<>
<styled.SearchTitle>
{`[${props.hospitalNm}] 에 대한 검색 결과 : `}
<styled.SearchResultCount style = {{marginLeft : 5, marginRight : 5,}}>총 </styled.SearchResultCount>
{props.hospitalSearchPageList.length}
<styled.SearchResultCount>페이지</styled.SearchResultCount>
</styled.SearchTitle>
<styled.HospitalListWrapper>
<styled.HospitalListInfo>
<styled.HospitalListInfoEach isLast = {false}>이름</styled.HospitalListInfoEach>
<styled.HospitalListInfoEach isLast = {false}>주소</styled.HospitalListInfoEach>
<styled.HospitalListInfoEach isLast = {true}>선택</styled.HospitalListInfoEach>
</styled.HospitalListInfo>
{
props.hospitalList.map((hospital : any) => {
return (
<styled.HospitalListEach
key = {hospital.addr}
>
<styled.HospitalListEachInfo isLast = {false}>
{hospital.yadmNm}
</styled.HospitalListEachInfo>
<styled.HospitalListEachInfo isLast = {false}>
{hospital.addr}
</styled.HospitalListEachInfo>
<styled.HospitalListEachInfo isLast = {true}>
<styled.CheckButton
onClick = {() => props.setSelectHospital(hospital)}
>
{page}
</styled.PageButton>
)
})
}
<styled.PageButton
isSelect = {false}
onClick = {props.onSetSearchNextPage}
>
next
</styled.PageButton>
</styled.PageWrapper>
<styled.ModalButtonWrapper>
<styled.ModalButton
isCloseButton = {false}
onClick = {() => props.setSearchHospital(false)}
>
확인
</styled.ModalButton>
<styled.ModalButton
isCloseButton = {true}
onClick = {props.onCancelSearchHospital}
>
취소
</styled.ModalButton>
</styled.ModalButtonWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
<styled.ModalClsButtonWrapper />
</styled.ModalContainer>
<styled.CheckButtonImg src = {
props.selectHospital && props.selectHospital.addr === hospital.addr ?
check : uncheck
}/>
</styled.CheckButton>
</styled.HospitalListEachInfo>
</styled.HospitalListEach>
)
})
}
</styled.HospitalListWrapper>
<styled.PageWrapper>
<styled.PageButton
isSelect = {false}
onClick = {props.onSetSearchPrevPage}
>
<styled.PageArrowImg src = {prev}/>
</styled.PageButton>
{
props.hospitalSearchPageList.slice(Math.floor((props.hospitalSearchPage - 1) / 5) * 5, Math.floor((props.hospitalSearchPage - 1) / 5) * 5 + 5)
.map((page : number) => {
return (
<styled.PageButton
key = {page}
isSelect = {props.hospitalSearchPage === page}
onClick = {() => props.setHospitalSearchPage(page)}
>
{page}
</styled.PageButton>
)
})
}
<styled.PageButton
isSelect = {false}
onClick = {props.onSetSearchNextPage}
>
<styled.PageArrowImg src = {next}/>
</styled.PageButton>
</styled.PageWrapper>
<styled.ModalButtonWrapper>
<styled.ModalButton
isCloseButton = {false}
onClick = {props.onConfirmSelectHospital}
>
확인
</styled.ModalButton>
<styled.ModalButton
isCloseButton = {true}
onClick = {props.onCancelSelectHospital}
>
취소
</styled.ModalButton>
</styled.ModalButtonWrapper>
</>
</Modal>
:null
}
<styled.RegisterWrapper>
......
import styled, { keyframes } from 'styled-components';
const ModalOn = keyframes `
0% {
background-color : rgba(52, 52, 52, .0);
}
20% {
background-color : rgba(52, 52, 52, .2);
}
40% {
background-color : rgba(52, 52, 52, .4);
}
60% {
background-color : rgba(52, 52, 52, .5);
}
80% {
background-color : rgba(52, 52, 52, .6);
}
100% {
background-color : rgba(52, 52, 52, .7);
}
`;
import styled from 'styled-components';
export const Container = styled.div `
......@@ -33,99 +10,22 @@ export const Container = styled.div `
align-items : center;
`;
export const ModalContainer = styled.div `
height : 100%;
width : 100%;
z-index : 99;
position : absolute;
display : flex;
flex-direction : column;
animation : ${ModalOn} .5s;
background-color : rgba(52, 52, 52, .7);
`;
export const ModalClsButtonWrapper = styled.div `
flex : 1;
display : flex;
justify-content : flex-end;
align-items : center;
padding : 0 20px;
border : none;
background-color : transprent;
`;
export const ModalClsButton = styled.button `
border : none;
background-color : transparent;
cursor : pointer;
export const SearchTitle = styled.div `
font-weight : 600;
font-size : 20;
color : #fff;
color : #337DFF;
display : flex;
flex-direction : row;
justify-content : center;
align-items : center;
transition : .25s all;
&:hover {
opacity : .5;
}
`;
export const ModalClsButtonImg = styled.img `
height : 20px;
width : 20px;
margin : 0 10px 0 0;
`;
export const ModalClsButtonText = styled.div `
font-size : 18px;
font-weight : 700;
`;
export const ModalContentWrapper = styled.div `
flex : 8;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
border : none;
`;
export const ModalContent = styled.div `
width : 600px;
height : 400px;
background-color : #fff;
border : 1.2px solid #337DFF;
border-radius : 5px;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
`;
export const SearchTitle = styled.div `
font-weight : 600;
font-size : 20;
color : #337DFF;
export const SearchResultCount = styled.div `
color : #343434;
`;
export const HospitalListWrapper = styled.div `
......@@ -135,6 +35,7 @@ export const HospitalListWrapper = styled.div `
width : 80%;
border : 1px solid #337DFF;
border-radius : 3px;
display : flex;
flex-direction : column;
......@@ -142,11 +43,11 @@ export const HospitalListWrapper = styled.div `
export const HospitalListInfo = styled.div `
height : 20px;
height : 25px;
width : 100%;
border : none;
border-bottom : 1px solid #ddd;
border-bottom : 2px solid #ddd;
display : flex;
flex-direction : row;
......@@ -171,8 +72,8 @@ export const HospitalListInfoEach = styled.div<{isLast : boolean}> `
`;
export const HospitalListEach = styled.div `
min-height : 35px;
max-height : 35px;
min-height : 34px;
max-height : 34px;
width : 100%;
display : flex;
......