[SJBoard 프로젝트] 기존 게시판 기능 보완 1: 사용자 아이디 기준 게시물 및 댓글 수정, 삭제 처리 기능

로그인 및 회원 가입 기능을 추가하면서 기존 게시판 기능을 보완할 필요성이 느껴졌다.

 

기존 게시판의 경우 사용자 아이디가 아닌 사용자 이름을 기준으로 게시물 작성, 수정, 삭제 처리와 댓글 작성, 수정, 삭제 처리가 가능하도록 설계되었는데, 이렇게 둘 경우 기존 회원이 사용자 이름을 변경한 경우 자신이 직접 작성한 글과 댓글임에도 불구하고 수정 및 삭제 처리를 할 수 없다는 문제가 발생할 수 있었다.  

 

따라서 사용자 이름이 아닌 사용자 아이디를 기준으로 게시물 및 댓글 작업을 처리를 할 수 있도록 기존 게시판 기능을 보완해야만 했다.

 

=======================================START!===========================================

 

1. 데이터베이스 수정 

 

먼저 데이터베이스 내 기존 게시판 테이블, 댓글 테이블, 첨부파일 테이블의 더미 데이터를 모두 삭제해주었다. 댓글 테이블(TBL_REPLY)과 게시판 테이블(TBL_BOARD)에 작성자 아이디를 나타내는 USERID 열을 추가할 때 NULL을 허용하지 않기 위해서이다. 

DELETE FROM TBL_REPLY;  // 댓글 테이블 
DELETE FROM TBL_ATTACH; // 첨부 파일 테이블 
DELETE FROM TBL_BOARD; // 게시판 테이블

 

댓글 테이블(TBL_REPLY)과 게시판 테이블(TBL_BOARD)에 작성자 아이디를 나타내는 USERID 열을 추가한다. 

ALTER TABLE TBL_BOARD ADD USERID VARCHAR(50) NOT NULL;
ALTER TABLE TBL_REPLY ADD USERID VARCHAR(50) NOT NULL;

 

그리고 댓글 테이블(TBL_REPLY)과 게시판 테이블(TBL_BOARD)에 추가한 USERID 열과 AUTH열을 회원 테이블(TBL_MEMBER)의 기본키인 USERID열과 외래키로 연결한다. 

ALTER TABLE TBL_BOARD ADD CONSTRAINT FK_BOARD_USERID FOREIGN KEY (USERID) REFERENCES TBL_MEMBER(USERID);
ALTER TABLE TBL_REPLY ADD CONSTRAINT FK_REPLY_USERID FOREIGN KEY (USERID) REFERENCES TBL_MEMBER(USERID);

 

2.  게시판  CRUD 수정 

이미 기존에 만들어놓은 게시판 기능에 사용자 아이디 값만 추가하여 활용하는 것이므로 영속 영역인 MemberVO, MemberMapper.xml을 수정하고 BoardMapperTests에서 테스트를 마치고난 후 바로 브라우저에서 테스트하면서 필요한 부분을 수정한다. 

1.  BoardVO, BoardMapper.xml 수정 및 BoardMapperTests 테스트 

1) BoardVO 에 사용자 아이디를 의미하는 userid 를 변수로 추가한다. 

2) BoardMapper.xml에서 게시물 생성, 수정 쿼리문에 userid를 추가한다. 

 

3) BoardMapperTests 에서 수정한 게시물 생성, 수정 쿼리문이 잘 동작하는지 확인한다. 

*게시물 생성) 

 

* 게시물 수정)

 

2.  브라우저 테스트 및 뷰 페이지 수정 

 

2-1. 게시물 작성 페이지 수정 

테스트용 아이디로 로그인하여 게시물 작성을 해보면 아래와 같은 에러가 발생한다.

사용자 아이디인 userid 값이 필수로 입력되어야 하는데 입력되지 않아 서버 오류가 발생한 것이다. 

 

게시물 작성 뷰 페이지인 /sjboard/register.jsp 에 아래와 같이 작성자 아이디 값을 입력하는 <input> 태그를 추가하고 value값은 <sec:authentication> 태그를 이용해 현재 로그인한 사용자의 아이디를 가져온다. 

 

/sjboard/register.jsp 를 수정 후 브라우저에서 다시 게시물 작성 페이지에 들어가보면 아래와 같이 현재 로그인한 사용자의 아이디가 작성자 아이디로 들어간 것을 볼 수 있다.

 

