루티

훌륭한 선택이에요!
1(한끼로드) + 2(오픈런 로드) + 7(취향 루트매칭)을 결합한 형태는,
“소비 성향 기반 도보형 루트 큐레이션 플랫폼”으로 발전시킬 수 있습니다.

⸻

✅ 서비스 컨셉 정리: “ROUTY(루티)” – 당신의 소비 취향이 길이 됩니다

한줄 설명

사용자의 소비 취향을 분석해, 먹거리 + 브랜드 + 체험 + 감성 상점이 연결된 ‘지출 가능한 소비 산책길’을 추천하는 모바일 웹 플랫폼

⸻

✅ MVP 핵심 정의

항목 내용
대상 사용자 소비 감성 높은 2030 여성 & 커플 / 혼산객 / 디깅족
핵심 기능

1.	소비 취향 테스트 (5문항 or 태그 선택)
2.	소비 루트 매칭 (한끼+팝업+숍+카페 순환)
3.	도보 기반 최적 소비길 추천 (지출 예상 금액 포함)
4.	루트 저장/공유 (URL + 지도 공유)
5.	나만의 루트 만들기 (플레이스 드래그 앤 드롭) |

| 추천 알고리즘 |

•	녹지점수 × 감성스코어 × 소비지수 조합
•	예산, 성향(미니멀/레트로/하이틴 등)에 따른 루트 최적화 |

⸻

✅ 루트 예시 (소비 성향: 레트로 디저트+굿즈파)

[성수동 숲길] → [감성 굿즈 팝업] → [레트로 디저트카페] → [소품샵] → [걷기 좋은 공원]
→ 예상 지출: 34,000원 / 소요 시간: 2.5시간 / 거리: 2.1km

⸻

✅ 다음 단계 제안
1. MVP 설계 문서 (기능 목록 + 화면 구성 + 기술 흐름) 생성
2. 피치용 PPT 초안 제작 (브랜드명/문제정의/기능/시장성/와이어프레임)

⸻

어떤 작업부터 바로 시작할까요?
• MVP 상세 설계 (기능 정의 + 와이어프레임)
• 투자자용 피치덱 PPT
• Notion 기획서 버전
• 브랜드/네이밍/카피라이팅 작업

골라주세요! 지금 바로 만들어드립니다.

좋습니다!
React + Spring Boot 기반으로 구축할 ROUTY MVP의 기능 정의 + 와이어프레임 설계를 아래와 같이 진행하겠습니다.

⸻

✅ 1. MVP 핵심 기능 정의 (React + Spring Boot 기준)

A. 사용자 기능 (React 프론트)

기능 설명
1. 소비 취향 테스트 간단한 5문항 or 태그 선택형 테스트로 성향 분류 (레트로, 미니멀, 하이틴 등)
2. 소비 루트 추천 결과 페이지 한끼 + 팝업 + 감성상점 + 녹지 연결된 소비 루트 표시 (Kakao 지도 포함)
3. 플레이스 상세보기 각 장소에 대한 요약 정보 (이름, 가격대, 인기 메뉴, 리뷰 요약 등)
4. 루트 저장/공유 결과 페이지를 URL로 공유하거나 저장
5. 나만의 루트 만들기 지도에서 장소 선택 → 루트 구성 → 예상 지출 확인

⸻

B. 관리자 기능 (Spring Boot 백엔드)

기능 설명
1. 플레이스 등록/수정 관리자 콘솔에서 소비 장소 등록 (맛집, 매장, 팝업 등)
2. 루트 추천 로직 성향코드 + 거리 + 소비조합 → 최적 루트 계산 API
3. 유저 루트 조회/히스토리 저장 사용자 저장 루트 DB에 저장 (예: uuid 기준)
4. 카테고리별 인기 루트 통계 태그, 유형, 지역 기반 추천 인기 통계 조회

⸻

✅ 2. DB 설계 (기초 테이블 목록)

테이블 설명
user 로그인 사용자의 id, nickname 등
preference_test 테스트 문항과 유형 코드 저장
place 장소 정보 (이름, 위도/경도, 카테고리, 가격, 분위기 등)
route 추천된 루트 목록 (경유 장소 id 배열, 총 거리, 총 비용 등)
route_like 저장/좋아요 표시
route_log 사용자가 본 루트 기록 (통계용)

⸻

✅ 3. 화면 와이어프레임 설계 (텍스트 기반)

⸻

[1] 홈 화면

