From ca40745100631c675c8a282e9c331c0ff82347a5 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Fri, 30 Jan 2026 20:07:19 +0900
Subject: [PATCH 01/21] =?UTF-8?q?feat:=20=EC=88=98=EB=A6=AC=EC=A0=90=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/routes.ts                | 1 +
 src/app/routes/(main)/repair.tsx | 3 +++
 2 files changed, 4 insertions(+)
 create mode 100644 src/app/routes/(main)/repair.tsx

diff --git a/src/app/routes.ts b/src/app/routes.ts
index 76e6b905..b057bbea 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -7,6 +7,7 @@ export default [
     index('routes/(main)/_index.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('mypage/settings', 'routes/(main)/mypage.settings.tsx'),
     route('mypage/profile', 'routes/(main)/mypage.profile.tsx'),
diff --git a/src/app/routes/(main)/repair.tsx b/src/app/routes/(main)/repair.tsx
new file mode 100644
index 00000000..59d89fd7
--- /dev/null
+++ b/src/app/routes/(main)/repair.tsx
@@ -0,0 +1,3 @@
+import { RepairPage } from '@pages/repair';
+
+export default RepairPage;

From db746fbc870981c1a96c9a4564dc6d0a381befd4 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Fri, 30 Jan 2026 20:08:48 +0900
Subject: [PATCH 02/21] =?UTF-8?q?feat:=ED=97=A4=EB=8D=94,=20=EC=A7=80?=
 =?UTF-8?q?=EB=8F=84=20=EC=84=B9=EC=85=98,=20=EC=88=98=EB=A6=AC=EC=A0=90?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/index.ts              |  1 +
 src/pages/repair/ui/RepairPage.tsx     | 45 ++++++++++++++++++++++
 src/pages/repair/ui/RepairShopCard.tsx | 53 ++++++++++++++++++++++++++
 3 files changed, 99 insertions(+)
 create mode 100644 src/pages/repair/index.ts
 create mode 100644 src/pages/repair/ui/RepairPage.tsx
 create mode 100644 src/pages/repair/ui/RepairShopCard.tsx

diff --git a/src/pages/repair/index.ts b/src/pages/repair/index.ts
new file mode 100644
index 00000000..f751eee0
--- /dev/null
+++ b/src/pages/repair/index.ts
@@ -0,0 +1 @@
+export { default as RepairPage } from './ui/RepairPage';
diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
new file mode 100644
index 00000000..2754a1f4
--- /dev/null
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -0,0 +1,45 @@
+import { SearchBar } from '@shared/ui/SearchBar';
+import { RepairShopCard } from './RepairShopCard';
+
+const SAMPLE_REPAIR_SHOPS = [
+  { id: 'repair-1', name: '수리점 이름', address: 'ㅇㅇ시 ㅇㅇ구', favoriteActive: true },
+  { id: 'repair-2', name: '수리점 이름', address: 'ㅇㅇ시 ㅇㅇ구', favoriteActive: false },
+] as const;
+
+export default function RepairPage() {
+  return (
+    <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pb-16 pt-[47px]">
+      <section
+        className="relative flex h-[395px] w-full flex-col items-start gap-[10px] self-stretch rounded-[var(--Radius-radius-L,24px)] border-2 border-solid border-[var(--Container-container-surface-default,#00B39B)] bg-[lightgray] px-[201px] pb-[18px] pt-[47px]"
+        aria-label="수리점 카카오 맵 지도 영역"
+      >
+        <div className="absolute left-1/2 top-[28px] w-[790px] -translate-x-1/2">
+          <SearchBar
+            className="w-full max-w-none"
+            placeholder="현재 위치하고 계신 곳의 주소를 적어주세요."
+            onSearch={() => {}}
+          />
+        </div>
+      </section>
+      <section className="flex flex-1 flex-col items-start gap-[45px] self-stretch" aria-label="수리점 목록 헤더">
+        <div className="flex w-full items-center justify-between">
+          <span className="font-pretendard text-[24px] font-semibold leading-[28px] text-black">
+            총 {SAMPLE_REPAIR_SHOPS.length}개
+          </span>
+          <button type="button" className="typo-body-1 text-[var(--Text-text-3,#C7C7CC)]">
+            거리순
+          </button>
+        </div>
+      </section>
+      <section className="flex w-full flex-col gap-6" aria-label="수리점 목록">
+        {SAMPLE_REPAIR_SHOPS.map((shop) => (
+          <RepairShopCard
+            key={shop.id}
+            name={shop.name}
+            address={shop.address}
+            favoriteActive={shop.favoriteActive}
+          />
+        ))}      </section>
+    </main>
+  );
+}
diff --git a/src/pages/repair/ui/RepairShopCard.tsx b/src/pages/repair/ui/RepairShopCard.tsx
new file mode 100644
index 00000000..b071d491
--- /dev/null
+++ b/src/pages/repair/ui/RepairShopCard.tsx
@@ -0,0 +1,53 @@
+import { Button } from '@shared/ui/Button/Button';
+import { FavoriteButton } from '@shared/ui/FavoriteButton';
+
+export type RepairShopCardProps = {
+  name: string;
+  address: string;
+  favoriteActive?: boolean;
+  onContact?: () => void;
+  onFindRoute?: () => void;
+};
+
+export const RepairShopCard = ({
+  name,
+  address,
+  favoriteActive = false,
+  onContact,
+  onFindRoute,
+}: RepairShopCardProps) => {
+  return (
+    <div className="flex w-full items-center justify-between gap-[31px] rounded-[var(--Radius-radius-L,24px)] bg-[var(--Container-container-background-button,#1C1C1E)] px-[42px] py-[44px]">
+      <div className="flex flex-1 flex-col items-start gap-[5px]">
+        <span className="font-pretendard text-[20px] font-bold leading-[24px] text-[var(--Text-text-1,#FFF)]">
+          {name}
+        </span>
+        <span className="font-pretendard text-[16px] font-semibold leading-[20px] text-[var(--Brand-primary,#13FFD0)]">
+          {address}
+        </span>
+      </div>
+
+      <div className="flex items-center gap-[31px]">
+        <FavoriteButton defaultActive={favoriteActive} variant="inverse" />
+        <div className="flex w-[159px] flex-col items-start gap-[15px]">
+          <Button
+            variant="fill"
+            size="full"
+            className="h-[44px] rounded-[var(--Radius-radius-L,24px)] bg-[var(--Text-text-1,#FFF)] text-[var(--Text-text-5,#1C1C1E)] hover:bg-gray-100"
+            onClick={onContact}
+          >
+            연락하기
+          </Button>
+          <Button
+            variant="outline"
+            size="full"
+            className="h-[44px] rounded-[var(--Radius-radius-L,24px)] border-2 border-[var(--Text-text-1,#FFF)] text-[var(--Text-text-1,#FFF)] hover:border-gray-200 hover:text-gray-200"
+            onClick={onFindRoute}
+          >
+            길 찾기
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

From fe80206c54a62aef0088faed36d35962c5419274 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Fri, 30 Jan 2026 20:10:01 +0900
Subject: [PATCH 03/21] =?UTF-8?q?feat:=20=EC=84=9C=EC=B9=98=EB=B0=94=20?=
 =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EB=B3=80=EC=A3=BC=20=EA=B0=80=EB=8A=A5?=
 =?UTF-8?q?=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/SearchBar/SearchBar.tsx         | 5 +++--
 src/shared/ui/SearchBar/SearchBar.variants.ts | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/shared/ui/SearchBar/SearchBar.tsx b/src/shared/ui/SearchBar/SearchBar.tsx
index abcdf447..97de6d6f 100644
--- a/src/shared/ui/SearchBar/SearchBar.tsx
+++ b/src/shared/ui/SearchBar/SearchBar.tsx
@@ -7,9 +7,10 @@ export interface SearchBarProps {
   onSearch: (query: string) => void;
   value?: string;
   onChange?: (value: string) => void;
+  className?: string;
 }
 
-export const SearchBar = ({ placeholder, onSearch, value, onChange }: SearchBarProps) => {
+export const SearchBar = ({ placeholder, onSearch, value, onChange, className }: SearchBarProps) => {
   const [internalQuery, setInternalQuery] = useState('');
   const [isFocused, setFocused] = useState(false);
 
@@ -37,7 +38,7 @@ export const SearchBar = ({ placeholder, onSearch, value, onChange }: SearchBarP
   };
 
   return (
-    <search className={styles.root()}>
+    <search className={styles.root({ className })}>
       <div className={styles.wrapper()} role="search">
         <SearchMagnifyingGlassIcon className={styles.icon()} aria-hidden="true" />
         <input
diff --git a/src/shared/ui/SearchBar/SearchBar.variants.ts b/src/shared/ui/SearchBar/SearchBar.variants.ts
index faf18bac..542edb50 100644
--- a/src/shared/ui/SearchBar/SearchBar.variants.ts
+++ b/src/shared/ui/SearchBar/SearchBar.variants.ts
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const searchBarVariants = tv({
   slots: {
-    root: ['flex', 'flex-col', 'w-full', 'max-w-[550px]'],
+    root: ['flex', 'flex-col', 'w-full'],
     wrapper: [
       'flex',
       'items-center',

From 0b3eaa8af24768799fd73734804a1b04bfcbee3e Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Fri, 30 Jan 2026 20:59:52 +0900
Subject: [PATCH 04/21] =?UTF-8?q?feat:=EC=B9=B4=EC=B9=B4=EC=98=A4=20?=
 =?UTF-8?q?=EB=A7=B5=20=EB=A0=8C=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/root.tsx                   |  8 ++++-
 src/pages/repair/ui/RepairPage.tsx | 54 ++++++++++++++++++++++++++++--
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/app/root.tsx b/src/app/root.tsx
index 1994e571..fa940e23 100644
--- a/src/app/root.tsx
+++ b/src/app/root.tsx
@@ -11,15 +11,21 @@ export const links = () => [
   { rel: 'manifest', href: '/site.webmanifest' },
 ];
 
+const kakaoMapKey = import.meta.env.VITE_KAKAO_JS_KEY;
+const kakaoMapSrc = kakaoMapKey
+  ? `https://dapi.kakao.com/v2/maps/sdk.js?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/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index 2754a1f4..4126e696 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -1,4 +1,5 @@
 import { SearchBar } from '@shared/ui/SearchBar';
+import { useEffect, useRef } from 'react';
 import { RepairShopCard } from './RepairShopCard';
 
 const SAMPLE_REPAIR_SHOPS = [
@@ -7,13 +8,61 @@ const SAMPLE_REPAIR_SHOPS = [
 ] as const;
 
 export default function RepairPage() {
+  const mapRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const { kakao } = window as typeof window & {
+      kakao?: {
+        maps?: {
+          LatLng: new (lat: number, lng: number) => unknown;
+          Map: new (container: HTMLElement, options: { center: unknown; level: number }) => unknown;
+          load?: (callback: () => void) => void;
+        };
+      };
+    };
+
+    if (!mapRef.current) {
+      return;
+    }
+
+    const initMap = () => {
+      if (!kakao?.maps || !mapRef.current) {
+        return;
+      }
+
+      const center = new kakao.maps.LatLng(37.5665, 126.978);
+      const options = { center, level: 3 };
+
+      new kakao.maps.Map(mapRef.current, options);
+    };
+
+    if (kakao?.maps?.load) {
+      kakao.maps.load(initMap);
+      return;
+    }
+
+    const timer = window.setInterval(() => {
+      if (kakao?.maps?.load) {
+        window.clearInterval(timer);
+        kakao.maps.load(initMap);
+      }
+    }, 50);
+
+    return () => window.clearInterval(timer);
+  }, []);
+
   return (
     <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pb-16 pt-[47px]">
       <section
         className="relative flex h-[395px] w-full flex-col items-start gap-[10px] self-stretch rounded-[var(--Radius-radius-L,24px)] border-2 border-solid border-[var(--Container-container-surface-default,#00B39B)] bg-[lightgray] px-[201px] pb-[18px] pt-[47px]"
         aria-label="수리점 카카오 맵 지도 영역"
       >
-        <div className="absolute left-1/2 top-[28px] w-[790px] -translate-x-1/2">
+        <div
+          ref={mapRef}
+          className="absolute inset-0 z-0 rounded-[var(--Radius-radius-L,24px)]"
+          aria-hidden="true"
+        />
+        <div className="absolute left-1/2 top-[28px] z-10 w-[790px] -translate-x-1/2">
           <SearchBar
             className="w-full max-w-none"
             placeholder="현재 위치하고 계신 곳의 주소를 적어주세요."
@@ -39,7 +88,8 @@ export default function RepairPage() {
             address={shop.address}
             favoriteActive={shop.favoriteActive}
           />
-        ))}      </section>
+        ))}
+      </section>
     </main>
   );
 }

From cac5f328561c8d1c8e056e2d4468327d1a28ad75 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Fri, 30 Jan 2026 21:27:30 +0900
Subject: [PATCH 05/21] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4?=
 =?UTF-8?q?=EB=A7=B5=EA=B3=BC=20=EC=84=9C=EC=B9=98=EB=B0=94=20=EC=A7=80?=
 =?UTF-8?q?=EB=8F=84=20=EC=97=B0=EA=B2=B0,=20=EC=88=98=EB=A6=AC=EC=A0=90?=
 =?UTF-8?q?=20=EA=B2=80=EC=83=89,=20=EB=A7=88=EC=BB=A4=20=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/ui/RepairPage.tsx | 108 ++++++++++++++++++++++-------
 1 file changed, 82 insertions(+), 26 deletions(-)

diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index 4126e696..bd66aabc 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -1,39 +1,33 @@
 import { SearchBar } from '@shared/ui/SearchBar';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { RepairShopCard } from './RepairShopCard';
 
-const SAMPLE_REPAIR_SHOPS = [
-  { id: 'repair-1', name: '수리점 이름', address: 'ㅇㅇ시 ㅇㅇ구', favoriteActive: true },
-  { id: 'repair-2', name: '수리점 이름', address: 'ㅇㅇ시 ㅇㅇ구', favoriteActive: false },
-] as const;
+type RepairShop = {
+  id: string;
+  name: string;
+  address: string;
+  phone?: string;
+  distance?: number;
+};
 
 export default function RepairPage() {
   const mapRef = useRef<HTMLDivElement | null>(null);
+  const mapInstanceRef = useRef<any>(null);
+  const markersRef = useRef<any[]>([]);
+  const [shops, setShops] = useState<RepairShop[]>([]);
 
   useEffect(() => {
-    const { kakao } = window as typeof window & {
-      kakao?: {
-        maps?: {
-          LatLng: new (lat: number, lng: number) => unknown;
-          Map: new (container: HTMLElement, options: { center: unknown; level: number }) => unknown;
-          load?: (callback: () => void) => void;
-        };
-      };
-    };
+    const kakao = (window as any).kakao;
 
-    if (!mapRef.current) {
-      return;
-    }
+    if (!mapRef.current) return;
 
     const initMap = () => {
-      if (!kakao?.maps || !mapRef.current) {
-        return;
-      }
+      if (!kakao?.maps || !mapRef.current) return;
 
       const center = new kakao.maps.LatLng(37.5665, 126.978);
-      const options = { center, level: 3 };
+      const options = { center, level: 4 };
 
-      new kakao.maps.Map(mapRef.current, options);
+      mapInstanceRef.current = new kakao.maps.Map(mapRef.current, options);
     };
 
     if (kakao?.maps?.load) {
@@ -51,6 +45,69 @@ export default function RepairPage() {
     return () => window.clearInterval(timer);
   }, []);
 
+  const clearMarkers = () => {
+    markersRef.current.forEach((marker) => marker.setMap(null));
+    markersRef.current = [];
+  };
+
+  const handleSearch = (query: string) => {
+    const kakao = (window as any).kakao;
+    const map = mapInstanceRef.current;
+
+    if (!kakao?.maps?.services || !map) {return;}
+    if (!query.trim()) {return;}
+
+    const geocoder = new kakao.maps.services.Geocoder();
+
+    geocoder.addressSearch(query, (result: any[], status: string) => {
+      if (status !== kakao.maps.services.Status.OK || !result?.[0]) {
+        clearMarkers();
+        setShops([]);
+        return;
+      }
+
+      const { x, y } = result[0];
+      const center = new kakao.maps.LatLng(y, x);
+      map.setCenter(center);
+
+      const places = new kakao.maps.services.Places();
+
+      places.keywordSearch(
+        '수리점',
+        (data: any[], placesStatus: string) => {
+          clearMarkers();
+
+          if (placesStatus !== kakao.maps.services.Status.OK || !data?.length) {
+            setShops([]);
+            return;
+          }
+
+          const bounds = new kakao.maps.LatLngBounds();
+          const nextShops: RepairShop[] = data.map((place) => {
+            const position = new kakao.maps.LatLng(place.y, place.x);
+            const marker = new kakao.maps.Marker({ map, position });
+            markersRef.current.push(marker);
+            bounds.extend(position);
+
+            return {
+              id: place.id,
+              name: place.place_name,
+              address: place.road_address_name || place.address_name,
+              phone: place.phone,
+              distance: place.distance ? Number(place.distance) : undefined,
+            };
+          });
+
+          map.setBounds(bounds);
+
+          nextShops.sort((a, b) => (a.distance ?? Number.MAX_VALUE) - (b.distance ?? Number.MAX_VALUE));
+          setShops(nextShops);
+        },
+        { location: center, radius: 3000 }
+      );
+    });
+  };
+
   return (
     <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pb-16 pt-[47px]">
       <section
@@ -66,14 +123,14 @@ export default function RepairPage() {
           <SearchBar
             className="w-full max-w-none"
             placeholder="현재 위치하고 계신 곳의 주소를 적어주세요."
-            onSearch={() => {}}
+            onSearch={handleSearch}
           />
         </div>
       </section>
       <section className="flex flex-1 flex-col items-start gap-[45px] self-stretch" aria-label="수리점 목록 헤더">
         <div className="flex w-full items-center justify-between">
           <span className="font-pretendard text-[24px] font-semibold leading-[28px] text-black">
-            총 {SAMPLE_REPAIR_SHOPS.length}개
+            총 {shops.length}개
           </span>
           <button type="button" className="typo-body-1 text-[var(--Text-text-3,#C7C7CC)]">
             거리순
@@ -81,12 +138,11 @@ export default function RepairPage() {
         </div>
       </section>
       <section className="flex w-full flex-col gap-6" aria-label="수리점 목록">
-        {SAMPLE_REPAIR_SHOPS.map((shop) => (
+        {shops.map((shop) => (
           <RepairShopCard
             key={shop.id}
             name={shop.name}
             address={shop.address}
-            favoriteActive={shop.favoriteActive}
           />
         ))}
       </section>

From 980b444c4059b0d22ed76404675e5dc7af134310 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Fri, 30 Jan 2026 21:53:56 +0900
Subject: [PATCH 06/21] =?UTF-8?q?feat:=20=EC=88=98=EB=A6=AC=EC=A0=90=20?=
 =?UTF-8?q?=ED=99=95=EC=9E=A5=20=EA=B2=80=EC=83=89=20=EA=B0=80=EB=8A=A5,?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/ui/RepairPage.tsx | 140 ++++++++++++++++++-----------
 1 file changed, 90 insertions(+), 50 deletions(-)

diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index bd66aabc..1a2864ac 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -6,10 +6,24 @@ type RepairShop = {
   id: string;
   name: string;
   address: string;
+  lat: number;
+  lng: number;
   phone?: string;
   distance?: number;
 };
 
+const SEARCH_KEYWORDS = [
+  '아이폰 수리',
+  '갤럭시 수리',
+  '삼성폰 수리',
+  '애플 서비스센터',
+  '애플 수리',
+  '삼성전자 서비스센터',
+  '휴대폰 수리',
+  '핸드폰 수리',
+  '액정',
+];
+
 export default function RepairPage() {
   const mapRef = useRef<HTMLDivElement | null>(null);
   const mapInstanceRef = useRef<any>(null);
@@ -19,10 +33,14 @@ export default function RepairPage() {
   useEffect(() => {
     const kakao = (window as any).kakao;
 
-    if (!mapRef.current) return;
+    if (!mapRef.current) {
+      return;
+    }
 
     const initMap = () => {
-      if (!kakao?.maps || !mapRef.current) return;
+      if (!kakao?.maps || !mapRef.current) {
+        return;
+      }
 
       const center = new kakao.maps.LatLng(37.5665, 126.978);
       const options = { center, level: 4 };
@@ -54,8 +72,12 @@ export default function RepairPage() {
     const kakao = (window as any).kakao;
     const map = mapInstanceRef.current;
 
-    if (!kakao?.maps?.services || !map) {return;}
-    if (!query.trim()) {return;}
+    if (!kakao?.maps?.services || !map) {
+      return;
+    }
+    if (!query.trim()) {
+      return;
+    }
 
     const geocoder = new kakao.maps.services.Geocoder();
 
@@ -70,56 +92,78 @@ export default function RepairPage() {
       const center = new kakao.maps.LatLng(y, x);
       map.setCenter(center);
 
-      const places = new kakao.maps.services.Places();
-
-      places.keywordSearch(
-        '수리점',
-        (data: any[], placesStatus: string) => {
-          clearMarkers();
+      const searchByKeyword = (keyword: string) =>
+        new Promise<RepairShop[]>((resolve) => {
+          const collected: RepairShop[] = [];
+          const places = new kakao.maps.services.Places();
+
+          const handleResult = (data: any[], placesStatus: string, pagination: any) => {
+            if (placesStatus === kakao.maps.services.Status.OK && data?.length) {
+              data.forEach((place) => {
+                collected.push({
+                  id: place.id,
+                  name: place.place_name,
+                  address: place.road_address_name || place.address_name,
+                  lat: Number(place.y),
+                  lng: Number(place.x),
+                  phone: place.phone,
+                  distance: place.distance ? Number(place.distance) : undefined,
+                });
+              });
+            }
+
+            if (pagination?.hasNextPage) {
+              pagination.nextPage();
+              return;
+            }
+
+            resolve(collected);
+          };
+
+          places.keywordSearch(keyword, handleResult, { location: center, radius: 5000 });
+        });
+
+      Promise.all(SEARCH_KEYWORDS.map((keyword) => searchByKeyword(keyword))).then((results) => {
+        clearMarkers();
 
-          if (placesStatus !== kakao.maps.services.Status.OK || !data?.length) {
-            setShops([]);
-            return;
+        const uniqueMap = new Map<string, RepairShop>();
+        results.flat().forEach((shop) => {
+          if (!uniqueMap.has(shop.id)) {
+            uniqueMap.set(shop.id, shop);
           }
+        });
+
+        const nextShops = Array.from(uniqueMap.values());
 
-          const bounds = new kakao.maps.LatLngBounds();
-          const nextShops: RepairShop[] = data.map((place) => {
-            const position = new kakao.maps.LatLng(place.y, place.x);
-            const marker = new kakao.maps.Marker({ map, position });
-            markersRef.current.push(marker);
-            bounds.extend(position);
-
-            return {
-              id: place.id,
-              name: place.place_name,
-              address: place.road_address_name || place.address_name,
-              phone: place.phone,
-              distance: place.distance ? Number(place.distance) : undefined,
-            };
-          });
-
-          map.setBounds(bounds);
-
-          nextShops.sort((a, b) => (a.distance ?? Number.MAX_VALUE) - (b.distance ?? Number.MAX_VALUE));
-          setShops(nextShops);
-        },
-        { location: center, radius: 3000 }
-      );
+        if (nextShops.length === 0) {
+          setShops([]);
+          return;
+        }
+
+        const bounds = new kakao.maps.LatLngBounds();
+        nextShops.forEach((shop) => {
+          const position = new kakao.maps.LatLng(shop.lat, shop.lng);
+          const marker = new kakao.maps.Marker({ map, position });
+          markersRef.current.push(marker);
+          bounds.extend(position);
+        });
+
+        map.setBounds(bounds);
+
+        nextShops.sort((a, b) => (a.distance ?? Number.MAX_VALUE) - (b.distance ?? Number.MAX_VALUE));
+        setShops(nextShops);
+      });
     });
   };
 
   return (
-    <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pb-16 pt-[47px]">
+    <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pt-[47px] pb-16">
       <section
-        className="relative flex h-[395px] w-full flex-col items-start gap-[10px] self-stretch rounded-[var(--Radius-radius-L,24px)] border-2 border-solid border-[var(--Container-container-surface-default,#00B39B)] bg-[lightgray] px-[201px] pb-[18px] pt-[47px]"
+        className="relative flex h-[395px] w-full flex-col items-start gap-[10px] self-stretch rounded-[var(--Radius-radius-L,24px)] border-2 border-solid border-[var(--Container-container-surface-default,#00B39B)] bg-[lightgray] px-[201px] pt-[47px] pb-[18px]"
         aria-label="수리점 카카오 맵 지도 영역"
       >
-        <div
-          ref={mapRef}
-          className="absolute inset-0 z-0 rounded-[var(--Radius-radius-L,24px)]"
-          aria-hidden="true"
-        />
-        <div className="absolute left-1/2 top-[28px] z-10 w-[790px] -translate-x-1/2">
+        <div ref={mapRef} className="absolute inset-0 z-0 rounded-[var(--Radius-radius-L,24px)]" aria-hidden="true" />
+        <div className="absolute top-[28px] left-1/2 z-10 w-[790px] -translate-x-1/2">
           <SearchBar
             className="w-full max-w-none"
             placeholder="현재 위치하고 계신 곳의 주소를 적어주세요."
@@ -129,7 +173,7 @@ export default function RepairPage() {
       </section>
       <section className="flex flex-1 flex-col items-start gap-[45px] self-stretch" aria-label="수리점 목록 헤더">
         <div className="flex w-full items-center justify-between">
-          <span className="font-pretendard text-[24px] font-semibold leading-[28px] text-black">
+          <span className="font-pretendard text-[24px] leading-[28px] font-semibold text-black">
             총 {shops.length}개
           </span>
           <button type="button" className="typo-body-1 text-[var(--Text-text-3,#C7C7CC)]">
@@ -139,11 +183,7 @@ export default function RepairPage() {
       </section>
       <section className="flex w-full flex-col gap-6" aria-label="수리점 목록">
         {shops.map((shop) => (
-          <RepairShopCard
-            key={shop.id}
-            name={shop.name}
-            address={shop.address}
-          />
+          <RepairShopCard key={shop.id} name={shop.name} address={shop.address} />
         ))}
       </section>
     </main>

From 8e6e3a31bc0cfea3adc8c41fdf8b0293b2513956 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Fri, 30 Jan 2026 22:54:02 +0900
Subject: [PATCH 07/21] =?UTF-8?q?feat:=EB=A7=88=EC=BB=A4=20=EC=9D=B8?=
 =?UTF-8?q?=ED=8F=AC=EC=9C=88=EB=8F=84=EC=9A=B0(=EC=A0=84=ED=99=94/?=
 =?UTF-8?q?=EC=83=81=EC=84=B8/=EA=B8=B8=EC=B0=BE=EA=B8=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/ui/RepairPage.tsx | 31 ++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index 1a2864ac..635e08ff 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -10,6 +10,7 @@ type RepairShop = {
   lng: number;
   phone?: string;
   distance?: number;
+  placeUrl?: string;
 };
 
 const SEARCH_KEYWORDS = [
@@ -28,6 +29,7 @@ export default function RepairPage() {
   const mapRef = useRef<HTMLDivElement | null>(null);
   const mapInstanceRef = useRef<any>(null);
   const markersRef = useRef<any[]>([]);
+  const overlayRef = useRef<any>(null);
   const [shops, setShops] = useState<RepairShop[]>([]);
 
   useEffect(() => {
@@ -46,6 +48,7 @@ export default function RepairPage() {
       const options = { center, level: 4 };
 
       mapInstanceRef.current = new kakao.maps.Map(mapRef.current, options);
+      overlayRef.current = new kakao.maps.CustomOverlay({ yAnchor: 1, zIndex: 10 });
     };
 
     if (kakao?.maps?.load) {
@@ -108,6 +111,7 @@ export default function RepairPage() {
                   lng: Number(place.x),
                   phone: place.phone,
                   distance: place.distance ? Number(place.distance) : undefined,
+                  placeUrl: place.place_url,
                 });
               });
             }
@@ -144,6 +148,33 @@ export default function RepairPage() {
         nextShops.forEach((shop) => {
           const position = new kakao.maps.LatLng(shop.lat, shop.lng);
           const marker = new kakao.maps.Marker({ map, position });
+          const overlay = overlayRef.current;
+
+          kakao.maps.event.addListener(marker, 'click', () => {
+            if (!overlay) return;
+            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(' · ');
+
+            const content = `
+              <div style="position:relative; transform:translateY(-8px);">
+                <div style="padding:10px 12px; font-size:12px; line-height:1.4; width:260px; background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
+                  <div style="font-weight:700; margin-bottom:4px; word-break:break-word; color:#111;">${shop.name}</div>
+                  <div style="color:#666; margin-bottom:6px; word-break:break-word;">${shop.address}</div>
+                  <div style="color:#111; 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 #fff;"></div>
+              </div>
+            `;
+
+            overlay.setContent(content);
+            overlay.setPosition(position);
+            overlay.setMap(map);
+          });
+
           markersRef.current.push(marker);
           bounds.extend(position);
         });

From 28f9eadbdd82a1c4b0ce02ae64b15e5620b3bcb0 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Fri, 30 Jan 2026 22:56:40 +0900
Subject: [PATCH 08/21] =?UTF-8?q?=EB=A7=88=EC=BB=A4=20=ED=81=B4=EB=A6=AD?=
 =?UTF-8?q?=EC=8B=9C=20=EC=A7=80=EB=8F=84=20=EC=A4=91=EC=95=99=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/ui/RepairPage.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index 635e08ff..8ce4e079 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -148,10 +148,9 @@ export default function RepairPage() {
         nextShops.forEach((shop) => {
           const position = new kakao.maps.LatLng(shop.lat, shop.lng);
           const marker = new kakao.maps.Marker({ map, position });
-          const overlay = overlayRef.current;
-
           kakao.maps.event.addListener(marker, 'click', () => {
-            if (!overlay) return;
+            overlayRef.current?.setMap(null);
+            map.panTo(position);
             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>` : '';
@@ -170,9 +169,15 @@ export default function RepairPage() {
               </div>
             `;
 
-            overlay.setContent(content);
-            overlay.setPosition(position);
+            const overlay = new kakao.maps.CustomOverlay({
+              content,
+              position,
+              yAnchor: 1,
+              zIndex: 10,
+            });
+
             overlay.setMap(map);
+            overlayRef.current = overlay;
           });
 
           markersRef.current.push(marker);

From 195d13d73c8feeaaeed6ece9f08550b9575b453d Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Fri, 30 Jan 2026 23:06:51 +0900
Subject: [PATCH 09/21] =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EC=97=B0=EB=9D=BD,?=
 =?UTF-8?q?=20=EA=B8=B8=20=EC=B0=BE=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0,=20ui=20=EA=B2=B0=EA=B3=BC=20=EB=B6=84?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/ui/RepairPage.tsx     | 37 ++++++++++++++++++++++--
 src/pages/repair/ui/RepairShopCard.tsx | 39 ++++++++++++++++++++++++--
 2 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index 8ce4e079..6300d53a 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -31,6 +31,9 @@ export default function RepairPage() {
   const markersRef = useRef<any[]>([]);
   const overlayRef = useRef<any>(null);
   const [shops, setShops] = useState<RepairShop[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   useEffect(() => {
     const kakao = (window as any).kakao;
@@ -81,6 +84,9 @@ export default function RepairPage() {
     if (!query.trim()) {
       return;
     }
+    setIsSearching(true);
+    setHasSearched(true);
+    setErrorMessage(null);
 
     const geocoder = new kakao.maps.services.Geocoder();
 
@@ -88,6 +94,8 @@ export default function RepairPage() {
       if (status !== kakao.maps.services.Status.OK || !result?.[0]) {
         clearMarkers();
         setShops([]);
+        setIsSearching(false);
+        setErrorMessage('검색에 실패했습니다');
         return;
       }
 
@@ -141,6 +149,7 @@ export default function RepairPage() {
 
         if (nextShops.length === 0) {
           setShops([]);
+          setIsSearching(false);
           return;
         }
 
@@ -188,6 +197,7 @@ export default function RepairPage() {
 
         nextShops.sort((a, b) => (a.distance ?? Number.MAX_VALUE) - (b.distance ?? Number.MAX_VALUE));
         setShops(nextShops);
+        setIsSearching(false);
       });
     });
   };
@@ -218,9 +228,30 @@ export default function RepairPage() {
         </div>
       </section>
       <section className="flex w-full flex-col gap-6" aria-label="수리점 목록">
-        {shops.map((shop) => (
-          <RepairShopCard key={shop.id} name={shop.name} address={shop.address} />
-        ))}
+        {isSearching && (
+          <p className="typo-body-2 text-[var(--Text-text-3,#C7C7CC)]">검색 중...</p>
+        )}
+        {!isSearching && errorMessage && (
+          <p className="typo-body-2 text-[var(--Text-text-3,#C7C7CC)]">{errorMessage}</p>
+        )}
+        {!isSearching && !errorMessage && hasSearched && shops.length === 0 && (
+          <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--Text-text-3,#C7C7CC)]">
+            주변에 수리점이 없습니다
+          </p>
+        )}
+        {!isSearching &&
+          !errorMessage &&
+          shops.map((shop) => (
+            <RepairShopCard
+              key={shop.id}
+              name={shop.name}
+              address={shop.address}
+              phone={shop.phone}
+              lat={shop.lat}
+              lng={shop.lng}
+              placeUrl={shop.placeUrl}
+            />
+          ))}
       </section>
     </main>
   );
diff --git a/src/pages/repair/ui/RepairShopCard.tsx b/src/pages/repair/ui/RepairShopCard.tsx
index b071d491..bd18d598 100644
--- a/src/pages/repair/ui/RepairShopCard.tsx
+++ b/src/pages/repair/ui/RepairShopCard.tsx
@@ -5,6 +5,10 @@ export type RepairShopCardProps = {
   name: string;
   address: string;
   favoriteActive?: boolean;
+  phone?: string;
+  lat?: number;
+  lng?: number;
+  placeUrl?: string;
   onContact?: () => void;
   onFindRoute?: () => void;
 };
@@ -13,9 +17,38 @@ export const RepairShopCard = ({
   name,
   address,
   favoriteActive = false,
+  phone,
+  lat,
+  lng,
+  placeUrl,
   onContact,
   onFindRoute,
 }: RepairShopCardProps) => {
+  const handleContact = () => {
+    if (onContact) {
+      onContact();
+      return;
+    }
+    if (phone) {
+      window.location.href = `tel:${phone}`;
+    }
+  };
+
+  const handleFindRoute = () => {
+    if (onFindRoute) {
+      onFindRoute();
+      return;
+    }
+    if (lat !== undefined && lng !== undefined) {
+      const url = `https://map.kakao.com/link/to/${encodeURIComponent(name)},${lat},${lng}`;
+      window.open(url, '_blank', 'noopener,noreferrer');
+      return;
+    }
+    if (placeUrl) {
+      window.open(placeUrl, '_blank', 'noopener,noreferrer');
+    }
+  };
+
   return (
     <div className="flex w-full items-center justify-between gap-[31px] rounded-[var(--Radius-radius-L,24px)] bg-[var(--Container-container-background-button,#1C1C1E)] px-[42px] py-[44px]">
       <div className="flex flex-1 flex-col items-start gap-[5px]">
@@ -34,15 +67,15 @@ export const RepairShopCard = ({
             variant="fill"
             size="full"
             className="h-[44px] rounded-[var(--Radius-radius-L,24px)] bg-[var(--Text-text-1,#FFF)] text-[var(--Text-text-5,#1C1C1E)] hover:bg-gray-100"
-            onClick={onContact}
-          >
+            onClick={handleContact}
+            >
             연락하기
           </Button>
           <Button
             variant="outline"
             size="full"
             className="h-[44px] rounded-[var(--Radius-radius-L,24px)] border-2 border-[var(--Text-text-1,#FFF)] text-[var(--Text-text-1,#FFF)] hover:border-gray-200 hover:text-gray-200"
-            onClick={onFindRoute}
+            onClick={handleFindRoute}
           >
             길 찾기
           </Button>

From 8b850440e4169299ffc79c64c6b972dfc2e13496 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sat, 31 Jan 2026 01:20:21 +0900
Subject: [PATCH 10/21] =?UTF-8?q?feat:=EB=AC=B8=EA=B5=AC,=EB=A7=88?=
 =?UTF-8?q?=EC=BB=A4=20ui,=EC=9C=88=EB=8F=84=EC=9A=B0=20ui=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/ui/RepairPage.tsx     | 109 +++++++++++++++----------
 src/pages/repair/ui/RepairShopCard.tsx |  22 +++--
 2 files changed, 82 insertions(+), 49 deletions(-)

diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index 6300d53a..ae5b56ab 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -95,7 +95,7 @@ export default function RepairPage() {
         clearMarkers();
         setShops([]);
         setIsSearching(false);
-        setErrorMessage('검색에 실패했습니다');
+        setErrorMessage('검색에 실패했습니다.');
         return;
       }
 
@@ -103,6 +103,12 @@ export default function RepairPage() {
       const center = new kakao.maps.LatLng(y, x);
       map.setCenter(center);
 
+      const markerImage = new kakao.maps.MarkerImage(
+        '/markers/repair-marker.svg',
+        new kakao.maps.Size(36, 48),
+        { offset: new kakao.maps.Point(18, 48) }
+      );
+
       const searchByKeyword = (keyword: string) =>
         new Promise<RepairShop[]>((resolve) => {
           const collected: RepairShop[] = [];
@@ -132,7 +138,7 @@ export default function RepairPage() {
             resolve(collected);
           };
 
-          places.keywordSearch(keyword, handleResult, { location: center, radius: 5000 });
+          places.keywordSearch(keyword, handleResult, { location: center, radius: 3000 });
         });
 
       Promise.all(SEARCH_KEYWORDS.map((keyword) => searchByKeyword(keyword))).then((results) => {
@@ -156,37 +162,9 @@ export default function RepairPage() {
         const bounds = new kakao.maps.LatLngBounds();
         nextShops.forEach((shop) => {
           const position = new kakao.maps.LatLng(shop.lat, shop.lng);
-          const marker = new kakao.maps.Marker({ map, position });
+          const marker = new kakao.maps.Marker({ map, position, image: markerImage });
           kakao.maps.event.addListener(marker, 'click', () => {
-            overlayRef.current?.setMap(null);
-            map.panTo(position);
-            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(' · ');
-
-            const content = `
-              <div style="position:relative; transform:translateY(-8px);">
-                <div style="padding:10px 12px; font-size:12px; line-height:1.4; width:260px; background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
-                  <div style="font-weight:700; margin-bottom:4px; word-break:break-word; color:#111;">${shop.name}</div>
-                  <div style="color:#666; margin-bottom:6px; word-break:break-word;">${shop.address}</div>
-                  <div style="color:#111; 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 #fff;"></div>
-              </div>
-            `;
-
-            const overlay = new kakao.maps.CustomOverlay({
-              content,
-              position,
-              yAnchor: 1,
-              zIndex: 10,
-            });
-
-            overlay.setMap(map);
-            overlayRef.current = overlay;
+            openOverlayForShop(shop);
           });
 
           markersRef.current.push(marker);
@@ -202,14 +180,53 @@ export default function RepairPage() {
     });
   };
 
+  const openOverlayForShop = (shop: RepairShop) => {
+    const kakao = (window as any).kakao;
+    const map = mapInstanceRef.current;
+    if (!kakao?.maps || !map) return;
+
+    const position = new kakao.maps.LatLng(shop.lat, shop.lng);
+    map.panTo(position);
+    overlayRef.current?.setMap(null);
+
+    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(' · ');
+
+    const content = `
+      <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>
+    `;
+
+    const overlay = new kakao.maps.CustomOverlay({
+      content,
+      position,
+      yAnchor: 1,
+      zIndex: 10,
+    });
+
+    overlay.setMap(map);
+    overlayRef.current = overlay;
+  };
+
   return (
     <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pt-[47px] pb-16">
       <section
-        className="relative flex h-[395px] w-full flex-col items-start gap-[10px] self-stretch rounded-[var(--Radius-radius-L,24px)] border-2 border-solid border-[var(--Container-container-surface-default,#00B39B)] bg-[lightgray] px-[201px] pt-[47px] pb-[18px]"
+        className="relative flex h-[395px] w-full flex-col items-start gap-[var(--spacing-xxs)] self-stretch rounded-[var(--radius-l)] border-2 border-solid border-[var(--color-green-700)] bg-[lightgray] px-[201px] pt-[47px] pb-[18px]"
         aria-label="수리점 카카오 맵 지도 영역"
       >
-        <div ref={mapRef} className="absolute inset-0 z-0 rounded-[var(--Radius-radius-L,24px)]" aria-hidden="true" />
-        <div className="absolute top-[28px] left-1/2 z-10 w-[790px] -translate-x-1/2">
+        <div ref={mapRef} className="absolute inset-0 z-0 rounded-[var(--radius-l)]" aria-hidden="true" />
+        <div className="absolute top-[var(--spacing-xxl)] left-1/2 z-10 w-[790px] -translate-x-1/2">
           <SearchBar
             className="w-full max-w-none"
             placeholder="현재 위치하고 계신 곳의 주소를 적어주세요."
@@ -219,24 +236,33 @@ export default function RepairPage() {
       </section>
       <section className="flex flex-1 flex-col items-start gap-[45px] self-stretch" aria-label="수리점 목록 헤더">
         <div className="flex w-full items-center justify-between">
-          <span className="font-pretendard text-[24px] leading-[28px] font-semibold text-black">
+          <span className="font-pretendard text-[24px] leading-[28px] font-semibold text-[var(--color-black)]">
             총 {shops.length}개
           </span>
-          <button type="button" className="typo-body-1 text-[var(--Text-text-3,#C7C7CC)]">
+          <button type="button" className="typo-body-1 text-[var(--color-gray-300)]">
             거리순
           </button>
         </div>
       </section>
       <section className="flex w-full flex-col gap-6" aria-label="수리점 목록">
         {isSearching && (
-          <p className="typo-body-2 text-[var(--Text-text-3,#C7C7CC)]">검색 중...</p>
+          <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--color-gray-300)]">
+            검색 중...
+          </p>
         )}
         {!isSearching && errorMessage && (
-          <p className="typo-body-2 text-[var(--Text-text-3,#C7C7CC)]">{errorMessage}</p>
+          <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--color-gray-300)]">
+            {errorMessage}
+          </p>
         )}
         {!isSearching && !errorMessage && hasSearched && shops.length === 0 && (
-          <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--Text-text-3,#C7C7CC)]">
-            주변에 수리점이 없습니다
+          <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--color-gray-300)]">
+            주변에 수리점이 없습니다.
+          </p>
+        )}
+        {!isSearching && !errorMessage && !hasSearched && (
+          <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--color-gray-300)]">
+            주소를 입력하면 주변 수리점을 보여드려요.
           </p>
         )}
         {!isSearching &&
@@ -250,6 +276,7 @@ export default function RepairPage() {
               lat={shop.lat}
               lng={shop.lng}
               placeUrl={shop.placeUrl}
+              onSelect={() => openOverlayForShop(shop)}
             />
           ))}
       </section>
diff --git a/src/pages/repair/ui/RepairShopCard.tsx b/src/pages/repair/ui/RepairShopCard.tsx
index bd18d598..4725f0ce 100644
--- a/src/pages/repair/ui/RepairShopCard.tsx
+++ b/src/pages/repair/ui/RepairShopCard.tsx
@@ -11,6 +11,7 @@ export type RepairShopCardProps = {
   placeUrl?: string;
   onContact?: () => void;
   onFindRoute?: () => void;
+  onSelect?: () => void;
 };
 
 export const RepairShopCard = ({
@@ -23,6 +24,7 @@ export const RepairShopCard = ({
   placeUrl,
   onContact,
   onFindRoute,
+  onSelect,
 }: RepairShopCardProps) => {
   const handleContact = () => {
     if (onContact) {
@@ -50,37 +52,41 @@ export const RepairShopCard = ({
   };
 
   return (
-    <div className="flex w-full items-center justify-between gap-[31px] rounded-[var(--Radius-radius-L,24px)] bg-[var(--Container-container-background-button,#1C1C1E)] px-[42px] py-[44px]">
+    <button
+      type="button"
+      onClick={onSelect}
+      className="flex w-full items-center justify-between gap-[31px] rounded-[var(--radius-l)] bg-[var(--color-gray-900)] px-[42px] py-[44px] text-left"
+    >
       <div className="flex flex-1 flex-col items-start gap-[5px]">
-        <span className="font-pretendard text-[20px] font-bold leading-[24px] text-[var(--Text-text-1,#FFF)]">
+        <span className="font-pretendard text-[20px] font-bold leading-[24px] text-[var(--color-white)]">
           {name}
         </span>
-        <span className="font-pretendard text-[16px] font-semibold leading-[20px] text-[var(--Brand-primary,#13FFD0)]">
+        <span className="font-pretendard text-[16px] font-semibold leading-[20px] text-[var(--color-brand-primary)]">
           {address}
         </span>
       </div>
 
-      <div className="flex items-center gap-[31px]">
+      <div className="flex items-center gap-[31px]" onClick={(event) => event.stopPropagation()}>
         <FavoriteButton defaultActive={favoriteActive} variant="inverse" />
         <div className="flex w-[159px] flex-col items-start gap-[15px]">
           <Button
             variant="fill"
             size="full"
-            className="h-[44px] rounded-[var(--Radius-radius-L,24px)] bg-[var(--Text-text-1,#FFF)] text-[var(--Text-text-5,#1C1C1E)] hover:bg-gray-100"
+            className="h-[44px] rounded-[var(--radius-l)] bg-[var(--color-white)] text-[var(--color-gray-900)] hover:bg-[var(--color-gray-100)]"
             onClick={handleContact}
-            >
+          >
             연락하기
           </Button>
           <Button
             variant="outline"
             size="full"
-            className="h-[44px] rounded-[var(--Radius-radius-L,24px)] border-2 border-[var(--Text-text-1,#FFF)] text-[var(--Text-text-1,#FFF)] hover:border-gray-200 hover:text-gray-200"
+            className="h-[44px] rounded-[var(--radius-l)] border-2 border-[var(--color-white)] text-[var(--color-white)] hover:border-[var(--color-gray-200)] hover:text-[var(--color-gray-200)]"
             onClick={handleFindRoute}
           >
             길 찾기
           </Button>
         </div>
       </div>
-    </div>
+    </button>
   );
 };

From 58da8f69a418ffaca5bd30589868b937ad51a1b9 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sat, 31 Jan 2026 01:21:44 +0900
Subject: [PATCH 11/21] =?UTF-8?q?feat:=EA=B8=B0=EB=B3=B8=20=EB=A7=88?=
 =?UTF-8?q?=EC=BB=A4=EC=97=90=EC=84=9C=20=EB=AF=BC=ED=8A=B8=EC=83=89?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/repair-marker.svg           | 9 +++++++++
 src/pages/repair/ui/RepairPage.tsx | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 public/repair-marker.svg

diff --git a/public/repair-marker.svg b/public/repair-marker.svg
new file mode 100644
index 00000000..da102fbd
--- /dev/null
+++ b/public/repair-marker.svg
@@ -0,0 +1,9 @@
+<svg width="36" height="48" viewBox="0 0 36 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M18 1.5C11.0964 1.5 5.5 7.09644 5.5 14C5.5 22.5 18 46.5 18 46.5C18 46.5 30.5 22.5 30.5 14C30.5 7.09644 24.9036 1.5 18 1.5Z"
+    fill="#13FFD0"
+    stroke="#11CBB0"
+    stroke-width="2"
+  />
+  <circle cx="18" cy="14" r="5.5" fill="#D0F7F1"/>
+</svg>
diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index ae5b56ab..e9c94fd4 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -104,7 +104,7 @@ export default function RepairPage() {
       map.setCenter(center);
 
       const markerImage = new kakao.maps.MarkerImage(
-        '/markers/repair-marker.svg',
+        '/repair-marker.svg',
         new kakao.maps.Size(36, 48),
         { offset: new kakao.maps.Point(18, 48) }
       );

From fd6c274018c058346b1433c0bb2021c78078006e Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sat, 31 Jan 2026 01:44:31 +0900
Subject: [PATCH 12/21] =?UTF-8?q?refactor:=EB=A1=9C=EC=A7=81=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8D=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=EA=B3=B5?=
 =?UTF-8?q?=EC=9A=A9=20=ED=83=80=EC=9E=85=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/model/types.ts           |  10 +
 src/pages/repair/model/useRepairMap.ts    | 140 ++++++++++++
 src/pages/repair/model/useRepairSearch.ts | 124 +++++++++++
 src/pages/repair/ui/RepairPage.tsx        | 249 ++--------------------
 4 files changed, 290 insertions(+), 233 deletions(-)
 create mode 100644 src/pages/repair/model/types.ts
 create mode 100644 src/pages/repair/model/useRepairMap.ts
 create mode 100644 src/pages/repair/model/useRepairSearch.ts

diff --git a/src/pages/repair/model/types.ts b/src/pages/repair/model/types.ts
new file mode 100644
index 00000000..21ce5551
--- /dev/null
+++ b/src/pages/repair/model/types.ts
@@ -0,0 +1,10 @@
+export type RepairShop = {
+  id: string;
+  name: string;
+  address: string;
+  lat: number;
+  lng: number;
+  phone?: string;
+  distance?: number;
+  placeUrl?: string;
+};
diff --git a/src/pages/repair/model/useRepairMap.ts b/src/pages/repair/model/useRepairMap.ts
new file mode 100644
index 00000000..ec1d4f6f
--- /dev/null
+++ b/src/pages/repair/model/useRepairMap.ts
@@ -0,0 +1,140 @@
+import { useEffect, useRef, useState } from 'react';
+import type { RepairShop } from './types';
+
+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<any>(null);
+  const markersRef = useRef<any[]>([]);
+  const overlayRef = useRef<any>(null);
+  const [isMapReady, setIsMapReady] = useState(false);
+
+  useEffect(() => {
+    const kakao = (window as any).kakao;
+
+    if (!mapRef.current) {
+      return;
+    }
+
+    const initMap = () => {
+      if (!kakao?.maps || !mapRef.current) {
+        return;
+      }
+
+      const center = new kakao.maps.LatLng(37.5665, 126.978);
+      const options = { center, level: 4 };
+
+      const map = new kakao.maps.Map(mapRef.current, options);
+      mapInstanceRef.current = map;
+      overlayRef.current = new kakao.maps.CustomOverlay({ yAnchor: 1, zIndex: 10 });
+      kakao.maps.event.addListener(map, 'click', () => {
+        overlayRef.current?.setMap(null);
+      });
+      setIsMapReady(true);
+    };
+
+    if (kakao?.maps?.load) {
+      kakao.maps.load(initMap);
+      return;
+    }
+
+    const timer = window.setInterval(() => {
+      if (kakao?.maps?.load) {
+        window.clearInterval(timer);
+        kakao.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 kakao = (window as any).kakao;
+    const map = mapInstanceRef.current;
+    if (!kakao?.maps || !map) {return;}
+    map.setCenter(new kakao.maps.LatLng(lat, lng));
+  };
+
+  const openOverlayForShop = (shop: RepairShop) => {
+    const kakao = (window as any).kakao;
+    const map = mapInstanceRef.current;
+    if (!kakao?.maps || !map) {return;}
+
+    const position = new kakao.maps.LatLng(shop.lat, shop.lng);
+    map.panTo(position);
+    overlayRef.current?.setMap(null);
+
+    const overlay = new kakao.maps.CustomOverlay({
+      content: buildOverlayContent(shop),
+      position,
+      yAnchor: 1,
+      zIndex: 10,
+    });
+
+    overlay.setMap(map);
+    overlayRef.current = overlay;
+  };
+
+  const setMarkers = (shops: RepairShop[]) => {
+    const kakao = (window as any).kakao;
+    const map = mapInstanceRef.current;
+    if (!kakao?.maps || !map) {return;}
+
+    clearMarkers();
+    if (shops.length === 0) {return;}
+
+    const markerImage = new kakao.maps.MarkerImage(
+      '/repair-marker.svg',
+      new kakao.maps.Size(36, 48),
+      { offset: new kakao.maps.Point(18, 48) }
+    );
+
+    const bounds = new kakao.maps.LatLngBounds();
+    shops.forEach((shop) => {
+      const position = new kakao.maps.LatLng(shop.lat, shop.lng);
+      const marker = new kakao.maps.Marker({ map, position, image: markerImage });
+      kakao.maps.event.addListener(marker, 'click', () => {
+        openOverlayForShop(shop);
+      });
+
+      markersRef.current.push(marker);
+      bounds.extend(position);
+    });
+
+    map.setBounds(bounds);
+  };
+
+  return {
+    mapRef,
+    isMapReady,
+    setCenter,
+    setMarkers,
+    clearMarkers,
+    openOverlayForShop,
+  };
+};
diff --git a/src/pages/repair/model/useRepairSearch.ts b/src/pages/repair/model/useRepairSearch.ts
new file mode 100644
index 00000000..cc155b18
--- /dev/null
+++ b/src/pages/repair/model/useRepairSearch.ts
@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { useRepairMap } from './useRepairMap';
+import type { RepairShop } from './types';
+
+
+const SEARCH_KEYWORDS = [
+  '아이폰 수리',
+  '갤럭시 수리',
+  '삼성폰 수리',
+  '애플 서비스센터',
+  '애플 수리',
+  '삼성전자 서비스센터',
+  '휴대폰 수리',
+  '핸드폰 수리',
+  '액정',
+];
+
+const SEARCH_RADIUS_METERS = 5000;
+
+export const useRepairSearch = () => {
+  const { mapRef, isMapReady, setCenter, setMarkers, clearMarkers, openOverlayForShop } = useRepairMap();
+  const [shops, setShops] = useState<RepairShop[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleSearch = (query: string) => {
+    const kakao = (window as any).kakao;
+
+    if (!kakao?.maps?.services || !isMapReady) {
+      return;
+    }
+    if (!query.trim()) {
+      return;
+    }
+
+    setIsSearching(true);
+    setHasSearched(true);
+    setErrorMessage(null);
+
+    const geocoder = new kakao.maps.services.Geocoder();
+
+    geocoder.addressSearch(query, (result: any[], status: string) => {
+      if (status !== kakao.maps.services.Status.OK || !result?.[0]) {
+        clearMarkers();
+        setShops([]);
+        setIsSearching(false);
+        setErrorMessage('검색에 실패했습니다.');
+        return;
+      }
+
+      const { x, y } = result[0];
+      setCenter(Number(y), Number(x));
+
+      const searchByKeyword = (keyword: string) =>
+        new Promise<RepairShop[]>((resolve) => {
+          const collected: RepairShop[] = [];
+          const places = new kakao.maps.services.Places();
+          const center = new kakao.maps.LatLng(y, x);
+
+          const handleResult = (data: any[], placesStatus: string, pagination: any) => {
+            if (placesStatus === kakao.maps.services.Status.OK && data?.length) {
+              data.forEach((place) => {
+                collected.push({
+                  id: place.id,
+                  name: place.place_name,
+                  address: place.road_address_name || place.address_name,
+                  lat: Number(place.y),
+                  lng: Number(place.x),
+                  phone: place.phone,
+                  distance: place.distance ? Number(place.distance) : undefined,
+                  placeUrl: place.place_url,
+                });
+              });
+            }
+
+            if (pagination?.hasNextPage) {
+              pagination.nextPage();
+              return;
+            }
+
+            resolve(collected);
+          };
+
+          places.keywordSearch(keyword, handleResult, { location: center, radius: SEARCH_RADIUS_METERS });
+        });
+
+      Promise.all(SEARCH_KEYWORDS.map((keyword) => searchByKeyword(keyword))).then((results) => {
+        clearMarkers();
+
+        const uniqueMap = new Map<string, RepairShop>();
+        results.flat().forEach((shop) => {
+          if (!uniqueMap.has(shop.id)) {
+            uniqueMap.set(shop.id, shop);
+          }
+        });
+
+        const nextShops = Array.from(uniqueMap.values());
+
+        if (nextShops.length === 0) {
+          setShops([]);
+          setIsSearching(false);
+          return;
+        }
+
+        setMarkers(nextShops);
+
+        nextShops.sort((a, b) => (a.distance ?? Number.MAX_VALUE) - (b.distance ?? Number.MAX_VALUE));
+        setShops(nextShops);
+        setIsSearching(false);
+      });
+    });
+  };
+
+  return {
+    mapRef,
+    shops,
+    isSearching,
+    hasSearched,
+    errorMessage,
+    handleSearch,
+    openOverlayForShop,
+  };
+};
diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index e9c94fd4..60c04449 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -1,223 +1,16 @@
 import { SearchBar } from '@shared/ui/SearchBar';
-import { useEffect, useRef, useState } from 'react';
 import { RepairShopCard } from './RepairShopCard';
+import { useRepairSearch } from '../model/useRepairSearch';
 
-type RepairShop = {
-  id: string;
-  name: string;
-  address: string;
-  lat: number;
-  lng: number;
-  phone?: string;
-  distance?: number;
-  placeUrl?: string;
-};
-
-const SEARCH_KEYWORDS = [
-  '아이폰 수리',
-  '갤럭시 수리',
-  '삼성폰 수리',
-  '애플 서비스센터',
-  '애플 수리',
-  '삼성전자 서비스센터',
-  '휴대폰 수리',
-  '핸드폰 수리',
-  '액정',
-];
-
-export default function RepairPage() {
-  const mapRef = useRef<HTMLDivElement | null>(null);
-  const mapInstanceRef = useRef<any>(null);
-  const markersRef = useRef<any[]>([]);
-  const overlayRef = useRef<any>(null);
-  const [shops, setShops] = useState<RepairShop[]>([]);
-  const [isSearching, setIsSearching] = useState(false);
-  const [hasSearched, setHasSearched] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
-  useEffect(() => {
-    const kakao = (window as any).kakao;
-
-    if (!mapRef.current) {
-      return;
-    }
-
-    const initMap = () => {
-      if (!kakao?.maps || !mapRef.current) {
-        return;
-      }
-
-      const center = new kakao.maps.LatLng(37.5665, 126.978);
-      const options = { center, level: 4 };
-
-      mapInstanceRef.current = new kakao.maps.Map(mapRef.current, options);
-      overlayRef.current = new kakao.maps.CustomOverlay({ yAnchor: 1, zIndex: 10 });
-    };
-
-    if (kakao?.maps?.load) {
-      kakao.maps.load(initMap);
-      return;
-    }
-
-    const timer = window.setInterval(() => {
-      if (kakao?.maps?.load) {
-        window.clearInterval(timer);
-        kakao.maps.load(initMap);
-      }
-    }, 50);
-
-    return () => window.clearInterval(timer);
-  }, []);
-
-  const clearMarkers = () => {
-    markersRef.current.forEach((marker) => marker.setMap(null));
-    markersRef.current = [];
-  };
-
-  const handleSearch = (query: string) => {
-    const kakao = (window as any).kakao;
-    const map = mapInstanceRef.current;
-
-    if (!kakao?.maps?.services || !map) {
-      return;
-    }
-    if (!query.trim()) {
-      return;
-    }
-    setIsSearching(true);
-    setHasSearched(true);
-    setErrorMessage(null);
-
-    const geocoder = new kakao.maps.services.Geocoder();
-
-    geocoder.addressSearch(query, (result: any[], status: string) => {
-      if (status !== kakao.maps.services.Status.OK || !result?.[0]) {
-        clearMarkers();
-        setShops([]);
-        setIsSearching(false);
-        setErrorMessage('검색에 실패했습니다.');
-        return;
-      }
-
-      const { x, y } = result[0];
-      const center = new kakao.maps.LatLng(y, x);
-      map.setCenter(center);
-
-      const markerImage = new kakao.maps.MarkerImage(
-        '/repair-marker.svg',
-        new kakao.maps.Size(36, 48),
-        { offset: new kakao.maps.Point(18, 48) }
-      );
-
-      const searchByKeyword = (keyword: string) =>
-        new Promise<RepairShop[]>((resolve) => {
-          const collected: RepairShop[] = [];
-          const places = new kakao.maps.services.Places();
-
-          const handleResult = (data: any[], placesStatus: string, pagination: any) => {
-            if (placesStatus === kakao.maps.services.Status.OK && data?.length) {
-              data.forEach((place) => {
-                collected.push({
-                  id: place.id,
-                  name: place.place_name,
-                  address: place.road_address_name || place.address_name,
-                  lat: Number(place.y),
-                  lng: Number(place.x),
-                  phone: place.phone,
-                  distance: place.distance ? Number(place.distance) : undefined,
-                  placeUrl: place.place_url,
-                });
-              });
-            }
-
-            if (pagination?.hasNextPage) {
-              pagination.nextPage();
-              return;
-            }
+const MessageText = ({ children }: { children: string }) => (
+  <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--color-gray-300)]">
+    {children}
+  </p>
+);
 
-            resolve(collected);
-          };
-
-          places.keywordSearch(keyword, handleResult, { location: center, radius: 3000 });
-        });
-
-      Promise.all(SEARCH_KEYWORDS.map((keyword) => searchByKeyword(keyword))).then((results) => {
-        clearMarkers();
-
-        const uniqueMap = new Map<string, RepairShop>();
-        results.flat().forEach((shop) => {
-          if (!uniqueMap.has(shop.id)) {
-            uniqueMap.set(shop.id, shop);
-          }
-        });
-
-        const nextShops = Array.from(uniqueMap.values());
-
-        if (nextShops.length === 0) {
-          setShops([]);
-          setIsSearching(false);
-          return;
-        }
-
-        const bounds = new kakao.maps.LatLngBounds();
-        nextShops.forEach((shop) => {
-          const position = new kakao.maps.LatLng(shop.lat, shop.lng);
-          const marker = new kakao.maps.Marker({ map, position, image: markerImage });
-          kakao.maps.event.addListener(marker, 'click', () => {
-            openOverlayForShop(shop);
-          });
-
-          markersRef.current.push(marker);
-          bounds.extend(position);
-        });
-
-        map.setBounds(bounds);
-
-        nextShops.sort((a, b) => (a.distance ?? Number.MAX_VALUE) - (b.distance ?? Number.MAX_VALUE));
-        setShops(nextShops);
-        setIsSearching(false);
-      });
-    });
-  };
-
-  const openOverlayForShop = (shop: RepairShop) => {
-    const kakao = (window as any).kakao;
-    const map = mapInstanceRef.current;
-    if (!kakao?.maps || !map) return;
-
-    const position = new kakao.maps.LatLng(shop.lat, shop.lng);
-    map.panTo(position);
-    overlayRef.current?.setMap(null);
-
-    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(' · ');
-
-    const content = `
-      <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>
-    `;
-
-    const overlay = new kakao.maps.CustomOverlay({
-      content,
-      position,
-      yAnchor: 1,
-      zIndex: 10,
-    });
-
-    overlay.setMap(map);
-    overlayRef.current = overlay;
-  };
+const RepairPage = () => {
+  const { mapRef, shops, isSearching, hasSearched, errorMessage, handleSearch, openOverlayForShop } =
+    useRepairSearch();
 
   return (
     <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pt-[47px] pb-16">
@@ -245,25 +38,13 @@ export default function RepairPage() {
         </div>
       </section>
       <section className="flex w-full flex-col gap-6" aria-label="수리점 목록">
-        {isSearching && (
-          <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--color-gray-300)]">
-            검색 중...
-          </p>
-        )}
-        {!isSearching && errorMessage && (
-          <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--color-gray-300)]">
-            {errorMessage}
-          </p>
-        )}
+        {isSearching && <MessageText>검색 중...</MessageText>}
+        {!isSearching && errorMessage && <MessageText>{errorMessage}</MessageText>}
         {!isSearching && !errorMessage && hasSearched && shops.length === 0 && (
-          <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--color-gray-300)]">
-            주변에 수리점이 없습니다.
-          </p>
+          <MessageText>주변에 수리점이 없습니다.</MessageText>
         )}
         {!isSearching && !errorMessage && !hasSearched && (
-          <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--color-gray-300)]">
-            주소를 입력하면 주변 수리점을 보여드려요.
-          </p>
+          <MessageText>주소를 입력하면 주변 수리점을 보여드려요.</MessageText>
         )}
         {!isSearching &&
           !errorMessage &&
@@ -282,4 +63,6 @@ export default function RepairPage() {
       </section>
     </main>
   );
-}
+};
+
+export default RepairPage;

From 0715c5ee17154dabc053c56bc69b2c27b125df41 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sat, 31 Jan 2026 01:48:15 +0900
Subject: [PATCH 13/21] =?UTF-8?q?feat:=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/ui/RepairPage.tsx     | 6 +++---
 src/pages/repair/ui/RepairShopCard.tsx | 9 ++++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index 60c04449..aa40f100 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -13,13 +13,13 @@ const RepairPage = () => {
     useRepairSearch();
 
   return (
-    <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pt-[47px] pb-16">
+    <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pb-16 pt-8 md:pt-[47px]">
       <section
-        className="relative flex h-[395px] w-full flex-col items-start gap-[var(--spacing-xxs)] self-stretch rounded-[var(--radius-l)] border-2 border-solid border-[var(--color-green-700)] bg-[lightgray] px-[201px] pt-[47px] pb-[18px]"
+        className="relative flex h-[320px] w-full flex-col items-start gap-[var(--spacing-xxs)] self-stretch rounded-[var(--radius-l)] border-2 border-solid border-[var(--color-green-700)] bg-[lightgray] px-4 pt-8 pb-4 md:h-[360px] md:px-12 md:pt-[47px] md:pb-[18px] xl:h-[395px] xl:px-[201px]"
         aria-label="수리점 카카오 맵 지도 영역"
       >
         <div ref={mapRef} className="absolute inset-0 z-0 rounded-[var(--radius-l)]" aria-hidden="true" />
-        <div className="absolute top-[var(--spacing-xxl)] left-1/2 z-10 w-[790px] -translate-x-1/2">
+        <div className="absolute left-1/2 top-[var(--spacing-xxl)] z-10 w-[calc(100%-32px)] max-w-[790px] -translate-x-1/2 md:w-[calc(100%-96px)] xl:w-[790px]">
           <SearchBar
             className="w-full max-w-none"
             placeholder="현재 위치하고 계신 곳의 주소를 적어주세요."
diff --git a/src/pages/repair/ui/RepairShopCard.tsx b/src/pages/repair/ui/RepairShopCard.tsx
index 4725f0ce..fa0122ec 100644
--- a/src/pages/repair/ui/RepairShopCard.tsx
+++ b/src/pages/repair/ui/RepairShopCard.tsx
@@ -55,7 +55,7 @@ export const RepairShopCard = ({
     <button
       type="button"
       onClick={onSelect}
-      className="flex w-full items-center justify-between gap-[31px] rounded-[var(--radius-l)] bg-[var(--color-gray-900)] px-[42px] py-[44px] text-left"
+      className="flex w-full flex-col items-start justify-between gap-6 rounded-[var(--radius-l)] bg-[var(--color-gray-900)] px-6 py-8 text-left md:flex-row md:items-center md:gap-[31px] md:px-[42px] md:py-[44px]"
     >
       <div className="flex flex-1 flex-col items-start gap-[5px]">
         <span className="font-pretendard text-[20px] font-bold leading-[24px] text-[var(--color-white)]">
@@ -66,9 +66,12 @@ export const RepairShopCard = ({
         </span>
       </div>
 
-      <div className="flex items-center gap-[31px]" onClick={(event) => event.stopPropagation()}>
+      <div
+        className="flex w-full items-center justify-between gap-4 md:w-auto md:gap-[31px]"
+        onClick={(event) => event.stopPropagation()}
+      >
         <FavoriteButton defaultActive={favoriteActive} variant="inverse" />
-        <div className="flex w-[159px] flex-col items-start gap-[15px]">
+        <div className="flex w-full flex-1 flex-col items-start gap-[15px] md:w-[159px] md:flex-none">
           <Button
             variant="fill"
             size="full"

From e540c0f9f8b2d6d97fd45f581717a24f863bbfe5 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sat, 31 Jan 2026 02:17:21 +0900
Subject: [PATCH 14/21] =?UTF-8?q?fix:=EB=A6=B0=ED=8A=B8=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0=20=EB=B0=8F=20prettier=20?=
 =?UTF-8?q?=ED=8F=AC=EB=A7=B7=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/model/types.ts               | 73 +++++++++++++++++++
 src/pages/repair/model/useRepairMap.ts        | 43 ++++++-----
 src/pages/repair/model/useRepairSearch.ts     | 17 +++--
 src/pages/repair/ui/RepairPage.tsx            |  9 +--
 src/pages/repair/ui/RepairShopCard.tsx        | 45 ++++++++----
 .../ui/FavoriteButton/FavoriteButton.tsx      |  7 +-
 6 files changed, 147 insertions(+), 47 deletions(-)

diff --git a/src/pages/repair/model/types.ts b/src/pages/repair/model/types.ts
index 21ce5551..31d735c0 100644
--- a/src/pages/repair/model/types.ts
+++ b/src/pages/repair/model/types.ts
@@ -8,3 +8,76 @@ export type RepairShop = {
   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;
+  }) => 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
index ec1d4f6f..6571efb9 100644
--- a/src/pages/repair/model/useRepairMap.ts
+++ b/src/pages/repair/model/useRepairMap.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import type { RepairShop } from './types';
+import type { KakaoMapInstance, KakaoMaps, KakaoMarker, KakaoOverlay, RepairShop } from './types';
 
 const buildOverlayContent = (shop: RepairShop) => {
   const phoneLink = shop.phone ? `<a href="tel:${shop.phone}">전화</a>` : '';
@@ -24,13 +24,13 @@ const buildOverlayContent = (shop: RepairShop) => {
 
 export const useRepairMap = () => {
   const mapRef = useRef<HTMLDivElement | null>(null);
-  const mapInstanceRef = useRef<any>(null);
-  const markersRef = useRef<any[]>([]);
-  const overlayRef = useRef<any>(null);
+  const mapInstanceRef = useRef<KakaoMapInstance | null>(null);
+  const markersRef = useRef<KakaoMarker[]>([]);
+  const overlayRef = useRef<KakaoOverlay | null>(null);
   const [isMapReady, setIsMapReady] = useState(false);
 
   useEffect(() => {
-    const kakao = (window as any).kakao;
+    const kakao = (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao;
 
     if (!mapRef.current) {
       return;
@@ -46,7 +46,7 @@ export const useRepairMap = () => {
 
       const map = new kakao.maps.Map(mapRef.current, options);
       mapInstanceRef.current = map;
-      overlayRef.current = new kakao.maps.CustomOverlay({ yAnchor: 1, zIndex: 10 });
+      overlayRef.current = new kakao.maps.CustomOverlay({ yAnchor: 1, zIndex: 10, clickable: true });
       kakao.maps.event.addListener(map, 'click', () => {
         overlayRef.current?.setMap(null);
       });
@@ -74,16 +74,20 @@ export const useRepairMap = () => {
   };
 
   const setCenter = (lat: number, lng: number) => {
-    const kakao = (window as any).kakao;
+    const kakao = (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao;
     const map = mapInstanceRef.current;
-    if (!kakao?.maps || !map) {return;}
+    if (!kakao?.maps || !map) {
+      return;
+    }
     map.setCenter(new kakao.maps.LatLng(lat, lng));
   };
 
   const openOverlayForShop = (shop: RepairShop) => {
-    const kakao = (window as any).kakao;
+    const kakao = (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao;
     const map = mapInstanceRef.current;
-    if (!kakao?.maps || !map) {return;}
+    if (!kakao?.maps || !map) {
+      return;
+    }
 
     const position = new kakao.maps.LatLng(shop.lat, shop.lng);
     map.panTo(position);
@@ -94,6 +98,7 @@ export const useRepairMap = () => {
       position,
       yAnchor: 1,
       zIndex: 10,
+      clickable: true,
     });
 
     overlay.setMap(map);
@@ -101,18 +106,20 @@ export const useRepairMap = () => {
   };
 
   const setMarkers = (shops: RepairShop[]) => {
-    const kakao = (window as any).kakao;
+    const kakao = (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao;
     const map = mapInstanceRef.current;
-    if (!kakao?.maps || !map) {return;}
+    if (!kakao?.maps || !map) {
+      return;
+    }
 
     clearMarkers();
-    if (shops.length === 0) {return;}
+    if (shops.length === 0) {
+      return;
+    }
 
-    const markerImage = new kakao.maps.MarkerImage(
-      '/repair-marker.svg',
-      new kakao.maps.Size(36, 48),
-      { offset: new kakao.maps.Point(18, 48) }
-    );
+    const markerImage = new kakao.maps.MarkerImage('/repair-marker.svg', new kakao.maps.Size(36, 48), {
+      offset: new kakao.maps.Point(18, 48),
+    });
 
     const bounds = new kakao.maps.LatLngBounds();
     shops.forEach((shop) => {
diff --git a/src/pages/repair/model/useRepairSearch.ts b/src/pages/repair/model/useRepairSearch.ts
index cc155b18..c78731b6 100644
--- a/src/pages/repair/model/useRepairSearch.ts
+++ b/src/pages/repair/model/useRepairSearch.ts
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { useRepairMap } from './useRepairMap';
-import type { RepairShop } from './types';
-
+import type { KakaoAddressResult, KakaoMaps, KakaoPagination, KakaoPlace, RepairShop } from './types';
 
 const SEARCH_KEYWORDS = [
   '아이폰 수리',
@@ -25,7 +24,7 @@ export const useRepairSearch = () => {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const handleSearch = (query: string) => {
-    const kakao = (window as any).kakao;
+    const kakao = (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao;
 
     if (!kakao?.maps?.services || !isMapReady) {
       return;
@@ -40,8 +39,9 @@ export const useRepairSearch = () => {
 
     const geocoder = new kakao.maps.services.Geocoder();
 
-    geocoder.addressSearch(query, (result: any[], status: string) => {
-      if (status !== kakao.maps.services.Status.OK || !result?.[0]) {
+    geocoder.addressSearch(query, (result: unknown[], status: string) => {
+      const [firstResult] = result as KakaoAddressResult[];
+      if (status !== kakao.maps.services.Status.OK || !firstResult) {
         clearMarkers();
         setShops([]);
         setIsSearching(false);
@@ -49,7 +49,7 @@ export const useRepairSearch = () => {
         return;
       }
 
-      const { x, y } = result[0];
+      const { x, y } = firstResult;
       setCenter(Number(y), Number(x));
 
       const searchByKeyword = (keyword: string) =>
@@ -58,9 +58,10 @@ export const useRepairSearch = () => {
           const places = new kakao.maps.services.Places();
           const center = new kakao.maps.LatLng(y, x);
 
-          const handleResult = (data: any[], placesStatus: string, pagination: any) => {
+          const handleResult = (data: unknown[], placesStatus: string, pagination: KakaoPagination) => {
+            const placeResults = data as KakaoPlace[];
             if (placesStatus === kakao.maps.services.Status.OK && data?.length) {
-              data.forEach((place) => {
+              placeResults.forEach((place) => {
                 collected.push({
                   id: place.id,
                   name: place.place_name,
diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index aa40f100..99889e92 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -3,23 +3,22 @@ import { RepairShopCard } from './RepairShopCard';
 import { useRepairSearch } from '../model/useRepairSearch';
 
 const MessageText = ({ children }: { children: string }) => (
-  <p className="w-full py-12 text-center font-pretendard text-[20px] font-semibold leading-[24px] text-[var(--color-gray-300)]">
+  <p className="font-pretendard w-full py-12 text-center text-[20px] leading-[24px] font-semibold text-[var(--color-gray-300)]">
     {children}
   </p>
 );
 
 const RepairPage = () => {
-  const { mapRef, shops, isSearching, hasSearched, errorMessage, handleSearch, openOverlayForShop } =
-    useRepairSearch();
+  const { mapRef, shops, isSearching, hasSearched, errorMessage, handleSearch, openOverlayForShop } = useRepairSearch();
 
   return (
-    <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pb-16 pt-8 md:pt-[47px]">
+    <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pt-8 pb-16 md:pt-[47px]">
       <section
         className="relative flex h-[320px] w-full flex-col items-start gap-[var(--spacing-xxs)] self-stretch rounded-[var(--radius-l)] border-2 border-solid border-[var(--color-green-700)] bg-[lightgray] px-4 pt-8 pb-4 md:h-[360px] md:px-12 md:pt-[47px] md:pb-[18px] xl:h-[395px] xl:px-[201px]"
         aria-label="수리점 카카오 맵 지도 영역"
       >
         <div ref={mapRef} className="absolute inset-0 z-0 rounded-[var(--radius-l)]" aria-hidden="true" />
-        <div className="absolute left-1/2 top-[var(--spacing-xxl)] z-10 w-[calc(100%-32px)] max-w-[790px] -translate-x-1/2 md:w-[calc(100%-96px)] xl:w-[790px]">
+        <div className="absolute top-[var(--spacing-xxl)] left-1/2 z-10 w-[calc(100%-32px)] max-w-[790px] -translate-x-1/2 md:w-[calc(100%-96px)] xl:w-[790px]">
           <SearchBar
             className="w-full max-w-none"
             placeholder="현재 위치하고 계신 곳의 주소를 적어주세요."
diff --git a/src/pages/repair/ui/RepairShopCard.tsx b/src/pages/repair/ui/RepairShopCard.tsx
index fa0122ec..8a3b35ea 100644
--- a/src/pages/repair/ui/RepairShopCard.tsx
+++ b/src/pages/repair/ui/RepairShopCard.tsx
@@ -51,32 +51,49 @@ export const RepairShopCard = ({
     }
   };
 
+  const handleContactClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    event.stopPropagation();
+    handleContact();
+  };
+
+  const handleFindRouteClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    event.stopPropagation();
+    handleFindRoute();
+  };
+
+  const handleCardKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
+    if (!onSelect) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onSelect();
+    }
+  };
+
   return (
-    <button
-      type="button"
+    <div
+      role="button"
+      tabIndex={0}
       onClick={onSelect}
+      onKeyDown={handleCardKeyDown}
       className="flex w-full flex-col items-start justify-between gap-6 rounded-[var(--radius-l)] bg-[var(--color-gray-900)] px-6 py-8 text-left md:flex-row md:items-center md:gap-[31px] md:px-[42px] md:py-[44px]"
     >
       <div className="flex flex-1 flex-col items-start gap-[5px]">
-        <span className="font-pretendard text-[20px] font-bold leading-[24px] text-[var(--color-white)]">
-          {name}
-        </span>
-        <span className="font-pretendard text-[16px] font-semibold leading-[20px] text-[var(--color-brand-primary)]">
+        <span className="font-pretendard text-[20px] leading-[24px] font-bold text-[var(--color-white)]">{name}</span>
+        <span className="font-pretendard text-[16px] leading-[20px] font-semibold text-[var(--color-brand-primary)]">
           {address}
         </span>
       </div>
 
-      <div
-        className="flex w-full items-center justify-between gap-4 md:w-auto md:gap-[31px]"
-        onClick={(event) => event.stopPropagation()}
-      >
-        <FavoriteButton defaultActive={favoriteActive} variant="inverse" />
+      <div className="flex w-full items-center justify-between gap-4 md:w-auto md:gap-[31px]">
+        <FavoriteButton defaultActive={favoriteActive} variant="inverse" onClick={(event) => event.stopPropagation()} />
         <div className="flex w-full flex-1 flex-col items-start gap-[15px] md:w-[159px] md:flex-none">
           <Button
             variant="fill"
             size="full"
             className="h-[44px] rounded-[var(--radius-l)] bg-[var(--color-white)] text-[var(--color-gray-900)] hover:bg-[var(--color-gray-100)]"
-            onClick={handleContact}
+            onClick={handleContactClick}
           >
             연락하기
           </Button>
@@ -84,12 +101,12 @@ export const RepairShopCard = ({
             variant="outline"
             size="full"
             className="h-[44px] rounded-[var(--radius-l)] border-2 border-[var(--color-white)] text-[var(--color-white)] hover:border-[var(--color-gray-200)] hover:text-[var(--color-gray-200)]"
-            onClick={handleFindRoute}
+            onClick={handleFindRouteClick}
           >
             길 찾기
           </Button>
         </div>
       </div>
-    </button>
+    </div>
   );
 };
diff --git a/src/shared/ui/FavoriteButton/FavoriteButton.tsx b/src/shared/ui/FavoriteButton/FavoriteButton.tsx
index 0edb5407..61e0e3f2 100644
--- a/src/shared/ui/FavoriteButton/FavoriteButton.tsx
+++ b/src/shared/ui/FavoriteButton/FavoriteButton.tsx
@@ -1,6 +1,6 @@
 import { HeartIcon } from '@shared/assets/icons';
 import { cn } from '@shared/utils/cn';
-import { useState } from 'react';
+import { useState, type ComponentPropsWithoutRef } from 'react';
 import { favoriteButtonVariants } from './FavoriteButton.variants';
 
 export interface FavoriteButtonProps {
@@ -8,6 +8,7 @@ export interface FavoriteButtonProps {
   onToggle?: (isActive: boolean) => void;
   ariaLabel?: string;
   variant?: 'default' | 'inverse';
+  onClick?: ComponentPropsWithoutRef<'button'>['onClick'];
 }
 
 export const FavoriteButton = ({
@@ -15,12 +16,14 @@ export const FavoriteButton = ({
   onToggle,
   ariaLabel = '찜',
   variant = 'default',
+  onClick,
 }: FavoriteButtonProps) => {
   const [isActive, setActive] = useState<boolean>(defaultActive);
 
   const styles = favoriteButtonVariants({ variant });
 
-  const handleClick = () => {
+  const handleClick: ComponentPropsWithoutRef<'button'>['onClick'] = (event) => {
+    onClick?.(event);
     const nextActive = !isActive;
     setActive(nextActive);
     onToggle?.(nextActive);

From 9f203947bd7363bf5803d24ccb10059ddbba1189 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sun, 1 Feb 2026 01:24:44 +0900
Subject: [PATCH 15/21] =?UTF-8?q?refactor:=ED=97=A4=EB=8D=94,=20=EB=AF=B8?=
 =?UTF-8?q?=EB=8B=88=EB=A7=B5,=20=EC=B9=B4=EB=93=9C=20=EB=AA=A8=EB=91=90?=
 =?UTF-8?q?=20=EA=B0=99=EC=9D=80=20=ED=8F=AD=20=EB=A7=9E=EC=B6=94=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/ui/RepairPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index 99889e92..d5b53ccc 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -14,7 +14,7 @@ const RepairPage = () => {
   return (
     <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pt-8 pb-16 md:pt-[47px]">
       <section
-        className="relative flex h-[320px] w-full flex-col items-start gap-[var(--spacing-xxs)] self-stretch rounded-[var(--radius-l)] border-2 border-solid border-[var(--color-green-700)] bg-[lightgray] px-4 pt-8 pb-4 md:h-[360px] md:px-12 md:pt-[47px] md:pb-[18px] xl:h-[395px] xl:px-[201px]"
+        className="relative mx-auto flex h-[320px] w-full max-w-[1200px] flex-col items-start gap-[var(--spacing-xxs)] self-stretch rounded-[var(--radius-l)] border-2 border-solid border-[var(--color-green-700)] bg-[lightgray] px-4 pt-8 pb-4 md:h-[360px] md:px-12 md:pt-[47px] md:pb-[18px] xl:h-[395px] xl:px-[201px]"
         aria-label="수리점 카카오 맵 지도 영역"
       >
         <div ref={mapRef} className="absolute inset-0 z-0 rounded-[var(--radius-l)]" aria-hidden="true" />
@@ -27,7 +27,7 @@ const RepairPage = () => {
         </div>
       </section>
       <section className="flex flex-1 flex-col items-start gap-[45px] self-stretch" aria-label="수리점 목록 헤더">
-        <div className="flex w-full items-center justify-between">
+        <div className="mx-auto flex w-full max-w-[1200px] items-center justify-between">
           <span className="font-pretendard text-[24px] leading-[28px] font-semibold text-[var(--color-black)]">
             총 {shops.length}개
           </span>
@@ -36,7 +36,7 @@ const RepairPage = () => {
           </button>
         </div>
       </section>
-      <section className="flex w-full flex-col gap-6" aria-label="수리점 목록">
+      <section className="mx-auto flex w-full max-w-[1200px] flex-col gap-6" aria-label="수리점 목록">
         {isSearching && <MessageText>검색 중...</MessageText>}
         {!isSearching && errorMessage && <MessageText>{errorMessage}</MessageText>}
         {!isSearching && !errorMessage && hasSearched && shops.length === 0 && (

From 38e367f953e5e521fbc840112ebb01eafdbe8034 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sun, 1 Feb 2026 02:10:54 +0900
Subject: [PATCH 16/21] =?UTF-8?q?refactor:=20URL=20=EC=83=81=EC=88=98=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/root.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/root.tsx b/src/app/root.tsx
index fa940e23..7f1ee3a9 100644
--- a/src/app/root.tsx
+++ b/src/app/root.tsx
@@ -11,9 +11,10 @@ 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
-  ? `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${kakaoMapKey}&libraries=services&autoload=false`
+  ? `${KAKAO_SDK_URL_BASE}?appkey=${kakaoMapKey}&libraries=services&autoload=false`
   : null;
 
 export default function Root() {

From f3fa68229c41b21c46df3610c9f0b129c03f781d Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sun, 1 Feb 2026 02:11:28 +0900
Subject: [PATCH 17/21] =?UTF-8?q?refactor:clickable=20=EC=98=B5=EC=85=98?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/model/types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/repair/model/types.ts b/src/pages/repair/model/types.ts
index 31d735c0..406e5bc5 100644
--- a/src/pages/repair/model/types.ts
+++ b/src/pages/repair/model/types.ts
@@ -71,6 +71,7 @@ export type KakaoMaps = {
     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;

From 951effc96b30375f6016e274d5c39a036fa57008 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sun, 1 Feb 2026 02:12:07 +0900
Subject: [PATCH 18/21] =?UTF-8?q?refactor:=EA=B2=80=EC=83=89=20=EC=A4=91?=
 =?UTF-8?q?=20=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/model/useRepairSearch.ts | 43 +++++++++++++----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/pages/repair/model/useRepairSearch.ts b/src/pages/repair/model/useRepairSearch.ts
index c78731b6..887ace6c 100644
--- a/src/pages/repair/model/useRepairSearch.ts
+++ b/src/pages/repair/model/useRepairSearch.ts
@@ -86,30 +86,37 @@ export const useRepairSearch = () => {
           places.keywordSearch(keyword, handleResult, { location: center, radius: SEARCH_RADIUS_METERS });
         });
 
-      Promise.all(SEARCH_KEYWORDS.map((keyword) => searchByKeyword(keyword))).then((results) => {
-        clearMarkers();
+      Promise.all(SEARCH_KEYWORDS.map((keyword) => searchByKeyword(keyword)))
+        .then((results) => {
+          clearMarkers();
+
+          const uniqueMap = new Map<string, RepairShop>();
+          results.flat().forEach((shop) => {
+            if (!uniqueMap.has(shop.id)) {
+              uniqueMap.set(shop.id, shop);
+            }
+          });
+
+          const nextShops = Array.from(uniqueMap.values());
 
-        const uniqueMap = new Map<string, RepairShop>();
-        results.flat().forEach((shop) => {
-          if (!uniqueMap.has(shop.id)) {
-            uniqueMap.set(shop.id, shop);
+          if (nextShops.length === 0) {
+            setShops([]);
+            setIsSearching(false);
+            return;
           }
-        });
 
-        const nextShops = Array.from(uniqueMap.values());
+          setMarkers(nextShops);
 
-        if (nextShops.length === 0) {
+          nextShops.sort((a, b) => (a.distance ?? Number.MAX_VALUE) - (b.distance ?? Number.MAX_VALUE));
+          setShops(nextShops);
+          setIsSearching(false);
+        })
+        .catch(() => {
+          clearMarkers();
           setShops([]);
           setIsSearching(false);
-          return;
-        }
-
-        setMarkers(nextShops);
-
-        nextShops.sort((a, b) => (a.distance ?? Number.MAX_VALUE) - (b.distance ?? Number.MAX_VALUE));
-        setShops(nextShops);
-        setIsSearching(false);
-      });
+          setErrorMessage('검색에 실패했습니다.');
+        });
     });
   };
 

From eca23b421b710f7c38d8564021790b96694e47ce Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sun, 1 Feb 2026 02:13:31 +0900
Subject: [PATCH 19/21] =?UTF-8?q?=EC=A4=91=EB=B3=B5=20=ED=8C=8C=ED=8A=B8?=
 =?UTF-8?q?=20getKakaoMaps()=20=ED=95=BC=ED=8D=BC=EB=A1=9C=20=EC=A0=91?=
 =?UTF-8?q?=EA=B7=B8=E3=85=A1=E3=84=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/model/useRepairMap.ts | 52 +++++++++++++-------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/pages/repair/model/useRepairMap.ts b/src/pages/repair/model/useRepairMap.ts
index 6571efb9..fe99e576 100644
--- a/src/pages/repair/model/useRepairMap.ts
+++ b/src/pages/repair/model/useRepairMap.ts
@@ -1,6 +1,8 @@
 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}`;
@@ -30,38 +32,38 @@ export const useRepairMap = () => {
   const [isMapReady, setIsMapReady] = useState(false);
 
   useEffect(() => {
-    const kakao = (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao;
+    const maps = getKakaoMaps();
 
     if (!mapRef.current) {
       return;
     }
 
     const initMap = () => {
-      if (!kakao?.maps || !mapRef.current) {
+      if (!maps || !mapRef.current) {
         return;
       }
 
-      const center = new kakao.maps.LatLng(37.5665, 126.978);
+      const center = new maps.LatLng(37.5665, 126.978);
       const options = { center, level: 4 };
 
-      const map = new kakao.maps.Map(mapRef.current, options);
+      const map = new maps.Map(mapRef.current, options);
       mapInstanceRef.current = map;
-      overlayRef.current = new kakao.maps.CustomOverlay({ yAnchor: 1, zIndex: 10, clickable: true });
-      kakao.maps.event.addListener(map, 'click', () => {
+      overlayRef.current = new maps.CustomOverlay({ yAnchor: 1, zIndex: 10, clickable: true });
+      maps.event.addListener(map, 'click', () => {
         overlayRef.current?.setMap(null);
       });
       setIsMapReady(true);
     };
 
-    if (kakao?.maps?.load) {
-      kakao.maps.load(initMap);
+    if (maps?.load) {
+      maps.load(initMap);
       return;
     }
 
     const timer = window.setInterval(() => {
-      if (kakao?.maps?.load) {
+      if (maps?.load) {
         window.clearInterval(timer);
-        kakao.maps.load(initMap);
+        maps.load(initMap);
       }
     }, 50);
 
@@ -74,26 +76,26 @@ export const useRepairMap = () => {
   };
 
   const setCenter = (lat: number, lng: number) => {
-    const kakao = (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao;
+    const maps = getKakaoMaps();
     const map = mapInstanceRef.current;
-    if (!kakao?.maps || !map) {
+    if (!maps || !map) {
       return;
     }
-    map.setCenter(new kakao.maps.LatLng(lat, lng));
+    map.setCenter(new maps.LatLng(lat, lng));
   };
 
   const openOverlayForShop = (shop: RepairShop) => {
-    const kakao = (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao;
+    const maps = getKakaoMaps();
     const map = mapInstanceRef.current;
-    if (!kakao?.maps || !map) {
+    if (!maps || !map) {
       return;
     }
 
-    const position = new kakao.maps.LatLng(shop.lat, shop.lng);
+    const position = new maps.LatLng(shop.lat, shop.lng);
     map.panTo(position);
     overlayRef.current?.setMap(null);
 
-    const overlay = new kakao.maps.CustomOverlay({
+    const overlay = new maps.CustomOverlay({
       content: buildOverlayContent(shop),
       position,
       yAnchor: 1,
@@ -106,9 +108,9 @@ export const useRepairMap = () => {
   };
 
   const setMarkers = (shops: RepairShop[]) => {
-    const kakao = (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao;
+    const maps = getKakaoMaps();
     const map = mapInstanceRef.current;
-    if (!kakao?.maps || !map) {
+    if (!maps || !map) {
       return;
     }
 
@@ -117,15 +119,15 @@ export const useRepairMap = () => {
       return;
     }
 
-    const markerImage = new kakao.maps.MarkerImage('/repair-marker.svg', new kakao.maps.Size(36, 48), {
-      offset: new kakao.maps.Point(18, 48),
+    const markerImage = new maps.MarkerImage('/repair-marker.svg', new maps.Size(36, 48), {
+      offset: new maps.Point(18, 48),
     });
 
-    const bounds = new kakao.maps.LatLngBounds();
+    const bounds = new maps.LatLngBounds();
     shops.forEach((shop) => {
-      const position = new kakao.maps.LatLng(shop.lat, shop.lng);
-      const marker = new kakao.maps.Marker({ map, position, image: markerImage });
-      kakao.maps.event.addListener(marker, 'click', () => {
+      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);
       });
 

From f072a72791cf463d64e22c176ccea332a95cde9e Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sun, 1 Feb 2026 02:14:11 +0900
Subject: [PATCH 20/21] =?UTF-8?q?refactor:=EC=83=88=20variant=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=ED=95=98=EA=B8=B0(=EB=B2=84=ED=8A=BC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/ui/RepairShopCard.tsx  |  6 ++---
 src/shared/ui/Button/Button.variants.ts | 35 +++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/pages/repair/ui/RepairShopCard.tsx b/src/pages/repair/ui/RepairShopCard.tsx
index 8a3b35ea..bf528040 100644
--- a/src/pages/repair/ui/RepairShopCard.tsx
+++ b/src/pages/repair/ui/RepairShopCard.tsx
@@ -90,17 +90,15 @@ export const RepairShopCard = ({
         <FavoriteButton defaultActive={favoriteActive} variant="inverse" onClick={(event) => event.stopPropagation()} />
         <div className="flex w-full flex-1 flex-col items-start gap-[15px] md:w-[159px] md:flex-none">
           <Button
-            variant="fill"
+            variant="light"
             size="full"
-            className="h-[44px] rounded-[var(--radius-l)] bg-[var(--color-white)] text-[var(--color-gray-900)] hover:bg-[var(--color-gray-100)]"
             onClick={handleContactClick}
           >
             연락하기
           </Button>
           <Button
-            variant="outline"
+            variant="lightOutline"
             size="full"
-            className="h-[44px] rounded-[var(--radius-l)] border-2 border-[var(--color-white)] text-[var(--color-white)] hover:border-[var(--color-gray-200)] hover:text-[var(--color-gray-200)]"
             onClick={handleFindRouteClick}
           >
             길 찾기
diff --git a/src/shared/ui/Button/Button.variants.ts b/src/shared/ui/Button/Button.variants.ts
index a7497200..730004e3 100644
--- a/src/shared/ui/Button/Button.variants.ts
+++ b/src/shared/ui/Button/Button.variants.ts
@@ -50,6 +50,41 @@ export const buttonVariants = tv({
         'focus:border-gray-600',
         'focus:text-gray-600',
 
+        /* disabled */
+        'disabled:border-gray-300',
+        'disabled:text-gray-400',
+        'disabled:cursor-not-allowed',
+      ],
+      light: [
+        /* default */
+        'bg-white text-gray-900',
+
+        /* hover */
+        'hover:bg-gray-100',
+
+        /* focus */
+        'focus:bg-gray-200 focus:text-gray-900',
+
+        /* disabled */
+        'disabled:bg-gray-100',
+        'disabled:text-gray-400',
+        'disabled:cursor-not-allowed',
+      ],
+      lightOutline: [
+        /* default */
+        'bg-transparent',
+        'border-2',
+        'border-white',
+        'text-white',
+
+        /* hover */
+        'hover:border-gray-200',
+        'hover:text-gray-200',
+
+        /* focus */
+        'focus:border-gray-300',
+        'focus:text-gray-300',
+
         /* disabled */
         'disabled:border-gray-300',
         'disabled:text-gray-400',

From 21bb1a0569c36d4a8a9b3bac2a88393aa9f8ced4 Mon Sep 17 00:00:00 2001
From: Wonjun Jung <jwj0620@gachon.ac.kr>
Date: Sun, 1 Feb 2026 02:15:41 +0900
Subject: [PATCH 21/21] =?UTF-8?q?style:prettier=20format=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/repair/ui/RepairShopCard.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/pages/repair/ui/RepairShopCard.tsx b/src/pages/repair/ui/RepairShopCard.tsx
index bf528040..d866e780 100644
--- a/src/pages/repair/ui/RepairShopCard.tsx
+++ b/src/pages/repair/ui/RepairShopCard.tsx
@@ -89,18 +89,10 @@ export const RepairShopCard = ({
       <div className="flex w-full items-center justify-between gap-4 md:w-auto md:gap-[31px]">
         <FavoriteButton defaultActive={favoriteActive} variant="inverse" onClick={(event) => event.stopPropagation()} />
         <div className="flex w-full flex-1 flex-col items-start gap-[15px] md:w-[159px] md:flex-none">
-          <Button
-            variant="light"
-            size="full"
-            onClick={handleContactClick}
-          >
+          <Button variant="light" size="full" onClick={handleContactClick}>
             연락하기
           </Button>
-          <Button
-            variant="lightOutline"
-            size="full"
-            onClick={handleFindRouteClick}
-          >
+          <Button variant="lightOutline" size="full" onClick={handleFindRouteClick}>
             길 찾기
           </Button>
         </div>