끄적끄적

회원가입 기능
- 이메일 인증기능
- springframework에서 JavaMailSenderImpl bean을 활용한 메일 전송
- 회원 가입 정규식

로그인 기능
- 쿠키를 이용한 이메일 기억하기 기능
- aop: around를 이용한 로그인 확인, 프로젝트 소속 확인

할일 리스트 기능
- 'Lobi List' 플러그인의 css와 js함수 분석
- 할일리스트 조회, 삽입, 수정, 삭제 ajax 연동
- 할일항목 조회, 삽입, 수정, 삭제 ajax 연동
- 드래그앤드롭 방식으로 리스트와 카드 정렬 순서 변경 기능
- 리스트 스타일 변경 기능
- 입력폼 정규식 및 크기 제한
- 리스트가 없을시 '리스트추가버튼' 생성 & 도움말 출력 기능
- 주간 스케쥴러와 작업 진행률바 css 수정 (위치, 토글, 스크롤색상)

(ORACLE) DB table
- member
- Task_list
- Task_card

JSP
- member/email_injeung.jsp
- member/email.jsp
- member/join.jsp
- member/login.jsp
- Task/task.jsp
- Task/scheduler.jsp
- Task/modal.jsp

controller
- MemberController
- TaskController

DAO
- MemberDAO
- ListDAO

service
- MemberService
- ListService

mapper
- member-mapper.xml
- list-mapper.xml

테스트 전용 프레임 워크

j Unit Framework

테스트 코드를 먼저 개발한후 통과하는 코드를 만드는 방법론도 있다. TDD

서블릿 업그레이드 필요

스프링 프로젝트 연동용

메세지 예제 다시 만들기

JDBC 라이브러리 추가

<repositories>
      <repository>
         <id>OJDBC6 Repo</id>
         <url>http://www.datanucleus.org/downloads/maven2/</url>
      </repository>
   </repositories>
<!-- DB Related -->
      <!-- https://mvnrepository.com/artifact/oracle/ojdbc6 -->
      <dependency>
         <groupId>oracle</groupId>
         <artifactId>ojdbc6</artifactId>
         <version>11.2.0.3</version>
      </dependency>

      <dependency>
         <groupId>org.apache.commons</groupId>
         <artifactId>commons-dbcp2</artifactId>
         <version>2.7.0</version>
      </dependency>

      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-jdbc</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>

<!-- Root Context: defines shared resources visible to all other web components -->
   <bean id="dataSource"
      class="org.apache.commons.dbcp2.BasicDataSource">
      <property name="driverClassName"
         value="oracle.jdbc.driver.OracleDriver" />
      <property name="url"
         value="jdbc:oracle:thin:@localhost:1521:xe" />
      <property name="username" value="kh" />
      <property name="password" value="kh" />
      <property name="initialSize" value="30" />
   </bean>

   <!-- JDBC Template : Spring JDBC로 업그레이드 된 JDBC를 사용할 수 있는 클래스 -->
   <bean id="jdbcTemplate"
      class="org.springframework.jdbc.core.JdbcTemplate">
      <property name="dataSource" ref="dataSource"></property>
   </bean>

메세지 예제 다시 만들기 끝

이제부터 테스트

@RunWith 어노테이션 사용을 위한 라이브러리

톰캣 서버가 켜지는 효과를 위해

@webAppConfiguration

웹을 흉내내는 환경 설정을 해준다.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <groupId>kh.spring</groupId>
   <artifactId>controller</artifactId>
   <name>ForExam</name>
   <packaging>war</packaging>
   <version>1.0.0-BUILD-SNAPSHOT</version>
   <properties>
      <java-version>1.8</java-version>
      <org.springframework-version>5.1.9.RELEASE</org.springframework-version>
      <org.aspectj-version>1.6.10</org.aspectj-version>
      <org.slf4j-version>1.6.6</org.slf4j-version>
   </properties>
   
   
   <!-- 저장소 추가 (properties와 dependencies 사이에 위치) -->
   <repositories>
      <repository>
         <id>OJDBC6 Repo</id>
         <url>http://www.datanucleus.org/downloads/maven2/</url>
      </repository>
   </repositories>
   
   
   <dependencies>
      
      <!-- DB Related -->
      <!-- ojdbc6 라이브러리 추가부분 -->
      <dependency>
         <groupId>oracle</groupId>
         <artifactId>ojdbc6</artifactId>
         <version>11.2.0.3</version>
      </dependency>
      <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-dbcp2 -->
      <dependency>
         <groupId>org.apache.commons</groupId>
         <artifactId>commons-dbcp2</artifactId>
         <version>2.7.0</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
      <!-- version에 스프링 버전과 동일하게 변수 넣어서 바꿔줌 -->
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-jdbc</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>
      
      
      <!-- Spring -->
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-context</artifactId>
         <version>${org.springframework-version}</version>
         <exclusions>
            <!-- Exclude Commons Logging in favor of SLF4j -->
            <exclusion>
               <groupId>commons-logging</groupId>
               <artifactId>commons-logging</artifactId>
             </exclusion>
         </exclusions>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-webmvc</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>
            
      <!-- AspectJ -->
      <dependency>
         <groupId>org.aspectj</groupId>
         <artifactId>aspectjrt</artifactId>
         <version>${org.aspectj-version}</version>
      </dependency>   
      
      <!-- Logging -->
      <dependency>
         <groupId>org.slf4j</groupId>
         <artifactId>slf4j-api</artifactId>
         <version>${org.slf4j-version}</version>
      </dependency>
      <dependency>
         <groupId>org.slf4j</groupId>
         <artifactId>jcl-over-slf4j</artifactId>
         <version>${org.slf4j-version}</version>
         <scope>runtime</scope>
      </dependency>
      <dependency>
         <groupId>org.slf4j</groupId>
         <artifactId>slf4j-log4j12</artifactId>
         <version>${org.slf4j-version}</version>
         <scope>runtime</scope>
      </dependency>
      <dependency>
         <groupId>log4j</groupId>
         <artifactId>log4j</artifactId>
         <version>1.2.15</version>
         <exclusions>
            <exclusion>
               <groupId>javax.mail</groupId>
               <artifactId>mail</artifactId>
            </exclusion>
            <exclusion>
               <groupId>javax.jms</groupId>
               <artifactId>jms</artifactId>
            </exclusion>
            <exclusion>
               <groupId>com.sun.jdmk</groupId>
               <artifactId>jmxtools</artifactId>
            </exclusion>
            <exclusion>
               <groupId>com.sun.jmx</groupId>
               <artifactId>jmxri</artifactId>
            </exclusion>
         </exclusions>
         <scope>runtime</scope>
      </dependency>

      <!-- @Inject -->
      <dependency>
         <groupId>javax.inject</groupId>
         <artifactId>javax.inject</artifactId>
         <version>1</version>
      </dependency>
            
      <!-- Servlet -->
      <!-- 수정!! -->
      <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>javax.servlet-api</artifactId>
         <version>3.1.0</version>
         <scope>provided</scope>
      </dependency>
      <dependency>
         <groupId>javax.servlet.jsp</groupId>
         <artifactId>jsp-api</artifactId>
         <version>2.1</version>
         <scope>provided</scope>
      </dependency>
      <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>jstl</artifactId>
         <version>1.2</version>
      </dependency>
   
      <!-- Test -->
      <dependency>
         <groupId>junit</groupId>
         <artifactId>junit</artifactId>
         <version>4.7</version>
         <scope>test</scope>
      </dependency>
      <!-- 추가!! -->
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-test</artifactId>
         <version>5.1.9.RELEASE</version>
      </dependency>
      
   </dependencies>
    <build>
        <plugins>
            <plugin>
                <artifactId>maven-eclipse-plugin</artifactId>
                <version>2.9</version>
                <configuration>
                    <additionalProjectnatures>
                        <projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
                    </additionalProjectnatures>
                    <additionalBuildcommands>
                        <buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
                    </additionalBuildcommands>
                    <downloadSources>true</downloadSources>
                    <downloadJavadocs>true</downloadJavadocs>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>2.5.1</version>
                <configuration>
                    <source>1.6</source>
                    <target>1.6</target>
                    <compilerArgument>-Xlint:all</compilerArgument>
                    <showWarnings>true</showWarnings>
                    <showDeprecation>true</showDeprecation>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.2.1</version>
                <configuration>
                    <mainClass>org.test.int1.Main</mainClass>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

aop @before가 아니라 junit @before

기본 설정 끝

post로 데이터 보내보기

insert 리퀘스트를 post로 보내준다.

param의 이름값은 DTO와 일치하도록

- 세팅을 해놓으면 jsp 만들고 submit할 필요없이 기능만을 바꿔가며 테스트 가능

-  어노테이션은 스프링의 전유물이 아님 JUnit에서도 쓰인다.

위의 코드는 고정 @Test 부분만 바뀐다.

JUnit은 의무적이지 않다.

하지만 평가에 나온다.

추가작업

에러 번호대에 따라 출력

리포팅 기능

테스트 결과 예측 : 정상동작이어도 개발자의 예상과 다르다면 알려줌

기록 남기기 Logger

sysout과 유사

sysout은 콘솔 출력이 끝 (외부로 출력하기 위해서는 추가 작업 필요)

Logger는 로그파일에도 출력 가능, 날짜 추가등의 옵션 편리

출력&기록 전용 프레임 워크

사용범주가 넓다 (안드로이드 스튜디오 등...)

문제에서는 상황을 준다. -> 버전 등 상황에 맞게 구현하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link href='/resources/css/calendar/calendar.css?after' rel='stylesheet' />
<script src='/resources/js/calendar/calendar.js'></script>
<!--<jsp:include page="../header/cdn.jsp"></jsp:include>-->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- 부트스트랩 -->
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script
   src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- 아이콘 -->
<script src="https://kit.fontawesome.com/8f6ea3bf70.js"
	crossorigin="anonymous"></script>
 <!-- 구글 폰트 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&display=swap" rel="stylesheet">	





<!-- Lobi List Default installation-->
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/jquery/jquery-ui.min.css" />
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="/resources/lobilist-master/dist/lobilist.min.css">
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/lobibox/css/lobibox.min.css">
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/highlight/github.css">
<!--<link rel="stylesheet" href="resources/lobilist-master/demo/demo.css">-->

<style>
body {
	overflow-y: hidden;
	overflow-x: hidden;
}

