[모각코] 예약하기 및 예약확인 페이지 구현

앞서 로그인 및 회원가입 페이지를 만들었었습니다.

이번엔 예약하기 및 예약확인 페이지를 구현해보겠습니다.

폴더 및 파일 구조

<의료기관 정보 리스트>

의료기관과 관련된 필요한 정보들을 볼 수 있도록 간단하게 구현했습니다.

 

<예약하기 페이지>

Reactjs에서 제공하는 react-datepicker를 활용해서 달력을 구현했습니다.

이곳에는 달력으로 날짜 선택 기능만 사용했지만 사이트를 참고하면 시간과 날짜 한번에 선택할 수도 있고, 특정 날짜 범위를 선택할 수도 있으니 참고해서 활용해보시면 좋을것 같습니다.

 

<예약 확인 페이지>

예약이 잘 되었는지 확인할 수 있는 페이지입니다.

지금은 직접 타이핑해서 정보를 입력했지만 추후엔 DB에서 해당 사용자의 정보를 조회해서 예약한 의료기관과 예약시간등을 불러와서 render할 생각입니다.

 

참조

https://zkim0115.tistory.com/1581 이모지 활용법