여행톡 스토리보드

[화면 개요 및 목적]

회원이 앱을 열면 가장 먼저 보는 화면입니다. 실시간 인기 여행지 랭킹(LIVE)과 배너, 카테고리 게시판 진입점을 한 화면에서 보여줘 "이미 사람이 활발히 쓰는 커뮤니티"라는 인상을 즉시 줍니다. 이 화면은 05 데모의 Step 1(실시간 현황 갱신 체험)에서 그대로 재현됩니다.

[핵심 기능 로직]

제안서 역제안 ①(서버리스 실시간 처리)의 증거 화면입니다. Supabase Realtime 구독으로 랭킹 카드의 언급 수·순위가 별도 소켓 서버 없이 갱신되며, 갱신 시각과 LIVE 표시가 실제로 살아있는 데이터임을 보여줍니다.

• 실시간 랭킹 갱신
  Supabase Realtime · Postgres Changes
• 하나의 화면에서 매끄러운 스크롤
  React Native (Expo) FlatList

[화면 개요 및 목적]

카테고리별로 글을 모아 보여주는 목록 화면입니다. 여행후기·맛집·코스공유 등 카테고리를 칩으로 전환하며 사진 유무가 섞인 실제 커뮤니티 게시판처럼 구성했습니다.

[핵심 기능 로직]

역제안 ②(확장형 카테고리 구조)의 증거입니다. 카테고리가 코드가 아닌 데이터(테이블 행)로 관리되어, 새 카테고리가 필요해도 화면을 다시 만들 필요 없이 데이터만 추가하면 됩니다.

• 카테고리 확장
  Supabase Postgres 관계형 테이블 설계
• 끊김 없는 목록 탐색
  무한 스크롤 페이지네이션(offset 기반)

[화면 개요 및 목적]

사진 뷰어, 좋아요, 댓글까지 "실제 동작하는 모습"(제안서 show 항목 1번)을 보여주는 화면입니다. 좋아요를 누른 댓글은 색이 채워지고, 작성자 댓글에는 뱃지가 붙어 상태 차이가 눈에 보입니다.

[핵심 기능 로직]

댓글·좋아요는 Supabase Postgres에 저장되고 Realtime으로 다른 사용자 화면에도 즉시 반영됩니다. 05 데모 Step 2(댓글 작성 → 실시간 반영)에서 이 화면이 그대로 쓰입니다.

• 댓글 실시간 반영
  Supabase Realtime
• 원본 화질 사진 보관
  Supabase Storage

[화면 개요 및 목적]

ID/PW 로그인, 회원가입, 비밀번호 찾기를 한 화면 흐름으로 처리합니다. 입력 필드는 포커스·에러 상태를 색으로 구분해 실제 서비스처럼 즉각적인 피드백을 줍니다.

[핵심 기능 로직]

brief.json 필수 요구 R1(회원 시스템)을 충족하는 화면입니다. Supabase Auth의 이메일/비밀번호 방식을 그대로 사용해 별도 인증 서버 구축 없이 안전하게 처리합니다.

• 안전한 로그인·비밀번호 재설정
  Supabase Auth
• 로그인 상태 안전 보관
  React Native Secure Store

[화면 개요 및 목적]

여행톡 공식 유튜브 채널의 영상을 앱 밖으로 나가지 않고 시청하는 화면입니다. 최근 업로드 영상엔 NEW 뱃지를 붙여 최신성을 강조합니다.

[핵심 기능 로직]

brief.json 요구 R4(유튜브 채널/영상 연동)를 구현 아키텍처(Implementation 슬라이드)에 맞춰 증명한 화면입니다.

• 이탈 없는 인앱 영상 재생
  react-native-youtube-iframe
• 채널 최신 영상 자동 동기화
  YouTube Data API

[화면 개요 및 목적]

목록·상세와는 다른 입력 전용 뼈대로, 카테고리 선택부터 사진 다중 첨부, 위치 태그까지 실제 작성 흐름을 보여줍니다.

[핵심 기능 로직]

brief.json 핵심 요구 R2(글/사진 작성)의 입력 단계를 증명합니다. 사진은 Supabase Storage에 업로드된 뒤 게시글 레코드에 URL로 연결됩니다.

• 여러 장 사진 동시 업로드
  Supabase Storage
• 갤러리 다중 선택
  Expo Image Picker