#wrapper {
	width: 1100px;
	position: fixed;
	z-index: 10;
	bottom: 0px;
	left: 25%;
	background-color: rgba(255, 255, 255, 0.7);
}

#todoListBox {
	margin: 10px;
	overflow: hidden;
}

#box {
	margin: 10px 0px 0px 10px;
}

#calendar {
	max-width: 1100px;
	margin: 0 auto;
}

#todoListBox {
	width: 100%;
}

#calendarBox {
	margin-top: 100px;
	width: 1200px;
	margin: 0 auto;
}

#actions-by-ajax {
	height: 88%;
	overflow-y: hidden;
}
.modal {
  position: absolute;
  top: 50px;
  right: 100px;
  bottom: 0;
  left: 0;
  z-index: 100;
  overflow: auto;
  overflow-y: auto;
}
</style>


</head>


<body>

	<script>
	 document.addEventListener('DOMContentLoaded', function() {
			
		    var calendarEl = document.getElementById('calendar');
			
		    var calendar = new FullCalendar.Calendar(calendarEl, {
		    	height:200,
		    	displayEventTime:false,//제목에 시간 같이 display 안되게 설정하는
		    	locale: "ko", // 한국어로 설정 
		    	initialView:'dayGridWeek',
		      	headerToolbar: {
		        left: 'prev,next today',
		        center: 'title',
		        right: 'dayGridWeek,dayGridDay'
		      },
		      navLinks: true, // can click day/week names to navigate views
		      selectable: true,
		      selectMirror: true,
		      select: function(arg) {
		          function date_to_str(format)
		          {//날짜형식 내가 원하는 대로 바꾸는 함수 
		              var year = format.getFullYear();
		              var month = format.getMonth() + 1;
		              if(month<10) month = '0' + month;
		              var date = format.getDate();
		              if(date<10) date = '0' + date;
		              var hour = format.getHours();
		              if(hour<10) hour = '0' + hour;
		              var min = format.getMinutes();
		              if(min<10) min = '0' + min;
		             
				       return year + "-" + month + "-" + date + "T" + hour + ":" + min;
		          }
		          var arg_time = date_to_str(arg.start); //내가 클릭한 날짜
		    	//modal 띄우기 
		        $("#myModal").modal(); 
		        $("#modal_date_start").val(arg_time);
		    	//일정 끝나는 시간이 시작시간보다 빠르면 바꿔주는 이벤트 - 시작시간 선택 후 끝나는 시간 선택 했을 때
		    	$("#modal_date_end").focusout(function(){
		    		if(($("#modal_date_end").val()).replace(/[^0-9]/g,"")<($("#modal_date_start").val()).replace(/[^0-9]/g,"")){
		    		$("#modal_date_end").val($("#modal_date_start").val());
		    	}
		    	})
		    	
		    		//일정 끝나는 시간이 시작시간보다 빠르면 바꿔주는 이벤트 - 끝나는 시간 선택 후 시작 시간 선택 했을 때
		    	$("#modal_date_start").focusout(function(){
		    			if(($("#modal_date_start").val()).replace(/[^0-9]/g,"")>($("#modal_date_end").val()).replace(/[^0-9]/g,"")){
		    	    		if($("#modal_date_end").val()==''){
		    	    			
		    	    		} else{
		    	    			$("#modal_date_start").val($("#modal_date_end").val()); 
		    	    		}	
		    		} 	
		    	})
		    	
		       
		        
		        calendar.unselect();
		      },
		      eventClick: function(arg) {
		    	var seq = arg.event.id;
		    	$.ajax({
		    		url : "../calendar/selectEvent",
		    		type: "post",
		    		data:{seq:seq}
		    	}).done(function(resp){
		    		resp=JSON.parse(resp);
		    		var seq=resp.seq;
		  			var projcet_seq=resp.project_seq;
		  			var title = resp.title;
		  			var contents = resp.contents;
		  			var writer = resp.writer;
		  			var start_date=resp.start_date;
		  			var end_date=resp.end_date;
		  			var color=resp.color;
		  			
		  			$('.dialog__content h4').append('<div class='+'dynamic'+'>'+title+'</div>'); 
		  			$('.dialog__content>div:nth-child(2)').append('<div class="dynamic" style="width:270px;">'+contents+'</div>');
		  			$('.dialog__content>div:nth-child(4)').append('<div class='+'dynamic'+'>'+start_date+'</div>');
		  			$('.dialog__content>div:nth-child(4)').after('<div class='+'dynamic'+' style="margin-left:80px">'+end_date+'</div>');
		  			$('.dialog__content>div:nth-child(6)').append('<div class="dynamic" style="float:left">'+writer+'</div>');
		  			
		  			$('#title-color').css('background-color',color);
		  			
		    		const modal = document.querySelector('dialog');
		        	const btnClose = document.querySelectorAll('.button-close');
		        	modal.showModal();
		        	btnClose.forEach((elm) => elm.addEventListener('click', () => closeModal()));
		        	modal.addEventListener('click', (e) => detectBackdropClick(e));
		      
		        	closeModal = () => {
		        	    modal.classList.add("dialog__animate-out");
		        	    modal.addEventListener('animationend', handleClose, false);
		        	   
		        	}

		        	handleClose = () => {
		        	    modal.classList.remove("dialog__animate-out");
		        	    modal.removeEventListener('animationend', handleClose, false);
		        	    modal.close();
		        	    $('.dynamic').remove(); 
		        	}

		        	detectBackdropClick = (event) => {
		        	    if(event.target === modal) {
		        	        closeModal();
		        	    }
		        	}
		        	
		        	 $('#eventEdit').on('click',function(){    		 
		        		 closeModal();	
		        		 //수정하기 modal에  값 채워넣기 
		        		 $('#Editrecipient-name').val(title);
		        		 $("#Editmessage-text").val(contents)
		        		 $('#Editmodal_date_start').val(start_date);
		        		 $('#Editmodal_date_end').val(end_date);
		        		 /* $('.Editcustom-radios input[type=radio][name=Editcolor][background-color:'+color+']:checked'); */
		        		 //색깔 선택 수정하기 !!!!!!
		        		 sessionStorage.setItem("seq",seq);
		            	 $("#EditmyModal").modal();
		        		 
		            }) 
		            
		            $('#eventDelete').on("click",function(){//일정 삭제하기
		            	sessionStorage.setItem("seq",seq);
		            	closeModal();
		            	$('#deleteModal').modal();
		            })
		            
		            
		    	})	
		    
		      },
		     /*  editable: true, */
		      dayMaxEvents: true, // allow "more" link when too many events
		      events: [
		    	   <c:forEach var="i" items="${list}">
		         	{
		         		id:'${i.seq}',
		         		title:'${i.title}',
		         		start:'${i.start_date}',
		         		end:'${i.end_date}',
		         		color:'${i.color}'
		         	},
		         </c:forEach>	 
		      ]
		    });
		   
		    //일정 생성하기 버튼 눌렀을 때 : 이벤트 안에 이벤트를 넣으면 버그가 일어난다!  
			   $("#save").on("click",function(){
		        var title = $("#recipient-name").val();
		        var start = $('#modal_date_start').val();
		        var end =$('#modal_date_end').val(); 
		        var color = $('input[type=radio][name=color]:checked').val();
		 	
		        if(title==''){
		        	alert("제목은 필수 입력값 입니다!");
		        	
		        }else{
		        	$.ajax({
		            	url:"../calendar/addEvent",
		            	type:"post",
		            	data:{
		            		title : title,
		            		start_date : start,
		            		end_date: end,
		            		contents : $("#message-text").val(),
		            		writer : '${loginInfo.name}',
		            		color : color,
		            		poject_seq:0
		            	}
		            }).done(function(resp){
		           		resp=JSON.parse(resp);
		           		var seq = resp.seq
		           		if(title){
		                    calendar.addEvent({
		                    	id:seq,
		                        title:title,
		                        start:start,
		                        end:end,
		                        color:color
		                    })
		                }
		           		
		            })
		            /*   modal clean 하기 */
		            $("#recipient-name").val("");
		            $('#modal_date_start').val("");
		            $('#modal_date_end').val("");
		            $("#message-text").val("");
		            $("#modal_select").val('red');
		    			
		            
		            /* modal hide  */
		            $("#myModal").modal('hide');
		        }
		        
		        
		        
		        
		    
		    })
		    
		 //ㅡㅡㅡㅡㅡㅡㅡㅡ일정 수정하기 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
		  $('#Editsave').on("click",function(){//수정완료 버튼 
			       			
		        	var seq = sessionStorage.getItem("seq");          
		       		var Edittitle = $('#Editrecipient-name').val();
		       		var Editstart = $('#Editmodal_date_start').val();
		       		var Editend = $('#Editmodal_date_end').val();
		       		var Editcolor = $('input[type=radio][name=Editcolor]:checked').val();
		       		
		       	 if(Edittitle==''){
		         	alert("제목은 필수 입력값 입니다!");
		         	
		         }else{
		        	 $.ajax({
		        			url:'../calendar/EditEvent',
		        			type:'post',
		        			data:{ 
		        			seq:seq, //수정하려면 seq 필요 . 맨 첫번째 줄에서 seq 선언. 
		        			title:Edittitle,
		        			start_date:Editstart,
		          			end_date:Editend,
		          			contents: $("#Editmessage-text").val(),
		          			writer:'${loginInfo.name}',
		          			color: Editcolor,
		          			project_seq:0
		        			}		
		        		}).done(function(resp){	
		        	       
		        		   //일단 삭제 하고 
		        		   var eventObj = calendar.getEventById(seq);
		        			eventObj.remove(); 
		 	
		        		  if(Edittitle){//다시 만든다 똑같은 id(seq) 써주기
		        			 	 calendar.addEvent({
		        					id:seq,
		        					title:Edittitle,
		        					start:Editstart,
		        					end:Editend,
		        					color:Editcolor
		        				})
		        			}    
		        			
		        		
		        			
		        			    //modal clean 하기 
		                 $("#Editrecipient-name").val("");
		                 $('#Editmodal_date_start').val("");
		                 $('#Editmodal_date_end').val("");
		                 $("#Editmessage-text").val("");
		                 $("#Editmodal_select").val('red');
		        				
		                  
		                 /* modal hide  */
		                   $("#EditmyModal").modal('hide'); 
		                   sessionStorage.removeItem('seq');
		                 
		        		 })
		         }
		       		
		       		
		       		  
		       	}) 
		             //ㅡㅡㅡㅡㅡㅡㅡㅡ일정 삭제하기ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ	         
		                   $("#deletebtn").on("click",function(){                  
		                	   var seq = sessionStorage.getItem("seq"); 
		                      $.ajax({
		                         url:'../calendar/DeleteEvent',
		                         type:'post',
		                         data:{seq:seq}
		                      }).done(function(resp){
		                    	  sessionStorage.removeItem('seq');
		                      })
		                  	var eventObj = calendar.getEventById(seq);
		             			eventObj.remove();
		                   }) 
		                  
		   calendar.render(); 
		  });

