[프로젝트 개선] - 웹사이트 제작 20. (Spring/Java) 마이페이지-내가 쓴 글(+작성글 더보기)

JINI·2023년 6월 25일

[spring] 팀프로젝트 - 짐 보관 예약 웹사이트

목록 보기

30/35

게시판 작성글이 많아질수록 다른 회원과의 글이 섞여 본인 글을 쉽게 찾기가 어려워지기 때문에 마이페이지에서 내가 작성한 글만 전부 볼 수 있는 페이지를 구현하기로 했다.
또한 내가 쓴글 역시 페이징 처리를 해주어야 하는데
이전에 구현했던 페이징과 다른 방식으로 구현하기 위해
더보기 버튼을 추가해 클릭할 때마다 게시글이 3개씩 보여지고
더 이상 작성글이 없다면 더보기 버튼이 사라지도록 했다.

🚩변경 전 ➡️ 마이페이지
🚩변경 후 ➡️ 마이페이지에 내가 쓴글만 보기 추가
(+ 더보기 버튼 클릭시 게시글 3개씩 보여주기)

📝 내가 쓴 글

💡POINT💡

회원 테이블과 게시판 테이블 JOIN

회원 dto에 1:N의 관계를 가지는 게시판 dto를 List형식으로 추가

해당 유저 아이디가 쓴 작성글을 불러오려면 서로 다른 회원 테이블과 게시판 테이블을 이용하기 때문에 번거로운 일이 발생한다.
번거로움을 줄이기 위해 JOIN을 통해 다른 테이블을 불러오고 ,
또한 1명의 회원이 여러개의 게시글을 작성할 수 있기 때문에 1:1의 관계가 아닌 1:N의 관계라 회원 dto도 수정해야 한다.

✍️ 1.내가 쓴글

📕회원 DTO

	private java.util.List<boardDTO> myPageList;

회원쪽에서 게시글이 저장된 게시판 테이블을 사용해야한다.
회원 1명이 작성할 수 있는 게시글은 여러개라 1:N의 관계를 가지기 때문에 게시판 dto를 list 형태로 회원 dto에 추가한다. (getter,setter도 생성)

📕controller

@GetMapping("myReview")
	public String myReview(HttpSession session, Model model)throws Exception {
		String id = (String) session.getAttribute(LOGIN);

		memberDTO userInfo = ms.getInfo(id);
		model.addAttribute("myInfo", userInfo);
		return "member/myReview";
	}

세션 ID를 얻어와 회원 정보를 조회한다.

📕 service

public memberDTO getInfo(String id) {
		return memberMapper.getInfo(id);
	}

회원정보를 조회해서 해당 ID가 있다면 가지고 온다.

mapper도 코드가 같기 때문에 생략한다.

📕 xml


//회원 테이블
<resultMap id="member" type="com.care.root.member.dto.memberDTO">
							...
	<collection property="myPageList" resultMap="board" /> 
</resultMap>

//게시판 테이블
<resultMap type="com.care.root.board.dto.boardDTO" id="board">
		...
</resultMap>

게시판 테이블을 회원 테이블에서 사용하기 위해 resultMap에 매핑 작업을 해준다.
이때 인자로 리스트가 있는 경우 Collection 태그를 이용해야 한다.

collection에 들어갈 객체를 명시하기 위해 resultMap 선언해 게시판 테이블을 맵핑한다.

이렇게 하면 한 번에 1:N의 관계를 해결할 수 있다.

🔄️테이블 조인하기

<select id="getInfo" resultMap="member">
		select buser_id,
		buser_name,buser_phone,buser_email,
		f.list_num, f.title, f.regDate,
		f.hit, f.writer
		from box_member u
		LEFT OUTER JOIN box_board f
		ON
		u.buser_id = f.writer
		where u.buser_id = #{id}
		order by f.list_num desc
</select>

해당 사용자가 작성한 글 정보를 가지고 와야하기 때문에 OUTER JOIN을 사용해서 쿼리문을 작성한다.

회원 테이블의 ID와 같은 게시판 테이블의 작성자가 작성한 글의 정보들을 가지고오고 글번호를 기준으로 내림차순으로 정렬힌다.(변수명과 컬럼명이 같아도 다 써준다.)

오라클에서 특정 아이디를 조회해보면 회원 아이디와 작성자가 같은 정보를 불러와 이전글 다음글을 확인할 수 있다.

📕 JSP

<table class="board-table">
	<tbody>
		<c:if test="${empty myInfo.myPageList }">
			<div style="font-size: 17px; font-weight: bold;">작성글이 없습니다.</div>
		</c:if>
		<c:forEach items="${myInfo.myPageList}" var="dto">
		<tr>
			<td>${dto.reviewNum }</td>
		<td><a href="${contextPath }/board/reviewDetail?reviewNum=${dto.reviewNum}">${dto.title }</a></td>
			<td>${dto.writer }</td>
			<td>${dto.regDate }</td>
			<td>${dto.hitNum }</td>
		</tr>
		</c:forEach>
	</tbody>
</table>

if문을 사용해 해당 사용자가 작성한 글이 없다면 없다는 문구를 출력하고
작성글이 있다면 값들을 담은 list에서 꺼내와 반복적으로 출력한다.

제목을 클릭하면 게시판으로 이동해 작성글 원본을 볼 수 있다.

작성글이 없는 경우 문구 출력

➕ 2.더보기 버튼

기본 3개씩 게시글을 볼 수 있다.

더 이상의 작성글이 없다면 더보기 버튼은 사라진다.

📕 JS

<script type="text/javascript">
		$(function() {
			$("tr").hide();
			$("tr").slice(0, 4).show(); // 초기갯수
			$("#moreView-btn").click(function(e) { // 더보기 버튼 클릭
				e.preventDefault();
				$("tr:hidden").slice(0, 4).show(); // 클릭시 리스트 갯수 지정
				if ($("tr:hidden").length == 0) { // 컨텐츠 남아있는지 확인
					$("#moreView-btn").hide(); //더이상의 리스트가 없다면 버튼 사라짐
				}
			});
		});
</script>