응급구조사편_의료서비스 검색화면 및 로직2

 

---

 

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤

gayulz - Overview

 

GitHub - gayulz/EMBAD_project: EMBAD , MY PROJECT

 

---

 

 

 

 

응급구조사가 요구한 내용을 처리하여 화면에 응답했다 ,

그다음 제공해야 할 서비스는 어떤 내용일까

1. 현재 사용자의 위치
2. 요구한 서비스가 가능한 병원의 정보
3. 병원의 위치 시각화
4. 접수
   이 병원 데이터는 국립중앙의료원_전국 응급의료기관 정보 조회 서비스 API응답값을 기반으로 출력하며
   실시간으로 응급실 가용병상을 조회하는 데이터이다

 

 

 

 

이전 포스팅에 컨트롤러 소스코드에 보면 prmMatching이라는 곳으로 return 하게 되어있다
이 파일명은 뷰리졸버에 의해 prmMatching.jsp파일 경로로 이동하며 해당 파일의 내용을
클라이언트 화면에 랜더링 하게 된다

컨트롤러가 전달하는 데이터

 

 

    model.addAttribute("list", list);  
    model.addAttribute("KAKAO_MAP_KEY", KAKAO_MAP_KEY);  
    return "paramedicSite/prmMatching";

list는 지금 스샷에 찍혀있는 병원 목록이다.
KAKAO_MAP_KEY는 카카오지도 API의 서비스 키인데 이것 또한 노출되면 안 되기 때문에
컨트롤러가 model에 추가시켜 전달하는 방식으로 했다.

prmMatching.jsp파일의 소스코드를 보면 생각보다 길지 않다.

 

 

 

<section>  
    <div style="width: 100%; height: 800px">  
        <div id="map" style="filter: blur(0px);" class="blurred-map"></div>  
        <div class="overlay">  
            <div class="shadow p-3 mb-5 bg-body-tertiary rounded" style="width: 100%; height: 750px; ">  
                <p class="fs-1"> 🏥 병원 목록 🏥 </p>  
                <div class="text-success">  
                    <hr>  
                </div>  
                <div class="overflow-scroll" style="height: 600px; overflow-y: auto;">  
                    <c:forEach items="${list}" var="list">  
                        <form action="/chartReception" method="post">  
                            <p class="h3" id="dutyname"> ◼︎ 병원 이름 : ${list.dutyname} </p>  
                            <p class="lead"> ${list.dutyAddr} </p>  
                            <p class="h5">대표 전화번호 : ${list.dutytel1}</p>  
                            <p class="h5">응급실 전화번호 : ${list.dutytel3}</p>  
                            <input type="hidden" name="hpid" value="${list.hpid}">  
                            <p style="display: none;" name="wgs84Lon" value="${list.wgs84Lon}"> ${list.wgs84Lon}</p>  
                            <p style="display: none;" name="wgs84Lat" value="${list.wgs84Lat}"> ${list.wgs84Lat}</p>  
                              
                            <button type="submit" class="btn btn-secondary" style="width: 100%;">병원 접수</button>  
                        </form>  
                    </c:forEach>  
                </div>            </div>  
        </div>  
    </div>  
</section>

 

 

sesction영역은 이렇게 되어있고
script영역은

 

 

<script src="<%=request.getContextPath()%>/resources/javascript/kakaoMapApi.js"></script>  
<script type="text/javascript">  
    var hospitalData = [];  
    hospitalData = [  
        <c:forEach items="${list}" var="hospital" varStatus="status">  
        {  
            content: '<div style="font-size:17px;">${hospital.dutyname}</div>',  
            latlng: new kakao.maps.LatLng(${hospital.wgs84Lat}, ${hospital.wgs84Lon})  
        }<c:if test="${!status.last}">, </c:if>  
        </c:forEach>  
    ];  
    addMarkerImage(hospitalData);  
</script>

 

 

이렇게 구성되어있다
반복되는 header와 footer는 include 진행하였다.
section에서 데이터출력은 c:forEach를 사용하여 컨트롤러에게 전달받은 데이터를 사용하도록 했다
순회하면서 출력하도록 진행했고 순회할 때마다 각각의 form 영역으로 진행되도록 했다.
위치의 위도 경도를 기준으로 script를 통해 카카오지도 위에 표시되도록 진행했다.
카카오지도 API는 2가지 이미지가 오버레이 되어있는데
1개는 사용자 현재 위치인 응급차 이미지와 지도의 포인트 표시인 빨간색 포인트가 있다.
빨간 포인트 위에 마우스를 올리게 되면 해당 병원의 이름이 나온다
확대와 축소는 마우스 휠로 확대 축소가 가능하다
사용자가 원하는 병원명 밑에 접수버튼을 누르게 되면 해당 병원으로 접수를 진행하게 된다