</script>

	<!-- Header -->
	<jsp:include page="../header/header.jsp"></jsp:include>
	<!-- 왼쪽 사이드바 -->
	<jsp:include page="../header/sidebar-left.jsp"></jsp:include>


	<section id="box">






		<div id="wrapper">


			<!--테스트-->
			<div class="accordion" id="accordionExample">
				<div class="card">
					<div class="card-header" id="headingOne">
						<h2 class="mb-0">
							<button class="btn btn-link btn-block text-left" type="button"
								data-toggle="collapse" data-target="#collapseOne"
								aria-expanded="true" aria-controls="collapseOne">주간
								스케쥴러</button>
						</h2>
					</div>

					<div id="collapseOne" class="collapse show"
						aria-labelledby="headingOne" data-parent="#accordionExample">
						<div class="card-body">
									

<!-- -----------------------------------------------------------------------------------------------------------------------------------------------------------		-->
					<div id="calendarBox">
						<div id='calendar'></div>
						
						
						<!-- ㅡㅡㅡㅡㅡㅡㅡ일정 조회하기ㅡㅡㅡㅡㅡㅡㅡ -->
						<div class="row">
							<div class="col-3">
								<dialog>
								<div class="dialog__inner">
									<div>
										<i class="far fa-edit" id="eventEdit"></i> <i
											class="far fa-trash-alt" id="eventDelete"></i>
										<button class="button button-close">╳</button>
									</div>

									<div class="dialog__content">
										<div>
											<div id="title-color"></div>
											<h4></h4>
										</div>
										<div>
											<i class="fas fa-bars"></i>

										</div>
										<br>
										<div>
											<i class="far fa-clock"></i>
										</div>

										<div>
											<i class="fas fa-user-edit"></i>
										</div>
										<footer class="dialog__footer">
											<button class="button button-close">확인</button>
										</footer>
									</div>
								</div>
								</dialog>
							</div>
						</div>
						<!-- ㅡㅡㅡㅡㅡㅡㅡ/일정 조회하기ㅡㅡㅡㅡㅡㅡㅡ -->



					</div>
	<!-- -----------------------------------------------------------------------------------------------------------------------------------------------------------		-->
	
	
	
						</div>
					</div>
				</div>


			</div>

			<!--테스트 end-->
			<!--진행률 바-->
			<div class="progress" id="progress">
				<div id="selector" class="progress-bar progress-bar-striped active"
					role="progressbar" aria-valuenow="60" aria-valuemin="0"
					aria-valuemax="100" style="width:${bar}%">
					<span class="sr-only">45% Complete</span>
				</div>
			</div>

		</div>
		<div id="todoListBox">

			<!--Actions by ajax		-->
			<div id="actions-by-ajax"></div>


			<!--불러올 데이터 없을 때 생성 버튼	-->
			<div id="create_list" style="display: none;">
				<button id="create_btn" type="button" class="btn btn-default btn-xs">
					<i class="glyphicon glyphicon-plus"></i>
				</button>
			</div>

		</div>

		</div>



	</section>





	<!-- Lobi List Default installation-->
	<script src="/resources/lobilist-master/lib/jquery/jquery.min.js"></script>
	<script src="/resources/lobilist-master/lib/jquery/jquery-ui.min.js"></script>

	<script
		src="/resources/lobilist-master/lib/jquery/jquery.ui.touch-punch-improved.js"></script>
	<script
		src="/resources/lobilist-master/lib/bootstrap/js/bootstrap.min.js"></script>

	<script
		src="/resources/lobilist-master/dist/lobilist.js?v=<%=System.currentTimeMillis()%>"></script>

	<script src="/resources/lobilist-master/lib/lobibox/js/lobibox.min.js"></script>
	<script
		src="/resources/lobilist-master/lib/highlight/highlight.pack.js"></script>
	<!-- <script src="resources/lobilist-master/demo/demo.js"></script>-->

	<!--Error: Bootstrap dropdown require Popper.js -->
	<!--<script
		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> -->
	<!--<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script> -->

	<script
		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

	<script>
	

	 
	 
		$(function() {
			
			$('#collapseOne').collapse('hide');
			// 처음부터 show 를 빼버리면 캘린더 첫화면이 깨짐 (아무 캘린더 버튼을 누르면 정상화)
			// 클래스에 show를 줘서 정상로딩 시키고 별도로 hide 시키기
			
			function isEmpty(param) {
				  return Object.keys(param).length === 0;
			}

			// 할일 리스트들 양식대로 불러오기 전에 데이터 존재 여부 체크
			$.ajax({
				type : 'get',
				url : '/Task/TaskAjax',
				datatype : 'json',
				success : function(data) {			
					if(isEmpty(data.lists)){
						console.log('lists가 데이터베이스에 없음!');

				          $('#actions-by-ajax').lobiList({
				                actions: {
				                    load: "/resources/lobilist-master/demo/load.json?v=<%=System.currentTimeMillis()%>",
				                    insert: 'insert',
				    				delete: 'delete',
				    				update: 'update'
				                },
				                
				                afterListRemove: function(){
				            		console.log("afterListRemove 변화 감지!");
				    				if ($("#actions-by-ajax").find('.lobilist').text() == "") {
				    				console.log("버튼 보여라!!!");
				    				$("#create_list").css('display', 'inline-block');
				    				} else {
				    					console.log("버튼 숨겨라!!!");
				    					$("#create_list").css('display', 'none');
				    				}	
				    			}
				            });
					
					}else{
						console.log('lists가 데이터베이스에 존재!');					
						 $('#actions-by-ajax').lobiList({   
				                afterListRemove: function(){
				            		console.log("afterListRemove 변화 감지!");

				    				if ($("#actions-by-ajax").find('.lobilist').text() == "") {
				    				console.log("버튼 보여라!!!");
				    				$("#create_list").css('display', 'inline-block');
				    				} else {
				    				console.log("버튼 숨겨라!!!");
				    				$("#create_list").css('display', 'none');
				    				}
				    			},
				    			afterItemDelete: function(){
				    				//ajax 코드 추가 작업진행바 (아이템 삭제시)
				    				$.ajax({
				    					type : 'get',
				    					url : '/Task/selectCount',
				    					datatype : 'json',
				    					success : function(data) {
				    						//console.log('작업진행률 : '+ data.to);
				    						$('#selector').css('width', data.to + '%');

				    					},
				    					error : function(error) {
				    						console.error('selectCount (아이템 삭제)');
				    					}
				    				});
				    				
				    			},
				                afterItemAdd: function(){
				                	//ajax 코드 추가 작업진행바 (아이템 추가시)
				    				$.ajax({
				    					type : 'get',
				    					url : '/Task/selectCount',
				    					datatype : 'json',
				    					success : function(data) {
				    						console.log('작업진행률 : '+ data.to);
				    						$('#selector').css('width', data.to + '%');

				    					},
				    					error : function(error) {
				    						console.error('selectCount (아이템 추가)');
				    					}
				    				});
				                }
				    			
				    			
				    			
						    });	          
					}

				},
				error : function(error) {
					alert('프로젝트가 없습니다.');
				}
			});
			
	
			//ajax 코드 추가 작업진행바 (처음 불러올때)
			$.ajax({
				type : 'get',
				url : '/Task/selectCount',
				datatype : 'json',
				success : function(data) {
					console.log('초기 작업진행률 : '+ data.to);
					$('#selector').css('width', data.to + '%');

				},
				error : function(error) {
					console.error('selectCount (첫 load)');
				}
			});
			
			


			
			$('#create_btn').click(function (){
				console.log("버튼 클릭!");
				 //location.reload(); // 버튼 누르면 새로고침 ... 개선필요...
				 history.go(0);
		
				});

	            
			});
	</script>
	
