컴퓨터는 잘못이 없다..
[Every Book Day]조각글 본문
#구현 화면1
#구현 화면2
▲How?
1. 조각글 작성하기는 로그인을 하지 않으면 사용할 수 없기 때문에 로그인이 되어있지 않다면 로그인 페이지로 이동한 후 다시 에피소드 작성 페이지로 이동되도록 만들었다. 이는 로그인필터를 이용해 구현하였다.
#구현 화면3
▲How?
1. 조각글 입력하기와 독후감 작성하기는 로그인을 하지 않으면 사용할 수 없기 때문에 로그인이 되어있지 않다면 로그인 페이지로 이동한 후 다시 조각글이나 독후감 작성페이지로 이동되도록 만들었다. 이는 로그인필터를 이용해 구현하였다.
2. 조각글 작성 페이지에서 검색 버튼을 클릭하면 도서 검색페이지로 이동한다. 도서 검색 폼에 keyword를 입력하면 검색 폼에 입력한 keyword의 폼 전송으로 원하는 데이터를 요청하고, 도서 검색 API를 통해 데이터를 응답하는 방식으로 구현하였다.
이때 선택버튼을 클릭하면 도서 검색 API를 통해 응답받은 데이터를 hidden속성을 가진 폼 전송을 통해 원하는 데이터가 입력 폼에 자동으로 입력되도록 구현하였다.
3. 조각글은 다른 게시글과 다르게 200자 제한을 두었다. 따라서 자바스크립트 코드로 200자 제한을 주는 코드를 작성해서 200자까지만 입력할 수 있도록 구현하였다.
#구현 화면4
#구현 화면5
▲How?
1. 페이지가 로딩될 때는 로그인한 유저의 하트 클릭 여부와 하트 개수를 요청하도록 구현하였다. 하트 클릭여부에 따라 하트가 빈하트, 채워진 하트가 되도록 구현하였다.
2. ajax요청을 통해 해당 글의 빈 하트버튼을 클릭했을 때 해당 글번호와, 글을 누른 유저의 닉네임이 테이블에 저장되며 하트 색이 채워지도록 구현하였다. 반대로 채워진 하트버튼을 클릭했을 때는 테이블에서 지워지고 빈 하트버튼이 되도록 구현하였다.
3. 하트 버튼을 클릭했을 때는 하트 테이블과 게시글 테이블의 join을 통해 하트 개수 컬럼을 반환하도록 하여 하트 개수가 페이지 전환없이 증감할 수 있도록 ajax요청을 통해 구현하였다.
4. 해당 페이지에 한번 들어간 후 웹브라우저의 앞으로가기나 뒤로가기 버튼을 통해 다른 페이지로 이동했다가 다시 앞으로가기나 뒤로가기 버튼을 통해 해당 페이지로 돌아왔을 때 페이지 새로고침이 되지 않아 하트 클릭여부를 불러올 수 없어 하트 테이블에 정보가 이중으로 들어가는 문제가 생겼다. 따라서 웹브라우저의 앞으로,뒤로가기 버튼을 통해 페이지 이동해 해당 페이지로 오는 경우 하트 버튼을 클릭할 수 없도록 함과 동시에 새로고침이 되어 하트 클릭여부를 제대로 불러올 수 있도록 자바스크립트 코드를 추가하여 구현하였다.
#구현 화면6
▲How?
1. 웹브라우저 창의 크기를 계산하여 웹브라우저의 바닥까지 스크롤 했을 경우 ajax요청을 하여 새로운 게시글들을 볼 수 있도록 구현하였다.
#구현 화면7
▲How?
1. 카카오버튼을 클릭하면 글의 내용을 카카오톡으로 공유할 수 있도록 카카오 메세지 API를 사용하여 구현하였다.
#구현 화면8
▲How?
1. AOP로 구현하였다. 핵심기능인 삭제기능에서 남의 글을 삭제할 수 없도록 예외처리 하는 부가기능을 Aspect에 정의하여 핵심기능과 부가기능을 분리하여 구현하였다.
