제작 기간 : 23.02-03 (2개월)
개발 인원 : 1명 (개인 프로젝트)
플랫폼 : WEB
언어 : javascript, html, css
DB : Mysql
서버 : Node.js
중앙 동아리 소속 밴드부 SPIDERS의 합주 예약 시스템 페이지이다.
우리 밴드부는 한정된 공간으로 인해, 같은 시간대에 여러 팀 합주가 불가능하다. 따라서 일정 중복을 피하기 위해 매번 카카오톡으로 합주 시간을 확인해야하는 번거로움이 있었다.
이러한 불편함을 해소하기 위해 공유 구글 시트를 활용하여 일정을 공유하였지만, 여러 문제들이 발생하였다.
오류로 인해 작성한 일정이 사라지거나, 주기적으로 시트를 정리해야 했으며, 시간대 작성이 번거롭고 한 눈에 일정을 파악하기 어려웠다.
이러한 문제를 해결하기 위해 전용 웹 페이지를 개발하였다. 이 페이지를 통해 간편하게 일정을 확인하고 예약할 수 있으며, 일정을 파악하기에 용이하다.
- 시작 페이지
페이지에 접속 시, spiders의 로고가 보인다. 해당 화면은 어느 페이지를 들어가든, 상단에 위치해있다.
사진 속 '지금 예약하기' 버튼을 누를 시 -일정 등록하기- 페이지로 이동한다.
- 전체 일정 확인 (달력)
달력에는 예약된 일정이 등록되어있어, 전체 일정을 한 눈에 확인 가능하다.
달력의 특정 날짜를 선택하면, 해당 날짜에 등록된 합주 시간들을 더 자세히 확인할 수 있다.
- 일정 등록하기
원하는 날짜와 시간대를 선택하면, 자동으로 작성된다. 이어서 사용자명을 입력하고 확인 시, 해당 일정이 등록된다.
만약 같은 시간대에 이미 예약된 일정이 있다면, 일정을 재선택한다.
날짜 혹은 시간대를 잘못 선택 시, 재선택 버튼을 눌러 리셋시킬 수 있다.
- 일정 리스트 확인
사용자들이 등록한 모든 일정을 확인할 수 있다.
날짜별로 배열되어 있으며, 예약한 날짜가 지나면 배경색이 회색으로 바뀌며 맨 뒤로 순서가 변경된다.