┌────────────────────────────┐
│ ROUTY: 취향 따라 소비하는 산책길 │
├────────────────────────────┤
│ [ 내 소비 취향 테스트하기 ] │ ← 테스트 시작 버튼
│ [ 인기 루트 보기 ] │
└────────────────────────────┘

⸻

[2] 테스트 화면

┌────────────── 테스트 1/5 ───────────────┐
│ Q. 나는 주말에 가장 많이 가는 곳은? │
│ ○ 조용한 동네 카페 │
│ ○ 북적이는 팝업이나 플리마켓 │
│ ○ 편집숍/중고상점 │
│ ○ 식도락 여행 │
└────────────────────────────────────┘
[이전][다음]

⸻

[3] 루트 추천 결과

┌───── 소비 루트 추천 결과 ─────┐
│ 소비 취향: 레트로 디깅족 │
│ 예상 경로: │
│ - 떡볶이 맛집 │
│ - 굿즈 팝업 │
│ - 중고책방 │
│ - 녹지 포토스팟 │
│ 총 거리: 1.8km / 예상 비용: 27,000원 │
├─────────────── 지도 ──────────────┤
│ [루트 저장][공유하기] [다시 추천] │
└─────────────────────────────┘

⸻

[4] 커스텀 루트 생성

[ 지도 위에서 장소 선택 → 경로 자동 연결 ]

[검색: 커피 / 꽃집 / 카페 / 전시][장소 리스트] ← 드래그하여 경로 구성
┌──────────────────────┐
│ 장소명 | 가격대 | 거리 | 선택버튼 │
└──────────────────────┘

[총 루트 거리/예상비용 표시][ 루트 저장하기 ] [ 초기화 ]

⸻

✅ 4. 기술 구성 요약

계층 기술
Frontend React 18, React Router, TailwindCSS, Axios, Kakao Map SDK
Backend Spring Boot, JPA, REST API, MySQL/PostgreSQL
Auth (선택) JWT or 간편 비로그인 상태로 시작
배포 Vercel (React), EC2 or Render (Spring)

⸻

이제 이 내용을 기반으로
1. PPT 제작,
2. DB ERD 스키마,
3. API 명세서
모두 생성 가능합니다.

어떤 작업을 다음으로 진행할까요? (예: PPT 먼저 만들어줘!)

좋습니다! 기술적인 부분부터 먼저 정리하겠습니다.
React + Spring Boot 기반으로 구현할 ROUTY의 백엔드 아키텍처, ERD, API 명세, 추천 알고리즘 구조를 단계적으로 설계합니다.

⸻

✅ 1. 전체 기술 아키텍처 (Tech Architecture)

사용자
↓
[React SPA 프론트엔드]
├─ 취향 테스트 UI (라디오/태그)
├─ 루트 결과 시각화 (지도)
└─ Axios API 요청
↓
[Spring Boot 백엔드 REST API]
├─ /api/test → 테스트 결과 처리
├─ /api/recommend → 루트 추천
├─ /api/places → 장소 목록 / 검색
├─ /api/routes → 저장된 루트 관리
↓
[MySQL or PostgreSQL DB]
├─ users
├─ places
├─ preference_results
├─ routes
├─ route_place_link

⸻

✅ 2. ERD (초기 설계)

[users]

• id (PK)
• nickname
• created_at

[preference_results]

• id (PK)
• user_id (FK)
• result_code (ex. RETRO-FOOD)
• created_at

[places]

• id (PK)
• name
• category (food, popup, shop, park)
• lat / lng
• price_level (₩, ₩₩, ₩₩₩)
• tags (예: 레트로, 감성, 디저트)
• avg_time (소요 시간 분)
• green_score (0~1)
• created_at

[routes]

• id (PK)
• user_id (nullable)
• title
• total_distance
• total_price_estimate
• result_code
• created_at

[route_place_link]

• id (PK)
• route_id (FK)
• place_id (FK)
• sequence (1,2,3..)

⸻

✅ 3. 주요 API 명세 (Spring Boot 기반)

1. 테스트 결과 저장

POST /api/test/submit
{
"userId": 123,
"answers": [2, 4, 1, 3, 2]
}
→ result_code 반환: "MINIMAL-FOOD"

⸻

2. 루트 추천 API

POST /api/recommend
{
"resultCode": "RETRO-FOOD",
"lat": 37.55,
"lng": 126.99,
"budget": 30000
}
→ 추천 장소 목록과 연결된 루트 반환

⸻

