Hello

1st Toy Project(Dreaming Animal)

by 볼빵빵오춘기

Toy Project

지금까지 학습한 내용을 바탕으로, 복습 겸 실습을 통해 내 것으로 만들기 위해 프로젝트를 시작했습니다.
웹 개발의 기본인 게시판을 직접 만들어 보면서, 부족한 부분을 파악하고 이해도를 확인하려는 목적이 있습니다.
독학으로 관련 기술들을 배워 왔기에, 개인 프로젝트에서 미흡한 부분들이 있을 수 있습니다.
이러한 부분들을 하나씩 점검하고 개선해 나가면서, 앞으로 프로그래밍에 있어 어떤 방향성을 가져야 할지 고민하고 발전해 나가려 합니다.

 

개요

  • 프로젝트 명 : Dreaming Animal
  • 개발 인원 : 1 명
  • 개발 기간 : 2024.03.31 ~ 2024.06.30
  • 주요 기능 : 
    • 커뮤니티 게시판 : CRUD 기능과 댓글 기능을 제공 및 조회수 기능 구현
    • 보호소 게시판 : 글 작성(C)과 조회(R) 기능을 제공하며, 카카오 API를 활용해 작성자의 위치 정보를 표시 및 다음 주소 API를 이용해 정확한 주소 및 좌표 수집
      (작성된 글의 수정 및 삭제는 관리자 페이지에서 관리)
    • 보호동물 게시판  : CRUD 기능과 페이징 및 검색 처리, 그리고 권한에 따른 글쓰기 기능을 구현
    • 사용자 관리 : Security를 활용한 회원가입 및 로그인 기능(네이버, 구글 연동), 일반 회원가입 및 로그인, 회원가입 시 유효성 검사와 중복 검사 기능을 구현
    • 관리자 페이지 : 보호소 게시판에서 작성된 글의 작성자에 대한 수정(R) 기능을 관리할 수 있는 페이지를 제공
  • 개발 언어 : JAVA17
  • 개발환경 : Springboot 3.2.1, JPA(Spring Data JPA), Spring Security, OAuth 2.0, Tymeleaf
  • 데이터베이스 : H2
  • 간단 소개 : 웹 개발에 기본 인 게시판(파일첨부,댓글기능)과 회원가입을 만든 첫 번째 토이 프로젝트입니다.

 

요구사항 분석

회원 가입

  • 유효성 검사
    • 아이디는 영문과 숫자로 이루어져야 하며, 4~10자로 구성한다.
    • 비밀번호는 5자 이상이도록 한다.
    • 이메일은 이메일 형식에 맞게 입력하도록 한다.
    • 닉네임은 3~8글자로 구성해야 한다.
  • 중복확인
    • 아이디, 이메일, 닉네임은 데이터베이스에서 존재 여부를 확인한 후, 이미 사용 중일 경우 해당 문구를 표시한다.
      중복이 아닐 경우에만 '회원가입' 버튼을 눌러 가입이 완료된다.
    • 가입이 완료되면 회원 등급은 USER로 설정된다.

 

로그인

  • 로그인 실패 시, 실패 원인을 안내한다.
  • 로그인 완료 시, 메인 페이지로 이동한다.

 

회원정보 수정

  • 비밀번호와 닉네임만 수정할 수 있다. 
  • 비밀번호는 5자 이상, 닉네임은 3~8글자여야만 수정 가능하도록 한다.

 

소셜 로그인

  • 구글과 네이버 로그인만 가능하도록 한다. 
  • 소셜 로그인 시에는 닉네임만 수정할 수 있도록 한다. 

 

커뮤니티 게시판

  • 로그인한 사용자만 글쓰기 가능하다.
  • 글 작성 시, 제목과 내용은 필수 입력 사항이다. 
  • 파일 첨부가 가능하며, 이미지 파일만 최대 5개까지 첨부할 수 있다. 
  • 글의 수정 및 삭제는 작성자만 가능하며, 댓글이 달린 경우 수정 및 삭제가 불가하다. 
  • 목록에서 제목으로 게시글을 검색할 수 있다. 
  • 로그인한 사용자만 댓글 작성이 가능하며, 비로그인 사용자는 댓글 작성이 불가하다. 

 

보호소 게시판(보호소 인증 요청)

  • 로그인한 사용자 중 USER 등급만 보호소 인증 글을 작성할 수 있다. 
  • 글 작성 시 인증서류 이미지만 파일로 첨부할 수 있으며, 파일은 하나만 첨부 가능하다. 
  • 목록에는 승인된 보호소만 보이도록 설정한다. 
  • 목록은 지도와 리스트 형태로 보여주며, 지도에서는 보호소 위치를 표시하고 리스트에서는 글 클릭 시 정보를 모달로 보여준다. 

 

