-
프로젝트 내용
- 병원 예약시스템을 제작
- 예약이 가능한 일자를 선택하여, 예약을 진행하고 노쇼 방지를 위한 설계구축
- JavaScript
- React.js
- Vite
- Styled-component
- styled-components
- styled-reset
- date-fns
- react-datepicker
- react-icons
- swiper
- Node.JS를 다운받아 설치해주세요. vite를 사용하였기 때문에 최소 14.18 버전 이상이 요구됩니다.
https://nodejs.org/
- 리포지토리를 클론해주세요.
git clone https://github.com/tmdcjf152/pre-onboarding-lululab.git
3.dependencies를 설치해주세요.
npm install
- 다음 명령어를 이용해 Dev server를 실행시켜주세요.
npm run dev
-
브라우저에서 배포주소로 접속해주시면 됩니다.
[저작권] Adobe
- ✅ 프로젝트내 이미지는 모두 Adobe 에서 제공받았습니다.
병원예약시스템을 만들면서 웹으로 UI/UX를 구상해야할지 모바일 느낌으로 구상해야할지 고민을 하면서
요즘은 웹으로 예약하기 보단 모바일을 더 선호한다는 생각으로 모바일에 맞는 UI로 제작하였습니다.
기본적으로 큰 화면또한 반응형을 지원하지만 기본사이즈는 아이패드미니(768px)부터 아이폰se(375px)에서
앱을 이용하는것이 가장 이상적인 크기라고 볼수 있습니다.
테블릿 및 모바일에 좀더 최적화된 화면이지만 웹에서 접근하더라도 이상없이 예약시스템을 이용할 수 있도록
반응형 작업을 하였습니다.
로그인 정보가 있으면 예약이 가능한 페이지로 이동시켜주고
만약 로그인정보가 없다면 로그인페이지로 이동시켜주는 로직으로 구성하였습니다.
input값으로 이름을 받으면 그 이름을 sectionStorage에 저장하고
그이름을 Token처럼 이용하여 로그인 기능을 구현하였습니다.
✅ 이름과 비밀번호는 임의로 작성해주시면 로그인이 가능합니다.
예약하기 버튼을 클릭시 예약이 가능한 병원 리스트가 뜨며 예약하기 버튼을 클릭시 손쉽게 예약을 할 수 있습니다.
만약 현재 예약된 병원을 다시 예약하게 된다면 "이미 예약이 완료된 병원입니다" 라는 문구를 출력하고 홈으로 이동합니다.
메인화면에 예약 취소하기 버튼을 클릭시 예약정보가 삭제되고 중복예약으로 예약이 불가능했던 병원도 예약이 가능해집니다.
병원에서 해당 고객을 블랙리스트 처리하는 시스템처럼 구현을 하였으며
목데이터 안에 블랙리스트 처리를 한것처럼 block: 을 true/false로 값을 저장해 주었습니다.
만약 block이 true인 병원을 예약하려고하면 예약을 할수 없다는 문구와 함께 예약을 할 수 없게됩니다.
마이페이지에서 로그아웃 버튼을 클릭시 로그아웃이 되고 사용자 정보가 제거됩니다.