HealthCare 의사 예약 관리 시스템 - Next.js 풀스택 프로젝트 (관리자 대시보드 승인/거절 SMS 알림 기능 포함)
요약
Next.js를 활용하여 환자 데이터, 예약 관리 및 알림 기능을 갖춘 종합적인 헬스케어 의사 예약 시스템을 구축한 프로젝트입니다. 사용자 친화적 인터페이스와 관리자 대시보드를 제공하며, Twilio로 SMS 알림, Appwrite로 파일 스토리지를 구현했습니다.
핵심 포인트
- Next.js 기반의 풀스택 웹 애플리케이션 예제
- 관리자 승인/거절 기능 및 자동 SMS 알림 통합 (Twilio)
- Appwrite를 활용한 간편한 파일 스토리지 구축 경험 제공
- Sentry를 이용한 성능 및 오류 모니터링 시스템 적용
HealthCare 의사 예약 관리 시스템 - Next.js FullStack 프로젝트 (관리자 대시보드 승인/거절 SMS 알림 기능 포함)
이 저장소는 의료 예약, 환자 데이터 및 알림 관리를 위한 Next.js 애플리케이션을 담고 있습니다. 환자를 위한 사용자 친화적인 인터페이스와 예약 관리를 위한 관리자 대시보드를 특징으로 하며, Twilio를 통해 SMS 알림 기능을 제공하고 Appwrite를 사용하여 파일 스토리지를 구현했습니다.
프로젝트 개요 (Project Overview)
이 시스템은 병원 및 클리닉에서 환자 데이터, 예약, 알림 등을 관리하기 위한 포괄적인 솔루션입니다. 다음 기능을 제공합니다:
- 사용자 등록 및 인증
- 환자 프로필 및 의료 상세 정보
- 의사 및 예약 관리
- 예약 통제를 위한 관리자 대시보드
- Twilio를 통한 자동 SMS 알림
- Appwrite를 사용한 파일 스토리지
- Sentry를 이용한 성능/오류 모니터링
- 모든 장치에 대한 반응형 디자인
실시간 데모 (Live-Demo): https://healthcare-arnob.vercel.app/
목차 (Table of Contents)
-
환자 등록 (Patient Registration): 사용자가 가입하고 의료 및 연락처 정보가 포함된 상세 프로필을 생성합니다.
-
예약 예약 (Appointment Booking): 환자는 의사와의 예약을 잡고, 시간 슬롯을 선택하며, 방문 사유를 제공합니다.
-
관리자 대시보드 (Admin Dashboard): 관리자는 예약을 관리하고, 확인하거나, 일정을 잡거나, 취소할 수 있으며, 환자 기록을 조회합니다.
-
SMS 알림 (SMS Notifications): 환자는 Twilio를 사용하여 예약 확정 SMS를 받습니다.
-
파일 업로드 (File Upload): Appwrite를 통해 파일(예: 환자 문서)을 안전하게 업로드하고 저장합니다.
-
성능 모니터링 (Performance Monitoring): 오류 및 성능 추적을 위해 Sentry가 통합되었습니다.
-
반응형 UI (Responsive UI): 데스크톱, 태블릿, 모바일에서 완벽하게 반응합니다.
-
폼 유효성 검사 (Form Validation): Zod와 react-hook-form을 사용한 강력한 유효성 검사를 구현했습니다.
-
현대적인 UI (Modern UI): Shadcn-UI와 TailwindCSS로 구축하여 깨끗하고 전문적인 외관을 갖추었습니다.
기술 스택 (Technology Stack)
- 프론트엔드 (Frontend): Next.js, React, TypeScript, TailwindCSS, Shadcn-UI
- 백엔드/서비스 (Backend/Services): Appwrite (데이터베이스 + 스토리지), Twilio (SMS), Sentry (모니터링)
- 유효성 검사 (Validation): Zod, react-hook-form
- 유틸리티 (Utilities): clsx, tailwind-merge, Radix UI, Lucide Icons
프로젝트 구조 (Project Structure)
프로젝트는 확장성과 유지보수성을 고려하여 구성되었습니다. 세부 내용은 다음과 같습니다:
/app # Next.js 앱 디렉토리 (페이지, 컴포넌트, 레이아웃)
/globals.css # 전역 스타일
/components # 재사용 가능한 UI 컴포넌트 (폼, 모달, 테이블, UI 요소)
...
예시 파일 구조:
tailwind.config.ts- TailwindCSS 설정types/index.d.ts- 폼 및 모델용 TypeScript 타입lib/utils.ts- 유틸리티 함수 (포맷팅, 암호화 등)lib/validation.ts- Zod 유효성 검사 스키마constants/index.ts- 앱 상수 (의사 목록, 식별 유형 등)
컴포넌트 및 API 워크스루 (Component & API Walkthrough)
주요 컴포넌트 (Main Components)
- PatientForm: 환자 등록 및 유효성 검사를 처리합니다. 스키마 유효성 검사에는 Zod를, 폼 상태 관리에는 react-hook-form을 사용합니다.
- AppointmentForm: 예약 일정을 잡고, 업데이트하며, 취소하는 기능을 수행합니다. 백엔드 작업은 Appwrite와 통합됩니다.
- RegisterForm: 의료 정보 및 연락처 세부 정보를 포함한 전체 환자 등록 폼입니다. 파일 업로드 기능도 포함되어 있습니다.
- AppointmentModal: Radix UI Dialog를 사용하여 예약/취소 일정을 위한 모달 창입니다.
- FileUploader: Appwrite Storage를 사용하여 환자 문서에 대한 안전한 파일 업로드를 제공합니다.
- StatusBadge, StatCard, SubmitButton: 상태 표시, 통계 수치, 그리고 액션을 위한 UI 요소들입니다.
- ThemeProvider: next-themes를 사용하여 다크/라이트 테마를 관리합니다.
API & Actions
- Appwrite Config (
lib/appwrite.config.ts): 데이터베이스, 사용자, 메시징 및 스토리지를 위한 중앙 집중식 Appwrite 클라이언트 설정입니다. - Actions (
lib/actions/): Appwrite SDK를 사용하여 환자 및 예약 CRUD(Create, Read, Update, Delete) 작업을 수행하는 함수들입니다. - Validation (
lib/validation.ts): 이메일/전화번호 고유성 검사를 포함한 폼 유효성 검사용 Zod 스키마입니다. - Constants (
constants/index.ts): 성별, 신분증 유형, 의사 이름 및 기본 폼 값을 담은 목록들입니다.
Routing
/- 환자 등록이 가능한 홈 페이지입니다./admin- 예약을 관리하는 관리자 대시보드입니다./patients/[userId]/register- 환자 등록 페이지입니다./patients/[userId]/new-appointment- 예약(Appointment)을 예약하는 페이지입니다./patients/[userId]/new-appointment/success- 예약 성공 후 표시되는 페이지입니다.
시작하기 (Getting Started)
설치 (Installation)
-
저장소 클론:
git clone https://github.com/arnobt78/HealthCare-Doctor-Appointment--NextJS.git
cd HealthCare-Doctor-Appointment--NextJS
2. **의존성 설치:**
```bash
npm install
# 또는
yarn install
앱 실행 (Running the App)
개발 서버를 시작합니다:
npm run dev
# 또는
yarn dev
...
http://localhost:3000으로 접속하여 앱을 확인하세요.
환경 변수 (Environment Variables)
프로젝트 루트에 .env.local 파일을 생성하고 다음 내용을 추가하세요:
# APPWRITE
NEXT_PUBLIC_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_PROJECT_ID=
...
플레이스홀더 값(placeholder values)을 실제 Appwrite 자격 증명으로 교체하세요.
Appwrite 설정 (Appwrite Setup)
- Appwrite에서 가입하세요.
- 프로젝트를 생성하고 프로젝트 ID와 API 키를 기록해 두세요.
- 세 개의 컬렉션(
patient,doctor,appointment)을 가진 데이터베이스를 생성하세요 (예:patient-db). patient의 속성(Attributes):email,phone,irerId,name,privacyConsent(필수)gender,birthDate,address,occupation,emergencyContactName,emergencyContactNumber,primaryPhysician,insuranceProvider,insurancePolicyNumber,allergies,currentMedication,familyMedicalHistory,pastMedicalHistory,identificationType,identificationNumber,identificationDocument
appointment의 속성:- 관계:
patient과의 다대일(Many-to-One) 관계 schedule,reason,note,primaryPhysician,status,cancellationReason
- 관계:
전체 세부 정보는 Appwrite Docs를 참조하세요.
Twilio 설정 (Twilio Setup)
- Twilio에서 가입하세요.
- **계정 SID(Account SID), 인증 토큰(Auth token), 발신자 번호(Sender number)**를 받으세요.
- 이 값들을 Appwrite 프로젝트의 Messaging > Twilio 통합에 추가하세요.
- Appwrite + Twilio 문서는 다음을 참조하세요: Appwrite Messaging & Twilio
Sentry 설정 (Sentry Setup)
오류 및 성능 모니터링을 위해:
- Sentry에서 가입하세요.
- 새 프로젝트를 생성하고 DSN(Data Source Name)을 받으세요.
기능별 워크스루 (Functional Walkthrough)
1. 환자 등록 (Register as a Patient)
신규 사용자는 등록하고 의료 및 연락처 세부 정보를 작성하며 개인 정보 보호 정책에 동의합니다. 등록 양식은 유효성 검사를 위해 Zod를, 상태 관리를 위해 react-hook-form을 사용합니다.
예시:
2. 예약 관리 (Book Appointments)
환자들은 이용 가능한 의사들을 확인하고, 시간대를 선택하며, 방문 사유를 제공합니다. 여러 개의 예약을 관리할 수 있습니다. 이 예약 양식은 백엔드 작업을 위해 Appwrite와 통합됩니다.
예시:
// components/forms/AppointmentForm.tsx
import { useForm } from "react-hook-form";
import { getAppointmentSchema } from "@/lib/validation";
...
3. 관리자 패널 (Admin Panel)
관리자는 다음 작업을 수행할 수 있습니다:
- 모든 예약 조회
- 예약 확정 또는 스케줄링
- 예약 취소 (SMS 알림 포함)
- 환자 기록 및 업로드된 문서 관리
예시:
// app/admin/page.tsx
import { StatCard } from "@/components/StatCard";
import { DataTable } from "@/components/table/DataTable";
...
4. 알림 (Notifications)
환자들은 Appwrite Messaging을 통해 Twilio 통합을 사용하여 예약 확정 성공 시 SMS 알림을 받습니다.
예시:
// lib/appwrite.config.ts
export const messaging = new sdk.Messaging(client);
// 메시지 전송을 트리거하여 SMS 알림을 보냅니다: messaging.send()
5. 성능 및 오류 추적 (Performance and Error Tracking)
Sentry 통합은 오류와 성능 병목 현상을 모니터링합니다. 모든 주요 페이지와 API 경로는 Sentry로 측정됩니다.
예시:
// sentry.client.config.ts
import * as Sentry from "@sentry/nextjs";
Sentry.init({ dsn: process.env.SENTRY_DSN });
6. 파일 업로드 (File Upload)
사용자들은 FileUploader 컴포넌트와 Appwrite Storage를 사용하여 문서(예: 보험, 신분증)를 안전하게 업로드할 수 있습니다.
예시:
// components/FileUploader.tsx
import { storage } from "@/lib/appwrite.config";
const uploadFile = async (file: File) => {
...
코드 예시 및 재사용성 (Code Examples & Reusability)
유틸리티 함수 (Utility Function)
// lib/utils.ts
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
...
환자 양식 유효성 검사 (Patient Form Validation)
// lib/validation.ts
export const UserFormValidation = z.object({
name: z.string().min(2).max(50),
...
컴포넌트 재사용 (Reusing Components)
- CustomFormField: 유효성 검사 및 사용자 정의 UI가 필요한 모든 양식 필드에 사용합니다.
- FileUploader: 모든 양식에서 파일을 업로드하는 데 사용합니다.
- StatusBadge: 예약, 환자 등 상태를 표시합니다.
API 사용 (API Usage)
// lib/appwrite.config.ts
const client = new sdk.Client();
client.setEndpoint(ENDPOINT!).setProject(NEXT_PUBLIC_PROJECT_ID!).setKey(NEXT_PUBLIC_API_KEY!);
...
문제 해결 및 자료 (Troubleshooting & Resources)
- Node.js 설치: Node.js 다운로드
- Appwrite 문서: Appwrite Documentation
- Twilio 문서: Twilio 메시징
- Sentry 문서: Sentry 모니터링
- YouTube 튜토리얼: Next.js 및 Appwrite를 사용한 HealthCare 앱
- Appwrite와 CORS 문제: CORS 오류 해결하기
키워드 (Keywords)
Next.js, HealthCare, 환자 관리(Patient Management), 예약(Appointment), Twilio, Appwrite, Sentry, TypeScript, TailwindCSS, Shadcn-UI, Zod, 관리자 대시보드(Admin Dashboard), 파일 업로드(File Upload), 반응형 디자인(Responsive Design), SMS 알림(SMS Notification), 의료 앱(Medical App), 풀 스택(Full Stack), 클리닉(Clinic), 병원(Hospital), 데이터베이스(Database), 양식 유효성 검사(Form Validation), React
결론 (Conclusion)
이 프로젝트는 헬스케어 관리 솔루션의 신속한 개발 및 배포를 위해 설계되었습니다. 모듈식 구조, 재사용 가능한 컴포넌트, 그리고 최신 클라우드 서비스와의 통합은 이를 클리닉, 병원, 그리고 확장 가능한 의료 애플리케이션을 구축하려는 개발자에게 이상적입니다.
즐거운 코딩 되세요! 🎉
AI 자동 생성 콘텐츠
본 콘텐츠는 개발 자료 GitHub · 505f08fd의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기