[스프링] 메인페이지,인기글 구현 (블라인드 참고)

이번엔 블라인드처럼 메인페이지를 꾸며보았다.

 

토픽베스트에는 내 프로젝트에 맞춰서 글작성 후 7일 미만의 게시물 중 , 가장 높은 추천수를 받은 게시글순으로 출력,

 

아래의 카테고리별 베스트는 2일미만의 게시물 중 추천수 순으로 출력한다.

 

기능상으로는 어느정도 비슷하게 구현이 됐지만, 디자인이..ㅜㅜ 눈물이다..

 

원래 디자인은 생각을 많이 하지 않고 기능적인 구현을 우선한 프로젝트지만 , 

 

결국 완성하고 나면 디자인이 이뻐야 같은 기능이라도 더 돋보이게 되는 것 같다.

 

다음 프로젝트는 무조건 좋은 템플릿을 선정해서 꾸며보려고 한다.

 

---

완성결과

 

일단 토픽베스트이다.

 

Mapper.xml

<!-- weekly Best -->	
	<select id="bestList" resultMap="BoardVO">

SELECT a.BNO,
		a.TITLE,
		a.CONTENT,
		a.WRITER,
		a.REGDATE,
		a.HIT,
		a.REPLYHIT,
		a.BGNO,
		a.LIKEHIT,
		a.HATEHIT,
		a.ID,
		a.DEVHIT,
		a.QUESTIONCHECK,
		a.HELPPOINT,
		b.BNO,
		b.MEMBER_ID,
		c.MEMBER_ID,
		c.MEMBER_DEVPOINT,
		c.MEMBER_POINT,
		c.MEMBER_IMG,
		c.MEMBER_NAME
		FROM (select * from MP_BOARD where REGDATE >= TO_CHAR(SYSDATE-7,'YYYYMMDD' ))
		a left outer JOIN MP_BOARD_CHECK b on a.bno = b.bno 
		<if test=" memberId !='' ">
		AND b.member_id=#{memberId}
		</if>
		left outer Join MP_MEMBER c on a.ID = c.member_ID
		ORDER BY a.LIKEHIT desc
		
	</select>

 

 

where REGDATE >= TO_CHAR(SYSDATE-7,'YYYYMMDD' )

 

현재시간을 기준으로 7일 미만의 게시글만 select 한다.

 

그 후,

 

ORDER BY a.LIKEHIT desc

 

MP_BOARD (게시글테이블) 의 좋아요수를 기준으로 내림차순으로 정렬한다.

 

나는 프론트단에서 게시글 수를 조정할 수 있도록 , forEach문에 갯수제한을 걸어줬는데 , 

 

만약 성능을 생각한다면 쿼리문에서 ROWNUM 등을 사용해서 갯수제한을 해주는 것이 좋겠다.

 

---

 

미채택 Q&A

	<select id="qnaList" resultMap="BoardVO">

		SELECT a.BNO,
		a.TITLE,
		a.CONTENT,
		a.WRITER,
		a.REGDATE,
		a.HIT,
		a.REPLYHIT,
		a.BGNO,
		a.LIKEHIT,
		a.HATEHIT,
		a.ID,
		a.DEVHIT,
		a.QUESTIONCHECK,
		a.HELPPOINT,
		b.BNO,
		b.MEMBER_ID,
		c.MEMBER_ID,
		c.MEMBER_DEVPOINT,
		c.MEMBER_POINT,
		c.MEMBER_IMG,
		c.MEMBER_NAME
		FROM (select * from MP_BOARD WHERE BGNO = 20 or BGNO = 21  or BGNO = 22 or BGNO = 23 )
		a left outer JOIN MP_BOARD_CHECK b on a.bno = b.bno 
		<if test=" memberId !='' ">
		AND b.member_id=#{memberId}
		</if>
		left outer Join MP_MEMBER c on a.ID = c.member_ID
		where QUESTIONCHECK = 0
		ORDER BY a.BNO desc
		
	</select>

미채택 Q&A의 쿼리이다. 

 

Q&A 카테고리에 채택기능을 넣어줬는데 , 

 

Q&A 카테고리에서 채택이 되지 않은 게시글만 select해서 출력한다.

 

서브쿼리내의 where문으로 Q&A카테고리만을 select하도록 범위를 잡아주고,

 

채택유무를 판별하는 QUESTIONCHECK 라는 컬럼을 이용해서 분별했다.

 

---

자유카테고리 인기글

