diff --git a/src/api/Myplace/myPlace.api.ts b/src/api/Myplace/myPlace.api.ts
new file mode 100644
index 0000000..d7ad98f
--- /dev/null
+++ b/src/api/Myplace/myPlace.api.ts
@@ -0,0 +1,80 @@
+import api from '@/api/api';
+import type { ApiResponse } from '@/types/api-response';
+
+export interface SavePlaceRequest {
+  contentId: string;
+  regionName: string;
+  themeName: string;
+  cnctrLevel: number;
+  placeName: string;
+}
+
+export interface SaveToggleResponse {
+  placeId: number;
+  type: 'LIKE' | 'SAVE';
+  enabled: boolean;
+  changed: boolean;
+  likeCount: number;
+  message: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface SaveStatusData {
+  contentId: string;
+  save: boolean;
+}
+
+export interface SavedPlaceItem {
+  cnctrLevel: number;
+  contentId: string;
+  placeName: string;
+  likeCount: number;
+  themeName: string;
+  savedAt: string;
+}
+export interface SavedPlacePage {
+  content: SavedPlaceItem[];
+  page: number;
+  size: number;
+  totalElements: number;
+  totalPages: number;
+  first: boolean;
+  last: boolean;
+  hasNext: boolean;
+  hasPrevious: boolean;
+}
+
+//저장 ON
+export async function savePlace(payload: SavePlaceRequest): Promise<SaveToggleResponse> {
+  const res = await api.put<SaveToggleResponse>('/my/places/save', payload);
+  return res.data;
+}
+
+//저장 OFF
+export async function unsavePlace(payload: {
+  contentId: string;
+  regionName?: string;
+  themeName?: string;
+  cnctrLevel?: number;
+}) {
+  const res = await api.delete<SaveToggleResponse>('/my/places/save', {
+    data: payload,
+    headers: { 'Content-Type': 'application/json' },
+  });
+  return res.data;
+}
+
+//저장 여부
+export async function getSaveStatus(contentId: string): Promise<boolean> {
+  const res = await api.get<ApiResponse<SaveStatusData>>('/my/places/save/status', {
+    params: { contentId },
+  });
+  return !!res.data?.data?.save;
+}
+
+//내 저장 목록
+export async function getSavedPlaces(page = 0, size = 20): Promise<SavedPlacePage> {
+  const res = await api.get<SavedPlacePage>('/my/places', { params: { page, size } });
+  return res.data;
+}
diff --git a/src/api/Myplace/saved.api.ts b/src/api/Myplace/saved.api.ts
deleted file mode 100644
index 4ec77e9..0000000
--- a/src/api/Myplace/saved.api.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import api from "../api";
-import type { ApiResponse } from "@/types/api-response";
-
-export type PlaceSaveResult = {
-  placeId: number;
-  typeId?: number;
-  liked: boolean;     
-  changed: boolean;    
-  memo?: string | null;
-  createdAt: string;   
-  updatedAt: string;   
-};
-
-export async function unsavePlace(
-  contentId: string | number
-): Promise<PlaceSaveResult> {
-  const { data } = await api.delete<ApiResponse<PlaceSaveResult>>(
-    "/my/places/save",
-    { params: { contentId: String(contentId) } } 
-  );
-  return data.data;
-}
diff --git a/src/api/Myplace/saved.ts b/src/api/Myplace/saved.ts
deleted file mode 100644
index 4ec77e9..0000000
--- a/src/api/Myplace/saved.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import api from "../api";
-import type { ApiResponse } from "@/types/api-response";
-
-export type PlaceSaveResult = {
-  placeId: number;
-  typeId?: number;
-  liked: boolean;     
-  changed: boolean;    
-  memo?: string | null;
-  createdAt: string;   
-  updatedAt: string;   
-};
-
-export async function unsavePlace(
-  contentId: string | number
-): Promise<PlaceSaveResult> {
-  const { data } = await api.delete<ApiResponse<PlaceSaveResult>>(
-    "/my/places/save",
-    { params: { contentId: String(contentId) } } 
-  );
-  return data.data;
-}
diff --git a/src/api/Myplace/saveg.api.ts b/src/api/Myplace/saveg.api.ts
deleted file mode 100644
index c8c3cea..0000000
--- a/src/api/Myplace/saveg.api.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import api from "../api";
-import type { ApiResponse } from "@/types/api-response";
-
-
-export type SavedPlace = {
-  contentId: string | number;   
-  themeName?: string;           
-  regionName?: string;          
-  entrLevel?: number;          
-  likedCnt?: number;          
-  savedAt: string;              
-};
-
-export type SavedPlacesPage = {
-  content: SavedPlace[];
-  page: number;
-  size: number;
-  totalElements: number;
-  totalPages: number;
-  first: boolean;
-  last: boolean;
-  hasNext?: boolean;
-  hasPrevious?: boolean;
-};
-
-export async function getSavedPlaces(
-  { page = 0, size = 20 }: { page?: number; size?: number } = {}
-): Promise<SavedPlacesPage> {
-  const { data } = await api.get<ApiResponse<SavedPlacesPage>>(
-    "/my/places",
-    { params: { page, size } }
-  );
-  return data.data;
-}
diff --git a/src/api/Myplace/saveg.ts b/src/api/Myplace/saveg.ts
deleted file mode 100644
index c8c3cea..0000000
--- a/src/api/Myplace/saveg.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import api from "../api";
-import type { ApiResponse } from "@/types/api-response";
-
-
-export type SavedPlace = {
-  contentId: string | number;   
-  themeName?: string;           
-  regionName?: string;          
-  entrLevel?: number;          
-  likedCnt?: number;          
-  savedAt: string;              
-};
-
-export type SavedPlacesPage = {
-  content: SavedPlace[];
-  page: number;
-  size: number;
-  totalElements: number;
-  totalPages: number;
-  first: boolean;
-  last: boolean;
-  hasNext?: boolean;
-  hasPrevious?: boolean;
-};
-
-export async function getSavedPlaces(
-  { page = 0, size = 20 }: { page?: number; size?: number } = {}
-): Promise<SavedPlacesPage> {
-  const { data } = await api.get<ApiResponse<SavedPlacesPage>>(
-    "/my/places",
-    { params: { page, size } }
-  );
-  return data.data;
-}
diff --git a/src/api/Myplace/savep.api.ts b/src/api/Myplace/savep.api.ts
deleted file mode 100644
index cd72f90..0000000
--- a/src/api/Myplace/savep.api.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import api from "@/api/api"; 
-
-export type SaveMyPlaceRequest = {
-  contentId: string;   
-  regionName: string;  
-  themeName: string;
-  cnctrLevel: number;  
-};
-
-export type SaveMyPlaceResponse = {
-  placedId: number;
-  type: string;        
-  like: boolean;
-  enabled: boolean;
-  changed: boolean;
-  likeCount: number;
-  message: string;     
-  createdAt: string;  
-  updatedAt: string;   
-};
-
-type ApiEnvelope<T> = {
-  success?: boolean;
-  data?: T;
-  message?: string;
-  code?: string | number;
-  error?: {
-    code?: string | number;
-    status?: number;
-    message?: string;
-    path?: string;
-    timestamp?: string | number;
-    detail?: string;
-  };
-};
-
-function unwrapResponse<T>(raw: T | ApiEnvelope<T>): T {
-  const anyRaw = raw as any;
-  if (anyRaw && typeof anyRaw === "object" && "data" in anyRaw && anyRaw.data) {
-    return anyRaw.data as T;
-  }
-  return raw as T;
-}
-
-function assertResponseShape(res: any): asserts res is SaveMyPlaceResponse {
-  if (!res || typeof res.placedId !== "number") {
-    throw new Error("서버 응답 형식이 예상과 다릅니다.");
-  }
-}
-
-export async function savePlace(payload: SaveMyPlaceRequest): Promise<SaveMyPlaceResponse> {
-  try {
-    const body: SaveMyPlaceRequest = {
-      ...payload,
-      cnctrLevel: Number(payload.cnctrLevel),
-    };
-
-    const { data } = await api.put<SaveMyPlaceResponse | ApiEnvelope<SaveMyPlaceResponse>>(
-      "/my/places/save",
-      body,
-      { headers: { "Content-Type": "application/json" } }
-    );
-
-    const unwrapped = unwrapResponse<SaveMyPlaceResponse>(data);
-    assertResponseShape(unwrapped);
-    return unwrapped;
-  }  catch (err: any) {
-  console.error("[savePlace][raw error]", err?.response || err);
-  const serverMsg =
-    err?.response?.data?.message ||
-    err?.response?.data?.error?.message ||
-    err?.message;
-  throw new Error(serverMsg || "네트워크 오류 또는 서버 에러가 발생했습니다.");
-}
-}
-
-export default { savePlace };
diff --git a/src/api/Myplace/savep.ts b/src/api/Myplace/savep.ts
deleted file mode 100644
index cd72f90..0000000
--- a/src/api/Myplace/savep.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import api from "@/api/api"; 
-
-export type SaveMyPlaceRequest = {
-  contentId: string;   
-  regionName: string;  
-  themeName: string;
-  cnctrLevel: number;  
-};
-
-export type SaveMyPlaceResponse = {
-  placedId: number;
-  type: string;        
-  like: boolean;
-  enabled: boolean;
-  changed: boolean;
-  likeCount: number;
-  message: string;     
-  createdAt: string;  
-  updatedAt: string;   
-};
-
-type ApiEnvelope<T> = {
-  success?: boolean;
-  data?: T;
-  message?: string;
-  code?: string | number;
-  error?: {
-    code?: string | number;
-    status?: number;
-    message?: string;
-    path?: string;
-    timestamp?: string | number;
-    detail?: string;
-  };
-};
-
-function unwrapResponse<T>(raw: T | ApiEnvelope<T>): T {
-  const anyRaw = raw as any;
-  if (anyRaw && typeof anyRaw === "object" && "data" in anyRaw && anyRaw.data) {
-    return anyRaw.data as T;
-  }
-  return raw as T;
-}
-
-function assertResponseShape(res: any): asserts res is SaveMyPlaceResponse {
-  if (!res || typeof res.placedId !== "number") {
-    throw new Error("서버 응답 형식이 예상과 다릅니다.");
-  }
-}
-
-export async function savePlace(payload: SaveMyPlaceRequest): Promise<SaveMyPlaceResponse> {
-  try {
-    const body: SaveMyPlaceRequest = {
-      ...payload,
-      cnctrLevel: Number(payload.cnctrLevel),
-    };
-
-    const { data } = await api.put<SaveMyPlaceResponse | ApiEnvelope<SaveMyPlaceResponse>>(
-      "/my/places/save",
-      body,
-      { headers: { "Content-Type": "application/json" } }
-    );
-
-    const unwrapped = unwrapResponse<SaveMyPlaceResponse>(data);
-    assertResponseShape(unwrapped);
-    return unwrapped;
-  }  catch (err: any) {
-  console.error("[savePlace][raw error]", err?.response || err);
-  const serverMsg =
-    err?.response?.data?.message ||
-    err?.response?.data?.error?.message ||
-    err?.message;
-  throw new Error(serverMsg || "네트워크 오류 또는 서버 에러가 발생했습니다.");
-}
-}
-
-export default { savePlace };
diff --git a/src/api/Selector/region.api.ts b/src/api/Selector/region.api.ts
new file mode 100644
index 0000000..69e7784
--- /dev/null
+++ b/src/api/Selector/region.api.ts
@@ -0,0 +1,22 @@
+import api from '@/api/api';
+
+export interface SigunguDto {
+  sigunguCode: string;
+  sigunguName: string;
+}
+export interface AreaDto {
+  areaCode: string;
+  areaName: string;
+  sigunguList: SigunguDto[];
+}
+
+function unwrap<T>(raw: any): T {
+  return raw && typeof raw.success === 'boolean' && 'data' in raw ? raw.data : raw;
+}
+
+export async function fetchRegions(): Promise<AreaDto[]> {
+  const res = await api.get('/places/regions');
+  const data = unwrap<AreaDto[]>(res.data);
+  if (!Array.isArray(data)) throw new Error('Unexpected response for /places/regions');
+  return data;
+}
diff --git a/src/api/travel/places.api.ts b/src/api/travel/places.api.ts
new file mode 100644
index 0000000..507f9da
--- /dev/null
+++ b/src/api/travel/places.api.ts
@@ -0,0 +1,58 @@
+import api from '@/api/api';
+
+export type SearchPlacesParams = {
+  areaCode?: number | string;
+  sigunguCode?: number | string;
+  cat1?: string;
+  cat2?: string;
+  contentTypeId?: number;
+  pageNo?: number;
+  numOfRows?: number;
+  arrange?: 'O' | 'Q' | 'R' | 'S';
+  _type?: string;
+};
+
+export type PlaceDto = {
+  title: string;
+  contentid: string;
+  catName?: string;
+  areaName?: string;
+  firstimage?: string;
+  dist?: string;
+  likeCount?: number;
+  cnctrRate?: string | number;
+  quietnessLevel?: number;
+};
+
+function unwrap<T>(raw: any): T {
+  return raw && typeof raw.success === 'boolean' && 'data' in raw ? raw.data : raw;
+}
+function toArray<T>(raw: any): T[] {
+  if (Array.isArray(raw)) return raw;
+  if (Array.isArray(raw?.content)) return raw.content;
+  if (Array.isArray(raw?.items)) return raw.items;
+  if (raw && typeof raw === 'object') return [raw as T];
+  return [];
+}
+
+export async function searchPlaces(params: SearchPlacesParams): Promise<PlaceDto[]> {
+  const res = await api.get('/places', { params });
+  return toArray<PlaceDto>(unwrap(res.data));
+}
+
+export function mapToCard(p: PlaceDto) {
+  const raw = p.firstimage || '';
+  const imgUrl =
+    typeof raw === 'string' && raw.startsWith('http://')
+      ? raw.replace(/^http:\/\//, 'https://')
+      : raw || undefined;
+
+  return {
+    id: p.contentid,
+    title: p.title,
+    theme: p.catName ?? '-',
+    likeCount: p.likeCount ?? 0,
+    imgUrl,
+    quietLevel: typeof p.quietnessLevel === 'number',
+  };
+}
diff --git a/src/api/travel/travel.api.ts b/src/api/travel/travel.api.ts
deleted file mode 100644
index 20d105e..0000000
--- a/src/api/travel/travel.api.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import api from "@/api/api";
-import type { ApiResponse } from "@/types/api-response";
-import { getThemeCodes, getRegionCodes } from "@/utils/ktoMapping";
-import type { AiTravelBody, GeneralTravelBody } from "@/types/kto";
-
-export function buildAiTravelBody(params: { main: string; sub: string }): AiTravelBody {
-  const { cat1, cat2, cat3 } = getThemeCodes(params.main, params.sub);
-  return { cat1, cat2, cat3 };
-}
-
-export function buildGeneralTravelBody(params: {
-  region: string;
-  sigungu?: string;
-  main?: string;
-  sub?: string;
-}): GeneralTravelBody {
-  const { areaCode, sigunguCode } = getRegionCodes(params.region, params.sigungu);
-  if (params.main && params.sub) {
-    const { cat1, cat2, cat3 } = getThemeCodes(params.main, params.sub);
-    return { areaCode, sigunguCode, cat1, cat2, cat3 };
-  }
-  return { areaCode, sigunguCode };
-}
-
-function normalizeAxiosError(e: any): Error {
-  const status = e?.response?.status;
-  const respMsg =
-    e?.response?.data?.message ||
-    e?.response?.data?.error ||
-    e?.message;
-
-  if (status) return new Error(`[${status}] ${respMsg ?? "Server error"}`);
-  if (e?.request) return new Error("Network error or no response from server");
-  return new Error(respMsg ?? String(e));
-}
-
-export async function requestAiPlaces<T>(
-  endpoint: string,
-  params: { main: string; sub: string }
-): Promise<T> {
-  const body = buildAiTravelBody(params);
-  try {
-    const { data } = await api.post<ApiResponse<T>>(endpoint, body);
-    return data.data;
-  } catch (e) {
-    throw normalizeAxiosError(e);
-  }
-}
-
-
-export async function requestGeneralPlaces<T>(
-  endpoint: string,
-  params: { region: string; sigungu?: string; main?: string; sub?: string }
-): Promise<T> {
-  const body = buildGeneralTravelBody(params);
-  try {
-    const { data } = await api.post<ApiResponse<T>>(endpoint, body);
-    return data.data;
-  } catch (e) {
-    throw normalizeAxiosError(e);
-  }
-}
-
-/** ========================
-import type { Place } from "@/types/place";
-async function example() {
-  // AI 여행지
-  const aiResult = await requestAiPlaces<Place[]>("/ai/places", {
-    main: "자연",
-    sub: "자연관광지",
-  });
-  // 일반 여행지
-  const generalResult = await requestGeneralPlaces<Place[]>("/places/search", {
-    region: "서울특별시", // 별칭 허용 (regionMap에서 normalize)
-    sigungu: "종로구",
-    main: "자연",
-    sub: "자연관광지",
-  });
-}
-*/
diff --git a/src/component/SideBar.tsx b/src/component/SideBar.tsx
index 1586352..6fe2d65 100644
--- a/src/component/SideBar.tsx
+++ b/src/component/SideBar.tsx
@@ -22,7 +22,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, position = 'right' }
   return (
     <>
       <div
-        className={`fixed top-0 left-[max(0px,calc(50vw-218px))] z-[60] h-[100dvh] w-[min(100vw,433px)] ${
+        className={`fixed top-0 left-[max(0px,calc(50vw-221px))] z-[60] h-[100dvh] w-[min(100vw,432px)] ${
           isOpen ? 'pointer-events-auto' : 'pointer-events-none'
         } overflow-hidden`}
       >
@@ -54,7 +54,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, position = 'right' }
               AI 맞춤 여행지 탐색
             </button>
             <div className="border-gray1 mr-13 border-b" />
-            <button onClick={() => go('/explore/Filter')} className="cursor-pointer py-2 text-left">
+            <button onClick={() => go('/search')} className="cursor-pointer py-2 text-left">
               여행지 탐색
             </button>
             <div className="border-gray1 mr-13 border-b" />
diff --git a/src/component/common/Card/PlaceCard.tsx b/src/component/common/Card/PlaceCard.tsx
index b669d13..dcc1f17 100644
--- a/src/component/common/Card/PlaceCard.tsx
+++ b/src/component/common/Card/PlaceCard.tsx
@@ -5,7 +5,7 @@ type PlaceCardProps = {
   imgUrl?: string;
   title: string;
   theme: string;
-  quietLevel: number;
+  quietLevel: number | boolean;
   likeCount: number;
   showRemoveButton?: boolean;
   onRemove?: () => void;
diff --git a/src/component/selector/RegionSelector.tsx b/src/component/selector/RegionSelector.tsx
index b2a450a..e8f3076 100644
--- a/src/component/selector/RegionSelector.tsx
+++ b/src/component/selector/RegionSelector.tsx
@@ -1,38 +1,99 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Selector from './Selector';
-import { regionMap, normalizeRegionName } from '@/constants/regionMap';
-import { getRegionCodes } from '@/utils/ktoMapping';
+import api from '@/api/api';
 
 export type RegionSelectPayload = {
   region: string;
   sigungu?: string;
-  areaCode: number | string;
-  sigunguCode?: number | string;
+  areaCode: string | number;
+  sigunguCode?: string | number;
 };
 
-function buildRegionDataMap() {
-  const m: Record<string, string[]> = {};
-  for (const [region, info] of Object.entries(regionMap)) {
-    const subs = info.sigungu ? Object.keys(info.sigungu) : [region];
-    m[region] = subs;
-  }
-  return m;
+type SigunguDto = { sigunguCode: string | number; sigunguName: string };
+type AreaDto = { areaCode: string | number; areaName: string; sigunguList: SigunguDto[] };
+
+function unwrap<T>(raw: any): T {
+  return raw && typeof raw.success === 'boolean' && 'data' in raw ? raw.data : raw;
 }
 
-const REGION_DATA_MAP: Record<string, string[]> = buildRegionDataMap();
-const norm = (s: string) => normalizeRegionName(s.replace(/\u00A0/g, ' ').trim());
+const norm = (s?: string | null) => (s ?? '').replace(/\u00A0/g, ' ').trim();
 
 export default function RegionSelector({
   onChange,
 }: {
   onChange?: (payload: RegionSelectPayload) => void;
 }) {
-  const dataMap = useMemo(() => REGION_DATA_MAP, []);
+  const [dataMap, setDataMap] = useState<Record<string, string[]>>({});
+
+  const [codeMap, setCodeMap] = useState<
+    Record<string, { areaCode: string | number; sigunguMap: Record<string, string | number> }>
+  >({});
+
+  const [loading, setLoading] = useState(true);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        setLoading(true);
+        setErr(null);
+
+        const res = await api.get('/places/regions');
+        const list = unwrap<AreaDto[]>(res.data);
+
+        const dm: Record<string, string[]> = {};
+        const cm: Record<
+          string,
+          { areaCode: string | number; sigunguMap: Record<string, string | number> }
+        > = {};
+
+        for (const area of list ?? []) {
+          const areaName = norm(area.areaName);
+          const sigs = (area.sigunguList ?? []).map((s) => norm(s.sigunguName));
+
+          dm[areaName] = sigs.length ? sigs : [areaName];
+          const sigMap: Record<string, string | number> = {};
+          for (const s of area.sigunguList ?? []) {
+            sigMap[norm(s.sigunguName)] = s.sigunguCode;
+          }
+          cm[areaName] = { areaCode: area.areaCode, sigunguMap: sigMap };
+        }
+
+        if (!alive) return;
+        setDataMap(dm);
+        setCodeMap(cm);
+      } catch (e) {
+        if (!alive) return;
+        setErr('지역 목록을 불러오지 못했습니다.');
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  const initialMain = useMemo(() => {
+    if (dataMap['인천']) return '인천';
+    const keys = Object.keys(dataMap);
+    return keys.length ? keys[0] : '';
+  }, [dataMap]);
+
+  if (loading) {
+    return (
+      <div className="rounded-lg bg-gray-100 px-3 py-2 text-sm text-gray-600">불러오는 중…</div>
+    );
+  }
+  if (err) {
+    return <div className="rounded-lg bg-red-100 px-3 py-2 text-sm text-red-700">{err}</div>;
+  }
 
   return (
     <Selector
       dataMap={dataMap}
-      initialMain="인천"
+      initialMain={initialMain}
       colorScheme={{
         leftBase: 'bg-orange text-black',
         leftItem: 'text-black',
@@ -43,11 +104,13 @@ export default function RegionSelector({
       }}
       onSelect={(main, subs) => {
         const region = norm(main);
-        const sigungu = subs?.[0];
+        const sigungu = norm(subs?.[0]);
 
-        const { areaCode, sigunguCode } = getRegionCodes(region, sigungu);
+        const area = codeMap[region];
+        const areaCode = area?.areaCode ?? '';
+        const sigunguCode = sigungu ? area?.sigunguMap?.[sigungu] : undefined;
 
-        onChange?.({ region, sigungu, areaCode, sigunguCode });
+        onChange?.({ region, sigungu: sigungu || undefined, areaCode, sigunguCode });
       }}
     />
   );
diff --git a/src/component/selector/SortPillSelect.tsx b/src/component/selector/SortPillSelect.tsx
new file mode 100644
index 0000000..5d6518d
--- /dev/null
+++ b/src/component/selector/SortPillSelect.tsx
@@ -0,0 +1,159 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ChevronDown } from 'react-feather';
+
+export type Option<T extends string = string> = { value: T; label: string };
+
+type Props<T extends string = string> = {
+  value: T;
+  options: Option<T>[];
+  onChange: (v: T) => void;
+  className?: string;
+  disabled?: boolean;
+  size?: 'sm' | 'md';
+};
+
+export default function SortPillSelect<T extends string = string>({
+  value,
+  options,
+  onChange,
+  className,
+  disabled,
+  size = 'md',
+}: Props<T>) {
+  const [open, setOpen] = useState(false);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const current = useMemo(
+    () => options.find((o) => o.value === value) ?? options[0],
+    [value, options],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e: MouseEvent) => {
+      if (!menuRef.current && !btnRef.current) return;
+      const target = e.target as Node;
+      if (menuRef.current?.contains(target) || btnRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        btnRef.current?.focus();
+      }
+    };
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  const [activeIdx, setActiveIdx] = useState<number>(-1);
+  useEffect(() => {
+    if (!open) setActiveIdx(-1);
+  }, [open]);
+
+  const pillSize = size === 'sm' ? 'h-7 px-2 text-caption2' : 'h-10 px-4 text-[15px]';
+
+  return (
+    <div className={`relative inline-block ${className ?? ''}`}>
+      <button
+        ref={btnRef}
+        type="button"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((o) => !o)}
+        onKeyDown={(e) => {
+          if (disabled) return;
+          if ((e.key === 'Enter' || e.key === ' ') && !open) {
+            e.preventDefault();
+            setOpen(true);
+            setActiveIdx(options.findIndex((o) => o.value === value));
+          } else if (e.key === 'ArrowDown' && !open) {
+            e.preventDefault();
+            setOpen(true);
+            setActiveIdx(0);
+          }
+        }}
+        className={[
+          'rounded-full border bg-white',
+          'border-gray-300 text-black',
+          'inline-flex items-center gap-2',
+          'shadow-sm hover:bg-gray-50',
+          'focus:outline-none focus-visible:ring-2 focus-visible:ring-green-300',
+          disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+          pillSize,
+        ].join(' ')}
+      >
+        <span className="leading-none">{current?.label ?? ''}</span>
+        <ChevronDown
+          size={15}
+          className={`transition-transform ${open ? 'rotate-180' : ''} text-gray-400`}
+        />
+      </button>
+
+      {open && (
+        <div
+          ref={menuRef}
+          role="listbox"
+          tabIndex={-1}
+          className="absolute z-50 mt-2 min-w-full overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-lg"
+          style={{ insetInlineStart: 0 }}
+          onKeyDown={(e) => {
+            if (e.key === 'ArrowDown') {
+              e.preventDefault();
+              setActiveIdx((i) => (i + 1) % options.length);
+            } else if (e.key === 'ArrowUp') {
+              e.preventDefault();
+              setActiveIdx((i) => (i - 1 + options.length) % options.length);
+            } else if (e.key === 'Home') {
+              e.preventDefault();
+              setActiveIdx(0);
+            } else if (e.key === 'End') {
+              e.preventDefault();
+              setActiveIdx(options.length - 1);
+            } else if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              const pick = options[activeIdx];
+              if (pick) {
+                onChange(pick.value);
+                setOpen(false);
+                btnRef.current?.focus();
+              }
+            }
+          }}
+        >
+          {options.map((opt, i) => {
+            const selected = opt.value === value;
+            const active = i === activeIdx;
+            return (
+              <button
+                key={opt.value}
+                role="option"
+                aria-selected={selected}
+                type="button"
+                className={[
+                  'text-caption2 w-full px-2 py-2 text-left',
+                  active ? 'bg-gray-100' : 'bg-white',
+                  selected ? 'font-medium text-black' : 'text-gray-700',
+                  'hover:bg-gray-100 focus:outline-none',
+                ].join(' ')}
+                onMouseEnter={() => setActiveIdx(i)}
+                onClick={() => {
+                  onChange(opt.value);
+                  setOpen(false);
+                  btnRef.current?.focus();
+                }}
+              >
+                {opt.label}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/component/selector/TravelActivitySelector.tsx b/src/component/selector/TravelActivitySelector.tsx
index 7eba231..d7df8a5 100644
--- a/src/component/selector/TravelActivitySelector.tsx
+++ b/src/component/selector/TravelActivitySelector.tsx
@@ -1,18 +1,102 @@
+import { useEffect, useMemo, useState } from 'react';
 import SelectorMulti from './SelectorMulti';
-import { activityMap } from '@/constants/ActivityMap';
+import api from '@/api/api';
 import { cn } from '@/utils/cn';
 
 type Props = {
   className?: string;
   onChange?: (main: string, subs: string[]) => void;
+  onChangeCodes?: (cat1?: string, cat2?: string[]) => void;
 };
 
-export default function TravelActivitySelector({ className, onChange }: Props) {
+type Cat2Dto = { cat2: string; cat2Name: string };
+type Cat1GroupDto = { cat1: string; cat1Name: string; cat2List: Cat2Dto[] };
+
+function unwrap<T>(raw: any): T {
+  return raw && typeof raw.success === 'boolean' && 'data' in raw ? raw.data : raw;
+}
+
+const norm = (s?: string | null) => (s ?? '').replace(/\u00A0/g, ' ').trim();
+
+export default function TravelActivitySelector({ className, onChange, onChangeCodes }: Props) {
+  const [, setGroups] = useState<Cat1GroupDto[]>([]);
+  const [dataMap, setDataMap] = useState<Record<string, string[]>>({});
+  const [loading, setLoading] = useState(true);
+  const [err, setErr] = useState<string | null>(null);
+
+  const [codeMap, setCodeMap] = useState<
+    Record<string, { cat1: string; cat2ByName: Record<string, string> }>
+  >({});
+
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        setLoading(true);
+        setErr(null);
+
+        const res = await api.get('/places/themes');
+        const list = unwrap<Cat1GroupDto[]>(res.data);
+
+        const dm: Record<string, string[]> = {};
+        const cm: Record<string, { cat1: string; cat2ByName: Record<string, string> }> = {};
+
+        for (const g of list ?? []) {
+          const cat1Name = norm(g.cat1Name);
+          const cat2Names = (g.cat2List ?? []).map((c) => norm(c.cat2Name));
+
+          dm[cat1Name] = cat2Names.length ? cat2Names : [cat1Name];
+
+          const map: Record<string, string> = {};
+          for (const c of g.cat2List ?? []) {
+            map[norm(c.cat2Name)] = c.cat2;
+          }
+          cm[cat1Name] = { cat1: g.cat1, cat2ByName: map };
+        }
+
+        if (!alive) return;
+        setGroups(list ?? []);
+        setDataMap(dm);
+        setCodeMap(cm);
+      } catch (e) {
+        if (!alive) return;
+        setErr('테마 목록을 불러오지 못했습니다.');
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  const initialMain = useMemo(() => {
+    if (dataMap['자연']) return '자연';
+    const keys = Object.keys(dataMap);
+    return keys.length ? keys[0] : '';
+  }, [dataMap]);
+
+  if (loading) {
+    return (
+      <div className={cn('rounded-lg bg-gray-100 px-3 py-2 text-sm text-gray-600', className)}>
+        불러오는 중…
+      </div>
+    );
+  }
+  if (err) {
+    return (
+      <div className={cn('rounded-lg bg-red-100 px-3 py-2 text-sm text-red-700', className)}>
+        {err}
+      </div>
+    );
+  }
+  if (!initialMain) return null;
+
   return (
     <div className={cn('w-full', className)}>
       <SelectorMulti
-        dataMap={activityMap}
-        initialMain="자연"
+        dataMap={dataMap}
+        initialMain={initialMain}
         colorScheme={{
           leftBase: 'bg-red2 text-black text-caption4',
           leftItem: 'text-black text-caption4',
@@ -22,8 +106,13 @@ export default function TravelActivitySelector({ className, onChange }: Props) {
           borderColor: 'border-red2',
         }}
         onSelect={(main, subs) => {
-          console.log('선택된:', main, subs);
-          onChange?.(main, subs);
+          const m = norm(main);
+          const s = subs.map(norm);
+          onChange?.(m, s);
+
+          const c1 = codeMap[m]?.cat1;
+          const c2 = subs.map((x) => codeMap[m]?.cat2ByName[norm(x)]).filter(Boolean) as string[];
+          onChangeCodes?.(c1, c2);
         }}
       />
     </div>
diff --git a/src/pages/ai/TravelSpotDetail.tsx b/src/pages/ai/TravelSpotDetail.tsx
index bc9f826..8ac8504 100644
--- a/src/pages/ai/TravelSpotDetail.tsx
+++ b/src/pages/ai/TravelSpotDetail.tsx
@@ -13,6 +13,7 @@ import { getPlaceDetail, type IntegratedPlace } from '@/api/Detail/detail.api';
 import { useEffect, useState } from 'react';
 import { Badge, Image, Loader, ParkingTable } from '@/component';
 import { likePlace, unlikePlace, getLikeStatus } from '@/api/like/like.api';
+import { savePlace, unsavePlace, getSaveStatus } from '@/api/Myplace/myPlace.api';
 
 const TravelSpotDetail = () => {
   const navigate = useNavigate();
@@ -49,6 +50,7 @@ const TravelSpotDetail = () => {
             regionName: data.regionTag ?? '정보없음',
             themeName: data.themeName ?? '여행지',
             cnctrLevel: data.serenity ?? 0,
+            placeName: data.name || String(contentId),
           },
         }),
       );
@@ -81,8 +83,60 @@ const TravelSpotDetail = () => {
     }
   };
 
-  const handleToggleBookmark = () => {
-    setBookmarked((prev) => !prev);
+  const handleToggleBookmark = async (e?: React.MouseEvent) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+
+    if (!data) return;
+
+    // 미로그인: 로그인 후 다시 실행하도록 액션/리다이렉트 저장
+    if (!isAuthed) {
+      const here = `${location.pathname}${location.search}${location.hash}`;
+      sessionStorage.setItem('postLoginRedirect', here);
+      sessionStorage.setItem(
+        'postLoginAction',
+        JSON.stringify({
+          kind: 'SAVE_PLACE',
+          contentId,
+          payload: {
+            regionName: data.regionTag ?? '정보없음',
+            themeName: data.themeName ?? '여행지',
+            cnctrLevel: data.serenity ?? 0,
+            placeName: data.name || String(contentId),
+          },
+        }),
+      );
+      navigate(
+        `/login?redirect=${encodeURIComponent(here)}&action=save_place&cid=${encodeURIComponent(
+          contentId,
+        )}`,
+        { replace: true },
+      );
+      return;
+    }
+
+    try {
+      if (bookmarked) {
+        await unsavePlace({
+          contentId,
+          regionName: data?.regionTag ?? '정보없음',
+          themeName: data?.themeName ?? '여행지',
+          cnctrLevel: data?.serenity ?? 0,
+        });
+        setBookmarked(false);
+      } else {
+        await savePlace({
+          contentId,
+          regionName: data.regionTag ?? '정보없음',
+          themeName: data.themeName ?? '여행지',
+          cnctrLevel: data.serenity ?? 0,
+          placeName: data.name || String(contentId),
+        });
+        setBookmarked(true);
+      }
+    } catch (err: any) {
+      console.error('저장 처리 실패:', err?.message || err);
+    }
   };
 
   function mapIntegratedToPlaceDetail(id: string, item: IntegratedPlace): PlaceDetail {
@@ -160,6 +214,12 @@ const TravelSpotDetail = () => {
             } catch (e) {
               console.debug('좋아요 상태 조회 실패:', e);
             }
+            try {
+              const saved = await getSaveStatus(contentId);
+              if (alive) setBookmarked(!!saved);
+            } catch (e) {
+              console.debug('저장 상태 조회 실패:', e);
+            }
           }
         }
       } catch (e: any) {
@@ -172,7 +232,7 @@ const TravelSpotDetail = () => {
     return () => {
       alive = false;
     };
-  }, [contentId]);
+  }, [contentId, isAuthed]);
 
   return (
     <div className="min-h-screen">
diff --git a/src/pages/explore/Filter.tsx b/src/pages/explore/Filter.tsx
index 1993495..c4c82fc 100644
--- a/src/pages/explore/Filter.tsx
+++ b/src/pages/explore/Filter.tsx
@@ -1,63 +1,26 @@
-// src/pages/explore/Filter.tsx
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Progressbar from '@/component/Progressbar';
-import RegionSelectorRaw from '@/component/selector/RegionSelector';
-import TravelActivitySelectorRaw from '@/component/selector/TravelActivitySelector';
 import { ArrowLeft } from '@/assets';
-import { Button } from '@/component';
+import RegionStep from './RegionStep';
+import ThemeStep from './ThemeStep';
+import LoadingStep from './LoadingStep';
+import ResultsStep from './ResultStep';
+import type { Pair, Phase, Place } from './types';
 
-type Pair = { left?: string; right?: string };
-type Phase = 'select' | 'loading' | 'results';
-
-function toPair(v: any): Pair {
-  if (!v) return {};
-  if (typeof v === 'string') return { left: v };
-  if (Array.isArray(v)) return { left: v[0], right: v[1] };
-  if ('left' in v || 'right' in v) return { left: v.left, right: v.right };
-  const left =
-    v?.sido ?? v?.group ?? v?.category ?? v?.parent ?? v?.main ?? v?.value ?? v?.key ?? v?.[0];
-  const right = v?.sigungu ?? v?.theme ?? v?.sub ?? v?.child ?? v?.detail ?? v?.label ?? v?.[1];
-  return { left, right };
-}
-
-type AdapterProps = { onSelect?: (v: Pair) => void };
-
-const RegionSelector: React.FC<AdapterProps> = ({ onSelect }) => (
-  <RegionSelectorRaw
-    {...({
-      onSelect: (v: any) => onSelect?.(toPair(v)),
-    } as any)}
-  />
-);
-
-const TravelActivitySelector: React.FC<AdapterProps> = ({ onSelect }) => (
-  <TravelActivitySelectorRaw
-    {...({
-      onSelect: (v: any) => onSelect?.(toPair(v)),
-    } as any)}
-  />
-);
-
-type Place = {
-  id: string | number;
-  name: string;
-  imageUrl?: string;
-  sido?: string;
-  sigungu?: string;
-  tags?: string[];
-  address?: string;
-};
-
-export default function Filter() {
+export default function FilterPage() {
   const navigate = useNavigate();
-
   const [step, setStep] = useState<1 | 2>(1);
   const [phase, setPhase] = useState<Phase>('select');
   const [region, setRegion] = useState<Pair>({});
   const [activity, setActivity] = useState<Pair>({});
   const [results, setResults] = useState<Place[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [regionCodes, setRegionCodes] = useState<{
+    areaCode?: string | number;
+    sigunguCode?: string | number;
+  }>({});
+  const [activityCodes, setActivityCodes] = useState<{ cat1?: string; cat2?: string[] }>({});
 
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -65,27 +28,29 @@ export default function Filter() {
 
   useEffect(() => {
     setActivity({});
+    setActivityCodes({});
   }, [region.left, region.right]);
 
-  const next = () => setStep(2);
-  const prev = () => setStep(1);
-
   const progress = useMemo(() => {
     if (phase === 'results') return 1;
     return step === 1 ? 0.5 : 1;
   }, [phase, step]);
 
-  // ✅ 완료 → 항상 활성화, 무조건 Searching으로 이동
-  function handleFinish() {
-    navigate('/explore/Searching', { state: { region, activity } });
-  }
+  const handleFinish = () => {
+    navigate('/search/result', {
+      state: {
+        region: { areaCode: regionCodes.areaCode, sigunguCode: regionCodes.sigunguCode },
+        activity: { cat1: activityCodes.cat1, cat2: activityCodes.cat2 },
+      },
+    });
+  };
 
-  function resetAndSelectAgain() {
+  const resetAndSelectAgain = () => {
     setPhase('select');
     setStep(1);
     setResults([]);
     setError(null);
-  }
+  };
 
   return (
     <div className="flex min-h-screen flex-col bg-white">
@@ -98,6 +63,7 @@ export default function Filter() {
           여행지 탐색
         </span>
       </div>
+
       <div className="px-8">
         {/* 진행 바 */}
         <div className="pt-5 pb-2">
@@ -109,120 +75,34 @@ export default function Filter() {
           {phase === 'select' && (
             <>
               {step === 1 ? (
-                <>
-                  <h2 className="text-green1 mb-4 text-base font-semibold">
-                    1단계: 지역을 골라주세요.
-                  </h2>
-                  <div className="rounded-2xl bg-white">
-                    <RegionSelector onSelect={setRegion} />
-                  </div>
-                  <div className="fixed right-0 bottom-[10px] left-0 z-10 mx-auto w-full max-w-[430px] px-10 pt-4 pb-6">
-                    <Button variant="lg" color="green3" className="w-full" onClick={next}>
-                      다음
-                    </Button>
-                  </div>
-                </>
+                <RegionStep
+                  value={region}
+                  onChange={setRegion}
+                  onChangeCodes={setRegionCodes}
+                  onNext={() => setStep(2)}
+                />
               ) : (
-                <>
-                  <h2 className="text-green1 mb-4 text-base font-semibold">
-                    2단계: 테마를 골라주세요.
-                  </h2>
-                  <div className="rounded-2xl bg-white">
-                    <TravelActivitySelector onSelect={setActivity} />
-                  </div>
-                  <div className="fixed right-0 bottom-[10px] left-0 z-10 mx-auto w-full max-w-[430px] px-10 pt-4 pb-6">
-                    <div className="flex justify-between">
-                      <Button color="green-muted" variant="md" onClick={prev}>
-                        이전
-                      </Button>
-                      <Button color="green3" variant="md" onClick={handleFinish}>
-                        완료
-                      </Button>
-                    </div>
-                  </div>
-                </>
+                <ThemeStep
+                  value={activity}
+                  onChange={setActivity}
+                  onChangeCodes={setActivityCodes}
+                  onPrev={() => setStep(1)}
+                  onFinish={handleFinish}
+                />
               )}
             </>
           )}
 
-          {phase === 'loading' && (
-            <div className="flex flex-col items-center justify-center py-20">
-              <div className="text-green1 animate-pulse font-semibold">여행지를 불러오는 중…</div>
-            </div>
-          )}
+          {phase === 'loading' && <LoadingStep />}
 
           {phase === 'results' && (
-            <>
-              <h2 className="text-green1 mb-3 text-base font-semibold">탐색 결과</h2>
-
-              <div className="mb-4 flex flex-wrap gap-2">
-                {region.left && (
-                  <span className="bg-green3-light text-green1 border-green3 rounded-full border px-3 py-1 text-sm">
-                    지역: {region.left}
-                    {region.right ? ` ${region.right}` : ''}
-                  </span>
-                )}
-                {activity.left && activity.right && (
-                  <span className="bg-pink text-green1 border-red2 rounded-full border px-3 py-1 text-sm">
-                    테마: {activity.left} / {activity.right}
-                  </span>
-                )}
-                <button
-                  onClick={resetAndSelectAgain}
-                  className="bg-gray2 ml-auto rounded-full px-3 py-1 text-sm hover:opacity-80"
-                >
-                  다시 선택하기
-                </button>
-              </div>
-
-              {error && (
-                <div className="border-red2 bg-red2 mb-4 rounded-lg border px-3 py-2 text-sm text-white">
-                  {error}
-                </div>
-              )}
-              {!error && results.length === 0 && (
-                <div className="text-gray1 py-16 text-center">
-                  조건에 맞는 여행지가 없어요. 필터를 바꿔보세요.
-                </div>
-              )}
-
-              <ul className="grid grid-cols-1 gap-4">
-                {results.map((p) => (
-                  <li
-                    key={String(p.id ?? p.name)}
-                    className="border-gray1 overflow-hidden rounded-2xl border shadow-sm"
-                  >
-                    <div className="bg-gray2 h-40 w-full">
-                      {p.imageUrl ? (
-                        <img src={p.imageUrl} alt={p.name} className="h-full w-full object-cover" />
-                      ) : (
-                        <div className="text-gray1 flex h-full w-full items-center justify-center">
-                          이미지 없음
-                        </div>
-                      )}
-                    </div>
-                    <div className="p-3">
-                      <div className="text-green1 font-semibold">{p.name}</div>
-                      <div className="text-green-muted mt-1 text-sm">
-                        {(p.sido || p.sigungu) && `${p.sido ?? ''} ${p.sigungu ?? ''}`}
-                      </div>
-                      {p.tags && p.tags.length > 0 && (
-                        <div className="mt-2 flex flex-wrap gap-1">
-                          {p.tags.map((t) => (
-                            <span
-                              key={t}
-                              className="bg-blue btn-text-white rounded-full px-2 py-0.5 text-xs"
-                            >
-                              #{t}
-                            </span>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            </>
+            <ResultsStep
+              region={region}
+              activity={activity}
+              results={results}
+              error={error}
+              onReset={resetAndSelectAgain}
+            />
           )}
         </div>
       </div>
diff --git a/src/pages/explore/List.tsx b/src/pages/explore/List.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/explore/LoadingStep.tsx b/src/pages/explore/LoadingStep.tsx
new file mode 100644
index 0000000..963d0b5
--- /dev/null
+++ b/src/pages/explore/LoadingStep.tsx
@@ -0,0 +1,7 @@
+export default function LoadingStep() {
+  return (
+    <div className="flex flex-col items-center justify-center py-20">
+      <div className="text-green1 animate-pulse font-semibold">여행지를 불러오는 중…</div>
+    </div>
+  );
+}
diff --git a/src/pages/explore/RegionStep.tsx b/src/pages/explore/RegionStep.tsx
new file mode 100644
index 0000000..1ccceb5
--- /dev/null
+++ b/src/pages/explore/RegionStep.tsx
@@ -0,0 +1,53 @@
+import { useCallback, useRef } from 'react';
+import RegionSelectorRaw from '@/component/selector/RegionSelector';
+import { Button } from '@/component';
+import type { Pair } from './types';
+
+type RegionSelectPayload = {
+  region: string;
+  sigungu?: string;
+  areaCode: string | number;
+  sigunguCode?: string | number;
+};
+
+type Props = {
+  value: Pair;
+  onChange: (v: Pair) => void;
+  onChangeCodes?: (codes: { areaCode?: string | number; sigunguCode?: string | number }) => void;
+  onNext: () => void;
+};
+
+export default function RegionStep({ value, onChange, onChangeCodes, onNext }: Props) {
+  const lastKeyRef = useRef('');
+  const canNext = Boolean(value.right);
+  const handleSelect = useCallback(
+    (p: RegionSelectPayload) => {
+      const left = p.region;
+      const right = p.sigungu;
+      const key = `${left}|${right ?? ''}`;
+
+      if (key === lastKeyRef.current) return;
+      lastKeyRef.current = key;
+
+      if (value.left !== left || value.right !== right) {
+        onChange({ left, right });
+      }
+      onChangeCodes?.({ areaCode: p.areaCode, sigunguCode: p.sigunguCode });
+    },
+    [onChange, onChangeCodes, value.left, value.right],
+  );
+
+  return (
+    <>
+      <h2 className="text-green1 mb-4 text-base font-semibold">1단계: 지역을 골라주세요.</h2>
+      <div className="rounded-2xl bg-white">
+        <RegionSelectorRaw onChange={handleSelect} />
+      </div>
+      <div className="fixed right-0 bottom-[10px] left-0 z-10 mx-auto w-full max-w-[430px] px-10 pt-4 pb-6">
+        <Button variant="lg" color="green3" className="w-full" onClick={onNext} disabled={!canNext}>
+          다음
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/explore/ResultStep.tsx b/src/pages/explore/ResultStep.tsx
new file mode 100644
index 0000000..0c64a9b
--- /dev/null
+++ b/src/pages/explore/ResultStep.tsx
@@ -0,0 +1,88 @@
+import { Button } from '@/component';
+import { type Pair, type Place } from './types';
+
+type Props = {
+  region: Pair;
+  activity: Pair;
+  results: Place[];
+  error: string | null;
+  onReset: () => void;
+};
+
+export default function ResultsStep({ region, activity, results, error, onReset }: Props) {
+  return (
+    <>
+      <h2 className="text-green1 mb-3 text-base font-semibold">탐색 결과</h2>
+
+      <div className="mb-4 flex flex-wrap gap-2">
+        {region.left && (
+          <span className="bg-green3-light text-green1 border-green3 rounded-full border px-3 py-1 text-sm">
+            지역: {region.left}
+            {region.right ? ` ${region.right}` : ''}
+          </span>
+        )}
+        {activity.left && activity.right && (
+          <span className="bg-pink text-green1 border-red2 rounded-full border px-3 py-1 text-sm">
+            테마: {activity.left} / {activity.right}
+          </span>
+        )}
+        <Button
+          onClick={onReset}
+          className="ml-auto rounded-full px-3 py-1 text-sm"
+          variant="md"
+          color="green-muted"
+        >
+          다시 선택하기
+        </Button>
+      </div>
+
+      {error && (
+        <div className="border-red2 bg-red2 mb-4 rounded-lg border px-3 py-2 text-sm text-white">
+          {error}
+        </div>
+      )}
+      {!error && results.length === 0 && (
+        <div className="text-gray1 py-16 text-center">
+          조건에 맞는 여행지가 없어요. 필터를 바꿔보세요.
+        </div>
+      )}
+
+      <ul className="grid grid-cols-1 gap-4">
+        {results.map((p) => (
+          <li
+            key={String(p.id ?? p.name)}
+            className="border-gray1 overflow-hidden rounded-2xl border shadow-sm"
+          >
+            <div className="bg-gray2 h-40 w-full">
+              {p.imageUrl ? (
+                <img src={p.imageUrl} alt={p.name} className="h-full w-full object-cover" />
+              ) : (
+                <div className="text-gray1 flex h-full w-full items-center justify-center">
+                  이미지 없음
+                </div>
+              )}
+            </div>
+            <div className="p-3">
+              <div className="text-green1 font-semibold">{p.name}</div>
+              <div className="text-green-muted mt-1 text-sm">
+                {(p.sido || p.sigungu) && `${p.sido ?? ''} ${p.sigungu ?? ''}`}
+              </div>
+              {p.tags && p.tags.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-1">
+                  {p.tags.map((t) => (
+                    <span
+                      key={t}
+                      className="bg-blue btn-text-white rounded-full px-2 py-0.5 text-xs"
+                    >
+                      #{t}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
diff --git a/src/pages/explore/Searching.tsx b/src/pages/explore/Searching.tsx
index 9f7bb16..764cf0f 100644
--- a/src/pages/explore/Searching.tsx
+++ b/src/pages/explore/Searching.tsx
@@ -1,32 +1,23 @@
-import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { Loader } from "@/component";
-import bubbleUrl from "@/image/Searching.svg";
-import personUrl from "@/image/Searching2.svg";
-
-export default function Searching() {
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const t = setTimeout(() => {
-      navigate("/explore/travelsearch");
-    }, 3000);
-    return () => clearTimeout(t);
-  }, [navigate]);
+import { Loader } from '@/component';
+import bubbleUrl from '@/image/Searching.svg';
+import personUrl from '@/image/Searching2.svg';
 
+export default function SearchingPage() {
   return (
-    <div className="min-h-screen w-full bg-[var(--color-green3)] flex flex-col items-center justify-center">
-        <Loader className="w-[300px] h-[300px] mb-1" />   
-  <img
-    src={bubbleUrl}
-    alt="당신의 취향에 맞는 여행지를 찾고 있습니다…"
-    className="w-[80%] max-w-xs drop-shadow-sm select-none"
-    draggable={false}/>
-  <img
-    src={personUrl}
-    alt="검색 일러스트"
-    className="w-[62%] max-w-[260px] mt-6 select-none"
-    draggable={false}/>
+    <div className="flex min-h-[100dvh] w-full flex-col items-center justify-center bg-[var(--color-green3)]">
+      <Loader className="mb-1 h-[300px] w-[300px]" />
+      <img
+        src={bubbleUrl}
+        alt="당신의 취향에 맞는 여행지를 찾고 있습니다…"
+        className="w-[80%] max-w-xs drop-shadow-sm select-none"
+        draggable={false}
+      />
+      <img
+        src={personUrl}
+        alt="검색 일러스트"
+        className="mt-6 w-[62%] max-w-[260px] select-none"
+        draggable={false}
+      />
     </div>
   );
 }
diff --git a/src/pages/explore/ThemeStep.tsx b/src/pages/explore/ThemeStep.tsx
new file mode 100644
index 0000000..8e9e6f4
--- /dev/null
+++ b/src/pages/explore/ThemeStep.tsx
@@ -0,0 +1,73 @@
+import { useCallback, useRef } from 'react';
+import TravelActivitySelectorRaw from '@/component/selector/TravelActivitySelector';
+import { Button } from '@/component';
+import type { Pair } from './types';
+
+type Props = {
+  value: Pair;
+  onChange: (v: Pair) => void;
+  onChangeCodes?: (v: { cat1?: string; cat2?: string[] }) => void;
+  onPrev: () => void;
+  onFinish: () => void;
+  canFinish?: boolean;
+};
+
+export default function ThemeStep({
+  canFinish,
+  value,
+  onChange,
+  onChangeCodes,
+  onPrev,
+  onFinish,
+}: Props) {
+  const lastNameKey = useRef<string>('');
+  const lastCodeKey = useRef<string>('');
+  const enabled = typeof canFinish === 'boolean' ? canFinish : Boolean(value.left && value.right);
+  const handleNames = useCallback(
+    (main: string, subs: string[]) => {
+      const left = main;
+      const right = subs?.[0];
+      const nextKey = `${left}|${right ?? ''}`;
+
+      if (nextKey === lastNameKey.current) return;
+      if (value.left === left && value.right === right) {
+        lastNameKey.current = nextKey;
+        return;
+      }
+
+      lastNameKey.current = nextKey;
+      onChange({ left, right });
+    },
+    [onChange, value.left, value.right],
+  );
+
+  const handleCodes = useCallback(
+    (cat1?: string, cat2?: string[]) => {
+      const key = `${cat1 ?? ''}|${(cat2 ?? []).join(',')}`;
+      if (key === lastCodeKey.current) return;
+
+      lastCodeKey.current = key;
+      onChangeCodes?.({ cat1, cat2 });
+    },
+    [onChangeCodes],
+  );
+
+  return (
+    <>
+      <h2 className="text-green1 mb-4 text-base font-semibold">2단계: 테마를 골라주세요.</h2>
+      <div className="rounded-2xl bg-white">
+        <TravelActivitySelectorRaw onChange={handleNames} onChangeCodes={handleCodes} />
+      </div>
+      <div className="fixed right-0 bottom-[10px] left-0 z-10 mx-auto w-full max-w-[430px] px-10 pt-4 pb-6">
+        <div className="flex justify-between">
+          <Button color="green-muted" variant="md" onClick={onPrev}>
+            이전
+          </Button>
+          <Button color="green3" variant="md" onClick={onFinish} disabled={!enabled}>
+            완료
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/explore/types.ts b/src/pages/explore/types.ts
new file mode 100644
index 0000000..35e6b4a
--- /dev/null
+++ b/src/pages/explore/types.ts
@@ -0,0 +1,23 @@
+export type Pair = { left?: string; right?: string };
+export type Phase = 'select' | 'loading' | 'results';
+
+export type Place = {
+  id: string | number;
+  name: string;
+  imageUrl?: string;
+  sido?: string;
+  sigungu?: string;
+  tags?: string[];
+  address?: string;
+};
+
+export function toPair(v: any): Pair {
+  if (!v) return {};
+  if (typeof v === 'string') return { left: v };
+  if (Array.isArray(v)) return { left: v[0], right: v[1] };
+  if ('left' in v || 'right' in v) return { left: v.left, right: v.right };
+  const left =
+    v?.sido ?? v?.group ?? v?.category ?? v?.parent ?? v?.main ?? v?.value ?? v?.key ?? v?.[0];
+  const right = v?.sigungu ?? v?.theme ?? v?.sub ?? v?.child ?? v?.detail ?? v?.label ?? v?.[1];
+  return { left, right };
+}
diff --git a/src/pages/home/MyPage.tsx b/src/pages/home/MyPage.tsx
index 8225ace..1dc595c 100644
--- a/src/pages/home/MyPage.tsx
+++ b/src/pages/home/MyPage.tsx
@@ -1,9 +1,9 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import Header from "@/component/Header";
-import Sidebar from "@/component/SideBar";
-import api from "@/api/api";
-import type { ApiResponse } from "@/types/api-response";
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from '@/component/Header';
+import Sidebar from '@/component/SideBar';
+import api from '@/api/api';
+import type { ApiResponse } from '@/types/api-response';
 
 type Profile = {
   userId: number;
@@ -17,7 +17,7 @@ export default function MyPage() {
   const [error, setError] = useState<string | null>(null);
   const [profile, setProfile] = useState<Profile | null>(null);
 
-  const [nickname, setNickname] = useState("");
+  const [nickname, setNickname] = useState('');
   const [saving, setSaving] = useState(false);
   const [saveMsg, setSaveMsg] = useState<string | null>(null);
 
@@ -28,11 +28,11 @@ export default function MyPage() {
 
   const handleLogout = () => {
     try {
-      localStorage.removeItem("accessToken");
-      localStorage.removeItem("refreshToken");
-      localStorage.removeItem("userId");
+      localStorage.removeItem('accessToken');
+      localStorage.removeItem('refreshToken');
+      localStorage.removeItem('userId');
     } finally {
-      navigate("/", { replace: true });
+      navigate('/', { replace: true });
     }
   };
 
@@ -43,29 +43,29 @@ export default function MyPage() {
       setLoading(true);
       setError(null);
       try {
-        const resp = await api.get<ApiResponse<Profile>>("/my/profile/");
+        const resp = await api.get<ApiResponse<Profile>>('/my/profile/');
         const res = resp.data;
         if (!cancelled) {
           if (res?.success && res.data) {
             setProfile(res.data);
-            setNickname(res.data.nickname ?? "");
+            setNickname(res.data.nickname ?? '');
           } else {
-            setError((res as any)?.error?.message || "프로필 정보를 불러오지 못했습니다.");
+            setError((res as any)?.error?.message || '프로필 정보를 불러오지 못했습니다.');
           }
         }
       } catch (err: any) {
         if (cancelled) return;
         const status = err?.response?.status as number | undefined;
         if (status === 401) {
-          localStorage.removeItem("accessToken");
-          localStorage.removeItem("refreshToken");
-          navigate("/", { replace: true });
+          localStorage.removeItem('accessToken');
+          localStorage.removeItem('refreshToken');
+          navigate('/', { replace: true });
           return;
         }
         setError(
           err?.response?.data?.error?.message ||
             err?.message ||
-            "프로필 조회 중 오류가 발생했습니다."
+            '프로필 조회 중 오류가 발생했습니다.',
         );
       } finally {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
@@ -79,7 +79,7 @@ export default function MyPage() {
     };
   }, [navigate]);
 
-  const email = profile?.email || "";
+  const email = profile?.email || '';
 
   const handleSaveNickname = async () => {
     if (saving) return;
@@ -87,62 +87,67 @@ export default function MyPage() {
 
     const value = nickname.trim();
     if (value.length < 2) {
-      setSaveMsg("닉네임은 2글자 이상이어야 합니다.");
+      setSaveMsg('닉네임은 2글자 이상이어야 합니다.');
       return;
     }
 
     setSaving(true);
     try {
-      const resp = await api.patch<ApiResponse<Profile>>("/my/profile/nickname", {
+      const resp = await api.patch<ApiResponse<Profile>>('/my/profile/nickname', {
         nickname: value,
       });
       const res = resp.data;
 
       if (res?.success && res.data) {
         setProfile((prev) =>
-          prev ? { ...prev, nickname: res.data?.nickname ?? value } : res.data
+          prev ? { ...prev, nickname: res.data?.nickname ?? value } : res.data,
         );
         setNickname(res.data?.nickname ?? value);
-        setSaveMsg("닉네임이 저장되었습니다.");
+        setSaveMsg('닉네임이 저장되었습니다.');
         try {
-          localStorage.setItem("nickname", res.data?.nickname ?? value);
+          localStorage.setItem('nickname', res.data?.nickname ?? value);
         } catch {}
       } else {
         const msg =
           (res as any)?.error?.message ||
           (res as any)?.message ||
-          "닉네임 저장 중 문제가 발생했습니다.";
+          '닉네임 저장 중 문제가 발생했습니다.';
         setSaveMsg(msg);
       }
     } catch (err: any) {
       const status = err?.response?.status as number | undefined;
       if (status === 401) {
-        localStorage.removeItem("accessToken");
-        localStorage.removeItem("refreshToken");
-        navigate("/", { replace: true });
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+        navigate('/', { replace: true });
         return;
       }
       if (status === 409) {
-        setSaveMsg("이미 사용 중인 닉네임입니다.");
+        setSaveMsg('이미 사용 중인 닉네임입니다.');
         return;
       }
       setSaveMsg(
         err?.response?.data?.error?.message ||
           err?.response?.data?.message ||
           err?.message ||
-          "닉네임 저장 중 오류가 발생했습니다."
+          '닉네임 저장 중 오류가 발생했습니다.',
       );
     } finally {
       setSaving(false);
     }
   };
+  const canSave = (() => {
+    const trimmed = nickname.trim();
+    const prev = (profile?.nickname ?? '').trim();
+    return !saving && trimmed.length >= 2 && trimmed !== prev;
+  })();
 
   return (
-    <div className="flex min-h-screen flex-col bg-beige3">
+    <div className="bg-beige3 flex min-h-screen flex-col">
       <Header onMenuClick={handleMenuClick} />
       <Sidebar isOpen={isSidebarOpen} onClose={handleSidebarClose} position="left" />
 
-      <div className="mt-[3.5rem] px-4 py-4 text-center bg-green3-light text-green2">
+      <div className="bg-green3-light text-green2 mt-[3.5rem] px-4 py-4 text-center">
         {loading ? (
           <p className="font-semibold">마이페이지 불러오는 중…</p>
         ) : error ? (
@@ -151,21 +156,21 @@ export default function MyPage() {
             <button
               type="button"
               onClick={() => window.location.reload()}
-              className="mt-2 rounded-m border px-3 py-1 text-caption2 bg-beige2 text-green1 border-gray1"
+              className="rounded-m text-caption2 bg-beige2 text-green1 border-gray1 mt-2 border px-3 py-1"
             >
               다시 시도
             </button>
           </>
         ) : (
           <>
-            <p className="font-semibold">
-              안녕하세요 {nickname ? `${nickname}님` : "여행자님"}!
+            <p className="text-caption1 text-black">
+              안녕하세요 {nickname ? `${nickname}님` : '여행자님'}!
             </p>
-            <p>{email || "이메일 정보 없음"}</p>
+            <p className="text-body1 text-green2">{email || '이메일 정보 없음'}</p>
             <button
               type="button"
               onClick={handleLogout}
-              className="mt-2 rounded-m border px-3 py-1 text-caption2 bg-beige2 text-green1 border-gray1 hover:brightness-95 focus:outline-none focus:ring-2 focus:ring-offset-2"
+              className="rounded-m text-caption2 bg-yellow2 text-green1 mt-2 px-3 py-1"
             >
               로그아웃
             </button>
@@ -173,9 +178,9 @@ export default function MyPage() {
         )}
       </div>
 
-      <div className="mt-6 flex flex-col gap-6 px-6 text-green1">
+      <div className="text-green1 mt-6 flex flex-col gap-6 px-8">
         <div>
-          <label htmlFor="email" className="mb-1 block text-title4 text-green1">
+          <label htmlFor="email" className="text-title4 text-green1 mb-1 block">
             이메일
           </label>
           <input
@@ -183,46 +188,53 @@ export default function MyPage() {
             type="email"
             value={email}
             readOnly
-            className="w-full rounded-m border border-gray2 bg-white px-3 py-2 text-body1"
+            className="rounded-m border-gray2 text-body1 bg-gray1 w-full border px-3 py-2"
           />
         </div>
 
         <div>
-          <label htmlFor="nickname" className="mb-1 block text-title4 text-green1">
-            닉네임
-          </label>
+          <label className="text-title4 text-green1 mb-1 block">닉네임</label>
           <div className="flex items-center gap-2">
             <input
               id="nickname"
               type="text"
               value={nickname}
               onChange={(e) => setNickname(e.target.value)}
-              className="w-full rounded-m border border-gray1 bg-white px-3 py-2 text-body1"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && canSave) handleSaveNickname();
+              }}
+              className="rounded-m border-gray1 text-body1 h-10 w-full border bg-white px-3"
               placeholder="닉네임 입력"
             />
-            {/* ✅ 수정 버튼 하나만 */}
             <button
               type="button"
-              disabled={saving}
+              disabled={!canSave}
               onClick={handleSaveNickname}
-              className="rounded-m border border-green3 bg-green3-light px-3 py-1 text-caption2 text-green1 hover:brightness-95 disabled:opacity-60"
+              className="rounded-m border-green3 bg-green3-light text-caption2 text-green1 h-10 shrink-0 border px-5 hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-50"
+              aria-disabled={!canSave}
             >
-              {saving ? "저장 중..." : "수정"}
+              {saving ? '저장 중...' : '저장'}
             </button>
           </div>
-          {saveMsg && <p className="mt-2 text-caption2 text-green-muted">{saveMsg}</p>}
+          {saveMsg && <p className="text-caption2 text-green-muted mt-2">{saveMsg}</p>}
+        </div>
+        {/*회원 탈퇴*/}
+        <div className="mt-40 px-6 pb-24">
+          <div className="border-t border-gray-200/70 pt-4">
+            <div className="flex items-center justify-between">
+              <span className="text-caption2 text-green-muted">
+                더 이상 서비스를 사용하지 않으신가요?
+              </span>
+              <button
+                type="button"
+                className="text-caption2 text-red-600/80 underline underline-offset-[3px] hover:text-red-700 focus:outline-none"
+              >
+                회원 탈퇴
+              </button>
+            </div>
+          </div>
         </div>
       </div>
-
-      <button
-        type="button"
-        disabled
-        aria-disabled
-        title="UI 데모 — 기능 비활성화"
-        className="fixed right-4 bottom-20 z-50 text-caption2 font-medium text-black underline-offset-2 hover:underline disabled:no-underline disabled:opacity-60"
-      >
-        회원 탈퇴
-      </button>
     </div>
   );
 }
diff --git a/src/pages/home/MyTravelList.tsx b/src/pages/home/MyTravelList.tsx
index 21d20e6..2788467 100644
--- a/src/pages/home/MyTravelList.tsx
+++ b/src/pages/home/MyTravelList.tsx
@@ -1,39 +1,47 @@
-// src/pages/MyTravelList.tsx
 import { useEffect, useMemo, useState } from 'react';
 import Header from '@/component/Header';
 import Sidebar from '@/component/SideBar';
 import SearchIcon from '@/image/Search.svg';
 import PlaceCard from '@/component/common/Card/PlaceCard';
-import { getSavedPlaces, type SavedPlace } from '@/api/Myplace/saveg.api';
-import { unsavePlace } from '@/api/Myplace/saved.api';
+import { getSavedPlaces, unsavePlace, type SavedPlaceItem } from '@/api/Myplace/myPlace.api';
+import { useNavigate } from 'react-router-dom';
+import SortPillSelect, { type Option } from '@/component/selector/SortPillSelect';
 
 const PAGE_SIZE = 20;
 
-function clamp(n: number, min: number, max: number) {
-  return Math.max(min, Math.min(max, n));
-}
-
+type Row = SavedPlaceItem;
+const arrangeOptions: Option<'O' | 'Q' | 'R' | 'S'>[] = [
+  { value: 'O', label: '기본순' },
+  { value: 'Q', label: '수정일순' },
+  { value: 'R', label: '등록일순' },
+  { value: 'S', label: '거리순' },
+];
 const MyTravelList = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  const [items, setItems] = useState<SavedPlace[]>([]);
+  const [items, setItems] = useState<Row[]>([]);
   const [page, setPage] = useState(0);
   const [last, setLast] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [q, setQ] = useState('');
+  const [arrange, setArrange] = useState<'O' | 'Q' | 'R' | 'S'>('O');
 
   const handleMenuClick = () => setIsSidebarOpen(true);
   const handleCloseSidebar = () => setIsSidebarOpen(false);
+  const navigate = useNavigate();
 
   const loadPage = async (p: number, replace = false) => {
     if (loading) return;
     setLoading(true);
     setError(null);
     try {
-      const res = await getSavedPlaces({ page: p, size: PAGE_SIZE });
-      setItems((prev) => (replace ? res.content : [...prev, ...res.content]));
-      setPage(res.page);
-      setLast(res.last);
+      const raw = (await getSavedPlaces(p, PAGE_SIZE)) as any;
+      const pageData = raw?.content ? raw : (raw?.data ?? {});
+      const content = Array.isArray(pageData.content) ? pageData.content : [];
+
+      setItems((prev) => (replace ? content : [...prev, ...content]));
+      setPage(pageData.page ?? p);
+      setLast(!!pageData.last);
     } catch (e) {
       console.error('[MyTravelList][getSavedPlaces]', e);
       setError('목록을 불러오는 중 문제가 발생했습니다.');
@@ -47,14 +55,15 @@ const MyTravelList = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleRemoveItem = async (contentId: string | number) => {
+  const handleRemoveItem = async (item: Row) => {
     const snapshot = items;
-    setItems((prev) => prev.filter((it) => it.contentId !== contentId));
+    setItems((prev) => prev.filter((it) => it.contentId !== item.contentId));
     try {
-      await unsavePlace(contentId);
+      await unsavePlace({ contentId: String(item.contentId) });
     } catch (e) {
       console.error('[MyTravelList][unsavePlace]', e);
-      setItems(snapshot); // 롤백
+      // 롤백
+      setItems(snapshot);
       alert('삭제에 실패했어요. 잠시 후 다시 시도해주세요.');
     }
   };
@@ -63,58 +72,64 @@ const MyTravelList = () => {
     if (!q.trim()) return items;
     const kw = q.trim().toLowerCase();
     return items.filter((it) => {
-      const title = `${it.regionName ?? ''} ${it.themeName ?? ''} ${it.contentId}`.toLowerCase();
-      return title.includes(kw);
+      const hay = `${it.placeName ?? ''} ${it.themeName ?? ''} ${it.contentId}`.toLowerCase();
+      return hay.includes(kw);
     });
   }, [items, q]);
 
   return (
-    <div className="bg-beige1 min-h-screen">
+    <div className="min-h-screen">
       <Header onMenuClick={handleMenuClick} />
       <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} position="left" />
 
-      <div className="px-4 pt-14 pb-8">
-        <div className="mx-[-1rem] mb-3 rounded-b-xl bg-[#dfead1] pt-2 pb-3">
-          <div className="text-heading3 text-green1 text-center font-bold">나의 여행지</div>
+      <div className="mx-auto flex w-full max-w-[430px] flex-col pt-14">
+        <div className="bg-green3-light text-caption3 text-green1 h-10 w-full items-center py-[10px] text-center">
+          나의 여행지
         </div>
 
-        <div className="relative mb-5">
+        <div className="relative my-5 px-9">
           <input
             type="text"
             placeholder="Search"
             value={q}
             onChange={(e) => setQ(e.target.value)}
-            className="w-full rounded-full bg-[#edf0e2] px-4 py-2 pl-10 text-sm text-black placeholder:text-[#7f8c6b] focus:outline-none"
+            className="bg-gray2 w-full rounded-full px-9 py-2 pl-10 text-sm text-black placeholder:text-[#7f8c6b] focus:outline-none"
           />
-          <span className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-[#7f8c6b]">
+          <span className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 px-9 text-[#7f8c6b]">
             <img src={SearchIcon} alt="search" className="h-4 w-4" />
           </span>
         </div>
+        {/*정렬*/}
+        <div className="-mt-2 mb-4 flex justify-end px-9">
+          <SortPillSelect
+            value={arrange}
+            options={arrangeOptions}
+            onChange={setArrange}
+            size="sm"
+          />
+        </div>
 
         {error && (
           <div className="mb-3 rounded-md bg-red-100 px-3 py-2 text-sm text-red-700">{error}</div>
         )}
 
-        <div className="flex flex-col gap-3">
-          {filtered.map((it) => {
-            const title =
-              it.regionName && it.themeName
-                ? `${it.regionName} · ${it.themeName}`
-                : it.regionName || it.themeName || String(it.contentId);
+        <div className="flex flex-col gap-3 px-9">
+          {filtered.map((row) => {
+            const { contentId, themeName, likeCount, cnctrLevel } = row;
 
-            const likeCount = (it as any).likeCnt ?? (it as any).likedCnt ?? 0;
-            const quietLevel = clamp(Math.round(it.entrLevel ?? 3), 1, 5);
+            const title = row.placeName || String(contentId);
 
             return (
               <PlaceCard
-                key={String(it.contentId)}
+                key={String(row.contentId)}
                 title={title}
-                theme={it.themeName ?? '-'}
+                theme={themeName ?? '-'}
                 likeCount={likeCount}
                 imgUrl={undefined}
-                quietLevel={quietLevel}
+                quietLevel={cnctrLevel}
                 showRemoveButton
-                onRemove={() => handleRemoveItem(it.contentId)}
+                onClick={() => navigate(`/place/${contentId}`)}
+                onRemove={() => handleRemoveItem(row)}
               />
             );
           })}
diff --git a/src/pages/home/TravelSearch.tsx b/src/pages/home/TravelSearch.tsx
index 3f78181..43c85bb 100644
--- a/src/pages/home/TravelSearch.tsx
+++ b/src/pages/home/TravelSearch.tsx
@@ -1,69 +1,142 @@
-
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import Header from '@/component/Header';
 import Sidebar from '@/component/SideBar';
 import SearchIcon from '@/image/Search.svg';
-import { TRAVEL_ITEMS } from '@/constants/TravelSearch';
 import PlaceCard from '@/component/common/Card/PlaceCard';
+import SearchingPage from '../explore/Searching';
+import { searchPlaces, mapToCard, type PlaceDto } from '@/api/travel/places.api';
 
-type TravelItem = {
-  id: number;
-  title: string;
-  tranquil: boolean;
-  type: string;
-  likes: number;
-  imgUrl?: string;
+type NavState = {
+  region?: { areaCode?: number | string; sigunguCode?: number | string };
+  activity?: { cat1?: string; cat2?: string[] };
 };
+const PAGE_SIZE = 20;
+
+export default function TravelSearch() {
+  const navigate = useNavigate();
+  const { state } = useLocation();
+  const navState = (state || {}) as NavState;
 
-const TravelSearch = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  const [travelItems, setTravelItems] = useState<TravelItem[]>(
-    () => TRAVEL_ITEMS.map((it) => ({ ...it }))
-  );
+  const [q, setQ] = useState('');
+  const [items, setItems] = useState<ReturnType<typeof mapToCard>[]>([]);
+  const [, setPageNo] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [initialLoading, setInitialLoading] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
 
   const handleMenuClick = () => setIsSidebarOpen(true);
   const handleCloseSidebar = () => setIsSidebarOpen(false);
 
-  const handleRemoveItem = (id: number) =>
-    setTravelItems((prev) => prev.filter((item) => item.id !== id));
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      setItems([]);
+      setPageNo(1);
+      setHasMore(true);
+      setErr(null);
+
+      setInitialLoading(true);
+      try {
+        await loadPage(1, true);
+      } finally {
+        if (alive) setInitialLoading(false);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    navState?.region?.areaCode,
+    navState?.region?.sigunguCode,
+    navState?.activity?.cat1,
+    JSON.stringify(navState?.activity?.cat2 || []),
+  ]);
+
+  async function loadPage(p: number, replace = false) {
+    if (loading || (!hasMore && !replace)) return;
+    if (!replace) setLoading(true);
+    setErr(null);
+
+    try {
+      const params = {
+        areaCode: navState.region?.areaCode,
+        sigunguCode: navState.region?.sigunguCode,
+        cat1: navState.activity?.cat1,
+        cat2: navState.activity?.cat2?.[0],
+        pageNo: p,
+        numOfRows: PAGE_SIZE,
+        arrange: 'O' as const,
+      };
+      const list: PlaceDto[] = await searchPlaces(params);
+      const mapped = list.map(mapToCard);
+
+      setItems((prev) => (replace ? mapped : [...prev, ...mapped]));
+      setPageNo(p);
+      setHasMore(list.length >= PAGE_SIZE);
+    } catch {
+      setErr('여행지 목록을 불러오지 못했어요.');
+    } finally {
+      if (!replace) setLoading(false);
+    }
+  }
+
+  const filtered = useMemo(() => {
+    const kw = q.trim().toLowerCase();
+    if (!kw) return items;
+    return items.filter((it) => it.title.toLowerCase().includes(kw));
+  }, [items, q]);
+
+  if (initialLoading) return <SearchingPage />;
 
   return (
-    <div className="bg-beige1 min-h-screen">
+    <div className="min-h-screen">
       <Header onMenuClick={handleMenuClick} />
       <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} position="left" />
-
-      <div className="pt-14 px-4 pb-8">
-        <div className="mx-[-1rem] mb-3 rounded-b-xl bg-green3-light pb-3 pt-2">
-          <div className="text-center text-heading3 font-bold text-green1">여행지 탐색</div>
+      <div className="mx-auto flex w-full max-w-[430px] flex-col">
+        <div className="pt-14 pb-8">
+          <div className="bg-green3-light text-caption3 text-green1 h-10 w-full items-center py-[10px] text-center">
+            여행지 탐색
+          </div>
         </div>
-        <div className="relative mb-5">
+
+        <div className="relative mb-5 px-9">
           <input
             type="text"
             placeholder="Search"
-            className="w-full rounded-full bg-green0 px-4 py-2 pl-10 text-sm text-black placeholder:text-green-muted focus:outline-none"
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            className="bg-gray2 placeholder:text-green1 w-full rounded-full px-4 py-2 pl-10 text-sm text-black focus:outline-none"
           />
-          <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-green-muted">
+          <span className="text-green-muted pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 px-9">
             <img src={SearchIcon} alt="search" className="h-4 w-4" />
           </span>
         </div>
 
-        <div className="flex flex-col gap-3">
-          {travelItems.map((item) => (
+        {err && (
+          <div className="mb-3 rounded-md bg-red-100 px-3 py-2 text-sm text-red-700">{err}</div>
+        )}
+        {!err && filtered.length === 0 && (
+          <div className="py-10 text-center text-gray-500">조건에 맞는 결과가 없어요.</div>
+        )}
+
+        <div className="flex flex-col gap-3 px-9">
+          {filtered.map((it) => (
             <PlaceCard
-              key={item.id}
-              title={item.title}
-              theme={item.type}
-              likeCount={item.likes}
-              imgUrl={item.imgUrl}
-              quietLevel={item.tranquil ? 5 : 3} // 백 연동 전 구현 확인 용
-              showRemoveButton
-              onRemove={() => handleRemoveItem(item.id)}
+              key={String(it.id)}
+              title={it.title}
+              theme={it.theme}
+              likeCount={it.likeCount}
+              imgUrl={it.imgUrl}
+              quietLevel={it.quietLevel}
+              onClick={() => navigate(`/place/${it.id}`)}
             />
           ))}
         </div>
       </div>
     </div>
   );
-};
-
-export default TravelSearch;
\ No newline at end of file
+}
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 1484c50..6e677fb 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -2,8 +2,6 @@ import { createBrowserRouter } from 'react-router-dom';
 import HomePage from '@/pages/home/Homepage';
 import MyTravelList from '@/pages/home/MyTravelList';
 import MyPage from '@/pages/home/MyPage';
-import RegionSelector from '@/component/selector/RegionSelector';
-import TravelActivitySelector from '@/component/selector/TravelActivitySelector';
 import CardTestPage from '@/examples/CardTest';
 import AlertComponent from '@/examples/AlertTest';
 import AiExploreMain from '@/pages/ai/MainAI';
@@ -15,7 +13,6 @@ import LoginPage from '@/pages/home/Login';
 import KakaoCallbackPage from '@/pages/home/KakaoCallbackPage';
 import Register2 from '@/pages/register/Register2';
 import Register3 from '@/pages/register/Register3';
-import Searching from '@/pages/explore/Searching';
 import TravelSearch from '@/pages/home/TravelSearch';
 import RequireAuth from './RequireAuth';
 
@@ -59,14 +56,6 @@ export const router = createBrowserRouter([
         path: 'result',
         element: <AIResultPage />,
       },
-      {
-        path: 'searching',
-        element: <Searching />,
-      },
-      {
-        path: 'travelsearch',
-        element: <TravelSearch />,
-      },
     ],
   },
   {
@@ -80,20 +69,16 @@ export const router = createBrowserRouter([
     path: '/place/:contentId',
     element: <TravelSpotDetail />,
   },
-  {
-    path: '/region',
-    element: <RegionSelector />,
-  },
-  {
-    path: '/activity',
-    element: <TravelActivitySelector />,
-  },
   {
     path: '/card',
     element: <CardTestPage />,
   },
   {
-    path: '/explore/Filter',
+    path: '/search',
     element: <Filter />,
   },
+  {
+    path: '/search/result',
+    element: <TravelSearch />,
+  },
 ]);