연세대학교 공간대관시스템의 불편함을 해소하고자 시작된 프로젝트입니다.
학회 YBIGTA에서 주로 사용하는 강의실들의 대관 현황 조회, 대관 예약 기능을 제공할 예정입니다.
Chromium 브라우저에 vite로 빌드한 React 웹페이지를 렌더링 합니다.
Chromium 제어 라이브러리인 Puppeteer를 사용해 대관현황의 크롤링과 대관 예약을 진행합니다.
pmpn workspace를 이용해 프로젝트를 관리하고 있습니다.
학회원들이 지속적으로 사용할 만큼 편리한 UX를 갖춘 앱을 만드는 것이 목표입니다.
주1회 정기회의를 통해 개발 진행상황을 공유하고, 기획을 수정하고 있습니다.
불편한 UX의 기존 공간대관시스템
좋은 프로젝트를 만들기 위해 저희 팀이 정한 목표는 다음과 같습니다.
해당 목표 하에, 다음과 같이 프로젝트를 진행하고 있습니다.
실제 Pull Request
React Hook Form 활용한 로그인 구현
formState를 활용해 로그인 성공, 실패, 로딩 세 가지 케이스를 처리해주었습니다.
또한 입력값에 대한 validation 기능을 구현했습니다. 유효하지 않은 값일 경우 폼 제출이 이뤄지지 않습니다.
Recoil을 활용한 페이지별 인가(Authorization)
로그인 여부를 전역 상태로 관리합니다. Recoil의 atom 객체를 사용합니다. useEffect 훅 내에서 atom 값을 확인해, 각 페이지에 대한 비정상적인 접근을 방지합니다.
세션스토리지를 활용해 새로고침 시에도 로그인 상태 유지
상태관리 라이브러리 특성 상 페이지 새로고침 시 상태값이 초기화됩니다. 로그인 여부를 세션스토리지에 저장하고 atom effects를 사용해 세션스토리지 값을 atom에 넣어줍니다.
로컬스토리지가 아닌 세션스토리지를 사용한 이유는, puppeteer를 사용하는 앱의 특성 상 사용자가 앱을 껐다 킬 경우 무조건 새로 로그인을 해야하기 때문입니다. (앱 종료 시 puppeteer 브라우저 또한 종료됨) 따라서 탭 종료 시 데이터가 사라지는 세션스토리지가 더 적합하다고 판단했습니다.
현재 개발 중에 있습니다. 아래 이미지는 대략적으로 구상한 유저 시나리오 이미지입니다. Ant Design에서 제공하는 컴포넌트를 참고했습니다.
