ㅗㅜㅑ

src/main/java/co/nook/app/todo/dao/TodoDao.java

@@ -17,22 +17,23 @@ public class TodoDao implements TodoService{
 	ResultSet rs;
 
 
-	final String SELECT_ALL = "SELECT * FROM userTodo";
+	final String SELECT_ALL = "SELECT * FROM userTodo where userno = ?";
 	@Override
-	public ArrayList<TodoVo> selectAll(Connection conn){
+	public ArrayList<TodoVo> selectAll(Connection conn, int userNo){
 		ArrayList<TodoVo> list = new ArrayList<TodoVo>();
 		try{
 			psmt = conn.prepareStatement(SELECT_ALL);
+			psmt.setInt(1, userNo);
 			rs = psmt.executeQuery();
 
+
 			while(rs.next()){
 				TodoVo vo = new TodoVo();
 				vo.setuNo(rs.getInt("uNo"));
-				vo.setUserno(rs.getInt("userno"));
 				vo.setuContent(rs.getString("uContent"));
-				vo.setuDay(rs.getString("uDay"));
-				vo.setuNpc(rs.getString("uNpc"));
 				vo.setuCheck(rs.getString("uCheck"));
+				vo.setuSub1(rs.getString("uSub1"));
+				vo.setuSub2(rs.getString("uSub2"));
 				list.add(vo);
 			}
 		}catch(SQLException throwables){
@@ -47,9 +48,26 @@ public class TodoDao implements TodoService{
 		return 0;
 	}
 
+	final String UPDATE = "UPDATE userTodo SET uContent = ?, uCheck = ?, uSub1 = ?, uSub2 = ? WHERE uNo = ?";
 	@Override
 	public int update(Connection conn, TodoVo vo){
-		return 0;
+		int result = 0;
+		try{
+			psmt = conn.prepareStatement(UPDATE);
+			psmt.setString(1, vo.getuContent());
+			psmt.setString(2, vo.getuCheck());
+			psmt.setString(3, vo.getuSub1());
+			psmt.setString(4, vo.getuSub2());
+			psmt.setInt(5, vo.getuNo());
+
+
+			result = psmt.executeUpdate();
+		}catch(SQLException e){
+			e.printStackTrace();
+		}
+
+
+		return result;
 	}
 
 	@Override

src/main/java/co/nook/app/todo/service/TodoService.java

@@ -6,7 +6,7 @@ import java.sql.Connection;
 import java.util.ArrayList;
 
 public interface TodoService{
-	public ArrayList<TodoVo> selectAll(Connection conn);
+	public ArrayList<TodoVo> selectAll(Connection conn, int userNo);
 	public int insert(Connection conn, TodoVo vo);
 	public int update(Connection conn, TodoVo vo);
 	public int delete(Connection conn, TodoVo vo);

src/main/java/co/nook/app/todo/service/TodoServiceImpl.java

@@ -18,8 +18,8 @@ public class TodoServiceImpl implements TodoService{
 	}
 
 	@Override
-	public ArrayList<TodoVo> selectAll(Connection conn){
+	public ArrayList<TodoVo> selectAll(Connection conn, int userNo){
-		return todoDao.selectAll(conn);
+		return todoDao.selectAll(conn, userNo);
 	}
 
 	@Override

src/main/java/co/nook/app/todo/vo/TodoVo.java

@@ -7,6 +7,8 @@ public class TodoVo{
 	String uDay;
 	String uNpc;
 	String uCheck;
+	String uSub1;
+	String uSub2;
 
 	public int getuNo(){
 		return uNo;
@@ -55,4 +57,20 @@ public class TodoVo{
 	public void setuCheck(String uCheck){
 		this.uCheck = uCheck;
 	}
+
+	public String getuSub1(){
+		return uSub1;
+	}
+
+	public void setuSub1(String uSub1){
+		this.uSub1 = uSub1;
+	}
+
+	public String getuSub2(){
+		return uSub2;
+	}
+
+	public void setuSub2(String uSub2){
+		this.uSub2 = uSub2;
+	}
 }

src/main/java/co/nook/app/todo/web/TodoController.java

@@ -8,10 +8,13 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.ResponseBody;
 
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpSession;
 import java.sql.Connection;
 import java.util.ArrayList;
 import java.util.HashMap;
@@ -20,6 +23,7 @@ import java.util.List;
 @Controller
 public class TodoController{
 
+
 	TodoService todoService;
 
 	@Autowired
@@ -30,14 +34,68 @@ public class TodoController{
 
 	@ResponseBody
 	@RequestMapping(value = "/getTodoData.do")
-	public HashMap<String, Object> getTodoData(Model model){
+	public HashMap<String, Object> getTodoData(HttpServletRequest request, Model model){
+		HttpSession session = request.getSession();
 		HashMap<String, Object> map = new HashMap<String, Object>();
+
 		Connection conn = Dao.getConnection();
-		ArrayList<TodoVo> list = todoService.selectAll(conn);
+		int userNo = (int)session.getAttribute("userNo");
+		ArrayList<TodoVo> list = todoService.selectAll(conn, userNo);
+		HashMap<Integer, Integer> boardMap = new HashMap<Integer, Integer>();
+		int index = 1;
+		for(TodoVo vo : list){
+			boardMap.put(index, vo.getuNo());
+			vo.setuNo(index);
+			++index;
+		}
+
+		session.setAttribute("todoMap", boardMap);
+
 		Dao.close(conn);
 
 		map.put("list", list);
 
 		return map;
 	}
+
+	@ResponseBody
+	@RequestMapping(value = "/todoUpdate.do")
+	public HashMap<String, Object> todoUpdate(HttpServletRequest request,
+											  @RequestBody HashMap<String, Object> map,
+											  Model model){
+		HashMap<String, Object> returnMap = new HashMap<String, Object>();
+		HttpSession session =request.getSession();
+		HashMap<Integer, Integer> boardMap = (HashMap<Integer, Integer>)session.getAttribute("todoMap");
+		int todoNo = Integer.parseInt((String)map.get("todoNo"));
+		String content = (String)map.get("content");
+		String check = (String)map.get("check");
+		Object o1 = map.get("sub1");
+		Object o2 = map.get("sub2");
+		String sub1 = null;
+		String sub2 = null;
+		if( o1 != null){
+			sub1= o1.toString();
+		}
+		if( o2 != null){
+			sub2= o2.toString();
+		}
+
+		Connection conn = Dao.getConnection();
+		if(!(check.equals("true") || check.equals("false")))
+		{
+			returnMap.put("result", 0);
+		}else{
+			TodoVo vo = new TodoVo();
+			vo.setuNo(boardMap.get(todoNo));
+			vo.setuCheck(check);
+			vo.setuContent(content);
+			vo.setuSub1(sub1);
+			vo.setuSub2(sub2);
+
+			int result = todoService.update(conn, vo);
+			returnMap.put("result", result);
+		}
+		Dao.close(conn);
+		return returnMap;
+	}
 }

src/main/webapp/WEB-INF/tags/button_leaf.tag

@@ -0,0 +1 @@
+<%@ tag language="java" pageEncoding="utf-8" %><button class='btnCheck' type='button'><i class='fas fa-leaf leafCheck'></i></button>

src/main/webapp/WEB-INF/tags/todo_input.tag

@@ -1 +1 @@
-<%@ tag language="java" pageEncoding="utf-8" %><input type='text' class='form-control border-0 w-auto'  readonly style='cursor: default; color : #54200c; font-size: 1.3rem'>
+<%@ tag language="java" pageEncoding="utf-8" %><input type='text' name='content' class='form-control border-0'  readonly style='cursor: default; color : #54200c; font-size: 1.3rem'><input class='hiddenClass' type='text' hidden>

src/main/webapp/WEB-INF/views/todo/todo_form.jsp

@@ -19,90 +19,354 @@
     <script src="${pageContext.request.contextPath}/resources/js/all.min.js"></script>
 
     <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/todo.css">
-    <style>
-        .w-14{
-            width : 6.4em;
-        }
 
-        tr{
-            cursor : pointer;
-        }
-        input[type="text"] {
-            outline : none;
-        }
-
-        #tbodyTodo tr:nth-child(2n-1){
-            background-color : #89caa2;
-        }
-        #tbodyTodo tr:nth-child(2n){
-            background-color : #70b98b;
-        }
-
-        body{
-            background-color: #a3d5a4;
-            font-family: 'Cute Font', sans-serif;
-            font-size : 1.3rem;
-        }
-    </style>
     <script>
         let dataList;
         $(function(){
-
             makeTable();
+            $("#btnAddTodo").on("click", AddTodo);
         });
 
-        function addTrEvent($tr){
+        function getContentType(content){
-            $tr.on("click", function(){
+            let newContent = content.replace(' ','');
-                let $input = $(this).find("input");
+            let slashType = newContent.indexOf(('/'));
-
+            let leftGaulho = newContent.indexOf('(');
-                let $del = $input.closest("del");
+            let rightGaulho = newContent.indexOf(')');
-                console.log($del.get(0));
+            //TODO : 슬래시 기준으로 좌우측에 괄호가 있는지 체크해야함
-                if($del.get(0) == undefined) {
+            //TODO : 완성 아님 아직
-                    $input.wrap("<del></del>");
+            if( slashType != -1 && leftGaulho != -1 && rightGaulho != -1){
+                return 'stack';
             }else{
+                return 'normal'
+            }
+        }
+
+        function toggleDel($input){
+            let $del = $input.closest("del");
+            if ($del.get(0) == undefined) {
+                $input.wrap("<del></del>");
+            } else {
+                $input.unwrap("del");
+            }
+        }
+
+        function addDel($input){
+            $input.wrap("<del></del>");
+        }
+
+        function removeDel($input){
             $input.unwrap("del");
         }
 
+
+
+        function toggleCheck($button){
+            let $img = $button.find("svg");
+            if($img.hasClass("leafCheck")){
+                $img.removeClass("leafCheck");
+                $img.hasClass("leafHide");
+                $img.hide();
+
+            }else{
+                $img.removeClass("leafHide");
+                $img.addClass("leafCheck");
+                $img.show();
+            }
+        }
+
+        function toggleCheckByEvent(event){
+            let $img = event.data.button.find("svg");
+            if($img.hasClass("leafCheck")){
+                $img.removeClass("leafCheck");
+                $img.hasClass("leafHide");
+                $img.hide();
+
+            }else{
+                $img.removeClass("leafHide");
+                $img.addClass("leafCheck");
+                $img.show();
+            }
+        }
+
+
+        function addTrEvent($tr){
+            $tr.on("click", function() {
+                let $input = $(this).find("input[name='content']");
+                let $button = $(this).find("button");
+                let content = $input.val();
+                let type = getContentType(content);
+                let sub1;
+                let sub2;
+                if (type == 'normal') {
+                    toggleDel($input);
+                    toggleCheck($button);
+                } else if (type == 'stack') {
+                    let newContent = content;
+                    let index = newContent.indexOf('/');
+                    let curCount = pickNumber(newContent, index - 1, -1);
+                    let maxCount = pickNumber(newContent, index + 1, 1);
+                    let beforeContent = newContent.substring(0, findGualho(content, index, -1));
+                    let afterContent = newContent.substring(findGualho(content, index, 1) - 1);
+                    let $del = $input.closest("del");
+                    if (curCount == maxCount) {
+                        if ($del.get(0) == undefined) {
+                            addDel($input);
+                            toggleCheck($button);
+                        } else {
+                            removeDel($input);
+                            toggleCheck($button);
+                            curCount = 0;
+                            content = beforeContent + " " + curCount + " / " + maxCount + " " + afterContent;
+                            $input.val(content);
+                        }
+                    } else {
+                        ++curCount;
+                        content = beforeContent + " " + curCount + " / " + maxCount + " " + afterContent;
+                        $input.val(content);
+                        if (curCount == maxCount) {
+                            if ($del.get(0) == undefined) {
+                                addDel($input);
+                                toggleCheck($button);
+                            }
+                        }
+                    }
+                    sub1 = curCount;
+                    sub2 = maxCount;
+                }
+                let json = {};
+                json.todoNo = $(this).find(".hiddenClass").attr("name");
+                json.content = $input.val();
+                json.check = $button.find("svg").hasClass("leafCheck")+"";
+                json.sub1 = sub1;
+
+                json.sub2 = sub2;
+
+                let parsed = JSON.stringify(json);
+
+
+                $.ajax({
+                    type: "POST",
+                    url: "todoUpdate.do",
+                    data: parsed,
+                    datatype: "json",
+                    contentType: "application/json",
+                    success: function (data) {
+
+                        if( data.result == "1"){
+
+                        }else{
+
+                        }
+                    }
                 });
+            });
+
+        }
+
+        function findGualho(str, point, direction){
+
+            if( direction <= 0 ){
+                for( let i = point; i >= 0 ; --i){
+                    let char = str.charAt(i);
+                    if( char == '('){
+
+                        return i+1;
+                    }
+                }
+            }else{
+                for( let i = point; i < str.length; ++i){
+                    let char = str.charAt(i);
+                    if( char == ')'){
+
+                        return i+1;
+                    }
+                }
+            }
+
+            return -1;
+        }
+
+        function pickNumber(str, point, direction){
+            let returnStr = "";
+            if(direction > 0){
+                for( let  i = point; i < str.length; ++i){
+                    let char = str.charAt(i);
+                    if( char == " "){
+
+                    }else if( isNumber(char )){
+                        returnStr = returnStr.concat(char);
+                    }else{
+                        break;
+                    }
+                }
+            }else{
+                for( let i = point; i >= 0; --i){
+                    let char = str.charAt(i);
+                    if( char == " ") {
+                    }else if( isNumber(char )){
+                        returnStr = char.concat(returnStr);
+                    }else{
+                        break;
+                    }
+                }
+            }
+            return returnStr;
+        }
+
+
+        function isNumber(character){
+            let res = /^[0-9]+$/;
+            return res.test(character);
         }
 
         function makeTable(){
-
             $.ajax({
                 type: "POST",
                 url: "getTodoData.do",
                 datatype: "json",
                 contentType: "application/json",
                 success: function (data) {
-                    let $tableBody = $("#tbodyTodo");
+
                     dataList = data.list;
                     $(dataList).each(function(index, item){
-
+                       AddTr(index, item);
+                    });
+                }
+            });
+        }
+        function AddTr(index, item){
+            let $tableBody = $("#tbodyTodo");
             let $tr = $("<tr>");
+
             addTrEvent($tr);
             let $td = $("<td>");
             $td.addClass("text-center");
+            $td.css("vertical-align", "middle");
             $tableBody.append($tr);
             $tr.append($td);
             $td.html(index+1);
+            <!-- # 숫자 끝 -->
 
+            <!-- 체크 부분 -->
+            $td = $("<td>");
+            $td.addClass("text-center");
+            $td.css("vertical-align", "middle");
+            let $btnLeaf = $("<ct:button_leaf />");
+            $td.append($btnLeaf);
+
+            let $btnIcon = $btnLeaf.find("i");
+
+            if( item.uCheck == "true"){
+                $btnIcon.removeClass("leafHide");
+                $btnIcon.addClass("leafCheck");
+            }else{
+                $btnIcon.removeClass("leafCheck");
+                $btnIcon.addClass("leafHide");
+            }
+
+            $tr.append($td);
+            <!-- 체크 부분 끝 -->
+
+            <!-- content 부분 -->
             $td = $("<td>");
             $td.addClass("text-left");
+            $td.css("vertical-align", "middle");
             $tr.append($td);
             let $todoInput = $("<ct:todo_input />");
-                        $todoInput.val(item.uContent);
 
+            let $hiddenInput = $todoInput.closest(".hiddenClass");
+
+            $hiddenInput.attr("name", item.uNo);
+            $hiddenInput.val(item.uNo);
+
+            let newContent = item.uContent;
+            let type = getContentType(newContent);
+            if( type == "stack") {
+                let cIndex = newContent.indexOf('/');
+                let curCount = item.uSub1;
+                let maxCount = item.uSub2;
+                let beforeContent = newContent.substring(0, findGualho(newContent, cIndex, -1));
+                let afterContent = newContent.substring(findGualho(newContent, cIndex, 1) - 1);
+                newContent = beforeContent + " " + curCount + " / " + maxCount + " " + afterContent;
+                $todoInput.val(newContent);
+            }else{
+                $todoInput.val(newContent);
+            }
             $todoInput.css("background-color", "rgba(0,0,0,0)");
             $td.append($todoInput);
 
+            let $input = $tr.find("input[name='content']");
 
+            console.log($input.get(0));
 
-                    });
+            if( item.uCheck == "true"){
-
+                addDel($input);
             }
-            });
+            <!-- content 끝 -->
-
         }
+
+
+        //할일 추가 버튼 눌렀을때 실행되는 함수
+        let $addTodoTr;
+        function AddTodo(){
+            let $tbodyTodo = $("#tbodyTodo");
+            let count = $tbodyTodo.find("tr").length;
+            $addTodoTr = $("<tr>");
+            $tbodyTodo.append($addTodoTr);
+            //숫자 부분
+
+            let $td = $("<td>");
+            $addTodoTr.append($td);
+            $td.html((count+1).toString());
+
+            //체크 박스 부분
+            $td = $("<td>");
+            $addTodoTr.append($td);
+            let $btnLeaf = $("<ct:button_leaf />");
+            $btnLeaf.on("click", { button : $btnLeaf } , toggleCheckByEvent);
+
+            $td.append($btnLeaf);
+            //content 부분
+            $td = $("<td>");
+            $addTodoTr.append($td);
+
+            //입력폼 옆으로 하기위해 div 추가
+            let $divRow = $("<div class='row'>");
+            $td.append($divRow);
+            //할일 부분 입력폼
+            let $divCol = $("<div class='col'>");
+            $divRow.append($divCol);
+            let $input = $("<input type='text' name='ipTodo' class='form-control border-0 inputAddTodoText' placeholder='ex ) 주민에게 인사하기'>");
+            $divCol.append($input);
+
+            //최대치 부분 입력폼
+            $divCol = $("<div class='col'>");
+            $divRow.append($divCol);
+            let $inputMax = $("<input type='number' name='ipMax' class='form-control border-0 inputADdTodoNumber mt-xl-0 mt-sm-2' placeholder='최대치를 입력해라 구리. 안써도 된다 구리.' > ");
+            $divCol.append($inputMax);
+            $input.get(0).focus();
+
+            //저장 버튼
+            $divCol = $("<div class='col d-flex justify-content-end'>");
+            $divRow.append($divCol);
+            let $btnSave = $("<button type='button' class='btn btn-primary' >추가한다 구리</button> ");
+
+            $divCol.append($btnSave);
+            $btnSave.on("click", insertLine);
+        }
+        function insertLine(){
+            let content = $(this).parent().parent().find("input[name='ipTodo']").val();
+            let sub2 = $(this).parent().parent().find("input[name='ipMax']").val();
+            let check = $(this).parents("tr").find("svg").hasClass("leafCheck");
+
+
+            console.log("content : "+content);
+            console.log("sub2 : " + sub2);
+            console.log("check : " + check);
+
+            //controller에 추가
+        }
+
     </script>
 </head>
 <body>
@@ -157,13 +421,13 @@
     </div>
     <div class="row mt-3">
         <div class="col-12">
-
             <div id="todo_body" class="p-2 border border-dark">
                 <table id="tbTodo" class="table text-white">
                     <thead>
                     <tr>
-                        <th class="text-center" scope="col" style="width: 10%; min-width: 4rem">#</th>
+                        <th class="text-center" scope="col" style="width: 5%; min-width: 4rem">#</th>
-                        <th class="text-left" scope="col" style="width: 80%; min-width: 4rem">할 일</th>
+                        <th class="text-center" scope="col" style="width: 10%; min-width: 4rem">체 크</th>
+                        <th class="text-left" scope="col" style="width: 85%; min-width: 4rem">할 일</th>
                     </tr>
                     </thead>
                     <tbody id="tbodyTodo">
@@ -173,6 +437,11 @@
             </div>
         </div>
     </div>
+    <div class="row mt-3">
+        <div class="col-12 d-flex justify-content-center">
+            <button id="btnAddTodo" class="btn btn-primary" type="button">할 일 추가</button>
+        </div>
+    </div>
 </div>
 </body>
 </html>

src/main/webapp/resources/css/todo.css

@@ -1,4 +1,44 @@
 
+.w-14{
+    width : 6.4em;
+}
+.tb_vertical_center{
+    vertical-align: middle;
+}
+
+tr{
+    cursor : pointer;
+    height : 6rem;
+    padding : 0;
+    margin : 0;
+}
+td{
+    padding : 0;
+    margin : 0;
+}
+
+input[type="text"] {
+    outline : none;
+    max-width : 20em;
+    overflow : visible;
+    cursor : pointer;
+}
+
+#tbodyTodo tr:nth-child(2n-1){
+    background-color : #89caa2;
+}
+#tbodyTodo tr:nth-child(2n){
+    background-color : #70b98b;
+}
+#tbodyTodo{
+    overflow: hidden;
+}
+body{
+    background-color: #a3d5a4;
+    font-family: 'Cute Font', sans-serif;
+    font-size : 1.3rem;
+}
+
 .custom-control-label::before{
     width: 1rem;
     height: 1rem;
@@ -19,3 +59,36 @@
 .custom-control-label{
     font-size: 1rem;
 }
+
+.btnCheck{
+    background-color : white;
+    border : none;
+    text-align: center;
+    text-decoration: none;
+    padding : 0;
+    margin : 0;
+    width: 2.5rem;
+    height : 2.5rem;
+}
+
+.btnCheck > .leafCheck{
+    width : 100%;
+    height : 100%;
+}
+
+.leafCheck{
+    color : white;
+    background-color : green;
+}
+.leafHide{
+    color : transparent;
+    background-color : white;
+}
+
+.inputAddTodoNumber{
+    width : 15rem;
+}
+
+.inputAddTodoText{
+    width : 40rem;
+}