<!--ㅡㅡㅡㅡㅡ 일정 생성하기 modal ㅡㅡㅡㅡㅡㅡㅡ-->
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
							aria-labelledby="exampleModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="exampleModalLabel">일정 생성하기</h5>
										<button type="button" class="close" data-dismiss="modal"
											aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<form id="modal_form" action="">
										<div class="modal-body">

											<div class="form-group">
												<label for="recipient-name" class="col-form-label">일정
													제목 </label> <input type="text" class="form-control"
													id="recipient-name" name="title">
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label">일정
													내용 </label>
												<textarea class="form-control" id="message-text"></textarea>
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label"> 일정
													기간 </label> <br>
												<div>

													<!--  ㅡㅡㅡㅡㅡㅡㅡ	bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<svg class="bi bi-alarm" width="1.5em" height="1.5em"
														viewBox="0 0 16 16" fill="currentColor"
														xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
															d="M8 15A6 6 0 1 0 8 3a6 6 0 0 0 0 12zm0 1A7 7 0 1 0 8 2a7 7 0 0 0 0 14z" />
                                    <path fill-rule="evenodd"
															d="M8 4.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.053.224l-1.5 3a.5.5 0 1 1-.894-.448L7.5 8.882V5a.5.5 0 0 1 .5-.5z" />
                                    <path
															d="M.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z" />
                                    <path fill-rule="evenodd"
															d="M11.646 14.146a.5.5 0 0 1 .708 0l1 1a.5.5 0 0 1-.708.708l-1-1a.5.5 0 0 1 0-.708zm-7.292 0a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708zM5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z" />
                                    <path d="M7 1h2v2H7V1z" />
                                </svg>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	/bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<input type="datetime-local" id="modal_date_start"
														name="start_date">
													<!-- 	<input type="time" id="start_time">  -->
													부터 <br>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<svg class="bi bi-alarm" width="1.5em" height="1.5em"
														viewBox="0 0 16 16" fill="currentColor"
														xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
															d="M8 15A6 6 0 1 0 8 3a6 6 0 0 0 0 12zm0 1A7 7 0 1 0 8 2a7 7 0 0 0 0 14z" />
                                <path fill-rule="evenodd"
															d="M8 4.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.053.224l-1.5 3a.5.5 0 1 1-.894-.448L7.5 8.882V5a.5.5 0 0 1 .5-.5z" />
                                <path
															d="M.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z" />
                                <path fill-rule="evenodd"
															d="M11.646 14.146a.5.5 0 0 1 .708 0l1 1a.5.5 0 0 1-.708.708l-1-1a.5.5 0 0 1 0-.708zm-7.292 0a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708zM5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z" />
                                <path d="M7 1h2v2H7V1z" />
                                </svg>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	/bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<input type="datetime-local" id="modal_date_end"
														id="end_date">
													<!-- <input type="time" name="end_time"> -->
													까지
												</div>
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label">색깔
													지정</label> <br>

												<!-- ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ color radio -->
												<div class="custom-radios">
													<div>
														<input type="radio" id="color-1" name="color"
															value="#2ecc71" checked> <label for="color-1">
															<span> <img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="color-2" name="color"
															value="#3498db"> <label for="color-2"> <span>
																<img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="color-3" name="color"
															value="#f5ce42"> <label for="color-3"> <span>
																<img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="color-4" name="color"
															value="#e74c3c"> <label for="color-4"> <span>
																<img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>
												</div>
												<!-- ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ -->

											</div>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-light"
												data-dismiss="modal">취소</button>
											<button type="button" class="btn btn-info" id="save">완료</button>
										</div>
									</form>
								</div>
							</div>
						</div>



						<!--ㅡㅡㅡㅡㅡ 일정 수정하기 modal ㅡㅡㅡㅡㅡㅡㅡ-->
						<div class="modal fade" id="EditmyModal" tabindex="-1"
							role="dialog" aria-labelledby="exampleModalLabel"
							aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="EditexampleModalLabel">일정
											수정하기</h5>
										<button type="button" class="close" data-dismiss="modal"
											aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<form id="Editmodal_form" action="">
										<div class="modal-body">

											<div class="form-group">
												<label for="recipient-name" class="col-form-label">일정
													제목 </label> <input type="text" class="form-control"
													id="Editrecipient-name" name="title">
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label">일정
													내용 </label>
												<textarea class="form-control" id="Editmessage-text"></textarea>
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label"> 일정
													기간 </label> <br>
												<div>

													<!--  ㅡㅡㅡㅡㅡㅡㅡ	bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<svg class="bi bi-alarm" width="1.5em" height="1.5em"
														viewBox="0 0 16 16" fill="currentColor"
														xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
															d="M8 15A6 6 0 1 0 8 3a6 6 0 0 0 0 12zm0 1A7 7 0 1 0 8 2a7 7 0 0 0 0 14z" />
                                    <path fill-rule="evenodd"
															d="M8 4.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.053.224l-1.5 3a.5.5 0 1 1-.894-.448L7.5 8.882V5a.5.5 0 0 1 .5-.5z" />
                                    <path
															d="M.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z" />
                                    <path fill-rule="evenodd"
															d="M11.646 14.146a.5.5 0 0 1 .708 0l1 1a.5.5 0 0 1-.708.708l-1-1a.5.5 0 0 1 0-.708zm-7.292 0a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708zM5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z" />
                                    <path d="M7 1h2v2H7V1z" />
                                </svg>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	/bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<input type="datetime-local" id="Editmodal_date_start"
														name="Editstart_date">
													<!-- 	<input type="time" id="start_time">  -->
													부터 <br>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<svg class="bi bi-alarm" width="1.5em" height="1.5em"
														viewBox="0 0 16 16" fill="currentColor"
														xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
															d="M8 15A6 6 0 1 0 8 3a6 6 0 0 0 0 12zm0 1A7 7 0 1 0 8 2a7 7 0 0 0 0 14z" />
                                <path fill-rule="evenodd"
															d="M8 4.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.053.224l-1.5 3a.5.5 0 1 1-.894-.448L7.5 8.882V5a.5.5 0 0 1 .5-.5z" />
                                <path
															d="M.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z" />
                                <path fill-rule="evenodd"
															d="M11.646 14.146a.5.5 0 0 1 .708 0l1 1a.5.5 0 0 1-.708.708l-1-1a.5.5 0 0 1 0-.708zm-7.292 0a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708zM5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z" />
                                <path d="M7 1h2v2H7V1z" />
                                </svg>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	/bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<input type="datetime-local" id="Editmodal_date_end"
														id="Editend_date">
													<!-- <input type="time" name="end_time"> -->
													까지
												</div>
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label">색깔
													지정</label> <br>

												<!-- ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ color radio -->
												<div class="Editcustom-radios">
													<div>
														<input type="radio" id="Editcolor-1" name="Editcolor"
															value="#2ecc71" checked> <label for="Editcolor-1">
															<span> <img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="Editcolor-2" name="Editcolor"
															value="#3498db"> <label for="Editcolor-2">
															<span> <img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="Editcolor-3" name="Editcolor"
															value="#f5ce42"> <label for="Editcolor-3">
															<span> <img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="Editcolor-4" name="Editcolor"
															value="#e74c3c"> <label for="Editcolor-4">
															<span> <img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>
												</div>
												<!-- ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ -->

											</div>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-light"
												data-dismiss="modal">취소</button>
											<button type="button" class="btn btn-info" id="Editsave">완료</button>
										</div>
									</form>
								</div>
							</div>
						</div>

						<!--ㅡㅡㅡㅡㅡ /일정 수정하기 modal ㅡㅡㅡㅡㅡㅡㅡ-->

						<!--ㅡㅡㅡㅡㅡ 삭제 확인 modal ㅡㅡㅡㅡㅡㅡㅡ-->

						<!-- Modal -->
						<div class="modal fade" id="deleteModal" tabindex="-1"
							role="dialog" aria-labelledby="exampleModalLabel"
							aria-hidden="true">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="exampleModalLabel">일정 삭제</h5>
										<button type="button" class="close" data-dismiss="modal"
											aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body">일정을 삭제하시겠습니까?</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-light"
											data-dismiss="modal">취소</button>
										<button type="button" class="btn btn-info" id="deletebtn"
											data-dismiss="modal">삭제</button>
									</div>
								</div>
							</div>
						</div>

						<!--ㅡㅡㅡㅡㅡ /삭제 확인 modal ㅡㅡㅡㅡㅡㅡㅡ-->
</body>
</html>

모달창 투명? 컬럽스 닫기 안됨

에러수정 cdn 혹은 모달 위치 변경

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link href='/resources/css/calendar/calendar.css?after' rel='stylesheet' />
<script src='/resources/js/calendar/calendar.js'></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- 부트스트랩 -->
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script
   src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- 아이콘 -->
<script src="https://kit.fontawesome.com/8f6ea3bf70.js"
	crossorigin="anonymous"></script>
 <!-- 구글 폰트 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&display=swap" rel="stylesheet">	





<!-- Lobi List Default installation-->
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/jquery/jquery-ui.min.css" />
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="/resources/lobilist-master/dist/lobilist.min.css">
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/lobibox/css/lobibox.min.css">
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/highlight/github.css">
<!--<link rel="stylesheet" href="resources/lobilist-master/demo/demo.css">-->

<style>
body {
	overflow-y: hidden;
	overflow-x: hidden;
}

#wrapper {
	width: 1100px;
	position: fixed;
	z-index: 10;
	bottom: 0px;
	left: 25%;
	background-color: rgba(255, 255, 255, 0.7);
	
}

#todoListBox {
	margin: 10px;
	overflow: hidden;
}

#box {
	margin: 10px 0px 0px 10px;
}

#calendar {
	max-width: 1100px;
	margin: 0 auto;
}

#todoListBox {
	width: 100%;
}

#calendarBox {
	margin-top: 100px;
	width: 1100px;
	margin: 0 auto;
}

#actions-by-ajax {
	height: 80%;
	overflow-y: hidden;
}
#progress{
	width: 1100px;

	margin: auto;
}


</style>


</head>


