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/app/root.tsx b/src/app/root.tsx
index 1994e571..7f1ee3a9 100644
--- a/src/app/root.tsx
+++ b/src/app/root.tsx
@@ -11,15 +11,22 @@ export const links = () => [
   { rel: 'manifest', href: '/site.webmanifest' },
 ];
 
+const KAKAO_SDK_URL_BASE = 'https://dapi.kakao.com/v2/maps/sdk.js';
+const kakaoMapKey = import.meta.env.VITE_KAKAO_JS_KEY;
+const kakaoMapSrc = kakaoMapKey
+  ? `${KAKAO_SDK_URL_BASE}?appkey=${kakaoMapKey}&libraries=services&autoload=false`
+  : null;
+
 export default function Root() {
   return (
     <html lang="ko">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="apple-mobile-web-app-title" content="LOOPiT" />
+        <meta name="apple-mobile-web-app-title" content="LOOPIT" />
         <Meta />
         <Links />
+        {kakaoMapSrc && <script src={kakaoMapSrc} defer />}
       </head>
       <body className="w-full overflow-x-hidden">
         <AppProviders>
diff --git a/src/app/routes.ts b/src/app/routes.ts
index a645b788..13ee0947 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -9,6 +9,7 @@ export default [
     route('buy/:id', 'routes/(main)/buy.detail.tsx'),
     route('sell', 'routes/(main)/sell.tsx'),
     route('sell/confirm', 'routes/(main)/sell.confirm.tsx'),
+    route('repair', 'routes/(main)/repair.tsx'),
     route('mypage', 'routes/(main)/mypage.tsx'),
     route('chatbot', 'routes/(main)/chatbot.tsx'),
     route('mypage/settings', 'routes/(main)/mypage.settings.tsx'),
diff --git a/src/app/routes/(main)/repair.tsx b/src/app/routes/(main)/repair.tsx
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;
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/model/types.ts b/src/pages/repair/model/types.ts
new file mode 100644
index 00000000..406e5bc5
--- /dev/null
+++ b/src/pages/repair/model/types.ts
@@ -0,0 +1,84 @@
+export type RepairShop = {
+  id: string;
+  name: string;
+  address: string;
+  lat: number;
+  lng: number;
+  phone?: string;
+  distance?: number;
+  placeUrl?: string;
+};
+
+export type KakaoAddressResult = {
+  x: string;
+  y: string;
+};
+
+export type KakaoPlace = {
+  id: string;
+  place_name: string;
+  road_address_name: string;
+  address_name: string;
+  y: string;
+  x: string;
+  phone: string;
+  distance?: string;
+  place_url?: string;
+};
+
+export type KakaoPagination = {
+  hasNextPage: boolean;
+  nextPage: () => void;
+};
+
+export type KakaoMapInstance = {
+  setCenter: (latLng: unknown) => void;
+  setBounds: (bounds: unknown) => void;
+  panTo: (latLng: unknown) => void;
+};
+
+export type KakaoMarker = {
+  setMap: (map: KakaoMapInstance | null) => void;
+};
+
+export type KakaoOverlay = {
+  setMap: (map: KakaoMapInstance | null) => void;
+};
+
+export type KakaoLatLngBounds = {
+  extend: (latLng: unknown) => void;
+};
+
+export type KakaoMapsServices = {
+  Geocoder: new () => {
+    addressSearch: (query: string, cb: (result: unknown[], status: string) => void) => void;
+  };
+  Places: new () => {
+    keywordSearch: (
+      keyword: string,
+      cb: (data: unknown[], status: string, pagination: KakaoPagination) => void,
+      options: { location: unknown; radius: number }
+    ) => void;
+  };
+  Status: { OK: string };
+};
+
+export type KakaoMaps = {
+  LatLng: new (lat: number, lng: number) => unknown;
+  Map: new (container: HTMLElement, options: { center: unknown; level: number }) => KakaoMapInstance;
+  CustomOverlay: new (options: {
+    yAnchor: number;
+    zIndex: number;
+    content?: string;
+    position?: unknown;
+    clickable?: boolean;
+  }) => KakaoOverlay;
+  Marker: new (options: { map: KakaoMapInstance; position: unknown; image?: unknown }) => KakaoMarker;
+  MarkerImage: new (src: string, size: unknown, options: { offset: unknown }) => unknown;
+  Size: new (width: number, height: number) => unknown;
+  Point: new (x: number, y: number) => unknown;
+  LatLngBounds: new () => KakaoLatLngBounds;
+  event: { addListener: (target: unknown, event: string, handler: () => void) => void };
+  load?: (callback: () => void) => void;
+  services?: KakaoMapsServices;
+};
diff --git a/src/pages/repair/model/useRepairMap.ts b/src/pages/repair/model/useRepairMap.ts
new file mode 100644
index 00000000..fe99e576
--- /dev/null
+++ b/src/pages/repair/model/useRepairMap.ts
@@ -0,0 +1,149 @@
+import { useEffect, useRef, useState } from 'react';
+import type { KakaoMapInstance, KakaoMaps, KakaoMarker, KakaoOverlay, RepairShop } from './types';
+
+const getKakaoMaps = () => (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao?.maps;
+
+const buildOverlayContent = (shop: RepairShop) => {
+  const phoneLink = shop.phone ? `<a href="tel:${shop.phone}">전화</a>` : '';
+  const routeLink = `https://map.kakao.com/link/to/${encodeURIComponent(shop.name)},${shop.lat},${shop.lng}`;
+  const detailLink = shop.placeUrl ? `<a href="${shop.placeUrl}" target="_blank" rel="noreferrer">상세</a>` : '';
+  const actions = [phoneLink, detailLink, `<a href="${routeLink}" target="_blank" rel="noreferrer">길찾기</a>`]
+    .filter(Boolean)
+    .join(' · ');
+
+  return `
+    <div style="position:relative; transform:translateY(-8px);">
+      <div style="padding:var(--padding-m) var(--spacing-s); font-size:12px; line-height:1.4; width:260px; background:var(--color-green-100); border-radius:var(--radius-m); border:2px solid var(--color-green-700); box-shadow:0 8px 20px rgba(17,203,176,0.18);">
+        <div style="font-weight:700; margin-bottom:var(--spacing-xxxxs); word-break:break-word; color:var(--color-green-900);">${shop.name}</div>
+        <div style="color:var(--color-green-800); margin-bottom:6px; word-break:break-word;">${shop.address}</div>
+        <div style="color:var(--color-green-900); font-weight:600; word-break:keep-all;">${actions}</div>
+      </div>
+      <div style="position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid var(--color-green-100);"></div>
+      <div style="position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:9px solid var(--color-green-700);"></div>
+    </div>
+  `;
+};
+
+export const useRepairMap = () => {
+  const mapRef = useRef<HTMLDivElement | null>(null);
+  const mapInstanceRef = useRef<KakaoMapInstance | null>(null);
+  const markersRef = useRef<KakaoMarker[]>([]);
+  const overlayRef = useRef<KakaoOverlay | null>(null);
+  const [isMapReady, setIsMapReady] = useState(false);
+
+  useEffect(() => {
+    const maps = getKakaoMaps();
+
+    if (!mapRef.current) {
+      return;
+    }
+
+    const initMap = () => {
+      if (!maps || !mapRef.current) {
+        return;
+      }
+
+      const center = new maps.LatLng(37.5665, 126.978);
+      const options = { center, level: 4 };
+
+      const map = new maps.Map(mapRef.current, options);
+      mapInstanceRef.current = map;
+      overlayRef.current = new maps.CustomOverlay({ yAnchor: 1, zIndex: 10, clickable: true });
+      maps.event.addListener(map, 'click', () => {
+        overlayRef.current?.setMap(null);
+      });
+      setIsMapReady(true);
+    };
+
+    if (maps?.load) {
+      maps.load(initMap);
+      return;
+    }
+
+    const timer = window.setInterval(() => {
+      if (maps?.load) {
+        window.clearInterval(timer);
+        maps.load(initMap);
+      }
+    }, 50);
+
+    return () => window.clearInterval(timer);
+  }, []);
+
+  const clearMarkers = () => {
+    markersRef.current.forEach((marker) => marker.setMap(null));
+    markersRef.current = [];
+  };
+
+  const setCenter = (lat: number, lng: number) => {
+    const maps = getKakaoMaps();
+    const map = mapInstanceRef.current;
+    if (!maps || !map) {
+      return;
+    }
+    map.setCenter(new maps.LatLng(lat, lng));
+  };
+
+  const openOverlayForShop = (shop: RepairShop) => {
+    const maps = getKakaoMaps();
+    const map = mapInstanceRef.current;
+    if (!maps || !map) {
+      return;
+    }
+
+    const position = new maps.LatLng(shop.lat, shop.lng);
+    map.panTo(position);
+    overlayRef.current?.setMap(null);
+
+    const overlay = new maps.CustomOverlay({
+      content: buildOverlayContent(shop),
+      position,
+      yAnchor: 1,
+      zIndex: 10,
+      clickable: true,
+    });
+
+    overlay.setMap(map);
+    overlayRef.current = overlay;
+  };
+
+  const setMarkers = (shops: RepairShop[]) => {
+    const maps = getKakaoMaps();
+    const map = mapInstanceRef.current;
+    if (!maps || !map) {
+      return;
+    }
+
+    clearMarkers();
+    if (shops.length === 0) {
+      return;
+    }
+
+    const markerImage = new maps.MarkerImage('/repair-marker.svg', new maps.Size(36, 48), {
+      offset: new maps.Point(18, 48),
+    });
+
+    const bounds = new maps.LatLngBounds();
+    shops.forEach((shop) => {
+      const position = new maps.LatLng(shop.lat, shop.lng);
+      const marker = new maps.Marker({ map, position, image: markerImage });
+      maps.event.addListener(marker, 'click', () => {
+        openOverlayForShop(shop);
+      });
+
+      markersRef.current.push(marker);
+      bounds.extend(position);
+    });
+
+    map.setBounds(bounds);
+  };
+
+  return {
+    mapRef,
+    isMapReady,
+    setCenter,
+    setMarkers,
+    clearMarkers,
+    openOverlayForShop,
+  };
+};
diff --git a/src/pages/repair/model/useRepairSearch.ts b/src/pages/repair/model/useRepairSearch.ts
new file mode 100644
index 00000000..887ace6c
--- /dev/null
+++ b/src/pages/repair/model/useRepairSearch.ts
@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { useRepairMap } from './useRepairMap';
+import type { KakaoAddressResult, KakaoMaps, KakaoPagination, KakaoPlace, 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 Window & { kakao?: { maps?: KakaoMaps } }).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: unknown[], status: string) => {
+      const [firstResult] = result as KakaoAddressResult[];
+      if (status !== kakao.maps.services.Status.OK || !firstResult) {
+        clearMarkers();
+        setShops([]);
+        setIsSearching(false);
+        setErrorMessage('검색에 실패했습니다.');
+        return;
+      }
+
+      const { x, y } = firstResult;
+      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: unknown[], placesStatus: string, pagination: KakaoPagination) => {
+            const placeResults = data as KakaoPlace[];
+            if (placesStatus === kakao.maps.services.Status.OK && data?.length) {
+              placeResults.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);
+        })
+        .catch(() => {
+          clearMarkers();
+          setShops([]);
+          setIsSearching(false);
+          setErrorMessage('검색에 실패했습니다.');
+        });
+    });
+  };
+
+  return {
+    mapRef,
+    shops,
+    isSearching,
+    hasSearched,
+    errorMessage,
+    handleSearch,
+    openOverlayForShop,
+  };
+};
diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
new file mode 100644
index 00000000..d5b53ccc
--- /dev/null
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -0,0 +1,67 @@
+import { SearchBar } from '@shared/ui/SearchBar';
+import { RepairShopCard } from './RepairShopCard';
+import { useRepairSearch } from '../model/useRepairSearch';
+
+const MessageText = ({ children }: { children: string }) => (
+  <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();
+
+  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 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" />
+        <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="현재 위치하고 계신 곳의 주소를 적어주세요."
+            onSearch={handleSearch}
+          />
+        </div>
+      </section>
+      <section className="flex flex-1 flex-col items-start gap-[45px] self-stretch" aria-label="수리점 목록 헤더">
+        <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>
+          <button type="button" className="typo-body-1 text-[var(--color-gray-300)]">
+            거리순
+          </button>
+        </div>
+      </section>
+      <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 && (
+          <MessageText>주변에 수리점이 없습니다.</MessageText>
+        )}
+        {!isSearching && !errorMessage && !hasSearched && (
+          <MessageText>주소를 입력하면 주변 수리점을 보여드려요.</MessageText>
+        )}
+        {!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}
+              onSelect={() => openOverlayForShop(shop)}
+            />
+          ))}
+      </section>
+    </main>
+  );
+};
+
+export default RepairPage;
diff --git a/src/pages/repair/ui/RepairShopCard.tsx b/src/pages/repair/ui/RepairShopCard.tsx
new file mode 100644
index 00000000..d866e780
--- /dev/null
+++ b/src/pages/repair/ui/RepairShopCard.tsx
@@ -0,0 +1,102 @@
+import { Button } from '@shared/ui/Button/Button';
+import { FavoriteButton } from '@shared/ui/FavoriteButton';
+
+export type RepairShopCardProps = {
+  name: string;
+  address: string;
+  favoriteActive?: boolean;
+  phone?: string;
+  lat?: number;
+  lng?: number;
+  placeUrl?: string;
+  onContact?: () => void;
+  onFindRoute?: () => void;
+  onSelect?: () => void;
+};
+
+export const RepairShopCard = ({
+  name,
+  address,
+  favoriteActive = false,
+  phone,
+  lat,
+  lng,
+  placeUrl,
+  onContact,
+  onFindRoute,
+  onSelect,
+}: 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');
+    }
+  };
+
+  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 (
+    <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] 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]">
+        <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>
+          <Button variant="lightOutline" size="full" onClick={handleFindRouteClick}>
+            길 찾기
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
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',
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);
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',