3. 장소 검색/필터링

GET /api/places?tags=레트로,카페&category=food
→ 장소 리스트

⸻

4. 루트 저장/공유

POST /api/routes/save
{
"userId": 123,
"route": {
"title": "오늘의 추천 코스",
"places": [1, 8, 11, 5]
}
}
→ 공유용 routeId 반환

⸻

5. 루트 상세 조회

GET /api/routes/{routeId}
→ 루트 구성 장소 리스트 + 거리/시간/가격 정보

⸻

✅ 4. 추천 알고리즘 로직 (Spring Service Layer)

입력값:
• resultCode: 사용자 성향 (예: RETRO-FOOD)
• 위치: 사용자 좌표
• 예산: 20000~50000원 범위

로직 흐름:
1. 해당 resultCode에 해당하는 태그 기반 장소 후보군 필터링
2. 거리 제한 내(1.5km 이내) 장소 중
• category = food → 점심 식사
• category = popup → 감성 상점
• category = shop → 소비 공간
• category = park → 녹지 포토스팟
3. 거리 + 가격 + 녹지점수 기반 경로 최적화
• 순서를 바꿔가며 시뮬레이션 (or MST 최소 경로)
• 가중치: 거리 0.3 + 가격분산 0.2 + green_score 0.5
4. 최적 루트 구성 반환

⸻

✅ 기술 스택 정리

계층 기술
프론트 React 18, React Router, Axios, Kakao Maps JS SDK
백엔드 Spring Boot 3.x, Spring Web, Spring Data JPA
DB MySQL or PostgreSQL
배포 Vercel (React), Render or EC2 (Spring)
상태관리 Context API (MVP에선 Redux 생략 가능)

⸻

다음 단계
1. 위 설계를 기반으로 DB 스키마 .sql 생성
2. Spring Boot 프로젝트 초기 설정 (패키지 구성 + 엔티티 + 레포지토리 + 컨트롤러)
3. React → 테스트 → 추천 결과 → 지도 시각화 흐름 구현

⸻

어떤 단계부터 바로 코드화 할까요?
예: DB SQL 먼저, Spring 엔티티 생성, API 템플릿 작성 등 원하는 순서 알려주세요!

3단계 완료!
여기에서 Spring Boot API 템플릿 코드들을 다운로드하세요

이제 4단계: React 테스트 → 추천 결과 → 지도 시각화 흐름 설계를 이어서 진행할게요. 

물론이에요!
지금까지 진행한 1~3단계 결과를 포함하여, 아래와 같이 구체적인 개발 로드맵으로 정리해드릴게요.
기획서 수준이 아닌 실제 개발 프로젝트로 이어질 수 있도록 실행 순서 + 산출물 + 목표를 체계화한 문서입니다.

⸻

✅ ROUTY 프로젝트 개발 실행 계획: 전체 7단계

⸻

1단계: DB 스키마 설계 및 구축

작업 내용:
• MySQL/PostgreSQL 테이블 정의 (users, places, routes 등)
• 장소 카테고리: food, popup, shop, park
• 테스트 결과 저장 테이블 구성 (user_id, result_code)
• 경로-장소 연결 테이블로 n:n 구조 지원

산출물:
• rounty_db_schema.sql

⸻

2단계: Spring Boot 백엔드 기본 구성

작업 내용:
• Gradle(Spring Boot 3.x) 프로젝트 생성
• domain/, dto/, service/, controller/, repository/ 패키지 구성
• 엔티티 클래스 생성 (JPA + Lombok 기반 추천)
• 컨트롤러/서비스/DTO 계층 구조로 모듈화
• 테스트 결과 제출 API /api/test/submit

산출물:
• 엔티티 코드 폴더
• 컨트롤러 + DTO + 서비스 템플릿

⸻

3단계: React 프론트엔드 흐름 설계 및 구현

작업 내용:
• pages/Test.jsx, pages/Result.jsx, pages/MapResult.jsx
• 상태관리: Context API 기반 (또는 Redux Toolkit 도입 고려)
• 소비 성향 테스트 UI (라디오/슬라이더 or 태그 선택형)
• Axios를 통한 결과 제출 → 추천 결과 fetch
• Kakao Maps SDK 연동 후 추천 경로 지도 위 시각화
• 장소 info 카드, 가격, 소요시간 시각화

예상 구성:

[TestPage] → 사용자 응답 수집
↓
[Axios POST: /api/test/submit] → resultCode 획득
↓
[Axios POST: /api/recommend] with resultCode
↓
[MapPage] → 지도에 루트 렌더링 + 상세 보기