<body>

	<script>
	 document.addEventListener('DOMContentLoaded', function() {
			
		    var calendarEl = document.getElementById('calendar');
			
		    var calendar = new FullCalendar.Calendar(calendarEl, {
		    	height:200,
		    	displayEventTime:false,//제목에 시간 같이 display 안되게 설정하는
		    	locale: "ko", // 한국어로 설정 
		    	initialView:'dayGridWeek',
		      	headerToolbar: {
		        left: 'prev,next today',
		        center: 'title',
		        right: 'dayGridWeek,dayGridDay'
		      },
		      navLinks: true, // can click day/week names to navigate views
		      selectable: true,
		      selectMirror: true,
		      select: function(arg) {
		          function date_to_str(format)
		          {//날짜형식 내가 원하는 대로 바꾸는 함수 
		              var year = format.getFullYear();
		              var month = format.getMonth() + 1;
		              if(month<10) month = '0' + month;
		              var date = format.getDate();
		              if(date<10) date = '0' + date;
		              var hour = format.getHours();
		              if(hour<10) hour = '0' + hour;
		              var min = format.getMinutes();
		              if(min<10) min = '0' + min;
		             
				       return year + "-" + month + "-" + date + "T" + hour + ":" + min;
		          }
		          var arg_time = date_to_str(arg.start); //내가 클릭한 날짜
		    	//modal 띄우기 
		        $("#myModal").modal(); 
		        $("#modal_date_start").val(arg_time);
		    	//일정 끝나는 시간이 시작시간보다 빠르면 바꿔주는 이벤트 - 시작시간 선택 후 끝나는 시간 선택 했을 때
		    	$("#modal_date_end").focusout(function(){
		    		if(($("#modal_date_end").val()).replace(/[^0-9]/g,"")<($("#modal_date_start").val()).replace(/[^0-9]/g,"")){
		    		$("#modal_date_end").val($("#modal_date_start").val());
		    	}
		    	})
		    	
		    		//일정 끝나는 시간이 시작시간보다 빠르면 바꿔주는 이벤트 - 끝나는 시간 선택 후 시작 시간 선택 했을 때
		    	$("#modal_date_start").focusout(function(){
		    			if(($("#modal_date_start").val()).replace(/[^0-9]/g,"")>($("#modal_date_end").val()).replace(/[^0-9]/g,"")){
		    	    		if($("#modal_date_end").val()==''){
		    	    			
		    	    		} else{
		    	    			$("#modal_date_start").val($("#modal_date_end").val()); 
		    	    		}	
		    		} 	
		    	})
		    	
		       
		        
		        calendar.unselect();
		      },
		      eventClick: function(arg) {
		    	var seq = arg.event.id;
		    	$.ajax({
		    		url : "../calendar/selectEvent",
		    		type: "post",
		    		data:{seq:seq}
		    	}).done(function(resp){
		    		resp=JSON.parse(resp);
		    		var seq=resp.seq;
		  			var projcet_seq=resp.project_seq;
		  			var title = resp.title;
		  			var contents = resp.contents;
		  			var writer = resp.writer;
		  			var start_date=resp.start_date;
		  			var end_date=resp.end_date;
		  			var color=resp.color;
		  			
		  			$('.dialog__content h4').append('<div class='+'dynamic'+'>'+title+'</div>'); 
		  			$('.dialog__content>div:nth-child(2)').append('<div class="dynamic" style="width:270px;">'+contents+'</div>');
		  			$('.dialog__content>div:nth-child(4)').append('<div class='+'dynamic'+'>'+start_date+'</div>');
		  			$('.dialog__content>div:nth-child(4)').after('<div class='+'dynamic'+' style="margin-left:80px">'+end_date+'</div>');
		  			$('.dialog__content>div:nth-child(6)').append('<div class="dynamic" style="float:left">'+writer+'</div>');
		  			
		  			$('#title-color').css('background-color',color);
		  			
		    		const modal = document.querySelector('dialog');
		        	const btnClose = document.querySelectorAll('.button-close');
		        	modal.showModal();
		        	btnClose.forEach((elm) => elm.addEventListener('click', () => closeModal()));
		        	modal.addEventListener('click', (e) => detectBackdropClick(e));
		      
		        	closeModal = () => {
		        	    modal.classList.add("dialog__animate-out");
		        	    modal.addEventListener('animationend', handleClose, false);
		        	   
		        	}

		        	handleClose = () => {
		        	    modal.classList.remove("dialog__animate-out");
		        	    modal.removeEventListener('animationend', handleClose, false);
		        	    modal.close();
		        	    $('.dynamic').remove(); 
		        	}

		        	detectBackdropClick = (event) => {
		        	    if(event.target === modal) {
		        	        closeModal();
		        	    }
		        	}
		        	
		        	 $('#eventEdit').on('click',function(){    		 
		        		 closeModal();	
		        		 //수정하기 modal에  값 채워넣기 
		        		 $('#Editrecipient-name').val(title);
		        		 $("#Editmessage-text").val(contents)
		        		 $('#Editmodal_date_start').val(start_date);
		        		 $('#Editmodal_date_end').val(end_date);
		        		 /* $('.Editcustom-radios input[type=radio][name=Editcolor][background-color:'+color+']:checked'); */
		        		 //색깔 선택 수정하기 !!!!!!
		        		 sessionStorage.setItem("seq",seq);
		            	 $("#EditmyModal").modal();
		        		 
		            }) 
		            
		            $('#eventDelete').on("click",function(){//일정 삭제하기
		            	sessionStorage.setItem("seq",seq);
		            	closeModal();
		            	$('#deleteModal').modal();
		            })
		            
		            
		    	})	
		    
		      },
		     /*  editable: true, */
		      dayMaxEvents: true, // allow "more" link when too many events
		      events: [
		    	   <c:forEach var="i" items="${list}">
		         	{
		         		id:'${i.seq}',
		         		title:'${i.title}',
		         		start:'${i.start_date}',
		         		end:'${i.end_date}',
		         		color:'${i.color}'
		         	},
		         </c:forEach>	 
		      ]
		    });
		   
		    //일정 생성하기 버튼 눌렀을 때 : 이벤트 안에 이벤트를 넣으면 버그가 일어난다!  
			   $("#save").on("click",function(){
		        var title = $("#recipient-name").val();
		        var start = $('#modal_date_start').val();
		        var end =$('#modal_date_end').val(); 
		        var color = $('input[type=radio][name=color]:checked').val();
		 	
		        if(title==''){
		        	alert("제목은 필수 입력값 입니다!");
		        	
		        }else{
		        	$.ajax({
		            	url:"../calendar/addEvent",
		            	type:"post",
		            	data:{
		            		title : title,
		            		start_date : start,
		            		end_date: end,
		            		contents : $("#message-text").val(),
		            		writer : '${loginInfo.name}',
		            		color : color,
		            		poject_seq:0
		            	}
		            }).done(function(resp){
		           		resp=JSON.parse(resp);
		           		var seq = resp.seq
		           		if(title){
		                    calendar.addEvent({
		                    	id:seq,
		                        title:title,
		                        start:start,
		                        end:end,
		                        color:color
		                    })
		                }
		           		
		            })
		            /*   modal clean 하기 */
		            $("#recipient-name").val("");
		            $('#modal_date_start').val("");
		            $('#modal_date_end').val("");
		            $("#message-text").val("");
		            $("#modal_select").val('red');
		    			
		            
		            /* modal hide  */
		            $("#myModal").modal('hide');
		        }
		        
		        
		        
		        
		    
		    })
		    
		 //ㅡㅡㅡㅡㅡㅡㅡㅡ일정 수정하기 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
		  $('#Editsave').on("click",function(){//수정완료 버튼 
			       			
		        	var seq = sessionStorage.getItem("seq");          
		       		var Edittitle = $('#Editrecipient-name').val();
		       		var Editstart = $('#Editmodal_date_start').val();
		       		var Editend = $('#Editmodal_date_end').val();
		       		var Editcolor = $('input[type=radio][name=Editcolor]:checked').val();
		       		
		       	 if(Edittitle==''){
		         	alert("제목은 필수 입력값 입니다!");
		         	
		         }else{
		        	 $.ajax({
		        			url:'../calendar/EditEvent',
		        			type:'post',
		        			data:{ 
		        			seq:seq, //수정하려면 seq 필요 . 맨 첫번째 줄에서 seq 선언. 
		        			title:Edittitle,
		        			start_date:Editstart,
		          			end_date:Editend,
		          			contents: $("#Editmessage-text").val(),
		          			writer:'${loginInfo.name}',
		          			color: Editcolor,
		          			project_seq:0
		        			}		
		        		}).done(function(resp){	
		        	       
		        		   //일단 삭제 하고 
		        		   var eventObj = calendar.getEventById(seq);
		        			eventObj.remove(); 
		 	
		        		  if(Edittitle){//다시 만든다 똑같은 id(seq) 써주기
		        			 	 calendar.addEvent({
		        					id:seq,
		        					title:Edittitle,
		        					start:Editstart,
		        					end:Editend,
		        					color:Editcolor
		        				})
		        			}    
		        			
		        		
		        			
		        			    //modal clean 하기 
		                 $("#Editrecipient-name").val("");
		                 $('#Editmodal_date_start').val("");
		                 $('#Editmodal_date_end').val("");
		                 $("#Editmessage-text").val("");
		                 $("#Editmodal_select").val('red');
		        				
		                  
		                 /* modal hide  */
		                   $("#EditmyModal").modal('hide'); 
		                   sessionStorage.removeItem('seq');
		                 
		        		 })
		         }
		       		
		       		
		       		  
		       	}) 
		             //ㅡㅡㅡㅡㅡㅡㅡㅡ일정 삭제하기ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ	         
		                   $("#deletebtn").on("click",function(){                  
		                	   var seq = sessionStorage.getItem("seq"); 
		                      $.ajax({
		                         url:'../calendar/DeleteEvent',
		                         type:'post',
		                         data:{seq:seq}
		                      }).done(function(resp){
		                    	  sessionStorage.removeItem('seq');
		                      })
		                  	var eventObj = calendar.getEventById(seq);
		             			eventObj.remove();
		                   }) 
		                  
		   calendar.render(); 
		  });

</script>

	<!-- Header -->
	<jsp:include page="../header/header.jsp"></jsp:include>
	<!-- 왼쪽 사이드바 -->
	<jsp:include page="../header/sidebar-left.jsp"></jsp:include>


	<section id="box">






		<div id="wrapper">


		

<!-- -----------------------------------------------------------------------------------------------------------------------------------------------------------		-->
					<div id="calendarBox">
						<div id='calendar'></div>
						
						
						<!-- ㅡㅡㅡㅡㅡㅡㅡ일정 조회하기ㅡㅡㅡㅡㅡㅡㅡ -->
						<div class="row">
							<div class="col-3">
								<dialog>
								<div class="dialog__inner">
									<div>
										<i class="far fa-edit" id="eventEdit"></i> <i
											class="far fa-trash-alt" id="eventDelete"></i>
										<button class="button button-close">╳</button>
									</div>

									<div class="dialog__content">
										<div>
											<div id="title-color"></div>
											<h4></h4>
										</div>
										<div>
											<i class="fas fa-bars"></i>

										</div>
										<br>
										<div>
											<i class="far fa-clock"></i>
										</div>

										<div>
											<i class="fas fa-user-edit"></i>
										</div>
										<footer class="dialog__footer">
											<button class="button button-close">확인</button>
										</footer>
									</div>
								</div>
								</dialog>
							</div>
						</div>
						<!-- ㅡㅡㅡㅡㅡㅡㅡ/일정 조회하기ㅡㅡㅡㅡㅡㅡㅡ -->



					</div>
	<!-- -----------------------------------------------------------------------------------------------------------------------------------------------------------		-->
	

			<!--진행률 바-->
			<div class="progress" id="progress">
				<div id="selector" class="progress-bar progress-bar-striped active"
					role="progressbar" aria-valuenow="60" aria-valuemin="0"
					aria-valuemax="100" style="width:${bar}%">
					<span class="sr-only">45% Complete</span>
				</div>
			</div>

		</div>
		<div id="todoListBox">

			<!--Actions by ajax		-->
			<div id="actions-by-ajax"></div>


			<!--불러올 데이터 없을 때 생성 버튼	-->
			<div id="create_list" style="display: none;">
				<button id="create_btn" type="button" class="btn btn-default btn-xs">
					<i class="glyphicon glyphicon-plus"></i>
				</button>
			</div>

		</div>

		</div>



	</section>





	<!-- Lobi List Default installation-->
	<script src="/resources/lobilist-master/lib/jquery/jquery.min.js"></script>
	<script src="/resources/lobilist-master/lib/jquery/jquery-ui.min.js"></script>

	<script
		src="/resources/lobilist-master/lib/jquery/jquery.ui.touch-punch-improved.js"></script>
	<script
		src="/resources/lobilist-master/lib/bootstrap/js/bootstrap.min.js"></script>

	<script
		src="/resources/lobilist-master/dist/lobilist.js?v=<%=System.currentTimeMillis()%>"></script>

	<script src="/resources/lobilist-master/lib/lobibox/js/lobibox.min.js"></script>
	<script
		src="/resources/lobilist-master/lib/highlight/highlight.pack.js"></script>
	<!-- <script src="resources/lobilist-master/demo/demo.js"></script>-->

	<!--Error: Bootstrap dropdown require Popper.js -->
	<!--<script
		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>

	