<select id="bestList1" resultMap="BoardVO">
		SELECT a.BNO,
		a.TITLE,
		a.CONTENT,
		a.WRITER,
		a.REGDATE,
		a.HIT,
		a.REPLYHIT,
		a.BGNO,
		a.LIKEHIT,
		a.HATEHIT,
		a.ID,
		a.DEVHIT,
		a.QUESTIONCHECK,
		a.HELPPOINT,
		b.BNO,
		b.MEMBER_ID,
		c.MEMBER_ID,
		c.MEMBER_DEVPOINT,
		c.MEMBER_POINT,
		c.MEMBER_IMG,
		c.MEMBER_NAME
		FROM (select * from MP_BOARD where REGDATE >= TO_CHAR(SYSDATE-2,'YYYYMMDD' ))
		a left outer JOIN MP_BOARD_CHECK b on a.bno = b.bno 
		<if test=" memberId !='' ">
		AND b.member_id=#{memberId}
		</if>
		left outer Join MP_MEMBER c on a.ID = c.member_ID
		where bgno = 1
		ORDER BY a.LIKEHIT desc
		
	</select>

 

 where REGDATE >= TO_CHAR(SYSDATE-2,'YYYYMMDD' )

 

작성한지 2일내의 게시글만 검색하도록 범위를 잡아주고 , 

 

where문으로 원하는 카테고리만 검색하도록 해준 후 , 출력해주면 된다.

 

---------------------------------------

 

인기글은 where문으로 likehit (좋아요컬럼) >=20으로 

 

좋아요가 20개가 넘는 모든글을 최신순으로 출력하도록 해놓았다.

 

---

Controller

 

@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(HttpSession session, Model model)throws Exception {
		String memberId = "";
		
        /*
		if(session.getAttribute("login") != null) {
		MemberVO memberVO =(MemberVO) session.getAttribute("login");
		memberId = memberVO.getMemberId();
		} */
		model.addAttribute("list",service.bestList(memberId));
		model.addAttribute("qna",service.qnaList(memberId));
		model.addAttribute("best1",service.bestList1(memberId));
		model.addAttribute("best3",service.bestList3(memberId));
		model.addAttribute("best4",service.bestList4(memberId));
		model.addAttribute("best6",service.bestList6(memberId));
		model.addAttribute("bestBoard",service.bestBoard(memberId));
		return "/board/home";
	}

 

간단하게 model을 이용해 list를 보내줬다.

 

페이징이 필요없는 페이지라서 빠르게 구현했다.

---

메인페이지 뷰

	<!-- Card Body -->
				<div class="card-body">
					<div>
						<!-- list -->


						<table class="table table-borderless table-sm" width="100%"
							cellspacing="0">


							<c:forEach items="${list}" var="list" begin="0" end="10">

								<c:choose>
									<c:when
										test="${not empty login and list.bno == list.boardCheckVO.bno and list.boardCheckVO.memberId == login.memberId}">
										<tr class="table-active">
									</c:when>
									<c:otherwise>
										<tr>
									</c:otherwise>
								</c:choose>

								<td width="100px"><strong><%@include
											file="../includes/listCategory.jsp"%></strong>
								</td>


								<td width="35%"><a
									href="/board/readView?bno=${list.bno}&
															bgno=${list.bgno}"
									style="color: red"> <strong>${list.title} </strong></a></td>



								<td><strong><a
										href="/board/mypageView?select=log&memberId=${list.id}"
										style="color: black"> <img
											src="/image/${list.memberVO.memberImg}"
											style="max-width: 25px; height: 25px; border: 0px; border-radius: 50%;">
											<c:out value="${list.memberVO.memberName}" />
									</a> <span style="font-size: 8px"><i class="fas fa-heart"
											style="color: red"></i>${list.memberVO.memberPoint}</span> <span
										style="font-size: 8px"><i class="fa fa-bolt"
											style="color: blue" aria-hidden="true"></i>${list.memberVO.memberDevPoint}</span>
								</strong></td>


								<td><fmt:formatDate value="${list.regdate}" pattern="MM-dd" /></td>
								<td><i class="far fa-eye mr-1"></i>
								<c:out value="${list.hit} " /></td>

								<td><i class="fas fa-thumbs-up mr-1" style="color: red;"></i>${list.likehit}
								</td>


								</tr>

							</c:forEach>
						</table>

					</div>
				</div>
			</div>
		</div>

뷰는  jstl을 이용 forEach문을 사용해서 list를 출력해줬다.

 

<c:forEach items="${list}" var="list" begin="0" end="10">

 

0~10까지 11개의 리스트를 출력했다.

 

---

완성