Skip to content

100space/Node-express-Project

 
 

Repository files navigation


환장의나라
환장의 나라





사용 기술




시연 영상

screenshot

‼️ 구현해야할 필수 기능

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

1. 메인페이지

  • 카테고리
    • Home
    • Join
    • Board
    • Profile
    • Admin

2. 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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 40.3%
  • JavaScript 32.6%
  • CSS 27.1%