사용자 아이디가 잘 들어가는 것을 확인하였다면 /sjboard/register.jsp로 다시 돌아와 해당 input 태그의 type을 hidden으로 변경한다. 

 

2-2. 게시물 수정 페이지 수정 

앞서 게시물 작성 뷰 페이지인 /sjboard/register.jsp 에서와 한 것과 동일하게 작성자 아이디 값을 입력하는 태그를 /sjboard/modify.jsp 페이지에도 아래와 같이 추가해준다.

 

게시물 수정 페이지에서 로그인 사용자와 작성자의 아이디가 일치할 시 수정 버튼이 나올 수 있도록 코드를 아래와 같이 수정한다.

 

* 수정 전: 작성자의 사용자 이름과 로그인한 사용자의 사용자 이름 일치 여부 확인 )

 

* 수정 후: 작성자 아이디와 로그인한 사용자 아이디 일치 여부 확인)

 

그리고 BoardController 의 게시물 수정 메서드인 modify() 에 작성한 @PreAuthorize 어노테이션의 속성을 아래와 같이 수정해준다.

 

* 수정 전: 작성자의 사용자 이름과 로그인한 사용자의 사용자 이름 일치 여부 확인 )

 

* 수정 후: 작성자 아이디와 로그인한 사용자 아이디 일치 여부 확인)

 

그리고 BoardController 의 게시물 삭제 메서드인 remove() 에 작성한 @PreAuthorize 어노테이션의 속성도 아래와 같이 수정해준다.

 

* 수정 전: 작성자의 사용자 이름과 로그인한 사용자의 사용자 이름 일치 여부 확인 )

 

* 수정 후: 작성자 아이디와 로그인한 사용자 아이디 일치 여부 확인)

 

2-3. 게시물 조회 페이지 수정 

게시물 조회 뷰 페이지인 /sjboard/get.jsp 에도 작성자 아이디 값을 입력하는 태그를 넣어준다. 

게시물 조회 페이지에서 로그인 사용자와 작성자의 아이디가 일치할 시 수정 버튼이 나올 수 있도록 코드를 아래와 같이 수정한다.

 

* 수정 전: 작성자의 사용자 이름과 로그인한 사용자의 사용자 이름 일치 여부 확인 )

* 수정 후: 작성자 아이디와 로그인한 사용자 아이디 일치 여부 확인)

 

3. 게시물 수정 및 삭제 최종 테스트 

브라우저에서 사용자 이름을 변경해도 아이디 기준으로 게시물 수정 및 삭제가 가능한지 테스트해본다. 

 

* 아이디 member1이 사용자 이름 야옹이2로 작성 

 

* 사용자 이름 야옹이1로 변경 

* 게시물 조회 시 아이디 기준으로 확인하여 '수정' 버튼 나타남 

 

* 게시물 조회 시 아이디 기준으로 확인하여 실제 수정 페이지로 이동하여 게시물 수정 가능  

* 게시물 조회 시 아이디 기준으로 확인하여 실제 삭제 페이지로 이동하여 게시물 삭제 가능  

 

 

3.  댓글  CRUD 수정

이미 기존에 만들어놓은 댓글 기능에 사용자 아이디 값만 추가하여 활용하는 것이므로 영속 영역인 ReplyVO, ReplyMapper.xml을 수정하고 ReplyMapperTests에서 테스트를 마치고난 후 바로 브라우저에서 테스트하면서 필요한 부분을 수정한다. 

1.  ReplyVO, ReplyMapper.xml 수정 및 ReplyMapperTests 테스트 

1) ReplyVO 에 사용자 아이디를 의미하는 userid 를 변수로 추가한다.

2) ReplyMapper.xml에서 댓글 생성, 수정 쿼리문에 userid를 추가한다. 

 

3) ReplyMapperTests 에서 수정한 댓글 생성, 수정 쿼리문이 잘 동작하는지 확인한다. 

* 댓글 생성) 

 

* 댓글 수정)

 

2.  브라우저 테스트 및 뷰 페이지 수정 

댓글 처리는 게시물 조회 뷰 페이지인 /sjboard/get.jsp 파일만을 수정해서 처리한다. 

 

2-1. 댓글 등록 

 

/sjboard/get.jsp 에 아래와 같이 댓글 작성자 아이디 값을 입력하는 <input> 태그를 추가하고 value값은 <sec:authentication> 태그를 이용해 현재 로그인한 사용자의 아이디를 가져온다. 

 

