오늘 한 일

1. css 수정
2. 인물검색 페이지 레이아웃 변경
3. 인물검색 페이지에서 기존 출장 관련자 조회 추가
4. VO 정보를 json으로 전달할 수 있을지 테스트
5. svn 프로젝트 추가

1. css 수정

• 어제 <span>에 대해 css가 적용 안되던 것은 그냥 브라우저 캐시 문제였다. eclipse css not working으로 검색하니 해결책이 바로 나왔다..

서버 캐시, 브라우저 캐시 문제일 가능성이 높다. - 크롬을 이용하는 경우 Ctrl + Shift + R or Shift + F5 로 바로 해결 가능하다.

• <span>에 다른 디자인은 적용되는데 margin-bottom이 적용되지 않는 문제가 있었다. span태그는 inline 요소라 높이 관련 속성이 적용되지 않는 것을 깜빡한 것이다. display: inline-block을 이용해 조절했다.

• register 페이지 한 줄 말줄임 적용: 결재자, 수신자, 출장자 이름 표시하는 곳에 너무 많은 이름이 들어가면 테이블 레이아웃이 망가져서 말줄임 처리를 했다.

.tbtd_content p.multi-user {
  display: inline-block;
  height: 100%;

  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

• 결재자, 수신자, 출장자 출력하는 <p> 태그와 '찾기' 버튼이 부모 태그에 flex-between을 적용하는 방식으로 가로 정렬되어 있었는데, 이름 값을 넣으면 레이아웃이 또 틀어지는 문제가 있어 flex를 지우고 버튼을 float:right로 오른쪽 정렬 해주었다.

td a.btn {
  float:right;
}

2. 인물검색 페이지 레이아웃 변경

원래 인물검색 결과에서 이름을 클릭하면 javascript map에 저장하고, 인물 조회 테이블 아래에 span태그로 선택한 이름을 삽입해주는 모양이었다.(오전 내내 했다 하지만..) 그런데 가독성이 떨어진다는 피드백이 있어서 선택한 출장자도 표로 보여주도록 레이아웃을 변경하기로 했다.

에러 해결

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

html element를 로드하기 전에 javascript에서 html element를 조작하려 했을 때 발생하는 에러이다. 현재 html 파일의 위쪽 <script> 태그 안에 js 함수가 작성되어 있어서 발생하는 문제였다. 나는 참고글에서 window.onload를 이용해 해결했다.
참고글

3. 인물검색 페이지에서 기존 출장 관련자 조회 추가

현재 관련자 리스트를 보여주는 건 user와 마찬가지로 이 페이지로 올 때 DB에서 roleList를 조회한 값을 model.Attribute('roleList', roleList)로 전달했기 때문이다. 그런데 이 화면서에 user 정보를 이용해 새로운 role을 만들거나 기존 role을 수정, 삭제하려면 javascript 객체에 별도로 정보를 저장해야 할 것 같다.

인물 검색 화면에서 별도로 업데이트 한 javascript 객체를 json으로 전달해서 controller에서 파싱 후 반복문으로 roleVO를 생성해 생성, 수정, 삭제를 진행할 예정이다.
이 때 기존 데이터를 수정, 삭제 시 bt_role_id값을 기준으로 하는데, 해당 데이터를 수정할지 삭제할지 여부를 구분할 값이 필요하다.
이전에 경비 테이블에 값을 수정할 때도 비슷한 문제가 있었다. 그 때는 id값이 있는 기존 데이터인데 경비의 금액이 0이면 값 삭제로 간주하고 데이터를 삭제했다. 이번에는 삭제 시 기존 데이터의 user_id만 지워놓고 controller에서 role_id, user_id 존재 여부로 생성/수정/삭제를 구분하면 될 것 같다.

4. VO 정보를 json으로 전달할 수 있을지 테스트

관련자 정보를 전달하는 여러 가지 방법을 시도해봤는데 java VO를 json으로 파싱해주는 라이브러리인 jackson이 있어서 테스트해보았다.

1. pom.xml에 dependency 추가

maven추가 사이트

<!-- JSON 이용을 위한 jackson 라이브러리 -->
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.13.1</version>
</dependency>

2. controller

VO를 string으로 변환한 결과물을 보니 key값의 대소문자가 미묘하게 변경되어 있는 것을 확인했다. 이클립스에서 javascript 부분을 짤 때 자동완성이나 검사를 따로 안해주기 때문에 nullpointexception이 자주 뜰 것 같으니 조심해야겠다.

import com.fasterxml.jackson.databind.ObjectMapper;
...
ObjectMapper mapper = new ObjectMapper();
String jsonRole = mapper.writeValueAsString(roleList);
model.addAttribute("jsonRole", jsonRole);

LOGGER.debug("selectroleList- jsonRole = "+ jsonRole);