3.기능 및 구현화면 - well0924/coffie_place GitHub Wiki

1. 메인화면

localhost_8087_page_main_mainpage

   1. 로그인 링크를 누르면 로그인 화면으로 이동을 하며 해당 화면에서 로그인을 하거나 회원가입 및 아이디 및 비밀번호 찾기 페이지로 이동 할 수 
      있습니다. 
   
   2. 회원가입링크를 누르면 회원가입 페이지로 이동을 해서 회원가입을 할 수 있습니다.

   3. 가게 평점에서 점수가 높은 가게 5곳을 이미지 슬라이더로 가게이름 과 주소 평점을 볼수 있습니다.

   4. 가게검색 및 자유게시판, 공지게시판 페이지로 가서 목록을 확인을 할 수 있다.(게시글 열람 및 가게 조회는 로그인을 한 후에 가능합니다.) 

2. 로그인 페이지

2-1.로그인 화면

로그인화면

   1. 로그인 버튼을 누르면 인증절차를 거쳐서 관리자면 [ROLE_ADMIN] 으로 표시 유저면 [ROLE_USER]로 표시합니다.
   
   -회원         

로그인(회원)

   -어드민

로그인(어드민)

   1-1. 아이디 및 비밀번호를 입력하지 않고 로그인을 누를 경우

실패1

   1-2. 비밀번호 및 아이디가 맞지않은 경우

실패2

2-2.아이디 및 비밀번호 찾기

아이디찾기 및 비밀번호 찾기

  2-2-1. 아이디 찾기는 회원의 이름과 이메일을 작성을 하면 화면 밑에 회원의 아이디를 출력합니다.
  
  -성공시 

아이디찾기성공

  -실패시

아이디찾기 실패

  2-2-2. 비밀번호 찾기는 회원아이디와 이메일을 입력을 하면 비밀번호 재설정 페이지로 이동을 합니다. 
  
  2-2-3. 비밀번호 재설정 페이지에서는 아이디와 새로운 비밀번호를 입력을 하고 비밀번호가 일치여부를 확인후 비밀번호를 재설정합니다.

비밀번호 재설정페이지

3. 회원가입 페이지

회원가입(1)

 3-1-1.아이디 중복여부로 버튼을 누르면 중복여부를 출력합니다.

 - 실패시 

회원가입(아이디중복)

 3-1-2. 비밀번호를 입력을하면서 비밀번호가 일치를 하는지 확인을 합니다.

 -실패시

회원가입(비밀번호)

 3-1-3. 주소입력 버튼을 누르면 Daum post api를 이용해서 주소지를 입력을 할 수 있습니다.

 3-1-4. 회원가입버튼을 누르면 비밀번호를 암호화하고 입력칸에 빈칸이 있으면 유효성 검사를 하고 제대로 입력을 하면 회원가입을 합니다.

4. 자유게시판

4-1. 자유게시판 목록 페이지

자유게시판 목록

 4-1-1. 글작성 버튼을 누르면 글작성 페이지로 이동을 합니다. 로그인을 하지 않으면 버튼은 활성화 하지 않습니다.

 4-1-2. 선택창에서는 제목,작성자,내용,작성자+내용으로 선택을 해서 게시물을 검색을 할 수 있습니다.

 4-1-3. 글 제목을 클릭을 하면 해당 글을 조회를 할 수 있습니다.

4-2. 자유게시판 글 작성 페이지

자유게시판 글작성

 4-2-1. 게시글을 작성하면서 파일첨부를 할 수 있습니다.(다중첨부)    

 4-2-2. 목록버튼을 누르면 게시글 목록으로 이동을 합니다.

 4-2-3. 게시글 작성을 누르면 게시글 작성기능을 하고 완료된 뒤에는 게시글 목록 페이지로 이동하고 게시글에 작성되지 않은 부분은
        유효성 검사를 실행합니다. 

 4-2-4. summernote에디터를 적용을 해서 이미지를 업로드 할 수 있고 글꼴 변형,링크첨부 등 다양한 기능을 할 수 있습니다. 