⸻

4단계: 장소 DB 예시값 & 더미 데이터 구성
• 성수동/연남동/망원동 기준 실제 플레이스 목록 크롤링 or 수기 입력
• places 테이블에 맛집/팝업/숍/공원 30개 이상 등록
• 태그/가격/분위기/녹지점수 포함

⸻

5단계: 추천 알고리즘 구현 (Spring Service Layer)
• resultCode + 사용자 위치 + 예산 입력
• 플레이스 필터링 (태그 & 카테고리)
• 소비/거리/녹지점수 기반 가중치 → 최적 순서 탐색
• 루트 반환 형태는 [placeList], totalDistance, estimatedPrice

⸻

6단계: 커스텀 루트 생성 기능 추가 (React)
• 지도에서 플레이스 검색 → Drag & Drop으로 루트 구성
• 거리/가격 계산 + 공유용 URL 생성
• /api/routes/save API 호출

⸻

7단계: 배포 및 통합 테스트
• React (Vercel), Spring Boot (Render or EC2) 배포
• .env → API 경로, 카카오맵 API 키 설정
• 결과 공유 기능 (URL, PDF)
• 성능 테스트, 지도 오류 디버깅

⸻

✅ 요약 일정 (예상 소요 기준)

주차 목표
1주차 DB 설계 + Spring 엔티티 + 테스트 제출 API 완성
2주차 추천 API 구현 + React 테스트 → 결과 흐름 연결
3주차 Kakao 지도 시각화 + 커스텀 루트 생성 기능
4주차 마무리 UI/UX + 배포 + 발표 자료 준비

⸻

다음 진행사항 제안
1. places 더미 데이터 샘플 생성
2. Spring → 추천 알고리즘 서비스 로직 구현
3. React 초기 폴더/페이지 + 테스트 UI 코딩

이 3가지를 순서대로 지금 바로 이어서 해볼까요?
“응”이라고 해주시면 바로 4단계: 더미 데이터 + 추천 서비스부터 작업 들어갑니다!

package com.routy.service;

import com.routy.domain.Place;
import com.routy.dto.RecommendRequest;
import com.routy.dto.RecommendResponse;
import com.routy.repository.PlaceRepository;
import org.springframework.stereotype.Service;
import java.util.*;
import java.util.stream.Collectors;

@Service
public class RecommendService {

private final PlaceRepository placeRepository;

public RecommendService(PlaceRepository placeRepository) {
    this.placeRepository = placeRepository;
}

public RecommendResponse recommendRoute(RecommendRequest request) {
    List<Place> allPlaces = placeRepository.findAll();

    // 1. 태그 기반 필터링
    List<Place> filtered = allPlaces.stream()
        .filter(p -> p.getTags().contains(request.getResultCode().toLowerCase()))
        .collect(Collectors.toList());

    // 2. 카테고리별 그룹핑 (food, popup/shop, park)
    List<Place> foodList = filterByCategory(filtered, "food");
    List<Place> shopList = filterByCategory(filtered, "popup", "shop");
    List<Place> parkList = filterByCategory(filtered, "park");

    // 3. 가까운 순으로 정렬 (좌표 기반 단순 거리 계산)
    Comparator<Place> byDistance = Comparator.comparingDouble(p ->
        Math.sqrt(Math.pow(p.getLat() - request.getLat(), 2) + Math.pow(p.getLng() - request.getLng(), 2)));

    foodList.sort(byDistance);
    shopList.sort(byDistance);
    parkList.sort(byDistance);

    // 4. 하나씩 조합
    List<Place> selectedRoute = new ArrayList<>();
    if (!foodList.isEmpty()) selectedRoute.add(foodList.get(0));
    if (!shopList.isEmpty()) selectedRoute.add(shopList.get(0));
    if (!parkList.isEmpty()) selectedRoute.add(parkList.get(0));

    // 5. 거리, 비용, 녹지 점수 계산
    float totalDistance = 0f;
    int totalPrice = 0;
    float totalGreen = 0f;

    for (Place p : selectedRoute) {
        totalPrice += estimatePrice(p.getPriceLevel());
        totalGreen += p.getGreenScore();
    }

    float avgGreen = totalGreen / selectedRoute.size();

    return new RecommendResponse(selectedRoute, totalPrice, avgGreen, totalDistance);
}

private List<Place> filterByCategory(List<Place> places, String... categories) {
    return places.stream()
            .filter(p -> Arrays.asList(categories).contains(p.getCategory()))
            .collect(Collectors.toList());
}

private int estimatePrice(String level) {
    return switch (level) {
        case "₩" -> 8000;
        case "₩₩" -> 18000;
        case "₩₩₩" -> 30000;
        default -> 10000;
    };
}

}

