Figma Make 프로토타입을 Vue.js 3 + FastAPI + SQLite 구조로 구현하고, 서울·경기 TourAPI 데이터를 적용한 실행 가능한 프로젝트입니다.
- 챗봇 표시 우선순위 수정: 지역정보 > 경로찾기 화면에서 경로 패널·검색 결과에 챗봇이 가려지던 문제를 해결했습니다. (챗봇 z-index를 경로 UI보다 위로 조정)
- 경로 버튼 노출 개선: "지도에서 경로를 확인하세요"라고 안내만 하고 실제 버튼이 참고정보 목록에 파묻혀 있던 문제를 수정했습니다. 이제 경로가 매칭되면 답변 바로 아래에 눈에 띄는
경로 보기버튼이 뜹니다. - 지역명 경로 오작동 수정: "강남구에서 서대문구 가는 길"처럼 순수 지역명을 넣으면 엉뚱한 장소가 출발/도착지로 잡히던 문제를 해결했습니다. 지역명만으로는 경로를 만들지 않고, 구체적인 장소명(예: 강남역, 홍대입구역)을 넣도록 안내합니다.
- 멀티턴 대화 지원: 직전 대화에서 지역·시·군·구·유형을 이어받아 "주차 되는 곳 있어?", "여기 근처 카페" 같은 후속 질문을 이해합니다.
- 시·군·구 단위 검색: 서울 자치구·경기 시군 이름(예: 강남구, 수원시)을 인식해 주소 기준으로 정확히 좁혀줍니다. (기존 추천 질문 "종로구 문화시설" 정상 동작)
- 지도 경로 안내 연동: "경복궁에서 인사동 가는 길"처럼 물으면 두 장소를 매칭해
경로 보기버튼을 제공하고, 클릭 시 기존 A* 경로 화면으로 이동해 도보/자동차 길안내를 표시합니다. 무거운 경로 계산은 챗봇 응답과 분리해 응답 지연·타임아웃을 방지했습니다. - 관련도 랭킹: 제목 정확일치 > 제목 부분일치 > 주소 일치 순으로 검색 결과를 정렬합니다.
- 안정적인 폴백: 외부 LLM(OpenAI) 호출이 실패해도 502로 끊지 않고 로컬 검색 결과로 자연스럽게 대체합니다.
- 경로 결과 화면에
경로 지우기버튼을 추가했습니다.
- 지역정보 지도 영역을
위치와경로찾기토글 화면으로 분리 - 최초 진입 시 v1.9.1 방식의 현재 장소 위치 지도를 기본 표시
- 경로찾기 화면은 출발지·도착지 핀과 계산된 경로를 표시
- 지도 타일이 차단된 환경에서도 핀과 경로가 사라지지 않도록 중립 지도 배경 제공
- 경로 탐색 중 문구를
탐색 중...으로 변경 - 지도 범례의
A* 경로문구를경로로 변경 - 이동 방식 선택과 탐색 노드 표시를 사용자 화면에서 제거
- 경로 결과를 거리, 예상 시간(자동차), 예상 시간(도보)로 표시
- 외부 Leaflet CDN 의존성을 제거해 학교·사내망에서 발생하던 지도 로딩 오류 수정
- OpenStreetMap 타일을 직접 표시하는 프로젝트 내장형 상호작용 지도로 교체
- 현재 보고 있는 지역정보를 출발지로 자동 설정
- 서울·경기 전체 지역정보에서 도착 장소 검색 및 가까운 5곳 빠른 선택
- OpenStreetMap 도로망을 Overpass API로 불러와 A* 알고리즘으로 최단 경로 계산
- 출발·도착 핀 2개와 이동 경로를 하나의 지도에 표시
- 게시글·지역정보 상세에서 좋아요·북마크와 공유 버튼을 그룹별로 분리해 재배치
- 기능 없는
공유라벨과 아이콘 제거 - 카카오톡 버튼 문구를
카카오톡 공유로 변경 - 근처 지역정보 안내 문구를 간결하게 수정
- 홈 화면의 대표 이미지 노출 건수 문구 제거
- 익명 커뮤니티 안내 문구를
비밀번호 기반 게시글·댓글로 변경
backend/requirements.txt에tzdata추가- 게시글·지역정보 상세에 카카오톡 공유 및 링크 복사 기능 추가
- 콘텐츠별 동적 OG/Twitter 메타데이터 적용
- 소셜 크롤러용
/share/posts/{id},/share/locations/{contentid}랜딩 페이지 추가 - 기본 OG 대표 이미지 포함
- 홈·지역정보 화면 하단의 중복 데이터 출처 프레임 제거
- 게시글 작성 화면의 교육용 평문 비밀번호 안내 문구 숨김
- 실시간 알림별 삭제 버튼 추가
- 알림 목록은 한 화면에 5개 높이만 표시하고 초과 알림은 스크롤 제공
- 마우스/포인터 드래그로 알림 목록 스크롤 가능
- 지역정보 카드에서 북마크 등록·해제 가능
- 지역정보 검색창 옆에 북마크만 보기 필터 추가
- 북마크 목록도 서버 페이지네이션과 검색·지역·카테고리 필터를 함께 지원
- Frontend: Vue.js 3 + TypeScript + Vite SPA
- Backend: FastAPI + SQLAlchemy 2.0
- Database: SQLite
- Realtime: FastAPI WebSocket
- Charts: Chart.js + vue-chartjs
- Map: OpenStreetMap 위치 iframe + 프로젝트 내장형 OSM 타일 지도 + Overpass API
- Social Share: Kakao JavaScript SDK + Open Graph
- Deployment: Netlify + Render
- 익명 게시글 CRUD, 댓글 CRUD, 태그, 검색, 이미지 첨부·삭제
- 게시글 조회수, 좋아요 토글, 북마크
- 게시글 서울/경기·자치구/시군 선택
- 서울·경기 지역정보 12,512건 적재 및 대표 이미지 보유 데이터 노출
- 지역정보 전체/서울/경기 전환, 페이지당 21개 및 10페이지 단위 페이지네이션
- 지역정보 상세 내부 지도, 좌표 기준 근처 5곳, 복수 장소 A* 길찾기
- 지역정보 댓글·별점·수정·삭제·좋아요·북마크·조회수
- 새 게시글 실시간 알림과 접속자 현황
- 월별 카테고리, 지역 순위, 지역정보 순위, 평점 순위, 주간 트렌드 대시보드
- 서울·경기 지역정보와 게시글 기반 챗봇
압축 해제 후 다음 파일을 순서대로 실행합니다.
start_backend.batstart_frontend.bat
접속 주소:
- 프론트엔드:
http://localhost:5173 - API 문서:
http://localhost:8000/docs - 상태 확인:
http://localhost:8000/health - 실시간 채널:
ws://localhost:8000/ws/notifications
현재 접속자 집계와 게시글 알림은 단일 FastAPI 프로세스의 메모리에 연결 상태를 관리합니다. 기본 Render 설정처럼 worker 1개로 실행할 때 정상 동작합니다. 여러 worker로 확장할 때는 Redis pub/sub 같은 공용 메시지 저장소가 필요합니다.
백엔드는 backend/.env.example, 프론트엔드는 frontend/.env.example을 각각 .env로 복사해 사용합니다. 실제 .env와 API 키는 Git에 올리지 않습니다.
카카오톡 공유를 사용하려면 frontend/.env의 VITE_KAKAO_JAVASCRIPT_KEY를 설정하고, 배포 시 VITE_PUBLIC_SITE_URL과 백엔드 FRONTEND_PUBLIC_URL을 실제 주소로 변경합니다.
cd backend
pytest -q
cd ../frontend
npm ci
npm run build상세 변경은 docs/기능추가_v1.10.md를 확인하세요.