4-3. 자유게시판 조회 페이지

localhost_8087_page_board_detail_5017

 4-3-1. 게시글 작성시 파일첨부를 했으면 해당 글을 클릭하면 파일을 다운로드 할 수 있습니다.

 4-3-2. 수정버튼을 누르면 글작성시 비밀번호를 입력을 했으면 비밀번호 입력페이지로 이동을 하고 입력을 하지 않았으면
        
        수정페이지로 이동을 합니다.
 
 4-3-3. 목록버튼을 누르면 게시글목록 으로 이동을 합니다.

 4-3-4. 댓글 작성버튼을 누르면 댓글 내용을 입력하지 않으면 유효성검사를 실행을 하고 작성을 하면 댓글을 작성합니다.

 4-3-5. 댓글 삭제버튼을 누르면 댓글삭제내용이 나오고 댓글이 삭제 됩니다.

4-4. 자유게시판 비밀번호 입력

자유게시판 비밀번호 입력

 글작성시 비밀번호를 입력을 했을 경우 해당 비밀번호를 입력을 하면 게시글 수정페이지로 이동을 합니다.

4-5. 자유게시판 수정 페이지

자유게시글 수정

4-5-1. 목록버튼을 누르면 게시글 목록으로 이동합니다.

4-5-2. 게시글 수정버튼을 누르면 게시글 및 파일첨부를 수정을 할 수 있습니다.

4-5-3. 게시글 삭제버튼을 누르면 게시글을 삭제합니다.

5. 공지 게시판

5-1. 공지게시글 목록

공지게시판

5-1-1. 글작성 버튼을 누르면 공지게시판 작성페이지로 이동을 합니다. 어드민 계정이 아니면 버튼은 활성화 되지 않습니다.

5-1-2. 게시글 선택에 공지카테고리별, 작성자, 내용 별로 게시글을 검색 할 수 있습니다.

5-1-3. 게시글 제목을 클릭을 하면 공지게시글 조회 화면으로 이동을 합니다.(글 열람은 로그인을 해야 열람을 할 수 있습니다.)

5-2. 공지게시글 작성

공지게시글작성

5-2-1. 글작성 버튼을 누르면 공지게시글을 작성하고 공지게시글 목록으로 이동합니다. 게시글을 작성하지 않고 누르면 유효성 검사를 합니다.

5-2-2. 목록 버튼을 누르면 공지게시글 목록으로 이동을 합니다.

5-2-3. 글작성 내용에서 에디터를 이용할 수 있습니다. 

5-3. 공지게시글 조회

공지게시글 열람

5-3-1. 글작성시 파일첨부를 했으면 파일을 다운로드를 할 수 있습니다.

5-3-2. 수정하기 버튼을 누르면 공지게시글 수정페이지로 이동을 해서 글 수정 및 글 삭제를 할 수 있습니다.

5-3-3. 목록버튼을 누르면 공지게시글목록으로 이동합니다.

5-4. 공지게시글 수정

공지게시글수정

5-4-1. 삭제버튼을 누르면 게시글을 삭제하고 공지게시글 목록 페이지로 이동합니다.

5-4-2. 수정버튼을 누르면 게시글의 내용을 수정하고 공지게시글 목록 페이지로  이동합니다.

5-4-3. 목록버튼을 누르면 공지게시글목록으로 이동 합니다.

6. 카페 검색

6-1. 가게 목록페이지

가게목록

6-1-1. 가게 이름 및 가게주소를 선택해서 해당 가게를 검색할 수 있습니다.

6-1-2. 가게 목록을 엑셀 파일로 다운로드를 할 수 있습니다.(어드민계정으로 로그인을 했을시 입니다.)