<!--ㅡㅡㅡㅡㅡ 일정 생성하기 modal ㅡㅡㅡㅡㅡㅡㅡ-->
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
							aria-labelledby="exampleModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="exampleModalLabel">일정 생성하기</h5>
										<button type="button" class="close" data-dismiss="modal"
											aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<form id="modal_form" action="">
										<div class="modal-body">

											<div class="form-group">
												<label for="recipient-name" class="col-form-label">일정
													제목 </label> <input type="text" class="form-control"
													id="recipient-name" name="title">
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label">일정
													내용 </label>
												<textarea class="form-control" id="message-text"></textarea>
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label"> 일정
													기간 </label> <br>
												<div>

													<!--  ㅡㅡㅡㅡㅡㅡㅡ	bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<svg class="bi bi-alarm" width="1.5em" height="1.5em"
														viewBox="0 0 16 16" fill="currentColor"
														xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
															d="M8 15A6 6 0 1 0 8 3a6 6 0 0 0 0 12zm0 1A7 7 0 1 0 8 2a7 7 0 0 0 0 14z" />
                                    <path fill-rule="evenodd"
															d="M8 4.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.053.224l-1.5 3a.5.5 0 1 1-.894-.448L7.5 8.882V5a.5.5 0 0 1 .5-.5z" />
                                    <path
															d="M.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z" />
                                    <path fill-rule="evenodd"
															d="M11.646 14.146a.5.5 0 0 1 .708 0l1 1a.5.5 0 0 1-.708.708l-1-1a.5.5 0 0 1 0-.708zm-7.292 0a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708zM5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z" />
                                    <path d="M7 1h2v2H7V1z" />
                                </svg>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	/bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<input type="datetime-local" id="modal_date_start"
														name="start_date">
													<!-- 	<input type="time" id="start_time">  -->
													부터 <br>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<svg class="bi bi-alarm" width="1.5em" height="1.5em"
														viewBox="0 0 16 16" fill="currentColor"
														xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
															d="M8 15A6 6 0 1 0 8 3a6 6 0 0 0 0 12zm0 1A7 7 0 1 0 8 2a7 7 0 0 0 0 14z" />
                                <path fill-rule="evenodd"
															d="M8 4.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.053.224l-1.5 3a.5.5 0 1 1-.894-.448L7.5 8.882V5a.5.5 0 0 1 .5-.5z" />
                                <path
															d="M.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z" />
                                <path fill-rule="evenodd"
															d="M11.646 14.146a.5.5 0 0 1 .708 0l1 1a.5.5 0 0 1-.708.708l-1-1a.5.5 0 0 1 0-.708zm-7.292 0a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708zM5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z" />
                                <path d="M7 1h2v2H7V1z" />
                                </svg>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	/bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<input type="datetime-local" id="modal_date_end"
														id="end_date">
													<!-- <input type="time" name="end_time"> -->
													까지
												</div>
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label">색깔
													지정</label> <br>

												<!-- ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ color radio -->
												<div class="custom-radios">
													<div>
														<input type="radio" id="color-1" name="color"
															value="#2ecc71" checked> <label for="color-1">
															<span> <img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="color-2" name="color"
															value="#3498db"> <label for="color-2"> <span>
																<img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="color-3" name="color"
															value="#f5ce42"> <label for="color-3"> <span>
																<img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="color-4" name="color"
															value="#e74c3c"> <label for="color-4"> <span>
																<img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>
												</div>
												<!-- ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ -->

											</div>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-light"
												data-dismiss="modal">취소</button>
											<button type="button" class="btn btn-info" id="save">완료</button>
										</div>
									</form>
								</div>
							</div>
						</div>



						<!--ㅡㅡㅡㅡㅡ 일정 수정하기 modal ㅡㅡㅡㅡㅡㅡㅡ-->
						<div class="modal fade" id="EditmyModal" tabindex="-1"
							role="dialog" aria-labelledby="exampleModalLabel"
							aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="EditexampleModalLabel">일정
											수정하기</h5>
										<button type="button" class="close" data-dismiss="modal"
											aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<form id="Editmodal_form" action="">
										<div class="modal-body">

											<div class="form-group">
												<label for="recipient-name" class="col-form-label">일정
													제목 </label> <input type="text" class="form-control"
													id="Editrecipient-name" name="title">
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label">일정
													내용 </label>
												<textarea class="form-control" id="Editmessage-text"></textarea>
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label"> 일정
													기간 </label> <br>
												<div>

													<!--  ㅡㅡㅡㅡㅡㅡㅡ	bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<svg class="bi bi-alarm" width="1.5em" height="1.5em"
														viewBox="0 0 16 16" fill="currentColor"
														xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
															d="M8 15A6 6 0 1 0 8 3a6 6 0 0 0 0 12zm0 1A7 7 0 1 0 8 2a7 7 0 0 0 0 14z" />
                                    <path fill-rule="evenodd"
															d="M8 4.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.053.224l-1.5 3a.5.5 0 1 1-.894-.448L7.5 8.882V5a.5.5 0 0 1 .5-.5z" />
                                    <path
															d="M.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z" />
                                    <path fill-rule="evenodd"
															d="M11.646 14.146a.5.5 0 0 1 .708 0l1 1a.5.5 0 0 1-.708.708l-1-1a.5.5 0 0 1 0-.708zm-7.292 0a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708zM5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z" />
                                    <path d="M7 1h2v2H7V1z" />
                                </svg>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	/bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<input type="datetime-local" id="Editmodal_date_start"
														name="Editstart_date">
													<!-- 	<input type="time" id="start_time">  -->
													부터 <br>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<svg class="bi bi-alarm" width="1.5em" height="1.5em"
														viewBox="0 0 16 16" fill="currentColor"
														xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
															d="M8 15A6 6 0 1 0 8 3a6 6 0 0 0 0 12zm0 1A7 7 0 1 0 8 2a7 7 0 0 0 0 14z" />
                                <path fill-rule="evenodd"
															d="M8 4.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.053.224l-1.5 3a.5.5 0 1 1-.894-.448L7.5 8.882V5a.5.5 0 0 1 .5-.5z" />
                                <path
															d="M.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z" />
                                <path fill-rule="evenodd"
															d="M11.646 14.146a.5.5 0 0 1 .708 0l1 1a.5.5 0 0 1-.708.708l-1-1a.5.5 0 0 1 0-.708zm-7.292 0a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708zM5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z" />
                                <path d="M7 1h2v2H7V1z" />
                                </svg>
													<!--  ㅡㅡㅡㅡㅡㅡㅡ	/bootstrap -icon ㅡㅡㅡㅡㅡ -->
													<input type="datetime-local" id="Editmodal_date_end"
														id="Editend_date">
													<!-- <input type="time" name="end_time"> -->
													까지
												</div>
											</div>
											<div class="form-group">
												<label for="message-text" class="col-form-label">색깔
													지정</label> <br>

												<!-- ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ color radio -->
												<div class="Editcustom-radios">
													<div>
														<input type="radio" id="Editcolor-1" name="Editcolor"
															value="#2ecc71" checked> <label for="Editcolor-1">
															<span> <img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="Editcolor-2" name="Editcolor"
															value="#3498db"> <label for="Editcolor-2">
															<span> <img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="Editcolor-3" name="Editcolor"
															value="#f5ce42"> <label for="Editcolor-3">
															<span> <img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>

													<div>
														<input type="radio" id="Editcolor-4" name="Editcolor"
															value="#e74c3c"> <label for="Editcolor-4">
															<span> <img
																src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"
																alt="Checked Icon" />
														</span>
														</label>
													</div>
												</div>
												<!-- ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ -->

											</div>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-light"
												data-dismiss="modal">취소</button>
											<button type="button" class="btn btn-info" id="Editsave">완료</button>
										</div>
									</form>
								</div>
							</div>
						</div>

						<!--ㅡㅡㅡㅡㅡ /일정 수정하기 modal ㅡㅡㅡㅡㅡㅡㅡ-->

						<!--ㅡㅡㅡㅡㅡ 삭제 확인 modal ㅡㅡㅡㅡㅡㅡㅡ-->

						<!-- Modal -->
						<div class="modal fade" id="deleteModal" tabindex="-1"
							role="dialog" aria-labelledby="exampleModalLabel"
							aria-hidden="true">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="exampleModalLabel">일정 삭제</h5>
										<button type="button" class="close" data-dismiss="modal"
											aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body">일정을 삭제하시겠습니까?</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-light"
											data-dismiss="modal">취소</button>
										<button type="button" class="btn btn-info" id="deletebtn"
											data-dismiss="modal">삭제</button>
									</div>
								</div>
							</div>
						</div>

						<!--ㅡㅡㅡㅡㅡ /삭제 확인 modal ㅡㅡㅡㅡㅡㅡㅡ-->

	<script>
	

	 
	 
		$(function() {
			
			$('#collapseOne').collapse('hide');
			// 처음부터 show 를 빼버리면 캘린더 첫화면이 깨짐 (아무 캘린더 버튼을 누르면 정상화)
			// 클래스에 show를 줘서 정상로딩 시키고 별도로 hide 시키기
			
			function isEmpty(param) {
				  return Object.keys(param).length === 0;
			}

			// 할일 리스트들 양식대로 불러오기 전에 데이터 존재 여부 체크
			$.ajax({
				type : 'get',
				url : '/Task/TaskAjax',
				datatype : 'json',
				success : function(data) {			
					if(isEmpty(data.lists)){
						console.log('lists가 데이터베이스에 없음!');

				          $('#actions-by-ajax').lobiList({
				                actions: {
				                    load: "/resources/lobilist-master/demo/load.json?v=<%=System.currentTimeMillis()%>",
				                    insert: 'insert',
				    				delete: 'delete',
				    				update: 'update'
				                },
				                
				                afterListRemove: function(){
				            		console.log("afterListRemove 변화 감지!");
				    				if ($("#actions-by-ajax").find('.lobilist').text() == "") {
				    				console.log("버튼 보여라!!!");
				    				$("#create_list").css('display', 'inline-block');
				    				} else {
				    					console.log("버튼 숨겨라!!!");
				    					$("#create_list").css('display', 'none');
				    				}	
				    			}
				            });
					
					}else{
						console.log('lists가 데이터베이스에 존재!');					
						 $('#actions-by-ajax').lobiList({   
				                afterListRemove: function(){
				            		console.log("afterListRemove 변화 감지!");

				    				if ($("#actions-by-ajax").find('.lobilist').text() == "") {
				    				console.log("버튼 보여라!!!");
				    				$("#create_list").css('display', 'inline-block');
				    				} else {
				    				console.log("버튼 숨겨라!!!");
				    				$("#create_list").css('display', 'none');
				    				}
				    			},
				    			afterItemDelete: function(){
				    				//ajax 코드 추가 작업진행바 (아이템 삭제시)
				    				$.ajax({
				    					type : 'get',
				    					url : '/Task/selectCount',
				    					datatype : 'json',
				    					success : function(data) {
				    						//console.log('작업진행률 : '+ data.to);
				    						$('#selector').css('width', data.to + '%');

				    					},
				    					error : function(error) {
				    						console.error('selectCount (아이템 삭제)');
				    					}
				    				});
				    				
				    			},
				                afterItemAdd: function(){
				                	//ajax 코드 추가 작업진행바 (아이템 추가시)
				    				$.ajax({
				    					type : 'get',
				    					url : '/Task/selectCount',
				    					datatype : 'json',
				    					success : function(data) {
				    						console.log('작업진행률 : '+ data.to);
				    						$('#selector').css('width', data.to + '%');

				    					},
				    					error : function(error) {
				    						console.error('selectCount (아이템 추가)');
				    					}
				    				});
				                }
				    			
				    			
				    			
						    });	          
					}

				},
				error : function(error) {
					alert('프로젝트가 없습니다.');
				}
			});
			
	
			//ajax 코드 추가 작업진행바 (처음 불러올때)
			$.ajax({
				type : 'get',
				url : '/Task/selectCount',
				datatype : 'json',
				success : function(data) {
					console.log('초기 작업진행률 : '+ data.to);
					$('#selector').css('width', data.to + '%');

				},
				error : function(error) {
					console.error('selectCount (첫 load)');
				}
			});
			
			


			
			$('#create_btn').click(function (){
				console.log("버튼 클릭!");
				 //location.reload(); // 버튼 누르면 새로고침 ... 개선필요...
				 history.go(0);
		
				});

	            
			});
	</script>

