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 214 additions and 550 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,17 +32,8 @@ 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>
<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>
......@@ -65,9 +56,8 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
<styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.antiEffect}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
</styled.MedicineInfoWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
</styled.ModalContainer> : null
</>
</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';
......@@ -76,17 +77,8 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
<styled.Container>
{
props.newPatientRegisterModal ?
<styled.ModalContainer>
<styled.ModalClsButtonWrapper>
<styled.ModalClsButton
onClick = {() => props.setNewPatientRegisterModal(false)}
>
<styled.ModalClsButtonImg src = {closeButton}/>
<styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
</styled.ModalClsButton>
</styled.ModalClsButtonWrapper>
<styled.ModalContentWrapper>
<styled.ModalContent>
<Modal onModalClose = {() => props.setNewPatientRegisterModal(false)}>
<>
<styled.NewPatientRegisterTitle>새 환자 등록</styled.NewPatientRegisterTitle>
<styled.NewPatientSearchWrapper>
<styled.NewPatientSearchInput
......@@ -126,24 +118,13 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
취소
</styled.NewPatientRegisterButton>
</styled.NewPatientRegisterButtonWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
<styled.ModalClsButtonWrapper/>
</styled.ModalContainer> : null
</>
</Modal> : null
}
{
props.editModal ?
<styled.ModalContainer>
<styled.ModalClsButtonWrapper>
<styled.ModalClsButton
onClick = {() => props.setEditModal(false)}
>
<styled.ModalClsButtonImg src = {closeButton}/>
<styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
</styled.ModalClsButton>
</styled.ModalClsButtonWrapper>
<styled.ModalContentWrapper>
<styled.ModalContent>
<Modal onModalClose = {() => props.setEditModal(false)}>
<>
<styled.PatientInfoViewContainer>
<styled.PatientInfoPatientNmWrapper>
<styled.PatientInfoPatientNmInfo>이름 : </styled.PatientInfoPatientNmInfo>
......@@ -180,24 +161,13 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
취소
</styled.PatientInfoEditButton>
</styled.PatientInfoEditButtonWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
<styled.ModalClsButtonWrapper/>
</styled.ModalContainer> : null
</>
</Modal> : null
}
{
props.prescribeModal ?
<styled.ModalContainer>
<styled.ModalClsButtonWrapper>
<styled.ModalClsButton
onClick = {props.onCloseModal}
>
<styled.ModalClsButtonImg src = {closeButton}/>
<styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
</styled.ModalClsButton>
</styled.ModalClsButtonWrapper>
<styled.ModalContentWrapper>
<styled.ModalContent>
<Modal onModalClose = {props.onCloseModal}>
<>
<styled.MedicineSearchTitle>
{
props.prescribeModalStep === 1 ?
......@@ -307,10 +277,8 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
취소
</styled.MedicinePrescribeButton>
</styled.MedicinePrescribeButtonWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
<styled.ModalClsButtonWrapper/>
</styled.ModalContainer> : null
</>
</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,17 +24,8 @@ const ManagerMenuPresenter = (props : ManagerMenuProps) => {
<styled.Container>
{
props.modalUp ?
<styled.ModalContainer>
<styled.ModalClsButtonWrapper>
<styled.ModalClsButton
onClick = {() => props.setModalUp(false)}
>
<styled.ModalClsButtonImg src = {closeButton}/>
<styled.ModalClsButtonText>닫기</styled.ModalClsButtonText>
</styled.ModalClsButton>
</styled.ModalClsButtonWrapper>
<styled.ModalContentWrapper>
<styled.ModalContent>
<Modal onModalClose = {() => props.setModalUp(false)}>
<>
<styled.ModalTitleWrapper>
<styled.ModalTitle>가입 요청 정보</styled.ModalTitle>
</styled.ModalTitleWrapper>
......@@ -100,10 +89,8 @@ const ManagerMenuPresenter = (props : ManagerMenuProps) => {
거절
</styled.ModalButton>
</styled.ModalButtonWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
<styled.ModalClsButtonWrapper/>
</styled.ModalContainer> : null
</>
</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)) {
......@@ -197,7 +196,14 @@ const RegisterContainer = (props : RegisterProps) => {
}
};
const onCancelSearchHospital = () => {
const onConfirmSelectHospital = () => {
setSearchHospital(false);
setHospitalSearchPage(1);
setHospitalSearchPageList([1]);
setHospitalList([]);
};
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,19 +64,13 @@ 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>
<Modal onModalClose = {props.onCancelSelectHospital}>
<>
<styled.SearchTitle>
{`"${props.hospitalNm}"에 대한 검색 결과`}
{`[${props.hospitalNm}] 에 대한 검색 결과 : `}
<styled.SearchResultCount style = {{marginLeft : 5, marginRight : 5,}}>총 </styled.SearchResultCount>
{props.hospitalSearchPageList.length}
<styled.SearchResultCount>페이지</styled.SearchResultCount>
</styled.SearchTitle>
<styled.HospitalListWrapper>
<styled.HospitalListInfo>
......@@ -114,7 +110,7 @@ const RegisterPresenter = (props : RegisterProps) => {
isSelect = {false}
onClick = {props.onSetSearchPrevPage}
>
prev
<styled.PageArrowImg src = {prev}/>
</styled.PageButton>
{
props.hospitalSearchPageList.slice(Math.floor((props.hospitalSearchPage - 1) / 5) * 5, Math.floor((props.hospitalSearchPage - 1) / 5) * 5 + 5)
......@@ -134,27 +130,25 @@ const RegisterPresenter = (props : RegisterProps) => {
isSelect = {false}
onClick = {props.onSetSearchNextPage}
>
next
<styled.PageArrowImg src = {next}/>
</styled.PageButton>
</styled.PageWrapper>
<styled.ModalButtonWrapper>
<styled.ModalButton
isCloseButton = {false}
onClick = {() => props.setSearchHospital(false)}
onClick = {props.onConfirmSelectHospital}
>
확인
</styled.ModalButton>
<styled.ModalButton
isCloseButton = {true}
onClick = {props.onCancelSearchHospital}
onClick = {props.onCancelSelectHospital}
>
취소
</styled.ModalButton>
</styled.ModalButtonWrapper>
</styled.ModalContent>
</styled.ModalContentWrapper>
<styled.ModalClsButtonWrapper />
</styled.ModalContainer>
</>
</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;
......