포트폴리오
웹TOVLAB 자체 구현 ShowcaseFEATURED
CareSlot 예약·접수 흐름 Showcase
진료 항목·날짜·시간을 고르는 예약 요청 UI와, 접수 상태를 분류·변경하는 데스크 UI를 구현한 TOVLAB 자체 제작 Showcase입니다. 예약자·일정 정보는 포트폴리오 시연용 fixture입니다.
프로젝트 화면
PC 화면
2모바일 웹
1주요 기능
진료 항목 선택날짜·시간 선택예약 요청 UI접수 상태 필터상태 변경 선택 UI반응형 화면
구축 내용
실제 개발 범위에 포함된 주요 작업입니다.
주요 구현 범위
- 진료 항목·날짜·시간을 선택하는 예약 요청 화면
- 예약 상태를 필터링하고 변경 값을 선택하는 접수 데스크
- 모바일 예약 요청 레이아웃과 테마 전환
기술 스택
Next.js 16 (App Router)React 19TypeScriptTailwind CSS 4React Context APIuseReducerlocalStorageESLint 9
작업 배경과 확인한 문제
- 사용자가 현재 상태와 다음 조치를 확인할 수 있도록 화면을 구성했습니다.
- 화면에 보이는 값은 포트폴리오 시연용 fixture로 분리했습니다.
진행 결과
- 이 항목은 TOVLAB 자체 구현 Showcase입니다. 이미지에 보이는 항목과 수치는 UI와 상태 흐름을 확인하기 위한 포트폴리오 fixture입니다.
우선 적용 범위
- 진료 항목 선택
- 날짜·시간 선택
- 예약 요청 UI
- 접수 상태 필터
이후 확장 방향
- 실제 예약 저장과 본인 인증
- 기관별 진료 일정 연동
- 알림 발송과 개인정보 처리 절차
유사하게 적용할 수 있는 경우
- 상태 확인과 다음 조치 UI가 필요한 업무 화면
- 필터·선택·검토 단계를 가진 웹 서비스
상담 전에 정리하면 좋은 내용
- 확인할 상태와 다음 조치 규칙
- 실제 데이터·권한·연동의 범위
- 모바일에서 우선할 업무 흐름