동네 매장 쇼윈도 모바일 웹
본 프로젝트의 요구사항(동네 단위 매장 탐색, 사진 중심 30초 소식 등록, AI 문구 자동 작성, 추천 피드)을 기반으로 직접 구현한 맞춤 모바일 웹 프로젝트입니다.
프로젝트 개요
본 프로젝트의 요구사항(동네 단위 매장 탐색, 사진 중심 30초 소식 등록, AI 문구 자동 작성, 추천 피드)을 기반으로 직접 구현한 맞춤 모바일 웹 프로젝트입니다. 손님 화면과 사장님 모드를 한 흐름으로 설계하며, 이후 React Native 기반 앱으로 확장할 수 있는 API 구조를 React와 Node.js 기반으로 구현합니다.
작업 범위
- 동네 설정·추천 피드 탐색: 동의 기반 현재 위치 또는 저장한 동네를 기준으로 반경 내 영업 매장 소식을 추천 피드와 지도·목록 전환 화면으로 둘러봅니다
- 매장 상세·관심 저장·검색: 매장 상세에서 소식·메뉴·영업 정보를 확인하고, 관심 매장으로 저장하며, 매장과 메뉴를 검색합니다
- 30초 소식 등록·AI 문구 작성: 사장님 모드에서 사진 한 장과 키워드만 입력하면 AI가 소식 문구 초안을 작성하고, 확인 후 바로 등록합니다
- 영업 토글·조회·관심 수: 사장님이 영업 중과 영업 종료를 한 번의 토글로 전환하고, 소식별 조회 수와 관심 수를 확인합니다
주요 업무
- 동네 설정·추천 피드 탐색 화면: 위치 동의 상태에 따라 동네 기준 반경 쿼리를 분기하고 관심·시간대 점수로 피드를 정렬하는 구조
- 매장 상세·관심 저장·검색 화면: 전문 검색 인덱스와 낙관적 UI 업데이트를 결합한 관심 저장·검색 구조
- 30초 소식 등록·AI 문구 작성 화면: 이미지 리사이즈 파이프라인과 LLM 문구 생성 API, 호출 비용 상한 가드를 연결한 등록 구조
- 영업 토글·조회·관심 수 화면: 상태 토글 API와 이벤트 카운터 집계를 연결한 사장님 대시보드 구조
프로젝트 핵심 과제
손님이 위치 동의를 거부해도 동네 단위 탐색이 끊기지 않
저장 동네 기준 조회로 대체하는 흐름 설계가 필요합니다
사진 한 장으로 30초 안에 등록을 마치
업로드 대기 시간을 가리는 비동기 이미지 처리 구조 설계가 필요합니다
AI가 작성한 문구가 과장 표현이나 부적절한 표현을 담지 않
금칙어 검수와 사장님 확인 단계 설계가 필요합니다
영업 상태 전환이 피드·검색·지도에 동시에 반영되
캐시 무효화 기준 설계가 필요합니다
웹 데모에서 구현한 위치·푸시·카메라 기능을 Expo 표준 라이브러리 경로로 옮길 때의 API 경계 설계가 필요합니다
핵심 기능 상세
동네 설정·추천 피드 탐색
동의 기반 현재 위치 또는 저장한 동네를 기준으로 반경 내 영업 매장 소식을 추천 피드와 지도·목록 전환 화면으로 둘러봅니다.
- 하버사인 거리 계산 쿼리와 인덱스로 반경 내 매장 조회 구현
- 관심 매장·시간대·거리 규칙 점수를 합산하는 피드 정렬 로직 설계
- 무한 스크롤과 React Query 캐시로 피드 목록 상태 관리
위치 동의 전에는 저장 동네로, 동의 후에는 현재 위치로 반경을 전환하는 탐색 흐름과 규칙 기반 추천 정렬을 구현합니다.
매장 상세·관심 저장·검색
매장 상세에서 소식·메뉴·영업 정보를 확인하고, 관심 매장으로 저장하며, 매장과 메뉴를 검색합니다. 전문 검색 인덱스와 낙관적 UI 업데이트를 결합한 관심 저장·검색 구조.
- PostgreSQL 전문 검색과 trigram 인덱스로 매장·메뉴 통합 검색
- 관심 토글에 Optimistic UI 적용 후 서버 응답으로 재동기화
- 매장 상세 탭(소식·메뉴·정보) 라우팅과 이미지 지연 로딩 설계
매장명과 메뉴명을 하나의 검색창에서 조회하고, 관심 저장 상태가 목록·상세 화면에 일관되게 반영되는 구조를 구현합니다.
30초 소식 등록·AI 문구 작성
사장님 모드에서 사진 한 장과 키워드만 입력하면 AI가 소식 문구 초안을 작성하고, 확인 후 바로 등록합니다. 이미지 리사이즈 파이프라인과 LLM 문구 생성 API, 호출 비용 상한 가드를 연결한 등록 구조.
- Multer 업로드와 sharp 리사이즈로 이미지 최적화 후 S3 저장
- OpenAI API 프롬프트 템플릿으로 사진 키워드 기반 문구 초안 생성
- 사장님별 일일 호출 상한과 금칙어 검수 규칙으로 문구 품질 관리
사진 선택, 키워드 입력, AI 초안 확인, 등록까지 단계를 최소화한 사장님 등록 흐름과 비용 상한 가드를 구현합니다.
영업 토글·조회·관심 수
사장님이 영업 중과 영업 종료를 한 번의 토글로 전환하고, 소식별 조회 수와 관심 수를 확인합니다. 상태 토글 API와 이벤트 카운터 집계를 연결한 사장님 대시보드 구조.
- 영업 상태 토글 시 피드 노출 조건을 서버에서 일괄 갱신
- 조회·관심 이벤트를 일별 카운터 테이블로 집계해 대시보드 제공
- Recharts 막대·라인 차트로 최근 7일 추이 시각화
영업 상태가 손님 피드와 검색에 바로 반영되고, 조회·관심 수가 소식 단위로 확인되는 사장님 화면을 구현합니다.
프로젝트 진행 단계
동네 단위 데이터 모델·반경 쿼리 설계 · 2026.10
매장·소식·관심 테이블 ERD 설계, 위도·경도 인덱스와 반경 조회 쿼리 정의
소식 등록·AI 문구·추천 피드 로직 구현 · 2026.10
Multer·sharp·S3 이미지 파이프라인, OpenAI API 문구 초안과 비용 상한 가드, 규칙 기반 피드 점수 구현
손님·사장님 모바일 웹 화면 개발 · 2026.10
피드·지도·상세·검색 화면과 사장님 모드 화면을 React로 구현
시나리오 테스트·앱 확장 경로 정리 · 2026.10
위치 동의·영업 토글 시나리오 테스트와 Expo 기반 앱 전환용 API 문서 정리
개발 결과
기술적 주안점
- 위치 동의 전에는 저장 동네로, 동의 후에는 현재 위치로 반경을 전환하는 탐색 흐름과 규칙 기반 추천 정렬을 구현합니다
- 매장명과 메뉴명을 하나의 검색창에서 조회하고, 관심 저장 상태가 목록·상세 화면에 일관되게 반영되는 구조를 구현합니다
- 사진 선택, 키워드 입력, AI 초안 확인, 등록까지 단계를 최소화한 사장님 등록 흐름과 비용 상한 가드를 구현합니다
