[스프링] 메인페이지,인기글 구현 (블라인드 참고)
이번엔 블라인드처럼 메인페이지를 꾸며보았다.
토픽베스트에는 내 프로젝트에 맞춰서 글작성 후 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개의 리스트를 출력했다.
완성
