프로젝트 - 자잘한 수정요청사항 반영

시험 : 부정행위 방지 기능 추가 (js)

시험, 해설보기 화면에 복사, 붙여넣기, 잘라내기, 검색, 캡쳐 등 부정행위에 사용되는 키 입력을 막는 javascript 기능을 추가하였다. js로 키입력을 제어하는 것은 처음인데, 어떤 것은 쉬웠고 어떤 것은 꽤 헤매서 메모해두려고 한다.

// 전체 코드
<script type="text/javascript">
$( document ).ready(function() {
	document.oncontextmenu = new Function("return false"); // 오른쪽 클릭 금지
	
	const preventedKeys = [67, 118, 86, 18, 70, 44, 88, 80];
	// 67=c(ctrl+c 복사방지), 118 = f7(텍스트커서), 86 = v(ctrl+v 붙여넣기 방지), 18 = Alt, 
	// 70 = f(검색방지), 44=print screen, 88=x (ctrl+x 잘라내기 방지), 80 = p(ctrl+p 프린트 방지)

	$(document).keydown(function(event) {
		console.log(event.keyCode);
		if(event.keyCode===17) { // ctrl pressed
			event.preventDefault();
			return false;
		} else if(event.ctrlKey && (preventedKeys.indexOf(event.keyCode)!==-1)) {
			event.preventDefault();
			return false;
		}
	})
	
	$(document).keyup(function(event) {
	  if (event.keyCode == 44) {
	    setTimeout(
	      copyToClipboard(), 
	      1000
	    );
	  }
	})		
	// screen 캡처 대신 들어갈 텍스트
	const copyToClipboard = () => {
	  var textToCopy = "시험 내용은 캡쳐할 수 없습니다.";
	  navigator.clipboard.writeText(textToCopy);
	}	
});
</script>

오른쪽 클릭 금지

document.oncontextmenu = new Function("return false"); // 오른쪽 클릭 금지

event.key에 관련된 속성들

• event.key = 텍스트값으로 들어옴
• event.keyCode = 숫자값으로 들어옴
• event.ctrlKey = 컨트롤 키와 함께 눌렸는지 여부를 boolean으로 반환
• event.altKey = 알트 키와 함께 눌렸는지 여부를 boolean으로 반환

print screen 입력방지

print screen 입력방지

• print screen 키입력은 keydown에서는 적용 안되고 keyup에서만 적용되는 문제
• 다른 키와 달리 return false, event.preventDefault()가 안먹힘
• 브라우저, os 단 기능이라 막을 수 없다는 사람도 있고, 새로운 input을 만들어서 그 값을 가져오는 긴 코드 제시하는 사람도 있음
• 그런데 간단하고 이해하기 쉬운 코드 발견해서 공유함. 클립보드에 이미지가 캡쳐되는 것을 막을 수 없다면 새로운 데이터를 덮어쓰는 것으로 해결함. 클립보드는 한 번에 하나씩 저장하는 곳이니 새로운 정보가 들어오면 캡쳐한 이미지를 사용할 수 없다.

	$(document).keyup(function(event) {
	  if (event.keyCode == 44) {
	    setTimeout(
	      copyToClipboard(), 
	      1000
	    );
	  }
	})		
	// screen 캡처 대신 들어갈 텍스트
	const copyToClipboard = () => {
	  var textToCopy = "시험 내용은 캡쳐할 수 없습니다.";
	  navigator.clipboard.writeText(textToCopy);
	}

활동보고서 관련

사용자 권한에 따라 테이블 컬럼 변경

• 버튼 추가 (튜터만) : 표의 head와 body에 버튼으로 된 새로운 컬럼을 추가했다. 접속자의 권한에 따라 해당 컬럼이 보이거나 안보여야했는데, body를 안보이게 하는 것은 쉬웠으나 컬럼의 head를 안보이게 하는 것이 쉽지 않았다.
• 결국 grid 설정에서 columns 에 들어갈 배열을 따로 빼서 권한별로 만들고, 권한에 따라 다른 배열을 참조하도록 수정하였다.

사용자 권한 안 보이는 문제

• 특정 튜터 계정의 권한이 목록에서 보이지 않는 문제가 있었다. 쿼리나 코드를 살펴봐도 전혀 문제가 없어서 좀 헤맸는데, 알고보니 해당 데이터의 문제였다... 가끔 이렇게 데이터 때문에 기능에 오류가 있는 것처럼 보일때가 있다ㅠ

기타

• 회원 탈퇴 문구 변경
• 연간일정 : '예정' 표시 삭제, 조회 정렬 순서 변경 (ajax 호출 시 전달하는 값만 변경함)

내일 할일

1. sms 템플릿 텍스트 수정
2. 시험, 과제, 토론 날짜 각각 가져오기 : sql, vo 수정
3. controller - getGbn()에 새로운 템플릿 코드 추가
4. js파일 다 찾아서 수정 : 공통부분 모을 수 있는지 확인하기
5. 운영에서 테스트