게시판 기능, 로그인 기능, 관리자 기능이 있는 웹페이지 제작

이번 포스팅에서는 2022.02.21 ~ 2022.02.25 한주 동안 진행한 간단한 토이 프로젝트에 대해 작성해보고자 한다. 해당 프로젝트는 게시판 기능이 있는 웹페이지를 제작하는 프로젝트였다. 회원가입한 사용자들만 이용 가능한 게시판이며 관리자 페이지를 추가하여 최고관리자가 사용자들을 관리할 수 있도록 하였다. 게시판 기능으로는 기본적인 CRUD에 좋아요, 조회수, 스크랩, 댓글 기능을 추가하였다.

🚀 Space concept Board web page 🚀

[게시판 기능을 포함한 우주 컨셉 웹페이지]

GitHub 주소 링크

---

Description [설명]

A web page that provides functions such as member registration, login, logout, withdrawl, profile edit, bulletin board (including writing, comments, likes, scrap, and number of views), super administrator(Change of membership level and suspension of use)

우주 컨셉을 기반으로 한 웹페이지.
회원가입, 로그인, 로그아웃, 회원프로필 수정, 회원탈퇴, 게시판 CRUD(글쓰기, 글보기, 글수정, 글삭제)
게시판 기능 : 댓글 작성 및 삭제, 좋아요, 스크랩, 조회수
프로필 페이지 : 회원정보 수정, 회원탈퇴, 작성글보기, 작성댓글보기, 스크랩보기 가능
최고 관리자 페이지 : 회원 등급 변경, 회원 이용 중지 가능

---

Enviorment [작업 환경]

macOS 와 Windows10 운영체제에서 git을 통한 공동작업

---

Browser support [브라우저 환경]

• Chrome 과 IE
  각각 최신버전 98에서 구동 확인 완료

---

How to use [사용법]

• npm install을 통해 패키지 다운로드
• etc 디렉토리에서 table.sql을 이용해 테이블 생성
• 자신의 데이터베이스에 맞는 .env 설정

---

게시판 미리보기

1. Main Page

2. Login/Join

• ID, PW, NAME, NICKNAME, GENDER, NUMBER, PHONENUMBER을 입력
• ID, NICKNAME은 중복확인기능 포함

3. Board

• 글 작성 기능
• 회원가입한 회원만 이용 가능

• 일반회원은 글보기 페이지에서 자신이 작성한 글만 수정 및 삭제 가능
• 관리자 회원 및 최고관리자는 모든 회원의 글을 수정 및 삭제 가능
• 댓글 작성 및 삭제, 조회수, 좋아요(왼쪽 하단), 스크랩 기능(오른쪽 하단) 포함

4. User Profile

• 프로필 수정, 회원탈퇴 기능 포함
• 작성글, 작성댓글, 스크랩 열람 가능

5. ADMIN

• localhost:3000/admin 으로 최고관리자 계정 접속
• 최고관리자는 회원리스트 보기 가능
• 최고관리자에게는 회원등급, 회원이용가능여부 변경 권한 부여

---

역할 분담

• 팀명 : SPACE-OJ3
• 팀장 : 오하은
• 팀원 : 장재원, 장주찬, 지정환

오하은(프론트엔드) - haeun9627@hanmail.net

• 전체 일정 조율
• 전체 웹페이지 디자인 구상
• 모든 페이지 html, css 총괄
• nunjucks를 활용해서 html, css 작업
• 오류 및 점검사항 체크

장재원(백엔드) - bitkunst23@gmail.com

• 커넥션 풀과 프로미스를 활용해서 데이터베이스와 연결 및 작업 진행
• 데이터베이스 테이블 스키마 제작
• 게시판 페이지 CRUD 작업
• 미들웨어를 활용해서 게시판 및 관리자 페이지 접근권한 체크 기능 제작
• 좋아요, 댓글, 스크랩, 조회수 기능 작업
• 관리자 페이지 CRUD 작업
• 회원등급변경, 회원이용가능여부 변경 기능 작업
• 프로필 페이지에서 작성글보기, 작성댓글보기, 스크랩보기 기능 작업
• 프론트엔드 서포트 (메인페이지 애니메이션 작업 -> html5 canvas 활용, 백그라운드 이미지 작업)

장주찬(백엔드) - jucham96@gmail.com

• 커넥션 풀과 프로미스를 활용해서 데이터베이스와 연결 및 작업 진행
• 사용자 로그인 기능 작업
• 사용자 회원가입 기능 작업
• 프론트엔드 서포트 (마우스 커서 디자인 및 백그라운드 이미지 작업)

지정환(백엔드) - cjh5701@hanmail.net

• 커넥션 풀과 프로미스를 활용해서 데이터베이스와 연결 및 작업 진행
• 사용자 프로필 정보 수정 작업
• 사용자 회원 탈퇴 기능 작업
• readme 파일 제작
• 프론트엔드 서포트 (프로필 페이지 애니메이션 효과, 전체 페이지 폰트 작업)

---

최신 버전 update 2022-02-27