6-1-3. 가게등록 버튼을 누르면 가게등록 페이지로 이동을 합니다.(어드민 계정으로 로그인을 했을 경우입니다.)

6-2. 가게 조회페이지

가게조회(1)

6-2-1. 가게조회를 했을시 kakao map을 활용해서 가게의 위경도를 넣어서 지도의 위치를 보여줍니다.

6-2-2. 가게메인이미지를 보여주고 이미지를 클릭을 하면 팝업창으로 해당 이미지를 볼 수 있습니다. 작은 이미지 또한 같습니다.

6-2-3. 카페찜하기 버튼을 누르면 완료버튼이 나오고 마이페이지에 위시리스트 목록에 추가됩니다. 한번 추가를 한뒤 누르면 중복체크를 합니다.

6-2-4. 가게수정버튼을 누르면 가게 수정페이지로 이동을 합니다.(어드민계정으로 로그인을 했을 시 입니다.)

6-2-5. 목록버튼을 누르면 가게 목록화면으로 이동을 합니다.

6-2-6,7. 가게 댓글을 작성시 가게 평점 및 댓글 내용을 입력을 해서 댓글을 작성합니다. 평점을 입력을 하면 가게 목록 페이지의 평점에 반영이 됩니다.
       댓글 내용을 작성하지 않으면 유효성검사를 실행합니다.

6-2-8. 댓글에서 하트버튼을 클릭을 하면 추천기능을 할 수 있습니다. 누른뒤 다시 누르면 좋아요 수가 1줄어듭니다.

6-2-9. 댓글 삭제버튼을 누르면 댓글을 삭제합니다.

7. 마이 페이지

7-1. 마이페이지 화면

마이페이지(회원)

7-1-1.가게 조회 페이지에서 카페찜하기 버튼을 누른 가게의 정보를 카드형식으로 가게정보와 평점을 볼 수 있습니다.

7-1-2.회원정보 수정링크를 클릭하면 회원정보수정 페이지로 이동을 할 수 있습니다.(어드민 계정으로 로그인을 하면 활성화 되지 않습니다.)

7-1-3.로그인한 회원의 글(자유게시판,공지게시판)을 확인을 할 수 있다.

내가작성한 글

7-1-4.회원탈퇴링크를 누르면 회원을 탈퇴합니다.(어드민 계정으로 보면 해당 부분은 활성화 되지 않습니다.)

7-1-5.상세버튼을 누르면 가게의 상세조회 페이지로 이동합니다.

7-1-6.위시리스트 삭제버튼을 누르면 위시리스트를 삭제를 합니다.

8. 어드민 페이지

8-1.어드민 목록 페이지

어드민페이지1

8-1-1.회원 아이디를 클릭하면 회원 정보를 볼수 있고 수정할 수 있습니다.
 
8-1-2.검색 필터에 아이디, 이름, 이메일 별로 회원을 검색을 할 수있고, 아이디를 입력을 하면 자동으로 키워드가 나오게 했습니다.

8-1-3.가게목록을 누르면 가게 목록 페이지로 이동합니다.

8-1-4.가게등록 버튼을 누르면 가게등록 페이지로 이동을 합니다.

8-1-5.선택삭제는 목록에서 삭제하고자하는 회원을 체크박스에 선택을 해서 원하는 만큼 회원을 삭제할 수 있습니다.

8-1-6.공지글 작성버튼은 공지게시판 글 작성 페이지로 이동을 할 수 있습니다.

8-2.가게 등록 페이지

가게등록페이지

8-2-1. 가게 등록 페이지에서는 가게정보를 적고 가게 이미지를 첨부를 해서 가게등록을 합니다. 작성이 되지 않은 부분은 유효성 검사를 실행합니다.

8-3.가게 수정 페이지

가게수정

8-3-1. 가게 수정 페이지에는 가게정보와 지도위치를 보여주고 이미지를 첨부를 해서 가게정보를 수정할 수 있습니다.