대학 밴드 동아리(graymood) 연습실 예약 웹사이트
이 프로젝트는 다음 카페의 게시글로 연습실을 예약할 때의 예약 현황의 낮은 가시성과 이용 방법이 직관적이지 않은 문제를 해결하기 위해를 사용자 친화적인 ui와 CRUD를 구현한 웹 애플리케이션입니다. 부가적으로 동아리원 외에 관리자 등급을 추가하여 부가적인 권한을 부여하였고, jwt를 이용하여 접속 코드를 알지 못하는 사람이 접속할 수 없도록 했습니다.
- 달력이나 에브리 타임의 주간 시간표 같은 인터페이스를 추가하여 예약이 있는 시간대를 사용자로 하여금 확인 시키고자 하였습니다.
- 예약 사항, 공지 사항(필독 사항)의 CRUD 기능과 접속 코드를 Update 하는 기능을 구현했습니다.
- jwt를 활용하여 보안을 강화하고 로그인하지 않은 상태에서 url로 직접 접속할 경우 로그인 페이지로 redirect 되도록 했습니다. 이에 더해 jwt가 유효한 상태라면 로그인 페이지로 접속하려고 할 때 자동으로 /notice페이지로 redirect 되도록 했습니다.
- 프론트엔드: Next.js, React.js, Material UI
- 백엔드: Next.js
- 데이터베이스: MongoDB
- 배포: AWS EC2, Nginx, pm2, Certbot
- 저장소 클론:
git clone https://github.com/junhyung8795/graymood-timetable.git - 의존성 설치:
npm install - .env파일에 NEXT_PUBLIC_MONGODB_URL, NEXTAUTH_URL, NEXTAUTH_SECRET 환경 변수를 추가해야합니다.
- 개발 서버 실행:
npm run build+npm run start
더 자세한 프로젝트 설명은 노션 링크에서 확인할 수 있습니다.
- 예약을 수정/삭제하려면 본인이 입력한 비밀번호를 먼저 확인해야 합니다.
- 올바른 비밀번호를 입력하면 이후 수정/삭제 화면이 열립니다.
- 비밀번호 입력 단계 없이 바로 수정/삭제 화면이 열립니다.
- 모든 예약에 대해 접근 가능하며, 공지사항 변경도 지원합니다.
- 간편 로그인 코드: 관리자 / 동아리원 분리
- 공지 관리(관리자 전용): 공지사항 수정, 삭제, 추가 가능
- 날짜·시간 선택 후 이름/용도/비밀번호 입력으로 예약 생성
- 주/월 캘린더 뷰에서 예약 현황 확인
- 예약 클릭 → 수정/삭제 가능
- 동아리원은 비밀번호 확인, 관리자는 바로 접근 가능