아이 동반 외출 코스 스토리보드

[화면 개요 및 목적]

"체험 프로그램을 고르면 주변 유아 동반 가능 식당·카페가 지도에 함께 뜨는 흐름"(제안서 show 항목 1번)을 그대로 증명하는 대표 화면입니다. 왼쪽에서 코스를 짜고 오른쪽 지도에서 바로 위치를 확인합니다.

[핵심 기능 로직]

체험 프로그램을 선택하면 반경 내 유아 동반 가능 식당·카페가 지도에 자동으로 추천 마커로 뜹니다. 왼쪽 리스트는 드래그로 순서를 바꿀 수 있고, 바뀐 순서는 지도 번호 마커에도 즉시 반영됩니다.

• 체험 선택 즉시 주변 장소 표시
  카카오맵 API · 카카오 로컬 검색
• 드래그로 순서 자유롭게 재배치
  React dnd-kit

[화면 개요 및 목적]

R1(소셜 로그인·마이페이지)을 다루는 화면입니다. 서비스 진입점이자 저장한 코스를 다시 찾는 곳으로, 회원가입 마찰을 최소화하는 것이 목적입니다.

[핵심 기능 로직]

카카오·네이버 OAuth로 이메일·비밀번호 입력 없이 가입이 끝납니다. 저장한 코스는 상태(예약중/완료)별로 카드에 표시되어 다시 이어서 관리할 수 있습니다.

• 간편 가입 3초 완료
  카카오·네이버 OAuth SDK
• 내 코스 언제든 다시 확인
  PostgreSQL 사용자-코스 테이블

[화면 개요 및 목적]

R2(지도 상세 — 유아 편의시설)를 깊이 있게 보여주는 화면입니다. 부모가 실제로 궁금해하는 주차·아기의자·수유실 정보를 스크롤 없이 바로 보여줘야 신뢰를 줍니다.

[핵심 기능 로직]

편의시설 아이콘 그리드를 화면 상단에 배치해 있음/없음을 색으로 즉시 구분합니다. 여기서 "코스에 추가"를 누르면 S1(코스 빌더)의 리스트·지도에 바로 반영됩니다.

• 유아 편의시설 한눈에 확인
  장소 메타데이터 스키마 설계
• 실시간 영업 상태 표시
  영업시간 규칙 엔진

[화면 개요 및 목적]

"방문 순서를 바꿔가며 하루 코스를 짜고 저장·카카오톡 공유까지 이어지는 흐름"(제안서 show 항목 2번)을 완결하는 화면입니다. R3의 저장·공유 두 기능을 한 화면에서 증명합니다.

[핵심 기능 로직]

저장 즉시 카카오톡 공유 미리보기를 실제 말풍선 형태로 보여줘 "공유하면 이렇게 보인다"를 바로 확인시킵니다. 조회수로 확산 정도를 가늠할 수 있습니다.

• 카톡 공유로 자연스러운 확산
  Kakao SDK 공유하기(Share) API
• 공유 클릭률로 확산력 측정
  공유 이벤트 로깅

[화면 개요 및 목적]

R5(예약 신청 — 현장결제·상태관리)의 사용자 쪽 화면입니다. 결제 없이 신청만 한다는 것과, 상태가 관리자에 의해 바뀐다는 것을 명확히 보여줍니다.

[핵심 기능 로직]

예약이 접수되면 상태값은 신청→확정/거절→완료 순으로 바뀝니다. 이 상태값은 S8(관리자 예약 상태관리)에서 그대로 이어받아 처리됩니다.

• 결제 연동 없이 신청만으로 완결
  예약 상태값(신청/확정/거절/완료) 설계
• 이후 인앱결제 확장 대비
  상태머신 재사용 가능 스키마

[화면 개요 및 목적]

R4(리뷰)를 다루는 화면입니다. 실제 이용 후기가 쌓이는 모습이 서비스 신뢰도를 증명하고, 다음 부모의 코스 선택에 도움을 줍니다.

[핵심 기능 로직]

별점 분포와 태그(#아기의자있어요)로 유아 동반 관점의 정보가 자연스럽게 드러납니다. 리뷰 작성자명은 마스킹 처리해 개인정보를 보호합니다.

• 포토리뷰로 신뢰도 확보
  Supabase Storage 이미지 업로드
• 리뷰 평점 자동 집계
  PostgreSQL 집계 쿼리

[화면 개요 및 목적]

"비개발자인 대표가 관리자 화면에서 장소·프로그램을 직접 등록·운영하는 모습"(제안서 show 항목 4번)을 증명하는 화면입니다. R6(관리자 — 장소·프로그램 등록)의 핵심입니다.

[핵심 기능 로직]

체험처 제휴가 끝나는 대로 개발자 없이 직접 등록할 수 있습니다. 편의시설은 텍스트 입력이 아니라 클릭 한 번으로 켜고 끄는 체크칩이라 비개발자도 실수 없이 입력합니다.

• 개발자 없이 직접 장소 등록
  NestJS 관리자 CRUD API
• 체험처 제휴 즉시 반영
  노출 On/Off 토글 스키마

[화면 개요 및 목적]

"예약 신청부터 관리자의 상태 변경(현장결제)까지 끊기지 않는 흐름"(제안서 show 항목 3번)을 완결하는 화면입니다. S5(예약 신청)에서 들어온 요청이 여기서 처리됩니다.

[핵심 기능 로직]

예약은 신청→확정/거절 두 버튼 클릭만으로 처리됩니다. 연락처가 바로 보여 전화로 현장결제 안내까지 이 화면에서 끝낼 수 있습니다.

• 신청부터 완료까지 한 화면
  예약 상태 전이(State Machine) 로직
• 고객 연락처 즉시 확인
  NestJS 예약 조회 API

[화면 개요 및 목적]

R6의 나머지 축(회원조회·리뷰관리)을 다루는 화면입니다. 부적절한 리뷰를 대표가 직접 숨길 수 있어야 운영이 유지됩니다.

[핵심 기능 로직]

좌우 2분할로 회원과 리뷰를 한 화면에서 훑습니다. 리뷰는 노출/숨김 버튼 하나로 즉시 전환되어, 문제 리뷰가 올라와도 신고 접수 없이 바로 대응합니다.

• 부적절 리뷰 즉시 숨김 처리
  리뷰 노출 플래그 토글
• 회원 현황 한눈에 파악
  PostgreSQL 회원 집계 쿼리