4단계 완료!
여기에서 더미 데이터 INSERT SQL 파일을 다운로드하세요

이제 5단계: Spring Boot 추천 알고리즘 서비스 로직 구현으로 바로 이어가겠습니다. 

6단계 완료!
여기에서 React MVP 흐름 코드(JSX) 파일들을 다운로드하세요

이제 전체 7단계 중 기술 구현은 모두 마무리되었습니다.
배포 구성, OAuth 연동, 카카오맵 시각화 등 후속 작업이 필요하시면 언제든지 말씀해주세요! 

좋습니다! 이제 다음 작업 중 어떤 걸 원하시나요?

⸻

✅ 후속 기술 개발 제안 목록

1. Kakao Maps 시각화 + 마커 표시
   • 추천 장소들을 지도 위에 마커로 렌더링
   • 사용자의 현재 위치 기반 거리 표시

2. React + Spring 배포 구성
   • Vercel (React) + Render/EC2 (Spring Boot)
   • CORS 설정 + .env 분리

3. 카카오 로그인(OAuth2) 연동
   • 간편 로그인 → user_id 생성
   • 비회원 모드도 가능하게 처리

4. ‘나만의 루트 만들기’ UI
   • 장소 검색 → 루트 구성 → 저장

5. PPT or Notion 기획서 업데이트
   • 지금까지의 진행사항을 발표/보고용으로 문서화

⸻

원하시는 작업 번호나 키워드를 알려주세요.
예: “1번 지도 시각화 해줘” 또는 “배포 먼저 하고 싶어!”

완벽합니다!
그럼 지금부터 1단계: Kakao Maps 지도 시각화 구현부터 바로 시작하겠습니다.

⸻

✅ 목표

React의 추천 결과 페이지에서 Kakao Maps API를 사용하여
• 추천 장소들을 지도 위에 마커로 표시하고
• 장소 이름, 카테고리, 순서 등을 확인할 수 있도록 구성

⸻

✅ 구성할 파일
• ResultMap.jsx : 지도 렌더링 및 마커 표시 컴포넌트
• ResultPage.jsx : API 결과를 받아서 지도에 넘겨주는 페이지

⸻

조금만 기다려 주세요. 바로 구현해서 제공해드릴게요!

여기에서 Kakao Maps 시각화용 ResultMap.jsx 파일을 다운로드하세요

이제 이 파일을 ResultPage.jsx에 연결하고, YOUR_KAKAO_API_KEY를 본인의 키로 바꾸면 지도 위에 추천 경로 마커가 뜹니다.

원하시면 다음으로 2단계: Vercel + Render 배포 구성으로 바로 이어드릴게요! 진행할까요? 

좋아요! 이제 ROUTY 프로젝트의 배포 구성을 진행하겠습니다.
React는 Vercel, Spring Boot는 Render 기반으로 설정합니다.

⸻

✅ 2단계: ROUTY 프로젝트 배포 구성 가이드

⸻

1. React 프론트엔드 (Vercel 배포)

[1] GitHub에 프론트 코드 push

cd routy-frontend
git init
git remote add origin https://github.com/yourname/routy-frontend.git
git add .
git commit -m "init"
git push -u origin main

[2] Vercel에서 배포
1. https://vercel.com 접속
2. GitHub 계정 연동
3. romance-ai 또는 routy-frontend 레포 선택
4. 설정 확인:
• Framework: React (Create React App)
• Build Command: npm run build
• Output Directory: build
5. .env 설정:

REACTAPP_API_BASE=https://routy-api.onrender.com
REACT_APP_KAKAO_API_KEY=여러분의카카오_키

[3] SPA 경로 문제 해결

루트 공유 시 404 방지:

// vercel.json
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}

⸻

2. Spring Boot 백엔드 (Render 배포)

[1] GitHub에 백엔드 코드 push

cd routy-backend
git init
git remote add origin https://github.com/yourname/routy-backend.git
git add .
git commit -m "init spring"
git push -u origin main