보호소 게시판(관리자 승인)

  • 등급이 ADMIN인 사용자(=관리자)만 이용가능하다.
  • 관리자 페이지에서 모든 인증 요청 글을 확인할 수 있으며, 승인 여부에 따라 필터링이 가능하다. 
  • 승인된 요청 글의 작성자는 SHELT 등급으로 변경한다. 
  • 인증 요청 글 클릭 시 정보를 모달로 보여준다.

 

보호동물 게시판

  • 인증된 SHELT 등급의 사용자만 글을 작성할 수 있다.
  • 글 작성 시 이미지 파일만 하나 첨부할 수 있다. 
  • 글의 수정 및 삭제는 작성자만 가능하며, 수정은 작성 글에 대한 수정과 보호 종료일 수정으로 나눈다. 
  • 상세 페이지에는 보호동물 관련 글과 작성자의 보호소 정보를 함께 보여준다. 
  • 리스트는 제목 및 내용뿐만 아니라 첨부된 이미지도 함께 보여주도록 한다. 

 

메인 페이지

  • 보호동물 게시판 바로가기 섹션 추가한다. 
  • 보호소 게시판 바로가기 섹션 추가한다.
  • 커뮤니티 게시판 바로가기 섹션 추가한다.

 

DB 설계

커뮤니티 게시판

 

커뮤니티 게시판 댓글

 

보호소 게시판

 

보호동물 게시판

 

사용자 회원가입, 로그인

 

API 설계

커뮤니티 게시판

 

커뮤니티 게시판 댓글

 

보호소 게시판

 

보호소 승인 관리자 게시판

 

보호동물 게시판

 

사용자 회원가입, 로그인

 

개발내용

 

실행화면

커뮤니티 게시판 관련 화면

더보기
  • 글 쓰기
    • 글 작성시 파일첨부가 가능합니다.
    • 파일첨부는 이미지만 가능하며 파일 옆에 ‘+’ 버튼을 눌러 추가첨부가능하고 이미지를 넣지않을 경우 파일 첨부부분에 ‘x’버튼을 눌러 파일 첨부를 취소할 수 있습니다.
    • 글 작성이 완료되면 목록페이지로 이동합니다.

 

  • 글 목록
    • 전체 목록을 페이징 처리하여 조회가능합니다.
    • 검색어가 있다면 제목에 검색어가 포함되어있는 목록만 조회가 가능합니다.

 

  • 글 상세페이지
    • 상세페이지에서 글 쓴 내용이 보이며 ‘수정’,’삭제’버튼은 글쓴이 글 작성자에게만 보입니다.

 

  • 글 수정하기
    • 글 상세페이지에서 글쓴이 자신이 쓴 글이 댓글이 달려있지않은 경우 ‘수정’버튼을 눌러 수정페이지로 이동가능하며, 글 수정이 가능합니다.
    • 수정완료가 되면 전체 목록 페이지로 이동합니다.

 

  • 글 삭제하기
    • 글 상세페이지에서 글에 댓글이 달려있지않은 경우 ‘삭제’버튼을 눌러 글 삭제가 가능합니다.
    • 삭제가 완료되면 전체 목록 페이지로 이동합니다.

커뮤니티 게시판 댓글 관련 화면

더보기
  • 댓글 쓰기(비로그인 사용자 화면)
    • 댓글은 로그인한 회원만 쓸 수 있도록 해놓았기 때문에 댓글 작성불가합니다.

 

  • 댓글 쓰기(로그인 사용자 화면)
    • 댓글을 쓸 수 있는 textarea가 보입니다.
    • 로그인한 회원은 댓글을 작성할 수 있으며, 작성완료 시 현재 페이지를 reload합니다.

 

 

 

  • 댓글 수정하기
    • 자신이 쓴 댓글만 수정이 가능합니다. 
    • 사용자 본인이 등록된 댓글이면 '수정','삭제'버튼이 보이고 '수정'버튼을 클릭하면 댓글쓰기 부분이 댓글 수정으로 변경됩니다. 
    • 댓글 내용 수정이 완료되면 현재 페이지를 reload합니다.

 

 

  • 댓글 삭제하기
    • 자신이 쓴 댓글만 삭제가 가능합니다. 
    • 사용자 본인이 등록된 댓글이면 '수정','삭제'버튼이 보이고 '삭제'버튼을 클릭하면 댓글이 삭제가 됩니다.. 
    • 댓글 삭제가 완료되면 현재 페이지를 reload합니다.

보호소 게시판 관련 화면

