Leets-Official · jwj0620gcu · Feb 1, 2026 · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026
diff --git a/public/repair-marker.svg b/public/repair-marker.svg
diff --git a/src/app/root.tsx b/src/app/root.tsx
@@ -11,15 +11,22 @@ export const links = () => [
   { rel: 'manifest', href: '/site.webmanifest' },
 ];
 
+const KAKAO_SDK_URL_BASE = 'https://dapi.kakao.com/v2/maps/sdk.js';
+const kakaoMapKey = import.meta.env.VITE_KAKAO_JS_KEY;
+const kakaoMapSrc = kakaoMapKey
+  ? `${KAKAO_SDK_URL_BASE}?appkey=${kakaoMapKey}&libraries=services&autoload=false`
+  : null;
+
 export default function Root() {
   return (
     <html lang="ko">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="apple-mobile-web-app-title" content="LOOPiT" />
+        <meta name="apple-mobile-web-app-title" content="LOOPIT" />
         <Meta />
         <Links />
+        {kakaoMapSrc && <script src={kakaoMapSrc} defer />}
       </head>
       <body className="w-full overflow-x-hidden">
         <AppProviders>

diff --git a/src/app/routes.ts b/src/app/routes.ts
@@ -9,6 +9,7 @@ export default [
     route('buy/:id', 'routes/(main)/buy.detail.tsx'),
     route('sell', 'routes/(main)/sell.tsx'),
     route('sell/confirm', 'routes/(main)/sell.confirm.tsx'),
+    route('repair', 'routes/(main)/repair.tsx'),
     route('mypage', 'routes/(main)/mypage.tsx'),
     route('chatbot', 'routes/(main)/chatbot.tsx'),
     route('mypage/settings', 'routes/(main)/mypage.settings.tsx'),

diff --git a/src/app/routes/(main)/repair.tsx b/src/app/routes/(main)/repair.tsx
@@ -0,0 +1,3 @@
+import { RepairPage } from '@pages/repair';
+
+export default RepairPage;
diff --git a/src/pages/repair/index.ts b/src/pages/repair/index.ts
@@ -0,0 +1 @@
+export { default as RepairPage } from './ui/RepairPage';
diff --git a/src/pages/repair/model/types.ts b/src/pages/repair/model/types.ts
@@ -0,0 +1,84 @@
+export type RepairShop = {
+  id: string;
+  name: string;
+  address: string;
+  lat: number;
+  lng: number;
+  phone?: string;
+  distance?: number;
+  placeUrl?: string;
+};
+
+export type KakaoAddressResult = {
+  x: string;
+  y: string;
+};
+
+export type KakaoPlace = {
+  id: string;
+  place_name: string;
+  road_address_name: string;
+  address_name: string;
+  y: string;
+  x: string;
+  phone: string;
+  distance?: string;
+  place_url?: string;
+};
+
+export type KakaoPagination = {
+  hasNextPage: boolean;
+  nextPage: () => void;
+};
+
+export type KakaoMapInstance = {
+  setCenter: (latLng: unknown) => void;
+  setBounds: (bounds: unknown) => void;
+  panTo: (latLng: unknown) => void;
+};
+
+export type KakaoMarker = {
+  setMap: (map: KakaoMapInstance | null) => void;
+};
+
+export type KakaoOverlay = {
+  setMap: (map: KakaoMapInstance | null) => void;
+};
+
+export type KakaoLatLngBounds = {
+  extend: (latLng: unknown) => void;
+};
+
+export type KakaoMapsServices = {
+  Geocoder: new () => {
+    addressSearch: (query: string, cb: (result: unknown[], status: string) => void) => void;
+  };
+  Places: new () => {
+    keywordSearch: (
+      keyword: string,
+      cb: (data: unknown[], status: string, pagination: KakaoPagination) => void,
+      options: { location: unknown; radius: number }
+    ) => void;
+  };
+  Status: { OK: string };
+};
+
+export type KakaoMaps = {
+  LatLng: new (lat: number, lng: number) => unknown;
+  Map: new (container: HTMLElement, options: { center: unknown; level: number }) => KakaoMapInstance;
+  CustomOverlay: new (options: {
+    yAnchor: number;
+    zIndex: number;
+    content?: string;
+    position?: unknown;
+    clickable?: boolean;
+  }) => KakaoOverlay;
+  Marker: new (options: { map: KakaoMapInstance; position: unknown; image?: unknown }) => KakaoMarker;
+  MarkerImage: new (src: string, size: unknown, options: { offset: unknown }) => unknown;
+  Size: new (width: number, height: number) => unknown;
+  Point: new (x: number, y: number) => unknown;
+  LatLngBounds: new () => KakaoLatLngBounds;
+  event: { addListener: (target: unknown, event: string, handler: () => void) => void };
+  load?: (callback: () => void) => void;
+  services?: KakaoMapsServices;
+};
diff --git a/src/pages/repair/model/useRepairMap.ts b/src/pages/repair/model/useRepairMap.ts
@@ -0,0 +1,149 @@
+import { useEffect, useRef, useState } from 'react';
+import type { KakaoMapInstance, KakaoMaps, KakaoMarker, KakaoOverlay, RepairShop } from './types';
+
+const getKakaoMaps = () => (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao?.maps;
+
+const buildOverlayContent = (shop: RepairShop) => {
+  const phoneLink = shop.phone ? `<a href="tel:${shop.phone}">전화</a>` : '';
+  const routeLink = `https://map.kakao.com/link/to/${encodeURIComponent(shop.name)},${shop.lat},${shop.lng}`;
+  const detailLink = shop.placeUrl ? `<a href="${shop.placeUrl}" target="_blank" rel="noreferrer">상세</a>` : '';
+  const actions = [phoneLink, detailLink, `<a href="${routeLink}" target="_blank" rel="noreferrer">길찾기</a>`]
+    .filter(Boolean)
+    .join(' · ');
+
+  return `
+    <div style="position:relative; transform:translateY(-8px);">
+      <div style="padding:var(--padding-m) var(--spacing-s); font-size:12px; line-height:1.4; width:260px; background:var(--color-green-100); border-radius:var(--radius-m); border:2px solid var(--color-green-700); box-shadow:0 8px 20px rgba(17,203,176,0.18);">
+        <div style="font-weight:700; margin-bottom:var(--spacing-xxxxs); word-break:break-word; color:var(--color-green-900);">${shop.name}</div>
+        <div style="color:var(--color-green-800); margin-bottom:6px; word-break:break-word;">${shop.address}</div>
+        <div style="color:var(--color-green-900); font-weight:600; word-break:keep-all;">${actions}</div>
+      </div>
+      <div style="position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid var(--color-green-100);"></div>
+      <div style="position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:9px solid var(--color-green-700);"></div>
+    </div>
+  `;
+};
+
+export const useRepairMap = () => {
+  const mapRef = useRef<HTMLDivElement | null>(null);
+  const mapInstanceRef = useRef<KakaoMapInstance | null>(null);
+  const markersRef = useRef<KakaoMarker[]>([]);
+  const overlayRef = useRef<KakaoOverlay | null>(null);
+  const [isMapReady, setIsMapReady] = useState(false);
+
+  useEffect(() => {
+    const maps = getKakaoMaps();
+
+    if (!mapRef.current) {
+      return;
+    }
+
+    const initMap = () => {
+      if (!maps || !mapRef.current) {
+        return;
+      }
+
+      const center = new maps.LatLng(37.5665, 126.978);
+      const options = { center, level: 4 };
+
+      const map = new maps.Map(mapRef.current, options);
+      mapInstanceRef.current = map;
+      overlayRef.current = new maps.CustomOverlay({ yAnchor: 1, zIndex: 10, clickable: true });
+      maps.event.addListener(map, 'click', () => {
+        overlayRef.current?.setMap(null);
+      });
+      setIsMapReady(true);
+    };
+
+    if (maps?.load) {
+      maps.load(initMap);
+      return;
+    }
+
+    const timer = window.setInterval(() => {
+      if (maps?.load) {
+        window.clearInterval(timer);
+        maps.load(initMap);
+      }
+    }, 50);
+
+    return () => window.clearInterval(timer);
+  }, []);
+
+  const clearMarkers = () => {
+    markersRef.current.forEach((marker) => marker.setMap(null));
+    markersRef.current = [];
+  };
+
+  const setCenter = (lat: number, lng: number) => {
+    const maps = getKakaoMaps();
+    const map = mapInstanceRef.current;
+    if (!maps || !map) {
+      return;
+    }
+    map.setCenter(new maps.LatLng(lat, lng));
+  };
+
+  const openOverlayForShop = (shop: RepairShop) => {
+    const maps = getKakaoMaps();
+    const map = mapInstanceRef.current;
+    if (!maps || !map) {
+      return;
+    }
+
+    const position = new maps.LatLng(shop.lat, shop.lng);
+    map.panTo(position);
+    overlayRef.current?.setMap(null);
+
+    const overlay = new maps.CustomOverlay({
+      content: buildOverlayContent(shop),
+      position,
+      yAnchor: 1,
+      zIndex: 10,
+      clickable: true,
+    });
+
+    overlay.setMap(map);
+    overlayRef.current = overlay;
+  };
+
+  const setMarkers = (shops: RepairShop[]) => {
+    const maps = getKakaoMaps();
+    const map = mapInstanceRef.current;
+    if (!maps || !map) {
+      return;
+    }
+
+    clearMarkers();
+    if (shops.length === 0) {
+      return;
+    }
+
+    const markerImage = new maps.MarkerImage('/repair-marker.svg', new maps.Size(36, 48), {
+      offset: new maps.Point(18, 48),
+    });
+
+    const bounds = new maps.LatLngBounds();
+    shops.forEach((shop) => {
+      const position = new maps.LatLng(shop.lat, shop.lng);
+      const marker = new maps.Marker({ map, position, image: markerImage });
+      maps.event.addListener(marker, 'click', () => {
+        openOverlayForShop(shop);
+      });
+
+      markersRef.current.push(marker);
+      bounds.extend(position);
+    });
+
+    map.setBounds(bounds);
+  };
+
+  return {
+    mapRef,
+    isMapReady,
+    setCenter,
+    setMarkers,
+    clearMarkers,
+    openOverlayForShop,
+  };
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { RepairPage } from '@pages/repair';

		export default RepairPage;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as RepairPage } from './ui/RepairPage';