컴퓨터는 잘못이 없다..
[Every Book Day]에피소드 본문
#구현 화면1
#구현 화면2
▲How?
1. 에피소드 작성하기는 로그인을 하지 않으면 사용할 수 없기 때문에 로그인이 되어있지 않다면 로그인 페이지로 이동한 후 다시 에피소드 작성 페이지로 이동되도록 만들었다. 이는 로그인필터를 이용해 구현하였다.
2. 내용 작성 폼은 네이버 스마트에디터 API를 통해 구현하였다.
3. 이미지 파일 첨부를 하지 않으면 default 이미지가 나타나도록 구현하였다.
#구현 화면3
#구현 화면4
▲How?
1. 페이지가 로딩될 때는 로그인한 유저의 하트 클릭 여부와 하트 개수를 요청하도록 구현하였다. 하트 클릭여부에 따라 하트가 빈하트, 채워진 하트가 되도록 구현하였다.
2. ajax요청을 통해 해당 글의 빈 하트버튼을 클릭했을 때 해당 글번호와, 글을 누른 유저의 닉네임이 테이블에 저장되며 하트 색이 채워지도록 구현하였다. 반대로 채워진 하트버튼을 클릭했을 때는 테이블에서 지워지고 빈 하트버튼이 되도록 구현하였다.
3. 하트 버튼을 클릭했을 때는 하트 테이블과 게시글 테이블의 join을 통해 하트 개수 컬럼을 반환하도록 하여 하트 개수가 페이지 전환없이 증감할 수 있도록 ajax요청을 통해 구현하였다.
4. 해당 페이지에 한번 들어간 후 웹브라우저의 앞으로가기나 뒤로가기 버튼을 통해 다른 페이지로 이동했다가 다시 앞으로가기나 뒤로가기 버튼을 통해 해당 페이지로 돌아왔을 때 페이지 새로고침이 되지 않아 하트 클릭여부를 불러올 수 없어 하트 테이블에 정보가 이중으로 들어가는 문제가 생겼다. 따라서 웹브라우저의 앞으로,뒤로가기 버튼을 통해 페이지 이동해 해당 페이지로 오는 경우 하트 버튼을 클릭할 수 없도록 함과 동시에 새로고침이 되어 하트 클릭여부를 제대로 불러올 수 있도록 자바스크립트 코드를 추가하여 구현하였다.
5. 조회수는 이미지를 클릭해서 들어갈 때마다 게시글 테이블의 viewcnt 컬럼의 값이 1씩 증가하도록 하여 구현하였다.
#구현 화면5
#구현 화면6
#구현 화면8
▲How?
그림1. 조회수와 등록일을 확인할 수 있다.
그림2. 디테일 페이지에서도 마찬가지로 하트클릭이 가능하며(리스트와 동일하게 구현함), 작성자일 경우 글 수정과 삭제가 가능하도록 구현하였다.
그림3. 페이징을 할수 있도록 구현하였다.
그림4. 댓글과 대댓글을 달 수 있으며 댓글 작성자이면 댓글의 수정과 삭제가 가능하도록 구현하였다.
댓글, 대댓글 달기는 폼전송으로 구현하였고 댓글은 로그인한 유저들에게만 사용가능한 기능이므로 로그인을 하지 않으면 바로 로그인 폼으로 이동하도록 구현하였다.
댓글 수정은 ajax요청으로 페이지 전환없이 수정될 수 있도록 구현하였다.
댓글 삭제는 location.href요청을 통해 구현하였다.
또한 웹브라우저 창의 크기를 계산하여 웹브라우저의 바닥까지 스크롤 했을 경우 ajax요청을 하여 댓글들을 더 볼 수 있도록 구현하였다.
#구현 화면9
▲How?
1. AOP로 구현하였다. 핵심기능인 삭제기능에서 남의 글을 삭제할 수 없도록 예외처리 하는 부가기능을 Aspect에 정의하여 핵심기능과 부가기능을 분리하여 구현하였다.
