[셸위:게임 친구 매칭 사이트] 게시판 구현

[셸위:게임 친구 매칭 사이트] 게시판 구현

(좌) 목록, (우) 상세보기

 

-결제, 결제 취소, 서브몰 생성 등의 여러 API들을 접한 뒤라 그런지 게시판 구현이 무척 간편하게 느껴졌다. (페이징이 들어가면 그렇게 간편하지도 않지만...)

-이번에는 페이징을 제외하고, 간단한 게시판 목록-디테일을 만드는 기능에 대해 이야기해보고자 한다. 구현한 화면은 위와 같다. 게임 친구 매칭 사이트라는 취지에 맞게, 그 때 그 때의 게임 시사 뉴스를 알려주는 게임 뉴스 게시판이다.

 

1. newsPage.jsp - 게시글 목록

-jsp 측에서는 controller 측에서부터 model.addAttribute()를 통해 전달받은 값으로 목록을 생성한다.

-<c:forEach>를 통해 리스트 내의 요소 수만큼 목록을 만들게 된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<%@ include file="/WEB-INF/view/layout/header.jsp" %>
	<link rel="stylesheet" href="/static/css/news.css">
	<div class="news-container">
		<h1>뉴스 (${totalNewsNum})</h1>
			<c:forEach var="news" items="${newsList}">	
				<div class="news-box" OnClick="location.href ='news-detail/${news.id}'" style="cursor:pointer;">
					<img src="../static/images/news/${news.url}" class="image-container">
					<div class="column-box">
						<h3>${news.title}</h3>
						<h5 class="text-box date" >${news.subTitle}</h5>
						<p>${news.createdAt}</p>
					</div>	
				</div>
			</c:forEach>
			<div class = "pagination">
				<c:forEach var="number" begin="1" end="${pageSize}" >
					<button class="pagination-btn">${number}</button>
				</c:forEach>
			</div>
	</div>
<%@ include file="/WEB-INF/view/layout/footer.jsp" %>

 

 

2. NewsController 

-컨트롤러 딴에서는 DB에 쿼리문을 보내 news 객체들을 모두 받아오게끔 한다. 전달받은 정보들은 List에 담겨, jsp로 model.addAttribute를 통해 전달하게 된다. 상세보기도 동일한다.

	/**
	 * 뉴스 목록
	 * @param model
	 * @return
	 */
	// http://localhost:8080/notice/news-list
	@GetMapping("/news-list")
	public String newsPage(Model model) {
		List<News> newsList = noticeService.getAllnews();
		int totalNewsNum = newsList.size();
		Integer pageSize = totalNewsNum/4;
		model.addAttribute("newsList", newsList);
		model.addAttribute("totalNewsNum", totalNewsNum);
		model.addAttribute("pageSize", pageSize);
		return "news/newsPage";
	}
    
    
	/**
	 * 뉴스 디테일 페이지
	 * @param id
	 * @param model
	 * @return
	 */
	@GetMapping("/news-detail/{id}")
	public String newsdetail(@PathVariable("id") int id, Model model) {
		News selectedNews = noticeService.getNewsById(id);
		model.addAttribute("news", selectedNews);
		return "news/newsDetail";
	}

 

 

3. newsDetail.jsp - 게시글 상세보기

-newsDetail.jsp 측에서는 게시글 상세보기를 지원한다.

-controller에서 전송한 게시글의 정보에 따라, 해당 게시글의 제목, 부제목, 사진, 글의 내용을 보여주게 된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<%@ include file="/WEB-INF/view/layout/header.jsp" %>		
	<link rel="stylesheet" href="/static/css/news.css">
	<div class="news-detail-container">
	<div class="detail-container">
		<h2 class="title">${news.title}</h2>
		<p class="date">${news.createdAt}</p>
		<hr/>
		<img src="/static/images/news/${news.url}" class="image-detail-container">
		<h3 class="detail-text-box">${news.subTitle}</h3>
		<p class="detail-text-box">${news.content}</p>
		<button onClick="location.href='/notice/news-list'" class="list-button">목록으로 돌아가기</button>
	</div>
	</div>
<%@ include file="/WEB-INF/view/layout/footer.jsp" %>

---

-게시판의 경우 기본적인 기능들 중 하나라 크게 어렵지는 않았지만, 페이징 처리나 포맷팅 등 디테일한 부분에서 신경써야 할 것들이 많다고 느껴졌다. 핵심 기능 구현 & 시간 부족으로 인해 신경을 많이 기울이진 못했지만, 다음 번에는 완벽한 게시판을 만들고 싶다!