Main 페이지 • Join 페이지 • Login 페이지 • Board 페이지 • Profile 페이지
필수 기능(삼각형 눌러서 펼쳐보기)
- 카테고리
- Home
- Join
- Board
- Profile
- Admin
- 항목
- 아이디
- 패스워드
- 이름
- 별명
- 생년월일
- 성별
- 전화번호
- 핸드폰번호
- 회원가입시 등급이 있다.
- level 3: 최고관리자
- level 2 : 관리자
- level 1 : 사용자
- level 0 : 승인 전 단계
- Welcome페이지 :회원가입 내용을 확인할 수 있다.
- 아이디
- 이름
- 성별
- 전화번호
- 핸드폰번호
- 로그인은 아이디와 패스워드 일치여부
- 테이블 항목
- 순번
- 제목
- 작성자 [회원닉네임]
- 작성일
- 조회수 회원만 들어올 수 있는 페이지
- 회원은
- 모든글 리스트보기
- 모든 작성 글 보기
- 글보기화면 볼경우 해당 글의 조회수를 +1
- 새로운 글쓰기
- 자신이 작성한 글 수정하기
- 자신의 글만 삭제 가능
- 관리자는
- 모든 글 수정 가능
- 모든 글 삭제 가능
로그인한 회원은 프로필 메뉴를 클릭할 수 있다.'
- 항목
- 아이디
- 이름
- 성별
- 전화번호
- 핸드폰 번호
- 최고관리자 전용 회원
- 최고관리자는 http://localhost/admin 강제로 이동시 관리자 페이지가 보입니다.
- 최고관리자는 회원리스트에서 level 0~2 해당되는 모든 사람의 리스트를 볼수있습니다. 최고관리자는 회원리스트에서 회원보기가 가능합니다. 최고관리자는 회원리스트에서 레벨을 수정할수있습니다. 최고관리자는 회원을 이용 중지 할 수 있습니다.
-
비회원 메인 페이지는 로그인을 하지 않은 상태에서 제일 먼저 사이트로 들어오면 보이는 페이지
-
로그인을 한 상태에서는 회원용 메인페이지
-
admin이라는 최고관리자 계정은 admin 메인 페이지를 보여준다.
각 페이지는 각각 다른 페이지로 구성하였다.
메인 페이지에서 사진을 클릭하면 회원가입 때 넣었던 사진을 크게 볼 수 있다.
시연영상을 보면 메인페이지 밑에 항목들이 있다. 항목들은페럴렉스 스크롤링을 이용하여 화면에 몰입을 줄 수 있도록 요소를 추가하여 작업 하였다.
-
항목의 값을 넣으면 다음 항목이 보이게 되고 다음 항목으로 넘어가게 되면 이전에 있었던 항목은 연하게 표현하였다.
-
이미지를 넣을 수 있다.
-
회원가입이 완료 되어 정보를 제출하게 되면, 회원가입시 기입한 정보를 welcome에서 확인할 수 있도록 페이지에서 구현할 수 있었다.
중복체크를 할 수 있도록 하였고, 중복체크가 이루어지지 않은 경우, 다음 항목으로 이동할 수 없도록 했다.
패스워드, 패스워드 확인을 이용하여 비밀번호에 오류가 생기지 않도록 유도하였다.
비밀번호가 일치합니다. / 비밀번호가 일치하지 않습니다. 로 출력이 된다.
이미지를 넣는 방법은 express의 외장모듈multer를 이용하였다
- 아이디와 패스워드를 적을 수 있는 공간
- 처음 방문하는 사람을 위한 회원가입 버튼을 만든다.
- 게시물의 모든 항목을 보여준다.
- board에는 list, write, view, modify 가 있어서, 게시물을 보고, 쓰고, 확인하고, 수정할 수 있다.
- 조회수를 구현하여 view페이지를 들어가면 조회수가 +1씩 된다.
페이징을 구현하여 한 페이지에 게시물이 10개가 넘어가면 페이지가 하나씩 생기며 각 페이지에 10개씩 보이게 된다.
작성자와 동일한 사람이 아니면 수정할 수 있는 기능은 막힌다.
- 처음 회원가입을 했을 때 기입했던 내용을 볼 수 있다.
- 간단한 정보를 수정할 수 있다.
- user와 다른 페이지가 따로 있어서 모든 글에 접근 및 수정이 가능하고, 삭제까지 할 수 있다.
- 최초 회원가입을 하게 되면 admin의 승인이 있어야 로그인을 할 수 있으므로 모든 페이지의 접근이 막힌다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent