diff --git a/package-lock.json b/package-lock.json
index 69f22928..c740b9db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4242,13 +4242,16 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.9.12",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.12.tgz",
-      "integrity": "sha512-Mij6Lij93pTAIsSYy5cyBQ975Qh9uLEc5rwGTpomiZeXZL9yIS6uORJakb3ScHgfs0serMMfIbXzokPMuEiRyw==",
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.5.tgz",
+      "integrity": "sha512-xJo6a6YZnwZfnyGmQKWMbVOcii7XRibjOskRh+WJ9UHQoX16xrQrcIgAMQOzfvs8XiLMx6ih/fsLPF73iY2D1A==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/binary-extensions": {
@@ -4385,9 +4388,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001762",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001762.tgz",
-      "integrity": "sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==",
+      "version": "1.0.30001806",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz",
+      "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==",
       "dev": true,
       "funding": [
         {
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 989a8a39..c64679f7 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -46,6 +46,7 @@ import { NicknameEditPage } from '@/pages/my/profile/nickname'
 import { PasswordEditPage } from '@/pages/my/profile/password'
 import { SocialAccountPage } from '@/pages/my/profile/social'
 import { WithdrawPage } from '@/pages/my/withdraw'
+import { ScrappedPostingsPage } from '@/pages/my/scrapped'
 import { ErrorPageRoute } from '@/pages/error'
 import { MobileLayout } from '@/shared/ui/MobileLayout'
 import { MobileLayoutWithDocbar } from '@/shared/ui/MobileLayoutWithDocbar'
@@ -140,6 +141,10 @@ export function App() {
             element={<SocialAccountPage />}
           />
           <Route path={ROUTES.MY.WITHDRAW} element={<WithdrawPage />} />
+          <Route
+            path={ROUTES.MY.SCRAPPED_POSTINGS}
+            element={<ScrappedPostingsPage />}
+          />
           <Route
             path={ROUTES.MANAGER.WORKER_SCHEDULE}
             element={<ManagerWorkerScheduleLegacyEntryRedirect />}
diff --git a/src/assets/icons/job-lookup-map/Close.svg b/src/assets/icons/job-lookup-map/Close.svg
new file mode 100644
index 00000000..b03b00c6
--- /dev/null
+++ b/src/assets/icons/job-lookup-map/Close.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 2L10 10M10 2L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/job-lookup-map/Filter.svg b/src/assets/icons/job-lookup-map/Filter.svg
new file mode 100644
index 00000000..8042bb5d
--- /dev/null
+++ b/src/assets/icons/job-lookup-map/Filter.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 5.5H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <path d="M3 14.5H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <circle cx="7" cy="5.5" r="1.75" fill="white" stroke="currentColor" stroke-width="1.5"/>
+  <circle cx="13" cy="14.5" r="1.75" fill="white" stroke="currentColor" stroke-width="1.5"/>
+</svg>
diff --git a/src/assets/icons/job-lookup-map/MappinMuted.svg b/src/assets/icons/job-lookup-map/MappinMuted.svg
new file mode 100644
index 00000000..5fc2955f
--- /dev/null
+++ b/src/assets/icons/job-lookup-map/MappinMuted.svg
@@ -0,0 +1,11 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_mappin_muted)">
+<path d="M24.5 11.6665C24.5 19.8332 14 26.8332 14 26.8332C14 26.8332 3.5 19.8332 3.5 11.6665C3.5 8.88173 4.60625 6.21101 6.57538 4.24188C8.54451 2.27275 11.2152 1.1665 14 1.1665C16.7848 1.1665 19.4555 2.27275 21.4246 4.24188C23.3938 6.21101 24.5 8.88173 24.5 11.6665Z" stroke="#a3a3a3" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 15.1665C15.933 15.1665 17.5 13.5995 17.5 11.6665C17.5 9.73351 15.933 8.1665 14 8.1665C12.067 8.1665 10.5 9.73351 10.5 11.6665C10.5 13.5995 12.067 15.1665 14 15.1665Z" stroke="#a3a3a3" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_mappin_muted">
+<rect width="28" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/features/job-lookup-map/api/posting.ts b/src/features/job-lookup-map/api/posting.ts
index 3a84faf3..3bc8e7fd 100644
--- a/src/features/job-lookup-map/api/posting.ts
+++ b/src/features/job-lookup-map/api/posting.ts
@@ -2,15 +2,21 @@ import axiosInstance from '@/shared/lib/axiosInstance'
 import type { CommonApiResponse } from '@/shared/types/common'
 import type {
   ApplyPostingRequest,
-  PostingListResponse,
+  FavoritePostingItem,
+  FavoritePostingListResponse,
   PostingDetailResponse,
+  AddressesResponse,
+  AddressItem,
+  PostingListResponse,
 } from '@/features/job-lookup-map/types/posting'
 
+import type { PostingsListFilters } from '@/features/job-lookup-map/lib/postingFilters'
+
 export type FetchPostingsParams = {
   pageSize: number
   cursor?: string
   searchKeyword?: string
-}
+} & PostingsListFilters
 
 function isCommonApiEnvelope(
   value: unknown
@@ -23,60 +29,273 @@ function isCommonApiEnvelope(
   )
 }
 
-function isPostingDetailResponse(
+function normalizePageCursor(cursor: unknown): string | null {
+  if (typeof cursor === 'string') {
+    return cursor !== '' ? cursor : null
+  }
+  if (cursor == null) return null
+  const asString = String(cursor)
+  return asString !== '' ? asString : null
+}
+
+function parsePostingListItem(
   value: unknown
-): value is PostingDetailResponse {
-  if (value === null || typeof value !== 'object') return false
+): PostingListResponse['data'][number] | null {
+  if (value === null || typeof value !== 'object') return null
   const record = value as Record<string, unknown>
-  const workspace = record.workspace
-  return (
-    typeof record.id === 'number' &&
-    typeof record.title === 'string' &&
-    typeof record.description === 'string' &&
-    typeof record.payAmount === 'number' &&
-    typeof record.paymentType === 'string' &&
-    typeof record.createdAt === 'string' &&
-    typeof record.scrapped === 'boolean' &&
-    Array.isArray(record.keywords) &&
-    Array.isArray(record.schedules) &&
-    workspace !== null &&
-    typeof workspace === 'object' &&
-    typeof (workspace as { id?: unknown }).id === 'number'
-  )
+  const workspaceRaw = record.workspace
+
+  // 목록 렌더에 필수인 필드만 엄격 검사. 나머지는 기본값으로 보정.
+  if (
+    typeof record.id !== 'number' ||
+    typeof record.title !== 'string' ||
+    typeof record.payAmount !== 'number' ||
+    workspaceRaw === null ||
+    typeof workspaceRaw !== 'object'
+  ) {
+    return null
+  }
+
+  const workspace = workspaceRaw as Record<string, unknown>
+  if (typeof workspace.id !== 'number') return null
+
+  const businessName =
+    typeof workspace.businessName === 'string'
+      ? workspace.businessName
+      : typeof workspace.name === 'string'
+        ? workspace.name
+        : ''
+
+  return {
+    id: record.id,
+    title: record.title,
+    payAmount: record.payAmount,
+    paymentType:
+      typeof record.paymentType === 'string' ? record.paymentType : 'HOURLY',
+    createdAt: typeof record.createdAt === 'string' ? record.createdAt : '',
+    keywords: Array.isArray(record.keywords)
+      ? (record.keywords as PostingListResponse['data'][number]['keywords'])
+      : [],
+    schedules: Array.isArray(record.schedules)
+      ? (record.schedules as PostingListResponse['data'][number]['schedules'])
+      : [],
+    workspace: {
+      id: workspace.id,
+      businessName,
+      name: typeof workspace.name === 'string' ? workspace.name : businessName,
+      latitude: typeof workspace.latitude === 'number' ? workspace.latitude : 0,
+      longitude:
+        typeof workspace.longitude === 'number' ? workspace.longitude : 0,
+      fullAddress:
+        typeof workspace.fullAddress === 'string' ? workspace.fullAddress : '',
+      town: typeof workspace.town === 'string' ? workspace.town : '',
+    },
+    scrapped: typeof record.scrapped === 'boolean' ? record.scrapped : false,
+  }
 }
 
-function unwrapPostingDetailBody(body: unknown): PostingDetailResponse {
-  if (isCommonApiEnvelope(body)) {
-    if (!isPostingDetailResponse(body.data)) {
-      throw new Error('공고 상세 응답 형식이 올바르지 않습니다.')
+function parseFavoritePostingItem(value: unknown): FavoritePostingItem | null {
+  if (value === null || typeof value !== 'object') return null
+  const record = value as Record<string, unknown>
+  const posting = record.posting
+  if (posting === null || typeof posting !== 'object') return null
+  const postingRecord = posting as Record<string, unknown>
+
+  if (
+    typeof record.id !== 'number' ||
+    typeof postingRecord.id !== 'number' ||
+    typeof postingRecord.title !== 'string' ||
+    typeof postingRecord.payAmount !== 'number'
+  ) {
+    return null
+  }
+
+  return {
+    id: record.id,
+    createdAt: typeof record.createdAt === 'string' ? record.createdAt : '',
+    posting: {
+      id: postingRecord.id,
+      businessName:
+        typeof postingRecord.businessName === 'string'
+          ? postingRecord.businessName
+          : '',
+      title: postingRecord.title,
+      payAmount: postingRecord.payAmount,
+      paymentType:
+        typeof postingRecord.paymentType === 'string'
+          ? postingRecord.paymentType
+          : 'HOURLY',
+    },
+  }
+}
+
+function normalizePage(
+  pageRaw: unknown,
+  fallbackCount: number
+): PostingListResponse['page'] {
+  if (pageRaw === null || typeof pageRaw !== 'object') {
+    return {
+      cursor: null,
+      pageSize: fallbackCount,
+      totalCount: fallbackCount,
     }
-    return body.data
   }
 
-  if (isPostingDetailResponse(body)) {
-    return body
+  const page = pageRaw as Record<string, unknown>
+  return {
+    cursor: normalizePageCursor(page.cursor),
+    pageSize: typeof page.pageSize === 'number' ? page.pageSize : fallbackCount,
+    totalCount:
+      typeof page.totalCount === 'number' ? page.totalCount : fallbackCount,
+  }
+}
+
+function normalizePostingListResponse(value: unknown): PostingListResponse {
+  const payload = isCommonApiEnvelope(value) ? value.data : value
+  if (payload === null || typeof payload !== 'object') {
+    throw new Error('공고 목록을 불러오지 못했습니다.')
+  }
+
+  const record = payload as Record<string, unknown>
+  if (!Array.isArray(record.data)) {
+    throw new Error('공고 목록 응답 형식이 올바르지 않습니다.')
+  }
+
+  const data = record.data
+    .map(parsePostingListItem)
+    .filter((item): item is PostingListResponse['data'][number] => item != null)
+
+  // 항목이 있는데 전부 파싱 실패하면 스키마 문제로 보고 에러 처리
+  if (record.data.length > 0 && data.length === 0) {
+    throw new Error('공고 목록 응답 형식이 올바르지 않습니다.')
+  }
+
+  return {
+    data,
+    page: normalizePage(record.page, data.length),
+  }
+}
+
+function unwrapPostingListBody(body: unknown): PostingListResponse {
+  return normalizePostingListResponse(body)
+}
+
+function parseWorkspace(
+  value: unknown
+): PostingDetailResponse['workspace'] | null {
+  if (value === null || typeof value !== 'object') return null
+  const workspace = value as Record<string, unknown>
+  if (typeof workspace.id !== 'number') return null
+
+  const businessName =
+    typeof workspace.businessName === 'string'
+      ? workspace.businessName
+      : typeof workspace.name === 'string'
+        ? workspace.name
+        : ''
+
+  return {
+    id: workspace.id,
+    businessName,
+    name: typeof workspace.name === 'string' ? workspace.name : businessName,
+    latitude: typeof workspace.latitude === 'number' ? workspace.latitude : 0,
+    longitude:
+      typeof workspace.longitude === 'number' ? workspace.longitude : 0,
+    fullAddress:
+      typeof workspace.fullAddress === 'string' ? workspace.fullAddress : '',
+    town: typeof workspace.town === 'string' ? workspace.town : '',
+  }
+}
+
+function parsePostingDetail(value: unknown): PostingDetailResponse | null {
+  if (value === null || typeof value !== 'object') return null
+  const record = value as Record<string, unknown>
+  const workspace = parseWorkspace(record.workspace)
+
+  if (
+    typeof record.id !== 'number' ||
+    typeof record.title !== 'string' ||
+    typeof record.payAmount !== 'number' ||
+    workspace == null
+  ) {
+    return null
+  }
+
+  return {
+    id: record.id,
+    title: record.title,
+    description:
+      typeof record.description === 'string' ? record.description : '',
+    payAmount: record.payAmount,
+    paymentType:
+      typeof record.paymentType === 'string' ? record.paymentType : 'HOURLY',
+    createdAt: typeof record.createdAt === 'string' ? record.createdAt : '',
+    keywords: Array.isArray(record.keywords)
+      ? (record.keywords as PostingDetailResponse['keywords'])
+      : [],
+    schedules: Array.isArray(record.schedules)
+      ? (record.schedules as PostingDetailResponse['schedules'])
+      : [],
+    workspace,
+    scrapped: typeof record.scrapped === 'boolean' ? record.scrapped : false,
   }
+}
+
+function unwrapPostingDetailPayload(payload: unknown): PostingDetailResponse {
+  if (payload !== null && typeof payload === 'object' && 'posting' in payload) {
+    const nested = (payload as { posting: unknown }).posting
+    const parsed = parsePostingDetail(nested)
+    if (parsed) return parsed
+  }
+
+  const parsed = parsePostingDetail(payload)
+  if (parsed) return parsed
 
-  throw new Error('공고 상세를 불러오지 못했습니다.')
+  throw new Error('공고 상세 응답 형식이 올바르지 않습니다.')
+}
+
+function unwrapPostingDetailBody(body: unknown): PostingDetailResponse {
+  if (isCommonApiEnvelope(body)) {
+    if (body.data == null) {
+      throw new Error('공고 상세를 불러오지 못했습니다.')
+    }
+    return unwrapPostingDetailPayload(body.data)
+  }
+
+  return unwrapPostingDetailPayload(body)
 }
 
 export async function fetchPostings(
   params: FetchPostingsParams
 ): Promise<PostingListResponse> {
-  const response = await axiosInstance.get<PostingListResponse>(
-    '/app/postings',
-    {
-      params: {
-        pageSize: params.pageSize,
-        ...(params.cursor !== undefined &&
-          params.cursor !== '' && { cursor: params.cursor }),
-        ...(params.searchKeyword?.trim() && {
-          searchKeyword: params.searchKeyword.trim(),
-        }),
-      },
-    }
-  )
-  return response.data
+  const {
+    pageSize,
+    cursor,
+    searchKeyword,
+    province,
+    district,
+    town,
+    minPayAmount,
+    maxPayAmount,
+    payAmountSort,
+  } = params
+
+  const response = await axiosInstance.get<unknown>('/app/postings', {
+    params: {
+      pageSize,
+      ...(cursor !== undefined && cursor !== '' && { cursor }),
+      ...(searchKeyword?.trim() && {
+        searchKeyword: searchKeyword.trim(),
+      }),
+      ...(province && { province }),
+      ...(district && { district }),
+      ...(town && { town }),
+      ...(minPayAmount != null && { minPayAmount }),
+      ...(maxPayAmount != null && { maxPayAmount }),
+      ...(payAmountSort != null && { payAmountSort }),
+    },
+  })
+  return unwrapPostingListBody(response.data)
 }
 
 export async function fetchPostingDetail(
@@ -98,3 +317,75 @@ export async function applyPosting(
     body
   )
 }
+
+function normalizeFavoritePostingListResponse(
+  value: unknown
+): FavoritePostingListResponse {
+  const payload = isCommonApiEnvelope(value) ? value.data : value
+  if (payload === null || typeof payload !== 'object') {
+    throw new Error('스크랩 목록을 불러오지 못했습니다.')
+  }
+
+  const record = payload as Record<string, unknown>
+  if (!Array.isArray(record.data)) {
+    throw new Error('스크랩 목록 응답 형식이 올바르지 않습니다.')
+  }
+
+  const data = record.data
+    .map(parseFavoritePostingItem)
+    .filter((item): item is FavoritePostingItem => item != null)
+
+  if (record.data.length > 0 && data.length === 0) {
+    throw new Error('스크랩 목록 응답 형식이 올바르지 않습니다.')
+  }
+
+  return {
+    data,
+    page: normalizePage(record.page, data.length),
+  }
+}
+
+/** GET /app/users/me/postings/favorites — 사용자 공고 스크랩 목록 조회 */
+export async function fetchFavoritePostings(params: {
+  pageSize: number
+  cursor?: string
+}): Promise<FavoritePostingListResponse> {
+  const { pageSize, cursor } = params
+
+  const response = await axiosInstance.get<unknown>(
+    '/app/users/me/postings/favorites',
+    {
+      params: {
+        pageSize,
+        ...(cursor !== undefined && cursor !== '' && { cursor }),
+      },
+    }
+  )
+  return normalizeFavoritePostingListResponse(response.data)
+}
+
+/** POST /app/users/me/postings/favorites/{postingId} — 사용자 공고 스크랩 등록 */
+export async function addFavoritePosting(postingId: number): Promise<void> {
+  await axiosInstance.post<CommonApiResponse<Record<string, never>>>(
+    `/app/users/me/postings/favorites/${postingId}`
+  )
+}
+
+/** DELETE /app/users/me/postings/favorites/{postingId} — 사용자 공고 스크랩 삭제 */
+export async function removeFavoritePosting(postingId: number): Promise<void> {
+  await axiosInstance.delete<CommonApiResponse<Record<string, never>>>(
+    `/app/users/me/postings/favorites/${postingId}`
+  )
+}
+
+/** GET /app/addresses — 단계별 행정구역 주소 조회 */
+export async function fetchAddresses(code?: string): Promise<AddressItem[]> {
+  const response = await axiosInstance.get<
+    CommonApiResponse<AddressesResponse>
+  >('/app/addresses', {
+    params: code ? { code } : undefined,
+  })
+
+  const addresses = response.data.data?.addresses
+  return Array.isArray(addresses) ? addresses : []
+}
diff --git a/src/features/job-lookup-map/common/AlbaFindCategoryBar.tsx b/src/features/job-lookup-map/common/AlbaFindCategoryBar.tsx
index a9acf51a..528f03e5 100644
--- a/src/features/job-lookup-map/common/AlbaFindCategoryBar.tsx
+++ b/src/features/job-lookup-map/common/AlbaFindCategoryBar.tsx
@@ -1,100 +1,237 @@
-import ChevrondownIcon from '@/assets/icons/job-lookup-map/Chevrondown.svg?react'
+import { forwardRef, useImperativeHandle, useState } from 'react'
+import CloseIcon from '@/assets/icons/job-lookup-map/Close.svg?react'
+import FilterIcon from '@/assets/icons/job-lookup-map/Filter.svg?react'
+import { NearbyModeFilterDrawer } from '@/features/job-lookup-map/common/NearbyModeFilterDrawer'
+import { RegionModeFilterDrawer } from '@/features/job-lookup-map/common/RegionModeFilterDrawer'
+import {
+  DEFAULT_SORT_VALUE,
+  EMPTY_SALARY_FILTER,
+  countActiveFilters,
+  formatSalaryChipLabel,
+  formatSortChipLabel,
+  isSalaryFilterApplied,
+  isSortFilterApplied,
+  type SalaryFilterSelection,
+} from '@/features/job-lookup-map/lib/postingFilters'
+import {
+  EMPTY_REGION_SELECTION,
+  formatRegionChipLabel,
+  hasRegionFilterApplied,
+  type RegionSelection,
+} from '@/features/job-lookup-map/lib/regionOptions'
 
 export type AlbaFindMode = 'nearby' | 'region'
 
-export type AlbaFindFilterId = 'sort' | 'distance' | 'salary'
-
 type AlbaFindCategoryBarProps = {
   mode: AlbaFindMode
   onModeChange: (mode: AlbaFindMode) => void
-  activeFilter: AlbaFindFilterId
-  onFilterChange: (id: AlbaFindFilterId) => void
+  regionSelection?: RegionSelection
+  onRegionChange?: (selection: RegionSelection) => void
+  sortValue?: string
+  onSortChange?: (value: string) => void
+  salaryFilter?: SalaryFilterSelection
+  onSalaryChange?: (selection: SalaryFilterSelection) => void
 }
 
-const NEARBY_FILTER_ITEMS: { id: AlbaFindFilterId; label: string }[] = [
-  { id: 'sort', label: '최신순' },
-  { id: 'distance', label: '거리' },
-  { id: 'salary', label: '급여' },
-]
+export type AlbaFindCategoryBarRef = {
+  openFilters: () => void
+}
 
-const REGION_FILTER_ITEMS: { id: AlbaFindFilterId; label: string }[] = [
-  { id: 'sort', label: '최신순' },
-  { id: 'distance', label: '서울' },
-  { id: 'salary', label: '전체' },
-]
+function FilterIconButton({
+  activeFilterCount,
+  onClick,
+}: {
+  activeFilterCount: number
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      aria-label="필터 열기"
+      onClick={onClick}
+      className="relative flex size-[42px] shrink-0 items-center justify-center rounded-xl border border-line-2 bg-white text-text-100"
+    >
+      <FilterIcon className="size-5" aria-hidden />
+      {activeFilterCount > 0 ? (
+        <span className="absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full bg-main text-[10px] font-semibold leading-none text-text-100">
+          {activeFilterCount}
+        </span>
+      ) : null}
+    </button>
+  )
+}
 
-function getFilterItems(mode: AlbaFindMode) {
-  return mode === 'region' ? REGION_FILTER_ITEMS : NEARBY_FILTER_ITEMS
+function ActiveFilterChip({
+  label,
+  onRemove,
+}: {
+  label: string
+  onRemove: () => void
+}) {
+  return (
+    <span className="inline-flex h-[34px] items-center gap-1 rounded-full bg-main-100 px-3 typography-body03-semibold text-sub">
+      {label}
+      <button
+        type="button"
+        aria-label={`${label} 필터 제거`}
+        onClick={onRemove}
+        className="flex size-4 items-center justify-center text-sub"
+      >
+        <CloseIcon className="size-3" aria-hidden />
+      </button>
+    </span>
+  )
 }
 
-export function AlbaFindCategoryBar({
-  mode,
-  onModeChange,
-  activeFilter,
-  onFilterChange,
-}: AlbaFindCategoryBarProps) {
-  const filterItems = getFilterItems(mode)
+export const AlbaFindCategoryBar = forwardRef<
+  AlbaFindCategoryBarRef,
+  AlbaFindCategoryBarProps
+>(function AlbaFindCategoryBar(
+  {
+    mode,
+    onModeChange,
+    regionSelection = EMPTY_REGION_SELECTION,
+    onRegionChange,
+    sortValue = DEFAULT_SORT_VALUE,
+    onSortChange,
+    salaryFilter = EMPTY_SALARY_FILTER,
+    onSalaryChange,
+  },
+  ref
+) {
+  const [isRegionFilterDrawerOpen, setIsRegionFilterDrawerOpen] =
+    useState(false)
+  const [isNearbyFilterDrawerOpen, setIsNearbyFilterDrawerOpen] =
+    useState(false)
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      openFilters: () => {
+        if (mode === 'region') {
+          setIsRegionFilterDrawerOpen(true)
+          return
+        }
+        setIsNearbyFilterDrawerOpen(true)
+      },
+    }),
+    [mode]
+  )
+
+  const activeFilterCount = countActiveFilters({
+    mode,
+    regionSelection,
+    sortValue,
+    salaryFilter,
+  })
+  const regionChipLabel = formatRegionChipLabel(regionSelection)
+  const hasSortSelected = isSortFilterApplied(sortValue)
+  const hasSalarySelected = isSalaryFilterApplied(salaryFilter)
+  const sortChipLabel = formatSortChipLabel(sortValue)
+  const salaryChipLabel = formatSalaryChipLabel(salaryFilter)
 
   return (
-    <div className="flex flex-col gap-3">
-      <div className="flex h-12 gap-1 rounded-lg bg-bg-dark p-1" role="tablist">
-        <button
-          type="button"
-          role="tab"
-          aria-selected={mode === 'nearby'}
-          onClick={() => onModeChange('nearby')}
-          className={`min-h-10 flex-1 rounded-lg typography-body01-semibold transition-colors ${
-            mode === 'nearby'
-              ? 'border border-line-2 bg-white text-text-100 shadow-[0px_1px_4px_0px_rgba(0,0,0,0.12)]'
-              : 'bg-transparent text-text-50'
-          }`}
-        >
-          주변에서 찾기
-        </button>
-        <button
-          type="button"
-          role="tab"
-          aria-selected={mode === 'region'}
-          onClick={() => onModeChange('region')}
-          className={`min-h-10 flex-1 rounded-lg typography-body01-semibold transition-colors ${
-            mode === 'region'
-              ? 'border border-line-2 bg-white text-text-100 shadow-[0px_1px_4px_0px_rgba(0,0,0,0.12)]'
-              : 'bg-transparent text-text-50'
-          }`}
+    <>
+      <div className="flex flex-col gap-3">
+        <div
+          className="flex h-12 gap-1 rounded-lg bg-bg-dark p-1"
+          role="tablist"
         >
-          지역에서 찾기
-        </button>
-      </div>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={mode === 'nearby'}
+            onClick={() => {
+              setIsRegionFilterDrawerOpen(false)
+              onModeChange('nearby')
+            }}
+            className={`min-h-10 flex-1 rounded-lg typography-body01-semibold transition-colors ${
+              mode === 'nearby'
+                ? 'border border-line-2 bg-white text-text-100 shadow-[0px_1px_4px_0px_rgba(0,0,0,0.12)]'
+                : 'bg-transparent text-text-50'
+            }`}
+          >
+            주변에서 찾기
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={mode === 'region'}
+            onClick={() => {
+              setIsNearbyFilterDrawerOpen(false)
+              onModeChange('region')
+            }}
+            className={`min-h-10 flex-1 rounded-lg typography-body01-semibold transition-colors ${
+              mode === 'region'
+                ? 'border border-line-2 bg-white text-text-100 shadow-[0px_1px_4px_0px_rgba(0,0,0,0.12)]'
+                : 'bg-transparent text-text-50'
+            }`}
+          >
+            지역에서 찾기
+          </button>
+        </div>
+
+        {mode === 'region' ? (
+          <div className="flex flex-wrap items-center gap-2">
+            <FilterIconButton
+              activeFilterCount={activeFilterCount}
+              onClick={() => setIsRegionFilterDrawerOpen(true)}
+            />
 
-      <div className="flex flex-wrap items-center gap-2">
-        {filterItems.map(({ id, label }, index) => {
-          const active = activeFilter === id
-          const showChevron = mode === 'nearby' || id === 'sort'
-          return (
-            <div key={id} className="flex items-center gap-2">
-              {index === 1 ? (
-                <div className="h-[26px] w-px shrink-0 bg-line-2" aria-hidden />
-              ) : null}
-              <button
-                type="button"
-                onClick={() => onFilterChange(id)}
-                className={`inline-flex h-[26px] min-w-0 items-center gap-1 rounded-full px-3 transition-colors ${
-                  active
-                    ? 'bg-main typography-body03-semibold text-text-100'
-                    : 'border border-line-2 bg-white typography-body03-regular text-text-90'
-                }`}
-              >
-                <span>{label}</span>
-                {showChevron ? (
-                  <ChevrondownIcon
-                    className={active ? 'text-text-100' : 'text-text-70'}
-                  />
-                ) : null}
-              </button>
-            </div>
-          )
-        })}
+            {hasRegionFilterApplied(regionSelection) && regionChipLabel ? (
+              <ActiveFilterChip
+                label={regionChipLabel}
+                onRemove={() => onRegionChange?.(EMPTY_REGION_SELECTION)}
+              />
+            ) : null}
+          </div>
+        ) : (
+          <div className="flex flex-wrap items-center gap-2">
+            <FilterIconButton
+              activeFilterCount={activeFilterCount}
+              onClick={() => setIsNearbyFilterDrawerOpen(true)}
+            />
+
+            {hasSortSelected ? (
+              <ActiveFilterChip
+                label={sortChipLabel}
+                onRemove={() => onSortChange?.(DEFAULT_SORT_VALUE)}
+              />
+            ) : null}
+
+            {hasSalarySelected ? (
+              <ActiveFilterChip
+                label={salaryChipLabel}
+                onRemove={() => onSalaryChange?.(EMPTY_SALARY_FILTER)}
+              />
+            ) : null}
+          </div>
+        )}
       </div>
-    </div>
+
+      <RegionModeFilterDrawer
+        open={isRegionFilterDrawerOpen}
+        onOpenChange={setIsRegionFilterDrawerOpen}
+        value={{ regionSelection, sortValue, salaryFilter }}
+        onApply={({
+          regionSelection: nextRegion,
+          sortValue: nextSort,
+          salaryFilter: nextSalary,
+        }) => {
+          onRegionChange?.(nextRegion)
+          onSortChange?.(nextSort)
+          onSalaryChange?.(nextSalary)
+        }}
+      />
+      <NearbyModeFilterDrawer
+        open={isNearbyFilterDrawerOpen}
+        onOpenChange={setIsNearbyFilterDrawerOpen}
+        value={{ sortValue, salaryFilter }}
+        onApply={({ sortValue: nextSort, salaryFilter: nextSalary }) => {
+          onSortChange?.(nextSort)
+          onSalaryChange?.(nextSalary)
+        }}
+      />
+    </>
   )
-}
+})
diff --git a/src/features/job-lookup-map/common/AlbaFindFilteredEmptyState.tsx b/src/features/job-lookup-map/common/AlbaFindFilteredEmptyState.tsx
new file mode 100644
index 00000000..84b88f1b
--- /dev/null
+++ b/src/features/job-lookup-map/common/AlbaFindFilteredEmptyState.tsx
@@ -0,0 +1,36 @@
+import MappinMutedIcon from '@/assets/icons/job-lookup-map/MappinMuted.svg?react'
+
+type AlbaFindFilteredEmptyStateProps = {
+  title?: string
+  description?: string
+  actionLabel: string
+  onAction: () => void
+}
+
+export function AlbaFindFilteredEmptyState({
+  title = '이 지역에 공고가 없어요',
+  description = '다른 지역을 선택하거나 조건을 바꿔보세요',
+  actionLabel,
+  onAction,
+}: AlbaFindFilteredEmptyStateProps) {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center px-4 py-10">
+      <div className="flex size-16 items-center justify-center rounded-full bg-bg-dark">
+        <MappinMutedIcon className="size-7" aria-hidden />
+      </div>
+      <p className="mt-4 text-center typography-body01-semibold text-text-100">
+        {title}
+      </p>
+      <p className="mt-1 text-center typography-body02-regular text-text-50">
+        {description}
+      </p>
+      <button
+        type="button"
+        onClick={onAction}
+        className="mt-5 h-11 rounded-2xl border border-main px-5 typography-body02-semibold text-main"
+      >
+        {actionLabel}
+      </button>
+    </div>
+  )
+}
diff --git a/src/features/job-lookup-map/common/Albabox.tsx b/src/features/job-lookup-map/common/Albabox.tsx
index 70809a5c..8228977f 100644
--- a/src/features/job-lookup-map/common/Albabox.tsx
+++ b/src/features/job-lookup-map/common/Albabox.tsx
@@ -10,7 +10,7 @@ export type AlbaboxProps = {
   wageAmount: string
   timeRange: string
   workDays: string
-  distance: string
+  town: string
   postedAgo: string
   saved: boolean
   likeCount?: string
@@ -24,7 +24,7 @@ export function Albabox({
   wageAmount,
   timeRange,
   workDays,
-  distance,
+  town,
   postedAgo,
   saved,
   likeCount,
@@ -52,7 +52,7 @@ export function Albabox({
       <div className="flex items-start justify-between gap-2">
         <p className="typography-body02-semibold text-text-70">{storeName}</p>
         <div className="flex items-center gap-1 typography-body02-regular">
-          <span className="text-text-70">{distance}</span>
+          <span className="text-text-70">{town}</span>
           <span className="text-text-50">·</span>
           <span className="text-text-70">{postedAgo}</span>
         </div>
diff --git a/src/features/job-lookup-map/common/FilterChip.tsx b/src/features/job-lookup-map/common/FilterChip.tsx
new file mode 100644
index 00000000..2af76c11
--- /dev/null
+++ b/src/features/job-lookup-map/common/FilterChip.tsx
@@ -0,0 +1,21 @@
+type FilterChipProps = {
+  selected: boolean
+  label: string
+  onClick: () => void
+}
+
+export function FilterChip({ selected, label, onClick }: FilterChipProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`inline-flex h-[34px] items-center rounded-full px-4 transition-colors ${
+        selected
+          ? 'bg-main typography-body03-semibold text-text-100'
+          : 'bg-bg-dark typography-body03-regular text-text-90'
+      }`}
+    >
+      {label}
+    </button>
+  )
+}
diff --git a/src/features/job-lookup-map/common/FilterDrawerShell.tsx b/src/features/job-lookup-map/common/FilterDrawerShell.tsx
new file mode 100644
index 00000000..422c1277
--- /dev/null
+++ b/src/features/job-lookup-map/common/FilterDrawerShell.tsx
@@ -0,0 +1,122 @@
+import type { ReactNode } from 'react'
+import { Drawer } from 'vaul'
+
+function CloseIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+      aria-hidden
+    >
+      <path
+        d="M6 6l12 12M18 6L6 18"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+type FilterDrawerShellProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  children: ReactNode
+  footer?: ReactNode | null
+}
+
+export function FilterDrawerShell({
+  open,
+  onOpenChange,
+  title,
+  children,
+  footer,
+}: FilterDrawerShellProps) {
+  return (
+    <Drawer.Root open={open} onOpenChange={onOpenChange}>
+      <Drawer.Portal>
+        <Drawer.Overlay className="fixed inset-0 z-[60] bg-black/40" />
+        <Drawer.Content className="fixed inset-x-0 bottom-0 z-[60] outline-none">
+          <div className="mx-auto flex w-full max-w-[428px] -translate-x-1.5 flex-col overflow-hidden rounded-t-[32px] bg-white">
+            {open ? (
+              <>
+                <div className="mx-auto mt-4 h-1 w-[50px] shrink-0 rounded-full bg-line-2" />
+
+                <div className="flex items-center justify-between px-4 pb-3 pt-4">
+                  <Drawer.Title className="typography-headline02 text-text-100">
+                    {title}
+                  </Drawer.Title>
+                  <button
+                    type="button"
+                    aria-label="닫기"
+                    onClick={() => onOpenChange(false)}
+                    className="flex size-8 items-center justify-center text-text-100"
+                  >
+                    <CloseIcon />
+                  </button>
+                </div>
+
+                <div>{children}</div>
+
+                {footer ?? null}
+              </>
+            ) : null}
+          </div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  )
+}
+
+export function FilterDrawerApplyFooter({
+  onApply,
+  disabled = false,
+  showReset = false,
+  onReset,
+  applyLabel = '적용하기',
+}: {
+  onApply: () => void
+  disabled?: boolean
+  showReset?: boolean
+  onReset?: () => void
+  applyLabel?: string
+}) {
+  if (showReset) {
+    return (
+      <div className="flex shrink-0 gap-2 border-t border-line-1 px-4 pb-[calc(1rem+env(safe-area-inset-bottom))] pt-3">
+        <button
+          type="button"
+          onClick={onReset}
+          className="h-12 shrink-0 rounded-2xl border border-line-2 px-5 typography-body01-semibold text-text-100"
+        >
+          초기화
+        </button>
+        <button
+          type="button"
+          onClick={onApply}
+          disabled={disabled}
+          className="h-12 flex-1 rounded-2xl bg-main typography-body01-semibold text-text-100 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {applyLabel}
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="shrink-0 border-t border-line-1 px-4 pb-[calc(1rem+env(safe-area-inset-bottom))] pt-3">
+      <button
+        type="button"
+        onClick={onApply}
+        disabled={disabled}
+        className="h-12 w-full rounded-2xl bg-main typography-body01-semibold text-text-100 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        적용하기
+      </button>
+    </div>
+  )
+}
diff --git a/src/features/job-lookup-map/common/NearbyModeFilterDrawer.tsx b/src/features/job-lookup-map/common/NearbyModeFilterDrawer.tsx
new file mode 100644
index 00000000..84dbac62
--- /dev/null
+++ b/src/features/job-lookup-map/common/NearbyModeFilterDrawer.tsx
@@ -0,0 +1,101 @@
+import {
+  FilterDrawerApplyFooter,
+  FilterDrawerShell,
+} from '@/features/job-lookup-map/common/FilterDrawerShell'
+import { SortSalaryFilterSections } from '@/features/job-lookup-map/common/SortSalaryFilterSections'
+import { useSortSalaryFilterDraft } from '@/features/job-lookup-map/hooks/useSortSalaryFilterDraft'
+import type { SalaryFilterSelection } from '@/features/job-lookup-map/lib/postingFilters'
+
+type NearbyModeFilterValues = {
+  sortValue: string
+  salaryFilter: SalaryFilterSelection
+}
+
+type NearbyModeFilterDrawerProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  value: NearbyModeFilterValues
+  onApply: (values: NearbyModeFilterValues) => void
+}
+
+function NearbyModeFilterDrawerBody({
+  value,
+  onOpenChange,
+  onApply,
+}: {
+  value: NearbyModeFilterValues
+  onOpenChange: (open: boolean) => void
+  onApply: (values: NearbyModeFilterValues) => void
+}) {
+  const {
+    sortDraft,
+    setSortDraft,
+    salaryDraft,
+    minInput,
+    maxInput,
+    handleSalaryPreset,
+    handleMinChange,
+    handleMaxChange,
+    resetSortSalary,
+    getNormalizedSalary,
+  } = useSortSalaryFilterDraft(value)
+
+  const handleApply = () => {
+    onApply({
+      sortValue: sortDraft,
+      salaryFilter: getNormalizedSalary(),
+    })
+    onOpenChange(false)
+  }
+
+  return (
+    <>
+      <div className="scrollbar-hide max-h-[calc(85dvh-220px)] overflow-y-auto overscroll-contain px-4 pb-4 [-webkit-overflow-scrolling:touch]">
+        <SortSalaryFilterSections
+          sortDraft={sortDraft}
+          onSortChange={setSortDraft}
+          salaryDraft={salaryDraft}
+          minInput={minInput}
+          maxInput={maxInput}
+          onSalaryPreset={handleSalaryPreset}
+          onMinChange={handleMinChange}
+          onMaxChange={handleMaxChange}
+        />
+      </div>
+
+      <FilterDrawerApplyFooter
+        showReset
+        applyLabel="적용"
+        onReset={resetSortSalary}
+        onApply={handleApply}
+      />
+    </>
+  )
+}
+
+export function NearbyModeFilterDrawer({
+  open,
+  onOpenChange,
+  value,
+  onApply,
+}: NearbyModeFilterDrawerProps) {
+  const resetKey = `${value.sortValue}-${value.salaryFilter.preset}-${value.salaryFilter.min ?? ''}-${value.salaryFilter.max ?? ''}`
+
+  return (
+    <FilterDrawerShell
+      open={open}
+      onOpenChange={onOpenChange}
+      title="필터"
+      footer={null}
+    >
+      {open ? (
+        <NearbyModeFilterDrawerBody
+          key={resetKey}
+          value={value}
+          onOpenChange={onOpenChange}
+          onApply={onApply}
+        />
+      ) : null}
+    </FilterDrawerShell>
+  )
+}
diff --git a/src/features/job-lookup-map/common/RegionModeFilterDrawer.tsx b/src/features/job-lookup-map/common/RegionModeFilterDrawer.tsx
new file mode 100644
index 00000000..e4eec030
--- /dev/null
+++ b/src/features/job-lookup-map/common/RegionModeFilterDrawer.tsx
@@ -0,0 +1,301 @@
+import { useMemo, useState } from 'react'
+
+import { ChevronRightIcon } from '@/assets/icons/ChevronRightIcon'
+import { FilterChip } from '@/features/job-lookup-map/common/FilterChip'
+import {
+  FilterDrawerApplyFooter,
+  FilterDrawerShell,
+} from '@/features/job-lookup-map/common/FilterDrawerShell'
+import { SortSalaryFilterSections } from '@/features/job-lookup-map/common/SortSalaryFilterSections'
+import { useAddresses } from '@/features/job-lookup-map/hooks/useAddresses'
+import { useSortSalaryFilterDraft } from '@/features/job-lookup-map/hooks/useSortSalaryFilterDraft'
+import type { SalaryFilterSelection } from '@/features/job-lookup-map/lib/postingFilters'
+import {
+  EMPTY_REGION_SELECTION,
+  REGION_STEPS,
+  getRegionOptionsForStep,
+  type RegionOption,
+  type RegionSelection,
+  type RegionStep,
+} from '@/features/job-lookup-map/lib/regionOptions'
+
+type RegionModeFilterValues = {
+  regionSelection: RegionSelection
+  sortValue: string
+  salaryFilter: SalaryFilterSelection
+}
+
+type RegionModeFilterDrawerProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  value: RegionModeFilterValues
+  onApply: (values: RegionModeFilterValues) => void
+}
+
+function getStepLabel(step: RegionStep, draft: RegionSelection): string {
+  if (step === 'sido') {
+    return draft.sido && draft.sido !== '전국(전체)' ? draft.sido : '시/도'
+  }
+  if (step === 'sigungu') {
+    return draft.sigungu && draft.sigungu !== '전체'
+      ? draft.sigungu
+      : '시/군/구'
+  }
+  return draft.dong && draft.dong !== '전체' ? draft.dong : '읍/면/동'
+}
+
+function RegionModeFilterDrawerBody({
+  value,
+  onOpenChange,
+  onApply,
+}: {
+  value: RegionModeFilterValues
+  onOpenChange: (open: boolean) => void
+  onApply: (values: RegionModeFilterValues) => void
+}) {
+  const [regionDraft, setRegionDraft] = useState<RegionSelection>(
+    value.regionSelection
+  )
+  const [regionStep, setRegionStep] = useState<RegionStep>('sido')
+  const {
+    sortDraft,
+    setSortDraft,
+    salaryDraft,
+    minInput,
+    maxInput,
+    handleSalaryPreset,
+    handleMinChange,
+    handleMaxChange,
+    resetSortSalary,
+    getNormalizedSalary,
+  } = useSortSalaryFilterDraft(value)
+
+  const parentCode =
+    regionStep === 'sigungu'
+      ? (regionDraft.sidoCode ?? undefined)
+      : regionStep === 'dong'
+        ? (regionDraft.sigunguCode ?? undefined)
+        : undefined
+
+  const addressesEnabled =
+    regionStep === 'sido' ||
+    (regionStep === 'sigungu' && regionDraft.sidoCode != null) ||
+    (regionStep === 'dong' && regionDraft.sigunguCode != null)
+
+  const { addresses, isLoading, isError } = useAddresses(
+    parentCode,
+    addressesEnabled
+  )
+
+  const regionOptions = useMemo(
+    () => getRegionOptionsForStep(regionStep, addresses),
+    [regionStep, addresses]
+  )
+
+  const selectedForStep =
+    regionStep === 'sido'
+      ? regionDraft.sido
+      : regionStep === 'sigungu'
+        ? regionDraft.sigungu
+        : regionDraft.dong
+
+  const canGoToStep = (target: RegionStep) => {
+    if (target === 'sido') return true
+    if (target === 'sigungu') {
+      return regionDraft.sido != null && regionDraft.sido !== '전국(전체)'
+    }
+    return (
+      regionDraft.sido != null &&
+      regionDraft.sido !== '전국(전체)' &&
+      regionDraft.sigungu != null &&
+      regionDraft.sigungu !== '전체'
+    )
+  }
+
+  const handleRegionSelect = (option: RegionOption) => {
+    if (regionStep === 'sido') {
+      if (option.name === '전국(전체)') {
+        setRegionDraft({
+          ...EMPTY_REGION_SELECTION,
+          sido: '전국(전체)',
+          sigungu: '전체',
+          dong: '전체',
+        })
+        return
+      }
+
+      setRegionDraft({
+        sido: option.name,
+        sidoCode: option.code,
+        sigungu: null,
+        sigunguCode: null,
+        dong: null,
+        dongCode: null,
+      })
+      setRegionStep('sigungu')
+      return
+    }
+
+    if (regionStep === 'sigungu') {
+      if (option.name === '전체') {
+        setRegionDraft({
+          ...regionDraft,
+          sigungu: '전체',
+          sigunguCode: null,
+          dong: '전체',
+          dongCode: null,
+        })
+        return
+      }
+
+      setRegionDraft({
+        ...regionDraft,
+        sigungu: option.name,
+        sigunguCode: option.code,
+        dong: null,
+        dongCode: null,
+      })
+      setRegionStep('dong')
+      return
+    }
+
+    if (option.name === '전체') {
+      setRegionDraft({
+        ...regionDraft,
+        dong: '전체',
+        dongCode: null,
+      })
+      return
+    }
+
+    setRegionDraft({
+      ...regionDraft,
+      dong: option.name,
+      dongCode: option.code,
+    })
+  }
+
+  const handleReset = () => {
+    setRegionDraft(EMPTY_REGION_SELECTION)
+    setRegionStep('sido')
+    resetSortSalary()
+  }
+
+  const handleApply = () => {
+    onApply({
+      regionSelection: regionDraft,
+      sortValue: sortDraft,
+      salaryFilter: getNormalizedSalary(),
+    })
+    onOpenChange(false)
+  }
+
+  return (
+    <>
+      <div className="scrollbar-hide max-h-[calc(85dvh-220px)] overflow-y-auto overscroll-contain px-4 pb-4 [-webkit-overflow-scrolling:touch]">
+        <section>
+          <h3 className="typography-body01-semibold text-text-100">지역</h3>
+
+          <div className="mt-3 flex items-end gap-1 border-b border-line-1">
+            {REGION_STEPS.map((item, index) => {
+              const active = regionStep === item.key
+              const enabled = canGoToStep(item.key)
+              return (
+                <div key={item.key} className="flex items-center gap-1">
+                  {index > 0 ? (
+                    <ChevronRightIcon
+                      width={12}
+                      height={12}
+                      className="mb-3 text-text-50"
+                    />
+                  ) : null}
+                  <button
+                    type="button"
+                    disabled={!enabled}
+                    onClick={() => enabled && setRegionStep(item.key)}
+                    className={`max-w-[88px] truncate pb-3 typography-body02-semibold transition-colors ${
+                      active
+                        ? 'border-b-2 border-main text-main'
+                        : enabled
+                          ? 'border-b-2 border-transparent text-text-50'
+                          : 'border-b-2 border-transparent text-text-50 opacity-50'
+                    }`}
+                  >
+                    {getStepLabel(item.key, regionDraft)}
+                  </button>
+                </div>
+              )
+            })}
+          </div>
+
+          <div className="mt-3 flex flex-wrap gap-2">
+            {isLoading ? (
+              <p className="py-2 typography-body02-regular text-text-50">
+                지역 정보를 불러오는 중…
+              </p>
+            ) : isError ? (
+              <p className="py-2 typography-body02-regular text-text-50">
+                지역 정보를 불러오지 못했습니다.
+              </p>
+            ) : (
+              regionOptions.map(option => (
+                <FilterChip
+                  key={option.code ?? option.name}
+                  label={option.name}
+                  selected={selectedForStep === option.name}
+                  onClick={() => handleRegionSelect(option)}
+                />
+              ))
+            )}
+          </div>
+        </section>
+
+        <SortSalaryFilterSections
+          className="mt-6"
+          sortDraft={sortDraft}
+          onSortChange={setSortDraft}
+          salaryDraft={salaryDraft}
+          minInput={minInput}
+          maxInput={maxInput}
+          onSalaryPreset={handleSalaryPreset}
+          onMinChange={handleMinChange}
+          onMaxChange={handleMaxChange}
+        />
+      </div>
+
+      <FilterDrawerApplyFooter
+        showReset
+        applyLabel="적용"
+        onReset={handleReset}
+        onApply={handleApply}
+      />
+    </>
+  )
+}
+
+export function RegionModeFilterDrawer({
+  open,
+  onOpenChange,
+  value,
+  onApply,
+}: RegionModeFilterDrawerProps) {
+  const resetKey = `${value.regionSelection.sido ?? ''}-${value.regionSelection.sigungu ?? ''}-${value.regionSelection.dong ?? ''}-${value.sortValue}-${value.salaryFilter.preset}-${value.salaryFilter.min ?? ''}-${value.salaryFilter.max ?? ''}`
+
+  return (
+    <FilterDrawerShell
+      open={open}
+      onOpenChange={onOpenChange}
+      title="필터"
+      footer={null}
+    >
+      {open ? (
+        <RegionModeFilterDrawerBody
+          key={resetKey}
+          value={value}
+          onOpenChange={onOpenChange}
+          onApply={onApply}
+        />
+      ) : null}
+    </FilterDrawerShell>
+  )
+}
diff --git a/src/features/job-lookup-map/common/SortSalaryFilterSections.tsx b/src/features/job-lookup-map/common/SortSalaryFilterSections.tsx
new file mode 100644
index 00000000..a9011d4e
--- /dev/null
+++ b/src/features/job-lookup-map/common/SortSalaryFilterSections.tsx
@@ -0,0 +1,110 @@
+import { FilterChip } from '@/features/job-lookup-map/common/FilterChip'
+import { SORT_OPTIONS } from '@/features/job-lookup-map/lib/postingFilters'
+import type { SalaryFilterSelection } from '@/features/job-lookup-map/lib/postingFilters'
+
+type SortSalaryFilterSectionsProps = {
+  sortDraft: string
+  onSortChange: (value: string) => void
+  salaryDraft: SalaryFilterSelection
+  minInput: string
+  maxInput: string
+  onSalaryPreset: (preset: 'all' | 'custom') => void
+  onMinChange: (raw: string) => void
+  onMaxChange: (raw: string) => void
+  className?: string
+}
+
+export function SortSalaryFilterSections({
+  sortDraft,
+  onSortChange,
+  salaryDraft,
+  minInput,
+  maxInput,
+  onSalaryPreset,
+  onMinChange,
+  onMaxChange,
+  className,
+}: SortSalaryFilterSectionsProps) {
+  const isCustomSalary = salaryDraft.preset === 'custom'
+
+  return (
+    <>
+      <section className={className}>
+        <h3 className="typography-body01-semibold text-text-100">정렬</h3>
+        <div className="mt-3 flex flex-wrap gap-2">
+          {SORT_OPTIONS.map(option => (
+            <FilterChip
+              key={option.value}
+              label={option.label}
+              selected={sortDraft === option.value}
+              onClick={() => onSortChange(option.value)}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section className="mt-6">
+        <h3 className="typography-body01-semibold text-text-100">급여</h3>
+        <div className="mt-3 flex flex-wrap gap-2">
+          <FilterChip
+            label="전체"
+            selected={salaryDraft.preset === 'all'}
+            onClick={() => onSalaryPreset('all')}
+          />
+          <FilterChip
+            label="직접 입력"
+            selected={isCustomSalary}
+            onClick={() => onSalaryPreset('custom')}
+          />
+        </div>
+
+        {isCustomSalary ? (
+          <div className="mt-4">
+            <p className="typography-body02-regular text-text-50">
+              최소 / 최대 시급
+            </p>
+            <div className="mt-2 flex items-center gap-2">
+              <label className="relative flex-1">
+                <span className="sr-only">최소 시급</span>
+                <input
+                  type="text"
+                  inputMode="numeric"
+                  value={minInput}
+                  onChange={e => onMinChange(e.target.value)}
+                  placeholder="12,000"
+                  className={`h-12 w-full rounded-2xl border px-4 pr-10 typography-body01-regular text-text-100 outline-none placeholder:text-text-50 ${
+                    salaryDraft.min != null
+                      ? 'border-main'
+                      : 'border-line-2 focus:border-main'
+                  }`}
+                />
+                <span className="pointer-events-none absolute inset-y-0 right-4 flex items-center typography-body01-regular text-text-100">
+                  원
+                </span>
+              </label>
+              <span className="typography-body01-regular text-text-50">~</span>
+              <label className="relative flex-1">
+                <span className="sr-only">최대 시급</span>
+                <input
+                  type="text"
+                  inputMode="numeric"
+                  value={maxInput}
+                  onChange={e => onMaxChange(e.target.value)}
+                  placeholder="최대"
+                  className={`h-12 w-full rounded-2xl border px-4 pr-10 typography-body01-regular text-text-100 outline-none placeholder:text-text-50 ${
+                    salaryDraft.max != null
+                      ? 'border-main'
+                      : 'border-line-2 focus:border-main'
+                  }`}
+                />
+                <span className="pointer-events-none absolute inset-y-0 right-4 flex items-center typography-body01-regular text-text-100">
+                  원
+                </span>
+              </label>
+            </div>
+          </div>
+        ) : null}
+      </section>
+    </>
+  )
+}
diff --git a/src/features/job-lookup-map/hooks/useAddresses.ts b/src/features/job-lookup-map/hooks/useAddresses.ts
new file mode 100644
index 00000000..0b85355e
--- /dev/null
+++ b/src/features/job-lookup-map/hooks/useAddresses.ts
@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { fetchAddresses } from '@/features/job-lookup-map/api/posting'
+
+export function useAddresses(code?: string, enabled = true) {
+  const { data, isPending, isError, isFetching, refetch } = useQuery({
+    queryKey: ['jobLookupMap', 'addresses', code ?? 'root'] as const,
+    queryFn: () => fetchAddresses(code),
+    enabled,
+  })
+
+  return {
+    addresses: data ?? [],
+    isLoading: isPending,
+    isFetching,
+    isError,
+    refetch,
+  }
+}
diff --git a/src/features/job-lookup-map/hooks/usePosting.ts b/src/features/job-lookup-map/hooks/usePosting.ts
index c728a514..542f838b 100644
--- a/src/features/job-lookup-map/hooks/usePosting.ts
+++ b/src/features/job-lookup-map/hooks/usePosting.ts
@@ -1,28 +1,33 @@
 import { useMemo } from 'react'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { fetchPostings } from '@/features/job-lookup-map/api/posting'
+import type { PostingsListFilters } from '@/features/job-lookup-map/lib/postingFilters'
 import type { Posting } from '@/features/job-lookup-map/types/posting'
 
 const PAGE_SIZE = 10
 
-export function usePostings() {
+export function usePostings(filters?: PostingsListFilters) {
+  const listFilters = useMemo(() => filters ?? {}, [filters])
+
   const {
     data,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
     isPending,
+    isFetching,
     isError,
     refetch,
   } = useInfiniteQuery({
-    queryKey: ['jobLookupMap', 'postings', PAGE_SIZE] as const,
+    queryKey: ['jobLookupMap', 'postings', PAGE_SIZE, listFilters] as const,
     queryFn: ({ pageParam }) =>
       fetchPostings({
         pageSize: PAGE_SIZE,
         cursor: pageParam as string | undefined,
+        ...listFilters,
       }),
     initialPageParam: undefined as string | undefined,
-    getNextPageParam: lastPage => lastPage.page.cursor || undefined,
+    getNextPageParam: lastPage => lastPage.page.cursor ?? undefined,
   })
 
   const postings = useMemo(
@@ -39,6 +44,7 @@ export function usePostings() {
     hasNextPage: Boolean(hasNextPage),
     isFetchingNextPage,
     isLoading: isPending,
+    isFetching,
     isError,
     refetch,
   }
diff --git a/src/features/job-lookup-map/hooks/usePostingDetail.ts b/src/features/job-lookup-map/hooks/usePostingDetail.ts
index 0f5d3330..1f101db8 100644
--- a/src/features/job-lookup-map/hooks/usePostingDetail.ts
+++ b/src/features/job-lookup-map/hooks/usePostingDetail.ts
@@ -2,11 +2,12 @@ import { useQuery } from '@tanstack/react-query'
 import { fetchPostingDetail } from '@/features/job-lookup-map/api/posting'
 
 export function usePostingDetail(postingId: number | undefined) {
-  const { data, isPending, isError } = useQuery({
+  const { data, isLoading, isError, isFetching } = useQuery({
     queryKey: ['postingDetail', postingId] as const,
     queryFn: () => fetchPostingDetail(postingId!),
     enabled: postingId != null && postingId > 0,
+    retry: false,
   })
 
-  return { data, isPending, isError }
+  return { data, isLoading, isError, isFetching }
 }
diff --git a/src/features/job-lookup-map/hooks/useRemoveFavoritePosting.ts b/src/features/job-lookup-map/hooks/useRemoveFavoritePosting.ts
new file mode 100644
index 00000000..c98ed27a
--- /dev/null
+++ b/src/features/job-lookup-map/hooks/useRemoveFavoritePosting.ts
@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { removeFavoritePosting } from '@/features/job-lookup-map/api/posting'
+
+export function useRemoveFavoritePosting() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (postingId: number) => removeFavoritePosting(postingId),
+    onSuccess: (_, postingId) => {
+      void queryClient.invalidateQueries({
+        queryKey: ['jobLookupMap', 'favoritePostings'],
+      })
+      void queryClient.invalidateQueries({
+        queryKey: ['jobLookupMap', 'postings'],
+      })
+      void queryClient.invalidateQueries({
+        queryKey: ['postingDetail', postingId],
+      })
+    },
+  })
+}
diff --git a/src/features/job-lookup-map/hooks/useScrappedPostings.ts b/src/features/job-lookup-map/hooks/useScrappedPostings.ts
new file mode 100644
index 00000000..fa480bfd
--- /dev/null
+++ b/src/features/job-lookup-map/hooks/useScrappedPostings.ts
@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { fetchFavoritePostings } from '@/features/job-lookup-map/api/posting'
+import type { FavoritePostingItem } from '@/features/job-lookup-map/types/posting'
+
+const PAGE_SIZE = 10
+
+export function useScrappedPostings() {
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isPending,
+    isFetching,
+    isError,
+    refetch,
+  } = useInfiniteQuery({
+    queryKey: ['jobLookupMap', 'favoritePostings', PAGE_SIZE] as const,
+    queryFn: ({ pageParam }) =>
+      fetchFavoritePostings({
+        pageSize: PAGE_SIZE,
+        cursor: pageParam as string | undefined,
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: lastPage => lastPage.page.cursor ?? undefined,
+  })
+
+  const favorites = useMemo(
+    () =>
+      data?.pages.flatMap((page): FavoritePostingItem[] => page.data ?? []) ??
+      [],
+    [data]
+  )
+
+  const totalCount = data?.pages[0]?.page.totalCount ?? 0
+
+  return {
+    favorites,
+    totalCount,
+    fetchNextPage,
+    hasNextPage: Boolean(hasNextPage),
+    isFetchingNextPage,
+    isLoading: isPending,
+    isFetching,
+    isError,
+    refetch,
+  }
+}
diff --git a/src/features/job-lookup-map/hooks/useSortSalaryFilterDraft.ts b/src/features/job-lookup-map/hooks/useSortSalaryFilterDraft.ts
new file mode 100644
index 00000000..ccde0835
--- /dev/null
+++ b/src/features/job-lookup-map/hooks/useSortSalaryFilterDraft.ts
@@ -0,0 +1,96 @@
+import { useState } from 'react'
+
+import {
+  DEFAULT_SORT_VALUE,
+  EMPTY_SALARY_FILTER,
+  formatSalaryInput,
+  parseSalaryInput,
+  type SalaryFilterSelection,
+} from '@/features/job-lookup-map/lib/postingFilters'
+
+type SortSalaryFilterDraft = {
+  sortValue: string
+  salaryFilter: SalaryFilterSelection
+}
+
+export function useSortSalaryFilterDraft(initial: SortSalaryFilterDraft) {
+  const [sortDraft, setSortDraft] = useState(initial.sortValue)
+  const [salaryDraft, setSalaryDraft] = useState(initial.salaryFilter)
+  const [minInput, setMinInput] = useState(
+    formatSalaryInput(initial.salaryFilter.min)
+  )
+  const [maxInput, setMaxInput] = useState(
+    formatSalaryInput(initial.salaryFilter.max)
+  )
+
+  const handleSalaryPreset = (preset: 'all' | 'custom') => {
+    if (preset === 'all') {
+      setSalaryDraft(EMPTY_SALARY_FILTER)
+      setMinInput('')
+      setMaxInput('')
+      return
+    }
+
+    setSalaryDraft(prev => ({
+      preset: 'custom',
+      min: prev.min,
+      max: prev.max,
+    }))
+  }
+
+  const handleMinChange = (raw: string) => {
+    const min = parseSalaryInput(raw)
+    setMinInput(min != null ? formatSalaryInput(min) : '')
+    setSalaryDraft(prev => ({
+      preset: 'custom',
+      min,
+      max: prev.max,
+    }))
+  }
+
+  const handleMaxChange = (raw: string) => {
+    const max = parseSalaryInput(raw)
+    setMaxInput(max != null ? formatSalaryInput(max) : '')
+    setSalaryDraft(prev => ({
+      preset: 'custom',
+      min: prev.min,
+      max,
+    }))
+  }
+
+  const resetSortSalary = () => {
+    setSortDraft(DEFAULT_SORT_VALUE)
+    setSalaryDraft(EMPTY_SALARY_FILTER)
+    setMinInput('')
+    setMaxInput('')
+  }
+
+  const getNormalizedSalary = (): SalaryFilterSelection => {
+    if (
+      salaryDraft.min != null &&
+      salaryDraft.max != null &&
+      salaryDraft.min > salaryDraft.max
+    ) {
+      return {
+        ...salaryDraft,
+        min: salaryDraft.max,
+        max: salaryDraft.min,
+      }
+    }
+
+    return salaryDraft
+  }
+
+  return {
+    sortDraft,
+    setSortDraft,
+    salaryDraft,
+    minInput,
+    maxInput,
+    handleSalaryPreset,
+    handleMinChange,
+    handleMaxChange,
+    resetSortSalary,
+    getNormalizedSalary,
+  }
+}
diff --git a/src/features/job-lookup-map/hooks/useToggleFavoritePosting.ts b/src/features/job-lookup-map/hooks/useToggleFavoritePosting.ts
new file mode 100644
index 00000000..5da32acf
--- /dev/null
+++ b/src/features/job-lookup-map/hooks/useToggleFavoritePosting.ts
@@ -0,0 +1,70 @@
+import { useRef } from 'react'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  addFavoritePosting,
+  removeFavoritePosting,
+} from '@/features/job-lookup-map/api/posting'
+
+function invalidateFavoriteQueries(
+  queryClient: ReturnType<typeof useQueryClient>,
+  postingId: number
+) {
+  void queryClient.invalidateQueries({
+    queryKey: ['jobLookupMap', 'favoritePostings'],
+  })
+  void queryClient.invalidateQueries({
+    queryKey: ['jobLookupMap', 'postings'],
+  })
+  void queryClient.invalidateQueries({
+    queryKey: ['postingDetail', postingId],
+  })
+}
+
+export function useToggleFavoritePosting() {
+  const queryClient = useQueryClient()
+  const inFlightIdsRef = useRef(new Set<number>())
+
+  const addMutation = useMutation({
+    mutationFn: (postingId: number) => addFavoritePosting(postingId),
+    onSuccess: (_, postingId) => {
+      invalidateFavoriteQueries(queryClient, postingId)
+    },
+  })
+
+  const removeMutation = useMutation({
+    mutationFn: (postingId: number) => removeFavoritePosting(postingId),
+    onSuccess: (_, postingId) => {
+      invalidateFavoriteQueries(queryClient, postingId)
+    },
+  })
+
+  const toggleFavorite = (params: {
+    postingId: number
+    saved: boolean
+    onOptimistic?: (nextSaved: boolean) => void
+    onError?: (rollbackSaved: boolean) => void
+    onSettled?: () => void
+  }) => {
+    const { postingId, saved, onOptimistic, onError, onSettled } = params
+    if (inFlightIdsRef.current.has(postingId)) return false
+
+    inFlightIdsRef.current.add(postingId)
+    const nextSaved = !saved
+    onOptimistic?.(nextSaved)
+
+    const mutate = saved ? removeMutation.mutate : addMutation.mutate
+    mutate(postingId, {
+      onError: () => onError?.(saved),
+      onSettled: () => {
+        inFlightIdsRef.current.delete(postingId)
+        onSettled?.()
+      },
+    })
+    return true
+  }
+
+  return {
+    toggleFavorite,
+    isPending: addMutation.isPending || removeMutation.isPending,
+  }
+}
diff --git a/src/features/job-lookup-map/lib/postingFilters.ts b/src/features/job-lookup-map/lib/postingFilters.ts
new file mode 100644
index 00000000..2534a763
--- /dev/null
+++ b/src/features/job-lookup-map/lib/postingFilters.ts
@@ -0,0 +1,151 @@
+import type { RegionSelection } from '@/features/job-lookup-map/lib/regionOptions'
+import {
+  hasRegionFilterApplied,
+  isRegionSelectionComplete,
+} from '@/features/job-lookup-map/lib/regionOptions'
+
+export type AlbaFindMode = 'nearby' | 'region'
+
+export type SalaryPreset = 'all' | 'custom'
+
+export const SORT_OPTIONS = [
+  { value: 'LATEST', label: '최신순', description: '최신순' },
+  { value: 'PAY_AMOUNT', label: '급여순', description: '급여순' },
+] as const
+
+export type SalaryFilterSelection = {
+  preset: SalaryPreset
+  min: number | null
+  max: number | null
+}
+
+export const EMPTY_SALARY_FILTER: SalaryFilterSelection = {
+  preset: 'all',
+  min: null,
+  max: null,
+}
+
+export const DEFAULT_SORT_VALUE = 'LATEST'
+
+export function formatSortOptionLabel(option: {
+  value: string
+  description: string
+}): string {
+  if (option.value === 'LATEST') return '최신순'
+  if (option.value === 'PAY_AMOUNT') return '급여순'
+  return option.description
+}
+
+export function formatSalaryChipLabel(
+  selection: SalaryFilterSelection
+): string {
+  if (selection.preset === 'custom') {
+    if (selection.min != null && selection.max != null) {
+      return `${selection.min.toLocaleString('ko-KR')}~${selection.max.toLocaleString('ko-KR')}원`
+    }
+    if (selection.min != null) {
+      return `${selection.min.toLocaleString('ko-KR')}원 이상`
+    }
+    if (selection.max != null) {
+      return `${selection.max.toLocaleString('ko-KR')}원 이하`
+    }
+  }
+  return '급여'
+}
+
+export function isSalaryFilterApplied(
+  selection: SalaryFilterSelection
+): boolean {
+  return (
+    selection.preset !== 'all' || selection.min != null || selection.max != null
+  )
+}
+
+export function formatSortChipLabel(value: string): string {
+  const option = SORT_OPTIONS.find(item => item.value === value)
+  if (option) return formatSortOptionLabel(option)
+  return '최신순'
+}
+
+export function isSortFilterApplied(value: string): boolean {
+  return value !== DEFAULT_SORT_VALUE
+}
+
+export function countActiveFilters(params: {
+  regionSelection: RegionSelection
+  sortValue: string
+  salaryFilter: SalaryFilterSelection
+  mode: AlbaFindMode
+}): number {
+  const { regionSelection, sortValue, salaryFilter, mode } = params
+  let count = 0
+  if (mode === 'region' && hasRegionFilterApplied(regionSelection)) count += 1
+  if (isSortFilterApplied(sortValue)) count += 1
+  if (isSalaryFilterApplied(salaryFilter)) count += 1
+  return count
+}
+
+export function isListFilterApplied(params: {
+  mode: AlbaFindMode
+  regionSelection: RegionSelection
+  sortValue: string
+  salaryFilter: SalaryFilterSelection
+}): boolean {
+  return countActiveFilters(params) > 0
+}
+
+export function parseSalaryInput(raw: string): number | null {
+  const digits = raw.replace(/[^\d]/g, '')
+  if (!digits) return null
+  const parsed = Number(digits)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+export function formatSalaryInput(value: number | null): string {
+  if (value == null) return ''
+  return value.toLocaleString('ko-KR')
+}
+
+export type PostingsListFilters = {
+  province?: string
+  district?: string
+  town?: string
+  minPayAmount?: number
+  maxPayAmount?: number
+  payAmountSort?: boolean
+}
+
+export function buildPostingsListFilters(params: {
+  mode: AlbaFindMode
+  regionSelection: RegionSelection
+  sortValue: string
+  salaryFilter: SalaryFilterSelection
+}): PostingsListFilters {
+  const { mode, regionSelection, sortValue, salaryFilter } = params
+  const filters: PostingsListFilters = {}
+
+  if (mode === 'region' && isRegionSelectionComplete(regionSelection)) {
+    if (regionSelection.sido && regionSelection.sido !== '전국(전체)') {
+      filters.province = regionSelection.sido
+    }
+    if (regionSelection.sigungu && regionSelection.sigungu !== '전체') {
+      filters.district = regionSelection.sigungu
+    }
+    if (regionSelection.dong && regionSelection.dong !== '전체') {
+      filters.town = regionSelection.dong
+    }
+  }
+
+  if (sortValue === 'PAY_AMOUNT') {
+    filters.payAmountSort = true
+  }
+
+  if (salaryFilter.min != null) {
+    filters.minPayAmount = salaryFilter.min
+  }
+  if (salaryFilter.max != null) {
+    filters.maxPayAmount = salaryFilter.max
+  }
+
+  return filters
+}
diff --git a/src/features/job-lookup-map/lib/postingToAlbaboxProps.ts b/src/features/job-lookup-map/lib/postingToAlbaboxProps.ts
index f491ffff..5b22a0de 100644
--- a/src/features/job-lookup-map/lib/postingToAlbaboxProps.ts
+++ b/src/features/job-lookup-map/lib/postingToAlbaboxProps.ts
@@ -86,7 +86,7 @@ export function postingToAlbaboxProps(
     wageAmount: p.payAmount.toLocaleString('ko-KR'),
     timeRange,
     workDays,
-    distance: '-',
+    town: p.workspace.town?.trim() || '-',
     postedAgo: formatPostedAgo(p.createdAt),
     saved: p.scrapped,
   }
diff --git a/src/features/job-lookup-map/lib/regionOptions.ts b/src/features/job-lookup-map/lib/regionOptions.ts
new file mode 100644
index 00000000..edbc8961
--- /dev/null
+++ b/src/features/job-lookup-map/lib/regionOptions.ts
@@ -0,0 +1,88 @@
+import type { AddressItem } from '@/features/job-lookup-map/types/posting'
+
+export type RegionStep = 'sido' | 'sigungu' | 'dong'
+
+export type RegionSelection = {
+  sido: string | null
+  sigungu: string | null
+  dong: string | null
+  sidoCode: string | null
+  sigunguCode: string | null
+  dongCode: string | null
+}
+
+export const EMPTY_REGION_SELECTION: RegionSelection = {
+  sido: null,
+  sigungu: null,
+  dong: null,
+  sidoCode: null,
+  sigunguCode: null,
+  dongCode: null,
+}
+
+export const REGION_STEPS: { key: RegionStep; label: string }[] = [
+  { key: 'sido', label: '시/도' },
+  { key: 'sigungu', label: '시/군/구' },
+  { key: 'dong', label: '읍/면/동' },
+]
+
+export type RegionOption = {
+  code: string | null
+  name: string
+}
+
+export function formatRegionLabel(selection: RegionSelection): string {
+  if (!selection.sido || selection.sido === '전국(전체)') return '지역 선택'
+  if (!selection.sigungu || selection.sigungu === '전체') return selection.sido
+  if (!selection.dong || selection.dong === '전체') {
+    return `${selection.sido} ${selection.sigungu}`
+  }
+  return `${selection.sigungu} ${selection.dong}`
+}
+
+export function formatRegionChipLabel(
+  selection: RegionSelection
+): string | null {
+  if (!selection.sido || selection.sido === '전국(전체)') return null
+  if (!selection.sigungu || selection.sigungu === '전체') {
+    return selection.sido
+  }
+  if (!selection.dong || selection.dong === '전체') {
+    return `${selection.sido} ${selection.sigungu}`
+  }
+  return `${selection.sido} ${selection.sigungu}`
+}
+
+export function hasRegionFilterApplied(selection: RegionSelection): boolean {
+  return (
+    selection.sido != null &&
+    selection.sido !== '전국(전체)' &&
+    isRegionSelectionComplete(selection)
+  )
+}
+
+export function isRegionSelectionComplete(selection: RegionSelection): boolean {
+  return (
+    selection.sido != null &&
+    selection.sigungu != null &&
+    selection.dong != null
+  )
+}
+
+export function getRegionOptionsForStep(
+  step: RegionStep,
+  addresses: AddressItem[]
+): RegionOption[] {
+  const allOption: RegionOption =
+    step === 'sido'
+      ? { code: null, name: '전국(전체)' }
+      : { code: null, name: '전체' }
+
+  return [
+    allOption,
+    ...addresses.map(address => ({
+      code: address.code,
+      name: address.name,
+    })),
+  ]
+}
diff --git a/src/features/job-lookup-map/types/posting.ts b/src/features/job-lookup-map/types/posting.ts
index a867d4f2..f8f5fd23 100644
--- a/src/features/job-lookup-map/types/posting.ts
+++ b/src/features/job-lookup-map/types/posting.ts
@@ -15,8 +15,23 @@ export interface PostingDetailResponse {
   schedules: Schedule[]
   scrapped: boolean
 }
+
+export interface AddressItem {
+  code: string
+  name: string
+}
+
+export interface AddressesResponse {
+  addresses: AddressItem[]
+}
+
+export interface PostingSortOption {
+  value: string
+  description: string
+}
+
 export interface Page {
-  cursor: string
+  cursor: string | null
   pageSize: number
   totalCount: number
 }
@@ -55,9 +70,31 @@ export interface Workspace {
   latitude: number
   longitude: number
   fullAddress: string
+  town: string
 }
 
 export interface ApplyPostingRequest {
   postingScheduleId: number
   description: string
 }
+
+/** `GET /app/users/me/postings/favorites` 응답의 공고 요약 */
+export interface FavoritePostingSummary {
+  id: number
+  businessName: string
+  title: string
+  payAmount: number
+  paymentType: string
+}
+
+/** 스크랩(즐겨찾기) 한 건 */
+export interface FavoritePostingItem {
+  id: number
+  posting: FavoritePostingSummary
+  createdAt: string
+}
+
+export interface FavoritePostingListResponse {
+  page: Page
+  data: FavoritePostingItem[]
+}
diff --git a/src/pages/my/components/MenuListItem.tsx b/src/pages/my/components/MenuListItem.tsx
index 9d47e422..e0323e2d 100644
--- a/src/pages/my/components/MenuListItem.tsx
+++ b/src/pages/my/components/MenuListItem.tsx
@@ -6,6 +6,7 @@ interface MenuListItemProps {
   label: string
   onClick?: () => void
   isLast?: boolean
+  iconClassName?: string
 }
 
 export function MenuListItem({
@@ -13,6 +14,7 @@ export function MenuListItem({
   label,
   onClick,
   isLast = false,
+  iconClassName,
 }: MenuListItemProps) {
   return (
     <button
@@ -24,7 +26,9 @@ export function MenuListItem({
     >
       {Icon && (
         <Icon
-          className="h-5 w-5 shrink-0 text-text-100 [&_*]:!stroke-current"
+          className={`h-5 w-5 shrink-0 [&_*]:!stroke-current ${
+            iconClassName ?? 'text-text-100'
+          }`}
           aria-hidden="true"
         />
       )}
diff --git a/src/pages/my/index.tsx b/src/pages/my/index.tsx
index 3abd7a3c..9a40ab11 100644
--- a/src/pages/my/index.tsx
+++ b/src/pages/my/index.tsx
@@ -6,6 +6,7 @@ import { useUserMe } from '@/features/user/me'
 import { ProfileCard } from './components/ProfileCard'
 import { MenuListItem } from './components/MenuListItem'
 import UserIcon from '@/assets/icons/my/user.svg?react'
+import BookmarkIcon from '@/assets/icons/job-lookup-map/Bookmark.svg?react'
 import StoreIcon from '@/assets/icons/my/store.svg?react'
 import HeadphonesIcon from '@/assets/icons/my/headphones.svg?react'
 import FileTextIcon from '@/assets/icons/my/file-text.svg?react'
@@ -20,10 +21,18 @@ interface MenuItem {
   icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
   path?: string
   onlyManager?: boolean
+  onlyWorker?: boolean
 }
 
 const MENU_ITEMS: MenuItem[] = [
   { key: 'info', label: '내 정보', icon: UserIcon, path: '/my/info' },
+  {
+    key: 'scrapped-postings',
+    label: '스크랩한 알바',
+    icon: BookmarkIcon,
+    path: ROUTES.MY.SCRAPPED_POSTINGS,
+    onlyWorker: true,
+  },
   {
     key: 'store-apply',
     label: '업장 등록 신청',
@@ -69,6 +78,11 @@ export function MyPage() {
   const isManager = scope === 'MANAGER'
   const nickname = user.nickname || user.name || '알터'
   const realName = user.name
+  const visibleMenuItems = MENU_ITEMS.filter(item => {
+    if (item.onlyManager && !isManager) return false
+    if (item.onlyWorker && isManager) return false
+    return true
+  })
 
   const handleEditProfile = () => {
     navigate(ROUTES.MY.PROFILE)
@@ -125,12 +139,12 @@ export function MyPage() {
           aria-label="마이페이지 메뉴"
           className="mt-3 flex flex-col rounded-2xl"
         >
-          {MENU_ITEMS.map((item, index) => (
+          {visibleMenuItems.map((item, index) => (
             <MenuListItem
               key={item.key}
               icon={item.icon}
               label={item.label}
-              isLast={index === MENU_ITEMS.length - 1}
+              isLast={index === visibleMenuItems.length - 1}
               onClick={() => item.path && navigate(item.path)}
             />
           ))}
diff --git a/src/pages/my/scrapped/components/ScrappedPostingCard.tsx b/src/pages/my/scrapped/components/ScrappedPostingCard.tsx
new file mode 100644
index 00000000..2d3781ba
--- /dev/null
+++ b/src/pages/my/scrapped/components/ScrappedPostingCard.tsx
@@ -0,0 +1,69 @@
+import type { KeyboardEvent } from 'react'
+import BookmarkIcon from '@/assets/icons/job-lookup-map/Bookmark.svg?react'
+
+export type ScrappedPostingCardProps = {
+  storeName: string
+  title: string
+  wageAmount: string
+  savedAgoLabel: string
+  onBookmarkClick?: () => void
+  onClick?: () => void
+}
+
+export function ScrappedPostingCard({
+  storeName,
+  title,
+  wageAmount,
+  savedAgoLabel,
+  onBookmarkClick,
+  onClick,
+}: ScrappedPostingCardProps) {
+  const isInteractive = onClick != null
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (!onClick) return
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      onClick()
+    }
+  }
+
+  return (
+    <article
+      className={`rounded-2xl bg-white px-4 py-4 shadow-[0px_1px_4px_rgba(0,0,0,0.08)] ${
+        isInteractive ? 'cursor-pointer' : ''
+      }`}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={isInteractive ? 0 : undefined}
+      role={isInteractive ? 'button' : undefined}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <p className="min-w-0 flex-1 typography-body02-regular text-text-70">
+          {storeName}
+        </p>
+        <button
+          type="button"
+          onClick={e => {
+            e.stopPropagation()
+            onBookmarkClick?.()
+          }}
+          aria-label="스크랩 해제"
+          className="-m-1 rounded-md p-1 text-main [&_path]:fill-main [&_path]:stroke-main"
+        >
+          <BookmarkIcon className="h-5 w-4" aria-hidden />
+        </button>
+      </div>
+
+      <h3 className="mt-1 typography-body01-semibold text-text-100">{title}</h3>
+
+      <p className="mt-1.5 typography-body02-regular text-text-70">
+        시급 {wageAmount}원
+      </p>
+
+      <p className="mt-3 typography-body03-regular text-text-50">
+        {savedAgoLabel}
+      </p>
+    </article>
+  )
+}
diff --git a/src/pages/my/scrapped/index.tsx b/src/pages/my/scrapped/index.tsx
new file mode 100644
index 00000000..4b52b2a3
--- /dev/null
+++ b/src/pages/my/scrapped/index.tsx
@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import { generatePath, useNavigate } from 'react-router-dom'
+import { useRemoveFavoritePosting } from '@/features/job-lookup-map/hooks/useRemoveFavoritePosting'
+import { useScrappedPostings } from '@/features/job-lookup-map/hooks/useScrappedPostings'
+import { formatPostedAgo } from '@/features/job-lookup-map/lib/postingToAlbaboxProps'
+import { ScrappedPostingCard } from '@/pages/my/scrapped/components/ScrappedPostingCard'
+import { ROUTES } from '@/shared/constants/routes'
+import { shouldShowInfiniteListLoadMore } from '@/shared/lib/listLoadMoreVisibility'
+import { ConfirmModal } from '@/shared/ui/common/ConfirmModal'
+import { Navbar } from '@/shared/ui/common/Navbar'
+import { MoreButton } from '@/shared/ui/common/MoreButton'
+import { Spinner } from '@/shared/ui/Spinner'
+
+export function ScrappedPostingsPage() {
+  const navigate = useNavigate()
+  const { mutate: removeFavorite, isPending: isRemoving } =
+    useRemoveFavoritePosting()
+  const [pendingPostingId, setPendingPostingId] = useState<number | null>(null)
+
+  const {
+    favorites,
+    totalCount,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+  } = useScrappedPostings()
+
+  const handleConfirmRemove = () => {
+    if (pendingPostingId == null) return
+    removeFavorite(pendingPostingId, {
+      onSettled: () => setPendingPostingId(null),
+    })
+  }
+
+  return (
+    <div className="flex min-h-[100dvh] flex-col bg-bg-light">
+      <div className="sticky top-0 z-10 bg-white">
+        <Navbar variant="detail" title="스크랩한 알바" />
+      </div>
+
+      <div className="mx-auto w-full flex-1 px-4 py-4">
+        {isLoading ? (
+          <div className="flex justify-center py-16">
+            <Spinner />
+          </div>
+        ) : isError ? (
+          <p className="py-16 text-center typography-body02-regular text-text-50">
+            스크랩한 알바를 불러오지 못했습니다.
+          </p>
+        ) : favorites.length === 0 ? (
+          <p className="py-16 text-center typography-body02-regular text-text-50">
+            스크랩한 알바가 없습니다.
+          </p>
+        ) : (
+          <div className="flex flex-col gap-3">
+            {favorites.map(item => (
+              <ScrappedPostingCard
+                key={item.id}
+                storeName={item.posting.businessName}
+                title={item.posting.title}
+                wageAmount={item.posting.payAmount.toLocaleString('ko-KR')}
+                savedAgoLabel={`${formatPostedAgo(item.createdAt)} 저장`}
+                onBookmarkClick={() => setPendingPostingId(item.posting.id)}
+                onClick={() =>
+                  navigate(
+                    generatePath(ROUTES.USER.JOB_LOOKUP_MAP_DETAIL, {
+                      postingId: String(item.posting.id),
+                    })
+                  )
+                }
+              />
+            ))}
+            {shouldShowInfiniteListLoadMore(hasNextPage, totalCount) && (
+              <MoreButton
+                className="mt-1"
+                label={isFetchingNextPage ? '불러오는 중...' : '더보기'}
+                onClick={() => void fetchNextPage()}
+                disabled={isFetchingNextPage}
+              />
+            )}
+          </div>
+        )}
+      </div>
+
+      <ConfirmModal
+        isOpen={pendingPostingId != null}
+        title="스크랩을 해제할까요?"
+        description="해제하면 목록에서 사라집니다."
+        confirmLabel="해제"
+        cancelLabel="취소"
+        isPending={isRemoving}
+        onConfirm={handleConfirmRemove}
+        onClose={() => {
+          if (!isRemoving) setPendingPostingId(null)
+        }}
+      />
+    </div>
+  )
+}
+
+export default ScrappedPostingsPage
diff --git a/src/pages/user/job-lookup-map-apply/index.tsx b/src/pages/user/job-lookup-map-apply/index.tsx
index 91a22100..667cf698 100644
--- a/src/pages/user/job-lookup-map-apply/index.tsx
+++ b/src/pages/user/job-lookup-map-apply/index.tsx
@@ -111,7 +111,7 @@ export function JobLookupMapApplyPage() {
   const postingId = Number(postingIdParam)
   const idOk = Number.isFinite(postingId) && postingId > 0
 
-  const { data, isPending, isError } = usePostingDetail(
+  const { data, isLoading, isError } = usePostingDetail(
     idOk ? postingId : undefined
   )
   const [introduction, setIntroduction] = useState('')
@@ -130,7 +130,7 @@ export function JobLookupMapApplyPage() {
     ? resolveApplyPostingError(submitError)
     : null
 
-  const showLoading = idOk && isPending && !data
+  const showLoading = idOk && isLoading && !data
   const showError = idOk && isError && !data
   const showEmpty = !idOk
 
diff --git a/src/pages/user/job-lookup-map-detail/index.tsx b/src/pages/user/job-lookup-map-detail/index.tsx
index c7897fdc..b35c8a88 100644
--- a/src/pages/user/job-lookup-map-detail/index.tsx
+++ b/src/pages/user/job-lookup-map-detail/index.tsx
@@ -1,8 +1,10 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { generatePath, useNavigate, useParams } from 'react-router-dom'
 import { ROUTES } from '@/shared/constants/routes'
 import ChevronLeftIcon from '@/assets/icons/nav/chevron-left.svg?react'
+import BookmarkIcon from '@/assets/icons/job-lookup-map/Bookmark.svg?react'
 import { usePostingDetail } from '@/features/job-lookup-map/hooks/usePostingDetail'
+import { useToggleFavoritePosting } from '@/features/job-lookup-map/hooks/useToggleFavoritePosting'
 import {
   formatPostedAgo,
   formatWorkDaysForDisplay,
@@ -34,9 +36,14 @@ export function JobLookupMapDetailPage() {
   const postingId = Number(postingIdParam)
   const idOk = Number.isFinite(postingId) && postingId > 0
 
-  const { data, isPending, isError } = usePostingDetail(
+  const { data, isLoading, isError } = usePostingDetail(
     idOk ? postingId : undefined
   )
+  const { toggleFavorite, isPending: isFavoritePending } =
+    useToggleFavoritePosting()
+  const [savedById, setSavedById] = useState<Record<number, boolean>>({})
+  const saved =
+    (idOk ? savedById[postingId] : undefined) ?? data?.scrapped ?? false
 
   const schedule = data?.schedules?.[0]
   const workDaysLine = useMemo(() => {
@@ -57,6 +64,18 @@ export function JobLookupMapDetailPage() {
       ? formatDurationHint(schedule.startTime, schedule.endTime)
       : null
 
+  const handleBookmarkClick = () => {
+    if (!idOk || isFavoritePending) return
+    toggleFavorite({
+      postingId,
+      saved,
+      onOptimistic: nextSaved =>
+        setSavedById(prev => ({ ...prev, [postingId]: nextSaved })),
+      onError: rollbackSaved =>
+        setSavedById(prev => ({ ...prev, [postingId]: rollbackSaved })),
+    })
+  }
+
   return (
     <div className="flex h-full min-h-0 flex-col bg-bg-light">
       <header className="flex h-14 shrink-0 items-center border-b border-line-2 bg-white px-4">
@@ -71,7 +90,23 @@ export function JobLookupMapDetailPage() {
         <h1 className="flex-1 text-center typography-headline03 text-text-100">
           알바 상세
         </h1>
-        <div className="w-6" />
+        <button
+          type="button"
+          onClick={e => {
+            e.preventDefault()
+            e.stopPropagation()
+            handleBookmarkClick()
+          }}
+          disabled={!data || isFavoritePending}
+          aria-label={saved ? '스크랩 해제' : '스크랩'}
+          className={`flex h-6 w-6 items-center justify-center rounded-md transition-colors disabled:opacity-40 ${
+            saved
+              ? 'text-main [&_path]:fill-main [&_path]:stroke-main'
+              : 'text-text-50'
+          }`}
+        >
+          <BookmarkIcon className="h-5 w-4" aria-hidden />
+        </button>
       </header>
 
       {!idOk && (
@@ -89,7 +124,7 @@ export function JobLookupMapDetailPage() {
         </main>
       )}
 
-      {idOk && isPending && !data && (
+      {idOk && isLoading && !data && (
         <main className="flex flex-1 items-center justify-center px-4">
           <p className="typography-body03-regular text-text-50">
             공고 정보를 불러오는 중…
diff --git a/src/pages/user/job-lookup-map/index.tsx b/src/pages/user/job-lookup-map/index.tsx
index 8e3e02d0..7c0d97c7 100644
--- a/src/pages/user/job-lookup-map/index.tsx
+++ b/src/pages/user/job-lookup-map/index.tsx
@@ -2,26 +2,41 @@ import {
   useCallback,
   useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
   type KeyboardEvent,
 } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
 import { animate, motion, useMotionValue } from 'framer-motion'
-import { AlbaFindCategoryBar } from '@/features/job-lookup-map/common/AlbaFindCategoryBar'
-import { ROUTES } from '@/shared/constants/routes'
-import type {
-  AlbaFindFilterId,
-  AlbaFindMode,
+import {
+  AlbaFindCategoryBar,
+  type AlbaFindCategoryBarRef,
 } from '@/features/job-lookup-map/common/AlbaFindCategoryBar'
+import { AlbaFindFilteredEmptyState } from '@/features/job-lookup-map/common/AlbaFindFilteredEmptyState'
+import { ROUTES } from '@/shared/constants/routes'
+import type { AlbaFindMode } from '@/features/job-lookup-map/common/AlbaFindCategoryBar'
 import { AlbaFindList } from '@/features/job-lookup-map/common/AlbaFindList'
 import { Albabox } from '@/features/job-lookup-map/common/Albabox'
 import { usePostings } from '@/features/job-lookup-map/hooks/usePosting'
+import { useToggleFavoritePosting } from '@/features/job-lookup-map/hooks/useToggleFavoritePosting'
 import { usePostingMapMarkers } from '@/features/job-lookup-map/hooks/usePostingMapMarkers'
 import { usePostingSearch } from '@/features/job-lookup-map/hooks/usePostingSearch'
 import { moveMapToWorkspace } from '@/features/job-lookup-map/lib/moveMapToWorkspace'
 import { pickSearchTargetPosting } from '@/features/job-lookup-map/lib/pickSearchTargetPosting'
 import { postingToAlbaboxProps } from '@/features/job-lookup-map/lib/postingToAlbaboxProps'
+import {
+  EMPTY_REGION_SELECTION,
+  isRegionSelectionComplete,
+  type RegionSelection,
+} from '@/features/job-lookup-map/lib/regionOptions'
+import {
+  DEFAULT_SORT_VALUE,
+  EMPTY_SALARY_FILTER,
+  buildPostingsListFilters,
+  isListFilterApplied,
+  type SalaryFilterSelection,
+} from '@/features/job-lookup-map/lib/postingFilters'
 import {
   getNaverMaps,
   type NaverMapInstance,
@@ -44,16 +59,41 @@ export function JobLookupMapPage() {
   const sheetRef = useRef<HTMLDivElement>(null)
   const [maxTranslateY, setMaxTranslateY] = useState(0)
   const [mode, setMode] = useState<AlbaFindMode>('nearby')
-  const [activeFilter, setActiveFilter] = useState<AlbaFindFilterId>('sort')
+  const [regionSelection, setRegionSelection] = useState<RegionSelection>(
+    EMPTY_REGION_SELECTION
+  )
+  const [sortValue, setSortValue] = useState(DEFAULT_SORT_VALUE)
+  const [salaryFilter, setSalaryFilter] =
+    useState<SalaryFilterSelection>(EMPTY_SALARY_FILTER)
   const [bookmarkById, setBookmarkById] = useState<Record<number, boolean>>({})
   const [searchQuery, setSearchQuery] = useState('')
   const [searchList, setSearchList] = useState<Posting[] | null>(null)
   const loadMoreRef = useRef<HTMLDivElement>(null)
+  const categoryBarRef = useRef<AlbaFindCategoryBarRef>(null)
   const hasSetInitialSheetYRef = useRef(false)
   const y = useMotionValue(0)
 
-  const { postings, fetchNextPage, hasNextPage, isFetchingNextPage } =
-    usePostings()
+  const listFilters = useMemo(
+    () =>
+      buildPostingsListFilters({
+        mode,
+        regionSelection,
+        sortValue,
+        salaryFilter,
+      }),
+    [mode, regionSelection, sortValue, salaryFilter]
+  )
+
+  const {
+    postings,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+  } = usePostings(listFilters)
+
+  const { toggleFavorite } = useToggleFavoritePosting()
 
   const { search } = usePostingSearch()
 
@@ -287,16 +327,66 @@ export function JobLookupMapPage() {
         }}
         className="absolute inset-x-0 bottom-[30px] z-[40] mx-auto flex h-[calc(100dvh-78px)] max-h-[calc(100dvh-78px)] w-full max-w-[428px] flex-col overflow-hidden rounded-t-[32px] border border-line-2 border-b-0 bg-white"
       >
-        <div className="mx-auto mt-4 h-1 w-[50px] shrink-0 rounded-full bg-line-2" />
+        <motion.div className="mx-auto mt-4 h-1 w-[50px] rounded-full bg-line-2" />
 
-        <div className="flex min-h-0 flex-1 flex-col overflow-hidden px-4 pb-[calc(1.5rem+78px+env(safe-area-inset-bottom))] pt-3">
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden px-4 pt-3 pb-[max(2.5rem,env(safe-area-inset-bottom))]">
           <AlbaFindCategoryBar
+            ref={categoryBarRef}
             mode={mode}
             onModeChange={setMode}
-            activeFilter={activeFilter}
-            onFilterChange={setActiveFilter}
+            regionSelection={regionSelection}
+            onRegionChange={selection => {
+              setRegionSelection(selection)
+              setSearchList(null)
+              if (isRegionSelectionComplete(selection)) {
+                setMode('region')
+              }
+            }}
+            sortValue={sortValue}
+            onSortChange={value => {
+              setSortValue(value)
+              setSearchList(null)
+            }}
+            salaryFilter={salaryFilter}
+            onSalaryChange={selection => {
+              setSalaryFilter(selection)
+              setSearchList(null)
+            }}
           />
           <AlbaFindList className="mt-3 min-h-0 flex-1 gap-0">
+            {isLoading && displayedPostings.length === 0 ? (
+              <p className="py-8 text-center typography-body02-regular text-text-50">
+                공고를 불러오는 중…
+              </p>
+            ) : isError ? (
+              <p className="py-8 text-center typography-body02-regular text-text-50">
+                공고를 불러오지 못했습니다.
+              </p>
+            ) : displayedPostings.length === 0 ? (
+              !isSearchActive &&
+              isListFilterApplied({
+                mode,
+                regionSelection,
+                sortValue,
+                salaryFilter,
+              }) ? (
+                <AlbaFindFilteredEmptyState
+                  title={
+                    mode === 'region'
+                      ? '이 지역에 공고가 없어요'
+                      : '조건에 맞는 공고가 없어요'
+                  }
+                  actionLabel={
+                    mode === 'region' ? '지역 변경하기' : '조건 변경하기'
+                  }
+                  onAction={() => categoryBarRef.current?.openFilters()}
+                />
+              ) : (
+                <p className="py-8 text-center typography-body02-regular text-text-50">
+                  조건에 맞는 공고가 없습니다.
+                </p>
+              )
+            ) : null}
             {displayedPostings.map(posting => {
               const base = postingToAlbaboxProps(posting)
               const saved = bookmarkById[posting.id] ?? posting.scrapped
@@ -305,12 +395,22 @@ export function JobLookupMapPage() {
                   key={posting.id}
                   {...base}
                   saved={saved}
-                  onBookmarkClick={() =>
-                    setBookmarkById(prev => ({
-                      ...prev,
-                      [posting.id]: !saved,
-                    }))
-                  }
+                  onBookmarkClick={() => {
+                    toggleFavorite({
+                      postingId: posting.id,
+                      saved,
+                      onOptimistic: nextSaved =>
+                        setBookmarkById(prev => ({
+                          ...prev,
+                          [posting.id]: nextSaved,
+                        })),
+                      onError: rollbackSaved =>
+                        setBookmarkById(prev => ({
+                          ...prev,
+                          [posting.id]: rollbackSaved,
+                        })),
+                    })
+                  }}
                   onClick={() => {
                     if (isSearchActive) {
                       moveToPosting(posting)
diff --git a/src/shared/constants/routes.ts b/src/shared/constants/routes.ts
index 36753051..98bfa262 100644
--- a/src/shared/constants/routes.ts
+++ b/src/shared/constants/routes.ts
@@ -59,6 +59,7 @@ export const ROUTES = {
     PROFILE: '/my/profile',
     PROFILE_NICKNAME: '/my/profile/nickname',
     PROFILE_PASSWORD: '/my/profile/password',
+    SCRAPPED_POSTINGS: '/my/profile/scrapped',
     PROFILE_EMAIL: '/my/profile/email',
     PROFILE_SOCIAL: '/my/profile/social',
     WITHDRAW: '/my/withdraw',