7. 출입 조회 기능 구현

1. 화면 구성

이전의 메인 화면 관리자 메뉴에서 출입 조회 버튼 클릭 시 다음과 같이 회원들의 출입을 최신 순으로 볼 수 있는 출입 조회 페이지 구현

 

 

 

2. 위 출입 일자, 이름, 휴대폰 번호를 추출하기 위해서는 Entry 테이블에서 외래키인 회원 id로 회원 이름과 휴대폰 번호를 추출하기 위해 다음과 같은 서브 쿼리를 사용해야 함

SELECT DATE_FORMAT(createDate, '%Y년 %m월 %d일 %H시 %i분 %s초'), 
(SELECT memberName FROM member WHERE member.id = entry.memberId), 
(SELECT phone FROM member WHERE member.id = entry.memberId) 
FROM entry;

JPA Repository에서 native query로 위 쿼리를 짜서 넣는 방법은 불가능(JPA Repository는 상속받은 클래스 타입(모델)만 리턴하기 때문)

시간, 이름, 휴대폰 번호만 출력하도록 DTO를 만들어서 DTO를 리턴해야 함 => EntityManager의 getResultList를 사용해서 DTO에 매핑(이 때 생성자가 있어야 하므로 DTO에 @AllArgsConstructor를 추가해 줘야함)

 

EntryDto.java를 만들고, EntityService에 다음과 같이 구현

이러면 위 쿼리문의 결과가 자동으로 EntryDto에 매핑되어 Dto들이 List에 들어가게 됨

위 방법 주의점: StringBuffer에 append 시 마지막에 띄어쓰기 + 쿼리문 끝에 ; 붙이지 않기

오래된 출입 체크 기록이 아래로 가게 하기 위해 order by 사용

 

참고:

https://lealea.tistory.com/200

[Trouble Shooting] JPA DTO Mapping - QLRM 라이브러리 사용

 

 

 

3. 위 방법으로 받은 DTO를 프론트엔드에서 페이지 로드될 때 받아 출입 배열에 push

그리고 v-for를 이용해 출입 목록들을 모두 테이블에 출력

entry[0]: 출입 일자, entry[1]: 이름, entry[2]: 휴대폰 번호

 

 

 

4. 테스트

강강깡 회원으로 로그인 후 출입 체크

 

출입 조회 페이지로 가보면 방금 했던 강강깡 회원의 출입 기록이 가장 위에 추가되어있음