건강정보기록 체온,맥박수/혈압, 산소포화도, 혈당

src/main/java/com/lemon/lifecenter/controller/MobileHealthController.java

@@ -1,18 +1,74 @@
 package com.lemon.lifecenter.controller;
 
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.ModelAttribute;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.servlet.ModelAndView;
 
 import com.lemon.lifecenter.common.LifeCenterController;
+import com.lemon.lifecenter.common.LifeCenterFunction;
+import com.lemon.lifecenter.common.LifeCenterSessionController;
+import com.lemon.lifecenter.dto.LoginDTO;
+import com.lemon.lifecenter.dto.PatientPHRHistoryDTO;
+import com.lemon.lifecenter.service.PHRService;
 
 @Controller
 @RequestMapping("/mobile")
 public class MobileHealthController extends LifeCenterController {
     
+    @Autowired
+    private PHRService phrService;
+    
     @RequestMapping("/health")
-    public ModelAndView menu() {
-        ModelAndView mv = setMobileMV("health/health");
+    public String healthHome() {
+        ModelAndView mv = setMobileMV( "health/health/1" );
+        return "redirect:./health/1";
+    }
+    
+    @RequestMapping("/health/{number}")
+    public ModelAndView health( @PathVariable("number") int number ) {
+        ModelAndView mv = setMobileMV( "health/health" + number );
         return mv;
     }
+    
+    @RequestMapping("/health/insert")
+    public String healthInsert( @ModelAttribute("dto") final PatientPHRHistoryDTO dto,
+            @RequestParam( value="phrTypeAnother", required=false, defaultValue="" ) String phrTypeAnother,
+            @RequestParam( value="phrValueAnother", required=false, defaultValue="" ) String phrValueAnother,
+            @RequestParam( value="phrValueAnother2", required=false, defaultValue="" ) String phrValueAnother2,
+            HttpServletRequest request, HttpServletResponse response ) {
+        String patientName = LifeCenterSessionController.getSession( request, "sesMName" );
+        int patientIdx     = Integer.valueOf( LifeCenterSessionController.getSession( request, "sesMpIdx" ) );
+        
+        System.out.println(" phrValue : " + dto.getPhrValue() );
+        
+        
+        dto.setPatientIdx( patientIdx );
+        dto.setRecordedByName( patientName+"(환자)" );
+        phrService.insertPHR( dto );
+        
+        if( !phrTypeAnother.trim().equals( "" ) ) {
+            dto.setPhrType( phrTypeAnother );
+            
+            if( !phrValueAnother.equals( "" ) ) {
+                dto.setPhrValue( Float.valueOf( phrValueAnother ) );
+            }
+            
+            if( !phrValueAnother2.equals( "" ) ) {
+                dto.setPhrValue2( Float.valueOf( phrValueAnother2 ) );
+            }
+            
+            phrService.insertPHR( dto );
+        }
+        
+        LifeCenterFunction.scriptMessage(response, "alert('기록되었습니다');location.href='/mobile/menu';" );
+        return "/common/black";
+    }
+    
 }

src/main/webapp/WEB-INF/jsp/mobile/health/health.jsp

@@ -1,166 +0,0 @@
-<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
-<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
-<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
-<style>
-.datepicker-days td.day,
-.datepicker-days th.dow{font-size:17px;}
-.datepicker-days th.dow{padding-top:15px;}
-.datepicker-days th.prev,
-.datepicker-days th.next{font-size:24px;border:1px solid #EAEAEA;}
-.datepicker-days tbody tr td.day:first-child,
-.datepicker-days thead tr th.dow:first-child { color: red;}
-.datepicker-days tbody tr td.day:last-child,
-.datepicker-days thead tr th.dow:last-child { color: blue;}
-.datepicker-days tfoot tr th.today{background:#427BDC;color:#FFFFFF;height:50px;margin-top:20px;}
-.datepicker.dropdown-menu th, .datepicker.datepicker-inline th, .datepicker.dropdown-menu td, .datepicker.datepicker-inline td{padding:5px;border:1px solid #EAEAEA;}
-.datepicker .datepicker-switch{height:60px;font-size:20px;border:1px solid #EAEAEA;}
-.table-condensed{width:350px;}
-</style>
-<script type="text/javascript">
-$( function(){
-	$('#input.timePicker').datetimepicker({
-        datepicker: { showOtherMonths: true },
-        modal: true,
-        footer: true
-    });
-	
-    $('input.datePicker').datepicker({
-    	setDate: new Date(),
-        format: "yyyy-mm-dd",   //데이터 포맷 형식(yyyy : 년 mm : 월 dd : 일 )
-        //startDate: '-10d',  //달력에서 선택 할 수 있는 가장 빠른 날짜. 이전으로는 선택 불가능 ( d : 일 m : 달 y : 년 w : 주)
-        //endDate: '+10d',    //달력에서 선택 할 수 있는 가장 느린 날짜. 이후로 선택 불가 ( d : 일 m : 달 y : 년 w : 주)
-        autoclose : true,   //사용자가 날짜를 클릭하면 자동 캘린더가 닫히는 옵션
-        calendarWeeks : false, //캘린더 옆에 몇 주차인지 보여주는 옵션 기본값 false 보여주려면 true
-        //clearBtn : true, //날짜 선택한 값 초기화 해주는 버튼 보여주는 옵션 기본값 false 보여주려면 true
-       // datesDisabled : ['2019-06-24','2019-06-26'],//선택 불가능한 일 설정 하는 배열 위에 있는 format 과 형식이 같아야함.
-        //daysOfWeekDisabled : [0,6], //선택 불가능한 요일 설정 0 : 일요일 ~ 6 : 토요일
-        //daysOfWeekHighlighted : [0, 6], //강조 되어야 하는 요일 설정
-        disableTouchKeyboard : false,   //모바일에서 플러그인 작동 여부 기본값 false 가 작동 true가 작동 안함.
-        immediateUpdates: false,    //사용자가 보는 화면으로 바로바로 날짜를 변경할지 여부 기본값 :false 
-        multidate : false, //여러 날짜 선택할 수 있게 하는 옵션 기본값 :false 
-        multidateSeparator :",", //여러 날짜를 선택했을 때 사이에 나타나는 글짜 2019-05-01,2019-06-01
-        templates : {
-            leftArrow: '&laquo;',
-            rightArrow: '&raquo;'
-        }, //다음달 이전달로 넘어가는 화살표 모양 커스텀 마이징 
-        showWeekDays : true ,// 위에 요일 보여주는 옵션 기본값 : true
-        //title: "날짜를 선택해주세요",   //캘린더 상단에 보여주는 타이틀
-        todayHighlight : true , //오늘 날짜에 하이라이팅 기능 기본값 :false 
-        //toggleActive : true,    //이미 선택된 날짜 선택하면 기본값 : false인경우 그대로 유지 true인 경우 날짜 삭제
-        weekStart : 0 ,//달력 시작 요일 선택하는 것 기본값은 0인 일요일 
-        language : "ko", //달력의 언어 선택, 그에 맞는 js로 교체해줘야한다.
-        todayBtn:'linked'
-    });
-});
-</script>
-
-</head>
-<body>
-    <div id="sub">
-        <div class="container">
-            <div class="header">
-                <div class="previous">
-                    <a href="javascript:;">이전</a>
-                </div>
-                <div class="title">
-                    건강정보기록
-                </div>
-            </div>
-            <div class="device_tab">
-                <ul>
-                    <li>
-                        <a href="javascript:;" class="one active">
-                            체온
-                        </a>
-                    </li>
-                    <li>
-                        <a href="health_check_2.html" class="two">
-                            맥박수/혈압
-                        </a>
-                    </li>
-                    <li>
-                        <a href="health_check_3.html" class="three">
-                            산소포화도
-                        </a>
-                    </li>
-                    <li>
-                        <a href="health_check_4.html" class="four">
-                            혈당
-                        </a>
-                    </li>
-                    <li>
-                        <a href="health_check_5.html" class="five">
-                            임상증상
-                        </a>
-                    </li>
-                </ul>
-            </div>
-            <div class="health">
-                <div class="popup" data-popup="popup-time">
-                    <div class="pop_inner">
-                        <div class="time">
-                            <label class="apm">
-                                <select>
-                                    <option>오전</option>
-                                    <option>오후</option>
-                                </select>
-                            </label>
-                            <label class="hour">
-                                <select>
-                                    <c:forEach var="h" begin="1" end="12" step="1">
-                                        <fmt:formatNumber var="hour" minIntegerDigits="2" value="${h}" type="number"/>
-                                        <option value="${hour}">${hour} 시</option>
-                                    </c:forEach>
-                                </select>
-                            </label>
-                            <label class="minitues">
-                                <select>
-                                    <c:forEach var="m" begin="0" end="59" step="1">
-                                        <fmt:formatNumber var="min" minIntegerDigits="2" value="${m}" type="number"/>
-                                        <option value="${min}">${min} 분</option>
-                                    </c:forEach>
-                                </select>
-                            </label>
-                        </div>
-                        <div class="btn">
-                            <ul>
-                                <li>
-                                    <a href="javascript:;" class="cancle" data-popup-close="popup-time">취소</a>
-                                </li>
-                                <li>
-                                    <a href="javascript:;" class="confirm">확인</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div class="part">
-                    <div class="title">날짜</div>
-                    <div class="input day">
-<!--                         <a href="javascript:;" data-popup-open="popup-calendar">d</a> -->
-                        <input type="text" class="datePicker form-control" name="" value="" placeholder="">
-                    </div>
-                </div>
-                <div class="part">
-                    <div class="title">측정시간</div>
-                    <div class="input time">
-<!--                         <a href="javascript:;" data-popup-open="popup-time">d</a> -->
-                        <input type="text" class="timePicker" name="" placeholder="오전 09:09">
-                    </div>
-                </div>
-                <div class="data unlink">
-                    <div class="point"><input type="text" name="" placeholder="00.00"> ℃</div>
-                </div>
-            </div>
-            <div class="btn_group">
-                <ul>
-                    <li>
-                        <a href="javascript:;" class="confirm"><span class="check">기록하기</span></a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</body>
-</html>

src/main/webapp/WEB-INF/jsp/mobile/health/health1.jsp

@@ -0,0 +1,106 @@
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
+<script type="text/javascript" src="/resources/js/mobile/health.js"></script>
+<script>
+$( function(){
+    $( "#healthForm" ).validate({
+        onkeyup: function( element, event ) {
+            $( "div.error-msg" ).text( "" );
+        },
+        onfocusout: function (element) {
+            $( "div.error-msg" ).text( "" );
+        },
+        submitHandler: function(form) {
+            var prev = $.trim( $( "input[name='temperaturePrev']" ).val() );
+            var next = $.trim( $( "input[name='temperatureNext']" ).val() );
+            
+            if( prev.length != 2 || next.length != 1 ) {
+                $( "div.error-msg" ).text( "체온을 정확히 입력해주세요" );
+            } else {
+                $( "#phrValue" ).val( prev+"."+next );
+                form.submit();
+            }
+        }
+    });
+})
+</script>
+</head>
+<body>
+    <div id="sub">
+        <div class="container">
+            <div class="header">
+                <div class="previous">
+                    <a href="/mobile/menu">이전</a>
+                </div>
+                <div class="title">건강정보기록</div>
+            </div>
+            <div class="device_tab">
+                <ul>
+                    <li>
+                        <a href="./1" class="one active">체온</a>
+                    </li>
+                    <li>
+                        <a href="./2" class="two">맥박수/혈압</a>
+                    </li>
+                    <li>
+                        <a href="./3" class="three">산소포화도</a>
+                    </li>
+                    <li>
+                        <a href="./4" class="four">혈당</a>
+                    </li>
+                    <li>
+                        <a href="./5" class="five">임상증상</a>
+                    </li>
+                </ul>
+            </div>
+            
+            <form id="healthForm" method="post" action="./insert">
+                <div class="health">
+                    <div class="part">
+                        <div class="title">날짜</div>
+                        <div class="input day">
+                            <a href="javascript:;" data-popup-open="popup-calendar">d</a>
+                            <input type="text" class="datePicker form-control" placeholder="현재 날짜" readonly>
+                        </div>
+                    </div>
+                    <div class="part">
+                        <div class="title">측정시간</div>
+                        <div class="input time">
+                            <a href="javascript:;" data-popup-open="popup-time">d</a>
+                            <input type="text" class="timePicker" placeholder="현재 시간" readonly>
+                        </div>
+                    </div>
+                    
+                    <div class="part tac mt30">
+                        <div class="title">체온을 입력해주세요</div>
+                        <div class="input time">
+                        </div>
+                    </div>
+                    
+                    <div class="data unlink">
+                        <div class="point">
+                            <input type="tel" class="prev" name="temperaturePrev" placeholder="36" maxlength="2"><span class="dot"></span><input type="tel" class="next m1" name="temperatureNext" placeholder="5" maxlength="1"> ℃
+                        </div>
+                    </div>
+                    
+                    <div class="error-msg tac mt20 error"></div>
+                </div>
+                
+                <div class="btn_group">
+                    <ul>
+                        <li>
+                            <input type="hidden" name="phrType" value="temperature">
+                            <input type="hidden" id="phrValue" name="phrValue" value="">
+                            <input type="hidden" id="phrValue2" name="phrValue2" value="">
+                            
+                            <button type="submit" class="confirm"><span class="check">기록하기</span></button>
+                        </li>
+                    </ul>
+                </div>
+            </form>
+        </div>
+    </div>
+</body>
+</html>

src/main/webapp/WEB-INF/jsp/mobile/health/health2.jsp

@@ -0,0 +1,141 @@
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
+<script type="text/javascript" src="/resources/js/mobile/health.js"></script>
+<script>
+$( function(){
+    $( "#healthForm" ).validate({
+        onkeyup: function( element, event ) {
+            $( "div.error-msg" ).text( "" );
+        },
+        onfocusout: function (element) {
+            $( "div.error-msg" ).text( "" );
+        },
+        submitHandler: function(form) {
+            //맥박수
+            var prev = $.trim( $( "input[name='pulseRatePrev']" ).val() );
+            var next = $.trim( $( "input[name='pulseRateNext']" ).val() );
+            
+            //혈압
+            var prevAn = $.trim( $( "input[name='bloodPressurePrev']" ).val() );
+            var nextAn = $.trim( $( "input[name='bloodPressureNext']" ).val() );
+            var prevAn2 = $.trim( $( "input[name='bloodPressurePrev2']" ).val() );
+            var nextAn2 = $.trim( $( "input[name='bloodPressureNext2']" ).val() );
+            
+            //혈압
+            if( prev.length == 1 || next.length == 0 ) {
+                $( "div.error-msg" ).text( "맥박수를 정확히 입력해주세요 (소수점자리까지 입력)" );
+            } else if( prevAn.length == 1 || nextAn.length == 0 ) {
+                $( "div.error-msg" ).text( "수축기 혈압을 정확히 입력해주세요 (소수점자리까지 입력)" );
+            } else if( prevAn2.length == 1 || nextAn2.length == 0 ) {
+                $( "div.error-msg" ).text( "이완기 혈압을 정확히 입력해주세요 (소수점자리까지 입력)" );
+            } else {
+                $( "#phrValue" ).val( prev+"."+next );
+                $( "#phrValueAnother" ).val( prevAn+"."+nextAn );
+                $( "#phrValueAnother2" ).val( prevAn2+"."+nextAn2 );
+                form.submit();
+            }
+        }
+    });
+})
+</script>
+</head>
+<body>
+    <div id="sub">
+        <div class="container">
+            <div class="header">
+                <div class="previous">
+                    <a href="/mobile/menu">이전</a>
+                </div>
+                <div class="title">건강정보기록</div>
+            </div>
+            <div class="device_tab">
+                <ul>
+                    <li>
+                        <a href="./1" class="one">체온</a>
+                    </li>
+                    <li>
+                        <a href="./2" class="two active">맥박수/혈압</a>
+                    </li>
+                    <li>
+                        <a href="./3" class="three">산소포화도</a>
+                    </li>
+                    <li>
+                        <a href="./4" class="four">혈당</a>
+                    </li>
+                    <li>
+                        <a href="./5" class="five">임상증상</a>
+                    </li>
+                </ul>
+            </div>
+            
+            <form id="healthForm" method="post" action="./insert">
+                <div class="health">
+                    <div class="part">
+                        <div class="title">날짜</div>
+                        <div class="input day">
+                            <a href="javascript:;" data-popup-open="popup-calendar">d</a>
+                            <input type="text" class="datePicker form-control" placeholder="현재 날짜" readonly>
+                        </div>
+                    </div>
+                    <div class="part">
+                        <div class="title">측정시간</div>
+                        <div class="input time">
+                            <a href="javascript:;" data-popup-open="popup-time">d</a>
+                            <input type="text" class="timePicker" placeholder="현재 시간" readonly>
+                        </div>
+                    </div>
+                    
+                    <div class="part tac mt30">
+                        <div class="title">맥박수와 혈압을 입력해주세요</div>
+                        <div class="input time">
+                        </div>
+                    </div>
+                    
+                    <div class="data link">
+                        <div class="point">
+                            <input type="tel" class="prev m3" name="pulseRatePrev" placeholder="100" maxlength="3"><span class="dot"></span><input type="tel" class="next" name="pulseRateNext" placeholder="00" maxlength="2"><span class="mini">bpm</span>
+                        </div>
+                        
+                        <div class="table">
+                            <table>
+                                <thead>
+                                    <tr>
+                                        <th>수축기</th>
+                                        <th>이완기</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td><input type="tel" class="prev m3" name="bloodPressurePrev" placeholder="130" maxlength="2"><span class="dot"></span><input type="tel" class="next" name="bloodPressureNext" placeholder="00" maxlength="2"><span class="mini">mmHg</span></td>
+                                        <td><input type="tel" class="prev" name="bloodPressurePrev2" placeholder="80" maxlength="2"><span class="dot"></span><input type="tel" class="next" name="bloodPressureNext2" placeholder="00" maxlength="2"><span class="mini">mmHg</span></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    
+                    <div class="error-msg tac mt20 error"></div>
+                </div>
+                
+                <div class="btn_group">
+                    <ul>
+                        <li>
+                            <input type="hidden" name="phrType" value="pulseRate">
+                            <input type="hidden" id="phrValue" name="phrValue" value="">
+                            <input type="hidden" id="phrValue2" name="phrValue2" value="">
+                            
+                            <input type="hidden" name="phrTypeAnother" value="bloodPressure">
+                            <input type="hidden" id="phrValueAnother" name="phrValueAnother" value="">
+                            <input type="hidden" id="phrValueAnother2" name="phrValueAnother2" value="">
+                            
+                            <button type="submit" class="confirm"><span class="check">기록하기</span></button>
+                        </li>
+                    </ul>
+                </div>
+            </form>
+        </div>
+    </div>
+</body>
+</html>

src/main/webapp/WEB-INF/jsp/mobile/health/health3.jsp

@@ -0,0 +1,118 @@
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
+<script type="text/javascript" src="/resources/js/mobile/health.js"></script>
+<script>
+$( function(){
+    $( "#healthForm" ).validate({
+        onkeyup: function( element, event ) {
+            $( "div.error-msg" ).text( "" );
+        },
+        onfocusout: function (element) {
+            $( "div.error-msg" ).text( "" );
+        },
+        submitHandler: function(form) {
+            var prev = $.trim( $( "input[name='oxygenSaturationPrev']" ).val() );
+            var next = $.trim( $( "input[name='oxygenSaturationNext']" ).val() );
+            
+            var prev2 = $.trim( $( "input[name='oxygenSaturationPrev2']" ).val() );
+            var next2 = $.trim( $( "input[name='oxygenSaturationNext2']" ).val() );
+            
+            if( prev.length == 1 || next.length == 0 ) {
+                $( "div.error-msg" ).text( "산소포화도 % 를 입력하세요 (소수점자리까지 입력)" );
+            } else if( prev2.length == 1 || next2.length == 0 ) {
+                $( "div.error-msg" ).text( "산소포화도 bpm 을 입력하세요 (소수점자리까지 입력)" );
+            } else {
+                $( "#phrValue" ).val( prev+"."+next );
+                $( "#phrValue2" ).val( prev2+"."+next2 );
+                
+                form.submit();
+            }
+        }
+    });
+})
+</script>
+</head>
+<body>
+    <div id="sub">
+        <div class="container">
+            <div class="header">
+                <div class="previous">
+                    <a href="/mobile/menu">이전</a>
+                </div>
+                <div class="title">건강정보기록</div>
+            </div>
+            <div class="device_tab">
+                <ul>
+                    <li>
+                        <a href="./1" class="one">체온</a>
+                    </li>
+                    <li>
+                        <a href="./2" class="two">맥박수/혈압</a>
+                    </li>
+                    <li>
+                        <a href="./3" class="three active">산소포화도</a>
+                    </li>
+                    <li>
+                        <a href="./4" class="four">혈당</a>
+                    </li>
+                    <li>
+                        <a href="./5" class="five">임상증상</a>
+                    </li>
+                </ul>
+            </div>
+            
+            <form id="healthForm" method="post" action="./insert">
+                <div class="health">
+                    <div class="part">
+                        <div class="title">날짜</div>
+                        <div class="input day">
+                            <a href="javascript:;" data-popup-open="popup-calendar">d</a>
+                            <input type="text" class="datePicker form-control" placeholder="현재 날짜" readonly>
+                        </div>
+                    </div>
+                    <div class="part">
+                        <div class="title">측정시간</div>
+                        <div class="input time">
+                            <a href="javascript:;" data-popup-open="popup-time">d</a>
+                            <input type="text" class="timePicker" placeholder="현재 시간" readonly>
+                        </div>
+                    </div>
+                    
+                    <div class="part tac mt30">
+                        <div class="title">산소포화도를 입력해주세요</div>
+                        <div class="input time">
+                        </div>
+                    </div>
+                    
+                    <div class="data unlink">
+                        <div class="point">
+                            <span style="margin-right:30px;">
+                                <input type="text" class="prev m3" name="oxygenSaturationPrev" placeholder="100" maxlength="3"><span class="dot"></span><input type="text" class="next" name="oxygenSaturationNext" placeholder="00" maxlength="2"> %
+                            </span>
+                            <span>
+                                <input type="text" class="prev m3" name="oxygenSaturationPrev2" placeholder="100" maxlength="3"><span class="dot"></span><input type="text" class="next" name="oxygenSaturationNext2" placeholder="00" maxlength="2"> bpm 
+                            </span>
+                        </div>
+                    </div>
+                    
+                    <div class="error-msg tac mt20 error"></div>
+                </div>
+                
+                <div class="btn_group">
+                    <ul>
+                        <li>
+                            <input type="hidden" name="phrType" value="oxygenSaturation">
+                            <input type="hidden" id="phrValue" name="phrValue" value="">
+                            <input type="hidden" id="phrValue2" name="phrValue2" value="">
+                            
+                            <button type="submit" class="confirm"><span class="check">기록하기</span></button>
+                        </li>
+                    </ul>
+                </div>
+            </form>
+        </div>
+    </div>
+</body>
+</html>

src/main/webapp/WEB-INF/jsp/mobile/health/health4.jsp

@@ -0,0 +1,103 @@
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
+<script type="text/javascript" src="/resources/js/mobile/health.js"></script>
+<script>
+$( function(){
+    $( "#healthForm" ).validate({
+        onkeyup: function( element, event ) {
+            $( "div.error-msg" ).text( "" );
+        },
+        onfocusout: function (element) {
+            $( "div.error-msg" ).text( "" );
+        },
+        submitHandler: function(form) {
+            var prev = $.trim( $( "input[name='bloodSugarPrev']" ).val() );
+            var next = $.trim( $( "input[name='bloodSugarNext']" ).val() );
+            
+            if( prev.length == 1 || next.length == 0 ) {
+                $( "div.error-msg" ).text( "혈당을 정확히 입력해주세요" );
+            } else {
+                $( "#phrValue" ).val( prev+"."+next );
+                form.submit();
+            }
+        }
+    });
+})
+</script>
+</head>
+<body>
+    <div id="sub">
+        <div class="container">
+            <div class="header">
+                <div class="previous">
+                    <a href="/mobile/menu">이전</a>
+                </div>
+                <div class="title">건강정보기록</div>
+            </div>
+            <div class="device_tab">
+                <ul>
+                    <li>
+                        <a href="./1" class="one active">체온</a>
+                    </li>
+                    <li>
+                        <a href="./2" class="two">맥박수/혈압</a>
+                    </li>
+                    <li>
+                        <a href="./3" class="three">산소포화도</a>
+                    </li>
+                    <li>
+                        <a href="./4" class="four">혈당</a>
+                    </li>
+                    <li>
+                        <a href="./5" class="five">임상증상</a>
+                    </li>
+                </ul>
+            </div>
+            
+            <form id="healthForm" method="post" action="./insert">
+                <div class="health">
+                    <div class="part">
+                        <div class="title">날짜</div>
+                        <div class="input day">
+                            <a href="javascript:;" data-popup-open="popup-calendar">d</a>
+                            <input type="text" class="datePicker form-control" placeholder="현재 날짜" readonly>
+                        </div>
+                    </div>
+                    <div class="part">
+                        <div class="title">측정시간</div>
+                        <div class="input time">
+                            <a href="javascript:;" data-popup-open="popup-time">d</a>
+                            <input type="text" class="timePicker" placeholder="현재 시간" readonly>
+                        </div>
+                    </div>
+                    
+                    <div class="part tac mt30">
+                        <div class="title">혈당을 입력해주세요</div>
+                        <div class="input time">
+                        </div>
+                    </div>
+                    
+                    <div class="data unlink">
+                        <div class="point"><input type="text" class="prev m3" name="bloodSugarPrev" placeholder="120" maxlength="3"><span class="dot"></span><input type="text" class="next" name="bloodSugarNext" placeholder="00" maxlength="2"><span class="mini">mg/dl</span></div>
+                    </div>
+                    
+                    <div class="error-msg tac mt20 error"></div>
+                </div>
+                
+                <div class="btn_group">
+                    <ul>
+                        <li>
+                            <input type="hidden" name="phrType" value="bloodSugar">
+                            <input type="hidden" id="phrValue" name="phrValue" value="">
+                            
+                            <button type="submit" class="confirm"><span class="check">기록하기</span></button>
+                        </li>
+                    </ul>
+                </div>
+            </form>
+        </div>
+    </div>
+</body>
+</html>

src/main/webapp/WEB-INF/jsp/mobile/menu/menu.jsp

@@ -29,7 +29,7 @@ function alreadyMunjin() {
                     <div class="category">
                         <ul>
                             <li>
-                                <a href="javascript:;">건강정보기록</a>
+                                <a href="./health">건강정보기록</a>
                             </li>
                             <li>
                                 <c:if test="${munjinCnt > 0}">
@@ -40,9 +40,9 @@ function alreadyMunjin() {
                                 </c:if>
                                 
                             </li>
-                            <li>
+                            <!-- li>
                                 <a href="javascript:;">건강 기기 관리</a>
-                            </li>
+                            </li -->
                             <li>
                                 <a href="./history">My 기록보기</a>
                             </li>
@@ -85,13 +85,11 @@ function alreadyMunjin() {
             <div class="quick_menu">
                 <ul>
                     <li>
-                        <a href="javascript:;">
+                        <a href="./health">
                             <div class="image">
                                 <img src="/resources/images/mobile/quick_1.png" />
                             </div>
-                            <div class="text">
-                                건강정보기록
-                            </div>
+                            <div class="text">건강정보기록</div>
                         </a>
                     </li>
                     <li>
@@ -107,9 +105,7 @@ function alreadyMunjin() {
                                 </c:if>
                                 <img src="/resources/images/mobile/quick_2.png" />
                             </div>
-                            <div class="text">
-                                문진
-                            </div>
+                            <div class="text">문진</div>
                         </a>
                     </li>
                     <li>
@@ -117,9 +113,7 @@ function alreadyMunjin() {
                             <div class="image">
                                 <img src="/resources/images/mobile/quick_3.png" />
                             </div>
-                            <div class="text">
-                                My 기록보기
-                            </div>
+                            <div class="text">My 기록보기</div>
                         </a>
                     </li>
                     <li>
@@ -128,9 +122,7 @@ function alreadyMunjin() {
                                 <div class="new_icon">NEW</div>
                                 <img src="/resources/images/mobile/quick_4.png" />
                             </div>
-                            <div class="text">
-                                비대면진료
-                            </div>
+                            <div class="text">비대면진료</div>
                         </a>
                     </li>
                 </ul>

src/main/webapp/resources/css/mobile/style.css

@@ -52,9 +52,9 @@ ol, ul {list-style:none;}
 address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal;}
 
 /* 테이블 스타일 초기화 */
-/* table {border-collapse:collapse;border:0;border-spacing:0;table-layout:fixed;width:100%;} */
-/* table th{word-wrap:break-word} */
-/* table td{word-wrap:break-word} */
+table {border-collapse:collapse;border:0;border-spacing:0;table-layout:fixed;width:100%;}
+table th{word-wrap:break-word}
+table td{word-wrap:break-word}
 
 /* 이미지 및 필드셋에서 보더 표시 초기화 */
 fieldset, img {border:0;}
@@ -312,13 +312,21 @@ input[type="radio"]:checked + label span {  background-image:url('../../images/m
 .health .part .input { position: relative; }
 .health .part .input input[type="text"]{ width: 100%; font-size: 15px; color:#427BDC; padding: 10px; border: 0px; border-bottom: 1px solid #DDDDDD; }
 .health .part .input input[type="text"]::placeholder { color:#427BDC; }
+.health .part .input input.datePicker{outline:none;}
+.health .part .input input.timePicker{outline:none;}
 .health .part .input.day a { background-image: url('../../images/mobile/health_calendar.png'); background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; position: absolute; right: 10px; top: 50%; margin-top: -10px; z-index: 10; text-indent: -9999px; }
 .health .part .input.time a { background-image: url('../../images/mobile/health_time.png'); background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; position: absolute; right: 10px; top: 50%; margin-top: -10px; z-index: 10; text-indent: -9999px; }
 .health .data { background-color: #404C60; text-align: center; padding: 20px; border-radius: 10px; }
 .health .data.link { color:#FFFFFF; }
 .health .data.unlink{ color:#FFFFFF; }
 .health .data .point { font-size: 18px;  }
-.health .data input[type="text"] { background-color: inherit; max-width: 80px; color: #FFFFFF; height: 30px; line-height: 30px; text-align: center; padding: 0px 4px; font-size: 18px; border: 1px solid #999999; }
+.health .data input[type="text"] { background-color: inherit; max-width: 50px; color: #FFFFFF; height: 40px; line-height: 30px; text-align: center; padding: 0px 4px; font-size: 27px; border: 1px solid #999999; border-top:0;border-left:0;border-right:0; outline:none;}
+.health .data input[type="tel"] { background-color: inherit; max-width: 50px; color: #FFFFFF; height: 40px; line-height: 30px; text-align: center; padding: 0px 4px; font-size: 27px; border: 1px solid #999999; border-top:0;border-left:0;border-right:0; outline:none;}
+.health .data span.dot{line-height: 40px;margin-bottom: -5px;display: inline-block;width: 2px;border-bottom: 2px solid #ffffff;}
+.health .data input.prev{margin-right:-5px;text-align:right;padding-right:10px;}
+.health .data input.next{margin-left:-5px;text-align:left;padding-left:10px;}
+.health .data input.m1{width:40px;}
+.health .data input.m3{width:60px;max-width:60px;}
 .health .data .point span.mini { position: relative; margin-left: 10px; font-size: 20px; }
 .health .data .point span.line { padding-left: 10px; }
 .health .data .point span.line:after { position: absolute; left: 0px; top: 50%; margin-top:-5px; display: block; content: ''; clear: both; width: 1px; height: 10px; background-color: rgba(255,255,255,0.5); }
@@ -364,4 +372,8 @@ input[type="radio"]:checked + label span {  background-image:url('../../images/m
 .error-box{outline:none !important;width:0 !important;height:0 !important;margin:0 !important;border:0 !important;}
 
 
-.error{color:red;}
+.error{color:red;}
+.tac{text-align:center;}
+.mt30{margin-top:30px;}
+.mt20{margin-top:20px;}
+.mt10{margin-top:10px;}

src/main/webapp/resources/js/mobile/common.js

@@ -34,7 +34,13 @@ function checkMobile(){
     }
 };
 
-
+function onlyNumber() {
+    if((event.keyCode<48) || (event.keyCode>57)) {
+        if( event.keyCode !== 8 ){
+            event.returnValue = false;
+        }
+    }
+}
 $(document).ready(function(){
 
     /* NAVIGATION BAR */

src/main/webapp/resources/js/mobile/health.js

@@ -0,0 +1,45 @@
+$( function(){
+    $( "input.prev" ).keyup ( function (){
+        var charLimit = $( this ).attr( "maxlength" );
+        if( this.value.length >= charLimit ) {
+            $( this ).siblings( 'input.next' ).focus();
+            return false;
+        }
+    });
+    
+    printClock();
+    
+    $( "input[type='tel']" ).on("keydown", function() {
+        onlyNumber();
+    });
+});
+
+function printClock() {
+    var currentDate = new Date();                                     // 현재시간
+    var calendar = currentDate.getFullYear() + "-" + (currentDate.getMonth()+1) + "-" + currentDate.getDate() // 현재 날짜
+    var amPm = '오전'; // 초기값 AM
+    var currentHours = addZeros(currentDate.getHours(),2); 
+    var currentMinute = addZeros(currentDate.getMinutes() ,2);
+    var currentSeconds =  addZeros(currentDate.getSeconds(),2);
+    
+    if(currentHours >= 12){ // 시간이 12보다 클 때 PM으로 세팅, 12를 빼줌
+        amPm = '오후';
+        currentHours = addZeros(currentHours - 12,2);
+    }
+    
+    $( ".datePicker" ).val( calendar );
+    $( ".timePicker" ).val( amPm + " " + currentHours+":"+currentMinute+":"+currentSeconds );
+    
+    setTimeout("printClock()",1000);         // 1초마다 printClock() 함수 호출
+}
+
+function addZeros(num, digit) { // 자릿수 맞춰주기
+      var zero = '';
+      num = num.toString();
+      if (num.length < digit) {
+        for (i = 0; i < digit - num.length; i++) {
+          zero += '0';
+        }
+      }
+      return zero + num;
+}