[프로젝트] 스프링 부트 게시판 (+ 댓글기능) 만들기 완료 05 (드림리멤버 v2)

프로젝트 특징

• 스프링부트 Jpa를 기반으로 꿈을 기록하는 웹서비스
• 드림리멤버(v1)에서 회원기능(소셜로그인 포함), 게시판 댓글기능, 게시글 검색 및 전체 페이지 페이지네이션 기능 추가
• 요구 명세서에 따라 프로젝트 설계 및 구현

개요

• 명칭 : 드림리멤버 (v2)
• 개발 인원 : 1명
• 개발 기간 : 2021.03.26 ~ 2021. 03.31
• 주요 기능 : 전체 게시글 조회, 회원기능, 게시글 기능, 댓글기능
• 개발 언어 : java 8, javascript
• 개발 환경 : springboot 2.4.4, jpa, spring-security, junit5, thymeleaf
• 데이터베이스 : mysql
• 형상관리 툴 : git
• 간단 소개 : 꿈(진짜 밤에 꾼 꿈)을 기록하는 커뮤니티
• 사이트 : 드림리멤버
• 시연영상 : 시연영상

1. 요구사항 분석

• 요구사항 분석 영상
  요구 사항

1. 회원 가입 페이지

   • 회원가입 버튼을 클릭하기
   • 닉네임, 비밀번호, 비밀번호 확인을 입력하기
   • 닉네임은 최소 3자 이상, 알파벳 대소문자(a~z, A~Z), 숫자(0~9)로 구성하기
   • 비밀번호는 최소 4자 이상이며, 닉네임과 같은 값이 포함된 경우 회원가입에 실패로 만들기
   • 비밀번호 확인은 비밀번호와 정확하게 일치하기
   • 데이터베이스에 존재하는 닉네임을 입력한 채 회원가입 버튼을 누른 경우 "중복된 닉네임입니다." 라는 에러메세지를 프론트엔드에서 보여주기
   • 회원가입 버튼을 누르고 에러메세지가 발생하지 않는다면 로그인 페이지로 이동시키기

2. 로그인 페이지

   • 로그인, 회원가입 버튼을 만들기
   • 닉네임, 비밀번호 입력란 만들기
   • 로그인 버튼을 누른 경우 닉네임과 비밀번호가 데이터베이스에 등록됐는지 확인한 뒤, 하나라도 맞지 않는 정보가 있다면 "닉네임 또는 패스워드를 확인해주세요"라는 메세지를 프론트엔드에서 보여주기
   • 로그인 버튼을 눌러서 에러 메세지가 발생하지 않는다면 전체 게시글 목록 조회 페이지로 이동시키기

3. 로그인 검사

   • 아래 페이지를 제외하고 모두 로그인 한 경우만 볼 수 있도록 하기
     • 회원가입 페이지
     • 로그인 페이지
     • 게시글 목록 조회 페이지
     • 게시글 조회 페이지
   • 로그인을 하지 않거나 올바르지 않은 경로로 접속한 사용자가 로그인이 필요한 경로에 접속한 경우 "로그인이 필요합니다." 라는 메세지를 프론트엔드에서 띄워주고 로그인 페이지로 이동시키기
   • 로그인 한 사용자가 로그인 페이지 또는 회원가입 페이지에 접속한 경우 "이미 로그인이 되어있습니다."라는 메세지를 띄우고 전체 게시글 목록 조회 페이지로 이동시키기

4. 소셜 로그인 기능 만들기

   • 카카오 소셜 로그인이 가능하도록 하기
   • 동일한 이메일로 이미 회원가입한 경우, 동일 Email 가진 회원에 카카오 Id 추가하고 로그인하기

5. 게시글 조회 페이지 > 댓글 목록 조회

   • 로그인 하지 않은 사용자도 댓글 목록 조회가 가능하도록 하기
   • 현재 조회중인 게시글에 작성된 모든 댓글을 목록 형식으로 볼 수 있도록 하기
   • 댓글 목록 위에 댓글 작성란 만들기
     • 댓글 작성에 관한 기능은 5번 요구사항으로 연결하기
   • 댓글 목록 중, 내가 작성한 댓글인 경우 댓글 수정, 댓글 삭제 버튼 만들기
     • 댓글 수정 버튼을 누르면 6번 요구사항으로 연결하기
     • 댓글 삭제 버튼을 누르면 7번 요구사항으로 연결하기
   • 제일 최근 작성된 댓글을 맨 위에 띄우기

6. 게시글 조회 페이지 > 댓글 작성

   • 로그인 한 사용자만 댓글 작성이 가능하도록 하기
   • 게시글 조회 페이지 하단에 댓글 내용을 입력할 수 있는 댓글 작성 버튼 만들기
   • 로그인 하지 않은 사용자가 댓글 작성란을 누르면 "로그인이 필요한 기능입니다." 라는 메세지를 띄우고 로그인 페이지로 이동시키기
   • 댓글 내용란을 비워둔 채 댓글 작성 버튼을 누르면 "댓글 내용을 입력해주세요" 라는 메세지를 띄우기
   • 댓글 내용을 입력하고 댓글 작성 버튼을 누른 경우 작성한 댓글을 추가하기

7. 게시글 조회 페이지 > 댓글 수정

   • 내가 작성한 댓글만 수정 가능하도록 하기
   • 댓글 본문이 사라지고, 댓글 내용, 저장 버튼 생성하기
   • 댓글 내용에는 이전에 입력했던 댓글 내용을 기본 값으로 채우기
   • 수정할 댓글 내용은 비어 있지 않도록 하기
   • 저장 버튼을 누른 경우 기존 댓글의 내용을 새로 입력한 댓글 내용으로 바꾸기

