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
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 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}
......
This diff is collapsed. Click to expand it.
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;
......