본문 바로가기

개발/Front-end

[JSP] 동적으로 시간표 작성하기 - jSP, Spring

  • 목표: spring단에서 넘겨주는 ScheduleDTO 배열을 전달 받고 해당 된 요일과 시간의 칸에 색 입히기.

  • 방법

1) ScheduleDTO 객체는 간단하게 int 타입의 요일과 시간을 넣는다. 요일은 월요일 0부터 6까지로 정의한다.

2) db에서 불러올 때 한 주의 데이터만 불러오고 정렬은 요일 기준 오름차순

  • 한계

내 프로젝트의 경우 PT일정이기 때문에 하루에 두번의 일정이 들어갈 수 없어서 문제가 되지는 않지만 만약 하루에 다수의 스케줄이 있을 수 있다면 이 방법은 먹히지 않는다.

<table class="table table-bordered ">
 <thead >
    <tr class="text-center">
     <th scope="col" style="width:150px" >시간</th>
     <th scope="col" style="width:300px"></th>
     <th scope="col" style="width:300px"></th>
     <th scope="col" style="width:300px"></th>
     <th scope="col" style="width:300px"></th>
     <th scope="col" style="width:300px"></th>
     <th scope="col" style="width:300px"></th>
     <th scope="col" style="width:300px"></th>
   </tr>
 </thead>
 <tbody class="text-center">
<% int count=0;
ArrayList<ScheduleDTO> list=new ArrayList<ScheduleDTO>();
int size=-1;
if(request.getAttribute("schedules")!=null){
list = (ArrayList<ScheduleDTO>)request.getAttribute("schedules");
size=list.size();
}
%>
<% for(int time=9; time<22; time++){ %>
   <tr>
     <th scope="row"><%= time %>~<%= time+1 %></th>
 <%for(int i=0; i<7; i++){ %>
<td
<% if(size>0 && list.get(count).getHour()==time && list.get(count).getDay()==i){ System.out.println("test"); %> style="background-color:rgb(204,255,255)">
<%= list.get(count).getMember_name()%> 회원 - <%= list.get(count).getTrainer_name()%> 트레이너
<%; if(count < size-1) count++; }else{%>><% }%>
</td>
<%}; %>
   </tr>
   <%}%>
 </tbody>
</table>

  • 코드 설명: td가 그려지는 순서대로 list에 넣어놨기 때문에 현재 검사하는 schedule이 해당 위치에 적합하다면 색을 칠하고 count을 증가하여 다음 요소를 검사하도록 설정하였다.

  • Controller

@GetMapping("/member")
public ModelAndView showMemberView(@AuthenticationPrincipal Account account,ModelAndView model){
ModelAndView mv=new ModelAndView("/schedule");

MemberDTO member=findUserService.findMemberById(account.getId());
mv.addObject("schedule","active");
mv.addObject("type",member.getType());
List<ScheduleDTO> schedules=scheduleService.findThisWeekScheduleByMemberId(account.getId());
mv.addObject("schedules",schedules);
return mv;
}