더보기
  • 글 쓰기(보호소 인증 글 쓰기)
    • 보호소 인증 글쓰기를 할 때 주소입력시 다음주소API를 이용하여 주소 정보를 받습니다.
    • 정보 입력 후 ‘인증 요청하기’버튼을 클릭하면 글쓰기가 완료되고 목록 페이지로 이동합니다.

 

 

 

  • 글 목록(리스트)
    • 보호소 인증요청 글을 쓴 후 관리자가 승인을 한 보호소 인증요청글만 리스트에 보입니다.
    • 검색어에 보호소명을 넣어 검색하면 보호소명에 검색어가 포함된 보호소만 목록에 보입니다.

 

  • 글 목록(지도)
    • 보호소 인증요청 글을 쓴 후 관리자가 승인을 한 보호소 인증요청글만 지도에 보입니다.

 

  • 글 상세페이지
    • 리스트에서 상세페이지를 볼 경우에는 리스트를 클릭하면 클릭한 보호소의 정보가 모달로 보입니다.
    • 지도에서 상세페이지를 볼 경우에는 지도에 표시된 보호소를 클릭하면 클릭한 보호소의 정보가 모달로 보입니다.

보호소 승인 관리자 게시판

더보기
  • 목록 페이지
    • 승인요청한 보호소 전체 글 목록을 페이징 처리하여 조회가능합니다.
    • 전체, 승인여부에 따라 목록을 조회가능합니다.

 

  • 글 상세페이지
    • 글 목록에서 '정보보기'를 클릭하여 해당 글(보호소 인증 요청)의 정보를 모달로 확인가능합니다. 

 

  • 글 수정하기(보호소 승인하기)
    • 상세페이지에서 ‘승인하기’버튼을 클릭하면 해당 글(인증 요청 보호소)이 승인이되며 목록페이지가 reload됩니다.
    • 승인된 글(인증 요청 보호소)의 작성자는 등급이 CENTER로 변경됩니다.

 

보호동물 게시판 관련 화면

더보기
  • 글 쓰기(보호동물 등록하기)
    • 보호동물 등록가능한 글 쓰기는 보호소승인요청 후 승인된 회원만 작성가능합니다.
    • 글쓰기(등록)이가 완료되면 보호동물 목록페이지로 이동합니다.

 

  • 글 목록
    • 전체 글 목록조회가 가능합니다.
    • 공고번호, 접수일시, 품종, 보호상황, 성별에 따라 검색 가능합니다.

 

  • 글 상세페이지
    • 글 상세페이지에서는 등록된 글 외에도 글쓴이의 보호소정보도 같이 확인 가능합니다.
    • 글쓴이 본이이라면 수정, 삭제, 보호종료(보호종료만 수정)가 가능합니다.
     

 

  • 글 수정하기
    • 글 상세페이지에서 ‘수정’버튼을 클릭하여 수정페이지에 들어가 수정가능하며 수정완료가 되면 목록페이지로 이동합니다.

 

  • 글 수정하기(보호종료하기)
    • 글 상세페이지에서 ‘보호종료’버튼을 클릭하면 보호종료 사유를 적을 수 있는 모달 창이 뜨며 모달창에 ‘보호종료’버튼을 클릭하면 보호종료상태로 변경되며 목록페이지로 이동합니다.

 

 

  • 글 삭제하기
    • 글 상세페이지에서 ‘삭제’버튼을 클릭하여 삭제가 가능하며 삭제 후에는 목록페이지로 이동합니다.

사용자 회원가입, 로그인 관련 화면

더보기
  • 회원가입 하기
    • 회원가입 시 유효성 검사 및 중복확인을 진행하며 완료시 회원정보를 저장하고 로그인 페이지로 이동합니다.

 

 

 

  • 로그인 하기
    • 로그인 실패 시 어떤 이유로 실패했는지 메세지가 화면에 나오고, 로그인 화면에 성공하면 메인 페이지로 이동합니다.

 

 

  • OAuth 2.0 소셜 로그인하기(네아로, 구글로그인)
    • 로그인 페이지에서 '구글로그인', '네이버로그인'을 클릭하면 네이버계정과 구글계정으로 회원가입 및 로그인이 가능합니다.

 

 

  • 회원정보 수정하기
    • 로그인한 회원의 자기 자신의 정보만 수정가능하며, 회우너정보 수정 시에는 비밀번호와 닉네임만 변경할 수 있고, 변경된 닉네임이 이미 사용중일 경우 alert으로 알려주며, 회원수정페이지로 redirect로 하는데 변경된 정보로 보이게 됩니다.

메인 화면

 

저작자표시

블로그의 정보

Hello 춘기's world

볼빵빵오춘기

활동하기

티스토리툴바