0103 개발일지

19493 단어 egovJavaCSSjstljsp전자정부프레임워크

오늘 한 일

  1. DB에 출장 관련자 더미데이터 삽입 및 roleVO에 맞는 쿼리 작성
  2. 출장 정보 조회 시 출장 관련자 정보 같이 조회
  3. 팝업창: 사람 이름 선택 시 map에 데이터 저장 및 html 태그 추가하기
  4. 이름 삭제버튼 클릭 시 map의 데이터 삭제 및 html 태그 삭제기능 구현

1. DB, SQL 조작

저번주에는 출장 정보를 select할 때 출장 관련자까지 전부 가져오는 쿼리를 작성했는데, 오늘 생각해보니 출장 정보 조회 시 출장비용 리스트를 따로 조회해서 가져오는 것처럼 따로 조회하도록 구현해야겠다는 생각이 들었다. 따라서 출장 번호 BT_ID가 주어진다는 가정 하에 출장 관련자-사용자-부서-직급 4개 테이블의 데이터를 조회하는 쿼리는 다음과 같다.
부서 이름 및 직급 이름을 가져올 때 서브 쿼리를 사용한 것이 특징이다.

SELECT B
	TR.BT_ID, 
    BT_ROLE_ID, 
    BTR.USER_ID, 
    USER_TYPE, 
    EMP.EMP_Name AS USER_NAME, 
    EMP.EMP_Dept AS USER_DEPT_CODE, 
    EMP.EMP_Position AS USER_POS_CODE,
	(SELECT POS_NAME
	FROM EMPLOYEE AS EMP
	JOIN POS ON EMP.EMP_Position = POS_CODE
	WHERE EMP.EMP_NO = BTR.USER_ID) AS USER_POS_NAME,
	(SELECT DEP_NAME
	FROM EMPLOYEE AS EMP
	JOIN DEP ON EMP.EMP_Dept = DEP_CODE
	WHERE EMP.EMP_NO = BTR.USER_ID) AS USER_DEP_NAME
FROM BUSINESSTRIP_ROLES AS BTR
JOIN EMPLOYEE AS EMP ON EMP.EMP_NO = BTR.USER_ID
WHERE BTR.BT_ID = "BT-00018";

2. 출장 정보 조회 시 출장 관련자 목록 같이 조회해서 적절한 곳에 넣어주기


출장 관련자 목록에는 출장자, 결재자, 수신자 3 종류의 사람들이 전부 들어가있어서 출장 정보를 조회할 때 USER_TYPE 변수의 값에 따라 적절한 곳에 넣어주어야 했다.
현재 전달받은 출장자 list를 전부 돌면서 USER_TYPE이 일치하는 이름값만 가져오게 했는데, 모든 USER_TYPE이 하나의 리스트에 들어있다보니 각 종류별로 지금이 몇 번째인지 알 수가 없어 따옴표 구분을 넣을 수 없었다. 추후 개선점을 찾아봐야 할 부분.

<c:set var="btRoleVOList" value="${btVO.btRoleVOList }"/>

<td class="tbtd_caption"><label for="APPROVER_ID">결재자</label></td>
<td class="tbtd_content flex-between">
  <p class="multi-user">
    <c:forEach var="role" items="${btRoleVOList }" varStatus="status">
      <c:if test="${role.USER_TYPE == 1}">
        <c:out value="${role.USER_NAME }"/>
      </c:if>
    </c:forEach>
  </p>
  <a class="btn" href="javascript:openUserSearch('<c:out value="${btVO.BT_ID}"/>','<c:out value="1"/>');">찾기</a>
</td>

3. 사람 이름 선택 시 데이터 저장 및 html 태그 추가/삭제


팝업창에서 한 번에 여러 명을 선택해서 추가하는 기능을 구현하기로 했다. 인물 검색 결과에서 이름을 클릭하면 해당 인물의 USER_ID와 USER_NAME을 가져와 map에 저장한 후 span 태그를 추가하도록 했다.
선택된 데이터를 저장할 공간이 필요했는데, 사용자마다 고유한 키값인 USER_ID를 가지고 있으므로 키로 접근할 수 있고, 중복도 방지하는 map을 사용하기로 했다.
선택한 사람들의 이름을 보여줄 떄는 하나씩 삭제도 할 수 있게 하기 위해 span태그를 이용했다. 내가 예전에 작성한 javascript DOM으로 html태그 생성, 조작, 클래스 조작 정리글을 참고해서 만들었더니 더욱 뿌듯하다.

function fn_egov_select(USER_ID, USER_NAME) {

  if(!users.has(USER_ID)) {
    var showResult = document.getElementById('selectUserList');
    var showUser = document.createElement('span');
    var icon = document.createElement('i');
    icon.classList.add("fas");
    icon.classList.add("fa-window-close");

    console.log(showResult);

    showUser.setAttribute('id', USER_ID);
    showUser.innerHTML = USER_NAME;
    showUser.appendChild(icon);
    showUser.className = "selectedUser";

    icon.addEventListener('click', function(e) {
      users.delete(USER_ID);
      e.target.parentElement.remove();
      console.log(users);
    });
    showResult.appendChild(showUser);
  } else {
    alert("이미 추가한 인물입니다.");
  }

  users.set(USER_ID, USER_NAME);
  console.log(users);
}

span태그 안 i태그로 삭제 아이콘을 넣고 i태그에 addEventListener를 사용해 클릭 이벤트를 붙였다. 처음에는 showUser span태그에 클릭이벤트를 적용 후 자기 자신을 삭제하도록 했는데, 삭제 버튼 클릭 시 삭제 버튼만 사라지는 문제가 있어서 수정했다. 현재 삭제 버튼 클릭 시 부모 태그인 span태그를 삭제한다.

삭제 아이콘은 fontAwesome을 사용했다. fontAwesome 사용법

<head>
  <script src="https://kit.fontawesome.com/451f49eee4.js" crossorigin="anonymous"></script>
</head>
<body>
  <span> <i class="fas fa-window-close"></i> </span>
</body>

4. 해결해야 할 것들

  1. 출장 정보 조회에서 출장 관련자 이름 사이 쉼표 등 구분점 넣을 방법 생각해보기
  2. 인물조회 팝업창에서 오늘 만든 html 태그들에 css 가 적용되지 않는 문제가 있다. js DOM으로 생성한 부분만 문제인 것이 아니라 그냥 해당 태그, 클래스들이 적용되지 않는다. 내일 해결책 찾아보기
  3. 현재 선택된 사용자 정보가 js map에 담겨있는데, 이걸 다시 controller로 보내서 해당 정보로 VO를 생성한 후 저장해야 한다. 반대로 DB에서 가져온 값을 VO로 받은 후 팝업창에선 VOList의 값을 map으로 변환해야 한다.
[ BOJ / Python ] 1092번 배
다항식 방면 의 응용 (다항식 은 구조 체 로 실현)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage