PJT 2. TO-DO LIST 구현 하기 (3일차)

오늘은 어제에 이어 main 페이지를 구현하는 것을 완성했다.

 

어제는 Mainservelt에서 main.jsp로 데이터베이스에 있는 데이터를 get, set으로 넘겨주는 것까지 완성했다.

오늘은 main.jsp에 가져온 데이터를 어떻게 TODO, DOING, DONE으로 나누어서 출력할지를 생각해보 구현에 성공했다.

 

먼저, 데이터를 list로 받아왔으므로 JSTL의 <c:forEach items="${list }" var="item">를 이용하여 반복문을 돌리며 list에 있는 요소를 하나씩 item이라는 변수에 담았다.

그 후에는 <c:if test="${item.getType() == 'whatType'}">으로 item에 있는 type이 TODO인지, DOING인지, DONE인지를 비교하여 조건문에 따라 출력을 할지 말지를 정했다.

(whatType에 TODO, DOING, DONE 중 하나가 들어가는 것이다.)

여기서 item.getType()이 어떻게 되는지 궁금할 수 있는데

2일차에서 포스팅했듯이 처음부터 list에 데이터를 넣을 때 list안의 요소의 타입은 todoDto로 지정했기 때문에

type값을 get할 수 있는 todoDto의 getType() 메소드를 쓸 수 있는 것이다.

 

이렇게 비교하여 서로 같은 type끼리 출력을 하는데 성공했다.

 

main 페이지를 구현하면서 CSS지식으로 안 내용은 transform 속성 이용하여 태그 박스 자체를 기울일 수 있다.

기획서에서 제목을 기울이는 것을 요구했는데 다행히 잘 찾아서 해결했다.

transform: rotate(30deg); /* 각도 단위 : deg, rad */

위 코드처럼 transform 속성을 CSS에 넣어주면 지정한 각도만큼 해당 요소가 기울어진다.

 

이외에는 프론트엔드 부분은 지난 PJT 1과 비슷한 요구사항이여서 새롭게 안 내용은 없다.

 

아래 동영상은 오늘까지 진행한 프로젝트 main페이지 상황이다.

(아직 새로운 TODO 등록을 눌렀을 때 웹 페이지를 구현하지 않았다.)

 

내일은 새로운 TODO 등록을 눌렀을 때 접속하는 웹 페이지를 구현하고

main 페이지에서 해야할 일 옆에 ->버튼을 클릭하면 TODO에서 DOING으로 넘어가고 DOING에서 누르면 DONE으로 넘어가는 것을 구현하고 프로젝트를 완성시키는 것이 목표이다.