기업협업 2주차 개인 선택 과제 - 병원 예약 시스템 구축

✅ 과제

<병원 예약 시스템 구축>

1. 해당 월에 예약 가능한 목록을 보여줍니다.
2. 예약자, 이름, 예약 시간, 예약 종류를 이용하여 예약합니다.
3. 중복 예약은 불가합니다.
4. 노쇼 예약자는 예약이 불가합니다.
5. 예약 번호나 예약자 이름으로 예약 목록 조회가 가능해야 합니다.

 

🗓 진행 기간

기간 : 2022.10.15 ~ 2022.10.19

 

 

🔗 레포 주소 및 배포 링크

• 깃헙 레포
• 배포 링크

 

🏗 프로젝트 파일 구조

• public/data: Mock 데이터 폴더
• src/pages/reservation: 예약 페이지 파일 폴더
• src/pages/inquiry: 예약 조회 페이지 파일 폴더
• src/utils: 함수 파일 폴더
• src/styles: 전역 스타일 폴더

 

🛠 적용 기술

• JavaScript
• React.js
  
  
• React 관련 라이브러리
  • react-router-dom
  • recoil

• 스타일링
  • styled-components
  • styled-reset

• 아이콘
  • react-icons

• 달력
  • react-datepicker
  • date-fns

• 통신, 배포
  • axios
  • gh-pages

 

✨ 구현 화면 및 기능

1️⃣ 메인 화면

 

메인 화면에서 버튼을 클릭하면 진료 예약이나 예약 조회 페이지로 이동할 수 있습니다.

마우스 호버시에 버튼이 붉은색으로 변합니다.

2️⃣ 예약 화면

 

예약하려는 날짜와 시간을 선택할 수 있습니다. 예약 가능한 일정만 선택할 수 있습니다.

날짜와 시간을 선택하면 개인 정보를 입력하는 페이지로 이동합니다.

 

이름과 전화번호는 필수로 입력하지 않으면 예약이 불가능합니다. 

 

예약 불가 리스트에 올라가 있는 예약자 이름과 전화번호는 예약이 불가능합니다.

예약이 완료되면 예약번호와 입력정보를 확인할 수 있습니다.

3️⃣ 조회 화면

 

예약자 이름으로 예약 내역을 조회할 수 있습니다. 

 

예약번호로 예약 내역을 조회할 수 있습니다. 

예약 내역이 없을 시 결과가 없다는 화면이 뜹니다. 

 

 

👍 소감

이전에는 작업을 계속 팀과제로 진행했어서 오랜만에 개인작업을 하니 자유롭고 좋았다. 또 gitmoji가 그리웠는데 오랜만에 쓰니 커밋이 예뻐져서 좋았다..👍⭐️ 처음 시작할 때 병원 예약 시스템을 고른 이유가 금방 할 수 있을 것 같아서 골랐는데 생각보다 시간이 오래 걸렸다. 백엔드가 없다 보니 예약되어있는 날짜를 보여주는데서 한 번, 최초 렌더 시에 선택된 날짜 state가 이상하게 들어오는데서 한 번, 이렇게 두 번의 문제 때문에 프로젝트 기간의 반절은 소요했다고 해도 과언이 아닐 정도로 시간을 썼던 것 같다.

 

가독성을 위해서 함수를 별도 분리했는데 오히려 코드가 지저분해지고 복잡해진 것 같아서 함수 분리를 하는게 꼭 가독성을 높이는데 도움이 되는 것은 아니라는 생각을 했다. 그리고 어떤 방식으로 기능을 구현하고 로직을 짤지를 생각하지 않고 진행하다가 생각하는 경향이 있는데 이번에는 그래서 구조를 여러 번 바꿨던 것 같다. 앞으로는 작업을 진행하기 전에 전체적인 구조에 대해서 생각하는 시간을 가지고 작업에 임해야겠다.

 

🤔새롭게 배운 것

- vite로 배포하기

vite 프로젝트 배포는 기존에 cra 프로젝트를 github pages로 배포하는 것과는 방법이 조금 달랐다. 배포하면서 동기들의 도움을 받았는데 아직도 방식이 이해가 잘 가지 않아서 시간을 들여 공부를 해봐야될 것 같다.

참고

 

- 계획을 세워서 진행하기

혼자 진행하다보니 회의를 하지 않아서 계획이 없었다. 진행되는 되는대로 해야지~ 하고 진행했더니 생각보다 막히는 문제에서 일정이 너무 많이 밀려서 앞으로는 혼자서도 계획을 세우고 진행해야겠다고 생각했다.