🦩 Planmingo

🔗Planmingo 배포 링크

공동 여행 계획 서비스 : React + TypeScript + Supabase 기반의 실시간 협업 여행 플래너

---

✨서비스 소개

Planmingo는 친구, 가족, 동아리 등 여러 명이 함께 여행을 계획하고 관리할 수 있는 플랫폼입니다. 채팅방, 엑셀, 메모장 등 여러 도구에 흩어진 여행 계획을 하나의 서비스에서 일정·예산·앨범까지 통합 관리할 수 있습니다.

---

👯‍♀️ 팀원 소개

김윤지

백효영

이소민

최정은

---

🚀 기술 스택

🧩 Frontend

🗃 State & Realtime

☁ Infra & Deploy

---

📂 프로젝트 구조

프로젝트 구조

project-root/
├─ public/                     # 정적 리소스 (favicon...)
│
├─ src/
│  ├─ assets/                  # 이미지, 아이콘, 폰트 등
│  │   └─ icons/
│  │
│  ├─ components/              # 재사용 가능한 UI 컴포넌트
│  │   └─ common/              # 버튼, 사이드바, alert 등 공용 UI
│  │
│  ├─ lib/                     # 외부 라이브러리 초기화 & 유틸
│  │   └─ supabase.ts          # Supabase 클라이언트
│  │
│  ├─ pages/                   # 라우트 단위 페이지
│  │   ├─ Album/
│  │   ├─ Auth/
│  │   ├─ Budget/
│  │   ├─ DashBoard/
│  │   ├─ Group/
│  │   └─ Home /
│  │
│  ├─ router/
│  │
│  ├─ stores/                  # Zustand 전역 상태
│  │
│  ├─ styles/                  # 전역 스타일 및 Tailwind 확장
│  │   └─ globals.css
│  │
│  ├─ types/                   # 전역 타입 정의
│  │
│  ├─ App.tsx                  # 라우팅 및 전체 앱 구조
│  ├─ HomeLayout.tsx           # 홈 페이지 전용 레이아웃
│  ├─ main.tsx                 # 진입점
│
├─ .env                        # 환경변수 (Supabase URL/KEY 등)

---

🖥️ 핵심 기능

🔑 그룹 참여 구글 소셜 로그인 초대 링크로 그룹 참여 그룹 정보 관리 (이름, 여행 날짜, 썸네일) 그룹 삭제 (Owner 전용)	🗓️ 일정 관리 날짜별 일정 표시 지도에서 일정 추가 드래그 앤 드롭으로 순서 변경 공동 편집 (실시간 반영)
🗺️ 지도 Google Maps API 연동 장소 검색 (이름, 주소, 평점) 일정 마커 + InfoWindow 맵 클릭 시 일정 추가	💰 예산 관리 카테고리별 내역 CRUD 개인별 자동 정산 카테고리별 통계 그래프
📸 앨범 사진 추가 / 삭제 (드래그 앤 드롭) 가상화 & 무한 스크롤 사진 변경 시 실시간 알림 이미지 최적화 (browser-image-compression)