치료 마켓플레이스 구축: Next.js와 Firebase 활용
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *대상자**: React/Next.js 기초 지식을 가진 개발자
- *난이도**: 중급 (Firebase, Stream Chat, Shadcn UI 사용 경험 필요)
핵심 요약
- 기술 스택:
Next.js,Firebase(인증/데이터베이스),Stream Chat(실시간 채팅),Shadcn UI(UI 구성 요소) - 사용자 역할:
- Therapists: 전문 분야 등록, 예약 관리, 채팅/영상 상담, 리뷰 받기
- Clients: 치료사 검색, 예약, 1:1 상담, 리뷰 작성
- Firebase 설정:
Firestore,Storage,Authentication연동을 통해 백엔드 기능 구현
섹션별 세부 요약
1. 프로젝트 설정 및 의존성 설치
npx create-next-app therapy-app명령어로 Next.js 프로젝트 생성- Firebase, Stream Chat, Shadcn UI 등 의존성 설치 (
npm install firebase @stream-io/node-sdk ...) - Shadcn UI 구성 요소 라이브러리 설치 가이드 참조
2. Firebase 초기화 및 설정
lib/firebase.ts파일 생성:
- initializeApp, getFirestore, getStorage, getAuth 사용
- firebaseConfig 객체에 Firebase 프로젝트 설정 정보 입력
- Firebase Console에서 프로젝트 생성 후, Authentication, Firestore, Storage 기능 활성화
3. 사용자 인증 구현
lib/auth-functions.ts파일 생성:
- clientSignUp: 이메일/비밀번호로 사용자 생성, Firestore에 사용자 정보 저장
```typescript
export const clientSignUp = async (form: FormData) => {
const { name, email, password } = ...;
const { user } = await createUserWithEmailAndPassword(auth, email, password);
const docRef = doc(db, "clients", user.uid);
await setDoc(docRef, { name, email });
return { code: "auth/success", status: 201, user, message: "Acount created successfully! 🎉" };
}
```
- clientLogin: 이메일/비밀번호로 로그인, Firestore에서 사용자 정보 검증
- authLogout: auth.signOut()으로 로그아웃 처리
4. 치료사 계정 생성 구현
- therapistSignUp 함수:
- createUserWithEmailAndPassword로 계정 생성
- 치료사 프로필 이미지 업로드 (Firebase Storage 사용)
- therapists 컬렉션에 전문 분야, 자격, 소개 등 정보 저장
```typescript
export const therapistSignUp = async (form: FormData) => {
const userData = {
name: form.get("name") as string,
email: form.get("email") as string,
password: form.get("password") as string,
qualification: form.get("qualification") as string,
...
};
const { user } = await createUserWithEmailAndPassword(auth, userData.email, userData.password);
const imageRef = ref(storage, therapists/${user.uid}.jpg);
await uploadBytes(imageRef, userData.image);
const imageUrl = await getDownloadURL(imageRef);
const docRef = doc(db, "therapists", user.uid);
await setDoc(docRef, { ...userData, imageUrl });
return { code: "auth/success", status: 201, user, message: "Therapist account created!" };
}
```
결론
- 핵심 팁: Firebase 인증 및 Firestore 연동을 통해 사용자 관리 시스템 구축 후, Stream Chat과 React Video SDK를 활용한 실시간 채팅/영상 상담 기능 추가
- 실무 적용 예시: 치료사 프로필 이미지 업로드 및 Firestore 저장 시
uploadBytes와getDownloadURL사용 - 예제:
auth-functions.ts파일에서clientSignUp및therapistSignUp함수를 통해 사용자/치료사 계정 생성 로직 구현