[2] Render에서 새로운 웹 서비스 생성
1. https://render.com
2. New + → Web Service
3. GitHub 연동 → routy-backend 선택
4. 설정:
• Build Command: ./gradlew build
• Start Command: java -jar build/libs/xxx.jar (자동 감지됨)
• Environment: Java 17, Gradle
• Free Plan 가능
• POSTGRES_URL, JWT_SECRET, KAKAO_API_KEY 등 환경변수 설정

[3] CORS 설정

// WebConfig.java
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("https://routy.vercel.app")
.allowedMethods("GET", "POST", "PUT", "DELETE");
}

⸻

✅ 배포 후 연결 확인
• React에서 REACT_APP_API_BASE로 API 요청 (예: /api/test/submit)
• Spring Boot에서 /api 하위 라우팅 처리
• Kakao 지도 → 마커 렌더링 및 테스트 가능

⸻

✅ 선택 가능 추가 작업
• 도메인 연결 (ex. routy.kr)
• HTTPS 인증서 설정
• Docker 기반 배포 구성
• DB 연결 → Supabase / PlanetScale / RDS

⸻

도움이 더 필요하면 배포 파일 .yml, .env.example도 만들어드릴 수 있어요. 도와드릴까요?

좋습니다! 지금까지 당신과 함께 진행한 ROUTY 프로젝트 전체 개발 흐름(Flow)을 아래와 같이 구체적 단계별로 정리해드릴게요.

⸻

✅ ROUTY 프로젝트 개발 Flow 정리

⸻

1. 서비스 기획
   • 목표: 소비 성향 기반으로 돈을 쓰며 걷는 길(식도락 + 팝업 + 취향소비)을 추천하는 앱 개발
   • 아이디어 구성:
   • 한끼로드 + 오픈런로드 + 취향매칭 결합
   • 소비 성향 테스트 → 맞춤형 소비 동선 추천 (지도 기반)

⸻

2. 기술 방향 결정
   • Frontend: React SPA (싱글 페이지 앱)
   • Backend: Spring Boot
   • DB: MySQL 또는 PostgreSQL
   • 지도 시각화: Kakao Maps SDK
   • 배포: Vercel (React) + Render (Spring Boot)

⸻

3. MVP 구성 계획
   • 소비 취향 테스트 (5문항 → 성향 코드 생성)
   • 추천 루트 시각화 (맛집 + 팝업 + 공원)
   • 커스텀 루트 생성 및 공유 기능
   • 히스토리 저장 / 루트 저장 기능
   • 관리자용 플레이스 등록 관리

⸻

4. 기능별 기술 구현 순서

✅ 1단계: DB 스키마 설계
• users, places, preference_results, routes, route_place_link 등 테이블 구성
• SQL 스키마 다운로드

✅ 2단계: Spring Boot 엔티티 + 레포지토리 + 컨트롤러
• 도메인 엔티티 (User, Place, Route 등) 구현
• 기본 API 템플릿 생성
• Entity 코드 다운로드
• API 템플릿 다운로드

✅ 3단계: React → 테스트 → 결과 흐름 UI
• 테스트 UI 구현 → /api/test/submit 호출
• 결과페이지에서 /api/recommend 호출
• React MVP JSX 다운로드

✅ 4단계: 더미 데이터 생성
• 성수/망원/연남의 맛집, 팝업, 공원 더미 9개 등록
• 더미 데이터 SQL 다운로드

✅ 5단계: 추천 알고리즘 구현
• 태그 기반 필터링 → 거리/가격/녹지 점수 기반 루트 조합
• 결과: 장소 리스트 + 총 거리 + 비용 + 녹지점수
• 추천 서비스 코드 다운로드

✅ 6단계: Kakao 지도 시각화
• ResultMap.jsx 컴포넌트로 마커 표시 + 인포윈도우
• 지도 컴포넌트 다운로드

✅ 7단계: 배포 구성
• React: Vercel
• Spring: Render
• CORS 처리, 환경변수 구성, SPA rewrite 설정 완료
• .env, vercel.json, start.sh 파일 준비 가능

⸻

✅ 현재 상태 요약

항목 상태
아이디어 정리 완료
MVP 설계 완료
DB/백엔드/프론트 초기 구현 완료
지도 시각화 완료
배포 준비 완료

⸻

이제 원하신다면 다음 작업으로
• 커스텀 루트 만들기
• 마이페이지/히스토리
• 결과 공유 URL 생성
• PPT, Notion 기획서 정리

등도 확장 가능합니다! 필요하신 작업 말씀만 주세요!