</body>
</html>

load 방식으로 변경 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<!-- Lobi List Default installation-->
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/jquery/jquery-ui.min.css" />
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="/resources/lobilist-master/dist/lobilist.min.css">
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/lobibox/css/lobibox.min.css">
<link rel="stylesheet"
	href="/resources/lobilist-master/lib/highlight/github.css">
	
	
<link href='/resources/css/task/task.css' rel='stylesheet' />
   	<!--Error: Bootstrap dropdown require Popper.js -- 상단부에 있어야 리스트 색 변경시 에러가 안남 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>
	

<!-- 부트스트랩 -->
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script
   src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<style>


</style>


</head>


<body>

	


	<section id="box">






		<div id="wrapper">

		<!-- 주간 스케쥴러 관련 스크랩트, calendarBox, 관련 모달 -->
<jsp:include page="scheduler.jsp"/>





			<!--진행률 바-->
			<div class="progress" id="progress">
				<div id="selector" class="progress-bar progress-bar-striped active"
					role="progressbar" aria-valuenow="60" aria-valuemin="0"
					aria-valuemax="100" style="width:${bar}%">
					<span class="sr-only">45% Complete</span>
				</div>
			</div>

		</div>
		<div id="todoListBox">

			<!--Actions by ajax		-->
			<div id="actions-by-ajax"></div>


			<!--불러올 데이터 없을 때 생성 버튼	-->
			<div id="create_list" style="display: none;">
				<button id="create_btn" type="button" class="btn btn-default btn-xs">
					<i class="glyphicon glyphicon-plus"></i>
				</button>
			</div>

		</div>

		</div>



	</section>








	<!-- Lobi List Default installation-->
	<script src="/resources/lobilist-master/lib/jquery/jquery.min.js"></script>
	<script src="/resources/lobilist-master/lib/jquery/jquery-ui.min.js"></script>
	<script
		src="/resources/lobilist-master/lib/jquery/jquery.ui.touch-punch-improved.js"></script>
	<script
		src="/resources/lobilist-master/lib/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="/resources/lobilist-master/dist/lobilist.js?v=<%=System.currentTimeMillis()%>"></script>
	<script src="/resources/lobilist-master/lib/lobibox/js/lobibox.min.js"></script>
	<script
		src="/resources/lobilist-master/lib/highlight/highlight.pack.js"></script>


		<!--task.js는 로비리스트 기본 설치 태그 밑에 위치해야 동작! -->
<script src='/resources/js/task/task.js'></script>

		<!-- 주간 스케쥴러 관련 스크랩트, calendarBox, 관련 모달 -->
<jsp:include page="modal.jsp"/>


</body>
</html>

https://mygumi.tistory.com/281

애플리케이션설계_능력단위_서술형_예상

프로그래밍에서 공통모듈이란?
유스케이스 다이어그램 용어들 복습
클래스 다이어그램 용어들 복습
ERD 란?

소프트웨어 응집도란?
소프트웨어 결합도란?

웹서버와 웹어플리케이션의 차이?
IT분야에서 가용성이란?
IT분야에서 이중화란?
통신 프로토콜이란?

운영체제란 무엇인가?
컴퓨터 하드웨어의 4가지 유형?
형상관리시스템이란 무엇인가?
GitHub 란 무엇인가?
IDE 란 무엇인가?

운영체제
jdbc dbcp

제시하는 방식으로 만들기

프로그래밍에서 공통모듈이란?
- 공통 모듈은 정보 시스템 구축 시 자주 사용하는 기능들로서 재사용이 가능하게 패키지로 제공하는 독립된 모듈을 의미한다. 

유스케이스 다이어그램 용어들 복습

- 철저하게 사용자의 입장에서 시스템에 수행하는 활동을 나열하고, 활동간의 관계를 표시하는 다이어그램

- Actor / System (개발자의 개발 영역) / Usecase (개발자가 개발해야되는 요소, Actor가 시스템내에서 수행 할 수 있는 기능) / Extend - 로그인 후에 추가적으로(선택적으로) 할 수 있는 일 /

클래스 다이어그램 용어들 복습

- realization 설계를 위한 클래스 (추상체)

- Dependency 의존하는 , Chef는 Fire를 의존한다.

- association_aggregation 디팬던시와는 다름! 디팬던시에서는 지역변수,매개변수로만 쓰이고 사라짐

- association_composition 생성 위치가 외부가 아니라 클래스 내부 - 생성주기가 일치함 : composition 구성하다.

ERD 란?
- "구조"화된 데이터를 저장하기 위해 데이터베이스를 사용하고 이 데이터의 "구조" 및 그에 수반한 제약 조건들은 다양한 기법에 의해 설계될 수 있다. 
- 그 기법 중 하나가 개체-관계 모델링(ERM: Entity-Relationship Modelling)이다.
- ERM 프로세스의 산출물을 가리켜 개체-관계 다이어그램(ERD: Entity-Relationship Diagram)이라 한다.

소프트웨어 응집도란?
- 하나의 모듈이 하나의 기능을 수행하는 요소들간의 연관성 척도
- 독립적인 모듈이 되기 위해서는 응집도가 강해야한다.

소프트웨어 결합도란?
- 어떤 모듈이 다른 모듈에 의존하는 정도를 측정하는 척도
- 독립적인 모듈이 되기 위해서는 결합도가 약해야한다.

웹서버와 웹어플리케이션의 차이?

- 웹 서버는 클라이언트(웹 브라우저)로 부터 HTTP 방식으로 정적인 자원을(html, css, 이미지 등) 요청 받아  그에 맞는 응답을 제공해주는 프로그램 이다. 또 자체적으로 처리할 수 없는 동적인 자원(JSP, PHP, ASP.net, DB연동 등)을 웹 컨테이너로 넘겨주고 컨테이너에서 처리한 결과를 다시 받아 클라이언트에게 제공해주는 역할을한다.

- 웹 컨테이너는 웹 서버가 보낸 JSP, PHP, ASP.net등의 파일을 실행하고 수행 결과를 다시 웹 서버로 보내주는 역할을 한다. 웹 어플리케이션 서버는  웹 서버와 웹 컨테이너가 합쳐진 형태.

인터넷 상에서 HTTP를 통해 어플리케이션을 수행해 준다. 동적 서버 콘텐츠를 수행하는 것으로 일반적인 웹 서버와 구별이 되며 주로 데이터베이스 서버와 같이 수행이 된다. 

IT분야에서 가용성이란?

- 서비스가 다운되지 않고 정상적으로 유지된 시간

- 서버. 네트워크 등의 정보시스템이 장애 없이 정상적으로 요청된 서비스를

수행할 수 있는 능력.

시스템이 장애 상태에 빠져 더이상 서비스 혹은 자원을 제공하지 못 할 경우

가용성이 저하

IT분야에서 이중화란?

- 물리적으로 떨어져 있는 여러 개의 데이터베이스에 대하여 로컬 데이터베이스의 변경된 내용을 원격데이터베이스에 복제하고 관리하는 것을 말함
  - 데이터베이스의 무정지 서비스를 가능
  -. 사용자는 하나의 데이터베이스에 대해서만 작업을 수행
  -. 데이터베이스 이중화시스템에 연결되어 있는 다른 데이터베이스에도  작업내용이 동일하게 적용
  -. 여러개의 데이터베이스를 동시에 관리

