단일 채팅 프로그램
sequenceDiagram
participant A as User A - Guest
participant F as React Frontend
participant J as Auth JWT
participant R as RLS Policy
participant P as PostgreSQL
participant E as Realtime Engine
participant B as User B - Host
rect rgb(70, 70, 70)
Note over A,B: 1단계 - 채팅방 생성
A->>F: 숙소 상세에서 메시지 보내기 클릭
F->>P: getOrCreateChatRoom(listingId, guestId, hostId)
P-->>F: chat_room record 반환
end
rect rgb(70, 70, 70)
Note over A,B: 2단계 - 메시지 전송
A->>F: 메시지 입력 후 Enter
F->>J: POST messages with Bearer JWT
J->>R: auth.uid() = sender_id 검증
R->>R: EXISTS chat_rooms WHERE guest_id OR host_id = auth.uid()
R->>P: INSERT message
end
rect rgb(70, 70, 70)
Note over A,B: 3단계 - 실시간 전달
P->>E: WAL 변경 감지 via supabase_realtime publication
E->>F: WebSocket push to channel room-xxx
F->>F: setQueryData 중복 ID 체크
F->>A: UI 업데이트 - 내 메시지 표시
E->>B: WebSocket push to channel room-xxx
B->>B: UI 업데이트 - 상대 메시지 표시
end
요약
- Supabase의 RLS + Realtime을 활용한 채팅방 구조
- RLS → 보안 (본인만 메시지 전송 가능, 채팅창 멤버만 접근)
- Realtime → WebSocket 기반 양방향 실시간 메시지 전달
graph TB
subgraph Browser["Browser - React SPA"]
direction TB
Router["React Router<br/>/ /auth /listing/:id /chat /post"]
AuthCtx["AuthContext<br/>Session + User 상태 관리"]
RQ["React Query<br/>서버 상태 캐싱 + 자동 재요청"]
Pages["Pages<br/>Index / ListingDetail / ChatPage / PostPage / AuthPage"]
Components["Components<br/>Header / CategoryBar / ListingCard / ChatDrawer"]
APILayer["api.ts<br/>Supabase SDK 호출 추상화"]
end
subgraph Cloud["Lovable Cloud Backend"]
direction TB
AUTH["Auth Service<br/>JWT 발급 + 이메일 인증"]
PG["PostgreSQL"]
RLS_ENGINE["RLS Engine<br/>auth.uid 기반 행 수준 보안"]
REALTIME["Realtime Engine<br/>WAL 감지 + WebSocket"]
STORAGE["Storage<br/>이미지 등 파일 관리"]
EDGE["Edge Functions<br/>서버리스 로직"]
TRIGGERS["DB Triggers<br/>handle_new_user<br/>update_updated_at"]
end
Router --> Pages
Pages --> AuthCtx
Pages --> RQ
Pages --> Components
RQ --> APILayer
APILayer -->|"supabase-js SDK<br/>REST + WebSocket"| AUTH
AUTH -->|"JWT 검증"| RLS_ENGINE
RLS_ENGINE --> PG
PG --> TRIGGERS
PG -->|"WAL 변경 이벤트"| REALTIME
REALTIME -->|"WebSocket push"| RQ
- 인증 부분
flowchart TB
subgraph Security["보안 아키텍처"]
JWT["JWT Token<br/>모든 요청에 Bearer 헤더"]
RLS["RLS Policies"]
TRIGGER["handle_new_user<br/>SECURITY DEFINER"]
JWT --> RLS
RLS --> R1["listings: 누구나 SELECT<br/>본인만 INSERT"]
RLS --> R2["likes: 본인 user_id만 INSERT/DELETE"]
RLS --> R3["chat_rooms: guest_id 또는 host_id가<br/>auth.uid인 경우만 접근"]
RLS --> R4["messages: 본인 채팅방 메시지만<br/>SELECT/INSERT"]
TRIGGER --> R5["auth.users INSERT 시<br/>자동 profiles 생성"]
end
ai가 추천하는 기능
현재 앱 구조를 기반으로 추가할 만한 기능 목록입니다:
🔍 검색 & 탐색
- 숙소 검색 필터 — 가격 범위, 위치, 인원수, 편의시설 등 조건 필터링
- 지도 기반 탐색 — 숙소 위치를 지도에 표시 (Mapbox/Google Maps)
- 카테고리별 필터링 — CategoryBar 클릭 시 실제 태그 기반 필터 동작
🏠 숙소 관련
- 이미지 다중 업로드 — 숙소당 여러 장의 사진 등록 + 갤러리 뷰
- 숙소 수정/삭제 — 본인이 등록한 숙소 관리
- 리뷰 & 별점 — 숙소별 리뷰 작성 및 평균 평점 표시
- 예약 시스템 — 날짜 선택 + 예약 요청 + 승인/거절
👤 사용자
- 프로필 페이지 — 프로필 사진, 자기소개 수정, 내 숙소/리뷰 목록
- 소셜 로그인 — Google/카카오 로그인
- 찜 목록 페이지 — 좋아요 누른 숙소 모아보기
💬 채팅
- 읽음 표시 — 메시지 읽음/안읽음 상태
- 안 읽은 메시지 알림 뱃지 — 헤더 채팅 아이콘에 미읽 수 표시
- 마지막 메시지 미리보기 — 채팅 목록에서 최근 메시지 표시
📊 기타
- 알림 시스템 — 새 메시지, 예약 요청 등 푸시 알림
- 다국어 지원 — 한국어/영어 전환
- 다크모드 토글 — 라이트/다크 테마 전환 UI
- 관리자 대시보드 — 전체 숙소/유저 통계, 신고 관리