[프로젝트] 메인 화면 구성하기

메인 화면의 각 게시판 미리보기 화면을 구성하겠다.

MainService를 생성하자. 코드는 아래와 같다.

boardDao를 통해 각 게시판의 0~5번째 글을 가져올 것이다.

@Service
public class MainService {

	@Autowired
	private BoardDao boardDao;
	
	public List<ContentBean> getMainList(int board_info_idx){
		RowBounds rowBounds = new RowBounds(0,5);
		return boardDao.getContentList(board_info_idx, rowBounds);
	}
}

MainController로 가자. MainService와 TopMenuService를 통해 각 게시판의 글들, 각 게시판의 이름과 index를 가져와서 List를 통해 model로 전달한다.

	@GetMapping("/main")
	public String main(Model model) {
		
		ArrayList<List<ContentBean>> list = new ArrayList<List<ContentBean>>();
		
		for(int i=1;i<=4;i++) {
			List<ContentBean> list1 = mainService.getMainList(i);
			list.add(list1);
		}
		
		model.addAttribute("list", list);
		
		
		List<BoardInfoBean> board_list = topMenuService.getTopMenuList();
		model.addAttribute("board_list", board_list);
		
		return "main";
	}

main.jsp를 고친다.

<!-- 게시판 Contents -->
	<div class="container" style="margin-top: 50px">
		<div class="row">
			<c:forEach var='sub_list' items="${list }" varStatus="idx">
			<div class="col-lg-11" style="margin-top: 20px">
				<div class="card shadow">
					<div class="card-body">
						<h4 class="card-title">${board_list[idx.index].board_info_name }</h4>
						<table class="table table-hover" id='board_list'>
							<thead>
								<tr>
									<th class="text-center w-25">글번호</th>
									<th>제목</th>
									<th class="text-center w-25">작성자</th>
									<th class="text-center w-25">작성날짜</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach var='obj' items="${sub_list }">
									<tr>
										<td class="text-center">${obj.content_idx }</td>
										<th><a href='${root }board/main?board_info_idx=${board_list[idx.index].board_info_idx}&content_idx=${obj.content_idx}&page=1'>${obj.content_subject }</a></th>
										<td class="text-center">${obj.content_writer_name }</td>
										<td class="text-center">${obj.content_date }</td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
						<a href="${root }board/main?board_info_idx=${board_list[idx.index].board_info_idx}" class="btn btn-info">더보기</a>
					</div>
				</div>
			</div>
			</c:forEach>
		</div>
	</div>

 

여러 게시판이 보이고 클릭해도 제대로 연결이 된다.