1. 내 주변 포털 - Vue3 + Vuetify 3 + Firebase

Firebase Hosting으로 실제 웹 서비스 오픈까지 진행합니다.

서비스 오픈까지 개발을 진행하면서 계속 수정, 변경될 것입니다.

 

내 주변의 여러 상점이 함께 사용하는 '내 주변 포털'을 개발합니다.

'내 주변 포털'은 내 주변의 여러 상점에 예약을 하거나,

또는 온라인으로 테이크 아웃 주문할 수 있는 포털 웹 페이지입니다.

 

Vue, Vuetify, Firebase를 활용해 개발합니다.

이 조합은 빠른 개발, 실시간 기능, 확장성에 매우 적합합니다.

아래는 시스템 아키텍처와 주요 기능을 고려한 설계 및 개발 로드맵입니다.

---

🔧 기술 스택

• 프론트엔드: Vue 3 + Vuetify 3 + Vue Router + Pinia (상태관리)
• 백엔드/DB: Firebase
  • Authentication: 이메일/소셜 로그인
  • Firestore: 예약, 사용자, 업체 정보 저장
  • Cloud Functions (선택): 예약 승인, 알림 등 백엔드 로직
  • Firebase Storage: 프로필 사진, 업체 이미지 등

---

📌 핵심 기능 정의

1. 사용자 유형

• 관리자: 전체 포털 관리 (업체 등록 승인, 통계 보기 등)
• 업체: 예약 시간 슬롯 설정, 예약 관리, 고객 정보 열람
• 고객: 업체 선택 후 예약 요청, 예약 확인/취소

2. 기능 목록 (업체 중심)

기능	설명
업체 회원가입	업체 정보 등록, 이메일 인증
예약 슬롯 등록	날짜/시간/인원수 등 예약 가능한 시간 설정
예약 확인 및 승인	고객이 신청한 예약을 확인하고 승인/거절 가능
고객 관리	예약한 고객 리스트, 이력 열람
캘린더 뷰	Vuetify Calendar로 예약 현황 시각화
푸시 알림 (선택)	예약 승인/취소 시 사용자에게 알림

---

🗂️ Firestore 구조 예시

users (고객)
  └─ uid
      └─ name, email, role: 'customer'

vendors (업체)
  └─ vendorId
      └─ name, category, email, timeSlots[], ownerUid, createdAt

bookings
  └─ bookingId
      └─ vendorId, customerUid, date, time, status: 'pending'|'confirmed'|'canceled'

---

🛠️ 개발 순서 (WBS 예시)

1단계: 프로젝트 세팅

• Vue 3 + Vuetify 프로젝트 생성 (Vite 기반)
• Firebase 연동 (auth, firestore, storage)

2단계: 인증 및 역할 분리

• Firebase Auth 이메일 로그인 구현
• 로그인 후 사용자 유형 선택 및 role 저장

3단계: 업체 기능 구현

• 업체 정보 등록 페이지
• 예약 시간 슬롯 등록 및 수정 UI
• 예약 확인/승인/취소 기능
• 캘린더 기반 예약 현황 보기

4단계: 고객 기능 구현

• 업체 리스트 조회
• 예약 신청 UI
• 내 예약 목록 조회/취소 기능

5단계: 관리자 기능 (선택)

• 전체 업체 및 예약 통계
• 업체 승인 기능

6단계: 알림 기능 (선택)

• Firestore 트리거로 예약 승인 시 고객에게 알림 전송

---

🎨 UI 예시 페이지

• /login – 로그인/회원가입
• /dashboard – 사용자 타입에 따라 리디렉션
  • /vendor/home – 업체 대시보드
  • /customer/home – 고객 대시보드
• /vendor/schedule – 예약 슬롯 설정
• /vendor/bookings – 예약 관리
• /customer/vendors – 업체 검색 및 예약
• /customer/bookings – 내 예약 목록