221226~230102 Express Project

 

환장의 나라

Main 페이지 • Join 페이지 • Login 페이지 • Board 페이지 • Profile 페이지

사용 기술

 

 

 

시연 영상

‼️ 구현해야할 필수 기능

필수 기능(삼각형 눌러서 펼쳐보기)

1. 메인페이지

• 카테고리
  • Home
  • Join
  • Board
  • Profile
  • Admin2. Join페이지
• 항목
  • 아이디
  • 패스워드
  • 이름
  • 별명
  • 생년월일
  • 성별
  • 전화번호
  • 핸드폰번호
• 회원가입시 등급이 있다.
  • level 3: 최고관리자
  • level 2 : 관리자
  • level 1 : 사용자
  • level 0 : 승인 전 단계
• Welcome페이지 :회원가입 내용을 확인할 수 있다.
  • 아이디
  • 이름
  • 성별
  • 전화번호
  • 핸드폰번호

3. Login페이지

• 로그인은 아이디와 패스워드 일치여부

4. Board페이지

• 테이블 항목
  • 순번
  • 제목
  • 작성자 [회원닉네임]
  • 작성일
  • 조회수
    회원만 들어올 수 있는 페이지
• 회원은
  • 모든글 리스트보기
  • 모든 작성 글 보기
    • 글보기화면 볼경우 해당 글의 조회수를 +1
  • 새로운 글쓰기
  • 자신이 작성한 글 수정하기
  • 자신의 글만 삭제 가능
• 관리자는
  • 모든 글 수정 가능
  • 모든 글 삭제 가능

5. Profile페이지

로그인한 회원은 프로필 메뉴를 클릭할 수 있다.'

• 항목
  • 아이디
  • 이름
  • 성별
  • 전화번호
  • 핸드폰 번호

6. Admin [선택사항]

• 최고관리자 전용 회원
• 최고관리자는 http://localhost/admin 강제로 이동시 관리자 페이지가 보입니다.
• 최고관리자는 회원리스트에서 level 0~2 해당되는 모든 사람의 리스트를 볼수있습니다. 최고관리자는 회원리스트에서 회원보기가 가능합니다.
  최고관리자는 회원리스트에서 레벨을 수정할수있습니다.
  최고관리자는 회원을 이용 중지 할 수 있습니다.

 

Main

• 비회원 메인 페이지는 로그인을 하지 않은 상태에서 제일 먼저 사이트로 들어오면 보이는 페이지
• 로그인을 한 상태에서는 회원용 메인페이지
• admin이라는 최고관리자 계정은 admin 메인 페이지를 보여준다.

각 페이지는 각각 다른 페이지로 구성하였다.


메인 페이지에서 사진을 클릭하면 회원가입 때 넣었던 사진을 크게 볼 수 있다.


시연영상을 보면 메인페이지 밑에 항목들이 있다. 항목들은 페럴렉스 스크롤링을 이용하여 화면에 몰입을 줄 수 있도록 요소를 추가하여 작업 하였다.

메인페이지 화면 보기

비회원 메인 페이지

회원 메인 페이지

admin 메인 페이지

admin 메인 페이지

Join

• 항목의 값을 넣으면 다음 항목이 보이게 되고 다음 항목으로 넘어가게 되면 이전에 있었던 항목은 연하게 표현하였다.
• 이미지를 넣을 수 있다.
• 회원가입이 완료 되어 정보를 제출하게 되면, 회원가입시 기입한 정보를 welcome에서 확인할 수 있도록 페이지에서 구현할 수 있었다.

중복체크를 할 수 있도록 하였고, 중복체크가 이루어지지 않은 경우, 다음 항목으로 이동할 수 없도록 했다.


패스워드, 패스워드 확인을 이용하여 비밀번호에 오류가 생기지 않도록 유도하였다.
비밀번호가 일치합니다. / 비밀번호가 일치하지 않습니다. 로 출력이 된다.


이미지를 넣는 방법은 express의 외장모듈 multer 를 이용하였다

Join페이지 화면 보기

회원 가입 페이지

회원 가입 후 welcome 페이지

Login

• 아이디와 패스워드를 적을 수 있는 공간
• 처음 방문하는 사람을 위한 회원가입 버튼을 만든다.

Login페이지 화면 보기

로그인 페이지

Board

• 게시물의 모든 항목을 보여준다.
• board에는 list, write, view, modify 가 있어서, 게시물을 보고, 쓰고, 확인하고, 수정할 수 있다.
• 조회수를 구현하여 view페이지를 들어가면 조회수가 +1씩 된다.

페이징을 구현하여 한 페이지에 게시물이 10개가 넘어가면 페이지가 하나씩 생기며 각 페이지에 10개씩 보이게 된다.

작성자와 동일한 사람이 아니면 수정할 수 있는 기능은 막힌다.

Board페이지 화면 보기

Board list 페이지

Board write 페이지

Board view 페이지

Board view 페이지(다른 유저)

Profile

• 처음 회원가입을 했을 때 기입했던 내용을 볼 수 있다.
• 간단한 정보를 수정할 수 있다.
  
  

Profile페이지 화면 보기

Profile view 페이지

Profile modify 페이지

Admin

• user와 다른 페이지가 따로 있어서 모든 글에 접근 및 수정이 가능하고, 삭제까지 할 수 있다.
• 최초 회원가입을 하게 되면 admin의 승인이 있어야 로그인을 할 수 있으므로 모든 페이지의 접근이 막힌다.
  
  
  Admin 화면 보기

  
  
  Admin main 페이지
  
  

  
  
  Admin 회원 관리 페이지
  
  

  
  
  Admin board 페이지
  
  

  
  
  

---

 

Github  · 백종환 Send mail  · 장경호 Send mail