/sjboard/get.jsp 를 수정 후 브라우저에서 로그인 후 게시물 조회 페이지에 들어가보면 아래와 같이 댓글 입력창에 댓글을 작성할 현재 로그인한 사용자의 아이디가 나타나는 것을 볼 수 있다. 

 

사용자 아이디가 잘 들어가는 것을 확인하였다면 /sjboard/get.jsp로 다시 돌아와 해당 input 태그의 type을 hidden으로 변경한다. 

 

그리고 브라우저에서 댓글 등록 테스트를 해본다. 여기까지만 했으면 댓글 등록이 되지 않고 STS 콘솔창에 에러가 나타난다. 이 에러가 나타나는 이유는 실제 댓글 등록을 담당하는 자바스크립트 코드를 수정하지 않았기 때문이다. 

 

아래와 같이 로그인한 사용자의 아이디 값을 전달하는 자바스크립트 코드를 추가해주고 브라우저에서 실제로 댓글이 잘 등록되는지 확인한다. 

* 댓글 등록 테스트 결과) 

 

2-2. 댓글 삭제 및 수정 

댓글 삭제 및 수정의 경우 모달창을 이용하므로 모달창에 댓글 작성자의 아이디 값을 입력하는 <input> 태그와 현재 로그인한 사용자의 아이디 값을 입력하는 <input> 태그 총 두 개를 입력한다.

 

입력창을 두 개 넣는 이유는 두 아이디의 값이 일치하면 댓글 수정 및 삭제 처리가 가능하고 두 아이디의 값이 일치하지 않으면 처리가 되지 않도록 구현하기 위해서다.

 

그리고 /sjboard/get.jsp 에 있는 댓글 수정 및 삭제 처리를 위한 모달창 동작 관련 자바스크립트 코드를 아래와 같이 사용자 아이디를 기준으로 확인할 수 있도록 수정한다. 

그리고 댓글 삭제 메서드의 경우 댓글 처리 작업 자바스크립트 함수만을 따로 모아놓은 /resources/reply.js 파일 내의 댓글 삭제 처리 함수인 function remove() 또한 아래와 같이 수정해줘야한다. 

 

댓글 삭제 시 현재 로그인한 사용자의 아이디 값을 컨트롤러에 넘겨줘야 컨트롤러에서 해당 값을 받아 댓글 삭제 여부를 결정하기 때문이다. 

 

 

2-3. 작동 여부 테스트 

브라우저에서 아이디 기준으로 게시물 수정 및 삭제가 가능한지 테스트한다. 

* 로그인하지 않았을 때 댓글 수정 및 삭제 작업을 할 수 없다는 것을 확인한다.

* 로그인했을 때 다른 사용자가 작성한 댓글의 수정 및 삭제 작업은 할 수 없다는 것을 확인한다. 

 

그러나 여기까지만 처리하면 사용자 이름을 변경한 다음 사용자 이름을 변경하기 전 작성한 댓글에 대한 수정 및 삭제 처리를 할 수 없다. 이 오류는 아직 ReplyController를 수정하지 않았기 때문이다. 

 

3.  ReplyController 수정 

ReplyController에서 댓글 수정과 삭제를 담당하는 modify() 메서드와 remove() 메서드에 작성한 @PreAuthorize 어노테이션의 속성을 아래와 같이 사용자 아이디 기준으로 수정해준다. 

 

* 수정 전)

* 수정 후)

 

ReplyController 수정 후 브라우저에서 사용자 이름을 변경 후 사용자 이름 변경 전 작성 댓글에 대한 수정 및 삭제 처리가 문제없이 동작하는지 확인한다. 

 

테스트 시 이상이 없으면 모달창 내 현재 로그인한 사용자의 ID 값을 불러오는 <input> 태그와 원래 댓글을 작성했던 사람의 사용자 ID 값을 불러오는 <input> 태그의 type을 'hidden'으로 바꾼다. 

 

4.  댓글 수정 및 삭제 최종 테스트 

* 아이디가 member1 인 사용자가 사용자이름 '야옹이1'일 때 작성한 댓글

* 사용자이름을 '야옹이1'에서 '야옹이2'로 변경

* 회원 정보 수정 후 다시 로그인하여 사용자이름 '야옹이2'로 '야옹이1'일 때 작성한 댓글을 수정 

* 사용자이름 '야옹이2'로 '야옹이1'일 때 작성한 댓글을 삭제