Sync DemoService a6436ca8840eb29086594cb2f3aec3966df6a64d

api/ai-service/tests/test_tshirt_sample_runs.py

@@ -0,0 +1,20 @@
+"""The published T-shirt GPX samples must be complete runnable routes."""
+
+import json
+from pathlib import Path
+
+
+ROOT = Path(__file__).resolve().parents[3]
+
+
+def test_tshirt_samples_are_runnable_and_uniquely_identified():
+    path = ROOT / "main" / "public" / "tshirt-sample-runs.json"
+    samples = json.loads(path.read_text(encoding="utf-8"))
+    assert len(samples) == 50
+    assert len({sample["id"] for sample in samples}) == 50
+    for sample in samples:
+        assert sample["label"] == "t_shirt"
+        assert sample["title"].startswith("티셔츠 샘플 러닝 ")
+        assert sample["distanceKm"] > 0
+        assert len(sample["route"]) >= 12
+        assert all(33 <= lat <= 39 and 124 <= lon <= 132 for lat, lon in sample["route"])

main/app/_components/LeafletMap.tsx

@@ -14,7 +14,7 @@ export type MapMarker = {
   position: [number, number];
   title: string;
   count?: number;
-  kind?: "location" | "routeStart" | "communityPost" | "sampleDog" | "sampleStar";
+  kind?: "location" | "routeStart" | "communityPost" | "sampleDog" | "sampleStar" | "sampleTshirt";
 };
 
 export type LeafletMapProps = {

main/app/_components/LeafletMapClient.tsx

@@ -24,7 +24,7 @@ type MapMarker = {
   position: [number, number];
   title: string;
   count?: number;
-  kind?: "location" | "routeStart" | "communityPost" | "sampleDog" | "sampleStar";
+  kind?: "location" | "routeStart" | "communityPost" | "sampleDog" | "sampleStar" | "sampleTshirt";
 };
 
 function isMapContainerReady(map: ReturnType<typeof useMap>): boolean {
@@ -225,12 +225,12 @@ export default function LeafletMapClient({
         const count = Math.max(0, Math.round(marker.count ?? 0));
         const isRouteStart = marker.kind === "routeStart";
         const isCommunityPost = marker.kind === "communityPost";
-        const isSample = marker.kind === "sampleDog" || marker.kind === "sampleStar";
+        const isSample = marker.kind === "sampleDog" || marker.kind === "sampleStar" || marker.kind === "sampleTshirt";
         const label = isRouteStart ? String(count || "") : String(count);
         const html = isRouteStart
           ? `<div style="display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:2px solid #ffffff;background:#f05a28;color:#ffffff;font-size:12px;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.25)">${label}</div>`
           : isSample
-            ? `<div style="display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:2px solid ${selected ? "#111111" : "#ffffff"};background:${marker.kind === "sampleDog" ? "#f97316" : "#a855f7"};color:#ffffff;font-size:17px;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.24)">${marker.kind === "sampleDog" ? "🐕" : "★"}</div>`
+            ? `<div style="display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:2px solid ${selected ? "#111111" : "#ffffff"};background:${marker.kind === "sampleDog" ? "#f97316" : marker.kind === "sampleTshirt" ? "#0d9488" : "#a855f7"};color:#ffffff;font-size:17px;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.24)">${marker.kind === "sampleDog" ? "🐕" : marker.kind === "sampleTshirt" ? "👕" : "★"}</div>`
           : isCommunityPost
             ? `<div style="display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border-radius:17px;border:2px solid ${selected ? "#111111" : "#ffffff"};background:${selected ? "#111111" : "#2563eb"};color:#ffffff;font-size:12px;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.24)">P${count}</div>`
             : `<div style="display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border-radius:17px;border:2px solid ${selected ? "#111111" : "#ffffff"};background:${selected ? "#111111" : "#bfdcff"};color:${selected ? "#ffffff" : "#111111"};font-size:12px;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.24)">${count}</div>`;

main/app/route-search/page.tsx

@@ -16,7 +16,7 @@ type Point = [number, number];
 
 type DemoSampleRun = {
   id: string;
-  label: "dog" | "symbol_star";
+  label: "dog" | "symbol_star" | "t_shirt";
   title: string;
   distanceKm: number;
   center: Point;
@@ -626,15 +626,15 @@ function RouteSearchPageContent() {
     id: sample.id,
     position: sample.center,
     title: sample.title,
-    kind: sample.label === "dog" ? "sampleDog" : "sampleStar",
+    kind: sample.label === "dog" ? "sampleDog" : sample.label === "t_shirt" ? "sampleTshirt" : "sampleStar",
   }));
   const selectedMapRoutes: MapRouteLayer[] =
     selectedSample?.route && selectedSample.route.length > 1
-      ? [{ points: selectedSample.route, color: selectedSample.label === "dog" ? "#f97316" : "#a855f7", weight: 5, opacity: 0.95 }]
+      ? [{ points: selectedSample.route, color: selectedSample.label === "dog" ? "#f97316" : selectedSample.label === "t_shirt" ? "#0d9488" : "#a855f7", weight: 5, opacity: 0.95 }]
       : sampleGalleryLabel
       ? galleryMapSamples.map((sample) => ({
           points: sample.route,
-          color: sample.label === "dog" ? "#f97316" : "#a855f7",
+          color: sample.label === "dog" ? "#f97316" : sample.label === "t_shirt" ? "#0d9488" : "#a855f7",
           weight: 3,
           opacity: 0.65,
         }))
@@ -713,15 +713,13 @@ function RouteSearchPageContent() {
 
   useEffect(() => {
     let isMounted = true;
-    void fetch("/demo-sample-runs.json")
-      .then((response) => {
-        if (!response.ok) throw new Error("Sample GPX data unavailable");
-        return response.json() as Promise<DemoSampleRun[]>;
-      })
-      .then((samples) => {
-        if (isMounted && Array.isArray(samples)) setSampleRuns(samples);
-      })
-      .catch(() => undefined);
+    void Promise.allSettled(["/demo-sample-runs.json", "/tshirt-sample-runs.json"].map(async (url) => {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error("Sample GPX data unavailable");
+      return response.json() as Promise<DemoSampleRun[]>;
+    })).then((results) => {
+      if (isMounted) setSampleRuns(results.flatMap((result) => result.status === "fulfilled" ? result.value : []));
+    });
     return () => { isMounted = false; };
   }, []);
 
@@ -929,7 +927,7 @@ function RouteSearchPageContent() {
     const distance = selectedSample.distanceKm.toFixed(2);
     const params = new URLSearchParams({
       runKey,
-      animal: selectedSample.title,
+      animal: selectedSample.label,
       routeTitle: selectedSample.title,
       distance,
       targetDistanceKm: distance,
@@ -965,7 +963,7 @@ function RouteSearchPageContent() {
                   markers={[...sampleMarkers, ...postMarkers]}
                   selectedMarkerId={selectedSampleId ?? (selectedPostId ? `post-${selectedPostId}` : null)}
                   onMarkerClick={(marker) => {
-                    if (marker.kind === "sampleDog" || marker.kind === "sampleStar") {
+                    if (marker.kind === "sampleDog" || marker.kind === "sampleStar" || marker.kind === "sampleTshirt") {
                       setSelectedPostId(null);
                       setSelectedSampleId((current) => current === marker.id ? null : marker.id);
                     } else if (marker.kind === "communityPost") {
@@ -987,11 +985,11 @@ function RouteSearchPageContent() {
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0">
                   <p className="truncate text-sm font-black text-black">
-                    {selectedSample ? selectedSample.title : sampleGalleryLabel ? `${sampleGalleryLabel === "dog" ? "강아지" : "별"} 샘플 ${gallerySamples.length}개` : selectedPost ? selectedPost.title || "게시물 루트" : "주변 러닝 경로"}
+                    {selectedSample ? selectedSample.title : sampleGalleryLabel ? `${sampleGalleryLabel === "dog" ? "강아지" : sampleGalleryLabel === "t_shirt" ? "티셔츠" : "별"} 샘플 ${gallerySamples.length}개` : selectedPost ? selectedPost.title || "게시물 루트" : "주변 러닝 경로"}
                   </p>
                   <p className="mt-1 text-xs leading-5 text-[#666]">
                     {selectedSample
-                      ? `업로드한 GPX 샘플 · ${selectedSample.distanceKm.toFixed(2)}km · 원본 위치의 경로입니다.`
+                      ? `AI 샘플 · ${selectedSample.distanceKm.toFixed(2)}km · 원본 위치의 경로입니다.`
                       : sampleGalleryLabel
                       ? `현재 지도 주변 30km 안의 샘플 ${galleryMapSamples.length}개를 함께 표시합니다. 아래 목록에서 다른 지역 샘플도 선택할 수 있습니다.`
                       : selectedPost
@@ -1005,8 +1003,8 @@ function RouteSearchPageContent() {
                 </div>
               </div>
               {sampleRuns.length > 0 && (
-                <div className="mt-3 flex gap-2" aria-label="GPX 샘플 러닝 미리보기">
-                  {(["dog", "symbol_star"] as const).map((label) => (
+                <div className="mt-3 flex flex-wrap gap-2" aria-label="AI 샘플 러닝 미리보기">
+                  {(["dog", "symbol_star", "t_shirt"] as const).map((label) => (
                     <button
                       key={label}
                       type="button"
@@ -1017,13 +1015,13 @@ function RouteSearchPageContent() {
                       }}
                       className={`rounded-full border px-3 py-2 text-xs font-bold ${sampleGalleryLabel === label ? "border-black bg-black text-white" : "border-black/10 bg-[#f7f7f7] text-black"}`}
                     >
-                      {label === "dog" ? "🐕 강아지" : "★ 별"} 샘플 {sampleRuns.filter((sample) => sample.label === label).length}개 보기
+                      {label === "dog" ? "🐕 강아지" : label === "t_shirt" ? "👕 티셔츠" : "★ 별"} 샘플 {sampleRuns.filter((sample) => sample.label === label).length}개 보기
                     </button>
                   ))}
                 </div>
               )}
               {sampleGalleryLabel && (
-                <div className="mt-3 max-h-52 overflow-y-auto rounded-2xl border border-black/10 p-2" aria-label="GPX 샘플 전체 목록">
+                <div className="mt-3 max-h-52 overflow-y-auto rounded-2xl border border-black/10 p-2" aria-label="AI 샘플 전체 목록">
                   <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                     {gallerySamples.map((sample) => (
                       <button
@@ -1040,7 +1038,7 @@ function RouteSearchPageContent() {
                 </div>
               )}
               {!sampleGalleryLabel && nearbySamples.length > 0 && (
-                <div className="mt-3 flex gap-2 overflow-x-auto pb-1" aria-label="주변 GPX 샘플 러닝">
+                <div className="mt-3 flex gap-2 overflow-x-auto pb-1" aria-label="주변 AI 샘플 러닝">
                   {nearbySamples.map(({ sample }) => (
                     <button
                       key={sample.id}
@@ -1051,14 +1049,14 @@ function RouteSearchPageContent() {
                       }}
                       className={`shrink-0 rounded-full border px-3 py-2 text-xs font-bold ${selectedSampleId === sample.id ? "border-black bg-black text-white" : "border-black/10 bg-white text-black"}`}
                     >
-                      {sample.label === "dog" ? "🐕" : "★"} {sample.distanceKm.toFixed(1)}km
+                      {sample.label === "dog" ? "🐕" : sample.label === "t_shirt" ? "👕" : "★"} {sample.distanceKm.toFixed(1)}km
                     </button>
                   ))}
                 </div>
               )}
               {selectedSample ? (
                 <>
-                  <p className="mt-3 text-xs text-[#666]">이 경로는 GPX 샘플입니다. 실제 통행 가능 여부를 확인하고 원본 시작점 근처에서 달려주세요.</p>
+                  <p className="mt-3 text-xs text-[#666]">이 경로는 AI 샘플입니다. 실제 통행 가능 여부를 확인하고 원본 시작점 근처에서 달려주세요.</p>
                   <button
                     type="button"
                     onClick={handleStartSelectedSampleRoute}

main/app/saved-routes/page.tsx

@@ -12,7 +12,7 @@ import { sendNativeWearRouteSelection } from "../_utils/nativeWearBridge";
 import { getAppPosition } from "../_utils/nativeLocation";
 
 type Point = [number, number];
-type RouteTab = "posts" | "dog" | "star";
+type RouteTab = "posts" | "dog" | "star" | "tshirt";
 type Course = {
   id: string;
   title: string;
@@ -25,7 +25,7 @@ type Course = {
 };
 type SampleRun = {
   id: string;
-  label: "dog" | "symbol_star";
+  label: "dog" | "symbol_star" | "t_shirt";
   title: string;
   distanceKm: number;
   center: Point;
@@ -104,7 +104,7 @@ export default function SavedRoutesPage() {
     const syncSaved = () => {
       if (!active) return;
       setSaved(readSavedRoutesFromStorage()
-        .filter((route) => (route.label === "dog" || route.label === "symbol_star") && route.routeCoords.length > 1)
+        .filter((route) => (route.label === "dog" || route.label === "symbol_star" || route.label === "t_shirt") && route.routeCoords.length > 1)
         .map((route) => ({
           id: `saved-${route.id}`,
           title: route.title,
@@ -126,6 +126,7 @@ export default function SavedRoutesPage() {
     void Promise.allSettled([
       loadSamples("/demo-sample-runs.json"),
       loadSamples("/approved-road-runs.json"),
+      loadSamples("/tshirt-sample-runs.json"),
     ]).then((results) => {
       if (!active) return;
       setSamples(results.flatMap((result) => result.status === "fulfilled" ? result.value : [])
@@ -147,7 +148,7 @@ export default function SavedRoutesPage() {
 
   const visibleCourses = useMemo(() => {
     if (tab === "posts") return posts;
-    const label = tab === "dog" ? "dog" : "symbol_star";
+    const label = tab === "dog" ? "dog" : tab === "star" ? "symbol_star" : "t_shirt";
     return [...saved, ...samples].filter((course) => course.label === label);
   }, [tab, posts, saved, samples]);
   const listedCourses = showAllCourses ? visibleCourses : visibleCourses.slice(0, 4);
@@ -157,7 +158,7 @@ export default function SavedRoutesPage() {
     position: course.center,
     title: course.title,
     count: index + 1,
-    kind: course.kind === "post" ? "communityPost" : course.label === "dog" ? "sampleDog" : "sampleStar",
+    kind: course.kind === "post" ? "communityPost" : course.label === "dog" ? "sampleDog" : course.label === "t_shirt" ? "sampleTshirt" : "sampleStar",
   }));
   const selectedMapRoutes = selected ? [{
     points: selected.route,
@@ -221,6 +222,7 @@ export default function SavedRoutesPage() {
             ["posts", "전체 게시물"],
             ["dog", "강아지 코스"],
             ["star", "별 코스"],
+            ["tshirt", "티셔츠 코스"],
           ] as const).map(([value, label]) => (
             <button key={value} type="button" role="tab" aria-selected={tab === value}
               onClick={() => { setTab(value); setSelectedId(null); setShowAllCourses(false); }}
@@ -275,7 +277,7 @@ export default function SavedRoutesPage() {
 
         <section className="order-1 rounded-[24px] border border-black/10 bg-white p-3 shadow-sm lg:order-2 lg:p-4" role="tabpanel">
           <div className="mb-3 flex items-center justify-between">
-            <h2 className="text-lg font-bold text-black">{tab === "posts" ? "전체 게시물" : tab === "dog" ? "강아지 코스" : "별 코스"}</h2>
+            <h2 className="text-lg font-bold text-black">{tab === "posts" ? "전체 게시물" : tab === "dog" ? "강아지 코스" : tab === "star" ? "별 코스" : "티셔츠 코스"}</h2>
             <span className="text-sm text-[#666]">{visibleCourses.length}개</span>
           </div>
           {isLoading ? <p className="py-8 text-center text-sm text-[#666]">코스를 불러오는 중입니다.</p> : null}

router/ai/scripts/build_tshirt_sample_runs.py

@@ -0,0 +1,55 @@
+"""Build runnable T-shirt map samples from the supplied GPX tracks.
+
+Usage: python build_tshirt_sample_runs.py GPX_DIRECTORY OUTPUT_JSON
+"""
+
+import json
+import math
+import re
+import sys
+import xml.etree.ElementTree as ET
+from pathlib import Path
+
+
+def distance_km(a, b):
+    lat1, lon1 = map(math.radians, a)
+    lat2, lon2 = map(math.radians, b)
+    half = math.sin((lat2 - lat1) / 2) ** 2 + math.cos(lat1) * math.cos(lat2) * math.sin((lon2 - lon1) / 2) ** 2
+    return 12742 * math.asin(min(1, math.sqrt(half)))
+
+
+def build(source: Path):
+    paths = sorted(source.glob("tshirt_osm_*.gpx"))
+    if not paths:
+        raise ValueError("No tshirt_osm_*.gpx files found")
+    samples = []
+    for path in paths:
+        match = re.fullmatch(r"tshirt_osm_(\d{3})_[\d.]+km\.gpx", path.name)
+        if not match:
+            raise ValueError(f"Unexpected T-shirt GPX filename: {path.name}")
+        route = [
+            [round(float(node.attrib["lat"]), 6), round(float(node.attrib["lon"]), 6)]
+            for node in ET.parse(path).iter()
+            if node.tag.rsplit("}", 1)[-1] == "trkpt"
+        ]
+        if len(route) < 12 or any(not 33 <= lat <= 39 or not 124 <= lon <= 132 for lat, lon in route):
+            raise ValueError(f"Invalid Korean GPX route: {path.name}")
+        samples.append({
+            "id": f"tshirt-{match.group(1)}",
+            "label": "t_shirt",
+            "title": f"티셔츠 샘플 러닝 {match.group(1)}",
+            "distanceKm": round(sum(distance_km(a, b) for a, b in zip(route, route[1:])), 2),
+            "center": [round(sum(point[i] for point in route) / len(route), 6) for i in (0, 1)],
+            "route": route,
+        })
+    return samples
+
+
+if __name__ == "__main__":
+    if len(sys.argv) != 3:
+        raise SystemExit("Usage: build_tshirt_sample_runs.py GPX_DIRECTORY OUTPUT_JSON")
+    output = Path(sys.argv[2])
+    samples = build(Path(sys.argv[1]))
+    output.parent.mkdir(parents=True, exist_ok=True)
+    output.write_text(json.dumps(samples, ensure_ascii=False, separators=(",", ":")) + "\n", encoding="utf-8")
+    print(f"Built {len(samples)} T-shirt sample runs")