[TypeScript] 병원 예약 시스템 구현

💡 기업 과제 + 팀 프로젝트

---

프로젝트 개요

• 진행 기간 : 22.10.15 ~ 22.10.17 (3일)
• 과제 주관 : lululab
• 과제 목표 : 병원 예약 시스템 구축
• 팀 구성 : FE 3명
• 배포 : 병원예약시스템 demo

과제 및 구현 내용

1. 병원 예약 가능 목록 페이지
2. 예약 등록 페이지 (내가 맡은 역할)
   • 병원 예약 등록
   • 중복 예약 및 예약 불가능한 시간 구현
3. 예약 내역 조회 페이지
   • 예약 번호 또는 예약자로 목록 조회 구현

---

예약 등록 페이지

✅ useRegistration 훅

• 캘린더 날짜 클릭 시 예약 가능한 모달을 마운트
• 예약 불가능한 시간, 중복예약 불가하게 구현

/// useRegistration.ts
const handleReservation = (
    event: React.FormEvent<HTMLFormElement>,
    globalAtom: DefaultType[],
    selectDate: string,
    reserveHandler: () => void
  ) => {
    event.preventDefault();
    for (let i = 0; i < globalAtom.length; i++) {
      const { user_name, user_phone, booking_date, booking_time } =
        globalAtom[i];

      if (booking_date === selectDate && booking_time === time) {
        alert(`${time}에는 예약할 수 없습니다. \n다른 시간을 선택해 주세요.`);
        return;
      }
      if (user_name === values.name && user_phone === values.phone) {
        alert(`${values.name}님은 중복 예약입니다.`);
        return;
      }
    }
    const userInfo = {
      id: 220181,
      user_name: values.name,
      user_phone: values.phone,
      booking_date: selectDate,
      booking_time: time,
      categories: category,
    };
    setUser(prev => [...prev, userInfo]);
    alert(`${values.name}님 예약 완료되셨습니다!`);
    reserveHandler();
  };

✅ select - option 태그 커스텀

• 컴포넌트로 만들어 재사용성을 높임
• 커스텀이 불가능한 select, option 태그를 사용하지 않고 css 적용이 자유로운 div 태그로 구현

<SelectBox
  title="예약 종류"
  option={['진료', '검진', '기타']}
  handleCategory={handleCategory}
  category={category}
/>
<SelectBox
  title="시간 선택"
  option={TIME_DATA}
  handleTime={handleTime}
  time={time}
/>

• 옵션 리스트 중 하나를 클릭하는 이벤트가 발생하면 옵션 리스트들이 닫히고 옵션의 타이틀이 클릭한 옵션으로 바뀌게 함

const showOption = (event: React.MouseEvent<HTMLElement>) => {
    event.stopPropagation();
    event.preventDefault();

    const optionText = String(event.currentTarget.innerText);
    handleCategory && handleCategory(optionText);
    handleTime && handleTime(optionText);

    setToggle(!toggle);
  };

• OptionContent의 props로 isShow를 주어 true일 때, 옵션이 보이지 않고(none) false면 옵션이 보이게(block) 적용

<OptionContent isShow={!toggle}>
  ...옵션 리스트
</OptionContent>

//styled-components
const OptionContent = styled.div<{ isShow: boolean }>`
  display: ${props => (props.isShow ? 'none' : 'block')};
  width: 100%;
  border-radius: 4px;
  line-height: 45px;
  box-shadow: 0 10px 30px rgba(30, 30, 30, 0.1);
  background-color: ${({ theme }) => theme.colors.white};
`;

---

마무리

팀 프로젝트로 3일 동안 처음 접해보는 타입스크립트와 Recoil를 사용하여 병원예약시스템을 구현해 보았다. 헷갈려서 머리를 쥐어뜯었지만 새롭게 배워가는데 재미있었다. 좋은 팀원분들을 만나 많이 배울 수 있어서 고마웠고 더 열심히 공부해야겠다는 생각이 들었다😂