통신 프로토콜이란?
- 통신 프로토콜 또는 통신 규약은 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙의 체계이다.

운영체제란 무엇인가?

- 시스템의 자원을 관리해주는 시스템이다.

컴퓨터 하드웨어의 4가지 유형?

- 슈퍼컴퓨터

- 메인프레임

- 미니프레임

- 마이크로 컴퓨터 

형상관리시스템이란 무엇인가?

- 버전관리시스템을 의미하며 CVS, SVN, GIT 등이 존재한다

GitHub 란 무엇인가?

- GIT을 이용한 버전관리 시스템에 원활한 팀프로젝트를 위한 서버 저장소 기능을 합친 것이다.

IDE 란 무엇인가?
 -통합 개발 환경(Integrated Development Environment, IDE)이란 공통된 개발자 툴을 하나의 그래픽 사용자 인터페이스(Graphical User Interface, GUI)로 결합하는 애플리케이션을 구축하기 위한 소프트웨어입니다.

https://all-record.tistory.com/153

VCC : 3.3v

GND : 음극

TX : 아두이노 보드의 RX에 연결

RX : 아두이노 보드의 TX에 연결

#include <SoftwareSerial.h> 
// 헤더 추가

#define BT_RX 0 
// 상수(final String) 이름 핀번호
#define BT_TX 1

SoftwareSerial HM10(BT_RX,BT_TX); // 블루투스 칩셋 객체 (HM10는 실습하는 부품 모델명, 바뀌어도 상관없음)


void setup() {

  Serial.begin(9600); // 아두이노 보드와 시리얼모니터 연결
  HM10.begin(9600); 

}

void loop(){

  if(HM10.available()){ //시리얼 모니터로 보낼 값이 없으면 false

  }


}

시리얼 모니터로 보낼 값이 없음 false

시리얼 모니터에서 입력 가능

#include <SoftwareSerial.h> 
// 헤더 추가

#define BT_RX 0 
// 상수(final String) 이름 핀번호
#define BT_TX 1

SoftwareSerial HM10(BT_RX,BT_TX); // 블루투스 칩셋 객체 (HM10는 실습하는 부품 모델명, 바뀌어도 상관없음)


void setup() {

  Serial.begin(9600); // 아두이노 보드와 시리얼모니터 연결
  HM10.begin(9600); 

}

void loop(){

  if(HM10.available()){ //시리얼 모니터로 보낼 값이 없으면 false
    Serial.println(HM10.readString());
  }

  if(Serial.available()){
    HM10.print(Serial.readString()); //제조사마다 엔터를 처리하는 방식이 다름
    }
}

AT

AT+NAME?

장비 이름 찾기

이름 변경

AT+NAME(바꿀이름)

AT+TYPE3

모드 변경 (비밀번호 입력, 비번기억)

AT+ADDR?

주소값

핸드폰 BLE Scanner 연결

(아이폰은 주소값 출력 안됨, 한번 접속해야 변경한 이름 출력)

기본 핀 번호 000000 입력

아이폰 16진수로 ok 출력

4f4b

#include <SoftwareSerial.h> 
// 헤더 추가

#define BT_RX 0 
// 상수(final String) 이름 핀번호
#define BT_TX 1

SoftwareSerial HM10(BT_RX,BT_TX); // 블루투스 칩셋 객체 (HM10는 실습하는 부품 모델명, 바뀌어도 상관없음)

int led = 11;

void setup() {

  Serial.begin(9600); // 아두이노 보드와 시리얼모니터 연결
  HM10.begin(9600); 
  pinMode(led,OUTPUT);
}

void loop(){

  if(HM10.available()){ //시리얼 모니터로 보낼 값이 없으면 false
    String hmInput = HM10.readString();
    if(hmInput.equals("ledon")){
      digitalWrite(led,HIGH);
      }else if(hmInput.equals("ledoff")){
     digitalWrite(led,LOW);
        }
  }

  if(Serial.available()){
    HM10.print(Serial.readString()); //제조사마다 엔터를 처리하는 방식이 다름
    }
}

체크리스트

블루투스로 신호를 보내면

측정하면서 출력하도록 하기!

서술형

Bluetooth 란 무엇인가? 

- 디지털 통신 기기를 위한 개인 근거리 무선 통신 산업 표준

Bluetooth 의 Master/Slave 란 무엇인가? 

WIFI 란 무엇인가?

- 전자기기들이 무선랜(WLAN)에 연결할 수 있게 하는 기술

IOT 란 무엇인가?

-사물인터넷(영어: Internet of Things, 약어로 IoT)은 각종 사물에 센서와 통신 기능을 내장하여 인터넷에 연결하는 기술

Bluetooth 명령어들 조사할 것 - AT / AT+NAME / AT+PIN / AT+ADDR 등등..

- AT : 블루투스 모듈과 통신 확인

- AT+NAME: 블루투스 이름 변경

- AT+PIN : 블루투스 비밀번호 변경

- AT+ADDR : 슬레이브의 주소를 얻기 위해 사용

Serial.available 함수의 역할은?

- 시리얼 통신을 할 때 데이터 수신시 사용되는 함수

SerialMontior 란 무엇인가?

-아두이노와 컴퓨터간에 메세지를 주고받는 장치이다. 아두이노와 컴퓨터가 어떤 값을 주고 받는지 확인할 수 있는 가장 간단한 방법

Serial.readString() 함수란?

-문자열을 시리얼 통신을 통해 읽을 때 사용

LCD 란 무엇인가?

-액정 디스플레이(液晶 Display) 또는 액정 표시장치(液晶表示裝置), 줄여서 LCD(liquid crystal display)

LCD 의 clear 함수란?

- LCD 화면의 모든 내용을 삭제

임베디드 시스템이란? 

-  특정 목적을 가지고 만들어진 프로그래밍 가능한 모든 컴퓨터를 의미한다. 전화기, 냉장고, 텔레비전, FAX 등은 각자의 기능을 수행하기 위한 마이크로컨트롤러를 가지고 있으며, 이것들이 프로그래밍 가능할 경우 특수한 목적을 수행하기 위한 컴퓨터이므로 임베디드 시스템이라고 할 수 있다. 

아두이노에서 라이브러리란? 
- '컴퓨터 프로그램에서 자주 사용되는 부분 프로그램들을 모아 놓은 것. 언제든지 자유롭게 이용할 수 있도록 구성되어 있다.'라고 설명되어 있다.
이렇게 라이브러리란 특정 목적을 위해 사용되는 파일들을 모아놓은 집합

다음 아두이노 관련 용어들에 대해서 조사해 둘 것. 

1. 쉴드 (Shield)

- 아두이노 쉴드는 아두이노 보드에 연결하여 기능을 확장시키고 성능을 향상시키기 위해 사용하는 기판 형태의 제품

2. 모듈 (Module)

- 보드와 호환되는 보드보다 더 작은 형태로 쉴드처럼 기능 확장의 용도의 제품이에요.
쉴드랑 다른 점은 쉴드는 아두이노 보드에 끼우기만 하면 되지만 모듈은 모든 핀을 올바르게 연결해야 해요.

3. 센서 (Sensor)

- 센서는 주위 환경에 대한 정보를 확인한 뒤 전기적 신호를 이용해 아두이노로 정보를 입력하는 전자부품

4. 액추에이터 (Actuator)

- 어떤 움직임, 활동을 할 수 있게 하고 싶다면 액추에이터를 사용해요. 예를 들어 빛을 내는 LED, 소리를 내는 스피커, 바퀴를 움직이는 모터 등이 액추에이터에 해당

5. 저항 (Resistor)

-  전기를 열로 바꿔주는 전자부품이에요.
전자 부품들이 버틸 수 있는 수준 이상의 전류가 들어오면 많은 열이 발생하여 타버리거나 터질 수 있어요. 때문에 저항으로 열을 내 과전류로부텉 전자부품을 보호하기 위해 사용하는데 저항 값이 높을 수록 더 많은 전기를 열로 바꿔주지요.

7. 브레드보드 (Bread Board)

- 전자부품을 연결시키려면 학창시절 과학시간에 배웠던 납땜을 생각할 수 있는데, 브레드보드를 사용하면 납땜할 필요 없이 전자부품을 쉽게 연결할 수 있어요.

커밋 할 때마다 스냅샷 생성

가벼운 기능/매서드 하나마다 커밋하는 것이 적절

head 라는 화살표를 통해 가리킨다.

깃에서 날린다는 것은 실제 데이터가 지워진 것이 아님!

pull 서버의 최신 버전 갖고 오기

clone 로컬에 아무것도 없는 상태에서 서버의 것을 가져옴

-> 실제로는 pull이 clone 기능도 한다.

로컬과 리모트가 동일해진다.

협업 방식

1.

조원에게 push 권한 주기

콜라보레이터로 만들기

-> 반응성은 좋다. 

-> 주인장이 모르게 업데이트 될 수도 있다.

2.

Pull Request

-> 초보자에게 유리

포크 뜬다 = 퍼간다

팀장 것을 조원이 자신의 리모트로 포크 떠온 후에, 자신의 로컬로 당기기

조원이 수정한후 팀장에게 가져가 달라고 요청(Pull Request)

어떤 내용이 어떻게 수정이 되었는지 확인 -> 거절 or 허가

권한은 없지만 기여하고 싶은 경우

잘못 병합된 경우 시간이 많이 안 지났다면 rebrith 기능 사용가능 , 시간이 많이 지나서 되돌리기 어렵다면 잘못된 파일일 지우는 히스토리를 만든 후 pull request

충돌 가능성이 있다면 팀장은 풀리퀘스트 거절

다른 조원들이 서버에 맞춰서 수정해서 올려야함

조원입장에서는 일단 본인 수정사항 커밋을 한 후 다시 팀장서버를 pull 해서 최신 버전 비교해보기 

조장작업

.gitignore 확인

조원 접속

팀장 저장소 Fork

포크해온 코드를 import

조장이 먼저 수정해보기

새로운 버전을 가져올 때는 조장의 원격저장소에서 조원의 로컬저장소로 바로 가져오기

pull로 가져온 내용을 조원이 자신의 원격 저장소에 push

조장 원격 저장소에서 조원이 로컬로 pull

계정 정보 지우기

조원이 파일 생성

조장 입장에서는 요청이 여럿일 때

하나만 병합하고 나머지 조원들은 새로 병합된 버전을 pull해서 보내라고 하기