8. 게시글 조회 페이지 > 댓글 삭제

   • 내가 작성한 댓글만 삭제 가능하도록 하기
   • "정말로 삭제하시겠습니까?" 메세지를 띄우고, 확인/취소 버튼 중 "확인" 버튼을 누른 경우 목록에서 해당 댓글을 삭제하기
   • 취소를 누른 경우 삭제되지 않고 그대로 유지하기

9. 회원가입 테스트 코드 작성

   • 회원가입시 구현한 아래 조건을 검사하는 테스트 코드를 작성하기
     • 닉네임은 최소 3자 이상, 알파벳 대소문자(a~z, A~Z), 숫자(0~9)로 이루어져 있어야 합니다.
     • 비밀번호는 최소 4자 이상이며, 닉네임과 같은 값이 포함된 경우 회원가입에 실패합니다.
     • 비밀번호 확인은 비밀번호와 정확하게 일치해야 합니다.
     • 데이터베이스에 존재하는 닉네임을 입력한 채 회원가입 버튼을 누른 경우 "중복된 닉네임입니다." 라는 에러메세지가 발생합니다.
   • 테스트 코드 실행 시 실제로는 데이터베이스에 연결되지 않도록 하기
   • 각 조건 별로 2개 이상의 테스트 케이스가 존재하도록 하기

2. 테이블 설계

• 테이블 설계 영상

3. API 설계

• API 설계 영상 , API 설계 게시글

화면 설계

• 화면 설계 영상

공통

1. 드림리멤버에 공통으로 적용되는 부분
2. 로그인시 로그아웃, 비 로그인시 회원가입 로그인 버튼을 활성화 한다.
3. 게시글 작성, 로그인 클릭시 로그인 페이지로 이동한다.
4. 회원가입 클릭시 회원가입페이지로 이동한다.
5. 로고 클릭시 전체페이지로 이동한다.

회원가입

1. 닉네임, 비밀번호, 비밀번호 확인을 입력받고 회원가입 버튼 클릭시 회원가입을 진행하고 로그인 페이지로 이동한다.

로그인

1. 닉네임과 패스워드를 입력받고 로그인 버튼을 클릭시 로그인을 진행 후 전체페이지로 이동한다.
2. 카카오톡으로 로그인 클릭시 카카오api를 이용하여 로그인을 진행 후 전체페이지로 이동한다.

게시글 목록

1. 제목 작성자명 작성날짜가 조회된다.2. 제목 클릭시 꿈 상세페이지로 이동
2. 작성날짜 기준으로 내림차순 정렬
3. 게시글을 페이지 순으로 보여주고 번호를 클릭시 해당 페이지로 이동
4. < 나 >를 클릭시에는 이전 이후 페이지로 이동

게시글 작성

1. 제목 작성자명 내용을 입력받는다.
2. 등록 버튼 클릭시 게시글이 등록되고 전체페이지로 이동한다.
3. 취소버튼 클릭시 전체페이지로 이동한다.

게시글 수정

1. 제목 작성자명 내용을 입력받는다.
2. 수정 버튼클릭시 게시글이 등록되고 수정후 게시글 상세조회 페이지로 이동
3. 취소버튼 클릭시 전체페이지로 이동한다.

게시글 상세 조회

1. 제목 작성자명 작성일 작성내용을 보여준다.
2. 목록으로 클릭시 전체페이지로 이동한다.
3. 글을 작성한 사람만 수정 삭제가 활성화되며 수정클릭시 수정페이지로 이동하고 삭제클릭시 게시글이 삭제되고 전체페이지로 이동한다.
4. 삭제버튼 클릭시 게시글이 삭제되고 전체페이지로 이동한다.
5. 로그인하지 않은 사용자도 댓글 목록 조회 가능
6. 댓글 작성을 클릭시 로그인 하지 않은 유저라면 로그인페이지로 이동 아니라면 댓글 작성
7. 내가 작성한 댓글만 수정가능하고 수정 버튼 클릭시 댓글 본문이 사라지고 댓글 내용 저장버튼 생성하고 삭제버튼 클릭시 정말 삭제하시겠습니까? 메시지를 띄우고 확인 버튼을 누른 경우 목록에서 해당 댓글을 삭제하기

개발일지

2021.03.26

• 요구사항 정리
• 테이블 설계
• API 설계

2021.03.27

• 화면 설계
• 프로젝트 셋팅
• 프로젝트 개발
  • 회원가입 (소셜로그인 x)
    • 관리자 로그인 , 일반계정 로그인
    • 서버단 유효성 검사 완료

2021.03.29

• 회원가입기능 (소셜로그인)
• 게시글 등록 기능
• 전체페이지 리스트 조회하는 부분

2021.03.30

• 게시글 목록 페이지네이션 구현 및 검색기능 구현
• 게시글 상세조회 페이지, 수정페이지 구현
• 게시글 상세조회 페이지내의 댓글 기능 구현
• 회원 관련 테스트 코드 작성

2021.03.31

• 프로젝트 코드 리팩토링 함
• 버그들을 수정함
• 테스트코드 (요구 사항에 맞게 회원가입부분에 대해서 작성)

2021.04.01

• 카카오로그인 URL 변경
• H2 테스트 DB에서 AWS rds mysql로 변경
• org/springframework/boot/configurationprocessor/json/JSONException로 잘못된 import를 org.json으로 변경
• 프로젝트 완료 및 배포