diff --git a/AGENTS.md b/AGENTS.md
index 90f240c8..532af121 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -17,7 +17,7 @@
 ## 로딩 UI 원칙
 
 - 화면 전환과 데이터 조회 중에 `불러오는 중…`, `확인 중…` 같은 문장형 로딩 안내를 화면에 노출하지 않는다.
-- 최초 로딩에는 완료 후 화면과 배치·크기가 비슷한 스켈레톤을 우선 사용한다. 작은 영역에는 공통 `LoadingIndicator` 같은 간결한 로딩 표시를 사용한다.
+- 최초 로딩에는 완료 후 화면과 배치·크기가 비슷한 스켈레톤을 우선 사용한다. 작은 영역에는 공통 `Spinner`(`src/components/ui/spinner`) 같은 간결한 로딩 표시를 사용한다.
 - 제목, 진행 현황, 버튼, 목록의 자리를 미리 확보해 로딩 전후에 화면이 튀거나 다른 화면이 잠깐 끼어 보이지 않게 한다.
 - 백그라운드 재조회에서는 이미 표시된 유효한 데이터를 유지하고, 새 데이터가 준비되면 갱신한다. 재조회만으로 전체 화면을 비우거나 금액을 임시 값으로 바꾸지 않는다.
 - 로딩 상태는 `role="status"`, `aria-label`, `aria-busy`, `sr-only` 등으로 접근성 도구에 전달할 수 있다. 화면에서 문구를 숨기는 것과 접근성 안내를 제거하는 것은 구분한다.
@@ -28,7 +28,7 @@
 - 기본 흐름은 최초 조회 → 캐시 재사용 → 변경 이벤트에 따른 갱신이다. 탭 이동이나 컴포넌트 재마운트, 브라우저 포커스 복귀만으로 유효한 데이터를 무조건 재조회하지 않는다.
 - 공용 데이터는 브로드캐스트를 받아 해당 범위만 갱신한다. 이벤트가 변경 사실이나 ID만 전달하면 관련 캐시를 무효화하고 필요한 데이터를 재조회한다. 브로드캐스트 후 HTTP 조회도 이벤트 기반 갱신에 포함한다.
 - 비활성 탭에서 변경 알림을 받으면 캐시에 갱신 필요 상태를 남기고, 해당 탭 복귀 시 반영한다. 중복 이벤트와 연속 변경으로 같은 요청이 반복되지 않게 한다.
-- 본인 수정은 서버 응답으로 캐시를 반영한다. 응답만으로 상태를 확정할 수 없거나 충돌·정합성 확인이 필요한 경우에만 관련 범위를 재조회한다.
+- Tanstack Query기본 원칙에 따라 서버 상태를 Source Of Truth로 두고 제한적인 상황에서만 서버를 호출하지 않고 캐싱해서 사용한다. 
 - 준비물 같은 개인 데이터에 팀 공동 편집용 실시간 동기화를 일괄 적용하지 않는다. 정상 조회한 상태는 재사용하고, 본인 수정·명시적 새로고침·오류 복구 등 실제 갱신 사유가 있을 때 조회한다.
 - 최초 진입 또는 캐시 부재, 연결 끊김 후 브로드캐스트 누락 복구, 오류 재시도, 명시적 새로고침은 재조회 사유가 될 수 있다. 예외를 추가할 때는 구체적인 갱신 사유와 범위를 코드에 명시한다.
 - 일반 탭 이탈을 이유로 목록과 캐시를 삭제하지 않는다. 로그아웃·계정 변경·접근 권한 상실 시에는 관련 데이터를 즉시 제거하고, 여행 변경 시에는 해당 데이터의 범위와 수명 정책에 맞게 정리한다.
diff --git a/Design.md b/Design.md
index 5bc7bfc8..2fffb557 100644
--- a/Design.md
+++ b/Design.md
@@ -17,9 +17,9 @@
 예를들어서 피그마 페이지에 폰트가 17px이고 시멘틱 토큰과 css변수가 없다면 임의값을 사용한다.
 
 ### 1-3. 컴포넌트
-목표는 shadcn이다. 아직 설치 전이라 기존 공용 컴포넌트와 병행하고, 무엇을 쓸지는 [핵심 원칙 1-1](docs/code-conventions/principles.md)을 따른다.
+목표는 shadcn(Base UI)이다. 옮기는 동안 기존 공용 컴포넌트와 병행하고, 무엇을 쓸지는 [핵심 원칙 1-1](docs/code-conventions/principles.md)을 따른다.
 - 공용: `src/components/<도메인>/`(`layout`, `place`, `map`, `settings` …)
-- shadcn: 설치 후 `src/components/ui/`
+- shadcn: `src/components/ui/`
 - 특정 페이지 전용: `src/app/**/_components/`
 
 ### 1-4. Figma 디자인 시스템
@@ -35,7 +35,8 @@
 - 11 [Tabs](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5138-2632) — Tabs Line, Tabs Chip, Tab Item
 - 12 [Toast](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5285-4979) — Toast
 - 13 [Alert Dialog](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5619-553) — Alert Dialog
-- 14·15 [Chip · Badge](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5624-159) — Chip(Solid·Outline), Badge(Weak·Solid·Outline, 톤 6종)
+- 14 [Chips](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5624-159) — Chip(Solid·Outline)
+- 15 [Badges](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5864-12983) — Badge(Weak·Solid·Outline, 톤 6종)
 - [Update Log](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5635-11) — 디자인 시스템 변경 기록
 
 ---
@@ -111,7 +112,7 @@ import { MapPinIcon } from "@/assets/icons";
 
 ### 3-3. 이벤트 피드백
 - 사용자 액션에는 결과 피드백이 있어야 한다
-- alert는 toast, confirm은 `ConfirmDialog`를 쓰고 요구조건에 맞춘다(shadcn 설치 후 기준은 [핵심 원칙 1-1](docs/code-conventions/principles.md))
+- alert는 toast, confirm은 `ConfirmDialog`(ui `AlertDialog` 위)를 쓰고 요구조건에 맞춘다(shadcn 부품으로 옮기는 기준은 [핵심 원칙 1-1](docs/code-conventions/principles.md))
 - 비동기 동작 중 중복 실행 방지(핵심 원칙 2-4)
 
 
diff --git a/components.json b/components.json
new file mode 100644
index 00000000..f5b65cba
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/docs/analytics/ga4-operations.md b/docs/analytics/ga4-operations.md
index 32dd0c0c..316e365c 100644
--- a/docs/analytics/ga4-operations.md
+++ b/docs/analytics/ga4-operations.md
@@ -33,6 +33,15 @@
 
 운영자가 만드는 UTM 값에는 이름, 이메일, 전화번호, 검색어 등 개인을 식별하거나 사용자가 입력한 값을 넣지 않는다. 허용 키를 추가하려면 실제 분석 목적과 개인정보 처리방침의 수집 범위를 먼저 검토한다.
 
+## 초대 링크 캠페인 보존
+
+- 복사·기본 공유 시 외부 초대 링크에 `utm_source=member_invite`, `utm_medium=referral`, `utm_campaign=invite`를 붙인다. 플랫폼이나 초대한 개인을 구분하는 값이 아니다.
+- 링크에 기존 `utm_*`가 하나라도 있으면 빈 값·불완전한 캠페인도 그대로 두고 기본 캠페인을 채우거나 섞지 않는다.
+- 초대 진입 URL의 허용된 UTM만 초대 코드와 함께 같은 탭의 pending invite 문맥으로 보존한다. 로그인·약관 동의·오류 재시도와 인증 후 초대 복귀에 전달하고, 인증 완료의 복귀 주소를 만든 뒤 소비한다. 다른 초대가 들어오면 이전 문맥을 교체하며 인증된 초대 진입에서도 남은 문맥을 정리한다.
+- 이 저장은 초대 인증 이동의 URL 문맥이며 이벤트 큐가 아니다. 동의 전 이벤트를 저장하거나 소급 전송하지 않는다. 일반 로그인·다른 내부 탐색에는 기본 캠페인을 만들지 않는다.
+- OAuth state와 인증 토큰에 캠페인을 싣지 않는다. 원래 referrer 복원, 브라우저 간 연결, 초대 코드·초대자 ID의 분석 전송은 하지 않는다. 분석 URL 정규화와 User-ID 설정·해제는 기존 정책을 유지한다.
+- 외부 브라우저가 같은 탭 저장소를 공유한다고 가정하지 않는다. 이 코드만으로 GA 세션 귀속이나 신규 사용자 집계가 소급 변경되는 것은 보장하지 않는다. 인증 도메인 referral 제외 등 운영 설정은 별도 관리한다.
+
 ## 배포 환경 변수
 
 프로덕션에는 운영 데이터 스트림의 측정 ID만 설정한다.
diff --git a/docs/code-conventions/anti-patterns.md b/docs/code-conventions/anti-patterns.md
index 5206acc2..a04687bf 100644
--- a/docs/code-conventions/anti-patterns.md
+++ b/docs/code-conventions/anti-patterns.md
@@ -37,8 +37,8 @@
 - ✓ prop을 더하기 전에 계산 → slot → `variant` → 화면 훅 순서로 본다. `<PlaceCard variant="compact" action={<AddToScheduleButton placeId={place.id} />} />`(원칙 2-2·1-4)
 
 ### 6. 있는 부품 다시 만들기
-- 신호: 새 `fixed inset-0` 모달·바텀시트·로딩 표시, `SettingsActionButton`·`alertDialogButtonClass`가 맞는 자리에 복붙한 버튼 클래스, 새로 만든 범용 Button, `lucide-react`·새 아이콘 패키지
-- ✓ `ConfirmDialog`·`SettingsDialog`·`MobileBottomSheet`·`LoadingIndicator`를 먼저 쓴다. 버튼은 `SettingsActionButton`·`alertDialogButtonClass`가 맞으면 쓰고, 아니면 그 자리 `<button>`에 토큰 클래스로 쓴다(범용 Button은 보류). 아이콘은 `@/assets/icons`(원칙 1-1, Design.md 2장).
+- 신호: 새 `fixed inset-0` 모달·바텀시트·로딩 표시, 손으로 만든 메뉴·셀렉트·탭, `Button` 대신 복붙한 버튼 클래스, `useState`로 하나씩 든 대화상자 폼 값·오류, `lucide-react`·새 아이콘 패키지
+- ✓ `src/components/ui/`의 부품(`Button`·`Dialog`·`AlertDialog`·`Drawer`·`DropdownMenu`·`Select`·`Combobox`·`Popover`·`Tabs`·`Spinner`·`Skeleton` 등)과 확인창 `ConfirmDialog`를 먼저 쓴다. 대화상자 폼은 TanStack Form(원칙 2-9). 아이콘은 `@/assets/icons`(원칙 1-1, Design.md 2장).
 
 ### 7. 미리 만든 추상화
 - 신호: 사용처가 하나인 래퍼·옵션 객체·범용 컴포넌트, `useMount`·`useUpdateEffect` 같은 생명주기 훅, 쓰는 곳 없는 설정 레이어. 로직을 나누는 화면 훅은 사용처가 하나여도 걸리지 않는다.
@@ -87,7 +87,7 @@
 
 ### 17. 토큰 우회
 - 신호: 토큰에 있는 값을 `text-[16px] leading-6`·`rounded-[8px]`·`#333`으로 쓴다. `bg-gray-800`·`shadow-md`(Tailwind 기본값), `dark-gray`(레거시 별칭), `text-body-s`(없는 토큰 이름), 타이포 토큰에 붙인 `font-semibold`, 템플릿 리터럴 className, 조립한 클래스 이름(`` `bg-${tone}` ``)
-- ✓ `text-body-m-regular`, `rounded-md`, `text-text`, 클래스는 `cn("…", TONE_CLASS[tone], className)`(원칙 3-6).
+- ✓ `text-body-m-regular`, `rounded-md`, `text-text`, 변형은 cva로 두고 `cn(tagVariants({ tone }), className)`(원칙 3-6).
 
 ### 18. div 버튼과 지운 포커스
 - 신호: `<div onClick>`, 단순 이동을 `router.push` 버튼으로 만든다. 아이콘 버튼에 `aria-label`이 없다. placeholder만 있는 입력, `outline-none`으로 지운 포커스 표시
diff --git a/docs/code-conventions/principles.md b/docs/code-conventions/principles.md
index aebd03fe..451be718 100644
--- a/docs/code-conventions/principles.md
+++ b/docs/code-conventions/principles.md
@@ -15,38 +15,44 @@
 
 ### 1-1. 부품은 한 번 만들고 조립한다 (Headless UI)
 
-목표는 동작(포커스 가두기·키보드·aria·포털)은 shadcn(Radix) 프리미티브가, 모양은 디자인 시스템 토큰이 맡는 것이다. 둘을 합친 부품을 `src/components/ui/`에 한 번 두고 화면은 조립만 한다. shadcn은 아직 설치 전이라, 옮기는 동안 기존 공용 부품과 병행한다.
+목표는 동작(포커스 가두기·키보드·aria·포털)은 shadcn(Base UI) 프리미티브가, 모양은 디자인 시스템 토큰이 맡는 것이다. 둘을 합친 부품을 `src/components/ui/`에 한 번 두고 화면은 조립만 한다. shadcn은 `base-nova` 스타일(`components.json`)로 받는다.
 
 | 상황 | 할 일 |
 | :-- | :-- |
-| 맞는 공용 부품이 있다(`src/components/<도메인>/`의 `ConfirmDialog`·`SettingsDialog`·`MobileBottomSheet`·`LoadingIndicator`·`SettingsActionButton` 등) | 그대로 쓴다. 같은 역할의 shadcn 부품이 생기면 새로 쓰는 곳만 그쪽을 쓰고 기존 사용처는 둔다 |
-| 맞는 공용 부품이 없는 동작 부품(드롭다운·팝오버·탭·셀렉트)이 필요하다 | shadcn으로 만든다. 설치 전이면 만들기 전에 도입할지 묻는다. 미루면 공용 셸에서 동작 처리(portal·포커스 가두기·Escape·aria)만 가져오고, 클래스·토큰·아이콘은 3-6과 Design.md를 따른다 |
+| 맞는 부품이 있다(`src/components/ui/`의 `Button`·`Dialog`·`AlertDialog`·`Drawer`(바텀시트)·`ResponsiveDialog`(PC는 대화상자, 모바일 기기는 바텀시트)·`DropdownMenu`·`Select`·`Combobox`·`Popover`·`Tabs`·`Field`·`Input` 등, 확인창은 `ConfirmDialog`) | 그대로 쓴다. 같은 역할의 shadcn 부품이 생기면 새로 쓰는 곳은 그쪽을 쓰고, 기존 사용처는 아래 4행대로 따로 옮긴다 |
+| 맞는 부품이 없는 동작 부품이 필요하다 | shadcn으로 만든다. `src/components/ui/`에 아직 없는 부품이면 받기 전에 묻는다(새 파일·의존성이 생긴다). 클래스·토큰·아이콘은 3-6과 Design.md를 따른다 |
 | 동작 없는 표시 부품이 필요하다 | Tailwind로 만든다 |
 | 기존 공용 부품이나 그 사용처를 shadcn으로 바꾼다 | 기능·버그 작업에 섞지 않고 따로 한다 |
 
-- 변형은 `variant`·`size` 같은 유니온 prop으로 받고, 값은 Figma 컴포넌트 속성 값에 맞춘다.
+- 변형은 `variant`·`size` 같은 유니온 prop으로 받고, 값은 Figma 컴포넌트 속성 값에 맞춘다. 변형별 클래스는 cva로 정의한다(3-6).
 - 화면은 부품의 색·글자를 덮지 않는다. 바깥에서 주는 `className`은 배치(폭·정렬·위치)에만 쓴다.
-- 공용 Button은 사이즈 기획이 끝나지 않아 보류 중이다. 범용 Button 부품을 새로 만들지 않는다.
+- 버튼은 `ui/button`의 `Button`(Figma Button: `variant` solid·weak·outline × `tone` neutral·brand·critical × `size` lg 56·md 48·sm 36·xs 32)을 쓴다. 대화상자 버튼은 취소 `variant="weak"`, 확인 기본(Neutral Solid), 삭제·탈퇴 같은 위험 동작 `tone="critical"`이다. 처리 중은 문구 대신 `loading`(progress)으로 보이고 `loadingLabel`로 읽힌다.
 - shadcn 코드를 받으면 디자인 시스템에 맞춘다.
   - 색·그림자·포커스 클래스(`secondary`·`*-foreground`·`muted`·`accent`·`input`·`ring`·`shadow-*`)는 시맨틱 토큰으로 바꾼다. 이름이 같아도 뜻이 다르고(`secondary`는 라임), 없는 이름은 CSS가 생기지 않는다.
-  - 설치 때 shadcn이 `globals.css`에 넣는 색 변수(`:root`·`@theme inline`)는 받지 않는다. 기존 `primary`·`border`·`background` 토큰을 앱 전체에서 덮는다.
-  - 아이콘은 `lucide-react` 대신 `@/assets/icons`, `cn`은 `@/lib/utils`의 것을 쓴다.
-  - z값은 같은 역할의 공용 셸(대화상자 `SettingsDialog`, 시트 `MobileBottomSheet`)에 맞추고, 그 안에서 여는 팝오버·셀렉트는 셸보다 위에 둔다.
+  - `shadcn init`은 하지 않고 `add`로만 받는다. init이 `globals.css`에 넣는 색 변수(`:root`·`@theme inline`)는 기존 `primary`·`border`·`background` 토큰을 앱 전체에서 덮는다.
+  - 아이콘은 `lucide-react` 대신 `@/assets/icons`, `cn`은 `@/lib/utils`의 것을 쓴다. 받은 코드의 `import { cn } from "cn"`은 CLI가 바꾸지 않는다. `cn` 패키지는 타이포 토큰을 색으로 보고 지운다.
+  - `dark:` 클래스는 지운다. 다크 모드 설정이 없어 OS가 다크 모드면 적용된다.
+  - Base UI 팝업(대화상자·시트·메뉴·셀렉트·팝오버)은 모두 z-50이다. 앱은 `isolate`로 묶여 있어(`app-chrome-shell`) body로 포털되는 팝업이 앱의 z와 섞이지 않고, 같은 z라 나중에 연 팝업(대화상자 안 셀렉트·확인창)이 위에 뜬다. 앱 안에서 z를 키워 팝업 위로 올리지 않는다.
 
 ```tsx
 // ✗ 화면마다 모달을 직접 만든다. 포커스 가두기·ESC·aria가 빠지고 z값이 제각각이 된다
 <div className="fixed inset-0 z-[999] bg-black/50" onClick={close}>…</div>
 
-// ✓ 지금: 공용 셸을 쓴다(포커스 가두기·ESC·aria 포함)
-{isInviteOpen && <SettingsDialog title="초대" onClose={closeInvite}>…</SettingsDialog>}
-
-// ✓ shadcn 설치 후: 동작은 shadcn, 모양은 토큰을 입힌 ui 부품
-<Dialog>
-  <DialogTrigger asChild><button type="button" className="…">초대</button></DialogTrigger>
-  <DialogContent>…</DialogContent>
+// ✓ 동작은 Base UI, 모양은 토큰을 입힌 ui 부품. 저장 중에는 closeDisabled로 Esc·딤·X를 막는다
+<Dialog open={isInviteOpen} onOpenChange={setIsInviteOpen} closeDisabled={isSending}>
+  <DialogContent>
+    <DialogHeader><DialogTitle>초대</DialogTitle></DialogHeader>
+    …
+    <DialogFooter>
+      <DialogClose render={<Button variant="weak" />}>취소</DialogClose>
+      <Button loading={isSending} loadingLabel="보내는 중" onClick={send}>보내기</Button>
+    </DialogFooter>
+  </DialogContent>
 </Dialog>
 ```
 
+- Base UI 부품은 기본 요소(Trigger는 `<button type="button">`)를 그린다. 다른 요소로 그려야 하면 `asChild` 대신 `render` prop을 쓴다.
+
 ### 1-2. 로직은 화면 훅, 그리기는 컴포넌트 (Custom Hook · Container / Presentational)
 
 로직과 그리기를 나눈다. 컴포넌트를 열면 무엇을 그리는지만, 화면 훅을 열면 무엇을 하는지만 보이게 해서 한쪽을 바꿀 때 다른 쪽을 건드리지 않게 한다.
@@ -137,7 +143,7 @@ function PlaceRow({ place }: { place: Place }) {
 
 boolean prop은 하나 늘 때마다 가능한 조합이 두 배가 되고, 그중 일부는 있을 수 없는 상태다. 변형은 이름 있는 값이나 합성으로 드러낸다.
 
-- 구조·동작을 바꾸는 boolean prop 대신 children·slot이나 변형별 컴포넌트를 쓴다. 표시 변형은 boolean 여럿 대신 유니온 prop(`variant`·`size`)으로 받는다(`MobileBottomSheet`의 `variant: "menu" | "form"`).
+- 구조·동작을 바꾸는 boolean prop 대신 children·slot이나 변형별 컴포넌트를 쓴다. 표시 변형은 boolean 여럿 대신 유니온 prop(`variant`·`size`)으로 받는다(`Badge`의 `variant: "weak" | "solid" | "outline"`·`tone`).
 - renderX prop 대신 children으로 넘긴다.
 - 쿼리 상태를 `isPending`·`isError` prop으로 쪼개 넘기지 않는다. 분기는 컨테이너에서 끝낸다(1-2).
 
@@ -295,7 +301,7 @@ kick({ roomId, userId }, { onError: () => toast.error("내보내지 못했어요
 | 임시 결과 | `data` + `isPlaceholderData` | 이전 결과 유지. 확정 결과가 필요한 동작만 막는다 |
 | 최초 실패 | `error` | 그 영역의 오류 안내 + 재시도 |
 | 조회 안 함 | `fetchStatus === "idle"`(`enabled: false`) | 곧 채워질 조건(STOMP 연결 등)을 기다리면 스켈레톤. 채워지지 않을 조건(방 미선택)이면 그 이유에 맞는 자리 |
-| 최초 로딩 | 그 밖 | 완료 화면과 같은 배치의 스켈레톤. 작은 영역은 `LoadingIndicator` |
+| 최초 로딩 | 그 밖 | 완료 화면과 같은 배치의 스켈레톤. 작은 영역은 `Spinner` |
 
 - `isPending`·`isLoading` 하나로 로딩을 판정하지 않는다. `enabled: false`면 `isPending`이 계속 true이고, `isLoading`은 오프라인으로 멈춘 첫 조회(`fetchStatus === "paused"`)를 놓친다.
 - 조회가 여럿이면 영역마다 따로 분기한다. 로딩을 합쳐(`a.isLoading || b.isLoading`) 화면 전체를 바꾸지 않는다.
@@ -421,6 +427,33 @@ const sorted = data.places.sort(byOrder);
 const sorted = [...data.places].sort(byOrder);
 ```
 
+### 2-9. 폼은 TanStack Form, 검증은 칸마다 (Forms)
+
+입력 값·검증·제출 상태를 `useState`로 하나씩 들면 오류가 폼 아래 문장 하나로 뭉치고, 어느 칸이 틀렸는지 화면이 모른다. 대화상자·시트 안의 폼은 `@tanstack/react-form`으로 쓴다.
+
+- 값은 `useForm({ defaultValues })`가 갖고, 칸은 `form.Field`로 그린다. 검증은 칸마다 `validators`에 함수로 둔다(zod는 아직 쓰지 않는다 — 나중에 같은 자리에 스키마를 넣는다). 검증 함수는 `src/lib`의 순수 함수를 부른다.
+- 칸 오류는 그 칸에 `aria-invalid`와 `FieldError`로 그린다. Select처럼 Figma에 오류 상태가 없는 칸도 Text Field 오류 모양을 쓴다. 권한·저장 실패·충돌처럼 칸이 없는 오류는 폼 아래 문장으로 둔다.
+- 제출은 `form.handleSubmit()` → `onSubmit`에서 mutation의 `mutateAsync`. 버튼 `loading`과 대화상자 `closeDisabled`는 그 mutation의 `isPending` 하나로 정한다(2-4).
+
+```tsx
+const form = useForm({
+  defaultValues: { budget: initial.budgetKrw ?? "" },
+  onSubmit: ({ value }) => saveBudget.mutateAsync({ budgetKrw: value.budget }),
+});
+
+<form.Field name="budget" validators={{ onSubmit: ({ value }) => budgetError(value) }}>
+  {(field) => (
+    <Field>
+      <FieldLabel htmlFor={field.name}>예산 (KRW)</FieldLabel>
+      <Input id={field.name} value={field.state.value} onChange={(e) => field.handleChange(e.target.value)}
+        aria-invalid={field.state.meta.errors.length > 0} />
+      <FieldError>{field.state.meta.errors[0]}</FieldError>
+    </Field>
+  )}
+</form.Field>
+<Button type="submit" loading={saveBudget.isPending} loadingLabel="저장 중">저장</Button>
+```
+
 ## 3. 퍼블리싱
 
 ### 3-1. Auto Layout을 그대로 옮긴다 (Layout First)
@@ -534,7 +567,7 @@ z-index는 같은 스태킹 컨텍스트 안에서만 비교된다. 그래서 
 - 타이포는 토큰 하나로 쓴다. display·heading·title은 `text-<역할>-<크기>`(`text-title-m`), body·label·caption은 굵기까지 붙인다(`text-body-s-regular`). `text-body-s`처럼 없는 이름은 CSS가 생기지 않는다.
 - 타이포 토큰에 `font-*`·`leading-*`·`tracking-*`·`/N`을 덧붙이지 않는다(토큰 값을 덮거나 굵기·자간이 빠진다). 맞는 토큰이 없으면 Figma 값대로 크기·줄 높이·굵기를 함께 임의값으로 쓰고(`text-[17px]/[24px] font-semibold`) 근거 주석을 단다(Design.md 1-2).
 - radius는 재정의된 토큰을 쓴다(`rounded-md` = 8px, Tailwind 기본과 다르다). 그림자 토큰은 아직 없다. `shadow-sm` 같은 Tailwind 기본값 대신 Figma 값을 임의값과 근거 주석으로 쓴다. 같은 임의값이 반복되면 토큰 추가를 요청한다.
-- 클래스는 `cn()`으로만 합친다. 템플릿 리터럴은 겹친 클래스(`px-2`와 바깥 `px-4`)를 정리하지 못하고, 조립한 이름(`` `bg-${tone}` ``)은 Tailwind가 소스에서 찾지 못한다. 변형은 `as const` 클래스 맵에 모은다.
+- 클래스는 `cn()`으로만 합친다. 템플릿 리터럴은 겹친 클래스(`px-2`와 바깥 `px-4`)를 정리하지 못하고, 조립한 이름(`` `bg-${tone}` ``)은 Tailwind가 소스에서 찾지 못한다. 변형은 cva(`class-variance-authority`)로 모은다.
 - 상태 스타일은 aria 속성을 variant로 읽는다(`aria-expanded:bg-fill`, `aria-current="page"`는 `aria-[current=page]:`). aria가 없는 상태만 `data-*`로 둔다. 여러 하위가 함께 따르는 루트 상태(채팅 최소화·밀도)는 하위마다 prop으로 내리지 않고, 루트의 `data-minimized`를 하위가 `group-data-minimized/chat:`처럼 읽는다.
 - 전역 요소 스타일은 `@layer base`에 둔다. 레이어 밖 CSS는 모든 유틸리티를 이긴다.
 
@@ -542,12 +575,17 @@ z-index는 같은 스태킹 컨텍스트 안에서만 비교된다. 그래서 
 // ✗ 문자열 결합과 조립한 클래스 이름
 <span className={`rounded-full px-2 ${className} bg-${tone}`}>{label}</span>
 
-// ✓ 완성된 클래스 맵과 cn
-const TONE_CLASS = {
-  neutral: "bg-fill text-text",
-  brand: "bg-primary-subtle text-primary",
-} as const;
-<span className={cn("rounded-full px-2", TONE_CLASS[tone], className)}>{label}</span>
+// ✓ 변형은 cva, 합치기는 cn
+const tagVariants = cva("rounded-full px-2", {
+  variants: {
+    tone: {
+      neutral: "bg-fill text-text",
+      brand: "bg-primary-subtle text-primary",
+    },
+  },
+  defaultVariants: { tone: "neutral" },
+});
+<span className={cn(tagVariants({ tone }), className)}>{label}</span>
 ```
 
 ### 3-7. 시맨틱 마크업과 접근성 (Semantic HTML)
@@ -575,7 +613,7 @@ const TONE_CLASS = {
 | 원칙 | 출처 |
 | :-- | :-- |
 | 0 | React [Thinking in React](https://react.dev/learn/thinking-in-react)·[Keeping Components Pure](https://react.dev/learn/keeping-components-pure), Josh Comeau [Understanding Layout Algorithms](https://www.joshwcomeau.com/css/understanding-layout-algorithms/) |
-| 1-1 | [shadcn/ui](https://ui.shadcn.com/docs) |
+| 1-1 | [shadcn/ui](https://ui.shadcn.com/docs), [Base UI](https://base-ui.com/react/overview/quick-start) |
 | 1-3 | React [Thinking in React](https://react.dev/learn/thinking-in-react), Matt Pocock [codebase-design](https://github.com/mattpocock/skills)(삭제 테스트) |
 | 1-4 | Vercel [composition-patterns](https://github.com/vercel-labs/agent-skills/tree/main/skills/composition-patterns) `architecture-avoid-boolean-props`·`patterns-explicit-variants`·`patterns-children-over-render-props` |
 | 2-1 | React [Choosing the State Structure](https://react.dev/learn/choosing-the-state-structure), Vercel [react-best-practices](https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices) `rerender-derived-state-no-effect` |
@@ -590,4 +628,4 @@ const TONE_CLASS = {
 | 3-2 | Josh Comeau [The Height Enigma](https://www.joshwcomeau.com/css/height-enigma/), [Defensive CSS](https://defensivecss.dev/), web.dev [Viewport units](https://web.dev/blog/viewport-units) |
 | 3-3 | Josh Comeau [The Surprising Truth About Pixels and Accessibility](https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/) |
 | 3-5 | Josh Comeau [What The Heck, z-index??](https://www.joshwcomeau.com/css/stacking-contexts/) |
-| 3-6 | Tailwind [Detecting classes in source files](https://tailwindcss.com/docs/detecting-classes-in-source-files) |
+| 3-6 | Tailwind [Detecting classes in source files](https://tailwindcss.com/docs/detecting-classes-in-source-files), [cva](https://cva.style/docs) |
diff --git a/package-lock.json b/package-lock.json
index 675fe989..bb66e5a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,15 @@
       "version": "0.1.0",
       "dependencies": {
         "@amplitude/unified": "^1.1.28",
+        "@base-ui/react": "^1.9.0",
         "@ncdai/react-wheel-picker": "^1.2.3",
         "@next/third-parties": "^16.2.1",
         "@stomp/stompjs": "^7.3.0",
+        "@tanstack/react-form": "^1.33.5",
         "@tanstack/react-query": "^5.95.2",
         "@tanstack/react-query-devtools": "^5.95.2",
         "@vis.gl/react-google-maps": "^1.8.2",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^12.38.0",
         "lucide-react": "^1.7.0",
@@ -2166,6 +2169,12 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-8.0.8.tgz",
+      "integrity": "sha512-dEu8nGlRqjsJsvviUUoSMfcRHpwomCiRlXsc2mPfJ79+ffTpDm+JtfUtTMzUrqCApHQnCsVPD3gT1ZT8RgBRCQ==",
+      "license": "MIT"
+    },
     "node_modules/@babel/template": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
@@ -2214,6 +2223,66 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@base-ui/react": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.9.0.tgz",
+      "integrity": "sha512-S8CSYosASBKtpL8SWUfS78rFElfLijiCgA7oHOK22jCJ95FULsYyKwBNFOgudt0RA+/7yNc7F81bOvQnRgbBiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7 || ^8.0.0",
+        "@base-ui/utils": "0.5.0",
+        "@floating-ui/react-dom": "^2.1.9",
+        "@floating-ui/utils": "^0.2.12",
+        "use-sync-external-store": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@date-fns/tz": "^1.2.0",
+        "@types/react": "^17 || ^18 || ^19",
+        "date-fns": "^4.0.0",
+        "react": "^17 || ^18 || ^19",
+        "react-dom": "^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@date-fns/tz": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@base-ui/utils": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.5.0.tgz",
+      "integrity": "sha512-dYGGcEttjkYiMoa5nHm8vLaJ2UcuTWxo3BFAwOYXeRg/q7UVVvA6cacEIXEs3FgBfK1CGtW1ptElqs7wsx+t9A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7 || ^8.0.0",
+        "@floating-ui/utils": "^0.2.12",
+        "reselect": "^5.3.0",
+        "use-sync-external-store": "^1.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17 || ^18 || ^19",
+        "react": "^17 || ^18 || ^19",
+        "react-dom": "^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@bramus/specificity": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
@@ -2562,6 +2631,44 @@
         }
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.9.tgz",
+      "integrity": "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.8.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+      "license": "MIT"
+    },
     "node_modules/@googlemaps/js-api-loader": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-2.0.2.tgz",
@@ -4442,6 +4549,50 @@
         "tailwindcss": "4.2.2"
       }
     },
+    "node_modules/@tanstack/devtools-event-client": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/devtools-event-client/-/devtools-event-client-0.4.4.tgz",
+      "integrity": "sha512-6T5Yop/793YI+H+5J8Hsyj4kCih9sl4t3ElLgKioW5hk3ocn+ZdSJ94tT7vL7uabxSugWYBZlOTMPzEw2puvQw==",
+      "license": "MIT",
+      "bin": {
+        "intent": "bin/intent.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/form-core": {
+      "version": "1.33.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/form-core/-/form-core-1.33.5.tgz",
+      "integrity": "sha512-3dfx9MBP0aq5sXKteikG629X9oviptrQj0IFRk9YGcb+lB7Kv5x8S17oOSk1wUWgjQZ4xVJEMbKwOAODymocgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/devtools-event-client": "^0.4.1",
+        "@tanstack/pacer-lite": "^0.1.1",
+        "@tanstack/store": "^0.11.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/pacer-lite": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/pacer-lite/-/pacer-lite-0.1.1.tgz",
+      "integrity": "sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.100.9",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.9.tgz",
@@ -4462,6 +4613,46 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/react-form": {
+      "version": "1.33.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-form/-/react-form-1.33.5.tgz",
+      "integrity": "sha512-LlRB28qJwO/QCGaHvWnbdh4haBgTFiZVmzA2uzxSBS3YA7/IqrQ6HOBK70CkFQ+DbflZ7NawsmSln13h5iIdTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/form-core": "1.33.5",
+        "@tanstack/react-store": "^0.11.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@tanstack/react-start": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/react-form/node_modules/@tanstack/react-store": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.11.2.tgz",
+      "integrity": "sha512-oj5O5DmiMWE+ih+SioX2ayC1kbK7d3fpLx0B75fPJr9nY3zU+hoW010yr64qXsY/9fyiLVE2bn5mGNV3owm8RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/store": "0.11.2",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@tanstack/react-query": {
       "version": "5.100.9",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.100.9.tgz",
@@ -4495,6 +4686,16 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/store": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.11.2.tgz",
+      "integrity": "sha512-sJ4mjol8uQsHV0gOJzzjwXfh2Fwm+Sz0+8deqiTm4jGbMdjzNSW+xZCFm0kUa870uhd8yi+DpKnZb5Kc4apa0Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -6001,6 +6202,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -11359,6 +11572,12 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.3.0.tgz",
+      "integrity": "sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -12833,6 +13052,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz",
+      "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
diff --git a/package.json b/package.json
index 9432c968..6dd9c67d 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,15 @@
   },
   "dependencies": {
     "@amplitude/unified": "^1.1.28",
+    "@base-ui/react": "^1.9.0",
     "@ncdai/react-wheel-picker": "^1.2.3",
     "@next/third-parties": "^16.2.1",
     "@stomp/stompjs": "^7.3.0",
+    "@tanstack/react-form": "^1.33.5",
     "@tanstack/react-query": "^5.95.2",
     "@tanstack/react-query-devtools": "^5.95.2",
     "@vis.gl/react-google-maps": "^1.8.2",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.7.0",
diff --git a/public/expenses/checkbox-checked.svg b/public/expenses/checkbox-checked.svg
deleted file mode 100644
index 968b0219..00000000
--- a/public/expenses/checkbox-checked.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="checkbox" clip-path="url(#clip0_0_544)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="#0183FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_3" d="M9 12L11 14L15 10" stroke="#0183FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_0_544">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/expenses/checkbox.svg b/public/expenses/checkbox.svg
deleted file mode 100644
index f38c06a5..00000000
--- a/public/expenses/checkbox.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="checkbox" clip-path="url(#clip0_0_551)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="#D9DBE2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_0_551">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/icons/packing/checkbox-checked.svg b/public/icons/packing/checkbox-checked.svg
deleted file mode 100644
index 8fead7fd..00000000
--- a/public/icons/packing/checkbox-checked.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="checkbox" clip-path="url(#clip0_0_56)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="#0183FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_3" d="M9 12L11 14L15 10" stroke="#0183FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_0_56">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/icons/packing/checkbox.svg b/public/icons/packing/checkbox.svg
deleted file mode 100644
index 1effd532..00000000
--- a/public/icons/packing/checkbox.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="checkbox" clip-path="url(#clip0_0_71)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="#D9DBE2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_0_71">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/icons/time-picker/reset-active.svg b/public/icons/time-picker/reset-active.svg
new file mode 100644
index 00000000..dd5b85c2
--- /dev/null
+++ b/public/icons/time-picker/reset-active.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="rotate">
+<path id="Vector" d="M13.3 7.33333C13.1314 6.04716 12.4999 4.86652 11.5235 4.01241C10.5472 3.15831 9.29312 2.6893 7.99596 2.69318C6.69879 2.69706 5.44749 3.17356 4.47631 4.03349C3.50514 4.89341 2.88065 6.07781 2.71975 7.36497C2.55886 8.65213 2.87259 9.9538 3.60221 11.0263C4.33183 12.0989 5.42733 12.8687 6.68363 13.1918C7.93993 13.5148 9.27091 13.369 10.4274 12.7815C11.5839 12.194 12.4867 11.2051 12.9667 10M12.9667 10H13.3V13.3333M12.9667 10H9.96667" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke="#8B92A8"/>
+</g>
+</svg>
diff --git a/public/icons/time-picker/reset-disabled.svg b/public/icons/time-picker/reset-disabled.svg
new file mode 100644
index 00000000..8578f015
--- /dev/null
+++ b/public/icons/time-picker/reset-disabled.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="rotate">
+<path id="Vector" d="M13.3 7.33333C13.1314 6.04716 12.4999 4.86652 11.5235 4.01241C10.5472 3.15831 9.29312 2.6893 7.99596 2.69318C6.69879 2.69706 5.44749 3.17356 4.47631 4.03349C3.50514 4.89341 2.88065 6.07781 2.71975 7.36497C2.55886 8.65213 2.87259 9.9538 3.60221 11.0263C4.33183 12.0989 5.42733 12.8687 6.68363 13.1918C7.93993 13.5148 9.27091 13.369 10.4274 12.7815C11.5839 12.194 12.4867 11.2051 12.9667 10M12.9667 10H13.3V13.3333M12.9667 10H9.96667" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke="#C4C7D2"/>
+</g>
+</svg>
diff --git a/public/map-search/attraction.svg b/public/map-search/attraction.svg
deleted file mode 100644
index 30038055..00000000
--- a/public/map-search/attraction.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon">
-<path id="Vector" d="M2.33333 11.6667C6.11133 14.778 9.88867 14.778 13.6667 11.6667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_2" d="M12.6667 12.3333L11.3333 6.66667L12 5.33333L13.3333 6L14.3333 5L12.6667 2C9.29867 2.14533 8.67333 4.08867 8 6H4C3.46957 6 2.96086 6.21071 2.58579 6.58579C2.21071 6.96086 2 7.46957 2 8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_3" d="M3.33333 12.3333L4.66667 6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_4" d="M5.33333 13.3333L6.66667 10H9.33333L10.6667 13.3333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-</g>
-</svg>
diff --git a/public/map-search/clear.svg b/public/map-search/clear.svg
deleted file mode 100644
index 129f6879..00000000
--- a/public/map-search/clear.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="close">
-<path id="Vector" d="M15 5L5 15" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke="#8B92A8"/>
-<path id="Vector_2" d="M5 5L15 15" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke="#8B92A8"/>
-</g>
-</svg>
diff --git a/public/map-search/hotel.svg b/public/map-search/hotel.svg
deleted file mode 100644
index e3fad22b..00000000
--- a/public/map-search/hotel.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon" clip-path="url(#clip0_0_179)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M2.66667 7.33333C3.02029 7.33333 3.35943 7.47381 3.60948 7.72386C3.85952 7.97391 4 8.31304 4 8.66667V9.33333H12V8.66667C12 8.31304 12.1405 7.97391 12.3905 7.72386C12.6406 7.47381 12.9797 7.33333 13.3333 7.33333C13.687 7.33333 14.0261 7.47381 14.2761 7.72386C14.5262 7.97391 14.6667 8.31304 14.6667 8.66667V12C14.6667 12.1768 14.5964 12.3464 14.4714 12.4714C14.3464 12.5964 14.1768 12.6667 14 12.6667H2C1.82319 12.6667 1.65362 12.5964 1.5286 12.4714C1.40357 12.3464 1.33333 12.1768 1.33333 12V8.66667C1.33333 8.31304 1.47381 7.97391 1.72386 7.72386C1.97391 7.47381 2.31304 7.33333 2.66667 7.33333Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_3" d="M2.66667 7.33333V5.33333C2.66667 4.8029 2.87738 4.29419 3.25245 3.91912C3.62753 3.54405 4.13623 3.33333 4.66667 3.33333H11.3333C11.8638 3.33333 12.3725 3.54405 12.7475 3.91912C13.1226 4.29419 13.3333 4.8029 13.3333 5.33333V7.33333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_4" d="M8 3.33333V9.33333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-</g>
-<defs>
-<clipPath id="clip0_0_179">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/map-search/museum.svg b/public/map-search/museum.svg
deleted file mode 100644
index 50eb214f..00000000
--- a/public/map-search/museum.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon" clip-path="url(#clip0_0_194)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M2 14H14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_3" d="M2 6.66667H14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_4" d="M3.33333 4L8 2L12.6667 4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_5" d="M2.66667 6.66667V14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_6" d="M13.3333 6.66667V14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_7" d="M5.33333 9.33333V11.3333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_8" d="M8 9.33333V11.3333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_9" d="M10.6667 9.33333V11.3333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-</g>
-<defs>
-<clipPath id="clip0_0_194">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/map-search/reset.svg b/public/map-search/reset.svg
deleted file mode 100644
index f0c45e54..00000000
--- a/public/map-search/reset.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon">
-<path id="Vector" d="M12 4L4 12" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#16181D"/>
-<path id="Vector_2" d="M4 4L12 12" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#3B3F4E"/>
-</g>
-</svg>
diff --git a/public/map-search/restaurant.svg b/public/map-search/restaurant.svg
deleted file mode 100644
index 09b7a658..00000000
--- a/public/map-search/restaurant.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon" clip-path="url(#clip0_0_169)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M4.83919 2.33333V7.90839M4.83919 7.90839V13.6667M4.83919 7.90839C4.57655 7.90839 4.31648 7.85665 4.07383 7.75614C3.83117 7.65564 3.6107 7.50832 3.42498 7.3226C3.23926 7.13688 3.09194 6.9164 2.99143 6.67375C2.89092 6.4311 2.83919 6.17103 2.83919 5.90839V2.33333M4.83919 7.90839C5.10184 7.90839 5.36191 7.85665 5.60456 7.75614C5.84721 7.65564 6.06769 7.50832 6.25341 7.3226C6.43912 7.13688 6.58644 6.9164 6.68695 6.67375C6.78746 6.4311 6.83919 6.17103 6.83919 5.90839V2.33333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_3" d="M9.16081 5C9.16081 5.70724 9.37152 6.38552 9.74659 6.88562C10.1217 7.38572 10.6304 7.66667 11.1608 7.66667C11.6912 7.66667 12.1999 7.38572 12.575 6.88562C12.9501 6.38552 13.1608 5.70724 13.1608 5C13.1608 4.29276 12.9501 3.61448 12.575 3.11438C12.1999 2.61428 11.6912 2.33333 11.1608 2.33333C10.6304 2.33333 10.1217 2.61428 9.74659 3.11438C9.37152 3.61448 9.16081 4.29276 9.16081 5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_4" d="M11.1608 7.66667V13.6667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-</g>
-<defs>
-<clipPath id="clip0_0_169">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/map-search/transit.svg b/public/map-search/transit.svg
deleted file mode 100644
index 721fffd2..00000000
--- a/public/map-search/transit.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon">
-<path id="Vector" d="M14 8.66667C14 6.08667 11.7533 4 7.33333 4H2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_2" d="M2 10H12.6667C13.0203 10 13.3594 9.85952 13.6095 9.60948C13.8595 9.35943 14 9.02029 14 8.66667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_3" d="M2 4V7.33333H13.6667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_4" d="M2 7.33333V10" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_5" d="M5.33333 7.33333V4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_6" d="M8.66667 7.33333V4.33333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_7" d="M2 12.6667H14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-</g>
-</svg>
diff --git a/public/rooms/banners/feedback/burger.webp b/public/rooms/banners/feedback/burger.webp
deleted file mode 100644
index e902b75f..00000000
Binary files a/public/rooms/banners/feedback/burger.webp and /dev/null differ
diff --git a/public/rooms/banners/feedback/desktop.png b/public/rooms/banners/feedback/desktop.png
deleted file mode 100644
index be860d91..00000000
Binary files a/public/rooms/banners/feedback/desktop.png and /dev/null differ
diff --git a/public/rooms/banners/feedback/mobile.png b/public/rooms/banners/feedback/mobile.png
deleted file mode 100644
index b68e36e5..00000000
Binary files a/public/rooms/banners/feedback/mobile.png and /dev/null differ
diff --git a/public/rooms/banners/feedback/review-icon.webp b/public/rooms/banners/feedback/review-icon.webp
new file mode 100644
index 00000000..ab4dafdd
Binary files /dev/null and b/public/rooms/banners/feedback/review-icon.webp differ
diff --git a/public/rooms/figma/README.md b/public/rooms/figma/README.md
index 0973baab..c707ae0d 100644
--- a/public/rooms/figma/README.md
+++ b/public/rooms/figma/README.md
@@ -4,12 +4,11 @@
 - 모바일: https://www.figma.com/design/3JnrQOfRePmycccIBfiPnZ?node-id=3314-5275
 - 추출일: 2026-09-20
 - `trip-cover.png`: Figma 원본 카드 사진. 현재 방 목록에서는 `public/rooms/covers/`의 사진 9장 중 방 ID로 선택한 이미지를 사용한다.
-- `menu.svg`, `plus.svg`: Figma에서 내려받은 원본 아이콘.
+- `plus.svg`: Figma에서 내려받은 원본 아이콘.
 - `plus-mobile.svg`: 모바일 생성 버튼의 20px 원본 아이콘.
-- `user.svg`, `logout.svg`: 프로필 오버레이 원본 아이콘 (`3456:5418`).
-- `invite.svg`, `trash.svg`: 방 더보기 오버레이 원본 아이콘 (`3449:3613`).
+- `invite.svg`: 방 더보기 오버레이 원본 아이콘 (`3449:3613`). 더보기 버튼·프로필 메뉴·삭제 아이콘은 디자인 시스템 아이콘(`@/assets/icons`)을 쓴다.
 
-광고 배너 영역에는 [마케팅 시안](https://www.figma.com/design/asf1pKmEosGS4xUx1qn3MV/%EB%A7%88%EC%BC%80%ED%8C%85?node-id=0-1)의 데스크톱·모바일 완성 배너 이미지를 각각 그대로 사용한다. 에셋은 만료되는 Figma 다운로드 URL 대신 로컬 파일을 참조한다.
+광고 배너 영역은 [마케팅 시안 · 피드백 배너 광고](https://www.figma.com/design/asf1pKmEosGS4xUx1qn3MV/%EB%A7%88%EC%BC%80%ED%8C%85?node-id=141-13)의 데스크톱·모바일 배너를 따른다. 문구는 코드의 텍스트로 그리고, 사진만 `public/rooms/banners/feedback/`의 로컬 파일(`app-preview.webp`·`review-icon.webp`)을 참조한다.
 
 ## 상태별 기준 프레임
 
diff --git a/public/rooms/figma/logout.svg b/public/rooms/figma/logout.svg
deleted file mode 100644
index 9cd3e7c2..00000000
--- a/public/rooms/figma/logout.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="sign">
-<path id="Vector" d="M6.66667 6.66667V5C6.66667 4.55797 6.84226 4.13405 7.15482 3.82149C7.46738 3.50893 7.89131 3.33333 8.33333 3.33333H14.1667C14.6087 3.33333 15.0326 3.50893 15.3452 3.82149C15.6577 4.13405 15.8333 4.55797 15.8333 5V15C15.8333 15.442 15.6577 15.8659 15.3452 16.1785C15.0326 16.4911 14.6087 16.6667 14.1667 16.6667H8.33333C7.89131 16.6667 7.46738 16.4911 7.15482 16.1785C6.84226 15.8659 6.66667 15.442 6.66667 15V13.3333" stroke="#3B3F4E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_2" d="M2.5 10H12.5L10 7.5" stroke="#3B3F4E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_3" d="M10 12.5L12.5 10" stroke="#3B3F4E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>
diff --git a/public/rooms/figma/menu.svg b/public/rooms/figma/menu.svg
deleted file mode 100644
index c1918c70..00000000
--- a/public/rooms/figma/menu.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="menu">
-<path id="Vector" d="M11 12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13C12.2652 13 12.5196 12.8946 12.7071 12.7071C12.8946 12.5196 13 12.2652 13 12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12Z" stroke="#8B92A8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_2" d="M11 19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20C12.2652 20 12.5196 19.8946 12.7071 19.7071C12.8946 19.5196 13 19.2652 13 19C13 18.7348 12.8946 18.4804 12.7071 18.2929C12.5196 18.1054 12.2652 18 12 18C11.7348 18 11.4804 18.1054 11.2929 18.2929C11.1054 18.4804 11 18.7348 11 19Z" stroke="#8B92A8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_3" d="M11 5C11 5.26522 11.1054 5.51957 11.2929 5.70711C11.4804 5.89464 11.7348 6 12 6C12.2652 6 12.5196 5.89464 12.7071 5.70711C12.8946 5.51957 13 5.26522 13 5C13 4.73478 12.8946 4.48043 12.7071 4.29289C12.5196 4.10536 12.2652 4 12 4C11.7348 4 11.4804 4.10536 11.2929 4.29289C11.1054 4.48043 11 4.73478 11 5Z" stroke="#8B92A8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>
diff --git a/public/rooms/figma/trash.svg b/public/rooms/figma/trash.svg
deleted file mode 100644
index b0dc1c9c..00000000
--- a/public/rooms/figma/trash.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="trash">
-<path id="Vector" d="M3.33333 5.83333H16.6667" stroke="#FF2035" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_2" d="M8.33333 9.16667V14.1667" stroke="#FF2035" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_3" d="M11.6667 9.16667V14.1667" stroke="#FF2035" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_4" d="M4.16667 5.83333L5 15.8333C5 16.2754 5.17559 16.6993 5.48816 17.0118C5.80072 17.3244 6.22464 17.5 6.66667 17.5H13.3333C13.7754 17.5 14.1993 17.3244 14.5118 17.0118C14.8244 16.6993 15 16.2754 15 15.8333L15.8333 5.83333" stroke="#FF2035" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_5" d="M7.5 5.83333V3.33333C7.5 3.11232 7.5878 2.90036 7.74408 2.74408C7.90036 2.5878 8.11232 2.5 8.33333 2.5H11.6667C11.8877 2.5 12.0996 2.5878 12.2559 2.74408C12.4122 2.90036 12.5 3.11232 12.5 3.33333V5.83333" stroke="#FF2035" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>
diff --git a/public/rooms/figma/user.svg b/public/rooms/figma/user.svg
deleted file mode 100644
index 8cd8a3ab..00000000
--- a/public/rooms/figma/user.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="user">
-<path id="Vector" d="M7.64298 8.19036C7.01786 7.56523 6.66667 6.71739 6.66667 5.83333C6.66667 4.94928 7.01786 4.10143 7.64298 3.47631C8.2681 2.85119 9.11594 2.5 10 2.5C10.8841 2.5 11.7319 2.85119 12.357 3.47631C12.9821 4.10143 13.3333 4.94928 13.3333 5.83333C13.3333 6.71739 12.9821 7.56523 12.357 8.19036C11.7319 8.81548 10.8841 9.16667 10 9.16667C9.11594 9.16667 8.2681 8.81548 7.64298 8.19036Z" stroke="#3B3F4E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_2" d="M5 17.5V15.8333C5 14.9493 5.35119 14.1014 5.97631 13.4763C6.60143 12.8512 7.44928 12.5 8.33333 12.5H11.6667C12.5507 12.5 13.3986 12.8512 14.0237 13.4763C14.6488 14.1014 15 14.9493 15 15.8333V17.5" stroke="#3B3F4E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>
diff --git a/src/app/(main)/bookmark/[folderId]/page.tsx b/src/app/(main)/bookmark/[folderId]/page.tsx
index f0ac1e8c..6e34b481 100644
--- a/src/app/(main)/bookmark/[folderId]/page.tsx
+++ b/src/app/(main)/bookmark/[folderId]/page.tsx
@@ -2,6 +2,7 @@
 
 import { useParams, notFound } from "next/navigation";
 import { useMemo } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
 import { SetSectionMaxWidth } from "@/contexts/SectionWidthContext";
 import { useBookmarkCategories } from "@/hooks/useRooms";
 import { useSessionStore } from "@/stores/session-store";
@@ -11,19 +12,19 @@ import { BookmarkFolderDetailView } from "../_components/BookmarkFolderDetailVie
 function FolderDetailSkeleton() {
   return (
     <div
-      className="flex h-full min-h-0 animate-pulse flex-col border-b border-gray-border"
+      className="flex h-full min-h-0 flex-col border-b border-gray-border"
       aria-busy="true"
       aria-label="북마크 폴더를 불러오는 중"
     >
       <SetSectionMaxWidth value="s1" />
       <div className="flex items-center justify-between border-b border-gray-border pb-5">
-        <div className="h-7 w-48 rounded bg-gray-200" />
-        <div className="h-9 w-32 rounded-full bg-gray-200" />
+        <Skeleton className="h-7 w-48" />
+        <Skeleton className="h-9 w-32 rounded-full" />
       </div>
       <div className="space-y-3 py-5">
-        <div className="h-16 rounded-xl bg-gray-200" />
-        <div className="h-16 rounded-xl bg-gray-200" />
-        <div className="h-16 rounded-xl bg-gray-200" />
+        <Skeleton className="h-16 rounded-xl" />
+        <Skeleton className="h-16 rounded-xl" />
+        <Skeleton className="h-16 rounded-xl" />
       </div>
     </div>
   );
diff --git a/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx b/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx
index 7b646559..fbccb9bf 100644
--- a/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx
+++ b/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx
@@ -1,6 +1,19 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useForm } from "@tanstack/react-form";
+import { useId, type ComponentProps } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Field, FieldError, FieldHeader, FieldLabel, FieldSuffix } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
 import type { BookmarkFolder } from "@/types/bookmark";
 import { UNTITLED_BOOKMARK_CATEGORY_LABEL } from "@/lib/bookmark-untitled-category-name";
 
@@ -26,168 +39,169 @@ function initialTitle(mode: Mode, initialFolder: BookmarkFolder | null) {
   return "";
 }
 
-function initialColor(mode: Mode, initialFolder: BookmarkFolder | null) {
+function initialColor(mode: Mode, initialFolder: BookmarkFolder | null): string {
   if (mode === "edit" && initialFolder) return initialFolder.color;
   return COLOR_PRESETS[0];
 }
 
+// 빈 제목은 허용한다(저장하는 쪽이 "제목 없는 북마크 N"을 고른다). maxLength가 있어도 한글 조합 중에는 한 글자 넘게 들어갈 수 있어 제출 때 길이를 다시 본다
+function titleError(title: string) {
+  return title.length > TITLE_MAX_LENGTH ? `제목은 ${TITLE_MAX_LENGTH}자까지 쓸 수 있어요.` : undefined;
+}
+
 export function AddBookmarkModal({
   mode,
   initialFolder,
   busy = false,
   onClose,
   onSave,
-  overlayZClass = "z-50",
   /** 비어 있을 때 실제로 쓰이는 이름(다음 번호 반영). 없으면 기본 라벨만 표시 */
   untitledNameHint,
   /** 서버/저장 오류 시 인라인 표시 (토스트 대신) */
   formError = null,
+  /** 닫힌 뒤 포커스를 돌려줄 곳. 메뉴 항목에서 열면 사라진 항목 대신 메뉴 버튼을 준다 */
+  finalFocus,
 }: {
   mode: Mode;
   initialFolder: BookmarkFolder | null;
   busy?: boolean;
   onClose: () => void;
   onSave: (payload: { title: string; color: string }) => void;
-  /** 상위 모달 위에 겹칠 때만 지정 (예: `z-[65]`) */
-  overlayZClass?: string;
   untitledNameHint?: string;
   formError?: string | null;
+  finalFocus?: ComponentProps<typeof DialogContent>["finalFocus"];
 }) {
-  const [title, setTitle] = useState(() => initialTitle(mode, initialFolder));
-  const [color, setColor] = useState(() => initialColor(mode, initialFolder));
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (busy) return;
-    const trimmed = title.trim();
-    onSave({
-      title: trimmed,
-      color,
-    });
-  };
+  const formId = useId();
+  // 저장 요청(mutation)은 부모가 갖는다. 진행·실패는 부모의 busy·formError로 받는다
+  const form = useForm({
+    defaultValues: {
+      title: initialTitle(mode, initialFolder),
+      color: initialColor(mode, initialFolder),
+    },
+    onSubmit: ({ value }) => {
+      onSave({ title: value.title.trim(), color: value.color });
+    },
+  });
 
   return (
-    <div
-      className={`fixed inset-0 ${overlayZClass} flex items-center justify-center bg-black/40 p-4`}
-      role="presentation"
-      onMouseDown={(ev) => {
-        if (ev.target === ev.currentTarget) onClose();
+    <Dialog
+      open
+      closeDisabled={busy}
+      // 열린 채 마운트되므로 닫기 요청(open=false)만 온다. 저장 중에는 Esc·딤·취소를 막는다
+      onOpenChange={(open) => {
+        if (!open) onClose();
       }}
     >
-      <div
-        className="w-full max-w-sm rounded-2xl border border-gray-border bg-white p-6 shadow-lg"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="bookmark-modal-title"
-        onMouseDown={(e) => e.stopPropagation()}
-      >
-        <h2
-          id="bookmark-modal-title"
-          className="text-title-l mobile:text-title-m font-semibold text-neutral-900"
-        >
-          {mode === "edit" ? "북마크 편집" : "새 북마크 생성"}
-        </h2>
+      <DialogContent size="sm" showCloseButton={false} finalFocus={finalFocus}>
+        <DialogHeader>
+          <DialogTitle>{mode === "edit" ? "북마크 편집" : "새 북마크 생성"}</DialogTitle>
+        </DialogHeader>
         {formError ? (
-          <p className="mt-3 text-body-m-regular mobile:text-body-s-regular text-primary" role="alert">
+          <p className="text-body-m-regular mobile:text-body-s-regular text-primary" role="alert">
             {formError}
           </p>
         ) : null}
 
-        <form onSubmit={handleSubmit} className="mt-5 space-y-5">
-          <div>
-            <div className="mb-1.5 flex items-baseline justify-between gap-2">
-              <label
-                htmlFor="bookmark-title"
-                className="block text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900"
-              >
-                제목
-              </label>
-              <span
-                id="bookmark-title-counter"
-                className="shrink-0 text-body-s-regular mobile:text-body-xs-regular tabular-nums text-dark-gray"
-                aria-live="polite"
-              >
-                {title.length}/{TITLE_MAX_LENGTH}
-              </span>
-            </div>
-            <input
-              id="bookmark-title"
-              type="text"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              maxLength={TITLE_MAX_LENGTH}
-              placeholder={untitledNameHint ?? UNTITLED_BOOKMARK_CATEGORY_LABEL}
-              aria-describedby="bookmark-title-counter"
-              className="w-full rounded-xl border border-gray-border px-3 py-2.5 text-body-m-regular outline-none ring-primary/30 focus:border-primary focus:ring-2"
-            />
-          </div>
-
-          <div>
-            <span className="mb-2 block text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-neutral-900">
-              색상
-            </span>
-            <div className="flex flex-wrap gap-2">
-              {COLOR_PRESETS.map((hex) => (
-                <button
-                  key={hex}
-                  type="button"
-                  title={hex}
-                  onClick={() => setColor(hex)}
-                  className="size-9 cursor-pointer rounded-full border-2 transition-shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                  style={{
-                    backgroundColor: hex,
-                    borderColor: color === hex ? "#171717" : "transparent",
-                    boxShadow:
-                      color === hex ? "0 0 0 2px white, 0 0 0 4px #171717" : "",
-                  }}
-                  aria-pressed={color === hex}
-                />
-              ))}
-            </div>
-            <div className="mt-3 flex items-center gap-3">
-              <label
-                htmlFor="bookmark-color-custom"
-                className="text-label-l-regular mobile:text-label-m-regular text-dark-gray"
-              >
-                직접 선택
-              </label>
-              <input
-                id="bookmark-color-custom"
-                type="color"
-                value={color}
-                onChange={(e) => setColor(e.target.value)}
-                className="h-10 w-14 cursor-pointer rounded-md border border-gray-border bg-white p-0.5"
-              />
-              <span className="font-mono text-body-s-regular mobile:text-body-xs-regular text-dark-gray">{color}</span>
-            </div>
-          </div>
+        <form
+          id={formId}
+          noValidate
+          className="flex flex-col gap-5"
+          onSubmit={(event) => {
+            event.preventDefault();
+            // 라이브러리는 연타를 막지 않는다. busy는 부모 mutation의 isPending
+            if (busy || form.state.isSubmitting) return;
+            void form.handleSubmit();
+          }}
+        >
+          <form.Field name="title" validators={{ onSubmit: ({ value }) => titleError(value) }}>
+            {(field) => {
+              const error = field.state.meta.errors[0];
+              const counterId = `${formId}-title-counter`;
+              const errorId = `${formId}-title-error`;
+              return (
+                <Field>
+                  <FieldHeader>
+                    <FieldLabel htmlFor={`${formId}-title`}>제목</FieldLabel>
+                    <FieldSuffix id={counterId} aria-live="polite">
+                      {field.state.value.length}/{TITLE_MAX_LENGTH}
+                    </FieldSuffix>
+                  </FieldHeader>
+                  <Input
+                    id={`${formId}-title`}
+                    type="text"
+                    value={field.state.value}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    onBlur={field.handleBlur}
+                    maxLength={TITLE_MAX_LENGTH}
+                    placeholder={untitledNameHint ?? UNTITLED_BOOKMARK_CATEGORY_LABEL}
+                    aria-invalid={error ? true : undefined}
+                    aria-describedby={error ? `${counterId} ${errorId}` : counterId}
+                  />
+                  <FieldError id={errorId}>{error}</FieldError>
+                </Field>
+              );
+            }}
+          </form.Field>
 
-          <div className="flex gap-2 pt-1">
-            <button
-              type="button"
-              onClick={onClose}
-              className="flex-1 cursor-pointer rounded-xl border border-gray-border py-2.5 text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-800 transition-colors hover:bg-bubble-gray"
-            >
-              취소
-            </button>
-            <button
-              type="submit"
-              disabled={busy}
-              className="flex-1 cursor-pointer rounded-xl bg-primary py-2.5 text-label-l-emphasis mobile:text-label-m-emphasis font-semibold text-white shadow-md transition-opacity hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-60"
-            >
-              {mode === "edit" ? "저장" : "추가"}
-            </button>
-          </div>
+          <form.Field name="color">
+            {(field) => (
+              <div>
+                <span className="mb-2 block text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-neutral-900">
+                  색상
+                </span>
+                <div className="flex flex-wrap gap-2">
+                  {COLOR_PRESETS.map((hex) => (
+                    <button
+                      key={hex}
+                      type="button"
+                      title={hex}
+                      onClick={() => field.handleChange(hex)}
+                      className="size-9 cursor-pointer rounded-full border-2 transition-shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                      style={{
+                        backgroundColor: hex,
+                        borderColor: field.state.value === hex ? "#171717" : "transparent",
+                        boxShadow:
+                          field.state.value === hex ? "0 0 0 2px white, 0 0 0 4px #171717" : "",
+                      }}
+                      aria-pressed={field.state.value === hex}
+                    />
+                  ))}
+                </div>
+                <div className="mt-3 flex items-center gap-3">
+                  <label
+                    htmlFor={`${formId}-color-custom`}
+                    className="text-label-l-regular mobile:text-label-m-regular text-dark-gray"
+                  >
+                    직접 선택
+                  </label>
+                  <input
+                    id={`${formId}-color-custom`}
+                    type="color"
+                    value={field.state.value}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    className="h-10 w-14 cursor-pointer rounded-md border border-gray-border bg-white p-0.5"
+                  />
+                  <span className="font-mono text-body-s-regular mobile:text-body-xs-regular text-dark-gray">
+                    {field.state.value}
+                  </span>
+                </div>
+              </div>
+            )}
+          </form.Field>
         </form>
-      </div>
-    </div>
+
+        <DialogFooter>
+          <DialogClose render={<Button variant="weak" />}>취소</DialogClose>
+          <Button
+            type="submit"
+            form={formId}
+            loading={busy}
+            loadingLabel={mode === "edit" ? "저장 중" : "추가 중"}
+          >
+            {mode === "edit" ? "저장" : "추가"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/app/(main)/bookmark/_components/BookmarkFolderDetailView.loading.test.tsx b/src/app/(main)/bookmark/_components/BookmarkFolderDetailView.loading.test.tsx
index ced23d46..fc49ceee 100644
--- a/src/app/(main)/bookmark/_components/BookmarkFolderDetailView.loading.test.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkFolderDetailView.loading.test.tsx
@@ -4,6 +4,8 @@ import { createRoot } from "react-dom/client";
 import { expect, it, vi } from "vitest";
 import { BookmarkFolderDetailView } from "./BookmarkFolderDetailView";
 
+const placeQueries = vi.hoisted(() => ({ current: [] as unknown[] }));
+
 vi.mock("@/hooks/useOpenPlaceOnMap", () => ({ useOpenPlaceOnMap: () => vi.fn() }));
 vi.mock("@/stores/session-store", () => ({ useSessionStore: () => "room" }));
 vi.mock("@/hooks/useRooms", () => ({
@@ -11,21 +13,40 @@ vi.mock("@/hooks/useRooms", () => ({
   useRoomBookmarks: () => ({ data: [{ bookmarkId: 1, googlePlaceId: "place" }], isPending: false }),
 }));
 vi.mock("@/lib/places/place-queries", () => ({ placePreviewQueryOptions: () => ({ queryKey: ["place"] }) }));
-vi.mock("@tanstack/react-query", () => ({
-  useQueries: () => [{ isPending: false, isFetching: true, data: { name: "저장한 장소", googlePlaceId: "place", formattedAddress: "서울" } }],
-}));
+vi.mock("@tanstack/react-query", () => ({ useQueries: () => placeQueries.current }));
 vi.mock("./BookmarkFolderDetailHeader", () => ({ BookmarkFolderDetailHeader: () => null }));
 vi.mock("./BookmarkPlaceRow", () => ({ BookmarkPlaceRow: ({ place }: { place: { name: string } }) => <div>{place.name}</div> }));
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 
-it("keeps cached places visible while their previews refetch", async () => {
+async function renderFolder() {
   const container = document.createElement("div");
   const root = createRoot(container);
+  await act(async () => root.render(<BookmarkFolderDetailView folder={{ id: "1", title: "여행", color: "red" }} />));
+  return { container, unmount: () => act(async () => root.unmount()) };
+}
+
+it("keeps cached places visible while their previews refetch", async () => {
+  placeQueries.current = [
+    { isPending: false, isFetching: true, data: { name: "저장한 장소", googlePlaceId: "place", formattedAddress: "서울" } },
+  ];
+  const { container, unmount } = await renderFolder();
   try {
-    await act(async () => root.render(<BookmarkFolderDetailView folder={{ id: "1", title: "여행", color: "red" }} />));
     expect(container.textContent).toContain("저장한 장소");
     expect(container.querySelector('[role="status"]')).toBeNull();
   } finally {
-    await act(async () => root.unmount());
+    await unmount();
+  }
+});
+
+it("미리보기를 모두 받지 못하면 내부 에러 문구 대신 안내 문구를 보여 준다", async () => {
+  placeQueries.current = [
+    { isPending: false, isFetching: false, isError: true, error: new Error("batch 응답에 place가 없음") },
+  ];
+  const { container, unmount } = await renderFolder();
+  try {
+    expect(container.textContent).toContain("장소 정보를 불러오지 못했습니다.");
+    expect(container.textContent).not.toContain("batch 응답에");
+  } finally {
+    await unmount();
   }
 });
diff --git a/src/app/(main)/bookmark/_components/BookmarkFolderDetailView.tsx b/src/app/(main)/bookmark/_components/BookmarkFolderDetailView.tsx
index 1bc73da3..d1076e01 100644
--- a/src/app/(main)/bookmark/_components/BookmarkFolderDetailView.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkFolderDetailView.tsx
@@ -36,7 +36,8 @@ export function BookmarkFolderDetailView({ folder }: { folder: BookmarkFolder })
   const {
     data: bookmarkRowsRaw,
     isPending: bookmarksLoading,
-    isError: bookmarksError,
+    // 재조회 실패는 보이던 목록을 지우지 않는다 — 처음 불러오기에 실패했을 때만 오류 화면
+    isLoadingError: bookmarksError,
     error: bookmarksErr,
     refetch,
   } = useRoomBookmarks(roomId, categoryIdOk);
@@ -97,8 +98,6 @@ export function BookmarkFolderDetailView({ folder }: { folder: BookmarkFolder })
     placeQueries.length > 0 &&
     placeQueries.every((q) => q.isError);
 
-  const firstPlaceError = placeQueries.find((q) => q.isError)?.error;
-
   const retryPlacePreviews = () => {
     for (const q of placeQueries) {
       void q.refetch();
@@ -165,10 +164,9 @@ export function BookmarkFolderDetailView({ folder }: { folder: BookmarkFolder })
           <BookmarkListSkeleton />
         ) : cardsError ? (
           <div className="space-y-3 py-10">
+            {/* 에러 문구는 내부 메시지(요청 id·API 오류 코드)라 화면에 그대로 보여 주지 않는다 */}
             <p className="text-center text-body-m-regular mobile:text-body-s-regular text-primary">
-              {firstPlaceError instanceof Error
-                ? firstPlaceError.message
-                : "장소 정보를 불러오지 못했습니다."}
+              장소 정보를 불러오지 못했습니다.
             </p>
             <div className="text-center">
               <button
diff --git a/src/app/(main)/bookmark/_components/BookmarkFoldersView.tsx b/src/app/(main)/bookmark/_components/BookmarkFoldersView.tsx
index a6c146a7..249b6a51 100644
--- a/src/app/(main)/bookmark/_components/BookmarkFoldersView.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkFoldersView.tsx
@@ -3,7 +3,7 @@
 import { BookmarkPlus, MoreHorizontal } from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 import { MAIN_CARD_INNER_PADDING_X_CLASS } from "@/lib/layout-tokens";
 import { messageForBookmarkCategorySaveError } from "@/lib/api/errors";
@@ -16,6 +16,12 @@ import {
 } from "@/components/layout/page-toolbar-button";
 import { MainPageHeader } from "@/components/layout/MainPageHeader";
 import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
 import { pickUniqueUntitledBookmarkCategoryName } from "@/lib/bookmark-untitled-category-name";
 import {
@@ -38,7 +44,8 @@ export function BookmarkFoldersView() {
   const roomId = useSessionStore((s) => s.currentRoomId);
   const { folders } = useBookmarkFolders();
   useAllRoomBookmarks(roomId);
-  const { isPending, isError, error, refetch } = useBookmarkCategories(roomId);
+  const { isPending, isLoadingError, error, refetch } =
+    useBookmarkCategories(roomId);
   const { mutate: createCategory, isPending: isCreating } =
     useCreateBookmarkCategory();
   const {
@@ -62,25 +69,9 @@ export function BookmarkFoldersView() {
   const [editingFolder, setEditingFolder] = useState<BookmarkFolder | null>(
     null,
   );
-  const [menuOpenId, setMenuOpenId] = useState<string | null>(null);
   const [folderFormError, setFolderFormError] = useState<string | null>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  const closeMenu = useCallback(() => setMenuOpenId(null), []);
-
-  useEffect(() => {
-    if (!menuOpenId) return;
-    const onPointer = (e: MouseEvent | TouchEvent) => {
-      const el = menuRef.current;
-      if (el && !el.contains(e.target as Node)) closeMenu();
-    };
-    document.addEventListener("mousedown", onPointer);
-    document.addEventListener("touchstart", onPointer);
-    return () => {
-      document.removeEventListener("mousedown", onPointer);
-      document.removeEventListener("touchstart", onPointer);
-    };
-  }, [menuOpenId, closeMenu]);
+  // 편집 대화상자는 메뉴 항목에서 열려 닫힌 뒤 돌아갈 항목이 없다. 마지막으로 연 행 메뉴 버튼으로 포커스를 돌려준다
+  const menuTriggerRef = useRef<HTMLElement | null>(null);
 
   const openCreate = () => {
     setFolderFormError(null);
@@ -91,7 +82,6 @@ export function BookmarkFoldersView() {
   };
 
   const openEdit = (folder: BookmarkFolder) => {
-    closeMenu();
     setFolderFormError(null);
     setModalKey((k) => k + 1);
     setModalMode("edit");
@@ -159,7 +149,6 @@ export function BookmarkFoldersView() {
     const categoryId = Number.parseInt(folder.id, 10);
     if (!Number.isFinite(categoryId)) return;
 
-    closeMenu();
     setFolderToDelete({ categoryId, title: folder.title });
   };
 
@@ -222,7 +211,8 @@ export function BookmarkFoldersView() {
     );
   }
 
-  if (isError) {
+  // 재조회 실패는 보이던 폴더를 지우지 않는다 — 처음 불러오기에 실패했을 때만 오류 화면
+  if (isLoadingError) {
     return (
       <div className="space-y-2.5">
         <MainPageHeader title="북마크" />
@@ -282,53 +272,35 @@ export function BookmarkFoldersView() {
                       </p>
                     </div>
                   </Link>
-                  <div
-                    className="relative shrink-0"
-                    ref={menuOpenId === folder.id ? menuRef : null}
+                  <DropdownMenu
+                    onOpenChange={(open, { trigger }) => {
+                      if (open && trigger instanceof HTMLElement) menuTriggerRef.current = trigger;
+                    }}
                   >
-                    <button
-                      type="button"
-                      onClick={() =>
-                        setMenuOpenId((id) =>
-                          id === folder.id ? null : folder.id,
-                        )
-                      }
+                    <DropdownMenuTrigger
                       disabled={rowMenuBusy(folder.id)}
-                      className="cursor-pointer rounded-lg p-2 text-dark-gray transition-colors hover:bg-bubble-gray disabled:cursor-not-allowed disabled:opacity-50"
+                      className="shrink-0 cursor-pointer rounded-lg p-2 text-dark-gray transition-colors hover:bg-bubble-gray disabled:cursor-not-allowed disabled:opacity-50"
                       aria-label="메뉴"
                     >
                       <MoreHorizontal className="size-5" />
-                    </button>
-                    {menuOpenId === folder.id && (
-                      <div
-                        className="absolute right-0 top-full z-20 mt-1 min-w-[120px] overflow-hidden rounded-xl border border-gray-border bg-white py-1 shadow-lg"
-                        role="menu"
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      {/* 진행 중에는 항목을 비활성으로만 둔다(메뉴 항목은 Button이 아니라 progress가 없다) */}
+                      <DropdownMenuItem
+                        disabled={rowMenuBusy(folder.id)}
+                        onClick={() => openEdit(folder)}
+                      >
+                        편집
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        variant="destructive"
+                        disabled={rowMenuBusy(folder.id)}
+                        onClick={() => handleDelete(folder)}
                       >
-                        <button
-                          type="button"
-                          role="menuitem"
-                          className="block w-full cursor-pointer px-4 py-2 text-left text-label-l-regular mobile:text-label-m-regular text-neutral-900 hover:bg-bubble-gray disabled:cursor-not-allowed disabled:opacity-50"
-                          disabled={
-                            isRowDeleting(folder.id) || isRowUpdating(folder.id)
-                          }
-                          onClick={() => openEdit(folder)}
-                        >
-                          {isRowUpdating(folder.id) ? "편집 중…" : "편집"}
-                        </button>
-                        <button
-                          type="button"
-                          role="menuitem"
-                          className="block w-full cursor-pointer px-4 py-2 text-left text-label-l-regular mobile:text-label-m-regular text-status-negative hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50"
-                          disabled={
-                            isRowDeleting(folder.id) || isRowUpdating(folder.id)
-                          }
-                          onClick={() => handleDelete(folder)}
-                        >
-                          {isRowDeleting(folder.id) ? "삭제 중…" : "삭제"}
-                        </button>
-                      </div>
-                    )}
-                  </div>
+                        삭제
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
               </li>
             ))}
@@ -356,10 +328,12 @@ export function BookmarkFoldersView() {
           }}
           onSave={handleSave}
           formError={folderFormError}
+          finalFocus={modalMode === "edit" ? menuTriggerRef : undefined}
         />
       )}
       {folderToDelete ? (
         <ConfirmDialog
+          destructive
           title={`「${folderToDelete.title}」 북마크 목록을 삭제할까요?`}
           description="소속 북마크 항목도 함께 삭제됩니다."
           confirmLabel="삭제"
diff --git a/src/app/(main)/bookmark/_components/BookmarkListSkeleton.tsx b/src/app/(main)/bookmark/_components/BookmarkListSkeleton.tsx
index 4f260e54..362b1017 100644
--- a/src/app/(main)/bookmark/_components/BookmarkListSkeleton.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkListSkeleton.tsx
@@ -1,9 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
 export function BookmarkListSkeleton() {
   return (
     <div className="space-y-3 py-5">
       <output className="sr-only">북마크 불러오는 중</output>
       {[0, 1, 2].map((row) => (
-        <div key={row} aria-hidden="true" className="h-16 animate-pulse rounded-xl bg-fill-strong motion-reduce:animate-none" />
+        <Skeleton key={row} className="h-16 rounded-xl" />
       ))}
     </div>
   );
diff --git a/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx b/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx
index 8599dd87..4a5a7a95 100644
--- a/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx
@@ -2,8 +2,10 @@
 
 import { MapPin } from "lucide-react";
 
+import { Badge } from "@/components/ui/badge";
 import { useInViewport } from "@/hooks/useInViewport";
 import { usePlacePhotoUrlQuery } from "@/hooks/usePlacePhotoUrl";
+import { useVisiblePlacePhotoUrl } from "@/hooks/useVisiblePlacePhotoUrl";
 import { MAIN_CARD_INNER_PADDING_X_CLASS } from "@/lib/layout-tokens";
 import { handlePlacePhotoImageError } from "@/lib/places/place-photo-refresh";
 import { cn } from "@/lib/utils";
@@ -33,13 +35,14 @@ export function BookmarkPlacePreviewCard({
   const { data: imageUrl } = usePlacePhotoUrlQuery(googlePlaceId, {
     enabled: thumbnailInViewport,
   });
+  const { visibleUrl, markUnavailable } = useVisiblePlacePhotoUrl(imageUrl);
 
   const rawGid = typeof googlePlaceId === "string" ? googlePlaceId.trim() : "";
 
-  const thumbnailMedia = imageUrl ? (
+  const thumbnailMedia = visibleUrl ? (
     // eslint-disable-next-line @next/next/no-img-element -- remote place photo URL
     <img
-      src={imageUrl}
+      src={visibleUrl}
       alt={name}
       className="h-full w-full object-cover"
       loading="lazy"
@@ -49,6 +52,7 @@ export function BookmarkPlacePreviewCard({
           googlePlaceId,
           placeName: name,
           image: event.currentTarget,
+          onPhotoUnavailable: markUnavailable,
         })
       }
     />
@@ -76,9 +80,9 @@ export function BookmarkPlacePreviewCard({
             {name}
           </h3>
           {primaryTypeDisplayName ? (
-            <span className="shrink-0 rounded-full bg-gray-100 px-1.5 py-0.5 text-body-xs-emphasis font-medium leading-none text-dark-gray">
+            <Badge size="md">
               {primaryTypeDisplayName}
-            </span>
+            </Badge>
           ) : null}
         </div>
         {address ? (
diff --git a/src/app/(main)/bookmark/_components/BookmarkPlaceRow.lifecycle.test.tsx b/src/app/(main)/bookmark/_components/BookmarkPlaceRow.lifecycle.test.tsx
index 9bee1426..f39fa87f 100644
--- a/src/app/(main)/bookmark/_components/BookmarkPlaceRow.lifecycle.test.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkPlaceRow.lifecycle.test.tsx
@@ -17,20 +17,23 @@ vi.mock("./BookmarkPlacePreviewCard", () => ({
   BookmarkPlacePreviewCard: () => null,
 }));
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
-it("positions the portal at open, updates category phase and closes outside with cleanup", async () => {
-  const rect = vi
-    .spyOn(HTMLElement.prototype, "getBoundingClientRect")
-    .mockReturnValue({
-      top: 100,
-      bottom: 140,
-      left: 100,
-      right: 300,
-      width: 200,
-      height: 40,
-      x: 100,
-      y: 100,
-      toJSON: () => ({}),
-    });
+
+const flush = () =>
+  act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+const menu = () => document.querySelector<HTMLElement>('[role="menu"]');
+const items = () =>
+  [...(menu()?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])].map(
+    (item) => item.textContent?.trim(),
+  );
+const item = (name: string) =>
+  [...(menu()?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])].find(
+    (candidate) => candidate.textContent?.trim() === name,
+  )!;
+
+// 위치 계산(트리거 아래 배치·화면 크기 변경)은 Base UI Positioner가 맡아 픽셀 값은 검사하지 않는다
+it("switches to the category phase inside the open menu, closes outside, and reopens on the main phase", async () => {
   const container = document.createElement("div");
   document.body.append(container);
   const root = createRoot(container);
@@ -44,30 +47,30 @@ it("positions the portal at open, updates category phase and closes outside with
       />,
     ),
   );
-  await act(async () => container.querySelector("button")!.click());
-  let menu = document.querySelector<HTMLElement>('[role="menu"]')!;
-  expect(menu.style.top).toBe("144px");
-  await act(async () => menu.querySelector("button")!.click());
-  expect(menu.textContent).toContain("two");
-  rect.mockReturnValue({
-    top: 50,
-    bottom: 90,
-    left: 100,
-    right: 300,
-    width: 200,
-    height: 40,
-    x: 100,
-    y: 50,
-    toJSON: () => ({}),
-  });
-  await act(async () => window.dispatchEvent(new Event("resize")));
-  menu = document.querySelector<HTMLElement>('[role="menu"]')!;
-  expect(menu.style.top).toBe("94px");
+  const trigger = container.querySelector<HTMLElement>(
+    'button[aria-label="장소 메뉴"]',
+  )!;
+  await act(async () => trigger.click());
+  expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  expect(items()).toEqual(["카테고리 변경", "삭제"]);
+
+  await act(async () => item("카테고리 변경").click());
+  expect(menu()).not.toBeNull();
+  expect(items()).toEqual(["뒤로", "two"]);
+
   await act(async () =>
-    document.body.dispatchEvent(new MouseEvent("mousedown", { bubbles: true })),
+    document.body.dispatchEvent(
+      new MouseEvent("pointerdown", { bubbles: true }),
+    ),
   );
-  expect(document.querySelector('[role="menu"]')).toBeNull();
+  await flush();
+  expect(menu()).toBeNull();
+  expect(trigger.getAttribute("aria-expanded")).toBe("false");
+
+  await act(async () => trigger.click());
+  expect(items()).toEqual(["카테고리 변경", "삭제"]);
+
   await act(async () => root.unmount());
+  expect(menu()).toBeNull();
   container.remove();
-  rect.mockRestore();
 });
diff --git a/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx b/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx
index d3b7dad9..01827782 100644
--- a/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx
@@ -1,15 +1,15 @@
 "use client";
 
 import { ChevronLeft, MoreHorizontal } from "lucide-react";
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { createPortal } from "react-dom";
+import { useState } from "react";
 import { toast } from "sonner";
 import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 import { BookmarkPlacePreviewCard } from "./BookmarkPlacePreviewCard";
 import {
@@ -19,19 +19,9 @@ import {
 } from "@/hooks/useRooms";
 import type { BookmarkedPlace } from "@/types/bookmark";
 
+// '카테고리 변경'은 하위 메뉴 대신 같은 메뉴 안에서 목록으로 바꿔 보인다(지금 화면 흐름 유지, 디자이너 질문으로 남음)
 type MenuPhase = "main" | "pickCategory";
 
-type MenuPosition = {
-  top: number;
-  left: number;
-  width: number;
-};
-
-const MENU_GAP_PX = 4;
-const MENU_WIDTH_PX = 184;
-const MENU_MAX_HEIGHT_PX = 352;
-const MENU_VIEWPORT_PADDING_PX = 8;
-
 export function BookmarkPlaceRow({
   place,
   roomId,
@@ -54,9 +44,6 @@ export function BookmarkPlaceRow({
 
   const [menuOpen, setMenuOpen] = useState(false);
   const [menuPhase, setMenuPhase] = useState<MenuPhase>("main");
-  const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null);
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const menuPanelRef = useRef<HTMLDivElement>(null);
 
   const { data: categories } = useBookmarkCategories(roomId);
   const { mutate: moveBookmark, isPending: moving } = useMoveRoomBookmark();
@@ -68,78 +55,6 @@ export function BookmarkPlaceRow({
   const otherCategories =
     categories?.filter((c) => c.categoryId !== currentCategoryId) ?? [];
 
-  const closeMenu = useCallback(() => {
-    setMenuOpen(false);
-    setMenuPhase("main");
-  }, []);
-
-  const updateMenuPosition = useCallback(() => {
-    const triggerEl = triggerRef.current;
-    if (!triggerEl || !menuOpen) {
-      setMenuPosition(null);
-      return;
-    }
-    const rect = triggerEl.getBoundingClientRect();
-    const estimatedHeight =
-      menuPhase === "main"
-        ? 96
-        : Math.min(
-            64 + Math.max(otherCategories.length, 1) * 40,
-            MENU_MAX_HEIGHT_PX,
-          );
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const top =
-      spaceBelow >= estimatedHeight + MENU_GAP_PX
-        ? rect.bottom + MENU_GAP_PX
-        : Math.max(
-            MENU_VIEWPORT_PADDING_PX,
-            rect.top - MENU_GAP_PX - estimatedHeight,
-          );
-    const left = Math.min(
-      Math.max(
-        MENU_VIEWPORT_PADDING_PX,
-        rect.right - MENU_WIDTH_PX,
-      ),
-      window.innerWidth - MENU_WIDTH_PX - MENU_VIEWPORT_PADDING_PX,
-    );
-    setMenuPosition({
-      top,
-      left,
-      width: MENU_WIDTH_PX,
-    });
-  }, [menuOpen, menuPhase, otherCategories.length]);
-
-  const attachMenuPanel = useCallback((node: HTMLDivElement | null) => {
-    menuPanelRef.current = node;
-    if (node) updateMenuPosition();
-  }, [updateMenuPosition]);
-
-  useEffect(() => {
-    if (!menuOpen) return;
-    window.addEventListener("scroll", updateMenuPosition, true);
-    window.addEventListener("resize", updateMenuPosition);
-    return () => {
-      window.removeEventListener("scroll", updateMenuPosition, true);
-      window.removeEventListener("resize", updateMenuPosition);
-    };
-  }, [menuOpen, updateMenuPosition]);
-
-  useEffect(() => {
-    if (!menuOpen) return;
-    const onPointer = (e: MouseEvent | TouchEvent) => {
-      const target = e.target as Node;
-      if (triggerRef.current?.contains(target)) return;
-      if (menuPanelRef.current?.contains(target)) return;
-      closeMenu();
-    };
-    document.addEventListener("mousedown", onPointer);
-    document.addEventListener("touchstart", onPointer);
-    return () => {
-      document.removeEventListener("mousedown", onPointer);
-      document.removeEventListener("touchstart", onPointer);
-    };
-  }, [menuOpen, closeMenu]);
-
   const handleMoveTo = (targetCategoryId: number) => {
     if (!Number.isFinite(bookmarkId) || busy) return;
     moveBookmark(
@@ -149,13 +64,13 @@ export function BookmarkPlaceRow({
         categoryId: targetCategoryId,
         fromCategoryId: currentCategoryId,
       },
-      { onSuccess: () => closeMenu() },
+      // 이동 항목은 누른 뒤에도 메뉴를 열어 두고(closeOnClick={false}) 성공하면 닫는다
+      { onSuccess: () => setMenuOpen(false) },
     );
   };
 
   const handleDelete = () => {
     if (!Number.isFinite(bookmarkId) || busy) return;
-    closeMenu();
     setConfirmOpen(true);
   };
 
@@ -183,111 +98,72 @@ export function BookmarkPlaceRow({
         onClick={onOpenDetail}
         onThumbnailClick={onOpenDetail}
       />
-      <div
-        className="absolute right-[6.25rem] top-3 z-10 flex"
-        ref={triggerRef}
-      >
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            setMenuOpen((o) => {
-              if (o) {
-                setMenuPhase("main");
-                return false;
-              }
-              return true;
-            });
+      <div className="absolute right-[6.25rem] top-3 z-10 flex">
+        <DropdownMenu
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+          // 닫힘 애니메이션이 끝난 뒤 첫 단계로 되돌린다(닫히는 동안 내용이 바뀌어 보이지 않게)
+          onOpenChangeComplete={(open) => {
+            if (!open) setMenuPhase("main");
           }}
-          disabled={busy}
-          className={`cursor-pointer rounded-lg p-1 text-dark-gray transition-colors hover:bg-bubble-gray hover:text-neutral-900 active:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 ${
-            menuOpen ? "bg-primary/10 text-primary" : ""
-          }`}
-          aria-label="장소 메뉴"
-          aria-expanded={menuOpen}
         >
-          <MoreHorizontal className="size-5" />
-        </button>
-
-        {menuOpen &&
-          typeof document !== "undefined" &&
-          createPortal(
-            <div
-              ref={attachMenuPanel}
-              style={{
-                position: "fixed",
-                top: menuPosition?.top ?? 0,
-                left: menuPosition?.left ?? 0,
-                width: menuPosition?.width ?? MENU_WIDTH_PX,
-                zIndex: 200,
-                visibility: menuPosition ? "visible" : "hidden",
-              }}
-              className="animate-in fade-in-0 zoom-in-95 max-h-[22rem] overflow-y-auto rounded-xl border border-gray-border/80 bg-white p-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.18)] duration-150"
-              role="menu"
-            >
-              {menuPhase === "main" ? (
-                <>
-                  <button
-                    type="button"
-                    role="menuitem"
-                    className="block w-full cursor-pointer rounded-lg px-3 py-2.5 text-left text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 transition-colors hover:bg-bubble-gray disabled:cursor-not-allowed disabled:opacity-50"
-                    disabled={busy}
-                    onClick={() => setMenuPhase("pickCategory")}
-                  >
-                    카테고리 변경
-                  </button>
-                  <button
-                    type="button"
-                    role="menuitem"
-                    className="mt-0.5 block w-full cursor-pointer rounded-lg border-t border-gray-border/70 px-3 py-2.5 text-left text-label-l-regular mobile:text-label-m-regular font-medium text-status-negative transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50"
-                    disabled={busy}
-                    onClick={handleDelete}
-                  >
-                    {deleting ? "삭제 중…" : "삭제"}
-                  </button>
-                </>
-              ) : (
-                <>
-                  <button
-                    type="button"
-                    className="flex w-full cursor-pointer items-center gap-1 rounded-lg px-2.5 py-2 text-left text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-800 transition-colors hover:bg-bubble-gray"
-                    onClick={() => setMenuPhase("main")}
-                  >
-                    <ChevronLeft className="size-4 shrink-0" />
-                    뒤로
-                  </button>
-                  <div className="mx-1 my-1 border-t border-gray-border" />
-                  {otherCategories.length === 0 ? (
-                    <p className="rounded-lg bg-gray-50 px-3 py-3 text-center text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-dark-gray">
-                      이동할 다른 카테고리가 없습니다.
-                    </p>
-                  ) : (
-                    otherCategories.map((c) => (
-                      <button
-                        key={c.categoryId}
-                        type="button"
-                        role="menuitem"
-                        className="flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2.5 text-left text-label-l-regular mobile:text-label-m-regular text-neutral-900 transition-colors hover:bg-bubble-gray disabled:cursor-not-allowed disabled:opacity-50"
-                        disabled={busy}
-                        onClick={() => handleMoveTo(c.categoryId)}
-                      >
-                        <span
-                          className="size-3 shrink-0 rounded-full border border-black/10"
-                          style={{ backgroundColor: c.colorCode }}
-                          aria-hidden
-                        />
-                        <span className="min-w-0 flex-1 truncate">{c.name}</span>
-                      </button>
-                    ))
-                  )}
-                </>
-              )}
-            </div>,
-            document.body,
-          )}
+          <DropdownMenuTrigger
+            disabled={busy}
+            className="cursor-pointer rounded-lg p-1 text-dark-gray transition-colors hover:bg-bubble-gray hover:text-neutral-900 active:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 aria-expanded:bg-primary/10 aria-expanded:text-primary"
+            aria-label="장소 메뉴"
+          >
+            <MoreHorizontal className="size-5" />
+          </DropdownMenuTrigger>
+          {/* 폭 184는 지금 메뉴 값. 높이는 지금 상한 22rem과 화면에 남은 높이 중 작은 쪽 */}
+          <DropdownMenuContent align="end" className="w-46 max-h-[min(22rem,var(--available-height))]">
+            {menuPhase === "main" ? (
+              <>
+                <DropdownMenuItem
+                  closeOnClick={false}
+                  disabled={busy}
+                  onClick={() => setMenuPhase("pickCategory")}
+                >
+                  카테고리 변경
+                </DropdownMenuItem>
+                <DropdownMenuItem variant="destructive" disabled={busy} onClick={handleDelete}>
+                  삭제
+                </DropdownMenuItem>
+              </>
+            ) : (
+              <>
+                <DropdownMenuItem closeOnClick={false} onClick={() => setMenuPhase("main")}>
+                  <ChevronLeft className="size-4" />
+                  뒤로
+                </DropdownMenuItem>
+                {otherCategories.length === 0 ? (
+                  <p className="px-4 py-3 text-center text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-dark-gray">
+                    이동할 다른 카테고리가 없습니다.
+                  </p>
+                ) : (
+                  otherCategories.map((c) => (
+                    <DropdownMenuItem
+                      key={c.categoryId}
+                      closeOnClick={false}
+                      disabled={busy}
+                      onClick={() => handleMoveTo(c.categoryId)}
+                    >
+                      <span
+                        className="size-3 shrink-0 rounded-full border border-black/10"
+                        style={{ backgroundColor: c.colorCode }}
+                        aria-hidden
+                      />
+                      <span className="min-w-0 flex-1 truncate">{c.name}</span>
+                    </DropdownMenuItem>
+                  ))
+                )}
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
       {confirmOpen ? (
         <ConfirmDialog
+          destructive
           title="이 장소를 북마크에서 삭제할까요?"
           confirmLabel="삭제"
           isPending={deleting}
diff --git a/src/app/(main)/map/_components/MobileRouteCandidateCard.tsx b/src/app/(main)/map/_components/MobileRouteCandidateCard.tsx
index 02418ec1..75683a01 100644
--- a/src/app/(main)/map/_components/MobileRouteCandidateCard.tsx
+++ b/src/app/(main)/map/_components/MobileRouteCandidateCard.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 import { CloseIcon, PlusIcon, ReactionStarIcon } from "@/assets/icons";
 import { DashedBorder } from "@/components/mobile/DashedPlaceholderBox";
 import { usePlaceDetailData } from "@/components/place/usePlaceDetailData";
+import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 
 import { MobileRouteExpandedShell } from "./MobileRoutePlaceCard";
@@ -78,8 +79,8 @@ export function MobileRouteCandidateCard({
               aria-busy
               className="flex flex-col gap-1.5 pt-0.5"
             >
-              <span className="h-5 w-2/3 animate-pulse rounded bg-fill-strong" />
-              <span className="h-4 w-1/2 animate-pulse rounded bg-fill" />
+              <Skeleton render={<span />} className="h-5 w-2/3" />
+              <Skeleton render={<span />} tone="subtle" className="h-4 w-1/2" />
             </output>
           ) : (
             <>
diff --git a/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx b/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx
index e2bee4b7..11f5bfb5 100644
--- a/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx
+++ b/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx
@@ -4,6 +4,7 @@ import { useRef, useState, type PointerEvent as ReactPointerEvent, type ReactNod
 
 import { MobilePlanPlaceCard } from "@/app/(main)/plan/_components/mobile/MobilePlanPlaceCard";
 import { DashedBorder, DashedPlaceholderBox } from "@/components/mobile/DashedPlaceholderBox";
+import { Skeleton } from "@/components/ui/skeleton";
 import type { PlanPlace } from "@/lib/plan/types";
 import { cn } from "@/lib/utils";
 
@@ -159,12 +160,12 @@ export function MobileRouteExpandedShell({
 /** 처음 불러오는 동안 — 카드와 같은 자리를 잡는다 */
 export function MobileRoutePlaceCardSkeleton() {
   return (
-    <output aria-label="장소 불러오는 중" aria-busy className={`${CARD_CLASS} flex min-h-[155px] gap-3 pl-3.5 pr-2 pt-3`}>
-      <span className="size-6 shrink-0 animate-pulse rounded-[5.5px] bg-fill-strong" />
+    <output aria-label="장소 불러오는 중" aria-busy className={cn(CARD_CLASS, "flex min-h-[155px] gap-3 pl-3.5 pr-2 pt-3")}>
+      <Skeleton render={<span />} className="size-6 shrink-0 rounded-[5.5px]" />
       <span className="flex min-w-0 flex-1 flex-col gap-2 pt-0.5">
-        <span className="h-5 w-2/3 animate-pulse rounded bg-fill-strong" />
-        <span className="h-4 w-1/2 animate-pulse rounded bg-fill" />
-        <span className="mt-3 h-4 w-5/6 animate-pulse rounded bg-fill" />
+        <Skeleton render={<span />} className="h-5 w-2/3" />
+        <Skeleton render={<span />} tone="subtle" className="h-4 w-1/2" />
+        <Skeleton render={<span />} tone="subtle" className="mt-3 h-4 w-5/6" />
       </span>
     </output>
   );
diff --git a/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx b/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
index b42911e3..dd5fd488 100644
--- a/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
+++ b/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
@@ -6,6 +6,8 @@ import { useAnalyticsRoomId } from "@/hooks/useAnalyticsRoomId";
 import { HeroImage, HeroSkeleton } from "@/components/place/HeroSection";
 import { PlaceDetailTabs } from "@/components/place/PlaceDetailTabs";
 import { usePlaceDetailData } from "@/components/place/usePlaceDetailData";
+import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
+import { Skeleton } from "@/components/ui/skeleton";
 import { AnalyticsEvents, trackAnalyticsEvent, type AnalyticsSource } from "@/lib/analytics/track";
 import { normalizeGooglePlaceResourceId } from "@/lib/maps";
 import type { SearchRankBucket } from "@/lib/analytics/context";
@@ -50,15 +52,19 @@ export function MobileRoutePlaceDetail({
 
   function renderDetail() {
     if (isError && !detail && active) return (
-      <div role="alert" className="m-3.5 rounded-md border border-border-subtle p-3 text-body-s-regular text-text">
-        <p>장소 정보를 불러오지 못했어요.</p>
-        <button type="button" onClick={() => void refetch()} className="mt-2 text-primary underline">다시 시도</button>
+      <div className="p-3.5">
+        <Alert>
+          <AlertTitle>장소 정보를 불러오지 못했어요.</AlertTitle>
+          <AlertAction>
+            <button type="button" onClick={() => void refetch()} className="text-primary underline">다시 시도</button>
+          </AlertAction>
+        </Alert>
       </div>
     );
     if (showSkeleton) return (
       <output aria-label="장소 정보 불러오는 중" aria-busy className="mt-3 flex flex-col gap-2 px-5 py-4">
-        <span className="h-5 w-24 animate-pulse rounded bg-fill-strong" />
-        <span className="h-16 w-full animate-pulse rounded-md bg-fill" />
+        <Skeleton render={<span />} className="h-5 w-24" />
+        <Skeleton render={<span />} tone="subtle" className="h-16 w-full rounded-md" />
       </output>
     );
     return (
diff --git a/src/app/(main)/map/_components/useMobileRouteView.test.tsx b/src/app/(main)/map/_components/useMobileRouteView.test.tsx
index 3db17c64..d722f444 100644
--- a/src/app/(main)/map/_components/useMobileRouteView.test.tsx
+++ b/src/app/(main)/map/_components/useMobileRouteView.test.tsx
@@ -31,7 +31,16 @@ vi.mock("@/contexts/SelectedPlaceContext", () => ({
   useSelectedPlace: () => ({ setSelectedPlace: fixtures.setSelectedPlace }),
 }));
 vi.mock("@/components/place/usePlaceDetailData", () => ({ usePlaceDetailData: () => ({}) }));
-vi.mock("@/lib/plan/scheduleItemPlaces", () => ({ readSchedulePlanPlacesFromCache: () => fixtures.places }));
+vi.mock("@/lib/plan/scheduleItemPlaces", async () => {
+  const { scheduleItemsQueryKey } = await vi.importActual<typeof import("@/lib/query-keys")>("@/lib/query-keys");
+  return {
+    schedulePlanPlacesQueryOptions: (_queryClient: unknown, roomId: string, scheduleId: number | null) => ({
+      queryKey: scheduleItemsQueryKey(roomId, scheduleId),
+      queryFn: () => fixtures.places,
+      staleTime: Infinity,
+    }),
+  };
+});
 vi.mock("@/app/(main)/plan/_components/mobile/useMobileAddPlaceSearch", () => ({
   useMobileAddPlaceSearch: () => ({ recentlyAddedItemId: null, screen: null }),
 }));
diff --git a/src/app/(main)/map/_components/useMobileRouteView.tsx b/src/app/(main)/map/_components/useMobileRouteView.tsx
index eadc8e74..05c6dff1 100644
--- a/src/app/(main)/map/_components/useMobileRouteView.tsx
+++ b/src/app/(main)/map/_components/useMobileRouteView.tsx
@@ -21,10 +21,9 @@ import {
   scheduleIdsToRouteColors,
   sortedScheduleIdsForRouteColors,
 } from "@/lib/plan/planRouteDayColors";
-import { readSchedulePlanPlacesFromCache } from "@/lib/plan/scheduleItemPlaces";
+import { schedulePlanPlacesQueryOptions } from "@/lib/plan/scheduleItemPlaces";
 import { sortRoomSchedules } from "@/lib/plan/scheduleMerge";
 import type { PlanPlace } from "@/lib/plan/types";
-import { scheduleItemsQueryKey } from "@/lib/query-keys";
 import { cn } from "@/lib/utils";
 
 import {
@@ -118,14 +117,12 @@ export function useMobileRouteView({
   const schedulesQuery = useRoomSchedules(rid || null);
   const schedules = useMemo(() => sortRoomSchedules(schedulesQuery.data ?? []), [schedulesQuery.data]);
 
-  // 일정 목록을 불러올 때 모든 일차의 장소(미리보기 포함)가 캐시에 채워지므로 캐시만 읽는다
+  // 일정 목록을 불러올 때 모든 일차의 장소(미리보기 포함)가 캐시에 채워진다 — 일정 화면과 같은 조회라 무효화된 일차만 다시 받는다
   const dayPlacesQueries = useQueries({
     queries: schedules.map((s) => ({
-      queryKey: scheduleItemsQueryKey(rid || null, s.scheduleId),
-      queryFn: () => readSchedulePlanPlacesFromCache(queryClient, rid, s.scheduleId),
-      enabled: active && rid.length > 0 && schedulesQuery.isSuccess,
-      staleTime: Infinity,
-      refetchOnMount: false,
+      ...schedulePlanPlacesQueryOptions(queryClient, rid, s.scheduleId),
+      // 재조회가 실패해도(status 'error') 받아 둔 일정으로 계속 그린다
+      enabled: active && rid.length > 0 && schedulesQuery.data !== undefined,
       refetchOnWindowFocus: false,
     })),
   });
@@ -425,7 +422,7 @@ export function useMobileRouteView({
     return null;
   } else if (schedulesQuery.isLoading || (schedules.length > 0 && entries.length === 0)) {
     return <RouteCardSlot><MobileRoutePlaceCardSkeleton /></RouteCardSlot>;
-  } else if (schedulesQuery.isError) {
+  } else if (schedulesQuery.isLoadingError) {
     return (
       <RouteCardSlot>
         <MobileRouteMessageCard tone="error" title="일정을 불러오지 못했어요" description="잠시 후 다시 시도해 주세요." />
diff --git a/src/app/(main)/member-settings/_components/AddMemberPanel.analytics.test.tsx b/src/app/(main)/member-settings/_components/AddMemberPanel.analytics.test.tsx
index 109a470d..898bc265 100644
--- a/src/app/(main)/member-settings/_components/AddMemberPanel.analytics.test.tsx
+++ b/src/app/(main)/member-settings/_components/AddMemberPanel.analytics.test.tsx
@@ -45,3 +45,15 @@ it("does not record a rejected copy or cancelled native share", async () => {
   }
   expect(commands).not.toHaveBeenCalled();
 });
+it.each(["복사", "공유"])("provides the same tagged external URL to %s", async label => {
+  const writeText = vi.fn().mockResolvedValue(undefined);
+  const share = vi.fn().mockResolvedValue(undefined);
+  vi.stubGlobal("navigator", { clipboard: { writeText }, share });
+  await mount();
+  const button = renderer.root.findAllByType("button").find(b => b.children.includes(label))!;
+  await act(async () => { await button.props.onClick(); });
+  const url = "https://example.test/join/private-access-code?utm_source=member_invite&utm_medium=referral&utm_campaign=invite";
+  if (label === "복사") expect(writeText).toHaveBeenCalledWith(url);
+  else expect(share).toHaveBeenCalledWith({ title: "우때 여행 초대", url });
+  expect(JSON.stringify(commands.mock.calls)).not.toContain("private-access-code");
+});
diff --git a/src/app/(main)/member-settings/_components/AddMemberPanel.tsx b/src/app/(main)/member-settings/_components/AddMemberPanel.tsx
index 3ae9471a..985e150b 100644
--- a/src/app/(main)/member-settings/_components/AddMemberPanel.tsx
+++ b/src/app/(main)/member-settings/_components/AddMemberPanel.tsx
@@ -1,7 +1,9 @@
 "use client";
 
+import { buildSharedInviteUrl } from "@/lib/invite-campaign";
+
 import { CopyCheckIcon, CopyIcon, RefreshIcon, ShareIcon } from "@/assets/icons";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -37,7 +39,7 @@ function InviteFallback({ canIssue, inviteCode, isRoomDetailLoading, isRoomDetai
   isRegenerating: boolean;
 }>) {
   if (isRoomDetailLoading || isRegenerating) {
-    return <LoadingIndicator label={isRoomDetailLoading ? "방 정보 불러오는 중" : "초대 링크 발급 중"} />;
+    return <Spinner aria-label={isRoomDetailLoading ? "방 정보 불러오는 중" : "초대 링크 발급 중"} />;
   }
   let message = "발급에 실패했어요. 아래에서 재발급을 눌러 주세요.";
   if (isRoomDetailError) message = "방 정보를 불러오지 못했어요.";
@@ -113,7 +115,7 @@ export function AddMemberPanel({
   const displayedCode =
     issuedCode === undefined ? detailInviteCode || null : issuedCode;
   const inviteUrl = canShareInvite && displayedCode
-    ? `${typeof window !== "undefined" ? window.location.origin : ""}/join/${displayedCode}`
+    ? buildSharedInviteUrl(`${typeof window !== "undefined" ? window.location.origin : ""}/join/${encodeURIComponent(displayedCode)}`)
     : null;
 
   async function handleCopy() {
diff --git a/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx b/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx
index 69886680..109cc620 100644
--- a/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx
+++ b/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx
@@ -55,8 +55,7 @@ function JoinRequestCard({
       <UserAvatar
         user={request}
         size={36}
-        className="bg-primary-subtle"
-        initialClassName="font-medium text-primary"
+        tone="primary"
       />
 
       <div className="flex min-w-0 flex-1 flex-col gap-1">
diff --git a/src/app/(main)/member-settings/_components/MemberCard.tsx b/src/app/(main)/member-settings/_components/MemberCard.tsx
index ba2dc313..eb2cff13 100644
--- a/src/app/(main)/member-settings/_components/MemberCard.tsx
+++ b/src/app/(main)/member-settings/_components/MemberCard.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
 import { MenuDotHorizontalIcon, UserEditIcon, UserXIcon } from "@/assets/icons";
+import { Badge } from "@/components/ui/badge";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { UserAvatar } from "@/components/user/UserAvatar";
 import type { RoomMemberStatus } from "@/lib/api/rooms";
 import { cn } from "@/lib/utils";
@@ -51,46 +50,13 @@ export function MemberCard({ member, isViewerHost, onKick, onTransfer }: Readonl
     member.role !== "HOST" &&
     !isLeft;
 
-  // 스크롤 영역(헤더 드롭다운) 안에서도 잘리지 않도록 메뉴는 body에 화면 기준 위치로 띄운다
-  const [menuPosition, setMenuPosition] = useState<{ top: number; right: number } | null>(null);
-  const open = menuPosition !== null;
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  function toggleMenu() {
-    const rect = buttonRef.current?.getBoundingClientRect();
-    setMenuPosition(open || !rect ? null : { top: rect.bottom + 4, right: window.innerWidth - rect.right });
-  }
-
-  useEffect(() => {
-    if (!open) return;
-    const close = () => setMenuPosition(null);
-    function handleClickOutside(e: MouseEvent) {
-      const target = e.target as Node;
-      if (!buttonRef.current?.contains(target) && !menuRef.current?.contains(target)) close();
-    }
-    function handleEscape(e: KeyboardEvent) {
-      if (e.key === "Escape") close();
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    window.addEventListener("scroll", close, true);
-    window.addEventListener("resize", close);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-      window.removeEventListener("scroll", close, true);
-      window.removeEventListener("resize", close);
-    };
-  }, [open]);
-
   return (
     <div className={cn("flex min-h-[72px] items-center gap-3", isLeft && "opacity-60")}>
       <UserAvatar
         user={{ nickname: member.name, profileImageUrl: member.profileImageUrl ?? null }}
         size={36}
-        className={isOnline ? "bg-primary-subtle ring-2 ring-status-positive" : "bg-fill ring-1 ring-border-subtle"}
-        initialClassName={cn("font-medium", isOnline ? "text-primary" : "text-text-subtle")}
+        tone={isOnline ? "primary" : "neutral"}
+        ring={isOnline ? "online" : "offline"}
       />
 
       <div className="flex min-w-0 flex-1 flex-col gap-1">
@@ -99,68 +65,34 @@ export function MemberCard({ member, isViewerHost, onKick, onTransfer }: Readonl
           {member.isCurrentUser ? " (나)" : ""}
         </span>
         <div className="flex items-center gap-2">
-          <span
-            className={cn(
-              "rounded px-1.5 py-0.5 text-label-xs-regular",
-              member.role === "HOST" ? "bg-primary-subtle text-primary" : "bg-fill text-text-subtle",
-            )}
-          >
+          <Badge tone={member.role === "HOST" ? "brand" : "neutral"} size="md">
             {member.role === "HOST" ? "방장" : "참여자"}
-          </span>
+          </Badge>
           <MemberConnectionStatus member={member} />
         </div>
       </div>
 
       {canAct && (
-        <div className="shrink-0">
-          <button
-            ref={buttonRef}
-            type="button"
-            onClick={toggleMenu}
+        // 헤더 구성원 패널(Popover) 안에서 열리면 Base UI가 이 메뉴를 패널 안쪽으로 보아, 메뉴를 눌러도 패널이 닫히지 않는다(HeaderMemberPreview 주석)
+        <DropdownMenu>
+          <DropdownMenuTrigger
             aria-label={`${member.name} 옵션`}
-            aria-haspopup="menu"
-            aria-expanded={open}
-            className="flex size-8 cursor-pointer items-center justify-center rounded-lg text-icon transition-colors hover:bg-fill aria-expanded:bg-fill"
+            className="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-icon transition-colors hover:bg-fill aria-expanded:bg-fill"
           >
             <MenuDotHorizontalIcon size={24} />
-          </button>
-
-          {menuPosition && createPortal(
-            <div
-              ref={menuRef}
-              role="menu"
-              data-floating-menu
-              style={menuPosition}
-              className="fixed z-[60] w-60 rounded-xl bg-fill-elevate p-2 shadow-[0_2px_10px_rgba(0,0,0,0.1)]"
-            >
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => {
-                  onTransfer(member.id);
-                  setMenuPosition(null);
-                }}
-                className="flex h-10 w-full cursor-pointer items-center gap-2.5 border-b-[0.5px] border-border-subtle pl-3.5 text-left text-label-m-regular text-text transition-colors hover:bg-fill"
-              >
-                <UserEditIcon size={20} className="text-icon-subtle" />
-                방장 위임
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => {
-                  onKick(member.id);
-                  setMenuPosition(null);
-                }}
-                className="flex h-10 w-full cursor-pointer items-center gap-2.5 pl-3.5 text-left text-label-m-regular text-status-negative transition-colors hover:bg-fill"
-              >
-                <UserXIcon size={20} />
-                강제 퇴장
-              </button>
-            </div>,
-            document.body,
-          )}
-        </div>
+          </DropdownMenuTrigger>
+          {/* 지금 메뉴 폭 w-60을 유지한다 */}
+          <DropdownMenuContent align="end" className="w-60">
+            <DropdownMenuItem onClick={() => onTransfer(member.id)}>
+              <UserEditIcon size={20} />
+              방장 위임
+            </DropdownMenuItem>
+            <DropdownMenuItem variant="destructive" onClick={() => onKick(member.id)}>
+              <UserXIcon size={20} />
+              강제 퇴장
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       )}
     </div>
   );
diff --git a/src/app/(main)/member-settings/_components/RoomMembersSection.tsx b/src/app/(main)/member-settings/_components/RoomMembersSection.tsx
index 36c2bac3..386cc879 100644
--- a/src/app/(main)/member-settings/_components/RoomMembersSection.tsx
+++ b/src/app/(main)/member-settings/_components/RoomMembersSection.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { MainPageHeader } from "@/components/layout/MainPageHeader";
 import { AddMemberPanel } from "./AddMemberPanel";
 import { JoinRequestsSection } from "./JoinRequestsSection";
@@ -54,7 +54,7 @@ export function RoomMembersSection() {
           ) : null}
         </h2>
         {isMembersLoading ? (
-          <LoadingIndicator label="구성원 불러오는 중" className="flex min-h-36 w-full" />
+          <Spinner aria-label="구성원 불러오는 중" className="flex min-h-36 w-full" />
         ) : (
           <MemberList me={me} others={others} isHost={isHost} onKick={requestKick} onTransfer={requestTransfer} />
         )}
diff --git a/src/app/(main)/member-settings/_components/useMemberActions.tsx b/src/app/(main)/member-settings/_components/useMemberActions.tsx
index 6b00a6c7..b867ce2f 100644
--- a/src/app/(main)/member-settings/_components/useMemberActions.tsx
+++ b/src/app/(main)/member-settings/_components/useMemberActions.tsx
@@ -5,8 +5,15 @@ import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 
 import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
-import { alertDialogButtonClass } from "@/components/settings/SettingsActionButton";
-import { SettingsDialog } from "@/components/settings/SettingsDialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { useCurrentRoomMembership } from "@/hooks/useCurrentRoomMembership";
 import { showRoomLeftToast } from "@/lib/stomp/forced-room-exit-dispatch";
 import { useKickMember, useLeaveRoom, useTransferHost } from "@/hooks/useRooms";
@@ -32,12 +39,25 @@ function NoticeDialog({
   onClose: () => void;
 }>) {
   return (
-    <SettingsDialog title={title} onClose={onClose} appearance="alert" showCloseButton={false}>
-      <p className="whitespace-pre-line text-body-l-regular text-text">{description}</p>
-      <button type="button" className={`mt-4 w-full ${alertDialogButtonClass.neutral}`} onClick={onClose}>
-        {actionLabel}
-      </button>
-    </SettingsDialog>
+    <AlertDialog
+      open
+      // 열린 채 마운트되므로 닫기 요청(open=false)만 온다
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      {/* 지금처럼 딤을 눌러도 닫힌다 */}
+      <AlertDialogContent backdropCloseLabel={`${title} 배경 닫기`}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          {/* AlertDialogAction은 눌러도 저절로 닫히지 않는다 */}
+          <AlertDialogAction onClick={onClose}>{actionLabel}</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 }
 
@@ -97,7 +117,6 @@ export function useMemberActions() {
     <>
       {leaveDialog === "confirm" ? (
         <ConfirmDialog
-          appearance="alert"
           destructive
           title="방에서 나가시겠어요?"
           description={"방을 나가면 이 여행의 일정과 대화에\n더 이상 접근할 수 없어요."}
@@ -129,7 +148,6 @@ export function useMemberActions() {
 
       {transferTarget && roomId ? (
         <ConfirmDialog
-          appearance="alert"
           title="방장을 위임하시겠어요?"
           description={`${transferTarget.nickname}님에게 방장을 넘기면\n나는 참여자가 돼요.`}
           confirmLabel="위임"
@@ -157,7 +175,6 @@ export function useMemberActions() {
 
       {kickTarget && roomId ? (
         <ConfirmDialog
-          appearance="alert"
           destructive
           title="강제 퇴장하시겠어요?"
           description={`${kickTarget.nickname}님을 이 여행에서 내보내요.`}
diff --git a/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx b/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
index 74a0da5e..65d468d8 100644
--- a/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
+++ b/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
@@ -1,7 +1,16 @@
 "use client";
-import { useSheetDrag } from "@/components/mobile/useSheetDrag";
-import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Button } from "@/components/ui/button";
+import {
+  ResponsiveDialog,
+  ResponsiveDialogBody,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+} from "@/components/ui/responsive-dialog";
+import { Spinner } from "@/components/ui/spinner";
 import { PlanLoadingSkeleton } from "../PlanLoadingSkeleton";
 
 import { useQueries } from "@tanstack/react-query";
@@ -54,7 +63,7 @@ export function AddFromBookmarkModal({
   const {
     data: categories,
     isPending: categoriesLoading,
-    isError: categoriesError,
+    isLoadingError: categoriesError,
     error: categoriesErr,
     refetch: refetchCategories,
   } = useBookmarkCategories(roomId);
@@ -71,18 +80,10 @@ export function AddFromBookmarkModal({
     });
   }, [categories]);
 
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
-
   const {
     data: bookmarkRows,
     isPending: bookmarksLoading,
-    isError: bookmarksError,
+    isLoadingError: bookmarksError,
     error: bookmarksErr,
     refetch: refetchBookmarks,
   } = useRoomBookmarks(roomId, selectedCategoryId);
@@ -148,7 +149,6 @@ export function AddFromBookmarkModal({
     useCreateScheduleItem();
 
   const busy = isCreatingItem || addingGooglePlaceId != null;
-  const sheetDrag = useSheetDrag(onClose, busy);
 
   const handleAddPlace = useCallback(
     async (googlePlaceId: string) => {
@@ -163,7 +163,7 @@ export function AddFromBookmarkModal({
       setAddingGooglePlaceId(gid);
       const index = insertIndex ?? places.length;
       try {
-        const created = await createItem({
+        const { createdItem: created } = await createItem({
           roomId,
           scheduleId,
           googlePlaceId: gid,
@@ -224,52 +224,29 @@ export function AddFromBookmarkModal({
   );
 
   return (
-    <div
-      role="presentation"
-      className="fixed inset-0 z-[60] flex flex-col justify-center px-4 mobile:justify-end mobile:px-0"
+    // PC는 가운데 대화상자, 모바일 기기는 아래 시트(DECISIONS 'Dialog' 반응형). 추가 중(busy)에는 Esc·딤·닫기·스와이프로 닫히지 않는다
+    <ResponsiveDialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      closeDisabled={busy}
     >
-      {/* 딤은 시트와 따로 둬서 기준 시트처럼 딤만 서서히 나타나고 시트는 아래에서 올라온다 */}
-      <div
-        aria-hidden
-        className="absolute inset-0 bg-black/40 mobile:bg-[#0f1724]/35 mobile:animate-in mobile:fade-in-0 mobile:duration-200"
-        onMouseDown={onClose}
-      />
-      <div
-        style={sheetDrag.surfaceStyle}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="add-from-bookmark-modal-title"
-        onMouseDown={(e) => e.stopPropagation()}
-        className={cn(
-          "relative flex max-h-[min(85vh,560px)] w-full flex-col overflow-hidden",
-          // PC는 가운데 모달, 모바일 기기는 화면 폭과 관계없이 바텀시트
-          "mx-auto max-w-md rounded-2xl border border-gray-border bg-white shadow-lg",
-          "mobile:max-w-none mobile:rounded-b-none mobile:rounded-t-[20px] mobile:border-x-0 mobile:border-b-0 mobile:shadow-[0_-8px_32px_-8px_rgba(0,0,0,0.12)]",
-          "mobile:animate-in mobile:slide-in-from-bottom mobile:duration-200",
-          "pb-[max(env(safe-area-inset-bottom,0px),12px)]",
-        )}
+      {/* 높이 상한은 지금 값. 폴더 칩·제목은 고정하고 장소 목록만 스크롤한다. 지금 PC 모달에는 닫기 X가 없다(아래 닫기 버튼) */}
+      <ResponsiveDialogContent
+        size="md"
+        showCloseButton={false}
+        closeLabel="북마크에서 추가 닫기"
+        className="max-h-[min(85vh,560px)]"
       >
-        <BottomSheetDragHandle drag={sheetDrag}>
-        <div
-          aria-hidden
-          className="mx-auto mt-[11px] hidden h-1 w-9 shrink-0 rounded-[2px] bg-border-subtle mobile:block"
-        />
-
-        <div className="shrink-0 px-5 pb-2 pt-3">
-          <h2
-            id="add-from-bookmark-modal-title"
-            className="text-title-l mobile:text-title-m font-semibold mobile:font-bold text-neutral-900"
-          >
-            북마크에서 추가
-          </h2>
-          <p className="mt-1 text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-dark-gray break-keep text-pretty">
-            북마크 장소를 이 일차에 추가해요.
-          </p>
-        </div>
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>북마크에서 추가</ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>북마크 장소를 이 일차에 추가해요.</ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
 
-        </BottomSheetDragHandle>
+        <ResponsiveDialogBody className="min-h-0 flex-1 gap-3">
         {categoriesLoading ? (
-          <div className="px-5 py-6 text-center"><LoadingIndicator label="북마크 불러오는 중" /></div>
+          <div className="px-5 py-6 text-center"><Spinner aria-label="북마크 불러오는 중" /></div>
         ) : categoriesError ? (
           <div className="space-y-2 px-5 py-6 text-center">
             <p className="text-body-m-regular mobile:text-body-s-regular text-primary">
@@ -293,7 +270,8 @@ export function AddFromBookmarkModal({
           </div>
         ) : (
           <>
-            <div className="shrink-0 overflow-x-auto overscroll-x-contain px-5 pb-3 [scrollbar-color:rgba(0,0,0,0.15)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-black/15">
+            {/* 칩 줄과 목록은 지금처럼 표면 끝까지 닿는다. 표면(Dialog p-5·시트 Body px-5)의 좌우 20px만큼 넓힌다 */}
+            <div className="-mx-5 shrink-0 overflow-x-auto overscroll-x-contain px-5 [scrollbar-color:rgba(0,0,0,0.15)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-black/15">
               <div className="flex w-max gap-2">
                 {categories.map((c) => {
                   const selected = selectedCategoryId === c.categoryId;
@@ -322,7 +300,7 @@ export function AddFromBookmarkModal({
               </div>
             </div>
 
-            <div className="min-h-0 flex-1 overflow-y-auto border-t border-gray-border [scrollbar-color:rgba(0,0,0,0.15)_transparent]">
+            <div className="-mx-5 min-h-0 flex-1 overflow-y-auto border-t border-gray-border [scrollbar-color:rgba(0,0,0,0.15)_transparent]">
               {bookmarksLoading ? (
                 <PlanLoadingSkeleton places className="px-5" />
               ) : bookmarksError ? (
@@ -377,17 +355,12 @@ export function AddFromBookmarkModal({
           </>
         )}
 
-        <div className="shrink-0 border-t border-gray-border px-5 pt-3">
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={busy}
-            className="w-full cursor-pointer rounded-xl border border-gray-border py-2.5 text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-800 transition-colors hover:bg-bubble-gray disabled:cursor-not-allowed disabled:opacity-60"
-          >
-            닫기
-          </button>
-        </div>
-      </div>
-    </div>
+        </ResponsiveDialogBody>
+
+        <ResponsiveDialogFooter>
+          <ResponsiveDialogClose render={<Button variant="weak" />}>닫기</ResponsiveDialogClose>
+        </ResponsiveDialogFooter>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
   );
 }
diff --git a/src/app/(main)/plan/_components/itinerary/PlanDaySection.menu.test.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.menu.test.tsx
new file mode 100644
index 00000000..9808da82
--- /dev/null
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.menu.test.tsx
@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { PlanDaySection } from "./PlanDaySection";
+
+let host: HTMLDivElement;
+let root: Root;
+const outer = vi.fn();
+const addDay = vi.fn();
+const hostEvents = { onClick: outer, onMouseDown: outer, onPointerDown: outer, onTouchStart: outer };
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  vi.clearAllMocks();
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+it("keeps menu trigger and portal actions out of the day host while retaining keyboard controls", async () => {
+  await act(async () => root.render(
+    <div {...hostEvents}>
+      <PlanDaySection title="1일차" onRequestInsertScheduleAfter={addDay} />
+    </div>,
+  ));
+  const trigger = document.querySelector<HTMLButtonElement>('[aria-label="일차 메뉴"]')!;
+  for (const type of ["mousedown", "pointerdown", "touchstart"]) {
+    await act(async () => trigger.dispatchEvent(new MouseEvent(type, { bubbles: true })));
+  }
+  await act(async () => trigger.click());
+  expect(outer).not.toHaveBeenCalled();
+  const item = document.querySelector<HTMLElement>('[role="menuitem"]')!;
+  expect(item).not.toBeNull();
+  for (const type of ["mousedown", "pointerdown", "touchstart"]) {
+    await act(async () => item.dispatchEvent(new MouseEvent(type, { bubbles: true })));
+  }
+  await act(async () => item.click());
+  expect(addDay).toHaveBeenCalledOnce();
+  expect(outer).not.toHaveBeenCalled();
+  await act(async () => trigger.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true, cancelable: true })));
+  expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  await act(async () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
+  expect(trigger.getAttribute("aria-expanded")).toBe("false");
+  expect(document.querySelector('[aria-controls$="-panel"]')?.getAttribute("aria-expanded")).toBe("true");
+});
diff --git a/src/app/(main)/plan/_components/itinerary/PlanDaySection.route-switch.test.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.route-switch.test.tsx
new file mode 100644
index 00000000..717c8d81
--- /dev/null
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.route-switch.test.tsx
@@ -0,0 +1,30 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it } from "vitest";
+import { PlanDaySection } from "./PlanDaySection";
+import { usePlanScheduleRouteVisibilityStore } from "@/stores/plan-schedule-route-visibility-store";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+it("label and switch change route visibility without collapsing the day", async () => {
+  usePlanScheduleRouteVisibilityStore.setState({ visibleByScheduleId: {}, visibilityOrder: [] });
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  try {
+    await act(async () => root.render(<PlanDaySection title="1일차" itineraryScheduleId={10}>장소</PlanDaySection>));
+    const heading = host.querySelector<HTMLButtonElement>('button[aria-expanded]')!;
+    const toggle = host.querySelector<HTMLButtonElement>('[role="switch"]')!;
+    await act(async () => host.querySelector("label")!.click());
+    expect(toggle.getAttribute("aria-checked")).toBe("false");
+    expect(usePlanScheduleRouteVisibilityStore.getState().visibleByScheduleId[10]).toBe(false);
+    expect(heading.getAttribute("aria-expanded")).toBe("true");
+    await act(async () => toggle.click());
+    expect(toggle.getAttribute("aria-checked")).toBe("true");
+    expect(heading.getAttribute("aria-expanded")).toBe("true");
+  } finally {
+    await act(async () => root.unmount());
+    host.remove();
+  }
+});
diff --git a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
index b13f43ff..eed0eb6c 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
@@ -1,22 +1,23 @@
 "use client";
 
+import { MenuDotHorizontalIcon, PlusIcon, TrashIcon } from "@/assets/icons";
 import { ExpenseIcon } from "@/components/icons/ExpenseIcon";
-import { useOnClickOutside } from "@/hooks/useOnClickOutside";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Switch } from "@/components/ui/switch";
 import { MAIN_CARD_INNER_PADDING_X_CLASS } from "@/lib/layout-tokens";
 import { usePlanItineraryExpandedStore } from "@/stores/plan-itinerary-expanded-store";
 import { usePlanScheduleRouteVisibilityStore } from "@/stores/plan-schedule-route-visibility-store";
 import { usePlanItemCrossDayDragStore } from "@/stores/plan-item-cross-day-drag-store";
 import { cn } from "@/lib/utils";
-import {
-  ChevronDown,
-  ChevronUp,
-  GripVertical,
-  MoreHorizontal,
-  Plus,
-  Trash2,
-} from "lucide-react";
-import { useCallback, useId, useRef, useState } from "react";
-import type { CSSProperties, DragEvent, ReactNode, Ref } from "react";
+import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
+import { useCallback, useId, useState } from "react";
+import type { CSSProperties, DragEvent, ReactNode, Ref, SyntheticEvent } from "react";
 
 export type PlanDaySectionDragHandleProps = {
   dragDisabled?: boolean;
@@ -61,6 +62,16 @@ export type PlanDaySectionProps = {
   };
 };
 
+// 메뉴는 body로 포털되지만 React 이벤트는 트리를 따라 섹션(일차 간 드롭 핸들러)으로 올라간다.
+// 트리거와 포털 표면에서만 포인터 전파를 끊고, 키보드는 Base UI에 전달한다
+const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+const pointerBoundary = {
+  onClick: stopPropagation,
+  onMouseDown: stopPropagation,
+  onPointerDown: stopPropagation,
+  onTouchStart: stopPropagation,
+};
+
 export function PlanDaySection({
   title,
   subtitle,
@@ -119,10 +130,6 @@ export function PlanDaySection({
   const setRouteVisible = usePlanScheduleRouteVisibilityStore(
     (s) => s.setRouteVisible,
   );
-  const toggleRouteVisible = useCallback(() => {
-    if (trackedSid === undefined) return;
-    setRouteVisible(trackedSid, !routeVisible);
-  }, [trackedSid, routeVisible, setRouteVisible]);
 
   const toggle = useCallback(() => {
     if (trackedSid !== undefined) {
@@ -151,8 +158,6 @@ export function PlanDaySection({
     onRequestAddExpense != null || onRequestDeleteSchedule != null || onRequestInsertScheduleAfter != null;
 
   const [menuOpen, setMenuOpen] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-  useOnClickOutside(menuRef, () => setMenuOpen(false));
 
   return (
     <section
@@ -214,10 +219,9 @@ export function PlanDaySection({
                 {subtitle || title}
               </h2>
               {subtitle ? (
-                // 디자인 시스템 Badge / Weak / Brand / md — 배경색은 시맨틱 토큰이 없어 원시 토큰을 쓴다
-                <span className="inline-flex h-5 shrink-0 items-center rounded bg-[var(--blue-50)] px-1.5 text-label-xs-regular text-primary">
+                <Badge tone="brand" size="md">
                   {title}
-                </span>
+                </Badge>
               ) : null}
             </div>
             <span className="shrink-0 text-dark-gray" aria-hidden>
@@ -229,88 +233,45 @@ export function PlanDaySection({
             </span>
           </button>
           {showScheduleMenu ? (
-            <div ref={menuRef} className="relative shrink-0 self-center">
-              <button
-                type="button"
+            <DropdownMenu open={menuOpen && !isScheduleMenuDisabled} onOpenChange={setMenuOpen}>
+              <DropdownMenuTrigger
+                {...pointerBoundary}
                 aria-label="일차 메뉴"
-                aria-expanded={menuOpen}
-                aria-haspopup="menu"
                 disabled={isScheduleMenuDisabled}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  if (isScheduleMenuDisabled) return;
-                  setMenuOpen((v) => !v);
-                }}
                 className={cn(
-                  "rounded-lg p-2 text-dark-gray transition-colors",
+                  "shrink-0 self-center rounded-lg p-2 text-dark-gray transition-colors",
                   isScheduleMenuDisabled
                     ? "cursor-not-allowed opacity-40"
                     : "cursor-pointer hover:bg-bubble-gray/60",
                 )}
               >
-                <MoreHorizontal className="h-5 w-5" aria-hidden />
-              </button>
-              {menuOpen && !isScheduleMenuDisabled ? (
-                <div
-                  className="absolute right-0 top-full z-50 mt-1 w-max overflow-hidden rounded-xl border border-gray-border bg-white py-1 shadow-lg"
-                  role="menu"
-                >
-                  {onRequestAddExpense ? (
-                    <button
-                      type="button"
-                      role="menuitem"
-                      disabled={isAddExpenseDisabled}
-                      className="flex w-full cursor-pointer items-center gap-2 whitespace-nowrap px-3 py-2.5 text-left text-label-l-regular mobile:text-label-m-regular text-neutral-900 hover:bg-bubble-gray disabled:cursor-not-allowed disabled:opacity-40"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setMenuOpen(false);
-                        onRequestAddExpense();
-                      }}
-                    >
-                      <ExpenseIcon className="size-4 shrink-0" />
-                      {title} 비용 추가
-                    </button>
-                  ) : null}
-                  {onRequestInsertScheduleAfter ? (
-                    <button
-                      type="button"
-                      role="menuitem"
-                      className="flex w-full cursor-pointer items-center gap-2 whitespace-nowrap px-3 py-2.5 text-left text-label-l-regular mobile:text-label-m-regular text-neutral-900 hover:bg-bubble-gray"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setMenuOpen(false);
-                        onRequestInsertScheduleAfter();
-                      }}
-                    >
-                      <Plus className="size-4 shrink-0" aria-hidden />
-                      일차 추가
-                    </button>
-                  ) : null}
-                  {onRequestDeleteSchedule ? (
-                    <button
-                      type="button"
-                      role="menuitem"
-                      disabled={isDeleteScheduleDisabled}
-                      className={cn(
-                        "flex w-full items-center gap-2 whitespace-nowrap px-3 py-2.5 text-left text-label-l-regular mobile:text-label-m-regular text-status-negative hover:bg-bubble-gray",
-                        isDeleteScheduleDisabled
-                          ? "cursor-not-allowed opacity-40"
-                          : "cursor-pointer",
-                      )}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setMenuOpen(false);
-                        if (isDeleteScheduleDisabled) return;
-                        onRequestDeleteSchedule();
-                      }}
-                    >
-                      <Trash2 className="size-4 shrink-0" aria-hidden />
-                      일차 삭제
-                    </button>
-                  ) : null}
-                </div>
-              ) : null}
-            </div>
+                <MenuDotHorizontalIcon size={20} />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" {...pointerBoundary}>
+                {onRequestAddExpense ? (
+                  <DropdownMenuItem disabled={isAddExpenseDisabled} onClick={onRequestAddExpense}>
+                    <ExpenseIcon />
+                    {title} 비용 추가
+                  </DropdownMenuItem>
+                ) : null}
+                {onRequestInsertScheduleAfter ? (
+                  <DropdownMenuItem onClick={onRequestInsertScheduleAfter}>
+                    <PlusIcon />
+                    일차 추가
+                  </DropdownMenuItem>
+                ) : null}
+                {onRequestDeleteSchedule ? (
+                  <DropdownMenuItem
+                    variant="destructive"
+                    disabled={isDeleteScheduleDisabled}
+                    onClick={onRequestDeleteSchedule}
+                  >
+                    <TrashIcon />
+                    일차 삭제
+                  </DropdownMenuItem>
+                ) : null}
+              </DropdownMenuContent>
+            </DropdownMenu>
           ) : null}
         </div>
         {summaryAction || trackedSid !== undefined ? (
@@ -320,27 +281,16 @@ export function PlanDaySection({
           )}>
             <div className="min-w-0 flex-1">{summaryAction}</div>
             {trackedSid !== undefined ? (
-              <button
-                type="button"
-                role="switch"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  toggleRouteVisible();
-                }}
-                aria-checked={routeVisible}
-                className="flex min-h-8 shrink-0 cursor-pointer items-center gap-2 rounded-lg px-2 text-label-xs-regular text-text-subtle transition-colors hover:bg-bubble-gray/60 focus-visible:outline-2 focus-visible:outline-primary"
+              <label
+                className="flex min-h-8 shrink-0 cursor-pointer items-center gap-2 rounded-lg px-2 text-label-xs-regular text-text-subtle transition-colors select-none hover:bg-fill"
               >
                 지도에 경로 표시
-                <span aria-hidden="true" className={cn(
-                  "relative h-5 w-9 rounded-full transition-colors",
-                  routeVisible ? "bg-primary" : "bg-gray-300",
-                )}>
-                  <span className={cn(
-                    "absolute top-0.5 left-0.5 size-4 rounded-full bg-white shadow-sm transition-transform",
-                    routeVisible && "translate-x-4",
-                  )} />
-                </span>
-              </button>
+                <Switch
+                  size="sm"
+                  checked={routeVisible}
+                  onCheckedChange={(checked) => setRouteVisible(trackedSid, checked)}
+                />
+              </label>
             ) : null}
           </div>
         ) : null}
diff --git a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
index cadd1c3f..b80310a2 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
@@ -5,6 +5,9 @@ import { MemoIcon } from "@/components/icons";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 
+import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
 import { useUpdateScheduleItem } from "@/hooks/useRooms";
 import { PLAN_PLACE_CARD_TW } from "@/lib/layout-tokens";
 import { renderTextWithLinks } from "@/lib/text/renderTextWithLinks";
@@ -35,73 +38,6 @@ function isLocallyDirty(draft: string, editStartMemo: string): boolean {
   return draft !== editStartMemo;
 }
 
-function MemoOverwriteConfirmDialog({
-  open,
-  isPending,
-  onCancel,
-  onConfirm,
-}: {
-  open: boolean;
-  isPending: boolean;
-  onCancel: () => void;
-  onConfirm: () => void;
-}) {
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onCancel();
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [open, onCancel]);
-
-  if (!open) return null;
-
-  return (
-    <div
-      role="presentation"
-      className="fixed inset-0 z-[70] flex items-center justify-center bg-black/40 px-4"
-      onMouseDown={(ev) => {
-        if (ev.target === ev.currentTarget) onCancel();
-      }}
-    >
-      <div
-        role="alertdialog"
-        aria-modal="true"
-        aria-labelledby="memo-overwrite-dialog-title"
-        aria-describedby="memo-overwrite-dialog-desc"
-        onMouseDown={(e) => e.stopPropagation()}
-        className="w-full max-w-sm rounded-2xl border border-gray-border bg-white p-5 shadow-lg"
-      >
-        <h2 id="memo-overwrite-dialog-title" className="text-body-m-emphasis mobile:text-body-s-emphasis font-semibold text-gray-900">
-          다른 사람의 입력을 덮어씁니다!
-        </h2>
-        <p id="memo-overwrite-dialog-desc" className="mt-2 text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-dark-gray">
-          다른 멤버가 메모를 수정했어요. 저장하면 그 내용 대신 지금 작성 중인 메모로 바뀝니다.
-        </p>
-        <div className="mt-5 flex justify-end gap-2">
-          <button
-            type="button"
-            disabled={isPending}
-            onClick={onCancel}
-            className="cursor-pointer rounded-md border border-gray-border px-3 py-1.5 text-label-m-regular mobile:text-label-s-regular font-medium text-gray-800 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            취소
-          </button>
-          <button
-            type="button"
-            disabled={isPending}
-            onClick={onConfirm}
-            className="cursor-pointer rounded-md bg-primary px-3 py-1.5 text-label-m-regular mobile:text-label-s-regular font-medium text-white transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            {isPending ? "저장 중…" : "확인"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 export function PlanItemMemoReadOnly({
   memo,
   onDelete,
@@ -224,24 +160,25 @@ export function PlanItemMemoEditor({
         </div>
 
         <div className={PLAN_PLACE_CARD_TW.editorBody}>
-          <textarea
+          <Textarea
             aria-label="일정 메모"
             value={draft}
             maxLength={SCHEDULE_ITEM_MEMO_MAX_LENGTH}
-            rows={4}
             placeholder="여기에 메모를 작성하세요"
             disabled={isPending}
             onMouseDown={stopCardActivation}
             onClick={stopCardActivation}
             onChange={(e) => setDraft(e.target.value)}
-            className={cn(PLAN_PLACE_CARD_TW.memoTextarea, "select-text cursor-text")}
+            // 카드(article)의 select-none과 잡기·기본 커서를 물려받지 않게 글자 선택·글자 커서로 되돌린다
+            className="select-text cursor-text"
           />
           <div className={PLAN_PLACE_CARD_TW.editorFooterRow}>
             <span className="mr-auto text-caption-s-regular tabular-nums text-dark-gray/60">
               {draft.length}/{SCHEDULE_ITEM_MEMO_MAX_LENGTH}
             </span>
-            <button
-              type="button"
+            <Button
+              variant="outline"
+              size="sm"
               onClick={() => {
                 setDraft(incomingMemo);
                 setEditStartMemo(normalizeMemoDraft(incomingMemo));
@@ -249,34 +186,32 @@ export function PlanItemMemoEditor({
                 onClose();
               }}
               disabled={isPending}
-              className={cn(
-                "cursor-pointer border border-gray-border bg-white text-gray-800 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40",
-                PLAN_PLACE_CARD_TW.timeSaveButtonCompact
-              )}
             >
               취소
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              tone="brand"
+              size="sm"
               onClick={() => void handleSave()}
-              disabled={isPending || !dirty}
-              className={cn(
-                "cursor-pointer bg-primary text-white transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-40",
-                PLAN_PLACE_CARD_TW.timeSaveButtonCompact
-              )}
+              disabled={!dirty}
+              loading={isPending}
+              loadingLabel="저장 중"
             >
-              {isPending ? "저장 중…" : "저장"}
-            </button>
+              저장
+            </Button>
           </div>
         </div>
       </div>
 
-      <MemoOverwriteConfirmDialog
-        open={overwriteDialogOpen}
-        isPending={isPending}
-        onCancel={() => setOverwriteDialogOpen(false)}
-        onConfirm={() => void commitSave()}
-      />
+      {overwriteDialogOpen ? (
+        <ConfirmDialog
+          title="다른 사람의 입력을 덮어씁니다!"
+          description="다른 멤버가 메모를 수정했어요. 저장하면 그 내용 대신 지금 작성 중인 메모로 바뀝니다."
+          isPending={isPending}
+          onConfirm={() => void commitSave()}
+          onCancel={() => setOverwriteDialogOpen(false)}
+        />
+      ) : null}
     </>
   );
 }
diff --git a/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.test.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.test.tsx
index b845c5d5..c1787bcb 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.test.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.test.tsx
@@ -5,13 +5,14 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => ({
   mutateAsync: vi.fn(),
+  pending: false,
   success: vi.fn(),
   error: vi.fn(),
 }));
 vi.mock("@/hooks/useRooms", () => ({
   useUpdateScheduleItem: () => ({
     mutateAsync: mocks.mutateAsync,
-    isPending: false,
+    isPending: mocks.pending,
   }),
 }));
 vi.mock("sonner", () => ({
@@ -26,7 +27,7 @@ async function render() {
   await act(async () => root.render(<PlanItemTimeEditor {...props} />));
 }
 async function click(label: string) {
-  const button = [...container.querySelectorAll("button")].find(
+  const button = [...document.querySelectorAll("button")].find(
     (el) => el.getAttribute("aria-label") === label || el.textContent === label,
   );
   expect(button, label).toBeDefined();
@@ -34,7 +35,7 @@ async function click(label: string) {
 }
 const fields = ["시작 시", "시작 분", "종료 시", "종료 분"];
 function input(column: number) {
-  const el = container.querySelector<HTMLInputElement>(`input[aria-label="${fields[column]}"]`);
+  const el = document.querySelector<HTMLInputElement>(`input[aria-label="${fields[column]}"]`);
   expect(el, fields[column]).not.toBeNull();
   return el!;
 }
@@ -49,6 +50,12 @@ async function type(column: number, value: string) {
 async function key(el: Element, key: string, shiftKey = false) {
   await act(async () => el.dispatchEvent(new KeyboardEvent("keydown", { key, shiftKey, bubbles: true, cancelable: true })));
 }
+// Base UI는 처음 포커스를 다음 animation frame에 옮긴다
+async function nextFrame() {
+  await act(async () => {
+    await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+  });
+}
 function body() {
   return mocks.mutateAsync.mock.calls.at(-1)?.[0].body;
 }
@@ -56,6 +63,7 @@ beforeEach(() => {
   vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
   HTMLElement.prototype.scrollTo = vi.fn();
   vi.clearAllMocks();
+  mocks.pending = false;
   mocks.mutateAsync.mockResolvedValue({});
   container = document.createElement("div");
   document.body.append(container);
@@ -168,24 +176,26 @@ describe("schedule time editor", () => {
 });
 
 describe("web time editing", () => {
-  it("prefills exact minutes and applies typed values with Enter", async () => {
+  it.each([0, 1, 2, 3])("prefills exact minutes and applies typed values with Enter from input %s", async (column) => {
     props.startTime = "09:07";
     props.endTime = "10:13";
     await render();
+    await nextFrame();
     expect(fields.map((_, i) => selected(i))).toEqual(["09", "07", "10", "13"]);
     expect(document.activeElement).toBe(input(0));
     await type(0, "8");
     expect(selected(0)).toBe("8");
     await type(1, "5");
-    await key(input(1), "Enter");
+    await key(input(column), "Enter");
     expect(body()).toEqual({ startTime: "08:05" });
   });
   it.each(["24", "-1", "abc", "", "100"])("shows invalid hour %s without saving", async (value) => {
     await render();
     await type(0, value);
     expect(input(0).getAttribute("aria-invalid")).toBe("true");
-    expect(container.querySelector('[role="alert"]')?.textContent).toBeTruthy();
+    expect(document.querySelector('[role="alert"]')?.textContent).toBeTruthy();
     await key(input(0), "Enter");
+    expect(mocks.error).toHaveBeenCalledOnce();
     expect(mocks.mutateAsync).not.toHaveBeenCalled();
     await type(0, "22");
     expect(input(0).getAttribute("aria-invalid")).toBe("false");
@@ -201,24 +211,38 @@ describe("web time editing", () => {
     await click("적용");
     expect(body()).toEqual({ startTime: "23:59" });
   });
-  it("traps Tab at both ends and restores opener focus after Escape", async () => {
+  // Tab 순환(포커스 가두기)은 Base UI 대화상자가 맡는다. 바깥 요소는 aria-hidden으로 접근성 트리에서 빠진다
+  it("hides outside content while open and restores opener focus after Escape", async () => {
     const opener = document.createElement("button");
     document.body.append(opener);
     opener.focus();
     props.onClose = vi.fn(() => root.render(null));
     await render();
-    const focusable = [...container.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), select:not(:disabled)')];
-    focusable[0].focus();
-    await key(focusable[0], "Tab", true);
-    expect(document.activeElement).toBe(focusable.at(-1));
-    await key(focusable.at(-1)!, "Tab");
-    expect(document.activeElement).toBe(focusable[0]);
+    await nextFrame();
+    expect(document.querySelector('[role="dialog"]')?.contains(document.activeElement)).toBe(true);
+    expect(opener.getAttribute("aria-hidden")).toBe("true");
     await key(input(0), "Escape");
+    await nextFrame();
     expect(props.onClose).toHaveBeenCalledOnce();
     expect(mocks.mutateAsync).not.toHaveBeenCalled();
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+    expect(opener.hasAttribute("aria-hidden")).toBe(false);
     expect(document.activeElement).toBe(opener);
     opener.remove();
   });
+  it("does not close by Escape, X or cancel while saving and names the apply button as saving", async () => {
+    mocks.pending = true;
+    await render();
+    const apply = document.querySelector<HTMLButtonElement>('button[type="submit"]')!;
+    expect(apply.getAttribute("aria-busy")).toBe("true");
+    expect(apply.getAttribute("aria-disabled")).toBe("true");
+    expect(document.getElementById(apply.getAttribute("aria-labelledby")!)?.textContent).toBe("저장 중");
+    await key(document.querySelector('[role="dialog"]')!, "Escape");
+    await click("닫기");
+    await click("취소");
+    expect(props.onClose).not.toHaveBeenCalled();
+    expect(document.querySelector('[role="dialog"]')).not.toBeNull();
+  });
   it("keeps the draft open on server failure", async () => {
     mocks.mutateAsync.mockRejectedValue(new Error("synthetic failure"));
     await render();
@@ -229,3 +253,15 @@ describe("web time editing", () => {
     expect(mocks.error).toHaveBeenCalledWith("synthetic failure");
   });
 });
+
+
+it("opening and focusing unset desktop fields never enables saving or sends a PATCH", async () => {
+  props = { ...props, startTime: "", endTime: null };
+  await render();
+  await act(async () => { input(0).focus(); input(1).focus(); });
+  expect(fields.map((_, i) => selected(i))).toEqual(["", "", "", ""]);
+  const apply = [...document.querySelectorAll("button")].find(b => b.textContent === "적용")!;
+  expect(apply.disabled).toBe(true);
+  await click("적용");
+  expect(mocks.mutateAsync).not.toHaveBeenCalled();
+});
diff --git a/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.tsx
index 14e917b5..501d2c22 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.tsx
@@ -1,9 +1,19 @@
 "use client";
 
-import { Clock, X } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useForm, useStore } from "@tanstack/react-form";
+import { useId, useRef } from "react";
 import { toast } from "sonner";
 
+import { TimeClockIcon } from "@/assets/icons";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { useUpdateScheduleItem } from "@/hooks/useRooms";
 import { PLAN_PLACE_CARD_TW } from "@/lib/layout-tokens";
 import {
@@ -23,6 +33,11 @@ type PlanItemTimeEditorProps = {
   onClose: () => void;
 };
 
+/** 칸 값이 undefined면 사용자가 아직 고치지 않은 칸이라 재조회된 서버 값을 따른다. ""는 비운 칸(초기화)이다 */
+type TimeDraftValues = { start: string | undefined; end: string | undefined };
+
+const UNTOUCHED_DRAFT: TimeDraftValues = { start: undefined, end: undefined };
+
 const fieldLabelClass = PLAN_PLACE_CARD_TW.timeFieldLabel;
 
 function canonicalDraft(value: string): string {
@@ -39,165 +54,153 @@ export function PlanItemTimeEditor({
   onClose,
 }: PlanItemTimeEditorProps) {
   const serverStartHm = normalizeStartTimeToHm(startTime);
-
   const serverEndHm = normalizeStartTimeToHm(endTime ?? "");
-  // 편집한 필드의 초안은 보존하고 나머지는 재조회된 서버 값을 따릅니다.
-  const [draftStart, setStartHm] = useState<string>();
-  const [draftEnd, setEndHm] = useState<string>();
-  const startHm = canonicalDraft(draftStart ?? serverStartHm);
-  const endHm = canonicalDraft(draftEnd ?? serverEndHm);
   const { mutateAsync, isPending } = useUpdateScheduleItem();
-
-  const dialogRef = useRef<HTMLDivElement>(null);
+  const formId = useId();
+  const formRef = useRef<HTMLFormElement>(null);
   const savingRef = useRef(false);
 
-  useEffect(() => {
-    const opener = document.activeElement;
-    dialogRef.current?.querySelector("input")?.focus();
-    return () => {
-      if (opener instanceof HTMLElement && opener.isConnected) opener.focus();
-    };
-  }, []);
-
-  const durationPreview =
-    startHm && endHm ? computeDurationMinutesFromRange(startHm, endHm) : null;
-
-  async function handleSave() {
-    if (isPending || savingRef.current || !dirty) return;
-    const validation = validateScheduleTimeDraft(startHm, endHm);
-    if (!validation.valid) {
-      toast.error(validation.message);
-      return;
-    }
-
-    savingRef.current = true;
-    try {
-      await mutateAsync({
-        roomId,
-        scheduleId,
-        itemId,
-        body: {
-          ...(startHm !== serverStartHm ? { startTime: startHm || null } : {}),
-          ...(endHm !== serverEndHm || (draftStart === "" && serverStartHm)
-            ? { endTime: endHm || null }
-            : {}),
-        },
-      });
+  // 서버 값과 합친 시각. 렌더 중(안내 문장·미리보기)과 제출 검증이 같은 계산을 쓴다
+  const resolveTimes = (values: TimeDraftValues) => ({
+    startHm: canonicalDraft(values.start ?? serverStartHm),
+    endHm: canonicalDraft(values.end ?? serverEndHm),
+  });
+
+  const form = useForm({
+    // 편집한 칸의 초안만 값으로 들고 나머지는 서버 값을 따른다. defaultValues에 서버 값을 넣으면
+    // 한 칸만 고쳐도 폼 전체가 touched가 되어 다른 칸이 재조회 값을 따라가지 못한다(FormApi.update)
+    defaultValues: UNTOUCHED_DRAFT,
+    validators: {
+      // 시작·종료 교차 검증이라 폼 단위다. 화면 안내 문장은 재조회로 서버 값이 바뀌어도 맞도록 렌더 중에 같은 함수로 계산한다
+      onSubmit: ({ value }) => {
+        const { startHm, endHm } = resolveTimes(value);
+        const result = validateScheduleTimeDraft(startHm, endHm);
+        return result.valid ? undefined : result.message;
+      },
+    },
+    onSubmitInvalid: ({ formApi }) => {
+      const [message] = formApi.state.errors;
+      if (message) toast.error(message);
+    },
+    onSubmit: async ({ value }) => {
+      const { startHm, endHm } = resolveTimes(value);
+      savingRef.current = true;
+      try {
+        await mutateAsync({
+          roomId,
+          scheduleId,
+          itemId,
+          body: {
+            ...(startHm !== serverStartHm ? { startTime: startHm || null } : {}),
+            ...(endHm !== serverEndHm || (value.start === "" && serverStartHm)
+              ? { endTime: endHm || null }
+              : {}),
+          },
+        });
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : "시간을 저장하지 못했어요.",
+        );
+        return;
+      } finally {
+        savingRef.current = false;
+      }
       toast.success("시간을 저장했어요.");
       onClose();
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : "시간을 저장하지 못했어요.",
-      );
-    } finally {
-      savingRef.current = false;
-    }
-  }
+    },
+  });
 
+  const draft = useStore(form.store, (state) => state.values);
+  const { startHm, endHm } = resolveTimes(draft);
+  const durationPreview =
+    startHm && endHm ? computeDurationMinutesFromRange(startHm, endHm) : null;
   const dirty = serverStartHm !== startHm || serverEndHm !== endHm;
   const validation = validateScheduleTimeDraft(startHm, endHm);
-  const canSave = !isPending && dirty && validation.valid;
+  const describedBy = validation.valid ? `${formId}-help` : `${formId}-help ${formId}-error`;
+
+  function submit() {
+    // 라이브러리는 연타를 막지 않는다. isPending은 다음 렌더에 바뀌어 ref 락을 함께 본다
+    if (isPending || savingRef.current || form.state.isSubmitting || !dirty) return;
+    void form.handleSubmit();
+  }
 
   return (
-    <div
-      role="presentation"
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4 backdrop-blur-sm"
-      onMouseDown={(e) => {
-        if (e.target === e.currentTarget && !isPending) onClose();
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
       }}
+      closeDisabled={isPending}
     >
-      <div
-        ref={dialogRef}
-        role="dialog"
-        tabIndex={-1}
-        onKeyDown={(e) => {
-          if (e.key === "Escape") {
-            e.preventDefault();
-            e.stopPropagation();
-            if (!isPending && !savingRef.current) onClose();
-          } else if (e.key === "Enter" && e.target instanceof HTMLInputElement) {
-            e.preventDefault();
-            void handleSave();
-          } else if (e.key === "Tab") {
-            const controls = [...e.currentTarget.querySelectorAll<HTMLElement>(
-              "button:not(:disabled), input:not(:disabled)",
-            )];
-            const first = controls[0];
-            const last = controls.at(-1);
-            if (!first) {
-              e.preventDefault();
-              e.currentTarget.focus();
-            } else if (e.shiftKey && (document.activeElement === first || document.activeElement === e.currentTarget)) {
-              e.preventDefault();
-              last?.focus();
-            } else if (!e.shiftKey && (document.activeElement === last || document.activeElement === e.currentTarget)) {
-              e.preventDefault();
-              first.focus();
-            }
-          }
-        }}
-        aria-modal="true"
-        aria-labelledby="plan-item-time-dialog-title"
-        onMouseDown={(e) => e.stopPropagation()}
-        onClick={(e) => e.stopPropagation()}
-        className="max-h-[90dvh] w-full max-w-sm overflow-y-auto rounded-2xl bg-white shadow-xl"
+      {/* 처음 포커스는 시작 시 입력(지금 동작). 닫히면 Base UI가 연 버튼으로 포커스를 돌려준다 */}
+      <DialogContent
+        size="sm"
+        initialFocus={() => formRef.current?.querySelector("input") ?? true}
       >
-        <div className="flex items-center gap-2 px-5 pb-3 pt-4">
-          <span className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10">
-            <Clock className="h-5 w-5" aria-hidden />
-          </span>
-          <h2
-            id="plan-item-time-dialog-title"
-            className="flex-1 text-title-s font-bold text-gray-900"
-          >
-            시간 설정
-          </h2>
-          <button
-            type="button"
-            aria-label="시간 초기화"
-            onClick={() => {
-              setStartHm("");
-              setEndHm("");
-            }}
-            disabled={isPending || (!startHm && !endHm)}
-            className="h-9 shrink-0 cursor-pointer rounded-lg px-2 text-label-xs-regular font-medium text-dark-gray transition hover:bg-primary/10 hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
-          >
-            초기화
-          </button>
-          <button
-            type="button"
-            aria-label="닫기"
-            onClick={onClose}
-            disabled={isPending}
-            className="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-dark-gray transition hover:bg-primary/10 hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
-          >
-            <X className="h-4 w-4" aria-hidden />
-          </button>
-        </div>
-
-        <div className="flex flex-col gap-3 px-5 pb-4">
-          <p id="plan-item-time-help" className="text-center text-body-xs-regular text-dark-gray">
+        <DialogHeader>
+          <div className="flex min-w-0 items-center gap-2">
+            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/10">
+              <TimeClockIcon size={20} />
+            </span>
+            <DialogTitle className="min-w-0 flex-1">시간 설정</DialogTitle>
+            <button
+              type="button"
+              aria-label="시간 초기화"
+              onClick={() => {
+                form.setFieldValue("start", "");
+                form.setFieldValue("end", "");
+              }}
+              disabled={isPending || (!startHm && !endHm)}
+              className="h-9 shrink-0 cursor-pointer rounded-lg px-2 text-label-xs-regular font-medium text-dark-gray transition hover:bg-primary/10 hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              초기화
+            </button>
+          </div>
+        </DialogHeader>
+
+        <form
+          ref={formRef}
+          id={formId}
+          noValidate
+          className="flex flex-col gap-3"
+          onSubmit={(event) => {
+            event.preventDefault();
+            submit();
+          }}
+        >
+          <p id={`${formId}-help`} className="text-center text-body-xs-regular text-dark-gray">
             24시간 기준 · 시와 분을 직접 입력하세요
           </p>
           {([
-            { label: "시작", value: draftStart ?? serverStartHm, setValue: setStartHm, disabled: isPending },
-            { label: "종료", value: draftEnd ?? serverEndHm, setValue: setEndHm, disabled: isPending || !normalizeStartTimeToHm(startHm) },
-          ] as const).map(({ label, value, setValue, disabled }) => (
-            <div key={label} className="flex items-center gap-3">
-              <span className={`${fieldLabelClass} w-10 shrink-0 text-center`}>
-                {label}
-              </span>
-              <TimeInput
-                label={label}
-                value={value}
-                onChange={setValue}
-                disabled={disabled}
-                describedBy={`plan-item-time-help${validation.valid ? "" : " plan-item-time-error"}`}
-              />
-            </div>
+            { name: "start", label: "시작", serverValue: serverStartHm, disabled: isPending },
+            { name: "end", label: "종료", serverValue: serverEndHm, disabled: isPending || !normalizeStartTimeToHm(startHm) },
+          ] as const).map(({ name, label, serverValue, disabled }) => (
+            <form.Field key={name} name={name}>
+              {(field) => (
+                <div className="flex items-center gap-3">
+                  <span className={`${fieldLabelClass} w-10 shrink-0 text-center`}>
+                    {label}
+                  </span>
+                  <TimeInput
+                    label={label}
+                    value={field.state.value ?? serverValue}
+                    onChange={field.handleChange}
+                    disabled={disabled}
+                    describedBy={describedBy}
+                    // 적용 버튼이 비활성이어도 Enter로 검증 실패 안내를 보여 준다.
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter") {
+                        event.preventDefault();
+                        submit();
+                      }
+                    }}
+                  />
+                </div>
+              )}
+            </form.Field>
           ))}
           {!validation.valid ? (
-            <p id="plan-item-time-error" role="alert" className="text-body-xs-regular text-red-600">
+            <p id={`${formId}-error`} role="alert" className="text-body-xs-regular text-red-600">
               {validation.message} 시는 00–23, 분은 00–59로 입력해 주세요.
             </p>
           ) : null}
@@ -218,27 +221,21 @@ export function PlanItemTimeEditor({
               </span>
             ) : null}
           </div>
-
-          <div className="mt-1 grid grid-cols-2 gap-2">
-            <button
-              type="button"
-              onClick={onClose}
-              disabled={isPending}
-              className="h-10 shrink-0 cursor-pointer rounded-lg border border-gray-border bg-white px-4 text-label-m-regular mobile:text-label-s-regular font-medium text-gray-800 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40"
-            >
-              취소
-            </button>
-            <button
-              type="button"
-              onClick={() => void handleSave()}
-              disabled={!canSave}
-              className="h-10 shrink-0 cursor-pointer rounded-lg bg-primary px-4 text-label-m-regular mobile:text-label-s-regular font-medium text-white transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-40"
-            >
-              {isPending ? "저장 중…" : "적용"}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+        </form>
+
+        <DialogFooter>
+          <DialogClose render={<Button variant="weak" />}>취소</DialogClose>
+          <Button
+            type="submit"
+            form={formId}
+            disabled={!dirty || !validation.valid}
+            loading={isPending}
+            loadingLabel="저장 중"
+          >
+            적용
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/app/(main)/plan/_components/itinerary/PlanItinerary.tsx b/src/app/(main)/plan/_components/itinerary/PlanItinerary.tsx
index 43e1b919..e3c07d3a 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItinerary.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItinerary.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useReducedMotion } from "framer-motion";
@@ -218,6 +218,7 @@ export function PlanItinerary({ roomId, scheduleId }: PlanItineraryProps) {
           );
           const insertIndex = index + 1;
           const segmentActive = activeInsertIndex === insertIndex;
+          const nextItemId = places[index + 1]?.itemId;
 
           return (
             <PlanItineraryReorderRow
@@ -234,7 +235,7 @@ export function PlanItinerary({ roomId, scheduleId }: PlanItineraryProps) {
               />
               {index < places.length - 1 &&
               typeof place.itemId === "number" &&
-              typeof places[index + 1]?.itemId === "number" ?
+              typeof nextItemId === "number" ?
                 <PlanTravelSegment
                   isActive={segmentActive}
                   onActivate={() =>
@@ -264,6 +265,7 @@ export function PlanItinerary({ roomId, scheduleId }: PlanItineraryProps) {
                     roomId={roomId}
                     scheduleId={scheduleId}
                     segmentSourceItemId={place.itemId}
+                    destinationItemId={nextItemId}
                     scheduleFingerprint={scheduleFingerprint}
                     travelMode={place.travelMode}
                     originGooglePlaceId={place.googlePlaceId}
@@ -275,7 +277,7 @@ export function PlanItinerary({ roomId, scheduleId }: PlanItineraryProps) {
                       !isFetchingPlaces &&
                       routesBatchSettled &&
                       existingItemIds.has(place.itemId) &&
-                      existingItemIds.has(places[index + 1].itemId!)
+                      existingItemIds.has(nextItemId)
                     }
                   />
                 </PlanTravelSegment>
@@ -293,7 +295,7 @@ export function PlanItinerary({ roomId, scheduleId }: PlanItineraryProps) {
           onOpenBookmark={() => setBookmarkModal({})}
         />
         {isAdding ?
-          <LoadingIndicator label="장소 추가 중" />
+          <Spinner aria-label="장소 추가 중" />
         : null}
       </div>
 
diff --git a/src/app/(main)/plan/_components/itinerary/PlanPageView.tsx b/src/app/(main)/plan/_components/itinerary/PlanPageView.tsx
index 91ec25a4..9c7bc2f0 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanPageView.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanPageView.tsx
@@ -71,6 +71,7 @@ export function PlanPageView() {
     data: schedules,
     isPending,
     isError,
+    isLoadingError,
   } = useRoomSchedules(roomIdForQueries);
   const { mutate: deleteSchedule, isPending: isDeletingSchedule } =
     useDeleteRoomSchedule();
@@ -180,6 +181,7 @@ export function PlanPageView() {
 
   const deleteDayDialog = dayToDelete ? (
     <ConfirmDialog
+      destructive
       title={dayToDelete.isLast ? "이 일차를 비울까요?" : "이 일차를 삭제할까요?"}
       description={
         dayToDelete.isLast
@@ -200,7 +202,8 @@ export function PlanPageView() {
           roomId={roomId}
           schedules={sortedSchedules}
           isLoading={showInitialLoading}
-          isError={isError}
+          // 재조회 실패는 보이던 일정을 지우지 않는다 — 처음 불러오기에 실패했을 때만 오류로 바꾼다
+          isError={isLoadingError}
           menuDisabled={isCreatingSchedule || isDeletingSchedule || isMovePending}
           onRequestDeleteDay={handleDeleteScheduleDay}
         />
diff --git a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
index e8a1e9b6..2ad812af 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
@@ -5,10 +5,12 @@ import { ExpenseEntryButton } from "@/components/expenses/ExpenseProvider";
 import type { DragEvent } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Image from "next/image";
-import { Loader2, MapPin } from "lucide-react";
+import { MapPin } from "lucide-react";
 
 import { CoinIcon, MemoAddIcon, TimeClockIcon } from "@/assets/icons";
 import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
+import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
 import { toast } from "sonner";
 
 import { useInViewport } from "@/hooks/useInViewport";
@@ -17,6 +19,7 @@ import {
   useUpdateScheduleItem,
 } from "@/hooks/useRooms";
 import { usePlanPlaceCardPhoto } from "@/hooks/usePlanPlaceCardPhoto";
+import { useVisiblePlacePhotoUrl } from "@/hooks/useVisiblePlacePhotoUrl";
 import { bucketItemCount } from "@/lib/analytics/context";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
 import { PLAN_PLACE_CARD_TW } from "@/lib/layout-tokens";
@@ -106,6 +109,8 @@ export function PlanPlaceCard({
   const { resolvedPhotoUrl, photoLoading } = usePlanPlaceCardPhoto(place, {
     enabled: thumbnailInViewport,
   });
+  const { visibleUrl: visiblePhotoUrl, markUnavailable: markPhotoUnavailable } =
+    useVisiblePlacePhotoUrl(resolvedPhotoUrl);
 
   const [memoOpen, setMemoOpen] = useState(false);
   const [timeOpen, setTimeOpen] = useState(false);
@@ -316,13 +321,13 @@ export function PlanPlaceCard({
 
         {(() => {
           const media = photoLoading ? (
-            <Loader2
-              className="absolute inset-0 m-auto h-5 w-5 animate-spin text-primary-strong"
+            <Spinner
+              className="absolute inset-0 m-auto h-5 w-5"
               aria-hidden
             />
-          ) : resolvedPhotoUrl ? (
+          ) : visiblePhotoUrl ? (
             <Image
-              src={resolvedPhotoUrl}
+              src={visiblePhotoUrl}
               alt={place.title}
               fill
               className="object-cover"
@@ -334,6 +339,7 @@ export function PlanPlaceCard({
                   googlePlaceId: place.googlePlaceId,
                   placeName: place.title,
                   image: event.currentTarget,
+                  onPhotoUnavailable: markPhotoUnavailable,
                 })
               }
             />
@@ -373,9 +379,9 @@ export function PlanPlaceCard({
                 {place.title}
               </h3>
               {place.primaryTypeDisplayName ? (
-                <span className={PLAN_PLACE_CARD_TW.primaryTypeBadge}>
-                  {place.primaryTypeDisplayName}
-                </span>
+                <Badge size="md">
+                  <span className="truncate">{place.primaryTypeDisplayName}</span>
+                </Badge>
               ) : null}
             </div>
             {deleteButton ? (
@@ -465,6 +471,7 @@ export function PlanPlaceCard({
       ) : null}
       {confirmTarget === "item" ? (
         <ConfirmDialog
+          destructive
           title="일정에서 이 장소를 삭제할까요?"
           description="이 장소와 연결된 모든 비용도 함께 삭제돼요."
           confirmLabel="삭제"
@@ -475,6 +482,7 @@ export function PlanPlaceCard({
       ) : null}
       {confirmTarget === "memo" ? (
         <ConfirmDialog
+          destructive
           title="메모를 삭제할까요?"
           confirmLabel="삭제"
           isPending={isUpdatingItem}
diff --git a/src/app/(main)/plan/_components/itinerary/TimeInput.tsx b/src/app/(main)/plan/_components/itinerary/TimeInput.tsx
index 7602afa7..18a1c8b3 100644
--- a/src/app/(main)/plan/_components/itinerary/TimeInput.tsx
+++ b/src/app/(main)/plan/_components/itinerary/TimeInput.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import type { KeyboardEventHandler } from "react";
+
 /** Keep incomplete input in the draft; only canonical HH:mm reaches the API. */
 export function TimeInput({
   label,
@@ -7,12 +9,14 @@ export function TimeInput({
   onChange,
   disabled,
   describedBy,
+  onKeyDown,
 }: Readonly<{
   label: string;
   value: string;
   onChange: (value: string) => void;
   disabled: boolean;
   describedBy: string;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
 }>) {
   const parts = value ? value.split(":") : ["", ""];
   const update = (index: number, next: string) => {
@@ -40,6 +44,7 @@ export function TimeInput({
                 value={part}
                 placeholder="--"
                 disabled={disabled}
+                onKeyDown={onKeyDown}
                 onFocus={(e) => e.currentTarget.select()}
                 onChange={(e) => update(index, e.target.value)}
                 className="h-10 w-full min-w-0 text-center text-body-m-regular tabular-nums outline-none disabled:opacity-40"
diff --git a/src/app/(main)/plan/_components/itinerary/TimeWheelPicker.test.tsx b/src/app/(main)/plan/_components/itinerary/TimeWheelPicker.test.tsx
new file mode 100644
index 00000000..9c345c56
--- /dev/null
+++ b/src/app/(main)/plan/_components/itinerary/TimeWheelPicker.test.tsx
@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+import { TimeWheelPicker } from "./TimeWheelPicker";
+
+it("alignment, focus and programmatic scrolling never turn the preview into a selection", async () => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  const host = document.createElement("div"); document.body.append(host);
+  const root = createRoot(host);
+  const change = vi.fn();
+  try {
+    await act(async () => root.render(<TimeWheelPicker value={{ period: null, hour: null, minute: null }} onChange={change} active onSettlingChange={() => {}} />));
+    const wheels = host.querySelectorAll<HTMLElement>('[role="listbox"]');
+    expect(wheels).toHaveLength(3);
+    await act(async () => {
+      for (const wheel of wheels) {
+        wheel.focus(); wheel.scrollTop = 40;
+        wheel.dispatchEvent(new Event("scroll", { bubbles: true }));
+        wheel.dispatchEvent(new Event("scrollend", { bubbles: true }));
+      }
+    });
+    expect(change).not.toHaveBeenCalled();
+    await act(async () => {
+      wheels[0].dispatchEvent(new MouseEvent("pointerdown", { bubbles: true }));
+      wheels[0].dispatchEvent(new Event("scrollend", { bubbles: true }));
+    });
+    expect(change).not.toHaveBeenCalled();
+    const am = host.querySelector<HTMLButtonElement>('[data-value="AM"]')!;
+    await act(async () => am.click());
+    expect(change).toHaveBeenCalledExactlyOnceWith({ period: "AM", hour: null, minute: null });
+  } finally {
+    await act(async () => root.unmount()); host.remove(); vi.unstubAllGlobals();
+  }
+});
diff --git a/src/app/(main)/plan/_components/itinerary/TimeWheelPicker.tsx b/src/app/(main)/plan/_components/itinerary/TimeWheelPicker.tsx
index 56ebcb59..950c012d 100644
--- a/src/app/(main)/plan/_components/itinerary/TimeWheelPicker.tsx
+++ b/src/app/(main)/plan/_components/itinerary/TimeWheelPicker.tsx
@@ -1,107 +1,144 @@
 "use client";
 
-import {
-  WheelPicker,
-  WheelPickerWrapper,
-  type WheelPickerOption,
-} from "@ncdai/react-wheel-picker";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import type { TimeParts } from "@/lib/plan/timePickerDraft";
+import { cn } from "@/lib/utils";
 
-type Period = "AM" | "PM";
+type Option = { value: string; label: string };
+const PERIOD_OPTIONS: Option[] = [{ value: "AM", label: "오전" }, { value: "PM", label: "오후" }];
+const HOUR_OPTIONS: Option[] = Array.from({ length: 12 }, (_, i) => ({ value: String((i + 1) % 12), label: String(i + 1) }));
+const MINUTE_OPTIONS: Option[] = Array.from({ length: 60 }, (_, i) => ({ value: String(i), label: String(i).padStart(2, "0") }));
+const ROW_HEIGHT = 40;
 
-/** Figma Time Picker Base — 행 44px, 5행(≈220px)이 보이도록 링 개수 16 */
-const OPTION_HEIGHT = 44;
-const VISIBLE_COUNT = 16;
+/** Figma 5065:3515: five flat 40px rows; the selected band is independently 44px. */
+function TimeWheelColumn({ label, options, value, preview, active, cyclic, onSelect, onScrollingChange }: Readonly<{
+  label: string;
+  options: Option[];
+  value: string | null;
+  preview: string;
+  active: boolean;
+  cyclic: boolean;
+  onSelect: (value: string) => void;
+  onScrollingChange: (label: string, scrolling: boolean) => void;
+}>) {
+  const id = useId();
+  const scroller = useRef<HTMLDivElement>(null);
+  const userScroll = useRef(false);
+  const gestureStartTop = useRef(0);
+  const alignedIndex = options.findIndex(option => option.value === (value ?? preview));
+  const targetIndex = (cyclic ? options.length : 0) + alignedIndex;
+  const [centerIndex, setCenterIndex] = useState(targetIndex);
+  const rows = cyclic ? [...options, ...options, ...options] : options;
 
-const PERIOD_OPTIONS: WheelPickerOption<Period>[] = [
-  { value: "AM", label: "오전" },
-  { value: "PM", label: "오후" },
-];
-const HOUR_OPTIONS: WheelPickerOption<number>[] = Array.from(
-  { length: 12 },
-  (_, i) => ({ value: i, label: String(i) }),
-);
-const MINUTE_OPTIONS: WheelPickerOption<number>[] = Array.from(
-  { length: 60 },
-  (_, i) => ({ value: i, label: String(i).padStart(2, "0") }),
-);
+  useLayoutEffect(() => {
+    // Alignment on opening, field switching, or reset must never count as input.
+    userScroll.current = false;
+    onScrollingChange(label, false);
+    if (scroller.current) scroller.current.scrollTop = targetIndex * ROW_HEIGHT;
+  }, [targetIndex, label, onScrollingChange]);
 
-function splitHm(hm: string): { period: Period; hour: number; minute: number } {
-  const [h, m] = hm.split(":").map(Number);
-  return { period: h < 12 ? "AM" : "PM", hour: h % 12, minute: m };
-}
+  useEffect(() => () => onScrollingChange(label, false), [label, onScrollingChange]);
 
-function joinHm(period: Period, hour: number, minute: number): string {
-  const h = hour + (period === "PM" ? 12 : 0);
-  return `${String(h).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
-}
+  function beginScroll() {
+    if (!active || userScroll.current) return;
+    gestureStartTop.current = scroller.current?.scrollTop ?? 0;
+    userScroll.current = true;
+  }
 
-/** 12시간제 휠 — `value`/`onChange`는 24시간 HH:mm */
-export function TimeWheelPicker({
-  value,
-  onChange,
-  active,
-  onInteract,
-}: Readonly<{
-  value: string;
-  onChange: (hm: string) => void;
-  /** 편집 중인 필드가 있을 때만 중앙 값을 진하게 표시 */
-  active: boolean;
-  /** 휠을 건드리는 순간 — 편집 대상 필드가 없으면 부모가 지정 */
-  onInteract: () => void;
-}>) {
-  const { period, hour, minute } = splitHm(value);
-  const classNames = {
-    optionItem: "text-heading-s text-text-disabled",
-    highlightWrapper: "bg-fill text-heading-s",
-    highlightItem: active ? "text-text" : "text-text-disabled",
-  };
-  const shared = {
-    classNames,
-    optionItemHeight: OPTION_HEIGHT,
-    visibleCount: VISIBLE_COUNT,
-  };
+  function select(index: number) {
+    const row = rows[index];
+    if (!active || !row) return;
+    userScroll.current = false;
+    onScrollingChange(label, false);
+    const centered = cyclic ? options.length + index % options.length : index;
+    setCenterIndex(centered);
+    if (scroller.current) scroller.current.scrollTop = centered * ROW_HEIGHT;
+    onSelect(row.value);
+  }
 
   return (
     <div
-      className="relative w-full p-2"
-      onPointerDownCapture={onInteract}
-      onWheelCapture={onInteract}
-      onKeyDownCapture={(e) => {
-        if (e.key !== "Tab" && e.key !== "Escape") onInteract();
+      ref={scroller}
+      role="listbox"
+      aria-label={label}
+      aria-disabled={!active}
+      aria-activedescendant={`${id}-${centerIndex}`}
+      tabIndex={active ? 0 : -1}
+      className="relative h-[200px] snap-y snap-mandatory overflow-y-auto overscroll-contain py-[80px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden focus-visible:outline-2 focus-visible:outline-primary"
+      onPointerDown={beginScroll}
+      onTouchStart={beginScroll}
+      onWheel={beginScroll}
+      onScroll={event => {
+        setCenterIndex(Math.max(0, Math.min(rows.length - 1, Math.round(event.currentTarget.scrollTop / ROW_HEIGHT))));
+        if (active && userScroll.current) onScrollingChange(label, true);
+      }}
+      onScrollEnd={event => {
+        if (!active || !userScroll.current) return;
+        if (Math.abs(event.currentTarget.scrollTop - gestureStartTop.current) < ROW_HEIGHT / 2) {
+          userScroll.current = false;
+          onScrollingChange(label, false);
+          return;
+        }
+        const index = Math.max(0, Math.min(rows.length - 1, Math.round(event.currentTarget.scrollTop / ROW_HEIGHT)));
+        select(index);
+      }}
+      onKeyDown={event => {
+        const offset = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+        if (!active || (!offset && event.key !== "Enter" && event.key !== " ")) return;
+        event.preventDefault();
+        select(Math.max(0, Math.min(rows.length - 1, centerIndex + offset)));
       }}
     >
-      <div
-        aria-hidden
-        className="absolute inset-x-0 top-1/2 h-11 -translate-y-1/2 rounded-md bg-fill"
-      />
-      <WheelPickerWrapper className="justify-center gap-2">
-        <div role="group" aria-label="오전/오후" className="w-[88px]">
-          <WheelPicker
-            {...shared}
-            options={PERIOD_OPTIONS}
-            value={period}
-            onValueChange={(next) => onChange(joinHm(next, hour, minute))}
-          />
-        </div>
-        <div role="group" aria-label="시" className="w-16">
-          <WheelPicker
-            {...shared}
-            infinite
-            options={HOUR_OPTIONS}
-            value={hour}
-            onValueChange={(next) => onChange(joinHm(period, next, minute))}
-          />
-        </div>
-        <div role="group" aria-label="분" className="w-16">
-          <WheelPicker
-            {...shared}
-            infinite
-            options={MINUTE_OPTIONS}
-            value={minute}
-            onValueChange={(next) => onChange(joinHm(period, hour, next))}
-          />
-        </div>
-      </WheelPickerWrapper>
+      {rows.map((option, index) => (
+        <button
+          key={`${index}-${option.value}`}
+          id={`${id}-${index}`}
+          type="button"
+          role="option"
+          data-value={option.value}
+          aria-selected={value === option.value && index === centerIndex}
+          tabIndex={-1}
+          disabled={!active}
+          onClick={() => select(index)}
+          className={cn(
+            "flex h-[40px] w-full shrink-0 snap-center items-center justify-center select-none",
+            index === centerIndex ? "text-body-l-emphasis" : "text-body-l-regular",
+            !active ? "text-text-disabled" : index === centerIndex ? "text-text" : "text-text-subtle",
+          )}
+        >{option.label}</button>
+      ))}
+    </div>
+  );
+}
+
+/** Preview alignment is visual only. Each missing column requires a user selection. */
+export function TimeWheelPicker({ value, onChange, active, onSettlingChange }: Readonly<{
+  value: TimeParts;
+  onChange: (parts: TimeParts) => void;
+  active: boolean;
+  onSettlingChange: (settling: boolean) => void;
+}>) {
+  const scrollingColumns = useRef(new Set<string>());
+  const reportScrolling = useCallback((label: string, scrolling: boolean) => {
+    if (scrolling) scrollingColumns.current.add(label);
+    else scrollingColumns.current.delete(label);
+    onSettlingChange(scrollingColumns.current.size > 0);
+  }, [onSettlingChange]);
+  return (
+    <div className="relative flex min-w-[300px] w-full justify-center gap-2 px-4 py-2" inert={!active}>
+      <div aria-hidden className="pointer-events-none absolute inset-x-0 top-1/2 h-11 -translate-y-1/2 rounded-md bg-fill" />
+      <div className="w-[88px] shrink-0">
+        <TimeWheelColumn label="오전/오후" options={PERIOD_OPTIONS} value={value.period} preview="AM" active={active} cyclic={false} onScrollingChange={reportScrolling}
+          onSelect={period => { if (period === "AM" || period === "PM") onChange({ ...value, period }); }} />
+      </div>
+      <div className="w-16 shrink-0">
+        <TimeWheelColumn label="시" options={HOUR_OPTIONS} value={value.hour === null ? null : String(value.hour)} preview="10" active={active} cyclic onScrollingChange={reportScrolling}
+          onSelect={hour => onChange({ ...value, hour: Number(hour) })} />
+      </div>
+      <div className="w-16 shrink-0">
+        <TimeWheelColumn label="분" options={MINUTE_OPTIONS} value={value.minute === null ? null : String(value.minute)} preview="0" active={active} cyclic onScrollingChange={reportScrolling}
+          onSelect={minute => onChange({ ...value, minute: Number(minute) })} />
+      </div>
     </div>
   );
 }
diff --git a/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx b/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
index 1217c5bf..97fab0d7 100644
--- a/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
@@ -1,13 +1,30 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useForm, useStore } from "@tanstack/react-form";
+import { useId, useRef } from "react";
 import { toast } from "sonner";
 
-import { MobileBottomSheet } from "@/components/mobile/MobileBottomSheet";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field";
+import { Textarea } from "@/components/ui/textarea";
 import { useUpdateScheduleItem } from "@/hooks/useRooms";
 
 const MEMO_MAX_LENGTH = 2000;
 
+// 입력은 maxLength로 막히지만 저장 전에 칸에서 한 번 더 확인한다. 문구는 PC 메모 편집(PlanItemMemoForm)과 같다
+function memoLengthError(memo: string) {
+  return memo.trim().length > MEMO_MAX_LENGTH ? `메모는 ${MEMO_MAX_LENGTH}자 이하여야 해요.` : undefined;
+}
+
 type MobileMemoSheetProps = Readonly<{
   roomId: string;
   scheduleId: number;
@@ -27,23 +44,20 @@ export function MobileMemoSheet({
   onClose,
 }: MobileMemoSheetProps) {
   const initial = memo.trim();
-  const [draft, setDraft] = useState(initial);
-  const { mutateAsync, isPending } = useUpdateScheduleItem();
+  // 저장과 삭제는 같은 API지만 진행 표시를 누른 버튼에만 두려고 따로 꺼낸다
+  const { mutateAsync: saveMemo, isPending: isSaving } = useUpdateScheduleItem();
+  const { mutateAsync: deleteMemo, isPending: isDeleting } = useUpdateScheduleItem();
+  // 저장·삭제는 서로 배타적이라 닫기·입력 비활성에만 합쳐 쓴다
+  const isWriting = isSaving || isDeleting;
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const formId = useId();
+  const memoId = `${formId}-memo`;
+  const descriptionId = `${formId}-memo-description`;
+  const errorId = `${formId}-memo-error`;
 
-  // 시트가 열리면 바로 입력할 수 있게 포커스하고 커서를 기존 메모 끝에 둔다
-  useEffect(() => {
-    const el = textareaRef.current;
-    if (!el) return;
-    el.focus();
-    el.setSelectionRange(el.value.length, el.value.length);
-  }, []);
-  const hasMemo = initial.length > 0;
-  const dirty = draft.trim() !== initial;
-
-  async function saveMemo(next: string) {
+  async function writeMemo(update: typeof saveMemo, next: string) {
     try {
-      await mutateAsync({ roomId, scheduleId, itemId, body: { memo: next } });
+      await update({ roomId, scheduleId, itemId, body: { memo: next } });
       toast.success(next ? "메모를 저장했어요." : "메모를 삭제했어요.");
       onClose();
     } catch {
@@ -51,53 +65,96 @@ export function MobileMemoSheet({
     }
   }
 
+  const form = useForm({
+    defaultValues: { memo: initial },
+    onSubmit: ({ value }) => writeMemo(saveMemo, value.memo.trim()),
+  });
+  const hasMemo = initial.length > 0;
+  // TanStack isDirty는 한 번 바뀌면 남아서, 되돌리면 다시 꺼지는 지금 기준(앞뒤 공백 무시 비교)을 그대로 쓴다
+  const dirty = useStore(form.store, (state) => state.values.memo.trim() !== initial);
+
   return (
-    <MobileBottomSheet
-      open
-      onClose={onClose}
-      title={hasMemo ? "메모 수정" : "메모 추가"}
-      subtitle={placeName}
-      variant="form"
-      closeDisabled={isPending}
-    >
-      <label className="flex flex-col gap-4">
-        <span className="text-label-m-regular text-text">메모</span>
-        <div className="h-36 rounded-[12px] bg-fill py-3 focus-within:ring-2 focus-within:ring-primary/30">
-          <textarea
-            ref={textareaRef}
-            value={draft}
-            maxLength={MEMO_MAX_LENGTH}
-            onChange={(e) => setDraft(e.target.value)}
-            disabled={isPending}
-            rows={5}
-            placeholder="메모를 입력하세요"
-            className="block size-full resize-none bg-transparent px-3 text-body-m-regular text-text outline-none [scrollbar-color:var(--color-border-default)_transparent] [scrollbar-width:thin] placeholder:text-text-subtle"
-          />
-        </div>
-      </label>
-      <p className="text-caption-l-regular text-text-subtle">
-        예약 정보나 함께 기억할 내용을 남겨보세요.
-      </p>
-      <div className="flex gap-2">
-        {hasMemo ? (
-          <button
-            type="button"
-            onClick={() => void saveMemo("")}
-            disabled={isPending}
-            className="min-h-12 flex-1 rounded-[12px] border border-border text-label-m-regular text-status-negative disabled:opacity-40"
+    <Drawer open onOpenChange={(open) => { if (!open) onClose(); }} closeDisabled={isWriting}>
+      <DrawerContent
+        closeLabel={hasMemo ? "메모 수정 닫기" : "메모 추가 닫기"}
+        // 열자마자 입력할 수 있게 커서를 기존 메모 끝에 둔다. Base UI는 다음 프레임에 포커스해서 iOS가 키보드를 띄우지 않을 수 있어,
+        // 지금 시트처럼 여는 흐름 안에서 바로 포커스하고 같은 요소를 돌려준다
+        initialFocus={() => {
+          const el = textareaRef.current;
+          if (!el) return true;
+          el.focus();
+          el.setSelectionRange(el.value.length, el.value.length);
+          return el;
+        }}
+      >
+        <DrawerHeader>
+          <DrawerTitle>{hasMemo ? "메모 수정" : "메모 추가"}</DrawerTitle>
+          <DrawerDescription>{placeName}</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <form
+            id={formId}
+            noValidate
+            className="flex flex-col gap-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (form.state.isSubmitting) return;
+              void form.handleSubmit();
+            }}
+          >
+            <form.Field name="memo" validators={{ onSubmit: ({ value }) => memoLengthError(value) }}>
+              {(field) => {
+                const error = field.state.meta.errors[0];
+                return (
+                  <Field>
+                    <FieldLabel htmlFor={memoId}>메모</FieldLabel>
+                    <Textarea
+                      id={memoId}
+                      ref={textareaRef}
+                      value={field.state.value}
+                      maxLength={MEMO_MAX_LENGTH}
+                      onChange={(event) => field.handleChange(event.target.value)}
+                      onBlur={field.handleBlur}
+                      disabled={isWriting}
+                      rows={5}
+                      placeholder="메모를 입력하세요"
+                      aria-invalid={error ? true : undefined}
+                      aria-describedby={error ? `${descriptionId} ${errorId}` : descriptionId}
+                      className="h-36"
+                    />
+                    <FieldDescription id={descriptionId}>
+                      예약 정보나 함께 기억할 내용을 남겨보세요.
+                    </FieldDescription>
+                    <FieldError id={errorId}>{error}</FieldError>
+                  </Field>
+                );
+              }}
+            </form.Field>
+          </form>
+        </DrawerBody>
+        <DrawerFooter>
+          {hasMemo ? (
+            <Button
+              tone="critical"
+              loading={isDeleting}
+              loadingLabel="삭제 중"
+              disabled={isSaving}
+              onClick={() => void writeMemo(deleteMemo, "")}
+            >
+              삭제
+            </Button>
+          ) : null}
+          <Button
+            type="submit"
+            form={formId}
+            loading={isSaving}
+            loadingLabel="저장 중"
+            disabled={isDeleting || !dirty}
           >
-            삭제
-          </button>
-        ) : null}
-        <button
-          type="button"
-          onClick={() => void saveMemo(draft.trim())}
-          disabled={isPending || !dirty}
-          className="min-h-12 flex-1 rounded-[12px] bg-primary text-label-m-regular text-fill-elevate disabled:opacity-40"
-        >
-          {isPending ? "저장 중…" : "저장"}
-        </button>
-      </div>
-    </MobileBottomSheet>
+            저장
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
   );
 }
diff --git a/src/app/(main)/plan/_components/mobile/MobilePlanDaySection.tsx b/src/app/(main)/plan/_components/mobile/MobilePlanDaySection.tsx
index 1131f381..21f09650 100644
--- a/src/app/(main)/plan/_components/mobile/MobilePlanDaySection.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobilePlanDaySection.tsx
@@ -10,15 +10,13 @@ import {
   TrashIcon,
 } from "@/assets/icons";
 import { useExpenseContext } from "@/components/expenses/ExpenseProvider";
-import {
-  MobileBottomSheet,
-  MobileSheetMenuItem,
-} from "@/components/mobile/MobileBottomSheet";
+import { Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer";
 import { expensesInScope } from "@/lib/expenses/expense-scope";
 import type { InsertAnchor } from "@/lib/plan/insertPosition";
 import { summarizePlaceExpenses } from "@/lib/plan/mobilePlanFormat";
 
 import { MobilePlanItinerary } from "./MobilePlanItinerary";
+import { MobileSheetMenuItem } from "./MobileSheetMenuItem";
 
 type MobilePlanDaySectionProps = Readonly<{
   roomId: string;
@@ -119,46 +117,53 @@ export function MobilePlanDaySection({
         onPlaceAdded={onPlaceAdded}
       />
 
-      <MobileBottomSheet open={manageOpen} onClose={() => setManageOpen(false)} title="일정 관리">
-        <MobileSheetMenuItem
-          icon={CalendarAddIcon}
-          label="일차 추가"
-          disabled={menuDisabled}
-          onClick={() => {
-            setManageOpen(false);
-            onRequestInsertDayAfter();
-          }}
-        />
-        <MobileSheetMenuItem
-          icon={TrashIcon}
-          label="일차 삭제"
-          danger
-          disabled={menuDisabled}
-          onClick={() => {
-            setManageOpen(false);
-            onRequestDeleteDay();
-          }}
-        />
-        {expenses.canManage ? (
-          <>
-            <hr className="my-1 shrink-0 border-border-subtle" />
+      <Drawer open={manageOpen} onOpenChange={setManageOpen}>
+        <DrawerContent closeLabel="일정 관리 닫기">
+          <DrawerHeader>
+            <DrawerTitle>일정 관리</DrawerTitle>
+          </DrawerHeader>
+          <DrawerBody className="gap-2">
+            <MobileSheetMenuItem
+              icon={CalendarAddIcon}
+              label="일차 추가"
+              disabled={menuDisabled}
+              onClick={() => {
+                setManageOpen(false);
+                onRequestInsertDayAfter();
+              }}
+            />
             <MobileSheetMenuItem
-              icon={CoinIcon}
-              label="비용"
-              disabled={expenses.busy}
-              onClick={openDayExpenses}
-              trailing={
-                dayExpenseSummary ? (
-                  <span className="flex items-center justify-end gap-1 text-body-s-regular tabular-nums text-text-subtle">
-                    <CoinIcon size={18} className="shrink-0 text-icon-subtle" />
-                    <span className="truncate">{dayExpenseSummary}</span>
-                  </span>
-                ) : null
-              }
+              icon={TrashIcon}
+              label="일차 삭제"
+              danger
+              disabled={menuDisabled}
+              onClick={() => {
+                setManageOpen(false);
+                onRequestDeleteDay();
+              }}
             />
-          </>
-        ) : null}
-      </MobileBottomSheet>
+            {expenses.canManage ? (
+              <>
+                <hr className="my-1 shrink-0 border-border-subtle" />
+                <MobileSheetMenuItem
+                  icon={CoinIcon}
+                  label="비용"
+                  disabled={expenses.busy}
+                  onClick={openDayExpenses}
+                  trailing={
+                    dayExpenseSummary ? (
+                      <span className="flex items-center justify-end gap-1 text-body-s-regular tabular-nums text-text-subtle">
+                        <CoinIcon size={18} className="shrink-0 text-icon-subtle" />
+                        <span className="truncate">{dayExpenseSummary}</span>
+                      </span>
+                    ) : null
+                  }
+                />
+              </>
+            ) : null}
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
     </section>
   );
 }
diff --git a/src/app/(main)/plan/_components/mobile/MobilePlanItinerary.tsx b/src/app/(main)/plan/_components/mobile/MobilePlanItinerary.tsx
index 0b8d765c..4ce706ae 100644
--- a/src/app/(main)/plan/_components/mobile/MobilePlanItinerary.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobilePlanItinerary.tsx
@@ -240,6 +240,7 @@ function PlaceTravelSegment({
       roomId={roomId}
       scheduleId={scheduleId}
       segmentSourceItemId={place.itemId}
+      destinationItemId={next.itemId}
       scheduleFingerprint={scheduleFingerprint}
       travelMode={place.travelMode}
       originGooglePlaceId={place.googlePlaceId}
diff --git a/src/app/(main)/plan/_components/mobile/MobilePlanPlaceSheets.tsx b/src/app/(main)/plan/_components/mobile/MobilePlanPlaceSheets.tsx
index 51cb878b..f0a72d2a 100644
--- a/src/app/(main)/plan/_components/mobile/MobilePlanPlaceSheets.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobilePlanPlaceSheets.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useRef } from "react";
 import { toast } from "sonner";
 
 import {
@@ -12,8 +13,8 @@ import {
   WriteIcon,
 } from "@/assets/icons";
 import { useExpenseContext } from "@/components/expenses/ExpenseProvider";
-import { MobileBottomSheet, MobileSheetMenuItem } from "@/components/mobile/MobileBottomSheet";
 import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
+import { Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer";
 import { useDeleteScheduleItem } from "@/hooks/useRooms";
 import { bucketItemCount } from "@/lib/analytics/context";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
@@ -23,6 +24,7 @@ import type { PlanPlace } from "@/lib/plan/types";
 
 import { AddFromBookmarkModal } from "../itinerary/AddFromBookmarkModal";
 import { MobileMemoSheet } from "./MobileMemoSheet";
+import { MobileSheetMenuItem } from "./MobileSheetMenuItem";
 import { MobileTimeSheet } from "./MobileTimeSheet";
 
 /** 장소 카드에서 여는 시트 — 일정 관리 메뉴와 그 안의 메모·시간·삭제, 북마크에서 추가 */
@@ -138,6 +140,7 @@ export function MobilePlanPlaceSheets({
   if (sheet.kind === "delete") {
     return (
       <ConfirmDialog
+        destructive
         title="일정에서 이 장소를 삭제할까요?"
         description="이 장소와 연결된 모든 비용도 함께 삭제돼요."
         confirmLabel="삭제"
@@ -167,63 +170,75 @@ function PlaceActionsMenu({ place, itemId, canInsert, places, scheduleId, expens
   onInsertFromSearch: (anchor: InsertAnchor) => void;
   onChangeSheet: (sheet: MobilePlanPlaceSheet | null) => void;
 }>) {
+  // '일정 추가'는 Base UI 밖 검색 화면이 검색창에 포커스를 준다. 시트가 언마운트되며 예약하는 포커스 복귀(카드 '더보기')가
+  // 그 포커스를 빼앗지 않게, 이 경우에만 복귀를 끈다. 같은 커밋에 언마운트되므로 prop 값이 아니라 정리 시점에 부르는 함수로 읽는다
+  const skipReturnFocus = useRef(false);
+  // 조건부 마운트라 open을 고정하고 닫기 요청만 받는다. 다른 시트로 갈아끼우면(onChangeSheet) 이 시트는 닫힘 애니메이션 없이 언마운트된다(지금과 같음)
   return (
-    <MobileBottomSheet open onClose={close} title={place.title}>
-      {itemId === null ? (
-        <p className="py-2 text-body-s-regular text-text-subtle">
-          아직 저장 중인 장소예요. 잠시 후 다시 시도해 주세요.
-        </p>
-      ) : (
-        <>
-          {canInsert ? (
+    <Drawer open onOpenChange={(open) => { if (!open) close(); }}>
+      <DrawerContent closeLabel="장소 메뉴 닫기" finalFocus={() => !skipReturnFocus.current}>
+        <DrawerHeader>
+          <DrawerTitle>{place.title}</DrawerTitle>
+        </DrawerHeader>
+        <DrawerBody className="gap-2">
+          {itemId === null ? (
+            <p className="py-2 text-body-s-regular text-text-subtle">
+              아직 저장 중인 장소예요. 잠시 후 다시 시도해 주세요.
+            </p>
+          ) : (
             <>
+              {canInsert ? (
+                <>
+                  <MobileSheetMenuItem
+                    icon={LocationAddIcon}
+                    label="일정 추가"
+                    onClick={() => {
+                      skipReturnFocus.current = true;
+                      close();
+                      onInsertFromSearch(insertAnchorAfterItem(places, itemId));
+                    }}
+                  />
+                  <MobileSheetMenuItem
+                    icon={SavedAddIcon}
+                    label="북마크에서 추가"
+                    onClick={() =>
+                      onChangeSheet({ kind: "bookmark", anchor: insertAnchorAfterItem(places, itemId) })
+                    }
+                  />
+                  <hr className="my-1 shrink-0 border-border-subtle" />
+                </>
+              ) : null}
               <MobileSheetMenuItem
-                icon={LocationAddIcon}
-                label="일정 추가"
-                onClick={() => {
-                  close();
-                  onInsertFromSearch(insertAnchorAfterItem(places, itemId));
-                }}
+                icon={place.memo?.trim() ? WriteIcon : WriteAddIcon}
+                label={place.memo?.trim() ? "메모 수정" : "메모 추가"}
+                onClick={() => onChangeSheet({ kind: "memo", place })}
               />
               <MobileSheetMenuItem
-                icon={SavedAddIcon}
-                label="북마크에서 추가"
-                onClick={() =>
-                  onChangeSheet({ kind: "bookmark", anchor: insertAnchorAfterItem(places, itemId) })
-                }
+                icon={TimeClockIcon}
+                label="시간 설정"
+                onClick={() => onChangeSheet({ kind: "time", place })}
+              />
+              {expenses.canManage ? (
+                <MobileSheetMenuItem
+                  icon={CoinIcon}
+                  label="비용 추가"
+                  disabled={expenses.busy}
+                  onClick={() => {
+                    close();
+                    expenses.open({ scheduleId, scheduleItemId: itemId });
+                  }}
+                />
+              ) : null}
+              <MobileSheetMenuItem
+                icon={TrashIcon}
+                label="일정 삭제"
+                danger
+                onClick={() => onChangeSheet({ kind: "delete", place })}
               />
-              <hr className="my-1 shrink-0 border-border-subtle" />
             </>
-          ) : null}
-          <MobileSheetMenuItem
-            icon={place.memo?.trim() ? WriteIcon : WriteAddIcon}
-            label={place.memo?.trim() ? "메모 수정" : "메모 추가"}
-            onClick={() => onChangeSheet({ kind: "memo", place })}
-          />
-          <MobileSheetMenuItem
-            icon={TimeClockIcon}
-            label="시간 설정"
-            onClick={() => onChangeSheet({ kind: "time", place })}
-          />
-          {expenses.canManage ? (
-            <MobileSheetMenuItem
-              icon={CoinIcon}
-              label="비용 추가"
-              disabled={expenses.busy}
-              onClick={() => {
-                close();
-                expenses.open({ scheduleId, scheduleItemId: itemId });
-              }}
-            />
-          ) : null}
-          <MobileSheetMenuItem
-            icon={TrashIcon}
-            label="일정 삭제"
-            danger
-            onClick={() => onChangeSheet({ kind: "delete", place })}
-          />
-        </>
-      )}
-    </MobileBottomSheet>
+          )}
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
   );
 }
diff --git a/src/app/(main)/plan/_components/mobile/MobileSheetMenuItem.tsx b/src/app/(main)/plan/_components/mobile/MobileSheetMenuItem.tsx
new file mode 100644
index 00000000..fbdf8a83
--- /dev/null
+++ b/src/app/(main)/plan/_components/mobile/MobileSheetMenuItem.tsx
@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+
+import type { IconProps } from "@/assets/icons";
+import { cn } from "@/lib/utils";
+
+type MobileSheetMenuItemProps = Readonly<{
+  icon: (props: IconProps) => ReactNode;
+  label: string;
+  onClick: () => void;
+  /** 삭제 등 위험한 동작 */
+  danger?: boolean;
+  disabled?: boolean;
+  /** 오른쪽에 붙는 보조 내용 — 예: 비용 합계 */
+  trailing?: ReactNode;
+}>;
+
+/** 일정 관리 시트(Drawer)의 메뉴 한 줄 — 아이콘 20px + 라벨. 일차·장소 메뉴 시트가 함께 쓴다 */
+export function MobileSheetMenuItem({
+  icon: Icon,
+  label,
+  onClick,
+  danger = false,
+  disabled = false,
+  trailing,
+}: MobileSheetMenuItemProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className="flex h-11 w-full shrink-0 items-center gap-3 text-left disabled:opacity-40"
+    >
+      <Icon size={20} className={danger ? "text-status-negative" : "text-icon"} />
+      <span
+        className={cn(
+          "shrink-0 text-body-m-regular",
+          danger ? "text-status-negative" : "text-text",
+        )}
+      >
+        {label}
+      </span>
+      {trailing ? (
+        <span className="ml-auto min-w-0 truncate pl-3 text-right">{trailing}</span>
+      ) : null}
+    </button>
+  );
+}
diff --git a/src/app/(main)/plan/_components/mobile/MobileTimeSheet.design.test.tsx b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.design.test.tsx
new file mode 100644
index 00000000..f9b5bbf2
--- /dev/null
+++ b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.design.test.tsx
@@ -0,0 +1,31 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { beforeEach, afterEach, expect, it, vi } from "vitest";
+vi.mock("@/hooks/useRooms", () => ({ useUpdateScheduleItem: () => ({ mutateAsync: vi.fn(), isPending: false }) }));
+import { MobileTimeSheet } from "./MobileTimeSheet";
+let root: Root;
+let host: HTMLDivElement;
+beforeEach(() => { vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true); host=document.createElement("div"); document.body.append(host); root=createRoot(host); });
+afterEach(async () => { await act(async () => root.unmount()); host.remove(); vi.unstubAllGlobals(); });
+async function open(startTime: string | null = null) {
+ await act(async () => root.render(<MobileTimeSheet roomId="room" scheduleId={1} itemId={1} placeName="Place" startTime={startTime} endTime={null} onClose={() => {}} />));
+}
+it("has no unset choices in the wheel while the time fields stay unset", async () => {
+ await open();
+ for (const name of ["오전/오후","시","분"]) {
+  const group=document.querySelector(`[aria-label="${name}"]`)!;
+  expect(group).not.toBeNull(); expect(group.textContent).not.toContain("--");
+ }
+ expect(document.querySelector('[aria-label="시작 시간 미설정"]')).not.toBeNull();
+});
+it("starts in Enabled state with a visible disabled reset control", async () => {
+ await open();
+ const reset=[...document.querySelectorAll("button")].find(b => b.textContent?.trim()==="초기화");
+ expect(reset).toBeDefined(); expect(reset?.disabled).toBe(true);
+ expect(document.querySelector('[aria-label="시작 시간 미설정"]')?.getAttribute("aria-expanded")).toBe("false");
+});
+it.each([["00:05","오전 12:05"],["12:05","오후 12:05"]])("labels %s as %s without rewriting storage", async (start,display) => {
+ await open(start);
+ expect(document.querySelector('[aria-label^="시작 시간"]')?.textContent).toContain(display);
+});
diff --git a/src/app/(main)/plan/_components/mobile/MobileTimeSheet.test.tsx b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.test.tsx
new file mode 100644
index 00000000..e00ad041
--- /dev/null
+++ b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.test.tsx
@@ -0,0 +1,117 @@
+// @vitest-environment jsdom
+import { act, type ComponentProps } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+const save = vi.hoisted(() => vi.fn());
+vi.mock("@/hooks/useRooms", () => ({ useUpdateScheduleItem: () => ({ mutateAsync: save, isPending: false }) }));
+import { MobileTimeSheet } from "./MobileTimeSheet";
+let root: Root;
+let container: HTMLDivElement;
+let props: ComponentProps<typeof MobileTimeSheet>;
+const button = (label: string) => [...document.querySelectorAll<HTMLButtonElement>("button")].find(b => b.textContent === label || b.getAttribute("aria-label")?.startsWith(label))!;
+async function click(label: string) { await act(async () => button(label).click()); }
+async function render() { await act(async () => root.render(<MobileTimeSheet {...props} />)); }
+async function choose(group: string, value: string) {
+  const el = document.querySelector<HTMLButtonElement>(`[role="listbox"][aria-label="${group}"] [data-value="${value}"]`);
+  expect(el).not.toBeNull(); expect(el!.disabled).toBe(false);
+  await act(async () => el!.click());
+}
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  save.mockReset().mockResolvedValue({});
+  container = document.createElement("div"); document.body.append(container); root = createRoot(container);
+  props = { roomId: "room", scheduleId: 10, itemId: 1, placeName: "Place", startTime: null, endTime: null, onClose: vi.fn() };
+});
+afterEach(async () => { await act(async () => root.unmount()); container.remove(); vi.unstubAllGlobals(); });
+it("opening an unset time leaves both unset and cannot save", async () => {
+  await render();
+  expect(button("시작 시간").getAttribute("aria-label")).toContain("미설정");
+  expect(button("종료 시간").getAttribute("aria-label")).toContain("미설정");
+  expect(button("확인").disabled).toBe(true);
+  await click("확인"); expect(save).not.toHaveBeenCalled();
+});
+it("opening an unset end does not invent a duration", async () => {
+  props = { ...props, startTime: "14:30" }; await render(); await click("종료 시간");
+  expect(button("종료 시간").getAttribute("aria-label")).toContain("미설정");
+  expect(button("확인").disabled).toBe(true); expect(save).not.toHaveBeenCalled();
+});
+it("requires explicit period, hour and minute before saving start only", async () => {
+  await render(); await click("시작 시간");
+  await choose("시", "0"); expect(button("확인").disabled).toBe(true);
+  await choose("분", "0"); expect(button("확인").disabled).toBe(true);
+  await choose("오전/오후", "AM"); await click("확인");
+  expect(save).toHaveBeenCalledExactlyOnceWith({ roomId: "room", scheduleId: 10, itemId: 1, body: { startTime: "00:00" } });
+});
+it("explicitly sets an overnight end without rewriting start", async () => {
+  props = { ...props, startTime: "23:15" }; await render(); await click("종료 시간");
+  await choose("오전/오후", "AM"); await choose("시", "1"); await choose("분", "5"); await click("확인");
+  expect(save.mock.calls[0][0].body).toEqual({ endTime: "01:05" });
+});
+it("changes an existing time without altering its unset end", async () => {
+  props = { ...props, startTime: "09:07" }; await render(); await choose("분", "8"); await click("확인");
+  expect(save.mock.calls[0][0].body).toEqual({ startTime: "09:08" });
+});
+it.each(["취소", "방문 시간 닫기"])("%s never saves edits or deletions", async label => {
+  props = { ...props, startTime: "09:07", endTime: "10:13" }; await render(); await click("초기화"); await click(label);
+  expect(save).not.toHaveBeenCalled(); expect(props.onClose).toHaveBeenCalledOnce();
+});
+it("deletes both times only on confirmation", async () => {
+  props = { ...props, startTime: "09:07", endTime: "10:13" }; await render(); await click("초기화");
+  expect(save).not.toHaveBeenCalled(); await click("확인");
+  expect(save.mock.calls[0][0].body).toEqual({ startTime: null, endTime: null });
+});
+it("cannot save a start change while the end has only been partially chosen", async () => {
+  props = { ...props, startTime: "09:07" }; await render();
+  await choose("분", "8"); await click("종료 시간"); await choose("오전/오후", "AM");
+  expect(button("확인").disabled).toBe(true);
+  await click("확인"); expect(save).not.toHaveBeenCalled();
+});
+it("keeps partial end choices when switching fields and never fills the missing minute", async () => {
+  props = { ...props, startTime: "09:07" }; await render();
+  await click("종료 시간"); await choose("오전/오후", "AM"); await choose("시", "1");
+  await click("시작 시간"); await click("종료 시간");
+  expect(button("확인").disabled).toBe(true); expect(save).not.toHaveBeenCalled();
+  await choose("분", "5"); await click("확인");
+  expect(save.mock.calls[0][0].body).toEqual({ endTime: "01:05" });
+});
+it.each([["AM", "00:07"], ["PM", "12:07"]])("explicit %s twelve saves %s", async (period, expected) => {
+  await render(); await click("시작 시간");
+  await choose("오전/오후", period); await choose("시", "0"); await choose("분", "7");
+  await click("확인"); expect(save.mock.calls[0][0].body).toEqual({ startTime: expected });
+});
+it("a save failure keeps the chosen value and sheet open", async () => {
+  props = { ...props, startTime: "09:07" }; await render(); await choose("분", "8");
+  save.mockRejectedValueOnce(new Error("save failed")); await click("확인");
+  expect(props.onClose).not.toHaveBeenCalled();
+  expect(button("시작 시간").textContent).toContain("9:08");
+});
+it("blocks confirmation and field switching until a user scroll settles", async () => {
+  props = { ...props, startTime: "09:07", endTime: "10:13" }; await render();
+  await choose("분", "14");
+  const hours = document.querySelector<HTMLElement>('[role="listbox"][aria-label="시"]')!;
+  await act(async () => {
+    hours.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true }));
+    hours.scrollTop += 40;
+    hours.dispatchEvent(new Event("scroll", { bubbles: true }));
+  });
+  expect(button("확인").disabled).toBe(true);
+  expect(button("시작 시간").disabled).toBe(true);
+  expect(save).not.toHaveBeenCalled();
+  await act(async () => hours.dispatchEvent(new Event("scrollend", { bubbles: true })));
+  await click("확인");
+  expect(save.mock.calls[0][0].body).toEqual({ endTime: "11:14" });
+});
+it("releases pending scroll when an untouched server field is refreshed", async () => {
+  props = { ...props, startTime: "09:07", endTime: "10:13" }; await render();
+  const hours = document.querySelector<HTMLElement>('[role="listbox"][aria-label="시"]')!;
+  await act(async () => {
+    hours.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true }));
+    hours.scrollTop += 40; hours.dispatchEvent(new Event("scroll", { bubbles: true }));
+  });
+  expect(button("시작 시간").disabled).toBe(true);
+  props = { ...props, endTime: "11:13" }; await render();
+  expect(button("시작 시간").disabled).toBe(false);
+  expect(button("확인").disabled).toBe(true);
+  expect(save).not.toHaveBeenCalled();
+});
diff --git a/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
index 5414f7f2..fff0f90b 100644
--- a/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
@@ -1,16 +1,27 @@
 "use client";
 
 import { useState } from "react";
+import Image from "next/image";
+import { formatTimePickerValue, timePartsFromHm, timePartsToHm, type TimeParts } from "@/lib/plan/timePickerDraft";
 import { toast } from "sonner";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
-import { MobileBottomSheet } from "@/components/mobile/MobileBottomSheet";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
 import { useUpdateScheduleItem } from "@/hooks/useRooms";
 import {
-  addMinutesToHm,
   computeDurationMinutesFromRange,
   normalizeStartTimeToHm,
   validateScheduleTimeDraft,
+  type ScheduleTimeDraftValidation,
 } from "@/lib/plan/scheduleTime";
 import { cn } from "@/lib/utils";
 
@@ -30,15 +41,6 @@ type MobileTimeSheetProps = Readonly<{
   onClose: () => void;
 }>;
 
-const DEFAULT_HM = "10:00";
-
-/** "13:05" → "오후 1:05" — 휠과 같이 시를 0~11로 표기 */
-function formatHm12h(hm: string): string {
-  if (!hm) return "";
-  const [h, m] = hm.split(":").map(Number);
-  return `${h < 12 ? "오전" : "오후"} ${h % 12}:${String(m).padStart(2, "0")}`;
-}
-
 /** 방문 시간 시트 — 시작·종료 칸을 누르면 휠 피커로 고른다 */
 export function MobileTimeSheet({
   roomId,
@@ -52,32 +54,36 @@ export function MobileTimeSheet({
 }: MobileTimeSheetProps) {
   const serverStart = normalizeStartTimeToHm(startTime ?? "");
   const serverEnd = normalizeStartTimeToHm(endTime ?? "");
-  const [start, setStart] = useState(serverStart || DEFAULT_HM);
-  const [end, setEnd] = useState(serverEnd);
-  const [activeField, setActiveField] = useState<Field | null>("start");
+  const [draftStart, setStart] = useState<TimeParts>();
+  const [draftEnd, setEnd] = useState<TimeParts>();
+  const startParts = draftStart ?? timePartsFromHm(serverStart);
+  const endParts = draftEnd ?? timePartsFromHm(serverEnd);
+  const start = timePartsToHm(startParts);
+  const end = timePartsToHm(endParts);
+  const [activeField, setActiveField] = useState<Field | null>(serverEnd ? "end" : serverStart ? "start" : null);
+  const [isWheelSettling, setWheelSettling] = useState(false);
   const { mutateAsync, isPending } = useUpdateScheduleItem();
 
   const dirty = start !== serverStart || end !== serverEnd;
-  const duration = computeDurationMinutesFromRange(start, end);
+  const duration = computeDurationMinutesFromRange(start ?? "", end ?? "");
   const subtitle = [
     dateLabel,
-    duration != null && end < start ? "다음 날 종료(+1일)" : null,
+    duration != null && end !== null && start !== null && end < start ? "다음 날 종료(+1일)" : null,
     duration != null ? `${Math.floor(duration / 60)}시간 ${duration % 60}분` : null,
   ]
     .filter(Boolean)
     .join(" · ");
-  const validation = validateScheduleTimeDraft(start, end);
+  const validation: ScheduleTimeDraftValidation = start === null || end === null
+    ? { valid: false, message: "오전/오후, 시, 분을 모두 선택해 주세요." }
+    : validateScheduleTimeDraft(start, end);
 
   function openField(field: Field) {
     if (field === "end" && !start) return;
     setActiveField((current) => (current === field ? null : field));
-    // 비어 있는 칸을 처음 열면 휠 기본값으로 채운다
-    if (field === "start" && !start) setStart(DEFAULT_HM);
-    if (field === "end" && !end) setEnd(addMinutesToHm(start, 60));
   }
 
   async function handleSave() {
-    if (isPending || !dirty) return;
+    if (isPending || isWheelSettling || !dirty) return;
     if (!validation.valid) {
       toast.error(validation.message);
       return;
@@ -99,105 +105,90 @@ export function MobileTimeSheet({
     }
   }
 
-  const fields: { key: Field; label: string; value: string }[] = [
+  const fields: { key: Field; label: string; value: string | null }[] = [
     { key: "start", label: "시작 시간", value: start },
     { key: "end", label: "종료 시간", value: end },
   ];
 
   return (
-    <MobileBottomSheet
-      open
-      onClose={onClose}
-      title={placeName}
-      subtitle={subtitle || undefined}
-      variant="form"
-      closeDisabled={isPending}
-    >
-      <div className="flex w-full items-end gap-2">
-        {fields.map(({ key, label, value }) => {
-          const active = activeField === key;
-          const display = formatHm12h(value);
-          return (
+    <Drawer open onOpenChange={(open) => { if (!open) onClose(); }} closeDisabled={isPending}>
+      <DrawerContent closeLabel="방문 시간 닫기">
+        <DrawerHeader>
+          <DrawerTitle>{placeName}</DrawerTitle>
+          {subtitle ? <DrawerDescription>{subtitle}</DrawerDescription> : null}
+        </DrawerHeader>
+        <DrawerBody className="gap-3">
+          <div className="flex h-[70px] w-full items-end gap-2">
+            {fields.map(({ key, label, value }) => {
+              const active = activeField === key;
+              const display = formatTimePickerValue(value);
+              return (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => openField(key)}
+                  disabled={isPending || isWheelSettling || (key === "end" && !start)}
+                  aria-expanded={active}
+                  aria-label={`${label} ${display || "미설정"}`}
+                  className={cn(
+                    "flex min-w-0 flex-1 flex-col gap-0.5 h-[70px] rounded-md border bg-fill-subtle px-2 pb-1.5 pt-3",
+                    active ? "border-primary" : "border-border",
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "w-full px-1 text-center text-label-xs-regular",
+                      active ? "text-primary-strong" : "text-text-subtle",
+                    )}
+                  >
+                    {label}
+                  </span>
+                  <span className="flex h-8 w-full items-center justify-center truncate px-1 text-body-m-regular tabular-nums text-text">
+                    {display || "-- : --"}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+
+          <div data-base-ui-swipe-ignore="" inert={isPending}>
+            <TimeWheelPicker
+              key={activeField ?? "idle"}
+              value={activeField === "end" ? endParts : startParts}
+              onChange={activeField === "end" ? setEnd : setStart}
+              active={activeField !== null}
+              onSettlingChange={setWheelSettling}
+            />
+          </div>
+          <div className="flex h-8 items-center justify-end px-1">
             <button
-              key={key}
               type="button"
-              onClick={() => openField(key)}
-              disabled={isPending || (key === "end" && !start)}
-              aria-expanded={active}
-              aria-label={`${label} ${display || "미설정"}`}
-              className={cn(
-                "flex min-w-0 flex-1 flex-col gap-0.5 rounded-lg border bg-fill-subtle px-2 pb-1.5 pt-3 disabled:opacity-40",
-                active ? "border-primary" : "border-border",
-              )}
+              disabled={isPending || (activeField === null && start === "" && end === "")}
+              onClick={() => {
+                setStart(timePartsFromHm(""));
+                setEnd(timePartsFromHm(""));
+                setActiveField(null);
+                setWheelSettling(false);
+              }}
+              className="relative flex h-8 items-center gap-1 text-label-xs-regular text-text-subtle disabled:text-text-disabled before:absolute before:-inset-y-1.5 before:inset-x-0 focus-visible:outline-2 focus-visible:outline-primary"
             >
-              <span
-                className={cn(
-                  "w-full px-1 text-center text-label-xs-regular",
-                  active ? "text-primary-strong" : "text-text-subtle",
-                )}
-              >
-                {label}
-              </span>
-              <span className="flex h-8 w-full items-center justify-center truncate px-1 text-body-m-regular tabular-nums text-text">
-                {display || "-- : --"}
-              </span>
+              <Image src={activeField === null && start === "" && end === "" ? "/icons/time-picker/reset-disabled.svg" : "/icons/time-picker/reset-active.svg"} width={16} height={16} alt="" />
+              초기화
             </button>
-          );
-        })}
-      </div>
-
-      {activeField ? (
-        <div inert={isPending} className={cn(isPending && "opacity-60")}>
-          <TimeWheelPicker
-            value={(activeField === "start" ? start : end) || DEFAULT_HM}
-            onChange={activeField === "start" ? setStart : setEnd}
-            active
-            onInteract={() => {}}
-          />
-        </div>
-      ) : null}
-
-      {start || end ? (
-        <div className="flex justify-end">
-          <button
-            type="button"
-            onClick={() => {
-              setStart("");
-              setEnd("");
-              setActiveField(null);
-            }}
-            disabled={isPending}
-            className="text-caption-l-regular text-text-subtle underline underline-offset-2 disabled:opacity-40"
+          </div>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose render={<Button variant="weak" />}>취소</DrawerClose>
+          <Button
+            loading={isPending}
+            loadingLabel="저장 중"
+            disabled={isWheelSettling || !dirty || !validation.valid}
+            onClick={() => void handleSave()}
           >
-            시간 지우기
-          </button>
-        </div>
-      ) : null}
-
-      <div className="flex h-11 w-full items-center gap-4 px-1">
-        <button
-          type="button"
-          onClick={onClose}
-          disabled={isPending}
-          className="flex-1 rounded-lg bg-fill-subtle px-2.5 py-2 text-label-m-emphasis text-text transition-colors enabled:hover:bg-fill enabled:hover:text-text-subtle enabled:active:bg-fill-strong enabled:active:text-text disabled:bg-fill disabled:text-text-disabled"
-        >
-          취소
-        </button>
-        <button
-          type="button"
-          onClick={() => void handleSave()}
-          disabled={isPending || !dirty || !validation.valid}
-          aria-busy={isPending}
-          className={cn(
-            "flex flex-1 items-center justify-center rounded-lg px-2.5 py-2 text-label-m-emphasis text-text-inverse transition-colors",
-            isPending
-              ? "bg-[var(--gray-900)]"
-              : "bg-[var(--gray-800)] enabled:hover:bg-[var(--gray-700)] enabled:active:bg-[var(--gray-900)] disabled:bg-fill disabled:text-text-disabled",
-          )}
-        >
-          {isPending ? <LoadingIndicator label="저장 중" className="text-text-inverse" /> : "확인"}
-        </button>
-      </div>
-    </MobileBottomSheet>
+            확인
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
   );
 }
diff --git a/src/app/(main)/plan/_components/mobile/mobilePlanDrag.test.ts b/src/app/(main)/plan/_components/mobile/mobilePlanDrag.test.ts
index 2335a017..d44fa4f0 100644
--- a/src/app/(main)/plan/_components/mobile/mobilePlanDrag.test.ts
+++ b/src/app/(main)/plan/_components/mobile/mobilePlanDrag.test.ts
@@ -7,6 +7,7 @@ vi.mock("@/hooks/useRooms", () => ({
   useReorderScheduleItem: vi.fn(),
 }));
 vi.mock("@/lib/analytics/track", () => ({ AnalyticsEvents: {}, trackAnalyticsEvent: vi.fn() }));
+vi.mock("@/hooks/useScheduleResyncPending", () => ({ useScheduleResyncPending: () => false }));
 
 const { applyPendingPlanMove, mobilePlanRowOffset } = await import("./mobilePlanDrag");
 
@@ -24,11 +25,16 @@ describe("applyPendingPlanMove", () => {
   });
 
   it("같은 일차 순서 변경은 그 일차에만 새 순서를 적용한다", () => {
-    const pending = { kind: "reorder" as const, scheduleId: 1, order: ["item-3", "item-1", "item-2"] };
+    const pending = { kind: "reorder" as const, scheduleId: 1, itemId: 3, newOrderIndex: 0 };
     expect(ids(applyPendingPlanMove(1, day1, pending))).toEqual([3, 1, 2]);
     expect(applyPendingPlanMove(2, day2, pending)).toBe(day2);
   });
 
+  it("서버 목록에 이미 새 순서가 반영됐으면 그대로 둔다", () => {
+    const pending = { kind: "reorder" as const, scheduleId: 1, itemId: 3, newOrderIndex: 0 };
+    expect(ids(applyPendingPlanMove(1, [place(3), place(1), place(2)], pending))).toEqual([3, 1, 2]);
+  });
+
   it("다른 일차로 이동하면 원래 일차에서 빼고 대상 일차의 위치에 넣는다", () => {
     const pending = {
       kind: "move" as const,
diff --git a/src/app/(main)/plan/_components/mobile/mobilePlanDrag.tsx b/src/app/(main)/plan/_components/mobile/mobilePlanDrag.tsx
index 5b34c5d6..9ddde949 100644
--- a/src/app/(main)/plan/_components/mobile/mobilePlanDrag.tsx
+++ b/src/app/(main)/plan/_components/mobile/mobilePlanDrag.tsx
@@ -17,9 +17,13 @@ import {
   useMoveScheduleItemToSchedule,
   useReorderScheduleItem,
 } from "@/hooks/useRooms";
+import { useScheduleResyncPending } from "@/hooks/useScheduleResyncPending";
 import { bucketItemCount } from "@/lib/analytics/context";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
-import { clampCrossDayTargetOrderIndex } from "@/lib/plan/planItemReorder";
+import {
+  clampCrossDayTargetOrderIndex,
+  PLAN_ORDER_RESYNCING_MESSAGE,
+} from "@/lib/plan/planItemReorder";
 import { newOrderIndexAfterMove } from "@/lib/plan/scheduleItemPlaces";
 import type { PlanPlace } from "@/lib/plan/types";
 
@@ -48,9 +52,9 @@ type ActiveDrag = {
   targetIndex: number;
 };
 
-/** 서버 반영 전 먼저 보여줄 이동 */
+/** 저장 중인 순서 변경·일차 이동 — 응답 전에 새 자리를 먼저 보여 준다(mutation 요청 값에서 계산) */
 export type PendingPlanMove =
-  | { kind: "reorder"; scheduleId: number; order: string[] }
+  | { kind: "reorder"; scheduleId: number; itemId: number; newOrderIndex: number }
   | { kind: "move"; place: PlanPlace; fromScheduleId: number; toScheduleId: number; toIndex: number };
 
 type MobilePlanDragValue = {
@@ -89,9 +93,11 @@ export function applyPendingPlanMove(
   if (!pending) return places;
   if (pending.kind === "reorder") {
     if (pending.scheduleId !== scheduleId) return places;
-    const byId = new Map(places.map((p) => [p.id, p]));
-    const ordered = pending.order.map((id) => byId.get(id)).filter((p): p is PlanPlace => !!p);
-    return ordered.length === places.length ? ordered : places;
+    const from = places.findIndex((p) => p.itemId === pending.itemId);
+    if (from < 0) return places;
+    const next = [...places];
+    next.splice(pending.newOrderIndex, 0, ...next.splice(from, 1));
+    return next;
   }
   const itemId = pending.place.itemId;
   if (pending.fromScheduleId === scheduleId) {
@@ -158,12 +164,38 @@ export function useMobilePlanDragController({
   const placesBySchedule = useRef(new Map<number, PlanPlace[]>());
   const activeRef = useRef<ActiveDrag | null>(null);
   const [active, setActive] = useState<ActiveDrag | null>(null);
-  const [pending, setPending] = useState<PendingPlanMove | null>(null);
   const rafRef = useRef<number | null>(null);
 
-  const { mutateAsync: reorderMutate, isReorderSettling } = useReorderScheduleItem();
-  const { mutateAsync: moveMutate, isPending: isMovePending } = useMoveScheduleItemToSchedule();
-  const dragDisabled = isReorderSettling || isMovePending || pending !== null;
+  const {
+    mutateAsync: reorderMutate,
+    isPending: isReorderPending,
+    variables: reorderVariables,
+  } = useReorderScheduleItem();
+  const {
+    mutateAsync: moveMutate,
+    isPending: isMovePending,
+    variables: moveVariables,
+  } = useMoveScheduleItemToSchedule();
+  const scheduleResyncPending = useScheduleResyncPending(roomId);
+  const dragDisabled = isReorderPending || isMovePending || scheduleResyncPending;
+  // 결과가 편집 목록에만 보이므로 캐시를 고치지 않고, 저장하는 동안 요청 값으로 새 자리를 그린다
+  let pending: PendingPlanMove | null = null;
+  if (isReorderPending && reorderVariables) {
+    pending = {
+      kind: "reorder",
+      scheduleId: reorderVariables.scheduleId,
+      itemId: reorderVariables.itemId,
+      newOrderIndex: reorderVariables.body.newOrderIndex,
+    };
+  } else if (isMovePending && moveVariables?.place) {
+    pending = {
+      kind: "move",
+      place: moveVariables.place,
+      fromScheduleId: moveVariables.sourceScheduleId,
+      toScheduleId: moveVariables.targetScheduleId,
+      toIndex: moveVariables.targetOrderIndex,
+    };
+  }
 
   const updateActive = useCallback((next: ActiveDrag | null) => {
     activeRef.current = next;
@@ -236,12 +268,14 @@ export function useMobilePlanDragController({
     if (typeof itemId !== "number") return;
     const sourcePlaces = placesBySchedule.current.get(sourceScheduleId) ?? [];
 
+    // 드래그하는 동안 연결이 끊겼으면 놓은 자리를 서버 순서로 확인할 수 없다
+    if (scheduleResyncPending) {
+      toast.error(PLAN_ORDER_RESYNCING_MESSAGE);
+      return;
+    }
+
     if (targetScheduleId === sourceScheduleId) {
       if (targetIndex === sourceIndex) return;
-      const order = sourcePlaces.map((p) => p.id);
-      const [moved] = order.splice(sourceIndex, 1);
-      order.splice(targetIndex, 0, moved!);
-      setPending({ kind: "reorder", scheduleId: sourceScheduleId, order });
       try {
         await reorderMutate({
           roomId,
@@ -256,31 +290,26 @@ export function useMobilePlanDragController({
         });
       } catch {
         toast.error("순서를 바꾸지 못했어요.");
-      } finally {
-        setPending(null);
       }
       return;
     }
 
     const targetLength = placesBySchedule.current.get(targetScheduleId)?.length ?? 0;
-    const toIndex = clampCrossDayTargetOrderIndex(targetIndex, targetLength);
-    setPending({ kind: "move", place, fromScheduleId: sourceScheduleId, toScheduleId: targetScheduleId, toIndex });
     try {
       await moveMutate({
         roomId,
         sourceScheduleId,
         itemId,
         targetScheduleId,
-        targetOrderIndex: toIndex,
+        targetOrderIndex: clampCrossDayTargetOrderIndex(targetIndex, targetLength),
+        place,
       });
     } catch (err) {
       toast.error(
         err instanceof Error && err.message.trim() ? err.message : "다른 일차로 옮기지 못했어요.",
       );
-    } finally {
-      setPending(null);
     }
-  }, [moveMutate, reorderMutate, roomId, updateActive]);
+  }, [moveMutate, reorderMutate, roomId, scheduleResyncPending, updateActive]);
 
   const startDrag = useCallback(
     (scheduleId: number, index: number, e: ReactPointerEvent<HTMLElement>) => {
diff --git a/src/app/(main)/plan/_components/mobile/useMobileAddPlaceSearch.tsx b/src/app/(main)/plan/_components/mobile/useMobileAddPlaceSearch.tsx
index a6873f03..e4aad83e 100644
--- a/src/app/(main)/plan/_components/mobile/useMobileAddPlaceSearch.tsx
+++ b/src/app/(main)/plan/_components/mobile/useMobileAddPlaceSearch.tsx
@@ -73,7 +73,7 @@ export function useMobileAddPlaceSearch({
       queryClient.getQueryData<PlanPlace[]>(scheduleItemsQueryKey(roomId.trim() || null, target.scheduleId)) ?? [];
     const insertIndex = resolveInsertIndex(latest, target.anchor);
     try {
-      const created = await createItem({
+      const { createdItem: created } = await createItem({
         roomId,
         scheduleId: target.scheduleId,
         googlePlaceId,
diff --git a/src/app/(main)/plan/_components/travel-time/PlanTravelTime.summary.test.tsx b/src/app/(main)/plan/_components/travel-time/PlanTravelTime.summary.test.tsx
new file mode 100644
index 00000000..a35386f2
--- /dev/null
+++ b/src/app/(main)/plan/_components/travel-time/PlanTravelTime.summary.test.tsx
@@ -0,0 +1,53 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { PlanTravelTime } from "./PlanTravelTime";
+
+const selectedRoute = vi.hoisted(() => ({
+  current: { data: undefined, isPending: false, isError: false, isFetching: false } as Record<string, unknown>,
+}));
+
+vi.mock("@/hooks/useRooms", () => ({
+  useScheduleItemRoute: () => selectedRoute.current,
+  useUpdateScheduleItemTravelMode: () => ({ mutate: vi.fn() }),
+}));
+vi.mock("@tanstack/react-query", () => ({
+  useQueries: ({ queries }: { queries: unknown[] }) => queries.map(() => ({ data: undefined })),
+}));
+vi.mock("@/contexts/MobileViewContext", () => ({ useMobileView: () => ({ isMobileDevice: false }) }));
+
+function renderSummary() {
+  return renderToStaticMarkup(
+    createElement(PlanTravelTime, {
+      roomId: "room-1",
+      scheduleId: 1,
+      segmentSourceItemId: 100,
+      destinationItemId: 101,
+      scheduleFingerprint: "100:a:|101:b:",
+      travelMode: "DRIVING",
+      contentOnly: true,
+    }),
+  );
+}
+
+describe("PlanTravelTime 요약 줄", () => {
+  beforeEach(() => {
+    selectedRoute.current = { data: undefined, isPending: false, isError: false, isFetching: false };
+  });
+
+  it("다시 받다가 실패해도 마지막 답이 '경로 없음'이면 오류 대신 그 답을 보여 준다", () => {
+    selectedRoute.current = { data: null, isPending: false, isError: true, isFetching: false };
+
+    const html = renderSummary();
+
+    expect(html).toContain("이동 안내 없음");
+    expect(html).not.toContain("경로 조회 오류");
+  });
+
+  it("받은 답 없이 실패하면 오류를 보여 준다", () => {
+    selectedRoute.current = { data: undefined, isPending: false, isError: true, isFetching: false };
+
+    expect(renderSummary()).toContain("경로 조회 오류");
+  });
+});
diff --git a/src/app/(main)/plan/_components/travel-time/PlanTravelTime.test.tsx b/src/app/(main)/plan/_components/travel-time/PlanTravelTime.test.tsx
new file mode 100644
index 00000000..69af9107
--- /dev/null
+++ b/src/app/(main)/plan/_components/travel-time/PlanTravelTime.test.tsx
@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+const api = vi.hoisted(() => ({ route: vi.fn(), updateMode: vi.fn() }));
+vi.mock("@/lib/api/rooms", async original => ({
+  ...await original<object>(), getScheduleItemRoute: api.route, updateScheduleItemTravelMode: api.updateMode,
+}));
+vi.mock("@/contexts/MobileViewContext", () => ({ useMobileView: () => ({ isMobileDevice: false }) }));
+import { PlanTravelTime } from "./PlanTravelTime";
+let root: Root;
+let container: HTMLDivElement;
+let client: QueryClient;
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  api.route.mockReset().mockImplementation(async (_r, _s, _i, _d, travelMode) => ({ travelMode, distanceMeters: 100, durationSeconds: 60 }));
+  api.updateMode.mockReset().mockImplementation(async (_r, _s, itemId, body) => ({ itemId, scheduleId: 10, googlePlaceId: "a", orderIndex: 0, startTime: null, endTime: null, createdAt: "2026-10-28", ...body }));
+  client = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  container = document.createElement("div"); document.body.append(container); root = createRoot(container);
+});
+afterEach(async () => { await act(async () => root.unmount()); container.remove(); client.clear(); vi.unstubAllGlobals(); });
+async function render(travelMode?: string) {
+  await act(async () => root.render(<QueryClientProvider client={client}><PlanTravelTime
+    roomId="room" scheduleId={10} segmentSourceItemId={1} destinationItemId={2} scheduleFingerprint=""
+    travelMode={travelMode} originGooglePlaceId="a" destinationGooglePlaceId="b"
+  /></QueryClientProvider>));
+}
+it.each([undefined, "BICYCLING", "CYCLING", "BOAT"])("does not query or save unsupported %s until an explicit supported selection", async mode => {
+  await render(mode);
+  expect(container.textContent).toContain("이동수단 선택");
+  expect(container.querySelector("a")).toBeNull();
+  expect(api.route).not.toHaveBeenCalled(); expect(api.updateMode).not.toHaveBeenCalled();
+  await act(async () => container.querySelector<HTMLButtonElement>("button[aria-expanded]")!.click());
+  const choice = [...container.querySelectorAll<HTMLButtonElement>("button[role=option]")].find(b => b.textContent?.includes("자동차"))!;
+  await act(async () => choice.click());
+  await vi.waitFor(() => expect(api.route).toHaveBeenCalledWith("room", 10, 1, 2, "DRIVING"));
+  expect(api.updateMode).toHaveBeenCalledExactlyOnceWith("room", 10, 1, { travelMode: "DRIVING" });
+});
+it.each(["DRIVING", "WALKING", "TRANSIT"])("queries supported %s without saving it", async mode => {
+  await render(mode);
+  await vi.waitFor(() => expect(api.route).toHaveBeenCalledWith("room", 10, 1, 2, mode));
+  expect(api.updateMode).not.toHaveBeenCalled();
+});
diff --git a/src/app/(main)/plan/_components/travel-time/PlanTravelTime.tsx b/src/app/(main)/plan/_components/travel-time/PlanTravelTime.tsx
index 62a9f71d..806df07d 100644
--- a/src/app/(main)/plan/_components/travel-time/PlanTravelTime.tsx
+++ b/src/app/(main)/plan/_components/travel-time/PlanTravelTime.tsx
@@ -13,7 +13,6 @@ import { persistedScheduleItemRouteQueryOptions } from "@/lib/plan/scheduleItemR
 import { buildScheduleItemRouteSummariesByMode } from "@/lib/plan/scheduleItemRouteModes";
 import {
   SCHEDULE_TRAVEL_MODES,
-  SCHEDULE_TRAVEL_MODE_DEFAULT,
   canonicalScheduleTravelMode,
   type ScheduleTravelModeValue,
 } from "@/lib/plan/scheduleTravelMode";
@@ -41,8 +40,10 @@ export type PlanTravelTimeProps = {
   roomId: string;
   scheduleId: number;
   segmentSourceItemId: number;
+  /** 다음 장소의 `itemId` — 경로를 이 항목까지 계산한다 */
+  destinationItemId: number;
   scheduleFingerprint: string;
-  /** 서버 저장 공유 이동수단 (`schedule_items.travel_mode`) — 없으면 기본 `DRIVING` */
+  /** 서버 원본 공유 이동수단 — 미지원·미설정이면 선택을 기다립니다. */
   travelMode?: string;
   routeQueryEnabled?: boolean;
   originGooglePlaceId?: string;
@@ -58,6 +59,7 @@ export function PlanTravelTime({
   roomId,
   scheduleId,
   segmentSourceItemId,
+  destinationItemId,
   scheduleFingerprint,
   travelMode,
   routeQueryEnabled = true,
@@ -76,22 +78,20 @@ export function PlanTravelTime({
   const rid = roomId.trim();
   /** 서버 저장값 기준 표준 이동수단 — 이 값이 곧 방 전체 공유 상태 */
   const serverMode =
-    canonicalScheduleTravelMode(travelMode) ?? SCHEDULE_TRAVEL_MODE_DEFAULT;
+    canonicalScheduleTravelMode(travelMode);
 
-  const [selectedMode, setSelectedMode] =
-    useState<ScheduleTravelModeValue>(serverMode);
-
-  /** 원격 변경(STOMP → schedule-items 갱신)·본인 PATCH 성공·구간 변경을 선택 상태에 반영 */
-  const modeSyncKey = `${rid}:${scheduleId}:${segmentSourceItemId}:${serverMode}`;
-  const [prevModeSyncKey, setPrevModeSyncKey] = useState(modeSyncKey);
-  if (prevModeSyncKey !== modeSyncKey) {
-    setPrevModeSyncKey(modeSyncKey);
-    setSelectedMode(serverMode);
-  }
-
-  const { mutate: mutateTravelMode } = useUpdateScheduleItemTravelMode();
+  const {
+    mutate: mutateTravelMode,
+    variables: pendingTravelMode,
+    isPending: isTravelModePending,
+  } = useUpdateScheduleItemTravelMode();
+  // 저장하는 동안은 고른 수단을 먼저 보여 주고, 끝나면(실패 포함) 다시 받은 서버 값을 보여 준다
+  const selectedMode =
+    isTravelModePending && pendingTravelMode?.itemId === segmentSourceItemId
+      ? pendingTravelMode.travelMode
+      : serverMode;
 
-  const googleMapsDirectionsUrl = buildGoogleMapsDirectionsUrl({
+  const googleMapsDirectionsUrl = selectedMode === null ? null : buildGoogleMapsDirectionsUrl({
     originPlaceId: originGooglePlaceId ?? "",
     originQuery: originPlaceName ?? "",
     destinationPlaceId: destinationGooglePlaceId ?? "",
@@ -108,6 +108,7 @@ export function PlanTravelTime({
     roomId,
     scheduleId,
     segmentSourceItemId,
+    destinationItemId,
     selectedMode,
     routeQueryEnabled,
     fpTrim,
@@ -129,6 +130,7 @@ export function PlanTravelTime({
         rid,
         scheduleId,
         segmentSourceItemId,
+        destinationItemId,
         mode,
         fpTrim,
         {
@@ -168,6 +170,7 @@ export function PlanTravelTime({
   }, [selectedRoute, menuDeferredModes, deferredRouteQueries]);
 
   const displayRoute = useMemo(() => {
+    if (selectedMode === null) return undefined;
     const sel = modeRouteSummaries[selectedMode];
     if (
       sel != null &&
@@ -202,7 +205,7 @@ export function PlanTravelTime({
       );
     };
     // 고르지 않은 수단은 조회하지 않으니 고른 수단만 불러오는 중을 표시한다
-    if (routeQueryEnabled) {
+    if (routeQueryEnabled && selectedMode !== null) {
       out[selectedMode] =
         !hasSummary(selectedMode) && (selectedPending || selectedFetching);
     }
@@ -220,10 +223,11 @@ export function PlanTravelTime({
   const summaryFetching = !displayRoute && selectedFetching;
 
   const summaryPending =
-    !displayRoute && !selectedFetching && selectedPending;
+    selectedMode !== null && !displayRoute && !selectedFetching && selectedPending;
 
+  // 마지막 답이 "경로 없음"(null)이면 다시 받다가 실패해도 그 답을 보여 준다 — 재조회 실패로 이미 받은 답을 오류로 바꾸지 않는다
   const summaryIsError =
-    !displayRoute && primarySettled && selectedError;
+    !displayRoute && primarySettled && selectedError && selectedRoute !== null;
 
   const summaryUnavailable =
     !displayRoute &&
@@ -234,9 +238,6 @@ export function PlanTravelTime({
     (mode: ScheduleTravelModeValue) => {
       setMenuOpen(false);
       if (mode === selectedMode) return;
-      /** 낙관적 반영 — 실패 시 선택 시점의 서버 저장값으로 복귀 */
-      const revertTo = serverMode;
-      setSelectedMode(mode);
       mutateTravelMode(
         {
           roomId: rid,
@@ -246,21 +247,12 @@ export function PlanTravelTime({
         },
         {
           onError: () => {
-            setSelectedMode(revertTo);
             toast.error("이동 수단을 변경하지 못했어요.");
           },
         },
       );
     },
-    [
-      rid,
-      scheduleId,
-      segmentSourceItemId,
-      selectedMode,
-      serverMode,
-      mutateTravelMode,
-      setSelectedMode,
-    ],
+    [rid, scheduleId, segmentSourceItemId, selectedMode, mutateTravelMode],
   );
 
   if (directionsHidden) {
@@ -290,7 +282,7 @@ export function PlanTravelTime({
       <TravelDirectionsCard
           menuOpen={menuOpen}
           onToggleMenu={() => setMenuOpen((o) => !o)}
-          summaryMode={selectedMode}
+          summaryMode={selectedMode ?? ""}
           route={displayRoute}
           routeQuery={{
             isPending: summaryPending,
@@ -301,8 +293,6 @@ export function PlanTravelTime({
           modeRouteSummaries={modeRouteSummaries}
           modeRouteRowLoading={modeRouteRowLoading}
           effectiveMode={selectedMode}
-          showUnknownOption={false}
-          modeRaw=""
           googleMapsDirectionsUrl={googleMapsDirectionsUrl ?? undefined}
           subtleDirectionsLink={!isMobileDevice}
           onSelectTravelMode={handleSelectTravelMode}
diff --git a/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.test.tsx b/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.test.tsx
index f7e281da..d6a5d576 100644
--- a/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.test.tsx
+++ b/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.test.tsx
@@ -21,8 +21,6 @@ describe("TravelDirectionsCard", () => {
           },
           routeUnavailable: true,
           effectiveMode: "TRANSIT",
-          showUnknownOption: false,
-          modeRaw: "TRANSIT",
           onHideDirections: () => {},
         },
       ),
@@ -57,8 +55,6 @@ describe("TravelDirectionsCard", () => {
           },
           routeUnavailable: false,
           effectiveMode: "TRANSIT",
-          showUnknownOption: false,
-          modeRaw: "TRANSIT",
           onHideDirections: () => {},
           googleMapsDirectionsUrl,
         },
diff --git a/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.tsx b/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.tsx
index 8bf43af2..6f3c8c5d 100644
--- a/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.tsx
+++ b/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { ChevronDown, ExternalLink, EyeOff, Loader2 } from "lucide-react";
-import { toast } from "sonner";
+import { ChevronDown, ExternalLink, EyeOff } from "lucide-react";
 
+import { Spinner } from "@/components/ui/spinner";
 import type { ScheduleItemRouteResponse } from "@/lib/api/rooms";
 import {
   formatRouteDistance,
@@ -37,9 +37,7 @@ export type TravelDirectionsCardProps = {
     Record<ScheduleTravelModeValue, ScheduleItemRouteSummary>
   >;
   modeRouteRowLoading?: Partial<Record<ScheduleTravelModeValue, boolean>>;
-  effectiveMode: ScheduleTravelModeValue;
-  showUnknownOption: boolean;
-  modeRaw: string;
+  effectiveMode: ScheduleTravelModeValue | null;
   googleMapsDirectionsUrl?: string;
   /** PC 일정 — 구간마다 반복되는 길찾기 링크가 튀지 않게 회색 12px로 낮춘다 */
   subtleDirectionsLink?: boolean;
@@ -59,8 +57,6 @@ export function TravelDirectionsCard({
   modeRouteSummaries = {},
   modeRouteRowLoading = {},
   effectiveMode,
-  showUnknownOption,
-  modeRaw,
   googleMapsDirectionsUrl,
   subtleDirectionsLink = false,
   readOnly = false,
@@ -71,7 +67,7 @@ export function TravelDirectionsCard({
   const headerTravelMode =
     canonicalScheduleTravelMode(summaryMode) ?? summaryMode;
 
-  const summaryLine = (
+  const summaryLine = !canonicalScheduleTravelMode(summaryMode) ? "이동수단 선택" : (
     <TravelRouteSummaryLine
       route={route}
       isPending={routeQuery.isPending}
@@ -146,9 +142,7 @@ export function TravelDirectionsCard({
                     {formatRouteDistance(rowSummary.distanceMeters)}
                   </>
                 ) : modeRouteRowLoading[value] ? (
-                  <span className="inline-flex items-center gap-1 text-dark-gray">
-                    <Loader2 className="h-3 w-3 animate-spin" />
-                  </span>
+                  <Spinner aria-label="이동 시간 불러오는 중" size={16} className="align-top" />
                 ) : null; // 고르지 않은 수단은 골라야 계산한다(미리 조회하지 않음)
               const rowClass = cn(
                 "col-span-3 grid grid-cols-subgrid items-center rounded-md px-1.5 py-1.5 text-left text-body-s-regular mobile:text-body-xs-regular",
@@ -199,32 +193,7 @@ export function TravelDirectionsCard({
                 </li>
               );
             })}
-            {showUnknownOption && !readOnly ? (
-              <li className="col-span-3">
-                <button
-                  type="button"
-                  className="flex w-full cursor-pointer items-center gap-2 rounded-md px-1.5 py-1.5 text-left text-label-m-regular mobile:text-label-s-regular hover:bg-gray-border/30 disabled:cursor-not-allowed disabled:opacity-50"
-                  onClick={() => {
-                    const c = canonicalScheduleTravelMode(modeRaw);
-                    if (!c) {
-                      toast.error(
-                        "표준 이동 수단으로 바꿀 수 없어요. 목록에서 선택해 주세요.",
-                      );
-                      return;
-                    }
-                    void onSelectTravelMode?.(c);
-                  }}
-                >
-                  <TravelModeGlyph mode={modeRaw} />
-                  <span className="font-medium text-gray-900">
-                    {scheduleTravelModeLabel(modeRaw)}
-                  </span>
-                  <span className="ml-auto text-body-xs-regular text-dark-gray">
-                    표준 값으로 변경
-                  </span>
-                </button>
-              </li>
-            ) : null}
+
           </ul>
 
           <div className="my-2 border-t border-gray-border" />
diff --git a/src/app/(main)/plan/_components/travel-time/TravelModeGlyph.tsx b/src/app/(main)/plan/_components/travel-time/TravelModeGlyph.tsx
index a6a23d08..04638713 100644
--- a/src/app/(main)/plan/_components/travel-time/TravelModeGlyph.tsx
+++ b/src/app/(main)/plan/_components/travel-time/TravelModeGlyph.tsx
@@ -12,5 +12,5 @@ export function TravelModeGlyph({ mode }: { mode: string }) {
     return <Car className="h-4 w-4 shrink-0 text-primary" />;
   if (key.includes("TRANSIT") || key.includes("BUS") || key.includes("SUBWAY"))
     return <Bus className="h-4 w-4 shrink-0 text-primary" />;
-  return <Footprints className="h-4 w-4 shrink-0 text-primary" />;
+  return null;
 }
diff --git a/src/app/(main)/plan/_components/travel-time/TravelRouteSummaryLine.tsx b/src/app/(main)/plan/_components/travel-time/TravelRouteSummaryLine.tsx
index 5d3d7e44..3629c108 100644
--- a/src/app/(main)/plan/_components/travel-time/TravelRouteSummaryLine.tsx
+++ b/src/app/(main)/plan/_components/travel-time/TravelRouteSummaryLine.tsx
@@ -1,4 +1,4 @@
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import type { ScheduleItemRouteResponse } from "@/lib/api/rooms";
 import { formatRouteDistance, formatRouteDuration } from "@/lib/plan/routeFormat";
@@ -37,13 +37,13 @@ export function TravelRouteSummaryLine({
 
   if (isFetching) {
     return (
-      <LoadingIndicator label="이동 시간 불러오는 중" size={14} />
+      <Spinner aria-label="이동 시간 불러오는 중" size={16} />
     );
   }
 
   if (isPending) {
     return (
-      <LoadingIndicator label="이동 시간 불러오는 중" size={14} />
+      <Spinner aria-label="이동 시간 불러오는 중" size={16} />
     );
   }
   if (isError) return <span className="text-status-negative">경로 조회 오류</span>;
diff --git a/src/app/(main)/plan/_components/travel-time/travelSegmentRailLayout.ts b/src/app/(main)/plan/_components/travel-time/travelSegmentRailLayout.ts
index 45bd8f50..6cf5f5c5 100644
--- a/src/app/(main)/plan/_components/travel-time/travelSegmentRailLayout.ts
+++ b/src/app/(main)/plan/_components/travel-time/travelSegmentRailLayout.ts
@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils";
 export const PLAN_SEGMENT_RAIL_ROW_CLASS =
   "relative flex h-10 w-8 shrink-0 items-center justify-center";
 
-/** 레일 `+` — `mapChipButtonClassName`의 px/py 없이 정원 유지 */
+/** 레일 `+` — 28px 정원 버튼 */
 export function planSegmentAddButtonClassName(active: boolean) {
   return cn(
     "flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full shadow-sm transition-[background-color,opacity,box-shadow]",
diff --git a/src/app/auth/callback/page.tsx b/src/app/auth/callback/page.tsx
index 4ae95d5a..42c3374d 100644
--- a/src/app/auth/callback/page.tsx
+++ b/src/app/auth/callback/page.tsx
@@ -11,6 +11,7 @@ import {
   loginErrorQueryForExchangeFailure,
   saveGoogleAgreementFlowSession,
 } from "@/lib/google-oauth";
+import { pendingInviteAuthPath } from "@/lib/session-user-flow";
 import { finishGoogleLogin } from "@/lib/google-login-client";
 
 function AuthCallbackContent() {
@@ -37,7 +38,7 @@ function AuthCallbackContent() {
       !pending ||
       returnedState !== pending.state
     ) {
-      router.replace("/login?error=OAuthCallback");
+      router.replace(pendingInviteAuthPath("/login?error=OAuthCallback"));
       return;
     }
 
@@ -45,7 +46,7 @@ function AuthCallbackContent() {
       .then(async (result) => {
         if (result.ok && result.status === "AUTHENTICATED") {
           const destination = await finishGoogleLogin(queryClient);
-          router.replace(destination ?? "/login?error=OAuthCallback");
+          router.replace(destination ?? pendingInviteAuthPath("/login?error=OAuthCallback"));
           return;
         }
 
@@ -55,7 +56,7 @@ function AuthCallbackContent() {
             signupToken: result.signupToken,
             expiresAt: Date.now() + result.expiresInSeconds * 1000,
           });
-          router.replace("/login/agreements");
+          router.replace(pendingInviteAuthPath("/login/agreements"));
           return;
         }
 
@@ -65,15 +66,15 @@ function AuthCallbackContent() {
             reacceptanceToken: result.reacceptanceToken,
             expiresAt: Date.now() + result.expiresInSeconds * 1000,
           });
-          router.replace("/login/agreements");
+          router.replace(pendingInviteAuthPath("/login/agreements"));
           return;
         }
 
         const errorQuery = loginErrorQueryForExchangeFailure(result.errorCode);
-        router.replace(`/login?error=${errorQuery}`);
+        router.replace(pendingInviteAuthPath(`/login?error=${errorQuery}`));
       })
       .catch(() => {
-        router.replace("/login?error=OAuthCallback");
+        router.replace(pendingInviteAuthPath("/login?error=OAuthCallback"));
       });
   }, [searchParams, router, queryClient]);
 
diff --git a/src/app/globals.css b/src/app/globals.css
index ea5ef06f..c0d12476 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -57,6 +57,11 @@
     @apply font-sans;
   }
 
+  /* Base UI 권장: iOS 26 Safari에서 대화상자 딤(position: absolute)이 스크롤한 뒤에도 화면 전체를 덮게 한다 */
+  body {
+    position: relative;
+  }
+
   /* 스크롤바 공간 예약은 폭 유지가 필요한 본문·목록에서만 개별 지정한다. */
 }
 
@@ -65,13 +70,6 @@ html:has([data-mobile-main-tabs]) {
   --toast-bottom-inset: calc(52px + env(safe-area-inset-bottom));
 }
 
-/* Sonner 기본 [data-icon]는 16×16(상태 SVG용). 아바타 등은 24×24로 맞춤 */
-[data-sonner-toast][data-styled="true"] [data-icon] {
-  width: 24px;
-  height: 24px;
-  justify-content: center;
-}
-
 /**
  * 채팅 메시지 목록 스크롤 영역 — 스크롤바 트랙·막대 항상 표시
  * (패딩은 내부 콘텐츠 래퍼에 두어 말풍선과 스크롤바가 겹치지 않게 함)
diff --git a/src/app/home/(with-header)/my-info/page.tsx b/src/app/home/(with-header)/my-info/page.tsx
index 5362cc22..63c67c1d 100644
--- a/src/app/home/(with-header)/my-info/page.tsx
+++ b/src/app/home/(with-header)/my-info/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import Link from "next/link";
 import { ArrowLeft, ChevronRight } from "lucide-react";
@@ -10,8 +10,8 @@ import { toast } from "sonner";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { CookieSettingsButton } from "@/components/analytics/CookieSettingsProvider";
+import { Button } from "@/components/ui/button";
 import { UserAvatar } from "@/components/user/UserAvatar";
-import { SettingsActionButton } from "@/components/settings/SettingsActionButton";
 import { WithdrawAccountConfirmModal } from "@/components/settings/WithdrawAccountConfirmModal";
 import { WithdrawalDelegationRequiredModal } from "@/components/settings/WithdrawalDelegationRequiredModal";
 
@@ -100,7 +100,7 @@ export default function MyInfoPage() {
 
           {isLoading && (
             <div className="flex items-center justify-center py-20">
-              <LoadingIndicator label="내 정보 불러오는 중" size={32} />
+              <Spinner aria-label="내 정보 불러오는 중" size={32} />
             </div>
           )}
 
@@ -110,15 +110,15 @@ export default function MyInfoPage() {
               <p className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-dark-gray">
                 내 정보를 불러오지 못했어요
               </p>
-              <button
-                type="button"
+              <Button
+                tone="brand"
+                loading={isFetching}
+                loadingLabel="다시 불러오는 중"
                 onClick={() => refetch()}
-                disabled={isFetching}
-                aria-busy={isFetching}
-                className="mt-3 rounded-full bg-primary px-4 py-2 text-label-l-emphasis mobile:text-label-m-emphasis font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
+                className="mt-3"
               >
                 다시 시도
-              </button>
+              </Button>
             </div>
           )}
 
@@ -169,20 +169,20 @@ export default function MyInfoPage() {
               </section>
 
               <div className="mt-8">
-                <SettingsActionButton
-                  variant="secondary"
-                  flex={false}
-                  className="w-full"
+                <Button
+                  variant="outline"
+                  loading={isLoggingOut}
+                  loadingLabel="로그아웃 중"
                   onClick={handleLogout}
-                  disabled={isLoggingOut}
+                  className="w-full"
                 >
-                  {isLoggingOut ? "로그아웃 중…" : "로그아웃"}
-                </SettingsActionButton>
+                  로그아웃
+                </Button>
 
                 <button
                   type="button"
                   onClick={() => setShowWithdrawConfirm(true)}
-                  className="mt-3 block text-label-s-regular mobile:text-label-xs-regular text-dark-gray underline underline-offset-2 transition hover:text-neutral-900"
+                  className="mt-3 block cursor-pointer text-label-s-regular mobile:text-label-xs-regular text-dark-gray underline underline-offset-2 transition hover:text-neutral-900"
                 >
                   회원 탈퇴
                 </button>
diff --git a/src/app/home/(with-header)/page.test.tsx b/src/app/home/(with-header)/page.test.tsx
index 2c979a37..3a799c29 100644
--- a/src/app/home/(with-header)/page.test.tsx
+++ b/src/app/home/(with-header)/page.test.tsx
@@ -2,6 +2,8 @@
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { FEEDBACK_FORM_URL } from "@/lib/contact";
+
 import HomePage from "./page";
 
 const state = vi.hoisted(() => ({ isMobileDevice: true }));
@@ -53,10 +55,10 @@ it("includes the room-list site footer in the mobile empty page", async () => {
 it("places the feedback banner before the room list and links it to the form", async () => {
   await act(async () => root.render(<HomePage />));
 
-  const banner = host.querySelector<HTMLAnchorElement>('a[href="https://forms.gle/giYqRzrhCYF9Hz1M9"]');
+  const banner = host.querySelector<HTMLAnchorElement>(`a[href="${FEEDBACK_FORM_URL}"]`);
   const heading = host.querySelector("h1");
   expect(banner).not.toBeNull();
   expect(heading).not.toBeNull();
-  expect(banner?.getAttribute("aria-label")).toContain("피드백 이벤트");
+  expect(banner?.getAttribute("aria-label")).toContain("피드백 남기기");
   expect(banner?.compareDocumentPosition(heading!)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
 });
diff --git a/src/app/home/_components/DeleteConfirmModal.tsx b/src/app/home/_components/DeleteConfirmModal.tsx
index 3f5ad3c1..66805b05 100644
--- a/src/app/home/_components/DeleteConfirmModal.tsx
+++ b/src/app/home/_components/DeleteConfirmModal.tsx
@@ -25,7 +25,6 @@ export function DeleteConfirmModal({ room, onClose, onDeleted }: Props) {
 
   return (
     <ConfirmDialog
-      appearance="ledger"
       destructive
       title="여행을 삭제하시겠어요?"
       description={`${room.title}의 모든 정보가 삭제되며,\n삭제한 여행은 복구할 수 없어요.`}
diff --git a/src/app/home/_components/FeedbackBanner.module.css b/src/app/home/_components/FeedbackBanner.module.css
index c15ab3ab..ae654425 100644
--- a/src/app/home/_components/FeedbackBanner.module.css
+++ b/src/app/home/_components/FeedbackBanner.module.css
@@ -3,8 +3,8 @@
   container-type: inline-size;
   overflow: hidden;
   border-radius: 8px;
-  background: #d6f2ff;
-  color: #000;
+  background: var(--color-primary-subtle);
+  color: var(--color-text-default);
 }
 
 /* Scale the Figma canvas with its container, keeping text sharp at any DPR. */
@@ -41,19 +41,7 @@
 }
 
 .feedback {
-  color: #0183ff;
-}
-
-.reward {
-  color: #ff5521;
-}
-
-.period {
-  left: calc(367 * var(--unit));
-  top: calc(124 * var(--unit));
-  font-size: calc(13 * var(--unit));
-  line-height: calc(24 * var(--unit));
-  letter-spacing: calc(-0.26 * var(--unit));
+  color: var(--color-primary-default);
 }
 
 .cta {
@@ -61,7 +49,7 @@
   inset: auto 0 0;
   height: calc(62 * var(--unit));
   padding: calc(19 * var(--unit)) calc(49 * var(--unit));
-  background: linear-gradient(to right, #0183ff, #a6d3ff);
+  background: linear-gradient(to right, var(--color-primary-default), #a6d3ff);
   color: #fff;
   font-size: calc(16 * var(--unit));
   font-weight: 700;
@@ -79,17 +67,13 @@
   box-shadow: 0 calc(10 * var(--unit)) calc(10 * var(--unit)) rgb(0 0 0 / 25%);
 }
 
-.burger {
+.reviewIcon {
   position: absolute;
-  left: calc(690 * var(--unit));
-  top: calc(55 * var(--unit));
-  width: calc(224 * var(--unit));
-  height: calc(179 * var(--unit));
-  background: url("/rooms/banners/feedback/burger.webp") center / cover no-repeat;
-}
-
-.badge {
-  display: none;
+  left: calc(680 * var(--unit));
+  top: calc(45 * var(--unit));
+  width: calc(180 * var(--unit));
+  height: calc(180 * var(--unit));
+  background: url("/rooms/banners/feedback/review-icon.webp") center / contain no-repeat;
 }
 
 :global(.is-mobile-device) .canvas {
@@ -98,49 +82,43 @@
 }
 
 :global(.is-mobile-device) .subtitle {
-  left: calc(55 * var(--unit));
-  top: calc(6 * var(--unit));
-  font-size: calc(12 * var(--unit));
-  letter-spacing: calc(-0.24 * var(--unit));
+  left: calc(13 * var(--unit));
+  top: calc(12 * var(--unit));
+  font-size: calc(11 * var(--unit));
+  line-height: calc(16 * var(--unit));
+  letter-spacing: calc(-0.22 * var(--unit));
 }
 
 :global(.is-mobile-device) .title {
   left: calc(13 * var(--unit));
-  top: calc(27 * var(--unit));
-  font-size: calc(28 * var(--unit));
-  line-height: calc(32 * var(--unit));
+  top: calc(32 * var(--unit));
+  font-size: calc(16 * var(--unit));
+  line-height: calc(22 * var(--unit));
+  letter-spacing: calc(-0.32 * var(--unit));
 }
 
-:global(.is-mobile-device) .period {
-  left: calc(10 * var(--unit));
-  top: calc(89 * var(--unit));
+/* Mobile Figma shows the CTA as a blue text line instead of the desktop gradient bar. */
+:global(.is-mobile-device) .cta {
+  inset: auto;
+  left: calc(13 * var(--unit));
+  top: calc(82 * var(--unit));
+  height: auto;
+  padding: 0;
+  background: none;
+  color: var(--color-primary-default);
   font-size: calc(11 * var(--unit));
+  font-weight: 600;
+  line-height: calc(16 * var(--unit));
   letter-spacing: calc(-0.22 * var(--unit));
 }
 
-:global(.is-mobile-device) .burger {
-  left: calc(246 * var(--unit));
-  top: calc(15 * var(--unit));
-  width: calc(147 * var(--unit));
-  height: calc(117 * var(--unit));
-}
-
-:global(.is-mobile-device) .badge {
-  display: block;
-  position: absolute;
-  left: calc(10 * var(--unit));
-  top: calc(10 * var(--unit));
-  width: calc(42 * var(--unit));
-  height: calc(14 * var(--unit));
-  border-radius: 14px;
-  background: #beff0c;
-  font-size: calc(10 * var(--unit));
-  line-height: calc(14 * var(--unit));
-  letter-spacing: calc(-0.2 * var(--unit));
-  text-align: center;
+:global(.is-mobile-device) .reviewIcon {
+  left: calc(279 * var(--unit));
+  top: calc(30 * var(--unit));
+  width: calc(72 * var(--unit));
+  height: calc(72 * var(--unit));
 }
 
-:global(.is-mobile-device) .cta,
 :global(.is-mobile-device) .appPreview {
   display: none;
 }
diff --git a/src/app/home/_components/FeedbackBanner.tsx b/src/app/home/_components/FeedbackBanner.tsx
index 15b68cda..6b3f4e70 100644
--- a/src/app/home/_components/FeedbackBanner.tsx
+++ b/src/app/home/_components/FeedbackBanner.tsx
@@ -4,18 +4,16 @@ export function FeedbackBanner() {
   return (
     <div aria-hidden="true" className={styles.banner}>
       <div className={styles.canvas}>
-        <span className={styles.badge}>EVENT</span>
         <p className={styles.subtitle}>
-          우때를 써보고 <strong>아쉬운 점</strong>이나 <strong>좋았던 점</strong>이 있었다면? 🥹
+          우때 써보니 어떠셨나요? <strong>짧은 한마디</strong>도 큰 힘이 돼요!
         </p>
         <p className={styles.title}>
-          <span className={styles.feedback}>피드백</span> 남기고<br />
-          <span className={styles.reward}>싸이버거</span> 받아 가세요!
+          우때는 여러분의 <span className={styles.feedback}>피드백</span>으로<br />
+          더 좋은 여행계획 도구로 발전 중!
         </p>
-        <p className={styles.period}>이벤트 기간 : ~10/25일</p>
-        <div className={styles.cta}>피드백 남기러가기 &gt;</div>
+        <div className={styles.cta}>지금 피드백 남기기 &gt;</div>
         <div className={styles.appPreview} />
-        <div className={styles.burger} />
+        <div className={styles.reviewIcon} />
       </div>
     </div>
   );
diff --git a/src/app/home/_components/HomeBannerCarousel.tsx b/src/app/home/_components/HomeBannerCarousel.tsx
index 8eba5ef2..e67f6bba 100644
--- a/src/app/home/_components/HomeBannerCarousel.tsx
+++ b/src/app/home/_components/HomeBannerCarousel.tsx
@@ -3,6 +3,8 @@
 import { useState, type ReactNode } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
+import { FEEDBACK_FORM_URL } from "@/lib/contact";
+
 import { FeedbackBanner } from "./FeedbackBanner";
 
 export type HomeBanner = {
@@ -14,9 +16,9 @@ export type HomeBanner = {
 
 export const HOME_BANNERS: readonly HomeBanner[] = [
   {
-    id: "feedback-event",
-    href: "https://forms.gle/giYqRzrhCYF9Hz1M9",
-    label: "피드백 이벤트: 피드백 남기고 싸이버거 받아 가세요! 이벤트 기간 ~10/25일, 참여하기 (새 창)",
+    id: "feedback",
+    href: FEEDBACK_FORM_URL,
+    label: "피드백 남기기: 우때는 여러분의 피드백으로 더 좋은 여행계획 도구로 발전 중! (새 창)",
     content: <FeedbackBanner />,
   },
 ];
@@ -30,7 +32,7 @@ export function HomeBannerCarousel({ banners }: { banners: readonly HomeBanner[]
   const banner = banners[currentIndex];
 
   return (
-    <section aria-label="이벤트 배너" className="pt-8 pb-8 mobile:pt-6 mobile:pb-6">
+    <section aria-label="배너" className="pt-8 pb-8 mobile:pt-6 mobile:pb-6">
       <a
         key={banner.id}
         href={banner.href}
diff --git a/src/app/home/_components/HomeHeader.tsx b/src/app/home/_components/HomeHeader.tsx
index e3224725..2e58360c 100644
--- a/src/app/home/_components/HomeHeader.tsx
+++ b/src/app/home/_components/HomeHeader.tsx
@@ -2,16 +2,25 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import Image from "next/image";
-import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
+import { SignLogoutIcon, UserIcon } from "@/assets/icons";
 import { BrandLogo } from "@/components/BrandLogo";
+import { Avatar } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuHeader,
+  DropdownMenuHeaderDescription,
+  DropdownMenuHeaderTitle,
+  DropdownMenuItem,
+  DropdownMenuLinkItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { UserAvatar } from "@/components/user/UserAvatar";
 
 import { useQueryClient } from "@tanstack/react-query";
 
-import { useOnClickOutside } from "@/hooks/useOnClickOutside";
 import { logout } from "@/lib/api/auth";
 import { useSessionUser } from "@/hooks/useSessionUser";
 import { tearDownClientSession } from "@/lib/client-storage";
@@ -19,25 +28,9 @@ import { tearDownClientSession } from "@/lib/client-storage";
 export function HomeHeader() {
   const pathname = usePathname();
   const queryClient = useQueryClient();
-  const [open, setOpen] = useState(false);
-  const profileRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  useOnClickOutside(profileRef, () => setOpen(false));
 
   const { data: user } = useSessionUser();
 
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        setOpen(false);
-        buttonRef.current?.focus();
-      }
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [open]);
-
   const handleLogout = async () => {
     const result = await logout().catch(() => {});
     if (!result?.ok) {
@@ -56,53 +49,36 @@ export function HomeHeader() {
           <BrandLogo variant="combination" size="S" alt="로고" />
         </div>
 
-        <div ref={profileRef} className="relative">
-          <button
-            ref={buttonRef}
-            type="button"
-            onClick={() => setOpen((v) => !v)}
-            className="flex size-12 items-center justify-center rounded-[8px] transition hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary"
+        <DropdownMenu>
+          <DropdownMenuTrigger
             aria-label="프로필"
-            aria-expanded={open}
+            className="flex size-12 items-center justify-center rounded-[8px] transition hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary"
           >
             {user?.profileImageUrl ? (
               <UserAvatar user={user} size={36} />
             ) : (
-              <span className="size-9 rounded-full bg-fill-strong" aria-hidden />
+              <Avatar size={36} aria-hidden />
             )}
-          </button>
-
-          {open && (
-            <div className="absolute right-2 top-[48.5px] z-50 w-60 max-w-[calc(100vw-2rem)] overflow-hidden rounded-[12px] bg-white text-text shadow-[0_2px_10px_rgba(0,0,0,0.1)]">
-              {user && (
-                <div className="py-5 pl-5 pr-4 shadow-[inset_0_-0.5px_0_var(--color-border-subtle)]">
-                  <p className="truncate text-label-xl-emphasis font-bold leading-[22px] tracking-[-0.02em]">
-                    {user.nickname}
-                  </p>
-                  <p className="mt-1 truncate text-body-s-regular text-text-subtle">
-                    {user.email}
-                  </p>
-                </div>
-              )}
-              <Link
-                href="/home/my-info"
-                onClick={() => setOpen(false)}
-                className="flex h-[52px] w-full items-center gap-2 py-3.5 pl-5 pr-4 text-left text-label-l-regular shadow-[inset_0_-0.5px_0_var(--color-border-subtle)] hover:bg-fill focus-visible:bg-fill"
-              >
-                <Image src="/rooms/figma/user.svg" alt="" width={20} height={20} className="size-5 shrink-0" />
-                내 정보
-              </Link>
-              <button
-                type="button"
-                onClick={handleLogout}
-                className="flex h-[52px] w-full cursor-pointer items-center gap-2 py-3.5 pl-5 pr-4 text-left text-label-l-regular shadow-[inset_0_-0.5px_0_var(--color-border-subtle)] hover:bg-fill focus-visible:bg-fill"
-              >
-                <Image src="/rooms/figma/logout.svg" alt="" width={20} height={20} className="size-5 shrink-0" />
-                로그아웃
-              </button>
-            </div>
-          )}
-        </div>
+          </DropdownMenuTrigger>
+          {/* 지금 자리 그대로: 48px 버튼 기준 right 8px, top 48.5px(Figma 프로필 오버레이 L 3314:3242) */}
+          <DropdownMenuContent align="end" alignOffset={8} sideOffset={0.5} size="lg" className="w-60">
+            {user && (
+              <DropdownMenuHeader>
+                <DropdownMenuHeaderTitle>{user.nickname}</DropdownMenuHeaderTitle>
+                <DropdownMenuHeaderDescription>{user.email}</DropdownMenuHeaderDescription>
+              </DropdownMenuHeader>
+            )}
+            <DropdownMenuLinkItem render={<Link href="/home/my-info" />}>
+              <UserIcon />
+              내 정보
+            </DropdownMenuLinkItem>
+            {/* 지금처럼 로그아웃 요청 중에도 메뉴를 열어 두고, 실패하면 토스트만 띄운다(성공하면 문서 이동) */}
+            <DropdownMenuItem closeOnClick={false} onClick={handleLogout}>
+              <SignLogoutIcon />
+              로그아웃
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </header>
   );
diff --git a/src/app/home/_components/InviteRoomModal.tsx b/src/app/home/_components/InviteRoomModal.tsx
index 9f1dbd2b..ca7b2c22 100644
--- a/src/app/home/_components/InviteRoomModal.tsx
+++ b/src/app/home/_components/InviteRoomModal.tsx
@@ -1,14 +1,18 @@
 "use client";
 
+import type { ComponentProps } from "react";
+
 import { InviteRoomDialog } from "@/components/rooms/InviteRoomDialog";
 import { useRoomDetail } from "@/hooks/useRoomDetail";
 import type { RoomListItem } from "@/lib/api/rooms";
 
 /** 홈 방 카드 메뉴의 초대 — 헤더와 같은 초대하기 모달에 이 방의 정보를 넘긴다 */
-export function InviteRoomModal({ room, onClose }: {
+export function InviteRoomModal({ room, finalFocus, onClose }: Readonly<{
   room: RoomListItem;
+  /** 닫은 뒤 포커스를 돌릴 곳(방 카드 더보기 버튼) */
+  finalFocus: ComponentProps<typeof InviteRoomDialog>["finalFocus"];
   onClose: () => void;
-}) {
+}>) {
   const { data, isLoading, isError, refetch } = useRoomDetail(room.id);
 
   return (
@@ -21,6 +25,7 @@ export function InviteRoomModal({ room, onClose }: {
       isRoomDetailError={isError}
       onRetryRoomDetail={() => { void refetch(); }}
       onClose={onClose}
+      finalFocus={finalFocus}
     />
   );
 }
diff --git a/src/app/home/_components/LeaveConfirmModal.tsx b/src/app/home/_components/LeaveConfirmModal.tsx
index dd735b1d..6030b866 100644
--- a/src/app/home/_components/LeaveConfirmModal.tsx
+++ b/src/app/home/_components/LeaveConfirmModal.tsx
@@ -28,7 +28,6 @@ export function LeaveConfirmModal({ room, onClose }: Props) {
 
   return (
     <ConfirmDialog
-      appearance="ledger"
       destructive
       title="방에서 나가시겠어요?"
       description={"방을 나가면 이 여행의 일정과 대화에\n더 이상 접근할 수 없어요."}
diff --git a/src/app/home/_components/RoomCardMenu.test.tsx b/src/app/home/_components/RoomCardMenu.test.tsx
index 4e47173e..bd1e469c 100644
--- a/src/app/home/_components/RoomCardMenu.test.tsx
+++ b/src/app/home/_components/RoomCardMenu.test.tsx
@@ -32,7 +32,10 @@ let host: HTMLDivElement;
 let root: Root;
 const onDelete = vi.fn();
 const onLeave = vi.fn();
-const button = (label: string) => [...document.querySelectorAll<HTMLButtonElement>("button")].find(b => b.textContent?.trim() === label || b.getAttribute("aria-label") === label)!;
+// 메뉴 항목은 Base UI Menu.Item(role="menuitem")이라 버튼과 함께 찾는다
+const button = (label: string) => [...document.querySelectorAll<HTMLButtonElement>('button, [role="menuitem"]')].find(b => b.textContent?.trim() === label || b.getAttribute("aria-label") === label)!;
+const dialog = () => document.querySelector<HTMLElement>('[role="dialog"]');
+const flush = () => act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)); });
 const click = async (label: string) => {
   expect(button(label), `button: ${label}`).toBeDefined();
   await act(async () => button(label).click());
@@ -64,14 +67,15 @@ afterEach(async () => {
 
 it("opens the selected room's invite link without regenerating it and restores focus on Escape", async () => {
   await openInvite();
-  expect(document.querySelector("dialog[open] h2")?.textContent).toBe("초대하기");
+  expect(dialog()?.querySelector("h2")?.textContent).toBe("초대하기");
   expect(state.detailId).toHaveBeenCalledWith("selected-room");
   expect(state.regenerate).not.toHaveBeenCalled();
   await click("복사");
-  expect(state.copy).toHaveBeenCalledWith(`${window.location.origin}/join/existing-code`);
+  expect(state.copy).toHaveBeenCalledWith(`${window.location.origin}/join/existing-code?utm_source=member_invite&utm_medium=referral&utm_campaign=invite`);
   expect(button("복사됨")).toBeDefined();
   await act(async () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
-  expect(document.querySelector("dialog[open]")).toBeNull();
+  await flush();
+  expect(dialog()).toBeNull();
   expect(document.activeElement).toBe(button("제주 여행 더보기"));
   expect(onDelete).not.toHaveBeenCalled();
 });
@@ -83,7 +87,7 @@ it("issues a link once when the room detail confirms no existing code", async ()
   expect(state.regenerate.mock.calls[0][0]).toEqual({ roomId: "selected-room", trigger: "automatic" });
   await act(async () => state.regenerate.mock.calls[0][1].onSuccess({ inviteCode: "first-code" }));
   await click("복사");
-  expect(state.copy).toHaveBeenCalledWith(`${window.location.origin}/join/first-code`);
+  expect(state.copy).toHaveBeenCalledWith(`${window.location.origin}/join/first-code?utm_source=member_invite&utm_medium=referral&utm_campaign=invite`);
 });
 
 it.each(["loading", "error"])("does not issue links while detail is %s", async (mode) => {
@@ -111,7 +115,7 @@ it.each(["loading", "error"])("does not issue links while detail is %s", async (
   await render();
   expect(button("다시 시도")).toBeUndefined();
   await click("복사");
-  expect(state.copy).toHaveBeenCalledExactlyOnceWith(`${window.location.origin}/join/recovered-code`);
+  expect(state.copy).toHaveBeenCalledExactlyOnceWith(`${window.location.origin}/join/recovered-code?utm_source=member_invite&utm_medium=referral&utm_campaign=invite`);
   expect(state.regenerate).not.toHaveBeenCalled();
 });
 
@@ -129,11 +133,11 @@ it("regenerates only on request and keeps the existing link when regeneration fa
   expect(state.regenerate).toHaveBeenCalledTimes(1);
   await act(async () => state.regenerate.mock.calls[0][1].onError());
   await click("복사");
-  expect(state.copy).toHaveBeenLastCalledWith(`${window.location.origin}/join/existing-code`);
+  expect(state.copy).toHaveBeenLastCalledWith(`${window.location.origin}/join/existing-code?utm_source=member_invite&utm_medium=referral&utm_campaign=invite`);
   await click("초대 링크 재발급");
   await act(async () => state.regenerate.mock.calls[1][1].onSuccess({ inviteCode: "new-code" }));
   await click("복사");
-  expect(state.copy).toHaveBeenLastCalledWith(`${window.location.origin}/join/new-code`);
+  expect(state.copy).toHaveBeenLastCalledWith(`${window.location.origin}/join/new-code?utm_source=member_invite&utm_medium=referral&utm_campaign=invite`);
 });
 
 it("blocks copying and sharing the old link while regeneration is pending", async () => {
@@ -148,7 +152,7 @@ it("blocks copying and sharing the old link while regeneration is pending", asyn
   await act(async () => state.regenerate.mock.calls[0][1].onSuccess({ inviteCode: "new-code" }));
   await render();
   await click("복사");
-  expect(state.copy).toHaveBeenLastCalledWith(`${window.location.origin}/join/new-code`);
+  expect(state.copy).toHaveBeenLastCalledWith(`${window.location.origin}/join/new-code?utm_source=member_invite&utm_medium=referral&utm_campaign=invite`);
 });
 
 it("preserves host deletion and member leave permissions", async () => {
@@ -169,7 +173,7 @@ it("lets a member copy and share the existing link without issuing or regenerati
   await render("MEMBER");
   await click("제주 여행 더보기"); await click("초대하기");
   await click("복사");
-  expect(state.copy).toHaveBeenLastCalledWith(`${window.location.origin}/join/existing-code`);
+  expect(state.copy).toHaveBeenLastCalledWith(`${window.location.origin}/join/existing-code?utm_source=member_invite&utm_medium=referral&utm_campaign=invite`);
   await click("공유");
   expect(state.copy).toHaveBeenCalledTimes(2);
   expect(button("초대 링크 재발급")).toBeDefined();
diff --git a/src/app/home/_components/RoomCardMenu.tsx b/src/app/home/_components/RoomCardMenu.tsx
index 0351eaef..d52f7dbe 100644
--- a/src/app/home/_components/RoomCardMenu.tsx
+++ b/src/app/home/_components/RoomCardMenu.tsx
@@ -1,14 +1,20 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import Image from "next/image";
-import { LogOut } from "lucide-react";
-import { InviteRoomModal } from "./InviteRoomModal";
 
-import { useOnClickOutside } from "@/hooks/useOnClickOutside";
+import { MenuDotVerticalIcon, SignLogoutIcon, TrashIcon } from "@/assets/icons";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { RoomListItem } from "@/lib/api/rooms";
 import { isHostRole, isRoomMemberRole } from "@/lib/rooms";
 
+import { InviteRoomModal } from "./InviteRoomModal";
+
 type Props = {
   room: RoomListItem;
   onDelete: (room: RoomListItem) => void;
@@ -16,90 +22,45 @@ type Props = {
 };
 
 export function RoomCardMenu({ room, onDelete, onLeave }: Props) {
-  const [open, setOpen] = useState(false);
   const [inviteOpen, setInviteOpen] = useState(false);
-  const closeInvite = useCallback(() => setInviteOpen(false), []);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  useOnClickOutside(menuRef, () => setOpen(false));
-
-  useEffect(() => {
-    if (!open) return;
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        setOpen(false);
-        buttonRef.current?.focus();
-      }
-    };
-    document.addEventListener("keydown", closeOnEscape);
-    return () => document.removeEventListener("keydown", closeOnEscape);
-  }, [open]);
-
-  const isHost = isHostRole(room.role);
+  // 초대하기 항목은 메뉴와 함께 사라져서, 초대 모달을 닫으면 더보기 버튼으로 포커스를 돌린다
+  const triggerRef = useRef<HTMLButtonElement>(null);
 
   return (
-    <div ref={menuRef} className="relative">
-      <button
-        ref={buttonRef}
-        type="button"
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setOpen((v) => !v);
-        }}
-        className="flex size-11 cursor-pointer items-center justify-center rounded-[8px] transition-colors hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary"
-        aria-label={`${room.title} 더보기`}
-        aria-expanded={open}
-      >
-        <Image src="/rooms/figma/menu.svg" alt="" width={24} height={24} className="size-6" />
-      </button>
-
-      {open && (
-        <div className="absolute right-[10px] top-[42px] z-30 w-40 overflow-hidden rounded-[12px] bg-white shadow-[0_2px_10px_rgba(0,0,0,0.1)]">
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          ref={triggerRef}
+          aria-label={`${room.title} 더보기`}
+          className="flex size-11 cursor-pointer items-center justify-center rounded-[8px] text-icon-subtle transition-colors hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary"
+        >
+          <MenuDotVerticalIcon size={24} />
+        </DropdownMenuTrigger>
+        {/* Figma 오버레이 S 위치(3562:2283): 44px 메뉴 영역 기준 right 10px, top 42px — 지금 자리 그대로 */}
+        <DropdownMenuContent align="end" alignOffset={10} sideOffset={-2}>
           {isRoomMemberRole(room.role) ? (
-            <button
-              type="button"
-              onClick={() => {
-                buttonRef.current?.focus();
-                setOpen(false);
-                setInviteOpen(true);
-              }}
-              className="flex h-12 w-full cursor-pointer items-start gap-2 px-4 py-3.5 text-left text-label-m-regular text-text shadow-[inset_0_-0.5px_0_var(--color-border-subtle)] hover:bg-fill focus-visible:bg-fill"
-            >
+            <DropdownMenuItem onClick={() => setInviteOpen(true)}>
+              {/* @/assets/icons에 사람 추가 아이콘이 없어 Figma에서 받은 원본을 그대로 쓴다 */}
               <Image src="/rooms/figma/invite.svg" alt="" width={20} height={20} className="size-5 shrink-0" />
               초대하기
-            </button>
+            </DropdownMenuItem>
           ) : null}
-          {isHost ? (
-            <button
-              type="button"
-              onClick={(e) => {
-                e.preventDefault();
-                setOpen(false);
-                onDelete(room);
-              }}
-              className="flex h-12 w-full cursor-pointer items-start gap-2 px-4 py-3.5 text-left text-label-m-regular text-status-negative shadow-[inset_0_-0.5px_0_var(--color-border-subtle)] hover:bg-fill focus-visible:bg-fill"
-            >
-              <Image src="/rooms/figma/trash.svg" alt="" width={20} height={20} className="size-5 shrink-0" />
+          {isHostRole(room.role) ? (
+            <DropdownMenuItem variant="destructive" onClick={() => onDelete(room)}>
+              <TrashIcon />
               방 삭제하기
-            </button>
+            </DropdownMenuItem>
           ) : (
-            <button
-              type="button"
-              onClick={(e) => {
-                e.preventDefault();
-                setOpen(false);
-                onLeave(room);
-              }}
-              className="flex h-12 w-full cursor-pointer items-start gap-2 px-4 py-3.5 text-left text-label-m-regular text-text shadow-[inset_0_-0.5px_0_var(--color-border-subtle)] hover:bg-fill focus-visible:bg-fill"
-            >
-              <LogOut size={20} aria-hidden />
+            <DropdownMenuItem onClick={() => onLeave(room)}>
+              <SignLogoutIcon />
               방 나가기
-            </button>
+            </DropdownMenuItem>
           )}
-        </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {inviteOpen && (
+        <InviteRoomModal room={room} finalFocus={triggerRef} onClose={() => setInviteOpen(false)} />
       )}
-      {inviteOpen && <InviteRoomModal room={room} onClose={closeInvite} />}
-    </div>
+    </>
   );
 }
diff --git a/src/app/home/_components/RoomGrid.tsx b/src/app/home/_components/RoomGrid.tsx
index b6a65de2..f6019143 100644
--- a/src/app/home/_components/RoomGrid.tsx
+++ b/src/app/home/_components/RoomGrid.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { Spinner } from "@/components/ui/spinner";
 import { RoomListItem } from "@/lib/api/rooms";
 import { RoomCard } from "./RoomCard";
 import { NewTripLink } from "./NewTripLink";
@@ -24,8 +25,8 @@ export function RoomGrid({
 }: Props) {
   if (isLoading) {
     return (
-      <div role="status" aria-label="여행 목록 불러오는 중" className="flex items-center justify-center py-20">
-        <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-border border-t-primary" />
+      <div className="flex items-center justify-center py-20">
+        <Spinner aria-label="여행 목록 불러오는 중" size={32} />
       </div>
     );
   }
diff --git a/src/app/invite-auth-flow.test.tsx b/src/app/invite-auth-flow.test.tsx
new file mode 100644
index 00000000..f0eeec5f
--- /dev/null
+++ b/src/app/invite-auth-flow.test.tsx
@@ -0,0 +1,112 @@
+// @vitest-environment jsdom
+import { useEffect, type ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, create, type ReactTestRenderer } from "react-test-renderer";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import JoinPage from "./join/[inviteCode]/page";
+import AuthCallbackPage from "./auth/callback/page";
+import LoginAgreementsPage from "./login/agreements/page";
+import { saveOAuthPendingSession, readGoogleAgreementFlowSession, buildGoogleAuthorizationUrl } from "@/lib/google-oauth";
+import { pendingInviteAuthPath, setPendingInviteCode, consumePendingInviteCode } from "@/lib/session-user-flow";
+
+const ports = vi.hoisted(() => ({
+  router: { replace: vi.fn() },
+  code: "test-invite",
+  exchange: vi.fn(), signup: vi.fn(), reaccept: vi.fn(), join: vi.fn(),
+  readUser: vi.fn(),
+}));
+vi.mock("next/navigation", () => ({
+  useRouter: () => ports.router,
+  useSearchParams: () => new URLSearchParams(window.location.search),
+  useParams: () => ({ inviteCode: ports.code }),
+}));
+vi.mock("@/lib/api/auth", () => ({
+  exchangeGoogleCode: ports.exchange,
+  completeGoogleSignup: ports.signup,
+  completeGoogleReaccept: ports.reaccept,
+}));
+vi.mock("@/lib/session-user", () => ({ fetchSessionUserWithRetry: ports.readUser }));
+vi.mock("@/hooks/useRooms", () => ({ useJoinRoom: () => ({ mutate: ports.join }) }));
+vi.mock("@/components/BrandLogo", () => ({ BrandLogo: () => null }));
+vi.mock("@/components/agreements/AgreementConsentSection", () => ({
+  AgreementConsentSection: ({ onStateChange }: { onStateChange: (state: { isLoading: boolean; isError: boolean; canProceed: boolean }) => void }) => {
+    useEffect(() => onStateChange({ isLoading: false, isError: false, canProceed: true }), [onStateChange]);
+    return null;
+  },
+}));
+let client: QueryClient;
+let renderer: ReactTestRenderer | undefined;
+async function mount(node: ReactNode, path: string) {
+  if (renderer) await act(async () => renderer?.unmount());
+  window.history.replaceState(null, "", path);
+  await act(async () => { renderer = create(<QueryClientProvider client={client}>{node}</QueryClientProvider>); });
+}
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  vi.stubGlobal("fetch", vi.fn().mockResolvedValue(new Response(null, { status: 401 })));
+  client = new QueryClient();
+  sessionStorage.clear();
+  ports.code = "test-invite";
+  ports.readUser.mockResolvedValue({ id: 42, email: "fixture@example.test", nickname: "fixture", profileImageUrl: null, provider: "GOOGLE", tutorialCompleted: false });
+  ports.signup.mockResolvedValue({ ok: true });
+  ports.reaccept.mockResolvedValue({ ok: true });
+});
+afterEach(async () => {
+  await act(async () => renderer?.unmount());
+  renderer = undefined;
+  client.clear();
+  vi.unstubAllGlobals(); vi.clearAllMocks();
+});
+const campaign = "utm_source=member_invite&utm_medium=referral&utm_campaign=invite";
+it("carries only incoming campaign parameters from the invite page to login", async () => {
+  await mount(<JoinPage />, `/join/test-invite?${campaign}&code=secret&state=secret`);
+  expect(ports.router.replace).toHaveBeenCalledWith(`/login?${campaign}`);
+  expect(pendingInviteAuthPath("/login/agreements")).toBe(`/login/agreements?${campaign}`);
+});
+it.each(["signup", "reaccept"] as const)("carries the original partial campaign through callback, %s and invite return", async kind => {
+  setPendingInviteCode("test-invite", "?utm_campaign=existing");
+  saveOAuthPendingSession({ state: "expected-state" });
+  ports.exchange.mockResolvedValue(kind === "signup"
+    ? { ok: true, status: "SIGNUP_REQUIRED", signupToken: "test-signup", expiresInSeconds: 600 }
+    : { ok: true, status: "REACCEPTANCE_REQUIRED", reacceptanceToken: "test-reaccept", expiresInSeconds: 600 });
+  await mount(<AuthCallbackPage />, "/auth/callback?code=test-code&state=expected-state");
+  expect(ports.exchange).toHaveBeenCalledExactlyOnceWith("test-code", undefined);
+  expect(ports.router.replace).toHaveBeenLastCalledWith("/login/agreements?utm_campaign=existing");
+  expect(readGoogleAgreementFlowSession()?.kind).toBe(kind);
+  await mount(<LoginAgreementsPage />, "/login/agreements?utm_campaign=existing");
+  const button = renderer!.root.findAllByType("button").find(b => b.children.includes(kind === "signup" ? "동의하고 가입하기" : "동의하고 계속하기"))!;
+  expect(button.props.disabled).toBe(false);
+  await act(async () => { button.props.onClick(); });
+  expect(ports.router.replace).toHaveBeenLastCalledWith("/join/test-invite?utm_campaign=existing");
+  expect(kind === "signup" ? ports.signup : ports.reaccept).toHaveBeenCalledExactlyOnceWith(kind === "signup" ? "test-signup" : "test-reaccept");
+  expect(consumePendingInviteCode()).toBeNull();
+  expect(pendingInviteAuthPath("/login")).toBe("/login");
+});
+it("keeps state validation before any code exchange and preserves retry context", async () => {
+  setPendingInviteCode("test-invite", `?${campaign}`);
+  saveOAuthPendingSession({ state: "expected-state" });
+  await mount(<AuthCallbackPage />, "/auth/callback?code=test-code&state=wrong-state");
+  expect(ports.exchange).not.toHaveBeenCalled();
+  expect(ports.router.replace).toHaveBeenCalledWith(`/login?error=OAuthCallback&${campaign}`);
+  expect(sessionStorage.getItem("oauth_pending")).toBeNull();
+  expect(buildGoogleAuthorizationUrl()).not.toContain("utm_");
+});
+it("preserves retry context after exchange rejection", async () => {
+  setPendingInviteCode("test-invite", "?utm_source=partner");
+  saveOAuthPendingSession({ state: "expected-state" });
+  ports.exchange.mockRejectedValue(new Error("test network failure"));
+  await mount(<AuthCallbackPage />, "/auth/callback?code=test-code&state=expected-state");
+  expect(ports.router.replace).toHaveBeenLastCalledWith("/login?error=OAuthCallback&utm_source=partner");
+});
+it("removes stale pending context when an authenticated user opens another invitation", async () => {
+  setPendingInviteCode("previous-invite", `?${campaign}`);
+  vi.mocked(fetch).mockResolvedValue(new Response(null, { status: 200 }));
+  await mount(<JoinPage />, "/join/test-invite");
+  expect(ports.join).toHaveBeenCalledWith("test-invite", expect.any(Object));
+  expect(consumePendingInviteCode()).toBeNull();
+  expect(pendingInviteAuthPath("/login")).toBe("/login");
+});
+it("keeps ordinary unauthenticated invitation navigation untagged", async () => {
+  await mount(<JoinPage />, "/join/test-invite");
+  expect(ports.router.replace).toHaveBeenCalledWith("/login");
+});
diff --git a/src/app/join/[inviteCode]/page.tsx b/src/app/join/[inviteCode]/page.tsx
index b9b4a21c..02c88ee3 100644
--- a/src/app/join/[inviteCode]/page.tsx
+++ b/src/app/join/[inviteCode]/page.tsx
@@ -4,10 +4,11 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { BrandLogo } from "@/components/BrandLogo";
 
 import { checkClientAuthenticated, setPendingInviteCode } from "@/lib/auth";
+import { consumePendingInviteCode, pendingInviteAuthPath } from "@/lib/session-user-flow";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
 import { useJoinRoom } from "@/hooks/useRooms";
 import { getRoomDetail } from "@/lib/api/rooms";
@@ -36,6 +37,7 @@ export default function JoinPage() {
       });
     }
 
+    const entrySearch = window.location.search;
     let cancelled = false;
 
     void (async () => {
@@ -43,11 +45,13 @@ export default function JoinPage() {
       if (cancelled) return;
 
       if (!authenticated) {
-        setPendingInviteCode(inviteCode);
-        router.replace("/login");
+        setPendingInviteCode(inviteCode, entrySearch);
+        router.replace(pendingInviteAuthPath("/login"));
         return;
       }
 
+      // An authenticated re-entry completes the detour (or replaces an older invite).
+      consumePendingInviteCode();
       join(inviteCode, {
         onSuccess: async (data) => {
           if (data.httpStatus === 200) {
@@ -103,7 +107,7 @@ export default function JoinPage() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center gap-6 bg-gradient-to-b from-bubble-gray/80 via-white to-white px-4">
       <BrandLogo variant="combination" size="M" alt="우때 로고" />
-      <LoadingIndicator label="입장 요청 중" size={40} />
+      <Spinner aria-label="입장 요청 중" size={32} />
     </div>
   );
 }
diff --git a/src/app/login/agreements/page.tsx b/src/app/login/agreements/page.tsx
index 4cfeb615..8aa44c87 100644
--- a/src/app/login/agreements/page.tsx
+++ b/src/app/login/agreements/page.tsx
@@ -10,6 +10,7 @@ import {
   GOOGLE_REACCEPTANCE_TOKEN_NOT_FOUND_ERROR_CODE,
   GOOGLE_SIGNUP_TOKEN_NOT_FOUND_ERROR_CODE,
 } from "@/lib/api/errors";
+import { pendingInviteAuthPath } from "@/lib/session-user-flow";
 import { finishGoogleLogin } from "@/lib/google-login-client";
 import {
   clearGoogleAgreementFlowSession,
@@ -20,6 +21,7 @@ import { AgreementConsentSection } from "@/components/agreements/AgreementConsen
 import type { AgreementConsentState } from "@/components/agreements/AgreementConsentSection";
 import { AuthFlowSpinner } from "@/components/auth/AuthFlowSpinner";
 import { BrandLogo } from "@/components/BrandLogo";
+import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
 
 const SIGNUP_EXPIRED_MESSAGE =
   "가입 요청이 만료되었거나 다른 로그인 시도로 무효화되었습니다. 다시 로그인해 주세요.";
@@ -49,7 +51,7 @@ export default function LoginAgreementsPage() {
   useEffect(() => {
     const storedFlow = readGoogleAgreementFlowSession();
     if (!storedFlow) {
-      router.replace("/login");
+      router.replace(pendingInviteAuthPath("/login"));
       return;
     }
 
@@ -68,7 +70,7 @@ export default function LoginAgreementsPage() {
 
   const returnToLogin = () => {
     clearGoogleAgreementFlowSession();
-    router.replace("/login");
+    router.replace(pendingInviteAuthPath("/login"));
   };
 
   const handleSubmit = async () => {
@@ -117,7 +119,7 @@ export default function LoginAgreementsPage() {
       }
 
       const destination = await finishGoogleLogin(queryClient);
-      router.replace(destination ?? "/login?error=OAuthCallback");
+      router.replace(destination ?? pendingInviteAuthPath("/login?error=OAuthCallback"));
     } catch {
       setErrorMessage(
         flow.kind === "reaccept"
@@ -172,23 +174,20 @@ export default function LoginAgreementsPage() {
           </div>
 
           {errorMessage && (
-            <div
-              role="alert"
-              className="w-full rounded-xl border border-primary/35 bg-primary/[0.06] px-4 py-3 text-left"
-            >
-              <p className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-primary">
-                {errorMessage}
-              </p>
+            <Alert tone="brand" size="lg" className="self-stretch">
+              <AlertTitle>{errorMessage}</AlertTitle>
               {isExpired && (
-                <button
-                  type="button"
-                  onClick={returnToLogin}
-                  className="mt-3 text-label-l-emphasis mobile:text-label-m-emphasis font-semibold text-primary underline-offset-2 hover:underline"
-                >
-                  Google 로그인 다시 시작하기
-                </button>
+                <AlertAction>
+                  <button
+                    type="button"
+                    onClick={returnToLogin}
+                    className="text-label-l-emphasis mobile:text-label-m-emphasis text-primary underline-offset-2 hover:underline"
+                  >
+                    Google 로그인 다시 시작하기
+                  </button>
+                </AlertAction>
               )}
-            </div>
+            </Alert>
           )}
 
           <AgreementConsentSection onStateChange={setConsentState} />
diff --git a/src/app/login/login-error-alert.tsx b/src/app/login/login-error-alert.tsx
deleted file mode 100644
index ea2f0165..00000000
--- a/src/app/login/login-error-alert.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-type LoginErrorAlertProps = {
-  message: string;
-  onDismiss?: () => void;
-};
-
-export function LoginErrorAlert({ message, onDismiss }: LoginErrorAlertProps) {
-  return (
-    <div
-      role="alert"
-      className="flex w-full gap-3 rounded-xl border border-primary/35 bg-primary/[0.06] px-3.5 py-3 text-left"
-    >
-      <span
-        className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/15 text-body-s-emphasis mobile:text-body-xs-emphasis font-bold text-primary"
-        aria-hidden
-      >
-        !
-      </span>
-      <div className="min-w-0 flex-1">
-        <p className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-primary">로그인에 실패했습니다</p>
-        <p className="mt-1 text-body-m-regular mobile:text-body-s-regular leading-relaxed text-muted-brown">{message}</p>
-        {onDismiss && (
-          <button
-            type="button"
-            onClick={onDismiss}
-            className="mt-2 text-label-m-regular mobile:text-label-s-regular font-medium text-primary underline-offset-2 hover:underline"
-          >
-            닫기
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index b165cc8d..796deda9 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -5,8 +5,8 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { Suspense, type ReactNode, useState } from "react";
 
-import { LoginErrorAlert } from "@/app/login/login-error-alert";
 import { BrandLogo } from "@/components/BrandLogo";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   buildGoogleAuthorizationUrl,
   clearGoogleAgreementFlowSession,
@@ -94,7 +94,28 @@ function LoginPageContent() {
   return (
     <LoginShell>
       {errorMessage && (
-        <LoginErrorAlert message={errorMessage} onDismiss={clearError} />
+        <Alert tone="brand" size="lg" className="self-stretch">
+          {/* Alert에 아이콘 칸이 없어 '!' 원을 grid로 제목 줄 가운데에 맞춘다 */}
+          <div className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3 gap-y-1">
+            <span
+              className="inline-flex size-5 items-center justify-center rounded-full bg-primary-subtle text-label-m-emphasis mobile:text-label-xs-emphasis text-primary"
+              aria-hidden
+            >
+              !
+            </span>
+            <AlertTitle>로그인에 실패했습니다</AlertTitle>
+            <AlertDescription className="col-start-2">{errorMessage}</AlertDescription>
+            <AlertAction className="col-start-2">
+              <button
+                type="button"
+                onClick={clearError}
+                className="text-label-m-regular mobile:text-label-s-regular text-primary underline-offset-2 hover:underline"
+              >
+                닫기
+              </button>
+            </AlertAction>
+          </div>
+        </Alert>
       )}
       <button
         type="button"
diff --git a/src/app/waiting/page.tsx b/src/app/waiting/page.tsx
index 46d16bf1..51596b94 100644
--- a/src/app/waiting/page.tsx
+++ b/src/app/waiting/page.tsx
@@ -5,7 +5,8 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useState } from "react";
 
 import { BrandLogo } from "@/components/BrandLogo";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
 
 import { useCheckJoinStatus } from "@/hooks/useRooms";
 import { getRoomDetail, HttpError } from "@/lib/api/rooms";
@@ -69,16 +70,12 @@ function WaitingContent() {
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center gap-6 bg-fill-elevate px-4 py-12">
-      <BrandLogo variant="symbol" size="S" alt="우때 로고" />
+      <BrandLogo variant="combination" size="M" alt="우때 로고" />
 
       <div className="flex w-full max-w-[480px] flex-col gap-6 rounded-xl bg-fill-elevate p-6 shadow-[0_2px_10px_rgba(0,0,0,0.1)]">
-        <span
-          className={`self-start rounded p-1 text-label-xs-regular ${
-            isRejected ? "bg-fill text-text-subtle" : "bg-primary-subtle text-primary"
-          }`}
-        >
+        <Badge tone={isRejected ? "critical" : "brand"} size="md">
           {isRejected ? "참여 거절" : "승인 대기"}
-        </span>
+        </Badge>
 
         <h1 className="text-title-l text-text">
           {isRejected ? "참여 요청이 거절됐어요" : "참여 요청을 보냈어요"}
@@ -114,7 +111,7 @@ function WaitingContent() {
             aria-busy={isChecking}
             className="flex h-12 w-full cursor-pointer items-center justify-center rounded-lg bg-primary text-label-l-emphasis text-text-inverse transition-colors enabled:hover:bg-primary-strong disabled:cursor-not-allowed"
           >
-            {isChecking ? <LoadingIndicator label="승인 상태 확인 중" className="text-text-inverse" /> : "승인 상태 확인"}
+            {isChecking ? <Spinner aria-label="승인 상태 확인 중" variant="inverse" /> : "승인 상태 확인"}
           </button>
         )}
       </div>
@@ -133,7 +130,7 @@ export default function WaitingPage() {
     <Suspense
       fallback={
         <div className="flex min-h-screen items-center justify-center bg-fill-elevate">
-          <LoadingIndicator label="승인 대기 화면 준비 중" size={32} />
+          <Spinner aria-label="승인 대기 화면 준비 중" size={32} />
         </div>
       }
     >
diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg
new file mode 100644
index 00000000..0a1b50ec
--- /dev/null
+++ b/src/assets/icons/check.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+<path d="M5 12L10 17L20 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/checkbox-activated.svg b/src/assets/icons/checkbox-activated.svg
new file mode 100644
index 00000000..b25d08a3
--- /dev/null
+++ b/src/assets/icons/checkbox-activated.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/checkbox.svg b/src/assets/icons/checkbox.svg
new file mode 100644
index 00000000..8ba21e2c
--- /dev/null
+++ b/src/assets/icons/checkbox.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/circle-ban.svg b/src/assets/icons/circle-ban.svg
new file mode 100644
index 00000000..c7f063da
--- /dev/null
+++ b/src/assets/icons/circle-ban.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 10.8181 3.23279 9.64778 3.68508 8.55585C4.13738 7.46392 4.80031 6.47177 5.63604 5.63604C6.47177 4.80031 7.46392 4.13738 8.55585 3.68508C9.64778 3.23279 10.8181 3 12 3C13.1819 3 14.3522 3.23279 15.4442 3.68508C16.5361 4.13738 17.5282 4.80031 18.364 5.63604C19.1997 6.47177 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5.69995 5.70001L18.3 18.3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/circle-check.svg b/src/assets/icons/circle-check.svg
new file mode 100644
index 00000000..be0dffff
--- /dev/null
+++ b/src/assets/icons/circle-check.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 10.8181 3.23279 9.64778 3.68508 8.55585C4.13738 7.46392 4.80031 6.47177 5.63604 5.63604C6.47177 4.80031 7.46392 4.13738 8.55585 3.68508C9.64778 3.23279 10.8181 3 12 3C13.1819 3 14.3522 3.23279 15.4442 3.68508C16.5361 4.13738 17.5282 4.80031 18.364 5.63604C19.1997 6.47177 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/index.tsx b/src/assets/icons/index.tsx
index c46c9cab..e31c896c 100644
--- a/src/assets/icons/index.tsx
+++ b/src/assets/icons/index.tsx
@@ -2,10 +2,15 @@ import ArrowSortSvg from "@/assets/icons/arrow-sort.svg";
 import CalendarAddSvg from "@/assets/icons/calendar-add.svg";
 import CalendarSvg from "@/assets/icons/calendar.svg";
 import ChatSvg from "@/assets/icons/chat.svg";
+import CheckSvg from "@/assets/icons/check.svg";
+import CheckboxActivatedSvg from "@/assets/icons/checkbox-activated.svg";
+import CheckboxSvg from "@/assets/icons/checkbox.svg";
 import ChevronDownSvg from "@/assets/icons/chevron-down.svg";
 import ChevronLeftSvg from "@/assets/icons/chevron-left.svg";
 import ChevronRightSvg from "@/assets/icons/chevron-right.svg";
+import CircleBanSvg from "@/assets/icons/circle-ban.svg";
 import CircleCancelSvg from "@/assets/icons/circle-cancel.svg";
+import CircleCheckSvg from "@/assets/icons/circle-check.svg";
 import CloseSvg from "@/assets/icons/close.svg";
 import CoinSvg from "@/assets/icons/coin.svg";
 import CopySvg from "@/assets/icons/copy.svg";
@@ -19,6 +24,8 @@ import MenuDotHorizontalSvg from "@/assets/icons/menu-dot-horizontal.svg";
 import MenuDotVerticalSvg from "@/assets/icons/menu-dot-vertical.svg";
 import MenuHamburgerSvg from "@/assets/icons/menu-hamburger.svg";
 import PlusSvg from "@/assets/icons/plus.svg";
+import ProgressSvg from "@/assets/icons/progress.svg";
+import RadioButtonSvg from "@/assets/icons/radio-button.svg";
 import ReactionStarSvg from "@/assets/icons/reaction-star.svg";
 import RefreshSvg from "@/assets/icons/refresh.svg";
 import RouteSvg from "@/assets/icons/route.svg";
@@ -28,9 +35,16 @@ import SearchSvg from "@/assets/icons/search.svg";
 import SettingsSvg from "@/assets/icons/settings.svg";
 import SendSvg from "@/assets/icons/send.svg";
 import ShareSvg from "@/assets/icons/share.svg";
+import SignLogoutSvg from "@/assets/icons/sign-logout.svg";
 import TimeClockSvg from "@/assets/icons/time-clock.svg";
 import TrashSvg from "@/assets/icons/trash.svg";
+import TravelHotelSvg from "@/assets/icons/travel-hotel.svg";
+import TravelMuseumSvg from "@/assets/icons/travel-museum.svg";
+import TravelRestaurantSvg from "@/assets/icons/travel-restaurant.svg";
+import TravelThemeparkSvg from "@/assets/icons/travel-themepark.svg";
+import TravelTrainSvg from "@/assets/icons/travel-train.svg";
 import UserEditSvg from "@/assets/icons/user-edit.svg";
+import UserSvg from "@/assets/icons/user.svg";
 import UserXSvg from "@/assets/icons/user-x.svg";
 import WriteAddSvg from "@/assets/icons/write-add.svg";
 import WriteSvg from "@/assets/icons/write.svg";
@@ -43,10 +57,15 @@ export const ArrowSortIcon = createIcon(ArrowSortSvg, "ArrowSortIcon");
 export const CalendarAddIcon = createIcon(CalendarAddSvg, "CalendarAddIcon");
 export const CalendarIcon = createIcon(CalendarSvg, "CalendarIcon");
 export const ChatIcon = createIcon(ChatSvg, "ChatIcon");
+export const CheckIcon = createIcon(CheckSvg, "CheckIcon");
+export const CheckboxActivatedIcon = createIcon(CheckboxActivatedSvg, "CheckboxActivatedIcon");
+export const CheckboxIcon = createIcon(CheckboxSvg, "CheckboxIcon");
 export const ChevronDownIcon = createIcon(ChevronDownSvg, "ChevronDownIcon");
 export const ChevronLeftIcon = createIcon(ChevronLeftSvg, "ChevronLeftIcon");
 export const ChevronRightIcon = createIcon(ChevronRightSvg, "ChevronRightIcon");
+export const CircleBanIcon = createIcon(CircleBanSvg, "CircleBanIcon");
 export const CircleCancelIcon = createIcon(CircleCancelSvg, "CircleCancelIcon");
+export const CircleCheckIcon = createIcon(CircleCheckSvg, "CircleCheckIcon");
 export const CloseIcon = createIcon(CloseSvg, "CloseIcon");
 export const CoinIcon = createIcon(CoinSvg, "CoinIcon");
 export const CopyCheckIcon = createIcon(CopyCheckSvg, "CopyCheckIcon");
@@ -60,6 +79,8 @@ export const MenuDotHorizontalIcon = createIcon(MenuDotHorizontalSvg, "MenuDotHo
 export const MenuDotVerticalIcon = createIcon(MenuDotVerticalSvg, "MenuDotVerticalIcon");
 export const MenuHamburgerIcon = createIcon(MenuHamburgerSvg, "MenuHamburgerIcon");
 export const PlusIcon = createIcon(PlusSvg, "PlusIcon");
+export const ProgressIcon = createIcon(ProgressSvg, "ProgressIcon");
+export const RadioButtonIcon = createIcon(RadioButtonSvg, "RadioButtonIcon");
 export const ReactionStarIcon = createIcon(ReactionStarSvg, "ReactionStarIcon");
 export const RefreshIcon = createIcon(RefreshSvg, "RefreshIcon");
 // Figma DS에 없어 Tabler `route`(outline)를 받아 씀 — Design.md "Figma에 추가 요청할 아이콘" 참고
@@ -70,9 +91,16 @@ export const SearchIcon = createIcon(SearchSvg, "SearchIcon");
 export const SettingsIcon = createIcon(SettingsSvg, "SettingsIcon");
 export const SendIcon = createIcon(SendSvg, "SendIcon");
 export const ShareIcon = createIcon(ShareSvg, "ShareIcon");
+export const SignLogoutIcon = createIcon(SignLogoutSvg, "SignLogoutIcon");
 export const TimeClockIcon = createIcon(TimeClockSvg, "TimeClockIcon");
 export const TrashIcon = createIcon(TrashSvg, "TrashIcon");
+export const TravelHotelIcon = createIcon(TravelHotelSvg, "TravelHotelIcon");
+export const TravelMuseumIcon = createIcon(TravelMuseumSvg, "TravelMuseumIcon");
+export const TravelRestaurantIcon = createIcon(TravelRestaurantSvg, "TravelRestaurantIcon");
+export const TravelThemeparkIcon = createIcon(TravelThemeparkSvg, "TravelThemeparkIcon");
+export const TravelTrainIcon = createIcon(TravelTrainSvg, "TravelTrainIcon");
 export const UserEditIcon = createIcon(UserEditSvg, "UserEditIcon");
+export const UserIcon = createIcon(UserSvg, "UserIcon");
 export const UserXIcon = createIcon(UserXSvg, "UserXIcon");
 export const WriteAddIcon = createIcon(WriteAddSvg, "WriteAddIcon");
 export const WriteIcon = createIcon(WriteSvg, "WriteIcon");
diff --git a/src/assets/icons/progress.svg b/src/assets/icons/progress.svg
new file mode 100644
index 00000000..d0972030
--- /dev/null
+++ b/src/assets/icons/progress.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M10 20.777C9.12963 20.5796 8.2937 20.2529 7.52002 19.808" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14 3.22302C15.9882 3.67709 17.7632 4.79271 19.0347 6.38723C20.3061 7.98174 20.9984 9.96067 20.9984 12C20.9984 14.0394 20.3061 16.0183 19.0347 17.6128C17.7632 19.2073 15.9882 20.323 14 20.777" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.57905 17.093C4.03356 16.3004 3.61925 15.4252 3.35205 14.501" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3.12402 10.5C3.28402 9.55002 3.59202 8.65002 4.02402 7.82502L4.19302 7.52002" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6.90698 4.57902C7.84264 3.93492 8.8923 3.47474 9.99998 3.22302" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/radio-button.svg b/src/assets/icons/radio-button.svg
new file mode 100644
index 00000000..292909f7
--- /dev/null
+++ b/src/assets/icons/radio-button.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 10.8181 3.23279 9.64778 3.68508 8.55585C4.13738 7.46392 4.80031 6.47177 5.63604 5.63604C6.47177 4.80031 7.46392 4.13738 8.55585 3.68508C9.64778 3.23279 10.8181 3 12 3C13.1819 3 14.3522 3.23279 15.4442 3.68508C16.5361 4.13738 17.5282 4.80031 18.364 5.63604C19.1997 6.47177 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/sign-logout.svg b/src/assets/icons/sign-logout.svg
new file mode 100644
index 00000000..0b3ee22b
--- /dev/null
+++ b/src/assets/icons/sign-logout.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+<path d="M8 8V6C8 5.46957 8.21071 4.96086 8.58579 4.58579C8.96086 4.21071 9.46957 4 10 4H17C17.5304 4 18.0391 4.21071 18.4142 4.58579C18.7893 4.96086 19 5.46957 19 6V18C19 18.5304 18.7893 19.0391 18.4142 19.4142C18.0391 19.7893 17.5304 20 17 20H10C9.46957 20 8.96086 19.7893 8.58579 19.4142C8.21071 19.0391 8 18.5304 8 18V16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 12H15L12 9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15L15 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/travel-hotel.svg b/src/assets/icons/travel-hotel.svg
new file mode 100644
index 00000000..1a720751
--- /dev/null
+++ b/src/assets/icons/travel-hotel.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M5.41421 11.5858C5.03914 11.2107 4.53043 11 4 11C3.46957 11 2.96086 11.2107 2.58579 11.5858C2.21071 11.9609 2 12.4696 2 13V18C2 18.2652 2.10536 18.5196 2.29289 18.7071C2.48043 18.8946 2.73478 19 3 19H21C21.2652 19 21.5196 18.8946 21.7071 18.7071C21.8946 18.5196 22 18.2652 22 18V13C22 12.4696 21.7893 11.9609 21.4142 11.5858C21.0391 11.2107 20.5304 11 20 11C19.4696 11 18.9609 11.2107 18.5858 11.5858C18.2107 11.9609 18 12.4696 18 13V14H6V13C6 12.4696 5.78929 11.9609 5.41421 11.5858Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4 11V8C4 7.20435 4.31607 6.44129 4.87868 5.87868C5.44129 5.31607 6.20435 5 7 5H17C17.7956 5 18.5587 5.31607 19.1213 5.87868C19.6839 6.44129 20 7.20435 20 8V11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 5V14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/travel-museum.svg b/src/assets/icons/travel-museum.svg
new file mode 100644
index 00000000..43da85eb
--- /dev/null
+++ b/src/assets/icons/travel-museum.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3 21H21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 10H21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 6L12 3L19 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4 10V21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20 10V21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 14V17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 14V17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16 14V17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/travel-restaurant.svg b/src/assets/icons/travel-restaurant.svg
new file mode 100644
index 00000000..897c0243
--- /dev/null
+++ b/src/assets/icons/travel-restaurant.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M7.25879 3.5V20.5M4.25879 3.5V8.86258C4.25879 9.25654 4.33639 9.64665 4.48715 10.0106C4.63791 10.3746 4.85889 10.7053 5.13747 10.9839C5.41604 11.2625 5.74676 11.4835 6.11074 11.6342C6.47472 11.785 6.86482 11.8626 7.25879 11.8626C7.65275 11.8626 8.04286 11.785 8.40684 11.6342C8.77082 11.4835 9.10153 11.2625 9.38011 10.9839C9.65869 10.7053 9.87966 10.3746 10.0304 10.0106C10.1812 9.64665 10.2588 9.25654 10.2588 8.86258V3.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14.6199 10.3284C14.0573 9.57828 13.7412 8.56087 13.7412 7.5C13.7412 6.43913 14.0573 5.42172 14.6199 4.67157C15.1825 3.92143 15.9456 3.5 16.7412 3.5C17.5369 3.5 18.2999 3.92143 18.8625 4.67157C19.4251 5.42172 19.7412 6.43913 19.7412 7.5C19.7412 8.56087 19.4251 9.57828 18.8625 10.3284C18.2999 11.0786 17.5369 11.5 16.7412 11.5C15.9456 11.5 15.1825 11.0786 14.6199 10.3284Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16.7412 11.5V20.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/travel-themepark.svg b/src/assets/icons/travel-themepark.svg
new file mode 100644
index 00000000..8d9d7f52
--- /dev/null
+++ b/src/assets/icons/travel-themepark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3.5 17.5C9.167 22.167 14.833 22.167 20.5 17.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19 18.5L17 10L18 8L20 9L21.5 7.5L19 3C13.948 3.218 13.01 6.133 12 9H6C5.20435 9 4.44129 9.31607 3.87868 9.87868C3.31607 10.4413 3 11.2044 3 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 18.5L7 9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 20L10 15H14L16 20" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/travel-train.svg b/src/assets/icons/travel-train.svg
new file mode 100644
index 00000000..5941cd20
--- /dev/null
+++ b/src/assets/icons/travel-train.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M21 13C21 9.13 17.63 6 11 6H3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 15H19C19.5304 15 20.0391 14.7893 20.4142 14.4142C20.7893 14.0391 21 13.5304 21 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 6V11H20.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 11V15" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 11V6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M13 11V6.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 19H21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg
new file mode 100644
index 00000000..cc2d2ef9
--- /dev/null
+++ b/src/assets/icons/user.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M9.17157 9.82843C8.42143 9.07828 8 8.06087 8 7C8 5.93913 8.42143 4.92172 9.17157 4.17157C9.92172 3.42143 10.9391 3 12 3C13.0609 3 14.0783 3.42143 14.8284 4.17157C15.5786 4.92172 16 5.93913 16 7C16 8.06087 15.5786 9.07828 14.8284 9.82843C14.0783 10.5786 13.0609 11 12 11C10.9391 11 9.92172 10.5786 9.17157 9.82843Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6 21V19C6 17.9391 6.42143 16.9217 7.17157 16.1716C7.92172 15.4214 8.93913 15 10 15H14C15.0609 15 16.0783 15.4214 16.8284 16.1716C17.5786 16.9217 18 17.9391 18 19V21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/AppToaster.tsx b/src/components/AppToaster.tsx
index c312d363..1e91460b 100644
--- a/src/components/AppToaster.tsx
+++ b/src/components/AppToaster.tsx
@@ -1,14 +1,13 @@
 "use client";
 
-import { Toaster } from "sonner";
-
+import { Toaster } from "@/components/ui/sonner";
 import { readIsMobileDevice } from "@/lib/mobile-view";
 
 /** --toast-bottom-inset은 모바일 하단 탭바가 있을 때만 globals.css에서 정의된다 */
 const MOBILE_BOTTOM_OFFSET = "calc(var(--toast-bottom-inset, 0px) + 16px)";
 export function AppToaster() {
   if (!readIsMobileDevice()) {
-    return <Toaster position="top-right" richColors />;
+    return <Toaster position="top-right" />;
   }
 
   return (
@@ -16,7 +15,6 @@ export function AppToaster() {
       position="bottom-right"
       offset={{ bottom: MOBILE_BOTTOM_OFFSET }}
       mobileOffset={{ bottom: MOBILE_BOTTOM_OFFSET }}
-      richColors
     />
   );
 }
diff --git a/src/components/agreements/AgreementConsentSection.tsx b/src/components/agreements/AgreementConsentSection.tsx
index 93c60f7a..2237c2be 100644
--- a/src/components/agreements/AgreementConsentSection.tsx
+++ b/src/components/agreements/AgreementConsentSection.tsx
@@ -1,6 +1,8 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Spinner } from "@/components/ui/spinner";
 
 import { ChevronRight } from "lucide-react";
 import Link from "next/link";
@@ -55,53 +57,48 @@ export function AgreementConsentSection({ onStateChange }: Props) {
   if (isPending) {
     return (
       <div className="w-full rounded-xl border border-gray-border bg-bubble-gray/40 px-4 py-3 text-left">
-        <LoadingIndicator label="약관 불러오는 중" />
+        <Spinner aria-label="약관 불러오는 중" />
       </div>
     );
   }
 
   if (isError) {
     return (
-      <div className="w-full rounded-xl border border-primary/35 bg-primary/[0.06] px-4 py-3 text-left">
-        <p className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-primary">
-          약관을 불러오지 못했습니다
-        </p>
-        <p className="mt-1 text-body-m-regular mobile:text-body-s-regular text-muted-brown">
+      <Alert tone="brand" size="lg" className="self-stretch">
+        <AlertTitle>약관을 불러오지 못했습니다</AlertTitle>
+        <AlertDescription>
           {error instanceof Error
             ? error.message
             : "잠시 후 다시 시도해 주세요."}
-        </p>
-        <button
-          type="button"
-          onClick={() => void refetch()}
-          className="mt-2 text-label-l-regular mobile:text-label-m-regular font-medium text-primary underline-offset-2 hover:underline"
-        >
-          다시 시도
-        </button>
-      </div>
+        </AlertDescription>
+        <AlertAction>
+          <button
+            type="button"
+            onClick={() => void refetch()}
+            className="text-label-l-regular mobile:text-label-m-regular text-primary underline-offset-2 hover:underline"
+          >
+            다시 시도
+          </button>
+        </AlertAction>
+      </Alert>
     );
   }
 
   if (items.length === 0) {
     return (
-      <div className="w-full rounded-xl border border-gray-border bg-bubble-gray/30 px-4 py-3 text-left">
-        <p className="text-body-m-regular mobile:text-body-s-regular text-dark-gray">
+      <Alert size="lg" role="status" className="self-stretch">
+        <AlertDescription>
           현재 동의할 약관 정보를 불러올 수 없습니다. 잠시 후 다시 시도해
           주세요.
-        </p>
-      </div>
+        </AlertDescription>
+      </Alert>
     );
   }
 
   return (
     <div className="w-full rounded-xl border border-gray-border bg-bubble-gray/25 px-4 py-4 text-left">
-      <label className="flex cursor-pointer items-start gap-3">
-        <input
-          type="checkbox"
-          className="mt-0.5 h-[18px] w-[18px] shrink-0 rounded accent-primary"
-          checked={allAccepted}
-          onChange={(event) => toggleAll(event.target.checked)}
-        />
+      <label className="flex cursor-pointer items-center gap-3">
+        <Checkbox checked={allAccepted} onCheckedChange={toggleAll} />
         <span className="text-body-m-emphasis mobile:text-body-s-emphasis font-semibold leading-snug text-neutral-900">
           필수 약관 전체 동의
         </span>
@@ -116,11 +113,10 @@ export function AgreementConsentSection({ onStateChange }: Props) {
               className="flex items-center gap-2 rounded-lg px-2 py-2 transition-colors hover:bg-white/80"
             >
               <label className="flex min-w-0 flex-1 cursor-pointer items-center gap-2">
-                <input
-                  type="checkbox"
-                  className="h-4 w-4 shrink-0 rounded accent-primary"
+                <Checkbox
+                  size="sm"
                   checked={acceptedIds.has(id)}
-                  onChange={(event) => toggleItem(id, event.target.checked)}
+                  onCheckedChange={(checked) => toggleItem(id, checked)}
                 />
                 <span className="inline-flex h-[18px] shrink-0 items-center rounded px-1 text-body-xs-emphasis font-semibold leading-none text-primary">
                   필수
diff --git a/src/components/agreements/PolicyDocumentView.tsx b/src/components/agreements/PolicyDocumentView.tsx
index ccfdcd47..cb7804ab 100644
--- a/src/components/agreements/PolicyDocumentView.tsx
+++ b/src/components/agreements/PolicyDocumentView.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import { useCurrentAgreements } from "@/hooks/useCurrentAgreements";
 import { findAgreementByType } from "@/lib/agreements/paths";
@@ -21,7 +21,7 @@ export function PolicyDocumentView({ agreementType }: Props) {
     return (
       <div className="mx-auto w-full max-w-3xl rounded-3xl border border-gray-border bg-white/95 px-6 py-10 text-center shadow-[0_24px_80px_-12px_rgba(15,23,42,0.12)] backdrop-blur-sm">
         <PolicyHomeLink />
-        <LoadingIndicator label="문서 불러오는 중" />
+        <Spinner aria-label="문서 불러오는 중" />
       </div>
     );
   }
diff --git a/src/components/analytics/AnalyticsConsentSettings.test.tsx b/src/components/analytics/AnalyticsConsentSettings.test.tsx
index c5cb5a0e..ad875514 100644
--- a/src/components/analytics/AnalyticsConsentSettings.test.tsx
+++ b/src/components/analytics/AnalyticsConsentSettings.test.tsx
@@ -30,6 +30,7 @@ describe("AnalyticsConsentSettingsView", () => {
         consent={consent}
         draft={consent}
         onSave={vi.fn()}
+        onCancel={vi.fn()}
         message=""
         onGrant={vi.fn()}
         onDeny={vi.fn()}
@@ -54,6 +55,7 @@ describe("AnalyticsConsentSettingsView", () => {
         consent="denied"
         draft="denied"
         onSave={vi.fn()}
+        onCancel={vi.fn()}
         message={message}
         onGrant={vi.fn()}
         onDeny={vi.fn()}
@@ -72,6 +74,7 @@ it("preserves the policy destination and all consent notice meanings in a disclo
       draft="pending"
       message=""
       onSave={vi.fn()}
+      onCancel={vi.fn()}
       onGrant={vi.fn()}
       onDeny={vi.fn()}
     />,
diff --git a/src/components/analytics/AnalyticsConsentSettings.tsx b/src/components/analytics/AnalyticsConsentSettings.tsx
index c9115fef..82e8db19 100644
--- a/src/components/analytics/AnalyticsConsentSettings.tsx
+++ b/src/components/analytics/AnalyticsConsentSettings.tsx
@@ -3,7 +3,9 @@
 import Link from "next/link";
 import { useId, useState, useSyncExternalStore } from "react";
 
-import { SettingsActionButton } from "@/components/settings/SettingsActionButton";
+import { Button } from "@/components/ui/button";
+import { DialogFooter } from "@/components/ui/dialog";
+import { Switch } from "@/components/ui/switch";
 import {
   denyAnalyticsConsent,
   grantAnalyticsConsent,
@@ -20,6 +22,7 @@ type AnalyticsConsentSettingsViewProps = {
   message: string;
   draft: AnalyticsConsentState;
   onSave: () => void;
+  onCancel: () => void;
   onDeny: () => void;
   onGrant: () => void;
 };
@@ -43,6 +46,7 @@ export function AnalyticsConsentSettingsView({
   onGrant,
   draft,
   onSave,
+  onCancel,
 }: AnalyticsConsentSettingsViewProps) {
   const categoryId = useId();
   const descriptionId = useId();
@@ -66,26 +70,14 @@ export function AnalyticsConsentSettingsView({
             Google Analytics로 방문과 기능 사용 통계를 분석합니다.
           </p>
         </div>
-        <button
-          type="button"
-          role="switch"
-          aria-checked={allowed}
+        <Switch
+          checked={allowed}
+          onCheckedChange={(checked) => (checked ? onGrant() : onDeny())}
           aria-labelledby={categoryId}
           aria-describedby={
             consent === "pending" ? `${descriptionId} ${hintId}` : descriptionId
           }
-          onClick={allowed ? onDeny : onGrant}
-          className="flex min-h-11 shrink-0 cursor-pointer items-center rounded-lg px-1 py-1 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
-        >
-          <span
-            aria-hidden="true"
-            className={`flex h-7 w-12 items-center rounded-full p-1 transition-colors motion-reduce:transition-none ${allowed ? "bg-primary" : "bg-neutral-400"}`}
-          >
-            <span
-              className={`h-5 w-5 rounded-full bg-white shadow-sm transition-transform motion-reduce:transition-none ${allowed ? "translate-x-5" : "translate-x-0"}`}
-            />
-          </span>
-        </button>
+        />
       </div>
       {consent === "pending" && (
         <p id={hintId} className="mt-3 text-body-xs-regular leading-relaxed text-dark-gray">
@@ -102,22 +94,19 @@ export function AnalyticsConsentSettingsView({
           삭제합니다.
         </p>
       </details>
-      <div className="mt-4 flex items-center justify-between gap-4">
-        <Link
-          href={AGREEMENT_PUBLIC_PATH.PRIVACY_POLICY}
-          className="rounded-sm text-label-m-regular mobile:text-label-s-regular font-medium text-dark-gray underline underline-offset-4 hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-        >
-          개인정보 처리방침
-        </Link>
-        <SettingsActionButton
-          variant="primary"
-          flex={false}
-          className="min-h-11 min-w-24 px-6 text-body-s-regular mobile:text-body-xs-regular focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-          onClick={onSave}
-        >
-          저장
-        </SettingsActionButton>
-      </div>
+      <Link
+        href={AGREEMENT_PUBLIC_PATH.PRIVACY_POLICY}
+        className="mt-4 block w-fit rounded-sm text-label-m-regular mobile:text-label-s-regular font-medium text-dark-gray underline underline-offset-4 hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+      >
+        개인정보 처리방침
+      </Link>
+      {/* 대화상자 Footer(취소 Neutral Weak → 저장 Neutral Solid). 간격 20은 Modal 영역 간격이고, 저장 결과 문장은 버튼 아래에 붙는다 */}
+      <DialogFooter className="mt-5">
+        <Button variant="weak" onClick={onCancel}>
+          취소
+        </Button>
+        <Button onClick={onSave}>저장</Button>
+      </DialogFooter>
       <p
         aria-live="polite"
         className="text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-dark-gray not-empty:mt-3"
@@ -128,7 +117,8 @@ export function AnalyticsConsentSettingsView({
   );
 }
 
-export function AnalyticsConsentSettings() {
+// 취소는 대화상자를 닫는다(저장하지 않은 선택은 다음에 열 때 저장된 값으로 다시 읽음)
+export function AnalyticsConsentSettings({ onCancel }: Readonly<{ onCancel: () => void }>) {
   const consent = useSyncExternalStore(
     analyticsConsentStore.subscribe,
     analyticsConsentStore.getSnapshot,
@@ -155,6 +145,7 @@ export function AnalyticsConsentSettings() {
       onGrant={() => select("granted")}
       onDeny={() => select("denied")}
       onSave={save}
+      onCancel={onCancel}
     />
   );
 }
diff --git a/src/components/analytics/CookieConsentBanner.tsx b/src/components/analytics/CookieConsentBanner.tsx
index 2028da64..eedb8ea9 100644
--- a/src/components/analytics/CookieConsentBanner.tsx
+++ b/src/components/analytics/CookieConsentBanner.tsx
@@ -4,10 +4,7 @@ import Link from "next/link";
 import { CookieSettingsButton } from "./CookieSettingsProvider";
 import { motion, useReducedMotion } from "framer-motion";
 
-import {
-  SettingsActionButton,
-  SettingsActionButtonRow,
-} from "@/components/settings/SettingsActionButton";
+import { Button } from "@/components/ui/button";
 import { AGREEMENT_PUBLIC_PATH } from "@/lib/agreements/paths";
 
 type CookieConsentBannerProps = {
@@ -21,6 +18,7 @@ export function CookieConsentBanner({
 }: CookieConsentBannerProps) {
   const reduceMotion = useReducedMotion();
 
+  // z-40: 앱(isolate 묶음) 위, Base UI 대화상자·시트(z-50 포털) 아래다. 배너의 '쿠키 설정'으로 연 대화상자가 배너를 덮고 딤이 배너를 막는다
   return (
     <motion.div
       role="region"
@@ -28,7 +26,7 @@ export function CookieConsentBanner({
       initial={reduceMotion ? false : { y: "100%", opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={reduceMotion ? { duration: 0 } : { duration: 0.25 }}
-      className="fixed inset-x-0 bottom-0 z-[100] border-t border-gray-border bg-white/95 pb-[env(safe-area-inset-bottom)] shadow-[0_-4px_24px_rgba(0,0,0,0.08)] backdrop-blur-sm"
+      className="fixed inset-x-0 bottom-0 z-40 border-t border-gray-border bg-white/95 pb-[env(safe-area-inset-bottom)] shadow-[0_-4px_24px_rgba(0,0,0,0.08)] backdrop-blur-sm"
     >
       <div className="mx-auto flex max-w-screen-xl flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
         <p className="text-body-m-regular mobile:text-body-s-regular leading-relaxed text-dark-gray">
@@ -45,14 +43,14 @@ export function CookieConsentBanner({
           </CookieSettingsButton>
         </p>
 
-        <SettingsActionButtonRow className="shrink-0 pt-0 sm:min-w-[220px]">
-          <SettingsActionButton variant="secondary" onClick={onReject}>
+        <div className="flex shrink-0 gap-2 sm:min-w-[220px]">
+          <Button variant="outline" className="flex-1" onClick={onReject}>
             거부
-          </SettingsActionButton>
-          <SettingsActionButton variant="primary" onClick={onAccept}>
+          </Button>
+          <Button tone="brand" className="flex-1" onClick={onAccept}>
             허용
-          </SettingsActionButton>
-        </SettingsActionButtonRow>
+          </Button>
+        </div>
       </div>
     </motion.div>
   );
diff --git a/src/components/analytics/CookieSettingsEntrypoints.test.tsx b/src/components/analytics/CookieSettingsEntrypoints.test.tsx
index b67996f3..7f791b8d 100644
--- a/src/components/analytics/CookieSettingsEntrypoints.test.tsx
+++ b/src/components/analytics/CookieSettingsEntrypoints.test.tsx
@@ -19,6 +19,15 @@ import { SiteFooter } from "@/components/layout/SiteFooter";
 import { CookieConsentBanner } from "./CookieConsentBanner";
 import { ConsentGatedAnalytics } from "./ConsentGatedAnalytics";
 
+// 쿠키 설정은 ui Dialog(Base UI)라 document.body로 포털된 role="dialog"다
+const dialogs = () => document.querySelectorAll<HTMLElement>('[role="dialog"]');
+// Base UI는 처음 포커스를 requestAnimationFrame 뒤에 옮긴다
+const settle = () =>
+  act(async () => {
+    await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
 it("opens the same dialog from footer and banner without navigation, even with analytics disabled", async () => {
   Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
   window.history.replaceState({}, "", "/home");
@@ -42,13 +51,17 @@ it("opens the same dialog from footer and banner without navigation, even with a
     expect(triggers).toHaveLength(2);
     for (const trigger of triggers) {
       await act(async () => trigger.click());
-      expect(document.querySelectorAll('dialog[open]')).toHaveLength(1);
+      await settle();
+      expect(dialogs()).toHaveLength(1);
+      expect(dialogs()[0].contains(document.activeElement)).toBe(true);
       expect(window.location.pathname).toBe("/home");
       await act(async () =>
         document
           .querySelector<HTMLButtonElement>('[aria-label="쿠키 설정 닫기"]')!
           .click(),
       );
+      await settle();
+      expect(dialogs()).toHaveLength(0);
       expect(document.activeElement).toBe(trigger);
     }
     expect(accept).not.toHaveBeenCalled();
@@ -112,8 +125,9 @@ it("returns focus to the footer when saving consent removes the original banner
       (node) => node.textContent === "쿠키 설정",
     )!;
     await act(async () => trigger.click());
+    await settle();
     const dialogButtons = () => [
-      ...document.querySelectorAll('dialog[open] button'),
+      ...document.querySelectorAll('[role="dialog"] button'),
     ];
     await act(async () =>
       (
@@ -123,11 +137,14 @@ it("returns focus to the footer when saving consent removes the original banner
       ).click(),
     );
     expect(host.querySelector('[aria-label="쿠키 동의"]')).toBeNull();
+    expect(dialogs()).toHaveLength(1);
     await act(async () =>
       document
         .querySelector<HTMLButtonElement>('[aria-label="쿠키 설정 닫기"]')!
         .click(),
     );
+    await settle();
+    expect(dialogs()).toHaveLength(0);
     expect(document.activeElement).toBe(host.querySelector("footer button"));
   } finally {
     await act(async () => root.unmount());
diff --git a/src/components/analytics/CookieSettingsLandingEntry.test.tsx b/src/components/analytics/CookieSettingsLandingEntry.test.tsx
index bd3e1147..c169f5e5 100644
--- a/src/components/analytics/CookieSettingsLandingEntry.test.tsx
+++ b/src/components/analytics/CookieSettingsLandingEntry.test.tsx
@@ -25,7 +25,14 @@ it("opens from the compatibility query once and preserves unrelated URL state",
         </CookieSettingsProvider>,
       ),
     );
-    expect(document.querySelector('dialog[open]')).not.toBeNull();
+    // 쿠키 설정은 ui Dialog(Base UI)라 document.body로 포털된 role="dialog"다. 처음 포커스는 requestAnimationFrame 뒤에 옮긴다
+    const settle = () =>
+      act(async () => {
+        await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+    await settle();
+    expect(document.querySelectorAll('[role="dialog"]')).toHaveLength(1);
     expect(
       window.location.pathname + window.location.search + window.location.hash,
     ).toBe("/?keep=1#team");
@@ -34,7 +41,8 @@ it("opens from the compatibility query once and preserves unrelated URL state",
         .querySelector<HTMLButtonElement>('[aria-label="쿠키 설정 닫기"]')!
         .click(),
     );
-    expect(document.querySelector('dialog[open]')).toBeNull();
+    await settle();
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
     expect(document.activeElement).toBe(host.querySelector("button"));
   } finally {
     await act(async () => root.unmount());
diff --git a/src/components/analytics/CookieSettingsModal.test.tsx b/src/components/analytics/CookieSettingsModal.test.tsx
index 9c960431..59a64ea0 100644
--- a/src/components/analytics/CookieSettingsModal.test.tsx
+++ b/src/components/analytics/CookieSettingsModal.test.tsx
@@ -26,14 +26,44 @@ function button(label: string) {
   expect(found, label).toBeTruthy();
   return found!;
 }
+// 쿠키 설정은 ui Dialog(Base UI)라 document.body로 포털된 role="dialog"다
+function dialog() {
+  return document.querySelector<HTMLElement>('[role="dialog"]');
+}
 function toggle() {
   return document.querySelector<HTMLButtonElement>('[role="switch"]')!;
 }
+function resultMessage() {
+  return dialog()!.querySelector<HTMLElement>('[aria-live="polite"]')!;
+}
+function isPageScrollLocked() {
+  return [document.documentElement, document.body].some(
+    (element) => element.style.overflowY === "hidden",
+  );
+}
+// Base UI는 처음 포커스를 requestAnimationFrame 뒤에, 스크롤 잠금·해제를 setTimeout 0 뒤에 반영한다
+async function settle() {
+  await act(async () => {
+    await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+// 브라우저의 Tab 이동처럼 문서 순서상 다음(이전) tabbable로 포커스를 옮긴다.
+// 대화상자 앞뒤의 보이지 않는 칸에 닿으면 Base UI가 포커스를 대화상자 안 반대쪽 끝으로 되돌린다
+async function pressTab(shift = false) {
+  const tabbables = [...document.querySelectorAll<HTMLElement>("*")].filter(
+    (node) => node.tabIndex >= 0 && !(node as HTMLButtonElement).disabled,
+  );
+  const index = tabbables.indexOf(document.activeElement as HTMLElement);
+  await act(async () => tabbables[index + (shift ? -1 : 1)].focus());
+  await settle();
+}
 async function toggleDraft() {
   await act(async () => toggle().click());
 }
 async function click(label: string) {
   await act(async () => button(label).click());
+  await settle();
 }
 async function mount() {
   host = document.createElement("div");
@@ -70,73 +100,39 @@ afterEach(async () => {
 });
 
 describe("cookie settings modal", () => {
-  it("reserves matching scrollbar gutters with disclosure closed and expanded", async () => {
-    await click("쿠키 설정");
-    const dialog = document.querySelector<HTMLElement>('dialog[open]')!;
-    const details = dialog.querySelector("details")!;
-    for (const expanded of [false, true]) {
-      if (expanded)
-        await act(async () => details.querySelector("summary")!.click());
-      expect(details.open).toBe(expanded);
-      // jsdom has no layout engine: guard the CSS contract; Hermes measures
-      // actual insets with classic scrollbars, including constrained heights.
-      expect(
-        dialog.classList.contains("[scrollbar-gutter:stable_both-edges]"),
-      ).toBe(true);
-      expect(dialog.classList.contains("overflow-y-auto")).toBe(true);
-      expect(dialog.classList.contains("max-w-[640px]")).toBe(true);
-      expect(dialog.classList.contains("max-h-[calc(100dvh-2rem)]")).toBe(true);
-    }
-  });
-
   it("opens in place, traps keyboard focus and dismisses with Escape without saving", async () => {
     await click("쿠키 설정");
-    const dialog = document.querySelector('dialog[open]')!;
-    expect(dialog).not.toBeNull();
-    expect(dialog.getAttribute("aria-modal")).toBe("true");
+    const opened = dialog()!;
+    expect(opened).not.toBeNull();
+    expect(opened.hasAttribute("data-open")).toBe(true);
     expect(
-      document.getElementById(dialog.getAttribute("aria-labelledby")!)
+      document.getElementById(opened.getAttribute("aria-labelledby")!)
         ?.textContent,
     ).toBe("쿠키 설정");
-    expect(dialog.contains(document.activeElement)).toBe(true);
-    expect(host.hasAttribute("inert")).toBe(true);
+    expect(opened.contains(document.activeElement)).toBe(true);
+    // 모달 바깥(앱)은 보조기기에서 가려진다
+    expect(host.getAttribute("aria-hidden")).toBe("true");
     expect(button("저장").disabled).toBe(false);
     await toggleDraft();
-    expect(dialog.textContent).not.toContain("저장을 누르면");
+    expect(opened.textContent).not.toContain("저장을 누르면");
     expect(toggle().getAttribute("aria-checked")).toBe("true");
     expect(document.cookie).not.toContain("uttae_analytics_consent");
     const first = button("쿠키 설정 닫기");
     const last = button("저장");
     last.focus();
-    await act(async () =>
-      last.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: "Tab",
-          bubbles: true,
-          cancelable: true,
-        }),
-      ),
-    );
+    await pressTab();
     expect(document.activeElement).toBe(first);
-    await act(async () =>
-      first.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: "Tab",
-          shiftKey: true,
-          bubbles: true,
-          cancelable: true,
-        }),
-      ),
-    );
+    await pressTab(true);
     expect(document.activeElement).toBe(last);
     await act(async () =>
       last.dispatchEvent(
         new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
       ),
     );
-    expect(document.querySelector('dialog[open]')).toBeNull();
+    await settle();
+    expect(dialog()).toBeNull();
     expect(document.activeElement).toBe(button("쿠키 설정"));
-    expect(host.hasAttribute("inert")).toBe(false);
+    expect(host.hasAttribute("aria-hidden")).toBe(false);
     expect(
       window.location.pathname + window.location.search + window.location.hash,
     ).toBe("/home?view=all#footer");
@@ -150,17 +146,68 @@ describe("cookie settings modal", () => {
     expect(toggle().getAttribute("aria-checked")).toBe("false");
     await toggleDraft();
     await click("쿠키 설정 닫기");
+    expect(dialog()).toBeNull();
     expect(document.cookie).toContain("v1:denied");
     await click("쿠키 설정");
     expect(toggle().getAttribute("aria-checked")).toBe("false");
     await toggleDraft();
+    // 딤(배경)을 누르면 닫힌다
     await act(async () =>
-      (document.querySelector('[aria-label="쿠키 설정 배경 닫기"]') as HTMLElement).click(),
+      document.querySelector<HTMLElement>('[data-slot="dialog-overlay"]')!.click(),
     );
-    expect(document.querySelector('dialog[open]')).toBeNull();
+    await settle();
+    expect(dialog()).toBeNull();
     expect(document.cookie).toContain("v1:denied");
   });
 
+  it("closes with 취소 and discards the edited choice without saving it", async () => {
+    document.cookie = "uttae_analytics_consent=v1:denied; Path=/";
+    await click("쿠키 설정");
+    await toggleDraft();
+    expect(toggle().getAttribute("aria-checked")).toBe("true");
+    await click("취소");
+    expect(dialog()).toBeNull();
+    expect(document.activeElement).toBe(button("쿠키 설정"));
+    // 저장(grantAnalyticsConsent)이 실행됐다면 쿠키·스토어가 granted로 바뀐다
+    expect(document.cookie).toContain("uttae_analytics_consent=v1:denied");
+    expect(document.cookie).not.toContain("v1:granted");
+    expect(analyticsConsentStore.getSnapshot()).toBe("denied");
+    await click("쿠키 설정");
+    expect(toggle().getAttribute("aria-checked")).toBe("false");
+    expect(resultMessage().textContent).toBe("");
+  });
+
+  it("closes untouched pending with 취소 without recording a denial", async () => {
+    await click("쿠키 설정");
+    await click("취소");
+    expect(dialog()).toBeNull();
+    // 저장(denyAnalyticsConsent)이 실행됐다면 GA 철회가 불리고 denied 쿠키가 남는다
+    expect(revokeGoogleAnalyticsConsent).not.toHaveBeenCalled();
+    expect(document.cookie).not.toContain("uttae_analytics_consent");
+    expect(analyticsConsentStore.getSnapshot()).toBe("pending");
+  });
+
+  it("shows the save result in a live region below the buttons and keeps the dialog open", async () => {
+    await click("쿠키 설정");
+    const live = resultMessage();
+    expect(live.textContent).toBe("");
+    for (const label of ["취소", "저장"]) {
+      expect(
+        button(label).compareDocumentPosition(live) &
+          Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy();
+    }
+    await click("저장");
+    expect(dialog()).not.toBeNull();
+    expect(resultMessage().textContent).toBe("분석 쿠키를 거부했습니다.");
+    // 선택을 바꾸면 지난 결과 문장은 지운다
+    await toggleDraft();
+    expect(resultMessage().textContent).toBe("");
+    await click("저장");
+    expect(dialog()).not.toBeNull();
+    expect(resultMessage().textContent).toBe("분석 쿠키를 허용했습니다.");
+  });
+
   it("persists save through reopen/remount and withdraws via existing consent actions", async () => {
     await click("쿠키 설정");
     await toggleDraft();
@@ -173,9 +220,7 @@ describe("cookie settings modal", () => {
         write: writeAnalyticsConsentCookie,
       }).getSnapshot(),
     ).toBe("granted");
-    expect(document.querySelector('[aria-live="polite"]')?.textContent).toBe(
-      "분석 쿠키를 허용했습니다.",
-    );
+    expect(resultMessage().textContent).toBe("분석 쿠키를 허용했습니다.");
     await click("쿠키 설정 닫기");
     await click("쿠키 설정");
     expect(toggle().getAttribute("aria-checked")).toBe("true");
@@ -198,8 +243,8 @@ it("keeps the dialog open and reports a blocked cookie write accurately", async
   await toggleDraft();
   vi.spyOn(document, "cookie", "set").mockImplementation(() => {});
   await click("저장");
-  expect(document.querySelector('dialog[open]')).not.toBeNull();
-  expect(document.querySelector('[aria-live="polite"]')?.textContent).toContain(
+  expect(dialog()).not.toBeNull();
+  expect(resultMessage().textContent).toContain(
     "브라우저에 저장하지 못했습니다",
   );
   expect(toggle().getAttribute("aria-checked")).toBe("true");
@@ -226,9 +271,7 @@ describe("analytics allow switch", () => {
     expect(
       descriptionIds.map((id) => document.getElementById(id)!.textContent).join(" "),
     ).toContain("Google Analytics");
-    expect(document.querySelector('dialog[open]')!.textContent).not.toContain(
-      "저장을 누르면",
-    );
+    expect(dialog()!.textContent).not.toContain("저장을 누르면");
     expect(analyticsConsentStore.getSnapshot()).toBe("pending");
     await act(async () => toggle!.click());
     expect(toggle!.getAttribute("aria-checked")).toBe("true");
@@ -270,7 +313,8 @@ it("retains the draft through disclosure and keyboard focus, without applying it
       new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
     ),
   );
-  expect(document.querySelector('dialog[open]')).toBeNull();
+  await settle();
+  expect(dialog()).toBeNull();
   expect(document.activeElement).toBe(button("쿠키 설정"));
   expect(analyticsConsentStore.getSnapshot()).toBe("granted");
   await click("쿠키 설정");
@@ -278,13 +322,14 @@ it("retains the draft through disclosure and keyboard focus, without applying it
 });
 
 it("cancels untouched pending with X and restores body scroll", async () => {
-  const overflow = document.body.style.overflow;
+  expect(isPageScrollLocked()).toBe(false);
   await click("쿠키 설정");
-  expect(document.body.style.overflow).toBe("hidden");
+  expect(isPageScrollLocked()).toBe(true);
   await click("쿠키 설정 닫기");
+  expect(dialog()).toBeNull();
   expect(analyticsConsentStore.getSnapshot()).toBe("pending");
   expect(document.cookie).not.toContain("uttae_analytics_consent");
-  expect(document.body.style.overflow).toBe(overflow);
+  expect(isPageScrollLocked()).toBe(false);
   await click("쿠키 설정");
   expect(toggle().getAttribute("aria-checked")).toBe("false");
 });
diff --git a/src/components/analytics/CookieSettingsProvider.tsx b/src/components/analytics/CookieSettingsProvider.tsx
index b7967a56..258d9bde 100644
--- a/src/components/analytics/CookieSettingsProvider.tsx
+++ b/src/components/analytics/CookieSettingsProvider.tsx
@@ -5,28 +5,67 @@ import {
   useEffect,
   useCallback,
   useContext,
+  useRef,
   useState,
   type ComponentProps,
   type ReactNode,
 } from "react";
 import { useSearchParams } from "next/navigation";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { COOKIE_SETTINGS_QUERY_KEY } from "@/lib/analytics/paths";
 import { AnalyticsConsentSettings } from "./AnalyticsConsentSettings";
-import { SettingsDialog } from "@/components/settings/SettingsDialog";
 
 const OpenCookieSettingsContext = createContext<() => void>(() => {});
 
+/**
+ * 닫힐 때 포커스를 돌려줄 곳. 동의를 저장하면 배너(연 트리거)가 사라지므로 Base UI 기본(연 요소)만으로는 포커스가 사라진다.
+ * 연 요소 → 남은 쿠키 설정 트리거(푸터 등) → 앱 main 순서로 고른다(옛 SettingsDialog 규칙).
+ * main은 탭 순서에 없어 Base UI에 넘기면 그 안의 첫 tabbable로 가므로, 잠시 tabindex를 주고 직접 포커스한 뒤 false(Base UI는 옮기지 않음)를 돌려준다
+ */
+function getCookieSettingsReturnFocus(opener: Element | null): HTMLElement | false {
+  if (opener instanceof HTMLElement && opener !== document.body && opener.isConnected) return opener;
+  const fallback = document.querySelector<HTMLElement>("[data-cookie-settings-trigger]");
+  if (fallback) return fallback;
+  const main = document.querySelector<HTMLElement>("main, [role=main]");
+  if (!main) return false;
+  const previousTabIndex = main.getAttribute("tabindex");
+  main.setAttribute("tabindex", "-1");
+  main.focus({ preventScroll: true });
+  if (previousTabIndex === null) main.removeAttribute("tabindex");
+  else main.setAttribute("tabindex", previousTabIndex);
+  return false;
+}
+
 export function CookieSettingsProvider({ children }: Readonly<{ children: ReactNode }>) {
   const [open, setOpen] = useState(false);
-  const openSettings = useCallback(() => setOpen(true), []);
-  const closeSettings = useCallback(() => setOpen(false), []);
+  // 연 순간 포커스가 있던 요소. 버튼은 자기에게 포커스한 뒤 열고, 레거시 URL 진입은 body다
+  const openerRef = useRef<Element | null>(null);
+  const openSettings = useCallback(() => {
+    openerRef.current = document.activeElement;
+    setOpen(true);
+  }, []);
   return (
     <OpenCookieSettingsContext value={openSettings}>
       {children}
+      {/* 열 때마다 저장된 선택을 다시 읽도록(AnalyticsConsentSettings draft) 닫으면 언마운트한다 */}
       {open && (
-        <SettingsDialog title="쿠키 설정" onClose={closeSettings}>
-          <AnalyticsConsentSettings />
-        </SettingsDialog>
+        <Dialog
+          open
+          onOpenChange={(nextOpen) => {
+            if (!nextOpen) setOpen(false);
+          }}
+        >
+          <DialogContent
+            size="md"
+            closeLabel="쿠키 설정 닫기"
+            finalFocus={() => getCookieSettingsReturnFocus(openerRef.current)}
+          >
+            <DialogHeader>
+              <DialogTitle>쿠키 설정</DialogTitle>
+            </DialogHeader>
+            <AnalyticsConsentSettings onCancel={() => setOpen(false)} />
+          </DialogContent>
+        </Dialog>
       )}
     </OpenCookieSettingsContext>
   );
diff --git a/src/components/auth/AuthFlowSpinner.tsx b/src/components/auth/AuthFlowSpinner.tsx
index 895fd817..021c4e84 100644
--- a/src/components/auth/AuthFlowSpinner.tsx
+++ b/src/components/auth/AuthFlowSpinner.tsx
@@ -1,8 +1,10 @@
+import { Spinner } from "@/components/ui/spinner";
+
 /** 로그인·OAuth 콜백 등 전체 화면 로딩 표시 (배경·스피너 동일). */
 export function AuthFlowSpinner() {
   return (
     <div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-bubble-gray/80 via-white to-white px-4">
-      <div className="h-10 w-10 animate-spin rounded-full border-2 border-gray-border border-t-primary" />
+      <Spinner size={32} />
     </div>
   );
 }
diff --git a/src/components/chat/ChatInputBar.tsx b/src/components/chat/ChatInputBar.tsx
index 93f964de..22553e57 100644
--- a/src/components/chat/ChatInputBar.tsx
+++ b/src/components/chat/ChatInputBar.tsx
@@ -33,10 +33,13 @@ function mentionSuffixMatchesAi(valueFromAt: string): boolean {
   return t.length === 0 || "ai".startsWith(t);
 }
 
-/** 고정 인풋바 높이 — 텍스트 2줄(line-height 1.5) + 버튼 행 */
-const CHAT_INPUT_BAR_HEIGHT = {
-  default: 100,
-  minimized: 110,
+/**
+ * 고정 인풋바 높이 = 위 테두리 1 + 버튼 행 43 + 입력 영역 여백 20(바깥 위 4·아래 8, 입력칸 위아래 4) + 글자 줄.
+ * PC는 3줄(14px 글자, 행간 20 × 3 = 60)이라 124, 모바일 기기는 지금 높이 100, 작은 패널(12px 글자)은 110(약 3줄)
+ */
+const CHAT_INPUT_BAR_HEIGHT_CLASS = {
+  default: "h-[124px] mobile:h-[100px]",
+  minimized: "h-[110px]",
 } as const;
 
 function scrollInputToCaret(el: HTMLTextAreaElement) {
@@ -270,12 +273,10 @@ export function ChatInputBar({
 
   return (
     <div
-      className="flex shrink-0 flex-col border-t border-gray-300"
-      style={{
-        height: isMinimized
-          ? CHAT_INPUT_BAR_HEIGHT.minimized
-          : CHAT_INPUT_BAR_HEIGHT.default,
-      }}
+      className={cn(
+        "flex shrink-0 flex-col border-t border-gray-300",
+        isMinimized ? CHAT_INPUT_BAR_HEIGHT_CLASS.minimized : CHAT_INPUT_BAR_HEIGHT_CLASS.default,
+      )}
     >
       <div
         ref={inputShellRef}
diff --git a/src/components/chat/chat-message-chrome.ts b/src/components/chat/chat-message-chrome.ts
index 98ec07a2..c3176c49 100644
--- a/src/components/chat/chat-message-chrome.ts
+++ b/src/components/chat/chat-message-chrome.ts
@@ -1,5 +1,5 @@
 /**
- * 채팅 메시지 말풍선·아바타 래퍼 등 레이아웃·배경 토큰.
+ * 채팅 메시지 말풍선 등 레이아웃·배경 토큰.
  * 글자 크기·행간은 `chatTypography` 를 사용합니다.
  */
 import { chatAssets } from "@/lib/public-assets";
@@ -12,8 +12,6 @@ export const chatMessageChrome = {
     "border border-ai-bubble-border bg-ai-bubble text-gray-900 shadow-sm shadow-slate-900/5",
   systemPill:
     "max-w-[min(100%,20rem)] rounded-full bg-black/25 px-4 py-2 text-center text-white",
-  avatarSm:
-    "h-10 w-10 shrink-0 overflow-hidden rounded-xl shadow-sm ring-1 ring-gray-border",
   wooriIconSrc: chatAssets.woori,
 } as const;
 
diff --git a/src/components/chat/messages/ChatMemberAvatarRing.tsx b/src/components/chat/messages/ChatMemberAvatarRing.tsx
deleted file mode 100644
index 3cd76a01..00000000
--- a/src/components/chat/messages/ChatMemberAvatarRing.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-import { User } from "lucide-react";
-
-export function ChatMemberAvatarRing({
-  avatarUrl,
-  alt,
-  senderNotInRoom,
-  chromeAvatarClassName,
-  reduceMotion,
-}: {
-  avatarUrl?: string;
-  alt: string;
-  /** 방을 나간 타인 — 사진이 있어도 기본 프로필 플레이스홀더 오버레이 */
-  senderNotInRoom?: boolean;
-  chromeAvatarClassName: string;
-  reduceMotion: boolean | null;
-}) {
-  const [imgFailed, setImgFailed] = useState(false);
-
-  const [previousAvatarUrl, setPreviousAvatarUrl] = useState(avatarUrl);
-  if (previousAvatarUrl !== avatarUrl) {
-    setPreviousAvatarUrl(avatarUrl);
-    setImgFailed(false);
-  }
-
-  const showImage = Boolean(avatarUrl?.trim()) && !imgFailed;
-  const showPlaceholderOverlay =
-    Boolean(senderNotInRoom) || !showImage;
-
-  return (
-    <div className={cn(chromeAvatarClassName, "relative bg-light-gray")}>
-      {showImage ? (
-        // eslint-disable-next-line @next/next/no-img-element -- 멤버 프로필 URL 가변
-        <img
-          src={avatarUrl}
-          alt={alt}
-          // 구글 프로필(lh3.googleusercontent.com/a/…)은 Referer가 붙으면 로드를 거부한다
-          referrerPolicy="no-referrer"
-          className={cn(
-            "h-full w-full object-cover",
-            !reduceMotion && "transition-opacity duration-150 ease-out",
-          )}
-          onError={() => setImgFailed(true)}
-        />
-      ) : null}
-      {showPlaceholderOverlay ? (
-        <span
-          className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-[inherit] bg-[#ebebeb]"
-          aria-hidden
-        >
-          <User
-            className="h-[58%] w-[58%] text-[#bfbfbf]"
-            strokeWidth={1.35}
-          />
-        </span>
-      ) : null}
-    </div>
-  );
-}
diff --git a/src/components/chat/messages/ChatMessageGroup.tsx b/src/components/chat/messages/ChatMessageGroup.tsx
index 511d4a0f..a5f83732 100644
--- a/src/components/chat/messages/ChatMessageGroup.tsx
+++ b/src/components/chat/messages/ChatMessageGroup.tsx
@@ -3,11 +3,12 @@ import { ChatMarkdownContent } from "@/components/chat/ChatMarkdownContent";
 import type { ChatMarkdownVariant } from "@/components/chat/chat-markdown-components";
 import { getChatPanelLook } from "@/components/chat/chat-panel-look";
 import { AiResponseBubble } from "@/components/chat/messages/AiResponseBubble";
-import { ChatMemberAvatarRing } from "@/components/chat/messages/ChatMemberAvatarRing";
+import { ChatSenderAvatar } from "@/components/chat/messages/ChatSenderAvatar";
 import type { ChatMessageTextTypography } from "@/components/chat/chat-typography";
+import { Avatar } from "@/components/ui/avatar";
+import { Spinner } from "@/components/ui/spinner";
 import { cn } from "@/lib/utils";
 import type { AiRequestStatus, ChatMessage } from "@/types/chat";
-import { Loader2 } from "lucide-react";
 
 function labelForAiStatus(status: AiRequestStatus): string {
   const labels: Record<AiRequestStatus, string> = {
@@ -64,8 +65,9 @@ function AiRequestMetaRow({
         {ar.aiStatus === "PROCESSING" ? (
           <span className="inline-flex items-center gap-1.5">
             <span>{labelForAiStatus(ar.aiStatus)}</span>
-            <Loader2
-              className="h-3.5 w-3.5 shrink-0 animate-spin text-primary-strong"
+            <Spinner
+              size={16}
+              className="shrink-0"
               aria-hidden
             />
           </span>
@@ -152,13 +154,7 @@ export function OtherMessageGroup({
   return (
     <div className="flex gap-2">
       <div className="flex flex-col items-center gap-1">
-        <ChatMemberAvatarRing
-          chromeAvatarClassName={chrome.avatarSm}
-          avatarUrl={first.avatar}
-          alt={first.sender ?? ""}
-          senderNotInRoom={first.senderNotInRoom}
-          reduceMotion
-        />
+        <ChatSenderAvatar message={first} size={40} ring="subtle" />
         <span className={typo.metaMuted}>{first.sender}</span>
       </div>
       <div className="min-w-0">
@@ -267,18 +263,15 @@ export function AiMessageGroup({
   return (
     <div className="flex gap-2">
       <div className="flex shrink-0 flex-col items-center gap-0.5">
-        <div
-          className={cn(chrome.avatarSm, "bg-white")}
-          role="img"
-          aria-label="WOORI"
-        >
+        {/* 아래에 보이는 'WOORI' 라벨이 이름을 알리므로 그림은 장식으로 숨긴다 */}
+        <Avatar size={40} shape="rounded" tone="elevate" ring="subtle" aria-hidden>
           {/* eslint-disable-next-line @next/next/no-img-element -- public 정적 SVG(내장 래스터) */}
           <img
             src={chrome.wooriIconSrc}
-            alt="WOORI"
+            alt=""
             className="h-full w-full object-contain p-1"
           />
-        </div>
+        </Avatar>
         <span className={typo.wooriSenderLabel}>WOORI</span>
       </div>
 
diff --git a/src/components/chat/messages/ChatMessageList.tsx b/src/components/chat/messages/ChatMessageList.tsx
index 1bbeebe4..c37ea9ec 100644
--- a/src/components/chat/messages/ChatMessageList.tsx
+++ b/src/components/chat/messages/ChatMessageList.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import {
   useCallback,
@@ -458,7 +458,7 @@ export function ChatMessageList({
                 isMinimized && "mb-1.5 min-h-4 text-body-xs-regular",
               )}
             >
-              <LoadingIndicator label="이전 메시지 불러오는 중" size={isMinimized ? 16 : 20} />
+              <Spinner aria-label="이전 메시지 불러오는 중" size={isMinimized ? 16 : 20} />
             </div>
           ) : null}
           {readMarkerMessageId != null &&
@@ -526,7 +526,7 @@ export function ChatMessageList({
                 isMinimized && "mt-1.5 min-h-4 text-body-xs-regular",
               )}
             >
-              <LoadingIndicator label="다음 메시지 불러오는 중" size={isMinimized ? 16 : 20} />
+              <Spinner aria-label="다음 메시지 불러오는 중" size={isMinimized ? 16 : 20} />
             </div>
           ) : null}
           <div
diff --git a/src/components/chat/messages/ChatSenderAvatar.tsx b/src/components/chat/messages/ChatSenderAvatar.tsx
new file mode 100644
index 00000000..c102c16f
--- /dev/null
+++ b/src/components/chat/messages/ChatSenderAvatar.tsx
@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+
+import { UserAvatar } from "@/components/user/UserAvatar";
+import type { ChatMessage } from "@/types/chat";
+
+type Props = Pick<ComponentProps<typeof UserAvatar>, "size" | "ring"> & {
+  message: Pick<ChatMessage, "sender" | "avatar" | "senderNotInRoom">;
+};
+
+/** 채팅 보낸 사람의 사진 자리. 방을 나간 사람은 사진이 있어도 사람 아이콘을 보인다 */
+export function ChatSenderAvatar({ message, ...avatarProps }: Readonly<Props>) {
+  return (
+    <UserAvatar
+      user={{
+        nickname: message.sender ?? "",
+        profileImageUrl: message.senderNotInRoom ? null : (message.avatar ?? null),
+      }}
+      shape="rounded"
+      tone="icon"
+      {...avatarProps}
+    />
+  );
+}
diff --git a/src/components/chat/messages/NewMessagePreviewButton.tsx b/src/components/chat/messages/NewMessagePreviewButton.tsx
index 9aac7ce9..fa468e8b 100644
--- a/src/components/chat/messages/NewMessagePreviewButton.tsx
+++ b/src/components/chat/messages/NewMessagePreviewButton.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { ChatSenderAvatar } from "@/components/chat/messages/ChatSenderAvatar";
 import { cn } from "@/lib/utils";
 import type { ChatMessage } from "@/types/chat";
-import { ChatMemberAvatarRing } from "./ChatMemberAvatarRing";
 
 export const PLACE_SHARE_PREVIEW_TEXT = "장소를 공유했습니다.";
 
@@ -36,16 +36,7 @@ export function NewMessagePreviewButton({
           isMinimized && "gap-1.5 py-1 pl-1 pr-3",
         )}
       >
-        <ChatMemberAvatarRing
-          chromeAvatarClassName={cn(
-            "shrink-0 overflow-hidden rounded-lg ring-1 ring-border",
-            isMinimized ? "h-6 w-6" : "h-7 w-7",
-          )}
-          avatarUrl={message.avatar}
-          alt=""
-          senderNotInRoom={message.senderNotInRoom}
-          reduceMotion
-        />
+        <ChatSenderAvatar message={message} size={isMinimized ? 24 : 28} ring="default" />
         <span
           className={cn(
             "shrink-0 text-primary",
diff --git a/src/components/chat/messages/OgPlacePreviewCard.tsx b/src/components/chat/messages/OgPlacePreviewCard.tsx
index 660f33cf..b578f62a 100644
--- a/src/components/chat/messages/OgPlacePreviewCard.tsx
+++ b/src/components/chat/messages/OgPlacePreviewCard.tsx
@@ -4,6 +4,7 @@ import { MapPin, Star } from "lucide-react";
 
 import { useInViewport } from "@/hooks/useInViewport";
 import { usePlacePhotoUrlQuery } from "@/hooks/usePlacePhotoUrl";
+import { useVisiblePlacePhotoUrl } from "@/hooks/useVisiblePlacePhotoUrl";
 import { resolveChatMessageTypography } from "@/components/chat/chat-typography";
 import { handlePlacePhotoImageError } from "@/lib/places/place-photo-refresh";
 import { cn } from "@/lib/utils";
@@ -36,6 +37,7 @@ export function OgPlacePreviewCard({
   const { data: imageUrl } = usePlacePhotoUrlQuery(googlePlaceId, {
     enabled: thumbnailInViewport,
   });
+  const { visibleUrl, markUnavailable } = useVisiblePlacePhotoUrl(imageUrl);
 
   return (
     <button
@@ -54,10 +56,10 @@ export function OgPlacePreviewCard({
           isMinimized ? "h-[72px] w-[72px]" : "h-[88px] w-[88px]",
         )}
       >
-        {imageUrl ? (
+        {visibleUrl ? (
           // eslint-disable-next-line @next/next/no-img-element -- 동적 장소 사진 URL (원격 패턴 비고정)
           <img
-            src={imageUrl}
+            src={visibleUrl}
             alt={name}
             className="h-full w-full object-cover"
             loading="lazy"
@@ -67,6 +69,7 @@ export function OgPlacePreviewCard({
                 googlePlaceId,
                 placeName: name,
                 image: event.currentTarget,
+                onPhotoUnavailable: markUnavailable,
               })
             }
           />
diff --git a/src/components/chat/messages/PlaceShareCard.tsx b/src/components/chat/messages/PlaceShareCard.tsx
index 37b3ba96..e2051be1 100644
--- a/src/components/chat/messages/PlaceShareCard.tsx
+++ b/src/components/chat/messages/PlaceShareCard.tsx
@@ -7,10 +7,9 @@ import { useSessionUser } from "@/hooks/useSessionUser";
 import { placePhotoUrlQueryKey } from "@/lib/place-photo-query";
 import { getQueryClient } from "@/lib/query-client";
 import { cn } from "@/lib/utils";
-import { chatMessageChrome } from "@/components/chat/chat-message-chrome";
 import { resolveChatMessageTypography } from "@/components/chat/chat-typography";
 import type { ChatMessage } from "@/types/chat";
-import { ChatMemberAvatarRing } from "@/components/chat/messages/ChatMemberAvatarRing";
+import { ChatSenderAvatar } from "@/components/chat/messages/ChatSenderAvatar";
 
 export function PlaceShareCard({
   message,
@@ -82,13 +81,7 @@ export function PlaceShareCard({
   return (
     <div className="flex gap-2">
       <div className="flex flex-col items-center gap-1">
-        <ChatMemberAvatarRing
-          chromeAvatarClassName={chatMessageChrome.avatarSm}
-          avatarUrl={message.avatar}
-          alt={message.sender ?? ""}
-          senderNotInRoom={message.senderNotInRoom}
-          reduceMotion
-        />
+        <ChatSenderAvatar message={message} size={40} ring="subtle" />
         <span
           className={cn("max-w-[4rem] truncate text-center", typo.metaMuted)}
         >
diff --git a/src/components/date-picker/DatePickerLayer.tsx b/src/components/date-picker/DatePickerLayer.tsx
index a90889b3..452b23cd 100644
--- a/src/components/date-picker/DatePickerLayer.tsx
+++ b/src/components/date-picker/DatePickerLayer.tsx
@@ -1,19 +1,28 @@
 "use client";
 
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import { useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from "react";
 
+import { Dialog } from "@/components/ui/dialog";
+import { Popover, PopoverContent } from "@/components/ui/popover";
+
 import { DATE_PICKER_WIDTH } from "./DatePicker";
 
 export type DatePickerPresentation = "anchored" | "popup";
 
 /**
- * 달력 표시 방식 — `anchored`는 `relative` 입력 칸 아래에 붙고, `popup`은 화면 가운데에 띄운다.
+ * 달력 표시 방식 — `anchored`는 누른 입력 칸 아래에 붙는 Popover, `popup`은 화면 가운데 Dialog다.
  * 모바일과 스크롤되는 모달 안에서는 `popup`을 쓴다 (Figma Date Picker Usage).
  * `anchored`는 입력 칸 폭에 맞춰 달력 전체를 같은 비율로 줄이거나 늘린다.
  * `popup`은 가로 최소 300px이고, 화면보다 높으면(6주짜리 달·가로 모드) 달력 안에서 세로로 스크롤한다.
+ * 닫힘은 둘 다 Esc = 취소(`onEscape`), 바깥 클릭·키보드로 벗어남 = 확정(`onDismiss`)이다.
+ * 열고 닫힐 때 포커스는 Base UI에 맡기지 않는다: 열면 DatePicker가 날짜 칸으로 옮기고, 닫히면 아래 effect가 연 칸으로 돌려준다.
+ * 열린 동안만 마운트한다(닫힘 애니메이션 없음, 지금과 같음).
  */
 export function DatePickerLayer({
   presentation,
+  anchorRef,
   boundaryRef,
   label,
   onDismiss,
@@ -21,7 +30,9 @@ export function DatePickerLayer({
   children,
 }: Readonly<{
   presentation: DatePickerPresentation;
-  /** `anchored`에서 바깥 클릭 판정 범위 — 입력 칸과 레이어를 함께 감싼 요소 */
+  /** `anchored`에서 달력을 붙일 입력 칸 — 달력 폭·비율의 기준 */
+  anchorRef?: RefObject<HTMLElement | null>;
+  /** `anchored`에서 바깥 클릭·포커스 이탈 판정 범위 — 입력 칸 두 개를 함께 감싼 요소 */
   boundaryRef?: RefObject<HTMLElement | null>;
   label: string;
   /** 바깥 클릭·키보드로 레이어를 벗어날 때 */
@@ -30,10 +41,6 @@ export function DatePickerLayer({
   children: ReactNode;
 }>) {
   const dialogRef = useRef<HTMLDivElement>(null);
-  const onDismissRef = useRef(onDismiss);
-  useEffect(() => {
-    onDismissRef.current = onDismiss;
-  });
 
   // 자식(DatePicker)이 날짜 칸으로 포커스를 옮기기 전, 렌더 시점의 포커스가 레이어를 연 칸이다
   const [opener] = useState(() => document.activeElement);
@@ -49,82 +56,90 @@ export function DatePickerLayer({
     };
   }, [opener]);
 
-  // 첫 페인트 전에 입력 칸 폭을 재서 달력 비율을 맞춘다
+  // 첫 페인트 전에 입력 칸 폭을 재서 달력 비율을 맞춘다. 달력(Popover bare)은 이 칸과 같은 폭이다
   useLayoutEffect(() => {
-    const dialog = dialogRef.current;
-    if (presentation !== "anchored" || !dialog) return;
-    const fit = () => setZoom(dialog.clientWidth / DATE_PICKER_WIDTH);
+    const anchor = anchorRef?.current;
+    if (presentation !== "anchored" || !anchor) return;
+    const fit = () => setZoom(anchor.clientWidth / DATE_PICKER_WIDTH);
     fit();
     const observer = new ResizeObserver(fit);
-    observer.observe(dialog);
+    observer.observe(anchor);
     return () => observer.disconnect();
-  }, [presentation]);
-
-  useEffect(() => {
-    if (presentation !== "anchored") return;
-    function handlePointerDown(event: PointerEvent) {
-      if (!boundaryRef?.current?.contains(event.target as Node)) onDismissRef.current();
-    }
-    document.addEventListener("pointerdown", handlePointerDown);
-    return () => document.removeEventListener("pointerdown", handlePointerDown);
-  }, [presentation, boundaryRef]);
-
-  const dialog = (
-    <div
-      ref={dialogRef}
-      role="dialog"
-      aria-label={label}
-      aria-modal={presentation === "popup" || undefined}
-      onKeyDown={(event) => {
-        if (event.key === "Escape") {
-          // 바깥 모달(SettingsDialog)의 Escape 처리까지 닫히지 않도록 막는다
-          event.preventDefault();
-          event.stopPropagation();
-          onEscape();
-          return;
-        }
-        if (event.key !== "Tab" || presentation !== "popup") return;
-        const controls = [
-          ...event.currentTarget.querySelectorAll<HTMLElement>('button:not(:disabled), [tabindex="0"]'),
-        ].filter((node) => node.tabIndex >= 0);
-        const first = controls[0];
-        const last = controls.at(-1);
-        if (event.shiftKey && document.activeElement === first) {
-          event.preventDefault();
-          last?.focus();
-        } else if (!event.shiftKey && document.activeElement === last) {
-          event.preventDefault();
-          first?.focus();
-        }
-      }}
-      onBlur={(event) => {
-        // 키보드로 레이어 밖 요소에 포커스가 가면 닫는다 (마우스는 바깥 클릭 처리)
-        if (presentation !== "anchored") return;
-        const next = event.relatedTarget;
-        if (next && !boundaryRef?.current?.contains(next)) onDismiss();
-      }}
-      className={
-        presentation === "anchored"
-          ? "absolute inset-x-0 top-full z-30 mt-3"
-          : "max-h-full w-full min-w-[300px] max-w-[353px] overflow-y-auto overscroll-contain rounded-[12px]"
-      }
-    >
-      {presentation === "anchored" ? <div style={{ zoom }}>{children}</div> : children}
-    </div>
-  );
+  }, [presentation, anchorRef]);
 
-  if (presentation === "anchored") return dialog;
+  if (presentation === "anchored") {
+    return (
+      // 포커스는 달력 안에서만 돈다(WAI-ARIA 날짜 선택 대화상자). 달력이 body로 포털돼 Tab으로 빠져나가면 다음 칸이 아니라 페이지 맨 앞으로 갔다.
+      // 바깥 클릭은 그대로 뒤로 전달되고(확정), Esc는 취소다
+      <Popover
+        open
+        modal="trap-focus"
+        onOpenChange={(open, details) => {
+          if (open) return;
+          if (details.reason === "escape-key" || details.reason === "close-press") {
+            onEscape();
+            return;
+          }
+          // 두 칸 묶음 안(다른 날짜 칸)을 누르거나 그리로 포커스가 가면 닫지 않는다. 그 칸의 onClick이 달력을 다시 붙인다
+          const next = details.reason === "focus-out" ? document.activeElement : details.event.target;
+          if (next instanceof Node && boundaryRef?.current?.contains(next)) {
+            details.cancel();
+            return;
+          }
+          onDismiss();
+        }}
+      >
+        <PopoverContent
+          variant="bare"
+          anchor={anchorRef}
+          sideOffset={12}
+          initialFocus={false}
+          finalFocus={false}
+          aria-label={label}
+        >
+          <div ref={dialogRef} style={{ zoom }}>
+            {children}
+          </div>
+          {/* Base UI는 닫기 부품이 있어야 포커스를 가둔다(PopoverPopup modal && hasClosePart). 화면 읽기 프로그램 터치 사용자가 빠져나갈 길이기도 하다.
+              보이지 않고 Tab 순서에도 넣지 않는다(키보드는 Esc·달력의 취소). 누르면 Esc처럼 취소다 */}
+          <PopoverPrimitive.Close tabIndex={-1} className="sr-only">
+            날짜 선택 닫기
+          </PopoverPrimitive.Close>
+        </PopoverContent>
+      </Popover>
+    );
+  }
 
   return (
-    <div
-      role="presentation"
-      // 화면 폭이 300px+여백보다 좁으면 가운데 정렬이 양옆을 자르지 않게 왼쪽부터 놓고 가로로 스크롤한다
-      className="fixed inset-0 z-[220] flex items-center justify-center-safe overflow-x-auto bg-black/40 p-4"
-      onPointerDown={(event) => {
-        if (event.target === event.currentTarget) onDismiss();
+    <Dialog
+      open
+      onOpenChange={(open, details) => {
+        if (open) return;
+        if (details.reason === "escape-key") onEscape();
+        else onDismiss(); // 딤(바깥) 클릭 = 확정
       }}
     >
-      {dialog}
-    </div>
+      <DialogPrimitive.Portal>
+        {/* 표면은 DatePicker 카드가 그려 ui DialogContent(Modal 표면·여백) 대신 Base UI 파트로 지금 팝업 모양을 그대로 둔다.
+            딤은 ui Dialog와 같은 값이고, 바깥 대화상자(여행 정보 수정) 위에서도 덮도록 forceRender로 늘 그린다 */}
+        <DialogPrimitive.Backdrop
+          forceRender
+          className="fixed inset-0 z-50 min-h-dvh bg-black/40 supports-[-webkit-touch-callout:none]:absolute"
+        />
+        {/* 화면 폭이 300px+여백보다 좁으면 가운데 정렬이 양옆을 자르지 않게 왼쪽부터 놓고 가로로 스크롤한다 */}
+        <DialogPrimitive.Viewport className="fixed inset-0 z-50 flex items-center justify-center-safe overflow-x-auto p-4">
+          <DialogPrimitive.Popup
+            ref={dialogRef}
+            aria-label={label}
+            aria-modal
+            initialFocus={false}
+            finalFocus={false}
+            className="max-h-full w-full min-w-[300px] max-w-[353px] overflow-y-auto overscroll-contain rounded-[12px] outline-none"
+          >
+            {children}
+          </DialogPrimitive.Popup>
+        </DialogPrimitive.Viewport>
+      </DialogPrimitive.Portal>
+    </Dialog>
   );
 }
diff --git a/src/components/date-picker/DateRangeField.tsx b/src/components/date-picker/DateRangeField.tsx
index c97c0d43..c57864e2 100644
--- a/src/components/date-picker/DateRangeField.tsx
+++ b/src/components/date-picker/DateRangeField.tsx
@@ -18,7 +18,7 @@ const FIELDS: { edge: RangeEdge; label: string }[] = [
 
 /**
  * Figma Date Picker Usage `Input Field와 함께 쓰일 때` — `Text Field Emphasis` 두 칸과 기간 달력.
- * 웹은 누른 칸 아래에 그 칸 폭으로 붙이고, 모바일·`popupOnly`는 팝업으로 띄운다.
+ * 웹은 누른 칸 아래에 그 칸 폭으로 붙이고(Popover), 모바일·`popupOnly`는 팝업(Dialog)으로 띄운다.
  */
 export function DateRangeField({
   idPrefix,
@@ -38,6 +38,7 @@ export function DateRangeField({
   onChange: (next: DateRange) => void;
 }>) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const fieldRefs = { start: useRef<HTMLDivElement>(null), end: useRef<HTMLDivElement>(null) };
   const { isMobileDevice } = useMobileView();
   const draft = useDateRangeDraft(value, onChange);
   const presentation = popupOnly || isMobileDevice ? "popup" : "anchored";
@@ -45,6 +46,7 @@ export function DateRangeField({
   const picker = draft.isOpen ? (
     <DatePickerLayer
       presentation={presentation}
+      anchorRef={draft.anchorEdge ? fieldRefs[draft.anchorEdge] : undefined}
       boundaryRef={containerRef}
       label="날짜 선택"
       onDismiss={draft.confirm}
@@ -80,7 +82,7 @@ export function DateRangeField({
         );
 
         return (
-          <div key={edge} className="relative min-w-0">
+          <div key={edge} ref={fieldRefs[edge]} className="min-w-0">
             {readOnly ? (
               <div className="flex w-full min-w-0 flex-col gap-0.5 rounded-md border border-border bg-fill pb-1.5 pl-3 pr-2 pt-3">
                 <span className="pl-1 pr-2 text-label-xs-regular text-text-subtle">{label}</span>
@@ -105,6 +107,7 @@ export function DateRangeField({
                 {text}
               </button>
             )}
+            {/* 달력은 포털로 뜨지만 React 위치는 그 칸 안에 둔다. 칸을 바꾸면 달력이 새로 열리고, Tab 순서가 칸 바로 뒤로 이어진다 */}
             {presentation === "anchored" && draft.anchorEdge === edge ? picker : null}
           </div>
         );
diff --git a/src/components/expenses/ExpenseAmountInput.tsx b/src/components/expenses/ExpenseAmountInput.tsx
index 13aa960a..5341600b 100644
--- a/src/components/expenses/ExpenseAmountInput.tsx
+++ b/src/components/expenses/ExpenseAmountInput.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { useLayoutEffect, useRef, type ComponentProps } from "react";
+import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
-import { expenseInputClass, formatExpenseAmount } from "./ExpenseViews";
+import { formatExpenseAmount } from "./ExpenseViews";
 
 export function ExpenseAmountInput({
   value,
@@ -35,14 +36,11 @@ export function ExpenseAmountInput({
     caret.current = null;
   }, [formatted]);
   return (
-    <input
+    <Input
       {...inputProps}
       ref={input}
-      className={cn(
-        expenseInputClass,
-        "block h-12 text-[16px] font-normal tabular-nums placeholder:text-text-subtle",
-        inputProps.className,
-      )}
+      // 가계부의 다른 금액 표시처럼 고정폭 숫자로 그린다. Input의 글자 토큰(크기·굵기·색)은 덮지 않는다
+      className={cn("tabular-nums", inputProps.className)}
       inputMode={inputProps.inputMode ?? "decimal"}
       value={formatted}
       placeholder={placeholder}
diff --git a/src/components/expenses/ExpenseBackdrop.test.tsx b/src/components/expenses/ExpenseBackdrop.test.tsx
index a65fd806..9b28ab67 100644
--- a/src/components/expenses/ExpenseBackdrop.test.tsx
+++ b/src/components/expenses/ExpenseBackdrop.test.tsx
@@ -2,9 +2,11 @@
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ExpenseDialog } from "./ExpenseDialog";
 import { ExpenseEditor } from "./ExpenseEditor";
 import { ExpenseScopePanel } from "./ExpenseScopePanel";
 
+// 딤·Esc·X로 닫히는지를 실제 Base UI 대화상자(PC)·시트(모바일 기기)로 본다. 끄는 거리·속도 기준은 Base UI Drawer가 맡아 여기서 보지 않는다
 const state = vi.hoisted(() => ({ mobile: true, busy: false }));
 vi.mock("@/contexts/MobileViewContext", () => ({
   useMobileView: () => ({ isMobileDevice: state.mobile }),
@@ -26,82 +28,149 @@ let host: HTMLDivElement;
 const close = vi.fn();
 beforeEach(() => {
   vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
-  HTMLDialogElement.prototype.showModal = function () { this.open = true; };
-  HTMLDialogElement.prototype.close = function () { this.open = false; };
   state.mobile = true; state.busy = false; close.mockReset();
   host = document.createElement("div"); document.body.append(host); root = createRoot(host);
 });
 afterEach(async () => {
   await act(async () => root.unmount()); host.remove(); vi.unstubAllGlobals();
 });
-async function pointer(target: Element, type: string, button = 0) {
-  await act(async () => target.dispatchEvent(new MouseEvent(type, { bubbles: true, button })));
+
+async function settle() {
+  // Base UI는 열림·닫힘을 microtask·requestAnimationFrame·타이머로 반영한다
+  await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)); });
+}
+// 대화상자는 document.body로 포털된다. 사용자가 누르는 딤은 PC에서는 딤 요소, 시트에서는 딤 위를 덮는 시트 바깥 빈 곳이다
+const surface = () => document.querySelector<HTMLElement>('[role="dialog"]')!;
+const dim = () => document.querySelector<HTMLElement>(
+  state.mobile ? '[data-slot="drawer-viewport"]' : '[data-slot="dialog-overlay"]',
+)!;
+const buttonNamed = (label: string) => document.querySelector<HTMLButtonElement>(`[aria-label="${label}"]`)!;
+function pointer(target: Element, type: string) {
+  target.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true, button: 0, detail: type === "click" ? 1 : 0 }));
+}
+/** 마우스 왼쪽 버튼으로 눌렀다 뗀다. 누른 곳과 뗀 곳이 다르면 click은 둘의 공통 조상이 아니라 뗀 곳에서 받는다고 단순화한다 */
+async function press(start: Element, end: Element = start) {
+  await act(async () => {
+    pointer(start, "pointerdown");
+    pointer(start, "mousedown");
+    pointer(end, "pointerup");
+    pointer(end, "mouseup");
+    pointer(end, "click");
+  });
+  await settle();
+}
+async function pressEscape() {
+  await act(async () => {
+    (document.activeElement ?? document.body).dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+  });
+  await settle();
 }
 
-for (const kind of ["editor", "list"] as const) {
-  describe(`${kind} backdrop dismissal`, () => {
+const kinds = {
+  editor: {
+    closeLabel: "닫기",
+    render: () => <ExpenseEditor initial={{}} onClose={close} />,
+  },
+  list: {
+    closeLabel: "비용 목록 닫기",
+    render: () => (
+      <ExpenseScopePanel scope={{ scheduleId: 2, label: "1일차" }} roomId="r" expenses={[]}
+        isPending={false} isError={false} canManage busy={state.busy} onAdd={() => {}}
+        onEdit={() => {}} onDelete={async () => {}} onRetry={() => {}} onClose={close} />
+    ),
+  },
+} as const;
+
+for (const [kind, { closeLabel, render }] of Object.entries(kinds)) {
+  describe(`${kind} dismissal`, () => {
     async function mount() {
-      await act(async () => root.render(kind === "editor"
-        ? <ExpenseEditor initial={{}} onClose={close} />
-        : <ExpenseScopePanel scope={{ scheduleId: 2, label: "1일차" }} roomId="r" expenses={[]}
-            isPending={false} isError={false} canManage busy={state.busy} onAdd={() => {}}
-            onEdit={() => {}} onDelete={async () => {}} onRetry={() => {}} onClose={close} />));
-      return host.querySelector("dialog")!;
+      await act(async () => root.render(render()));
+      await settle();
+      expect(surface()).not.toBeNull();
     }
-    it("dismisses once when a mobile backdrop press is released", async () => {
-      const dialog = await mount();
-      await pointer(dialog, "pointerdown");
-      expect(close).not.toHaveBeenCalled();
-      await pointer(dialog, "pointerup");
-      expect(close).toHaveBeenCalledOnce();
-      await pointer(dialog, "pointerup");
+    it("closes the mobile sheet once when its dim is pressed", async () => {
+      await mount();
+      expect(document.querySelector('[data-slot="drawer-content"]')).not.toBeNull();
+      await press(dim());
       expect(close).toHaveBeenCalledOnce();
     });
-    it("keeps content interactions and gestures ending outside open", async () => {
-      const dialog = await mount();
-      const content = host.querySelector("h2")!;
-      await pointer(content, "pointerdown");
-      await pointer(dialog, "pointerup");
-      await pointer(dialog, "pointerdown");
-      await pointer(content, "pointerup");
-      await pointer(content, "pointerdown");
-      await pointer(content, "pointerup");
-      expect(close).not.toHaveBeenCalled();
-    });
-    it("discards a cancelled backdrop gesture", async () => {
-      const dialog = await mount();
-      await pointer(dialog, "pointerdown");
-      await pointer(dialog, "pointercancel");
-      await pointer(dialog, "pointerup");
-      expect(close).not.toHaveBeenCalled();
-    });
-    it("ignores secondary-button backdrop presses", async () => {
-      const dialog = await mount();
-      await pointer(dialog, "pointerdown", 2);
-      await pointer(dialog, "pointerup", 2);
+    it("keeps the mobile sheet open for presses inside it, including a press dragged out onto the dim", async () => {
+      await mount();
+      const title = surface().querySelector("h2")!;
+      await press(title);
+      await press(title, dim());
       expect(close).not.toHaveBeenCalled();
+      // 그 뒤 딤을 제대로 누르면 닫힌다
+      await press(dim());
+      expect(close).toHaveBeenCalledOnce();
     });
-    it("keeps desktop backdrop presses open", async () => {
+    it("keeps the desktop dialog open when its dim is pressed", async () => {
       state.mobile = false;
-      const dialog = await mount();
-      await pointer(dialog, "pointerdown"); await pointer(dialog, "pointerup");
+      await mount();
+      expect(document.querySelector('[data-slot="dialog-content"]')).not.toBeNull();
+      await press(dim());
       expect(close).not.toHaveBeenCalled();
+      expect(surface()).not.toBeNull();
+      // 막힌 것은 딤만이다
+      await pressEscape();
+      expect(close).toHaveBeenCalledOnce();
+    });
+    it.each([true, false])("closes by Escape and the close button when idle (mobile %s)", async (mobile) => {
+      state.mobile = mobile;
+      await mount();
+      await pressEscape();
+      expect(close).toHaveBeenCalledOnce();
+      await act(async () => buttonNamed(closeLabel).click());
+      await settle();
+      expect(close).toHaveBeenCalledTimes(2);
     });
-    it("blocks backdrop and Escape dismissal while busy", async () => {
+    it.each([true, false])("never closes by dim, Escape, close or cancel while busy (mobile %s)", async (mobile) => {
+      state.mobile = mobile;
       state.busy = true;
-      const dialog = await mount();
-      await pointer(dialog, "pointerdown"); await pointer(dialog, "pointerup");
-      const cancel = new Event("cancel", { cancelable: true });
-      await act(async () => dialog.dispatchEvent(cancel));
-      expect(cancel.defaultPrevented).toBe(true);
+      await mount();
+      await press(dim());
+      await pressEscape();
+      const closeButton = buttonNamed(closeLabel);
+      expect(closeButton.disabled).toBe(true);
+      await act(async () => closeButton.click());
+      const cancel = [...surface().querySelectorAll("button")].find((button) => button.textContent === "취소");
+      if (kind === "editor") {
+        expect(cancel!.disabled).toBe(true);
+        await act(async () => cancel!.click());
+      }
+      await settle();
       expect(close).not.toHaveBeenCalled();
-    });
-    it("preserves Escape dismissal without a pointer gesture", async () => {
-      const dialog = await mount();
-      const cancel = new Event("cancel", { cancelable: true });
-      await act(async () => dialog.dispatchEvent(cancel));
-      expect(cancel.defaultPrevented).toBe(true);
+      expect(surface()).not.toBeNull();
+      // 저장·삭제가 끝나면 다시 닫힌다
+      state.busy = false;
+      await act(async () => root.render(render()));
+      await pressEscape();
       expect(close).toHaveBeenCalledOnce();
     });
   });
 }
+
+describe("settlement dialog dismissal", () => {
+  async function mount() {
+    await act(async () => root.render(
+      <ExpenseDialog title="정산 요약" onClose={close}><p>정산 내용</p></ExpenseDialog>,
+    ));
+    await settle();
+  }
+  // 읽기 전용이라 PC·시트 모두 딤으로 닫는다(옛 ExpenseDialog와 같음)
+  it.each([true, false])("closes by dim, Escape and the close button (mobile %s)", async (mobile) => {
+    state.mobile = mobile;
+    await mount();
+    await press(surface().querySelector("p")!);
+    expect(close).not.toHaveBeenCalled();
+    await press(dim());
+    expect(close).toHaveBeenCalledTimes(1);
+    await pressEscape();
+    expect(close).toHaveBeenCalledTimes(2);
+    await act(async () => buttonNamed("정산 요약 닫기").click());
+    await settle();
+    expect(close).toHaveBeenCalledTimes(3);
+  });
+});
diff --git a/src/components/expenses/ExpenseBudget.test.tsx b/src/components/expenses/ExpenseBudget.test.tsx
index 25d4bc21..61870355 100644
--- a/src/components/expenses/ExpenseBudget.test.tsx
+++ b/src/components/expenses/ExpenseBudget.test.tsx
@@ -168,7 +168,11 @@ it.each([
   await submit();
   expect(mocks.save).not.toHaveBeenCalled();
   expect(input().value).toBe(value === "1000000000000000" ? "1,000,000,000,000,000" : value);
-  expect(document.querySelector('[role="alert"]')).not.toBeNull();
+  // 입력 오류는 칸의 오류 상태와 칸 아래 FieldError로 보인다
+  expect(input().getAttribute("aria-invalid")).toBe("true");
+  const error = document.getElementById(input().getAttribute("aria-describedby")!);
+  expect(error?.getAttribute("role")).toBe("alert");
+  expect(error?.textContent).toContain("1~15자리 숫자");
 });
 it("locks duplicate submit and close while pending, and preserves draft on failure", async () => {
   let reject!: (e: Error) => void;
@@ -182,7 +186,14 @@ it("locks duplicate submit and close while pending, and preserves draft on failu
   await type("456");
   await submit();
   await submit();
+  // 저장 중에는 저장 버튼이 progress로 바뀌고 접근성 이름은 '저장 중'이다
+  const saving = document.querySelector<HTMLButtonElement>('button[type="submit"]')!;
+  expect(saving.getAttribute("aria-busy")).toBe("true");
+  expect(document.getElementById(saving.getAttribute("aria-labelledby")!)?.textContent).toBe("저장 중");
   await click("예산 수정 닫기");
+  await act(async () => {
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+  });
   expect(mocks.save).toHaveBeenCalledTimes(1);
   expect(mocks.close).not.toHaveBeenCalled();
   await act(async () => reject(new Error("offline")));
@@ -245,7 +256,9 @@ it("summary opens shared modal for unset or zero budget", async () => {
   expect(text()).not.toContain("미설정");
   expect([...host.querySelectorAll("h3")].find(h => h.textContent === "전체 예산")?.parentElement?.querySelector("p")?.textContent).toBe("—");
   await click("예산 설정");
-  expect(document.querySelector("dialog")).not.toBeNull();
+  const dialog = document.querySelector('[role="dialog"]');
+  expect(dialog?.hasAttribute("data-open")).toBe(true);
+  expect(dialog?.querySelector("h2")?.textContent).toBe("예산 설정");
   expect(input().value).toBe("");
 });
 it("shows the whole-room total without duplicating page-level rate information", async () => {
diff --git a/src/components/expenses/ExpenseBudgetModal.tsx b/src/components/expenses/ExpenseBudgetModal.tsx
index 1859a872..532abcbd 100644
--- a/src/components/expenses/ExpenseBudgetModal.tsx
+++ b/src/components/expenses/ExpenseBudgetModal.tsx
@@ -1,22 +1,32 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { useForm } from "@tanstack/react-form";
+import { useId, useRef, useState, type FormEvent } from "react";
 
-import { useCallback, useId, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Spinner } from "@/components/ui/spinner";
 import {
   ExpenseApiError,
   type ExpenseBudget,
 } from "@/lib/api/rooms/expenses";
-import { SettingsDialog } from "@/components/settings/SettingsDialog";
-import {
-  SettingsActionButton,
-  SettingsActionButtonRow,
-} from "@/components/settings/SettingsActionButton";
 import { ExpenseAmountInput } from "./ExpenseAmountInput";
 import { useExpenseContext } from "./ExpenseProvider";
-import {
-  expenseButtonClass,
-  formatExpenseAmount,
-} from "./ExpenseViews";
+import { formatExpenseAmount } from "./ExpenseViews";
+
+function budgetError(value: string) {
+  return /^\d{1,15}$/.test(value)
+    ? undefined
+    : "예산은 1~15자리 숫자로 입력해 주세요. 음수·소수점·공백은 사용할 수 없어요.";
+}
 
 export function ExpenseBudgetModal({
   initial,
@@ -26,22 +36,48 @@ export function ExpenseBudgetModal({
   onClose: () => void;
 }>) {
   const context = useExpenseContext();
+  // 연 순간의 예산으로 제목·칸을 정한다. 열린 동안 서버 값이 바뀌어도 칸을 다시 채우지 않는다
   const [opened] = useState(initial);
-  const [draft, setDraft] = useState(initial.budgetKrw ?? "");
   const [version, setVersion] = useState(initial.version);
-  const [error, setError] = useState("");
+  // 입력 검증 오류는 칸의 Error 상태(form.Field)로, 저장 실패(네트워크·충돌·서버 메시지)는 칸 밖 문장으로 그린다
+  const [saveError, setSaveError] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
   const [conflict, setConflict] = useState<{
     latest?: ExpenseBudget;
     failed?: boolean;
   } | null>(null);
+  // 검증이 비동기로 끝나기 전 두 번째 제출과, 저장·재조회가 겹치는 것을 막는다
   const lock = useRef(false);
+  const formId = useId();
   const inputId = useId();
   const errorId = useId();
-  // Stable callback keeps the shared dialog's focus scope intact while typing.
-  const close = useCallback(() => {
-    if (!lock.current) onClose();
-  }, [onClose]);
+  const title = opened.budgetKrw === null ? "예산 설정" : "예산 수정";
+
+  const form = useForm({
+    defaultValues: { budget: opened.budgetKrw ?? "" },
+    onSubmit: async ({ value }) => {
+      setPending(true);
+      setSaveError(null);
+      try {
+        await context.saveBudget({
+          budgetKrw: value.budget,
+          expectedVersion: version,
+        });
+        onClose();
+      } catch (e) {
+        setSaveError(e instanceof Error ? e.message : "예산 저장에 실패했어요.");
+        if (
+          e instanceof ExpenseApiError &&
+          e.status === 409 &&
+          e.code === "BUDGET_CONFLICT"
+        )
+          await recover();
+      } finally {
+        setPending(false);
+      }
+    },
+  });
+
   async function recover() {
     setConflict({});
     try {
@@ -62,151 +98,149 @@ export function ExpenseBudgetModal({
       setPending(false);
     }
   }
-  async function save() {
-    if (lock.current || context.budgetBusy || !context.canManage || conflict)
-      return;
-    if (!/^\d{1,15}$/.test(draft)) {
-      setError(
-        "예산은 1~15자리 숫자로 입력해 주세요. 음수·소수점·공백은 사용할 수 없어요.",
-      );
-      return;
-    }
+  async function submit() {
     lock.current = true;
-    setPending(true);
-    setError("");
     try {
-      await context.saveBudget({
-        budgetKrw: draft,
-        expectedVersion: version,
-      });
-      onClose();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "예산 저장에 실패했어요.");
-      if (
-        e instanceof ExpenseApiError &&
-        e.status === 409 &&
-        e.code === "BUDGET_CONFLICT"
-      )
-        await recover();
+      await form.handleSubmit();
     } finally {
       lock.current = false;
-      setPending(false);
     }
   }
+  function handleFormSubmit(event: FormEvent) {
+    event.preventDefault();
+    // 라이브러리는 연타를 막지 않는다
+    if (lock.current || form.state.isSubmitting || context.budgetBusy || !context.canManage || conflict)
+      return;
+    void submit();
+  }
   const busy = pending || context.budgetBusy;
   return (
-    <SettingsDialog appearance="ledger"
-      title={opened.budgetKrw === null ? "예산 설정" : "예산 수정"}
-      onClose={close}
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      // 저장·최신 예산 재조회 중에는 Esc·딤·X로 닫지 않는다(지금 동작)
+      closeDisabled={pending}
     >
-      <form
-        className="space-y-6"
-        onSubmit={(e) => {
-          e.preventDefault();
-          void save();
-        }}
-      >
-        <p className="sr-only">여행 전체의 예산을 설정해 주세요.</p>
-        <div>
-          <label htmlFor={inputId} className="text-[12px] leading-4 font-medium">
-            예산 (KRW)
-          </label>
-          <ExpenseAmountInput
-            id={inputId}
-            type="text"
-            inputMode="numeric"
-            autoComplete="off"
-            value={draft}
-            disabled={busy}
-            aria-invalid={Boolean(error)}
-            aria-describedby={error ? errorId : undefined}
-            onChange={(value) => {
-              setDraft(value);
-              setError("");
+      <DialogContent size="sm" closeLabel={`${title} 닫기`}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription className="sr-only">여행 전체의 예산을 설정해 주세요.</DialogDescription>
+        </DialogHeader>
+        <form
+          id={formId}
+          noValidate
+          className="flex flex-col gap-6"
+          onSubmit={handleFormSubmit}
+        >
+          <form.Field name="budget" validators={{ onSubmit: ({ value }) => budgetError(value) }}>
+            {(field) => {
+              const fieldError = field.state.meta.errors[0];
+              return (
+                <Field>
+                  <FieldLabel htmlFor={inputId}>예산 (KRW)</FieldLabel>
+                  <ExpenseAmountInput
+                    id={inputId}
+                    type="text"
+                    inputMode="numeric"
+                    autoComplete="off"
+                    value={field.state.value}
+                    disabled={busy}
+                    aria-invalid={Boolean(fieldError)}
+                    aria-describedby={fieldError || saveError ? errorId : undefined}
+                    onChange={(value) => {
+                      // 칸 오류는 값이 바뀌면 TanStack Form이 지운다. 저장 실패 문장도 함께 지운다(지금 동작)
+                      field.handleChange(value);
+                      setSaveError(null);
+                    }}
+                  />
+                  {/* 두 오류는 함께 뜨지 않아 id 하나를 나눠 쓴다 */}
+                  <FieldError id={errorId}>{fieldError}</FieldError>
+                </Field>
+              );
             }}
-          />
-        </div>
-        {error && (
-          <p
-            id={errorId}
-            role="alert"
-            className="text-body-s-regular mobile:text-body-xs-regular text-status-negative"
-          >
-            {error}
-          </p>
-        )}
-        {!context.canManage && (
-          <p role="alert" className="text-body-s-regular mobile:text-body-xs-regular text-status-negative">
-            현재 참여 중인 방장과 멤버만 예산을 변경할 수 있어요.
-          </p>
-        )}
-        {conflict && (
-          <div
-            role="alert"
-            className="space-y-3 rounded-xl border border-gray-border p-4 text-body-s-regular mobile:text-body-xs-regular"
-          >
-            <p>
-              공유 예산이 변경되었어요. 작성한 금액은 유지돼요. 최신 예산을
-              확인한 뒤 다시 저장해 주세요.
+          </form.Field>
+          {saveError && (
+            <p
+              id={errorId}
+              role="alert"
+              className="text-body-s-regular mobile:text-body-xs-regular text-status-negative"
+            >
+              {saveError}
             </p>
-            {conflict.latest ? (
-              <>
-                <p className="break-all">
-                  최신 예산:{" "}
-                  {conflict.latest.budgetKrw === null
-                    ? "미설정"
-                    : `${formatExpenseAmount(conflict.latest.budgetKrw)} KRW`}
-                </p>
-                <button
-                  type="button"
-                  className={expenseButtonClass}
-                  disabled={busy || !context.canManage}
-                  onClick={() => {
-                    if (lock.current || !conflict.latest) return;
-                    setVersion(conflict.latest.version);
-                    setConflict(null);
-                    setError("");
-                  }}
-                >
-                  최신 예산 확인 후 수정 계속
-                </button>
-              </>
-            ) : (
+          )}
+          {!context.canManage && (
+            <p role="alert" className="text-body-s-regular mobile:text-body-xs-regular text-status-negative">
+              현재 참여 중인 방장과 멤버만 예산을 변경할 수 있어요.
+            </p>
+          )}
+          {conflict && (
+            <div
+              role="alert"
+              className="space-y-3 rounded-xl border border-gray-border p-4 text-body-s-regular mobile:text-body-xs-regular"
+            >
               <p>
-                {conflict.failed
-                  ? "최신 예산 조회에 실패했어요. 다시 조회한 뒤 확인해 주세요."
-                  : <LoadingIndicator label="최신 예산 확인 중" />}
+                공유 예산이 변경되었어요. 작성한 금액은 유지돼요. 최신 예산을
+                확인한 뒤 다시 저장해 주세요.
               </p>
-            )}
-            {conflict.failed && (
-              <button
-                type="button"
-                className={expenseButtonClass}
-                disabled={busy}
-                onClick={() => void reload()}
-              >
-                최신 예산 다시 조회
-              </button>
-            )}
-          </div>
-        )}
-        <SettingsActionButtonRow>
-          <SettingsActionButton
-            variant="secondary" className="h-12 rounded-lg text-[16px]"
-            disabled={busy}
-            onClick={close}
-          >
+              {conflict.latest ? (
+                <>
+                  <p className="break-all">
+                    최신 예산:{" "}
+                    {conflict.latest.budgetKrw === null
+                      ? "미설정"
+                      : `${formatExpenseAmount(conflict.latest.budgetKrw)} KRW`}
+                  </p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={busy || !context.canManage}
+                    onClick={() => {
+                      if (lock.current || !conflict.latest) return;
+                      setVersion(conflict.latest.version);
+                      setConflict(null);
+                      setSaveError(null);
+                    }}
+                  >
+                    최신 예산 확인 후 수정 계속
+                  </Button>
+                </>
+              ) : (
+                <p>
+                  {conflict.failed
+                    ? "최신 예산 조회에 실패했어요. 다시 조회한 뒤 확인해 주세요."
+                    : <Spinner aria-label="최신 예산 확인 중" />}
+                </p>
+              )}
+              {conflict.failed && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={busy}
+                  onClick={() => void reload()}
+                >
+                  최신 예산 다시 조회
+                </Button>
+              )}
+            </div>
+          )}
+        </form>
+        <DialogFooter>
+          <DialogClose disabled={busy} render={<Button variant="weak" />}>
             취소
-          </SettingsActionButton>
-          <SettingsActionButton
-            variant="primary" className="h-12 rounded-lg text-[16px]"
+          </DialogClose>
+          <Button
             type="submit"
-            disabled={busy || !context.canManage || Boolean(conflict)}
+            form={formId}
+            loading={busy}
+            loadingLabel="저장 중"
+            disabled={!context.canManage || Boolean(conflict)}
           >
-            {busy ? "저장 중…" : "저장"}
-          </SettingsActionButton>
-        </SettingsActionButtonRow>
-      </form>
-    </SettingsDialog>
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/components/expenses/ExpenseBudgetSummary.tsx b/src/components/expenses/ExpenseBudgetSummary.tsx
index fde3c966..2afda562 100644
--- a/src/components/expenses/ExpenseBudgetSummary.tsx
+++ b/src/components/expenses/ExpenseBudgetSummary.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ExpenseKrwAmount } from "./ExpenseKrw";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import type { ExpenseBudget } from "@/lib/api/rooms/expenses";
 import { useExpenseContext } from "./ExpenseProvider";
 import { ExpenseBudgetModal } from "./ExpenseBudgetModal";
@@ -13,7 +13,6 @@ export function ExpenseBudgetSummary() {
   const { budget, krwSummary, canManage, budgetBusy, syncStatus } =
     useExpenseContext();
   const [opened, setOpened] = useState<ExpenseBudget | null>(null);
-  const close = useCallback(() => setOpened(null), []);
   const reference = krwSummary.data;
   const amount = budget.data?.budgetKrw;
   const converted = reference?.convertedTotalKrw;
@@ -108,7 +107,7 @@ export function ExpenseBudgetSummary() {
             : "—"}
         </p>
       </div>
-      {opened && <ExpenseBudgetModal initial={opened} onClose={close} />}
+      {opened && <ExpenseBudgetModal initial={opened} onClose={() => setOpened(null)} />}
     </div>
   );
 }
diff --git a/src/components/expenses/ExpenseCategorySummary.tsx b/src/components/expenses/ExpenseCategorySummary.tsx
index c21a5a16..25082faf 100644
--- a/src/components/expenses/ExpenseCategorySummary.tsx
+++ b/src/components/expenses/ExpenseCategorySummary.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { ExpenseKrwAmount } from "./ExpenseKrw";
 import { useId, useState } from "react";
 import { ChevronDownIcon } from "@/assets/icons";
@@ -48,7 +48,7 @@ export function ExpenseCategorySummary() {
         className={`${expanded ? "block" : "hidden"} @min-[800px]/expenses:block`}
       >
         {list.isPending && (
-          <LoadingIndicator label="비용 요약 불러오는 중" className="flex w-full py-3" />
+          <Spinner aria-label="비용 요약 불러오는 중" className="flex w-full py-3" />
         )}
         {list.isSuccess && !rows.length && (
           <p className="py-3 text-body-xs-regular text-text-subtle">
diff --git a/src/components/expenses/ExpenseCurrencyPicker.test.tsx b/src/components/expenses/ExpenseCurrencyPicker.test.tsx
index 66669319..4c45f443 100644
--- a/src/components/expenses/ExpenseCurrencyPicker.test.tsx
+++ b/src/components/expenses/ExpenseCurrencyPicker.test.tsx
@@ -1,95 +1,112 @@
-import { act, create, type ReactTestRenderer } from "react-test-renderer";
-import { afterEach, expect, it, vi } from "vitest";
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { ExpenseCurrencyPicker } from "./ExpenseCurrencyPicker";
 
-let renderer: ReactTestRenderer;
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+let host: HTMLDivElement;
+let root: Root;
 const onChange = vi.fn();
 const currencies = ["USD", "KRW", "EUR", "JPY"].map((currency) => ({
   currency,
   fractionDigits: 2,
   maximumAmount: "999999.99",
 }));
-async function mount(disabled = false) {
+beforeEach(() => {
   onChange.mockClear();
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+});
+async function mount({ value = "KRW", list = currencies, disabled = false } = {}) {
+  await act(async () =>
+    root.render(<ExpenseCurrencyPicker value={value} currencies={list} onChange={onChange} disabled={disabled} />),
+  );
+}
+// Base UI는 열고 닫을 때 microtask·timeout으로 포커스·목록을 옮긴다
+const flush = () => act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)); });
+const trigger = () => document.querySelector<HTMLElement>('[role="combobox"][aria-haspopup="dialog"]')!;
+const search = () => document.querySelector<HTMLInputElement>('input[aria-label="통화 검색"]');
+const options = () => [...document.querySelectorAll<HTMLElement>('[role="option"]')];
+async function open() {
+  await act(async () => trigger().click());
+  await flush();
+}
+// 사용자가 친 글자로 보이도록 inputType을 준다. Base UI는 inputType이 없는 입력(자동 완성)에는 첫 결과를 강조하지 않는다
+async function type(value: string) {
+  const input = search()!;
   await act(async () => {
-    renderer = create(
-      <ExpenseCurrencyPicker
-        value="KRW"
-        currencies={currencies}
-        onChange={onChange}
-        disabled={disabled}
-      />,
-    );
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(input, value);
+    input.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText", data: value }));
   });
+  await flush();
+}
+async function key(target: Element, key: string) {
+  await act(async () => {
+    target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+  });
+  await flush();
 }
-afterEach(async () => {
-  if (renderer) await act(async () => renderer.unmount());
-});
-const trigger = () => renderer.root.findByProps({ "aria-haspopup": "dialog" });
-const options = () => renderer.root.findAllByProps({ role: "option" });
 
-it("opens search only from the dropdown and searches Korean names or currency codes", async () => {
+it("opens search only from the trigger and searches Korean names or currency codes", async () => {
   await mount();
-  expect(renderer.root.findAllByType("input")).toHaveLength(0);
-  await act(async () => trigger().props.onClick());
+  expect(trigger().textContent).toContain("KRW");
+  expect(search()).toBeNull();
+  await open();
+  expect(trigger().getAttribute("aria-expanded")).toBe("true");
+  expect(document.activeElement).toBe(search());
   expect(options()).toHaveLength(4);
-  const search = renderer.root.findByType("input");
-  await act(async () => search.props.onChange({ target: { value: "달러" } }));
-  expect(options()).toHaveLength(1);
-  expect(JSON.stringify(renderer.toJSON())).toContain("USD");
-  await act(async () => options()[0].props.onClick());
+  await type("달러");
+  expect(options().map((option) => option.textContent)).toEqual(["미국 달러USD"]);
+  await act(async () => options()[0].click());
+  await flush();
   expect(onChange).toHaveBeenCalledWith("USD");
-  expect(renderer.root.findAllByType("input")).toHaveLength(0);
-  await act(async () => trigger().props.onClick());
-  await act(async () =>
-    renderer.root
-      .findByType("input")
-      .props.onChange({ target: { value: " eur " } }),
-  );
+  expect(trigger().getAttribute("aria-expanded")).toBe("false");
+  await open();
+  await type(" eur ");
   expect(options()).toHaveLength(1);
-  await act(async () => options()[0].props.onClick());
+  await act(async () => options()[0].click());
   expect(onChange).toHaveBeenLastCalledWith("EUR");
 });
 
 it("does not allow unsupported currencies or change the selection on Escape", async () => {
   await mount();
-  await act(async () => trigger().props.onClick());
-  await act(async () =>
-    renderer.root
-      .findByType("input")
-      .props.onChange({ target: { value: "ZZZ" } }),
-  );
+  await open();
+  await type("ZZZ");
   expect(options()).toHaveLength(0);
-  expect(JSON.stringify(renderer.toJSON())).toContain("검색 결과가 없어요");
-  const preventDefault = vi.fn(),
-    stopPropagation = vi.fn();
-  await act(async () =>
-    renderer.root
-      .findByProps({ role: "dialog" })
-      .props.onKeyDown({ key: "Escape", preventDefault, stopPropagation }),
-  );
+  expect(document.querySelector('[role="dialog"]')!.textContent).toContain("검색 결과가 없어요.");
+  await key(search()!, "Escape");
   expect(onChange).not.toHaveBeenCalled();
-  expect(preventDefault).toHaveBeenCalled();
-  expect(stopPropagation).toHaveBeenCalled();
-  expect(renderer.root.findAllByType("input")).toHaveLength(0);
+  expect(trigger().getAttribute("aria-expanded")).toBe("false");
+  expect(trigger().textContent).toContain("KRW");
 });
 
-it("selects search results with the keyboard", async () => {
+it("selects the first search result with Enter", async () => {
   await mount();
-  await act(async () => trigger().props.onClick());
-  await act(async () =>
-    renderer.root
-      .findByType("input")
-      .props.onChange({ target: { value: "엔" } }),
-  );
-  await act(async () =>
-    renderer.root
-      .findByType("input")
-      .props.onKeyDown({
-        key: "Enter",
-        preventDefault() {},
-        nativeEvent: { isComposing: false },
-      }),
-  );
+  await open();
+  await type("엔");
+  expect(options().map((option) => option.textContent)).toEqual(["일본 엔화JPY"]);
+  await key(search()!, "Enter");
   expect(onChange).toHaveBeenCalledWith("JPY");
+  expect(trigger().getAttribute("aria-expanded")).toBe("false");
+});
+
+it("does not open while disabled", async () => {
+  await mount({ disabled: true });
+  await open();
+  expect(trigger().getAttribute("aria-expanded")).toBe("false");
+  expect(search()).toBeNull();
 });
+
+it("shows the form value on the trigger while the currency list is missing", async () => {
+  await mount({ list: [] });
+  expect(trigger().textContent).toContain("KRW");
+  await mount({ value: "", list: [] });
+  expect(trigger().textContent).toBe("통화 선택");
+});
+
diff --git a/src/components/expenses/ExpenseCurrencyPicker.tsx b/src/components/expenses/ExpenseCurrencyPicker.tsx
index 2697c257..ea77a8af 100644
--- a/src/components/expenses/ExpenseCurrencyPicker.tsx
+++ b/src/components/expenses/ExpenseCurrencyPicker.tsx
@@ -1,15 +1,31 @@
 "use client";
 
-import { useEffect, useId, useRef, useState } from "react";
-import { ChevronDownIcon } from "@/assets/icons";
-import { Check, Search } from "lucide-react";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/components/ui/combobox";
+import { Field } from "@/components/ui/field";
 import type { ExpenseCurrency } from "@/lib/api/rooms/expenses";
 
 const currencyNames = new Intl.DisplayNames(["ko"], { type: "currency" });
 function currencyName(code: string) {
   return currencyNames.of(code) ?? code;
 }
+// 검색어 앞뒤 공백은 무시하고, 통화 코드·한국어 이름에 포함되면 찾는다(대소문자 무시). Base UI 기본 필터는 공백을 다듬지 않는다
+function matchCurrency(item: ExpenseCurrency, query: string) {
+  return `${item.currency} ${currencyName(item.currency)}`
+    .toLocaleLowerCase()
+    .includes(query.trim().toLocaleLowerCase());
+}
 
+/** 통화 선택. 트리거를 누르면 팝업 안 검색 입력과 서버 통화 목록이 열린다(목록 밖 통화는 고를 수 없다) */
 export function ExpenseCurrencyPicker({
   value,
   currencies,
@@ -21,198 +37,56 @@ export function ExpenseCurrencyPicker({
   onChange: (currency: string) => void;
   disabled?: boolean;
 }) {
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState("");
-  const [active, setActive] = useState(0);
-  const root = useRef<HTMLDivElement>(null);
-  const trigger = useRef<HTMLButtonElement>(null);
-  const input = useRef<HTMLInputElement>(null);
-  const list = useRef<HTMLDivElement>(null);
-  const id = useId();
-  const isOpen = open && !disabled;
-  const query = search.trim().toLocaleLowerCase();
-  const results = currencies.filter((c) =>
-    (c.currency + " " + currencyName(c.currency))
-      .toLocaleLowerCase()
-      .includes(query),
-  );
-  const activeIndex = Math.min(active, results.length - 1);
-
-  function close(restoreFocus = true) {
-    setOpen(false);
-    if (restoreFocus) trigger.current?.focus();
-  }
-  function select(code: string) {
-    if (disabled) return;
-    onChange(code);
-    close();
-  }
-  useEffect(() => {
-    if (!isOpen) return;
-    input.current?.focus();
-    const element = root.current;
-    if (!element) return;
-    const outside = (event: PointerEvent) => {
-      if (!element.contains(event.target as Node)) setOpen(false);
-    };
-    element.ownerDocument.addEventListener("pointerdown", outside);
-    return () =>
-      element.ownerDocument.removeEventListener("pointerdown", outside);
-  }, [isOpen]);
-  useEffect(() => {
-    if (isOpen)
-      list.current?.children[activeIndex]?.scrollIntoView({ block: "nearest" });
-  }, [activeIndex, isOpen, search]);
-
+  // 통화 목록이 아직 없거나(조회 중·실패) 비용의 통화가 목록에 없어도 트리거에는 폼 값을 보인다(옛 동작).
+  // 대체 항목은 목록에 없어 고르거나 체크되지 않고, 트리거 글자와 같은 값 비교(통화 코드)에만 쓰인다
+  const selected =
+    currencies.find((currency) => currency.currency === value) ??
+    (value ? { currency: value, fractionDigits: 0, maximumAmount: "0" } : null);
   return (
-    <div
-      ref={root}
-      className="relative min-w-0"
-      onBlur={(event) => {
-        if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+    <Combobox
+      items={currencies}
+      value={selected}
+      onValueChange={(next) => {
+        if (next) onChange(next.currency);
       }}
+      itemToStringLabel={(currency: ExpenseCurrency) => currencyName(currency.currency)}
+      isItemEqualToValue={(a, b) => a.currency === b.currency}
+      filter={matchCurrency}
+      // 검색어를 입력하면 첫 결과를 강조해 Enter로 바로 고른다(옛 동작: 검색어가 바뀔 때마다 첫 결과가 활성)
+      autoHighlight
+      disabled={disabled}
     >
-      <span
-        id={id + "-label"}
-        className="block text-[12px] leading-4 font-medium"
-      >
-        통화
-      </span>
-      <button
-        ref={trigger}
-        type="button"
-        disabled={disabled}
-        aria-label={
-          value ? `통화 선택: ${currencyName(value)} (${value})` : "통화 선택"
-        }
-        aria-haspopup="dialog"
-        aria-expanded={isOpen}
-        aria-controls={isOpen ? id : undefined}
-        onClick={() => {
-          if (disabled) return;
-          setSearch("");
-          setActive(0);
-          setOpen(!isOpen);
-        }}
-        className="mt-1 flex h-12 w-full min-w-0 items-center gap-2 rounded-lg border border-border bg-fill-subtle px-3 py-2 text-left text-[14px] leading-5 font-medium cursor-pointer transition-colors enabled:hover:border-primary/40 enabled:hover:bg-gray-50 aria-expanded:border-primary/50 aria-expanded:bg-primary/5 focus-visible:outline-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        <span className="min-w-0 flex-1">
-          <span className="block truncate font-medium">{value || "통화 선택"}</span>
-          {value && (
-            <span className="block truncate text-body-xs-regular text-dark-gray mobile:hidden max-sm:hidden">
-              {currencyName(value)}
-            </span>
-          )}
-        </span>
-        <ChevronDownIcon size={20} aria-hidden="true" className="shrink-0 text-icon-subtle" />
-      </button>
-      {isOpen && (
-        <div
-          id={id}
-          role="dialog"
-          aria-label="통화 선택"
-          onKeyDown={(event) => {
-            if (event.key === "Escape") {
-              event.preventDefault();
-              event.stopPropagation();
-              close();
-            }
-          }}
-          className="absolute left-0 top-full z-30 mt-2 w-[min(20rem,calc(100vw-5rem))] max-w-[calc(100vw-5rem)] overflow-hidden rounded-2xl border border-gray-border bg-white shadow-xl"
-        >
-          <div className="p-3">
-            <div className="flex items-center gap-2 rounded-lg bg-gray-50 px-3">
-              <Search
-                size={16}
-                className="shrink-0 text-dark-gray"
-                aria-hidden="true"
-              />
-              <input
-                ref={input}
-                value={search}
-                autoComplete="off"
-                placeholder="통화 이름 또는 코드 검색"
-                aria-label="통화 검색"
-                role="combobox"
-                aria-expanded="true"
-                aria-autocomplete="list"
-                aria-controls={id + "-list"}
-                aria-activedescendant={
-                  results[activeIndex]
-                    ? id + "-" + results[activeIndex].currency
-                    : undefined
-                }
-                onChange={(event) => {
-                  setSearch(event.target.value);
-                  setActive(0);
-                }}
-                onKeyDown={(event) => {
-                  if (event.nativeEvent.isComposing) return;
-                  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-                    event.preventDefault();
-                    setActive(
-                      Math.max(
-                        0,
-                        Math.min(
-                          results.length - 1,
-                          activeIndex + (event.key === "ArrowDown" ? 1 : -1),
-                        ),
-                      ),
-                    );
-                  } else if (event.key === "Enter") {
-                    event.preventDefault();
-                    if (results[activeIndex])
-                      select(results[activeIndex].currency);
-                  }
-                }}
-                className="min-h-11 w-full min-w-0 bg-transparent text-body-m-regular outline-none"
-              />
-            </div>
-          </div>
-          <div
-            ref={list}
-            id={id + "-list"}
-            role="listbox"
-            aria-label="통화 목록"
-            className="max-h-52 overflow-y-auto overscroll-contain px-2 pb-2"
-          >
-            {results.map((c, index) => (
-              <button
-                key={c.currency}
-                id={id + "-" + c.currency}
-                type="button"
-                role="option"
-                aria-selected={c.currency === value}
-                tabIndex={-1}
-                onMouseDown={(event) => event.preventDefault()}
-                onClick={() => select(c.currency)}
-                className={`flex min-h-14 w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left cursor-pointer transition-colors hover:bg-primary/10 ${index === activeIndex ? "bg-primary/5" : ""}`}
-              >
-                <span className="min-w-0">
-                  <span className="block break-words text-body-s-emphasis mobile:text-body-xs-emphasis font-medium">
-                    {currencyName(c.currency)}
+      <Field>
+        <ComboboxLabel>통화</ComboboxLabel>
+        <ComboboxTrigger>
+          <ComboboxValue>
+            {(currency: ExpenseCurrency | null) =>
+              currency ? (
+                <>
+                  <span className="block truncate">{currency.currency}</span>
+                  {/* 좁은 칸(모바일 기기·좁은 화면)에서는 코드만 보인다. 비용 편집 폼이 이 조건에서 통화 칸을 줄인다 */}
+                  <span className="block truncate text-caption-m-regular text-text-subtle mobile:hidden max-sm:hidden">
+                    {currencyName(currency.currency)}
                   </span>
-                  <span className="block text-body-xs-regular text-dark-gray">
-                    {c.currency}
-                  </span>
-                </span>
-                {c.currency === value && (
-                  <Check
-                    size={17}
-                    className="shrink-0 text-primary"
-                    aria-hidden="true"
-                  />
-                )}
-              </button>
-            ))}
-          </div>
-          {!results.length && (
-            <p role="status" className="px-4 pb-4 text-body-s-regular mobile:text-body-xs-regular text-dark-gray">
-              검색 결과가 없어요.
-            </p>
+                </>
+              ) : (
+                "통화 선택"
+              )
+            }
+          </ComboboxValue>
+        </ComboboxTrigger>
+      </Field>
+      <ComboboxContent aria-label="통화 선택" className="w-[min(20rem,calc(100vw-5rem))]">
+        <ComboboxInput placeholder="통화 이름 또는 코드 검색" aria-label="통화 검색" />
+        <ComboboxList>
+          {(currency: ExpenseCurrency) => (
+            <ComboboxItem key={currency.currency} value={currency} description={currency.currency}>
+              {currencyName(currency.currency)}
+            </ComboboxItem>
           )}
-        </div>
-      )}
-    </div>
+        </ComboboxList>
+        <ComboboxEmpty>검색 결과가 없어요.</ComboboxEmpty>
+      </ComboboxContent>
+    </Combobox>
   );
 }
diff --git a/src/components/expenses/ExpenseDialog.drag.test.tsx b/src/components/expenses/ExpenseDialog.drag.test.tsx
deleted file mode 100644
index 96b91443..00000000
--- a/src/components/expenses/ExpenseDialog.drag.test.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-// @vitest-environment jsdom
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, expect, it, vi } from "vitest";
-import { ExpenseDialog } from "./ExpenseDialog";
-
-let root: Root;
-let container: HTMLDivElement;
-const close = vi.fn();
-const capture = vi.fn();
-beforeEach(() => {
-  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
-  vi.stubGlobal("matchMedia", () => ({ matches: true }));
-  document.documentElement.classList.add("is-mobile-device");
-  HTMLDialogElement.prototype.showModal = function () { this.open = true; };
-  HTMLDialogElement.prototype.close = function () { this.open = false; };
-  HTMLElement.prototype.setPointerCapture = capture;
-  HTMLElement.prototype.hasPointerCapture = () => true;
-  HTMLElement.prototype.releasePointerCapture = vi.fn();
-  close.mockReset(); capture.mockReset();
-  container = document.createElement("div");
-  document.body.append(container);
-  root = createRoot(container);
-  act(() => root.render(<ExpenseDialog title="정산" onClose={close}><input aria-label="내용" /></ExpenseDialog>));
-});
-afterEach(() => { act(() => root.unmount()); container.remove(); document.documentElement.className = ""; vi.unstubAllGlobals(); });
-function pointer(target: Element, type: string, y: number, x = 20) {
-  const event = new Event(type, { bubbles: true });
-  Object.assign(event, { pointerId: 1, isPrimary: true, button: 0, clientX: x, clientY: y });
-  act(() => target.dispatchEvent(event));
-}
-function drag(distance: number, end = "pointerup", target: Element = container.querySelector("header")!) {
-  pointer(target, "pointerdown", 20);
-  pointer(target, "pointermove", 20 + distance);
-  pointer(target, end, 20 + distance);
-}
-it("follows a downward header gesture and dismisses after a deliberate drag", () => {
-  const header = container.querySelector("header")!;
-  pointer(header, "pointerdown", 20);
-  pointer(header, "pointermove", 140);
-  expect(container.querySelector("dialog")!.style.transform).toBe("translateY(120px)");
-  pointer(header, "pointerup", 140);
-  expect(close).toHaveBeenCalledOnce();
-});
-it.each([[30, "pointerup"], [130, "pointercancel"], [-100, "pointerup"]])("snaps back for %s px and %s", (distance, end) => {
-  drag(Number(distance), String(end));
-  expect(close).not.toHaveBeenCalled();
-  expect(container.querySelector("dialog")!.style.transform).not.toContain("translateY(");
-});
-it("ignores desktop drags even on narrow screens and supports mobile devices", () => {
-  document.documentElement.classList.remove("is-mobile-device");
-  drag(130);
-  expect(close).not.toHaveBeenCalled();
-  document.documentElement.classList.add("is-mobile-device");
-  drag(130);
-  expect(close).toHaveBeenCalledOnce();
-});
-it("does not intercept buttons or form input gestures", () => {
-  drag(130, "pointerup", container.querySelector("button")!);
-  drag(130, "pointerup", container.querySelector("input")!);
-  expect(close).not.toHaveBeenCalled();
-  expect(capture).not.toHaveBeenCalled();
-});
-it("ignores a horizontal gesture", () => {
-  const header = container.querySelector("header")!;
-  pointer(header, "pointerdown", 20);
-  pointer(header, "pointermove", 140, 240);
-  pointer(header, "pointerup", 140, 240);
-  expect(close).not.toHaveBeenCalled();
-});
-
-// Only data dependencies are stubbed; editor rendering and pointer handling stay real.
-const editorState = vi.hoisted(() => ({ busy: false }));
-vi.mock("./ExpenseProvider", () => ({ useExpenseContext: () => ({
-  roomId: "room", currentUserId: 1, canManage: true, busy: editorState.busy,
-  members: [{ userId: 1, nickname: "나", status: "ACTIVE", role: "MEMBER" }],
-  memberStatus: "success", schedules: [], schedulesReady: true,
-  currencies: { isSuccess: true, data: [{ currency: "KRW", fractionDigits: 0, maximumAmount: "999999999999999" }] },
-}) }));
-vi.mock("@/hooks/useRooms", () => ({ useSchedulePlanPlaces: () => ({ data: [], isSuccess: true }) }));
-import { ExpenseEditor } from "./ExpenseEditor";
-
-it("never dismisses the editor when a save is pending, including a save starting mid-drag", () => {
-  editorState.busy = false;
-  act(() => root.render(<ExpenseEditor initial={{}} onClose={close} />));
-  const title = container.querySelector("h2")!;
-  pointer(title, "pointerdown", 20);
-  pointer(title, "pointermove", 140);
-  editorState.busy = true;
-  act(() => root.render(<ExpenseEditor initial={{}} onClose={close} />));
-  pointer(title, "pointerup", 140);
-  expect(close).not.toHaveBeenCalled();
-  expect(container.querySelector("dialog")!.style.transform).toBe("");
-  drag(130, "pointerup", title);
-  expect(close).not.toHaveBeenCalled();
-  editorState.busy = false;
-  act(() => root.render(<ExpenseEditor initial={{}} onClose={close} />));
-  drag(130, "pointerup", title);
-  expect(close).toHaveBeenCalledOnce();
-});
-
-it.each(["pointerup", "pointercancel"])("does not restart the editor entrance animation after %s", (end) => {
-  editorState.busy = false;
-  act(() => root.render(<ExpenseEditor initial={{}} onClose={close} />));
-  drag(30, end, container.querySelector("h2")!);
-  expect(container.querySelector("dialog")!.style.animation).toBe("none");
-  expect(close).not.toHaveBeenCalled();
-});
-it("snaps back without animation when reduced motion is requested", () => {
-  vi.stubGlobal("matchMedia", (query: string) => ({ matches: query.includes("reduced-motion") || query.includes("max-width") }));
-  drag(30);
-  expect(container.querySelector("dialog")!.style.transition).toBe("none");
-});
-
-import { ExpenseScopePanel } from "./ExpenseScopePanel";
-function mountScope() {
-  act(() => root.render(<ExpenseScopePanel
-    scope={{ scheduleId: 1, label: "1일차" }} roomId="room" expenses={[]}
-    isPending={false} isError={false} canManage busy={false}
-    onAdd={() => {}} onEdit={() => {}} onDelete={async () => {}} onRetry={() => {}} onClose={close}
-  />));
-}
-it("dismisses the day/place list sheet by dragging its header", () => {
-  mountScope();
-  drag(130);
-  expect(close).toHaveBeenCalledOnce();
-});
-it("leaves the desktop scope panel transform untouched", () => {
-  document.documentElement.classList.remove("is-mobile-device");
-  mountScope();
-  drag(130);
-  expect(close).not.toHaveBeenCalled();
-  expect(container.querySelector("dialog")!.style.transform).toBe("");
-});
diff --git a/src/components/expenses/ExpenseDialog.tsx b/src/components/expenses/ExpenseDialog.tsx
index 58c04c1d..96578ba7 100644
--- a/src/components/expenses/ExpenseDialog.tsx
+++ b/src/components/expenses/ExpenseDialog.tsx
@@ -1,92 +1,59 @@
 "use client";
-import { useSheetDrag } from "@/components/mobile/useSheetDrag";
-import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
 
-import { useEffect, useId, useRef, type ReactNode } from "react";
-import { CloseIcon } from "@/assets/icons";
+import type { ReactNode } from "react";
 
-/** Native modal focus containment, with a sheet surface on small screens. */
+import {
+  ResponsiveDialog,
+  ResponsiveDialogBody,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+} from "@/components/ui/responsive-dialog";
+import { useMobileView } from "@/contexts/MobileViewContext";
+
+/**
+ * 가계부 읽기 전용 대화상자(정산 요약). PC는 Dialog(720), 모바일 기기는 아래 시트(ResponsiveDialog).
+ * 조건부로 마운트해 열고, 닫기 요청(Esc·딤·X·스와이프)은 onClose로 받는다.
+ */
 export function ExpenseDialog({
   title,
   onClose,
   children,
   footer,
-  settlement = false,
   description,
 }: Readonly<{
   title: string;
   onClose: () => void;
   children: ReactNode;
   footer?: ReactNode;
-  settlement?: boolean;
+  /** 시트에서만 제목 아래 보조 줄로 보인다(지금 화면과 같음) */
   description?: ReactNode;
 }>) {
-  const sheetDrag = useSheetDrag(onClose);
-  const ref = useRef<HTMLDialogElement>(null);
-  const titleId = useId();
-  const heading = useRef<HTMLHeadingElement>(null);
-  useEffect(() => {
-    const element = ref.current;
-    const trigger = element?.ownerDocument.activeElement;
-    element?.showModal();
-    heading.current?.focus({ preventScroll: true });
-    return () => {
-      element?.close();
-      if (trigger && trigger instanceof HTMLElement && trigger.isConnected)
-        trigger.focus();
-    };
-  }, []);
-  useEffect(() => {
-    const element = ref.current;
-    const dismissBackdrop = (event: MouseEvent) => {
-      if (event.target === element) onClose();
-    };
-    element?.addEventListener("click", dismissBackdrop);
-    return () => element?.removeEventListener("click", dismissBackdrop);
-  }, [onClose]);
+  const { isMobileDevice } = useMobileView();
   return (
-    <dialog
-      ref={ref}
-      style={sheetDrag.surfaceStyle}
-      aria-labelledby={titleId}
-      onCancel={(event) => {
-        event.preventDefault();
-        onClose();
+    <ResponsiveDialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
       }}
-      className={`fixed inset-0 m-auto ${settlement ? "mobile:h-[calc(100dvh-92px)] mobile:max-h-[calc(100dvh-92px)]" : "mobile:h-[70dvh] mobile:max-h-[70dvh]"} max-h-[calc(100dvh-3rem)] w-[calc(100%-2rem)] max-w-[720px] overflow-hidden rounded-xl border-0 bg-white p-0 text-text shadow-xl backdrop:bg-black/40 mobile:backdrop:bg-[#0f1724]/35 mobile:backdrop:animate-in mobile:backdrop:fade-in-0 mobile:backdrop:duration-200 mobile:animate-in mobile:slide-in-from-bottom mobile:duration-200 mobile:mb-0 mobile:w-full mobile:max-w-none mobile:rounded-b-none mobile:rounded-t-[20px]`}
     >
-      <div className="flex max-h-[calc(100dvh-3rem)] flex-col mobile:h-full mobile:max-h-full">
-        <BottomSheetDragHandle drag={sheetDrag} className="mobile:pt-3">
-        <div
-          aria-hidden
-          className="mx-auto hidden h-1 w-9 shrink-0 rounded-[2px] bg-border-subtle mobile:block"
-        />
-        <header className="flex shrink-0 items-center justify-between px-8 pt-8 pb-6 mobile:px-5 mobile:pt-3 mobile:pb-3">
-          <div>
-          <h2 ref={heading} id={titleId} tabIndex={-1} className="focus:outline-none text-[24px] leading-[34px] font-bold mobile:text-title-m mobile:leading-7">
-            {title}
-          </h2>
-          {description && <p className="mt-1 hidden text-[12px] leading-5 text-text-subtle mobile:block">{description}</p>}
-          </div>
-          <button
-            type="button"
-            aria-label={`${title} 닫기`}
-            onClick={onClose}
-            className={`cursor-pointer flex size-6 items-center justify-center rounded-md mobile:-my-2.5 mobile:-mr-2.5 mobile:size-11 text-text-subtle hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary ${footer ? "mobile:hidden" : ""}`}
-          >
-            <CloseIcon size={24} />
-          </button>
-        </header>
-        </BottomSheetDragHandle>
-        <div className={`flex min-h-0 flex-col overflow-y-auto mobile:flex-1 overscroll-contain px-8 pb-6 [scrollbar-gutter:auto] mobile:px-5 ${footer ? "" : "mobile:pb-[max(1.5rem,env(safe-area-inset-bottom))]"}`}>
-          {children}
-        </div>
-        {footer && (
-          <footer className={`shrink-0 px-8 pb-8 mobile:px-5 mobile:pt-3 mobile:pb-[max(1.25rem,env(safe-area-inset-bottom))] ${settlement ? "" : "border-t border-border-subtle pt-4"}`}>
-            {footer}
-          </footer>
-        )}
-      </div>
-    </dialog>
+      <ResponsiveDialogContent
+        size="xl"
+        // 정산 요약 시트는 상단 내비 아래까지 채운다(Figma Bottom Sheet Height=BelowNav)
+        drawerSize="belowNav"
+        closeLabel={`${title} 닫기`}
+      >
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>{title}</ResponsiveDialogTitle>
+          {description && isMobileDevice ? (
+            <ResponsiveDialogDescription>{description}</ResponsiveDialogDescription>
+          ) : null}
+        </ResponsiveDialogHeader>
+        <ResponsiveDialogBody>{children}</ResponsiveDialogBody>
+        {footer ? <ResponsiveDialogFooter>{footer}</ResponsiveDialogFooter> : null}
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
   );
 }
diff --git a/src/components/expenses/ExpenseEditor.pending.test.tsx b/src/components/expenses/ExpenseEditor.pending.test.tsx
index 242486d6..94eba2f3 100644
--- a/src/components/expenses/ExpenseEditor.pending.test.tsx
+++ b/src/components/expenses/ExpenseEditor.pending.test.tsx
@@ -1,16 +1,19 @@
-import { act, create, type ReactTestInstance, type ReactTestRenderer } from "react-test-renderer";
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import type { Expense } from "@/lib/api/rooms/expenses";
 import type { RoomMember } from "@/lib/api/rooms/types";
 import type { MemberQueryStatus } from "@/lib/expenses/expense-policy";
 import { ExpenseEditor } from "./ExpenseEditor";
-import { ExpenseRolePicker } from "./ExpenseViews";
 
 const mocks = vi.hoisted(() => ({ save: vi.fn(), close: vi.fn(), state: {} }));
 vi.mock("./ExpenseProvider", () => ({ useExpenseContext: () => mocks.state }));
+vi.mock("@/contexts/MobileViewContext", () => ({ useMobileView: () => ({ isMobileDevice: false }) }));
 vi.mock("@/hooks/useRooms", () => ({
   useSchedulePlanPlaces: () => ({ data: [], isSuccess: true }),
 }));
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 
 const members: RoomMember[] = [
   [1, "A", "ACTIVE"],
@@ -38,12 +41,13 @@ const base: Expense = {
   payerUserIds: [1, 2],
   participantUserIds: [1],
   version: 0,
-  name: null, createdAt: "",
+  name: null,
+  createdAt: "",
   updatedAt: "",
 };
-let renderer: ReactTestRenderer;
+let host: HTMLDivElement;
+let root: Root;
 beforeEach(() => {
-  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
   mocks.save.mockReset();
   mocks.close.mockReset();
   mocks.state = {
@@ -60,29 +64,70 @@ beforeEach(() => {
     busy: false,
     save: mocks.save,
   };
+  // 칸 오류를 보이는 곳까지 스크롤한다. jsdom에는 scrollIntoView가 없다
+  Element.prototype.scrollIntoView = vi.fn();
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
 });
 afterEach(async () => {
-  if (renderer) await act(async () => renderer.unmount());
-  vi.unstubAllGlobals();
+  await act(async () => root.unmount());
+  host.remove();
+  document.body.replaceChildren();
+  Reflect.deleteProperty(Element.prototype, "scrollIntoView");
 });
 async function mount(expense: Expense | undefined = base) {
-  await act(async () => {
-    renderer = create(<ExpenseEditor initial={{ expense }} onClose={mocks.close} />);
-  });
+  await act(async () => root.render(<ExpenseEditor initial={{ expense }} onClose={mocks.close} />));
+}
+// Base UI는 열고 닫을 때 microtask·timeout으로 포커스를 옮긴다
+const flush = () => act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)); });
+const dialog = () => document.querySelector<HTMLElement>('[role="dialog"]')!;
+const form = () => dialog().querySelector("form")!;
+type Role = "결제자" | "부담자";
+function picker(title: Role) {
+  return [...dialog().querySelectorAll<HTMLFieldSetElement>("fieldset[aria-labelledby]")].find(
+    (fieldset) => document.getElementById(fieldset.getAttribute("aria-labelledby")!)?.firstElementChild?.textContent === title,
+  )!;
 }
-function picker(title: "결제자" | "부담자") {
-  return renderer.root.findAllByType(ExpenseRolePicker).find((p) => p.props.title === title)!;
+const text = (title: Role) => picker(title).textContent ?? "";
+// 체크박스 행(고를 수 있는 멤버·알 수 없는 멤버)의 선택된 사람
+function checkedIds(title: Role) {
+  return [...picker(title).querySelectorAll("label")]
+    .filter((row) => row.querySelector('[role="checkbox"]')?.getAttribute("aria-checked") === "true")
+    .map((row) => Number(row.querySelector("[data-user-id]")!.getAttribute("data-user-id")));
 }
-function text(node: ReactTestInstance | string): string {
-  return typeof node === "string" ? node : node.children.map(text).join("");
+// 제목 줄의 '선택 N명'. 승인 대기 멤버는 체크박스 없이 선택에 남는다
+const selectedCount = (title: Role) => Number(/선택 (\d+)명/.exec(text(title))![1]);
+const checkboxes = (title: Role) => picker(title).querySelectorAll('[role="checkbox"]');
+function checkboxOf(title: Role, label: string) {
+  return [...picker(title).querySelectorAll("label")]
+    .find((row) => row.textContent?.includes(label))!
+    .querySelector<HTMLElement>('[role="checkbox"]')!;
 }
-function removeButton(title: "결제자" | "부담자") {
-  const buttons = picker(title).findAllByType("button").filter((b) => text(b) === "제외");
+function removeButton(title: Role) {
+  const buttons = [...picker(title).querySelectorAll<HTMLButtonElement>("button")].filter((node) => node.textContent === "제외");
   expect(buttons).toHaveLength(1);
   return buttons[0];
 }
+// 결제자·부담자를 함께 검증한 오류는 두 칸 아래 하나로 보인다
+function roleError() {
+  return picker("결제자").parentElement!.parentElement!.querySelector(':scope > [data-slot="field-error"]')?.textContent ?? null;
+}
+const formMessage = () => form().querySelector(':scope > p[role="alert"]')?.textContent ?? null;
+const saveButton = () => dialog().querySelector<HTMLButtonElement>('button[type="submit"]')!;
+async function click(element: HTMLElement) {
+  await act(async () => element.click());
+  await flush();
+}
 async function submit() {
-  await act(async () => renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }));
+  await click(saveButton());
+}
+async function type(element: HTMLInputElement | HTMLTextAreaElement, value: string) {
+  const prototype = element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(prototype, "value")!.set!.call(element, value);
+    element.dispatchEvent(new Event("input", { bubbles: true }));
+  });
 }
 
 it.each(["결제자", "부담자"] as const)(
@@ -91,17 +136,19 @@ it.each(["결제자", "부담자"] as const)(
     const expense = title === "결제자" ? base : { ...base, payerUserIds: [1], participantUserIds: [1, 2] };
     const source = structuredClone(expense);
     await mount(expense);
-    expect(picker(title).props.selected).toEqual([1, 2]);
-    expect(text(picker(title))).toContain("B");
-    expect(text(picker(title))).toContain("승인 대기");
+    expect(checkedIds(title)).toEqual([1]);
+    expect(selectedCount(title)).toBe(2);
+    expect(text(title)).toContain("B");
+    expect(text(title)).toContain("승인 대기");
     // A and LEFT C are checkboxes; pending B is removal-only and new pending D is absent.
-    expect(picker(title).findAllByType("input")).toHaveLength(2);
-    expect(text(picker(title))).not.toContain("D");
-    expect(text(picker(title === "결제자" ? "부담자" : "결제자"))).not.toContain("승인 대기");
-    await act(async () => removeButton(title).props.onClick());
-    expect(picker(title).props.selected).toEqual([1]);
-    expect(text(picker(title))).not.toContain("승인 대기");
-    expect(picker(title).findAllByType("button")).toHaveLength(0);
+    expect(checkboxes(title)).toHaveLength(2);
+    expect(text(title)).not.toContain("D");
+    expect(text(title === "결제자" ? "부담자" : "결제자")).not.toContain("승인 대기");
+    await click(removeButton(title));
+    expect(checkedIds(title)).toEqual([1]);
+    expect(selectedCount(title)).toBe(1);
+    expect(text(title)).not.toContain("승인 대기");
+    expect(picker(title).querySelectorAll("button")).toHaveLength(0);
     await submit();
     expect(mocks.save).toHaveBeenCalledWith({
       expenseGroup: "PREPARATION", scheduleId: null, scheduleItemId: null,
@@ -114,75 +161,73 @@ it.each(["결제자", "부담자"] as const)(
 
 it.each(["memo", "amount", "unchanged"])("retains PENDING and rejects %s edits until explicit removal", async (edit) => {
   await mount();
-  if (edit === "memo") {
-    await act(async () => renderer.root.findByType("textarea").props.onChange({ target: { value: "edited" } }));
-  } else if (edit === "amount") {
-    await act(async () => renderer.root.findAllByType("input").find((i) => i.props.inputMode === "decimal")!.props.onChange({ target: { value: "200" } }));
-  }
+  if (edit === "memo") await type(dialog().querySelector("textarea")!, "edited");
+  else if (edit === "amount") await type(dialog().querySelector<HTMLInputElement>('input[inputmode="decimal"]')!, "200");
   await submit();
   expect(mocks.save).not.toHaveBeenCalled();
-  expect(picker("결제자").props.selected).toEqual([1, 2]);
-  expect(text(renderer.root.findByProps({ role: "alert" }))).toContain("선택할 수 없는 멤버");
-  expect(text(picker("결제자"))).toContain("승인 대기");
+  expect(selectedCount("결제자")).toBe(2);
+  expect(roleError()).toContain("선택할 수 없는 멤버");
+  expect(formMessage()).toBeNull();
+  expect(text("결제자")).toContain("승인 대기");
 });
 
 it("removes the same PENDING person independently from each role", async () => {
   await mount({ ...base, participantUserIds: [1, 2] });
-  await act(async () => removeButton("결제자").props.onClick());
-  expect(picker("결제자").props.selected).toEqual([1]);
-  expect(picker("부담자").props.selected).toEqual([1, 2]);
+  await click(removeButton("결제자"));
+  expect(selectedCount("결제자")).toBe(1);
+  expect(selectedCount("부담자")).toBe(2);
+  expect(text("부담자")).toContain("승인 대기");
   await submit();
   expect(mocks.save).not.toHaveBeenCalled();
-  await act(async () => removeButton("부담자").props.onClick());
+  await click(removeButton("부담자"));
   await submit();
   expect(mocks.save).toHaveBeenCalledWith(expect.objectContaining({ payerUserIds: [1], participantUserIds: [1] }), 10, 0);
 });
 
 it.each(["결제자", "부담자"] as const)("reports a clear error when the last %s is removed", async (title) => {
   await mount({ ...base, payerUserIds: title === "결제자" ? [2] : [1], participantUserIds: title === "부담자" ? [2] : [1] });
-  await act(async () => removeButton(title).props.onClick());
-  expect(picker(title).props.selected).toEqual([]);
+  await click(removeButton(title));
+  expect(selectedCount(title)).toBe(0);
   await submit();
   expect(mocks.save).not.toHaveBeenCalled();
-  expect(text(renderer.root.findByProps({ role: "alert" }))).toContain("각각 한 명 이상");
+  expect(roleError()).toContain("각각 한 명 이상");
 });
 
 it("cancels explicit removal without mutating source and restores it on reopen", async () => {
   const expense = structuredClone(base);
   await mount(expense);
-  await act(async () => removeButton("결제자").props.onClick());
-  await act(async () => renderer.root.findAllByType("button").find((b) => text(b) === "취소")!.props.onClick());
+  await click(removeButton("결제자"));
+  await click([...dialog().querySelectorAll<HTMLButtonElement>("button")].find((node) => node.textContent === "취소")!);
   expect(mocks.close).toHaveBeenCalledOnce();
   expect(mocks.save).not.toHaveBeenCalled();
   expect(expense).toEqual(base);
-  await act(async () => renderer.unmount());
+  await act(async () => root.render(null));
   await mount(expense);
-  expect(picker("결제자").props.selected).toEqual([1, 2]);
-  expect(text(picker("결제자"))).toContain("승인 대기");
+  expect(selectedCount("결제자")).toBe(2);
+  expect(text("결제자")).toContain("승인 대기");
 });
 
 it("never offers PENDING in a new expense", async () => {
-  await act(async () => { renderer = create(<ExpenseEditor initial={{}} onClose={mocks.close} />); });
+  await act(async () => root.render(<ExpenseEditor initial={{}} onClose={mocks.close} />));
   for (const title of ["결제자", "부담자"] as const) {
-    expect(picker(title).props.selected).toEqual([]);
-    expect(picker(title).findAllByType("input")).toHaveLength(2);
-    expect(text(picker(title))).not.toContain("B");
-    expect(text(picker(title))).not.toContain("D");
-    expect(picker(title).findAllByType("button")).toHaveLength(0);
+    expect(selectedCount(title)).toBe(0);
+    expect(checkboxes(title)).toHaveLength(2);
+    expect(text(title)).not.toContain("B");
+    expect(text(title)).not.toContain("D");
+    expect(picker(title).querySelectorAll("button")).toHaveLength(0);
   }
 });
 
 it("preserves unknown roles, disallows copying/readding unknowns, and still selects LEFT", async () => {
   await mount({ ...base, payerUserIds: [1, 99], participantUserIds: [1, 98] });
-  expect(text(picker("결제자"))).toContain("(알 수 없음)");
-  expect(text(picker("결제자"))).not.toContain("#98");
-  expect(text(picker("부담자"))).not.toContain("#99");
+  expect(text("결제자")).toContain("(알 수 없음)");
+  expect(text("결제자")).not.toContain("#98");
+  expect(text("부담자")).not.toContain("#99");
   await submit();
   expect(mocks.save).toHaveBeenLastCalledWith(expect.objectContaining({ payerUserIds: [1, 99], participantUserIds: [1, 98] }), 10, 0);
-  const labels = picker("결제자").findAllByType("label");
-  await act(async () => labels.find((l) => text(l).includes("#99"))!.findByType("input").props.onChange({ target: { checked: false } }));
-  expect(text(picker("결제자"))).not.toContain("#99");
-  await act(async () => labels.find((l) => text(l).includes("나간 멤버"))!.findByType("input").props.onChange({ target: { checked: true } }));
+  await click(checkboxOf("결제자", "#99"));
+  expect(text("결제자")).not.toContain("#99");
+  await click(checkboxOf("결제자", "나간 멤버"));
   await submit();
   expect(mocks.save).toHaveBeenLastCalledWith(expect.objectContaining({ payerUserIds: [1, 3], participantUserIds: [1, 98] }), 10, 0);
 });
@@ -190,15 +235,19 @@ it("preserves unknown roles, disallows copying/readding unknowns, and still sele
 it.each(["pending", "error"] as MemberQueryStatus[])("does not infer membership or alter selections during member %s", async (memberStatus) => {
   await mount();
   mocks.state = { ...mocks.state, members: [], memberStatus };
-  await act(async () => renderer.update(<ExpenseEditor initial={{ expense: base }} onClose={mocks.close} />));
-  expect(renderer.root.findAllByType(ExpenseRolePicker)).toHaveLength(0);
-  for (const label of ["승인 대기", "(알 수 없음)", "나간 멤버", "제외"]) expect(text(renderer.root)).not.toContain(label);
-  expect(renderer.root.findByProps({ type: "submit" }).props.disabled).toBe(true);
-  await submit();
+  await act(async () => root.render(<ExpenseEditor initial={{ expense: base }} onClose={mocks.close} />));
+  expect(dialog().querySelectorAll("fieldset[aria-labelledby]")).toHaveLength(0);
+  for (const label of ["승인 대기", "(알 수 없음)", "나간 멤버", "제외"]) expect(dialog().textContent).not.toContain(label);
+  expect(saveButton().disabled).toBe(true);
+  // 저장 버튼이 비활성이어도 제출 경로(Enter 등)가 저장하지 않는다
+  await act(async () => form().requestSubmit());
+  await flush();
   expect(mocks.save).not.toHaveBeenCalled();
   mocks.state = { ...mocks.state, members, memberStatus: "success" };
-  await act(async () => renderer.update(<ExpenseEditor initial={{ expense: base }} onClose={mocks.close} />));
-  expect(picker("결제자").props.selected).toEqual([1, 2]);
-  expect(picker("부담자").props.selected).toEqual([1]);
-  expect(text(picker("결제자"))).toContain("승인 대기");
+  await act(async () => root.render(<ExpenseEditor initial={{ expense: base }} onClose={mocks.close} />));
+  expect(checkedIds("결제자")).toEqual([1]);
+  expect(selectedCount("결제자")).toBe(2);
+  expect(checkedIds("부담자")).toEqual([1]);
+  expect(selectedCount("부담자")).toBe(1);
+  expect(text("결제자")).toContain("승인 대기");
 });
diff --git a/src/components/expenses/ExpenseEditor.test.tsx b/src/components/expenses/ExpenseEditor.test.tsx
index b1789d1a..a6577c76 100644
--- a/src/components/expenses/ExpenseEditor.test.tsx
+++ b/src/components/expenses/ExpenseEditor.test.tsx
@@ -1,23 +1,23 @@
+// @vitest-environment jsdom
 // Place-cache subscriptions are covered by ExpensePlaceLabel.test.tsx.
 vi.mock("./ExpensePlaceLabel", () => ({ ExpensePlaceLabel: () => null }));
 vi.mock("@/lib/api/config", () => ({ API_BASE: "http://fixture" }));
-import { ExpenseSelect } from "./ExpenseSelect";
-import { act, create, type ReactTestRenderer } from "react-test-renderer";
+import { act, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { ExpenseApiError, type Expense } from "@/lib/api/rooms/expenses";
 import { ExpenseEditor, type ExpenseEntry } from "./ExpenseEditor";
-import { ExpenseCurrencyPicker } from "./ExpenseCurrencyPicker";
-import { ExpenseRolePicker } from "./ExpenseViews";
-beforeEach(() => vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true));
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 const mocks = vi.hoisted(() => ({
   save: vi.fn(),
   readLatest: vi.fn(),
   close: vi.fn(),
   state: null as unknown,
+  mobile: false,
 }));
-vi.mock("./ExpenseProvider", () => ({
-  useExpenseContext: () => mocks.state,
-}));
+vi.mock("./ExpenseProvider", () => ({ useExpenseContext: () => mocks.state }));
+vi.mock("@/contexts/MobileViewContext", () => ({ useMobileView: () => ({ isMobileDevice: mocks.mobile }) }));
 vi.mock("@/hooks/useRooms", () => ({
   useSchedulePlanPlaces: () => ({
     data: [{ itemId: 100, title: "경복궁" }],
@@ -30,830 +30,708 @@ const currencies = [
   { currency: "USD", fractionDigits: 2, maximumAmount: "999999999999999.99" },
   { currency: "KRW", fractionDigits: 0, maximumAmount: "999999999999999" },
 ];
+const base: Expense = {
+  expenseGroup: "TRIP_DAY",
+  scheduleId: 10,
+  scheduleItemId: 100,
+  totalAmount: "10.01",
+  currency: "USD",
+  category: "OTHER",
+  memo: "",
+  payerUserIds: [1, 99],
+  participantUserIds: [1],
+  id: 10,
+  version: 0,
+  name: null,
+  createdAt: "",
+  updatedAt: "",
+};
+const categories = [
+  ["FLIGHT", "항공"],
+  ["ACCOMMODATION", "숙박"],
+  ["FOOD", "식비"],
+  ["TRANSPORT", "교통"],
+  ["SHOPPING", "쇼핑"],
+  ["SIGHTSEEING", "관광"],
+  ["OTHER", "기타"],
+] as const;
 
-function stubLocalStorage() {
-  const entries = new Map<string, string>();
-  const storage = {
-    get length() { return entries.size; },
-    key(index: number) { return [...entries.keys()][index] ?? null; },
-    getItem(key: string) { return entries.get(key) ?? null; },
-    setItem(key: string, value: string) { entries.set(key, value); },
-    removeItem(key: string) { entries.delete(key); },
-    clear() { entries.clear(); },
+let host: HTMLDivElement;
+let root: Root;
+// 오류 문장을 보이는 곳까지 스크롤하는 동작을 본다. jsdom에는 scrollIntoView가 없다
+const scrollIntoView = vi.fn();
+beforeEach(() => {
+  localStorage.clear();
+  mocks.mobile = false;
+  scrollIntoView.mockReset();
+  Element.prototype.scrollIntoView = scrollIntoView;
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+  document.body.replaceChildren();
+  vi.restoreAllMocks();
+  Reflect.deleteProperty(Element.prototype, "scrollIntoView");
+  Reflect.deleteProperty(window, "matchMedia");
+});
+
+function contextState(original: Expense | null) {
+  return {
+    currentUserId: 1,
+    roomId: "r",
+    members: [{ userId: 1, status: "ACTIVE", role: "HOST", nickname: "하나", profileImageUrl: null }],
+    memberStatus: "success",
+    canManage: true,
+    schedules: [
+      { scheduleId: 10, dayNumber: 1 },
+      { scheduleId: 11, dayNumber: 2 },
+    ],
+    schedulesReady: true,
+    currencies: { data: currencies, isSuccess: true, isError: false },
+    save: mocks.save,
+    readLatest: mocks.readLatest,
+    list: { isSuccess: true, data: original ? [original] : [] },
+    busy: false,
   };
-  vi.stubGlobal("window", { localStorage: storage, matchMedia: () => ({ matches: true }) });
-  return entries;
+}
+function setState(patch: object) {
+  mocks.state = { ...(mocks.state as object), ...patch };
+}
+async function render(node: ReactNode) {
+  await act(async () => root.render(node));
+}
+async function mount(original: Expense | null = base, entry: ExpenseEntry = {}) {
+  mocks.save.mockReset();
+  mocks.readLatest.mockReset();
+  mocks.close.mockReset();
+  mocks.state = contextState(original);
+  await render(null);
+  await render(<ExpenseEditor initial={original ? { expense: original } : entry} onClose={mocks.close} />);
+}
+// 새 비용 편집기를 다시 연다(닫았다 다시 연 것과 같다). 저장된 통화 선호를 연 순간에 읽는다
+async function reopenNewEditor() {
+  await render(null);
+  await render(<ExpenseEditor initial={{}} onClose={mocks.close} />);
 }
 
+// Base UI는 열고 닫을 때 microtask·timeout으로 포커스·목록을 옮긴다
+const flush = () => act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)); });
+const dialog = () => document.querySelector<HTMLElement>('[role="dialog"][data-slot="dialog-content"]');
+const form = () => dialog()!.querySelector("form")!;
+const button = (name: string) =>
+  [...dialog()!.querySelectorAll<HTMLButtonElement>("button")].find(
+    (node) => node.getAttribute("aria-label") === name || node.textContent === name,
+  );
+const saveButton = () => dialog()!.querySelector<HTMLButtonElement>('button[type="submit"]')!;
+const amountInput = () => dialog()!.querySelector<HTMLInputElement>('input[inputmode="decimal"]')!;
+const nameInput = () => dialog()!.querySelector<HTMLInputElement>('input[name="expense-title"]')!;
+const memoInput = () => dialog()!.querySelector("textarea")!;
+const selectTrigger = (label: string) =>
+  dialog()!.querySelector<HTMLElement>(`[role="combobox"][aria-label="${label}"]`)!;
+const currencyTrigger = () => dialog()!.querySelector<HTMLElement>('[role="combobox"][aria-haspopup="dialog"]')!;
+// 통화 트리거는 코드 + 한국어 이름을 보이고, 값이 없으면 "통화 선택"을 보인다
+const currencyValue = () => {
+  const text = currencyTrigger().textContent ?? "";
+  return text === "통화 선택" ? "" : text.slice(0, 3);
+};
+const fieldOf = (element: Element) => element.closest('[data-slot="field"]')!;
+const fieldError = (element: Element) => fieldOf(element).querySelector('[data-slot="field-error"]')?.textContent ?? null;
+// 폼 아래 문장(저장 실패·권한·충돌 등). 칸 오류(FieldError)는 각 칸 안에 있다
+const formMessage = () => form().querySelector(":scope > p[role=\"alert\"]")?.textContent ?? null;
+
+async function key(target: Element, key: string) {
+  await act(async () => {
+    target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+  });
+  await flush();
+}
+async function type(element: HTMLInputElement | HTMLTextAreaElement, value: string) {
+  const prototype = element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(prototype, "value")!.set!.call(element, value);
+    element.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}
+async function click(element: HTMLElement) {
+  await act(async () => element.click());
+  await flush();
+}
+async function openSelect(label: string) {
+  await click(selectTrigger(label));
+  const list = document.getElementById(selectTrigger(label).getAttribute("aria-controls")!)!;
+  return [...list.querySelectorAll<HTMLElement>('[role="option"]')];
+}
+async function choose(label: string, optionText: string) {
+  const option = (await openSelect(label)).find((node) => node.textContent === optionText);
+  expect(option, `${label}: ${optionText}`).toBeDefined();
+  await click(option!);
+}
+async function chooseCurrency(code: string) {
+  await click(currencyTrigger());
+  const popup = document.querySelector('[role="dialog"][aria-label="통화 선택"]')!;
+  const option = [...popup.querySelectorAll<HTMLElement>('[role="option"]')].find((node) => node.textContent?.endsWith(code));
+  await click(option!);
+}
+async function clickSave() {
+  await click(saveButton());
+  await flush();
+}
+// 저장 버튼이 비활성인 상태에서도 제출 경로(Enter 등)가 저장을 막는지 본다
+async function submitForm() {
+  await act(async () => form().requestSubmit());
+  await flush();
+}
 async function completeNewExpense() {
-  const amount = renderer.root.findAllByType("input")
-    .find((input) => input.props.inputMode === "decimal")!;
-  const currency = renderer.root.findByType(ExpenseCurrencyPicker).props.value;
-  await act(async () => amount.props.onChange({ target: { value: currency === "USD" ? "100.00" : "100" } }));
-  await act(async () => categorySelect().props.onChange("OTHER"));
-  await act(async () => renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }));
+  await type(amountInput(), currencyValue() === "USD" ? "100.00" : "100");
+  await choose("카테고리", "기타");
+  await clickSave();
 }
 
-async function rerenderNewEditor() {
-  await act(async () => renderer.unmount());
-  await act(async () => { renderer = create(<ExpenseEditor initial={{}} onClose={mocks.close} />); });
-}
+const rolePicker = (title: "결제자" | "부담자") =>
+  [...dialog()!.querySelectorAll<HTMLFieldSetElement>("fieldset[aria-labelledby]")].find(
+    (fieldset) => document.getElementById(fieldset.getAttribute("aria-labelledby")!)?.firstElementChild?.textContent === title,
+  )!;
+const roleCheckboxes = (title: "결제자" | "부담자") => [...rolePicker(title).querySelectorAll<HTMLElement>('[role="checkbox"]')];
+const roleRows = (title: "결제자" | "부담자") =>
+  [...rolePicker(title).querySelectorAll("label")].map((row) => ({
+    userId: Number(row.querySelector("[data-user-id]")!.getAttribute("data-user-id")),
+    checked: row.querySelector('[role="checkbox"]')!.getAttribute("aria-checked") === "true",
+    checkbox: row.querySelector<HTMLElement>('[role="checkbox"]')!,
+  }));
+const checkedIds = (title: "결제자" | "부담자") => roleRows(title).filter((row) => row.checked).map((row) => row.userId);
 
 it("remembers currency only after a successful new expense save", async () => {
-  const entries = stubLocalStorage();
   await mount(null);
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("KRW");
-  await act(async () => renderer.root.findByType(ExpenseCurrencyPicker).props.onChange("USD"));
-  expect(entries.size).toBe(0);
+  expect(currencyValue()).toBe("KRW");
+  await chooseCurrency("USD");
+  expect(currencyValue()).toBe("USD");
+  expect(localStorage).toHaveLength(0);
   await completeNewExpense();
   expect(mocks.save).toHaveBeenCalledOnce();
-  expect([...entries.values()]).toEqual(["USD"]);
+  expect(Object.values({ ...localStorage })).toEqual(["USD"]);
   await mount(null);
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("USD");
+  expect(currencyValue()).toBe("USD");
 });
 
 it("does not remember cancelled, failed, or edited expense currency", async () => {
-  const entries = stubLocalStorage();
   await mount(null);
-  await act(async () => renderer.root.findByType(ExpenseCurrencyPicker).props.onChange("USD"));
-  await act(async () => renderer.root.findByProps({ "aria-label": "닫기" }).props.onClick());
-  expect(entries.size).toBe(0);
+  await chooseCurrency("USD");
+  await click(button("닫기")!);
+  expect(mocks.close).toHaveBeenCalledOnce();
+  expect(localStorage).toHaveLength(0);
+  await mount(null);
+  await chooseCurrency("USD");
   mocks.save.mockRejectedValueOnce(new Error("저장 실패"));
   await completeNewExpense();
-  expect(entries.size).toBe(0);
+  expect(mocks.save).toHaveBeenCalledOnce();
+  expect(localStorage).toHaveLength(0);
   await mount();
-  await act(async () => renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }));
-  expect(entries.size).toBe(0);
+  await clickSave();
+  expect(mocks.save).toHaveBeenCalledOnce();
+  expect(localStorage).toHaveLength(0);
 });
 
 it("scopes the remembered currency to the authenticated user and room", async () => {
-  stubLocalStorage();
   await mount(null);
-  await act(async () => renderer.root.findByType(ExpenseCurrencyPicker).props.onChange("USD"));
+  await chooseCurrency("USD");
   await completeNewExpense();
-  mocks.state = { ...(mocks.state as object), currentUserId: 2 };
-  await rerenderNewEditor();
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("KRW");
-  mocks.state = { ...(mocks.state as object), currentUserId: 1, roomId: "another-room" };
-  await rerenderNewEditor();
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("KRW");
-  mocks.state = { ...(mocks.state as object), roomId: "r" };
-  await rerenderNewEditor();
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("USD");
+  setState({ currentUserId: 2 });
+  await reopenNewEditor();
+  expect(currencyValue()).toBe("KRW");
+  setState({ currentUserId: 1, roomId: "another-room" });
+  await reopenNewEditor();
+  expect(currencyValue()).toBe("KRW");
+  setState({ roomId: "r" });
+  await reopenNewEditor();
+  expect(currencyValue()).toBe("USD");
 });
 
 it("uses the current list for stale preference and reads tab changes on the next open", async () => {
-  const entries = stubLocalStorage();
   await mount(null);
-  await act(async () => renderer.root.findByType(ExpenseCurrencyPicker).props.onChange("USD"));
+  await chooseCurrency("USD");
   await completeNewExpense();
-  const key = [...entries.keys()][0];
-  entries.set(key, "BAD");
-  await rerenderNewEditor();
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("KRW");
-  entries.set(key, "USD");
-  await rerenderNewEditor();
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("USD");
-  mocks.state = { ...(mocks.state as object), currencies: { data: [currencies[0]], isSuccess: true } };
-  await rerenderNewEditor();
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("USD");
-  entries.set(key, "KRW");
-  await rerenderNewEditor();
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("USD");
+  const storageKey = localStorage.key(0)!;
+  localStorage.setItem(storageKey, "BAD");
+  await reopenNewEditor();
+  expect(currencyValue()).toBe("KRW");
+  localStorage.setItem(storageKey, "USD");
+  await reopenNewEditor();
+  expect(currencyValue()).toBe("USD");
+  setState({ currencies: { data: [currencies[0]], isSuccess: true } });
+  await reopenNewEditor();
+  expect(currencyValue()).toBe("USD");
+  localStorage.setItem(storageKey, "KRW");
+  await reopenNewEditor();
+  expect(currencyValue()).toBe("USD");
 });
 
 it("applies preference after currencies load without replacing a later manual choice", async () => {
-  const entries = stubLocalStorage();
   await mount(null);
-  await act(async () => renderer.root.findByType(ExpenseCurrencyPicker).props.onChange("USD"));
+  await chooseCurrency("USD");
   await completeNewExpense();
-  mocks.state = { ...(mocks.state as object), currencies: { data: undefined, isSuccess: false } };
-  await rerenderNewEditor();
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("");
-  mocks.state = { ...(mocks.state as object), currencies: { data: currencies, isSuccess: true } };
-  await act(async () => renderer.update(<ExpenseEditor initial={{}} onClose={mocks.close} />));
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("USD");
-  await act(async () => renderer.root.findByType(ExpenseCurrencyPicker).props.onChange("KRW"));
-  entries.set([...entries.keys()][0], "USD");
-  mocks.state = { ...(mocks.state as object), currencies: { data: [...currencies], isSuccess: true } };
-  await act(async () => renderer.update(<ExpenseEditor initial={{}} onClose={mocks.close} />));
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("KRW");
+  setState({ currencies: { data: undefined, isSuccess: false } });
+  await reopenNewEditor();
+  expect(currencyValue()).toBe("");
+  setState({ currencies: { data: currencies, isSuccess: true } });
+  await render(<ExpenseEditor initial={{}} onClose={mocks.close} />);
+  expect(currencyValue()).toBe("USD");
+  await chooseCurrency("KRW");
+  localStorage.setItem(localStorage.key(0)!, "USD");
+  setState({ currencies: { data: [...currencies], isSuccess: true } });
+  await render(<ExpenseEditor initial={{}} onClose={mocks.close} />);
+  expect(currencyValue()).toBe("KRW");
 });
 
 it("keeps the normal default when storage is unavailable or identity is missing", async () => {
-  vi.stubGlobal("window", { get localStorage() { throw new Error("blocked"); } });
+  vi.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
+    throw new Error("blocked");
+  });
   await mount(null);
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("KRW");
-  mocks.state = { ...(mocks.state as object), currentUserId: undefined };
-  await rerenderNewEditor();
-  expect(renderer.root.findByType(ExpenseCurrencyPicker).props.value).toBe("KRW");
+  expect(currencyValue()).toBe("KRW");
+  setState({ currentUserId: undefined });
+  await reopenNewEditor();
+  expect(currencyValue()).toBe("KRW");
 });
 
 it("preselects self in both roles for new expenses and keeps self first", async () => {
   await mount(null);
-  const state = mocks.state as { members: { userId: number }[] };
-  mocks.state = {
-    ...state,
+  const state = mocks.state as { members: object[] };
+  setState({
     currentUserId: 2,
-    members: [
-      ...state.members,
-      {
-        userId: 2,
-        status: "ACTIVE",
-        role: "MEMBER",
-        nickname: "나",
-        profileImageUrl: null,
-      },
-    ],
-  };
-  await act(async () =>
-    renderer.update(
-      <ExpenseEditor key="self" initial={{}} onClose={mocks.close} />,
-    ),
-  );
-  for (const picker of renderer.root.findAllByType(ExpenseRolePicker)) {
-    expect(picker.props.selected).toEqual([2]);
-    expect(
-      picker
-        .findAll(
-          (node) =>
-            node.type === "span" && node.props["data-user-id"] !== undefined,
-        )
-        .map((node) => node.props["data-user-id"]),
-    ).toEqual([2, 1]);
-    await act(async () =>
-      picker
-        .findAllByType("input")[0]
-        .props.onChange({ target: { checked: false } }),
-    );
+    members: [...state.members, { userId: 2, status: "ACTIVE", role: "MEMBER", nickname: "나", profileImageUrl: null }],
+  });
+  await render(<ExpenseEditor key="self" initial={{}} onClose={mocks.close} />);
+  for (const title of ["결제자", "부담자"] as const) {
+    expect(checkedIds(title)).toEqual([2]);
+    expect(roleRows(title).map((row) => row.userId)).toEqual([2, 1]);
+    await click(roleRows(title)[0].checkbox);
   }
-  await act(async () =>
-    renderer.update(
-      <ExpenseEditor key="self" initial={{}} onClose={mocks.close} />,
-    ),
-  );
-  for (const picker of renderer.root.findAllByType(ExpenseRolePicker))
-    expect(picker.props.selected).toEqual([]);
+  await render(<ExpenseEditor key="self" initial={{}} onClose={mocks.close} />);
+  for (const title of ["결제자", "부담자"] as const) expect(checkedIds(title)).toEqual([]);
 });
 
 it("formats typed amounts without changing exact submitted decimals", async () => {
   await mount();
-  const amount = renderer.root
-    .findAllByType("input")
-    .find((i) => i.props.inputMode === "decimal")!;
-  await act(async () =>
-    amount.props.onChange({ target: { value: "999,999,999,999,999.99" } }),
-  );
-  expect(amount.props.value).toBe("999,999,999,999,999.99");
-  await act(async () =>
-    renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }),
-  );
-  expect(mocks.save).toHaveBeenCalledWith(
-    expect.objectContaining({ totalAmount: "999999999999999.99" }),
-    10,
-    0,
-  );
-});
-const base = {
-  expenseGroup: "TRIP_DAY" as const,
-  scheduleId: 10,
-  scheduleItemId: 100,
-  totalAmount: "10.01",
-  currency: "USD",
-  category: "OTHER" as const,
-  memo: "",
-  payerUserIds: [1, 99],
-  participantUserIds: [1],
-  id: 10,
-  version: 0,
-  name: null, createdAt: "",
-  updatedAt: "",
-};
-let renderer: ReactTestRenderer;
-async function mount(
-  original: Expense | null = base,
-  entry: ExpenseEntry = {},
-  createNodeMock?: (element: { type: unknown }) => unknown,
-) {
-  if (renderer) await act(async () => renderer.unmount());
-  mocks.save.mockReset();
-  mocks.readLatest.mockReset();
-  mocks.close.mockReset();
-  mocks.state = {
-    currentUserId: 1,
-    roomId: "r",
-    members: [
-      {
-        userId: 1,
-        status: "ACTIVE",
-        role: "HOST",
-        nickname: "하나",
-        profileImageUrl: null,
-      },
-    ],
-    memberStatus: "success",
-    canManage: true,
-    schedules: [
-      { scheduleId: 10, dayNumber: 1 },
-      { scheduleId: 11, dayNumber: 2 },
-    ],
-    schedulesReady: true,
-    currencies: { data: currencies, isSuccess: true, isError: false },
-    save: mocks.save,
-    readLatest: mocks.readLatest,
-    list: { isSuccess: true, data: original ? [original] : [] },
-    busy: false,
-  };
-  await act(async () => {
-    renderer = create(
-      <ExpenseEditor
-        initial={original ? { expense: original } : entry}
-        onClose={mocks.close}
-      />,
-      createNodeMock ? { createNodeMock } : undefined,
-    );
-  });
-}
-afterEach(async () => {
-  if (renderer) await act(async () => renderer.unmount());
-  vi.unstubAllGlobals();
+  await type(amountInput(), "999,999,999,999,999.99");
+  expect(amountInput().value).toBe("999,999,999,999,999.99");
+  await clickSave();
+  expect(mocks.save).toHaveBeenCalledWith(expect.objectContaining({ totalAmount: "999999999999999.99" }), 10, 0);
 });
+
 it("preserves original unknown payer and exact amount when editing", async () => {
   await mount();
-  await act(async () =>
-    renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }),
-  );
+  await clickSave();
   expect(mocks.save).toHaveBeenCalledWith(
-    expect.objectContaining({
-      payerUserIds: [1, 99],
-      participantUserIds: [1],
-      totalAmount: "10.01",
-      scheduleItemId: 100,
-    }),
+    expect.objectContaining({ payerUserIds: [1, 99], participantUserIds: [1], totalAmount: "10.01", scheduleItemId: 100 }),
     10,
     0,
   );
   expect(mocks.close).toHaveBeenCalledOnce();
 });
+
 it("clears both links for preparation and clears place when changing day", async () => {
   await mount();
-  const select = renderer.root.findAllByType(ExpenseSelect)[0];
-  await act(async () => select.props.onChange("11"));
-  await act(async () =>
-    renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }),
-  );
+  await choose("일차 구분", "2일차");
+  expect(selectTrigger("연결 장소 (선택)").textContent).toBe("장소 연결 없음");
+  await clickSave();
   expect(mocks.save).toHaveBeenLastCalledWith(
-    expect.objectContaining({
-      expenseGroup: "TRIP_DAY",
-      scheduleId: 11,
-      scheduleItemId: null,
-    }),
+    expect.objectContaining({ expenseGroup: "TRIP_DAY", scheduleId: 11, scheduleItemId: null }),
     10,
     0,
   );
   await mount();
-  await act(async () =>
-    renderer.root
-      .findAllByType(ExpenseSelect)[0]
-      .props.onChange("PREPARATION"),
-  );
-  await act(async () =>
-    renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }),
-  );
+  await choose("일차 구분", "여행 준비");
+  await clickSave();
   expect(mocks.save).toHaveBeenLastCalledWith(
-    expect.objectContaining({
-      expenseGroup: "PREPARATION",
-      scheduleId: null,
-      scheduleItemId: null,
-    }),
+    expect.objectContaining({ expenseGroup: "PREPARATION", scheduleId: null, scheduleItemId: null }),
     10,
     0,
   );
 });
+
 it("keeps the place selector visible but disabled for travel preparation", async () => {
   await mount(null);
-  const placeSelect = () => renderer.root.findAllByType(ExpenseSelect)
-    .find((select) => select.props.label === "연결 장소 (선택)");
-  const placeLabel = () => renderer.root.findAllByType("p")
-    .find((paragraph) => paragraph.children.join("") === "연결 장소 (선택)");
-
-  expect(placeSelect()).toBeDefined();
-  expect(placeSelect()!.props.disabled).toBe(true);
-  expect(placeSelect()!.props.options).toEqual([{ value: "", label: "장소 연결 없음" }]);
-  expect(placeSelect()!.findByType("button").props.disabled).toBe(true);
-  expect(placeLabel()!.props.className).toContain("opacity-50");
-
-  const daySelect = renderer.root.findAllByType(ExpenseSelect)[0];
-  expect(daySelect.props.label).toBe("일차 구분");
-  await act(async () => daySelect.props.onChange("10"));
-  expect(placeSelect()!.props.disabled).toBe(false);
-  expect(placeSelect()!.props.options).toContainEqual({ value: "100", label: "경복궁" });
-  expect(placeLabel()!.props.className).not.toContain("opacity-50");
-
-  await act(async () => daySelect.props.onChange("PREPARATION"));
-  expect(placeSelect()!.props.disabled).toBe(true);
-  expect(placeSelect()!.props.options).toEqual([{ value: "", label: "장소 연결 없음" }]);
-  expect(placeLabel()!.props.className).toContain("opacity-50");
+  const place = () => selectTrigger("연결 장소 (선택)");
+  expect(selectTrigger("일차 구분").textContent).toBe("여행 준비");
+  expect(place().textContent).toBe("장소 연결 없음");
+  expect(place().hasAttribute("data-disabled")).toBe(true);
+
+  await choose("일차 구분", "1일차");
+  expect(place().hasAttribute("data-disabled")).toBe(false);
+  const options = await openSelect("연결 장소 (선택)");
+  expect(options.map((option) => option.textContent)).toEqual(["장소 연결 없음", "경복궁"]);
+  await key(document.activeElement!, "Escape");
+
+  await choose("일차 구분", "여행 준비");
+  expect(place().hasAttribute("data-disabled")).toBe(true);
+  expect(place().textContent).toBe("장소 연결 없음");
 });
+
 it("blocks wrong currency scale without truncating and guards rapid duplicate submit", async () => {
   await mount();
-  const amount = renderer.root
-    .findAllByType("input")
-    .find((i) => i.props.inputMode === "decimal")!;
-  await act(async () =>
-    amount.props.onChange({ target: { value: "10.001" } }),
-  );
-  await act(async () =>
-    renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }),
-  );
+  await type(amountInput(), "10.001");
+  await clickSave();
   expect(mocks.save).not.toHaveBeenCalled();
-  await act(async () =>
-    amount.props.onChange({ target: { value: "10.01" } }),
-  );
+  expect(amountInput().value).toBe("10.001");
+  expect(amountInput().getAttribute("aria-invalid")).toBe("true");
+  expect(fieldError(amountInput())).toBe("금액은 정수부 1~15자리, 소수 2자리로 입력해 주세요. 공백·기호·지수는 사용할 수 없어요.");
+  await type(amountInput(), "10.01");
+  expect(amountInput().hasAttribute("aria-invalid")).toBe(false);
+  expect(fieldError(amountInput())).toBeNull();
   let finish!: () => void;
-  mocks.save.mockImplementation(
-    () =>
-      new Promise<void>((r) => {
-        finish = r;
-      }),
-  );
+  mocks.save.mockImplementation(() => new Promise<void>((resolve) => { finish = resolve; }));
   await act(async () => {
-    const submit = renderer.root.findByType("form").props.onSubmit;
-    void submit({ preventDefault() {} });
-    void submit({ preventDefault() {} });
+    saveButton().click();
+    saveButton().click();
   });
+  await flush();
   expect(mocks.save).toHaveBeenCalledOnce();
-  await act(async () => {
-    finish();
-  });
+  await act(async () => finish());
 });
+
 it("does not submit when members fail and shows failure without removing historical data", async () => {
   await mount();
-  mocks.state = {
-    ...(mocks.state as object),
-    memberStatus: "error",
-    canManage: false,
-  };
-  await act(async () =>
-    renderer.update(
-      <ExpenseEditor initial={{ expense: base }} onClose={mocks.close} />,
-    ),
-  );
-  await act(async () =>
-    renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }),
-  );
+  setState({ memberStatus: "error", canManage: false });
+  await render(<ExpenseEditor initial={{ expense: base }} onClose={mocks.close} />);
+  expect(saveButton().disabled).toBe(true);
+  await submitForm();
   expect(mocks.save).not.toHaveBeenCalled();
-  expect(JSON.stringify(renderer.toJSON())).not.toContain("(알 수 없음)");
+  expect(dialog()!.textContent).toContain("멤버 정보 조회 실패");
+  expect(dialog()!.textContent).not.toContain("(알 수 없음)");
 });
 
 it.each([
   [{}, "PREPARATION", null, null],
   [{ scheduleId: 10 }, "TRIP_DAY", 10, null],
   [{ scheduleId: 10, scheduleItemId: 100 }, "TRIP_DAY", 10, 100],
-] as const)(
-  "creates an expense from each real entry context %j",
-  async (entry, expenseGroup, scheduleId, scheduleItemId) => {
-    await mount(null, entry);
-    const amount = renderer.root
-      .findAllByType("input")
-      .find((i) => i.props.inputMode === "decimal")!;
-    await act(async () =>
-      amount.props.onChange({ target: { value: "100" } }),
-    );
-    for (const checkbox of renderer.root
-      .findAllByType("input")
-      .filter((i) => i.props.type === "checkbox" && !i.props.checked))
-      await act(async () =>
-        checkbox.props.onChange({ target: { checked: true } }),
-      );
-    await act(async () => categorySelect().props.onChange("OTHER"));
-    await act(async () =>
-      renderer.root
-        .findByType("form")
-        .props.onSubmit({ preventDefault() {} }),
-    );
-    expect(mocks.save).toHaveBeenCalledWith(
-      {
-        expenseGroup,
-        scheduleId,
-        scheduleItemId,
-        totalAmount: "100",
-        currency: "KRW",
-        category: "OTHER",
-        name: null,
-        memo: "",
-        payerUserIds: [1],
-        participantUserIds: [1],
-      },
-      undefined,
-      undefined,
-    );
-  },
-);
+] as const)("creates an expense from each real entry context %j", async (entry, expenseGroup, scheduleId, scheduleItemId) => {
+  await mount(null, entry);
+  await type(amountInput(), "100");
+  for (const title of ["결제자", "부담자"] as const)
+    for (const row of roleRows(title).filter((row) => !row.checked)) await click(row.checkbox);
+  await choose("카테고리", "기타");
+  await clickSave();
+  expect(mocks.save).toHaveBeenCalledWith(
+    {
+      expenseGroup,
+      scheduleId,
+      scheduleItemId,
+      totalAmount: "100",
+      currency: "KRW",
+      category: "OTHER",
+      name: null,
+      memo: "",
+      payerUserIds: [1],
+      participantUserIds: [1],
+    },
+    undefined,
+    undefined,
+  );
+});
+
 it("cannot re-add an unknown payer after deselection and keeps input on server rejection", async () => {
   await mount();
-  const checkboxes = renderer.root
-    .findAllByType("input")
-    .filter((i) => i.props.type === "checkbox");
-  expect(checkboxes).toHaveLength(3);
-  await act(async () =>
-    checkboxes[1].props.onChange({ target: { checked: false } }),
-  );
-  expect(
-    renderer.root
-      .findAllByType("input")
-      .filter((i) => i.props.type === "checkbox"),
-  ).toHaveLength(2);
+  expect(roleCheckboxes("결제자")).toHaveLength(2);
+  expect(roleCheckboxes("부담자")).toHaveLength(1);
+  const unknown = roleRows("결제자").find((row) => row.userId === 99)!;
+  await click(unknown.checkbox);
+  expect(roleRows("결제자").map((row) => row.userId)).toEqual([1]);
   mocks.save.mockRejectedValue(new Error("서버 검증 실패"));
-  await act(async () =>
-    renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }),
-  );
-  expect(mocks.save).toHaveBeenCalledWith(
-    expect.objectContaining({ payerUserIds: [1], totalAmount: "10.01" }),
-    10,
-    0,
-  );
+  await clickSave();
+  expect(mocks.save).toHaveBeenCalledWith(expect.objectContaining({ payerUserIds: [1], totalAmount: "10.01" }), 10, 0);
   expect(mocks.close).not.toHaveBeenCalled();
-  expect(JSON.stringify(renderer.toJSON())).toContain("서버 검증 실패");
+  expect(formMessage()).toBe("서버 검증 실패");
 });
 
-const categories = [
-  ["FLIGHT", "항공"],
-  ["ACCOMMODATION", "숙박"],
-  ["FOOD", "식비"],
-  ["TRANSPORT", "교통"],
-  ["SHOPPING", "쇼핑"],
-  ["SIGHTSEEING", "관광"],
-  ["OTHER", "기타"],
-] as const;
-function categorySelect() {
-  const selects = renderer.root
-    .findAllByType(ExpenseSelect)
-    .filter((node) => node.props.name === "category");
-  expect(selects, "a category selector is available").toHaveLength(1);
-  return selects[0];
-}
 async function fillNewExpense() {
-  const amount = renderer.root
-    .findAllByType("input")
-    .find((i) => i.props.inputMode === "decimal")!;
-  await act(async () => amount.props.onChange({ target: { value: "100" } }));
-  for (const checkbox of renderer.root
-    .findAllByType("input")
-    .filter((i) => i.props.type === "checkbox" && !i.props.checked)) {
-    await act(async () =>
-      checkbox.props.onChange({ target: { checked: true } }),
-    );
-  }
+  await type(amountInput(), "100");
+  for (const title of ["결제자", "부담자"] as const)
+    for (const row of roleRows(title).filter((row) => !row.checked)) await click(row.checkbox);
 }
+
 it("requires explicit selection and offers exactly seven labeled categories in approved order", async () => {
   await mount(null);
   await fillNewExpense();
-  await act(async () =>
-    renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }),
-  );
+  await clickSave();
   expect(mocks.save).not.toHaveBeenCalled();
-  expect(categorySelect().props.value).toBe("");
-  expect(
-    categorySelect().props.options.map(
-      (o: { value: string; label: string }) => [o.value, o.label],
-    ),
-  ).toEqual(categories);
-});
-it.each(categories)(
-  "creates the selected category %s (%s)",
-  async (category) => {
-    await mount(null);
-    await fillNewExpense();
-    await act(async () => categorySelect().props.onChange(category));
-    await act(async () =>
-      renderer.root
-        .findByType("form")
-        .props.onSubmit({ preventDefault() {} }),
-    );
-    expect(mocks.save).toHaveBeenCalledWith(
-      expect.objectContaining({ category, totalAmount: "100" }),
-      undefined,
-      undefined,
-    );
-  },
-);
-it.each(categories)(
-  "retains %s (%s) on edit and permits explicit reclassification",
-  async (category) => {
-    await mount({ ...base, category });
-    expect(categorySelect().props.value).toBe(category);
-    await act(async () =>
-      renderer.root
-        .findByType("form")
-        .props.onSubmit({ preventDefault() {} }),
-    );
-    expect(mocks.save).toHaveBeenLastCalledWith(
-      expect.objectContaining({ category }),
-      10,
-      0,
-    );
-    const replacement = category === "OTHER" ? "FLIGHT" : "OTHER";
-    await act(async () => categorySelect().props.onChange(replacement));
-    mocks.save.mockRejectedValueOnce(new Error("카테고리 저장 실패"));
-    await act(async () =>
-      renderer.root
-        .findByType("form")
-        .props.onSubmit({ preventDefault() {} }),
-    );
-    expect(mocks.save).toHaveBeenLastCalledWith(
-      expect.objectContaining({ category: replacement }),
-      10,
-      0,
-    );
-    expect(categorySelect().props.value).toBe(replacement);
-    expect(JSON.stringify(renderer.toJSON())).toContain("카테고리 저장 실패");
-  },
-);
+  expect(selectTrigger("카테고리").textContent).toBe("카테고리 선택");
+  const options = await openSelect("카테고리");
+  expect(options.map((option) => option.textContent)).toEqual(categories.map(([, label]) => label));
+});
+
+it("shows the missing category under its field and clears it once a category is chosen", async () => {
+  await mount(null);
+  await fillNewExpense();
+  await clickSave();
+  expect(mocks.save).not.toHaveBeenCalled();
+  const category = selectTrigger("카테고리");
+  expect(category.getAttribute("aria-invalid")).toBe("true");
+  expect(fieldError(category)).toBe("카테고리를 선택해 주세요.");
+  // 칸 오류는 폼 아래 문장으로 겹쳐 보이지 않는다
+  expect(formMessage()).toBeNull();
+  expect(form().hasAttribute("aria-describedby")).toBe(false);
+  // 다른 칸은 오류가 없다
+  expect(fieldError(amountInput())).toBeNull();
+  await choose("카테고리", "식비");
+  expect(selectTrigger("카테고리").hasAttribute("aria-invalid")).toBe(false);
+  expect(fieldError(selectTrigger("카테고리"))).toBeNull();
+  await clickSave();
+  expect(mocks.save).toHaveBeenCalledWith(expect.objectContaining({ category: "FOOD" }), undefined, undefined);
+});
+
+it.each(categories)("creates the selected category %s (%s)", async (category, label) => {
+  await mount(null);
+  await fillNewExpense();
+  await choose("카테고리", label);
+  await clickSave();
+  expect(mocks.save).toHaveBeenCalledWith(expect.objectContaining({ category, totalAmount: "100" }), undefined, undefined);
+});
+
+it.each(categories)("retains %s (%s) on edit and permits explicit reclassification", async (category, label) => {
+  await mount({ ...base, category });
+  expect(selectTrigger("카테고리").textContent).toBe(label);
+  await clickSave();
+  expect(mocks.save).toHaveBeenLastCalledWith(expect.objectContaining({ category }), 10, 0);
+  const [replacement, replacementLabel] = category === "OTHER" ? categories[0] : categories[6];
+  await choose("카테고리", replacementLabel);
+  mocks.save.mockRejectedValueOnce(new Error("카테고리 저장 실패"));
+  await clickSave();
+  expect(mocks.save).toHaveBeenLastCalledWith(expect.objectContaining({ category: replacement }), 10, 0);
+  expect(selectTrigger("카테고리").textContent).toBe(replacementLabel);
+  expect(formMessage()).toBe("카테고리 저장 실패");
+});
+
+it("closes only the open list on Escape, not the editor", async () => {
+  await mount();
+  await openSelect("카테고리");
+  expect(selectTrigger("카테고리").getAttribute("aria-expanded")).toBe("true");
+  await key(document.activeElement!, "Escape");
+  expect(selectTrigger("카테고리").getAttribute("aria-expanded")).toBe("false");
+  await click(currencyTrigger());
+  expect(currencyTrigger().getAttribute("aria-expanded")).toBe("true");
+  await key(document.activeElement!, "Escape");
+  expect(currencyTrigger().getAttribute("aria-expanded")).toBe("false");
+  expect(mocks.close).not.toHaveBeenCalled();
+  expect(dialog()).not.toBeNull();
+});
 
-// Model native modal focus separately from renderer nodes: closing alone does not
-// restore focus here, matching the browser defect reported by Hermes.
+it.each([false, true])("closes from the backdrop only on mobile devices (mobile: %s)", async (mobile) => {
+  mocks.mobile = mobile;
+  await mount();
+  const backdrop = document.querySelector<HTMLElement>(
+    mobile ? '[data-slot="drawer-overlay"]' : '[data-slot="dialog-overlay"]',
+  )!;
+  await act(async () => {
+    backdrop.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+    backdrop.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+    backdrop.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+    backdrop.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }));
+    backdrop.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  });
+  await flush();
+  expect(mocks.close).toHaveBeenCalledTimes(mobile ? 1 : 0);
+});
+
+// 편집기를 연 버튼에 포커스를 두고 열고, 닫히면(onClose) 부모처럼 편집기를 내린다
 async function mountWithOpener() {
-  class FocusTarget {
-    isConnected = true;
-    focus = vi.fn(() => {
-      ownerDocument.activeElement = this;
-    });
-  }
-  const opener = new FocusTarget();
-  const closeButton = new FocusTarget();
-  const ownerDocument = { activeElement: opener };
-  const nativeDialog = {
-    ownerDocument,
-    showModal: vi.fn(() => closeButton.focus()),
-    close: vi.fn(),
-  };
-  vi.stubGlobal("HTMLElement", FocusTarget);
-  await mount(base, {}, (element) =>
-    element.type === "dialog" ? nativeDialog : null,
-  );
-  mocks.close.mockImplementation(() => renderer.unmount());
-  expect(ownerDocument.activeElement).toBe(closeButton);
-  return { opener, closeButton, ownerDocument, nativeDialog };
+  const opener = document.createElement("button");
+  opener.textContent = "비용 추가";
+  document.body.append(opener);
+  opener.focus();
+  await mount();
+  mocks.close.mockImplementation(() => root.render(null));
+  // Base UI는 다음 프레임에 대화상자 안 첫 포커스 요소로 포커스를 옮긴다
+  await act(async () => { await new Promise((resolve) => setTimeout(resolve, 50)); });
+  expect(dialog()!.contains(document.activeElement)).toBe(true);
+  return opener;
+}
+async function settle() {
+  await flush();
+  await act(async () => { await new Promise((resolve) => setTimeout(resolve, 50)); });
 }
 
-it.each(["Escape", "닫기", "취소", "save"])(
-  "restores connected opener focus after %s closes the editor",
-  async (path) => {
-    const { opener, ownerDocument, nativeDialog } = await mountWithOpener();
-    await act(async () => {
-      if (path === "Escape") {
-        const preventDefault = vi.fn();
-        renderer.root.findByType("dialog").props.onCancel({ preventDefault });
-        expect(preventDefault).toHaveBeenCalledOnce();
-      } else if (path === "save") {
-        await renderer.root
-          .findByType("form")
-          .props.onSubmit({ preventDefault() {} });
-      } else {
-        renderer.root
-          .findAllByType("button")
-          .find(
-            (b) => (b.props["aria-label"] ?? b.children.join("")) === path,
-          )!
-          .props.onClick();
-      }
-    });
-    expect(mocks.close).toHaveBeenCalledOnce();
-    expect(nativeDialog.close).toHaveBeenCalledOnce();
-    expect(opener.focus).toHaveBeenCalledOnce();
-    expect(ownerDocument.activeElement).toBe(opener);
-  },
-);
+it.each(["Escape", "닫기", "취소", "save"])("returns focus to the opener after %s closes the editor", async (path) => {
+  const opener = await mountWithOpener();
+  if (path === "Escape") await key(document.activeElement!, "Escape");
+  else if (path === "save") await clickSave();
+  else await click(button(path)!);
+  await settle();
+  expect(mocks.close).toHaveBeenCalledOnce();
+  expect(dialog()).toBeNull();
+  expect(document.activeElement).toBe(opener);
+});
 
 it("does not focus an opener removed while the editor was open", async () => {
-  const { opener } = await mountWithOpener();
-  opener.isConnected = false;
-  await act(async () => renderer.unmount());
-  expect(opener.focus).not.toHaveBeenCalled();
+  const opener = await mountWithOpener();
+  const focus = vi.spyOn(opener, "focus");
+  opener.remove();
+  await key(document.activeElement!, "Escape");
+  await settle();
+  expect(mocks.close).toHaveBeenCalledOnce();
+  expect(focus).not.toHaveBeenCalled();
+  expect(document.activeElement).not.toBe(opener);
 });
 
-it("keeps focus in the editor and locks dismissal during save, then restores it on success", async () => {
-  const { opener, closeButton, ownerDocument } = await mountWithOpener();
+it("locks every dismissal during save and shows progress, then returns focus on success", async () => {
+  const opener = await mountWithOpener();
   let finish!: () => void;
-  mocks.save.mockImplementation(
-    () =>
-      new Promise<void>((resolve) => {
-        finish = resolve;
-      }),
-  );
-  await act(async () => {
-    void renderer.root
-      .findByType("form")
-      .props.onSubmit({ preventDefault() {} });
-  });
-  for (const label of ["닫기", "취소"]) {
-    expect(
-      renderer.root
-        .findAllByType("button")
-        .find(
-          (b) => (b.props["aria-label"] ?? b.children.join("")) === label,
-        )!.props.disabled,
-    ).toBe(true);
-  }
-  await act(async () =>
-    renderer.root
-      .findByType("dialog")
-      .props.onCancel({ preventDefault() {} }),
-  );
+  mocks.save.mockImplementation(() => new Promise<void>((resolve) => { finish = resolve; }));
+  await clickSave();
+  expect(saveButton().getAttribute("aria-busy")).toBe("true");
+  expect(saveButton().getAttribute("aria-disabled")).toBe("true");
+  expect(document.getElementById(saveButton().getAttribute("aria-labelledby")!)!.textContent).toBe("저장 중");
+  expect(button("닫기")!.disabled).toBe(true);
+  expect(button("취소")!.disabled).toBe(true);
+  await click(button("닫기")!);
+  await click(button("취소")!);
+  await key(document.activeElement!, "Escape");
+  await click(saveButton());
   expect(mocks.close).not.toHaveBeenCalled();
-  expect(opener.focus).not.toHaveBeenCalled();
-  expect(ownerDocument.activeElement).toBe(closeButton);
+  expect(mocks.save).toHaveBeenCalledOnce();
+  expect(dialog()!.contains(document.activeElement)).toBe(true);
   await act(async () => finish());
-  expect(opener.focus).toHaveBeenCalledOnce();
+  await settle();
+  expect(mocks.close).toHaveBeenCalledOnce();
+  expect(document.activeElement).toBe(opener);
 });
 
-it("keeps the editor focused on save rejection and restores focus on later dismissal", async () => {
-  const { opener, closeButton, ownerDocument } = await mountWithOpener();
+it("keeps the editor open on save rejection and returns focus on later dismissal", async () => {
+  const opener = await mountWithOpener();
   mocks.save.mockRejectedValueOnce(new Error("저장 실패"));
-  await act(async () =>
-    renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }),
-  );
+  await clickSave();
   expect(mocks.close).not.toHaveBeenCalled();
-  expect(opener.focus).not.toHaveBeenCalled();
-  expect(ownerDocument.activeElement).toBe(closeButton);
-  await act(async () =>
-    renderer.root
-      .findByType("dialog")
-      .props.onCancel({ preventDefault() {} }),
-  );
-  expect(opener.focus).toHaveBeenCalledOnce();
+  expect(formMessage()).toBe("저장 실패");
+  expect(saveButton().hasAttribute("aria-busy")).toBe(false);
+  expect(dialog()!.contains(document.activeElement)).toBe(true);
+  await key(document.activeElement!, "Escape");
+  await settle();
+  expect(mocks.close).toHaveBeenCalledOnce();
+  expect(document.activeElement).toBe(opener);
 });
 
-async function submitVersioned() {
-  await act(async () =>
-    renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }),
-  );
-}
-function recoveryButton(label: string) {
-  return renderer.root
-    .findAllByType("button")
-    .find((b) => b.children.includes(label));
-}
+const recoveryButton = (label: string) => button(label);
 it("keeps the opened version when background list and entry refresh", async () => {
   await mount();
-  mocks.state = {
-    ...(mocks.state as object),
-    list: { isSuccess: true, data: [{ ...base, version: 9 }] },
-  };
-  await act(async () =>
-    renderer.update(
-      <ExpenseEditor
-        initial={{ expense: { ...base, version: 9 } }}
-        onClose={mocks.close}
-      />,
-    ),
-  );
-  await submitVersioned();
+  setState({ list: { isSuccess: true, data: [{ ...base, version: 9 }] } });
+  await render(<ExpenseEditor initial={{ expense: { ...base, version: 9 } }} onClose={mocks.close} />);
+  await clickSave();
   expect(mocks.save).toHaveBeenLastCalledWith(expect.anything(), 10, 0);
 });
+
 it("retains the draft and requires explicit latest-record review before saving again", async () => {
   await mount();
-  await act(async () =>
-    renderer.root
-      .findByType("textarea")
-      .props.onChange({ target: { value: "my draft" } }),
-  );
-  mocks.save.mockRejectedValueOnce(
-    new ExpenseApiError(409, "EXPENSE_CONFLICT", "changed"),
-  );
-  mocks.readLatest.mockResolvedValueOnce({
-    ...base,
-    version: 2,
-    memo: "remote memo",
-  });
-  await submitVersioned();
+  await type(memoInput(), "my draft");
+  mocks.save.mockRejectedValueOnce(new ExpenseApiError(409, "EXPENSE_CONFLICT", "changed"));
+  mocks.readLatest.mockResolvedValueOnce({ ...base, version: 2, memo: "remote memo" });
+  await clickSave();
   expect(mocks.readLatest).toHaveBeenCalledWith(10);
   expect(mocks.close).not.toHaveBeenCalled();
-  expect(renderer.root.findByType("textarea").props.value).toBe("my draft");
-  expect(JSON.stringify(renderer.toJSON())).toContain("remote memo");
-  await submitVersioned();
+  expect(memoInput().value).toBe("my draft");
+  expect(dialog()!.textContent).toContain("remote memo");
+  expect(saveButton().disabled).toBe(true);
+  await submitForm();
   expect(mocks.save).toHaveBeenCalledTimes(1);
-  await act(async () =>
-    recoveryButton("최신 비용 확인 후 수정 계속")!.props.onClick(),
-  );
+  await click(recoveryButton("최신 비용 확인 후 수정 계속")!);
   expect(mocks.save).toHaveBeenCalledTimes(1);
-  await submitVersioned();
+  await clickSave();
   expect(mocks.save).toHaveBeenLastCalledWith(
-    expect.objectContaining({
-      memo: "my draft",
-      payerUserIds: [1, 99],
-      totalAmount: "10.01",
-    }),
+    expect.objectContaining({ memo: "my draft", payerUserIds: [1, 99], totalAmount: "10.01" }),
     10,
     2,
   );
 });
-it.each([undefined, { ...base, version: 2, scheduleId: 11 }])(
-  "blocks retry for a deleted or moved conflict target",
-  async (latest) => {
-    await mount();
-    mocks.save.mockRejectedValueOnce(
-      new ExpenseApiError(409, "EXPENSE_CONFLICT", "changed"),
-    );
-    mocks.readLatest.mockResolvedValueOnce(latest);
-    await submitVersioned();
-    await submitVersioned();
-    expect(mocks.save).toHaveBeenCalledTimes(1);
-    expect(recoveryButton("최신 비용 확인 후 수정 계속")).toBeUndefined();
-    expect(mocks.close).not.toHaveBeenCalled();
-  },
-);
+
+it.each([undefined, { ...base, version: 2, scheduleId: 11 }])("blocks retry for a deleted or moved conflict target", async (latest) => {
+  await mount();
+  mocks.save.mockRejectedValueOnce(new ExpenseApiError(409, "EXPENSE_CONFLICT", "changed"));
+  mocks.readLatest.mockResolvedValueOnce(latest);
+  await clickSave();
+  await submitForm();
+  expect(mocks.save).toHaveBeenCalledTimes(1);
+  expect(recoveryButton("최신 비용 확인 후 수정 계속")).toBeUndefined();
+  expect(dialog()!.textContent).toContain(latest ? "연결 위치가 변경되었어요" : "비용이 삭제되었어요");
+  expect(mocks.close).not.toHaveBeenCalled();
+});
+
 it("blocks save after failed conflict read until a fresh read and explicit review", async () => {
   await mount();
-  mocks.save.mockRejectedValueOnce(
-    new ExpenseApiError(409, "EXPENSE_CONFLICT", "changed"),
-  );
+  mocks.save.mockRejectedValueOnce(new ExpenseApiError(409, "EXPENSE_CONFLICT", "changed"));
   mocks.readLatest.mockRejectedValueOnce(new Error("offline"));
-  await submitVersioned();
-  await submitVersioned();
+  await clickSave();
+  expect(dialog()!.textContent).toContain("최신 비용 조회에 실패했어요");
+  await submitForm();
   expect(mocks.save).toHaveBeenCalledTimes(1);
   mocks.readLatest.mockResolvedValueOnce({ ...base, version: 3 });
-  await act(async () =>
-    recoveryButton("최신 비용 다시 조회")!.props.onClick(),
-  );
+  await click(recoveryButton("최신 비용 다시 조회")!);
   expect(mocks.save).toHaveBeenCalledTimes(1);
-  await act(async () =>
-    recoveryButton("최신 비용 확인 후 수정 계속")!.props.onClick(),
-  );
-  await submitVersioned();
+  await click(recoveryButton("최신 비용 확인 후 수정 계속")!);
+  await clickSave();
   expect(mocks.save).toHaveBeenLastCalledWith(expect.anything(), 10, 3);
 });
+
 it.each([{ data: [] }, { data: [{ ...base, version: 1, scheduleId: 11 }] }])(
   "blocks saving a target already known deleted or moved",
   async ({ data }) => {
     await mount();
-    mocks.state = {
-      ...(mocks.state as object),
-      list: { isSuccess: true, data },
-    };
-    await act(async () =>
-      renderer.update(
-        <ExpenseEditor initial={{ expense: base }} onClose={mocks.close} />,
-      ),
-    );
-    await submitVersioned();
+    setState({ list: { isSuccess: true, data } });
+    await render(<ExpenseEditor initial={{ expense: base }} onClose={mocks.close} />);
+    expect(saveButton().disabled).toBe(true);
+    expect(formMessage()).toContain("비용이 삭제되었거나 다른 위치로 이동했어요");
+    await submitForm();
     expect(mocks.save).not.toHaveBeenCalled();
   },
 );
 
 it("reveals every save failure, including a repeated error message", async () => {
-  const scrollIntoView = vi.fn();
-  await mount(base, {}, element => element.type === "p" ? { scrollIntoView } : null);
+  await mount();
   mocks.save.mockRejectedValue(new Error("저장 실패"));
-  const submit = () => renderer.root.findByType("form").props.onSubmit({ preventDefault() {} });
-  await act(async () => { await submit(); });
+  await clickSave();
   expect(scrollIntoView).toHaveBeenCalledWith({ block: "nearest", behavior: "smooth" });
-  await act(async () => { await submit(); });
+  expect((scrollIntoView.mock.contexts[0] as Element).textContent).toBe("저장 실패");
+  await clickSave();
   expect(scrollIntoView).toHaveBeenCalledTimes(2);
-  expect(JSON.stringify(renderer.toJSON())).toContain("저장 실패");
+  expect(formMessage()).toBe("저장 실패");
 });
 
-it("reveals repeated validation errors without smooth scrolling when reduced motion is requested", async () => {
-  vi.stubGlobal("window", { matchMedia: () => ({ matches: true }) });
-  const scrollIntoView = vi.fn();
-  await mount(null, {}, element => element.type === "p" ? { scrollIntoView } : null);
-  for (let attempt = 0; attempt < 2; attempt++) {
-    await act(async () => {
-      await renderer.root.findByType("form").props.onSubmit({ preventDefault() {} });
-    });
-  }
+it("reveals repeated field errors without smooth scrolling when reduced motion is requested", async () => {
+  window.matchMedia = vi.fn(() => ({ matches: true })) as unknown as typeof window.matchMedia;
+  await mount(null);
+  for (let attempt = 0; attempt < 2; attempt++) await clickSave();
   expect(scrollIntoView).toHaveBeenCalledTimes(2);
   expect(scrollIntoView).toHaveBeenLastCalledWith({ block: "nearest", behavior: "instant" });
+  // 첫 칸 오류(금액)를 보여 준다
+  expect((scrollIntoView.mock.contexts[1] as Element).getAttribute("data-slot")).toBe("field-error");
+  expect(fieldOf(scrollIntoView.mock.contexts[1] as Element)).toBe(fieldOf(amountInput()));
   expect(mocks.save).not.toHaveBeenCalled();
 });
 
 it("edits an optional independent name, uses the design name prompt, and explicitly clears it", async () => {
   await mount(null);
-  await act(async () => categorySelect().props.onChange("FOOD"));
-  let name = renderer.root.findByProps({ name: "expense-title" });
-  expect(name.props.placeholder).toBe("제목 없음");
-  expect(name.props.maxLength).toBe(100);
-  await act(async () => name.props.onChange({ target: { value: "점심" } }));
+  expect(nameInput().placeholder).toBe("제목 없음");
+  expect(nameInput().maxLength).toBe(100);
+  await type(nameInput(), "점심");
   await completeNewExpense();
   expect(mocks.save.mock.lastCall?.[0]).toMatchObject({ name: "점심", memo: "" });
   await mount(null);
-  name = renderer.root.findByProps({ name: "expense-title" });
-  await act(async () => name.props.onChange({ target: { value: " \u3000" } }));
+  await type(nameInput(), " 　");
   await completeNewExpense();
   expect(mocks.save.mock.lastCall?.[0].name).toBeNull();
 });
 
 it("omits an unchanged name on PATCH, clears explicitly, and rejects raw overlength before saving", async () => {
   await mount({ ...base, name: "기존 이름" });
-  const submit = async () => act(async () => renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }));
-  await submit();
+  await clickSave();
   expect(mocks.save.mock.lastCall?.[0]).not.toHaveProperty("name");
-  await act(async () => renderer.root.findByProps({ name: "expense-title" }).props.onChange({ target: { value: "" } }));
-  await submit();
+  await type(nameInput(), "");
+  await clickSave();
   expect(mocks.save.mock.lastCall?.[0]).toMatchObject({ name: null, memo: base.memo });
   mocks.save.mockClear();
-  await act(async () => renderer.root.findByProps({ name: "expense-title" }).props.onChange({ target: { value: "😀".repeat(50) + " " } }));
-  await submit();
+  await type(nameInput(), "😀".repeat(50) + " ");
+  await clickSave();
   expect(mocks.save).not.toHaveBeenCalled();
+  expect(nameInput().getAttribute("aria-invalid")).toBe("true");
+  expect(fieldError(nameInput())).toBe("제목은 공백을 포함해 100자 이내로 입력해 주세요.");
 });
diff --git a/src/components/expenses/ExpenseEditor.tsx b/src/components/expenses/ExpenseEditor.tsx
index 4fc3a7e5..8826fae4 100644
--- a/src/components/expenses/ExpenseEditor.tsx
+++ b/src/components/expenses/ExpenseEditor.tsx
@@ -1,15 +1,23 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
-import { useMobileView } from "@/contexts/MobileViewContext";
-import { useSheetDrag } from "@/components/mobile/useSheetDrag";
-import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
-
-import { cn } from "@/lib/utils";
-import { ExpenseSelect } from "./ExpenseSelect";
-import { ExpenseCurrencyPicker } from "./ExpenseCurrencyPicker";
-import { ExpenseAmountInput } from "./ExpenseAmountInput";
-import { CloseIcon } from "@/assets/icons";
+import { revalidateLogic, useForm, useStore } from "@tanstack/react-form";
 import { useEffect, useId, useRef, useState, type FormEvent } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldCount, FieldError, FieldFooter, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  ResponsiveDialog,
+  ResponsiveDialogBody,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+} from "@/components/ui/responsive-dialog";
+import { Spinner } from "@/components/ui/spinner";
+import { Textarea } from "@/components/ui/textarea";
+import { useMobileView } from "@/contexts/MobileViewContext";
 import {
   ExpenseApiError,
   expenseCategories,
@@ -18,22 +26,31 @@ import {
   type ExpenseInput,
 } from "@/lib/api/rooms/expenses";
 import { expenseTitle, normalizeExpenseName, expenseNameError } from "@/lib/expenses/expense-name";
-import { validateExpense } from "@/lib/expenses/expense-policy";
+import {
+  amountError,
+  expenseCategoryError,
+  expenseLinkError,
+  expenseMemoError,
+  expenseRolesError,
+} from "@/lib/expenses/expense-policy";
 import { preferredExpenseCurrency, rememberExpenseCurrency } from "@/lib/expenses/expense-currency-preference";
 import { useSchedulePlanPlaces } from "@/hooks/useRooms";
+
+import { ExpenseSelect } from "./ExpenseSelect";
+import { ExpenseCurrencyPicker } from "./ExpenseCurrencyPicker";
+import { ExpenseAmountInput } from "./ExpenseAmountInput";
 import { useExpenseContext } from "./ExpenseProvider";
-import {
-  ExpenseList,
-  ExpenseRolePicker,
-  expenseButtonClass,
-  expenseInputClass,
-} from "./ExpenseViews";
+import { ExpenseList, ExpenseRolePicker } from "./ExpenseViews";
+
 export type ExpenseEntry = {
   expense?: Expense;
   scheduleId?: number;
   scheduleItemId?: number;
 };
 
+// 카테고리는 새 비용에서 고르기 전까지 빈 값이다
+type ExpenseDraft = Omit<ExpenseInput, "category"> & { category: ExpenseInput["category"] | "" };
+
 function ExpenseEditorConflict({
   conflict,
   conflictMoved,
@@ -53,7 +70,7 @@ function ExpenseEditorConflict({
   let message = "비용이 삭제되었어요. 입력 내용은 복사할 수 있어요.";
   if (pending) message = "최신 비용 확인 중…";
   else if (conflict.failed) message = "최신 비용 조회에 실패했어요. 저장은 중단돼요.";
-  const unavailable = pending ? <LoadingIndicator label={message} /> : <p>{message}</p>;
+  const unavailable = pending ? <Spinner aria-label={message} /> : <p>{message}</p>;
   return (
     <div
       role="alert"
@@ -82,28 +99,23 @@ function ExpenseEditorConflict({
               비용을 다시 열어 주세요.
             </p>
           ) : (
-            <button
-              type="button"
-              className={expenseButtonClass}
+            <Button
+              variant="outline"
+              size="sm"
               disabled={pending || targetChanged}
               onClick={onContinue}
             >
               최신 비용 확인 후 수정 계속
-            </button>
+            </Button>
           )}
         </>
       ) : (
         unavailable
       )}
       {conflict.failed && (
-        <button
-          type="button"
-          className={expenseButtonClass}
-          disabled={pending}
-          onClick={onRecover}
-        >
+        <Button variant="outline" size="sm" disabled={pending} onClick={onRecover}>
           최신 비용 다시 조회
-        </button>
+        </Button>
       )}
     </div>
   );
@@ -114,6 +126,16 @@ function amountPlaceholder(currency: { fractionDigits: number } | undefined) {
   return currency.fractionDigits ? `0.${"0".repeat(currency.fractionDigits)}` : "0";
 }
 
+// 오류 문장이 스크롤 밖이면 보이는 곳까지 스크롤한다(움직임 줄이기 설정이면 바로)
+function revealError(element: Element | null | undefined) {
+  const reduceMotion = typeof window !== "undefined" &&
+    window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  element?.scrollIntoView({
+    block: "nearest",
+    behavior: reduceMotion ? "instant" : "smooth",
+  });
+}
+
 export function ExpenseEditor({
   initial,
   onClose,
@@ -122,6 +144,7 @@ export function ExpenseEditor({
   onClose: () => void;
 }) {
   const context = useExpenseContext();
+  const { isMobileDevice } = useMobileView();
   // This snapshot advances only after the user reviews a conflict response.
   const [original, setOriginal] = useState(initial.expense);
   const [conflict, setConflict] = useState<{
@@ -136,9 +159,8 @@ export function ExpenseEditor({
     )
       ? context.currentUserId
       : undefined;
-  const [body, setBody] = useState<
-    Omit<ExpenseInput, "category"> & { category: ExpenseInput["category"] | "" }
-  >(() =>
+  // 연 순간의 값으로 폼을 채운다. 열린 동안 서버 값이 바뀌어도(충돌 확인 뒤 original 교체 포함) 입력 칸은 다시 채우지 않는다
+  const [defaultValues] = useState<ExpenseDraft>(() =>
     original
       ? { ...original }
       : {
@@ -158,19 +180,7 @@ export function ExpenseEditor({
           participantUserIds: self === undefined ? [] : [self],
         },
   );
-  const manuallySelectedCurrency = useRef<string | null>(null);
-  const preferenceScope = `${context.currentUserId ?? ""}:${context.roomId}`;
-  useEffect(() => {
-    if (original || !context.currencies.isSuccess || manuallySelectedCurrency.current === preferenceScope)
-      return;
-    const selected = preferredExpenseCurrency(
-      context.currentUserId,
-      context.roomId,
-      context.currencies.data ?? [],
-    );
-    setBody((previous) => previous.currency === selected
-      ? previous : { ...previous, currency: selected });
-  }, [original, context.currentUserId, context.roomId, context.currencies.data, context.currencies.isSuccess, preferenceScope]);
+  // 칸 오류 없이 폼 아래에 보이는 문장(준비 안 됨·저장 실패). 칸 오류는 각 칸의 FieldError다
   const [error, setError] = useState("");
   const [errorOccurrence, setErrorOccurrence] = useState(0);
   const errorMessageRef = useRef<HTMLParagraphElement>(null);
@@ -180,36 +190,80 @@ export function ExpenseEditor({
   }
   useEffect(() => {
     if (!error) return;
-    const reduceMotion = typeof window !== "undefined" &&
-      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-    errorMessageRef.current?.scrollIntoView({
-      block: "nearest",
-      behavior: reduceMotion ? "instant" : "smooth",
-    });
+    revealError(errorMessageRef.current);
   }, [error, errorOccurrence]);
   const [saving, setSaving] = useState(false);
   const submitLock = useRef(false);
-  const dialog = useRef<HTMLDialogElement>(null);
-  const titleId = useId();
-  const heading = useRef<HTMLHeadingElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  const formId = useId();
   const errorId = useId();
-  const places = useSchedulePlanPlaces(context.roomId, body.scheduleId);
-  useEffect(() => {
-    const element = dialog.current;
-    const opener = element?.ownerDocument.activeElement;
-    element?.showModal();
-    heading.current?.focus({ preventScroll: true });
-    return () => {
-      element?.close();
-      if (opener && opener instanceof HTMLElement && opener.isConnected)
-        opener.focus();
-    };
-  }, []);
+  const nameId = useId();
+  const amountId = useId();
+  const dayId = useId();
+  const placeId = useId();
+  const categoryId = useId();
+  const memoId = useId();
   const pending = saving || context.busy;
-  const sheetDrag = useSheetDrag(onClose, pending);
-  const { isMobileDevice } = useMobileView();
-  // 바텀시트는 기준 시트처럼 딤을 눌러 닫는다. 시트 안에서 시작한 드래그가 딤에서 끝나면 닫지 않는다.
-  const backdropPress = useRef(false);
+
+  const form = useForm({
+    defaultValues,
+    // 제출 전에는 검증하지 않고, 한 번 제출한 뒤에는 입력할 때마다 그 칸을 다시 검증한다
+    validationLogic: revalidateLogic(),
+    // 어느 칸이든 바꾸면 폼 아래 문장(저장 실패 등)을 지운다(지금 동작)
+    listeners: { onChange: () => reportError("") },
+    onSubmit: async ({ value }) => {
+      const category = value.category;
+      if (!isExpenseCategory(category)) return;
+      setSaving(true);
+      reportError("");
+      // Send only request fields, never id/timestamps from the original response.
+      const payload: ExpenseInput = {
+        expenseGroup: value.expenseGroup,
+        scheduleId: value.scheduleId,
+        scheduleItemId: value.scheduleItemId,
+        totalAmount: value.totalAmount,
+        currency: value.currency,
+        category,
+        ...(original && value.name === original.name ? {} : { name: normalizeExpenseName(value.name) }),
+        memo: value.memo,
+        payerUserIds: value.payerUserIds,
+        participantUserIds: value.participantUserIds,
+      };
+      try {
+        await context.save(payload, original?.id, original?.version);
+        if (!original) rememberExpenseCurrency(context.currentUserId, context.roomId, payload.currency);
+        onClose();
+      } catch (e) {
+        if (
+          e instanceof ExpenseApiError &&
+          (e.code === "EXPENSE_CONFLICT" || e.code === "EXPENSE_NOT_FOUND")
+        ) {
+          await recover();
+        }
+        reportError(e instanceof Error ? e.message : "비용을 저장하지 못했어요.");
+      } finally {
+        setSaving(false);
+      }
+    },
+  });
+  const body = useStore(form.store, (state) => state.values);
+
+  const manuallySelectedCurrency = useRef<string | null>(null);
+  const preferenceScope = `${context.currentUserId ?? ""}:${context.roomId}`;
+  useEffect(() => {
+    if (original || !context.currencies.isSuccess || manuallySelectedCurrency.current === preferenceScope)
+      return;
+    const selected = preferredExpenseCurrency(
+      context.currentUserId,
+      context.roomId,
+      context.currencies.data ?? [],
+    );
+    // 기본 통화를 채우는 것이라 사용자 입력처럼 다루지 않는다(오류 문장 유지, 검증·변경 표시 없음)
+    if (form.getFieldValue("currency") !== selected)
+      form.setFieldValue("currency", selected, { dontUpdateMeta: true, dontRunListeners: true, dontValidate: true });
+  }, [form, original, context.currentUserId, context.roomId, context.currencies.data, context.currencies.isSuccess, preferenceScope]);
+
+  const places = useSchedulePlanPlaces(context.roomId, body.scheduleId);
   const currentTarget = context.list?.data?.find(
     (e) => e.id === original?.id,
   );
@@ -246,343 +300,354 @@ export function ExpenseEditor({
     context.currencies.isSuccess &&
     context.schedulesReady &&
     (body.expenseGroup === "PREPARATION" || places.isSuccess);
-  const currency = context.currencies.data?.find(
-    (c) => c.currency === body.currency,
-  );
-  function change<K extends keyof ExpenseInput>(
-    key: K,
-    value: ExpenseInput[K],
-  ) {
-    setBody((prev) => ({ ...prev, [key]: value }));
-    reportError("");
+  const currencyOf = (code: string) => context.currencies.data?.find((c) => c.currency === code);
+  const currency = currencyOf(body.currency);
+  // 일차 구분·연결 장소 검증에 쓰는 일차 목록. 장소는 지금 고른 일차의 것만 안다
+  const days = (scheduleId: number | null) => context.schedules.map((s) => ({
+    ...s,
+    items:
+      s.scheduleId === scheduleId
+        ? (places.data ?? []).flatMap((p) =>
+            p.itemId === undefined ? [] : [{ itemId: p.itemId }],
+          )
+        : [],
+  }));
+
+  async function submit() {
+    submitLock.current = true;
+    try {
+      await form.handleSubmit();
+    } finally {
+      submitLock.current = false;
+    }
+    // 칸 오류가 스크롤 밖이면 첫 오류를 보여 준다(지금 폼 아래 오류 문장과 같은 처리)
+    if (!form.state.isValid) revealError(formRef.current?.querySelector("[data-slot=field-error]"));
   }
-  async function submit(event: FormEvent) {
+  function handleFormSubmit(event: FormEvent) {
     event.preventDefault();
-    if (submitLock.current || pending) return;
+    // 라이브러리는 연타를 막지 않는다. submitLock은 검증이 비동기로 끝나기 전 두 번째 제출을 막는다
+    if (submitLock.current || form.state.isSubmitting || pending) return;
     if (conflict || targetChanged) return;
     if (!ready) {
       reportError("멤버·통화·일차 정보를 확인한 뒤 다시 시도해 주세요.");
       return;
     }
-    const nameError = expenseNameError(body.name);
-    if (nameError) { reportError(nameError); return; }
-    const category = body.category;
-    if (!isExpenseCategory(category)) {
-      reportError("카테고리를 선택해 주세요.");
-      return;
-    }
-    const days = context.schedules.map((s) => ({
-      ...s,
-      items:
-        s.scheduleId === body.scheduleId
-          ? (places.data ?? []).flatMap((p) =>
-              p.itemId === undefined ? [] : [{ itemId: p.itemId }],
-            )
-          : [],
-    }));
-    const validation = validateExpense(
-      { ...body, category },
-      context.currencies.data ?? [],
-      context.members,
-      original,
-      days,
-    );
-    if (validation) {
-      reportError(validation);
-      return;
-    }
-    submitLock.current = true;
-    setSaving(true);
-    reportError("");
-    // Send only request fields, never id/timestamps from the original response.
-    const payload: ExpenseInput = {
-      expenseGroup: body.expenseGroup,
-      scheduleId: body.scheduleId,
-      scheduleItemId: body.scheduleItemId,
-      totalAmount: body.totalAmount,
-      currency: body.currency,
-      category,
-      ...(original && body.name === original.name ? {} : { name: normalizeExpenseName(body.name) }),
-      memo: body.memo,
-      payerUserIds: body.payerUserIds,
-      participantUserIds: body.participantUserIds,
-    };
-    try {
-      await context.save(payload, original?.id, original?.version);
-      if (!original) rememberExpenseCurrency(context.currentUserId, context.roomId, payload.currency);
-      onClose();
-    } catch (e) {
-      if (
-        e instanceof ExpenseApiError &&
-        (e.code === "EXPENSE_CONFLICT" || e.code === "EXPENSE_NOT_FOUND")
-      ) {
-        await recover();
-      }
-      reportError(e instanceof Error ? e.message : "비용을 저장하지 못했어요.");
-    } finally {
-      submitLock.current = false;
-      setSaving(false);
-    }
+    void submit();
   }
+
   const memberFallback = context.memberStatus === "error"
               ? <output className="block text-body-s-regular mobile:text-body-xs-regular text-dark-gray">멤버 정보 조회 실패. 기존 선택은 유지되며 저장은 잠시 중단돼요.</output>
-              : <LoadingIndicator label="멤버 정보 불러오는 중" className="flex min-h-28 w-full" />;
+              : <Spinner aria-label="멤버 정보 불러오는 중" className="flex min-h-28 w-full" />;
   return (
-    <dialog
-      ref={dialog}
-      style={sheetDrag.surfaceStyle}
-      aria-labelledby={titleId}
-      onCancel={(event) => {
-        event.preventDefault();
-        if (!pending) onClose();
-      }}
-      onPointerDown={(event) => {
-        backdropPress.current = event.button === 0 && event.target === event.currentTarget;
+    <ResponsiveDialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
       }}
-      onPointerUp={(event) => {
-        const startedOnBackdrop = backdropPress.current;
-        backdropPress.current = false;
-        if (isMobileDevice && !pending && startedOnBackdrop && event.target === event.currentTarget) onClose();
-      }}
-      onPointerCancel={() => {
-        backdropPress.current = false;
-      }}
-      className="fixed inset-0 m-auto max-h-[calc(100dvh-3rem)] w-[calc(100%-2rem)] max-w-[640px] overflow-hidden rounded-xl border-0 bg-white p-0 text-black shadow-xl backdrop:bg-black/40 mobile:backdrop:bg-[#0f1724]/35 mobile:backdrop:animate-in mobile:backdrop:fade-in-0 mobile:backdrop:duration-200 mobile:mb-0 mobile:h-[calc(100dvh-92px)] mobile:max-h-[calc(100dvh-92px)] mobile:w-full mobile:max-w-none mobile:rounded-b-none mobile:rounded-t-[20px] mobile:animate-in mobile:slide-in-from-bottom mobile:duration-200"
+      closeDisabled={pending}
+      // PC는 딤을 눌러도 닫지 않고(입력 보호), 시트는 딤을 눌러 닫는다(지금 동작)
+      disablePointerDismissal={!isMobileDevice}
     >
-      <form
-        onSubmit={submit}
-        noValidate
-        className="@container/expense-editor flex max-h-[calc(100dvh-3rem)] min-h-0 flex-col overflow-hidden mobile:h-[calc(100dvh-92px)] mobile:max-h-[calc(100dvh-92px)]"
-        aria-describedby={error ? errorId : undefined}
-      >
-        <BottomSheetDragHandle drag={sheetDrag} className="mobile:pt-3">
-        <div aria-hidden className="mx-auto hidden h-1 w-9 shrink-0 rounded-[2px] bg-border-subtle mobile:block" />
-        <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-6 py-5 mobile:border-0 mobile:px-5 mobile:pt-3 mobile:pb-3">
-          <div>
-          <h2 ref={heading} id={titleId} tabIndex={-1} className="focus:outline-none text-[24px] leading-[34px] mobile:text-title-m mobile:leading-7 font-bold">
-            {original ? "비용 수정" : "비용 추가"}
-          </h2>
-          <p className="mt-1 hidden text-[12px] leading-5 text-text-subtle mobile:block">{original ? expenseTitle(original) : "제목과 결제 정보를 입력해주세요."}</p>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={pending}
-            aria-label="닫기"
-            className="flex size-10 mobile:hidden items-center justify-center rounded-full text-dark-gray cursor-pointer transition-colors enabled:hover:bg-gray-50 enabled:hover:text-black disabled:cursor-not-allowed disabled:opacity-50"
+      <ResponsiveDialogContent size="lg" drawerSize="belowNav">
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>{original ? "비용 수정" : "비용 추가"}</ResponsiveDialogTitle>
+          {/* 보조 줄은 시트에서만 보인다(지금 화면과 같음) */}
+          {isMobileDevice ? (
+            <ResponsiveDialogDescription>
+              {original ? expenseTitle(original) : "제목과 결제 정보를 입력해주세요."}
+            </ResponsiveDialogDescription>
+          ) : null}
+        </ResponsiveDialogHeader>
+        <ResponsiveDialogBody>
+          <form
+            ref={formRef}
+            id={formId}
+            onSubmit={handleFormSubmit}
+            noValidate
+            className="flex flex-col gap-5"
+            aria-describedby={error ? errorId : undefined}
           >
-            <CloseIcon size={24} aria-hidden="true" />
-          </button>
-        </div>
-        </BottomSheetDragHandle>
-        <div className="min-h-0 flex-1 space-y-5 overflow-y-auto overscroll-contain px-8 py-6 [scrollbar-gutter:auto] mobile:px-5 mobile:pt-0">
-        <fieldset disabled={pending} className="min-w-0 space-y-5 mobile:space-y-4">
-          <label className="block text-[12px] leading-4">
-            <span>제목 (선택)</span>
-            <input name="expense-title" aria-label="제목 (선택)" className={`${expenseInputClass} text-[16px] placeholder:text-text-subtle`} maxLength={100}
-              placeholder="제목 없음"
-              value={body.name ?? ""} onChange={(event) => change("name", event.target.value)} />
-          </label>
-          {/* 통화 이름이 숨는 조건(ExpenseCurrencyPicker의 mobile·max-sm)에서는 통화 칸을 코드 3글자 + ▼ 폭으로 줄여 금액 칸을 넓힌다 */}
-          <div className="grid min-w-0 grid-cols-[minmax(0,200px)_minmax(0,1fr)] gap-4 rounded-2xl bg-fill p-4 mobile:grid-cols-[96px_minmax(0,1fr)] max-sm:grid-cols-[96px_minmax(0,1fr)] mobile:gap-3 mobile:p-3">
-            <ExpenseCurrencyPicker
-              value={body.currency}
-              currencies={context.currencies.data ?? []}
-              disabled={pending || !context.currencies.isSuccess}
-              onChange={(value) => {
-                manuallySelectedCurrency.current = preferenceScope;
-                change("currency", value);
-              }}
-            />
-            <label className="block min-w-0 text-[12px] leading-4 font-medium">
-              <span className="block text-[12px] leading-4 font-medium">금액</span>
-              <ExpenseAmountInput
-                value={body.totalAmount}
-                fractionDigits={currency?.fractionDigits}
-                onChange={(value) => change("totalAmount", value)}
-                placeholder={amountPlaceholder(currency)}
-              />
-            </label>
-          </div>
-          {!context.currencies.isSuccess && (
-            <output className={context.currencies.isError ? "text-body-s-regular mobile:text-body-xs-regular text-dark-gray" : "sr-only"}>
-              {context.currencies.isError
-                ? "통화 목록 조회에 실패했어요."
-                : "통화 목록을 불러오는 중…"}
-            </output>
-          )}
-          <div className="space-y-1">
-            <p className="text-[12px] leading-4 font-medium">일차 구분</p>
-            <ExpenseSelect
-              label="일차 구분"
-              disabled={pending}
-              value={
-                body.expenseGroup === "PREPARATION"
-                  ? "PREPARATION"
-                  : String(body.scheduleId)
-              }
-              options={[
-                { value: "PREPARATION", label: "여행 준비" },
-                ...context.schedules.map((s) => ({
-                  value: String(s.scheduleId),
-                  label: `${s.dayNumber}일차`,
-                })),
-              ]}
-              onChange={(value) => {
-                setBody((prev) => ({
-                  ...prev,
-                  expenseGroup:
-                    value === "PREPARATION" ? "PREPARATION" : "TRIP_DAY",
-                  scheduleId: value === "PREPARATION" ? null : Number(value),
-                  scheduleItemId: null,
-                }));
-                reportError("");
-              }}
-            />
-          </div>
-          <div className="space-y-1">
-            <p
-              className={cn(
-                "text-[12px] leading-4 font-medium",
-                body.expenseGroup === "PREPARATION" && "opacity-50",
+            <fieldset disabled={pending} className="flex min-w-0 flex-col gap-5 mobile:gap-4">
+              <form.Field name="name" validators={{ onDynamic: ({ value }) => expenseNameError(value) ?? undefined }}>
+                {(field) => {
+                  const fieldError = field.state.meta.errors[0];
+                  return (
+                    <Field>
+                      <FieldLabel htmlFor={nameId}>제목 (선택)</FieldLabel>
+                      <Input id={nameId} name="expense-title" aria-label="제목 (선택)" maxLength={100}
+                        placeholder="제목 없음"
+                        value={field.state.value ?? ""}
+                        onChange={(event) => field.handleChange(event.target.value)}
+                        onBlur={field.handleBlur}
+                        aria-invalid={fieldError ? true : undefined}
+                        aria-describedby={fieldError ? `${nameId}-error` : undefined} />
+                      <FieldError id={`${nameId}-error`}>{fieldError}</FieldError>
+                    </Field>
+                  );
+                }}
+              </form.Field>
+              {/* 통화 이름이 숨는 조건(ExpenseCurrencyPicker의 mobile·max-sm)에서는 통화 칸을 코드 3글자 + ▼ 폭으로 줄여 금액 칸을 넓힌다.
+                  112 = 트리거 테두리 2 + 좌우 여백 24 + 간격 8 + ▼ 자리 32 + 코드 46(16px 글자에서 가장 넓은 MWK 37 + 여유) */}
+              <div className="grid min-w-0 grid-cols-[minmax(0,200px)_minmax(0,1fr)] items-start gap-4 rounded-2xl bg-fill p-4 mobile:grid-cols-[112px_minmax(0,1fr)] max-sm:grid-cols-[112px_minmax(0,1fr)] mobile:gap-3 mobile:p-3">
+                <form.Field name="currency">
+                  {(field) => (
+                    <ExpenseCurrencyPicker
+                      value={field.state.value}
+                      currencies={context.currencies.data ?? []}
+                      disabled={pending || !context.currencies.isSuccess}
+                      onChange={(value) => {
+                        manuallySelectedCurrency.current = preferenceScope;
+                        field.handleChange(value);
+                      }}
+                    />
+                  )}
+                </form.Field>
+                <form.Field
+                  name="totalAmount"
+                  validators={{
+                    // 통화마다 소수 자리·최대 금액이 달라 통화를 바꾸면 금액도 다시 검증한다
+                    onChangeListenTo: ["currency"],
+                    onDynamic: ({ value, fieldApi }) =>
+                      amountError(value, currencyOf(fieldApi.form.getFieldValue("currency"))) ?? undefined,
+                  }}
+                >
+                  {(field) => {
+                    const fieldError = field.state.meta.errors[0];
+                    return (
+                      <Field>
+                        <FieldLabel htmlFor={amountId}>금액</FieldLabel>
+                        <ExpenseAmountInput
+                          id={amountId}
+                          value={field.state.value}
+                          fractionDigits={currency?.fractionDigits}
+                          onChange={(value) => field.handleChange(value)}
+                          placeholder={amountPlaceholder(currency)}
+                          aria-invalid={fieldError ? true : undefined}
+                          aria-describedby={fieldError ? `${amountId}-error` : undefined}
+                        />
+                        <FieldError id={`${amountId}-error`}>{fieldError}</FieldError>
+                      </Field>
+                    );
+                  }}
+                </form.Field>
+              </div>
+              {!context.currencies.isSuccess && (
+                <output className={context.currencies.isError ? "text-body-s-regular mobile:text-body-xs-regular text-dark-gray" : "sr-only"}>
+                  {context.currencies.isError
+                    ? "통화 목록 조회에 실패했어요."
+                    : "통화 목록을 불러오는 중…"}
+                </output>
               )}
-            >
-              연결 장소 (선택)
-            </p>
-            <ExpenseSelect
-              label="연결 장소 (선택)"
-              value={
-                body.scheduleItemId === null
-                  ? ""
-                  : String(body.scheduleItemId)
-              }
-              disabled={pending || body.expenseGroup === "PREPARATION" || !places.isSuccess}
-              options={[
-                { value: "", label: "장소 연결 없음" },
-                ...(body.expenseGroup === "TRIP_DAY" ? places.data ?? [] : [])
-                  .filter((p) => p.itemId !== undefined)
-                  .map((p) => ({ value: String(p.itemId), label: p.title })),
-              ]}
-              onChange={(value) =>
-                change("scheduleItemId", value ? Number(value) : null)
-              }
-            />
-            {body.expenseGroup === "TRIP_DAY" && !places.isSuccess && (
-              <p className={places.isError ? "text-body-s-regular mobile:text-body-xs-regular text-dark-gray" : "sr-only"}>
-                {places.isError
-                  ? "장소 조회에 실패했어요. 새로고침 후 다시 시도해 주세요."
-                  : "장소 확인 중…"}
+              <Field>
+                <FieldLabel htmlFor={dayId}>일차 구분</FieldLabel>
+                <ExpenseSelect
+                  id={dayId}
+                  label="일차 구분"
+                  disabled={pending}
+                  value={
+                    body.expenseGroup === "PREPARATION"
+                      ? "PREPARATION"
+                      : String(body.scheduleId)
+                  }
+                  options={[
+                    { value: "PREPARATION", label: "여행 준비" },
+                    ...context.schedules.map((s) => ({
+                      value: String(s.scheduleId),
+                      label: `${s.dayNumber}일차`,
+                    })),
+                  ]}
+                  onChange={(value) => {
+                    // 일차를 바꾸면 연결 장소를 비운다. 마지막 setFieldValue가 연결 장소 칸을 다시 검증하고 폼 아래 문장을 지운다
+                    form.setFieldValue("expenseGroup", value === "PREPARATION" ? "PREPARATION" : "TRIP_DAY");
+                    form.setFieldValue("scheduleId", value === "PREPARATION" ? null : Number(value));
+                    form.setFieldValue("scheduleItemId", null);
+                  }}
+                />
+              </Field>
+              <form.Field
+                name="scheduleItemId"
+                validators={{
+                  // 일차는 칸이 따로 없어 일차 구분 onChange가 이 칸 값을 비우면서 다시 검증된다
+                  onDynamic: ({ fieldApi }) => {
+                    const values = fieldApi.form.state.values;
+                    return expenseLinkError(values, days(values.scheduleId)) ?? undefined;
+                  },
+                }}
+              >
+                {(field) => {
+                  const fieldError = field.state.meta.errors[0];
+                  return (
+                    <Field>
+                      <FieldLabel htmlFor={placeId}>연결 장소 (선택)</FieldLabel>
+                      <ExpenseSelect
+                        id={placeId}
+                        label="연결 장소 (선택)"
+                        value={field.state.value === null ? "" : String(field.state.value)}
+                        disabled={pending || body.expenseGroup === "PREPARATION" || !places.isSuccess}
+                        options={[
+                          { value: "", label: "장소 연결 없음" },
+                          ...(body.expenseGroup === "TRIP_DAY" ? places.data ?? [] : [])
+                            .filter((p) => p.itemId !== undefined)
+                            .map((p) => ({ value: String(p.itemId), label: p.title })),
+                        ]}
+                        onChange={(value) => field.handleChange(value ? Number(value) : null)}
+                        aria-invalid={Boolean(fieldError)}
+                      />
+                      <FieldError>{fieldError}</FieldError>
+                      {body.expenseGroup === "TRIP_DAY" && !places.isSuccess && (
+                        <p className={places.isError ? "text-body-s-regular mobile:text-body-xs-regular text-dark-gray" : "sr-only"}>
+                          {places.isError
+                            ? "장소 조회에 실패했어요. 새로고침 후 다시 시도해 주세요."
+                            : "장소 확인 중…"}
+                        </p>
+                      )}
+                    </Field>
+                  );
+                }}
+              </form.Field>
+              <form.Field name="category" validators={{ onDynamic: ({ value }) => expenseCategoryError(value) ?? undefined }}>
+                {(field) => {
+                  const fieldError = field.state.meta.errors[0];
+                  return (
+                    <Field>
+                      <FieldLabel htmlFor={categoryId}>카테고리</FieldLabel>
+                      <ExpenseSelect
+                        id={categoryId}
+                        name="category"
+                        label="카테고리"
+                        placeholder="카테고리 선택"
+                        disabled={pending}
+                        value={field.state.value}
+                        options={[...expenseCategories]}
+                        onChange={(value) => {
+                          if (isExpenseCategory(value)) field.handleChange(value);
+                        }}
+                        aria-invalid={Boolean(fieldError)}
+                      />
+                      <FieldError>{fieldError}</FieldError>
+                    </Field>
+                  );
+                }}
+              </form.Field>
+              {context.memberStatus === "success" ? (
+                // 결제자·부담자는 함께 검증한다(각각 한 명 이상·중복 없음·고를 수 있는 멤버). 오류는 두 칸 아래 하나로 보인다
+                <form.Field
+                  name="payerUserIds"
+                  validators={{
+                    onChangeListenTo: ["participantUserIds"],
+                    onDynamic: ({ fieldApi }) =>
+                      expenseRolesError(fieldApi.form.state.values, context.members, original) ?? undefined,
+                  }}
+                >
+                  {(payers) => (
+                    <div className="flex min-w-0 flex-col gap-1">
+                      <div className="grid min-w-0 grid-cols-2 gap-4 mobile:gap-3">
+                        <ExpenseRolePicker
+                          title="결제자"
+                          members={context.members}
+                          currentUserId={context.currentUserId}
+                          selected={payers.state.value}
+                          original={original?.payerUserIds ?? []}
+                          disabled={pending}
+                          onChange={(ids) => payers.handleChange(ids)}
+                        />
+                        <form.Field name="participantUserIds">
+                          {(participants) => (
+                            <ExpenseRolePicker
+                              title="부담자"
+                              members={context.members}
+                              currentUserId={context.currentUserId}
+                              selected={participants.state.value}
+                              original={original?.participantUserIds ?? []}
+                              disabled={pending}
+                              onChange={(ids) => participants.handleChange(ids)}
+                            />
+                          )}
+                        </form.Field>
+                      </div>
+                      <FieldError>{payers.state.meta.errors[0]}</FieldError>
+                    </div>
+                  )}
+                </form.Field>
+              ) : (
+                memberFallback
+              )}
+              <form.Field name="memo" validators={{ onDynamic: ({ value }) => expenseMemoError(value) ?? undefined }}>
+                {(field) => {
+                  const fieldError = field.state.meta.errors[0];
+                  return (
+                    <Field>
+                      <FieldLabel htmlFor={memoId}>메모 (선택)</FieldLabel>
+                      <Textarea
+                        id={memoId}
+                        rows={3}
+                        maxLength={1000}
+                        value={field.state.value ?? ""}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        onBlur={field.handleBlur}
+                        aria-invalid={fieldError ? true : undefined}
+                        aria-describedby={fieldError ? `${memoId}-error` : undefined}
+                      />
+                      <FieldFooter>
+                        <FieldError id={`${memoId}-error`}>{fieldError}</FieldError>
+                        <FieldCount>{field.state.value?.length ?? 0}/1000</FieldCount>
+                      </FieldFooter>
+                    </Field>
+                  );
+                }}
+              </form.Field>
+            </fieldset>
+            {!context.canManage && context.memberStatus === "success" && (
+              <p role="alert">
+                현재 참여 중인 방장과 멤버만 비용을 변경할 수 있어요.
               </p>
             )}
-          </div>
-          <div className="space-y-1">
-            <p className="text-[12px] leading-4 font-medium">카테고리</p>
-            <ExpenseSelect
-              name="category"
-              label="카테고리"
-              placeholder="카테고리 선택"
-              disabled={pending}
-              value={body.category}
-              options={[...expenseCategories]}
-              onChange={(value) => {
-                if (isExpenseCategory(value)) change("category", value);
-              }}
-            />
-          </div>
-          {context.memberStatus === "success" ? (
-            <div className="grid min-w-0 grid-cols-2 gap-4 mobile:gap-3">
-              <ExpenseRolePicker
-                title="결제자"
-                members={context.members}
-                currentUserId={context.currentUserId}
-                selected={body.payerUserIds}
-                original={original?.payerUserIds ?? []}
-                onChange={(ids) => change("payerUserIds", ids)}
-              />
-              <ExpenseRolePicker
-                title="부담자"
-                members={context.members}
-                currentUserId={context.currentUserId}
-                selected={body.participantUserIds}
-                original={original?.participantUserIds ?? []}
-                onChange={(ids) => change("participantUserIds", ids)}
+            {targetChanged && (
+              <p role="alert">
+                비용이 삭제되었거나 다른 위치로 이동했어요. 입력 내용을 복사한 뒤
+                최신 비용을 다시 열어 주세요.
+              </p>
+            )}
+            {conflict && (
+              <ExpenseEditorConflict
+                conflict={conflict}
+                conflictMoved={conflictMoved}
+                pending={pending}
+                targetChanged={targetChanged}
+                onContinue={() => {
+                  setOriginal(conflict.latest);
+                  setConflict(null);
+                  reportError("");
+                }}
+                onRecover={() => void recover()}
               />
-            </div>
-          ) : (
-            memberFallback
-          )}
-          <label className="block text-[12px] leading-4 font-medium">
-            메모 (선택)
-            <textarea
-              className={`${expenseInputClass} min-h-24 resize-none text-[16px]`}
-              rows={3}
-              maxLength={1000}
-              value={body.memo ?? ""}
-              onChange={(e) => change("memo", e.target.value)}
-            />
-            <span className="block text-right text-body-xs-regular text-dark-gray">
-              {body.memo?.length ?? 0}/1000
-            </span>
-          </label>
-        </fieldset>
-        {!context.canManage && context.memberStatus === "success" && (
-          <p role="alert">
-            현재 참여 중인 방장과 멤버만 비용을 변경할 수 있어요.
-          </p>
-        )}
-        {targetChanged && (
-          <p role="alert">
-            비용이 삭제되었거나 다른 위치로 이동했어요. 입력 내용을 복사한 뒤
-            최신 비용을 다시 열어 주세요.
-          </p>
-        )}
-        {conflict && (
-          <ExpenseEditorConflict
-            conflict={conflict}
-            conflictMoved={conflictMoved}
-            pending={pending}
-            targetChanged={targetChanged}
-            onContinue={() => {
-              setOriginal(conflict.latest);
-              setConflict(null);
-              reportError("");
-            }}
-            onRecover={() => void recover()}
-          />
-        )}
-        {error && (
-          <p
-            key={errorOccurrence}
-            ref={errorMessageRef}
-            id={errorId}
-            role="alert"
-            className="scroll-my-4 text-body-s-regular mobile:text-body-xs-regular text-status-negative"
-          >
-            {error}
-          </p>
-        )}
-        </div>
-        <div className="flex shrink-0 flex-wrap justify-end gap-2 border-t border-gray-border bg-white px-5 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6 [&>button]:h-12 [&>button]:text-[16px] [&>button]:leading-[22px] [&>button]:font-bold mobile:border-0 mobile:pt-3 mobile:pb-[max(1.25rem,env(safe-area-inset-bottom))] [&>button]:min-h-12 [&>button]:min-w-[88px] mobile:[&>button]:flex-1">
-          <button
-            type="button"
-            className={expenseButtonClass}
-            disabled={pending}
-            onClick={onClose}
-          >
-            취소
-          </button>
-          <button
-            type="submit"
-            className={cn(
-              expenseButtonClass,
-              "bg-primary text-white enabled:hover:bg-primary-strong",
             )}
-            disabled={!ready || pending || Boolean(conflict) || targetChanged}
+            {error && (
+              <p
+                key={errorOccurrence}
+                ref={errorMessageRef}
+                id={errorId}
+                role="alert"
+                className="scroll-my-4 text-body-s-regular mobile:text-body-xs-regular text-status-negative"
+              >
+                {error}
+              </p>
+            )}
+          </form>
+        </ResponsiveDialogBody>
+        <ResponsiveDialogFooter>
+          <ResponsiveDialogClose render={<Button variant="weak" />}>취소</ResponsiveDialogClose>
+          <Button
+            type="submit"
+            form={formId}
+            disabled={!ready || Boolean(conflict) || targetChanged}
+            loading={pending}
+            loadingLabel="저장 중"
           >
-            {pending ? "저장 중…" : "저장"}
-          </button>
-        </div>
-      </form>
-    </dialog>
+            저장
+          </Button>
+        </ResponsiveDialogFooter>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
   );
 }
diff --git a/src/components/expenses/ExpenseItemMenu.tsx b/src/components/expenses/ExpenseItemMenu.tsx
index b354cec0..bfccc2b5 100644
--- a/src/components/expenses/ExpenseItemMenu.tsx
+++ b/src/components/expenses/ExpenseItemMenu.tsx
@@ -1,6 +1,12 @@
 "use client";
-import { useEffect, useId, useRef, useState, type KeyboardEvent } from "react";
+import { useRef, useState } from "react";
 import { TrashIcon, WriteIcon } from "@/assets/icons";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 export function ExpenseItemMenu({
   label,
@@ -14,82 +20,35 @@ export function ExpenseItemMenu({
   onDelete: () => void;
 }>) {
   const [open, setOpen] = useState(false);
-  const root = useRef<HTMLDivElement>(null);
   const trigger = useRef<HTMLButtonElement>(null);
-  const id = useId();
-  useEffect(() => {
-    if (!open || !root.current) return;
-    const element = root.current;
-    const outside = (event: PointerEvent) => {
-      if (!element.contains(event.target as Node)) setOpen(false);
-    };
-    element.ownerDocument.addEventListener("pointerdown", outside);
-  return () =>
-      element.ownerDocument.removeEventListener("pointerdown", outside);
-  }, [open]);
+  // 항목이 여는 대화상자(비용 편집·삭제 확인)가 닫힌 뒤 포커스가 이 트리거로 돌아오도록, 동작 전에 트리거로 먼저 옮긴다(지금 동작).
+  // 메뉴 항목은 닫히면서 사라져 대화상자가 그 항목을 복귀 대상으로 잡으면 안 된다
   function choose(action: () => void) {
-    if (busy) return;
     trigger.current?.focus();
-    setOpen(false);
     action();
   }
-  function handleEscape(event: KeyboardEvent<HTMLButtonElement>) {
-    if (event.key !== "Escape" || !open) return;
-    event.preventDefault();
-    event.stopPropagation();
-    setOpen(false);
-    trigger.current?.focus();
-  }
+  // 처리 중(busy)에는 트리거가 비활성이고 열려 있던 메뉴도 숨긴다(지금 동작)
   return (
-    <div
-      ref={root}
-      className="relative z-20 self-start"
-      onBlur={(event) => {
-        if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
-      }}
-
-    >
-      <button
+    <DropdownMenu open={open && !busy} onOpenChange={setOpen}>
+      <DropdownMenuTrigger
         ref={trigger}
-        type="button"
-        onKeyDown={handleEscape}
         aria-label={`${label} 비용 더보기`}
-        aria-expanded={open && !busy}
-        aria-controls={open && !busy ? id : undefined}
         disabled={busy}
-        onClick={() => setOpen(!open)}
         className="flex size-8 @min-[800px]/expense-list:w-6 cursor-pointer items-center justify-center rounded-md text-text-subtle hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary disabled:opacity-50"
       >
         {/* eslint-disable-next-line @next/next/no-img-element -- local Figma vector asset */}
         <img src="/expenses/more.svg" alt="" className="max-w-none" />
-      </button>
-      {open && !busy && (
-        <div
-          id={id}
-          className="absolute right-0 top-8 z-30 w-40 rounded-lg border border-border-subtle bg-white py-1 shadow-lg"
-        >
-          <button
-            type="button"
-        onKeyDown={handleEscape}
-            aria-label="비용 수정"
-            onClick={() => choose(onEdit)}
-            className="flex min-h-11 w-full cursor-pointer items-center gap-2 px-4 text-body-s-regular hover:bg-fill focus-visible:outline-primary"
-          >
-            <WriteIcon size={16} />
-            수정
-          </button>
-          <button
-            type="button"
-        onKeyDown={handleEscape}
-            aria-label="비용 삭제"
-            onClick={() => choose(onDelete)}
-            className="flex min-h-11 w-full cursor-pointer items-center gap-2 px-4 text-body-s-regular text-status-negative hover:bg-fill focus-visible:outline-primary"
-          >
-            <TrashIcon size={16} />
-            삭제
-          </button>
-        </div>
-      )}
-    </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem aria-label="비용 수정" onClick={() => choose(onEdit)}>
+          <WriteIcon />
+          수정
+        </DropdownMenuItem>
+        <DropdownMenuItem variant="destructive" aria-label="비용 삭제" onClick={() => choose(onDelete)}>
+          <TrashIcon />
+          삭제
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }
diff --git a/src/components/expenses/ExpenseLedgerInteractions.test.tsx b/src/components/expenses/ExpenseLedgerInteractions.test.tsx
index 1d3ec6f8..16b9bd7d 100644
--- a/src/components/expenses/ExpenseLedgerInteractions.test.tsx
+++ b/src/components/expenses/ExpenseLedgerInteractions.test.tsx
@@ -27,16 +27,21 @@ let root: Root;
 beforeEach(() => {
   vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
   vi.stubGlobal("matchMedia", () => ({ matches: true }));
-  HTMLDialogElement.prototype.showModal = function () {
-    this.setAttribute("open", "");
-  };
-  HTMLDialogElement.prototype.close = function () {
-    this.removeAttribute("open");
-  };
   host = document.createElement("div");
   document.body.append(host);
   root = createRoot(host);
 });
+// Base UI는 열고 닫은 뒤 포커스·언마운트를 다음 틱(프레임)에 한다
+const flush = () => act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)); });
+const sheet = () => document.querySelector<HTMLElement>('[role="dialog"]');
+// 딤·바깥 누르기: Base UI는 pointerdown·mousedown에서 시작해 click으로 끝난 누르기만 바깥 누르기로 본다
+async function pressOutside(target: HTMLElement) {
+  await act(async () => {
+    for (const type of ["pointerdown", "mousedown", "pointerup", "mouseup", "click"]) {
+      target.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true, button: 0 }));
+    }
+  });
+}
 afterEach(async () => {
   await act(async () => root.unmount());
   host.remove();
@@ -61,34 +66,42 @@ it("chooses a mobile category and restores its trigger, while cancel leaves sele
   }
   await act(async () => root.render(<Filter />));
   const trigger = host.querySelector<HTMLButtonElement>('[role="combobox"]')!;
-  trigger.focus();
-  await act(async () => trigger.click());
-  expect(host.querySelector("dialog[open]")).not.toBeNull();
-  expect(document.activeElement).toBe(host.querySelector("dialog h2"));
-  await act(async () =>
-    host.querySelector<HTMLInputElement>('input[value="FOOD"]')!.click(),
-  );
+  const open = async () => {
+    trigger.focus();
+    await act(async () => trigger.click());
+    await flush();
+    expect(sheet()?.hasAttribute("data-open")).toBe(true);
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  };
+  const expectClosedOnTrigger = async () => {
+    await flush();
+    expect(sheet()).toBeNull();
+    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    expect(document.activeElement).toBe(trigger);
+  };
+  await open();
+  // 첫 포커스는 Base UI 기본대로 시트 안으로 간다
+  expect(sheet()!.contains(document.activeElement)).toBe(true);
+  expect(sheet()!.querySelector("h2")?.textContent).toBe("카테고리");
+  const food = [...sheet()!.querySelectorAll<HTMLElement>('[role="radio"]')]
+    .find((radio) => radio.closest("label")?.textContent?.includes("식비"))!;
+  await act(async () => food.click());
   expect(trigger.textContent).toContain("식비");
-  expect(host.querySelector("dialog")).toBeNull();
-  expect(document.activeElement).toBe(trigger);
-  await act(async () => trigger.click());
+  await expectClosedOnTrigger();
+  await open();
   await act(async () =>
-    host
-      .querySelector("dialog")!
-      .dispatchEvent(new Event("cancel", { cancelable: true })),
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })),
   );
-  expect(host.querySelector("dialog")).toBeNull();
+  await expectClosedOnTrigger();
   expect(trigger.textContent).toContain("식비");
-  await act(async () => trigger.click());
-  await act(async () => host.querySelector<HTMLButtonElement>('[aria-label="카테고리 닫기"]')!.click());
-  expect(host.querySelector("dialog")).toBeNull();
+  await open();
+  await act(async () => document.querySelector<HTMLButtonElement>('[aria-label="카테고리 닫기"]')!.click());
+  await expectClosedOnTrigger();
   expect(trigger.textContent).toContain("식비");
-  expect(document.activeElement).toBe(trigger);
-  await act(async () => trigger.click());
-  await act(async () => host.querySelector("dialog")!.click());
-  expect(host.querySelector("dialog")).toBeNull();
+  await open();
+  await pressOutside(document.querySelector<HTMLElement>('[data-slot="drawer-overlay"]')!);
+  await expectClosedOnTrigger();
   expect(trigger.textContent).toContain("식비");
-  expect(document.activeElement).toBe(trigger);
 });
 
 it("closes the item disclosure on Escape, outside pointer and focus departure without acting", async () => {
@@ -107,29 +120,36 @@ it("closes the item disclosure on Escape, outside pointer and focus departure wi
       </>,
     ),
   );
-  const trigger = host.querySelector<HTMLButtonElement>("[aria-expanded]")!;
-  await act(async () => trigger.click());
-  const editButton = host.querySelector<HTMLButtonElement>(
-    '[aria-label="비용 수정"]',
-  )!;
-  editButton.focus();
+  const trigger = host.querySelector<HTMLButtonElement>('[aria-label="항공 비용 더보기"]')!;
+  const open = async () => {
+    await act(async () => trigger.click());
+    await flush();
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  };
+  await open();
+  // 메뉴는 body로 포털된다. 항목은 Base UI Menu.Item(role="menuitem")
+  const editItem = document.querySelector<HTMLElement>('[role="menuitem"][aria-label="비용 수정"]')!;
+  expect(editItem).not.toBeNull();
+  editItem.focus();
   await act(async () =>
-    editButton.dispatchEvent(
+    editItem.dispatchEvent(
       new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
     ),
   );
+  await flush();
   expect(trigger.getAttribute("aria-expanded")).toBe("false");
   expect(document.activeElement).toBe(trigger);
-  await act(async () => trigger.click());
-  await act(async () =>
-    document.body.dispatchEvent(new Event("pointerdown", { bubbles: true })),
-  );
+  await open();
+  await pressOutside(document.body);
+  await flush();
   expect(trigger.getAttribute("aria-expanded")).toBe("false");
-  await act(async () => trigger.click());
-  await act(async () =>
-    host.querySelector<HTMLButtonElement>("#outside")!.focus(),
-  );
+  await open();
+  // Tab으로 마지막 항목을 지나면 포커스가 메뉴 포털 끝의 포커스 가드로 간다. jsdom은 Tab 이동이 없어 그 가드로 직접 옮긴다
+  const guards = document.querySelectorAll<HTMLElement>("[data-base-ui-portal] [data-base-ui-focus-guard]");
+  await act(async () => guards[guards.length - 1].focus());
+  await flush();
   expect(trigger.getAttribute("aria-expanded")).toBe("false");
+  expect(document.activeElement).toBe(host.querySelector("#outside"));
   expect(edit).not.toHaveBeenCalled();
   expect(remove).not.toHaveBeenCalled();
 });
diff --git a/src/components/expenses/ExpenseNameFallback.test.tsx b/src/components/expenses/ExpenseNameFallback.test.tsx
index d2938af1..24e7d7a8 100644
--- a/src/components/expenses/ExpenseNameFallback.test.tsx
+++ b/src/components/expenses/ExpenseNameFallback.test.tsx
@@ -1,4 +1,7 @@
+// @vitest-environment jsdom
 import { act, create, type ReactTestRenderer } from "react-test-renderer";
+import { act as domAct } from "react";
+import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { ExpenseList } from "./ExpenseViews";
@@ -28,12 +31,22 @@ it.each([26, null])("uses category only in ledger titles regardless of linked pl
   expect(JSON.stringify(renderer.toJSON())).toContain("별도 메모");
 });
 it("keeps scoped expense titles and edit labels category-only, with memo and place separate", async () => {
-  await act(async () => { renderer = create(<QueryClientProvider client={client}><ExpenseScopePanel scope={{ scheduleId: 2, label: "2일차" }} roomId="room" expenses={[expense]} isPending={false} isError={false} canManage busy={false} onAdd={vi.fn()} onEdit={vi.fn()} onDelete={async () => {}} onRetry={vi.fn()} onClose={vi.fn()} /></QueryClientProvider>); });
-  const edit = renderer.root.findAllByType("button").find(b => b.props["aria-label"]?.endsWith("비용 수정"))!;
-  expect(edit.props["aria-label"]).toBe("식비 1,000 KRW 비용 수정");
-  expect(renderer.root.findByType("li").findAllByType("span").some(span => span.children.length === 1 && span.children[0] === "식비")).toBe(true);
-  expect(JSON.stringify(renderer.toJSON())).toContain("별도 메모");
-  expect(JSON.stringify(renderer.toJSON())).toContain("경복궁");
+  // 비용 목록 대화상자는 Base UI Dialog라 body로 포털된다(react-test-renderer는 포털을 못 그린다)
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  try {
+    await domAct(async () => root.render(<QueryClientProvider client={client}><ExpenseScopePanel scope={{ scheduleId: 2, label: "2일차" }} roomId="room" expenses={[expense]} isPending={false} isError={false} canManage busy={false} onAdd={vi.fn()} onEdit={vi.fn()} onDelete={async () => {}} onRetry={vi.fn()} onClose={vi.fn()} /></QueryClientProvider>));
+    const dialog = document.querySelector<HTMLElement>('[role="dialog"]')!;
+    const edit = [...dialog.querySelectorAll("button")].find(b => b.getAttribute("aria-label")?.endsWith("비용 수정"))!;
+    expect(edit.getAttribute("aria-label")).toBe("식비 1,000 KRW 비용 수정");
+    expect([...dialog.querySelector("li")!.querySelectorAll("span")].some(span => span.childNodes.length === 1 && span.textContent === "식비")).toBe(true);
+    expect(dialog.textContent).toContain("별도 메모");
+    expect(dialog.textContent).toContain("경복궁");
+  } finally {
+    await domAct(async () => root.unmount());
+    host.remove();
+  }
 });
 
 it("uses persisted names for ledger titles while keeping category and memo separate", async () => {
diff --git a/src/components/expenses/ExpensePanel.test.tsx b/src/components/expenses/ExpensePanel.test.tsx
index 153cc68e..3b5fa3f0 100644
--- a/src/components/expenses/ExpensePanel.test.tsx
+++ b/src/components/expenses/ExpensePanel.test.tsx
@@ -1,11 +1,12 @@
+// @vitest-environment jsdom
 vi.mock("@/lib/api/config", () => ({ API_BASE: "http://fixture" }));
-import { ExpenseSelect } from "./ExpenseSelect";
-import { act, create, type ReactTestRenderer } from "react-test-renderer";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { ExpenseApiError, type Expense } from "@/lib/api/rooms/expenses";
 import { ExpensePanel } from "./ExpensePanel";
-import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
-beforeEach(() => vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true));
+import contractFixture from "./krw-contract.fixture.json";
+
 const mocks = vi.hoisted(() => ({
   state: null as unknown,
   remove: vi.fn(),
@@ -13,72 +14,26 @@ const mocks = vi.hoisted(() => ({
   open: vi.fn(),
   refresh: vi.fn(),
 }));
-
-it("opens an expense in the selected trip day", async () => {
-  await mount();
-  mocks.open.mockClear();
-  await act(async () =>
-    renderer.root.findByProps({ "aria-label": "Day 1 비용" }).props.onClick(),
-  );
-  const add = renderer.root
-    .findAllByType("button")
-    .find((b) => b.props["aria-label"] === "비용 추가");
-  expect(add).toBeDefined();
-  await act(async () => add!.props.onClick());
-  expect(mocks.open).toHaveBeenCalledWith({ scheduleId: 10 });
-});
-
-it("keeps a single reference travel total visible while filtering", async () => {
-  await mount();
-  mocks.state = {
-    ...(mocks.state as object),
-    summary: {
-      isSuccess: true,
-      data: {
-        currencies: [
-          {
-            currency: "USD",
-            totalAmount: "999999999999999.99",
-            categories: [],
-            days: [],
-            individuals: [],
-            transfers: [],
-          },
-          {
-            currency: "KRW",
-            totalAmount: "12300",
-            categories: [],
-            days: [],
-            individuals: [],
-            transfers: [],
-          },
-        ],
-      },
-    },
-  };
-  await act(async () => renderer.update(<ExpensePanel />));
-  await act(async () =>
-    renderer.root.findAllByType("button").find(b => b.props["aria-label"] === "여행 준비 비용")!.props.onClick(),
-  );
-  const text = JSON.stringify(renderer.toJSON());
-  expect(text).not.toContain("999,999,999,999,999.99");
-  expect(text).not.toContain("12,300");
-  expect(text).toContain("501");
-  expect(text.match(/여행 전체 비용/g)).toHaveLength(1);
-  expect(text).not.toContain("원화 참고 비용");
-});
 vi.mock("./ExpenseProvider", () => ({
   useExpenseContext: () => mocks.state,
   ExpenseEntryButton: () => <button>준비 비용 추가</button>,
 }));
-vi.mock("@/components/settings/ConfirmDialog", () => ({
-  ConfirmDialog: () => null,
-}));
-let renderer: ReactTestRenderer;
+
+// 메뉴·정산 요약 대화상자·삭제 확인창은 Base UI라 body로 포털된다. react-dom으로 그리고 document에서 찾는다
+let host: HTMLDivElement;
+let root: Root;
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
 afterEach(async () => {
-  if (renderer) await act(async () => renderer.unmount());
+  await act(async () => root.unmount());
+  host.remove();
   vi.unstubAllGlobals();
 });
+
 async function mount() {
   const base = {
     version: 0,
@@ -145,52 +100,139 @@ async function mount() {
   };
   mocks.remove.mockReset();
   mocks.readLatest.mockReset();
-  await act(async () => {
-    renderer = create(<ExpensePanel />);
-  });
+  await rerender();
+}
+async function rerender() {
+  await act(async () => root.render(<ExpensePanel />));
 }
+// Base UI는 열고 닫은 뒤 포커스 이동·언마운트를 다음 틱에 한다
+const flush = () => act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)); });
+
+// 접근성 이름: aria-labelledby(Button loading이면 loadingLabel span) → aria-label → 글자
+function accessibleName(element: Element) {
+  const labelledBy = element.getAttribute("aria-labelledby");
+  if (labelledBy)
+    return labelledBy.split(/\s+/).map((id) => document.getElementById(id)?.textContent ?? "").join(" ").trim();
+  return element.getAttribute("aria-label") ?? element.textContent?.trim() ?? "";
+}
+function buttonsIn(scope: ParentNode = document) {
+  return [...scope.querySelectorAll<HTMLElement>('button, [role="menuitem"]')];
+}
+function button(name: string, scope: ParentNode = document) {
+  return buttonsIn(scope).find((element) => accessibleName(element) === name);
+}
+async function press(name: string, scope: ParentNode = document) {
+  const target = button(name, scope);
+  expect(target, `button: ${name}`).toBeDefined();
+  await act(async () => target!.click());
+  await flush();
+}
+const text = () => document.body.textContent ?? "";
+const rows = () => host.querySelectorAll("li");
+const expenseRows = (id: number) => host.querySelectorAll(`[data-expense-id="${id}"]`);
+const summaryDialog = () => document.querySelector<HTMLElement>('[role="dialog"]');
+const confirmDialog = () => document.querySelector<HTMLElement>('[role="alertdialog"]');
+const selectedTotal = () => host.querySelector<HTMLElement>('[aria-label="선택한 비용 합계"]')!;
+// ExpenseKrwAmount는 원화 합계가 아직 없으면 '원화 금액 확인 중' 대시를 그린다
+const krwPending = (scope: Element) => scope.querySelector('[aria-label="원화 금액 확인 중"]') !== null;
+
+async function openFirstMenu() {
+  const trigger = buttonsIn(host).find((element) => element.getAttribute("aria-label")?.endsWith("비용 더보기"));
+  expect(trigger).toBeDefined();
+  await act(async () => trigger!.click());
+  await flush();
+}
+async function answerConfirm(confirmed: boolean) {
+  const dialog = confirmDialog();
+  expect(dialog).not.toBeNull();
+  await press(confirmed ? "삭제" : "취소", dialog!);
+}
+async function chooseCategory(label: string) {
+  const trigger = host.querySelector<HTMLElement>('[role="combobox"][aria-label="카테고리 필터"]');
+  expect(trigger).not.toBeNull();
+  await act(async () => trigger!.click());
+  await flush();
+  const option = [...document.querySelectorAll<HTMLElement>('[role="option"]')].find((node) => node.textContent === label);
+  expect(option, `option: ${label}`).toBeDefined();
+  await act(async () => option!.click());
+  await flush();
+}
+
+it("opens an expense in the selected trip day", async () => {
+  await mount();
+  mocks.open.mockClear();
+  await press("Day 1 비용");
+  await press("비용 추가");
+  expect(mocks.open).toHaveBeenCalledWith({ scheduleId: 10 });
+});
+
+it("keeps a single reference travel total visible while filtering", async () => {
+  await mount();
+  mocks.state = {
+    ...(mocks.state as object),
+    summary: {
+      isSuccess: true,
+      data: {
+        currencies: [
+          {
+            currency: "USD",
+            totalAmount: "999999999999999.99",
+            categories: [],
+            days: [],
+            individuals: [],
+            transfers: [],
+          },
+          {
+            currency: "KRW",
+            totalAmount: "12300",
+            categories: [],
+            days: [],
+            individuals: [],
+            transfers: [],
+          },
+        ],
+      },
+    },
+  };
+  await rerender();
+  await press("여행 준비 비용");
+  expect(text()).not.toContain("999,999,999,999,999.99");
+  expect(text()).not.toContain("12,300");
+  expect(text()).toContain("501");
+  expect(text().match(/여행 전체 비용/g)).toHaveLength(1);
+  expect(text()).not.toContain("원화 참고 비용");
+});
+
 it("filters preparation and trip day without altering server summary scope", async () => {
   await mount();
-  await act(async () =>
-    renderer.root.findAllByType("button").find(b => b.props["aria-label"] === "여행 준비 비용")!.props.onClick(),
-  );
-  expect(renderer.root.findAllByType("li")).toHaveLength(1);
-  expect(JSON.stringify(renderer.toJSON())).toContain("준비");
-  expect(JSON.stringify(renderer.toJSON())).not.toContain("현장");
-  await act(async () =>
-    renderer.root
-      .findAllByType("button")
-      .find((b) => b.children.includes("정산 요약"))!
-      .props.onClick(),
-  );
-  expect(JSON.stringify(renderer.toJSON())).not.toContain("방 전체 비용을 기준으로 정산해요.");
+  await press("여행 준비 비용");
+  expect(rows()).toHaveLength(1);
+  expect(host.textContent).toContain("준비");
+  expect(host.textContent).not.toContain("현장");
+  await press("정산 요약");
+  expect(summaryDialog()).not.toBeNull();
+  expect(text()).not.toContain("방 전체 비용을 기준으로 정산해요.");
 });
+
 it("requires confirmation and preserves list with visible deletion failure", async () => {
   await mount();
   await openFirstMenu();
-  let button = renderer.root
-    .findAllByType("button")
-    .find((b) => b.props["aria-label"] === "비용 삭제")!;
-  await act(async () => button.props.onClick());
+  await press("비용 삭제");
   await answerConfirm(false);
   expect(mocks.remove).not.toHaveBeenCalled();
-  expect(renderer.root.findAllByType(ConfirmDialog)).toHaveLength(0);
+  expect(confirmDialog()).toBeNull();
   mocks.remove.mockRejectedValue(new Error("삭제 실패"));
   await openFirstMenu();
-  button = renderer.root
-    .findAllByType("button")
-    .find((b) => b.props["aria-label"] === "비용 삭제")!;
-  await act(async () => button.props.onClick());
+  await press("비용 삭제");
   await answerConfirm(true);
-  expect(JSON.stringify(renderer.toJSON())).toContain("삭제 실패");
-  expect(renderer.root.findAllByType("li")).toHaveLength(2);
+  expect(confirmDialog()).toBeNull();
+  expect(host.textContent).toContain("삭제 실패");
+  expect(rows()).toHaveLength(2);
 });
 
 it("returns to all expenses when the selected day is deleted remotely", async () => {
   await mount();
-  await act(async () =>
-    renderer.root.findByProps({ "aria-label": "Day 1 비용" }).props.onClick(),
-  );
+  await press("Day 1 비용");
   const state = mocks.state as { list: { data: { id: number }[] } };
   mocks.state = {
     ...state,
@@ -201,25 +243,11 @@ it("returns to all expenses when the selected day is deleted remotely", async ()
       data: state.list.data.filter((e) => e.id === 1),
     },
   };
-  await act(async () => renderer.update(<ExpensePanel />));
-  expect(renderer.root.findByProps({ "aria-label": "전체 비용" }).props["aria-pressed"]).toBe(true);
-  expect(renderer.root.findAllByType("li")).toHaveLength(1);
+  await rerender();
+  expect(button("전체 비용")?.getAttribute("aria-pressed")).toBe("true");
+  expect(rows()).toHaveLength(1);
 });
 
-async function openFirstMenu() {
-  await act(async () => renderer.root.findAllByType("button").find(b => b.props["aria-label"]?.endsWith("비용 더보기"))!.props.onClick());
-}
-async function answerConfirm(confirmed: boolean) {
-  const dialog = renderer.root.findByType(ConfirmDialog);
-  await act(async () =>
-    confirmed ? dialog.props.onConfirm() : dialog.props.onCancel(),
-  );
-}
-function panelButton(label: string) {
-  return renderer.root
-    .findAllByType("button")
-    .find((b) => b.children.includes(label) || (label === "삭제" && b.props["aria-label"] === "비용 삭제"));
-}
 it("retains deletion selection and requires confirmation of the fetched version without automatic retry", async () => {
   await mount();
   const state = mocks.state as { list: { data: Expense[] } };
@@ -233,11 +261,11 @@ it("retains deletion selection and requires confirmation of the fetched version
   );
   mocks.readLatest.mockResolvedValueOnce(latest);
   await openFirstMenu();
-  await act(async () => panelButton("삭제")!.props.onClick());
+  await press("비용 삭제");
   await answerConfirm(true);
   expect(mocks.readLatest).toHaveBeenCalledWith(1);
   expect(mocks.remove).toHaveBeenCalledTimes(1);
-  expect(JSON.stringify(renderer.toJSON())).toContain("remote delete review");
+  expect(host.textContent).toContain("remote delete review");
   mocks.state = {
     ...state,
     list: {
@@ -245,14 +273,15 @@ it("retains deletion selection and requires confirmation of the fetched version
       data: [{ ...latest, version: 4 }, state.list.data[1]],
     },
   };
-  await act(async () => renderer.update(<ExpensePanel />));
-  await act(async () => panelButton("최신 비용 확인 후 삭제")!.props.onClick());
+  await rerender();
+  await press("최신 비용 확인 후 삭제");
   await answerConfirm(false);
   expect(mocks.remove).toHaveBeenCalledTimes(1);
-  await act(async () => panelButton("최신 비용 확인 후 삭제")!.props.onClick());
+  await press("최신 비용 확인 후 삭제");
   await answerConfirm(true);
   expect(mocks.remove).toHaveBeenLastCalledWith(latest);
 });
+
 it.each(["missing", "offline"])(
   "does not retry delete when recovery is %s",
   async (mode) => {
@@ -263,10 +292,10 @@ it.each(["missing", "offline"])(
     if (mode === "missing") mocks.readLatest.mockResolvedValueOnce(undefined);
     else mocks.readLatest.mockRejectedValueOnce(new Error("offline"));
     await openFirstMenu();
-    await act(async () => panelButton("삭제")!.props.onClick());
+    await press("비용 삭제");
     await answerConfirm(true);
     expect(mocks.remove).toHaveBeenCalledTimes(1);
-    expect(panelButton("최신 비용 확인 후 삭제")).toBeUndefined();
+    expect(button("최신 비용 확인 후 삭제")).toBeUndefined();
   },
 );
 
@@ -299,45 +328,37 @@ it("keeps budget and original-currency settlement without comparison or explanat
       },
     },
   };
-  await act(async () => renderer.update(<ExpensePanel />));
-  expect(JSON.stringify(renderer.toJSON())).toContain("전체 예산");
-  expect(renderer.root.findAllByProps({ "aria-label": "예산 비교" })).toHaveLength(0);
-  await act(async () =>
-    renderer.root
-      .findAllByType("button")
-      .find((b) => b.children.includes("정산 요약"))!
-      .props.onClick(),
-  );
-  const rendered = JSON.stringify(renderer.toJSON());
-  expect(rendered).toContain("0.50");
-  expect(rendered).toContain("USD");
-  expect(rendered).toContain("KRW 정산");
-  expect(rendered).toContain("500");
-  expect(rendered).not.toContain("참고 잔여 예산");
-  expect(rendered).not.toContain("통화별로 따로 정산");
-  expect(rendered).not.toContain("아래 금액을 확인하고 직접 송금");
+  await rerender();
+  expect(host.textContent).toContain("전체 예산");
+  expect(document.querySelectorAll('[aria-label="예산 비교"]')).toHaveLength(0);
+  await press("정산 요약");
+  const dialog = summaryDialog()!;
+  expect(dialog.textContent).toContain("USD 0.50");
+  expect(dialog.querySelector('[aria-label="KRW 정산"]')?.textContent).toContain("500");
+  expect(text()).not.toContain("참고 잔여 예산");
+  expect(text()).not.toContain("통화별로 따로 정산");
+  expect(text()).not.toContain("아래 금액을 확인하고 직접 송금");
 });
+
 it("closes the expense panel after room access is revoked", async () => {
   await mount();
   mocks.state = { ...(mocks.state as object), revoked: true };
-  await act(async () => renderer.update(<ExpensePanel />));
-  expect(renderer.toJSON()).toBeNull();
+  await rerender();
+  expect(host.childElementCount).toBe(0);
 });
 
-
 it.each(["ready", "pending", "disconnected"])(
   "does not offer a manual expense refresh while sync is %s",
   async (syncStatus) => {
     await mount();
     mocks.state = { ...(mocks.state as object), syncStatus };
-    await act(async () => renderer.update(<ExpensePanel />));
-    expect(renderer.root.findAllByType("button").filter((button) =>
-      /새로고침|조회 다시 시도/.test(button.props["aria-label"] ?? ""),
+    await rerender();
+    expect(buttonsIn().filter((element) =>
+      /새로고침|조회 다시 시도/.test(accessibleName(element)),
     )).toHaveLength(0);
-    const rendered = JSON.stringify(renderer.toJSON());
-    expect(rendered).not.toContain("새로고침");
-    if (syncStatus === "disconnected") expect(rendered).toContain("연결 복구 안내");
-    if (syncStatus === "pending") expect(rendered).toContain("최신 비용 확인 중");
+    expect(text()).not.toContain("새로고침");
+    if (syncStatus === "disconnected") expect(text()).toContain("연결 복구 안내");
+    if (syncStatus === "pending") expect(text()).toContain("최신 비용 확인 중");
   },
 );
 
@@ -352,21 +373,21 @@ it.each(["sync", "members", "list", "summary", "budget", "krwSummary"])(
         : failed === "members" ? { memberStatus: "error", canManage: false }
         : { [failed]: { ...(healthy[failed] as object), isSuccess: false, isError: true } }),
     };
-    await act(async () => renderer.update(<ExpensePanel />));
-    expect(JSON.stringify(renderer.toJSON())).not.toContain("새로고침");
-    const retry = () => renderer.root.findAllByType("button")
-      .find((button) => /조회 다시 시도/.test(button.props["aria-label"] ?? ""));
+    await rerender();
+    expect(text()).not.toContain("새로고침");
+    const retry = () => buttonsIn(host).find((element) => /조회 다시 시도/.test(accessibleName(element)));
     expect(retry()).toBeDefined();
     let finish!: () => void;
     mocks.refresh.mockImplementationOnce(() => new Promise<void>((resolve) => { finish = resolve; }));
-    await act(async () => retry()!.props.onClick());
-    expect(retry()!.props.disabled).toBe(true);
+    await act(async () => retry()!.click());
+    // 패널(대화상자 밖) 재시도는 문구와 native disabled로 진행을 보인다
+    expect((retry() as HTMLButtonElement).disabled).toBe(true);
+    expect(accessibleName(retry()!)).toBe("조회 다시 시도 중");
     await act(async () => { mocks.state = healthy; finish(); });
     expect(retry()).toBeUndefined();
   },
 );
 
-
 it.each(["initial load", "change", "reconnect"])(
   "removes the top success explanation and its layout slot after %s succeeds",
   async (scenario) => {
@@ -377,20 +398,18 @@ it.each(["initial load", "change", "reconnect"])(
         ...healthy,
         syncStatus: scenario === "reconnect" ? "disconnected" : "pending",
       };
-      await act(async () => renderer.update(<ExpensePanel />));
-      expect(JSON.stringify(renderer.toJSON())).toContain(
+      await rerender();
+      expect(text()).toContain(
         scenario === "reconnect" ? "연결 복구 안내" : "최신 비용 확인 중",
       );
       mocks.state = healthy;
-      await act(async () => renderer.update(<ExpensePanel />));
+      await rerender();
     }
-    const section = renderer.root.findByProps({ "aria-label": "비용 및 정산" });
-    const first = section.children[0];
-    expect(typeof first).not.toBe("string");
-    if (typeof first === "string") throw new Error("Expected panel heading");
-    expect(first.findAllByType("h1").map((heading) => heading.children.join("")))
+    const section = host.querySelector('section[aria-label="비용 및 정산"]')!;
+    const first = section.firstElementChild!;
+    expect([...first.querySelectorAll("h1")].map((heading) => heading.textContent))
       .toEqual(["가계부"]);
-    expect(JSON.stringify(renderer.toJSON())).not.toMatch(/최근 비용 조회 완료|30초 간격/);
+    expect(text()).not.toMatch(/최근 비용 조회 완료|30초 간격/);
   },
 );
 
@@ -404,17 +423,14 @@ it("opens the whole-trip settlement without extra analysis or scope menus", asyn
       transfers: [{ fromUserId: 3, toUserId: 4, amount: "12345" }],
     }] } },
   };
-  await act(async () => renderer.update(<ExpensePanel />));
-  const click = async (label: string) => act(async () => {
-    renderer.root.findAllByType("button").find(b => b.children.includes(label))!.props.onClick();
-  });
-  await click("정산 요약");
-  expect(JSON.stringify(renderer.toJSON())).toContain("12,345");
-  const labels = renderer.root.findAllByType("button").map(button => button.children.filter(child => typeof child === "string").join(""));
+  await rerender();
+  await press("정산 요약");
+  expect(summaryDialog()?.textContent).toContain("12,345");
+  const labels = [...document.querySelectorAll('button, [role="tab"]')].map(accessibleName);
   expect(labels).not.toContain("비용 분석");
   expect(labels).not.toContain("내 정산");
-  expect(JSON.stringify(renderer.toJSON())).not.toContain("정산 보기 옵션");
-
+  expect(document.querySelector('[role="tablist"]')).toBeNull();
+  expect(text()).not.toContain("정산 보기 옵션");
 });
 
 it.each([
@@ -424,10 +440,10 @@ it.each([
 ])("announces %s sync status with a native block output", async (syncStatus, message) => {
   await mount();
   mocks.state = { ...(mocks.state as object), syncStatus };
-  await act(async () => renderer.update(<ExpensePanel />));
-  const output = renderer.root.findAllByType("output").find(node => node.children.join("").startsWith(message));
+  await rerender();
+  const output = [...host.querySelectorAll("output")].find((node) => node.textContent?.startsWith(message));
   expect(output).toBeDefined();
-  expect(output!.props.style).toEqual({ display: "block" });
+  expect(output!.style.display).toBe("block");
 });
 
 it("intersects day and category filters while keeping the trip budget visible", async () => {
@@ -437,32 +453,57 @@ it("intersects day and category filters while keeping the trip budget visible",
     { ...state.list.data[0], category: "FOOD" },
     { ...state.list.data[1], category: "OTHER" },
   ] } };
-  await act(async () => renderer.update(<ExpensePanel />));
-  const category = () => renderer.root.findAllByType(ExpenseSelect).find(s => s.props.label === "카테고리 필터")!;
-  expect(category()).toBeDefined();
-  await act(async () => category().props.onChange("FOOD"));
-  expect(renderer.root.findAllByProps({ "data-expense-id": 1 })).toHaveLength(1);
-  expect(renderer.root.findAllByProps({ "data-expense-id": 2 })).toHaveLength(0);
-  await act(async () => renderer.root.findByProps({ "aria-label": "Day 1 비용" }).props.onClick());
-  expect(renderer.root.findAllByProps({ "data-expense-id": 1 })).toHaveLength(0);
-  expect(JSON.stringify(renderer.toJSON())).toContain("501");
+  await rerender();
+  await chooseCategory("식비");
+  expect(expenseRows(1)).toHaveLength(1);
+  expect(expenseRows(2)).toHaveLength(0);
+  await press("Day 1 비용");
+  expect(expenseRows(1)).toHaveLength(0);
+  expect(host.textContent).toContain("501");
 });
 
 it("can retry a failed summary from inside its modal", async () => {
   await mount();
   mocks.refresh.mockClear();
   mocks.state = { ...(mocks.state as object), summary: { isError: true, isSuccess: false } };
-  await act(async () => renderer.update(<ExpensePanel />));
-  await act(async () => panelButton("정산 요약")!.props.onClick());
-  const dialog = renderer.root.findByType("dialog");
-  const retry = dialog.findAllByType("button").find(b => b.children.includes("조회 다시 시도"));
-  expect(retry).toBeDefined();
-  await act(async () => retry!.props.onClick());
+  await rerender();
+  await press("정산 요약");
+  const dialog = summaryDialog()!;
+  expect(button("조회 다시 시도", dialog)).toBeDefined();
+  await press("조회 다시 시도", dialog);
   expect(mocks.refresh).toHaveBeenCalledOnce();
 });
 
-import contractFixture from "./krw-contract.fixture.json";
-import { ExpenseKrwAmount } from "./ExpenseKrw";
+it("shows retry progress in the summary modal button while the panel retry stays natively disabled", async () => {
+  await mount();
+  mocks.refresh.mockReset();
+  mocks.state = { ...(mocks.state as object), summary: { isError: true, isSuccess: false } };
+  await rerender();
+  await press("정산 요약");
+  const dialog = summaryDialog()!;
+  let finish!: () => void;
+  mocks.refresh.mockImplementationOnce(() => new Promise<void>((resolve) => { finish = resolve; }));
+  await press("조회 다시 시도", dialog);
+  // 대화상자 안 버튼은 progress(loading): 접근성 이름은 loadingLabel, 포커스는 남고 native disabled 대신 aria-disabled
+  const modalRetry = button("조회 다시 시도 중", dialog) as HTMLButtonElement;
+  expect(modalRetry).toBeDefined();
+  expect(modalRetry.getAttribute("aria-busy")).toBe("true");
+  expect(modalRetry.getAttribute("aria-disabled")).toBe("true");
+  expect(modalRetry.disabled).toBe(false);
+  // 패널(대화상자 밖) 재시도는 지금처럼 문구가 바뀌고 native disabled
+  const panelRetry = button("조회 다시 시도 중", host) as HTMLButtonElement;
+  expect(panelRetry).toBeDefined();
+  expect(panelRetry.disabled).toBe(true);
+  expect(panelRetry.hasAttribute("aria-busy")).toBe(false);
+  expect(panelRetry.textContent).toContain("조회 다시 시도 중");
+  // 진행 중에 다시 눌러도 요청은 한 번이다
+  await act(async () => modalRetry.click());
+  expect(mocks.refresh).toHaveBeenCalledOnce();
+  await act(async () => finish());
+  expect(button("조회 다시 시도", dialog)?.hasAttribute("aria-busy")).toBe(false);
+  expect(button("조회 다시 시도", host)).toBeDefined();
+});
+
 it("renders a complete filtered snapshot independently of a partial whole room and hides it on filter transition", async () => {
   await mount();
   const whole = { ...contractFixture.response, convertedTotalKrw: "508", isComplete: false, missingCurrencies: ["KWD"], stale: true };
@@ -470,77 +511,80 @@ it("renders a complete filtered snapshot independently of a partial whole room a
   const setKrwFilters = vi.fn();
   mocks.state = { ...(mocks.state as object), krwSummary: { data: whole, isSuccess: true },
     krwFilters: {}, setKrwFilters, filteredKrwSummary: { data: selected, isSuccess: true } };
-  await act(async () => renderer.update(<ExpensePanel />));
-  const selectedTotal = renderer.root.findByProps({ "aria-label": "선택한 비용 합계" }).findByType(ExpenseKrwAmount);
-  expect(selectedTotal.props.total).toEqual(selected.filtered);
-  const allAmounts = renderer.root.findAllByType(ExpenseKrwAmount);
-  expect(allAmounts.some(node => node.props.total?.convertedTotalKrw === "508" && !node.props.total.isComplete)).toBe(true);
-  await act(async () => renderer.root.findByProps({ "aria-label": "Day 1 비용" }).props.onClick());
+  await rerender();
+  expect(selectedTotal().textContent).toContain("501원");
+  expect(selectedTotal().textContent).not.toContain("508원");
+  // 방 전체 합계는 부분 합계(508원)와 원화 합계 안내를 함께 보여 준다
+  const wholeAmount = [...host.querySelectorAll("span")].find((span) => span.textContent === "508원");
+  expect(wholeAmount?.parentElement?.querySelector('button[aria-label="원화 합계 안내"]')).not.toBeNull();
+  await press("Day 1 비용");
   expect(setKrwFilters).toHaveBeenLastCalledWith({ expenseGroup: "TRIP_DAY", scheduleId: 10 });
-  expect(renderer.root.findByProps({ "aria-label": "선택한 비용 합계" }).findByType(ExpenseKrwAmount).props.total).toBeUndefined();
+  expect(krwPending(selectedTotal())).toBe(true);
+  expect(selectedTotal().textContent).not.toContain("501원");
 });
 
 it("keeps known row and day KRW amounts while a new filtered total loads without mixing category scopes", async () => {
- await mount();
- const current = mocks.state as { list: { data: Expense[] }; krwSummary: { data: typeof contractFixture.response } };
- const row = { ...current.list.data[1], category: "FOOD" as const };
- const dayTotal = { convertedTotalKrw: "13500", isComplete: true, missingCurrencies: [], originalTotals: [] };
- const whole = { ...current.krwSummary.data, expenses: [{ expense: row, convertedAmountKrw: "13500", isComplete: true, missingCurrencies: [] }], days: [{ expenseGroup: "TRIP_DAY", scheduleId: 10, total: dayTotal }] };
- mocks.state = { ...(mocks.state as object), list: { isSuccess: true, data: [row] }, krwSummary: { isSuccess: true, data: whole }, filteredKrwSummary: { isPending: true, isFetching: true }, krwFilters: {} };
- await act(async () => renderer.update(<ExpensePanel />));
- await act(async () => renderer.root.findByProps({ "aria-label": "Day 1 비용" }).props.onClick());
- expect(renderer.root.findByProps({ "aria-label": "선택한 비용 합계" }).findByType(ExpenseKrwAmount).props.total).toEqual(dayTotal);
- expect(JSON.stringify(renderer.toJSON())).toContain("13,500원");
- expect(JSON.stringify(renderer.toJSON())).not.toContain("최신 비용 확인 중");
- await act(async () => renderer.root.findByType(ExpenseSelect).props.onChange("FOOD"));
- expect(renderer.root.findByProps({ "aria-label": "선택한 비용 합계" }).findByType(ExpenseKrwAmount).props.total).toBeUndefined();
- expect(JSON.stringify(renderer.toJSON())).toContain("13,500원");
+  await mount();
+  const current = mocks.state as { list: { data: Expense[] }; krwSummary: { data: typeof contractFixture.response } };
+  const row = { ...current.list.data[1], category: "FOOD" as const };
+  const dayTotal = { convertedTotalKrw: "13500", isComplete: true, missingCurrencies: [], originalTotals: [] };
+  const whole = { ...current.krwSummary.data, expenses: [{ expense: row, convertedAmountKrw: "13500", isComplete: true, missingCurrencies: [] }], days: [{ expenseGroup: "TRIP_DAY", scheduleId: 10, total: dayTotal }] };
+  mocks.state = { ...(mocks.state as object), list: { isSuccess: true, data: [row] }, krwSummary: { isSuccess: true, data: whole }, filteredKrwSummary: { isPending: true, isFetching: true }, krwFilters: {} };
+  await rerender();
+  await press("Day 1 비용");
+  expect(selectedTotal().textContent).toContain("13,500원");
+  expect(host.textContent).toContain("13,500원");
+  expect(text()).not.toContain("최신 비용 확인 중");
+  await chooseCategory("식비");
+  expect(krwPending(selectedTotal())).toBe(true);
+  expect(selectedTotal().textContent).not.toContain("13,500원");
+  expect(host.textContent).toContain("13,500원");
 });
 
 it("keeps the visible ledger unchanged during background tab-return reads", async () => {
- await mount();
- const healthy = { ...(mocks.state as Record<string, unknown>), list: { isSuccess: true, data: contractFixture.response.expenses.map(row => row.expense) }, krwSummary: { data: contractFixture.response, isSuccess: true }, krwFilters: {}, filteredKrwSummary: { data: contractFixture.response, isSuccess: true } };
- mocks.state = healthy;
- await act(async () => renderer.update(<ExpensePanel />));
- const before = JSON.stringify(renderer.toJSON());
- mocks.state = { ...healthy, syncStatus: "refreshing", list: { ...healthy.list, isFetching: true }, krwSummary: { ...healthy.krwSummary, isFetching: true }, filteredKrwSummary: { ...healthy.filteredKrwSummary, isFetching: true } };
- await act(async () => renderer.update(<ExpensePanel />));
- expect(JSON.stringify(renderer.toJSON())).toBe(before);
+  await mount();
+  const healthy = { ...(mocks.state as Record<string, unknown>), list: { isSuccess: true, data: contractFixture.response.expenses.map((row) => row.expense) }, krwSummary: { data: contractFixture.response, isSuccess: true }, krwFilters: {}, filteredKrwSummary: { data: contractFixture.response, isSuccess: true } };
+  mocks.state = healthy;
+  await rerender();
+  const before = host.innerHTML;
+  mocks.state = { ...healthy, syncStatus: "refreshing", list: { ...healthy.list, isFetching: true }, krwSummary: { ...healthy.krwSummary, isFetching: true }, filteredKrwSummary: { ...healthy.filteredKrwSummary, isFetching: true } };
+  await rerender();
+  expect(host.innerHTML).toBe(before);
 });
 
-it('switches category rows and day totals together without an intermediate currency fallback', async () => {
- await mount();
- const current=mocks.state as {list:{data:Expense[]};krwSummary:{data:typeof contractFixture.response}};
- const food={...current.list.data[1],category:'FOOD' as const};
- const other={...food,id:99,category:'OTHER' as const};
- const total={convertedTotalKrw:'200',isComplete:true,missingCurrencies:[],originalTotals:[]};
- const whole={...current.krwSummary.data,expenses:[food,other].map(expense=>({expense,convertedAmountKrw:'100',isComplete:true,missingCurrencies:[]})),days:[{expenseGroup:'TRIP_DAY',scheduleId:10,total}]};
- mocks.state={...(mocks.state as object),list:{isSuccess:true,data:[food,other]},krwSummary:{isSuccess:true,data:whole},krwFilters:{},setKrwFilters:vi.fn(),filteredKrwSummary:{isPending:true,isFetching:true}};
- await act(async()=>renderer.update(<ExpensePanel/>));
- const group=()=>renderer.root.findByProps({'aria-label':'1일차 비용'});
- const dayAmount=()=>group().findAllByType(ExpenseKrwAmount)[0].props.total?.convertedTotalKrw;
- expect(dayAmount()).toBe('200');
- await act(async()=>renderer.root.findByType(ExpenseSelect).props.onChange('FOOD'));
- expect(dayAmount()).toBe('200');
- expect(renderer.root.findAllByProps({'data-expense-id':99})).toHaveLength(1);
- const selected={...whole,expenses:[whole.expenses[0]],days:[{...whole.days[0],total:{...total,convertedTotalKrw:'100'}}]};
- mocks.state={...(mocks.state as object),krwFilters:{category:'FOOD'},filteredKrwSummary:{isSuccess:true,data:selected}};
- await act(async()=>renderer.update(<ExpensePanel/>));
- expect(dayAmount()).toBe('100');
- expect(renderer.root.findAllByProps({'data-expense-id':99})).toHaveLength(0);
- mocks.state={...(mocks.state as object),filteredKrwSummary:{isSuccess:true,isFetching:true,data:selected}};
- await act(async()=>renderer.update(<ExpensePanel/>));
- expect(dayAmount()).toBe('100');
+it("switches category rows and day totals together without an intermediate currency fallback", async () => {
+  await mount();
+  const current = mocks.state as { list: { data: Expense[] }; krwSummary: { data: typeof contractFixture.response } };
+  const food = { ...current.list.data[1], category: "FOOD" as const };
+  const other = { ...food, id: 99, category: "OTHER" as const };
+  const total = { convertedTotalKrw: "200", isComplete: true, missingCurrencies: [], originalTotals: [] };
+  const whole = { ...current.krwSummary.data, expenses: [food, other].map((expense) => ({ expense, convertedAmountKrw: "100", isComplete: true, missingCurrencies: [] })), days: [{ expenseGroup: "TRIP_DAY", scheduleId: 10, total }] };
+  mocks.state = { ...(mocks.state as object), list: { isSuccess: true, data: [food, other] }, krwSummary: { isSuccess: true, data: whole }, krwFilters: {}, setKrwFilters: vi.fn(), filteredKrwSummary: { isPending: true, isFetching: true } };
+  await rerender();
+  // 일차 묶음의 제목 줄(목록 위)에 그 일차의 원화 합계가 보인다
+  const dayAmount = () => host.querySelector('section[aria-label="1일차 비용"]')!.firstElementChild!.textContent!.match(/([\d,]+)원/)?.[1];
+  expect(dayAmount()).toBe("200");
+  await chooseCategory("식비");
+  expect(dayAmount()).toBe("200");
+  expect(expenseRows(99)).toHaveLength(1);
+  const selected = { ...whole, expenses: [whole.expenses[0]], days: [{ ...whole.days[0], total: { ...total, convertedTotalKrw: "100" } }] };
+  mocks.state = { ...(mocks.state as object), krwFilters: { category: "FOOD" }, filteredKrwSummary: { isSuccess: true, data: selected } };
+  await rerender();
+  expect(dayAmount()).toBe("100");
+  expect(expenseRows(99)).toHaveLength(0);
+  mocks.state = { ...(mocks.state as object), filteredKrwSummary: { isSuccess: true, isFetching: true, data: selected } };
+  await rerender();
+  expect(dayAmount()).toBe("100");
 });
 
-it.each(['disconnected', 'pending', 'error', 'ready'])('preserves known day totals during %s instead of switching to original currencies', async (syncStatus) => {
- await mount();
- const current=mocks.state as {krwSummary:{data:typeof contractFixture.response}};
- const total={convertedTotalKrw:'12345',isComplete:false,missingCurrencies:['AED'],originalTotals:[]};
- const summary={...current.krwSummary.data,days:[{expenseGroup:'PREPARATION',scheduleId:null,total}]};
- mocks.state={...(mocks.state as object),syncStatus,krwSummary:{data:summary,isSuccess:syncStatus!=='error',isError:syncStatus==='error',isFetching:syncStatus==='pending'||syncStatus==='ready'}};
- await act(async()=>renderer.update(<ExpensePanel/>));
- const heading=renderer.root.findAllByType('section').find(node=>node.props['aria-label']==='여행 준비 비용')!.findAllByType(ExpenseKrwAmount)[0];
- expect(heading.props.total).toEqual(total);
- expect(JSON.stringify(renderer.toJSON())).toContain('12,345원');
+it.each(["disconnected", "pending", "error", "ready"])("preserves known day totals during %s instead of switching to original currencies", async (syncStatus) => {
+  await mount();
+  const current = mocks.state as { krwSummary: { data: typeof contractFixture.response } };
+  const total = { convertedTotalKrw: "12345", isComplete: false, missingCurrencies: ["AED"], originalTotals: [] };
+  const summary = { ...current.krwSummary.data, days: [{ expenseGroup: "PREPARATION", scheduleId: null, total }] };
+  mocks.state = { ...(mocks.state as object), syncStatus, krwSummary: { data: summary, isSuccess: syncStatus !== "error", isError: syncStatus === "error", isFetching: syncStatus === "pending" || syncStatus === "ready" } };
+  await rerender();
+  const heading = host.querySelector('section[aria-label="여행 준비 비용"]')!.firstElementChild!;
+  expect(heading.textContent).toContain("12,345원");
+  expect(heading.textContent).not.toContain("KRW");
 });
diff --git a/src/components/expenses/ExpensePanel.tsx b/src/components/expenses/ExpensePanel.tsx
index 5c8043b2..2bfba9df 100644
--- a/src/components/expenses/ExpensePanel.tsx
+++ b/src/components/expenses/ExpensePanel.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
-import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
 import { expenseTitle } from "@/lib/expenses/expense-name";
 
 import { MainPageHeader } from "@/components/layout/MainPageHeader";
@@ -11,8 +11,7 @@ import { ExpenseSelect } from "./ExpenseSelect";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { ExpenseKrwAmount, ExpenseRateNote } from "./ExpenseKrw";
-import { RefreshCw } from "lucide-react";
-import { PlusIcon } from "@/assets/icons";
+import { PlusIcon, RefreshIcon } from "@/assets/icons";
 import { ExpenseDialog } from "./ExpenseDialog";
 import { ExpenseCategorySummary } from "./ExpenseCategorySummary";
 import { totalsByCurrency } from "@/lib/expenses/expense-scope";
@@ -28,7 +27,6 @@ import { useExpenseContext } from "./ExpenseProvider";
 import {
   ExpenseList,
   ExpenseSummaryView,
-  expenseButtonClass,
   formatExpenseAmount,
 } from "./ExpenseViews";
 type DeleteConflict = { selected: Expense; latest?: Expense; failed?: boolean };
@@ -51,7 +49,7 @@ function ExpenseDeleteConflict({
   if (deleting) message = "최신 비용 확인 중…";
   else if (conflict.failed)
     message = "최신 비용 조회에 실패했어요. 삭제는 중단돼요.";
-  const unavailable = deleting ? <LoadingIndicator label={message} /> : <p>{message}</p>;
+  const unavailable = deleting ? <Spinner aria-label={message} /> : <p>{message}</p>;
   return (
     <div
       role="alert"
@@ -74,36 +72,36 @@ function ExpenseDeleteConflict({
             onDelete={() => {}}
             busy={false}
           />
-          <button
-            type="button"
-            className={expenseButtonClass}
+          <Button
+            variant="outline"
+            size="sm"
             disabled={deleting || context.busy || !context.canManage}
             onClick={() => onRemove(conflict.latest!)}
           >
             최신 비용 확인 후 삭제
-          </button>
+          </Button>
         </>
       ) : (
         unavailable
       )}
       {conflict.failed && (
-        <button
-          type="button"
-          className={expenseButtonClass}
+        <Button
+          variant="outline"
+          size="sm"
           disabled={deleting}
           onClick={() => onRecover(conflict.selected)}
         >
           최신 비용 다시 조회
-        </button>
+        </Button>
       )}
-      <button
-        type="button"
-        className={expenseButtonClass}
+      <Button
+        variant="outline"
+        size="sm"
         disabled={deleting || context.busy}
         onClick={onCancel}
       >
         삭제 취소
-      </button>
+      </Button>
     </div>
   );
 }
@@ -307,24 +305,15 @@ export function ExpensePanel() {
       label: `Day ${s.dayNumber}`,
     })),
   ];
-  const addButton = (
-    <button
-      type="button"
-      aria-label="비용 추가"
-      disabled={context.busy}
-      onClick={() =>
-        context.open(
-          activeFilter !== "ALL" && activeFilter !== "PREPARATION"
-            ? { scheduleId: Number(activeFilter) }
-            : {},
-        )
-      }
-      className={cn(expenseButtonClass, "inline-flex items-center justify-center gap-1 bg-primary text-white enabled:hover:bg-primary-strong")}
-    >
-      <PlusIcon size={16} />
-      비용 추가
-    </button>
-  );
+  function openNewExpense() {
+    context.open(
+      activeFilter !== "ALL" && activeFilter !== "PREPARATION"
+        ? { scheduleId: Number(activeFilter) }
+        : {},
+    );
+  }
+  // 패널(대화상자 밖)의 조회 재시도 진행은 지금처럼 문구와 native disabled로 보인다
+  const retryLabel = refreshing ? "조회 다시 시도 중" : "조회 다시 시도";
   if (context.revoked) return null;
   return (
     <section
@@ -336,15 +325,16 @@ export function ExpensePanel() {
         description="여행 비용과 정산을 한눈에 확인해요."
         className="mb-6 min-h-[72px] items-center mobile:hidden max-sm:hidden [&_h1]:text-[32px] [&_h1]:leading-[42px]"
         action={
-          <div className="flex gap-3 [&>button]:h-9 [&>button]:min-h-9 [&>button]:min-w-[111px] [&>button]:rounded-full [&>button]:py-0 [&>button]:text-[14px]">
-            <button
-              type="button"
-              className={expenseButtonClass}
-              onClick={() => setTab("summary")}
-            >
+          <div className="flex gap-3">
+            <Button variant="outline" size="sm" className="min-w-[111px]" onClick={() => setTab("summary")}>
               정산 요약
-            </button>
-            {context.canManage && addButton}
+            </Button>
+            {context.canManage && (
+              <Button tone="brand" size="sm" className="min-w-[111px]" aria-label="비용 추가" disabled={context.busy} onClick={openNewExpense}>
+                <PlusIcon data-icon="inline-start" />
+                비용 추가
+              </Button>
+            )}
           </div>
         }
       />
@@ -361,28 +351,29 @@ export function ExpensePanel() {
           <ExpenseBudgetSummary />
           <ExpenseCategorySummary />
           {readFailed && (
-            <button
-              type="button"
-              aria-label={refreshing ? "조회 다시 시도 중" : "조회 다시 시도"}
-              className={`${expenseButtonClass} mt-4 inline-flex items-center gap-1`}
+            <Button
+              variant="outline"
+              size="sm"
+              aria-label={retryLabel}
+              className="mt-4"
               disabled={refreshing || context.busy}
               onClick={() => void refresh()}
             >
-              <RefreshCw size={16} aria-hidden />
-              {refreshing ? "조회 다시 시도 중" : "조회 다시 시도"}
-            </button>
+              <RefreshIcon data-icon="inline-start" />
+              {retryLabel}
+            </Button>
           )}
         </aside>
         <div className="min-w-0 space-y-4">
-          <div className="hidden grid-cols-2 gap-4 mobile:grid max-sm:grid [&>button]:h-11 [&>button]:bg-fill-subtle [&>button:first-child]:bg-primary [&_svg]:hidden">
-            {context.canManage && addButton}
-            <button
-              type="button"
-              className={expenseButtonClass}
-              onClick={() => setTab("summary")}
-            >
+          <div className="hidden grid-cols-2 gap-4 mobile:grid max-sm:grid">
+            {context.canManage && (
+              <Button tone="brand" aria-label="비용 추가" disabled={context.busy} onClick={openNewExpense}>
+                비용 추가
+              </Button>
+            )}
+            <Button variant="outline" onClick={() => setTab("summary")}>
               정산 요약
-            </button>
+            </Button>
           </div>
           <ExpenseMemberNotice context={context} />
           {conflict && (
@@ -416,10 +407,14 @@ export function ExpensePanel() {
               조회 다시 시도 버튼을 눌러 주세요.
             </p>
           )}
-          <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_144px] items-center gap-x-3 gap-y-4 @min-[800px]/expenses:grid-cols-[minmax(0,1fr)_160px]">
+          {/* 카테고리 필터 칸 184: 목록 폭이 트리거 폭과 같아서, 체크가 붙은 '전체 카테고리' 행(글자 85 + 여백 32 + 체크 자리 48)이
+              목록 테두리 2와 스크롤 막대 15(목록이 8행이라 스크롤됨, 막대가 늘 보이는 설정)를 빼고도 한 줄에 들어가는 폭 */}
+          <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_184px] items-center gap-x-3 gap-y-4">
+            {/* 일차가 많으면 가로로 넘친다. 마우스는 세로 휠로 가로 이동이 안 되므로 PC는 얇은 스크롤 막대를 보여 끌 수 있게 하고(북마크에서 추가 칩 줄과 같은 모양),
+                모바일 기기는 손가락으로 밀면 되니 막대를 숨긴다 */}
             <div
               aria-label="준비·일차 필터"
-              className="col-span-2 flex min-h-12 min-w-0 max-w-full items-center gap-2 overflow-x-auto [scrollbar-width:none] @min-[800px]/expenses:col-span-1"
+              className="col-span-2 flex min-h-12 min-w-0 max-w-full items-center gap-2 overflow-x-auto overscroll-x-contain [scrollbar-color:rgba(0,0,0,0.15)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-black/15 mobile:[scrollbar-width:none] mobile:[&::-webkit-scrollbar]:hidden @min-[800px]/expenses:col-span-1"
             >
               {dayOptions.map((option) => (
                 <button
@@ -465,7 +460,7 @@ export function ExpensePanel() {
             )}
           </div>
           {context.filteredKrwSummary?.isError && <p role="alert">선택한 비용의 원화 조회에 실패했어요. 조회 다시 시도 버튼을 눌러 주세요.</p>}
-          {context.list.isPending ? <LoadingIndicator label="비용 목록 불러오는 중" className="flex min-h-40 w-full" /> : context.list.isSuccess && (
+          {context.list.isPending ? <Spinner aria-label="비용 목록 불러오는 중" className="flex min-h-40 w-full" /> : context.list.isSuccess && (
             <>
               <div aria-busy={categoryPending}>
                 <ExpenseList
@@ -509,33 +504,25 @@ export function ExpensePanel() {
           title="정산 요약"
           description={context.summary.data ? `전체 여행 · ${new Set(context.summary.data.currencies.flatMap(currency => currency.individuals.map(person => person.userId))).size}명` : undefined}
           onClose={() => setTab("list")}
-          settlement
-          footer={
-            <div className="flex justify-end">
-              <button
-                type="button"
-                className={cn(expenseButtonClass, "min-h-9 min-w-[111px] rounded-full bg-primary py-1 text-white mobile:h-12 mobile:min-h-12 mobile:w-full mobile:rounded-lg mobile:text-[16px] mobile:font-bold max-sm:h-12 max-sm:min-h-12 max-sm:w-full max-sm:rounded-lg max-sm:text-[16px] max-sm:font-bold")}
-                onClick={() => setTab("list")}
-              >
-                확인
-              </button>
-            </div>
-          }
+          footer={<Button onClick={() => setTab("list")}>확인</Button>}
         >
           {context.summary.isPending && (
-            <LoadingIndicator label="정산 불러오는 중" className="flex min-h-32 w-full" />
+            <Spinner aria-label="정산 불러오는 중" className="flex min-h-32 w-full" />
           )}
           {context.summary.isError && (
             <div className="space-y-3">
               <p role="alert">정산 조회에 실패했어요.</p>
-              <button
-                type="button"
-                className={expenseButtonClass}
-                disabled={refreshing || context.busy}
+              {/* 대화상자 안 버튼이라 진행은 progress로 보인다(대화상자 버튼 규칙). 패널의 재시도 버튼은 대화상자 밖이라 문구 그대로 */}
+              <Button
+                variant="outline"
+                size="sm"
+                loading={refreshing}
+                loadingLabel="조회 다시 시도 중"
+                disabled={context.busy}
                 onClick={() => void refresh()}
               >
-                {refreshing ? "조회 다시 시도 중" : "조회 다시 시도"}
-              </button>
+                조회 다시 시도
+              </Button>
             </div>
           )}
           {context.summary.isSuccess &&
@@ -555,7 +542,6 @@ export function ExpensePanel() {
       {expenseToDelete ? (
         <ConfirmDialog
           title="비용을 삭제할까요?"
-          appearance="ledger"
           destructive
           description={`${expenseTitle(expenseToDelete)} 내역을 삭제해요. 삭제한 내역은 복구할 수 없어요.`}
           confirmLabel="삭제"
diff --git a/src/components/expenses/ExpenseProvider.test.tsx b/src/components/expenses/ExpenseProvider.test.tsx
index cc6a1f65..1e8b7ed1 100644
--- a/src/components/expenses/ExpenseProvider.test.tsx
+++ b/src/components/expenses/ExpenseProvider.test.tsx
@@ -1,5 +1,6 @@
-import { useEffect } from "react";
-import { act, create, type ReactTestInstance, type ReactTestRenderer } from "react-test-renderer";
+// @vitest-environment jsdom
+import { act, useEffect, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { setSessionUserCache } from "@/lib/session-user-cache";
@@ -12,9 +13,6 @@ const stomp = vi.hoisted(() => ({
   unsubscribe: vi.fn(),
 }));
 const stompClient = { subscribe: stomp.subscribe };
-/** 버튼 안 `<span>` 라벨까지 이어 붙인 글자 */
-const textOf = (node: ReactTestInstance): string =>
-  node.children.map((child) => (typeof child === "string" ? child : textOf(child))).join("");
 
 vi.mock("@/contexts/StompContext", () => ({
   useStompContext: () => ({ connected: stomp.connected, client: stompClient }),
@@ -53,14 +51,24 @@ const mocks = vi.hoisted(() => ({
 vi.mock("@/hooks/useSessionUser", () => ({
   useSessionUser: () => ({ data: analytics.userId === undefined ? undefined : { id: analytics.userId } }),
 }));
+// 편집기가 연 대상(일차·장소)을 칸에 보이는 이름으로 확인하려고, 필요한 테스트만 일차·장소를 채운다
+const rooms = vi.hoisted(() => ({
+  schedules: [] as { scheduleId: number; roomId: string; dayNumber: number; date: string; createdAt: string }[],
+  places: {} as Record<number, { itemId: number; title: string }[]>,
+  none: [] as { itemId: number; title: string }[],
+}));
+beforeEach(() => { rooms.schedules = []; rooms.places = {}; });
 vi.mock("@/hooks/useRooms", () => ({
-  useSchedulePlanPlaces: () => ({ data: [], isSuccess: true }),
+  useSchedulePlanPlaces: (_roomId: string, scheduleId: number | null) => ({
+    data: (scheduleId === null ? undefined : rooms.places[scheduleId]) ?? rooms.none,
+    isSuccess: true,
+  }),
   useDeleteRoomSchedule: () => ({ mutate: vi.fn(), isPending: false }),
   useCreateRoomSchedule: () => ({ mutateAsync: vi.fn(), isPending: false }),
   useRoomSchedules: () => ({
-    data: [],
+    data: rooms.schedules,
     isSuccess: true,
-    refetch: async () => ({ data: [] }),
+    refetch: async () => ({ data: rooms.schedules }),
   }),
 }));
 vi.mock("@/lib/api/rooms/members", () => ({ getRoomMembers: mocks.members }));
@@ -79,6 +87,9 @@ vi.mock("@/lib/api/rooms/expenses", async (importOriginal) => ({
 const analytics = vi.hoisted(() => ({ send: vi.fn(), userId: 1 as number | undefined }));
 vi.mock("@/lib/analytics/client", () => ({ sendAnalyticsDataCommand: analytics.send }));
 beforeEach(() => { analytics.send.mockClear(); analytics.userId = 1; });
+// jsdom에는 window.location이 있어 이벤트에 공통 페이지 정보(정규화 URL)가 함께 붙는다. 그 밖의 속성은 보내지 않는다
+const sentEvent = (name: string) =>
+  ["event", name, { room_id: "r", page_path: "/", page_location: "http://localhost:3000/" }];
 import { ExpensePanel } from "./ExpensePanel";
 import { ExpenseProvider, useExpenseContext } from "./ExpenseProvider";
 function Probe() {
@@ -89,10 +100,59 @@ function Probe() {
     </p>
   );
 }
-let renderer: ReactTestRenderer;
+// 대화상자·확인창은 Base UI가 document.body로 포털한다. react-test-renderer는 포털을 그리지 못해 react-dom으로 그리고 document에서 찾는다
+let root: Root | null = null;
+let host: HTMLDivElement | null = null;
+/** 처음이면 새 root에, 이미 있으면 같은 root에 다시 그린다. act 안에서 부른다 */
+function draw(ui: ReactNode) {
+  if (!root) {
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+  }
+  root.render(ui);
+}
+function unmount() {
+  root?.unmount();
+  root = null;
+  host?.remove();
+  host = null;
+}
+/** 포털된 대화상자까지 포함해 아무것도 그리지 않았다 */
+function rendersNothing() {
+  return host?.childNodes.length === 0 && document.querySelector('[role="dialog"], [role="alertdialog"]') === null;
+}
+const buttons = () => [...document.querySelectorAll<HTMLButtonElement>("button")];
+const buttonLabelled = (label: string) => document.querySelector<HTMLButtonElement>(`[aria-label="${label}"]`);
+const dialogs = () => [...document.querySelectorAll<HTMLElement>('[role="dialog"]')];
+const dialogTitled = (title: string) => dialogs().find(dialog => dialog.querySelector("h2")?.textContent === title);
+/** 비용 추가·수정 편집기(ExpenseEditor) 대화상자 */
+const editors = () => dialogs().filter(dialog => ["비용 추가", "비용 수정"].includes(dialog.querySelector("h2")?.textContent ?? ""));
+const confirmation = () => document.querySelector<HTMLElement>('[role="alertdialog"]');
+/** 편집기가 연 대상. 일차 구분·연결 장소 칸에 보이는 이름 */
+function editorTarget(editor: HTMLElement) {
+  return {
+    day: editor.querySelector('[role="combobox"][aria-label="일차 구분"]')?.textContent,
+    place: editor.querySelector('[role="combobox"][aria-label="연결 장소 (선택)"]')?.textContent,
+  };
+}
+async function settle() {
+  // Base UI 열림·닫힘(microtask·requestAnimationFrame)과 쿼리 반영을 기다린다
+  await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)); });
+}
+async function click(element: HTMLElement) {
+  await act(async () => element.click());
+  await settle();
+}
+/** 편집기 취소 버튼으로 닫는다 */
+async function closeEditor() {
+  const [editor] = editors();
+  await click([...editor.querySelectorAll("button")].find(button => button.textContent === "취소")!);
+  expect(editors()).toHaveLength(0);
+}
 let client: QueryClient;
 afterEach(async () => {
-  await act(async () => renderer?.unmount());
+  await act(async () => unmount());
   client?.clear();
   vi.unstubAllGlobals();
 });
@@ -104,7 +164,7 @@ it("does not treat partial STOMP member cache as a successful full member query"
     ],
   });
   await act(async () => {
-    renderer = create(
+    draw(
       <QueryClientProvider client={client}>
         <ExpenseProvider roomId="r">
           <Probe />
@@ -112,7 +172,7 @@ it("does not treat partial STOMP member cache as a successful full member query"
       </QueryClientProvider>,
     );
   });
-  expect(renderer.root.findByType("p").children.join("")).toBe("pending:false");
+  expect(host!.querySelector("p")!.textContent).toBe("pending:false");
 });
 
 import type { Expense, ExpenseKrwSummary } from "@/lib/api/rooms/expenses";
@@ -155,7 +215,7 @@ async function mountMutations(options: { panel?: boolean; summary?: () => Promis
   setSessionUserCache(client, { id: 1, email: "", nickname: "", profileImageUrl: null, provider: "GOOGLE", tutorialCompleted: true });
   useSessionStore.setState({ sessionReady: true, currentRoomId: "r" });
   await act(async () => {
-    renderer = create(
+    draw(
       <QueryClientProvider client={client}>
         <ExpenseProvider roomId="r">
           <MutationProbe />
@@ -197,7 +257,7 @@ it("forwards the reviewed version and reflects PATCH before summary refresh comp
     expect.objectContaining({ expectedVersion: 2 }),
   );
   expect(client.getQueryData(expenseKeys.list("r"))).toEqual([updated]);
-  expect(analytics.send.mock.calls).toEqual([["event", "expense_updated", { room_id: "r" }]]);
+  expect(analytics.send.mock.calls).toEqual([sentEvent("expense_updated")]);
   await act(async () => {
     finishList([updated]);
     finish({ currencies: [] });
@@ -236,7 +296,7 @@ it("forwards DELETE reviewed version and removes the record before summary refre
   });
   expect(mocks.remove).toHaveBeenLastCalledWith("r", 10, 2);
   expect(client.getQueryData(expenseKeys.list("r"))).toEqual([]);
-  expect(analytics.send.mock.calls).toEqual([["event", "expense_deleted", { room_id: "r" }]]);
+  expect(analytics.send.mock.calls).toEqual([sentEvent("expense_deleted")]);
   await act(async () => {
     finishList([]);
     finish({ currencies: [] });
@@ -296,7 +356,7 @@ it("saves as ACTIVE MEMBER, guards duplicate writes and installs PUT result", as
     currency: "KRW",
     version: 1,
   });
-  expect(analytics.send.mock.calls).toEqual([["event", "expense_budget_saved", { room_id: "r" }]]);
+  expect(analytics.send.mock.calls).toEqual([sentEvent("expense_budget_saved")]);
 });
 it("fresh budget recovery propagates failure instead of accepting cached budget", async () => {
   await mountMutations();
@@ -353,7 +413,7 @@ it("disconnect hides synchronized status and revocation stops subscription and c
   expect(context.syncStatus).toBe("ready");
   stomp.connected = false;
   await act(async () => {
-    renderer.update(
+    draw(
       <QueryClientProvider client={client}>
         <ExpenseProvider roomId="r">
           <MutationProbe />
@@ -367,7 +427,7 @@ it("disconnect hides synchronized status and revocation stops subscription and c
     getExpenseRecovery(client, "r").revoke();
   });
   expect(client.getQueryData(expenseKeys.list("r"))).toBeUndefined();
-  expect(renderer.toJSON()).toBeNull();
+  expect(rendersNothing()).toBe(true);
 });
 it("late PATCH cannot replace a newer version read during its request", async () => {
   await mountMutations();
@@ -393,7 +453,7 @@ it("late PATCH cannot replace a newer version read during its request", async ()
   expect(
     client.getQueryData<Expense[]>(expenseKeys.list("r"))?.[0],
   ).toMatchObject({ version: 9, memo: "newer" });
-  expect(analytics.send.mock.calls).toEqual([["event", "expense_updated", { room_id: "r" }]]);
+  expect(analytics.send.mock.calls).toEqual([sentEvent("expense_updated")]);
 });
 import { beginExpenseRoomAdmission, getExpenseRecovery } from "@/lib/expenses/expense-recovery";
 it("late PUT never replaces a newer explicit recovery read while trailing GET is pending", async () => {
@@ -425,7 +485,7 @@ it("late PUT never replaces a newer explicit recovery read while trailing GET is
     finish({ budgetKrw: "100", currency: "KRW", version: 1 });
   });
   expect(client.getQueryData(expenseKeys.budget("r"))).toEqual(newer);
-  expect(analytics.send.mock.calls).toEqual([["event", "expense_budget_saved", { room_id: "r" }]]);
+  expect(analytics.send.mock.calls).toEqual([sentEvent("expense_budget_saved")]);
   await act(async () => {
     finishRead(newer);
     await saving;
@@ -531,7 +591,7 @@ it("revocation during a mutation prevents its response from repopulating caches"
     await saving;
   });
   expect(client.getQueryData(expenseKeys.list("r"))).toBeUndefined();
-  expect(renderer.toJSON()).toBeNull();
+  expect(rendersNothing()).toBe(true);
 });
 it("keeps a committed create successful when its follow-up summary read fails", async () => {
   await mountMutations();
@@ -549,7 +609,7 @@ it("keeps a committed create successful when its follow-up summary read fails",
     await new Promise((resolve) => setTimeout(resolve, 20));
   });
   expect(context.syncStatus).toBe("error");
-  expect(analytics.send.mock.calls).toEqual([["event", "expense_created", { room_id: "r" }]]);
+  expect(analytics.send.mock.calls).toEqual([sentEvent("expense_created")]);
 });
 
 it("new authorized lifetime permits writes while late old PATCH and PUT stay fenced", async () => {
@@ -596,8 +656,7 @@ vi.mock("@/hooks/useChatPanelOpen", () => ({ useChatPanelOpen: () => true }));
 vi.mock("@/lib/rooms", () => ({ validateRoomAccess: async () => "ok" }));
 import { MainRoomGate } from "@/components/layout/MainRoomGate";
 import { ExpenseEntryButton } from "./ExpenseProvider";
-import { ExpenseScopePanel } from "./ExpenseScopePanel";
-import { ExpensePlaceLabel } from "./ExpensePlaceLabel";
+import { formatExpenseAmount } from "./ExpenseViews";
 import { useSessionStore } from "@/stores/session-store";
 
 it("shares one room subscription across route children and resets it on selected-room changes", async () => {
@@ -608,29 +667,30 @@ it("shares one room subscription across route children and resets it on selected
   mocks.list.mockResolvedValue([]);
   client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   const tree = (label: string) => <QueryClientProvider client={client}><MainRoomGate><ExpenseEntryButton label={label} scheduleId={10} scheduleItemId={20} /></MainRoomGate></QueryClientProvider>;
-  await act(async () => { renderer = create(tree("장소 비용")); });
-  expect(renderer.toJSON()).toBeNull();
+  await act(async () => { draw(tree("장소 비용")); });
+  expect(rendersNothing()).toBe(true);
   expect(stomp.subscribe).not.toHaveBeenCalled();
   gateState.roomContextReady = true;
-  await act(async () => { renderer.update(tree("장소 비용")); });
+  await act(async () => { draw(tree("장소 비용")); });
   await act(async () => { await new Promise(resolve => setTimeout(resolve, 20)); });
-  expect(renderer.root.findAllByType("button").some(b => textOf(b).includes("장소 비용"))).toBe(true);
+  expect(buttons().some(b => b.textContent?.includes("장소 비용"))).toBe(true);
   expect(stomp.subscribe).toHaveBeenCalledTimes(1);
   expect(stomp.subscribe.mock.calls[0][0]).toBe("/topic/rooms/r/expenses");
-  await act(async () => { renderer.update(tree("일차 비용")); });
+  await act(async () => { draw(tree("일차 비용")); });
   expect(stomp.subscribe).toHaveBeenCalledTimes(1);
   expect(stomp.unsubscribe).not.toHaveBeenCalled();
-  await act(async () => renderer.root.findByType("button").props.onClick({ stopPropagation: () => {} }));
-  expect(renderer.root.findAllByType(ExpenseEditor)).toHaveLength(1);
+  await click(host!.querySelector("button")!);
+  expect(editors()).toHaveLength(1);
   gateState.roomId = "other";
-  await act(async () => { renderer.update(tree("다른 방")); });
-  expect(renderer.root.findAllByType(ExpenseEditor)).toHaveLength(0);
+  await act(async () => { draw(tree("다른 방")); });
+  await settle();
+  expect(editors()).toHaveLength(0);
   expect(stomp.unsubscribe).toHaveBeenCalledTimes(1);
   expect(stomp.subscribe).toHaveBeenCalledTimes(2);
   expect(stomp.subscribe.mock.lastCall![0]).toBe("/topic/rooms/other/expenses");
   gateState.roomId = null;
-  await act(async () => { renderer.update(tree("선택 안 됨")); });
-  expect(renderer.toJSON()).toBeNull();
+  await act(async () => { draw(tree("선택 안 됨")); });
+  expect(rendersNothing()).toBe(true);
   expect(stomp.unsubscribe).toHaveBeenCalledTimes(2);
   expect(gateRouter.replace).toHaveBeenCalledWith("/home");
 });
@@ -639,28 +699,30 @@ vi.mock("@/hooks/useRoomDetail", () => ({ useRoomDetail: () => ({ data: undefine
 vi.mock("@/hooks/usePlanScheduleDayReorder", () => ({ usePlanScheduleDayReorder: () => ({ getSectionProps: () => ({}), listContainerProps: {}, isMovePending: false }) }));
 vi.mock("@/app/(main)/plan/_components/itinerary/PlanScheduleDayBlock", () => ({ PlanScheduleDayBlock: () => null }));
 import { PlanPageView } from "@/app/(main)/plan/_components/itinerary/PlanPageView";
-import { ExpenseEditor } from "./ExpenseEditor";
 
 it("mobile plan shares the provider with the cost page while day/place entries keep their target", async () => {
   gateState.roomId = "r";
   useSessionStore.setState({ sessionReady: true, currentRoomId: "r" });
   mocks.members.mockResolvedValue({ members: [{ userId: 1, role: "HOST", status: "ACTIVE" }] });
   mocks.list.mockResolvedValue([]);
+  rooms.schedules = [{ scheduleId: 10, roomId: "r", dayNumber: 1, date: "2026-10-01", createdAt: "" }];
+  rooms.places = { 10: [{ itemId: 20, title: "남산타워" }] };
   client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-  await act(async () => { renderer = create(<QueryClientProvider client={client}><MainRoomGate><PlanPageView /><ExpenseEntryButton scheduleId={10} label="일차 비용" /><ExpenseEntryButton scheduleId={10} scheduleItemId={20} label="장소 비용" /></MainRoomGate></QueryClientProvider>); });
+  await act(async () => { draw(<QueryClientProvider client={client}><MainRoomGate><PlanPageView /><ExpenseEntryButton scheduleId={10} label="일차 비용" /><ExpenseEntryButton scheduleId={10} scheduleItemId={20} label="장소 비용" /></MainRoomGate></QueryClientProvider>); });
   await act(async () => { await new Promise(resolve => setTimeout(resolve, 20)); });
-  expect(renderer.root.findAllByType("a").some(a => a.props.href === "/cost")).toBe(false);
+  expect(document.querySelectorAll('a[href="/cost"]')).toHaveLength(0);
   expect(stomp.subscribe).toHaveBeenCalledTimes(1);
-  for (const [label, initial] of [["일차 비용", { scheduleId: 10 }], ["장소 비용", { scheduleId: 10, scheduleItemId: 20 }]] as const) {
-    const button = renderer.root.findAllByType("button").find(b => textOf(b).includes(label))!;
-    await act(async () => button.props.onClick({ stopPropagation: () => {} }));
-    expect(renderer.root.findAllByType(ExpenseEditor)).toHaveLength(1);
-    expect(renderer.root.findByType(ExpenseEditor).props.initial).toEqual(initial);
-    await act(async () => renderer.root.findByType(ExpenseEditor).props.onClose());
+  for (const [label, target] of [["일차 비용", { day: "1일차", place: "장소 연결 없음" }], ["장소 비용", { day: "1일차", place: "남산타워" }]] as const) {
+    const button = buttons().find(b => b.textContent?.includes(label))!;
+    await click(button);
+    expect(editors()).toHaveLength(1);
+    expect(editors()[0].querySelector("h2")!.textContent).toBe("비용 추가");
+    expect(editorTarget(editors()[0])).toEqual(target);
+    await closeEditor();
   }
   const { default: CostPage } = await import("@/app/(main)/cost/page");
-  await act(async () => { renderer.update(<QueryClientProvider client={client}><MainRoomGate><CostPage /></MainRoomGate></QueryClientProvider>); });
-  expect(renderer.root.findByType("h1").children).toEqual(["가계부"]);
+  await act(async () => { draw(<QueryClientProvider client={client}><MainRoomGate><CostPage /></MainRoomGate></QueryClientProvider>); });
+  expect(host!.querySelector("h1")!.textContent).toBe("가계부");
   expect(stomp.subscribe).toHaveBeenCalledTimes(1);
   expect(stomp.unsubscribe).not.toHaveBeenCalled();
 });
@@ -672,28 +734,28 @@ it("cost page hides healthy refresh and retries failed reads through the same pr
   mocks.members.mockResolvedValue({ members: [{ userId: 1, role: "HOST", status: "ACTIVE" }] });
   mocks.list.mockResolvedValue([record]);
   client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-  await act(async () => { renderer = create(<QueryClientProvider client={client}><MainRoomGate><CostPage /></MainRoomGate></QueryClientProvider>); });
+  await act(async () => { draw(<QueryClientProvider client={client}><MainRoomGate><CostPage /></MainRoomGate></QueryClientProvider>); });
   await act(async () => { await new Promise(resolve => setTimeout(resolve, 20)); });
-  expect(renderer.root.findByType("h1").children).toEqual(["가계부"]);
-  expect(JSON.stringify(renderer.toJSON())).toContain("old");
+  expect(host!.querySelector("h1")!.textContent).toBe("가계부");
+  expect(document.body.textContent).toContain("old");
   expect(stomp.subscribe).toHaveBeenCalledTimes(1);
-  expect(renderer.root.findAllByType("button").filter(b => /새로고침|조회 다시 시도/.test(b.props["aria-label"] ?? ""))).toHaveLength(0);
+  expect(buttons().filter(b => /새로고침|조회 다시 시도/.test(b.getAttribute("aria-label") ?? ""))).toHaveLength(0);
   mocks.list.mockRejectedValue(new Error("list offline"));
   await act(async () => { await expect(getExpenseRecovery(client, "r").refresh("all")).rejects.toThrow("list offline"); });
   await act(async () => { await new Promise(resolve => setTimeout(resolve, 20)); });
-  expect(JSON.stringify(renderer.toJSON())).toContain("list offline");
+  expect(document.body.textContent).toContain("list offline");
   mocks.list.mockResolvedValue([{ ...record, memo: "recovered expense" }]);
   const previousKrw = mocks.krw.getMockImplementation()!;
   mocks.krw.mockImplementation(async () => ({
     ...await previousKrw(),
     expenses: [{ expense: { ...record, memo: "recovered expense" }, convertedAmountKrw: "100", missingCurrencies: [], isComplete: true }],
   }));
-  const retry = renderer.root.findAllByType("button").find(b => b.props["aria-label"] === "조회 다시 시도");
-  expect(retry).toBeDefined();
-  await act(async () => { retry!.props.onClick(); await new Promise(resolve => setTimeout(resolve, 20)); });
-  expect(JSON.stringify(renderer.toJSON())).toContain("recovered expense");
+  const retry = buttonLabelled("조회 다시 시도");
+  expect(retry).not.toBeNull();
+  await act(async () => { retry!.click(); await new Promise(resolve => setTimeout(resolve, 20)); });
+  expect(document.body.textContent).toContain("recovered expense");
   mocks.krw.mockImplementation(previousKrw);
-  expect(renderer.root.findAllByType("button").filter(b => /새로고침|조회 다시 시도/.test(b.props["aria-label"] ?? ""))).toHaveLength(0);
+  expect(buttons().filter(b => /새로고침|조회 다시 시도/.test(b.getAttribute("aria-label") ?? ""))).toHaveLength(0);
 });
 
 
@@ -719,9 +781,9 @@ it.each(["reconnect", "visible"])(
         </QueryClientProvider>
       );
       stomp.connected = false;
-      await act(async () => { renderer.update(render()); });
+      await act(async () => { draw(render()); });
       stomp.connected = true;
-      await act(async () => { renderer.update(render()); });
+      await act(async () => { draw(render()); });
     } else {
       const { getExpenseRecovery } = await import("@/lib/expenses/expense-recovery");
       await act(async () => { await getExpenseRecovery(client, "r").refresh("visible"); });
@@ -733,11 +795,14 @@ it.each(["reconnect", "visible"])(
   },
 );
 
+const day2 = { scheduleId: 2, roomId: "r", dayNumber: 1, date: "2026-10-01", createdAt: "" };
 async function mountPlaceExpenseButton(records: Expense[]) {
+  rooms.schedules = [day2];
+  rooms.places = { 2: [{ itemId: 3, title: "경복궁" }] };
   await mountMutations();
   await act(async () => {
     client.setQueryData(expenseKeys.list("r"), records);
-    renderer.update(
+    draw(
       <QueryClientProvider client={client}>
         <ExpenseProvider roomId="r">
           <ExpenseEntryButton scheduleId={2} scheduleItemId={3} label="비용 추가" />
@@ -746,33 +811,42 @@ async function mountPlaceExpenseButton(records: Expense[]) {
     );
   });
 }
+/** 일정 카드의 비용 버튼(ExpenseEntryButton). 화면에 이 버튼 하나만 그린다 */
+const entryButton = () => host!.querySelector("button")!;
+/** 비용 목록 대화상자의 행 삭제 버튼 */
+const deleteButton = () => buttons().find(b => b.getAttribute("aria-label")?.endsWith("비용 삭제"));
 
 it("opens a place cost list instead of editing only the latest linked expense", async () => {
   const latest = { ...record, id: 12, scheduleId: 2, scheduleItemId: 3, totalAmount: "12345", name: null, createdAt: "2026-09-16T02:00:00Z" };
   await mountPlaceExpenseButton([
     latest,
-    { ...latest, id: 99, name: null, createdAt: "2026-09-15T02:00:00Z", updatedAt: "2026-09-17T02:00:00Z" },
+    // 어느 비용을 열었는지 편집기 메모 칸으로 구분한다
+    { ...latest, id: 99, name: null, memo: "older", createdAt: "2026-09-15T02:00:00Z", updatedAt: "2026-09-17T02:00:00Z" },
     { ...latest, id: 100, scheduleItemId: 4, name: null, createdAt: "2026-09-18T02:00:00Z" },
   ]);
   await act(async () => {
     client.setQueryData(scheduleItemsQueryKey("r", 2), [{ itemId: 3, title: "경복궁" }]);
   });
-  const button = renderer.root.findByType("button");
-  expect(button.findByType("span").children.join("")).toBe("24,690 KRW");
-  await act(async () => button.props.onClick({ stopPropagation() {} }));
-  expect(renderer.root.findAllByType(ExpenseEditor)).toHaveLength(0);
-  expect(renderer.root.findAllByType("h2").some(heading => heading.children.join("") === "장소 비용")).toBe(true);
-  const panel = renderer.root.findByType(ExpenseScopePanel);
-  expect(panel.findAllByType(ExpensePlaceLabel)).toHaveLength(2);
-  expect(JSON.stringify(renderer.toJSON())).toContain("경복궁");
-  const add = renderer.root.findByType(ExpenseScopePanel).findAllByType("button").find(b => b.children.join("").includes("비용 추가"))!;
-  await act(async () => add.props.onClick());
-  expect(renderer.root.findByType(ExpenseEditor).props.initial).toEqual({ scheduleId: 2, scheduleItemId: 3 });
-  await act(async () => renderer.root.findByType(ExpenseEditor).props.onClose());
-  const edits = renderer.root.findByType(ExpenseScopePanel).findAllByType("button").filter(b => b.props["aria-label"]?.endsWith("비용 수정"));
+  expect(entryButton().querySelector("span")!.textContent).toBe("24,690 KRW");
+  await click(entryButton());
+  expect(editors()).toHaveLength(0);
+  const panel = dialogTitled("장소 비용")!;
+  expect(panel).toBeDefined();
+  // 장소 이름 표시(ExpensePlaceLabel)는 비용 행마다 하나
+  expect(panel.querySelectorAll('[title="경복궁"]')).toHaveLength(2);
+  expect(panel.textContent).toContain("경복궁");
+  const add = [...panel.querySelectorAll("button")].find(b => b.textContent?.includes("비용 추가"))!;
+  await click(add);
+  expect(editors()).toHaveLength(1);
+  expect(editors()[0].querySelector("h2")!.textContent).toBe("비용 추가");
+  expect(editorTarget(editors()[0])).toEqual({ day: "1일차", place: "경복궁" });
+  await closeEditor();
+  const edits = [...panel.querySelectorAll("button")].filter(b => b.getAttribute("aria-label")?.endsWith("비용 수정"));
   expect(edits).toHaveLength(2);
-  await act(async () => edits[1].props.onClick());
-  expect(renderer.root.findByType(ExpenseEditor).props.initial.expense.id).toBe(99);
+  await click(edits[1]);
+  expect(editors()).toHaveLength(1);
+  expect(editors()[0].querySelector("h2")!.textContent).toBe("비용 수정");
+  expect(editors()[0].querySelector("textarea")!.value).toBe("older");
 });
 
 it.each([
@@ -781,6 +855,7 @@ it.each([
   { rows: [["KRW", "1000"], ["USD", "10"], ["USD", "20"]], label: "30 USD 외 1건" },
   { rows: [["USD", "10"], ["EUR", "20"], ["EUR", "30"], ["USD", "5"]], label: "15 USD 외 2건" },
 ])("day summary $label opens all expenses for that day", async ({ rows, label }) => {
+  rooms.schedules = [day2];
   await mountMutations();
   await act(async () => {
     client.setQueryData(expenseKeys.list("r"), [
@@ -789,21 +864,21 @@ it.each([
       })),
       { ...record, id: 100, scheduleId: 3, scheduleItemId: null, totalAmount: "500", currency: "KRW" },
     ]);
-    renderer.update(
+    draw(
       <QueryClientProvider client={client}>
         <ExpenseProvider roomId="r"><ExpenseEntryButton scheduleId={2} scopeLabel="1일차" /></ExpenseProvider>
       </QueryClientProvider>,
     );
   });
 
-  const button = renderer.root.findByType("button");
-  expect(button.findByType("span").children.join("")).toBe(label);
-  await act(async () => button.props.onClick({ stopPropagation() {} }));
-  const panel = renderer.root.findByType(ExpenseScopePanel);
-  expect(panel.findAllByType("h2")[0].children.join("")).toBe("1일차 비용");
-  expect(panel.findAllByType("li")).toHaveLength(rows.length);
-  await act(async () => panel.findAllByType("button").find(b => b.children.join("").includes("비용 추가"))!.props.onClick());
-  expect(renderer.root.findByType(ExpenseEditor).props.initial).toEqual({ scheduleId: 2 });
+  expect(entryButton().querySelector("span")!.textContent).toBe(label);
+  await click(entryButton());
+  const panel = dialogTitled("1일차 비용")!;
+  expect(panel).toBeDefined();
+  expect(panel.querySelectorAll("li")).toHaveLength(rows.length);
+  await click([...panel.querySelectorAll("button")].find(b => b.textContent?.includes("비용 추가"))!);
+  expect(editors()).toHaveLength(1);
+  expect(editorTarget(editors()[0])).toEqual({ day: "1일차", place: "장소 연결 없음" });
 });
 
 it("returns to add mode after the last linked expense is deleted", async () => {
@@ -812,10 +887,11 @@ it("returns to add mode after the last linked expense is deleted", async () => {
     client.setQueryData(expenseKeys.list("r"), []);
     await new Promise((resolve) => setTimeout(resolve, 20));
   });
-  const button = renderer.root.findByType("button");
-  expect(button.findByType("span").children.join("")).toBe("비용 추가");
-  await act(async () => button.props.onClick({ stopPropagation() {} }));
-  expect(renderer.root.findByType(ExpenseEditor).props.initial).toEqual({ scheduleId: 2, scheduleItemId: 3 });
+  expect(entryButton().querySelector("span")!.textContent).toBe("비용 추가");
+  await click(entryButton());
+  expect(dialogTitled("장소 비용")).toBeUndefined();
+  expect(editors()).toHaveLength(1);
+  expect(editorTarget(editors()[0])).toEqual({ day: "1일차", place: "경복궁" });
 });
 
 it("isolates AND-filtered KRW snapshots and refreshes them on expense invalidation without replacing the whole room", async () => {
@@ -883,7 +959,7 @@ it("never reports a foreground load during successful tab-return revalidation",
   useEffect(() => { statuses.push(value.syncStatus); }, [value.syncStatus]);
   return null;
  }
- await act(async () => renderer.update(<QueryClientProvider client={client}><ExpenseProvider roomId="r"><MutationProbe /><StatusProbe /></ExpenseProvider></QueryClientProvider>));
+ await act(async () => draw(<QueryClientProvider client={client}><ExpenseProvider roomId="r"><MutationProbe /><StatusProbe /></ExpenseProvider></QueryClientProvider>));
  const previous = context.krwSummary.data!;
  let finish!: (value: ExpenseKrwSummary) => void;
  mocks.krw.mockImplementationOnce(() => new Promise(resolve => { finish = resolve; }));
@@ -909,20 +985,21 @@ it("confirms a scoped expense deletion, supports cancel, and updates the card to
   mocks.remove.mockReset();
   mocks.remove.mockResolvedValue(undefined);
   mocks.list.mockResolvedValue([]);
-  await act(async () => renderer.root.findByType("button").props.onClick({ stopPropagation() {} }));
-  const deleteButton = () => renderer.root.findAllByType("button").find(b => b.props["aria-label"]?.endsWith("비용 삭제"))!;
+  await click(entryButton());
   expect(deleteButton()).toBeDefined();
-  await act(async () => deleteButton().props.onClick());
+  await click(deleteButton()!);
+  expect(confirmation()).not.toBeNull();
   expect(mocks.remove).not.toHaveBeenCalled();
-  await act(async () => renderer.root.findByProps({ "aria-label": "비용 삭제 취소" }).props.onClick());
+  await click(buttonLabelled("비용 삭제 취소")!);
+  expect(confirmation()).toBeNull();
   expect(mocks.remove).not.toHaveBeenCalled();
-  await act(async () => deleteButton().props.onClick());
-  await act(async () => renderer.root.findByProps({ "aria-label": "비용 삭제 확인" }).props.onClick());
+  await click(deleteButton()!);
+  await click(buttonLabelled("비용 삭제 확인")!);
   await act(async () => { await new Promise(resolve => setTimeout(resolve, 20)); });
   expect(mocks.remove).toHaveBeenCalledExactlyOnceWith("r", 10, 2);
-  expect(renderer.root.findByType(ExpenseScopePanel).findAllByType("li")).toHaveLength(0);
-  expect(renderer.root.findAllByType(ExpenseEditor)).toHaveLength(0);
-  expect(renderer.root.findByProps({ "aria-label": "장소 비용 추가" })).toBeDefined();
+  expect(dialogTitled("장소 비용")!.querySelectorAll("li")).toHaveLength(0);
+  expect(editors()).toHaveLength(0);
+  expect(buttonLabelled("장소 비용 추가")).not.toBeNull();
 });
 
 
@@ -931,17 +1008,22 @@ it("keeps a scoped expense after a failed delete and prevents duplicate submissi
   mocks.remove.mockReset();
   let reject!: (reason: Error) => void;
   mocks.remove.mockImplementationOnce(() => new Promise((_, fail) => { reject = fail; }));
-  await act(async () => renderer.root.findByType("button").props.onClick({ stopPropagation() {} }));
-  const button = renderer.root.findAllByType("button").find(b => b.props["aria-label"]?.endsWith("비용 삭제"));
+  await click(entryButton());
+  const button = deleteButton();
   expect(button).toBeDefined();
-  await act(async () => button!.props.onClick());
-  const confirm = renderer.root.findByProps({ "aria-label": "비용 삭제 확인" });
-  await act(async () => { confirm.props.onClick(); confirm.props.onClick(); });
+  await click(button!);
+  const confirm = buttonLabelled("비용 삭제 확인")!;
+  await act(async () => { confirm.click(); confirm.click(); });
   expect(mocks.remove).toHaveBeenCalledTimes(1);
-  expect(renderer.root.findByProps({ "aria-label": "비용 삭제 확인" }).props.disabled).toBe(true);
+  // 삭제 중에는 progress로 바뀌고 누를 수 없다(focusableWhenDisabled라 native disabled 대신 aria-disabled)
+  expect(confirm.getAttribute("aria-busy")).toBe("true");
+  expect(confirm.getAttribute("aria-disabled")).toBe("true");
+  expect(document.getElementById(confirm.getAttribute("aria-labelledby")!)!.textContent).toBe("삭제 중");
   await act(async () => reject(new Error("네트워크 오류")));
-  expect(renderer.root.findByProps({ role: "alert" }).children.join("")).toContain("네트워크 오류");
-  expect(renderer.root.findByType(ExpenseScopePanel).findAllByType("li")).toHaveLength(1);
+  await settle();
+  const panel = dialogTitled("장소 비용")!;
+  expect(panel.querySelector('[role="alert"]')!.textContent).toContain("네트워크 오류");
+  expect(panel.querySelectorAll("li")).toHaveLength(1);
 });
 
 
@@ -952,31 +1034,32 @@ it("requires reviewing the refreshed scoped expense before deleting after a conf
   mocks.remove.mockReset();
   mocks.remove.mockRejectedValueOnce(new ExpenseApiError(409, "EXPENSE_CONFLICT", "changed"));
   mocks.list.mockResolvedValue([{ ...linked, version: 3, totalAmount: "200" }]);
-  await act(async () => renderer.root.findByType("button").props.onClick({ stopPropagation() {} }));
-  const deleteButton = () => renderer.root.findAllByType("button").find(b => b.props["aria-label"]?.endsWith("비용 삭제"))!;
-  await act(async () => deleteButton().props.onClick());
-  await act(async () => renderer.root.findByProps({ "aria-label": "비용 삭제 확인" }).props.onClick());
+  await click(entryButton());
+  await click(deleteButton()!);
+  await click(buttonLabelled("비용 삭제 확인")!);
   await act(async () => { await new Promise(resolve => setTimeout(resolve, 20)); });
   expect(mocks.remove).toHaveBeenCalledTimes(1);
-  expect(renderer.root.findAllByProps({ "aria-label": "비용 삭제 확인" })).toHaveLength(0);
-  expect(deleteButton().props["aria-label"]).toContain("200 KRW");
+  expect(confirmation()).toBeNull();
+  expect(deleteButton()!.getAttribute("aria-label")).toContain("200 KRW");
   mocks.remove.mockResolvedValue(undefined);
   mocks.list.mockResolvedValue([]);
-  await act(async () => deleteButton().props.onClick());
-  await act(async () => renderer.root.findByProps({ "aria-label": "비용 삭제 확인" }).props.onClick());
+  await click(deleteButton()!);
+  await click(buttonLabelled("비용 삭제 확인")!);
   expect(mocks.remove).toHaveBeenLastCalledWith("r", 10, 3);
 });
 
 it("hides scoped deletion controls when management permission is lost", async () => {
   await mountPlaceExpenseButton([{ ...record, scheduleId: 2, scheduleItemId: 3 }]);
-  await act(async () => renderer.root.findByType("button").props.onClick({ stopPropagation() {} }));
-  await act(async () => renderer.root.findAllByType("button").find(b => b.props["aria-label"]?.endsWith("비용 삭제"))!.props.onClick());
+  await click(entryButton());
+  await click(deleteButton()!);
+  expect(confirmation()).not.toBeNull();
   await act(async () => {
     client.setQueryData(expenseKeys.members("r"), { members: [] });
     await new Promise(resolve => setTimeout(resolve, 20));
   });
-  expect(renderer.root.findAllByProps({ "aria-label": "비용 삭제 확인" })).toHaveLength(0);
-  expect(renderer.root.findAllByType("button").filter(b => b.props["aria-label"]?.endsWith("비용 삭제"))).toHaveLength(0);
+  expect(confirmation()).toBeNull();
+  expect(buttonLabelled("비용 삭제 확인")).toBeNull();
+  expect(deleteButton()).toBeUndefined();
 });
 
 it("emits no expense or budget analytics while pending, after rejected writes, or blocked duplicate writes", async () => {
@@ -1024,12 +1107,12 @@ async function startPendingExpenseAndBudgetWrites() {
 it.each(["account", "logout", "room", "unmount", "revocation"])("does not attribute late expense and budget success after %s changes", async (change) => {
   const finishWrites = await startPendingExpenseAndBudgetWrites();
   await act(async () => {
-    if (change === "unmount") renderer.unmount();
+    if (change === "unmount") unmount();
     else if (change === "revocation") getExpenseRecovery(client, "r").revoke();
     else {
       if (change === "account") analytics.userId = 2;
       if (change === "logout") analytics.userId = undefined;
-      renderer.update(<QueryClientProvider client={client}>
+      draw(<QueryClientProvider client={client}>
         <ExpenseProvider roomId={change === "room" ? "next-room" : "r"}><MutationProbe /></ExpenseProvider>
       </QueryClientProvider>);
     }
@@ -1041,7 +1124,7 @@ it.each(["account", "logout", "room", "unmount", "revocation"])("does not attrib
 });
 
 function panelButton(label: string) {
-  return renderer.root.findAllByType("button").find(button => button.children.includes(label))!;
+  return buttons().find(button => button.textContent?.trim() === label)!;
 }
 async function flushQueries() {
   await act(async () => { await new Promise(resolve => setTimeout(resolve, 20)); });
@@ -1049,37 +1132,39 @@ async function flushQueries() {
 it("counts displayed settlement once per opening, never initial reads, rerenders, or refetches", async () => {
   await mountMutations({ panel: true });
   expect(analytics.send).not.toHaveBeenCalled();
-  await act(async () => panelButton("정산 요약").props.onClick());
-  expect(renderer.root.findByType("dialog")).toBeDefined();
-  expect(analytics.send.mock.calls).toEqual([["event", "settlement_summary_viewed", { room_id: "r" }]]);
+  await click(panelButton("정산 요약"));
+  expect(dialogTitled("정산 요약")).toBeDefined();
+  expect(analytics.send.mock.calls).toEqual([sentEvent("settlement_summary_viewed")]);
   await act(async () => { await context.refresh(); });
   await flushQueries();
   expect(analytics.send).toHaveBeenCalledTimes(1);
-  await act(async () => panelButton("확인").props.onClick());
-  await act(async () => panelButton("정산 요약").props.onClick());
+  await click(panelButton("확인"));
+  expect(dialogTitled("정산 요약")).toBeUndefined();
+  await click(panelButton("정산 요약"));
   expect(analytics.send.mock.calls).toEqual([
-    ["event", "settlement_summary_viewed", { room_id: "r" }], ["event", "settlement_summary_viewed", { room_id: "r" }],
+    sentEvent("settlement_summary_viewed"), sentEvent("settlement_summary_viewed"),
   ]);
 });
 it("waits for successful settlement data after loading and error before counting a view", async () => {
   let reject!: (error: Error) => void;
   await mountMutations({ panel: true, summary: () => new Promise((_, fail) => { reject = fail; }) });
-  await act(async () => panelButton("정산 요약").props.onClick());
+  await click(panelButton("정산 요약"));
   expect(analytics.send).not.toHaveBeenCalled();
   await act(async () => reject(new Error("offline")));
   await flushQueries();
-  expect(JSON.stringify(renderer.toJSON())).toContain("정산 조회에 실패했어요.");
+  expect(dialogTitled("정산 요약")!.textContent).toContain("정산 조회에 실패했어요.");
   expect(analytics.send).not.toHaveBeenCalled();
   mocks.summary.mockResolvedValue({ currencies: [] });
   await act(async () => { await context.refresh(); });
   await flushQueries();
-  expect(analytics.send.mock.calls).toEqual([["event", "settlement_summary_viewed", { room_id: "r" }]]);
+  expect(analytics.send.mock.calls).toEqual([sentEvent("settlement_summary_viewed")]);
 });
 it("does not count a settlement that finishes loading after the dialog closes", async () => {
   let finish!: (value: unknown) => void;
   await mountMutations({ panel: true, summary: () => new Promise(resolve => { finish = resolve; }) });
-  await act(async () => panelButton("정산 요약").props.onClick());
-  await act(async () => panelButton("확인").props.onClick());
+  await click(panelButton("정산 요약"));
+  await click(panelButton("확인"));
+  expect(dialogTitled("정산 요약")).toBeUndefined();
   await act(async () => finish({ currencies: [] }));
   await flushQueries();
   expect(analytics.send).not.toHaveBeenCalled();
@@ -1088,7 +1173,7 @@ it("does not count a settlement that finishes loading after the dialog closes",
 
 it.each(["account", "logout", "room", "room-loss", "account-roundtrip", "room-roundtrip"])("synchronously fences pending expense and budget analytics on %s before React rerenders", async (change) => {
   const finishWrites = await startPendingExpenseAndBudgetWrites();
-  // These are the actual synchronous session mutations. No renderer.update or
+  // These are the actual synchronous session mutations. No rerender or
   // hook identity change occurs before the in-flight REST writes resolve.
   await act(async () => {
     if (change === "logout") tearDownClientSession({ queryClient: client });
@@ -1112,7 +1197,7 @@ it.each(["account", "logout", "room", "room-loss", "account-roundtrip", "room-ro
       await context.saveBudget({ budgetKrw: "200", expectedVersion: 1 });
     });
     expect(analytics.send.mock.calls.filter(([command]) => command === "event")).toEqual([
-      ["event", "expense_updated", { room_id: "r" }], ["event", "expense_budget_saved", { room_id: "r" }],
+      sentEvent("expense_updated"), sentEvent("expense_budget_saved"),
     ]);
   }
 });
@@ -1126,18 +1211,19 @@ it.each([
 ])("place summary $label opens the complete scoped original-currency list", async ({ rows, label }) => {
   const records = rows.map(([currency, totalAmount], id) => ({ ...record, id, currency, totalAmount, scheduleId: 2, scheduleItemId: 3 }));
   await mountPlaceExpenseButton([...records, { ...record, id: 100, scheduleId: 9, scheduleItemId: 3 }]);
-  const button = renderer.root.findByType("button");
-  expect(button.findByType("span").children.join("")).toBe(label);
-  expect(button.props["aria-label"]).toBe("장소 비용 목록 열기");
-  const descriptionId = button.props["aria-describedby"];
+  const button = entryButton();
+  expect(button.querySelector("span")!.textContent).toBe(label);
+  expect(button.getAttribute("aria-label")).toBe("장소 비용 목록 열기");
+  const descriptionId = button.getAttribute("aria-describedby");
   expect(descriptionId).toBeTruthy();
-  expect(textOf(renderer.root.findByProps({ id: descriptionId }))).toBe(label);
-  await act(async () => button.props.onClick({ stopPropagation() {} }));
-  expect(renderer.root.findAllByType(ExpenseEditor)).toHaveLength(0);
-  const panel = renderer.root.findByType(ExpenseScopePanel);
-  expect(panel.findAllByType("li")).toHaveLength(rows.length);
-  for (const { currency, totalAmount } of records) {
-    expect(textOf(panel)).toContain(currency);
-    expect(panel.props.expenses).toContainEqual(expect.objectContaining({ currency, totalAmount }));
+  expect(document.getElementById(descriptionId!)!.textContent).toBe(label);
+  await click(button);
+  expect(editors()).toHaveLength(0);
+  const panel = dialogTitled("장소 비용")!;
+  const rowsShown = [...panel.querySelectorAll("li")];
+  expect(rowsShown).toHaveLength(rows.length);
+  // 행마다 원래 통화 금액 그대로 보인다(환산 없음)
+  for (const [index, { currency, totalAmount }] of records.entries()) {
+    expect(rowsShown[index].textContent).toContain(`${formatExpenseAmount(totalAmount)} ${currency}`);
   }
 });
diff --git a/src/components/expenses/ExpenseScopePanel.test.tsx b/src/components/expenses/ExpenseScopePanel.test.tsx
index 3f86aa20..e934f1ab 100644
--- a/src/components/expenses/ExpenseScopePanel.test.tsx
+++ b/src/components/expenses/ExpenseScopePanel.test.tsx
@@ -20,29 +20,47 @@ function Harness({ canManage = true }: { canManage?: boolean }) {
     isPending={false} isError={false} canManage={canManage} busy={false} onAdd={() => {}} onEdit={() => {}}
     onDelete={async () => { await remove(); setExpenses([]); }} onRetry={() => {}} onClose={close} />;
 }
-const button = (label: string) => host.querySelector<HTMLButtonElement>(`[aria-label="${label}"]`)!;
-const confirmation = () => host.querySelector<HTMLDialogElement>('dialog[role="alertdialog"]');
+// 목록 대화상자·확인창은 Base UI가 document.body로 포털한다
+const button = (label: string) => document.querySelector<HTMLButtonElement>(`[aria-label="${label}"]`)!;
+const listDialog = () => document.querySelector<HTMLElement>('[role="dialog"]');
+const confirmation = () => document.querySelector<HTMLElement>('[role="alertdialog"]');
+const listHeading = () => [...document.querySelectorAll("h3")].find((heading) => heading.textContent === "내역");
+async function settle() {
+  // 닫힘 전환·finalFocus(microtask)·Base UI의 requestAnimationFrame을 기다린다
+  await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)); });
+}
+async function pressEscape() {
+  await act(async () => {
+    (document.activeElement ?? document.body).dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+  });
+  await settle();
+}
 async function openDelete() {
-  const trigger = host.querySelector<HTMLButtonElement>('[aria-label$="USD 비용 삭제"]')!;
+  const trigger = document.querySelector<HTMLButtonElement>('[aria-label$="USD 비용 삭제"]')!;
   trigger.focus();
   await act(async () => trigger.click());
+  await settle();
   return trigger;
 }
 beforeEach(async () => {
   vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
-  HTMLDialogElement.prototype.showModal = function () { this.open = true; };
-  HTMLDialogElement.prototype.close = function () { this.open = false; };
   close.mockReset(); remove.mockReset(); remove.mockResolvedValue(undefined);
   host = document.createElement("div"); document.body.append(host); root = createRoot(host);
   await act(async () => root.render(<Harness />));
+  await settle();
 });
 afterEach(async () => { await act(async () => root.unmount()); host.remove(); vi.unstubAllGlobals(); });
 
 it("opens a separate modal and restores the delete trigger after cancel", async () => {
   const trigger = await openDelete();
-  expect(confirmation()?.open).toBe(true);
+  expect(confirmation()).not.toBeNull();
+  expect(confirmation()!.textContent).toContain("비용을 삭제할까요?");
+  expect(listDialog()).not.toBeNull();
   expect(document.activeElement).toBe(button("비용 삭제 취소"));
   await act(async () => button("비용 삭제 취소").click());
+  await settle();
   expect(confirmation()).toBeNull();
   expect(document.activeElement).toBe(trigger);
   expect(remove).not.toHaveBeenCalled();
@@ -51,9 +69,10 @@ it("opens a separate modal and restores the delete trigger after cancel", async
 it("Escape cancels only the confirmation and preserves the expense list", async () => {
   const trigger = await openDelete();
   expect(confirmation()).not.toBeNull();
-  await act(async () => confirmation()!.dispatchEvent(new Event("cancel", { bubbles: true, cancelable: true })));
+  await pressEscape();
   expect(close).not.toHaveBeenCalled();
   expect(confirmation()).toBeNull();
+  expect(listDialog()).not.toBeNull();
   expect(document.activeElement).toBe(trigger);
 });
 
@@ -63,22 +82,32 @@ it("blocks dismissal during deletion and restores focus to the list heading afte
   await openDelete();
   expect(confirmation()).not.toBeNull();
   await act(async () => button("비용 삭제 확인").click());
-  await act(async () => confirmation()!.dispatchEvent(new Event("cancel", { bubbles: true, cancelable: true })));
-  expect(confirmation()?.open).toBe(true);
-  expect(button("비용 삭제 취소").disabled).toBe(true);
+  const confirm = confirmation()!.querySelector<HTMLButtonElement>("[aria-busy='true']")!;
+  expect(confirm.getAttribute("aria-disabled")).toBe("true");
+  expect(document.getElementById(confirm.getAttribute("aria-labelledby")!)!.textContent).toBe("삭제 중");
+  await pressEscape();
+  expect(confirmation()).not.toBeNull();
+  const cancel = button("비용 삭제 취소");
+  expect(cancel.disabled).toBe(true);
+  await act(async () => cancel.click());
+  await settle();
+  expect(confirmation()).not.toBeNull();
   expect(close).not.toHaveBeenCalled();
+  expect(remove).toHaveBeenCalledOnce();
   await act(async () => finish());
+  await settle();
   expect(confirmation()).toBeNull();
-  expect(document.activeElement).toBe(host.querySelector("h2"));
-  expect(host.querySelectorAll("li")).toHaveLength(0);
+  expect(document.activeElement).toBe(listHeading());
+  expect(listDialog()!.querySelectorAll("li")).toHaveLength(0);
 });
 
 
 it("allows closing the list after management permission is lost during confirmation", async () => {
   await openDelete();
   await act(async () => root.render(<Harness canManage={false} />));
+  await settle();
   expect(confirmation()).toBeNull();
-  await act(async () => host.querySelector("dialog")!.dispatchEvent(new Event("cancel", { cancelable: true })));
+  await pressEscape();
   expect(close).toHaveBeenCalledOnce();
   expect(remove).not.toHaveBeenCalled();
 });
diff --git a/src/components/expenses/ExpenseScopePanel.tsx b/src/components/expenses/ExpenseScopePanel.tsx
index ea26e561..f4b92c10 100644
--- a/src/components/expenses/ExpenseScopePanel.tsx
+++ b/src/components/expenses/ExpenseScopePanel.tsx
@@ -1,12 +1,31 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  ResponsiveDialog,
+  ResponsiveDialogBody,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+} from "@/components/ui/responsive-dialog";
+import { Spinner } from "@/components/ui/spinner";
 import { useMobileView } from "@/contexts/MobileViewContext";
-import { useSheetDrag } from "@/components/mobile/useSheetDrag";
-import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
 import { expenseTitle } from "@/lib/expenses/expense-name";
 
-import { Pencil, Plus, Trash2, X } from "lucide-react";
-import { useEffect, useId, useRef, useState } from "react";
+import { PlusIcon } from "@/assets/icons";
+import { Pencil, Trash2 } from "lucide-react";
+import { useRef, useState } from "react";
 
 import { ExpenseApiError, type Expense } from "@/lib/api/rooms/expenses";
 import {
@@ -50,7 +69,6 @@ export function ExpenseScopePanel({
   const [error, setError] = useState("");
   const deleteLock = useRef(false);
   const disabled = busy || deleting;
-  const confirming = selected !== null && canManage;
   async function confirmDelete() {
     if (!selected || !canManage || busy || deleteLock.current) return;
     deleteLock.current = true;
@@ -76,74 +94,38 @@ export function ExpenseScopePanel({
       deleteLock.current = false;
     }
   }
-  const sheetDrag = useSheetDrag(onClose, disabled || confirming);
   const { isMobileDevice } = useMobileView();
-  // 바텀시트는 기준 시트처럼 딤을 눌러 닫는다. 시트 안에서 시작한 드래그가 딤에서 끝나면 닫지 않는다.
-  const backdropPress = useRef(false);
-  const dialog = useRef<HTMLDialogElement>(null);
-  const title = useRef<HTMLHeadingElement>(null);
-  const titleId = useId();
+  // 확인창이 닫히면 연 삭제 버튼으로, 그 행이 지워졌거나 버튼이 막혀 있으면 '내역' 제목으로 포커스를 돌린다(옛 동작)
+  const deleteOpener = useRef<HTMLButtonElement | null>(null);
+  const listHeading = useRef<HTMLHeadingElement>(null);
   const scoped = expensesInScope(expenses, scope);
   const totals = totalsByCurrency(scoped);
 
-  useEffect(() => {
-    const element = dialog.current;
-    const opener = element?.ownerDocument.activeElement;
-    element?.showModal();
-    title.current?.focus();
-    return () => {
-      element?.close();
-      if (opener && opener instanceof HTMLElement && opener.isConnected) opener.focus();
-    };
-  }, []);
-
   return (
-    <dialog
-      ref={dialog}
-      style={sheetDrag.surfaceStyle}
-      aria-labelledby={titleId}
-      onCancel={(event) => {
-        event.preventDefault();
-        if (!disabled && !confirming) onClose();
-      }}
-      onPointerDown={(event) => {
-        backdropPress.current = event.button === 0 && event.target === event.currentTarget;
+    <ResponsiveDialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
       }}
-      onPointerUp={(event) => {
-        const startedOnBackdrop = backdropPress.current;
-        backdropPress.current = false;
-        if (isMobileDevice && !disabled && !confirming && startedOnBackdrop && event.target === event.currentTarget) onClose();
-      }}
-      onPointerCancel={() => {
-        backdropPress.current = false;
-      }}
-      className="fixed inset-auto left-1/2 top-1/2 m-0 max-h-[85dvh] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-2xl border border-gray-border bg-white p-0 text-text shadow-2xl backdrop:bg-black/40 mobile:backdrop:bg-[#0f1724]/35 mobile:backdrop:animate-in mobile:backdrop:fade-in-0 mobile:backdrop:duration-200 mobile:bottom-0 mobile:left-0 mobile:max-h-[60dvh] mobile:top-auto mobile:w-full mobile:max-w-none mobile:translate-x-0 mobile:translate-y-0 mobile:rounded-b-none mobile:rounded-t-[20px] mobile:animate-in mobile:slide-in-from-bottom mobile:duration-200 mobile:border-x-0 mobile:border-b-0"
+      // 확인창이 열려 있는 동안 Esc·딤은 Base UI가 위 확인창에만 준다
+      closeDisabled={disabled}
+      // PC는 딤을 눌러도 닫지 않고, 시트는 딤을 눌러 닫는다(지금 동작)
+      disablePointerDismissal={!isMobileDevice}
     >
-      <div className="flex max-h-[85dvh] min-h-0 flex-col mobile:max-h-[60dvh]">
-        <BottomSheetDragHandle drag={sheetDrag} className="mobile:pt-[11px]">
-        <div aria-hidden className="mx-auto hidden h-1 w-9 shrink-0 rounded-[2px] bg-border-subtle mobile:block" />
-        <header className="flex items-start justify-between gap-3 border-b border-gray-border px-5 py-3">
-          <div className="min-w-0">
-            <h2 ref={title} id={titleId} tabIndex={-1} className="text-title-m mobile:text-title-s font-bold focus:outline-none">
-              {scope.label} 비용
-            </h2>
-            {scope.subtitle ? (
-              <p className="mt-1 text-body-s-regular text-dark-gray">{scope.subtitle}</p>
-            ) : null}
-          </div>
-          <button
-            type="button"
-            aria-label="비용 목록 닫기"
-            onClick={onClose}
-            disabled={disabled}
-            className="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-dark-gray transition-colors hover:bg-gray-50 mobile:-my-[9px] mobile:-mr-2.5 mobile:size-11 focus-visible:outline-2 focus-visible:outline-primary"
-          >
-            <X size={18} aria-hidden="true" className="mobile:size-6" />
-          </button>
-        </header>
-        </BottomSheetDragHandle>
+      <ResponsiveDialogContent
+        size="md"
+        // 시트는 지금처럼 내용 높이, 최대 60dvh. PC는 Dialog 기본 최대 높이
+        className={isMobileDevice ? "max-h-[60dvh]" : undefined}
+        closeLabel="비용 목록 닫기"
+      >
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>{scope.label} 비용</ResponsiveDialogTitle>
+          {scope.subtitle ? (
+            <ResponsiveDialogDescription>{scope.subtitle}</ResponsiveDialogDescription>
+          ) : null}
+        </ResponsiveDialogHeader>
 
-        <div className="flex min-h-0 flex-1 flex-col px-5 py-4">
+        <ResponsiveDialogBody>
           <p className="text-body-s-regular text-dark-gray">총 비용 · {scoped.length}건</p>
           <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-title-m mobile:text-title-s font-bold tabular-nums">
             {totals.length ? totals.map(({ currency, amount }) => (
@@ -152,16 +134,16 @@ export function ExpenseScopePanel({
           </div>
 
           {error && <p role="alert" className="mt-3 text-body-s-regular text-status-negative">{error}</p>}
-          <h3 className="mt-4 text-body-s-emphasis font-semibold text-dark-gray">내역</h3>
+          <h3 ref={listHeading} tabIndex={-1} className="mt-4 text-body-s-emphasis font-semibold text-dark-gray focus:outline-none">내역</h3>
           {isPending && !scoped.length ? (
-            <LoadingIndicator label="비용 불러오는 중" className="flex w-full py-5" />
+            <Spinner aria-label="비용 불러오는 중" className="flex w-full py-5" />
           ) : isError && !scoped.length ? (
             <div className="space-y-3 py-5 text-body-s-regular text-dark-gray">
               <p role="alert">비용 조회에 실패했어요.</p>
               <button type="button" onClick={() => { void Promise.resolve(onRetry()).catch(() => setError("비용 조회에 실패했어요. 다시 시도해 주세요.")); }} className="cursor-pointer text-primary-strong underline">다시 시도</button>
             </div>
           ) : scoped.length ? (
-            <ul className="mt-2 -mr-5 min-h-0 overflow-y-auto overscroll-contain pr-5 divide-y divide-gray-border [scrollbar-color:rgba(0,0,0,0.2)_transparent]">
+            <ul className="mt-2 divide-y divide-gray-border">
               {scoped.map((expense) => (
                 <li key={expense.id} className="flex items-center gap-2 py-2">
                   <div className="flex min-h-11 min-w-0 flex-1 items-center justify-between gap-3 px-2 py-2 text-body-s-regular">
@@ -197,7 +179,7 @@ export function ExpenseScopePanel({
                         aria-label={`${expenseTitle(expense)} ${formatExpenseAmount(expense.totalAmount)} ${expense.currency} 비용 삭제`}
                         title="비용 삭제"
                         disabled={disabled}
-                        onClick={() => { setError(""); setSelected(expense); }}
+                        onClick={(event) => { deleteOpener.current = event.currentTarget; setError(""); setSelected(expense); }}
                         className="flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-lg text-dark-gray transition-colors enabled:hover:bg-gray-50 enabled:hover:text-text focus-visible:outline-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50"
                       >
                         <Trash2 size={18} aria-hidden="true" />
@@ -210,90 +192,76 @@ export function ExpenseScopePanel({
           ) : (
             <p className="py-5 text-body-s-regular text-dark-gray">아직 등록된 비용이 없어요.</p>
           )}
-        </div>
+        </ResponsiveDialogBody>
         {canManage ? (
-          <footer className="shrink-0 border-t border-gray-border px-5 py-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
-            <button
-              type="button"
-              disabled={disabled}
-              onClick={onAdd}
-              className="flex min-h-11 w-full cursor-pointer items-center justify-center gap-1 rounded-lg bg-primary px-4 py-2 text-label-m-emphasis font-semibold text-white transition-colors enabled:hover:bg-primary-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              <Plus size={16} aria-hidden="true" />
+          <ResponsiveDialogFooter>
+            <Button tone="brand" disabled={disabled} onClick={onAdd}>
+              <PlusIcon data-icon="inline-start" />
               비용 추가
-            </button>
-          </footer>
+            </Button>
+          </ResponsiveDialogFooter>
+        ) : null}
+        {/* 확인창은 목록 대화상자의 React 자식으로 둔다. Base UI가 위 레이어(확인창)에만 Esc·포커스를 준다 */}
+        {selected && canManage ? (
+          <ExpenseDeleteDialog
+            expense={selected}
+            pending={disabled}
+            onCancel={() => setSelected(null)}
+            onConfirm={() => void confirmDelete()}
+            finalFocus={() => {
+              // Base UI는 닫히는 커밋 도중 이 함수를 불러, 그때는 삭제 버튼의 disabled(deleting)가 아직 풀리지 않았다.
+              // 커밋이 끝난 뒤(microtask) DOM을 보고 고르고, false를 돌려 Base UI는 포커스를 옮기지 않게 한다(옛 동작)
+              const opener = deleteOpener.current;
+              const heading = listHeading.current;
+              queueMicrotask(() => {
+                if (opener?.isConnected && !opener.matches(":disabled")) opener.focus();
+                else heading?.focus();
+              });
+              return false;
+            }}
+          />
         ) : null}
-      </div>
-      {selected && canManage ? (
-        <ExpenseDeleteDialog
-          expense={selected}
-          pending={disabled}
-          onCancel={() => setSelected(null)}
-          onConfirm={() => void confirmDelete()}
-          fallbackFocus={title}
-        />
-      ) : null}
-    </dialog>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
   );
 }
 
 
-function ExpenseDeleteDialog({ expense, pending, onCancel, onConfirm, fallbackFocus }: Readonly<{
+function ExpenseDeleteDialog({ expense, pending, onCancel, onConfirm, finalFocus }: Readonly<{
   expense: Expense;
   pending: boolean;
   onCancel: () => void;
   onConfirm: () => void;
-  fallbackFocus: { current: HTMLHeadingElement | null };
+  finalFocus: () => boolean;
 }>) {
-  const dialog = useRef<HTMLDialogElement>(null);
-  const cancel = useRef<HTMLButtonElement>(null);
-  const titleId = useId();
-  const descriptionId = useId();
-
-  useEffect(() => {
-    const element = dialog.current;
-    const trigger = element?.ownerDocument.activeElement;
-    const fallback = fallbackFocus.current;
-    element?.showModal();
-    cancel.current?.focus();
-    return () => {
-      element?.close();
-      // Wait for the parent to re-enable its controls or remove the deleted row.
-      queueMicrotask(() => {
-        if (trigger && trigger instanceof HTMLElement && trigger.isConnected && !trigger.matches(":disabled")) {
-          trigger.focus();
-        } else if (fallback?.isConnected) {
-          fallback.focus();
-        }
-      });
-    };
-  }, [fallbackFocus]);
-
   return (
-    <dialog
-      ref={dialog}
-      role="alertdialog"
-      aria-labelledby={titleId}
-      aria-describedby={descriptionId}
-      aria-busy={pending}
-      onCancel={(event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!pending) onCancel();
+    <AlertDialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onCancel();
       }}
-      className="fixed inset-0 m-auto max-h-[85dvh] w-[calc(100%-2rem)] max-w-sm overflow-y-auto rounded-2xl border border-gray-border bg-white p-5 text-text shadow-2xl backdrop:bg-black/30"
+      closeDisabled={pending}
     >
-      <h2 id={titleId} className="text-title-s font-bold">비용을 삭제할까요?</h2>
-      <p id={descriptionId} className="mt-2 text-body-s-regular text-dark-gray">삭제한 내역은 복구할 수 없어요.</p>
-      <div className="mt-5 flex flex-wrap items-center justify-between gap-2 rounded-xl bg-gray-50 px-4 py-3">
-        <span className="min-w-0 break-words text-body-s-emphasis">{expenseTitle(expense)}</span>
-        <span className="shrink-0 text-body-s-emphasis font-semibold tabular-nums">{formatExpenseAmount(expense.totalAmount)} {expense.currency}</span>
-      </div>
-      <div className="mt-5 grid grid-cols-2 gap-3">
-        <button ref={cancel} type="button" aria-label="비용 삭제 취소" disabled={pending} onClick={onCancel} className="min-h-11 cursor-pointer rounded-lg border border-gray-border px-4 text-body-s-emphasis transition-colors enabled:hover:bg-gray-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50">취소</button>
-        <button type="button" aria-label="비용 삭제 확인" disabled={pending} onClick={onConfirm} className="min-h-11 cursor-pointer rounded-lg bg-status-negative px-4 text-body-s-emphasis text-white transition-colors enabled:hover:brightness-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-status-negative disabled:cursor-not-allowed disabled:opacity-50">{pending ? "삭제 중…" : "비용 삭제"}</button>
-      </div>
-    </dialog>
+      {/* 딤을 눌러 닫지 않는다(지금 확인창과 같음). 처음 포커스는 취소 버튼(AlertDialogContent 기본) */}
+      <AlertDialogContent
+        aria-busy={pending}
+        finalFocus={finalFocus}
+      >
+        <AlertDialogHeader>
+          <AlertDialogTitle>비용을 삭제할까요?</AlertDialogTitle>
+          <AlertDialogDescription>삭제한 내역은 복구할 수 없어요.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <div className="flex flex-wrap items-center justify-between gap-2 rounded-xl bg-gray-50 px-4 py-3">
+          <span className="min-w-0 break-words text-body-s-emphasis">{expenseTitle(expense)}</span>
+          <span className="shrink-0 text-body-s-emphasis font-semibold tabular-nums">{formatExpenseAmount(expense.totalAmount)} {expense.currency}</span>
+        </div>
+        <AlertDialogFooter>
+          <AlertDialogCancel aria-label="비용 삭제 취소" disabled={pending}>취소</AlertDialogCancel>
+          <AlertDialogAction tone="critical" aria-label="비용 삭제 확인" loading={pending} loadingLabel="삭제 중" onClick={onConfirm}>
+            비용 삭제
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 }
diff --git a/src/components/expenses/ExpenseSelect.test.tsx b/src/components/expenses/ExpenseSelect.test.tsx
index 2804a857..4306503b 100644
--- a/src/components/expenses/ExpenseSelect.test.tsx
+++ b/src/components/expenses/ExpenseSelect.test.tsx
@@ -1,63 +1,123 @@
-import { act, create, type ReactTestRenderer } from "react-test-renderer";
-import { afterEach, expect, it, vi } from "vitest";
+// @vitest-environment jsdom
+import { act, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { ExpenseSelect } from "./ExpenseSelect";
 
-let renderer: ReactTestRenderer;
+const state = vi.hoisted(() => ({ mobile: false }));
+vi.mock("@/contexts/MobileViewContext", () => ({ useMobileView: () => ({ isMobileDevice: state.mobile }) }));
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let host: HTMLDivElement;
+let root: Root;
 const change = vi.fn();
 const options = [
   { value: "FOOD", label: "식사" },
   { value: "FLIGHT", label: "항공" },
 ];
+beforeEach(() => {
+  state.mobile = false;
+  change.mockClear();
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
 afterEach(async () => {
-  if (renderer) await act(async () => renderer.unmount());
+  await act(async () => root.unmount());
+  host.remove();
 });
-async function mount(disabled = false) {
-  change.mockClear();
-  await act(async () => {
-    renderer = create(
-      <ExpenseSelect
-        label="카테고리"
-        value=""
-        options={options}
-        onChange={change}
-        disabled={disabled}
-      />,
-    );
-  });
+async function render(node: ReactNode) {
+  await act(async () => root.render(node));
 }
-const trigger = () => renderer.root.findByProps({ role: "combobox" });
-async function key(key: string) {
-  const event = {
-    key,
-    preventDefault: vi.fn(),
-    stopPropagation: vi.fn(),
-    nativeEvent: { isComposing: false },
-  };
-  await act(async () => trigger().props.onKeyDown(event));
+async function mount(props: { disabled?: boolean; mobileSheet?: boolean } = {}) {
+  await render(<ExpenseSelect label="카테고리" value="" options={options} onChange={change} {...props} />);
+}
+const trigger = () => document.querySelector<HTMLElement>('[role="combobox"]')!;
+const optionNodes = () => [...document.querySelectorAll<HTMLElement>('[role="option"]')];
+// Base UI는 열고 닫을 때 microtask·timeout으로 포커스·목록을 옮긴다
+const flush = () => act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)); });
+async function key(target: Element, key: string) {
+  const event = new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true });
+  await act(async () => { target.dispatchEvent(event); });
+  await flush();
   return event;
 }
-it("selects custom options by keyboard without submitting the containing form", async () => {
-  await mount();
-  await key("ArrowDown");
-  expect(renderer.root.findAllByProps({ role: "option" })).toHaveLength(2);
-  await key("End");
-  expect((await key("Enter")).preventDefault).toHaveBeenCalled();
+
+it("selects options by keyboard without submitting the containing form", async () => {
+  const submit = vi.fn();
+  await render(
+    <form onSubmit={(event) => { event.preventDefault(); submit(); }}>
+      <ExpenseSelect label="카테고리" value="" options={options} onChange={change} />
+    </form>,
+  );
+  expect(trigger().textContent).toBe("선택");
+  await act(async () => trigger().focus());
+  await key(trigger(), "ArrowDown");
+  expect(trigger().getAttribute("aria-expanded")).toBe("true");
+  expect(optionNodes().map((option) => option.textContent)).toEqual(["식사", "항공"]);
+  await key(document.activeElement!, "End");
+  expect(document.activeElement?.textContent).toBe("항공");
+  await key(document.activeElement!, "Enter");
   expect(change).toHaveBeenCalledWith("FLIGHT");
-  expect(trigger().props["aria-expanded"]).toBe(false);
+  expect(submit).not.toHaveBeenCalled();
+  expect(trigger().getAttribute("aria-expanded")).toBe("false");
 });
-it("closes on Escape without propagating to the expense dialog", async () => {
+
+it("closes on Escape without changing the value and returns focus to the trigger", async () => {
   await mount();
-  await act(async () => trigger().props.onClick());
-  const event = await key("Escape");
-  expect(event.preventDefault).toHaveBeenCalled();
-  expect(event.stopPropagation).toHaveBeenCalled();
+  await act(async () => trigger().click());
+  await flush();
+  expect(trigger().getAttribute("aria-expanded")).toBe("true");
+  await key(document.activeElement!, "Escape");
   expect(change).not.toHaveBeenCalled();
-  expect(trigger().props["aria-expanded"]).toBe(false);
+  expect(trigger().getAttribute("aria-expanded")).toBe("false");
+  expect(document.activeElement).toBe(trigger());
 });
+
 it("does not open or select while disabled", async () => {
-  await mount(true);
-  await act(async () => trigger().props.onClick());
-  await key("ArrowDown");
-  expect(trigger().props["aria-expanded"]).toBe(false);
+  await mount({ disabled: true });
+  await act(async () => trigger().click());
+  await act(async () => trigger().focus());
+  await key(trigger(), "ArrowDown");
+  expect(trigger().getAttribute("aria-expanded")).toBe("false");
   expect(change).not.toHaveBeenCalled();
 });
+
+it("shows the label of an empty-value option instead of the placeholder", async () => {
+  await render(
+    <ExpenseSelect
+      label="연결 장소 (선택)"
+      value=""
+      options={[{ value: "", label: "장소 연결 없음" }, { value: "100", label: "경복궁" }]}
+      onChange={change}
+    />,
+  );
+  expect(trigger().textContent).toBe("장소 연결 없음");
+  await act(async () => trigger().click());
+  await flush();
+  await act(async () => optionNodes().find((option) => option.textContent === "경복궁")!.click());
+  expect(change).toHaveBeenCalledWith("100");
+});
+
+it("marks the trigger invalid only while aria-invalid is set", async () => {
+  await render(<ExpenseSelect label="카테고리" value="" options={options} onChange={change} aria-invalid />);
+  expect(trigger().getAttribute("aria-invalid")).toBe("true");
+  await render(<ExpenseSelect label="카테고리" value="" options={options} onChange={change} aria-invalid={false} />);
+  expect(trigger().hasAttribute("aria-invalid")).toBe(false);
+});
+
+it("picks from a bottom sheet radio list on mobile devices when mobileSheet is set", async () => {
+  state.mobile = true;
+  await mount({ mobileSheet: true });
+  expect(trigger().getAttribute("aria-haspopup")).toBe("dialog");
+  await act(async () => trigger().click());
+  await flush();
+  const sheet = document.querySelector<HTMLElement>('[role="dialog"]')!;
+  expect(sheet.textContent).toContain("카테고리");
+  const radios = [...sheet.querySelectorAll<HTMLElement>('[role="radio"]')];
+  expect(radios).toHaveLength(2);
+  await act(async () => radios[1].click());
+  await flush();
+  expect(change).toHaveBeenCalledWith("FLIGHT");
+  expect(trigger().getAttribute("aria-expanded")).toBe("false");
+});
diff --git a/src/components/expenses/ExpenseSelect.tsx b/src/components/expenses/ExpenseSelect.tsx
index 64b07bdc..30254d41 100644
--- a/src/components/expenses/ExpenseSelect.tsx
+++ b/src/components/expenses/ExpenseSelect.tsx
@@ -1,12 +1,27 @@
 "use client";
 
-import { useEffect, useId, useRef, useState } from "react";
-import { cn } from "@/lib/utils";
-import { ExpenseDialog } from "./ExpenseDialog";
-import { useMobileView } from "@/contexts/MobileViewContext";
-import { Check } from "lucide-react";
+import { useId, useState } from "react";
+
 import { ChevronDownIcon } from "@/assets/icons";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useMobileView } from "@/contexts/MobileViewContext";
+import { cn } from "@/lib/utils";
+
+type ExpenseSelectOption = { value: string; label: string };
 
+/**
+ * 가계부 선택 칸. 빈 문자열 값은 '선택 없음'이다(카테고리 미선택, 장소 연결 없음).
+ * 목록은 ui Select이고, mobileSheet이면 모바일 기기에서만 아래 시트 라디오 목록(Drawer)으로 고른다.
+ */
 export function ExpenseSelect({
   label,
   name,
@@ -17,183 +32,137 @@ export function ExpenseSelect({
   disabled = false,
   mobileSheet = false,
   compact = false,
+  id,
+  "aria-invalid": ariaInvalid,
 }: {
   label: string;
   name?: string;
   value: string;
-  options: { value: string; label: string }[];
+  options: ExpenseSelectOption[];
   onChange: (value: string) => void;
   placeholder?: string;
   disabled?: boolean;
+  /** 모바일 기기에서 아래 시트 라디오 목록으로 고른다(가계부 카테고리 필터) */
   mobileSheet?: boolean;
+  /** 시트 트리거만 작게 그린다. ui Select 트리거는 디자인 시스템 크기 하나다 */
   compact?: boolean;
+  /** 보이는 라벨(FieldLabel htmlFor)과 잇는 트리거 id */
+  id?: string;
+  /** 칸 오류. 트리거에 Text Field 오류 모양을 그린다 */
+  "aria-invalid"?: boolean;
 }) {
   const { isMobileDevice } = useMobileView();
-  const [sheet, setSheet] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [active, setActive] = useState(0);
-  const root = useRef<HTMLDivElement>(null);
-  const trigger = useRef<HTMLButtonElement>(null);
-  const list = useRef<HTMLDivElement>(null);
-  const id = useId();
-  const isOpen = open && !disabled;
-  const activeIndex = Math.min(active, options.length - 1);
-  const selected = options.find((option) => option.value === value);
-  function show() {
-    setSheet(mobileSheet && isMobileDevice);
-    setActive(
-      Math.max(
-        0,
-        options.findIndex((option) => option.value === value),
-      ),
+  if (mobileSheet && isMobileDevice) {
+    return (
+      <ExpenseSelectSheet
+        label={label}
+        name={name}
+        value={value}
+        options={options}
+        onChange={onChange}
+        placeholder={placeholder}
+        disabled={disabled}
+        compact={compact}
+      />
     );
-    setOpen(true);
   }
-  function choose(next: string) {
-    if (disabled) return;
-    onChange(next);
-    setOpen(false);
-    trigger.current?.focus();
-  }
-  useEffect(() => {
-    const element = root.current;
-    if (!isOpen || !element || sheet) return;
-    const outside = (event: PointerEvent) => {
-      if (!element.contains(event.target as Node)) setOpen(false);
-    };
-    element.ownerDocument.addEventListener("pointerdown", outside);
-    return () =>
-      element.ownerDocument.removeEventListener("pointerdown", outside);
-  }, [isOpen, sheet]);
-  useEffect(() => {
-    if (isOpen)
-      list.current?.children[activeIndex]?.scrollIntoView({ block: "nearest" });
-  }, [isOpen, activeIndex]);
+  // Base UI Select는 null만 '선택 없음'으로 본다. 빈 문자열을 그대로 넘기면 '장소 연결 없음' 같은 빈 값 항목의 라벨 대신 placeholder가 보인다
+  const items = options.map((option) => ({ value: option.value === "" ? null : option.value, label: option.label }));
   return (
-    <div
-      ref={root}
-      className="relative min-w-0"
-      onBlur={(event) => {
-        if (!sheet && !event.currentTarget.contains(event.relatedTarget))
-          setOpen(false);
-      }}
+    <Select
+      items={items}
+      value={value === "" ? null : value}
+      onValueChange={(next) => onChange(next ?? "")}
+      name={name}
+      disabled={disabled}
     >
+      <SelectTrigger id={id} aria-label={label} aria-invalid={ariaInvalid || undefined}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {items.map((item) => (
+          <SelectItem key={item.value ?? ""} value={item.value}>
+            {item.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+// 모바일 기기 카테고리 시트. 트리거는 지금 시트 트리거 모양 그대로, 목록은 Drawer + 라디오다
+function ExpenseSelectSheet({
+  label,
+  name,
+  value,
+  options,
+  onChange,
+  placeholder,
+  disabled,
+  compact,
+}: Readonly<{
+  label: string;
+  name?: string;
+  value: string;
+  options: ExpenseSelectOption[];
+  onChange: (value: string) => void;
+  placeholder: string;
+  disabled: boolean;
+  compact: boolean;
+}>) {
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const sheetId = useId();
+  const isOpen = isSheetOpen && !disabled;
+  const selected = options.find((option) => option.value === value);
+  return (
+    <Drawer open={isOpen} onOpenChange={setIsSheetOpen}>
       <button
-        ref={trigger}
         type="button"
         name={name}
         role="combobox"
         aria-label={label}
-        aria-haspopup={sheet ? "dialog" : "listbox"}
+        aria-haspopup="dialog"
         aria-expanded={isOpen}
-        aria-controls={isOpen && !sheet ? id : undefined}
-        aria-activedescendant={
-          isOpen && !sheet && options[activeIndex]
-            ? id + "-" + activeIndex
-            : undefined
-        }
+        aria-controls={isOpen ? sheetId : undefined}
         disabled={disabled}
-        onClick={() => {
-          if (!disabled) {
-            if (isOpen) setOpen(false);
-            else show();
-          }
-        }}
-        onKeyDown={(event) => {
-          if (disabled || event.nativeEvent.isComposing) return;
-          if (event.key === "Escape" && isOpen) {
-            event.preventDefault();
-            event.stopPropagation();
-            setOpen(false);
-          } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            event.preventDefault();
-            if (!isOpen) show();
-            else
-              setActive(
-                Math.max(
-                  0,
-                  Math.min(
-                    options.length - 1,
-                    activeIndex + (event.key === "ArrowDown" ? 1 : -1),
-                  ),
-                ),
-              );
-          } else if (isOpen && (event.key === "Home" || event.key === "End")) {
-            event.preventDefault();
-            setActive(event.key === "Home" ? 0 : options.length - 1);
-          } else if (isOpen && (event.key === "Enter" || event.key === " ")) {
-            event.preventDefault();
-            if (options[activeIndex]) choose(options[activeIndex].value);
-          }
-        }}
+        onClick={() => setIsSheetOpen(true)}
         className={cn("flex min-h-12 w-full min-w-0 items-center justify-between gap-3 rounded-lg border border-border bg-fill-subtle px-3.5 py-2 text-left text-[16px] leading-6 font-normal cursor-pointer transition-colors enabled:hover:border-primary/40 enabled:hover:bg-gray-50 aria-expanded:border-primary/50 aria-expanded:bg-primary/5 focus-visible:outline-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50", compact && "min-h-10 gap-2 px-3 text-[14px] leading-5 mobile:min-h-11 max-sm:min-h-11")}
       >
-        <span className={`min-w-0 break-words ${selected ? "" : "text-text-subtle"}`}>
+        <span className={cn("min-w-0 break-words", !selected && "text-text-subtle")}>
           {selected?.label ?? placeholder}
         </span>
         <ChevronDownIcon
           size={compact ? 16 : 20}
           aria-hidden="true"
-          className={`shrink-0 text-icon-subtle transition-transform ${isOpen ? "rotate-180" : ""}`}
+          className={cn("shrink-0 text-icon-subtle transition-transform", isOpen && "rotate-180")}
         />
       </button>
-      {isOpen && sheet && (
-        <ExpenseDialog title="카테고리" onClose={() => setOpen(false)}>
-          <p className="mb-3 text-body-xs-regular text-text-subtle">
-            선택한 카테고리를 보여줘요.
-          </p>
-          <div className="space-y-1">
+      <DrawerContent id={sheetId} closeLabel="카테고리 닫기">
+        <DrawerHeader>
+          <DrawerTitle>카테고리</DrawerTitle>
+          <DrawerDescription>선택한 카테고리를 보여줘요.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <RadioGroup
+            aria-label={label}
+            value={value}
+            onValueChange={(next) => {
+              onChange(String(next));
+              setIsSheetOpen(false);
+            }}
+          >
             {options.map((option) => (
               <label
                 key={option.value}
                 className={cn("flex min-h-12 cursor-pointer items-center justify-between text-body-s-emphasis", compact && "text-[14px] leading-5")}
               >
                 {option.value === "ALL" ? "전체" : option.label}
-                <input
-                  type="radio"
-                  name={id}
-                  value={option.value}
-                  checked={value === option.value}
-                  onChange={() => choose(option.value)}
-                  className="size-4 cursor-pointer accent-primary"
-                />
+                <RadioGroupItem value={option.value} />
               </label>
             ))}
-          </div>
-        </ExpenseDialog>
-      )}
-      {isOpen && !sheet && (
-        <div
-          ref={list}
-          id={id}
-          role="listbox"
-          aria-label={label}
-          className="absolute inset-x-0 top-full z-30 mt-2 max-h-60 overflow-y-auto overscroll-contain rounded-lg border border-border bg-background p-1.5 shadow-lg"
-        >
-          {options.map((option, index) => (
-            <button
-              key={option.value}
-              id={id + "-" + index}
-              type="button"
-              role="option"
-              aria-selected={value === option.value}
-              tabIndex={-1}
-              onMouseDown={(event) => event.preventDefault()}
-              onClick={() => choose(option.value)}
-              className={cn("flex min-h-12 w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-[16px] leading-6 font-normal cursor-pointer transition-colors hover:bg-primary/10", compact && "text-[14px] leading-5", index === activeIndex && "bg-primary/5")}
-            >
-              <span className="min-w-0 break-words">{option.label}</span>
-              {value === option.value && (
-                <Check
-                  size={16}
-                  aria-hidden="true"
-                  className="shrink-0 text-primary"
-                />
-              )}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
+          </RadioGroup>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
   );
 }
diff --git a/src/components/expenses/ExpenseViews.test.tsx b/src/components/expenses/ExpenseViews.test.tsx
index 8ac874a0..ffeb2868 100644
--- a/src/components/expenses/ExpenseViews.test.tsx
+++ b/src/components/expenses/ExpenseViews.test.tsx
@@ -1,12 +1,39 @@
+// @vitest-environment jsdom
 import { renderToStaticMarkup } from "react-dom/server";
+import { act, type ReactNode } from "react";
+import { createRoot } from "react-dom/client";
 import { expect, it, vi } from "vitest";
-import { act, create, type ReactTestRenderer } from "react-test-renderer";
 import {
   ExpenseList,
   ExpenseSummaryView,
   ExpenseAnalysisView,
   ExpenseRolePicker,
 } from "./ExpenseViews";
+// 메뉴·탭은 Base UI라 react-dom으로 그리고 document에서 찾는다(메뉴 목록은 body로 포털된다)
+async function renderInDom(node: ReactNode) {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  await act(async () => root.render(node));
+  return {
+    host,
+    rerender: (next: ReactNode) => act(async () => root.render(next)),
+    cleanup: async () => {
+      await act(async () => root.unmount());
+      host.remove();
+      vi.unstubAllGlobals();
+    },
+  };
+}
+// Base UI는 메뉴를 닫은 뒤 다음 틱에 목록을 지운다
+const flush = () => act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)); });
+const menuItem = (label: string) =>
+  document.querySelector<HTMLElement>(`[role="menuitem"][aria-label="${label}"]`);
+async function press(element: HTMLElement) {
+  await act(async () => element.click());
+  await flush();
+}
 const expense = {
   id: 10,
   expenseGroup: "PREPARATION" as const,
@@ -296,59 +323,56 @@ it("scales analysis bars against the largest amount and handles zero totals", ()
 });
 
 it("shows only the selected analysis graph and preserves exact daily amounts", async () => {
-  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
-  let renderer: ReactTestRenderer | undefined;
+  const view = await renderInDom(<ExpenseAnalysisView members={[]} memberStatus="success" schedules={[]} summary={{ currencies: [{
+    currency: "USD", totalAmount: "1234567.00", individuals: [], transfers: [],
+    categories: [{ category: "OTHER", totalAmount: "1234567.00" }],
+    days: [{ expenseGroup: "PREPARATION", scheduleId: null, totalAmount: "1234567.00" }],
+  }] }} />);
   try {
-    await act(async () => {
-      renderer = create(<ExpenseAnalysisView members={[]} memberStatus="success" schedules={[]} summary={{ currencies: [{
-        currency: "USD", totalAmount: "1234567.00", individuals: [], transfers: [],
-        categories: [{ category: "OTHER", totalAmount: "1234567.00" }],
-        days: [{ expenseGroup: "PREPARATION", scheduleId: null, totalAmount: "1234567.00" }],
-      }] }} />);
-    });
-    const graphs = () => renderer!.root.findAllByType("figure");
-    expect(graphs()).toHaveLength(1);
-    expect(graphs()[0].props["aria-label"]).toBe("USD 카테고리별 비용 그래프");
-    await act(async () => renderer!.root.findAllByType("button").find(b => b.children.includes("일차별"))!.props.onClick());
-    expect(graphs()).toHaveLength(1);
-    expect(graphs()[0].props["aria-label"]).toBe("USD 준비·일차별 비용 그래프");
-    expect(JSON.stringify(renderer!.toJSON())).toContain("여행 준비 · 1,234,567.00 USD");
-    await act(async () => renderer!.root.findAllByType("button").find(b => b.children.includes("카테고리별"))!.props.onClick());
-    expect(graphs()).toHaveLength(1);
-    expect(graphs()[0].props["aria-label"]).toBe("USD 카테고리별 비용 그래프");
+    const graphs = () => [...view.host.querySelectorAll("figure")].map(figure => figure.getAttribute("aria-label"));
+    // 분석 기준은 Tabs(role="tab", aria-selected)다
+    const tab = (label: string) => [...view.host.querySelectorAll<HTMLElement>('[role="tab"]')].find(t => t.textContent === label)!;
+    expect(view.host.querySelector('[role="tablist"]')?.getAttribute("aria-label")).toBe("비용 분석 기준");
+    expect(tab("카테고리별").getAttribute("aria-selected")).toBe("true");
+    expect(graphs()).toEqual(["USD 카테고리별 비용 그래프"]);
+    await press(tab("일차별"));
+    expect(tab("일차별").getAttribute("aria-selected")).toBe("true");
+    expect(tab("카테고리별").getAttribute("aria-selected")).toBe("false");
+    expect(graphs()).toEqual(["USD 준비·일차별 비용 그래프"]);
+    expect(view.host.innerHTML).toContain("여행 준비 · 1,234,567.00 USD");
+    await press(tab("카테고리별"));
+    expect(graphs()).toEqual(["USD 카테고리별 비용 그래프"]);
   } finally {
-    await act(async () => renderer?.unmount());
-    vi.unstubAllGlobals();
+    await view.cleanup();
   }
 });
 
 it("opens editing from the expense card and keeps deletion as a separate action", async () => {
-  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
-  let renderer: ReactTestRenderer | undefined;
   const onEdit = vi.fn();
   const onDelete = vi.fn();
   const render = (canManage: boolean, busy = false) => <ExpenseList expenses={[expense]} members={[]} memberStatus="success" schedules={[]} canManage={canManage} busy={busy} onEdit={onEdit} onDelete={onDelete} />;
+  const view = await renderInDom(render(true));
   try {
-    await act(async () => { renderer = create(render(true)); });
-    expect(renderer!.root.findAllByType("details")).toHaveLength(0);
-    expect(JSON.stringify(renderer!.toJSON())).toContain("결제");
-    expect(JSON.stringify(renderer!.toJSON())).toContain("분담");
-    const more = () => renderer!.root.findAllByType("button").find(b => b.props["aria-label"]?.endsWith("비용 더보기"))!;
-    await act(async () => more().props.onClick());
-    await act(async () => renderer!.root.findByProps({ "aria-label": "비용 수정" }).props.onClick());
+    expect(view.host.querySelectorAll("details")).toHaveLength(0);
+    expect(view.host.textContent).toContain("결제");
+    expect(view.host.textContent).toContain("분담");
+    const more = () => [...view.host.querySelectorAll<HTMLButtonElement>("button")].find(b => b.getAttribute("aria-label")?.endsWith("비용 더보기"))!;
+    await press(more());
+    await press(menuItem("비용 수정")!);
     expect(onEdit).toHaveBeenCalledWith(expense);
     onEdit.mockClear();
-    await act(async () => more().props.onClick());
-    await act(async () => renderer!.root.findByProps({ "aria-label": "비용 삭제" }).props.onClick());
+    await press(more());
+    await press(menuItem("비용 삭제")!);
     expect(onDelete).toHaveBeenCalledWith(expense);
     expect(onEdit).not.toHaveBeenCalled();
-    await act(async () => renderer!.update(render(true, true)));
-    expect(renderer!.root.findAllByType("button").every(b => b.props.disabled)).toBe(true);
-    await act(async () => renderer!.update(render(false)));
-    expect(renderer!.root.findAllByType("button")).toHaveLength(0);
+    await view.rerender(render(true, true));
+    const buttons = [...view.host.querySelectorAll<HTMLButtonElement>("button")];
+    expect(buttons.length).toBeGreaterThan(0);
+    expect(buttons.every(b => b.disabled)).toBe(true);
+    await view.rerender(render(false));
+    expect(view.host.querySelectorAll("button")).toHaveLength(0);
   } finally {
-    await act(async () => renderer?.unmount());
-    vi.unstubAllGlobals();
+    await view.cleanup();
   }
 });
 
@@ -360,18 +384,17 @@ it("announces unavailable identity before an empty personal settlement", () => {
 });
 
 it("opens a more disclosure before delete and uses category instead of memo as the name", async () => {
-  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
-  let renderer: ReactTestRenderer | undefined;
   const onDelete = vi.fn();
+  const view = await renderInDom(<ExpenseList expenses={[expense]} members={[]} memberStatus="success" schedules={[]} canManage busy={false} onEdit={vi.fn()} onDelete={onDelete} />);
   try {
-    await act(async () => { renderer = create(<ExpenseList expenses={[expense]} members={[]} memberStatus="success" schedules={[]} canManage busy={false} onEdit={vi.fn()} onDelete={onDelete} />); });
-    const buttons = () => renderer!.root.findAllByType("button");
-    expect(buttons().find(b => b.props["aria-label"] === "비용 삭제")).toBeUndefined();
-    const more = buttons().find(b => b.props["aria-label"] === "기타 비용 더보기");
-    expect(more).toBeDefined();
-    await act(async () => more!.props.onClick());
-    await act(async () => buttons().find(b => b.props["aria-label"] === "비용 삭제")!.props.onClick());
+    expect(menuItem("비용 삭제")).toBeNull();
+    const more = view.host.querySelector<HTMLButtonElement>('button[aria-label="기타 비용 더보기"]');
+    expect(more).not.toBeNull();
+    await press(more!);
+    await press(menuItem("비용 삭제")!);
     expect(onDelete).toHaveBeenCalledWith(expense);
-    expect(buttons().find(b => b.props["aria-label"] === "비용 삭제")).toBeUndefined();
-  } finally { await act(async () => renderer?.unmount()); vi.unstubAllGlobals(); }
+    expect(menuItem("비용 삭제")).toBeNull();
+  } finally {
+    await view.cleanup();
+  }
 });
diff --git a/src/components/expenses/ExpenseViews.tsx b/src/components/expenses/ExpenseViews.tsx
index 8f4ec007..6f7ad929 100644
--- a/src/components/expenses/ExpenseViews.tsx
+++ b/src/components/expenses/ExpenseViews.tsx
@@ -1,5 +1,9 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Spinner } from "@/components/ui/spinner";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ExpenseKrwAmount, ExpenseRowAmount } from "./ExpenseKrw";
 import { expenseTitle } from "@/lib/expenses/expense-name";
 
@@ -25,12 +29,8 @@ import {
   roleOptions,
   type MemberQueryStatus,
 } from "@/lib/expenses/expense-policy";
-import { ChatMemberAvatarRing } from "@/components/chat/messages/ChatMemberAvatarRing";
+import { UserAvatar } from "@/components/user/UserAvatar";
 
-export const expenseButtonClass =
-  "min-h-10 rounded-lg border border-gray-border px-3 py-2 text-label-m-emphasis mobile:text-label-s-emphasis font-semibold cursor-pointer transition-colors enabled:hover:border-primary/40 enabled:hover:bg-primary/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50";
-export const expenseInputClass =
-  "mt-1 min-h-12 w-full min-w-0 rounded-lg border border-border bg-fill-subtle px-3 py-2 text-body-s-regular focus:outline-primary";
 // Group the integer string directly so large amounts and trailing decimals stay exact.
 import { formatExpenseAmount } from "@/lib/expenses/format-expense-amount";
 
@@ -70,12 +70,13 @@ export function ExpensePerson({
       title={person.label}
       className="inline-flex min-w-0 max-w-full items-center gap-1.5 align-middle"
     >
-      {person.imageUrl ? <ChatMemberAvatarRing
-        avatarUrl={person.imageUrl ?? undefined}
-        alt=""
-        chromeAvatarClassName="h-6 w-6 shrink-0 overflow-hidden rounded-full border-[1.5px] border-white"
-        reduceMotion={true}
-      /> : <span aria-hidden className="flex size-6 shrink-0 items-center justify-center rounded-full border-[1.5px] border-white bg-primary-subtle text-[12px] leading-4 text-primary">{person.label.slice(0, 1)}</span>}
+      {/* tone이 대체를 정한다: 사진을 못 받으면 사람 아이콘, 사진이 없으면 라벨 첫 글자 */}
+      <UserAvatar
+        user={{ nickname: person.label, profileImageUrl: person.imageUrl }}
+        size={24}
+        tone={person.imageUrl ? "icon" : "primary"}
+        ring="cutout"
+      />
       <span
         className={compact || memberStatus === "pending" ? "sr-only" : "min-w-0 [overflow-wrap:anywhere]"}
       >
@@ -103,6 +104,7 @@ export function ExpenseRolePicker({
   currentUserId,
   selected,
   original,
+  disabled,
   onChange,
 }: Readonly<{
   title: string;
@@ -110,6 +112,8 @@ export function ExpenseRolePicker({
   currentUserId?: number;
   selected: number[];
   original: number[];
+  // 감싼 <fieldset disabled>는 Base UI Checkbox(span)에 전달되지 않아 따로 받는다
+  disabled?: boolean;
   onChange: (ids: number[]) => void;
 }>) {
   const titleId = useId();
@@ -140,19 +144,19 @@ export function ExpenseRolePicker({
       {options.map((option) => (
         <label
           key={option.userId}
-          className="flex min-h-12 min-w-0 cursor-pointer items-center gap-2 rounded-lg bg-white px-3 text-[16px] leading-5 font-medium mobile:min-h-11 mobile:px-2 mobile:text-[12px] max-sm:min-h-11 max-sm:px-2 max-sm:text-[12px] transition-colors has-[:enabled]:hover:bg-primary/10 has-[:disabled]:cursor-not-allowed focus-within:ring-2 focus-within:ring-primary/40 has-[:checked]:bg-white has-[:checked]:ring-1 has-[:checked]:ring-primary/30 mobile:has-[:checked]:ring-0 max-sm:has-[:checked]:ring-0"
+          className="flex min-h-12 min-w-0 cursor-pointer items-center gap-2 rounded-lg bg-white px-3 text-[16px] leading-5 font-medium mobile:min-h-11 mobile:px-2 mobile:text-[12px] max-sm:min-h-11 max-sm:px-2 max-sm:text-[12px] transition-colors has-[:enabled]:hover:bg-primary/10 has-[:disabled]:cursor-not-allowed has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary/40 has-[:checked]:bg-white has-[:checked]:ring-1 has-[:checked]:ring-primary/30 mobile:has-[:checked]:ring-0 max-sm:has-[:checked]:ring-0"
         >
-          <input
-            type="checkbox"
+          <Checkbox
+            size="sm"
             checked={selected.includes(option.userId)}
-            onChange={(e) =>
+            disabled={disabled}
+            onCheckedChange={(checked) =>
               onChange(
-                e.target.checked
+                checked
                   ? [...selected, option.userId]
                   : selected.filter((id) => id !== option.userId),
               )
             }
-            className="size-5 shrink-0 cursor-pointer appearance-none bg-[url(/expenses/checkbox.svg)] bg-contain bg-center bg-no-repeat checked:bg-[url(/expenses/checkbox-checked.svg)] disabled:cursor-not-allowed"
           />
           <ExpensePerson
             userId={option.userId}
@@ -174,16 +178,17 @@ export function ExpenseRolePicker({
             />
             <p className="text-body-xs-regular text-dark-gray">승인 대기</p>
           </div>
-          <button
-            type="button"
+          <Button
+            variant="outline"
+            size="sm"
             aria-label={`${title} ${member.nickname} #${member.userId} 제외`}
-            className={`${expenseButtonClass} shrink-0`}
+            className="shrink-0"
             onClick={() =>
               onChange(selected.filter((id) => id !== member.userId))
             }
           >
             제외
-          </button>
+          </Button>
         </div>
       ))}
       {pendingMembers.length > 0 && (
@@ -292,9 +297,9 @@ export function ExpenseList({
                       expenseDayLabel("TRIP_DAY", Number(key), schedules))}
                 </h3>
                 {day && (
-                  <span className="rounded-full bg-primary-subtle px-2 py-1 text-label-xs-emphasis text-primary">
+                  <Badge tone="brand" size="md">
                     {day.dayNumber}일차
-                  </span>
+                  </Badge>
                 )}
                 <span className="text-[14px] leading-5 text-text-subtle"><ExpenseKrwAmount total={krwSummary?.days?.find((d) => key === "PREPARATION" ? d.expenseGroup === "PREPARATION" : d.expenseGroup === "TRIP_DAY" && String(d.scheduleId) === key)?.total} /></span>
                 {!krwSummary && <span className="text-body-xs-regular text-text-subtle">
@@ -527,7 +532,7 @@ function SettlementContent({
 }: Readonly<SettlementProps>) {
   if (scope === "mine" && currentUserId === undefined) {
     return (
-      <LoadingIndicator label="내 정산 사용자 정보 불러오는 중" className="flex w-full py-4" />
+      <Spinner aria-label="내 정산 사용자 정보 불러오는 중" className="flex w-full py-4" />
     );
   }
   if (!summary.currencies.length) {
@@ -672,27 +677,13 @@ export function ExpenseSummaryView({
     <div className="flex flex-col gap-6 mobile:gap-4 max-sm:gap-4">
       {showDetails && <details className="order-last text-body-xs-regular text-text-subtle">
         <summary className="cursor-pointer">정산 범위</summary>
-      <div
-        className="flex gap-1 border-b border-gray-border"
-        aria-label="정산 범위"
-      >
-        {(
-          [
-            ["mine", "내 정산"],
-            ["all", "전체 정산"],
-          ] as const
-        ).map(([value, label]) => (
-          <button
-            key={value}
-            type="button"
-            aria-pressed={scope === value}
-            onClick={() => onScopeChange?.(value)}
-            className={`min-h-10 cursor-pointer border-b-2 px-3 py-2 text-label-m-emphasis mobile:text-label-s-emphasis font-semibold transition-colors focus-visible:outline-2 focus-visible:outline-primary ${scope === value ? "border-primary text-primary-strong" : "border-transparent text-dark-gray hover:text-primary-strong"}`}
-          >
-            {label}
-          </button>
-        ))}
-      </div>
+      {/* 정산 내용 범위를 바꾸는 하위 전환이라 Tabs Chip(Outline md)을 쓴다. 내용은 아래 SettlementContent가 scope로 그려 패널을 두지 않는다 */}
+      <Tabs value={scope} onValueChange={(next: "mine" | "all") => onScopeChange?.(next)}>
+        <TabsList variant="outline" size="md" aria-label="정산 범위">
+          <TabsTrigger value="mine">내 정산</TabsTrigger>
+          <TabsTrigger value="all">전체 정산</TabsTrigger>
+        </TabsList>
+      </Tabs>
       </details>}
       {krwSummary && (scope !== "all" || !summary.currencies.length) && <section aria-label="결제자별 원화 합계" className="space-y-3">
         <h3>원화 환산 결제 합계</h3>
@@ -788,27 +779,13 @@ export function ExpenseAnalysisView({
   const [groupBy, setGroupBy] = useState<"category" | "day">("category");
   return (
     <div className="space-y-6">
-      <div
-        className="flex gap-1 border-b border-gray-border"
-        aria-label="비용 분석 기준"
-      >
-        {(
-          [
-            ["category", "카테고리별"],
-            ["day", "일차별"],
-          ] as const
-        ).map(([value, label]) => (
-          <button
-            key={value}
-            type="button"
-            aria-pressed={groupBy === value}
-            onClick={() => setGroupBy(value)}
-            className={`min-h-10 cursor-pointer border-b-2 px-3 py-2 text-label-m-emphasis mobile:text-label-s-emphasis font-semibold transition-colors focus-visible:outline-2 focus-visible:outline-primary ${groupBy === value ? "border-primary text-primary-strong" : "border-transparent text-dark-gray hover:text-primary-strong"}`}
-          >
-            {label}
-          </button>
-        ))}
-      </div>
+      {/* 분석 묶음 기준을 바꾸는 하위 전환이라 Tabs Chip(Outline md). 통화마다 그래프 하나를 groupBy로 고르므로 패널을 두지 않는다 */}
+      <Tabs value={groupBy} onValueChange={(next: "category" | "day") => setGroupBy(next)}>
+        <TabsList variant="outline" size="md" aria-label="비용 분석 기준">
+          <TabsTrigger value="category">카테고리별</TabsTrigger>
+          <TabsTrigger value="day">일차별</TabsTrigger>
+        </TabsList>
+      </Tabs>
       {!summary.currencies.length && (
         <p className="py-6 text-center text-body-s-regular mobile:text-body-xs-regular text-dark-gray">
           분석할 비용이 없어요.
diff --git a/src/components/filter-dropdown.tsx b/src/components/filter-dropdown.tsx
deleted file mode 100644
index 4c50bd05..00000000
--- a/src/components/filter-dropdown.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-"use client";
-
-import { useEffect, useId, useRef, useState } from "react";
-
-import { createPortal } from "react-dom";
-import { MapSearchIcon } from "@/components/map/MapSearchIcon";
-import { cn } from "@/lib/utils";
-
-import {
-  mapFilterChipActiveRingClassName,
-  mapFilterChipInactiveClassName,
-} from "@/components/map/map-chip-button";
-
-export type FilterOption<T extends string> = { label: string; value: T };
-
-interface FilterDropdownProps<T extends string> {
-  label: string;
-  options: FilterOption<T>[];
-  value: T;
-  onChange: (v: T) => void;
-  onOpenChange?: (open: boolean) => void;
-  menuClassName?: string;
-}
-
-export function FilterDropdown<T extends string>({
-  label,
-  options,
-  value,
-  onChange,
-  onOpenChange,
-  menuClassName,
-}: FilterDropdownProps<T>) {
-  const menuId = useId();
-  const focusMenuOnOpen = useRef(false);
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-
-  useEffect(() => {
-    onOpenChange?.(open);
-  }, [open, onOpenChange]);
-
-  useEffect(() => {
-    if (!open) return;
-    if (focusMenuOnOpen.current) menuRef.current?.querySelector("button")?.focus();
-    const dismissOutside = (event: MouseEvent) => {
-      if (!ref.current?.contains(event.target as Node) && !menuRef.current?.contains(event.target as Node)) setOpen(false);
-    };
-    const dismissOnMove = (event: Event) => {
-      if (!menuRef.current?.contains(event.target as Node)) setOpen(false);
-    };
-    const escape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") { setOpen(false); triggerRef.current?.focus(); }
-    };
-    document.addEventListener("mousedown", dismissOutside);
-    document.addEventListener("keydown", escape);
-    window.addEventListener("scroll", dismissOnMove, true);
-    window.addEventListener("resize", dismissOnMove);
-    return () => {
-      document.removeEventListener("mousedown", dismissOutside);
-      document.removeEventListener("keydown", escape);
-      window.removeEventListener("scroll", dismissOnMove, true);
-      window.removeEventListener("resize", dismissOnMove);
-    };
-  }, [open]);
-
-  const isActive = value !== "all";
-  const selectedLabel = options.find((o) => o.value === value)?.label ?? label;
-
-  return (
-    <div ref={ref} className="relative shrink-0">
-      <button
-        ref={triggerRef}
-        type="button"
-        aria-expanded={open}
-        aria-controls={open ? menuId : undefined}
-        onKeyDown={(event) => {
-          if (event.key === "ArrowDown" && !open) { event.preventDefault(); triggerRef.current?.click(); }
-        }}
-        aria-label={`${label} 필터`}
-        onClick={(event) => {
-          focusMenuOnOpen.current = event.detail === 0;
-          const rect = triggerRef.current?.getBoundingClientRect();
-          if (rect) setPosition({ top: rect.bottom + 4, left: Math.max(8, Math.min(rect.left, window.innerWidth - 144)) });
-          setOpen((prev) => !prev);
-        }}
-        className={cn(
-          "flex items-center gap-1",
-          isActive
-            ? mapFilterChipActiveRingClassName()
-            : mapFilterChipInactiveClassName(),
-        )}
-      >
-        <span>{isActive ? selectedLabel : label}</span>
-        <MapSearchIcon name="chevron-down" className={cn("shrink-0 transition-transform", open && "rotate-180")}/>
-      </button>
-
-      {open && createPortal(
-        <div
-          ref={menuRef}
-          id={menuId}
-          style={position}
-          className={cn(
-            "fixed min-w-[136px] overflow-hidden rounded-xl border border-gray-border bg-white shadow-lg",
-            menuClassName ?? "z-30",
-          )}
-        >
-          {options.map((opt) => (
-            <button
-              key={opt.value}
-              onClick={() => {
-                onChange(opt.value);
-                setOpen(false);
-                triggerRef.current?.focus();
-              }}
-              className={cn(
-                "w-full cursor-pointer px-3 py-2 text-left text-label-m-regular mobile:text-label-s-regular transition hover:bg-gray-50",
-                value === opt.value
-                  ? "font-semibold text-primary"
-                  : "text-black",
-              )}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>, document.body,
-      )}
-    </div>
-  );
-}
diff --git a/src/components/layout/HeaderBar.tsx b/src/components/layout/HeaderBar.tsx
index 6bece7e0..5b90cd03 100644
--- a/src/components/layout/HeaderBar.tsx
+++ b/src/components/layout/HeaderBar.tsx
@@ -3,11 +3,12 @@
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Pencil } from "lucide-react";
 
 import { ChevronLeftIcon } from "@/assets/icons";
 import { BrandLogo } from "@/components/BrandLogo";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { useMobileView } from "@/contexts/MobileViewContext";
 import { useSessionPromptVisible } from "@/hooks/useSessionPromptVisible";
 import { FEEDBACK_FORM_URL } from "@/lib/contact";
@@ -51,13 +52,10 @@ const HeaderBar = ({
   const [editOpen, setEditOpen] = useState(false);
   const pathname = usePathname();
   const [menuState, setMenuState] = useState({ path: pathname, open: false });
-  const menuRef = useRef<HTMLDivElement>(null);
-  const menuButtonRef = useRef<HTMLButtonElement>(null);
   const closeEdit = useCallback(() => setEditOpen(false), []);
   const { isMobileDevice } = useMobileView();
   if (menuState.path !== pathname) setMenuState({ path: pathname, open: false });
   const menuOpen = menuState.path === pathname && menuState.open;
-  const closeMenu = () => setMenuState({ path: pathname, open: false });
   const isMapPanel = isMobileMapPathname(pathname ?? "");
   const showMapShortcut = isPlanPathname(pathname ?? "") || isMapPanel || isChatPathname(pathname ?? "") || pathname === "/bookmark" || pathname === "/cost" || isPackingPath(pathname ?? "");
   const { dismiss: dismissFeedbackPrompt } = useSessionPromptVisible(FEEDBACK_FORM_CLICKED_KEY);
@@ -103,24 +101,6 @@ const HeaderBar = ({
     </span>
   );
 
-  useEffect(() => {
-    if (!menuOpen) return;
-    function closeOnOutside(event: PointerEvent) {
-      if (!menuRef.current?.contains(event.target as Node)) setMenuState({ path: pathname, open: false });
-    }
-    function closeOnEscape(event: KeyboardEvent) {
-      if (event.key !== "Escape") return;
-      setMenuState({ path: pathname, open: false });
-      menuButtonRef.current?.focus();
-    }
-    document.addEventListener("pointerdown", closeOnOutside);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnOutside);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [menuOpen, pathname]);
-
   return (
     <header className={isMobileDevice ? "relative z-30 h-14 shrink-0 bg-fill-subtle" : "h-14 shrink-0 border-b-2 border-primary"}>
       {isMobileDevice ? (
@@ -144,34 +124,30 @@ const HeaderBar = ({
             {showMapShortcut ? <Link href={mapHref} aria-label={isMapPanel ? "일정 보기" : "지도 보기"} className="flex size-11 items-center justify-center rounded-lg focus-visible:outline-2 focus-visible:outline-primary">
               <span aria-hidden className="block size-6 bg-icon" style={{ mask: `url('${isMapPanel ? mobileIcon.calendar : mobileIcon.map}') center / contain no-repeat` }} />
             </Link> : null}
-            <div ref={menuRef} className="relative">
-              <button
-                ref={menuButtonRef}
-                type="button"
+            {/* 경로가 바뀌면 닫는다(menuState.path). 바깥 누름·Esc·포커스 복귀·항목 선택 뒤 닫기는 Base UI Menu가 맡는다 */}
+            <DropdownMenu open={menuOpen} onOpenChange={(open) => setMenuState({ path: pathname, open })}>
+              <DropdownMenuTrigger
                 aria-label={menuOpen ? "메뉴 닫기" : "메뉴 열기"}
-                aria-expanded={menuOpen}
-                onClick={() => setMenuState({ path: pathname, open: !menuOpen })}
                 className="flex size-11 items-center justify-center rounded-lg focus-visible:outline-2 focus-visible:outline-primary"
               >
                 <span aria-hidden className="block size-6 bg-icon" style={{ mask: `url('${mobileIcon.menu}') center / contain no-repeat` }} />
-              </button>
-              {menuOpen ? (
-                <nav aria-label="여행방 메뉴" className="absolute right-0 top-[38px] z-50 min-w-40 overflow-hidden rounded-xl bg-white shadow-[0_2px_10px_rgba(0,0,0,0.1)]">
-                  <button type="button" onClick={() => { closeMenu(); setEditOpen(true); }} className="flex min-h-12 w-full items-center gap-2 border-b border-border-subtle px-4 text-left text-[14px] font-medium tracking-[-0.02em] text-text hover:bg-fill active:bg-fill active:bg-fill">
-                    <MobileMenuIcon src={mobileIcon.edit} />방 정보 수정
-                  </button>
-                  <Link href="/member-settings" onClick={closeMenu} className="flex min-h-12 items-center gap-2 border-b border-border-subtle px-4 text-[14px] font-medium tracking-[-0.02em] text-text hover:bg-fill active:bg-fill active:bg-fill">
-                    <MobileMenuIcon src={mobileIcon.members} />초대하기
-                  </Link>
-                  <a href={FEEDBACK_FORM_URL} target="_blank" rel="noopener noreferrer" onClick={() => { dismissFeedbackPrompt(); closeMenu(); }} className="flex min-h-12 items-center gap-2 border-b border-border-subtle px-4 text-[14px] font-medium tracking-[-0.02em] text-text hover:bg-fill active:bg-fill active:bg-fill">
-                    <MobileMenuIcon src={mobileIcon.feedback} />피드백
-                  </a>
-                  <a href="https://docs.google.com/forms/d/e/1FAIpQLSfVohOtffMZkZwybOtNfZtMbDS-vl1u0QAfP9XM3w5hXDLEkA/viewform?usp=header" target="_blank" rel="noopener noreferrer" onClick={closeMenu} className="flex min-h-12 items-center gap-2 px-4 text-[14px] font-medium tracking-[-0.02em] text-text hover:bg-fill active:bg-fill active:bg-fill">
-                    <MobileMenuIcon src={mobileIcon.bug} />버그 제보
-                  </a>
-                </nav>
-              ) : null}
-            </div>
+              </DropdownMenuTrigger>
+              {/* 지금 위치: 44px 버튼 아래 끝에서 6px 위(top 38px), 오른쪽 끝 맞춤 */}
+              <DropdownMenuContent align="end" sideOffset={-6} aria-label="여행방 메뉴">
+                <DropdownMenuItem onClick={() => setEditOpen(true)}>
+                  <MobileMenuIcon src={mobileIcon.edit} />방 정보 수정
+                </DropdownMenuItem>
+                <DropdownMenuLinkItem render={<Link href="/member-settings" />}>
+                  <MobileMenuIcon src={mobileIcon.members} />초대하기
+                </DropdownMenuLinkItem>
+                <DropdownMenuLinkItem href={FEEDBACK_FORM_URL} target="_blank" rel="noopener noreferrer" onClick={dismissFeedbackPrompt}>
+                  <MobileMenuIcon src={mobileIcon.feedback} />피드백
+                </DropdownMenuLinkItem>
+                <DropdownMenuLinkItem href="https://docs.google.com/forms/d/e/1FAIpQLSfVohOtffMZkZwybOtNfZtMbDS-vl1u0QAfP9XM3w5hXDLEkA/viewform?usp=header" target="_blank" rel="noopener noreferrer">
+                  <MobileMenuIcon src={mobileIcon.bug} />버그 제보
+                </DropdownMenuLinkItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div> : null}
         </div>
       ) : (
diff --git a/src/components/layout/HeaderMemberPreview.tsx b/src/components/layout/HeaderMemberPreview.tsx
index 2d5a4047..93c36e92 100644
--- a/src/components/layout/HeaderMemberPreview.tsx
+++ b/src/components/layout/HeaderMemberPreview.tsx
@@ -1,12 +1,15 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 import { JoinRequestsSection } from "@/app/(main)/member-settings/_components/JoinRequestsSection";
 import { MemberList } from "@/app/(main)/member-settings/_components/MemberList";
 import { useMemberActions } from "@/app/(main)/member-settings/_components/useMemberActions";
 import { ChevronDownIcon, SendIcon } from "@/assets/icons";
 import { InviteRoomDialog } from "@/components/rooms/InviteRoomDialog";
+import { AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { UserAvatar } from "@/components/user/UserAvatar";
 import { useHostJoinRequestsBadgeCount } from "@/hooks/useHostJoinRequestsBadgeCount";
 import { selectHeaderMemberPreview } from "@/lib/rooms/member-preview";
@@ -44,109 +47,78 @@ export function HeaderMemberPreview() {
   const pendingJoinRequestsCount = useHostJoinRequestsBadgeCount();
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [inviteOpen, setInviteOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
   const { visible, restCount } = selectHeaderMemberPreview(members, user?.id);
 
-  useEffect(() => {
-    if (!dropdownOpen) return;
-    function handleClickOutside(event: MouseEvent) {
-      const target = event.target as Element;
-      // 구성원 옵션 메뉴는 body에 떠 있으므로 드롭다운 바깥으로 보지 않는다
-      if (dropdownRef.current?.contains(target) || target.closest("[data-floating-menu]")) return;
-      setDropdownOpen(false);
-    }
-    function handleEscape(event: KeyboardEvent) {
-      if (event.key === "Escape") setDropdownOpen(false);
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [dropdownOpen]);
-
   return (
     <div className="flex shrink-0 items-center gap-3">
       {visible.length > 0 ? (
-        <div ref={dropdownRef} className="relative">
-          <button
-            type="button"
+        // 패널 안 구성원 옵션 메뉴(MemberCard DropdownMenu)는 이 패널의 React 자식이라 Base UI가 안쪽으로 본다.
+        // 메뉴 포털은 패널 포털 안에 붙고(FloatingPortal parentPortalNode), 메뉴를 누르면 패널 Popup의 capture 핸들러가 먼저 '안쪽'으로 표시해(useDismiss insideReactTree) 패널이 닫히지 않는다
+        <Popover open={dropdownOpen} onOpenChange={setDropdownOpen}>
+          <PopoverTrigger
             aria-label={memberPreviewLabel(memberCount, pendingJoinRequestsCount)}
-            aria-haspopup="true"
-            aria-expanded={dropdownOpen}
-            onClick={() => setDropdownOpen((open) => !open)}
             className="isolate flex cursor-pointer items-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
           >
-            <span className="flex items-center">
+            <AvatarGroup>
               {visible.map(({ member, isOnline }, index) => (
-                <span
+                <UserAvatar
                   key={member.userId}
-                  aria-hidden
+                  user={member}
+                  size={28}
+                  tone={isOnline ? "primary" : "neutral"}
+                  ring={isOnline ? "online" : "offline"}
+                  // 앞사람(본인)이 위에 온다. +N(z-1)·화살표(z-0)보다 위 층이다
                   style={{ zIndex: visible.length - index + 1 }}
-                  className={index > 0 ? "relative -ml-1.5" : "relative"}
-                >
-                  <UserAvatar
-                    user={member}
-                    size={28}
-                    className={isOnline ? "bg-primary-subtle ring-2 ring-status-positive" : "bg-fill ring-2 ring-border grayscale brightness-110 contrast-75"}
-                    initialClassName={cn("font-medium", isOnline ? "text-primary" : "text-text-subtle")}
-                  />
-                </span>
+                />
               ))}
               {restCount > 0 ? (
-                <span
-                  aria-hidden
-                  className="relative z-[1] -ml-1.5 flex size-7 items-center justify-center rounded-full bg-fill text-label-m-regular text-text-subtle"
-                >
+                <AvatarGroupCount aria-hidden className="z-1">
                   +{restCount}
-                </span>
+                </AvatarGroupCount>
               ) : null}
-              <span aria-hidden className="relative z-0 -ml-1.5 flex size-7 items-center justify-center rounded-full bg-fill">
+              {/* 묶음(isolate) 밖에 두면 마지막 아바타를 덮으므로 안에서 가장 아래 층에 둔다 */}
+              <span aria-hidden className="relative z-0 flex size-7 items-center justify-center rounded-full bg-fill">
                 <ChevronDownIcon size={16} className={cn("text-icon-subtle transition-transform", dropdownOpen && "rotate-180")} />
                 {pendingJoinRequestsCount > 0 ? <SidebarPingBadge className="-right-1 -top-1" /> : null}
               </span>
-            </span>
-          </button>
-
-          {dropdownOpen ? (
-            <div className="absolute right-0 top-full z-50 mt-2 flex w-[305px] flex-col gap-4 rounded-xl bg-fill-elevate p-6 shadow-[0_2px_10px_rgba(0,0,0,0.1)]">
-              {isHost && roomId ? <JoinRequestsSection roomId={roomId} /> : null}
-              <section aria-label="구성원" className="flex flex-col gap-2">
-                <h2 className="flex items-baseline gap-2 text-title-s text-text">
-                  <span>구성원</span>
-                  <span className="text-body-m-regular font-medium text-primary">{memberCount}</span>
-                </h2>
-                <MemberList
-                  me={me}
-                  others={others}
-                  isHost={isHost}
-                  onKick={(member) => {
-                    setDropdownOpen(false);
-                    requestKick(member);
-                  }}
-                  onTransfer={(member) => {
-                    setDropdownOpen(false);
-                    requestTransfer(member);
-                  }}
-                  className={cn(MEMBER_LIST_MAX_HEIGHT_CLASS, "-mx-1 overflow-y-auto overscroll-contain px-1 [&>li]:py-2 [&>li:first-child]:pt-0 [&>li:last-child]:pb-0")}
-                />
-              </section>
-              <hr className="border-border-subtle" />
-              <button
-                type="button"
-                disabled={leaveDisabled}
-                onClick={() => {
+            </AvatarGroup>
+          </PopoverTrigger>
+          <PopoverContent align="end" aria-label="구성원 관리">
+            {isHost && roomId ? <JoinRequestsSection roomId={roomId} /> : null}
+            <section aria-label="구성원" className="flex flex-col gap-2">
+              <h2 className="flex items-baseline gap-2 text-title-s text-text">
+                <span>구성원</span>
+                <span className="text-body-m-regular font-medium text-primary">{memberCount}</span>
+              </h2>
+              <MemberList
+                me={me}
+                others={others}
+                isHost={isHost}
+                onKick={(member) => {
+                  setDropdownOpen(false);
+                  requestKick(member);
+                }}
+                onTransfer={(member) => {
                   setDropdownOpen(false);
-                  openLeaveDialog();
+                  requestTransfer(member);
                 }}
-                className="h-12 w-full cursor-pointer rounded-lg border border-border bg-fill-subtle text-label-l-emphasis text-text transition-colors enabled:hover:bg-fill enabled:active:bg-fill-strong disabled:cursor-not-allowed disabled:bg-fill disabled:text-text-disabled"
-              >
-                방 나가기
-              </button>
-            </div>
-          ) : null}
-        </div>
+                className={cn(MEMBER_LIST_MAX_HEIGHT_CLASS, "-mx-1 overflow-y-auto overscroll-contain px-1 [&>li]:py-2 [&>li:first-child]:pt-0 [&>li:last-child]:pb-0")}
+              />
+            </section>
+            <hr className="border-border-subtle" />
+            <Button
+              variant="outline"
+              disabled={leaveDisabled}
+              onClick={() => {
+                setDropdownOpen(false);
+                openLeaveDialog();
+              }}
+              className="w-full"
+            >
+              방 나가기
+            </Button>
+          </PopoverContent>
+        </Popover>
       ) : null}
 
       <button
diff --git a/src/components/layout/mobile-header.test.tsx b/src/components/layout/mobile-header.test.tsx
index c1b05cdd..eb15023d 100644
--- a/src/components/layout/mobile-header.test.tsx
+++ b/src/components/layout/mobile-header.test.tsx
@@ -30,6 +30,9 @@ beforeEach(async () => {
 });
 afterEach(async () => { await act(async () => root.unmount()); host.remove(); });
 async function rerender() { await act(async () => root.render(<HeaderBar />)); }
+// 메뉴는 Base UI Menu라 document.body로 포털된다. 항목은 role="menuitem"(방 정보 수정은 div, 이동 항목은 a)
+const menu = () => document.querySelector<HTMLElement>('[role="menu"][aria-label="여행방 메뉴"]');
+const menuButton = () => host.querySelector<HTMLButtonElement>('button[aria-haspopup="menu"]')!;
 
 it("shows the room details and map action in the mobile top navigation", () => {
   expect(host.querySelector("header")?.textContent).toContain("가을 여행");
@@ -47,18 +50,20 @@ it("uses the back top navigation for a nested bookmark screen", async () => {
 });
 
 it("opens the mobile menu with working destinations and closes it with Escape", async () => {
-  const menuButton = host.querySelector<HTMLButtonElement>('button[aria-label="메뉴 열기"]')!;
-  expect(menuButton).not.toBeNull();
-  expect(host.querySelector('[aria-label="여행방 메뉴"]')).toBeNull();
-  await act(async () => menuButton.click());
-  const menu = host.querySelector('[aria-label="여행방 메뉴"]')!;
-  expect(menu).not.toBeNull();
-  expect(menu.querySelector('a[href="/member-settings"]')?.textContent).toContain("초대하기");
-  expect(menu.querySelectorAll("a[href^='http']")).toHaveLength(2);
-  expect(menu.querySelector('button')?.textContent).toContain("방 정보 수정");
+  const trigger = host.querySelector<HTMLButtonElement>('button[aria-label="메뉴 열기"]')!;
+  expect(trigger).not.toBeNull();
+  expect(menu()).toBeNull();
+  await act(async () => trigger.click());
+  expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  expect(trigger.getAttribute("aria-label")).toBe("메뉴 닫기");
+  const items = [...menu()!.querySelectorAll<HTMLElement>('[role="menuitem"]')];
+  expect(items.map(item => item.textContent)).toEqual(["방 정보 수정", "초대하기", "피드백", "버그 제보"]);
+  expect(menu()!.querySelector('a[role="menuitem"][href="/member-settings"]')?.textContent).toContain("초대하기");
+  expect(menu()!.querySelectorAll("a[role='menuitem'][href^='http']")).toHaveLength(2);
   await act(async () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
-  expect(host.querySelector('[aria-label="여행방 메뉴"]')).toBeNull();
-  expect(document.activeElement).toBe(menuButton);
+  expect(menu()).toBeNull();
+  expect(document.activeElement).toBe(trigger);
+  expect(trigger.getAttribute("aria-label")).toBe("메뉴 열기");
 });
 
 it.each(["/bookmark", "/cost", "/packing/12345678-1234-1234-1234-123456789abc"])("shows the map shortcut on %s", async pathname => {
@@ -88,23 +93,32 @@ it("keeps the map shortcut hidden on search", async () => {
 });
 
 it("closes the menu on an outside pointer event", async () => {
-  await act(async () => host.querySelector<HTMLButtonElement>('button[aria-label="메뉴 열기"]')!.click());
-  expect(host.querySelector('[aria-label="여행방 메뉴"]')).not.toBeNull();
+  await act(async () => menuButton().click());
+  expect(menu()).not.toBeNull();
   await act(async () => document.body.dispatchEvent(new Event("pointerdown", { bubbles: true })));
-  expect(host.querySelector('[aria-label="여행방 메뉴"]')).toBeNull();
+  expect(menu()).toBeNull();
 });
 
 it("closes the open menu when the route changes", async () => {
-  await act(async () => host.querySelector<HTMLButtonElement>('button[aria-label="메뉴 열기"]')!.click());
+  await act(async () => menuButton().click());
+  expect(menu()).not.toBeNull();
   state.pathname = "/cost";
   await rerender();
-  expect(host.querySelector('[aria-label="여행방 메뉴"]')).toBeNull();
+  expect(menu()).toBeNull();
 });
 
 it("closes the menu when a destination is selected", async () => {
-  await act(async () => host.querySelector<HTMLButtonElement>('button[aria-label="메뉴 열기"]')!.click());
-  await act(async () => host.querySelector<HTMLAnchorElement>('a[href="/member-settings"]')!.click());
-  expect(host.querySelector('[aria-label="여행방 메뉴"]')).toBeNull();
+  await act(async () => menuButton().click());
+  await act(async () => menu()!.querySelector<HTMLAnchorElement>('a[href="/member-settings"]')!.click());
+  expect(menu()).toBeNull();
+});
+
+it("opens the trip edit dialog from the menu item and closes the menu", async () => {
+  await act(async () => menuButton().click());
+  const edit = [...menu()!.querySelectorAll<HTMLElement>('[role="menuitem"]')].find(item => item.textContent === "방 정보 수정")!;
+  await act(async () => edit.click());
+  expect(menu()).toBeNull();
+  expect(host.querySelector('[role="dialog"]')?.textContent).toBe("정보 수정");
 });
 
 it("keeps the folder's second back link hidden on mobile", () => {
diff --git a/src/components/layout/planning-chrome.test.tsx b/src/components/layout/planning-chrome.test.tsx
index ee3be481..05dc1e9c 100644
--- a/src/components/layout/planning-chrome.test.tsx
+++ b/src/components/layout/planning-chrome.test.tsx
@@ -1,4 +1,6 @@
 // @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 
@@ -44,11 +46,23 @@ describe("planning chrome", () => {
     expect(link?.getAttribute("title")).toBe("버그 제보");
     expect(container.querySelector('[role="dialog"]')).toBeNull();
   });
-  it("uses the creation label in the bookmark tab and modal", () => {
+  it("uses the creation label in the bookmark tab and modal", async () => {
     const html = renderToStaticMarkup(<BookmarkFoldersView />);
     expect(html).toContain("새 북마크 생성");
     expect(html).not.toContain("새 북마크 추가");
-    const modal = renderToStaticMarkup(<AddBookmarkModal mode="create" initialFolder={null} onClose={vi.fn()} onSave={vi.fn()} />);
-    expect(modal).toContain("새 북마크 생성");
+    // 대화상자는 Base UI Dialog라 document.body로 포털된다(서버 렌더 문자열에는 없다)
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    try {
+      await act(async () => root.render(<AddBookmarkModal mode="create" initialFolder={null} onClose={vi.fn()} onSave={vi.fn()} />));
+      const dialog = document.querySelector('[role="dialog"]')!;
+      expect(dialog).not.toBeNull();
+      expect(document.getElementById(dialog.getAttribute("aria-labelledby")!)?.textContent).toBe("새 북마크 생성");
+    } finally {
+      await act(async () => root.unmount());
+      host.remove();
+    }
   });
 });
diff --git a/src/components/loading/LoadingIndicator.tsx b/src/components/loading/LoadingIndicator.tsx
deleted file mode 100644
index af97ac6a..00000000
--- a/src/components/loading/LoadingIndicator.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { LoaderCircle } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-/** A compact visual indicator with a screen-reader-only loading announcement. */
-export function LoadingIndicator({
-  label = "불러오는 중",
-  className,
-  size = 20,
-}: Readonly<{
-  label?: string;
-  className?: string;
-  size?: number;
-}>) {
-  return (
-    <output aria-label={label} className={cn("inline-flex items-center justify-center text-text-subtle", className)}>
-      <LoaderCircle size={size} aria-hidden="true" className="animate-spin motion-reduce:animate-none" />
-    </output>
-  );
-}
diff --git a/src/components/map/Map.search-rank.test.tsx b/src/components/map/Map.search-rank.test.tsx
index 70238ffe..5d2c006d 100644
--- a/src/components/map/Map.search-rank.test.tsx
+++ b/src/components/map/Map.search-rank.test.tsx
@@ -46,6 +46,7 @@ vi.mock("@/contexts/MobileViewContext", () => ({
 }));
 vi.mock("@/hooks/usePlacesSearch", () => ({
   fetchPlacesPageWithPhotos: boundary.page,
+  fetchPlacesAreaPage: vi.fn(),
 }));
 vi.mock("@/lib/analytics/track", () => ({
   AnalyticsEvents: { search: "view_search_results", viewPlace: "view_place" },
@@ -508,7 +509,10 @@ it.each(["whole", "specific"] as const)("%s search resets discover filters witho
   await act(async () => button("음식점").click());
   await act(async () => button("영업 중").click());
   await act(async () => host.querySelector<HTMLButtonElement>('[aria-label="평점 필터"]')!.click());
-  await act(async () => button("4.5 이상").click());
+  // 평점 목록은 ui Select(Base UI)라 document.body로 포털된 role="option"이다
+  const ratingOption = (text: string) => [...document.querySelectorAll<HTMLElement>('[role="option"]')].find(o => o.textContent === text)!;
+  await act(async () => ratingOption("4.5 이상").click());
+  expect(host.querySelector('[aria-label="평점 필터"]')?.textContent).toBe("4.5 이상");
   await act(async () => { useMapPinsFocusStore.getState().claimFocus("discover"); });
   boundary.page.mockResolvedValue({ items, nextPageToken: null });
   await act(async () => {
diff --git a/src/components/map/Map.search-selection.test.tsx b/src/components/map/Map.search-selection.test.tsx
index 2b7ede63..9adf5e06 100644
--- a/src/components/map/Map.search-selection.test.tsx
+++ b/src/components/map/Map.search-selection.test.tsx
@@ -50,6 +50,7 @@ vi.mock("@/contexts/MobileViewContext", () => ({
 }));
 vi.mock("@/hooks/usePlacesSearch", () => ({
   fetchPlacesPageWithPhotos: boundary.page,
+  fetchPlacesAreaPage: vi.fn(),
 }));
 vi.mock("@/lib/analytics/track", () => ({
   AnalyticsEvents: { search: "search" },
diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
index 3abf7dcd..78270004 100644
--- a/src/components/map/Map.tsx
+++ b/src/components/map/Map.tsx
@@ -39,6 +39,7 @@ import {
 import { MAP_DETAIL_PANEL_COVER_WIDTH_PX } from "@/lib/layout-tokens";
 import { isPlanPath } from "@/lib/layout/mainChromeLayoutWidth";
 import { isMobileMapPathname } from "@/lib/mobile-view";
+import { settleSearchSnapshotAfterMove } from "@/lib/map-viewport-commit";
 import { clampPlacesSearchRadiusMeters } from "@/lib/places/placesSearchRadius";
 import { useMapCenterStore } from "@/stores/map-center-store";
 import { useSearchRecenterStore } from "@/stores/search-recenter-store";
@@ -194,6 +195,7 @@ function MapBootstrapSync({
       mapCenter: { lat, lng },
       zoom: mapZoom,
       radiusMeters,
+      bounds: bounds?.toJSON() ?? null,
     });
   }, [map, ready, center.lat, center.lng, zoom, roomId, setMapCamera]);
 
@@ -291,7 +293,9 @@ function MapSearchResultPins() {
   const selectedPlaceId = isMobileDevice && !selectedPlace ? searchSelectedId ?? "" : selectedPlace?.googlePlaceId?.trim() ?? "";
 
   useEffect(() => {
-    if (map && preview) panToWithinWorld(map, preview.location);
+    if (!map || !preview) return;
+    panToWithinWorld(map, preview.location);
+    return settleSearchSnapshotAfterMove(map);
   }, [map, preview]);
 
   // 전체 검색 결과가 준비되면 첫 추천 대신 실제 결과들이 보이도록 맞춘다.
@@ -305,6 +309,7 @@ function MapSearchResultPins() {
       items.forEach((item) => bounds.extend(item.location));
       map.fitBounds(bounds, 80);
     }
+    return settleSearchSnapshotAfterMove(map);
   }, [map, isMobileDevice, pinsFocus, kind, status, items]);
 
   if (pinsFocus !== "search") return null;
@@ -396,6 +401,8 @@ export default function TripMap({
   );
   const [rating, setRating] = useState<RatingValue>("all");
   const [openNow, setOpenNow] = useState<OpenValue>("all");
+  // 카테고리 검색이 실패하면 「현 위치에서 검색」 버튼이 「다시 시도」로 남는다
+  const [discoverFailed, setDiscoverFailed] = useState(false);
   const [showBookmarkPins, setShowBookmarkPins] = useState(true);
 
   // Text search takes over the map at request start, including autocomplete selection.
@@ -461,6 +468,7 @@ export default function TripMap({
         mapCenter: { lat: center.lat, lng: center.lng },
         zoom,
         radiusMeters,
+        bounds,
       });
 
       const rid =
@@ -595,7 +603,7 @@ export default function TripMap({
           {routeView ? <RouteViewMarkers routeView={routeView} /> : (
             <>
               <PlanItineraryMapRoutes />
-              <MapDiscoverPlaces selectedCategoryId={selectedCategoryId} rating={rating} openNow={openNow} />
+              <MapDiscoverPlaces selectedCategoryId={selectedCategoryId} rating={rating} openNow={openNow} onSearchFailedChange={setDiscoverFailed} />
               <MapBookmarkPins roomId={currentRoomId} enabled={showBookmarkPins}
                 hiddenNormalizedPlaceIds={isPlanPage ? planStopPlaceIds : undefined} />
               <MapSearchResultPins />
@@ -649,7 +657,7 @@ export default function TripMap({
 
       {!bootstrap.ready || routeView ? null : (
         <>
-          {planRouteMode ? null : <MapSearchHereButton discoverCategoryId={selectedCategoryId} />}
+          {planRouteMode ? null : <MapSearchHereButton discoverCategoryId={selectedCategoryId} discoverFailed={discoverFailed} />}
           {isMobileDevice ? (
             <div className="pointer-events-none absolute bottom-6 left-4 z-[16] flex flex-col items-center gap-3">
               {onOpenRouteView ? (
@@ -770,7 +778,9 @@ function MobileSearchSelection() {
   const lat = item?.location.lat;
   const lng = item?.location.lng;
   useEffect(() => {
-    if (map && focus === "search" && !selectedPlace && lat != null && lng != null) panToWithinWorld(map, { lat, lng });
+    if (!map || focus !== "search" || selectedPlace || lat == null || lng == null) return;
+    panToWithinWorld(map, { lat, lng });
+    return settleSearchSnapshotAfterMove(map);
   }, [map, focus, selectedPlace, selectedId, lat, lng]);
   if (!item || focus !== "search" || selectedPlace) return null;
   return <AdvancedMarker position={item.location} onClick={(event) => event.stop()}><span className="block text-primary drop-shadow-md"><MapPinIcon size={MAP_PIN_SELECTED_DISPLAY_SIZE_PX} {...mapPinBodyBorderProps} /></span></AdvancedMarker>;
diff --git a/src/components/map/MapBookmarkPins.tsx b/src/components/map/MapBookmarkPins.tsx
index bc73ea4a..68ef26fe 100644
--- a/src/components/map/MapBookmarkPins.tsx
+++ b/src/components/map/MapBookmarkPins.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { Bookmark } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { useQueries, useQueryClient } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { useQueries } from "@tanstack/react-query";
 import { AdvancedMarker } from "@vis.gl/react-google-maps";
 
 import { useSelectedPlace } from "@/contexts/SelectedPlaceContext";
@@ -10,10 +10,7 @@ import { useAllRoomBookmarks, useBookmarkCategories } from "@/hooks/useRooms";
 import { normalizeGooglePlaceResourceId } from "@/lib/maps";
 import type { PlacePreview } from "@/lib/api/places";
 
-import {
-  buildMapBookmarkPreviewPlan,
-  settleMapBookmarkPreviewBatch,
-} from "./map-bookmark-preview-query";
+import { buildMapBookmarkPreviewPlan } from "./map-bookmark-preview-query";
 import {
   MAP_PIN_BORDER_STROKE,
   MAP_PIN_BORDER_STROKE_WIDTH,
@@ -50,7 +47,6 @@ export function MapBookmarkPins({
   enabled,
   hiddenNormalizedPlaceIds,
 }: MapBookmarkPinsProps) {
-  const queryClient = useQueryClient();
   const { selectedPlace, setSelectedPlace } = useSelectedPlace();
 
   const { data: categories, isSuccess: categoriesReady } =
@@ -92,34 +88,11 @@ export function MapBookmarkPins({
     return out;
   }, [allBookmarks, categoryColorById, listsSettled]);
 
-  const [settledPreviewIdsKey, setSettledPreviewIdsKey] = useState<string | null>(
-    null,
-  );
   const previewPlan = useMemo(
-    () =>
-      buildMapBookmarkPreviewPlan(
-        flattenedBookmarks,
-        hiddenNormalizedPlaceIds,
-        settledPreviewIdsKey,
-      ),
-    [flattenedBookmarks, hiddenNormalizedPlaceIds, settledPreviewIdsKey],
+    () => buildMapBookmarkPreviewPlan(flattenedBookmarks, hiddenNormalizedPlaceIds),
+    [flattenedBookmarks, hiddenNormalizedPlaceIds],
   );
-  const { visibleBookmarks, previewIdsKey } = previewPlan;
-
-  useEffect(() => {
-    if (!previewIdsKey.length) return;
-
-    let cancelled = false;
-    void settleMapBookmarkPreviewBatch(previewIdsKey, queryClient).then(
-      (settledKey) => {
-        if (!cancelled) setSettledPreviewIdsKey(settledKey);
-      },
-    );
-
-    return () => {
-      cancelled = true;
-    };
-  }, [previewIdsKey, queryClient]);
+  const { visibleBookmarks } = previewPlan;
 
   const placeQueryDefs = useMemo(() => {
     if (!roomId || !listsSettled || visibleBookmarks.length === 0) {
diff --git a/src/components/map/MapCategoryChips.tsx b/src/components/map/MapCategoryChips.tsx
index a55789ff..e3c565b7 100644
--- a/src/components/map/MapCategoryChips.tsx
+++ b/src/components/map/MapCategoryChips.tsx
@@ -1,11 +1,9 @@
 "use client";
 
-import { MapSearchIcon } from "./MapSearchIcon";
-
 import { cn } from "@/lib/utils";
 
+import { MapChipToggle } from "./MapChipToggle";
 import { MAP_PLACE_CATEGORIES } from "./map-place-categories";
-import { mapChipButtonClassName } from "./map-chip-button";
 
 type MapCategoryChipsProps = {
   selectedCategoryId: string | null;
@@ -19,11 +17,6 @@ export function MapCategoryChips({
   onSelectCategory,
   className,
 }: MapCategoryChipsProps) {
-  function handleChipClick(categoryId: string) {
-    if (selectedCategoryId === categoryId) onSelectCategory(null);
-    else onSelectCategory(categoryId);
-  }
-
   return (
     <div
       className={cn(
@@ -31,24 +24,17 @@ export function MapCategoryChips({
         className,
       )}
     >
-      {MAP_PLACE_CATEGORIES.map((cat) => {
-        const active = selectedCategoryId === cat.id;
-        return (
-          <button
-            key={cat.id}
-            type="button"
-            onClick={() => handleChipClick(cat.id)}
-            aria-pressed={active}
-            className={cn(
-              "flex items-center gap-1.5",
-              mapChipButtonClassName(active),
-            )}
-          >
-            <MapSearchIcon name={cat.icon}/>
-            <span>{cat.label}</span>
-          </button>
-        );
-      })}
+      {MAP_PLACE_CATEGORIES.map((cat) => (
+        <MapChipToggle
+          key={cat.id}
+          pressed={selectedCategoryId === cat.id}
+          onPressedChange={(pressed) => onSelectCategory(pressed ? cat.id : null)}
+        >
+          {/* 카테고리 아이콘은 선택과 상관없이 파란색이다(교체 전 지도 칩 아이콘 #005bd9) */}
+          <cat.icon className="text-primary-strong" />
+          <span>{cat.label}</span>
+        </MapChipToggle>
+      ))}
     </div>
   );
 }
diff --git a/src/components/map/MapChipToggle.tsx b/src/components/map/MapChipToggle.tsx
new file mode 100644
index 00000000..fc0f829d
--- /dev/null
+++ b/src/components/map/MapChipToggle.tsx
@@ -0,0 +1,27 @@
+import { Toggle } from "@base-ui/react/toggle";
+import type { ReactNode } from "react";
+
+import { Chip } from "@/components/ui/chip";
+
+type Props = {
+  pressed: boolean;
+  onPressedChange: (pressed: boolean) => void;
+  children: ReactNode;
+};
+
+/**
+ * 지도 툴바에서 고르는 칩(카테고리·영업 중). Figma Chip Outline md(36px)이고, Base UI Toggle이라 선택 상태가 aria-pressed로 읽힌다.
+ * 모바일에서는 보이는 크기는 두고 누르는 영역만 가상 요소로 44px까지 넓힌다. 배경이 보이는 칩이라 padding으로 넓히면 모양이 커진다
+ */
+export function MapChipToggle({ pressed, onPressedChange, children }: Readonly<Props>) {
+  return (
+    <Chip
+      variant="outline"
+      size="md"
+      render={<Toggle pressed={pressed} onPressedChange={onPressedChange} />}
+      className="relative [&_svg]:pointer-events-none mobile:before:absolute mobile:before:inset-x-0 mobile:before:top-1/2 mobile:before:h-11 mobile:before:-translate-y-1/2"
+    >
+      {children}
+    </Chip>
+  );
+}
diff --git a/src/components/map/MapDiscoverPlaces.tsx b/src/components/map/MapDiscoverPlaces.tsx
index ef6de3b3..d8cf01df 100644
--- a/src/components/map/MapDiscoverPlaces.tsx
+++ b/src/components/map/MapDiscoverPlaces.tsx
@@ -63,6 +63,8 @@ export type MapDiscoverPlacesProps = {
   selectedCategoryId: string | null;
   rating: RatingValue;
   openNow: OpenValue;
+  /** 검색이 실패하면 true, 새 검색을 시작하면 false. 바뀌지 않는 함수(useState의 set)를 넘긴다 */
+  onSearchFailedChange: (failed: boolean) => void;
 };
 
 function DiscoverMarkerPin({
@@ -115,6 +117,7 @@ export function MapDiscoverPlaces({
   selectedCategoryId,
   rating,
   openNow,
+  onSearchFailedChange,
 }: MapDiscoverPlacesProps) {
   const map = useMap();
   const placesLib = useMapsLibrary("places");
@@ -140,6 +143,7 @@ export function MapDiscoverPlaces({
       writeEpoch: number,
     ) => {
       const seq = ++searchSeqRef.current;
+      onSearchFailedChange(false);
 
       if (!placesLib) {
         if (
@@ -237,9 +241,10 @@ export function MapDiscoverPlaces({
           return;
         }
         setMarkers([]);
+        onSearchFailedChange(true);
       }
     },
-    [placesLib],
+    [placesLib, onSearchFailedChange],
   );
 
   /** Search가 맵 핀 소유 시 디스커버 마커 비우기·비행 응답 무효화 */
diff --git a/src/components/map/MapDiscoverToolbar.test.tsx b/src/components/map/MapDiscoverToolbar.test.tsx
index db0cba58..cd6460f5 100644
--- a/src/components/map/MapDiscoverToolbar.test.tsx
+++ b/src/components/map/MapDiscoverToolbar.test.tsx
@@ -27,19 +27,26 @@ it("keeps the selected category, applies rating/open filters, and reset clears a
   expect(button("음식점").getAttribute("aria-pressed")).toBe("true");
   expect(host.textContent).not.toContain("호텔");
   await act(async () => button("영업 중").click());
-  await act(async () => host.querySelector<HTMLButtonElement>('[aria-label="평점 필터"]')!.click());
-  const trigger = host.querySelector<HTMLButtonElement>('[aria-label="평점 필터"]')!;
-  expect(document.getElementById(trigger.getAttribute("aria-controls")!)).not.toBeNull();
+  // 평점 필터는 ui Select(Base UI)라 트리거는 combobox, 목록은 document.body로 포털된 listbox·option이다
+  const trigger = host.querySelector<HTMLButtonElement>('[role="combobox"][aria-label="평점 필터"]')!;
+  expect(trigger.textContent).toBe("평점");
+  await act(async () => trigger.click());
+  await act(async () => { await new Promise((r) => requestAnimationFrame(() => r(null))); });
+  expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  const listbox = document.getElementById(trigger.getAttribute("aria-controls")!)!;
+  expect(listbox.getAttribute("role")).toBe("listbox");
+  expect(host.contains(listbox)).toBe(false);
+  expect(document.activeElement?.getAttribute("role")).toBe("option");
   expect(document.activeElement?.textContent).toBe("전체");
-  // The menu is portalled out of the horizontal scroll clip, but its choices must still work.
-  const ratingChoice = [...document.querySelectorAll<HTMLButtonElement>("button")].find(b => b.textContent?.includes("4.0"))!;
-  await act(async () => {
-    ratingChoice.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
-    ratingChoice.click();
-  });
-  expect(JSON.parse(host.querySelector("output")!.textContent!)).toMatchObject({ category: "restaurant", open: "open" });
-  expect(JSON.parse(host.querySelector("output")!.textContent!).rating).not.toBe("all");
+  expect(document.activeElement?.getAttribute("aria-selected")).toBe("true");
+  // The list is portalled out of the horizontal scroll clip, but its choices must still work.
+  const ratingChoice = [...listbox.querySelectorAll<HTMLElement>('[role="option"]')].find(o => o.textContent === "4.0 이상")!;
+  await act(async () => ratingChoice.click());
+  expect(JSON.parse(host.querySelector("output")!.textContent!)).toEqual({ category: "restaurant", rating: "4.0", open: "open" });
+  expect(trigger.getAttribute("aria-expanded")).toBe("false");
+  expect(trigger.textContent).toBe("4.0 이상");
   await act(async () => host.querySelector<HTMLButtonElement>('[aria-label="카테고리 필터 초기화"]')!.click());
   expect(JSON.parse(host.querySelector("output")!.textContent!)).toEqual({ category: null, rating: "all", open: "all" });
+  expect(host.querySelector('[aria-label="평점 필터"]')).toBeNull();
   expect(button("호텔")).toBeDefined();
 });
diff --git a/src/components/map/MapDiscoverToolbar.tsx b/src/components/map/MapDiscoverToolbar.tsx
index 35cf6e45..65a13e5b 100644
--- a/src/components/map/MapDiscoverToolbar.tsx
+++ b/src/components/map/MapDiscoverToolbar.tsx
@@ -3,7 +3,8 @@
 import { type ReactNode } from "react";
 import { flushSync } from "react-dom";
 
-import { CircleCancelIcon, SearchIcon } from "@/assets/icons";
+import { CircleCancelIcon, CloseIcon, SearchIcon } from "@/assets/icons";
+import { Chip } from "@/components/ui/chip";
 import { useMobileView } from "@/contexts/MobileViewContext";
 import { useMobileMapSearchStore } from "@/stores/mobile-map-search-store";
 
@@ -14,9 +15,8 @@ import {
 import { cn } from "@/lib/utils";
 
 import MapFilter from "./MapFilter";
-import { MapSearchIcon } from "./MapSearchIcon";
+import { MapChipToggle } from "./MapChipToggle";
 import { MAP_PLACE_CATEGORIES } from "./map-place-categories";
-import { mapChipButtonClassName } from "./map-chip-button";
 import { MapCategoryChips } from "./MapCategoryChips";
 import type { OpenValue, RatingValue } from "./map-filters";
 
@@ -57,17 +57,18 @@ export function MapDiscoverToolbar({
       {isMobileDevice ? <MobileMapSearchBar /> : null}
       <div className="flex min-h-12 min-w-0 flex-nowrap items-center gap-6">
         <div className="pointer-events-auto min-w-0 flex-1">
-          <div className="-my-2 overflow-x-auto py-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {/* Figma Chip에는 그림자가 없어 지도 위에 뜨는 그림자를 칩마다 주지 않고 이 줄에 준다. 색은 검색 말풍선과 같은 #0000001a, drop-shadow 5px는 box-shadow 10px와 같은 퍼짐이다 */}
+          <div className="-my-2 overflow-x-auto py-2 drop-shadow-[0_2px_5px_#0000001a] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
             {category ? (
               <div className="flex w-max flex-nowrap items-center gap-1.5">
-                <button type="button" aria-pressed onClick={resetCategory} className={mapChipButtonClassName(true)}>
-                  <MapSearchIcon name={category.icon}/><span>{category.label}</span>
-                </button>
+                <MapChipToggle pressed onPressedChange={resetCategory}>
+                  <category.icon className="text-primary-strong"/><span>{category.label}</span>
+                </MapChipToggle>
                 <MapFilter rating={rating} openNow={openNow} setRating={setRating} setOpenNow={setOpenNow}/>
-                <button type="button" aria-label="카테고리 필터 초기화" onClick={resetCategory}
-                  className={cn(mapChipButtonClassName(false), "w-9 px-0")}>
-                  <MapSearchIcon name="reset"/>
-                </button>
+                <Chip variant="outline" size="md" className="w-9 px-0"
+                  render={<button type="button" aria-label="카테고리 필터 초기화" onClick={resetCategory}/>}>
+                  <CloseIcon/>
+                </Chip>
               </div>
             ) : <MapCategoryChips selectedCategoryId={selectedCategoryId} onSelectCategory={onSelectCategory}/>}
           </div>
diff --git a/src/components/map/MapFilter.tsx b/src/components/map/MapFilter.tsx
index 5c4592ee..046419a8 100644
--- a/src/components/map/MapFilter.tsx
+++ b/src/components/map/MapFilter.tsx
@@ -1,16 +1,17 @@
-import { FilterDropdown } from "@/components/filter-dropdown";
-import { MAP_FILTER_DROPDOWN_MENU_Z_CLASS } from "@/lib/layout/mapDetailPanelLayout";
-import {
-  mapFilterChipActiveFilledClassName,
-  mapFilterChipInactiveClassName,
-} from "./map-chip-button";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { useEffect, useRef, useState } from "react";
+
+import { Chip } from "@/components/ui/chip";
+import { Select, SelectContent, SelectItem } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
 
+import { MapChipToggle } from "./MapChipToggle";
+import { MapSearchIcon } from "./MapSearchIcon";
 import {
   RATING_OPTIONS,
   type OpenValue,
   type RatingValue,
 } from "./map-filters";
-import { cn } from "@/lib/utils";
 
 type MapFilterProps = {
   rating: RatingValue;
@@ -33,27 +34,85 @@ export default function MapFilter({
 
   return (
     <div className={cn("flex flex-nowrap gap-1.5", className)}>
-      <FilterDropdown
-        label="평점"
-        options={RATING_OPTIONS}
-        value={rating}
-        onChange={setRating}
-        onOpenChange={onRatingDropdownOpenChange}
-        menuClassName={MAP_FILTER_DROPDOWN_MENU_Z_CLASS}
-      />
-      <button
-        type="button"
-        aria-pressed={isOpenOnly}
-        onClick={() => setOpenNow(isOpenOnly ? "all" : "open")}
-        className={cn(
-          "inline-flex items-center gap-1",
-          isOpenOnly
-            ? mapFilterChipActiveFilledClassName()
-            : mapFilterChipInactiveClassName(),
-        )}
+      <RatingSelect value={rating} onChange={setRating} onOpenChange={onRatingDropdownOpenChange} />
+      <MapChipToggle
+        pressed={isOpenOnly}
+        onPressedChange={(pressed) => setOpenNow(pressed ? "open" : "all")}
       >
         영업 중
-      </button>
+      </MapChipToggle>
     </div>
   );
 }
+
+/**
+ * 평점 하나를 고르는 Select. 트리거는 옆 칩들과 같은 Chip Outline md이고, 평점을 고르면 선택 칩 모양으로 그 라벨을 보인다("전체"면 "평점").
+ * Select 트리거에는 aria-pressed가 없어 Chip이 선택 모양을 그리지 못하므로 selected로 준다.
+ * 목록은 ui Select 모양(트리거 아래 4px, 늘 아래로)이고, 폭은 칩보다 넓게 지금 값(최소 136px)으로 라벨 폭에 맞춘다
+ */
+function RatingSelect({
+  value,
+  onChange,
+  onOpenChange,
+}: Readonly<{
+  value: RatingValue;
+  onChange: (value: RatingValue) => void;
+  onOpenChange?: (open: boolean) => void;
+}>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const isActive = value !== "all";
+  const triggerLabel = isActive ? (RATING_OPTIONS.find((option) => option.value === value)?.label ?? "평점") : "평점";
+
+  function changeOpen(open: boolean) {
+    setIsOpen(open);
+    onOpenChange?.(open);
+  }
+
+  // 지금 동작 유지: 열린 동안 페이지·툴바 가로 스크롤이 움직이거나 창 크기가 바뀌면 닫는다(목록 안 스크롤은 제외).
+  // Base UI 목록은 닫지 않고 위치만 따라간다
+  useEffect(() => {
+    if (!isOpen) return;
+    const closeOnMove = (event: Event) => {
+      if (event.target instanceof Node && popupRef.current?.contains(event.target)) return;
+      setIsOpen(false);
+      onOpenChange?.(false);
+    };
+    window.addEventListener("scroll", closeOnMove, true);
+    window.addEventListener("resize", closeOnMove);
+    return () => {
+      window.removeEventListener("scroll", closeOnMove, true);
+      window.removeEventListener("resize", closeOnMove);
+    };
+  }, [isOpen, onOpenChange]);
+
+  return (
+    <Select
+      value={value}
+      onValueChange={(next) => {
+        if (next) onChange(next);
+      }}
+      open={isOpen}
+      onOpenChange={changeOpen}
+    >
+      <Chip
+        variant="outline"
+        size="md"
+        selected={isActive}
+        render={<SelectPrimitive.Trigger aria-label="평점 필터" />}
+      >
+        <span>{triggerLabel}</span>
+        <SelectPrimitive.Icon className="flex shrink-0 transition-transform data-popup-open:rotate-180 motion-reduce:transition-none">
+          <MapSearchIcon name="chevron-down" />
+        </SelectPrimitive.Icon>
+      </Chip>
+      <SelectContent ref={popupRef} className="w-max min-w-[136px]">
+        {RATING_OPTIONS.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/src/components/map/MapPlaceSearch.test.tsx b/src/components/map/MapPlaceSearch.test.tsx
index 63a13fd2..ffd51012 100644
--- a/src/components/map/MapPlaceSearch.test.tsx
+++ b/src/components/map/MapPlaceSearch.test.tsx
@@ -30,6 +30,7 @@ vi.mock("@/contexts/SelectedPlaceContext", () => ({
 }));
 vi.mock("@/hooks/usePlacesSearch", () => ({
   fetchPlacesPageWithPhotos: boundary.page,
+  fetchPlacesAreaPage: vi.fn(),
 }));
 vi.mock("@/lib/analytics/track", () => ({
   AnalyticsEvents: { search: "search" },
@@ -84,9 +85,7 @@ it("specific Details failure retry returns to that input with a fresh session an
     (buttons[1] as HTMLButtonElement).click();
   });
   expect(usePlaceSearchStore.getState().status).toBe("error");
-  const retry = [...host.querySelectorAll("button")].find(
-    (button) => button.textContent === "다시 시도",
-  )!;
+  const retry = host.querySelector<HTMLButtonElement>('button[aria-label="다시 시도"]')!;
   await act(async () => retry.click());
   expect(boundary.page).not.toHaveBeenCalled();
   expect(document.activeElement).toBe(input);
@@ -106,3 +105,21 @@ it("specific Details failure retry returns to that input with a fresh session an
   expect(boundary.page).not.toHaveBeenCalled();
   expect(usePlaceSearchStore.getState().selectedId).toBe("chosen");
 });
+// 버튼으로 한 「현 위치에서 검색」의 결과 없음은 검색창 아래가 아니라 버튼 자리에서 알린다
+it("search here no results stay out of the search box", async () => {
+  useSessionStore.setState({ currentRoomId: "room" });
+  useMapCenterStore.setState({ mapCenter: { lat: 1, lng: 2 } });
+  usePlaceSearchStore.getState().clear();
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  cleanup = async () => {
+    await act(async () => root.unmount());
+    host.remove();
+  };
+  await act(async () => root.render(<MapPlaceSearch mobile={false} />));
+  await act(async () => usePlaceSearchStore.setState({ searchMode: "map_recenter", status: "done", items: [] }));
+  expect(host.textContent).not.toContain("검색 결과가 없어요");
+  await act(async () => usePlaceSearchStore.setState({ searchMode: "text" }));
+  expect(host.textContent).toContain("검색 결과가 없어요");
+});
diff --git a/src/components/map/MapPlaceSearch.tsx b/src/components/map/MapPlaceSearch.tsx
index d543bb1d..dd528959 100644
--- a/src/components/map/MapPlaceSearch.tsx
+++ b/src/components/map/MapPlaceSearch.tsx
@@ -2,10 +2,11 @@
 
 import { useRef } from "react";
 import { flushSync } from "react-dom";
+import { RefreshIcon } from "@/assets/icons";
 import { useMobileMapSearchStore } from "@/stores/mobile-map-search-store";
 import { useSearchParams } from "next/navigation";
 import { MapPlaceSearchInput } from "@/components/search/MapPlaceSearchInput";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { usePlaceSearchStore } from "@/stores/place-search-store";
 import type { SearchConfirmation } from "@/lib/places/search-session";
 import { useMapPlaceSearch } from "./useMapPlaceSearch";
@@ -26,6 +27,7 @@ export function MapPlaceSearch({ mobile, hidden = false }: Readonly<{
   const items = usePlaceSearchStore((s) => s.items);
   const inputRef = useRef<HTMLInputElement>(null);
   const confirmationKind = usePlaceSearchStore((s) => s.confirmationKind);
+  const searchMode = usePlaceSearchStore((s) => s.searchMode);
   const query = usePlaceSearchStore((s) => s.query);
   const focus = useMapPinsFocusStore((s) => s.focus);
   const { selectedPlace } = useSelectedPlace();
@@ -44,8 +46,9 @@ export function MapPlaceSearch({ mobile, hidden = false }: Readonly<{
     }
     void confirm({ query, kind: "whole", session: null, generation: 0 });
   };
-  const hasFeedback = status === "pending" || status === "error" ||
-    (status === "done" && !items.length);
+  // 「현 위치에서 검색」의 실패·결과 없음은 검색창이 아니라 그 버튼 자리에서 알린다(MapSearchHereButton)
+  const hasFeedback = status === "pending" || (searchMode === "text" &&
+    (status === "error" || (status === "done" && !items.length)));
   const feedback = hasFeedback ? (
     <SearchFeedback status={status} error={error} hasItems={items.length > 0} retry={retry} />
   ) : null;
@@ -63,7 +66,7 @@ export function MapPlaceSearch({ mobile, hidden = false }: Readonly<{
         <div
           data-tutorial-target="search"
           hidden={hidden}
-          className="pointer-events-auto relative min-w-0 max-w-[calc(100%-60px)] shrink-0"
+          className="group/search pointer-events-auto relative min-w-0 max-w-[calc(100%-60px)] shrink-0"
         >
           <MapPlaceSearchInput
             key={`${scopeKey}:${initialQuery}`}
@@ -76,8 +79,9 @@ export function MapPlaceSearch({ mobile, hidden = false }: Readonly<{
             onInvalidate={invalidate}
             onClear={clearSearch}
           />
+          {/* 다시 검색하려고 검색창에 들어가면 추천 목록과 같은 자리라 안내를 숨긴다 */}
           {feedback ? (
-            <div className="absolute right-0 top-full mt-1 w-[353px] max-w-full rounded-lg border border-border-subtle bg-fill-subtle p-3">
+            <div className="absolute right-0 top-full mt-1 w-[353px] max-w-full rounded-lg border border-border-subtle bg-fill-subtle p-3 group-has-[input:focus]/search:hidden">
               {feedback}
             </div>
           ) : null}
@@ -101,12 +105,14 @@ function SearchFeedback({ status, error, hasItems, retry }: Readonly<{
   hasItems: boolean;
   retry: () => void;
 }>) {
-  if (status === "pending") return <LoadingIndicator label="장소 검색 중" />;
+  if (status === "pending") return <Spinner aria-label="장소 검색 중" />;
   if (status === "error") return (
-    <div role="alert" className="flex items-center gap-2 text-body-s-regular text-text">
-      <span>{error}</span>
-      <button type="button" className="shrink-0 cursor-pointer text-primary underline hover:opacity-80 focus-visible:outline-2 focus-visible:outline-primary" onClick={retry}>
-        다시 시도
+    <div role="alert" className="flex items-center justify-between gap-2 text-body-s-regular text-text">
+      <span className="min-w-0">{error}</span>
+      {/* 아이콘은 20px, 누르는 영역은 44px */}
+      <button type="button" aria-label="다시 시도" onClick={retry}
+        className="-m-3 grid size-11 shrink-0 cursor-pointer place-items-center text-icon-subtle hover:opacity-80 focus-visible:outline-2 focus-visible:outline-primary">
+        <RefreshIcon size={20} />
       </button>
     </div>
   );
diff --git a/src/components/map/MapSearchHereButton.test.tsx b/src/components/map/MapSearchHereButton.test.tsx
new file mode 100644
index 00000000..2688237b
--- /dev/null
+++ b/src/components/map/MapSearchHereButton.test.tsx
@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it } from "vitest";
+import { MapSearchHereButton } from "./MapSearchHereButton";
+import { useMapCenterStore } from "@/stores/map-center-store";
+import { usePlaceSearchStore } from "@/stores/place-search-store";
+import { useSearchRecenterStore } from "@/stores/search-recenter-store";
+
+let root: Root, host: HTMLDivElement;
+const searched = { center: { lat: 35.7, lng: 139.8 }, zoom: 15, radius: 1000 };
+
+beforeEach(async () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  usePlaceSearchStore.getState().clear();
+  useMapCenterStore.setState({ mapCenter: searched.center, zoom: 15 });
+  useSearchRecenterStore.getState().setSearchSnapshot(searched);
+  host = document.createElement("div");
+  root = createRoot(host);
+  await act(async () => root.render(<MapSearchHereButton discoverCategoryId={null} discoverFailed={false} />));
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  useSearchRecenterStore.getState().clearSearchSnapshot();
+  useSearchRecenterStore.getState().clearDiscoverSnapshot();
+  usePlaceSearchStore.getState().clear();
+});
+
+const button = () => host.querySelector("button");
+const notice = () => host.querySelector('[role="status"]');
+const finishSearch = (state: Partial<ReturnType<typeof usePlaceSearchStore.getState>>) =>
+  act(async () => usePlaceSearchStore.setState(state));
+
+it("shows nothing while the map shows the searched area", () => {
+  expect(button()).toBeNull();
+});
+
+it("turns into 다시 시도 when search here fails and asks search here again", async () => {
+  await finishSearch({ searchMode: "map_recenter", status: "error" });
+  expect(button()?.textContent).toBe("다시 시도");
+  const before = useSearchRecenterStore.getState().searchRecenterRequestId;
+  await act(async () => button()!.click());
+  expect(useSearchRecenterStore.getState().searchRecenterRequestId).toBe(before + 1);
+});
+
+it("a search box failure leaves the button alone", async () => {
+  await finishSearch({ searchMode: "text", status: "error" });
+  expect(button()).toBeNull();
+});
+
+it("shows 검색 결과가 없어요 until closed, and again for the next search here", async () => {
+  await finishSearch({ searchMode: "map_recenter", status: "done", items: [] });
+  expect(notice()?.textContent).toBe("검색 결과가 없어요");
+  await act(async () => host.querySelector<HTMLButtonElement>('button[aria-label="안내 닫기"]')!.click());
+  expect(notice()).toBeNull();
+  await act(async () => { usePlaceSearchStore.getState().invalidate(); });
+  await finishSearch({ searchMode: "map_recenter", status: "done", items: [] });
+  expect(notice()).not.toBeNull();
+});
+
+it("goes back to 현 위치에서 검색 when the map moves after a failure", async () => {
+  await finishSearch({ searchMode: "map_recenter", status: "error" });
+  await act(async () => useMapCenterStore.setState({ mapCenter: { lat: 35.8, lng: 139.8 } }));
+  expect(button()?.textContent).toBe("현 위치에서 검색");
+});
+
+// 카테고리 칩으로 찾은 뒤 「현 위치에서 검색」이 실패해도(결과 없음이 아니라 오류) 같은 자리에서 다시 시도한다
+it("turns into 다시 시도 when the category search fails and asks the category search again", async () => {
+  useSearchRecenterStore.getState().setDiscoverSnapshot({
+    ...searched,
+    bounds: { south: 35.69, west: 139.79, north: 35.71, east: 139.81 },
+  });
+  await act(async () => root.render(<MapSearchHereButton discoverCategoryId="restaurant" discoverFailed />));
+  expect(button()?.textContent).toBe("다시 시도");
+  const before = useSearchRecenterStore.getState().discoverRecenterRequestId;
+  await act(async () => button()!.click());
+  expect(useSearchRecenterStore.getState().discoverRecenterRequestId).toBe(before + 1);
+});
+
+it("goes back to 현 위치에서 검색 when the map moves after a category failure", async () => {
+  useSearchRecenterStore.getState().setDiscoverSnapshot({
+    ...searched,
+    bounds: { south: 35.69, west: 139.79, north: 35.71, east: 139.81 },
+  });
+  await act(async () => root.render(<MapSearchHereButton discoverCategoryId="restaurant" discoverFailed />));
+  await act(async () => useMapCenterStore.setState({ mapCenter: { lat: 35.8, lng: 139.8 } }));
+  expect(button()?.textContent).toBe("현 위치에서 검색");
+});
diff --git a/src/components/map/MapSearchHereButton.tsx b/src/components/map/MapSearchHereButton.tsx
index bb16838e..f4c14cb8 100644
--- a/src/components/map/MapSearchHereButton.tsx
+++ b/src/components/map/MapSearchHereButton.tsx
@@ -1,15 +1,25 @@
 "use client";
 
-import { SearchHereFloatingButton } from "@/components/map/SearchHereFloatingButton";
+import { useState } from "react";
+import { CloseIcon } from "@/assets/icons";
+import {
+  SearchHereFloatingButton,
+  searchHerePillClass,
+} from "@/components/map/SearchHereFloatingButton";
 import { usePlacesSearchHereVisible } from "@/components/map/usePlacesSearchHereVisible";
+import { cn } from "@/lib/utils";
+import { usePlaceSearchStore } from "@/stores/place-search-store";
 import { useSearchRecenterStore } from "@/stores/search-recenter-store";
 
 export type MapSearchHereButtonProps = {
   discoverCategoryId: string | null;
+  /** 카테고리 검색이 실패함 — 버튼이 「다시 시도」로 남는다 */
+  discoverFailed: boolean;
 };
 
 export function MapSearchHereButton({
   discoverCategoryId,
+  discoverFailed,
 }: MapSearchHereButtonProps) {
   const requestSearchRecenter = useSearchRecenterStore(
     (s) => s.requestSearchRecenter,
@@ -17,21 +27,54 @@ export function MapSearchHereButton({
   const requestDiscoverRecenter = useSearchRecenterStore(
     (s) => s.requestDiscoverRecenter,
   );
-  const { visible, suggestSearchRecenter, suggestDiscoverRecenter } =
-    usePlacesSearchHereVisible({ discoverCategoryId });
+  const generation = usePlaceSearchStore((s) => s.generation);
+  // 닫은 「검색 결과가 없어요」는 그 검색 동안만 닫혀 있다(새 검색은 generation이 바뀐다)
+  const [closedGeneration, setClosedGeneration] = useState<number | null>(null);
+  const {
+    visible,
+    suggestSearchRecenter,
+    searchRecenterNotice,
+    suggestDiscoverRecenter,
+    retryDiscoverRecenter,
+  } = usePlacesSearchHereVisible({ discoverCategoryId, discoverFailed });
+  const showEmptyNotice =
+    searchRecenterNotice === "empty" && closedGeneration !== generation;
+
+  if (!visible && !showEmptyNotice) return null;
 
   return (
-    <SearchHereFloatingButton
-      visible={visible}
-      onPress={() => {
-        if (suggestSearchRecenter) {
-          requestSearchRecenter();
-          return;
-        }
-        if (suggestDiscoverRecenter) {
-          requestDiscoverRecenter();
-        }
-      }}
-    />
+    <div className="pointer-events-none absolute bottom-6 left-1/2 z-[17] -translate-x-1/2">
+      {showEmptyNotice ? (
+        <div role="status" className={cn(searchHerePillClass, "pe-1")}>
+          검색 결과가 없어요
+          {/* 아이콘은 16px, 누르는 영역은 32×44px(세로는 음수 margin으로 알약 높이 유지) */}
+          <button
+            type="button"
+            aria-label="안내 닫기"
+            onClick={() => setClosedGeneration(generation)}
+            className="-my-3 grid h-11 w-8 shrink-0 cursor-pointer place-items-center text-primary focus-visible:outline-2 focus-visible:outline-primary"
+          >
+            <CloseIcon size={16} />
+          </button>
+        </div>
+      ) : (
+        <SearchHereFloatingButton
+          label={
+            searchRecenterNotice === "failed" || retryDiscoverRecenter
+              ? "다시 시도"
+              : "현 위치에서 검색"
+          }
+          onPress={() => {
+            if (suggestSearchRecenter) {
+              requestSearchRecenter();
+              return;
+            }
+            if (suggestDiscoverRecenter) {
+              requestDiscoverRecenter();
+            }
+          }}
+        />
+      )}
+    </div>
   );
 }
diff --git a/src/components/map/MapSearchIcon.tsx b/src/components/map/MapSearchIcon.tsx
index 0cafbdff..6b49986b 100644
--- a/src/components/map/MapSearchIcon.tsx
+++ b/src/components/map/MapSearchIcon.tsx
@@ -2,9 +2,7 @@ import Image from "next/image";
 
 /** Original vector exports from Figma 6153:8257; explicit dimensions preserve the glyphs. */
 export function MapSearchIcon({ name, size = 16, className }: Readonly<{
-  name: "restaurant" | "hotel" | "attraction" | "museum" | "transit" |
-    "chevron-down" | "reset" | "search" | "search-white" | "location" |
-    "clear" | "close" | "star" | "arrow-right";
+  name: "chevron-down" | "search" | "search-white" | "location" | "close" | "star" | "arrow-right";
   size?: number;
   className?: string;
 }>) {
diff --git a/src/components/map/MobileMapSearch.tsx b/src/components/map/MobileMapSearch.tsx
index a8eb89ae..ad972197 100644
--- a/src/components/map/MobileMapSearch.tsx
+++ b/src/components/map/MobileMapSearch.tsx
@@ -61,6 +61,7 @@ export function MobileMapSearch({
     usePlaceSearchStore.setState({
       query: entry.name,
       confirmationKind: "specific",
+      searchMode: "text",
       status: "pending",
       error: null,
     });
@@ -89,7 +90,6 @@ export function MobileMapSearch({
         expanded: false,
         status: "done",
         error: null,
-        fallback: false,
         termination: "not-requested",
         resolution: null,
         query: item.name,
diff --git a/src/components/map/PlanItineraryMapRoutes.tsx b/src/components/map/PlanItineraryMapRoutes.tsx
index 7b116e40..5d7ed6f5 100644
--- a/src/components/map/PlanItineraryMapRoutes.tsx
+++ b/src/components/map/PlanItineraryMapRoutes.tsx
@@ -16,9 +16,12 @@ import {
   decodeOrientedPlanItinerarySegmentPath,
   normalizeGooglePlaceResourceId,
 } from "@/lib/maps";
-import { persistedScheduleItemRouteQueryOptions } from "@/lib/plan/scheduleItemRoutePersistedQuery";
+import {
+  loadScheduleItemRouteForMap,
+  persistedScheduleItemRouteQueryOptions,
+} from "@/lib/plan/scheduleItemRoutePersistedQuery";
 import { schedulePlacesFingerprint } from "@/lib/plan/planTravelLocalStorage";
-import { readSchedulePlanPlacesFromCache } from "@/lib/plan/scheduleItemPlaces";
+import { schedulePlanPlacesQueryOptions } from "@/lib/plan/scheduleItemPlaces";
 import {
   scheduleIdsToRouteColors,
   sortedScheduleIdsForRouteColors,
@@ -30,14 +33,7 @@ import {
 import {
   flattenPlanItinerarySegmentsFromPlaces,
 } from "@/lib/plan/planItineraryMapSegments";
-import {
-  planItinerarySegmentMapPathQueryKey,
-  scheduleItemsQueryKey,
-} from "@/lib/query-keys";
-import {
-  planMapSegmentEpochStoreKey,
-  usePlanMapDirectionsEpochStore,
-} from "@/stores/plan-map-directions-epoch-store";
+import { planItinerarySegmentMapPathQueryKey } from "@/lib/query-keys";
 import { usePlanScheduleRouteVisibilityStore } from "@/stores/plan-schedule-route-visibility-store";
 import { usePlanMapFocusStore } from "@/stores/plan-map-focus-store";
 import { useSessionStore } from "@/stores/session-store";
@@ -49,7 +45,6 @@ import { PlanItineraryStopMapPin } from "./PlanItineraryStopMapPin";
  * 일차만 지도에 경로(polyline)와 정류장 마커를 그립니다.
  * `routeDay`가 있으면(모바일 경로 보기) 토글과 관계없이 그 일차만 그립니다.
  * 폴리라인 travelMode는 서버에 저장된 구간별 공유 이동수단을 따릅니다.
- * STOMP 에폭은 {@link usePlanMapDirectionsEpochStore} 참고.
  */
 /** 모바일 경로 보기 — 고른 일차 하나만 그린다 */
 export type PlanItineraryRouteDay = {
@@ -116,13 +111,6 @@ export function PlanItineraryMapRoutes({
     [singleDay, singleDayScheduleId, visibleByScheduleId],
   );
 
-  const directionsEpoch = usePlanMapDirectionsEpochStore((s) =>
-    rid.length > 0 ? (s.epochByRoomId[rid] ?? 0) : 0,
-  );
-  const epochBySegmentKey = usePlanMapDirectionsEpochStore(
-    (s) => s.epochBySegmentKey,
-  );
-
   const orderedScheduleIdsForQueries = useMemo(
     () => [...visibleScheduleIds].sort((a, b) => a - b),
     [visibleScheduleIds],
@@ -143,14 +131,11 @@ export function PlanItineraryMapRoutes({
 
   const placesQueries = useQueries({
     queries: orderedScheduleIdsForQueries.map((scheduleId) => ({
-      queryKey: scheduleItemsQueryKey(rid || null, scheduleId),
-      queryFn: () => readSchedulePlanPlacesFromCache(queryClient, rid, scheduleId),
+      ...schedulePlanPlacesQueryOptions(queryClient, rid, scheduleId),
       enabled:
         rid.length > 0 &&
         orderedScheduleIdsForQueries.length > 0 &&
         schedulesHydrated,
-      staleTime: Infinity,
-      refetchOnMount: false,
       refetchOnWindowFocus: false,
     })),
   });
@@ -176,54 +161,43 @@ export function PlanItineraryMapRoutes({
   );
 
   const pathsPerSegmentQueries = useQueries({
-    queries: segments.map((seg) => {
-      const epochKey = planMapSegmentEpochStoreKey(
+    queries: segments.map((seg) => ({
+      queryKey: planItinerarySegmentMapPathQueryKey(
         rid,
         seg.scheduleId,
         seg.segmentSourceItemId,
-      );
-      const segmentEpoch = epochBySegmentKey[epochKey] ?? 0;
-
-      return {
-        queryKey: planItinerarySegmentMapPathQueryKey(
-          rid,
-          seg.scheduleId,
-          seg.segmentSourceItemId,
-          seg.originPlaceId,
-          seg.destPlaceId,
-          seg.travelModeCanon,
-          directionsEpoch,
-          segmentEpoch,
-        ),
-        /**
-         * 구간 경로는 일정 리스트와 같은 쿼리를 통해 가져옵니다. `fetchQuery`에 맡겨야
-         * in-flight 합치기와 재정렬 중 뒤늦게 온 응답 폐기를 React Query가 처리합니다.
-         */
-        queryFn: async () => {
-          const route = await queryClient.fetchQuery(
-            persistedScheduleItemRouteQueryOptions(
-              rid,
-              seg.scheduleId,
-              seg.segmentSourceItemId,
-              seg.travelModeCanon,
-              fingerprintByScheduleId.get(seg.scheduleId) ?? "",
-              { segmentReady: true },
-            ),
-          );
-          return {
-            path: await decodeOrientedPlanItinerarySegmentPath(
-              seg,
-              route?.encodedPolyline,
-            ),
-          };
-        },
-        enabled: rid.length > 0 && segments.length > 0,
-        staleTime: Infinity,
-        refetchOnMount: false,
-        refetchOnWindowFocus: false,
-        retry: false,
-      };
-    }),
+        seg.destinationItemId,
+        seg.originPlaceId,
+        seg.destPlaceId,
+        seg.travelModeCanon,
+      ),
+      /** 구간 경로는 일정 리스트와 같은 쿼리로 가져와, 같은 구간을 받는 중이면 그 요청에 합류한다 */
+      queryFn: async () => {
+        const route = await loadScheduleItemRouteForMap(
+          queryClient,
+          persistedScheduleItemRouteQueryOptions(
+            rid,
+            seg.scheduleId,
+            seg.segmentSourceItemId,
+            seg.destinationItemId,
+            seg.travelModeCanon,
+            fingerprintByScheduleId.get(seg.scheduleId) ?? "",
+            { segmentReady: true },
+          ),
+        );
+        return {
+          path: await decodeOrientedPlanItinerarySegmentPath(
+            seg,
+            route?.encodedPolyline,
+          ),
+        };
+      },
+      enabled: rid.length > 0 && segments.length > 0,
+      staleTime: Infinity,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      retry: false,
+    })),
   });
 
   const polylines: Array<JSX.Element> = [];
@@ -231,13 +205,8 @@ export function PlanItineraryMapRoutes({
     const query = pathsPerSegmentQueries[segIdx];
     if (!query || query.isPending || query.isFetching) return;
     const pts = query.data?.path ?? [];
-
-    const segEpochKey = planMapSegmentEpochStoreKey(
-      rid,
-      seg.scheduleId,
-      seg.segmentSourceItemId,
-    );
-    const segEpoch = epochBySegmentKey[segEpochKey] ?? 0;
+    // 도착 항목이 바뀌면 다른 선이라 새로 그린다
+    const polylineKey = `${seg.scheduleId}-${seg.segmentSourceItemId}-${seg.destinationItemId}-${seg.travelModeCanon}`;
 
     const routeColor =
       routeColorByScheduleId.get(seg.scheduleId) ?? fallbackRouteStroke;
@@ -245,7 +214,7 @@ export function PlanItineraryMapRoutes({
     if (pts.length) {
       polylines.push(
         <Polyline
-          key={`${seg.scheduleId}-${seg.segmentSourceItemId}-${seg.travelModeCanon}-${directionsEpoch}-${segEpoch}`}
+          key={polylineKey}
           zIndex={40 + segIdx}
           strokeColor={routeColor}
           strokeOpacity={0.8}
@@ -264,7 +233,7 @@ export function PlanItineraryMapRoutes({
     connectorPaths.forEach((connectorPath, connectorIdx) => {
       polylines.push(
         <Polyline
-          key={`${seg.scheduleId}-${seg.segmentSourceItemId}-${seg.travelModeCanon}-${directionsEpoch}-${segEpoch}-connector-${connectorIdx}`}
+          key={`${polylineKey}-connector-${connectorIdx}`}
           zIndex={35 + segIdx}
           strokeColor={routeColor}
           strokeOpacity={0}
diff --git a/src/components/map/PlanRouteStepper.tsx b/src/components/map/PlanRouteStepper.tsx
index cb25a26d..b8f93d89 100644
--- a/src/components/map/PlanRouteStepper.tsx
+++ b/src/components/map/PlanRouteStepper.tsx
@@ -6,8 +6,7 @@ import { toast } from "sonner";
 import { ChevronLeftIcon } from "@/assets/icons";
 import { useSelectedPlace } from "@/contexts/SelectedPlaceContext";
 import { useRoomSchedules } from "@/hooks/useRooms";
-import { readSchedulePlanPlacesFromCache } from "@/lib/plan/scheduleItemPlaces";
-import { scheduleItemsQueryKey } from "@/lib/query-keys";
+import { schedulePlanPlacesQueryOptions } from "@/lib/plan/scheduleItemPlaces";
 import {
   PLAN_MAP_FOCUS_NO_LOCATION_MESSAGE,
   planPlaceFocusTarget,
@@ -32,13 +31,10 @@ export function PlanRouteStepper({ roomId }: Readonly<{ roomId: string | null }>
   const focusPlace = usePlanMapFocusStore((s) => s.focusPlace);
   const scheduleId = focus?.scheduleId ?? null;
 
-  // 지도 경로(`PlanItineraryMapRoutes`)와 같은 일정 항목 캐시를 읽는다 — 따로 조회하지 않는다
+  // 일정 목록·지도 경로(`PlanItineraryMapRoutes`)와 같은 일차 조회다 — 캐시가 있으면 따로 받지 않는다
   const { data: places = [] } = useQuery({
-    queryKey: scheduleItemsQueryKey(rid || null, scheduleId),
-    queryFn: () => (scheduleId === null ? [] : readSchedulePlanPlacesFromCache(queryClient, rid, scheduleId)),
+    ...schedulePlanPlacesQueryOptions(queryClient, rid, scheduleId),
     enabled: rid.length > 0 && scheduleId !== null && schedulesHydrated,
-    staleTime: Infinity,
-    refetchOnMount: false,
     refetchOnWindowFocus: false,
   });
 
diff --git a/src/components/map/SearchHereFloatingButton.tsx b/src/components/map/SearchHereFloatingButton.tsx
index 5ece72c0..f7d898b0 100644
--- a/src/components/map/SearchHereFloatingButton.tsx
+++ b/src/components/map/SearchHereFloatingButton.tsx
@@ -1,32 +1,33 @@
 "use client";
 
 import { RefreshCw } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/** 지도 하단 「현 위치에서 검색」 알약 모양. 같은 자리의 「검색 결과가 없어요」 안내도 이 모양을 쓴다 */
+export const searchHerePillClass =
+  "pointer-events-auto inline-flex items-center gap-1 rounded-full border-3 border-primary bg-white px-3 py-2 text-label-m-emphasis mobile:text-label-s-emphasis font-semibold text-dark-gray shadow-md";
 
 type SearchHereFloatingButtonProps = {
-  visible: boolean;
+  label: string;
   onPress: () => void;
 };
 
 export function SearchHereFloatingButton({
-  visible,
+  label,
   onPress,
 }: SearchHereFloatingButtonProps) {
-  if (!visible) return null;
-
   return (
-    <div className="pointer-events-none absolute bottom-6 left-1/2 z-[17] -translate-x-1/2">
-      <button
-        type="button"
-        onClick={onPress}
-        className="pointer-events-auto inline-flex cursor-pointer items-center gap-1 rounded-full border-3 border-primary bg-white px-3 py-2 text-label-m-emphasis mobile:text-label-s-emphasis font-semibold text-dark-gray shadow-md transition hover:bg-gray-50"
-      >
-        <RefreshCw
-          className="h-4 w-4 shrink-0 text-primary"
-          strokeWidth={2.2}
-          aria-hidden
-        />
-        현 위치에서 검색
-      </button>
-    </div>
+    <button
+      type="button"
+      onClick={onPress}
+      className={cn(searchHerePillClass, "cursor-pointer transition hover:bg-gray-50")}
+    >
+      <RefreshCw
+        className="h-4 w-4 shrink-0 text-primary"
+        strokeWidth={2.2}
+        aria-hidden
+      />
+      {label}
+    </button>
   );
 }
diff --git a/src/components/map/map-bookmark-preview-query.test.ts b/src/components/map/map-bookmark-preview-query.test.ts
index 66210e16..9c9aef30 100644
--- a/src/components/map/map-bookmark-preview-query.test.ts
+++ b/src/components/map/map-bookmark-preview-query.test.ts
@@ -1,98 +1,27 @@
 import { describe, expect, it, vi } from "vitest";
-import { QueryClient } from "@tanstack/react-query";
 
 vi.mock("@/lib/places/place-queries", () => ({
   placePreviewQueryOptions: (googlePlaceId: string) => ({
     queryKey: ["places", "preview", googlePlaceId],
     queryFn: async () => ({ googlePlaceId }),
     enabled: googlePlaceId.trim().length > 0,
-    staleTime: 60_000,
-    refetchOnWindowFocus: false,
-    retry: 1,
   }),
 }));
 
-vi.mock("@/lib/places/place-batch-cache", () => ({
-  fetchAndSeedPlacePreviews: vi.fn(),
-}));
-
-import {
-  buildMapBookmarkPreviewPlan,
-  mapBookmarkPreviewQueryOptions,
-  settleMapBookmarkPreviewBatch,
-} from "./map-bookmark-preview-query";
-
-describe("mapBookmarkPreviewQueryOptions", () => {
-  it("벌크 preview 시딩이 끝나기 전에는 개별 preview 요청을 비활성화한다", () => {
-    const options = mapBookmarkPreviewQueryOptions("ChIJ-bookmark", false);
-
-    expect(options.enabled).toBe(false);
-  });
-
-  it("벌크 preview 시딩이 끝난 뒤에는 캐시 miss 개별 조회를 허용한다", () => {
-    const options = mapBookmarkPreviewQueryOptions("ChIJ-bookmark", true);
-
-    expect(options.enabled).toBe(true);
-  });
+import { buildMapBookmarkPreviewPlan } from "./map-bookmark-preview-query";
 
-  it("숨길 북마크를 제외하고 벌크가 끝날 때까지 개별 조회를 차단한다", () => {
+describe("buildMapBookmarkPreviewPlan", () => {
+  it("숨길 북마크를 빼고 남은 북마크의 미리보기 쿼리를 바로 연다", () => {
     const rows = [
       { bookmarkId: 1, googlePlaceId: "places/ChIJ-hidden" },
       { bookmarkId: 2, googlePlaceId: "ChIJ-visible" },
     ];
 
-    const pendingPlan = buildMapBookmarkPreviewPlan(
-      rows,
-      new Set(["ChIJ-hidden"]),
-      null,
-    );
+    const plan = buildMapBookmarkPreviewPlan(rows, new Set(["ChIJ-hidden"]));
 
-    expect(pendingPlan.visibleBookmarks).toEqual([rows[1]]);
-    expect(pendingPlan.previewIdsKey).toBe("ChIJ-visible");
-    expect(pendingPlan.queryOptions.map((options) => options.enabled)).toEqual([
-      false,
+    expect(plan.visibleBookmarks).toEqual([rows[1]]);
+    expect(plan.queryOptions.map((options) => [options.queryKey, options.enabled])).toEqual([
+      [["places", "preview", "ChIJ-visible"], true],
     ]);
-
-    const settledPlan = buildMapBookmarkPreviewPlan(
-      rows,
-      new Set(["ChIJ-hidden"]),
-      pendingPlan.previewIdsKey,
-    );
-    expect(settledPlan.queryOptions.map((options) => options.enabled)).toEqual([
-      true,
-    ]);
-  });
-
-  it("현재 ID 벌크가 정착한 뒤에만 해당 key를 반환하고 실패해도 fallback을 연다", async () => {
-    const queryClient = new QueryClient();
-    let resolveBatch: (() => void) | undefined;
-    const loader = vi.fn(
-      () =>
-        new Promise<void>((resolve) => {
-          resolveBatch = resolve;
-        }),
-    );
-
-    const settlement = settleMapBookmarkPreviewBatch(
-      "ChIJ-a\u0000ChIJ-b",
-      queryClient,
-      loader,
-    );
-    let settled = false;
-    void settlement.then(() => {
-      settled = true;
-    });
-
-    await Promise.resolve();
-    expect(loader).toHaveBeenCalledWith(["ChIJ-a", "ChIJ-b"], queryClient);
-    expect(settled).toBe(false);
-
-    resolveBatch?.();
-    await expect(settlement).resolves.toBe("ChIJ-a\u0000ChIJ-b");
-
-    const failedLoader = vi.fn().mockRejectedValue(new Error("batch failed"));
-    await expect(
-      settleMapBookmarkPreviewBatch("ChIJ-c", queryClient, failedLoader),
-    ).resolves.toBe("ChIJ-c");
   });
 });
diff --git a/src/components/map/map-bookmark-preview-query.ts b/src/components/map/map-bookmark-preview-query.ts
index 2bc8891d..ae2170c4 100644
--- a/src/components/map/map-bookmark-preview-query.ts
+++ b/src/components/map/map-bookmark-preview-query.ts
@@ -1,68 +1,24 @@
-import type { QueryClient } from "@tanstack/react-query";
-
-import { fetchAndSeedPlacePreviews } from "@/lib/places/place-batch-cache";
 import { placePreviewQueryOptions } from "@/lib/places/place-queries";
 
 import { filterVisibleMapBookmarks } from "./filter-visible-map-bookmarks";
 
-const PREVIEW_IDS_KEY_SEPARATOR = "\u0000";
-
 type MapBookmarkRow = {
   googlePlaceId: string;
 };
 
-type PreviewBatchLoader = (
-  googlePlaceIds: readonly string[],
-  queryClient?: QueryClient | null,
-) => Promise<void>;
-
-export function mapBookmarkPreviewQueryOptions(
-  googlePlaceId: string,
-  batchSettled: boolean,
-) {
-  const options = placePreviewQueryOptions(googlePlaceId);
-  return {
-    ...options,
-    enabled: batchSettled && options.enabled,
-  };
-}
-
+/** 핀으로 그릴 북마크와 그 미리보기 쿼리 — 같은 커밋에 마운트된 미리보기 요청은 batch 하나로 모인다 */
 export function buildMapBookmarkPreviewPlan<T extends MapBookmarkRow>(
   rows: readonly T[],
   hiddenNormalizedPlaceIds: ReadonlySet<string> | undefined,
-  settledPreviewIdsKey: string | null,
 ) {
   const visibleBookmarks = filterVisibleMapBookmarks(
     rows,
     hiddenNormalizedPlaceIds,
   );
-  const previewIds = visibleBookmarks.map((row) => row.googlePlaceId);
-  const previewIdsKey = previewIds.join(PREVIEW_IDS_KEY_SEPARATOR);
-  const batchSettled =
-    previewIds.length === 0 || settledPreviewIdsKey === previewIdsKey;
-
   return {
     visibleBookmarks,
-    previewIdsKey,
     queryOptions: visibleBookmarks.map((row) =>
-      mapBookmarkPreviewQueryOptions(row.googlePlaceId, batchSettled),
+      placePreviewQueryOptions(row.googlePlaceId),
     ),
   };
 }
-
-export async function settleMapBookmarkPreviewBatch(
-  previewIdsKey: string,
-  queryClient: QueryClient,
-  loader: PreviewBatchLoader = fetchAndSeedPlacePreviews,
-): Promise<string> {
-  const previewIds = previewIdsKey.length
-    ? previewIdsKey.split(PREVIEW_IDS_KEY_SEPARATOR)
-    : [];
-
-  try {
-    await loader(previewIds, queryClient);
-  } catch {
-    // 벌크 실패 시 key를 정착시켜 React Query의 개별 조회 fallback을 허용합니다.
-  }
-  return previewIdsKey;
-}
diff --git a/src/components/map/map-chip-button.ts b/src/components/map/map-chip-button.ts
deleted file mode 100644
index eb7c4d93..00000000
--- a/src/components/map/map-chip-button.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { cn } from "@/lib/utils";
-
-const mapChipButtonBaseClass =
-  "inline-flex h-9 shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-full border bg-fill-elevate px-4 text-label-m-emphasis shadow-[0_2px_10px_#0000001a] transition-colors hover:bg-fill active:bg-fill-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
-
-export function mapFilterChipInactiveClassName() {
-  return cn(mapChipButtonBaseClass, "border-border text-text");
-}
-
-export function mapFilterChipActiveRingClassName() {
-  return cn(mapChipButtonBaseClass, "border-primary-strong text-primary-strong");
-}
-
-export function mapFilterChipActiveFilledClassName() {
-  return mapFilterChipActiveRingClassName();
-}
-
-/** Chip / Outline / md, including the selected category. */
-export function mapChipButtonClassName(active: boolean) {
-  return active ? mapFilterChipActiveRingClassName() : mapFilterChipInactiveClassName();
-}
diff --git a/src/components/map/map-filters.ts b/src/components/map/map-filters.ts
index 109f25f7..1d4b1834 100644
--- a/src/components/map/map-filters.ts
+++ b/src/components/map/map-filters.ts
@@ -1,9 +1,7 @@
-import type { FilterOption } from "@/components/filter-dropdown";
-
 export type RatingValue = "all" | "3.0" | "3.5" | "4.0" | "4.5";
 export type OpenValue = "all" | "open";
 
-export const RATING_OPTIONS: FilterOption<RatingValue>[] = [
+export const RATING_OPTIONS: { label: string; value: RatingValue }[] = [
   { label: "전체", value: "all" },
   { label: "3.0 이상", value: "3.0" },
   { label: "3.5 이상", value: "3.5" },
diff --git a/src/components/map/map-place-categories.ts b/src/components/map/map-place-categories.ts
index c51cae17..e84b296e 100644
--- a/src/components/map/map-place-categories.ts
+++ b/src/components/map/map-place-categories.ts
@@ -1,5 +1,13 @@
-import type { ComponentProps } from "react";
-import type { MapSearchIcon } from "./MapSearchIcon";
+import type { ComponentType } from "react";
+
+import {
+  TravelHotelIcon,
+  TravelMuseumIcon,
+  TravelRestaurantIcon,
+  TravelThemeparkIcon,
+  TravelTrainIcon,
+  type IconProps,
+} from "@/assets/icons";
 
 /**
  * Google Maps Place types (Table A).
@@ -11,7 +19,7 @@ export type MapPlaceCategory = {
   label: string;
   /** 레거시/검색 문맥용 쿼리 문자열 */
   searchQuery: string;
-  icon: ComponentProps<typeof MapSearchIcon>["name"];
+  icon: ComponentType<IconProps>;
   /** Nearby Search `includedPrimaryTypes` */
   googlePlaceTypeHint: string;
 };
@@ -21,35 +29,35 @@ export const MAP_PLACE_CATEGORIES: MapPlaceCategory[] = [
     id: "restaurant",
     label: "음식점",
     searchQuery: "음식점",
-    icon: "restaurant",
+    icon: TravelRestaurantIcon,
     googlePlaceTypeHint: "restaurant",
   },
   {
     id: "lodging",
     label: "호텔",
     searchQuery: "호텔",
-    icon: "hotel",
+    icon: TravelHotelIcon,
     googlePlaceTypeHint: "lodging",
   },
   {
     id: "things_to_do",
     label: "즐길거리",
     searchQuery: "관광명소 즐길거리",
-    icon: "attraction",
+    icon: TravelThemeparkIcon,
     googlePlaceTypeHint: "tourist_attraction",
   },
   {
     id: "museum",
     label: "박물관",
     searchQuery: "박물관",
-    icon: "museum",
+    icon: TravelMuseumIcon,
     googlePlaceTypeHint: "museum",
   },
   {
     id: "transit",
     label: "대중교통",
     searchQuery: "지하철역 버스정류장",
-    icon: "transit",
+    icon: TravelTrainIcon,
     googlePlaceTypeHint: "transit_station",
   },
 ];
diff --git a/src/components/map/useMapPlaceSearch.test.tsx b/src/components/map/useMapPlaceSearch.test.tsx
index 0eb27186..fd2ccb51 100644
--- a/src/components/map/useMapPlaceSearch.test.tsx
+++ b/src/components/map/useMapPlaceSearch.test.tsx
@@ -12,8 +12,10 @@ import { registerQueryClient } from "@/lib/query-client";
 import { placeDetailQueryKey } from "@/lib/places/place-queries";
 import { useMapPinsFocusStore } from "@/stores/map-pins-focus-store";
 import { useSessionStore } from "@/stores/session-store";
+import { useSearchRecenterStore } from "@/stores/search-recenter-store";
 const network = vi.hoisted(() => ({
   page: vi.fn(),
+  area: vi.fn(),
   detail: vi.fn(),
   select: vi.fn(),
   track: vi.fn(),
@@ -22,6 +24,7 @@ const network = vi.hoisted(() => ({
 }));
 vi.mock("@/hooks/usePlacesSearch", () => ({
   fetchPlacesPageWithPhotos: network.page,
+  fetchPlacesAreaPage: network.area,
 }));
 vi.mock("@/lib/api/client", () => ({ apiFetch: vi.fn() }));
 vi.mock("@/contexts/SelectedPlaceContext", () => ({
@@ -70,6 +73,7 @@ beforeEach(async () => {
     if (String(url).endsWith("/places/resolve")) return Response.json({ detail: rawDetail, source: "GOOGLE", cacheStatus: "MISS", googleDetailsRequested: true, termination: "SUCCEEDED" });
     throw new Error(`Unexpected HTTP ${String(url)}`);
   });
+  network.area.mockReset().mockResolvedValue({ items: [], nextPageToken: null });
   network.page.mockReset().mockResolvedValue({
     items: [
       {
@@ -95,7 +99,7 @@ beforeEach(async () => {
   network.track.mockReset();
   useSessionStore.setState({ currentRoomId: "room" });
   usePlaceSearchStore.getState().clear();
-  useMapCenterStore.setState({ mapCenter: { lat: 1, lng: 2 }, zoom: 12 });
+  useMapCenterStore.setState({ mapCenter: { lat: 1, lng: 2 }, zoom: 12, radiusMeters: null, bounds: null });
   host = document.createElement("div");
   root = createRoot(host);
   await act(async () => root.render(<Harness />));
@@ -110,9 +114,11 @@ it("web whole search publishes only Text Search pins without selecting a detail
   expect(usePlaceSearchStore.getState().selectedId).toBeNull();
   expect(usePlaceSearchStore.getState().items.map(x => x.googlePlaceId)).toEqual(["other"]);
   expect(usePlaceSearchStore.getState().items[0].rating).toBe(4.2);
-  expect(client.getQueryData(placeDetailQueryKey("first"))).toEqual(rawDetail);
+  expect(network.page).toHaveBeenCalledWith(expect.objectContaining({ latitude: 1, longitude: 2, radius: 5000 }));
+  expect(vi.mocked(apiFetch).mock.calls.filter(([url]) => String(url).endsWith("/places/resolve"))).toHaveLength(0);
+  expect(client.getQueryData(placeDetailQueryKey("first"))).toBeUndefined();
 });
-it("mobile whole search keeps cards collapsed and reuses resolved full detail without GET supplement", async () => {
+it("mobile whole search keeps cards collapsed without detail requests", async () => {
   await act(async () => root.render(<Harness mobile />));
   await act(async () => {
     await api.confirm(confirmation());
@@ -139,6 +145,40 @@ it("mobile specific reuses chosen resolved detail without Text Search", async ()
     expect.objectContaining({ analyticsSource: "search", itinerarySource: "search" }),
   );
 });
+// 센소지를 찾은 뒤 지도를 옮겨 재검색할 때 위치 우선(bias)으로 찾으면 Google이 센소지를 다시 돌려줬다
+it.each([
+  ["shows what Google finds inside the visible map", ["inside"]],
+  ["shows no results when Google finds nothing inside the visible map", []],
+] as const)("search here asks Google for the visible map only and %s", async (_, expected) => {
+  await act(async () => { await api.confirm(confirmation()); });
+  const bounds = { south: 0, west: 1, north: 2, east: 3 };
+  useMapCenterStore.setState({ mapCenter: { lat: 1, lng: 2 }, zoom: 15, radiusMeters: 1234, bounds });
+  const inside = { googlePlaceId: "inside", name: "화면 안", location: { lat: 1.5, lng: 2.5 } };
+  network.area.mockResolvedValueOnce({ items: expected.length ? [inside] : [], nextPageToken: null });
+  await act(async () => useSearchRecenterStore.getState().requestSearchRecenter());
+  await vi.waitFor(() => expect(usePlaceSearchStore.getState().status).toBe("done"));
+  expect(usePlaceSearchStore.getState().items.map((x) => x.googlePlaceId)).toEqual(expected);
+  expect(network.area).toHaveBeenCalledExactlyOnceWith({ query: "원래 검색어", area: bounds, pageSize: expect.any(Number) });
+  expect(network.page).toHaveBeenCalledTimes(1);
+});
+it("search box failure shows one message instead of the raw error", async () => {
+  network.page.mockRejectedValueOnce(new TypeError("Failed to fetch"));
+  await act(async () => { await api.confirm(confirmation()); });
+  expect(usePlaceSearchStore.getState()).toMatchObject({ status: "error", error: "검색에 실패했어요.", searchMode: "text" });
+});
+// 「현 위치에서 검색」 실패는 검색창 문구 없이 그 버튼이 「다시 시도」로 알리고, 보이던 결과는 그대로 둔다
+it("search here failure keeps the shown results and leaves the message to the button", async () => {
+  await act(async () => { await api.confirm(confirmation()); });
+  useMapCenterStore.setState({
+    mapCenter: { lat: 1, lng: 2 }, zoom: 15, radiusMeters: 1234,
+    bounds: { south: 0, west: 1, north: 2, east: 3 },
+  });
+  network.area.mockRejectedValueOnce(new TypeError("Failed to fetch"));
+  await act(async () => useSearchRecenterStore.getState().requestSearchRecenter());
+  await vi.waitFor(() => expect(usePlaceSearchStore.getState().status).toBe("error"));
+  expect(usePlaceSearchStore.getState()).toMatchObject({ searchMode: "map_recenter", error: null });
+  expect(usePlaceSearchStore.getState().items.map((x) => x.googlePlaceId)).toEqual(["other"]);
+});
 it("editing input suppresses a late response and analytics", async () => {
   let finish!: (v: unknown) => void;
   network.page.mockReturnValue(
diff --git a/src/components/map/useMapPlaceSearch.ts b/src/components/map/useMapPlaceSearch.ts
index 85b22916..98875cc6 100644
--- a/src/components/map/useMapPlaceSearch.ts
+++ b/src/components/map/useMapPlaceSearch.ts
@@ -4,6 +4,7 @@ import { useEffect, useEffectEvent, useRef, useState } from "react";
 import { useSelectedPlace } from "@/contexts/SelectedPlaceContext";
 import { useSessionUser } from "@/hooks/useSessionUser";
 import {
+  fetchPlacesAreaPage,
   fetchPlacesPageWithPhotos,
   type PlaceSearchResult,
 } from "@/hooks/usePlacesSearch";
@@ -21,6 +22,7 @@ import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
 import { getQueryClient } from "@/lib/query-client";
 import { placeDetailQueryKey } from "@/lib/places/place-queries";
 import { PLACES_SEARCH_PAGE_SIZE } from "@/lib/places/placesSearchPageSize";
+import { clampPlacesSearchRadiusMeters } from "@/lib/places/placesSearchRadius";
 import {
   confirmPlaceSearch,
   type ResolvedSearchAnchor,
@@ -32,10 +34,15 @@ import {
   useMapPinsFocusStore,
 } from "@/stores/map-pins-focus-store";
 import { useMobileMapSearchStore } from "@/stores/mobile-map-search-store";
-import { usePlaceSearchStore } from "@/stores/place-search-store";
+import {
+  usePlaceSearchStore,
+  type PlaceSearchMode,
+} from "@/stores/place-search-store";
 import { useSearchRecenterStore } from "@/stores/search-recenter-store";
 import { useSessionStore } from "@/stores/session-store";
 
+const SEARCH_BIAS_RADIUS_METERS = 5000;
+
 export function useMapPlaceSearch(mobile: boolean) {
   const roomId = useSessionStore((s) => s.currentRoomId);
   const userId = useSessionUser().data?.id;
@@ -102,7 +109,7 @@ export function useMapPlaceSearch(mobile: boolean) {
   function applySearchResult(
     result: NonNullable<Awaited<ReturnType<typeof confirmPlaceSearch<PlaceSearchResult>>>>,
     confirmation: SearchConfirmation,
-    mode: "text" | "map_recenter",
+    mode: PlaceSearchMode,
   ) {
     const searchRankBuckets: Record<string, SearchRankBucket> =
       confirmation.kind === "whole"
@@ -126,7 +133,6 @@ export function useMapPlaceSearch(mobile: boolean) {
       searchRankBuckets,
       selectedId,
       status: "done",
-      fallback: result.fallback,
       termination: result.termination,
     });
     setActiveSearchMapPins(placeSearchResultsToMapPins(items));
@@ -155,7 +161,7 @@ export function useMapPlaceSearch(mobile: boolean) {
 
   async function confirm(
     confirmation: SearchConfirmation,
-    mode: "text" | "map_recenter" = "text",
+    mode: PlaceSearchMode = "text",
   ): Promise<boolean> {
     const query = confirmation.query.trim();
     if (!query) return false;
@@ -167,10 +173,14 @@ export function useMapPlaceSearch(mobile: boolean) {
       usePlaceSearchStore.getState().scope === scopeKey &&
       useSessionStore.getState().currentRoomId === roomId &&
       searchPinWriteStillValid(epoch);
-    const mapCenter = useMapCenterStore.getState().mapCenter;
+    const { mapCenter, radiusMeters, bounds } = useMapCenterStore.getState();
+    // 「현 위치에서 검색」은 Google에 지금 화면 사각형 안만 찾게 한다(locationRestriction).
+    // 위치 우선(locationBias)으로 찾으면 화면 밖 결과가 섞여 이동 전 장소로 지도가 되돌아간다.
+    const searchArea = mode === "map_recenter" ? bounds : null;
     usePlaceSearchStore.setState({
       query,
       confirmationKind: confirmation.kind,
+      searchMode: mode,
       status: "pending",
       error: null,
       expanded: false,
@@ -186,6 +196,10 @@ export function useMapPlaceSearch(mobile: boolean) {
       const result = await confirmPlaceSearch({
         ...confirmation,
         mapCenter,
+        // 화면 검색의 반경은 버튼이 다시 뜨는 이동 거리 기준(searchSnapshot)으로만 쓴다
+        radius: searchArea
+          ? clampPlacesSearchRadiusMeters(radiusMeters ?? SEARCH_BIAS_RADIUS_METERS)
+          : SEARCH_BIAS_RADIUS_METERS,
         isCurrent,
         onResolved: (resolved) => {
           usePlaceSearchStore.setState({
@@ -204,11 +218,17 @@ export function useMapPlaceSearch(mobile: boolean) {
             zoom: useMapCenterStore.getState().zoom,
             radius: params.radius,
           });
-          const page = await fetchPlacesPageWithPhotos({
-            ...params,
-            pageSize: PLACES_SEARCH_PAGE_SIZE,
-            pageToken: undefined,
-          });
+          const page = searchArea
+            ? await fetchPlacesAreaPage({
+                query: params.query,
+                area: searchArea,
+                pageSize: PLACES_SEARCH_PAGE_SIZE,
+              })
+            : await fetchPlacesPageWithPhotos({
+                ...params,
+                pageSize: PLACES_SEARCH_PAGE_SIZE,
+                pageToken: undefined,
+              });
           return page.items;
         },
       });
@@ -220,10 +240,7 @@ export function useMapPlaceSearch(mobile: boolean) {
       usePlaceSearchStore.setState({
         status: "error",
         termination: failedTermination(confirmation),
-        error:
-          error instanceof Error
-            ? error.message
-            : "검색에 실패했어요. 다시 시도해주세요.",
+        error: searchFailureMessage(confirmation, mode, error),
       });
       return false;
     }
@@ -275,6 +292,18 @@ function toAnchor(
   };
 }
 
+// 「현 위치에서 검색」 실패는 그 버튼이 「다시 시도」로 알리므로 검색창 문구가 없다.
+// 모두검색 실패의 원문(네트워크 오류면 "Failed to fetch")은 사용자에게 뜻이 없어 한 문구로 보여 준다
+function searchFailureMessage(
+  confirmation: SearchConfirmation,
+  mode: PlaceSearchMode,
+  error: unknown,
+) {
+  if (mode === "map_recenter") return null;
+  if (confirmation.kind === "whole") return "검색에 실패했어요.";
+  return error instanceof Error ? error.message : "검색에 실패했어요. 다시 시도해주세요.";
+}
+
 function failedTermination(confirmation: SearchConfirmation) {
   const termination = usePlaceSearchStore.getState().termination;
   if (termination === "SUCCEEDED" || termination === "NOT_TERMINATED") return termination;
diff --git a/src/components/map/usePlacesSearchHereVisible.ts b/src/components/map/usePlacesSearchHereVisible.ts
index b57ea784..7bafd5c0 100644
--- a/src/components/map/usePlacesSearchHereVisible.ts
+++ b/src/components/map/usePlacesSearchHereVisible.ts
@@ -2,20 +2,38 @@
 
 import { shouldSuggestPlacesSearchRecenter } from "@/lib/maps";
 import { useMapCenterStore } from "@/stores/map-center-store";
+import { usePlaceSearchStore } from "@/stores/place-search-store";
 import type { DiscoverMapSnapshot } from "@/stores/search-recenter-store";
 import { useSearchRecenterStore } from "@/stores/search-recenter-store";
 import type { MapCenterCoords } from "@/stores/map-center-store";
 
 type UsePlacesSearchHereVisibleParams = {
   discoverCategoryId: string | null;
+  /** 카테고리 검색(MapDiscoverPlaces)이 실패함 */
+  discoverFailed: boolean;
 };
 
+/** 「현 위치에서 검색」 결과를 버튼 자리에서 알린다: 실패는 「다시 시도」, 결과 0개는 「검색 결과가 없어요」 */
+export type SearchRecenterNotice = "failed" | "empty";
+
 export type PlacesSearchHereVisibility = {
   visible: boolean;
   suggestSearchRecenter: boolean;
+  searchRecenterNotice: SearchRecenterNotice | null;
   suggestDiscoverRecenter: boolean;
+  /** 실패한 카테고리 검색을 같은 화면에서 다시 시도 */
+  retryDiscoverRecenter: boolean;
 };
 
+function searchRecenterNoticeOf(
+  status: "idle" | "pending" | "done" | "error",
+  hasResults: boolean,
+): SearchRecenterNotice | null {
+  if (status === "error") return "failed";
+  if (status === "done" && !hasResults) return "empty";
+  return null;
+}
+
 function chipsDiscoverRecenterEligible(
   discoverCategoryId: string | null,
   discoverSnapshot: DiscoverMapSnapshot | null,
@@ -45,21 +63,27 @@ function chipsDiscoverRecenterEligible(
  */
 export function usePlacesSearchHereVisible({
   discoverCategoryId,
+  discoverFailed,
 }: UsePlacesSearchHereVisibleParams): PlacesSearchHereVisibility {
   const mapCenter = useMapCenterStore((s) => s.mapCenter);
   const zoom = useMapCenterStore((s) => s.zoom);
   const searchSnapshot = useSearchRecenterStore((s) => s.searchSnapshot);
   const discoverSnapshot = useSearchRecenterStore((s) => s.discoverSnapshot);
+  const searchMode = usePlaceSearchStore((s) => s.searchMode);
+  const searchStatus = usePlaceSearchStore((s) => s.status);
+  const hasResults = usePlaceSearchStore((s) => s.items.length > 0);
 
   if (!mapCenter) {
     return {
       visible: false,
       suggestSearchRecenter: false,
+      searchRecenterNotice: null,
       suggestDiscoverRecenter: false,
+      retryDiscoverRecenter: false,
     };
   }
 
-  const suggestSearchRecenter =
+  const movedFromSearch =
     searchSnapshot != null
     && shouldSuggestPlacesSearchRecenter({
       mapCenter,
@@ -68,17 +92,30 @@ export function usePlacesSearchHereVisible({
       zoom,
       snapshotZoom: searchSnapshot.zoom,
     });
+  // 실패·결과 없음은 검색한 그 화면에서만 알린다. 지도를 옮기면 새 화면 검색이라 「현 위치에서 검색」으로 돌아간다
+  const searchRecenterNotice =
+    movedFromSearch || searchMode !== "map_recenter"
+      ? null
+      : searchRecenterNoticeOf(searchStatus, hasResults);
+  const suggestSearchRecenter =
+    movedFromSearch || searchRecenterNotice === "failed";
 
-  const suggestDiscoverRecenter = chipsDiscoverRecenterEligible(
+  const movedFromDiscover = chipsDiscoverRecenterEligible(
     discoverCategoryId,
     discoverSnapshot,
     mapCenter,
     zoom,
   );
+  // 카테고리 검색이 실패하면 그 화면에서 「다시 시도」, 지도를 옮기면 새 화면 검색이라 「현 위치에서 검색」
+  const retryDiscoverRecenter =
+    discoverFailed && discoverSnapshot != null && !movedFromDiscover;
+  const suggestDiscoverRecenter = movedFromDiscover || retryDiscoverRecenter;
 
   return {
     visible: suggestSearchRecenter || suggestDiscoverRecenter,
     suggestSearchRecenter,
+    searchRecenterNotice,
     suggestDiscoverRecenter,
+    retryDiscoverRecenter,
   };
 }
diff --git a/src/components/mobile/BottomSheetDragHandle.tsx b/src/components/mobile/BottomSheetDragHandle.tsx
deleted file mode 100644
index e31f4b30..00000000
--- a/src/components/mobile/BottomSheetDragHandle.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-"use client";
-import type { ReactNode } from "react";
-import { cn } from "@/lib/utils";
-import type { useSheetDrag } from "./useSheetDrag";
-
-/** Shared gesture surface; form controls and the scrolling body stay outside it. */
-export function BottomSheetDragHandle({ drag, className, children }: Readonly<{
-  drag: ReturnType<typeof useSheetDrag>;
-  className?: string;
-  children: ReactNode;
-}>) {
-  return <div {...drag.handleProps} className={cn(drag.handleClassName, className)}>{children}</div>;
-}
diff --git a/src/components/mobile/MobileBottomSheet.test.tsx b/src/components/mobile/MobileBottomSheet.test.tsx
deleted file mode 100644
index 2d4fd86c..00000000
--- a/src/components/mobile/MobileBottomSheet.test.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// @vitest-environment jsdom
-import { act } from 'react';
-import { createRoot } from 'react-dom/client';
-import { afterEach, expect, it, vi } from 'vitest';
-import { MobileBottomSheet } from './MobileBottomSheet';
-
-afterEach(() => vi.unstubAllGlobals());
-it('dismisses by dragging the header, preserves controls and blocks dismissal while saving', () => {
- vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT',true);
- HTMLElement.prototype.setPointerCapture=vi.fn();
- HTMLElement.prototype.hasPointerCapture=()=>true;
- HTMLElement.prototype.releasePointerCapture=vi.fn();
- const host=document.createElement('div');const root=createRoot(host);const close=vi.fn();
- const render=(disabled=false,open=true)=>root.render(<MobileBottomSheet open={open} onClose={close} closeDisabled={disabled} title="일정 관리"><input aria-label="메모"/></MobileBottomSheet>);
- const pointer=(target:Element,type:string,y:number)=>{const event=new Event(type,{bubbles:true});Object.assign(event,{pointerId:1,isPrimary:true,button:0,clientX:20,clientY:y});act(()=>target.dispatchEvent(event));};
- const drag=(target:Element,end='pointerup')=>{pointer(target,'pointerdown',20);pointer(target,'pointermove',150);pointer(target,end,150);};
- try {
-  act(()=>render());
-  drag(document.querySelector('h2')!);
-  expect(close).toHaveBeenCalledTimes(1);
-  close.mockClear();
-  drag(document.querySelector('h2')!,'pointercancel');
-  expect(close).not.toHaveBeenCalled();
-  drag(document.querySelector('input')!);
-  expect(close).not.toHaveBeenCalled();
-  act(()=>render(true));drag(document.querySelector('h2')!);
-  expect(close).not.toHaveBeenCalled();
-  act(()=>render(false));pointer(document.querySelector('h2')!,'pointerdown',20);pointer(document.querySelector('h2')!,'pointermove',150);
-  act(()=>render(false,false));act(()=>render());
-  expect(document.querySelector('dialog')?.style.transform).toBe('');
- } finally {act(()=>root.unmount());host.remove();}
-});
diff --git a/src/components/mobile/MobileBottomSheet.tsx b/src/components/mobile/MobileBottomSheet.tsx
deleted file mode 100644
index 34d82f69..00000000
--- a/src/components/mobile/MobileBottomSheet.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-"use client";
-
-import { useEffect, useId, type ReactNode } from "react";
-import { createPortal } from "react-dom";
-
-import { CloseIcon, type IconProps } from "@/assets/icons";
-import { useSheetDrag } from "./useSheetDrag";
-import { BottomSheetDragHandle } from "./BottomSheetDragHandle";
-import { cn } from "@/lib/utils";
-
-type MobileBottomSheetProps = Readonly<{
-  open: boolean;
-  onClose: () => void;
-  title: string;
-  /** 제목 아래 보조 문구 — 예: 장소명 */
-  subtitle?: string;
-  /** `menu`: 항목 목록(제목 20px, 간격 8px) / `form`: 입력 폼(제목 18px, 간격 16px) */
-  variant?: "menu" | "form";
-  /** 저장 중 등 닫기를 막아야 할 때 */
-  closeDisabled?: boolean;
-  children: ReactNode;
-}>;
-
-/** 모바일 하단 시트 — 딤 배경, 핸들, 제목·닫기 줄로 구성된다 */
-export function MobileBottomSheet(props: MobileBottomSheetProps) {
-  if (!props.open || typeof document === "undefined") return null;
-  return <MobileBottomSheetContent {...props} />;
-}
-
-function MobileBottomSheetContent({
-  open,
-  onClose,
-  title,
-  subtitle,
-  variant = "menu",
-  closeDisabled = false,
-  children,
-}: MobileBottomSheetProps) {
-  const titleId = useId();
-  const drag = useSheetDrag(onClose, closeDisabled, false);
-
-  useEffect(() => {
-    if (!open) return;
-    function onKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape" && !closeDisabled) onClose();
-    }
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [closeDisabled, onClose, open]);
-
-  if (!open || typeof document === "undefined") return null;
-
-  return createPortal(
-    <div className="fixed inset-0 z-[70] flex flex-col justify-end">
-      <div
-        aria-hidden
-        className="absolute inset-0 animate-in fade-in-0 bg-[rgba(15,23,36,0.35)] duration-200"
-        onClick={() => {
-          if (!closeDisabled) onClose();
-        }}
-      />
-      <dialog
-        open
-        style={drag.surfaceStyle}
-        aria-modal="true"
-        aria-labelledby={titleId}
-        className={cn(
-          "relative m-0 flex w-full max-h-[90dvh] max-w-none flex-col overflow-hidden rounded-t-[20px] border-0 bg-fill-elevate p-5 pt-3 pb-[max(20px,env(safe-area-inset-bottom))] animate-in slide-in-from-bottom duration-200",
-          variant === "menu" ? "gap-2" : "gap-4",
-        )}
-      >
-        <BottomSheetDragHandle drag={drag} className={cn("touch-none select-none cursor-grab", variant === "menu" ? "space-y-2" : "space-y-4")}>
-        {/* 핸들 위·아래 12px, 그 아래 제목 줄(Figma) — 닫기 버튼 터치 영역(44)은 위아래로 겹쳐 제목 줄 높이를 키우지 않는다 */}
-        <div aria-hidden className="mb-3 flex shrink-0 justify-center">
-          <span className="h-1 w-9 rounded-[2px] bg-border-subtle" />
-        </div>
-        <div className="flex shrink-0 items-center">
-          <h2
-            id={titleId}
-            className={cn(
-              "min-w-0 flex-1 truncate text-text",
-              variant === "menu" ? "text-title-m" : "text-title-s",
-            )}
-          >
-            {title}
-          </h2>
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={closeDisabled}
-            aria-label="닫기"
-            className="-my-2.5 -mr-2.5 flex size-11 shrink-0 items-center justify-center disabled:opacity-40"
-          >
-            <CloseIcon className="text-icon" />
-          </button>
-        </div>
-        {subtitle ? (
-          <p className="shrink-0 truncate text-caption-m-regular text-text-subtle">{subtitle}</p>
-        ) : null}
-        </BottomSheetDragHandle>
-        <div className={cn("-m-1 flex min-h-0 flex-col overflow-y-auto overscroll-contain p-1", variant === "menu" ? "gap-2" : "gap-4")}>{children}</div>
-      </dialog>
-    </div>,
-    document.body,
-  );
-}
-
-type MobileSheetMenuItemProps = Readonly<{
-  icon: (props: IconProps) => ReactNode;
-  label: string;
-  onClick: () => void;
-  /** 삭제 등 위험한 동작 */
-  danger?: boolean;
-  disabled?: boolean;
-  /** 오른쪽에 붙는 보조 내용 — 예: 비용 합계 */
-  trailing?: ReactNode;
-}>;
-
-/** 바텀시트 메뉴 한 줄 — 아이콘 20px + 라벨 */
-export function MobileSheetMenuItem({
-  icon: Icon,
-  label,
-  onClick,
-  danger = false,
-  disabled = false,
-  trailing,
-}: MobileSheetMenuItemProps) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className="flex h-11 w-full shrink-0 items-center gap-3 text-left disabled:opacity-40"
-    >
-      <Icon size={20} className={danger ? "text-status-negative" : "text-icon"} />
-      <span
-        className={cn(
-          "shrink-0 text-body-m-regular",
-          danger ? "text-status-negative" : "text-text",
-        )}
-      >
-        {label}
-      </span>
-      {trailing ? (
-        <span className="ml-auto min-w-0 truncate pl-3 text-right">{trailing}</span>
-      ) : null}
-    </button>
-  );
-}
diff --git a/src/components/mobile/useSheetDrag.ts b/src/components/mobile/useSheetDrag.ts
deleted file mode 100644
index f2952043..00000000
--- a/src/components/mobile/useSheetDrag.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client";
-
-import { SHEET_DISMISS_DISTANCE } from "./sheet-gesture";
-import { useRef, useState, type CSSProperties, type PointerEvent } from "react";
-
-/**
- * Keep dragging on the fixed header so scrolling and form controls remain native.
- * 바텀시트는 모바일 기기에서만 쓰므로 화면 폭과 관계없이 `is-mobile-device`일 때만 끈다. 모바일 전용 시트는 `mobileOnly=false`.
- */
-export function useSheetDrag(onClose: () => void, disabled = false, mobileOnly = true) {
-  const gesture = useRef<{ id: number; x: number; y: number; distance: number } | null>(null);
-  const [offset, setOffset] = useState(0);
-  const [dragging, setDragging] = useState(false);
-  const [hasDragged, setHasDragged] = useState(false);
-  const [reduceMotion, setReduceMotion] = useState(false);
-  function finish(event: PointerEvent<HTMLElement>, cancelled: boolean) {
-    const current = gesture.current;
-    if (!current || current.id !== event.pointerId) return;
-    gesture.current = null;
-    setOffset(0);
-    setDragging(false);
-    if (event.currentTarget.hasPointerCapture?.(event.pointerId))
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    if (!cancelled && !disabled && current.distance >= SHEET_DISMISS_DISTANCE) onClose();
-  }
-  return {
-    surfaceStyle: {
-      transform: !disabled && offset > 0 ? `translateY(${offset}px)` : undefined,
-      transition: dragging || reduceMotion ? "none" : "transform 180ms ease-out",
-      animation: hasDragged ? "none" : undefined,
-    } satisfies CSSProperties,
-    handleProps: {
-      onPointerDown(event: PointerEvent<HTMLElement>) {
-        if (disabled || !event.isPrimary || event.button !== 0 || gesture.current) return;
-        if (mobileOnly && !document.documentElement.classList.contains("is-mobile-device")) return;
-        if ((event.target as Element).closest("button, input, textarea, select, a, [role='button'], [contenteditable='true']")) return;
-        gesture.current = { id: event.pointerId, x: event.clientX, y: event.clientY, distance: 0 };
-        event.currentTarget.setPointerCapture(event.pointerId);
-        setHasDragged(true);
-        setReduceMotion(Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches));
-        setDragging(true);
-      },
-      onPointerMove(event: PointerEvent<HTMLElement>) {
-        const current = gesture.current;
-        if (!current || current.id !== event.pointerId) return;
-        if (disabled) { finish(event, true); return; }
-        const distance = event.clientY - current.y;
-        if (Math.abs(event.clientX - current.x) > Math.max(12, Math.abs(distance))) {
-          finish(event, true);
-          return;
-        }
-        current.distance = Math.max(0, distance);
-        setOffset(current.distance);
-      },
-      onPointerUp(event: PointerEvent<HTMLElement>) { finish(event, false); },
-      onPointerCancel(event: PointerEvent<HTMLElement>) { finish(event, true); },
-      onLostPointerCapture(event: PointerEvent<HTMLElement>) { finish(event, true); },
-    },
-    handleClassName: `shrink-0 mobile:touch-none mobile:select-none ${dragging ? "mobile:cursor-grabbing" : "mobile:cursor-grab"}`,
-  };
-}
diff --git a/src/components/packing/PackingPage.dialog.test.tsx b/src/components/packing/PackingPage.dialog.test.tsx
index 831599ed..b4a00e37 100644
--- a/src/components/packing/PackingPage.dialog.test.tsx
+++ b/src/components/packing/PackingPage.dialog.test.tsx
@@ -6,25 +6,39 @@ import {PackingPage} from './PackingPage';
 const mocks=vi.hoisted(()=>({context:null as unknown}));
 vi.mock('@/hooks/usePackingList',()=>({usePackingList:()=>mocks.context}));
 afterEach(()=>{document.body.replaceChildren();vi.unstubAllGlobals();});
-it('traps category dialog focus, closes with Escape, and restores its opener',async()=>{
+// Base UI는 첫 포커스·포커스 복귀를 다음 프레임에, 닫힘 정리(언마운트)를 애니메이션 확인 뒤에 한다
+const settle=()=>act(async()=>{await new Promise(resolve=>requestAnimationFrame(()=>resolve(null)));await new Promise(resolve=>setTimeout(resolve,0));});
+const escape=(target:EventTarget=document)=>act(async()=>{target.dispatchEvent(new KeyboardEvent('keydown',{key:'Escape',bubbles:true,cancelable:true}));});
+function accessibleName(node:Element){
+  const labelledBy=node.getAttribute('aria-labelledby');
+  if(labelledBy) return labelledBy.split(' ').map(id=>document.getElementById(id)?.textContent ?? '').join(' ');
+  return node.getAttribute('aria-label') ?? node.textContent ?? '';
+}
+const buttonIn=(scope:ParentNode,name:string)=>Array.from(scope.querySelectorAll<HTMLButtonElement>('button')).find(node=>accessibleName(node)===name)!;
+const openDialog=()=>document.querySelector<HTMLElement>('[role="dialog"][data-open]');
+const openAlert=()=>document.querySelector<HTMLElement>('[role="alertdialog"][data-open]');
+const deleteState=(status='ready')=>({data:{id:1,roomId:'room',ownerUserId:1,version:1,initializedAt:'2026-01-01T00:00:00Z',parts:[{id:1,name:'여권·예약·결제',column:0,position:0,items:[{id:11,partId:1,name:'여권',checked:false,position:0,memo:null,tips:[]}]}]},status,message:null,confirmation:{kind:'item',id:11,version:1,name:'여권'} as {kind:'item';id:number;version:number;name:string}|null});
+it('opens the category dialog as a modal, closes with Escape, and restores its opener',async()=>{
   vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT',true);
   mocks.context={scopeKey:'room:user',state:{data:{id:1,roomId:'room',ownerUserId:1,version:1,initializedAt:'2026-01-01T00:00:00Z',parts:[]},status:'ready',message:null,confirmation:null},coordinator:{execute:vi.fn(),prepareDelete:vi.fn(),refresh:vi.fn()}};
   const main=document.createElement('main');document.body.append(main);const root=createRoot(main);
   try{
     await act(async()=>root.render(<PackingPage/>));
-    const opener=main.querySelector<HTMLButtonElement>('button')!;opener.focus();
+    const opener=main.querySelector<HTMLButtonElement>('[aria-label="카테고리 추가"]')!;opener.focus();
     await act(async()=>opener.click());
-    const dialog=document.querySelector('dialog')!;
-    expect(dialog.getAttribute('aria-modal')).toBe('true');
-    expect(main.hasAttribute('inert')).toBe(true);
-    const controls=Array.from(dialog.querySelectorAll<HTMLElement>('button,input'));
-    expect(document.activeElement).toBe(controls[0]);
-    controls.at(-1)!.focus();
-    const tab=new KeyboardEvent('keydown',{key:'Tab',bubbles:true,cancelable:true});document.dispatchEvent(tab);
-    expect(tab.defaultPrevented).toBe(true);expect(document.activeElement).toBe(controls[0]);
-    await act(async()=>document.dispatchEvent(new KeyboardEvent('keydown',{key:'Escape',bubbles:true,cancelable:true})));
-    expect(document.querySelector('dialog')).toBeNull();
-    expect(main.hasAttribute('inert')).toBe(false);
+    await settle();
+    const dialog=openDialog()!;
+    expect(dialog).not.toBeNull();
+    expect(accessibleName(dialog)).toBe('카테고리 추가');
+    // 바깥 페이지는 Base UI가 aria-hidden으로 가리고, 첫 포커스는 첫 입력 칸이다
+    expect(main.getAttribute('aria-hidden')).toBe('true');
+    expect(document.activeElement).toBe(dialog.querySelector('input[aria-label="카테고리 이름"]'));
+    // 닫기 X는 없다(취소·추가만)
+    expect(Array.from(dialog.querySelectorAll('button')).map(accessibleName)).toEqual(['취소','추가']);
+    await escape();
+    await settle();
+    expect(openDialog()).toBeNull();
+    expect(main.hasAttribute('aria-hidden')).toBe(false);
     expect(document.activeElement).toBe(opener);
   }finally{await act(async()=>root.unmount());}
 });
@@ -32,18 +46,28 @@ it('returns focus to the category menu trigger after closing a menu dialog',asyn
   vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT',true);
   mocks.context={scopeKey:'room:user',state:{data:{id:1,roomId:'room',ownerUserId:1,version:1,initializedAt:'2026-01-01T00:00:00Z',parts:[{id:1,name:'여권·예약·결제',column:0,position:0,items:[]}]},status:'ready',message:null,confirmation:null},coordinator:{execute:vi.fn(),prepareDelete:vi.fn(),refresh:vi.fn()}};
   const main=document.createElement('main');document.body.append(main);const root=createRoot(main);
+  const menu=()=>document.querySelector<HTMLElement>('[role="menu"]');
+  const rename=()=>document.querySelector<HTMLElement>('[role="menuitem"][aria-label="카테고리 이름 수정"]')!;
   try{
     await act(async()=>root.render(<PackingPage/>));
     const trigger=main.querySelector<HTMLButtonElement>('[aria-label="카테고리 메뉴: 여권·예약·결제"]')!;
+    trigger.focus();
     await act(async()=>trigger.click());
-    let rename=main.querySelector<HTMLButtonElement>('[role="menuitem"]:nth-child(2)')!;
-    rename.focus();await act(async()=>rename.dispatchEvent(new KeyboardEvent('keydown',{key:'Escape',bubbles:true,cancelable:true})));
-    expect(main.querySelector('[role="menu"]')).toBeNull();expect(document.activeElement).toBe(trigger);
+    await settle();
+    expect(Array.from(document.querySelectorAll('[role="menuitem"]')).map(node=>node.getAttribute('aria-label'))).toEqual(['준비물 추가','카테고리 이름 수정','카테고리 삭제']);
+    rename().focus();await escape(rename());
+    await settle();
+    expect(menu()).toBeNull();expect(document.activeElement).toBe(trigger);
     await act(async()=>trigger.click());
-    rename=main.querySelector<HTMLButtonElement>('[role="menuitem"]:nth-child(2)')!;
-    rename.focus();await act(async()=>rename.click());
-    expect(document.querySelector('dialog')).not.toBeNull();
-    await act(async()=>document.dispatchEvent(new KeyboardEvent('keydown',{key:'Escape',bubbles:true,cancelable:true})));
+    await settle();
+    rename().focus();await act(async()=>rename().click());
+    await settle();
+    expect(openDialog()).not.toBeNull();
+    expect(menu()).toBeNull();
+    expect((openDialog()!.querySelector('input[aria-label="카테고리 이름"]') as HTMLInputElement).value).toBe('여권·예약·결제');
+    await escape();
+    await settle();
+    expect(openDialog()).toBeNull();
     expect(document.activeElement).toBe(trigger);
   }finally{await act(async()=>root.unmount());}
 });
@@ -52,18 +76,40 @@ it('does not cancel a delete confirmation after its request has started',async()
   let finish!:(value:{kind:string})=>void;
   const confirmDelete=vi.fn(()=>new Promise<{kind:string}>(resolve=>{finish=resolve;}));
   const cancelConfirmation=vi.fn();
-  const state={data:{id:1,roomId:'room',ownerUserId:1,version:1,initializedAt:'2026-01-01T00:00:00Z',parts:[{id:1,name:'여권·예약·결제',column:0,position:0,items:[{id:11,partId:1,name:'여권',checked:false,position:0,memo:null,tips:[]}]}]},status:'ready',message:null,confirmation:{kind:'item',id:11,version:1,name:'여권'} as {kind:'item';id:number;version:number;name:string}|null};
+  const state=deleteState();
   mocks.context={scopeKey:'room:user',state,coordinator:{execute:vi.fn(),prepareDelete:vi.fn(),confirmDelete,cancelConfirmation,refresh:vi.fn()}};
   const main=document.createElement('main');document.body.append(main);const root=createRoot(main);
   try{
     await act(async()=>root.render(<PackingPage/>));
-    const dialog=document.querySelector('dialog')!;
-    const action=Array.from(dialog.querySelectorAll('button')).find(button=>button.textContent==='삭제')!;
-    await act(async()=>action.click());
-    const cancel=Array.from(dialog.querySelectorAll('button')).find(button=>button.textContent==='취소')!;
-    expect(cancel.disabled).toBe(true);
-    await act(async()=>document.dispatchEvent(new KeyboardEvent('keydown',{key:'Escape',bubbles:true,cancelable:true})));
+    const dialog=openAlert()!;
+    expect(dialog.textContent).toContain('준비물을 삭제할까요?');
+    await act(async()=>buttonIn(dialog,'삭제').click());
+    expect(confirmDelete).toHaveBeenCalledOnce();
+    // 삭제 중: 확인 버튼은 progress, 취소는 비활성, Esc·딤으로 닫히지 않는다
+    expect(buttonIn(dialog,'처리 중').getAttribute('aria-busy')).toBe('true');
+    expect(buttonIn(dialog,'취소').disabled).toBe(true);
+    await escape();
+    await act(async()=>buttonIn(document,'준비물을 삭제할까요? 배경 닫기').click());
     expect(cancelConfirmation).not.toHaveBeenCalled();
+    expect(openAlert()).not.toBeNull();
     await act(async()=>{finish({kind:'success'});state.confirmation=null;root.render(<PackingPage/>);});
   }finally{await act(async()=>root.unmount());}
 });
+it.each(['writing','sync-error'])('disables the delete confirmation while the list status is %s',async status=>{
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT',true);
+  const confirmDelete=vi.fn();
+  const cancelConfirmation=vi.fn();
+  mocks.context={scopeKey:'room:user',state:deleteState(status),coordinator:{execute:vi.fn(),prepareDelete:vi.fn(),confirmDelete,cancelConfirmation,refresh:vi.fn()}};
+  const main=document.createElement('main');document.body.append(main);const root=createRoot(main);
+  try{
+    await act(async()=>root.render(<PackingPage/>));
+    const dialog=openAlert()!;
+    const action=buttonIn(dialog,'삭제');
+    expect(action.disabled).toBe(true);
+    await act(async()=>action.click());
+    expect(confirmDelete).not.toHaveBeenCalled();
+    // 취소는 그대로 된다
+    await act(async()=>buttonIn(dialog,'취소').click());
+    expect(cancelConfirmation).toHaveBeenCalledOnce();
+  }finally{await act(async()=>root.unmount());}
+});
diff --git a/src/components/packing/PackingPage.module.css b/src/components/packing/PackingPage.module.css
index 2f716b7a..8c21ee0a 100644
--- a/src/components/packing/PackingPage.module.css
+++ b/src/components/packing/PackingPage.module.css
@@ -8,9 +8,9 @@
   color:var(--color-text-default);
   letter-spacing:-0.02em;
 }
-.page button:enabled,.dialogActions button:enabled {cursor:pointer}
-.page button:disabled,.dialogActions button:disabled {cursor:not-allowed;opacity:0.5}
-.page button:focus-visible,.page textarea:focus-visible,.page input:focus-visible,.dialog button:focus-visible,.dialog input:focus-visible {outline:2px solid var(--color-primary-default);outline-offset:2px}
+/* ui Button(data-slot="button")은 커서·포커스를 스스로 그린다 */
+.page button:not([data-slot="button"]):enabled {cursor:pointer}
+.page button:not([data-slot="button"]):focus-visible {outline:2px solid var(--color-primary-default);outline-offset:2px}
 .icon {position:relative;display:inline-block;flex:none;vertical-align:middle;pointer-events:none}
 .icon img {display:block;max-width:none;transform-origin:top left}
 .boardPane {flex:1;min-width:0;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--color-border-default) transparent}
@@ -22,7 +22,7 @@
 .progress strong {color:var(--color-primary-default);font-weight:700}
 .addCategory {grid-column:2;grid-row:1 / 3;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:152px;min-height:36px;border-radius:8px;background:var(--color-primary-default);padding:8px 10px;color:var(--color-text-inverse);font-size:14px;line-height:20px;font-weight:700;white-space:nowrap}
 .addCategory span:last-child {padding:0 6px}
-.addCategory:enabled:hover,.primary:enabled:hover {background:var(--color-primary-strong)}
+.addCategory:enabled:hover {background:var(--color-primary-strong)}
 .columns {display:flex;align-items:flex-start;gap:20px;overflow-x:auto;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--color-border-default) transparent}
 .part {position:relative;display:flex;flex:0 0 324px;flex-direction:column;gap:12px;min-width:0;border-radius:12px;background:var(--color-fill-default);padding:12px}
 .partHeader {position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:36px}
@@ -31,19 +31,14 @@
 .partProgress {flex:none;font-size:12px;line-height:16px;color:var(--color-text-subtle)}
 .menuTrigger {display:flex;flex:none;align-items:center;justify-content:center;width:20px;height:36px;margin-left:auto;border-radius:4px}
 .menuTrigger:hover,.iconButton:hover {background:var(--color-fill-strong)}
-.menu {position:absolute;z-index:20;top:100%;right:0;width:220px;overflow:hidden;border:1px solid var(--color-border-subtle);border-radius:8px;background:var(--color-fill-elevate, #fff);box-shadow:0 2px 10px #0000001a}
-.menu button {display:flex;align-items:center;gap:10px;width:100%;min-height:44px;border-bottom:0.5px solid var(--color-border-subtle);padding:0 14px;text-align:left;font-size:14px;line-height:20px;font-weight:700;white-space:nowrap}
-.menu button:last-child {border-bottom:0}
-.menu button:hover,.menu button:focus-visible {background:var(--color-fill-default)}
-.menuDanger {color:var(--color-status-negative)}
+/* 카테고리 메뉴 폭(지금 값). 표면·항목 모양은 ui DropdownMenu */
+.menuContent {width:220px}
 .items {display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
 .item {position:relative;min-width:0;border:1px solid var(--color-border-subtle);border-radius:8px;background:var(--color-fill-elevate, #fff)}
 .item:hover {border-color:var(--color-border-default)}
 .item[data-selected="true"] {border-color:var(--color-primary-default);background:var(--color-primary-subtle)}
 .checkbox {position:relative;display:flex;flex:none;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer}
-.checkbox input {position:absolute;z-index:1;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
-.checkbox input:disabled {cursor:not-allowed}
-.checkbox input:focus-visible+.icon {outline:2px solid var(--color-primary-default);outline-offset:2px;border-radius:4px}
+.checkbox:has([aria-disabled="true"]) {cursor:not-allowed}
 .item>.checkbox {position:absolute;z-index:1;top:18px;left:16px}
 .itemSelect {display:block;width:100%;min-width:0;border-radius:inherit;padding:16px;text-align:left}
 .itemSelect strong {display:flex;align-items:center;min-height:28px;margin-left:32px;overflow-wrap:anywhere;font-size:16px;line-height:22px;font-weight:500}
@@ -55,46 +50,25 @@
 .detail {position:relative;display:flex;flex:0 0 440px;flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--color-border-subtle);background:var(--color-fill-default)}
 .detail[hidden] {display:none}
 .detailScroll {display:flex;flex:1;flex-direction:column;gap:24px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 32px 32px;scrollbar-width:thin}
-.detailDragHeader {padding:32px 32px 24px}
-.detailBackdrop,.sheetHandle {display:none}
+.detailTop {padding:32px 32px 24px}
 .detailHeader {display:flex;align-items:center;gap:12px;min-height:40px}
-.detailHeader h2 {min-width:0;flex:1;overflow-wrap:anywhere;font-size:24px;line-height:34px;font-weight:700}
+.detailTitle {min-width:0;flex:1;overflow-wrap:anywhere;font-size:24px;line-height:34px;font-weight:700}
 .detailActions {display:flex;flex:none;gap:4px}
-.iconButton {display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:8px}
+/* 모바일 시트는 .page 밖(포털)이라 커서·포커스를 여기서도 준다 */
+.iconButton {display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:8px;cursor:pointer}
+.iconButton:focus-visible {outline:2px solid var(--color-primary-default);outline-offset:2px}
 .collapseDetail {position:absolute;top:337px;left:-1px;display:flex;align-items:center;justify-content:center;width:20px;height:104px;background:var(--color-icon-subtle)}
 .collapseDetail:hover {background:var(--color-icon-default)}
 .memoPanel {min-width:0}
 .sectionTitle {display:block;margin:0 0 12px;font-size:14px;line-height:20px;font-weight:700}
-.memoField {display:block;width:100%;height:96px;min-height:96px;resize:none;border:1px solid var(--color-border-default);border-radius:8px;background:var(--color-fill-subtle);padding:12px 14px;font-size:16px;line-height:24px;overflow-wrap:anywhere}
-.memoField::placeholder {color:var(--color-text-subtle)}
-.memoFooter {height:16px;margin-top:4px;text-align:right;color:var(--color-text-subtle);font-size:11px;line-height:16px}
-.dialogActions {display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
-.actionButton {display:inline-flex;align-items:center;justify-content:center;min-width:80px;height:36px;border:1px solid var(--color-border-default);border-radius:8px;background:var(--color-fill-subtle);padding:8px 16px;color:var(--color-text-default);font-size:14px;line-height:20px;font-weight:700;white-space:nowrap}
-/* 다른 항목의 저장을 기다리는 잠금은 버튼의 명도를 바꾸지 않는다. */
-.actionButton:disabled[data-waiting="true"] {opacity:1;cursor:wait}
-.actionButton:not(.primary):not(.danger):enabled:hover {background:var(--color-fill-default)}
-.primary {border-color:transparent;background:var(--color-primary-default);color:var(--color-text-inverse)}
-.danger {border-color:transparent;background:var(--color-status-negative);color:var(--color-text-inverse)}
-.danger:enabled:hover {filter:brightness(0.94)}
-.memoActions {height:40px;margin-top:12px}
-.memoActions .actionButton {min-width:72px}
+.memoActions {display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
 .tips {border-top:1px solid var(--color-border-subtle);padding-top:24px}
 .tipCard {border-radius:8px;background:var(--color-fill-elevate, #fff);padding:16px;font-size:14px;line-height:20px}
 .tipCard h4 {margin-bottom:16px;font-weight:700;overflow-wrap:anywhere}
 .tipCard ul {display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
 .tipCard li {color:var(--color-text-subtle);overflow-wrap:anywhere}
-.fieldLabel {display:block;font-size:12px;line-height:16px;font-weight:500}
-.field {display:block;width:100%;height:48px;margin-top:4px;border:1px solid var(--color-border-default);border-radius:8px;background:var(--color-fill-subtle);padding:12px 14px;font-size:16px;line-height:24px;font-weight:400}
-.error {margin-top:8px;color:var(--color-status-negative);font-size:12px;line-height:18px}
-.deleteCopy {margin:0;color:var(--color-text-subtle);font-size:16px;line-height:24px;overflow-wrap:anywhere}
-.alert {margin-bottom:16px;border:1px solid var(--color-status-cautionary);border-radius:8px;background:var(--color-fill-subtle);padding:12px;font-size:14px;line-height:20px}
-.alert button {margin-left:8px;text-decoration:underline}
-.dialogOverlay {padding:20px;background:#00000059;backdrop-filter:none}
-.dialog {max-width:448px;border-radius:12px;background:var(--color-fill-elevate, #fff);padding:32px;color:var(--color-text-default);letter-spacing:-0.02em;scrollbar-gutter:auto;box-shadow:0 4px 8px #0000001f}
-.dialog>div:first-child {margin-bottom:24px}
-.dialog h2 {font-size:18px;line-height:26px;font-weight:700}
 
-/* 좁은 화면의 페이지 배치 — 상세 바텀시트는 화면 폭과 관계없이 모바일 기기에서만(아래 .is-mobile-device) */
+/* 좁은 화면의 페이지 배치 — 상세 바텀시트는 화면 폭과 관계없이 모바일 기기에서만(PackingPage의 useMobileView) */
 @media (max-width:700px) {
   .content {padding:20px}
   .pageHeader {grid-template-rows:44px auto;gap:8px;min-height:96px;margin-bottom:20px}
@@ -105,18 +79,13 @@
   .part {width:100%;flex:auto;gap:8px}
   .partHeader {min-height:44px}
   .menuTrigger {width:44px;height:44px}
-  .menu {width:208px;padding:4px}
-  .menu button {border:0;border-radius:4px;padding:0 10px}
+  .menuContent {width:208px}
   .items {gap:8px}
   .item>.checkbox {top:8px;left:8px;width:44px;height:44px}
   .itemSelect {padding:8px}
   .itemSelect strong {min-height:44px;margin-left:48px}
   .itemSelect small {margin-top:4px}
   .addItem {min-height:44px}
-  .dialogActions .actionButton {flex:1;height:48px;font-size:16px;line-height:22px}
-  .dialog {max-width:353px;padding:24px}
-  .dialog h2 {font-size:20px;line-height:28px}
-  .deleteCopy {font-size:14px;line-height:20px}
 }
 
 :global(.is-mobile-device) .content {padding:20px}
@@ -128,33 +97,20 @@
 :global(.is-mobile-device) .part {width:100%;flex:auto;gap:8px}
 :global(.is-mobile-device) .partHeader {min-height:44px}
 :global(.is-mobile-device) .menuTrigger {width:44px;height:44px}
-:global(.is-mobile-device) .menu {width:208px;padding:4px}
-:global(.is-mobile-device) .menu button {border:0;border-radius:4px;padding:0 10px}
+:global(.is-mobile-device) .menuContent {width:208px}
 :global(.is-mobile-device) .items {gap:8px}
 :global(.is-mobile-device) .item>.checkbox {top:8px;left:8px;width:44px;height:44px}
 :global(.is-mobile-device) .itemSelect {padding:8px}
 :global(.is-mobile-device) .itemSelect strong {min-height:44px;margin-left:48px}
 :global(.is-mobile-device) .itemSelect small {margin-top:4px}
 :global(.is-mobile-device) .addItem {min-height:44px}
-:global(.is-mobile-device) .detailBackdrop {position:fixed;z-index:190;inset:0;display:block;background:#0f172459;animation:sheetBackdropIn 200ms ease-out}
-:global(.is-mobile-device) .detail {position:fixed;z-index:200;right:0;bottom:0;left:0;width:100%;height:76.53dvh;max-height:calc(100dvh - 80px);border:0;border-radius:20px 20px 0 0;background:var(--color-fill-elevate, #fff);animation:sheetIn 200ms ease-out}
-:global(.is-mobile-device) .sheetHandle {display:block;flex:none;width:36px;height:4px;margin:12px auto 4px;border-radius:2px;background:var(--color-border-subtle)}
-:global(.is-mobile-device) .detailDragHeader {padding:0 20px 20px;touch-action:none;user-select:none}
-:global(.is-mobile-device) .detailScroll {gap:20px;padding:0 20px max(20px, env(safe-area-inset-bottom))}
 :global(.is-mobile-device) .detailHeader {gap:8px;min-height:44px}
 :global(.is-mobile-device) .detailHeader .checkbox,:global(.is-mobile-device) .iconButton {width:44px;height:44px}
-:global(.is-mobile-device) .detailHeader h2 {font-size:20px;line-height:28px}
 :global(.is-mobile-device) .detailActions {gap:8px}
-:global(.is-mobile-device) .collapseDetail {display:none}
-:global(.is-mobile-device) .memoActions {height:48px}
-:global(.is-mobile-device) .dialogActions .actionButton {flex:1;height:48px;font-size:16px;line-height:22px}
 :global(.is-mobile-device) .tips {padding-top:20px}
 :global(.is-mobile-device) .tipCard {background:var(--color-fill-default)}
 :global(.is-mobile-device) .tipCard h4 {margin-bottom:12px}
 :global(.is-mobile-device) .tipCard ul {gap:12px}
-:global(.is-mobile-device) .dialog {max-width:353px;padding:24px}
-:global(.is-mobile-device) .dialog h2 {font-size:20px;line-height:28px}
-:global(.is-mobile-device) .deleteCopy {font-size:14px;line-height:20px}
 
 /* Keep the initial loading layout aligned with the populated board. */
 .loadingAction {background:var(--color-fill-strong)}
@@ -164,7 +120,3 @@
 .loadingCheck {flex:none;width:24px;height:24px;border-radius:4px;background:var(--color-fill-strong)}
 .loadingLine {width:55%;height:16px;border-radius:4px;background:var(--color-fill-strong)}
 .loadingAdd {height:40px}
-
-/* 모바일 준비물 상세 시트 등장 — 기준 바텀시트(딤 서서히·시트 아래에서)와 같은 200ms */
-@keyframes sheetIn {from {transform:translateY(100%)}}
-@keyframes sheetBackdropIn {from {opacity:0}}
diff --git a/src/components/packing/PackingPage.test.tsx b/src/components/packing/PackingPage.test.tsx
index 897a13a9..76d181e1 100644
--- a/src/components/packing/PackingPage.test.tsx
+++ b/src/components/packing/PackingPage.test.tsx
@@ -1,233 +1,383 @@
 // @vitest-environment jsdom
-import { act, create, type ReactTestRenderer } from 'react-test-renderer';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, expect, it, vi } from 'vitest';
-import type { ReactNode } from 'react';
 import type { PackingItem } from '@/lib/packing/types';
 import { PackingPage } from './PackingPage';
 
-const mocks = vi.hoisted(() => ({context: null as unknown}));
+const mocks = vi.hoisted(() => ({context: null as unknown, mobile: false}));
 vi.mock('@/hooks/usePackingList', () => ({usePackingList: () => mocks.context}));
-vi.mock('@/components/settings/SettingsDialog', () => ({SettingsDialog: ({title, children}: {title:string; children:ReactNode}) => <dialog aria-label={title}>{children}</dialog>}));
+// PC는 오른쪽 상세 패널(aside), 모바일 기기는 아래 시트(Drawer)를 그린다
+vi.mock('@/contexts/MobileViewContext', async importOriginal => ({
+  ...await importOriginal<typeof import('@/contexts/MobileViewContext')>(),
+  useMobileView: () => ({isMobileDevice: mocks.mobile}),
+}));
 const item: PackingItem = {id:11,partId:1,name:'여권',checked:false,position:0,memo:{id:11,itemId:11,content:'기존 메모'},tips:['유효기간을 확인하세요.','사본을 준비하세요.']};
 const second: PackingItem = {id:12,partId:1,name:'항공권 예약 내역',checked:true,position:1,memo:null,tips:[]};
 const data = {id:1,roomId:'room',ownerUserId:1,version:1,initializedAt:'2026-01-01T00:00:00Z',parts:[{id:1,name:'여권·예약·결제',column:0,position:0,items:[item,second]},{id:2,name:'통신·전자기기',column:0,position:1,items:[]},{id:3,name:'옷·가방',column:1,position:2,items:[]},{id:4,name:'세면·건강',column:2,position:3,items:[]}]};
 let state: {data: typeof data|null; status:string; message:string|null; confirmation: null|{kind:'item'|'part';id:number;version:number;name:string}};
 let coordinator: {execute:ReturnType<typeof vi.fn>;prepareDelete:ReturnType<typeof vi.fn>;confirmDelete:ReturnType<typeof vi.fn>;cancelConfirmation:ReturnType<typeof vi.fn>;refresh:ReturnType<typeof vi.fn>};
-let renderer:ReactTestRenderer;
-beforeEach(()=>{vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT',true);state={data:structuredClone(data),status:'ready',message:null,confirmation:null};coordinator={execute:vi.fn().mockResolvedValue({kind:'success'}),prepareDelete:vi.fn(),confirmDelete:vi.fn(),cancelConfirmation:vi.fn(),refresh:vi.fn()};mocks.context={state,coordinator,scopeKey:'room:user'};});
-afterEach(()=>{if(renderer)act(()=>renderer.unmount());vi.unstubAllGlobals();document.documentElement.classList.remove('is-mobile-device');});
-async function mount(){await act(async()=>{renderer=create(<PackingPage/>);});}
-function button(label:string){const scope=renderer.root.findAllByType('dialog').at(-1) ?? renderer.root;return scope.findAllByType('button').find(node=>node.props['aria-label']===label || node.children.join('')===label)!;}
-async function selectFirstItem(){await act(async()=>button('준비물 선택: 여권').props.onClick());}
-function input(label:string){return renderer.root.findAllByType('input').find(node=>node.props['aria-label']===label)!;}
+let host: HTMLDivElement;
+let root: Root;
+beforeEach(()=>{
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT',true);
+  mocks.mobile=false;
+  state={data:structuredClone(data),status:'ready',message:null,confirmation:null};
+  coordinator={execute:vi.fn().mockResolvedValue({kind:'success'}),prepareDelete:vi.fn(),confirmDelete:vi.fn(),cancelConfirmation:vi.fn(),refresh:vi.fn()};
+  mocks.context={state,coordinator,scopeKey:'room:user'};
+  host=document.createElement('div');document.body.append(host);root=createRoot(host);
+});
+afterEach(async()=>{await act(async()=>root.unmount());document.body.replaceChildren();vi.unstubAllGlobals();});
+
+// Base UI는 첫 포커스·닫힘 정리를 다음 프레임 이후에 한다
+const settle=()=>act(async()=>{await new Promise(resolve=>requestAnimationFrame(()=>resolve(null)));await new Promise(resolve=>setTimeout(resolve,0));});
+async function mount(){await act(async()=>root.render(<PackingPage/>));await settle();}
+async function rerender(){await act(async()=>root.render(<PackingPage/>));await settle();}
+function accessibleName(node:Element){
+  const labelledBy=node.getAttribute('aria-labelledby');
+  if(labelledBy) return labelledBy.split(' ').map(id=>document.getElementById(id)?.textContent ?? '').join(' ');
+  return node.getAttribute('aria-label') ?? node.textContent ?? '';
+}
+const openDialogs=()=>Array.from(document.querySelectorAll<HTMLElement>('[role="dialog"][data-open],[role="alertdialog"][data-open]'));
+// 열린 대화상자·시트가 있으면 맨 위 것 안에서, 없으면 화면 전체에서 찾는다(모달 뒤 요소는 누를 수 없다)
+function button(label:string){
+  const scope:ParentNode=openDialogs().at(-1) ?? document;
+  const found=Array.from(scope.querySelectorAll<HTMLButtonElement>('button')).find(node=>accessibleName(node)===label);
+  if(!found) throw new Error(`button not found: ${label}`);
+  return found;
+}
+const menuItem=(label:string)=>document.querySelector<HTMLElement>(`[role="menuitem"][aria-label="${label}"]`)!;
+const checkbox=(label:string)=>document.querySelector<HTMLElement>(`[role="checkbox"][aria-label="${label}"]`)!;
+const input=(label:string)=>document.querySelector<HTMLInputElement>(`input[aria-label="${label}"]`);
+const memo=()=>document.querySelector<HTMLTextAreaElement>('textarea[aria-label="준비물 메모"]');
+const detail=()=>document.querySelector<HTMLElement>('aside[aria-label="준비물 상세"]')!;
+const selectedName=()=>document.querySelector('[aria-label="선택한 준비물 이름"]')!.textContent;
+const sheet=()=>document.querySelector<HTMLElement>('[role="dialog"][data-open]');
+const detailOpen=()=>mocks.mobile ? sheet()!==null : !detail().hidden;
+const text=()=>document.body.textContent ?? '';
+async function click(element:HTMLElement){await act(async()=>element.click());await settle();}
+async function type(element:HTMLInputElement|HTMLTextAreaElement,value:string){
+  const prototype=element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  await act(async()=>{
+    Object.getOwnPropertyDescriptor(prototype,'value')!.set!.call(element,value);
+    element.dispatchEvent(new Event('input',{bubbles:true}));
+  });
+}
+async function escape(target:EventTarget=document){
+  await act(async()=>{target.dispatchEvent(new KeyboardEvent('keydown',{key:'Escape',bubbles:true,cancelable:true}));});
+  await settle();
+}
+async function selectFirstItem(){await click(button('준비물 선택: 여권'));}
+async function openMenu(part:string){await click(button(`카테고리 메뉴: ${part}`));}
+function deferred(){let finish!:(value:{kind:string})=>void;coordinator.execute.mockReturnValue(new Promise(resolve=>{finish=resolve;}));return (value:{kind:string})=>act(async()=>{finish(value);await Promise.resolve();});}
+
 it('starts on the full board without selecting an item or showing detail controls', async () => {
   await mount();
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props.hidden).toBe(true);
-  expect(renderer.root.findAllByType('textarea')).toHaveLength(0);
-  expect(button('준비물 선택: 여권').props['aria-pressed']).toBe(false);
+  expect(detail().hidden).toBe(true);
+  expect(memo()).toBeNull();
+  expect(button('준비물 선택: 여권').getAttribute('aria-pressed')).toBe('false');
 });
 it('collapses the selected detail and preserves its memo draft when reopened', async () => {
   await mount();
-  await act(async () => button('준비물 선택: 여권').props.onClick());
-  await act(async () => renderer.root.findByType('textarea').props.onChange({target:{value:'작성 중인 메모'}}));
-  await act(async () => button('준비물 상세 접기').props.onClick());
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props.hidden).toBe(true);
-  await act(async () => button('준비물 선택: 여권').props.onClick());
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props.hidden).toBe(false);
-  expect(renderer.root.findByType('textarea').props.value).toBe('작성 중인 메모');
+  await selectFirstItem();
+  await type(memo()!,'작성 중인 메모');
+  await click(button('준비물 상세 접기'));
+  expect(detail().hidden).toBe(true);
+  await selectFirstItem();
+  expect(detail().hidden).toBe(false);
+  expect(memo()!.value).toBe('작성 중인 메모');
 });
 it('changes the selected item check state from the detail panel', async () => {
   await mount();
-  await act(async () => button('준비물 선택: 여권').props.onClick());
-  const detail = renderer.root.findByProps({'aria-label':'준비물 상세'});
-  const checkbox = detail.findByProps({type:'checkbox'});
-  await act(async () => checkbox.props.onChange({target:{checked:true}}));
+  await selectFirstItem();
+  await click(detail().querySelector<HTMLElement>('[role="checkbox"][aria-label="상세: 여권 준비 완료"]')!);
   expect(coordinator.execute).toHaveBeenCalledWith({type:'checkItem', id:11, checked:true});
-  expect(renderer.root.findByProps({'aria-label':'선택한 준비물 이름'}).children.join('')).toBe('여권');
+  expect(selectedName()).toBe('여권');
+});
+it('shows four ordered category columns and authoritative progress',async()=>{
+  await mount();
+  const board=document.querySelector('[aria-label="준비물 카테고리"]')!;
+  expect(Array.from(board.querySelectorAll('section')).map(node=>node.getAttribute('aria-label'))).toEqual(['여권·예약·결제','통신·전자기기','옷·가방','세면·건강']);
+  expect(document.querySelector('[aria-label="전체 준비 현황"] strong')!.textContent).toContain('1 / 2');
 });
-it('shows four ordered category columns and authoritative progress',async()=>{await mount();expect(renderer.root.findByProps({'aria-label':'준비물 카테고리'}).findAllByType('section').map(node=>node.props['aria-label'])).toEqual(['여권·예약·결제','통신·전자기기','옷·가방','세면·건강']);expect(renderer.root.findByProps({'aria-label':'전체 준비 현황'}).findByType('strong').children.join('')).toContain('1 / 2');});
 it('renders added categories after the four defaults even when they share backend column 2',async()=>{
   state.data!.parts.push({id:5,name:'추가 준비 1',column:2,position:8,items:[]},{id:6,name:'추가 준비 2',column:2,position:9,items:[]});
   await mount();
-  expect(renderer.root.findByProps({'aria-label':'준비물 카테고리'}).findAllByType('section').map(node=>node.props['aria-label'])).toEqual([
+  const board=document.querySelector('[aria-label="준비물 카테고리"]')!;
+  expect(Array.from(board.querySelectorAll('section')).map(node=>node.getAttribute('aria-label'))).toEqual([
     '여권·예약·결제','통신·전자기기','옷·가방','세면·건강','추가 준비 1','추가 준비 2',
   ]);
 });
-it('selects an item and shows only its server supplied tips',async()=>{await mount();await selectFirstItem();expect(JSON.stringify(renderer.toJSON())).toContain('유효기간을 확인하세요.');expect(JSON.stringify(renderer.toJSON())).toContain('사본을 준비하세요.');await act(async()=>button('준비물 선택: 항공권 예약 내역').props.onClick());expect(JSON.stringify(renderer.toJSON())).not.toContain('유효기간을 확인하세요.');expect(JSON.stringify(renderer.toJSON())).not.toContain('우때의 여행 팁');});
-it('keeps checkbox independent from item selection',async()=>{await mount();await selectFirstItem();await act(async()=>input('항공권 예약 내역 준비 완료').props.onChange({target:{checked:false}}));expect(coordinator.execute).toHaveBeenCalledWith({type:'checkItem',id:12,checked:false});expect(renderer.root.findByProps({'aria-label':'선택한 준비물 이름'}).children.join('')).toBe('여권');});
-it('opens the category menu and sends validated create and rename commands',async()=>{await mount();await act(async()=>button('카테고리 메뉴: 여권·예약·결제').props.onClick());await act(async()=>button('카테고리 이름 수정').props.onClick());await act(async()=>input('카테고리 이름').props.onChange({target:{value:'새 카테고리'}}));await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));expect(coordinator.execute).toHaveBeenCalledWith({type:'renamePart',id:1,name:'새 카테고리'});});
-it('closes a category menu with Escape',async()=>{await mount();const trigger=button('카테고리 메뉴: 여권·예약·결제');await act(async()=>trigger.props.onClick());const menu=renderer.root.findByProps({role:'menu'});await act(async()=>menu.props.onKeyDown({key:'Escape',preventDefault(){},stopPropagation(){}}));expect(renderer.root.findAllByProps({role:'menu'})).toHaveLength(0);});
-it('opens an item add dialog for the selected category',async()=>{await mount();await act(async()=>button('준비물 추가: 여권·예약·결제').props.onClick());await act(async()=>input('준비물 이름').props.onChange({target:{value:'비상 연락처'}}));await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));expect(coordinator.execute).toHaveBeenCalledWith({type:'createItem',partId:1,name:'비상 연락처'});});
-it('creates a category without replacing the existing list',async()=>{await mount();await act(async()=>button('카테고리 추가').props.onClick());await act(async()=>input('카테고리 이름').props.onChange({target:{value:'추가 준비'}}));await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));expect(coordinator.execute).toHaveBeenCalledWith({type:'createPart',name:'추가 준비'});expect(state.data!.parts).toHaveLength(4);});
-it('retains a failed name draft and clears it on scope change',async()=>{coordinator.execute.mockResolvedValue({kind:'error'});await mount();await act(async()=>button('카테고리 추가').props.onClick());await act(async()=>input('카테고리 이름').props.onChange({target:{value:'개인용'}}));await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));expect(input('카테고리 이름').props.value).toBe('개인용');mocks.context={state,coordinator,scopeKey:'other:user'};await act(async()=>renderer.update(<PackingPage/>));expect(renderer.root.findAllByProps({'aria-label':'카테고리 이름'})).toHaveLength(0);});
+it('selects an item and shows only its server supplied tips',async()=>{
+  await mount();await selectFirstItem();
+  expect(text()).toContain('유효기간을 확인하세요.');
+  expect(text()).toContain('사본을 준비하세요.');
+  await click(button('준비물 선택: 항공권 예약 내역'));
+  expect(text()).not.toContain('유효기간을 확인하세요.');
+  expect(text()).not.toContain('우때의 여행 팁');
+});
+it('keeps checkbox independent from item selection',async()=>{
+  await mount();await selectFirstItem();
+  await click(checkbox('항공권 예약 내역 준비 완료'));
+  expect(coordinator.execute).toHaveBeenCalledWith({type:'checkItem',id:12,checked:false});
+  expect(selectedName()).toBe('여권');
+});
+it('opens the category menu and sends validated create and rename commands',async()=>{
+  await mount();
+  await openMenu('여권·예약·결제');
+  await click(menuItem('카테고리 이름 수정'));
+  expect(input('카테고리 이름')!.value).toBe('여권·예약·결제');
+  await type(input('카테고리 이름')!,'새 카테고리');
+  await click(button('저장'));
+  expect(coordinator.execute).toHaveBeenCalledWith({type:'renamePart',id:1,name:'새 카테고리'});
+});
+it('closes a category menu with Escape',async()=>{
+  await mount();
+  await openMenu('여권·예약·결제');
+  expect(document.querySelector('[role="menu"]')).not.toBeNull();
+  await escape(menuItem('준비물 추가'));
+  expect(document.querySelector('[role="menu"]')).toBeNull();
+});
+it('opens an item add dialog for the selected category',async()=>{
+  await mount();
+  await click(button('준비물 추가: 여권·예약·결제'));
+  expect(accessibleName(openDialogs().at(-1)!)).toBe('준비물 추가');
+  await type(input('준비물 이름')!,'비상 연락처');
+  await click(button('추가'));
+  expect(coordinator.execute).toHaveBeenCalledWith({type:'createItem',partId:1,name:'비상 연락처'});
+});
+it('creates a category without replacing the existing list',async()=>{
+  await mount();
+  await click(button('카테고리 추가'));
+  await type(input('카테고리 이름')!,'추가 준비');
+  await click(button('추가'));
+  expect(coordinator.execute).toHaveBeenCalledWith({type:'createPart',name:'추가 준비'});
+  expect(state.data!.parts).toHaveLength(4);
+});
+it('retains a failed name draft and clears it on scope change',async()=>{
+  coordinator.execute.mockResolvedValue({kind:'error'});
+  await mount();
+  await click(button('카테고리 추가'));
+  await type(input('카테고리 이름')!,'개인용');
+  await click(button('추가'));
+  expect(input('카테고리 이름')!.value).toBe('개인용');
+  mocks.context={state,coordinator,scopeKey:'other:user'};
+  await rerender();
+  expect(input('카테고리 이름')).toBeNull();
+});
 it('does not submit a Korean name while IME composition is active',async()=>{
-  await mount();await act(async()=>button('카테고리 추가').props.onClick());
-  const name=input('카테고리 이름');await act(async()=>name.props.onChange({target:{value:'여권'}}));
-  name.props.onCompositionStart();
-  const preventDefault=vi.fn();name.props.onKeyDown({key:'Enter',nativeEvent:{isComposing:false},keyCode:229,preventDefault});
-  expect(preventDefault).toHaveBeenCalledOnce();
-  await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));
+  await mount();await click(button('카테고리 추가'));
+  const name=input('카테고리 이름')!;
+  await type(name,'여권');
+  await act(async()=>{name.dispatchEvent(new CompositionEvent('compositionstart',{bubbles:true}));});
+  const enter=new KeyboardEvent('keydown',{key:'Enter',keyCode:229,bubbles:true,cancelable:true});
+  await act(async()=>{name.dispatchEvent(enter);});
+  expect(enter.defaultPrevented).toBe(true);
+  await click(button('추가'));
   expect(coordinator.execute).not.toHaveBeenCalled();
 });
 it('rejects an overlong raw name and permits a duplicate after correction',async()=>{
-  await mount();await act(async()=>button('준비물 추가: 여권·예약·결제').props.onClick());
-  await act(async()=>input('준비물 이름').props.onChange({target:{value:' '.repeat(100)+'x'}}));
-  await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));
-  expect(coordinator.execute).not.toHaveBeenCalled();expect(renderer.root.findAllByProps({role:'alert'})).toHaveLength(1);
-  await act(async()=>input('준비물 이름').props.onChange({target:{value:'여권'}}));
-  await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));
+  await mount();await click(button('준비물 추가: 여권·예약·결제'));
+  await type(input('준비물 이름')!,' '.repeat(100)+'x');
+  await click(button('추가'));
+  expect(coordinator.execute).not.toHaveBeenCalled();
+  expect(document.querySelectorAll('[role="alert"]')).toHaveLength(1);
+  expect(input('준비물 이름')!.getAttribute('aria-invalid')).toBe('true');
+  await type(input('준비물 이름')!,'여권');
+  await click(button('추가'));
   expect(coordinator.execute).toHaveBeenCalledWith({type:'createItem',partId:1,name:'여권'});
 });
 it('keeps later name edits when an earlier save succeeds',async()=>{
-  let finish!:(value:{kind:string})=>void;coordinator.execute.mockReturnValue(new Promise(resolve=>{finish=resolve;}));await mount();await selectFirstItem();
-  await act(async()=>button('준비물 이름 수정: 여권').props.onClick());
-  await act(async()=>input('준비물 이름').props.onChange({target:{value:'첫 번째 이름'}}));
-  let pending!:Promise<void>;act(()=>{pending=renderer.root.findByType('form').props.onSubmit({preventDefault(){}});});
-  await act(async()=>input('준비물 이름').props.onChange({target:{value:'두 번째 이름'}}));
-  await act(async()=>{finish({kind:'success'});await pending;});
-  expect(input('준비물 이름').props.value).toBe('두 번째 이름');
-});
-it('does not close a reopened name dialog when an old save resolves',async()=>{
-  let finish!:(value:{kind:string})=>void;coordinator.execute.mockReturnValue(new Promise(resolve=>{finish=resolve;}));await mount();await selectFirstItem();
-  await act(async()=>button('준비물 이름 수정: 여권').props.onClick());
-  let pending!:Promise<void>;act(()=>{pending=renderer.root.findByType('form').props.onSubmit({preventDefault(){}});});
-  await act(async()=>button('취소').props.onClick());
-  await act(async()=>button('준비물 이름 수정: 여권').props.onClick());
-  await act(async()=>input('준비물 이름').props.onChange({target:{value:'새 초안'}}));
-  await act(async()=>{finish({kind:'success'});await pending;});
-  expect(input('준비물 이름').props.value).toBe('새 초안');
+  const finish=deferred();await mount();await selectFirstItem();
+  await click(button('준비물 이름 수정: 여권'));
+  await type(input('준비물 이름')!,'첫 번째 이름');
+  await click(button('저장'));
+  await type(input('준비물 이름')!,'두 번째 이름');
+  await finish({kind:'success'});
+  expect(input('준비물 이름')!.value).toBe('두 번째 이름');
+});
+it('shows save progress and keeps the name dialog open until the save finishes',async()=>{
+  const finish=deferred();await mount();await selectFirstItem();
+  await click(button('준비물 이름 수정: 여권'));
+  await click(button('저장'));
+  // 저장 중: 저장 버튼은 progress, 취소·Esc로 닫히지 않는다(closeDisabled)
+  expect(button('저장 중').getAttribute('aria-busy')).toBe('true');
+  await click(button('취소'));
+  await escape();
+  expect(input('준비물 이름')).not.toBeNull();
+  await finish({kind:'success'});
+  await settle();
+  expect(input('준비물 이름')).toBeNull();
+  expect(coordinator.execute).toHaveBeenCalledTimes(1);
 });
 it('closes a name dialog if its target disappeared while saving',async()=>{
-  coordinator.execute.mockResolvedValue({kind:'missing'});await mount();await selectFirstItem();await act(async()=>button('준비물 이름 수정: 여권').props.onClick());
-  await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));
-  expect(renderer.root.findAllByProps({'aria-label':'준비물 이름'})).toHaveLength(0);
+  coordinator.execute.mockResolvedValue({kind:'missing'});await mount();await selectFirstItem();
+  await click(button('준비물 이름 수정: 여권'));
+  await click(button('저장'));
+  expect(input('준비물 이름')).toBeNull();
+});
+it('opens item rename and category delete from their respective controls',async()=>{
+  await mount();await selectFirstItem();
+  await click(button('준비물 이름 수정: 여권'));
+  expect(input('준비물 이름')!.value).toBe('여권');
+  await click(button('취소'));
+  expect(input('준비물 이름')).toBeNull();
+  await openMenu('여권·예약·결제');
+  await click(menuItem('카테고리 삭제'));
+  expect(coordinator.prepareDelete).toHaveBeenCalledWith('part',1);
+});
+it('requires a coordinator confirmation before deleting an item',async()=>{
+  await mount();await selectFirstItem();
+  await click(button('준비물 삭제: 여권'));
+  expect(coordinator.prepareDelete).toHaveBeenCalledWith('item',11);
+  expect(coordinator.confirmDelete).not.toHaveBeenCalled();
+  state.confirmation={kind:'item',id:11,version:1,name:'여권'};
+  await rerender();
+  expect(openDialogs().at(-1)!.getAttribute('role')).toBe('alertdialog');
+  await click(button('삭제'));
+  expect(coordinator.confirmDelete).toHaveBeenCalledOnce();
+});
+it('saves the selected item memo without changing its checked state',async()=>{
+  await mount();await selectFirstItem();
+  await type(memo()!,'새 메모');
+  await click(button('저장'));
+  expect(coordinator.execute).toHaveBeenCalledWith({type:'saveMemo',id:11,content:'새 메모'});
+  expect(state.data!.parts[0].items[0].checked).toBe(false);
 });
-it('opens item rename and category delete from their respective controls',async()=>{await mount();await selectFirstItem();await act(async()=>button('준비물 이름 수정: 여권').props.onClick());expect(input('준비물 이름').props.value).toBe('여권');await act(async()=>button('취소').props.onClick());await act(async()=>button('카테고리 메뉴: 여권·예약·결제').props.onClick());await act(async()=>button('카테고리 삭제').props.onClick());expect(coordinator.prepareDelete).toHaveBeenCalledWith('part',1);});
-it('requires a coordinator confirmation before deleting an item',async()=>{await mount();await selectFirstItem();await act(async()=>button('준비물 삭제: 여권').props.onClick());expect(coordinator.prepareDelete).toHaveBeenCalledWith('item',11);expect(coordinator.confirmDelete).not.toHaveBeenCalled();state.confirmation={kind:'item',id:11,version:1,name:'여권'};await act(async()=>renderer.update(<PackingPage/>));await act(async()=>button('삭제').props.onClick());expect(coordinator.confirmDelete).toHaveBeenCalledOnce();});
-it('saves the selected item memo without changing its checked state',async()=>{await mount();await selectFirstItem();await act(async()=>renderer.root.findByType('textarea').props.onChange({target:{value:'새 메모'}}));await act(async()=>button('저장').props.onClick());expect(coordinator.execute).toHaveBeenCalledWith({type:'saveMemo',id:11,content:'새 메모'});expect(state.data!.parts[0].items[0].checked).toBe(false);});
 it('keeps memo markup as text and sends blank memo save without deleting the item',async()=>{
   state.data!.parts[0].items[0]={...item,memo:{id:11,itemId:11,content:'<script>literal</script>'}};
-  await mount();await selectFirstItem();expect(renderer.root.findAllByType('script')).toHaveLength(0);
-  await act(async()=>renderer.root.findByType('textarea').props.onChange({target:{value:'   '}}));
-  await act(async()=>button('저장').props.onClick());
+  await mount();await selectFirstItem();
+  expect(document.querySelectorAll('script')).toHaveLength(0);
+  expect(memo()!.value).toBe('<script>literal</script>');
+  await type(memo()!,'   ');
+  await click(button('저장'));
   expect(coordinator.execute).toHaveBeenCalledWith({type:'saveMemo',id:11,content:'   '});
-  expect(renderer.root.findByProps({'aria-label':'준비물 카테고리'}).findAllByProps({type:'checkbox'})).toHaveLength(2);
+  expect(document.querySelector('[aria-label="준비물 카테고리"]')!.querySelectorAll('[role="checkbox"]')).toHaveLength(2);
 });
 it('preserves newer memo typing when a pending save publishes the submitted text',async()=>{
-  let finish!:(value:{kind:string})=>void;coordinator.execute.mockReturnValue(new Promise(resolve=>{finish=resolve;}));await mount();await selectFirstItem();
-  const textarea=()=>renderer.root.findByType('textarea');
-  await act(async()=>textarea().props.onChange({target:{value:'보낸 메모'}}));
-  let pending!:Promise<void>;act(()=>{pending=button('저장').props.onClick();});
-  await act(async()=>textarea().props.onChange({target:{value:'나중에 쓴 메모'}}));
+  const finish=deferred();await mount();await selectFirstItem();
+  await type(memo()!,'보낸 메모');
+  await click(button('저장'));
+  await type(memo()!,'나중에 쓴 메모');
   state.data!.parts[0].items[0]={...item,memo:{id:11,itemId:11,content:'보낸 메모'}};
-  await act(async()=>renderer.update(<PackingPage/>));
-  expect(textarea().props.value).toBe('나중에 쓴 메모');
-  await act(async()=>{finish({kind:'success'});await pending;});
-  expect(textarea().props.value).toBe('나중에 쓴 메모');
+  await rerender();
+  expect(memo()!.value).toBe('나중에 쓴 메모');
+  await finish({kind:'success'});
+  expect(memo()!.value).toBe('나중에 쓴 메모');
 });
 it('preserves new memo typing when a pending blank memo save clears the memo',async()=>{
-  let finish!:(value:{kind:string})=>void;coordinator.execute.mockReturnValue(new Promise(resolve=>{finish=resolve;}));await mount();await selectFirstItem();
-  await act(async()=>renderer.root.findByType('textarea').props.onChange({target:{value:''}}));
-  let pending!:Promise<void>;act(()=>{pending=button('저장').props.onClick();});
-  await act(async()=>renderer.root.findByType('textarea').props.onChange({target:{value:'삭제 중 새 메모'}}));
+  const finish=deferred();await mount();await selectFirstItem();
+  await type(memo()!,'');
+  await click(button('저장'));
+  await type(memo()!,'삭제 중 새 메모');
   state.data!.parts[0].items[0]={...item,memo:null};
-  await act(async()=>renderer.update(<PackingPage/>));
-  await act(async()=>{finish({kind:'success'});await pending;});
-  expect(renderer.root.findByType('textarea').props.value).toBe('삭제 중 새 메모');
+  await rerender();
+  await finish({kind:'success'});
+  expect(memo()!.value).toBe('삭제 중 새 메모');
+});
+it('preserves the loading state without fabricated progress or a list',async()=>{
+  state.data=null;state.status='loading';
+  await mount();
+  // 로딩 안내는 화면에 보이지 않는 status(output)로만 전한다
+  expect(document.querySelector('output')!.textContent).toContain('불러오는 중');
+  expect(document.querySelectorAll('h2')).toHaveLength(0);
+  expect(document.querySelector('[aria-label="전체 준비 현황"]')).toBeNull();
+});
+it('returns to the board when the selected item is removed',async()=>{
+  await mount();
+  await click(button('준비물 선택: 항공권 예약 내역'));
+  expect(detail().getAttribute('data-open')).toBe('true');
+  state.data!.parts[0].items=[item];
+  await rerender();
+  expect(detail().getAttribute('data-open')).toBe('false');
 });
-it('preserves the loading state without fabricated progress or a list',async()=>{state.data=null;state.status='loading';await mount();expect(JSON.stringify(renderer.toJSON())).toContain('불러오는 중');expect(renderer.root.findAllByType('h2')).toHaveLength(0);expect(renderer.root.findAllByProps({'aria-label':'전체 준비 현황'})).toHaveLength(0);});
-it('returns to the board when the selected item is removed',async()=>{await mount();await act(async()=>button('준비물 선택: 항공권 예약 내역').props.onClick());expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props['data-open']).toBe(true);state.data!.parts[0].items=[item];await act(async()=>renderer.update(<PackingPage/>));expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props['data-open']).toBe(false);});
 it('opens a dismissible mobile detail sheet above the board',async()=>{
-  await mount();await act(async()=>button('준비물 선택: 항공권 예약 내역').props.onClick());
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props['data-open']).toBe(true);
-  await act(async()=>button('준비물 상세 닫기').props.onClick());
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props['data-open']).toBe(false);
+  mocks.mobile=true;
+  await mount();
+  expect(document.querySelector('aside[aria-label="준비물 상세"]')).toBeNull();
+  await click(button('준비물 선택: 항공권 예약 내역'));
+  expect(sheet()).not.toBeNull();
+  expect(accessibleName(sheet()!)).toBe('항공권 예약 내역');
+  await click(button('준비물 상세 닫기'));
+  expect(sheet()).toBeNull();
+  expect(button('준비물 선택: 항공권 예약 내역').getAttribute('aria-pressed')).toBe('false');
 });
 
-it('cancels memo edits and closes the detail on desktop and mobile',async()=>{
+it.each([false,true])('cancels memo edits and closes the detail (mobile: %s)',async(mobile)=>{
+  mocks.mobile=mobile;
   await mount();await selectFirstItem();
-  await act(async()=>renderer.root.findByType('textarea').props.onChange({target:{value:'취소할 초안'}}));
-  await act(async()=>button('취소').props.onClick());
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props.hidden).toBe(true);
+  await type(memo()!,'취소할 초안');
+  await click(button('취소'));
+  expect(detailOpen()).toBe(false);
   expect(coordinator.execute).not.toHaveBeenCalled();
   await selectFirstItem();
-  expect(renderer.root.findByType('textarea').props.value).toBe('기존 메모');
+  expect(memo()!.value).toBe('기존 메모');
 });
 
 it('closes detail only after the memo save succeeds',async()=>{
-  let finish!:(value:{kind:string})=>void;
-  coordinator.execute.mockReturnValue(new Promise(resolve=>{finish=resolve;}));
+  const finish=deferred();
   await mount();await selectFirstItem();
-  await act(async()=>button('저장').props.onClick());
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props.hidden).toBe(false);
-  await act(async()=>finish({kind:'success'}));
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props.hidden).toBe(true);
+  await click(button('저장'));
+  expect(detail().hidden).toBe(false);
+  await finish({kind:'success'});
+  expect(detail().hidden).toBe(true);
 });
 
 it.each(['error','blocked'])('keeps the memo draft open when saving returns %s',async(kind)=>{
   coordinator.execute.mockResolvedValue({kind});
   await mount();await selectFirstItem();
-  await act(async()=>renderer.root.findByType('textarea').props.onChange({target:{value:'보존할 초안'}}));
-  await act(async()=>button('저장').props.onClick());
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props.hidden).toBe(false);
-  expect(renderer.root.findByType('textarea').props.value).toBe('보존할 초안');
+  await type(memo()!,'보존할 초안');
+  await click(button('저장'));
+  expect(detail().hidden).toBe(false);
+  expect(memo()!.value).toBe('보존할 초안');
 });
 
 it('keeps detail open for edits typed after the memo save started',async()=>{
-  let finish!:(value:{kind:string})=>void;
-  coordinator.execute.mockReturnValue(new Promise(resolve=>{finish=resolve;}));
+  const finish=deferred();
   await mount();await selectFirstItem();
-  await act(async()=>button('저장').props.onClick());
-  await act(async()=>renderer.root.findByType('textarea').props.onChange({target:{value:'나중에 입력한 메모'}}));
-  await act(async()=>finish({kind:'success'}));
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props.hidden).toBe(false);
-  expect(renderer.root.findByType('textarea').props.value).toBe('나중에 입력한 메모');
+  await click(button('저장'));
+  await type(memo()!,'나중에 입력한 메모');
+  await finish({kind:'success'});
+  expect(detail().hidden).toBe(false);
+  expect(memo()!.value).toBe('나중에 입력한 메모');
 });
 
 it('does not close another item when the previous item memo save finishes',async()=>{
-  let finish!:(value:{kind:string})=>void;
-  coordinator.execute.mockReturnValue(new Promise(resolve=>{finish=resolve;}));
+  const finish=deferred();
   await mount();await selectFirstItem();
-  await act(async()=>button('저장').props.onClick());
-  await act(async()=>button('준비물 선택: 항공권 예약 내역').props.onClick());
-  await act(async()=>finish({kind:'success'}));
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props.hidden).toBe(false);
-  expect(renderer.root.findByProps({'aria-label':'선택한 준비물 이름'}).children.join('')).toBe('항공권 예약 내역');
+  await click(button('저장'));
+  await click(button('준비물 선택: 항공권 예약 내역'));
+  await finish({kind:'success'});
+  expect(detail().hidden).toBe(false);
+  expect(selectedName()).toBe('항공권 예약 내역');
 });
 
-it.each(['취소','준비물 상세 닫기'])('does not close a reopened detail when a save finishes after %s',async(close)=>{
-  let finish!:(value:{kind:string})=>void;
-  coordinator.execute.mockReturnValue(new Promise(resolve=>{finish=resolve;}));
+// 모바일 시트의 X는 저장 중(status writing)에 막히므로, 저장 중 닫기는 PC 접기·메모 취소로 본다
+it.each([[false,'취소'],[false,'준비물 상세 접기'],[true,'취소']] as const)('does not close a reopened detail when a save finishes (mobile: %s, close: %s)',async(mobile,close)=>{
+  mocks.mobile=mobile;
+  const finish=deferred();
   await mount();await selectFirstItem();
-  await act(async()=>button('저장').props.onClick());
-  await act(async()=>button(close).props.onClick());
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props.hidden).toBe(true);
+  await click(button('저장'));
+  await click(button(close));
+  expect(detailOpen()).toBe(false);
   await selectFirstItem();
-  await act(async()=>finish({kind:'success'}));
-  expect(renderer.root.findByProps({'aria-label':'준비물 상세'}).props.hidden).toBe(false);
+  await finish({kind:'success'});
+  expect(detailOpen()).toBe(true);
 });
 
-it('dismisses the mobile detail with the shared header drag and retains its memo draft',async()=>{
-  vi.stubGlobal('matchMedia',()=>({matches:true}));
-  document.documentElement.classList.add('is-mobile-device');
+it('keeps the mobile memo draft after closing the sheet and does not close it while writing',async()=>{
+  mocks.mobile=true;
   await mount();await selectFirstItem();
-  await act(async()=>renderer.root.findByType('textarea').props.onChange({target:{value:'드래그 후에도 유지할 메모'}}));
-  const detail=()=>renderer.root.findByProps({'aria-label':'준비물 상세'});
-  const handle=()=>detail().findAllByType('div').find(node=>node.props.onPointerDown);
-  expect(handle()).toBeDefined();
-  const target=document.createElement('div');
-  target.setPointerCapture=vi.fn();target.hasPointerCapture=()=>true;target.releasePointerCapture=vi.fn();
-  const event=(y:number)=>({pointerId:1,isPrimary:true,button:0,clientX:20,clientY:y,target,currentTarget:target});
-  await act(async()=>handle()!.props.onPointerDown(event(20)));
-  await act(async()=>handle()!.props.onPointerMove(event(150)));
-  expect(detail().props.style.transform).toBe('translateY(130px)');
-  await act(async()=>handle()!.props.onPointerUp(event(150)));
-  expect(detail().props.hidden).toBe(true);
+  await type(memo()!,'닫은 뒤에도 유지할 메모');
+  await click(button('준비물 상세 닫기'));
+  expect(sheet()).toBeNull();
   await selectFirstItem();
-  expect(renderer.root.findByType('textarea').props.value).toBe('드래그 후에도 유지할 메모');
-  state.status='writing';await act(async()=>renderer.update(<PackingPage/>));
-  await act(async()=>handle()!.props.onPointerDown(event(20)));
-  await act(async()=>handle()!.props.onPointerMove(event(150)));
-  await act(async()=>handle()!.props.onPointerUp(event(150)));
-  expect(detail().props.hidden).toBe(false);
+  expect(memo()!.value).toBe('닫은 뒤에도 유지할 메모');
+  // 저장 중에는 X·Esc로 닫히지 않는다(closeDisabled)
+  state.status='writing';await rerender();
+  expect(button('준비물 상세 닫기').disabled).toBe(true);
+  await click(button('준비물 상세 닫기'));
+  await escape();
+  expect(sheet()).not.toBeNull();
+  expect(memo()!.value).toBe('닫은 뒤에도 유지할 메모');
 });
diff --git a/src/components/packing/PackingPage.tsx b/src/components/packing/PackingPage.tsx
index ae3bdada..6112fa74 100644
--- a/src/components/packing/PackingPage.tsx
+++ b/src/components/packing/PackingPage.tsx
@@ -1,11 +1,20 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState, type FormEvent } from "react";
+import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
 import Image from "next/image";
+import { useForm, useStore } from "@tanstack/react-form";
 import { usePackingList } from "@/hooks/usePackingList";
-import { useSheetDrag } from "@/components/mobile/useSheetDrag";
-import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
-import { SettingsDialog } from "@/components/settings/SettingsDialog";
+import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
+import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Field, FieldCount, FieldError, FieldFooter, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { useMobileView } from "@/contexts/MobileViewContext";
 import { SetSectionSideDetailWidth } from "@/contexts/SectionWidthContext";
 import { PACKING_DETAIL_WIDTH_PX } from "@/lib/layout-tokens";
 import { renderTextWithLinks } from "@/lib/text/renderTextWithLinks";
@@ -16,9 +25,29 @@ import styles from "./PackingPage.module.css";
 
 type Context = ReturnType<typeof usePackingList>;
 type Editor = {kind:"createPart"} | {kind:"renamePart"|"createItem"|"renameItem";id:number;name:string};
-const actionButton = styles.actionButton;
 const linked = (value:string) => renderTextWithLinks(value,{linkClassName:"text-primary underline [overflow-wrap:anywhere]",onLinkClick:event=>event.stopPropagation()});
 
+// 이름·메모 대화상자나 삭제 확인창이 열려 있으면 Esc는 그쪽 몫이다. Base UI 표면은 <div role="dialog|alertdialog" data-open>이다
+const OPEN_DIALOG_SELECTOR = '[role="dialog"][data-open], [role="alertdialog"][data-open]';
+
+function nameError(value:string, kind:"part"|"item") {
+  try {
+    normalizePackingName(value, kind);
+    return undefined;
+  } catch (error) {
+    return error instanceof Error ? error.message : "이름을 확인해 주세요.";
+  }
+}
+
+function memoError(value:string) {
+  try {
+    normalizePackingMemo(value);
+    return undefined;
+  } catch (error) {
+    return error instanceof Error ? error.message : "메모를 확인해 주세요.";
+  }
+}
+
 function PackingIcon({name, size = 24}: {name:keyof typeof packingIcons; size?:number}) {
   const sourceSize = name === "plusWhite" ? 16 : name === "collapse" || name.startsWith("menu") && name !== "menu" ? 20 : 24;
   return <span className={styles.icon} style={{width:size,height:size}} aria-hidden="true">
@@ -29,145 +58,269 @@ function PackingIcon({name, size = 24}: {name:keyof typeof packingIcons; size?:n
 
 function PackingCheckbox({item,context,detail = false}: {item:PackingItem;context:Context;detail?:boolean}) {
   return <label className={styles.checkbox}>
-    <input type="checkbox" aria-label={`${detail ? "상세: " : ""}${item.name} 준비 완료`}
+    <Checkbox aria-label={`${detail ? "상세: " : ""}${item.name} 준비 완료`}
       checked={item.checked} disabled={context.state.status!=="ready"}
-      onChange={event=>void context.coordinator?.execute({type:"checkItem",id:item.id,checked:event.target.checked})}/>
-    <PackingIcon name={item.checked ? "checkboxChecked" : "checkbox"}/>
+      onCheckedChange={checked=>void context.coordinator?.execute({type:"checkItem",id:item.id,checked})}/>
   </label>;
 }
 
-function NameDialog({editor,context,onClose}: {editor:Editor;context:Context;onClose:()=>void}) {
-  const [value,setValue]=useState("name" in editor ? editor.name : "");
-  const latestValue=useRef(value);
+/**
+ * 카테고리·준비물 이름 추가/수정. 열린 채 마운트되고 닫기 요청(Esc·딤·취소)은 onClose다.
+ * 다른 항목을 저장하는 동안(status writing)은 제출만 막고 버튼 모양은 그대로 둔다(체크할 때마다 깜빡이지 않게).
+ * 동기화 오류처럼 저장할 수 없는 상태(ready·writing 밖)에서는 버튼을 비활성으로 보인다(옛 동작)
+ */
+function NameDialog({editor,context,finalFocus,onClose}: Readonly<{editor:Editor;context:Context;finalFocus:()=>HTMLElement|null;onClose:()=>void}>) {
+  const formId=useId();
   const mounted=useRef(true);
   const composing=useRef(false);
   useEffect(()=>{mounted.current=true;return()=>{mounted.current=false;};},[]);
-  const [error,setError]=useState("");
-  const [saving,setSaving]=useState(false);
   const kind=editor.kind.includes("Part") ? "part" : "item";
   const noun=kind==="part" ? "카테고리" : "준비물";
-  const title=`${noun} ${editor.kind.startsWith("create") ? "추가" : "이름 수정"}`;
-  async function submit(event:FormEvent) {
-    event.preventDefault();
-    if(saving || composing.current || context.state.status!=="ready" || !context.coordinator) return;
-    try {normalizePackingName(value,kind);} catch(error) {setError(error instanceof Error ? error.message : "이름을 확인해 주세요.");return;}
-    setSaving(true);
-    const command=editor.kind==="createPart" ? {type:"createPart" as const,name:value} : editor.kind==="renamePart" ? {type:"renamePart" as const,id:editor.id,name:value} : editor.kind==="createItem" ? {type:"createItem" as const,partId:editor.id,name:value} : {type:"renameItem" as const,id:editor.id,name:value};
-    try {const result=await context.coordinator.execute(command);if(mounted.current && (result.kind==="missing" || (result.kind==="success" && latestValue.current===value))) onClose();} finally {if(mounted.current)setSaving(false);}
-  }
-  return <SettingsDialog title={title} onClose={onClose} size="compact" className={styles.dialog} overlayClassName={styles.dialogOverlay} showCloseButton={false}><form onSubmit={submit}>
-    <label className={styles.fieldLabel}>{noun} 이름<input aria-label={`${noun} 이름`} value={value} onChange={event=>{latestValue.current=event.target.value;setValue(event.target.value);setError("");}} onCompositionStart={()=>{composing.current=true;}} onCompositionEnd={()=>{composing.current=false;}} onKeyDown={event=>{if(event.key==="Enter" && (composing.current || event.nativeEvent.isComposing || event.keyCode===229)) event.preventDefault();}} className={styles.field}/></label>
-    {error && <p role="alert" className={styles.error}>{error}</p>}
-    <div className={styles.dialogActions}><button type="button" className={actionButton} onClick={onClose}>취소</button><button type="submit" className={`${actionButton} ${styles.primary}`} disabled={saving || context.state.status!=="ready"} data-waiting={!saving && context.state.status==="writing"}>{editor.kind.startsWith("create") ? "추가" : "저장"}</button></div>
-  </form></SettingsDialog>;
+  const isCreate=editor.kind.startsWith("create");
+  const form=useForm({
+    defaultValues:{name:"name" in editor ? editor.name : ""},
+    onSubmit:async({value,formApi})=>{
+      const coordinator=context.coordinator;
+      if(!coordinator) return;
+      const command = (() => {
+        switch (editor.kind) {
+          case "createPart": return {type:"createPart" as const,name:value.name};
+          case "renamePart": return {type:"renamePart" as const,id:editor.id,name:value.name};
+          case "createItem": return {type:"createItem" as const,partId:editor.id,name:value.name};
+          case "renameItem": return {type:"renameItem" as const,id:editor.id,name:value.name};
+        }
+      })();
+      const result=await coordinator.execute(command);
+      // 저장하는 동안 다시 고친 이름은 남기고, 대화상자를 닫았다 다시 연 뒤 도착한 응답은 새 대화상자를 닫지 않는다
+      if(mounted.current && (result.kind==="missing" || (result.kind==="success" && formApi.getFieldValue("name")===value.name))) onClose();
+    },
+  });
+  const isSaving=useStore(form.store,state=>state.isSubmitting);
+  const blocked=context.state.status!=="ready" && context.state.status!=="writing";
+  return <Dialog open onOpenChange={open=>{if(!open)onClose();}} closeDisabled={isSaving}>
+    <DialogContent size="md" showCloseButton={false} finalFocus={finalFocus}>
+      <DialogHeader><DialogTitle>{noun} {isCreate ? "추가" : "이름 수정"}</DialogTitle></DialogHeader>
+      <form id={formId} noValidate onSubmit={event=>{
+        event.preventDefault();
+        if(form.state.isSubmitting || composing.current || context.state.status!=="ready" || !context.coordinator) return;
+        void form.handleSubmit();
+      }}>
+        <form.Field name="name" validators={{onSubmit:({value})=>nameError(value,kind)}}>
+          {field=>{
+            const error=field.state.meta.errors[0];
+            return <Field>
+              <FieldLabel htmlFor={`${formId}-name`}>{noun} 이름</FieldLabel>
+              <Input id={`${formId}-name`} aria-label={`${noun} 이름`} aria-invalid={error ? true : undefined} aria-describedby={error ? `${formId}-name-error` : undefined}
+                value={field.state.value} onChange={event=>field.handleChange(event.target.value)} onBlur={field.handleBlur}
+                onCompositionStart={()=>{composing.current=true;}} onCompositionEnd={()=>{composing.current=false;}}
+                onKeyDown={event=>{if(event.key==="Enter" && (composing.current || event.nativeEvent.isComposing || event.keyCode===229)) event.preventDefault();}}/>
+              <FieldError id={`${formId}-name-error`}>{error}</FieldError>
+            </Field>;
+          }}
+        </form.Field>
+      </form>
+      <DialogFooter>
+        <DialogClose render={<Button variant="weak"/>}>취소</DialogClose>
+        <Button type="submit" form={formId} loading={isSaving} loadingLabel={isCreate ? "추가 중" : "저장 중"} disabled={blocked}>{isCreate ? "추가" : "저장"}</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>;
 }
 
 function DeleteDialog({context,onClose}: {context:Context;onClose:()=>void}) {
   const pending=useRef(false);
   const [deleting,setDeleting]=useState(false);
-  const close=useCallback(()=>{if(!pending.current)onClose();},[onClose]);
   const confirmation=context.state.confirmation;
   if(!confirmation) return null;
   const part=confirmation.kind==="part";
+  function close(){if(!pending.current)onClose();}
   async function confirm(){if(pending.current || context.state.status!=="ready" || !context.coordinator)return;pending.current=true;setDeleting(true);try{await context.coordinator.confirmDelete();}finally{pending.current=false;setDeleting(false);}}
   const count=context.state.data?.parts.find(value=>value.id===confirmation.id)?.items.length ?? 0;
-  return <SettingsDialog title={part ? "카테고리를 삭제할까요?" : "준비물을 삭제할까요?"} onClose={close} size="compact" className={styles.dialog} overlayClassName={styles.dialogOverlay} showCloseButton={false}>
-    <p className={styles.deleteCopy}>‘{confirmation.name}’{part ? `의 준비물 ${count}개와` : " 준비물과"}<br/>작성한 메모가 함께 삭제됩니다.</p>
-    <div className={styles.dialogActions}><button type="button" className={actionButton} disabled={deleting} onClick={close}>취소</button><button type="button" className={`${actionButton} ${styles.danger}`} disabled={deleting || context.state.status!=="ready"} data-waiting={!deleting && context.state.status==="writing"} onClick={()=>void confirm()}>삭제</button></div>
-  </SettingsDialog>;
+  const deletionSubject=part ? `의 준비물 ${count}개와` : " 준비물과";
+  return <ConfirmDialog destructive title={part ? "카테고리를 삭제할까요?" : "준비물을 삭제할까요?"}
+    description={`‘${confirmation.name}’${deletionSubject}\n작성한 메모가 함께 삭제됩니다.`}
+    confirmLabel="삭제" isPending={deleting} confirmDisabled={context.state.status!=="ready"} onConfirm={()=>void confirm()} onCancel={close}/>;
 }
 
-function MemoPanel({item,context,open,onComplete}: {item:PackingItem;context:Context;open:boolean;onComplete:()=>void}) {
-  const [value,setValue]=useState(item.memo?.content ?? "");
-  const [saving,setSaving]=useState(false);
-  const [error,setError]=useState("");
-  const latestValue=useRef(value);
+/**
+ * 선택한 준비물의 메모 폼. 상세를 닫아도 초안이 남아야 해서(다시 열면 이어 쓰기) 모바일 시트처럼 닫히면 내용이 언마운트되는 껍데기 바깥,
+ * 준비물마다 key로 다시 마운트되는 컴포넌트에서 부른다
+ */
+function useMemoForm(item:PackingItem, context:Context, open:boolean, onComplete:()=>void) {
   const mounted=useRef(true);
   const completionVersion=useRef(0);
   const source=useRef(item.memo?.content ?? "");
   const submitted=useRef<string|null>(null);
+  // 열린 동안 서버 메모가 바뀌어도 기본값은 연 순간 값으로 둔다. 칸 값은 아래 effect가 규칙대로 맞춘다
+  const [defaultValues]=useState(()=>({memo:item.memo?.content ?? ""}));
+  const form=useForm({
+    defaultValues,
+    onSubmit:async({value,formApi})=>{
+      submitted.current=value.memo;
+      const version=completionVersion.current;
+      try {
+        const result=await context.coordinator?.execute({type:"saveMemo",id:item.id,content:value.memo});
+        if(result?.kind==="success" && mounted.current && version===completionVersion.current && formApi.getFieldValue("memo")===value.memo) onComplete();
+      } finally {
+        submitted.current=null;
+      }
+    },
+  });
+  const isSaving=useStore(form.store,state=>state.isSubmitting);
   useEffect(()=>{mounted.current=true;return()=>{mounted.current=false;};},[]);
   useEffect(()=>{if(!open)completionVersion.current+=1;},[open]);
-  useEffect(()=>{const next=item.memo?.content ?? "";if(source.current!==next){const previous=source.current;source.current=next;setValue(current=>current===previous || current===submitted.current ? next : current);}},[item.memo?.content]);
+  // 서버 메모가 바뀌면 손대지 않은 칸(이전 서버 값)이나 방금 보낸 값만 새 값으로 바꾼다. 그 뒤 새로 쓴 초안은 지키지 않는다
+  useEffect(()=>{
+    const next=item.memo?.content ?? "";
+    if(source.current===next) return;
+    const previous=source.current;
+    source.current=next;
+    const current=form.getFieldValue("memo");
+    if(current===previous || current===submitted.current) form.setFieldValue("memo",next);
+  },[item.memo?.content,form]);
   function cancel() {
     completionVersion.current+=1;
-    latestValue.current=item.memo?.content ?? "";
-    setValue(latestValue.current);
-    setError("");
+    // 값을 바꾸면 칸을 다시 검사하면서 제출 오류도 지워진다
+    form.setFieldValue("memo",item.memo?.content ?? "");
     onComplete();
   }
-  async function save() {
-    if(saving || context.state.status!=="ready") return;
-    try {normalizePackingMemo(value);} catch(e) {setError(e instanceof Error ? e.message : "메모를 확인해 주세요.");return;}
-    setSaving(true);
-    submitted.current=value;
-    const version=completionVersion.current;
-    try {
-      const result=await context.coordinator?.execute({type:"saveMemo",id:item.id,content:value});
-      if(result?.kind==="success" && mounted.current && version===completionVersion.current && latestValue.current===value) onComplete();
-    } finally {
-      submitted.current=null;
-      if(mounted.current)setSaving(false);
-    }
+  function save() {
+    if(form.state.isSubmitting || context.state.status!=="ready") return;
+    void form.handleSubmit();
   }
+  // 저장할 수 없는 상태(동기화 오류 등)면 저장 버튼을 비활성으로 보인다. writing은 제출만 막는다(NameDialog와 같음)
+  const blocked=context.state.status!=="ready" && context.state.status!=="writing";
+  return {form,isSaving,blocked,cancel,save};
+}
+
+function MemoPanel({item,memo}: Readonly<{item:PackingItem;memo:ReturnType<typeof useMemoForm>}>) {
+  const {isMobileDevice}=useMobileView();
+  const errorId=useId();
+  const {form}=memo;
   return <section className={styles.memoPanel} aria-label="내 메모">
     <label htmlFor={`packing-memo-${item.id}`} className={styles.sectionTitle}>내 메모</label>
-    <textarea id={`packing-memo-${item.id}`} aria-label="준비물 메모" value={value}
-      onChange={event=>{latestValue.current=event.target.value;setValue(event.target.value);setError("");}}
-      placeholder="준비물에 대한 메모를 남겨 주세요." maxLength={2000} rows={3} className={styles.memoField}/>
-    <div className={styles.memoFooter}>({value.length}/2000)</div>
-    {error && <p role="alert" className={styles.error}>{error}</p>}
-    <div className={`${styles.dialogActions} ${styles.memoActions}`}>
-      <button type="button" className={actionButton} onClick={cancel}>취소</button>
-      <button type="button" className={`${actionButton} ${styles.primary}`} disabled={saving || context.state.status!=="ready"} data-waiting={!saving && context.state.status==="writing"} onClick={()=>void save()}>저장</button>
+    <form.Field name="memo" validators={{onSubmit:({value})=>memoError(value)}}>
+      {field=>{
+        const error=field.state.meta.errors[0];
+        return <Field>
+          <Textarea id={`packing-memo-${item.id}`} aria-label="준비물 메모" aria-invalid={error ? true : undefined} aria-describedby={error ? errorId : undefined}
+            value={field.state.value} onChange={event=>field.handleChange(event.target.value)} onBlur={field.handleBlur}
+            placeholder="준비물에 대한 메모를 남겨 주세요." maxLength={2000} rows={3}/>
+          <FieldFooter><FieldError id={errorId}>{error}</FieldError><FieldCount>({field.state.value.length}/2000)</FieldCount></FieldFooter>
+        </Field>;
+      }}
+    </form.Field>
+    {/* 상세 안 인라인 버튼: PC 패널은 sm, 모바일 기기 시트는 md로 폭을 나눈다 */}
+    <div className={styles.memoActions}>
+      <Button variant="outline" size={isMobileDevice ? "md" : "sm"} className={isMobileDevice ? "flex-1" : "min-w-18"} onClick={memo.cancel}>취소</Button>
+      <Button tone="brand" size={isMobileDevice ? "md" : "sm"} className={isMobileDevice ? "flex-1" : "min-w-18"} loading={memo.isSaving} loadingLabel="저장 중" disabled={memo.blocked} onClick={memo.save}>저장</Button>
     </div>
   </section>;
 }
 
-function Detail({item,context,onClose,onRename,onDelete,open}: {item:PackingItem|null;context:Context;onClose:()=>void;onRename:()=>void;onDelete:()=>void;open:boolean}) {
-  const sheetDrag = useSheetDrag(onClose, !open || context.state.status === "writing");
+function DetailSections({item,memo}: Readonly<{item:PackingItem;memo:ReturnType<typeof useMemoForm>}>) {
+  return <>
+    <MemoPanel item={item} memo={memo}/>
+    {item.tips.length>0 && <section className={styles.tips}>
+      <h3 className={styles.sectionTitle}>우때의 여행 팁 <span aria-hidden="true">💡</span></h3>
+      <div className={styles.tipCard}>
+        <h4>{item.name} 준비 전 확인해 주세요</h4>
+        <ul>{item.tips.map((tip,index)=><li key={`${index}:${tip}`}>{linked(tip)}</li>)}</ul>
+      </div>
+    </section>}
+  </>;
+}
+
+/** 체크·이름·수정/삭제 줄. 이름 요소(children)는 PC 패널은 h2, 모바일 시트는 시트 제목(DrawerTitle)이다 */
+function DetailHeader({item,context,onRename,onDelete,children}: Readonly<{item:PackingItem;context:Context;onRename:()=>void;onDelete:()=>void;children:ReactNode}>) {
+  return <div className={styles.detailHeader}>
+    <PackingCheckbox item={item} context={context} detail/>
+    {children}
+    <div className={styles.detailActions}>
+      <button type="button" className={styles.iconButton} aria-label={`준비물 이름 수정: ${item.name}`} onClick={onRename}><PackingIcon name="edit" size={20}/></button>
+      <button type="button" className={styles.iconButton} aria-label={`준비물 삭제: ${item.name}`} onClick={onDelete}><PackingIcon name="delete" size={20}/></button>
+    </div>
+  </div>;
+}
+
+type DetailProps = {item:PackingItem|null;context:Context;open:boolean;onClose:()=>void;onRename:()=>void;onDelete:()=>void};
+type ItemDetailProps = Omit<DetailProps,"item"> & {item:PackingItem};
+
+/** PC: 목록 오른쪽 비모달 패널. 닫혀도 언마운트하지 않아 메모 초안이 남는다 */
+function DetailPanel({item,context,open,onClose,onRename,onDelete}: Readonly<DetailProps>) {
   useEffect(()=>{
     if(!open) return;
     function handleEscape(event:KeyboardEvent) {
-      if(event.key!=="Escape" || event.defaultPrevented || document.querySelector("dialog[open]")) return;
+      if(event.key!=="Escape" || event.defaultPrevented || document.querySelector(OPEN_DIALOG_SELECTOR)) return;
       event.preventDefault();
       onClose();
     }
     document.addEventListener("keydown",handleEscape);
     return()=>document.removeEventListener("keydown",handleEscape);
   },[open,onClose]);
+  return <aside className={styles.detail} hidden={!open} data-open={open} aria-label="준비물 상세">
+    {item && <DetailPanelBody key={item.id} item={item} context={context} open={open} onClose={onClose} onRename={onRename} onDelete={onDelete}/>}
+    <button type="button" className={styles.collapseDetail} aria-label="준비물 상세 접기" onClick={onClose}><PackingIcon name="collapse" size={20}/></button>
+  </aside>;
+}
+
+function DetailPanelBody({item,context,open,onClose,onRename,onDelete}: ItemDetailProps) {
+  const memo=useMemoForm(item,context,open,onClose);
   return <>
-    {open && <button type="button" tabIndex={-1} className={styles.detailBackdrop} aria-label="준비물 상세 닫기" onClick={onClose}/>}
-    {/* 닫혀도 언마운트되지 않아, 드래그 후에도 열 때마다 CSS 등장 애니메이션이 다시 돌도록 애니메이션 해제는 쓰지 않는다 */}
-    <aside className={styles.detail} style={{...sheetDrag.surfaceStyle, animation: undefined}} hidden={!open} data-open={open} aria-label="준비물 상세">
-      <BottomSheetDragHandle drag={sheetDrag} className={styles.detailDragHeader}>
-        <div className={styles.sheetHandle} aria-hidden="true"/>
-        {item && <div className={styles.detailHeader}>
-            <PackingCheckbox item={item} context={context} detail/>
-            <h2 aria-label="선택한 준비물 이름">{item.name}</h2>
-            <div className={styles.detailActions}>
-              <button type="button" className={styles.iconButton} aria-label={`준비물 이름 수정: ${item.name}`} onClick={onRename}><PackingIcon name="edit" size={20}/></button>
-              <button type="button" className={styles.iconButton} aria-label={`준비물 삭제: ${item.name}`} onClick={onDelete}><PackingIcon name="delete" size={20}/></button>
-            </div>
-        </div>}
-      </BottomSheetDragHandle>
-      <div className={styles.detailScroll}>
-        {item && <>
-          <MemoPanel key={item.id} item={item} context={context} open={open} onComplete={onClose}/>
-          {item.tips.length>0 && <section className={styles.tips}>
-            <h3 className={styles.sectionTitle}>우때의 여행 팁 <span aria-hidden="true">💡</span></h3>
-            <div className={styles.tipCard}>
-              <h4>{item.name} 준비 전 확인해 주세요</h4>
-              <ul>{item.tips.map((tip,index)=><li key={`${index}:${tip}`}>{linked(tip)}</li>)}</ul>
-            </div>
-          </section>}
-        </>}
-      </div>
-      <button type="button" className={styles.collapseDetail} aria-label="준비물 상세 접기" onClick={onClose}><PackingIcon name="collapse" size={20}/></button>
-    </aside>
+    <div className={styles.detailTop}>
+      <DetailHeader item={item} context={context} onRename={onRename} onDelete={onDelete}>
+        <h2 className={styles.detailTitle} aria-label="선택한 준비물 이름">{item.name}</h2>
+      </DetailHeader>
+    </div>
+    <div className={styles.detailScroll}><DetailSections item={item} memo={memo}/></div>
   </>;
 }
 
+/**
+ * 모바일 기기: 아래 시트(Drawer). 저장 중(status writing)에는 Esc·딤·X·스와이프로 닫히지 않는다.
+ * 시트 내용은 닫히면 언마운트되므로 메모 폼은 시트 바깥(DetailSheetBody)이 들고 있다
+ */
+function DetailSheet({item,context,open,onClose,onRename,onDelete}: Readonly<DetailProps>) {
+  return <Drawer open={open} onOpenChange={next=>{if(!next)onClose();}} closeDisabled={context.state.status==="writing"}>
+    {item && <DetailSheetBody key={item.id} item={item} context={context} open={open} onClose={onClose} onRename={onRename} onDelete={onDelete}/>}
+  </Drawer>;
+}
+
+function DetailSheetBody({item,context,open,onClose,onRename,onDelete}: ItemDetailProps) {
+  const memo=useMemoForm(item,context,open,onClose);
+  // 높이는 지금 시트 값(화면의 76.53%, 위 80px은 남김)
+  return <DrawerContent closeLabel="준비물 상세 닫기" className="h-[76.53dvh] max-h-[calc(100dvh-80px)]">
+    {/* 오른쪽 닫기 X의 누르는 영역(음수 margin)이 삭제 버튼 영역과 겹치지 않게 띄운다 */}
+    <DrawerHeader className="gap-x-3">
+      <DetailHeader item={item} context={context} onRename={onRename} onDelete={onDelete}>
+        <DrawerTitle className="min-w-0 flex-1">{item.name}</DrawerTitle>
+      </DetailHeader>
+    </DrawerHeader>
+    <DrawerBody className="gap-5"><DetailSections item={item} memo={memo}/></DrawerBody>
+  </DrawerContent>;
+}
+
+/** 카테고리 메뉴. 항목에서 연 이름 대화상자는 닫힐 때 이 메뉴 버튼으로 포커스를 돌려준다(항목은 메뉴와 함께 사라진다) */
+function PartMenu({part,onEdit,onDelete}: Readonly<{part:PackingPart;onEdit:(editor:Editor,returnFocus:HTMLElement|null)=>void;onDelete:()=>void}>) {
+  const trigger=useRef<HTMLButtonElement>(null);
+  return <DropdownMenu>
+    <DropdownMenuTrigger ref={trigger} className={styles.menuTrigger} aria-label={`카테고리 메뉴: ${part.name}`}>
+      <PackingIcon name="menu" size={20}/>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" sideOffset={0} className={styles.menuContent}>
+      <DropdownMenuItem aria-label="준비물 추가" onClick={()=>onEdit({kind:"createItem",id:part.id,name:""},trigger.current)}>
+        <PackingIcon name="menuPlus" size={20}/>준비물 추가
+      </DropdownMenuItem>
+      <DropdownMenuItem aria-label="카테고리 이름 수정" onClick={()=>onEdit({kind:"renamePart",id:part.id,name:part.name},trigger.current)}>
+        <PackingIcon name="menuEdit" size={20}/>카테고리 수정
+      </DropdownMenuItem>
+      <DropdownMenuItem variant="destructive" aria-label="카테고리 삭제" onClick={onDelete}>
+        <PackingIcon name="menuDelete" size={20}/>카테고리 삭제
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>;
+}
+
 function PackingLoadingBoard() {
   return <>
     <output className="block sr-only">준비물을 불러오는 중…</output>
@@ -187,21 +340,24 @@ function PackingLoadingBoard() {
 
 function PackingContent({context}: {context:Context}) {
   const {state,coordinator}=context;
+  const {isMobileDevice}=useMobileView();
   const loading = !state.data && state.status === "loading";
   const emptyBoard = loading ? <PackingLoadingBoard/> : <output>준비물을 확인할 수 없어요.</output>;
   const [selectedId,setSelectedId]=useState<number|null>(null);
   const [detailOpen,setDetailOpen]=useState(false);
-  const [menuId,setMenuId]=useState<number|null>(null);
   const [editor,setEditor]=useState<Editor|null>(null);
-  const menuTrigger=useRef<HTMLButtonElement|null>(null);
+  // 메뉴 항목에서 연 이름 대화상자의 포커스 복귀 대상. 그 밖에서 열면 null(Base UI 기본: 연 버튼으로 복귀)
+  const editorReturnFocus=useRef<HTMLElement|null>(null);
   const parts=[...(state.data?.parts ?? [])].sort((a,b)=>a.column-b.column || a.position-b.position);
   const items=parts.flatMap(part=>part.items);
   const selected=items.find(item=>item.id===selectedId) ?? null;
   const selectedTrigger=useRef<HTMLButtonElement|null>(null);
   const closeDetail=useCallback(()=>{setDetailOpen(false);selectedTrigger.current?.focus({preventScroll:true});},[]);
-  function closeMenu(){menuTrigger.current?.focus({preventScroll:true});setMenuId(null);}
-  function prepareDelete(kind:"part"|"item",id:number){if(menuId!==null)closeMenu();void coordinator?.prepareDelete(kind,id);}
-  useEffect(()=>{if(menuId===null)return;function close(event:PointerEvent){if(!(event.target instanceof Node) || !menuTrigger.current?.parentElement?.contains(event.target))setMenuId(null);}document.addEventListener("pointerdown",close);return()=>document.removeEventListener("pointerdown",close);},[menuId]);
+  function openEditor(next:Editor,returnFocus:HTMLElement|null=null){editorReturnFocus.current=returnFocus;setEditor(next);}
+  function prepareDelete(kind:"part"|"item",id:number){void coordinator?.prepareDelete(kind,id);}
+  const detailProps:DetailProps={item:selected,context,open:detailOpen && selected!==null,onClose:closeDetail,
+    onRename:()=>{if(selected)openEditor({kind:"renameItem",id:selected.id,name:selected.name});},
+    onDelete:()=>{if(selected)prepareDelete("item",selected.id);}};
   return <div className={styles.page} aria-busy={loading}>
     {/* 상세가 열리면 목록 400을 지킨 채 상세 폭만큼 데스크톱 최소 폭을 넓힌다 */}
     <SetSectionSideDetailWidth px={detailOpen && selected!==null ? PACKING_DETAIL_WIDTH_PX : 0}/>
@@ -209,7 +365,7 @@ function PackingContent({context}: {context:Context}) {
       <div className={styles.content}>
         <header className={styles.pageHeader}>
           <h1>준비물</h1>
-          {state.data && <button type="button" className={styles.addCategory} aria-label="카테고리 추가" onClick={()=>setEditor({kind:"createPart"})}>
+          {state.data && <button type="button" className={styles.addCategory} aria-label="카테고리 추가" onClick={()=>openEditor({kind:"createPart"})}>
             <PackingIcon name="plusWhite" size={16}/><span>카테고리 추가</span>
           </button>}
           {loading && <span aria-hidden="true" className={`${styles.addCategory} ${styles.loadingAction}`}/>}
@@ -221,39 +377,17 @@ function PackingContent({context}: {context:Context}) {
             {loading && <span aria-hidden="true" className={styles.loadingProgress}/>}
           </div>
         </header>
-        {state.message && <div role="alert" className={styles.alert}>
-          {state.message}
-          {["sync-error","uncertain","error"].includes(state.status) && <button type="button" onClick={()=>void coordinator?.refresh(true)}>다시 확인</button>}
-        </div>}
+        {state.message && <div className="pb-4"><Alert tone="warning" orientation="horizontal">
+          <AlertTitle>{state.message}</AlertTitle>
+          {["sync-error","uncertain","error"].includes(state.status) && <AlertAction><button type="button" className="underline" onClick={()=>void coordinator?.refresh(true)}>다시 확인</button></AlertAction>}
+        </Alert></div>}
         {!state.data ? emptyBoard : (
           <div className={styles.columns} aria-label="준비물 카테고리">
             {parts.map((part:PackingPart)=><section className={styles.part} key={part.id} aria-label={part.name}>
               <div className={styles.partHeader}>
                 <h2>{part.name}</h2>
                 <span className={styles.partProgress}>{part.items.filter(item=>item.checked).length}/{part.items.length}</span>
-                <button ref={menuId===part.id ? menuTrigger : undefined} type="button" className={styles.menuTrigger}
-                  aria-label={`카테고리 메뉴: ${part.name}`} aria-expanded={menuId===part.id} aria-haspopup="menu"
-                  onClick={()=>setMenuId(menuId===part.id?null:part.id)}><PackingIcon name="menu" size={20}/></button>
-                {menuId===part.id && <div className={styles.menu} role="menu" onKeyDown={event=>{
-                  if(event.key==="Escape"){
-                    event.preventDefault();event.stopPropagation();closeMenu();
-                  }else if(event.key==="ArrowDown"||event.key==="ArrowUp"){
-                    event.preventDefault();
-                    const choices=[...event.currentTarget.querySelectorAll<HTMLButtonElement>('button')];
-                    const index=choices.indexOf(document.activeElement as HTMLButtonElement);
-                    choices[(index+(event.key==="ArrowDown"?1:choices.length-1))%choices.length]?.focus();
-                  }
-                }}>
-                  <button role="menuitem" type="button" aria-label="준비물 추가" onClick={()=>{closeMenu();setEditor({kind:"createItem",id:part.id,name:""});}}>
-                    <PackingIcon name="menuPlus" size={20}/>준비물 추가
-                  </button>
-                  <button role="menuitem" type="button" aria-label="카테고리 이름 수정" onClick={()=>{closeMenu();setEditor({kind:"renamePart",id:part.id,name:part.name});}}>
-                    <PackingIcon name="menuEdit" size={20}/>카테고리 수정
-                  </button>
-                  <button role="menuitem" type="button" aria-label="카테고리 삭제" className={styles.menuDanger} onClick={()=>prepareDelete("part",part.id)}>
-                    <PackingIcon name="menuDelete" size={20}/>카테고리 삭제
-                  </button>
-                </div>}
+                <PartMenu part={part} onEdit={openEditor} onDelete={()=>prepareDelete("part",part.id)}/>
               </div>
               <ul className={styles.items}>
                 {[...part.items].sort((a,b)=>a.position-b.position).map(item=><li key={item.id} className={styles.item}
@@ -267,7 +401,7 @@ function PackingContent({context}: {context:Context}) {
                   </button>
                 </li>)}
               </ul>
-              <button type="button" className={styles.addItem} onClick={()=>setEditor({kind:"createItem",id:part.id,name:""})} aria-label={`준비물 추가: ${part.name}`}>
+              <button type="button" className={styles.addItem} onClick={()=>openEditor({kind:"createItem",id:part.id,name:""})} aria-label={`준비물 추가: ${part.name}`}>
                 <PackingIcon name="plus" size={16}/>준비물 추가
               </button>
             </section>)}
@@ -275,10 +409,8 @@ function PackingContent({context}: {context:Context}) {
         )}
       </div>
     </div>
-    <Detail item={selected} context={context} open={detailOpen && selected!==null} onClose={closeDetail}
-      onRename={()=>selected&&setEditor({kind:"renameItem",id:selected.id,name:selected.name})}
-      onDelete={()=>selected&&prepareDelete("item",selected.id)}/>
-    {editor && <NameDialog key={`${editor.kind}:${"id" in editor?editor.id:"new"}`} editor={editor} context={context} onClose={()=>setEditor(null)}/>}
+    {isMobileDevice ? <DetailSheet {...detailProps}/> : <DetailPanel {...detailProps}/>}
+    {editor && <NameDialog key={`${editor.kind}:${"id" in editor?editor.id:"new"}`} editor={editor} context={context} finalFocus={()=>editorReturnFocus.current} onClose={()=>setEditor(null)}/>}
     {state.confirmation && <DeleteDialog key={`${state.confirmation.kind}:${state.confirmation.id}:${state.confirmation.version}`} context={context} onClose={()=>coordinator?.cancelConfirmation()}/>}
   </div>;
 }
diff --git a/src/components/place/AddToBookmarkModal.tsx b/src/components/place/AddToBookmarkModal.tsx
index 5018d60b..a3637852 100644
--- a/src/components/place/AddToBookmarkModal.tsx
+++ b/src/components/place/AddToBookmarkModal.tsx
@@ -1,12 +1,21 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
-
 import { Check, Plus } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
+import { useCallback, useMemo, useState, type SyntheticEvent } from "react";
 import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/spinner";
+
 import { messageForBookmarkCategorySaveError } from "@/lib/api/errors";
 import { AddBookmarkModal } from "@/app/(main)/bookmark/_components/AddBookmarkModal";
 import { FolderRibbonIcon } from "@/app/(main)/bookmark/_components/FolderRibbonIcon";
@@ -24,6 +33,16 @@ import {
 import { cn } from "@/lib/utils";
 import { useSessionStore } from "@/stores/session-store";
 
+// 포털 안 클릭·터치가 React 트리를 따라 부모(지도 상세 패널·시트 드래그, 검색 결과 카드)로 올라가지 않게 포털 표면과 배경에서 끊는다.
+// 딤은 표면 밖이므로 표면과 배경 각각에서 차단한다. 키보드는 Base UI에 그대로 전달한다
+const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+const pointerBoundary = {
+  onClick: stopPropagation,
+  onMouseDown: stopPropagation,
+  onPointerDown: stopPropagation,
+  onTouchStart: stopPropagation,
+};
+
 type Props = {
   googlePlaceId: string;
   placeCategory?: string;
@@ -69,15 +88,6 @@ export function AddToBookmarkModal({
     setSubmitFeedback(null);
   }, []);
 
-  useEffect(() => {
-    if (createFolderModalOpen) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose, createFolderModalOpen]);
-
   const openCreateFolderModal = () => {
     setCreateFolderModalKey((k) => k + 1);
     setCreateFolderModalOpen(true);
@@ -208,39 +218,24 @@ export function AddToBookmarkModal({
     return null;
   }
 
-  /* 부모(지도 상세 패널·시트)의 transform 때문에 fixed가 패널 기준이 되지 않도록 body로 포털 */
-  return createPortal(
-    <div
-      role="presentation"
-      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 p-4"
-      onMouseDown={(ev) => {
-        ev.stopPropagation();
-        if (ev.target === ev.currentTarget) onClose();
+  return (
+    <Dialog
+      open
+      closeDisabled={isAddingBookmarks}
+      // 열린 채 마운트되므로 닫기 요청(open=false)만 온다. 추가 중에는 Esc·딤·닫기를 막는다.
+      // 새 북마크 대화상자가 위에 열려 있으면 Esc는 위 대화상자만 닫는다(Base UI 중첩)
+      onOpenChange={(open) => {
+        if (!open) onClose();
       }}
-      onClick={(ev) => ev.stopPropagation()}
-      onPointerDown={(ev) => ev.stopPropagation()}
-      onTouchStart={(ev) => ev.stopPropagation()}
     >
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="add-bookmark-modal-title"
-        onMouseDown={(e) => e.stopPropagation()}
-        className="flex max-h-[min(85vh,560px)] w-full max-w-sm flex-col overflow-hidden rounded-2xl border border-gray-border bg-white pb-3 shadow-lg"
-      >
-        <div className="shrink-0 px-5 pb-2 pt-4">
-          <h2
-            id="add-bookmark-modal-title"
-            className="text-title-l mobile:text-title-m font-semibold text-neutral-900"
-          >
-            북마크에 추가
-          </h2>
-          <p className="mt-1 text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-dark-gray break-keep text-pretty">
-            북마크를 선택한 뒤 추가해 주세요.
-          </p>
-        </div>
+      <DialogContent {...pointerBoundary} backdropProps={pointerBoundary} size="sm" showCloseButton={false} className="max-h-[min(85dvh,560px)]">
+        <DialogHeader>
+          <DialogTitle>북마크에 추가</DialogTitle>
+          <DialogDescription>북마크를 선택한 뒤 추가해 주세요.</DialogDescription>
+        </DialogHeader>
 
-        <div className="min-h-0 flex-1 overflow-y-auto [scrollbar-color:rgba(0,0,0,0.15)_transparent] [scrollbar-gutter:stable]">
+        {/* 제목 줄·버튼은 고정하고 목록만 스크롤한다. 행 구분선·hover 배경이 표면 끝까지 닿도록 표면 padding만큼 넓힌다 */}
+        <div className="-mx-5 min-h-0 overflow-y-auto border-b border-gray-border [scrollbar-color:rgba(0,0,0,0.15)_transparent] [scrollbar-gutter:stable]">
           <button
             type="button"
             disabled={isCreatingCategory || isAddingBookmarks}
@@ -256,7 +251,7 @@ export function AddToBookmarkModal({
 
           {categoriesLoading && (
             <div className="flex justify-center py-6">
-              <LoadingIndicator label="북마크 불러오는 중" />
+              <Spinner aria-label="북마크 불러오는 중" />
             </div>
           )}
 
@@ -344,45 +339,35 @@ export function AddToBookmarkModal({
           )}
         </div>
 
-        <div className="flex shrink-0 gap-2 border-t border-gray-border px-5 pt-3">
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={isAddingBookmarks}
-            className="flex-1 rounded-xl border border-gray-border py-2.5 text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-800 transition-colors hover:bg-bubble-gray disabled:opacity-60"
-          >
-            닫기
-          </button>
-          <button
-            type="button"
-            onClick={handleConfirmAdd}
+        <DialogFooter>
+          <DialogClose render={<Button variant="weak" />}>닫기</DialogClose>
+          <Button
+            loading={isAddingBookmarks}
+            loadingLabel="추가 중"
             disabled={
-              isAddingBookmarks ||
               selectedIds.size === 0 ||
               (categories?.length === 0 && !categoriesLoading)
             }
-            className="flex-1 rounded-xl bg-primary py-2.5 text-label-l-emphasis mobile:text-label-m-emphasis font-semibold text-white shadow-sm transition-opacity hover:opacity-95 disabled:opacity-55"
+            onClick={handleConfirmAdd}
           >
-            {isAddingBookmarks ? "추가 중…" : "추가"}
-          </button>
-        </div>
-      </div>
+            추가
+          </Button>
+        </DialogFooter>
 
-      {createFolderModalOpen && (
-        <AddBookmarkModal
-          key={createFolderModalKey}
-          mode="create"
-          initialFolder={null}
-          overlayZClass="z-[65]"
-          busy={isCreatingCategory || isAddingBookmarks}
-          untitledNameHint={pickUniqueUntitledBookmarkCategoryName(
-            (categories ?? []).map((c) => c.name),
-          )}
-          onClose={() => setCreateFolderModalOpen(false)}
-          onSave={handleCreateFolderSave}
-        />
-      )}
-    </div>,
-    document.body,
+        {createFolderModalOpen && (
+          <AddBookmarkModal
+            key={createFolderModalKey}
+            mode="create"
+            initialFolder={null}
+            busy={isCreatingCategory || isAddingBookmarks}
+            untitledNameHint={pickUniqueUntitledBookmarkCategoryName(
+              (categories ?? []).map((c) => c.name),
+            )}
+            onClose={() => setCreateFolderModalOpen(false)}
+            onSave={handleCreateFolderSave}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/components/place/AddToScheduleModal.tsx b/src/components/place/AddToScheduleModal.tsx
index 5519352f..5f1a6a71 100644
--- a/src/components/place/AddToScheduleModal.tsx
+++ b/src/components/place/AddToScheduleModal.tsx
@@ -1,12 +1,22 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
-
 import { useQueryClient } from "@tanstack/react-query";
-import { useEffect } from "react";
-import { createPortal } from "react-dom";
+import type { SyntheticEvent } from "react";
 import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/spinner";
+
 import { useCreateScheduleItem, useRoomSchedules } from "@/hooks/useRooms";
 import { bucketItemCount } from "@/lib/analytics/context";
 import {
@@ -23,6 +33,16 @@ import {
 } from "@/lib/plan/tripRange";
 import { useSessionStore } from "@/stores/session-store";
 
+// 포털 안 클릭·터치가 React 트리를 따라 부모(지도 상세 패널·시트 드래그, 검색 결과 카드)로 올라가지 않게 포털 표면과 배경에서 끊는다.
+// 딤은 표면 밖이므로 표면과 배경 각각에서 차단한다. 키보드는 Base UI에 그대로 전달한다
+const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+const pointerBoundary = {
+  onClick: stopPropagation,
+  onMouseDown: stopPropagation,
+  onPointerDown: stopPropagation,
+  onTouchStart: stopPropagation,
+};
+
 type Props = {
   googlePlaceId: string;
   placeCategory?: string;
@@ -55,14 +75,6 @@ export function AddToScheduleModal({
 
   const sorted = schedules ? sortRoomSchedules(schedules) : [];
 
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
-
   async function pickDay(scheduleId: number) {
     if (!rid || isAdding) return;
     try {
@@ -91,39 +103,22 @@ export function AddToScheduleModal({
     }
   }
 
-  /* 부모(지도 상세 패널·시트)의 transform 때문에 fixed가 패널 기준이 되지 않도록 body로 포털 */
-  return createPortal(
-    <div
-      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 p-4"
-      role="presentation"
-      onMouseDown={(ev) => {
-        ev.stopPropagation();
-        if (ev.target === ev.currentTarget) onClose();
+  return (
+    <Dialog
+      open
+      closeDisabled={isAdding}
+      // 열린 채 마운트되므로 닫기 요청(open=false)만 온다. 추가 중에는 Esc·딤·닫기를 막는다
+      onOpenChange={(open) => {
+        if (!open) onClose();
       }}
-      onClick={(ev) => ev.stopPropagation()}
-      onPointerDown={(ev) => ev.stopPropagation()}
-      onTouchStart={(ev) => ev.stopPropagation()}
     >
-      <div
-        className="flex max-h-[min(80vh,520px)] w-full max-w-sm flex-col rounded-2xl border border-gray-border bg-white shadow-lg"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="add-schedule-modal-title"
-        onMouseDown={(e) => e.stopPropagation()}
-      >
-        <div className="shrink-0 border-b border-gray-border px-5 py-4">
-          <h2
-            id="add-schedule-modal-title"
-            className="text-title-l mobile:text-title-m font-semibold text-neutral-900"
-          >
-            일정에 추가
-          </h2>
-          <p className="mt-1 text-body-m-regular mobile:text-body-s-regular text-dark-gray">
-            담을 여행 일차를 선택하세요.
-          </p>
-        </div>
-
-        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+      <DialogContent {...pointerBoundary} backdropProps={pointerBoundary} size="sm" showCloseButton={false} className="max-h-[min(80dvh,520px)]">
+        <DialogHeader>
+          <DialogTitle>일정에 추가</DialogTitle>
+          <DialogDescription>담을 여행 일차를 선택하세요.</DialogDescription>
+        </DialogHeader>
+
+        <DialogBody>
           {!rid ? (
             <p className="text-center text-body-m-regular mobile:text-body-s-regular text-dark-gray">
               참여 중인 방이 없어요. 방에 입장한 뒤 다시 시도해 주세요.
@@ -132,7 +127,7 @@ export function AddToScheduleModal({
 
           {rid && schedulesLoading ? (
             <div className="flex justify-center py-6">
-              <LoadingIndicator label="일정 불러오는 중" />
+              <Spinner aria-label="일정 불러오는 중" />
             </div>
           ) : null}
 
@@ -181,19 +176,12 @@ export function AddToScheduleModal({
               ))}
             </ul>
           ) : null}
-        </div>
-
-        <div className="shrink-0 border-t border-gray-border px-5 py-3">
-          <button
-            type="button"
-            onClick={onClose}
-            className="w-full rounded-xl border border-gray-border py-2.5 text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-800 transition-colors hover:bg-bubble-gray"
-          >
-            닫기
-          </button>
-        </div>
-      </div>
-    </div>,
-    document.body,
+        </DialogBody>
+
+        <DialogFooter>
+          <DialogClose render={<Button variant="weak" />}>닫기</DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/components/place/HeroSection.tsx b/src/components/place/HeroSection.tsx
index 75f6daa3..d1d71bd1 100644
--- a/src/components/place/HeroSection.tsx
+++ b/src/components/place/HeroSection.tsx
@@ -1,10 +1,12 @@
 "use client";
 
+import { Skeleton } from "@/components/ui/skeleton";
 import { usePlacePhotoUrlQuery } from "@/hooks/usePlacePhotoUrl";
+import { useVisiblePlacePhotoUrl } from "@/hooks/useVisiblePlacePhotoUrl";
 import { handlePlacePhotoImageError } from "@/lib/places/place-photo-refresh";
 
 export function HeroSkeleton() {
-  return <div className="h-full animate-pulse bg-gray-200" />;
+  return <Skeleton className="h-full rounded-none" />;
 }
 
 export function HeroImage({
@@ -17,7 +19,9 @@ export function HeroImage({
   name: string;
 }) {
   const { data: queriedPhotoUrl, isLoading } = usePlacePhotoUrlQuery(googlePlaceId);
-  const photoUrl = queriedPhotoUrl || fallbackImage || null;
+  const { visibleUrl: photoUrl, markUnavailable } = useVisiblePlacePhotoUrl(
+    queriedPhotoUrl || fallbackImage || null,
+  );
 
   if (!photoUrl && isLoading) {
     return <HeroSkeleton />;
@@ -39,6 +43,7 @@ export function HeroImage({
             googlePlaceId,
             placeName: name,
             image: event.currentTarget,
+            onPhotoUnavailable: markUnavailable,
           })
         }
       />
diff --git a/src/components/place/PlaceDetailPanel.tsx b/src/components/place/PlaceDetailPanel.tsx
index 7acebf3c..d3e923a9 100644
--- a/src/components/place/PlaceDetailPanel.tsx
+++ b/src/components/place/PlaceDetailPanel.tsx
@@ -4,6 +4,7 @@ import { X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
+import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
 import { useAnalyticsRoomId } from "@/hooks/useAnalyticsRoomId";
 import { useMobileView } from "@/contexts/MobileViewContext";
 import { useSelectedPlace } from "@/contexts/SelectedPlaceContext";
@@ -195,9 +196,13 @@ export function PlaceDetailPanel({
     : undefined;
 
   const tabs = isDetailError && !detailData ? (
-    <div role="alert" className="m-3.5 rounded-md border border-border-subtle p-3 text-body-s-regular text-text">
-      <p>장소 정보를 불러오지 못했어요.</p>
-      <button type="button" onClick={() => void refetch()} className="mt-2 text-primary underline">다시 시도</button>
+    <div className="p-3.5">
+      <Alert>
+        <AlertTitle>장소 정보를 불러오지 못했어요.</AlertTitle>
+        <AlertAction>
+          <button type="button" onClick={() => void refetch()} className="text-primary underline">다시 시도</button>
+        </AlertAction>
+      </Alert>
     </div>
   ) : (
     <PlaceDetailTabs
diff --git a/src/components/place/PlaceDetailSkeleton.tsx b/src/components/place/PlaceDetailSkeleton.tsx
index 421f82a7..ff0eed9c 100644
--- a/src/components/place/PlaceDetailSkeleton.tsx
+++ b/src/components/place/PlaceDetailSkeleton.tsx
@@ -1,35 +1,33 @@
-/** 장소 상세 본문 로딩 스켈레톤 — `PlaceSummaryHeader`·탭·홈 탭 배치를 따른다 */
-function Bar({ className }: { className: string }) {
-  return <div className={`animate-pulse rounded bg-fill-strong ${className}`} />;
-}
+import { Skeleton } from "@/components/ui/skeleton";
 
+/** 장소 상세 본문 로딩 스켈레톤 — `PlaceSummaryHeader`·탭·홈 탭 배치를 따른다 */
 export function PlaceDetailSkeleton() {
   return (
     <div aria-busy="true" aria-label="장소 정보를 불러오는 중">
       {/* 이름·카테고리·평점·액션 버튼 */}
       <div className="border-b border-gray-border px-5 pb-5 pt-4">
-        <Bar className="h-7 w-3/5" />
-        <Bar className="mt-2 h-4 w-1/4" />
-        <Bar className="mt-4 h-4 w-2/5" />
-        <Bar className="mt-4 h-11 w-full rounded-lg" />
+        <Skeleton className="h-7 w-3/5" />
+        <Skeleton className="mt-2 h-4 w-1/4" />
+        <Skeleton className="mt-4 h-4 w-2/5" />
+        <Skeleton className="mt-4 h-11 w-full rounded-lg" />
         <div className="mt-2 flex gap-2">
-          <Bar className="h-11 flex-1 rounded-lg" />
-          <Bar className="h-11 flex-1 rounded-lg" />
+          <Skeleton className="h-11 flex-1 rounded-lg" />
+          <Skeleton className="h-11 flex-1 rounded-lg" />
         </div>
       </div>
 
       {/* 탭 */}
       <div className="flex gap-4 border-b border-gray-border px-5 py-3">
-        <Bar className="h-4 flex-1" />
-        <Bar className="h-4 flex-1" />
+        <Skeleton className="h-4 flex-1" />
+        <Skeleton className="h-4 flex-1" />
       </div>
 
       {/* 홈 탭 본문 */}
       <div className="space-y-3 px-5 py-4">
-        <Bar className="h-4 w-4/5" />
-        <Bar className="h-4 w-3/5" />
-        <Bar className="h-4 w-2/3" />
-        <Bar className="h-4 w-1/2" />
+        <Skeleton className="h-4 w-4/5" />
+        <Skeleton className="h-4 w-3/5" />
+        <Skeleton className="h-4 w-2/3" />
+        <Skeleton className="h-4 w-1/2" />
       </div>
     </div>
   );
@@ -40,13 +38,13 @@ export function PlaceSheetSummarySkeleton() {
   return (
     <div aria-busy="true" aria-label="장소 정보를 불러오는 중">
       <div className="py-1 pl-5 pr-4">
-        <Bar className="mt-0.5 h-6 w-3/5" />
-        <Bar className="mt-2.5 h-4 w-1/4" />
-        <Bar className="mt-3 h-4 w-1/3" />
+        <Skeleton className="mt-0.5 h-6 w-3/5" />
+        <Skeleton className="mt-2.5 h-4 w-1/4" />
+        <Skeleton className="mt-3 h-4 w-1/3" />
       </div>
       <div className="flex gap-1 px-5 py-4">
-        <Bar className="h-9 flex-1 rounded-lg" />
-        <Bar className="h-9 flex-1 rounded-lg" />
+        <Skeleton className="h-9 flex-1 rounded-lg" />
+        <Skeleton className="h-9 flex-1 rounded-lg" />
       </div>
     </div>
   );
diff --git a/src/components/place/PlaceDetailTabs.tsx b/src/components/place/PlaceDetailTabs.tsx
index 3c5c8fd6..b45e039b 100644
--- a/src/components/place/PlaceDetailTabs.tsx
+++ b/src/components/place/PlaceDetailTabs.tsx
@@ -1,12 +1,17 @@
 "use client";
 
-import { useState, type ComponentProps } from "react";
+import type { ComponentProps } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import { HomeTab } from "./HomeTab";
 import { ReviewsTab } from "./ReviewsTab";
-import { TABS, type Tab } from "./types";
+import { TABS } from "./types";
 
-/** 장소 상세의 홈·리뷰 탭 — 장소 상세 패널·시트와 지도 경로 보기 카드가 함께 쓴다 */
+/**
+ * 장소 상세의 홈·리뷰 탭 — 장소 상세 패널·시트와 지도 경로 보기 카드가 함께 쓴다.
+ * 숨은 탭 패널은 언마운트된다(Tabs 기본 keepMounted false — 지금처럼 탭을 바꾸면 패널 state·스크롤이 처음부터)
+ */
 export function PlaceDetailTabs({
   home,
   reviews,
@@ -14,30 +19,21 @@ export function PlaceDetailTabs({
   home: ComponentProps<typeof HomeTab>;
   reviews: ComponentProps<typeof ReviewsTab>;
 }>) {
-  const [activeTab, setActiveTab] = useState<Tab>("홈");
-
   return (
-    <>
-      {/* Tab navigation */}
-      <div className="flex shrink-0 border-b border-gray-border">
+    <Tabs defaultValue={TABS[0]}>
+      <TabsList aria-label="장소 정보">
         {TABS.map((tab) => (
-          <button
-            key={tab}
-            onClick={() => setActiveTab(tab)}
-            className={`flex-1 py-2.5 text-label-s-regular mobile:text-label-xs-regular font-medium transition-colors ${
-              activeTab === tab
-                ? "border-b-2 border-primary text-primary"
-                : "text-dark-gray hover:text-[#364153]"
-            }`}
-          >
+          <TabsTrigger key={tab} value={tab}>
             {tab}
-          </button>
+          </TabsTrigger>
         ))}
-      </div>
-
-      {/* Tab content */}
-      {activeTab === "홈" && <HomeTab {...home} />}
-      {activeTab === "리뷰" && <ReviewsTab {...reviews} />}
-    </>
+      </TabsList>
+      <TabsContent value="홈">
+        <HomeTab {...home} />
+      </TabsContent>
+      <TabsContent value="리뷰">
+        <ReviewsTab {...reviews} />
+      </TabsContent>
+    </Tabs>
   );
 }
diff --git a/src/components/place/ReviewsTab.tsx b/src/components/place/ReviewsTab.tsx
index a3081638..47e44faf 100644
--- a/src/components/place/ReviewsTab.tsx
+++ b/src/components/place/ReviewsTab.tsx
@@ -1,5 +1,7 @@
 import { ExternalLink } from "lucide-react";
 
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
 import { StarRow } from "./StarRow";
 import type { PlaceReview } from "./types";
 
@@ -73,9 +75,9 @@ export function ReviewsTab({
       <div className="space-y-4">
         {reviews.map((review, i) => (
           <div key={i} className="flex gap-2.5">
-            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-100 text-body-s-emphasis mobile:text-body-xs-emphasis font-medium text-dark-gray">
-              {review.authorDisplayName?.charAt(0)}
-            </div>
+            <Avatar size={32} tone="neutral" aria-hidden>
+              <AvatarFallback>{review.authorDisplayName?.charAt(0)}</AvatarFallback>
+            </Avatar>
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-1.5">
                 <span className="text-body-s-emphasis mobile:text-body-xs-emphasis font-medium text-[#364153]">
diff --git a/src/components/place/room-analytics.test.tsx b/src/components/place/room-analytics.test.tsx
index 78bd0299..2e0e484d 100644
--- a/src/components/place/room-analytics.test.tsx
+++ b/src/components/place/room-analytics.test.tsx
@@ -184,3 +184,27 @@ it("keeps the extracted mobile delete sheet's room after its pending request com
     room_id: "room-a", item_count_bucket: "0",
   });
 });
+
+// Popup/backdrop containment must hold even when the modal belongs to a clickable place card.
+it.each(["bookmark", "schedule"])("contains %s modal pointer events and keeps backdrop dismissal", async kind => {
+  const outer = vi.fn();
+  const close = vi.fn();
+  const hostEvents = { onClick: outer, onMouseDown: outer, onPointerDown: outer, onTouchStart: outer };
+  await render(<div {...hostEvents}>
+    {kind === "bookmark"
+      ? <AddToBookmarkModal googlePlaceId="place" onClose={close} />
+      : <AddToScheduleModal googlePlaceId="place" onClose={close} />}
+  </div>);
+  const content = document.querySelector<HTMLElement>('[data-slot="dialog-content"]')!;
+  for (const type of ["mousedown", "pointerdown", "touchstart", "click"]) {
+    await act(async () => content.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true })));
+  }
+  expect(outer).not.toHaveBeenCalled();
+  expect(close).not.toHaveBeenCalled();
+  const backdrop = document.querySelector('[data-slot="dialog-overlay"]')!;
+  for (const type of ["mousedown", "pointerdown", "touchstart", "click"]) {
+    await act(async () => backdrop.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true })));
+  }
+  expect(outer).not.toHaveBeenCalled();
+  expect(close).toHaveBeenCalled();
+});
diff --git a/src/components/place/types.ts b/src/components/place/types.ts
index 182351f4..efc09e28 100644
--- a/src/components/place/types.ts
+++ b/src/components/place/types.ts
@@ -1,5 +1,4 @@
 export const TABS = ["홈", "리뷰"] as const;
-export type Tab = (typeof TABS)[number];
 
 export type { PlaceReview } from "@/lib/api/places";
 import type { PlaceReview } from "@/lib/api/places";
diff --git a/src/components/rooms/DestinationChipsField.tsx b/src/components/rooms/DestinationChipsField.tsx
index d40eaa85..dba323e5 100644
--- a/src/components/rooms/DestinationChipsField.tsx
+++ b/src/components/rooms/DestinationChipsField.tsx
@@ -1,22 +1,21 @@
 "use client";
 
-import { X } from "lucide-react";
 import { useState } from "react";
 
 import { DestinationSearchInput } from "@/components/search/DestinationSearchInput";
+import { Chip, ChipRemove } from "@/components/ui/chip";
 
 type Props = {
   values: string[];
   onChange: (next: string[]) => void;
-  readOnly?: boolean;
   maxCount: number;
   maxLength: number;
 };
 
+/** 목적지 검색 칸 → 고른 칩 → 경고 순서. 새 여행 만들기(`TripFormFields`)와 여행 정보 수정(`RoomTripEditForm`)이 같이 쓰고, 간격은 감싸는 Field가 준다 */
 export function DestinationChipsField({
   values,
   onChange,
-  readOnly = false,
   maxCount,
   maxLength,
 }: Props) {
@@ -50,48 +49,10 @@ export function DestinationChipsField({
     setDraft("");
   }
 
-  if (readOnly) {
-    if (!values.length) {
-      return <p className="text-body-m-regular mobile:text-body-s-regular text-dark-gray">—</p>;
-    }
-    return (
-      <div className="flex flex-wrap gap-2">
-        {values.map((v, i) => (
-          <span
-            key={`${v}-${i}`}
-            className="inline-flex items-center rounded-full bg-bubble-gray/60 px-3 py-1 text-body-s-regular mobile:text-body-xs-regular text-dark-gray"
-          >
-            {v}
-          </span>
-        ))}
-      </div>
-    );
-  }
-
   return (
-    <div className="space-y-2">
-      {values.length > 0 ? (
-        <div className="flex flex-wrap gap-2">
-          {values.map((v, i) => (
-            <span
-              key={`${v}-${i}`}
-              className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 py-1.5 pl-3 pr-1.5 text-body-s-regular mobile:text-body-xs-regular text-primary"
-            >
-              {v}
-              <button
-                type="button"
-                onClick={() => remove(i)}
-                aria-label={`${v} 삭제`}
-                className="rounded-full p-0.5 transition hover:bg-primary/20"
-              >
-                <X size={14} />
-              </button>
-            </span>
-          ))}
-        </div>
-      ) : null}
+    <>
       {atMax ? (
-        <p className="text-body-s-regular mobile:text-body-xs-regular text-light-gray">
+        <p className="flex h-12 w-full min-w-0 items-center rounded-lg border border-border bg-fill-subtle pl-3.5 pr-2.5 text-body-m-regular mobile:text-body-s-regular text-text-disabled">
           최대 {maxCount}개까지 추가할 수 있어요
         </p>
       ) : (
@@ -99,13 +60,24 @@ export function DestinationChipsField({
           value={draft}
           onChange={setDraft}
           onResolvedPlace={handleResolved}
+          placeholder="여행지를 검색해 선택하세요"
           selectionOnly
-          leadingIconType="search"
+          appearance="field"
         />
       )}
+      {values.length > 0 ? (
+        <div className="mt-1 flex flex-wrap gap-2">
+          {values.map((v, i) => (
+            <Chip key={`${v}-${i}`} variant="outline" size="md" selected className="max-w-full">
+              <span className="min-w-0 truncate">{v}</span>
+              <ChipRemove aria-label={`${v} 삭제`} onClick={() => remove(i)} />
+            </Chip>
+          ))}
+        </div>
+      ) : null}
       {inlineWarning ? (
         <p className="text-body-s-regular mobile:text-body-xs-regular text-primary">{inlineWarning}</p>
       ) : null}
-    </div>
+    </>
   );
 }
diff --git a/src/components/rooms/InviteRoomDialog.tsx b/src/components/rooms/InviteRoomDialog.tsx
index 3c91d4ec..4178c872 100644
--- a/src/components/rooms/InviteRoomDialog.tsx
+++ b/src/components/rooms/InviteRoomDialog.tsx
@@ -1,9 +1,14 @@
 "use client";
 
+import type { ComponentProps } from "react";
+
 import { AddMemberPanel } from "@/app/(main)/member-settings/_components/AddMemberPanel";
-import { SettingsDialog } from "@/components/settings/SettingsDialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 
-/** 초대하기 모달 — PC 헤더와 홈 방 카드 메뉴가 같이 쓴다. 불러오기·오류·권한 안내는 `AddMemberPanel`이 맡는다 */
+/**
+ * 초대하기 모달 — PC 헤더와 홈 방 카드 메뉴가 같이 쓴다. 불러오기·오류·권한 안내는 `AddMemberPanel`이 맡는다.
+ * 마운트되면 열린 상태라 호출부가 조건부로 그린다. 메뉴 항목처럼 여는 요소가 닫힌 뒤 사라지면 finalFocus로 돌아갈 곳을 준다
+ */
 export function InviteRoomDialog({
   roomId,
   inviteCode,
@@ -13,6 +18,7 @@ export function InviteRoomDialog({
   isRoomDetailError,
   onRetryRoomDetail,
   onClose,
+  finalFocus,
 }: Readonly<{
   roomId: string;
   inviteCode: string | null | undefined;
@@ -22,32 +28,45 @@ export function InviteRoomDialog({
   isRoomDetailError: boolean;
   onRetryRoomDetail?: () => void;
   onClose: () => void;
+  finalFocus?: ComponentProps<typeof DialogContent>["finalFocus"];
 }>) {
   return (
-    <SettingsDialog title="초대하기" appearance="alert" onClose={onClose}>
-      <p className="text-body-l-regular text-text">링크를 공유해 함께 여행을 계획해 보세요.</p>
-      <div className="mt-4">
-        <AddMemberPanel
-          key={roomId}
-          roomId={roomId}
-          inviteCode={inviteCode}
-          memberCount={memberCount}
-          role={role}
-          isRoomDetailLoading={isRoomDetailLoading}
-          isRoomDetailError={isRoomDetailError}
-          showDescription={false}
-        />
-        {isRoomDetailError && onRetryRoomDetail ? (
-          <button
-            type="button"
-            onClick={onRetryRoomDetail}
-            disabled={isRoomDetailLoading}
-            className="mt-3 cursor-pointer rounded-sm text-label-m-emphasis text-primary transition-colors enabled:hover:text-primary-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-40"
-          >
-            다시 시도
-          </button>
-        ) : null}
-      </div>
-    </SettingsDialog>
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent size="md" closeLabel="초대하기 닫기" finalFocus={finalFocus}>
+        <DialogHeader>
+          <DialogTitle>초대하기</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-4">
+          <p className="text-body-l-regular text-text">링크를 공유해 함께 여행을 계획해 보세요.</p>
+          <div className="flex flex-col gap-3">
+            <AddMemberPanel
+              key={roomId}
+              roomId={roomId}
+              inviteCode={inviteCode}
+              memberCount={memberCount}
+              role={role}
+              isRoomDetailLoading={isRoomDetailLoading}
+              isRoomDetailError={isRoomDetailError}
+              showDescription={false}
+            />
+            {isRoomDetailError && onRetryRoomDetail ? (
+              <button
+                type="button"
+                onClick={onRetryRoomDetail}
+                disabled={isRoomDetailLoading}
+                className="cursor-pointer self-start rounded-sm text-label-m-emphasis text-primary transition-colors enabled:hover:text-primary-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-40"
+              >
+                다시 시도
+              </button>
+            ) : null}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/components/rooms/RoomTripEditDialog.test.tsx b/src/components/rooms/RoomTripEditDialog.test.tsx
index ca3089a1..29eafa08 100644
--- a/src/components/rooms/RoomTripEditDialog.test.tsx
+++ b/src/components/rooms/RoomTripEditDialog.test.tsx
@@ -27,7 +27,17 @@ import HeaderBar from "@/components/layout/HeaderBar";
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 let host: HTMLDivElement;
 let root: Root;
-const dialog = () => document.querySelector<HTMLDialogElement>("dialog[open]");
+// Base UI 대화상자는 document.body로 포털된다. 여행 정보 수정 대화상자는 제목(aria-labelledby)으로 찾는다
+const dialogs = () => [...document.querySelectorAll<HTMLElement>('[role="dialog"]')];
+const editDialogs = () =>
+  dialogs().filter((node) => document.getElementById(node.getAttribute("aria-labelledby") ?? "")?.textContent === "여행 정보 수정");
+const dialog = () => editDialogs()[0] ?? null;
+// 열림·닫힘 처리와 처음 포커스는 Base UI가 다음 animation frame에 마친다
+async function nextFrame() {
+  await act(async () => {
+    await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+  });
+}
 const button = (label: string, scope: ParentNode = document) => {
   const node = [...scope.querySelectorAll<HTMLButtonElement>("button")].find(
     (item) => item.getAttribute("aria-label") === label || item.textContent === label,
@@ -51,10 +61,12 @@ async function open() {
   const trigger = button("여행 정보 수정", host);
   trigger.focus();
   await click("여행 정보 수정", host);
+  await nextFrame();
   return trigger;
 }
 const dateField = (edge: "start" | "end") => dialog()!.querySelector<HTMLButtonElement>(`#trip-room-${edge}`)!;
-const picker = () => dialog()!.querySelector<HTMLElement>('[role="dialog"][aria-label="날짜 선택"]');
+// 날짜 선택 팝업도 body로 포털돼 여행 정보 수정 대화상자 밖에 그려진다
+const picker = () => document.querySelector<HTMLElement>('[role="dialog"][aria-label="날짜 선택"]');
 const day = (ymd: string) => picker()!.querySelector<HTMLButtonElement>(`button[data-ymd="${ymd}"]`)!;
 /** 날짜 칸을 눌러 달력을 열고, 날짜를 차례로 누른 뒤 확인한다 */
 async function pickDates(edge: "start" | "end", ...days: string[]) {
@@ -75,10 +87,12 @@ afterEach(async () => { await act(async () => root.unmount()); host.remove(); })
 it("opens one named modal beside the title and closing discards its draft with focus restoration", async () => {
   const trigger = await open();
   expect(trigger.parentElement?.textContent).toContain("가을 여행");
-  expect(document.querySelectorAll("dialog[open]")).toHaveLength(1);
+  expect(dialogs()).toHaveLength(1);
+  expect(editDialogs()).toHaveLength(1);
   expect(document.getElementById(dialog()!.getAttribute("aria-labelledby")!)?.textContent).toBe("여행 정보 수정");
   await change('input[type="text"]', "임시 제목");
   await click("여행 정보 수정 닫기", dialog()!);
+  await nextFrame();
   expect(dialog()).toBeNull(); expect(document.activeElement).toBe(trigger);
   await open();
   expect(dialog()!.querySelector<HTMLInputElement>('input[type="text"]')!.value).toBe("가을 여행");
@@ -97,6 +111,23 @@ it("uses the existing trimmed mutation payload and closes only after save succee
   expect(dialog()).toBeNull();
 });
 
+it("shows the title error under the title field and locks apply until a title is entered", async () => {
+  await open();
+  const title = () => dialog()!.querySelector<HTMLInputElement>('input[type="text"]')!;
+  expect(title().hasAttribute("aria-invalid")).toBe(false);
+  await change('input[type="text"]', "   ");
+  expect(title().getAttribute("aria-invalid")).toBe("true");
+  const error = document.getElementById(title().getAttribute("aria-describedby")!);
+  expect(error?.getAttribute("role")).toBe("alert");
+  expect(error?.textContent).toBe("여행 제목을 입력해 주세요.");
+  expect(button("적용하기", dialog()!).disabled).toBe(true);
+  await change('input[type="text"]', "새 제목");
+  expect(title().hasAttribute("aria-invalid")).toBe(false);
+  expect(dialog()!.textContent).not.toContain("여행 제목을 입력해 주세요.");
+  expect(button("적용하기", dialog()!).disabled).toBe(false);
+  expect(state.update).not.toHaveBeenCalled();
+});
+
 it("allows an earlier start date and keeps date ordering and required destination validation", async () => {
   await open();
   // 저장된 시작일보다 이른 날짜로도 시작일을 앞당길 수 있다
@@ -110,6 +141,7 @@ it("allows an earlier start date and keeps date ordering and required destinatio
   expect(dateField("end").getAttribute("aria-label")).toContain("2026년 10월 12일");
   await click("서울 삭제", dialog()!);
   expect(button("적용하기", dialog()!).disabled).toBe(true);
+  expect([...dialog()!.querySelectorAll('[role="alert"]')].map((node) => node.textContent)).toContain("여행지를 하나 이상 선택해 주세요.");
   expect(state.update).not.toHaveBeenCalled();
 });
 
@@ -168,20 +200,21 @@ it.each(["loading", "missing"])("does not offer editing for %s room data", async
   if (mode === "missing") expect(dialog()!.textContent).toContain("여행 정보를 불러오지 못했어요.");
 });
 
-it("contains shrink confirmation focus and Escape dismisses only confirmation, preserving the draft", async () => {
+// Tab 순환(포커스 가두기)은 Base UI 확인창이 맡는다. 여기서는 처음 포커스·Esc 범위·포커스 복귀를 본다
+it("focuses the shrink confirmation and Escape dismisses only confirmation, preserving the draft", async () => {
   await open();
   await pickDates("end", "2026-10-10");
   button("적용하기", dialog()!).focus();
   await click("적용하기", dialog()!);
-  const confirm = document.querySelector('[role="alertdialog"]')!;
+  await nextFrame();
+  const confirm = document.querySelector<HTMLElement>('[role="alertdialog"]')!;
   expect(confirm).not.toBeNull();
-  expect(confirm.contains(document.activeElement)).toBe(true);
-  await act(async () => {
-    button("계속하기", confirm).focus();
-    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true }));
-  });
+  expect(document.getElementById(confirm.getAttribute("aria-labelledby")!)?.textContent).toBe("여행 기간을 줄일까요?");
+  // 확인창의 처음 포커스는 취소다(Enter 한 번에 삭제되는 계속하기가 실행되지 않게)
   expect(document.activeElement).toBe(button("취소", confirm));
+  expect(state.update).not.toHaveBeenCalled();
   await act(async () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
+  await nextFrame();
   expect(document.querySelector('[role="alertdialog"]')).toBeNull();
   expect(dialog()).not.toBeNull();
   expect(dateField("end").getAttribute("aria-label")).toContain("2026년 10월 10일");
@@ -189,6 +222,55 @@ it("contains shrink confirmation focus and Escape dismisses only confirmation, p
   expect(state.update).not.toHaveBeenCalled();
 });
 
+it("saves the shortened period from the confirmation and keeps it open while saving", async () => {
+  await open();
+  await pickDates("end", "2026-10-10");
+  await click("적용하기", dialog()!);
+  await nextFrame();
+  let confirm = document.querySelector<HTMLElement>('[role="alertdialog"]')!;
+  await click("계속하기", confirm);
+  expect(state.update).toHaveBeenCalledWith(expect.objectContaining({
+    roomId: "room", data: expect.objectContaining({ startDate: "2026-10-10", endDate: "2026-10-10" }),
+  }), expect.any(Object));
+  // 저장 중에는 확인창이 Esc로 닫히지 않고 계속하기가 진행 표시(저장 중)로 바뀐다
+  state.pending = true;
+  await act(async () => root.render(<HeaderBar />));
+  confirm = document.querySelector<HTMLElement>('[role="alertdialog"]')!;
+  const proceed = [...confirm.querySelectorAll<HTMLButtonElement>("button")].find((node) => node.getAttribute("aria-busy") === "true")!;
+  expect(proceed).toBeDefined();
+  expect(document.getElementById(proceed.getAttribute("aria-labelledby")!)?.textContent).toBe("저장 중");
+  await act(async () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
+  await nextFrame();
+  expect(document.querySelector('[role="alertdialog"]')).not.toBeNull();
+  expect(dialog()).not.toBeNull();
+  state.pending = false;
+  await act(async () => state.update.mock.calls[0][1].onSuccess());
+  await nextFrame();
+  expect(document.querySelector('[role="alertdialog"]')).toBeNull();
+  expect(dialog()).toBeNull();
+});
+
+it("does not close the edit dialog by Escape or X while saving", async () => {
+  await open();
+  await change("#trip-room-title", "도쿄 2");
+  await click("적용하기", dialog()!);
+  expect(state.update).toHaveBeenCalledTimes(1);
+  state.pending = true;
+  await act(async () => root.render(<HeaderBar />));
+  await act(async () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
+  await nextFrame();
+  expect(dialog()).not.toBeNull();
+  const close = dialog()!.querySelector<HTMLButtonElement>('[aria-label="여행 정보 수정 닫기"]')!;
+  await act(async () => close.click());
+  await nextFrame();
+  expect(dialog()).not.toBeNull();
+  state.pending = false;
+  await act(async () => root.render(<HeaderBar />));
+  await act(async () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
+  await nextFrame();
+  expect(dialog()).toBeNull();
+});
+
 it("names the existing title, destination and date fields", async () => {
   await open();
   const modal = dialog()!;
diff --git a/src/components/rooms/RoomTripEditDialog.tsx b/src/components/rooms/RoomTripEditDialog.tsx
index 59025560..b640ac83 100644
--- a/src/components/rooms/RoomTripEditDialog.tsx
+++ b/src/components/rooms/RoomTripEditDialog.tsx
@@ -4,18 +4,37 @@ import {
   RoomTripDeleteButton,
   RoomTripSettingsSection,
 } from "@/components/rooms/RoomTripSettingsSection";
-import { SettingsDialog } from "@/components/settings/SettingsDialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { useUpdateRoom } from "@/hooks/useRooms";
 
+/**
+ * 여행 정보 수정 대화상자. 마운트되면 열린 상태라 HeaderBar가 조건부로 그린다.
+ * 기간 축소 확인(RoomTripEditForm)·여행 삭제 확인(RoomTripDeleteButton)은 이 대화상자의 React 자식이라 위 레이어만 Esc·포커스를 받는다.
+ * 저장 요청을 여기서 만들어 폼에 내려 주고, 저장 중에는 Esc·딤·X로 닫히지 않게 한다(대화상자 공통 규칙)
+ */
 export function RoomTripEditDialog({ onClose }: { onClose: () => void }) {
+  const update = useUpdateRoom();
   return (
-    <SettingsDialog title="여행 정보 수정" onClose={onClose} size="medium" className="rounded-xl">
-      <div className="pt-4">
-        <RoomTripSettingsSection onSaved={onClose} />
-      </div>
-      {/* 여행 삭제는 적용하기 아래 모달 오른쪽 끝 — 방장이 아니면 버튼이 없어 줄째 숨긴다 */}
-      <div className="mt-3 flex justify-end empty:hidden">
-        <RoomTripDeleteButton />
-      </div>
-    </SettingsDialog>
+    <Dialog
+      open
+      closeDisabled={update.isPending}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      {/* 지금 폭 600은 lg(640)로 붙였다(ui/dialog.tsx size 주석) */}
+      <DialogContent size="lg" closeLabel="여행 정보 수정 닫기">
+        <DialogHeader>
+          <DialogTitle>여행 정보 수정</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-3">
+          <RoomTripSettingsSection update={update} onSaved={onClose} />
+          {/* 여행 삭제는 적용하기 아래 오른쪽 끝 — 방장이 아니면 버튼이 없어 줄째 숨긴다 */}
+          <div className="flex justify-end empty:hidden">
+            <RoomTripDeleteButton />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/components/rooms/RoomTripEditFields.tsx b/src/components/rooms/RoomTripEditFields.tsx
deleted file mode 100644
index 7309df9c..00000000
--- a/src/components/rooms/RoomTripEditFields.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-"use client";
-
-import { useState, type ReactNode } from "react";
-
-import { CloseIcon } from "@/assets/icons";
-import { DateRangeField } from "@/components/date-picker/DateRangeField";
-import { DestinationSearchInput } from "@/components/search/DestinationSearchInput";
-import {
-  isTripScheduleDayLimitExceeded,
-  TRIP_SCHEDULE_DAY_LIMIT_MESSAGE,
-} from "@/lib/plan/schedulePolicy";
-import {
-  isTripDateRangeInvalid,
-  ROOM_TRIP_TITLE_MAX_LENGTH,
-  TRIP_DATE_RANGE_INVALID_MESSAGE,
-  TRIP_DESTINATION_MAX_LENGTH,
-  TRIP_DESTINATIONS_MAX_COUNT,
-  type TripFormValues,
-} from "@/lib/rooms/trip-form";
-import { cn } from "@/lib/utils";
-
-const FIELD_BOX_CLASS =
-  "flex h-12 w-full min-w-0 items-center rounded-lg border border-border bg-fill-subtle pl-3.5 pr-2.5 text-body-m-regular mobile:text-body-s-regular text-text-subtle";
-const MESSAGE_CLASS = "text-body-s-regular mobile:text-body-xs-regular text-primary";
-
-type Props = {
-  idPrefix: string;
-  values: TripFormValues;
-  readOnly?: boolean;
-  onTitleChange: (value: string) => void;
-  onDestinationsChange: (next: string[]) => void;
-  onStartDateChange: (value: string) => void;
-  onEndDateChange: (value: string) => void;
-};
-
-function Field({ label, htmlFor, className, children }: Readonly<{ label: string; htmlFor?: string; className?: string; children: ReactNode }>) {
-  const LabelTag = htmlFor ? "label" : "p";
-  return (
-    <div className={cn("flex min-w-0 flex-col gap-1", className)}>
-      <LabelTag {...(htmlFor ? { htmlFor } : {})} className="text-label-xs-regular text-text">
-        {label}
-      </LabelTag>
-      {children}
-    </div>
-  );
-}
-
-/** 여행 정보 수정 모달 전용 입력 필드 — 새 여행 만들기(`TripFormFields`)와 분리 */
-export function RoomTripEditFields({
-  idPrefix,
-  values,
-  readOnly = false,
-  onTitleChange,
-  onDestinationsChange,
-  onStartDateChange,
-  onEndDateChange,
-}: Readonly<Props>) {
-  const { title, destinations, startDate, endDate } = values;
-  const [destinationDraft, setDestinationDraft] = useState("");
-  const [destinationWarning, setDestinationWarning] = useState<string | null>(null);
-  const destinationsFull = destinations.length >= TRIP_DESTINATIONS_MAX_COUNT;
-  const dateRangeInvalid = isTripDateRangeInvalid(startDate, endDate);
-  const scheduleDayLimitExceeded = isTripScheduleDayLimitExceeded(startDate, endDate);
-  let dateMessage = null;
-  if (dateRangeInvalid) dateMessage = TRIP_DATE_RANGE_INVALID_MESSAGE;
-  else if (scheduleDayLimitExceeded) dateMessage = TRIP_SCHEDULE_DAY_LIMIT_MESSAGE;
-
-  function addDestination(place: { description: string; placeId: string } | null) {
-    if (!place) return;
-    const next = place.description.trim().slice(0, TRIP_DESTINATION_MAX_LENGTH);
-    setDestinationDraft("");
-    if (!next) return;
-    if (destinations.includes(next)) {
-      setDestinationWarning("이미 추가한 여행지예요");
-      return;
-    }
-    if (destinationsFull) {
-      setDestinationWarning(`여행지는 최대 ${TRIP_DESTINATIONS_MAX_COUNT}개까지 추가할 수 있어요`);
-      return;
-    }
-    setDestinationWarning(null);
-    onDestinationsChange([...destinations, next]);
-  }
-
-  if (readOnly) {
-    return (
-      <div className="flex min-w-0 flex-col gap-6">
-        <Field label="여행 제목">
-          <p className={FIELD_BOX_CLASS}><span className="truncate">{title.trim() || "—"}</span></p>
-        </Field>
-        <Field label="목적지">
-          <p className={FIELD_BOX_CLASS}><span className="truncate">{destinations.join(", ") || "—"}</span></p>
-        </Field>
-        <DateRangeField
-          idPrefix={idPrefix}
-          value={{ start: startDate, end: endDate }}
-          readOnly
-          onChange={() => {}}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex min-w-0 flex-col gap-6">
-      <Field label="여행 제목" htmlFor={`${idPrefix}-title`}>
-        <input
-          id={`${idPrefix}-title`}
-          type="text"
-          value={title}
-          maxLength={ROOM_TRIP_TITLE_MAX_LENGTH}
-          onChange={(event) => onTitleChange(event.target.value.slice(0, ROOM_TRIP_TITLE_MAX_LENGTH))}
-          placeholder="예: 봄 일본 여행, 하와이 신혼여행"
-          className={cn(FIELD_BOX_CLASS, "outline-none placeholder:text-text-disabled focus:border-primary")}
-        />
-      </Field>
-
-      <Field label="목적지">
-        {destinationsFull ? (
-          <p className={cn(FIELD_BOX_CLASS, "text-text-disabled")}>
-            최대 {TRIP_DESTINATIONS_MAX_COUNT}개까지 추가할 수 있어요
-          </p>
-        ) : (
-          <DestinationSearchInput
-            value={destinationDraft}
-            onChange={setDestinationDraft}
-            onResolvedPlace={addDestination}
-            placeholder="여행지를 검색해 선택하세요"
-            selectionOnly
-            showLeadingIcon={false}
-            appearance="field"
-          />
-        )}
-        {destinations.length > 0 ? (
-          <div className="mt-1 flex flex-wrap gap-2">
-            {destinations.map((destination, index) => (
-              <span
-                key={`${destination}-${index}`}
-                className="inline-flex items-center gap-1 rounded-full bg-primary-subtle py-1 pl-3 pr-1.5 text-label-m-regular text-primary"
-              >
-                {destination}
-                <button
-                  type="button"
-                  onClick={() => {
-                    onDestinationsChange(destinations.filter((_, i) => i !== index));
-                    setDestinationWarning(null);
-                  }}
-                  aria-label={`${destination} 삭제`}
-                  className="rounded-full p-0.5 transition-colors hover:bg-primary/20"
-                >
-                  <CloseIcon size={16} />
-                </button>
-              </span>
-            ))}
-          </div>
-        ) : null}
-        {destinationWarning ? <p className={MESSAGE_CLASS}>{destinationWarning}</p> : null}
-      </Field>
-
-      <div className="flex min-w-0 flex-col gap-2">
-        {/* 스크롤되는 모달이고 칸 폭(약 176px)에 맞추면 달력이 절반 크기가 되어 팝업으로 띄운다 */}
-        <DateRangeField
-          idPrefix={idPrefix}
-          value={{ start: startDate, end: endDate }}
-          popupOnly
-          onChange={(next) => {
-            onStartDateChange(next.start);
-            onEndDateChange(next.end);
-          }}
-        />
-        {dateMessage ? <p className={MESSAGE_CLASS}>{dateMessage}</p> : null}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/rooms/RoomTripEditForm.test.tsx b/src/components/rooms/RoomTripEditForm.test.tsx
index ec489a1d..be2e5424 100644
--- a/src/components/rooms/RoomTripEditForm.test.tsx
+++ b/src/components/rooms/RoomTripEditForm.test.tsx
@@ -3,18 +3,28 @@ import { act, type ComponentProps } from "react";
 import { createRoot } from "react-dom/client";
 import { expect, it, vi } from "vitest";
 import { RoomTripEditForm } from "./RoomTripEditForm";
-import type { RoomTripEditFields } from "./RoomTripEditFields";
+import type { DestinationChipsField } from "./DestinationChipsField";
+import type { DateRangeField } from "@/components/date-picker/DateRangeField";
 const state = vi.hoisted(() => ({
-  fields: null as ComponentProps<typeof RoomTripEditFields> | null,
+  destinations: null as ComponentProps<typeof DestinationChipsField> | null,
+  dates: null as ComponentProps<typeof DateRangeField> | null,
   update: vi.fn(),
 }));
 vi.mock("@/hooks/useRooms", () => ({
   useRoomSchedules: () => ({ data: [{}, {}, {}] }),
-  useUpdateRoom: () => ({ mutate: state.update, isPending: false }),
 }));
-vi.mock("./RoomTripEditFields", () => ({
-  RoomTripEditFields: (props: ComponentProps<typeof RoomTripEditFields>) => {
-    state.fields = props;
+// 저장 요청은 대화상자(RoomTripEditDialog)가 만들어 내려 준다
+const update = { mutate: state.update, isPending: false, error: null } as unknown as ComponentProps<typeof RoomTripEditForm>["update"];
+// 목적지 검색(구글 장소)과 날짜 달력은 칸이 받은 값·onChange만 본다. 제목은 실제 입력 칸을 쓴다
+vi.mock("./DestinationChipsField", () => ({
+  DestinationChipsField: (props: ComponentProps<typeof DestinationChipsField>) => {
+    state.destinations = props;
+    return null;
+  },
+}));
+vi.mock("@/components/date-picker/DateRangeField", () => ({
+  DateRangeField: (props: ComponentProps<typeof DateRangeField>) => {
+    state.dates = props;
     return null;
   },
 }));
@@ -22,6 +32,20 @@ vi.mock("./TripDateShrinkConfirmModal", () => ({
   TripDateShrinkConfirmModal: () => <div data-confirm />,
 }));
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const titleInput = (container: HTMLElement) => container.querySelector<HTMLInputElement>("input")!;
+const applyButton = (container: HTMLElement) => container.querySelector<HTMLButtonElement>("button")!;
+async function typeTitle(container: HTMLElement, value: string) {
+  const input = titleInput(container);
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(input, value);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}
+async function changeDates(start: string, end: string) {
+  await act(async () => state.dates!.onChange({ start, end }));
+}
+
 it("preserves drafts on same-room refresh; reopening and room switch reset correctly", async () => {
   const container = document.createElement("div");
   const root = createRoot(container);
@@ -33,26 +57,22 @@ it("preserves drafts on same-room refresh; reopening and room switch reset corre
     endDate: "2026-10-12",
   };
   const render = async (value: typeof room) => {
-    await act(async () => root.render(<RoomTripEditForm room={value} />));
+    await act(async () => root.render(<RoomTripEditForm update={update} room={value} />));
   };
   await render(room);
-  await act(async () => state.fields!.onTitleChange("draft"));
+  await typeTitle(container, "draft");
   await render({ ...room, destinations: [...room.destinations] });
-  expect(state.fields!.values.title).toBe("draft");
+  expect(titleInput(container).value).toBe("draft");
   await act(async () => root.render(null));
   await render(room);
-  expect(state.fields!.values.title).toBe("A");
-  await act(async () => {
-    state.fields!.onStartDateChange("2026-10-11");
-    state.fields!.onEndDateChange("2026-10-11");
-  });
+  expect(titleInput(container).value).toBe("A");
+  await changeDates("2026-10-11", "2026-10-11");
   await act(async () => root.render(null));
   await render(room);
-  expect(state.fields!.values.startDate).toBe("2026-10-10");
-  expect(state.fields!.values.endDate).toBe("2026-10-12");
+  expect(state.dates!.value).toEqual({ start: "2026-10-10", end: "2026-10-12" });
   await render({ ...room, startDate: "2026-10-11" });
-  await act(async () => state.fields!.onEndDateChange("2026-10-11"));
-  await act(async () => container.querySelector<HTMLButtonElement>("button")!.click());
+  await changeDates(state.dates!.value.start, "2026-10-11");
+  await act(async () => applyButton(container).click());
   expect(container.querySelector("[data-confirm]")).not.toBeNull();
   await render({
     ...room,
@@ -61,7 +81,7 @@ it("preserves drafts on same-room refresh; reopening and room switch reset corre
     startDate: "2026-11-10",
     endDate: "2026-11-12",
   });
-  expect(state.fields!.values.title).toBe("B");
+  expect(titleInput(container).value).toBe("B");
   expect(container.querySelector("[data-confirm]")).toBeNull();
   expect(state.update).not.toHaveBeenCalled();
   await act(async () => root.unmount());
@@ -71,17 +91,17 @@ it("keeps the values from when it opened while the server changes and saves the
   state.update.mockClear();
   const container = document.createElement("div");
   const root = createRoot(container);
-  const apply = () => container.querySelector<HTMLButtonElement>("button")!;
   const room = { id: "r", title: "A", destinations: ["서울"], startDate: "2027-01-01", endDate: "2027-01-03" };
-  await act(async () => root.render(<RoomTripEditForm room={room} />));
+  await act(async () => root.render(<RoomTripEditForm update={update} room={room} />));
   // 열어 둔 사이 다른 멤버가 제목과 종료일을 바꿨다
   const changedByOther = { ...room, title: "B", endDate: "2027-01-05" };
-  await act(async () => root.render(<RoomTripEditForm room={changedByOther} />));
-  expect(state.fields!.values).toMatchObject({ title: "A", endDate: "2027-01-03" });
-  expect(apply().disabled).toBe(true);
+  await act(async () => root.render(<RoomTripEditForm update={update} room={changedByOther} />));
+  expect(titleInput(container).value).toBe("A");
+  expect(state.dates!.value.end).toBe("2027-01-03");
+  expect(applyButton(container).disabled).toBe(true);
   // 서버 최신 기간(01-01~01-05)에서 잘리는 일차가 있으면 축소 확인을 띄운다
-  await act(async () => state.fields!.onEndDateChange("2027-01-04"));
-  await act(async () => apply().click());
+  await changeDates(state.dates!.value.start, "2027-01-04");
+  await act(async () => applyButton(container).click());
   expect(container.querySelector("[data-confirm]")).not.toBeNull();
   expect(state.update).not.toHaveBeenCalled();
   await act(async () => root.unmount());
@@ -89,11 +109,11 @@ it("keeps the values from when it opened while the server changes and saves the
   // A가 28일로 연 사이 B가 시작일을 30일로 바꾸고, A가 제목만 고쳐 저장하면 A 화면의 28일이 저장된다
   const second = createRoot(container);
   const opened = { id: "r", title: "A", destinations: ["서울"], startDate: "2027-01-28", endDate: "2027-01-31" };
-  await act(async () => second.render(<RoomTripEditForm room={opened} />));
-  await act(async () => second.render(<RoomTripEditForm room={{ ...opened, startDate: "2027-01-30" }} />));
-  expect(state.fields!.values.startDate).toBe("2027-01-28");
-  await act(async () => state.fields!.onTitleChange("C"));
-  await act(async () => apply().click());
+  await act(async () => second.render(<RoomTripEditForm update={update} room={opened} />));
+  await act(async () => second.render(<RoomTripEditForm update={update} room={{ ...opened, startDate: "2027-01-30" }} />));
+  expect(state.dates!.value.start).toBe("2027-01-28");
+  await typeTitle(container, "C");
+  await act(async () => applyButton(container).click());
   expect(state.update).toHaveBeenCalledWith(
     {
       roomId: "r",
@@ -111,10 +131,10 @@ it("allows moving the start date earlier than the saved start date", async () =>
   const container = document.createElement("div");
   const root = createRoot(container);
   const room = { id: "r", title: "A", destinations: ["서울"], startDate: "2027-01-04", endDate: "2027-01-11" };
-  await act(async () => root.render(<RoomTripEditForm room={room} />));
-  expect("startDateMin" in state.fields!).toBe(false);
-  await act(async () => state.fields!.onStartDateChange("2027-01-02"));
-  await act(async () => container.querySelector<HTMLButtonElement>("button")!.click());
+  await act(async () => root.render(<RoomTripEditForm update={update} room={room} />));
+  expect(state.dates!.min).toBeUndefined();
+  await changeDates("2027-01-02", state.dates!.value.end);
+  await act(async () => applyButton(container).click());
   expect(state.update).toHaveBeenCalledWith(
     expect.objectContaining({
       data: expect.objectContaining({ startDate: "2027-01-02", endDate: "2027-01-11" }),
@@ -129,14 +149,51 @@ it("does not submit draft edits and submits once for rapid apply clicks", async
   const container = document.createElement("div");
   const root = createRoot(container);
   const room = { id: "r", title: "old", destinations: ["서울"], startDate: "2027-01-01", endDate: "2027-01-03" };
-  await act(async () => root.render(<RoomTripEditForm room={room} />));
-  await act(async () => state.fields!.onTitleChange("cancelled"));
+  await act(async () => root.render(<RoomTripEditForm update={update} room={room} />));
+  await typeTitle(container, "cancelled");
   expect(state.update).not.toHaveBeenCalled();
-  await act(async () => state.fields!.onTitleChange("new"));
+  await typeTitle(container, "new");
   await act(async () => {
-    container.querySelector<HTMLButtonElement>("button")!.click();
-    container.querySelector<HTMLButtonElement>("button")!.click();
+    applyButton(container).click();
+    applyButton(container).click();
   });
   expect(state.update).toHaveBeenCalledTimes(1);
   await act(async () => root.unmount());
 });
+
+it("shows each field's error under that field and locks apply until it is fixed", async () => {
+  state.update.mockClear();
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  const room = { id: "r", title: "A", destinations: ["서울"], startDate: "2027-01-01", endDate: "2027-01-03" };
+  await act(async () => root.render(<RoomTripEditForm update={update} room={room} />));
+  expect(container.textContent).not.toContain("입력해 주세요");
+
+  // 제목을 비우면 제목 칸이 오류 상태가 되고 칸 아래에 문장이 붙는다
+  await typeTitle(container, "  ");
+  expect(titleInput(container).getAttribute("aria-invalid")).toBe("true");
+  const titleError = container.querySelector(`#${titleInput(container).getAttribute("aria-describedby")}`);
+  expect(titleError?.textContent).toBe("여행 제목을 입력해 주세요.");
+  expect(applyButton(container).disabled).toBe(true);
+  await typeTitle(container, "B");
+  expect(titleInput(container).hasAttribute("aria-invalid")).toBe(false);
+  expect(container.textContent).not.toContain("여행 제목을 입력해 주세요.");
+  expect(applyButton(container).disabled).toBe(false);
+
+  // 목적지를 모두 지우면 목적지 아래에 문장이 붙는다
+  await act(async () => state.destinations!.onChange([]));
+  expect(container.textContent).toContain("여행지를 하나 이상 선택해 주세요.");
+  expect(applyButton(container).disabled).toBe(true);
+  await act(async () => state.destinations!.onChange(["부산"]));
+  expect(container.textContent).not.toContain("여행지를 하나 이상 선택해 주세요.");
+
+  // 종료일이 시작일보다 앞서면 기간 아래에 문장이 붙는다
+  await changeDates("2027-01-05", "2027-01-03");
+  expect(container.textContent).toContain("종료일은 시작일 이후여야 해요.");
+  expect(applyButton(container).disabled).toBe(true);
+  await changeDates("2027-01-01", "2027-01-03");
+  expect(container.textContent).not.toContain("종료일은 시작일 이후여야 해요.");
+  expect(applyButton(container).disabled).toBe(false);
+  expect(state.update).not.toHaveBeenCalled();
+  await act(async () => root.unmount());
+});
diff --git a/src/components/rooms/RoomTripEditForm.tsx b/src/components/rooms/RoomTripEditForm.tsx
index 80c680d5..87848168 100644
--- a/src/components/rooms/RoomTripEditForm.tsx
+++ b/src/components/rooms/RoomTripEditForm.tsx
@@ -1,30 +1,35 @@
 "use client";
 
+import { useForm, useStore } from "@tanstack/react-form";
 import { useRef, useState } from "react";
 import { toast } from "sonner";
 
-import {
-  SettingsActionButton,
-  SettingsActionButtonRow,
-} from "@/components/settings/SettingsActionButton";
+import { DateRangeField } from "@/components/date-picker/DateRangeField";
+import { DestinationChipsField } from "@/components/rooms/DestinationChipsField";
+import { RoomTripReadOnlyFields } from "@/components/rooms/RoomTripReadOnlyFields";
 import { TripDateShrinkConfirmModal } from "@/components/rooms/TripDateShrinkConfirmModal";
-import { RoomTripEditFields } from "@/components/rooms/RoomTripEditFields";
-import { useRoomSchedules, useUpdateRoom } from "@/hooks/useRooms";
-import {
-  countSchedulesTrimmedByDateChange,
-  isTripScheduleDayLimitExceeded,
-} from "@/lib/plan/schedulePolicy";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { useRoomSchedules, type useUpdateRoom } from "@/hooks/useRooms";
+import { countSchedulesTrimmedByDateChange } from "@/lib/plan/schedulePolicy";
 import {
   areDestinationsEqual,
-  isTripDateRangeInvalid,
-  isTripDestinationsValid,
   ROOM_TRIP_TITLE_MAX_LENGTH,
   toTripFormValues,
+  TRIP_DESTINATION_MAX_LENGTH,
+  TRIP_DESTINATIONS_MAX_COUNT,
+  tripDateRangeError,
+  tripDestinationsError,
+  tripTitleError,
   type RoomTripFormSource,
+  type TripFormValues,
 } from "@/lib/rooms/trip-form";
 
 type Props = {
   room: RoomTripFormSource;
+  /** 여행 정보 저장 요청. 대화상자가 저장 중에 닫히지 않게 그 isPending을 쓰므로 대화상자가 만들어 내려 준다 */
+  update: ReturnType<typeof useUpdateRoom>;
   readOnly?: boolean;
   onSaved?: () => void;
 };
@@ -33,61 +38,34 @@ export function RoomTripEditForm(props: Props) {
   return <RoomTripEditSession key={props.room.id} {...props} />;
 }
 
-function RoomTripEditSession({ room, readOnly = false, onSaved }: Props) {
+function RoomTripEditSession({ room, update, readOnly = false, onSaved }: Readonly<Props>) {
   /** 서버 최신 값 — 다른 멤버가 바꾸면 따라 바뀐다. 읽기 전용 표시와 저장 직전 기준(기간 축소 확인·이전 기간)에 쓴다 */
   // 저장은 화면에 보이는 폼 값 그대로 보낸다 — 열어 둔 사이 다른 멤버가 바꾼 값보다 마지막에 저장한 사람의 화면 값이 남는다
   const latest = toTripFormValues(room);
   /**
-   * 모달을 연 순간의 값 — 열려 있는 동안 서버 값이 바뀌어도 입력 칸을 다시 채우지 않는다.
+   * 모달을 연 순간의 값 — 폼의 defaultValues다. 열려 있는 동안 서버 값이 바뀌어도 입력 칸을 다시 채우지 않는다.
    * 바뀐 값은 사이드 패널·헤더에 먼저 보이고, 모달을 다시 열면 그때의 최신 값으로 시작한다.
    */
   const [opened, setOpened] = useState(latest);
-
-  const [title, setTitle] = useState(opened.title);
-  const [destinations, setDestinations] = useState<string[]>(opened.destinations);
-  const [startDate, setStartDate] = useState(opened.startDate);
-  const [endDate, setEndDate] = useState(opened.endDate);
   const [shrinkConfirmOpen, setShrinkConfirmOpen] = useState(false);
+  const idPrefix = `trip-${room.id}`;
 
   const { data: schedules } = useRoomSchedules(room.id);
-  const { mutate: updateRoom, isPending, error } = useUpdateRoom();
-
-  const dateRangeInvalid = isTripDateRangeInvalid(startDate, endDate);
-  const scheduleDayLimitExceeded = isTripScheduleDayLimitExceeded(
-    startDate,
-    endDate,
-  );
+  const { mutate: updateRoom, isPending, error } = update;
   const scheduleCount = schedules?.length ?? 0;
 
-  /** 연 순간과 비교한다 — 서버 값이 바뀌어도 사용자가 바꾼 게 없으면 적용하기를 켜지 않는다 */
-  const isDirty =
-    title !== opened.title ||
-    !areDestinationsEqual(destinations, opened.destinations) ||
-    startDate !== opened.startDate ||
-    endDate !== opened.endDate;
-
-  const canApply =
-    title.trim() &&
-    isTripDestinationsValid(destinations) &&
-    startDate &&
-    endDate &&
-    !dateRangeInvalid &&
-    !scheduleDayLimitExceeded &&
-    !isPending &&
-    isDirty;
-
   const submitInFlight = useRef(false);
-  function submitUpdate() {
+  function submitUpdate(value: TripFormValues) {
     if (submitInFlight.current || readOnly) return;
     submitInFlight.current = true;
     updateRoom(
       {
         roomId: room.id,
         data: {
-          title: title.trim().slice(0, ROOM_TRIP_TITLE_MAX_LENGTH),
-          destinations: destinations.map((d) => d.trim()),
-          startDate,
-          endDate,
+          title: value.title.trim().slice(0, ROOM_TRIP_TITLE_MAX_LENGTH),
+          destinations: value.destinations.map((d) => d.trim()),
+          startDate: value.startDate,
+          endDate: value.endDate,
         },
         previousStartDate: latest.startDate,
         previousEndDate: latest.endDate,
@@ -97,7 +75,8 @@ function RoomTripEditSession({ room, readOnly = false, onSaved }: Props) {
         onSuccess: () => {
           setShrinkConfirmOpen(false);
           // 저장한 값이 새 기준 — 모달이 남아 있어도 다시 바꾼 게 없으면 적용하기가 꺼진다
-          setOpened({ title, destinations, startDate, endDate });
+          setOpened(value);
+          form.reset(value);
           toast.success("여행 정보가 수정되었어요");
           onSaved?.();
         },
@@ -105,37 +84,114 @@ function RoomTripEditSession({ room, readOnly = false, onSaved }: Props) {
     );
   }
 
-  function handleApply() {
-    if (!canApply) return;
+  const form = useForm({
+    defaultValues: opened,
+    onSubmit: ({ value }) => {
+      // 서버는 지금 기간에서 잘라내므로, 열 때가 아니라 서버 최신 기간과 저장할 폼 기간을 비교한다
+      const trimCount = countSchedulesTrimmedByDateChange(
+        scheduleCount,
+        latest.startDate,
+        latest.endDate,
+        value.startDate,
+        value.endDate,
+      );
+      if (trimCount > 0) {
+        setShrinkConfirmOpen(true);
+        return;
+      }
+      submitUpdate(value);
+    },
+  });
+  const values = useStore(form.store, (state) => state.values);
+  const { title, destinations, startDate, endDate } = values;
 
-    // 서버는 지금 기간에서 잘라내므로, 열 때가 아니라 서버 최신 기간과 저장할 폼 기간을 비교한다
-    const trimCount = countSchedulesTrimmedByDateChange(
-      scheduleCount,
-      latest.startDate,
-      latest.endDate,
-      startDate,
-      endDate,
-    );
-
-    if (trimCount > 0) {
-      setShrinkConfirmOpen(true);
-      return;
-    }
+  /**
+   * 연 순간과 비교한다 — 서버 값이 바뀌어도 사용자가 바꾼 게 없으면 적용하기를 켜지 않는다.
+   * TanStack isDirty는 한 번 바뀌면 남아서, 되돌리면 다시 꺼지는 지금 기준을 그대로 쓴다
+   */
+  const isDirty =
+    title !== opened.title ||
+    !areDestinationsEqual(destinations, opened.destinations) ||
+    startDate !== opened.startDate ||
+    endDate !== opened.endDate;
 
-    submitUpdate();
-  }
+  // 칸 오류는 각 form.Field의 validators가 입력할 때마다 칸 아래에 보인다. 적용하기는 같은 검증 함수로 잠근다
+  // (validators는 건드린 칸에서만 돌아서, 연 순간부터 비어 있던 칸(기간 없는 방 등)도 잠그려면 값으로 다시 본다)
+  const canApply =
+    !tripTitleError(title) &&
+    !tripDestinationsError(destinations) &&
+    !tripDateRangeError(startDate, endDate) &&
+    !isPending &&
+    isDirty;
 
   return (
     <div className="flex min-w-0 w-full flex-col gap-6">
-      <RoomTripEditFields
-        idPrefix={`trip-${room.id}`}
-        values={readOnly ? latest : { title, destinations, startDate, endDate }}
-        readOnly={readOnly}
-        onTitleChange={setTitle}
-        onDestinationsChange={setDestinations}
-        onStartDateChange={setStartDate}
-        onEndDateChange={setEndDate}
-      />
+      {readOnly ? (
+        <RoomTripReadOnlyFields idPrefix={idPrefix} values={latest} />
+      ) : (
+        <div className="flex min-w-0 flex-col gap-6">
+          <form.Field name="title" validators={{ onChange: ({ value }) => tripTitleError(value) }}>
+            {(field) => {
+              const fieldError = field.state.meta.errors[0];
+              return (
+                <Field>
+                  <FieldLabel htmlFor={`${idPrefix}-title`}>여행 제목</FieldLabel>
+                  <Input
+                    id={`${idPrefix}-title`}
+                    type="text"
+                    value={field.state.value}
+                    maxLength={ROOM_TRIP_TITLE_MAX_LENGTH}
+                    aria-invalid={fieldError ? true : undefined}
+                    aria-describedby={fieldError ? `${idPrefix}-title-error` : undefined}
+                    onChange={(event) => field.handleChange(event.target.value.slice(0, ROOM_TRIP_TITLE_MAX_LENGTH))}
+                    onBlur={field.handleBlur}
+                    placeholder="예: 봄 일본 여행, 하와이 신혼여행"
+                  />
+                  <FieldError id={`${idPrefix}-title-error`}>{fieldError}</FieldError>
+                </Field>
+              );
+            }}
+          </form.Field>
+
+          <form.Field name="destinations" validators={{ onChange: ({ value }) => tripDestinationsError(value) }}>
+            {(field) => (
+              <Field>
+                {/* 검색 입력이 DestinationSearchInput 안에 있어 label로 잇지 못한다. 입력 이름은 aria-label '목적지 검색'이다 */}
+                <p className="text-label-xs-regular text-text">목적지</p>
+                <DestinationChipsField
+                  values={field.state.value}
+                  onChange={field.handleChange}
+                  maxCount={TRIP_DESTINATIONS_MAX_COUNT}
+                  maxLength={TRIP_DESTINATION_MAX_LENGTH}
+                />
+                <FieldError>{field.state.meta.errors[0]}</FieldError>
+              </Field>
+            )}
+          </form.Field>
+
+          {/* 기간은 칸 하나(DateRangeField)가 두 값을 바꾼다. 오류는 끝 날짜 칸이 시작 날짜와 함께 검증해 기간 아래에 보인다 */}
+          <form.Field
+            name="endDate"
+            validators={{ onChange: ({ value, fieldApi }) => tripDateRangeError(fieldApi.form.getFieldValue("startDate"), value) }}
+          >
+            {(field) => (
+              <div className="flex min-w-0 flex-col gap-2">
+                {/* 스크롤되는 모달이고 칸 폭(약 176px)에 맞추면 달력이 절반 크기가 되어 팝업으로 띄운다 */}
+                <DateRangeField
+                  idPrefix={idPrefix}
+                  value={{ start: startDate, end: field.state.value }}
+                  popupOnly
+                  onChange={(next) => {
+                    form.setFieldValue("startDate", next.start);
+                    field.handleChange(next.end);
+                  }}
+                />
+                <FieldError>{field.state.meta.errors[0]}</FieldError>
+              </div>
+            )}
+          </form.Field>
+        </div>
+      )}
 
       {error && !readOnly && (
         <p className="text-center text-body-m-regular mobile:text-body-s-regular text-primary">
@@ -145,24 +201,28 @@ function RoomTripEditSession({ room, readOnly = false, onSaved }: Props) {
         </p>
       )}
 
+      {/* form 요소로 감싸지 않는다 — 지금처럼 제목 칸 Enter로 저장되지 않게 둔다 */}
       {!readOnly && (
-        <SettingsActionButtonRow className="pt-0">
-          <SettingsActionButton
-            variant="primary"
-            className="h-12 rounded-lg py-0 text-[16px] font-bold enabled:hover:bg-primary-strong hover:opacity-100 disabled:bg-fill disabled:text-text-disabled disabled:opacity-100"
-            onClick={handleApply}
-            disabled={!canApply}
-          >
-            {isPending ? "저장 중…" : "적용하기"}
-          </SettingsActionButton>
-        </SettingsActionButtonRow>
+        <Button
+          className="w-full"
+          disabled={!canApply}
+          loading={isPending}
+          loadingLabel="저장 중"
+          onClick={() => {
+            if (!canApply || form.state.isSubmitting) return;
+            void form.handleSubmit();
+          }}
+        >
+          적용하기
+        </Button>
       )}
 
+      {/* 여행 정보 수정 대화상자의 React 자식으로 둬야 Base UI가 위 레이어(확인창)만 Esc·포커스를 처리한다 */}
       {shrinkConfirmOpen ? (
         <TripDateShrinkConfirmModal
           isPending={isPending}
           onClose={() => setShrinkConfirmOpen(false)}
-          onConfirm={submitUpdate}
+          onConfirm={() => submitUpdate(form.state.values)}
         />
       ) : null}
     </div>
diff --git a/src/components/rooms/RoomTripReadOnlyFields.tsx b/src/components/rooms/RoomTripReadOnlyFields.tsx
new file mode 100644
index 00000000..7f0c67b7
--- /dev/null
+++ b/src/components/rooms/RoomTripReadOnlyFields.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { DateRangeField } from "@/components/date-picker/DateRangeField";
+import type { TripFormValues } from "@/lib/rooms/trip-form";
+import { cn } from "@/lib/utils";
+
+const FIELD_BOX_CLASS =
+  "flex h-12 w-full min-w-0 items-center rounded-lg border border-border bg-fill-subtle pl-3.5 pr-2.5 text-body-m-regular mobile:text-body-s-regular text-text-subtle";
+
+function Field({ label, className, children }: Readonly<{ label: string; className?: string; children: ReactNode }>) {
+  return (
+    <div className={cn("flex min-w-0 flex-col gap-1", className)}>
+      <p className="text-label-xs-regular text-text">{label}</p>
+      {children}
+    </div>
+  );
+}
+
+/** 여행 정보 수정 권한이 없을 때 보이는 읽기 전용 칸. 고칠 수 있을 때의 칸은 `RoomTripEditForm`이 form.Field로 그린다 */
+export function RoomTripReadOnlyFields({ idPrefix, values }: Readonly<{ idPrefix: string; values: TripFormValues }>) {
+  const { title, destinations, startDate, endDate } = values;
+  return (
+    <div className="flex min-w-0 flex-col gap-6">
+      <Field label="여행 제목">
+        <p className={FIELD_BOX_CLASS}><span className="truncate">{title.trim() || "—"}</span></p>
+      </Field>
+      <Field label="목적지">
+        <p className={FIELD_BOX_CLASS}><span className="truncate">{destinations.join(", ") || "—"}</span></p>
+      </Field>
+      <DateRangeField idPrefix={idPrefix} value={{ start: startDate, end: endDate }} readOnly onChange={() => {}} />
+    </div>
+  );
+}
diff --git a/src/components/rooms/RoomTripSettingsSection.tsx b/src/components/rooms/RoomTripSettingsSection.tsx
index 98473854..235654cc 100644
--- a/src/components/rooms/RoomTripSettingsSection.tsx
+++ b/src/components/rooms/RoomTripSettingsSection.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useState, type ComponentProps } from "react";
 import { useRouter } from "next/navigation";
 
 import { DeleteConfirmModal } from "@/app/home/_components/DeleteConfirmModal";
 import { RoomTripEditForm } from "@/components/rooms/RoomTripEditForm";
+import { Spinner } from "@/components/ui/spinner";
 import { useCurrentRoomMembership } from "@/hooks/useCurrentRoomMembership";
 import { isRoomMemberRole } from "@/lib/rooms";
 import { useSessionStore } from "@/stores/session-store";
@@ -41,7 +42,13 @@ export function RoomTripDeleteButton() {
   );
 }
 
-export function RoomTripSettingsSection({ onSaved }: { onSaved?: () => void }) {
+export function RoomTripSettingsSection({
+  update,
+  onSaved,
+}: Readonly<{
+  update: ComponentProps<typeof RoomTripEditForm>["update"];
+  onSaved?: () => void;
+}>) {
   const { roomId, roomSource, isLoading } = useCurrentRoomMembership();
   const canEdit = isRoomMemberRole(roomSource?.role);
   const description = !isLoading && roomSource && roomId && !canEdit
@@ -54,14 +61,14 @@ export function RoomTripSettingsSection({ onSaved }: { onSaved?: () => void }) {
 
       {isLoading ? (
         <div className="flex items-center justify-center py-20">
-          <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-border border-t-primary" />
+          <Spinner aria-label="여행 정보 불러오는 중" size={32} />
         </div>
       ) : !roomSource || !roomId ? (
         <p className="py-10 text-center text-body-m-regular mobile:text-body-s-regular text-dark-gray">
           여행 정보를 불러오지 못했어요.
         </p>
       ) : (
-        <RoomTripEditForm room={roomSource} readOnly={!canEdit} onSaved={onSaved} />
+        <RoomTripEditForm room={roomSource} update={update} readOnly={!canEdit} onSaved={onSaved} />
       )}
     </div>
   );
diff --git a/src/components/rooms/TripDateShrinkConfirmModal.tsx b/src/components/rooms/TripDateShrinkConfirmModal.tsx
index fc6f01ee..6bd3769d 100644
--- a/src/components/rooms/TripDateShrinkConfirmModal.tsx
+++ b/src/components/rooms/TripDateShrinkConfirmModal.tsx
@@ -1,12 +1,15 @@
 "use client";
 
-import { useEffect, useRef } from "react";
-import { CalendarRange } from "lucide-react";
-
 import {
-  SettingsActionButton,
-  SettingsActionButtonRow,
-} from "@/components/settings/SettingsActionButton";
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 type Props = {
   isPending: boolean;
@@ -14,81 +17,42 @@ type Props = {
   onConfirm: () => void;
 };
 
+const TITLE = "여행 기간을 줄일까요?";
+
+/**
+ * 여행 기간 축소 확인(Figma Alert Dialog). 마운트되면 열린 상태라 RoomTripEditForm이 조건부로 그린다.
+ * 여행 정보 수정 대화상자의 React 자식이라 Esc·포커스 가두기는 이 확인창만 받고, 닫히면 수정 중인 입력이 그대로 남는다.
+ * 딤·Esc·취소는 onClose, 저장 중에는 모두 막힌다. 버튼 이름은 ConfirmDialog와 달리 저장 진행("저장 중")을 읽어 직접 조립한다
+ */
 export function TripDateShrinkConfirmModal({
   isPending,
   onClose,
   onConfirm,
-}: Props) {
-  const dialogRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const trigger = document.activeElement;
-    dialogRef.current?.querySelector<HTMLButtonElement>("button")?.focus();
-    return () => {
-      queueMicrotask(() => {
-        if (trigger instanceof HTMLElement && trigger.isConnected) trigger.focus();
-      });
-    };
-  }, []);
-
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && !isPending) onClose();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [isPending, onClose]);
-
+}: Readonly<Props>) {
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4 backdrop-blur-sm"
-      onClick={(e) => {
-        if (e.target === e.currentTarget && !isPending) onClose();
+    <AlertDialog
+      open
+      closeDisabled={isPending}
+      // 열린 채 마운트되므로 닫기 요청(open=false)만 온다
+      onOpenChange={(open) => {
+        if (!open) onClose();
       }}
     >
-      <div
-        ref={dialogRef}
-        role="alertdialog"
-        aria-modal="true"
-        aria-labelledby="trip-date-shrink-dialog-title"
-        aria-describedby="trip-date-shrink-dialog-desc"
-        className="w-full max-w-sm overflow-hidden rounded-3xl bg-white shadow-xl"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="px-6 pb-2 pt-6 text-center">
-          <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-status-negative/10">
-            <CalendarRange size={22} className="text-status-negative" />
-          </div>
-          <h2
-            id="trip-date-shrink-dialog-title"
-            className="text-title-s font-bold"
-          >
-            여행 기간을 줄일까요?
-          </h2>
-          <p
-            id="trip-date-shrink-dialog-desc"
-            className="mt-1.5 text-body-m-regular mobile:text-body-s-regular leading-relaxed text-dark-gray"
-          >
-            여행 기간을 줄이면 제거되는 일차의 모든 장소와 비용도 함께 삭제돼요.
-            계속할까요?
-          </p>
-        </div>
-        <SettingsActionButtonRow className="px-6 py-5 pt-0">
-          <SettingsActionButton
-            variant="secondary"
-            onClick={onClose}
-            disabled={isPending}
-          >
-            취소
-          </SettingsActionButton>
-          <SettingsActionButton
-            variant="primary"
-            onClick={onConfirm}
-            disabled={isPending}
-          >
-            {isPending ? "저장 중…" : "계속하기"}
-          </SettingsActionButton>
-        </SettingsActionButtonRow>
-      </div>
-    </div>
+      {/* 지금 확인창처럼 딤을 눌러도 닫힌다 */}
+      <AlertDialogContent backdropCloseLabel={`${TITLE} 배경 닫기`}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{TITLE}</AlertDialogTitle>
+          <AlertDialogDescription>
+            여행 기간을 줄이면 제거되는 일차의 모든 장소와 비용도 함께 삭제돼요. 계속할까요?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>취소</AlertDialogCancel>
+          <AlertDialogAction loading={isPending} loadingLabel="저장 중" onClick={onConfirm}>
+            계속하기
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 }
diff --git a/src/components/rooms/TripFormFields.tsx b/src/components/rooms/TripFormFields.tsx
index c7dea099..57f23a91 100644
--- a/src/components/rooms/TripFormFields.tsx
+++ b/src/components/rooms/TripFormFields.tsx
@@ -2,6 +2,8 @@
 
 import { DateRangeField } from "@/components/date-picker/DateRangeField";
 import { DestinationChipsField } from "@/components/rooms/DestinationChipsField";
+import { Field, FieldHeader, FieldLabel, FieldSuffix } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
 import {
   isTripScheduleDayLimitExceeded,
   TRIP_SCHEDULE_DAY_LIMIT_MESSAGE,
@@ -13,8 +15,6 @@ import {
   TRIP_DATE_RANGE_INVALID_MESSAGE,
   TRIP_DESTINATION_MAX_LENGTH,
   TRIP_DESTINATIONS_MAX_COUNT,
-  TRIP_FORM_FIELD_CLASS,
-  TRIP_FORM_FIELD_READ_ONLY_CLASS,
   TRIP_START_BEFORE_MIN_MESSAGE,
   type TripFormValues,
 } from "@/lib/rooms/trip-form";
@@ -22,7 +22,6 @@ import {
 type Props = {
   idPrefix: string;
   values: TripFormValues;
-  readOnly?: boolean;
   autoFocusTitle?: boolean;
   startDateMin?: string;
   onTitleChange: (value: string) => void;
@@ -31,10 +30,10 @@ type Props = {
   onEndDateChange: (value: string) => void;
 };
 
+/** 새 여행 만들기 입력 필드. 칸 모양과 배치는 여행 정보 수정(`RoomTripEditForm`)과 같은 Figma Text Field이고, 글자 수만 Header Suffix로 더 보인다 */
 export function TripFormFields({
   idPrefix,
   values,
-  readOnly = false,
   autoFocusTitle = false,
   startDateMin,
   onTitleChange,
@@ -43,93 +42,60 @@ export function TripFormFields({
   onEndDateChange,
 }: Props) {
   const { title, destinations, startDate, endDate } = values;
-  const dateRangeInvalid = isTripDateRangeInvalid(startDate, endDate);
-  const startBeforeMin =
-    startDateMin != null && isTripStartBeforeMin(startDate, startDateMin);
-  const scheduleDayLimitExceeded = isTripScheduleDayLimitExceeded(
-    startDate,
-    endDate,
-  );
-  const fieldClassName = readOnly
-    ? TRIP_FORM_FIELD_READ_ONLY_CLASS
-    : TRIP_FORM_FIELD_CLASS;
+  let dateMessage = null;
+  if (startDateMin != null && isTripStartBeforeMin(startDate, startDateMin)) dateMessage = TRIP_START_BEFORE_MIN_MESSAGE;
+  else if (isTripDateRangeInvalid(startDate, endDate)) dateMessage = TRIP_DATE_RANGE_INVALID_MESSAGE;
+  else if (isTripScheduleDayLimitExceeded(startDate, endDate)) dateMessage = TRIP_SCHEDULE_DAY_LIMIT_MESSAGE;
 
   return (
-    <div className="min-w-0 space-y-3">
-      <div className={fieldClassName}>
-        <div className="mb-1.5 flex items-baseline justify-between gap-2">
-          <label htmlFor={`${idPrefix}-title`} className="text-label-l-emphasis mobile:text-label-m-emphasis font-bold text-black">여행 제목</label>
-          {!readOnly && (
-            <p className="shrink-0 text-body-s-regular mobile:text-body-xs-regular tabular-nums text-light-gray">
-              {title.length}/{ROOM_TRIP_TITLE_MAX_LENGTH}
-            </p>
-          )}
-        </div>
-        {readOnly ? (
-          <p className="text-body-m-regular mobile:text-body-s-regular text-dark-gray">{title.trim() || "—"}</p>
-        ) : (
-          <input
-            id={`${idPrefix}-title`}
-            type="text"
-            value={title}
-            maxLength={ROOM_TRIP_TITLE_MAX_LENGTH}
-            onChange={(e) =>
-              onTitleChange(e.target.value.slice(0, ROOM_TRIP_TITLE_MAX_LENGTH))
-            }
-            placeholder="예: 봄 일본 여행, 하와이 신혼여행"
-            className="w-full text-body-m-regular text-dark-gray outline-none placeholder:text-light-gray"
-            autoFocus={autoFocusTitle}
-          />
-        )}
-      </div>
+    <div className="flex min-w-0 flex-col gap-6">
+      <Field>
+        <FieldHeader>
+          <FieldLabel htmlFor={`${idPrefix}-title`}>여행 제목</FieldLabel>
+          <FieldSuffix>
+            {title.length}/{ROOM_TRIP_TITLE_MAX_LENGTH}
+          </FieldSuffix>
+        </FieldHeader>
+        <Input
+          id={`${idPrefix}-title`}
+          type="text"
+          value={title}
+          maxLength={ROOM_TRIP_TITLE_MAX_LENGTH}
+          onChange={(event) => onTitleChange(event.target.value.slice(0, ROOM_TRIP_TITLE_MAX_LENGTH))}
+          placeholder="예: 봄 일본 여행, 하와이 신혼여행"
+          autoFocus={autoFocusTitle}
+        />
+      </Field>
 
-      <div className={fieldClassName}>
-        <div className="mb-1.5 flex items-baseline justify-between gap-2">
-          <p className="text-body-m-emphasis mobile:text-body-s-emphasis font-bold text-black">목적지</p>
-          {!readOnly && (
-            <p className="shrink-0 text-body-s-regular mobile:text-body-xs-regular tabular-nums text-light-gray">
-              {destinations.length}/{TRIP_DESTINATIONS_MAX_COUNT}
-            </p>
-          )}
-        </div>
+      <Field>
+        <FieldHeader>
+          {/* 검색 입력이 DestinationSearchInput 안에 있어 label로 잇지 못한다. 입력 이름은 aria-label '목적지 검색'이다 */}
+          <p className="min-w-0 flex-1 text-label-xs-regular text-text">목적지</p>
+          <FieldSuffix>
+            {destinations.length}/{TRIP_DESTINATIONS_MAX_COUNT}
+          </FieldSuffix>
+        </FieldHeader>
         <DestinationChipsField
           values={destinations}
           onChange={onDestinationsChange}
-          readOnly={readOnly}
           maxCount={TRIP_DESTINATIONS_MAX_COUNT}
           maxLength={TRIP_DESTINATION_MAX_LENGTH}
         />
-      </div>
+      </Field>
 
-      <div>
+      <div className="flex min-w-0 flex-col gap-2">
         <DateRangeField
           idPrefix={idPrefix}
           value={{ start: startDate, end: endDate }}
           min={startDateMin}
-          readOnly={readOnly}
           onChange={(next) => {
             onStartDateChange(next.start);
             onEndDateChange(next.end);
           }}
         />
-        {!readOnly && startBeforeMin && (
-          <p className="mt-2 text-body-s-regular mobile:text-body-xs-regular text-primary">
-            {TRIP_START_BEFORE_MIN_MESSAGE}
-          </p>
-        )}
-        {!readOnly && !startBeforeMin && dateRangeInvalid && (
-          <p className="mt-2 text-body-s-regular mobile:text-body-xs-regular text-primary">
-            {TRIP_DATE_RANGE_INVALID_MESSAGE}
-          </p>
-        )}
-        {!readOnly &&
-          !startBeforeMin &&
-          !dateRangeInvalid &&
-          scheduleDayLimitExceeded && (
-          <p className="mt-2 text-body-s-regular mobile:text-body-xs-regular text-primary">
-            {TRIP_SCHEDULE_DAY_LIMIT_MESSAGE}
-          </p>
-        )}
+        {dateMessage ? (
+          <p className="text-body-s-regular mobile:text-body-xs-regular text-primary">{dateMessage}</p>
+        ) : null}
       </div>
     </div>
   );
diff --git a/src/components/search/DestinationSearchInput.test.tsx b/src/components/search/DestinationSearchInput.test.tsx
new file mode 100644
index 00000000..1b6849b3
--- /dev/null
+++ b/src/components/search/DestinationSearchInput.test.tsx
@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+import { DestinationSearchInput } from "./DestinationSearchInput";
+import { Label } from "@/components/ui/label";
+
+vi.mock("@vis.gl/react-google-maps", () => ({ useMapsLibrary: () => null }));
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+it.each(["default", "field"] as const)("preserves clear behavior and focus for %s appearance", async (appearance) => {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const change = vi.fn();
+  const resolved = vi.fn();
+  try {
+    await act(async () => root.render(<DestinationSearchInput appearance={appearance} value="서울" onChange={change} onResolvedPlace={resolved} />));
+    const input = host.querySelector("input")!;
+    const clear = host.querySelector<HTMLButtonElement>('button[aria-label="지우기"]')!;
+    expect(input.value).toBe("서울");
+    await act(async () => clear.click());
+    expect(input.value).toBe("");
+    expect(change).toHaveBeenCalledExactlyOnceWith("");
+    expect(resolved).toHaveBeenCalledExactlyOnceWith(null);
+    expect(document.activeElement).toBe(input);
+    expect(host.querySelector("button")).toBeNull();
+  } finally {
+    await act(async () => root.unmount());
+    host.remove();
+  }
+});
+
+it("retains the selection-only hint association and does not refocus when cleared", async () => {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  try {
+    await act(async () => root.render(<DestinationSearchInput appearance="field" selectionOnly value="서울" onChange={vi.fn()} />));
+    const input = host.querySelector("input")!;
+    const hint = document.getElementById(input.getAttribute("aria-describedby")!);
+    expect(input.getAttribute("role")).toBe("combobox");
+    expect(hint?.textContent).toContain("목록에서 선택");
+    await act(async () => host.querySelector<HTMLButtonElement>('button[aria-label="선택 지우기"]')!.click());
+    expect(document.activeElement).not.toBe(input);
+    expect(input.value).toBe("");
+  } finally {
+    await act(async () => root.unmount());
+    host.remove();
+  }
+});
+
+it("forwards the label control association and children", async () => {
+  const host = document.createElement("div");
+  const root = createRoot(host);
+  try {
+    await act(async () => root.render(<><Label htmlFor="destination">목적지</Label><input id="destination" /></>));
+    expect(host.querySelector("label")?.control).toBe(host.querySelector("input"));
+    expect(host.querySelector("label")?.textContent).toBe("목적지");
+  } finally {
+    await act(async () => root.unmount());
+  }
+});
diff --git a/src/components/search/DestinationSearchInput.tsx b/src/components/search/DestinationSearchInput.tsx
index 09a16311..1355b051 100644
--- a/src/components/search/DestinationSearchInput.tsx
+++ b/src/components/search/DestinationSearchInput.tsx
@@ -9,6 +9,7 @@ import {
   DESTINATION_INCLUDED_PRIMARY_TYPES,
   PlacePredictionInlineDescription,
 } from "@/lib/placesAutocompleteSuggest";
+import { CloseIcon, SearchIcon } from "@/assets/icons";
 import { cn } from "@/lib/utils";
 
 const DESTINATION_SELECTION_HINT =
@@ -33,12 +34,49 @@ type Props = {
   appearance?: "default" | "field";
 };
 
-function DestinationLeadingIcon({ show, type }: Readonly<{ show: boolean; type: "search" | "map-pin" }>) {
+function DestinationLeadingIcon({ show, type, appearance }: Readonly<{ show: boolean; type: "search" | "map-pin"; appearance: "default" | "field" }>) {
   if (!show) return null;
+  if (appearance === "field") return <SearchIcon size={20} className="shrink-0 text-icon-subtle" />;
   const Icon = type === "search" ? Search : MapPin;
   return <Icon size={15} className="shrink-0 text-dark-gray" />;
 }
 
+function DestinationClearButton({ appearance, selectionOnly, onClick }: Readonly<{
+  appearance: "default" | "field";
+  selectionOnly: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}>) {
+  const isField = appearance === "field";
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={selectionOnly ? "선택 지우기" : "지우기"}
+      className={isField
+        ? "grid w-8 shrink-0 cursor-pointer place-items-center self-stretch text-icon-subtle"
+        : "shrink-0 rounded p-0.5 text-light-gray transition hover:text-dark-gray"}
+    >
+      {isField ? <CloseIcon size={20} /> : <X size={14} />}
+    </button>
+  );
+}
+
+function DestinationSelectionHint({ id, appearance }: Readonly<{
+  id: string;
+  appearance: "default" | "field";
+}>) {
+  return (
+    <p
+      id={id}
+      className={appearance === "field"
+        ? "mt-1 text-caption-s-regular text-text-subtle"
+        : "mt-2 text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-light-gray"}
+    >
+      {DESTINATION_SELECTION_HINT}
+    </p>
+  );
+}
+
 /**
  * Google Places Autocomplete Data API 기반 목적지 검색.
  * `includedPrimaryTypes`로 지역·행정구역·국가 등(레거시 `(regions)`에 대응).
@@ -55,7 +93,7 @@ export function DestinationSearchInput({
   appearance = "default",
 }: Readonly<Props>) {
   const isField = appearance === "field";
-  const showHint = selectionOnly && !isField;
+  const showHint = selectionOnly;
   const placesLib = useMapsLibrary("places");
 
   const buildRequest = useCallback(
@@ -163,7 +201,9 @@ export function DestinationSearchInput({
 
   function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
     if (e.key === "Escape") {
-      e.preventDefault();
+      // 추천 목록이 열려 있을 때만 Esc를 여기서 쓴다. 감싼 대화상자(ui/dialog)는 preventDefault된 Esc면 닫지 않고,
+      // 목록이 없으면 Esc가 대화상자 닫기로 이어진다
+      if (isOpen && predictions.length > 0) e.preventDefault();
       clearSuggestionUi();
       return;
     }
@@ -193,12 +233,14 @@ export function DestinationSearchInput({
         <div
           className={cn(
             "flex w-full items-center gap-2",
+            // field는 Figma 02 Text Field의 Search Bar(5002:4377): 48px, padding L14 R10, gap 8, radius 8.
+            // 테두리는 Default border/default → Focused primary/default → 값이 있고 포커스가 없으면(Filled) primary/strong
             isField
-              ? "h-12 rounded-lg border border-border bg-fill-subtle pl-3.5 pr-2.5 focus-within:border-primary"
+              ? "h-12 rounded-md border border-border bg-fill-subtle pl-3.5 pr-2.5 focus-within:border-primary [&:has(input:not(:placeholder-shown)):not(:focus-within)]:border-primary-strong"
               : selectionOnly && "rounded-xl bg-bubble-gray/60 px-3 py-2.5",
           )}
         >
-          <DestinationLeadingIcon show={showLeadingIcon} type={leadingIconType} />
+          <DestinationLeadingIcon show={showLeadingIcon} type={leadingIconType} appearance={appearance} />
           <input
             ref={inputRef}
             aria-label="목적지 검색"
@@ -222,18 +264,12 @@ export function DestinationSearchInput({
             className={cn(
               "min-w-0 flex-1 text-body-m-regular text-dark-gray outline-none placeholder:text-light-gray",
               selectionOnly && "bg-transparent",
-              isField && "text-text-subtle placeholder:text-text-disabled",
+              // Figma Text 프레임 오른쪽 4px, 입력 글자 text/default, 플레이스홀더 text/subtle
+              isField && "pr-1 text-text placeholder:text-text-subtle",
             )}
           />
           {showClear ? (
-            <button
-              type="button"
-              onClick={handleClear}
-              aria-label={selectionOnly ? "선택 지우기" : "지우기"}
-              className="shrink-0 rounded p-0.5 text-light-gray transition hover:text-dark-gray"
-            >
-              <X size={14} />
-            </button>
+            <DestinationClearButton appearance={appearance} selectionOnly={selectionOnly} onClick={handleClear} />
           ) : null}
         </div>
 
@@ -270,14 +306,7 @@ export function DestinationSearchInput({
         ) : null}
       </div>
 
-      {showHint ? (
-        <p
-          id={selectionOnlyFooterId}
-          className="mt-2 text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-light-gray"
-        >
-          {DESTINATION_SELECTION_HINT}
-        </p>
-      ) : null}
+      {showHint ? <DestinationSelectionHint id={selectionOnlyFooterId} appearance={appearance} /> : null}
     </div>
   );
 }
diff --git a/src/components/search/MapMobileSearchScreen.tsx b/src/components/search/MapMobileSearchScreen.tsx
index d3b6bb16..2c9e315a 100644
--- a/src/components/search/MapMobileSearchScreen.tsx
+++ b/src/components/search/MapMobileSearchScreen.tsx
@@ -7,6 +7,7 @@ import {
   LocationIcon,
   SearchIcon,
 } from "@/assets/icons";
+import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
 import { useSessionUser } from "@/hooks/useSessionUser";
 import {
   addMapSearchHistory,
@@ -141,18 +142,19 @@ export function MapMobileSearchScreen({
           />
       </div>
       {error ? (
-        <div
-          role="alert"
-          className="mx-3 flex items-center gap-2 rounded-lg border border-border-subtle p-3 text-body-s-regular text-text"
-        >
-          <span>{error}</span>
-          <button
-            type="button"
-            className="shrink-0 text-primary underline"
-            onClick={() => inputRef.current?.focus()}
-          >
-            다시 시도
-          </button>
+        <div className="px-3">
+          <Alert orientation="horizontal">
+            <AlertTitle>{error}</AlertTitle>
+            <AlertAction>
+              <button
+                type="button"
+                className="text-primary underline"
+                onClick={() => inputRef.current?.focus()}
+              >
+                다시 시도
+              </button>
+            </AlertAction>
+          </Alert>
         </div>
       ) : null}
       {!query.trim() ? (
diff --git a/src/components/search/MapPlaceSearchInput.test.tsx b/src/components/search/MapPlaceSearchInput.test.tsx
index 1e7c4a23..525c6084 100644
--- a/src/components/search/MapPlaceSearchInput.test.tsx
+++ b/src/components/search/MapPlaceSearchInput.test.tsx
@@ -69,7 +69,7 @@ async function key(key: string) {
       .dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true })),
   );
 }
-it("puts all results first; unselected Enter retains original query and first prediction", async () => {
+it("puts all results first; unselected Enter confirms the original query without a prediction", async () => {
   await type("원래");
   await wait();
   expect(host.querySelector('[role="option"]')?.textContent).toContain(
@@ -77,7 +77,7 @@ it("puts all results first; unselected Enter retains original query and first pr
   );
   await key("Enter");
   expect(confirm).toHaveBeenCalledWith(
-    expect.objectContaining({ query: "원래", kind: "whole", prediction: p }),
+    expect.objectContaining({ query: "원래", kind: "whole", prediction: undefined, session: null }),
   );
 });
 it("arrow-selected recommendation Enter confirms only that prediction", async () => {
@@ -167,6 +167,14 @@ it("429 respects shared wait without request loop on further input", async () =>
   expect(sdk.fetch).toHaveBeenCalledTimes(1);
   expect(host.textContent).toContain("잠시 후");
 });
+it("network failure shows the default notice under all results instead of the raw error", async () => {
+  sdk.fetch.mockRejectedValue(new TypeError("Failed to fetch"));
+  await type("원래"); await wait();
+  expect([...host.querySelectorAll('[role="option"]')].map((option) => option.textContent))
+    .toEqual(["'원래' 모든 결과보기"]);
+  expect(host.textContent).toContain("검색 추천을 불러오지 못했어요. 다시 입력해주세요.");
+  expect(host.textContent).not.toContain("Failed to fetch");
+});
 it("nullable structured main text falls back to actual complete prediction text", async () => {
   await act(async () => vi.advanceTimersByTimeAsync(61000));
   sdk.fetch.mockImplementation(async url => String(url).endsWith("/places/sessions")
diff --git a/src/components/search/MapPlaceSearchInput.tsx b/src/components/search/MapPlaceSearchInput.tsx
index cb688dd8..b4704f0c 100644
--- a/src/components/search/MapPlaceSearchInput.tsx
+++ b/src/components/search/MapPlaceSearchInput.tsx
@@ -10,9 +10,10 @@ import {
 } from "react";
 import { flushSync } from "react-dom";
 import { MapSearchIcon } from "@/components/map/MapSearchIcon";
-import { ChevronLeftIcon, CircleCancelIcon, SearchIcon } from "@/assets/icons";
+import { SearchIcon } from "@/assets/icons";
+import { SearchBar, SearchBarBack, SearchBarClear, SearchBarIcon, SearchBarInput } from "@/components/ui/search-bar";
 import { AutocompleteSearchSession, MAP_AUTOCOMPLETE_DEBOUNCE_MS } from "@/lib/places/autocomplete-session";
-import type { PlacePrediction, PlaceSession, PredictionText } from "@/lib/api/place-sessions";
+import { PlaceSessionError, type PlacePrediction, type PlaceSession, type PredictionText } from "@/lib/api/place-sessions";
 import type { SearchConfirmation } from "@/lib/places/search-session";
 import { useMapCenterStore } from "@/stores/map-center-store";
 import { cn } from "@/lib/utils";
@@ -44,18 +45,10 @@ const INPUT_STYLES = {
   mobile: {
     container: "flex min-h-0 w-full flex-col",
     form: "shrink-0 px-5 pb-2 pt-4",
-    field: "h-12 gap-2 rounded-lg pl-3.5 pr-2.5",
-    text: "text-body-m-regular",
-    clear: "h-full w-8",
-    iconSize: 20,
   },
   desktop: {
     container: "w-[353px] max-w-full",
     form: undefined,
-    field: "h-12 gap-2 rounded-lg pl-3.5 pr-2.5",
-    text: "text-body-m-regular",
-    clear: "size-8",
-    iconSize: 20,
   },
 } as const;
 
@@ -152,7 +145,8 @@ export function MapPlaceSearchInput({
           if (requestGeneration === generation.current) {
             flow.abandon();
             token.current = null;
-            setSuggestions({ query, items: [], session: null, status: "error", error: error instanceof Error ? error.message : undefined });
+            // 서버가 준 안내(429 등)는 그대로, 네트워크 오류 원문("Failed to fetch")은 뜻이 없어 기본 안내로 보여 준다
+            setSuggestions({ query, items: [], session: null, status: "error", error: error instanceof PlaceSessionError ? error.message : undefined });
           }
         },
       );
@@ -189,13 +183,14 @@ export function MapPlaceSearchInput({
       suggestions?.query === value && suggestions.status === "done"
         ? suggestions
         : null;
-    const prediction = index > 0 ? ready?.items[index - 1] : ready?.items[0];
+    // 모두검색(index ≤ 0)은 후보를 확정하지 않고 지도 중심에서 찾는다(confirmPlaceSearch)
+    const prediction = index > 0 ? ready?.items[index - 1] : undefined;
     if (index > 0 && !prediction) return;
-    if (ready?.session && ready.session.expiresAt <= Date.now()) {
+    const requestSession = prediction ? ready?.session ?? null : null;
+    if (requestSession && requestSession.expiresAt <= Date.now()) {
       token.current?.abandon(); token.current = null;
       schedule(value); return;
     }
-    const requestSession = ready?.session ?? null;
     cancel();
     const requestGeneration = generation.current;
     confirmGeneration.current = requestGeneration;
@@ -271,16 +266,15 @@ export function MapPlaceSearchInput({
           void confirm(active);
         }}
       >
-        <div className={cn(
-          "flex items-center border border-border bg-fill-subtle focus-within:border-primary",
-          appearance.field,
-        )}>
+        <SearchBar shape={mobile ? "pill" : "rounded"}>
           {onBack ? (
-            <button type="button" aria-label={backLabel} onClick={onBack} className="flex h-12 w-5 shrink-0 cursor-pointer items-center justify-center rounded hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary">
-              <ChevronLeftIcon size={20} className="text-icon-subtle" />
-            </button>
-          ) : mobile ? <SearchIcon size={appearance.iconSize} className="shrink-0 text-icon-subtle" /> : <MapSearchIcon name="search" size={20} />}
-          <input
+            <SearchBarBack aria-label={backLabel} onClick={onBack} />
+          ) : (
+            <SearchBarIcon>
+              <SearchIcon size={20} />
+            </SearchBarIcon>
+          )}
+          <SearchBarInput
             ref={fieldRef}
             type="search"
             role="combobox"
@@ -347,26 +341,21 @@ export function MapPlaceSearchInput({
             }}
             placeholder="장소 검색"
             autoComplete="off"
-            className={cn(
-              "peer min-w-0 flex-1 bg-transparent pr-1 text-text outline-none placeholder:text-text-subtle [&::-webkit-search-cancel-button]:hidden",
-              appearance.text,
-            )}
+            // PC는 입력 중(포커스)에 지우기를 숨긴다(peer-focus:hidden)
+            className="peer"
           />
           {value ? (
-            <button
-              type="button"
+            <SearchBarClear
               aria-label="검색어 지우기"
               onClick={() => {
                 update("");
                 if (mobile) fieldRef.current?.focus();
                 else fieldRef.current?.blur();
               }}
-              className={cn("flex shrink-0 cursor-pointer items-center justify-center rounded hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary", appearance.clear, !mobile && "peer-focus:hidden")}
-            >
-              {mobile ? <CircleCancelIcon size={appearance.iconSize} className="text-icon-subtle" /> : <MapSearchIcon name="clear" size={20}/>}
-            </button>
+              className={cn(!mobile && "peer-focus:hidden")}
+            />
           ) : null}
-        </div>
+        </SearchBar>
       </form>
       {showDropdown ? <SearchSuggestions listId={listId} active={active} value={value} rows={rows}
         suggestions={suggestions} mobile={mobile} onConfirm={confirm} onActiveChange={setActive} /> : null}
diff --git a/src/components/search/MobilePlaceSearchScreen.tsx b/src/components/search/MobilePlaceSearchScreen.tsx
index 2b86add9..62b86f37 100644
--- a/src/components/search/MobilePlaceSearchScreen.tsx
+++ b/src/components/search/MobilePlaceSearchScreen.tsx
@@ -13,14 +13,13 @@ import { createPortal } from "react-dom";
 import { useMapsLibrary } from "@vis.gl/react-google-maps";
 
 import {
-  ChevronLeftIcon,
-  CircleCancelIcon,
   CloseIcon,
   LocationErrorIcon,
   LocationIcon,
   SearchIcon,
   type IconProps,
 } from "@/assets/icons";
+import { SearchBar, SearchBarBack, SearchBarClear, SearchBarInput } from "@/components/ui/search-bar";
 import { useSessionUser } from "@/hooks/useSessionUser";
 import {
   addMapSearchHistory,
@@ -247,16 +246,9 @@ function LegacyMobilePlaceSearchScreen({
       )}
     >
       <form onSubmit={handleSubmit} className="shrink-0 px-2 pb-1 pt-4">
-        <div className="flex h-12 items-center gap-2 rounded-full border border-border bg-fill-subtle pl-3.5 pr-2.5 focus-within:border-primary">
-          <button
-            type="button"
-            onClick={handleClose}
-            aria-label={backLabel}
-            className="-m-1 flex shrink-0 items-center justify-center p-1"
-          >
-            <ChevronLeftIcon size={20} className="text-icon-subtle" />
-          </button>
-          <input
+        <SearchBar shape="pill">
+          <SearchBarBack onClick={handleClose} aria-label={backLabel} />
+          <SearchBarInput
             ref={inputRef}
             type="search"
             inputMode="search"
@@ -265,19 +257,9 @@ function LegacyMobilePlaceSearchScreen({
             onChange={(e) => updateInput(e.target.value)}
             placeholder="떠나고 싶은 지역을 입력해주세요"
             autoComplete="off"
-            className="min-w-0 flex-1 bg-transparent pr-1 text-body-m-regular text-text outline-none placeholder:text-text-subtle [&::-webkit-search-cancel-button]:hidden"
           />
-          {inputValue ? (
-            <button
-              type="button"
-              onClick={handleClear}
-              aria-label="검색어 지우기"
-              className="flex h-12 w-8 shrink-0 items-center justify-center"
-            >
-              <CircleCancelIcon size={20} className="text-icon-subtle" />
-            </button>
-          ) : null}
-        </div>
+          {inputValue ? <SearchBarClear onClick={handleClear} aria-label="검색어 지우기" /> : null}
+        </SearchBar>
       </form>
 
       <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pb-5">
diff --git a/src/components/search/PlacesSearchInput.tsx b/src/components/search/PlacesSearchInput.tsx
index fbcac4d3..3c661e04 100644
--- a/src/components/search/PlacesSearchInput.tsx
+++ b/src/components/search/PlacesSearchInput.tsx
@@ -8,9 +8,11 @@ import {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
-import { Search, MapPin, X } from "lucide-react";
+import { MapPin } from "lucide-react";
 import { useMapsLibrary } from "@vis.gl/react-google-maps";
 
+import { LocationIcon, SearchIcon } from "@/assets/icons";
+import { SearchBar, SearchBarClear, SearchBarIcon, SearchBarInput } from "@/components/ui/search-bar";
 import { useDebouncedPlacePredictions } from "@/hooks/useDebouncedPlacePredictions";
 import {
   circleLocationBias,
@@ -294,19 +296,11 @@ export function PlacesSearchInput({
   return (
     <div ref={containerRef} className="relative">
       <form onSubmit={handleSubmit} className="flex items-center gap-1">
-        <div className="relative flex w-full min-w-0 items-center">
-          {leadingIcon === "pin" ? (
-            <MapPin
-              className="pointer-events-none absolute left-3 h-4 w-4 text-dark-gray"
-              aria-hidden
-            />
-          ) : (
-            <Search
-              className="pointer-events-none absolute left-3 h-4 w-4 text-dark-gray"
-              aria-hidden
-            />
-          )}
-          <input
+        <SearchBar>
+          <SearchBarIcon>
+            {leadingIcon === "pin" ? <LocationIcon size={20} /> : <SearchIcon size={20} />}
+          </SearchBarIcon>
+          <SearchBarInput
             ref={inputRef}
             type="text"
             value={inputValue}
@@ -316,19 +310,9 @@ export function PlacesSearchInput({
             onFocus={() => predictions.length > 0 && setIsOpen(true)}
             placeholder={placeholder}
             autoComplete="off"
-            className="w-full rounded-lg border border-gray-border bg-white py-2 pl-9 pr-8 text-body-m-regular outline-none placeholder:text-[#99A1AF] focus:border-primary focus:ring-2 focus:ring-primary/30 focus:ring-inset disabled:cursor-not-allowed disabled:opacity-60"
           />
-          {inputValue ? (
-            <button
-              type="button"
-              onClick={handleClear}
-              className="absolute right-2.5 text-[#99A1AF] hover:text-[#364153]"
-              aria-label="지우기"
-            >
-              <X className="h-3.5 w-3.5" />
-            </button>
-          ) : null}
-        </div>
+          {inputValue ? <SearchBarClear onClick={handleClear} aria-label="지우기" /> : null}
+        </SearchBar>
         {!pickOnly ? (
           <button
             type="submit"
diff --git a/src/components/settings/ConfirmDialog.test.tsx b/src/components/settings/ConfirmDialog.test.tsx
index 1c251772..60957721 100644
--- a/src/components/settings/ConfirmDialog.test.tsx
+++ b/src/components/settings/ConfirmDialog.test.tsx
@@ -3,7 +3,6 @@ import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { ConfirmDialog } from "./ConfirmDialog";
-import { SettingsDialog } from "./SettingsDialog";
 
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 let host: HTMLDivElement;
@@ -11,12 +10,24 @@ let root: Root;
 const outer = vi.fn();
 const confirm = vi.fn();
 const cancel = vi.fn();
-const button = (name: string) => [...document.querySelectorAll<HTMLButtonElement>("button")]
-  .find(node => node.textContent === name || node.getAttribute("aria-label") === name)!;
-async function render(pending = false) {
+// 접근성 이름: aria-labelledby(Button loading이면 loadingLabel span) → aria-label → 글자 순서
+function accessibleName(node: Element) {
+  const labelledBy = node.getAttribute("aria-labelledby");
+  if (labelledBy) return labelledBy.split(" ").map(id => document.getElementById(id)?.textContent ?? "").join(" ");
+  return node.getAttribute("aria-label") ?? node.textContent ?? "";
+}
+const buttons = () => [...document.querySelectorAll<HTMLButtonElement>("button")];
+const button = (name: string) => buttons().find(node => accessibleName(node) === name)!;
+// Base UI는 첫 포커스·포커스 복귀를 다음 프레임에 한다
+const nextFrame = () => act(async () => { await new Promise(resolve => requestAnimationFrame(() => resolve(null))); });
+const escape = () => act(async () => {
+  document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }));
+});
+async function render({ pending = false, confirmDisabled = false } = {}) {
   await act(async () => root.render(
     <div onClick={outer} onMouseDown={outer} onPointerDown={outer} onTouchStart={outer}>
-      <ConfirmDialog title="삭제" description="설명" isPending={pending} onConfirm={confirm} onCancel={cancel} />
+      <ConfirmDialog title="삭제" description="설명" isPending={pending} confirmDisabled={confirmDisabled}
+        onConfirm={confirm} onCancel={cancel} />
     </div>,
   ));
 }
@@ -36,7 +47,15 @@ it.each(["click", "mousedown", "pointerdown", "touchstart"])("contains %s from p
   expect(outer).not.toHaveBeenCalled();
 });
 
-it.each(["확인", "취소", "삭제 닫기", "삭제 배경 닫기"])("preserves the %s action", async name => {
+it("is a modal alert dialog without a close X", async () => {
+  await render();
+  const dialog = document.querySelector('[role="alertdialog"]')!;
+  expect(dialog.hasAttribute("data-open")).toBe(true);
+  expect(accessibleName(dialog)).toBe("삭제");
+  expect(buttons().map(accessibleName)).not.toContain("삭제 닫기");
+});
+
+it.each(["확인", "취소", "삭제 배경 닫기"])("preserves the %s action", async name => {
   await render();
   await act(async () => button(name).click());
   expect(confirm).toHaveBeenCalledTimes(name === "확인" ? 1 : 0);
@@ -44,49 +63,48 @@ it.each(["확인", "취소", "삭제 닫기", "삭제 배경 닫기"])("preserve
   expect(outer).not.toHaveBeenCalled();
 });
 
-it("keeps document Escape and Tab handling, contains focus and restores the trigger", async () => {
+it("focuses cancel first, hides the page behind it, closes with document Escape and restores the trigger", async () => {
   const trigger = document.createElement("button");
   document.body.append(trigger); trigger.focus();
   await render();
-  expect(document.activeElement).toBe(button("삭제 닫기"));
-  expect(host.hasAttribute("inert")).toBe(true);
-  await act(async () => {
-    button("확인").focus();
-    button("확인").dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true }));
-  });
-  expect(document.activeElement).toBe(button("삭제 닫기"));
-  await act(async () => button("삭제 닫기").dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", shiftKey: true, bubbles: true, cancelable: true })));
-  expect(document.activeElement).toBe(button("확인"));
-  await act(async () => trigger.focus());
-  expect(document.activeElement).toBe(button("삭제 닫기"));
-  await act(async () => button("취소").dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true })));
+  await nextFrame();
+  // 첫 포커스는 취소(Enter 한 번에 확인이 실행되지 않게). 바깥 요소는 Base UI가 aria-hidden으로 가린다
+  expect(document.activeElement).toBe(button("취소"));
+  expect(host.getAttribute("aria-hidden")).toBe("true");
+  expect(trigger.getAttribute("aria-hidden")).toBe("true");
+  await escape();
   expect(cancel).toHaveBeenCalledTimes(1);
   await act(async () => root.render(null));
-  expect(host.hasAttribute("inert")).toBe(false);
+  await nextFrame();
+  expect(host.hasAttribute("aria-hidden")).toBe(false);
   expect(document.activeElement).toBe(trigger);
   trigger.remove();
 });
 
-it("uses current pending state without resetting focus and blocks all pending actions", async () => {
-  await render(); button("취소").focus();
-  await render(true);
-  expect(document.activeElement).toBe(button("취소"));
-  for (const name of ["처리 중…", "취소", "삭제 닫기", "삭제 배경 닫기"]) {
+it("shows progress while pending and blocks confirm, cancel, backdrop and Escape", async () => {
+  await render(); await nextFrame(); button("확인").focus();
+  await render({ pending: true });
+  await nextFrame();
+  // 누른 확인 버튼에 포커스가 남는다(progress 중에도 focusable, 첫 포커스로 되돌리지 않음)
+  const action = button("처리 중");
+  expect(document.activeElement).toBe(action);
+  expect(action).toBeDefined();
+  expect(action.getAttribute("aria-busy")).toBe("true");
+  expect(action.getAttribute("aria-disabled")).toBe("true");
+  expect(buttons().map(accessibleName)).not.toContain("확인");
+  for (const name of ["처리 중", "취소", "삭제 배경 닫기"]) {
     await act(async () => button(name).click());
   }
-  await act(async () => button("삭제 닫기").dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
+  await escape();
   expect(confirm).not.toHaveBeenCalled(); expect(cancel).not.toHaveBeenCalled();
+  expect(document.querySelector('[role="alertdialog"]')?.hasAttribute("data-open")).toBe(true);
 });
 
-it.each([false, true])("SettingsDialog portal containment is opt-in (%s)", async enabled => {
-  await act(async () => root.render(
-    <div onClick={outer}>
-      <SettingsDialog title="설정" onClose={cancel} {...(enabled ? { stopPortalEventPropagation: true } : {})}>
-        <button type="button" onClick={confirm}>실행</button>
-      </SettingsDialog>
-    </div>,
-  ));
-  await act(async () => button("실행").click());
-  expect(confirm).toHaveBeenCalledTimes(1);
-  expect(outer).toHaveBeenCalledTimes(enabled ? 0 : 1);
+it("disables only the confirm button when confirmDisabled", async () => {
+  await render({ confirmDisabled: true });
+  expect(button("확인").disabled).toBe(true);
+  await act(async () => button("확인").click());
+  expect(confirm).not.toHaveBeenCalled();
+  await act(async () => button("취소").click());
+  expect(cancel).toHaveBeenCalledTimes(1);
 });
diff --git a/src/components/settings/ConfirmDialog.tsx b/src/components/settings/ConfirmDialog.tsx
index 2c0d7dfb..b45ebc8b 100644
--- a/src/components/settings/ConfirmDialog.tsx
+++ b/src/components/settings/ConfirmDialog.tsx
@@ -1,119 +1,101 @@
 "use client";
 
-import { useCallback, useLayoutEffect, useRef } from "react";
+import type { SyntheticEvent } from "react";
 
 import {
-  alertDialogButtonClass,
-  SettingsActionButton,
-  SettingsActionButtonRow,
-} from "@/components/settings/SettingsActionButton";
-import { SettingsDialog } from "@/components/settings/SettingsDialog";
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 type Props = {
   title: string;
   description?: string;
   confirmLabel?: string;
   cancelLabel?: string;
+  /** 확인 동작 처리 중. Esc·딤·취소를 모두 막고 확인 버튼은 progress로 바뀐다 */
   isPending?: boolean;
+  /** 지금은 확인할 수 없는 상태(예: 동기화 오류). 확인 버튼만 비활성으로 보이고 취소·닫기는 그대로 된다 */
+  confirmDisabled?: boolean;
+  /** 삭제·탈퇴·나가기 같은 위험 동작이면 true(확인 버튼 Critical Solid) */
   destructive?: boolean;
-  appearance?: "default" | "ledger" | "alert";
-  /** 확인 동작이 실패했을 때 버튼 아래에 보여줄 한 줄 안내 — `alert`에서만 쓴다 */
+  /** 확인 동작이 실패했을 때 버튼 아래에 보여줄 한 줄 안내 */
   errorMessage?: string | null;
   onConfirm: () => void;
   onCancel: () => void;
 };
 
+// 포털 표면과 배경에서만 카드 클릭·드래그 호스트로 가는 포인터 이벤트를 끊는다.
+// 키 입력은 Base UI가 document에서도 받으므로 막지 않는다.
+const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+const pointerBoundary = {
+  onClick: stopPropagation,
+  onMouseDown: stopPropagation,
+  onPointerDown: stopPropagation,
+  onTouchStart: stopPropagation,
+};
+
+/**
+ * 확인창(Figma Alert Dialog 5621:3002). 마운트되면 열린 상태라 호출부는 조건부로 렌더한다.
+ * 닫기 요청(Esc·딤·취소)은 모두 onCancel이고, 처리 중에는 모두 막힌다. 성공 뒤 닫기는 호출부가 언마운트로 한다.
+ *
+ * @example
+ * {target ? (
+ *   <ConfirmDialog destructive title="이 장소를 삭제할까요?" confirmLabel="삭제"
+ *     isPending={isDeleting} onConfirm={handleDelete} onCancel={() => setTarget(null)} />
+ * ) : null}
+ */
 export function ConfirmDialog({
   title,
   description,
   confirmLabel = "확인",
   cancelLabel = "취소",
   isPending = false,
+  confirmDisabled = false,
   destructive = false,
-  appearance = "default",
   errorMessage,
   onConfirm,
   onCancel,
 }: Readonly<Props>) {
-  // SettingsDialog는 onClose가 바뀔 때마다 포커스·inert를 다시 잡으므로 안정된 함수를 넘긴다
-  const latest = useRef({ onCancel, isPending });
-  useLayoutEffect(() => {
-    latest.current = { onCancel, isPending };
-  });
-  const handleClose = useCallback(() => {
-    if (!latest.current.isPending) latest.current.onCancel();
-  }, []);
-
-  const confirmText = isPending ? "처리 중…" : confirmLabel;
-  const alertConfirmClass = alertDialogButtonClass[destructive ? "critical" : "brand"];
-  const ledgerButtonClass = appearance === "ledger" ? "h-12 rounded-lg text-[16px]" : undefined;
-  const descriptionClass = appearance === "ledger"
-    ? "whitespace-pre-line text-[14px] leading-5 text-text-subtle"
-    : "text-body-m-regular mobile:text-body-s-regular leading-relaxed text-dark-gray";
-
-  if (appearance === "alert") {
-    return (
-      <SettingsDialog
-        title={title}
-        onClose={handleClose}
-        appearance="alert"
-        showCloseButton={false}
-        stopPortalEventPropagation
-      >
-        {description ? <p className="whitespace-pre-line text-body-l-regular text-text">{description}</p> : null}
-        <div className="mt-4 flex gap-2">
-          <button type="button" className={`flex-1 ${alertDialogButtonClass.secondary}`} onClick={handleClose} disabled={isPending}>
-            {cancelLabel}
-          </button>
-          <button
-            type="button"
-            className={`flex-1 ${alertConfirmClass}`}
-            onClick={onConfirm}
-            disabled={isPending}
-          >
-            {confirmText}
-          </button>
-        </div>
-        {errorMessage ? (
-          <p role="alert" className="mt-2 text-body-s-regular text-status-negative">
-            {errorMessage}
-          </p>
-        ) : null}
-      </SettingsDialog>
-    );
-  }
-
   return (
-    <SettingsDialog
-      title={title}
-      onClose={handleClose}
-      size="compact"
-      appearance={appearance}
-      stopPortalEventPropagation
+    <AlertDialog
+      open
+      closeDisabled={isPending}
+      // 열린 채 마운트되므로 닫기 요청(open=false)만 온다
+      onOpenChange={(open) => {
+        if (!open) onCancel();
+      }}
     >
-      {description ? (
-        <p className={descriptionClass}>
-          {description}
-        </p>
-      ) : null}
-      <SettingsActionButtonRow className="mt-6">
-        <SettingsActionButton
-          variant="secondary"
-          className={ledgerButtonClass}
-          onClick={handleClose}
-          disabled={isPending}
-        >
-          {cancelLabel}
-        </SettingsActionButton>
-        <SettingsActionButton
-          variant="primary"
-          className={`${ledgerButtonClass ?? ""} ${destructive ? "bg-status-negative" : ""}`}
-          onClick={onConfirm}
-          disabled={isPending}
-        >
-          {confirmText}
-        </SettingsActionButton>
-      </SettingsActionButtonRow>
-    </SettingsDialog>
+      <AlertDialogContent {...pointerBoundary} backdropProps={pointerBoundary} backdropCloseLabel={`${title} 배경 닫기`}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description ? <AlertDialogDescription>{description}</AlertDialogDescription> : null}
+        </AlertDialogHeader>
+        <div className="flex flex-col gap-2">
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isPending}>{cancelLabel}</AlertDialogCancel>
+            <AlertDialogAction
+              tone={destructive ? "critical" : "neutral"}
+              disabled={confirmDisabled}
+              loading={isPending}
+              loadingLabel="처리 중"
+              onClick={onConfirm}
+            >
+              {confirmLabel}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+          {errorMessage ? (
+            <p role="alert" className="text-center text-body-s-regular text-status-negative">
+              {errorMessage}
+            </p>
+          ) : null}
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 }
diff --git a/src/components/settings/SettingsActionButton.tsx b/src/components/settings/SettingsActionButton.tsx
deleted file mode 100644
index cf17ba5a..00000000
--- a/src/components/settings/SettingsActionButton.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-"use client";
-
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
-
-import { cn } from "@/lib/utils";
-
-/** `RoomTripEditForm` 하단 액션 버튼과 동일 */
-export const settingsActionButtonVariantClass = {
-  secondary:
-    "rounded-full border border-gray-border bg-transparent py-2.5 text-label-l-emphasis mobile:text-label-m-emphasis font-semibold text-dark-gray transition hover:bg-bubble-gray disabled:cursor-not-allowed disabled:opacity-40",
-  primary:
-    "rounded-full border border-transparent bg-primary py-2.5 text-label-l-emphasis mobile:text-label-m-emphasis font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40",
-} as const;
-
-/** Figma Alert Dialog 버튼 — Secondary와 Primary(Neutral·Brand Solid·Critical) */
-export const alertDialogButtonClass = {
-  secondary:
-    "h-12 cursor-pointer rounded-lg bg-fill px-3.5 text-label-l-emphasis text-text transition-colors enabled:hover:bg-fill-strong disabled:cursor-not-allowed disabled:text-text-disabled",
-  neutral:
-    "h-12 cursor-pointer rounded-lg bg-[var(--gray-800)] px-3.5 text-label-l-emphasis text-text-inverse transition-opacity enabled:hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40",
-  brand:
-    "h-12 cursor-pointer rounded-lg bg-primary px-3.5 text-label-l-emphasis text-text-inverse transition-opacity enabled:hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40",
-  critical:
-    "h-12 cursor-pointer rounded-lg bg-status-negative px-3.5 text-label-l-emphasis text-text-inverse transition-opacity enabled:hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40",
-} as const;
-
-export type SettingsActionButtonVariant = keyof typeof settingsActionButtonVariantClass;
-
-type SettingsActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  variant: SettingsActionButtonVariant;
-  /** 기본 `flex-1` — 모달 단일 버튼 등은 `false` + `className="w-full"` */
-  flex?: boolean;
-};
-
-export function SettingsActionButton({
-  variant,
-  flex = true,
-  className,
-  type = "button",
-  ...props
-}: SettingsActionButtonProps) {
-  return (
-    <button
-      type={type}
-      className={cn(
-        "cursor-pointer",
-        flex ? "flex-1" : null,
-        settingsActionButtonVariantClass[variant],
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export function SettingsActionButtonRow({
-  className,
-  children,
-}: {
-  className?: string;
-  children: ReactNode;
-}) {
-  return <div className={cn("flex gap-2 pt-2", className)}>{children}</div>;
-}
diff --git a/src/components/settings/SettingsDialog.tsx b/src/components/settings/SettingsDialog.tsx
deleted file mode 100644
index 4e24ae4b..00000000
--- a/src/components/settings/SettingsDialog.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-"use client";
-
-import { useEffect, useId, useRef, type ReactNode, type SyntheticEvent } from "react";
-import { createPortal } from "react-dom";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-// 포털의 이벤트가 React 트리의 카드 클릭·드래그 호스트로 전파되는 것만 막는다.
-// 사용자 동작은 내부 버튼이 담당하며, 키 입력은 document의 포커스·Escape 처리로 전달한다.
-const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
-const portalEventBoundary = {
-  onClick: stopPropagation,
-  onMouseDown: stopPropagation,
-  onPointerDown: stopPropagation,
-  onTouchStart: stopPropagation,
-};
-
-function restoreDialogFocus(trigger: Element | null) {
-  if (trigger instanceof HTMLElement && trigger !== document.body && trigger.isConnected) {
-    trigger.focus();
-    return;
-  }
-  const fallback = document.querySelector<HTMLElement>("[data-cookie-settings-trigger]");
-  if (fallback) {
-    fallback.focus();
-    return;
-  }
-  const main = document.querySelector<HTMLElement>("main, [role=main]");
-  if (!main) return;
-  const previousTabIndex = main.getAttribute("tabindex");
-  main.setAttribute("tabindex", "-1");
-  main.focus({ preventScroll: true });
-  if (previousTabIndex === null) main.removeAttribute("tabindex");
-  else main.setAttribute("tabindex", previousTabIndex);
-}
-
-type DialogAppearance = "default" | "ledger" | "alert";
-type DialogSize = "default" | "medium" | "compact";
-
-const dialogWidthClass: Record<DialogSize, string> = {
-  compact: "max-w-md",
-  medium: "max-w-[600px]",
-  default: "max-w-[640px]",
-};
-const dialogTitleClass: Record<DialogAppearance, string> = {
-  alert: "text-title-l",
-  ledger: "text-[20px] leading-7 font-bold",
-  default: "text-title-l mobile:text-title-m font-bold",
-};
-
-function getDialogSurfaceClass(appearance: DialogAppearance, size: DialogSize) {
-  if (appearance === "alert") {
-    return "relative m-0 max-h-[calc(100dvh-2rem)] w-full min-w-0 max-w-[400px] overflow-y-auto overscroll-contain rounded-[10px] border-0 bg-fill-elevate p-5 text-text shadow-xl [scrollbar-gutter:auto]";
-  }
-  const isLedger = appearance === "ledger";
-  return cn(
-    "relative m-0 border-0 max-h-[calc(100dvh-2rem)] w-full min-w-0 overflow-y-auto overscroll-contain bg-white p-6 text-neutral-900 shadow-xl",
-    dialogWidthClass[size],
-    isLedger ? "rounded-xl mobile:max-w-[353px] max-sm:max-w-[353px]" : "rounded-3xl",
-    isLedger ? "[scrollbar-gutter:auto]" : "[scrollbar-gutter:stable_both-edges] sm:px-8 sm:py-6",
-  );
-}
-
-/** 기존 설정 모달의 표면·간격을 공유하는 키보드 접근 가능한 다이얼로그. */
-export function SettingsDialog({
-  title,
-  onClose,
-  children,
-  size = "default",
-  appearance = "default",
-  stopPortalEventPropagation = false,
-  className = "",
-  overlayClassName = "",
-  showCloseButton = true,
-  titleAccessory,
-}: Readonly<{
-  title: string;
-  onClose: () => void;
-  children: ReactNode;
-  size?: DialogSize;
-  /** `alert` — Figma Alert Dialog(폭 400, 여백 20, 제목 title/lg) */
-  appearance?: DialogAppearance;
-  stopPortalEventPropagation?: boolean;
-  className?: string;
-  overlayClassName?: string;
-  showCloseButton?: boolean;
-  /** 제목 바로 옆에 붙는 보조 액션 — 예: 여행 삭제 */
-  titleAccessory?: ReactNode;
-}>) {
-  const titleId = useId();
-  const overlayRef = useRef<HTMLDivElement>(null);
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const trigger = document.activeElement;
-    const dialog = dialogRef.current!;
-    const background = [...document.body.children].filter(
-      (node) => node !== overlayRef.current,
-    );
-    const previousInert = background.map((node) => node.getAttribute("inert"));
-    background.forEach((node) => node.setAttribute("inert", ""));
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const focusScope = () => dialog.querySelector<HTMLElement>('[role="alertdialog"][aria-modal="true"]') ?? dialog;
-    const focusable = () => [
-      ...focusScope().querySelectorAll<HTMLElement>(
-        'button:not(:disabled), a[href], summary, input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex="0"]',
-      ),
-    ];
-    // 제목 옆 위험 액션 등 `data-skip-autofocus`는 첫 포커스에서 건너뛴다
-    (focusable().find((node) => node.dataset.skipAutofocus === undefined) ?? focusable()[0])?.focus();
-
-    function handleKey(event: KeyboardEvent) {
-      if (event.defaultPrevented) return;
-      if (event.key === "Escape" && focusScope() === dialog) {
-        event.preventDefault();
-        onClose();
-      }
-      if (event.key !== "Tab") return;
-      const items = focusable();
-      const first = items[0];
-      const last = items.at(-1);
-      if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last?.focus();
-      } else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first?.focus();
-      }
-    }
-    function containFocus(event: FocusEvent) {
-      if (!focusScope().contains(event.target as Node)) focusable()[0]?.focus();
-    }
-    document.addEventListener("keydown", handleKey);
-    document.addEventListener("focusin", containFocus);
-    return () => {
-      document.removeEventListener("keydown", handleKey);
-      document.removeEventListener("focusin", containFocus);
-      document.body.style.overflow = previousOverflow;
-      background.forEach((node, index) => {
-        const value = previousInert[index];
-        if (value === null) node.removeAttribute("inert");
-        else node.setAttribute("inert", value);
-      });
-      restoreDialogFocus(trigger);
-    };
-  }, [onClose]);
-
-  const isAlert = appearance === "alert";
-  const isCompactSurface = appearance === "ledger" || isAlert;
-
-  return createPortal(
-    <div
-      ref={overlayRef}
-      {...(stopPortalEventPropagation ? portalEventBoundary : {})}
-      className={`fixed inset-0 z-[210] flex items-center justify-center ${isCompactSurface ? "bg-[#0f1724]/35 p-5" : "bg-black/40 p-4 backdrop-blur-sm"} ${overlayClassName}`}
-    >
-      <button
-        type="button"
-        tabIndex={-1}
-        aria-label={`${title} 배경 닫기`}
-        className="absolute inset-0 cursor-default"
-        onClick={onClose}
-      />
-      <dialog
-        open
-        ref={dialogRef}
-        aria-modal="true"
-        aria-labelledby={titleId}
-        className={cn(getDialogSurfaceClass(appearance, size), className)}
-      >
-        <div className={`${appearance === "ledger" ? "mb-6" : "mb-2"} flex items-center justify-between gap-4`}>
-          <div className="flex min-w-0 items-baseline gap-2">
-            <h2 id={titleId} className={dialogTitleClass[appearance]}>
-              {title}
-            </h2>
-            {titleAccessory}
-          </div>
-          {showCloseButton && <button
-            type="button"
-            aria-label={`${title} 닫기`}
-            onClick={onClose}
-            className={`flex shrink-0 cursor-pointer items-center justify-center rounded-full text-dark-gray hover:bg-bubble-gray focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary ${isAlert ? "-my-1 -mr-1 size-8" : "h-11 w-11"} ${appearance === "ledger" ? "mobile:hidden max-sm:hidden" : ""}`}
-          >
-            <X size={isAlert ? 20 : 22} aria-hidden />
-          </button>}
-        </div>
-        {children}
-      </dialog>
-    </div>,
-    document.body,
-  );
-}
diff --git a/src/components/settings/WithdrawAccountConfirmModal.tsx b/src/components/settings/WithdrawAccountConfirmModal.tsx
index 42a0f389..595d94ea 100644
--- a/src/components/settings/WithdrawAccountConfirmModal.tsx
+++ b/src/components/settings/WithdrawAccountConfirmModal.tsx
@@ -1,12 +1,15 @@
 "use client";
 
-import { useEffect } from "react";
-import { UserX } from "lucide-react";
-
 import {
-  SettingsActionButton,
-  SettingsActionButtonRow,
-} from "@/components/settings/SettingsActionButton";
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 type Props = {
   onClose: () => void;
@@ -14,70 +17,47 @@ type Props = {
   isPending: boolean;
 };
 
+const TITLE = "정말 탈퇴하시겠어요?";
+
+/** 회원 탈퇴 확인창(Figma Alert Dialog, Destructive). 마운트되면 열린 상태라 호출부가 조건부로 렌더한다 */
 export function WithdrawAccountConfirmModal({
   onClose,
   onConfirm,
   isPending,
 }: Props) {
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && !isPending) onClose();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [onClose, isPending]);
-
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4 backdrop-blur-sm"
-      onClick={(e) => {
-        if (e.target === e.currentTarget && !isPending) onClose();
+    <AlertDialog
+      open
+      closeDisabled={isPending}
+      // 열린 채 마운트되므로 닫기 요청(open=false)만 온다
+      onOpenChange={(open) => {
+        if (!open) onClose();
       }}
-      role="presentation"
     >
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="withdraw-account-title"
-        className="w-full max-w-md overflow-hidden rounded-3xl bg-white shadow-xl"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="px-6 pb-2 pt-6 text-center">
-          <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-status-negative/10">
-            <UserX size={22} className="text-status-negative" aria-hidden />
-          </div>
-          <h2 id="withdraw-account-title" className="text-title-s font-bold">
-            정말 탈퇴하시겠어요?
-          </h2>
-          <p className="mt-3 text-left text-body-m-regular mobile:text-body-s-regular leading-relaxed text-dark-gray">
-            탈퇴 후에는 계정을 복구할 수 없습니다. 
-            <br />
-            이메일·닉네임·프로필 등
-            
-            개인정보는 익명화되며,<br /> 참여 중이던 여행 멤버십은 정리됩니다.
+      {/* 지금처럼 딤을 눌러도 닫힌다(처리 중에는 closeDisabled가 막는다) */}
+      <AlertDialogContent backdropCloseLabel={`${TITLE} 배경 닫기`}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{TITLE}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {"탈퇴 후에는 계정을 복구할 수 없습니다.\n이메일·닉네임·프로필 등 개인정보는 익명화되며,\n참여 중이던 여행 멤버십은 정리됩니다."}
+          </AlertDialogDescription>
+          {/* 지금 화면처럼 본문보다 작은 보조 안내 */}
+          <p className="text-body-s-regular text-text-subtle">
+            방장인 여행에 다른 멤버가 남아 있으면, 탈퇴 전 방장을 위임해야 합니다.
           </p>
-          <p className="mt-2 text-left text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-dark-gray">
-            방장인 여행에 다른 멤버가 남아 있으면, 탈퇴 전 방장을 위임해야
-            합니다.
-          </p>
-        </div>
-        <SettingsActionButtonRow className="px-6 py-5 pt-0">
-          <SettingsActionButton
-            variant="secondary"
-            onClick={onClose}
-            disabled={isPending}
-          >
-            취소
-          </SettingsActionButton>
-          <SettingsActionButton
-            variant="primary"
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>취소</AlertDialogCancel>
+          <AlertDialogAction
+            tone="critical"
+            loading={isPending}
+            loadingLabel="탈퇴 처리 중"
             onClick={onConfirm}
-            disabled={isPending}
           >
-            {isPending ? "탈퇴 처리 중…" : "탈퇴하기"}
-          </SettingsActionButton>
-        </SettingsActionButtonRow>
-      </div>
-    </div>
+            탈퇴하기
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 }
diff --git a/src/components/settings/WithdrawalDelegationRequiredModal.tsx b/src/components/settings/WithdrawalDelegationRequiredModal.tsx
index 715cfa22..dbb298f2 100644
--- a/src/components/settings/WithdrawalDelegationRequiredModal.tsx
+++ b/src/components/settings/WithdrawalDelegationRequiredModal.tsx
@@ -1,10 +1,16 @@
 "use client";
 
-import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { AlertCircle } from "lucide-react";
 
-import { SettingsActionButton } from "@/components/settings/SettingsActionButton";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import type { RoomRequiringDelegation } from "@/lib/api/user";
 import { useSessionStore } from "@/stores/session-store";
 
@@ -13,17 +19,12 @@ type Props = {
   onClose: () => void;
 };
 
+const TITLE = "방장 위임이 필요해요";
+
+/** 탈퇴 전 방장 위임 안내(Figma Alert Dialog, Notice). 마운트되면 열린 상태라 호출부가 조건부로 렌더한다 */
 export function WithdrawalDelegationRequiredModal({ rooms, onClose }: Props) {
   const router = useRouter();
 
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [onClose]);
-
   function handleRoomClick(roomId: string) {
     useSessionStore.getState().setCurrentRoomId(roomId);
     onClose();
@@ -31,61 +32,41 @@ export function WithdrawalDelegationRequiredModal({ rooms, onClose }: Props) {
   }
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4 backdrop-blur-sm"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
+    <AlertDialog
+      open
+      // 열린 채 마운트되므로 닫기 요청(open=false)만 온다
+      onOpenChange={(open) => {
+        if (!open) onClose();
       }}
-      role="presentation"
     >
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="withdrawal-delegation-title"
-        className="w-full max-w-md overflow-hidden rounded-3xl bg-white shadow-xl"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="px-6 pb-2 pt-6">
-          <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-amber-50">
-            <AlertCircle size={22} className="text-amber-600" aria-hidden />
-          </div>
-          <h2
-            id="withdrawal-delegation-title"
-            className="text-center text-title-s font-bold"
-          >
-            방장 위임이 필요해요
-          </h2>
-          <p className="mt-3 text-body-m-regular mobile:text-body-s-regular leading-relaxed text-dark-gray">
+      {/* 지금처럼 딤을 눌러도 닫힌다 */}
+      <AlertDialogContent backdropCloseLabel={`${TITLE} 배경 닫기`}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{TITLE}</AlertDialogTitle>
+          <AlertDialogDescription>
             아래 여행에서 방장을 다른 멤버에게 넘긴 뒤 탈퇴할 수 있어요. 여행
             이름을 누르면 멤버 설정으로 이동합니다.
-          </p>
-          {rooms.length > 0 && (
-            <ul className="mt-4 max-h-48 space-y-1 overflow-y-auto rounded-xl border border-gray-border bg-bubble-gray/40 p-2">
-              {rooms.map((room) => (
-                <li key={room.roomId}>
-                  <button
-                    type="button"
-                    onClick={() => handleRoomClick(room.roomId)}
-                    className="w-full cursor-pointer rounded-lg px-3 py-2.5 text-left text-label-l-regular mobile:text-label-m-regular font-medium text-gray-800 transition hover:bg-white"
-                  >
-                    {room.title}
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-        <div className="px-6 py-5 pt-2">
-          <SettingsActionButton
-            variant="primary"
-            flex={false}
-            className="w-full"
-            onClick={onClose}
-          >
-            확인
-          </SettingsActionButton>
-        </div>
-      </div>
-    </div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        {rooms.length > 0 && (
+          <ul className="flex max-h-48 flex-col gap-1 overflow-y-auto rounded-xl border border-border bg-fill-subtle p-2">
+            {rooms.map((room) => (
+              <li key={room.roomId}>
+                <button
+                  type="button"
+                  onClick={() => handleRoomClick(room.roomId)}
+                  className="w-full cursor-pointer rounded-lg px-3 py-2.5 text-left text-label-l-regular text-text transition-colors hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary mobile:text-label-m-regular"
+                >
+                  {room.title}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={onClose}>확인</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 }
diff --git a/src/components/stomp/StompConnectionBanner.tsx b/src/components/stomp/StompConnectionBanner.tsx
index 51bde782..89f7bb8a 100644
--- a/src/components/stomp/StompConnectionBanner.tsx
+++ b/src/components/stomp/StompConnectionBanner.tsx
@@ -26,7 +26,7 @@ export function StompConnectionBanner({ onRetry }: StompConnectionBannerProps) {
       animate={{ height: "auto", opacity: 1 }}
       exit={reduceMotion ? { opacity: 0 } : { height: 0, opacity: 0 }}
       transition={reduceMotion ? { duration: 0 } : { duration: 0.2 }}
-      className="fixed top-0 right-0 left-0 z-50 overflow-hidden border-b border-primary/25 bg-primary/[0.06] shadow-sm"
+      className="fixed top-0 right-0 left-0 z-50 overflow-hidden border-b border-primary/25 bg-primary-subtle shadow-sm"
     >
       <div className="mx-auto flex max-w-screen-xl items-center gap-2 px-4 py-2.5 text-primary">
         <AlertCircle className="h-4 w-4 shrink-0" aria-hidden />
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..766d55b2
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { useRef, type ComponentProps } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+// Figma 13 Alert Dialog: Alert Dialog 5621:3002(Purpose × Action Layout). 닫기 X는 없다(6058:535).
+// Purpose는 버튼 Type으로 고른다: Notice·Confirmation 주요 = Neutral Solid(Button 기본), Destructive 주요 = Critical Solid(tone="critical"), 취소 = Neutral Weak(6058:516).
+// 바깥 클릭은 Base UI AlertDialog가 막는다(disablePointerDismissal 강제). 딤을 눌러 닫으려면 AlertDialogContent의 backdropCloseLabel을 준다.
+// 닫기 요청(Esc·취소·딤)은 모두 Root의 onOpenChange를 거친다. 처리 중에는 Root의 closeDisabled로 막는다(Dialog·Drawer와 같은 이름·의미).
+//
+// @example
+// <AlertDialog open={open} onOpenChange={setOpen} closeDisabled={isDeleting}>
+//   <AlertDialogContent backdropCloseLabel="여행 삭제 배경 닫기">
+//     <AlertDialogHeader>
+//       <AlertDialogTitle>여행을 삭제할까요?</AlertDialogTitle>
+//       <AlertDialogDescription>삭제하면 되돌릴 수 없어요.</AlertDialogDescription>
+//     </AlertDialogHeader>
+//     <AlertDialogFooter>
+//       <AlertDialogCancel>취소</AlertDialogCancel>
+//       <AlertDialogAction tone="critical" loading={isDeleting} loadingLabel="삭제 중"
+//         onClick={() => deleteRoom(undefined, { onSuccess: () => setOpen(false) })}>삭제</AlertDialogAction>
+//     </AlertDialogFooter>
+//   </AlertDialogContent>
+// </AlertDialog>
+
+type AlertDialogProps = AlertDialogPrimitive.Root.Props & {
+  /** 처리 중처럼 닫으면 안 될 때 true. Esc·딤 닫기 버튼·취소(AlertDialogCancel)를 모두 막는다. 화면이 open을 false로 바꾸는 것(성공 뒤 닫기)은 막지 않는다 */
+  closeDisabled?: boolean;
+};
+
+/**
+ * Base UI AlertDialog.Root. 모달·role="alertdialog"는 고정이다. 메뉴 항목 등에서 열면 open·onOpenChange로 제어한다.
+ * 안쪽 요소가 Esc를 먼저 쓰고 preventDefault했으면 닫지 않는다(Dialog와 같은 규칙).
+ */
+function AlertDialog({ closeDisabled = false, onOpenChange, ...props }: Readonly<AlertDialogProps>) {
+  return (
+    <AlertDialogPrimitive.Root
+      data-slot="alert-dialog"
+      onOpenChange={(open, eventDetails) => {
+        // Base UI는 Esc를 document keydown(버블)에서 받아 defaultPrevented를 보지 않는다. 포털 안 React onKeyDown이 먼저 실행돼 이 값이 채워져 있다
+        const escapeHandledInside = eventDetails.reason === "escape-key" && eventDetails.event.defaultPrevented;
+        if (!open && (closeDisabled || escapeHandledInside)) {
+          eventDetails.cancel();
+          return;
+        }
+        onOpenChange?.(open, eventDetails);
+      }}
+      {...props}
+    />
+  );
+}
+
+/** 여는 버튼. 우리 Button으로 그리려면 render={<Button … />} */
+function AlertDialogTrigger(props: Readonly<AlertDialogPrimitive.Trigger.Props>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+// 딤은 Alert Dialog 페이지에 정의가 없어(figma-button-dialog 3-6) 지금 앱 값 black/40을 쓴다.
+// 대화상자 안에서 연 확인창(중첩)도 딤을 그린다(forceRender). 확인창은 그림자가 없어 흰 대화상자 위에서 경계가 사라지고, 지금 확인창도 대화상자 위에 딤을 한 겹 더 깐다.
+// iOS 26 Safari는 fixed 딤이 스크롤 뒤 화면을 다 덮지 못해 absolute로 둔다(Base UI 권장, body position: relative는 globals.css)
+type BackdropEventProps = Pick<AlertDialogPrimitive.Backdrop.Props, "onClick" | "onMouseDown" | "onPointerDown" | "onTouchStart">;
+
+function AlertDialogOverlay({ closeLabel, backdropProps }: Readonly<{ closeLabel?: string; backdropProps?: BackdropEventProps }>) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      {...backdropProps}
+      forceRender
+      data-slot="alert-dialog-overlay"
+      className="fixed inset-0 z-50 min-h-dvh bg-black/40 transition-opacity duration-100 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none supports-[-webkit-touch-callout:none]:absolute"
+    >
+      {/* Base UI에 AlertDialog 바깥 닫기 옵션이 없어 딤 전체를 덮는 Close 버튼으로 연다(옛 SettingsDialog의 '배경 닫기' 버튼과 같은 구조).
+          Close라 onOpenChange(false, reason "close-press")를 거치므로 closeDisabled면 거기서 막힌다. 키보드는 Esc로 닫으니 탭 순서에서 뺀다 */}
+      {closeLabel && (
+        <AlertDialogPrimitive.Close
+          data-slot="alert-dialog-backdrop-close"
+          tabIndex={-1}
+          aria-label={closeLabel}
+          className="absolute inset-0 size-full cursor-default"
+        />
+      )}
+    </AlertDialogPrimitive.Backdrop>
+  );
+}
+
+type AlertDialogContentProps = Omit<AlertDialogPrimitive.Popup.Props, "className" | "ref"> & {
+  /** 배치(폭)에만 쓴다 */
+  className?: string;
+  /** 주면 딤을 눌러 닫힌다(지금 확인창 동작). 값은 딤 위 숨은 닫기 버튼의 이름이다(예: "{제목} 배경 닫기"). 없으면 Esc·취소로만 닫힌다 */
+  backdropCloseLabel?: string;
+  /** 배경 닫기 버튼을 포함한 포털 이벤트의 전파 경계. 키보드는 차단하지 않는다 */
+  backdropProps?: BackdropEventProps;
+  /** 확인창의 접근성 이름. AlertDialogTitle 없이(Figma Show Title=false) 쓸 때 꼭 준다. 제목이 있으면 Base UI가 aria-labelledby로 제목을 잇는다 */
+  "aria-label"?: string;
+};
+
+// 폭: 원본 353(393 화면 − 좌우 20), 가이드 최대 400(5955:386). 좁은 화면은 좌우 20을 남기고 줄어든다.
+// padding spacing/24, 세로 버튼 배치(Vertical 5621:2999·3001)만 아래 spacing/12. radius 10은 rounded-lg, Content–Actions 간격 20, 그림자 없음(5955:386), 바탕 fill/elevation.
+// 최대 높이는 Figma 미정이라 dialog.tsx와 같은 규칙(화면 − 32px, 넘치면 안에서 스크롤)이다. 배경 스크롤이 잠겨 있어 가로 화면·글자 확대에서 버튼을 못 누르는 것을 막는다.
+// z-50은 다른 Base UI 팝업(dialog·drawer·select 등)과 같은 값이다. 같은 z라 나중에 연 확인창이 대화상자·시트 위에 뜬다.
+// 열림·닫힘은 shadcn 원본(fade + zoom 95%, 100ms)을 Base UI 전환 속성으로 옮긴 것이다
+
+/**
+ * 포털·딤·표면을 함께 그린다. 제목 없이 쓰면 aria-label을 준다.
+ * 첫 포커스는 취소 버튼이다(없으면 Base UI 기본: 첫 포커스 요소, 터치로 열면 표면). 세로 배치(주요 → 취소)에서도 Enter 한 번에 파괴적 동작이 실행되지 않게 한다.
+ * 바꾸려면 initialFocus를 넘긴다.
+ */
+function AlertDialogContent({ className, backdropCloseLabel, backdropProps, initialFocus, ...props }: Readonly<AlertDialogContentProps>) {
+  const popupRef = useRef<HTMLDivElement>(null);
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal">
+      <AlertDialogOverlay closeLabel={backdropCloseLabel} backdropProps={backdropProps} />
+      <AlertDialogPrimitive.Popup
+        ref={popupRef}
+        data-slot="alert-dialog-content"
+        // Base UI가 열린 뒤 호출한다(렌더 중 아님). 터치는 Base UI 기본(createDefaultInitialFocus)과 같이 표면, 비활성 취소는 기본(true)으로 넘긴다
+        initialFocus={
+          initialFocus ??
+          ((interactionType) =>
+            interactionType === "touch"
+              ? popupRef.current
+              : (popupRef.current?.querySelector<HTMLElement>(
+                  "[data-slot=alert-dialog-cancel]:not([data-disabled])",
+                ) ?? true))
+        }
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[min(400px,calc(100vw-40px))] -translate-x-1/2 -translate-y-1/2 flex-col gap-5 overflow-y-auto overscroll-contain rounded-lg bg-fill-elevate p-6 transition-[opacity,scale] duration-100 ease-out has-[[data-slot=alert-dialog-footer][data-layout=vertical]]:pb-3 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPrimitive.Portal>
+  );
+}
+
+/** Figma Content: 제목·본문 세로 간격 4, 가운데 정렬(5621:2819·2820) */
+function AlertDialogHeader({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-1 text-center", className)}
+      {...props}
+    />
+  );
+}
+
+// title/lg · text/default(5621:2819). Figma Show Title=false면 제목 없이 본문만 둔다(5955:298).
+// 그때는 확인창 이름이 사라지므로 AlertDialogContent에 aria-label(예: "여행 삭제 확인")을 준다
+function AlertDialogTitle({ className, ...props }: Readonly<AlertDialogPrimitive.Title.Props>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-title-l text-text", className)}
+      {...props}
+    />
+  );
+}
+
+// text/subtle(5621:2820). 글자는 Figma body/lg(18)가 제목에 비해 커 보여 body/md(16)로 고정한다(사용자 결정 2026-11-01).
+// 설명 문자열의 줄바꿈(\n)은 지금 확인창처럼 그대로 보인다(ConfirmDialog whitespace-pre-line)
+function AlertDialogDescription({ className, ...props }: Readonly<AlertDialogPrimitive.Description.Props>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-body-m-regular whitespace-pre-line text-text-subtle", className)}
+      {...props}
+    />
+  );
+}
+
+// Figma Actions: 버튼 md 48·간격 8·꽉 채움(5955:389). 자동 전환은 없어(6058:531) 문구가 길면 화면이 vertical을 고른다.
+// 순서는 DOM 순서 그대로 보인다(포커스 순서와 같게): horizontal은 취소 → 주요(5621:2998), vertical은 주요 → 취소(5621:2999)로 적는다.
+// vertical에서도 첫 포커스는 AlertDialogContent가 취소로 보낸다(주요가 먼저 있어도 Enter로 바로 실행되지 않음).
+// 버튼이 하나(Notice · Single 5621:3000)면 horizontal에 주요 버튼만 넣는다
+const alertDialogFooterVariants = cva("flex gap-2", {
+  variants: {
+    layout: {
+      horizontal: "*:flex-1",
+      vertical: "flex-col",
+    },
+  },
+  defaultVariants: { layout: "horizontal" },
+});
+
+function AlertDialogFooter({
+  className,
+  layout = "horizontal",
+  ...props
+}: Readonly<ComponentProps<"div"> & VariantProps<typeof alertDialogFooterVariants>>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      data-layout={layout}
+      className={cn(alertDialogFooterVariants({ layout }), className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogActionProps = Omit<ComponentProps<typeof Button>, "variant" | "tone" | "size"> & {
+  /** Neutral Solid(기본) · Critical Solid(삭제·탈퇴 같은 위험 동작). 브랜드 버튼은 확인창 유형에 없다(6058:517) */
+  tone?: "neutral" | "critical";
+};
+
+/**
+ * 주요 버튼. 누른다고 닫히지 않는 일반 Button이다 — 작업이 성공하면 화면이 open을 false로 바꾸고, 실패하면 열어 둔 채 오류를 보여 준다.
+ * Solid md 48로 고정이다. 처리 중에는 loading(누를 수 없음, 폭 유지 progress)
+ */
+function AlertDialogAction({ tone = "neutral", ...props }: Readonly<AlertDialogActionProps>) {
+  return <Button data-slot="alert-dialog-action" {...props} variant="solid" size="md" tone={tone} />;
+}
+
+type AlertDialogCancelProps = Omit<AlertDialogPrimitive.Close.Props, "className" | "render"> & {
+  /** 배치에만 쓴다 */
+  className?: string;
+};
+
+/**
+ * 취소 버튼(Neutral Weak md). Base UI Close라 누르면 onOpenChange(false, reason "close-press")로 닫힌다.
+ * closeDisabled면 눌러도 닫히지 않는다. 비활성으로 보이게 하는 것은 Figma가 따로 정하지 않아(6058:529 "취소를 Disabled로 만들지 않는다") 화면이 disabled로 정한다
+ */
+function AlertDialogCancel({ className, ...props }: Readonly<AlertDialogCancelProps>) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      render={<Button variant="weak" className={className} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
new file mode 100644
index 00000000..d0a0105a
--- /dev/null
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,91 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+// Figma DS에 인라인 Alert가 없어 지금 화면의 안내 상자 모양을 옮긴다.
+// lg는 로그인·약관 동의 화면 상자, md는 장소 상세·모바일 장소 검색·준비물 상자다.
+// brand의 테두리·바탕은 지금 쓰는 primary/35·primary/[0.06](합성색 #9ccfff·#f0f8ff)에 맞는 시맨틱 토큰이 없어 가장 가까운 원시 색을 쓴다
+const alertVariants = cva("group/alert flex border text-left", {
+  variants: {
+    tone: {
+      neutral: "border-border-subtle bg-fill-subtle text-text",
+      brand: "border-[var(--blue-300)] bg-[var(--blue-50)] text-primary",
+      warning: "border-status-cautionary bg-fill-subtle text-text",
+    },
+    size: {
+      lg: "rounded-xl px-4 py-3 text-body-m-regular mobile:text-body-s-regular",
+      md: "rounded-md p-3 text-body-s-regular",
+    },
+    // 모바일 장소 검색·준비물 상자는 동작이 문구 바로 옆에 있다(horizontal)
+    orientation: {
+      vertical: "flex-col gap-1",
+      horizontal: "items-center gap-2",
+    },
+  },
+  defaultVariants: { tone: "neutral", size: "md", orientation: "vertical" },
+});
+
+/**
+ * 급하지 않은 안내는 role="status"로 덮는다.
+ * 폭을 정하지 않는다. w-full에 바깥 margin을 더하면 넘치므로 간격은 부모가 주고, items-center 부모 안에서는 호출부가 self-stretch로 채운다.
+ * 아이콘 칸이 없다. 앞에 붙는 표시(로그인 '!' 원)는 호출부가 감싸서 배치한다.
+ */
+function Alert({
+  className,
+  tone = "neutral",
+  size = "md",
+  orientation = "vertical",
+  ...props
+}: Readonly<ComponentProps<"div"> & VariantProps<typeof alertVariants>>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      {...props}
+      data-size={size}
+      data-orientation={orientation}
+      className={cn(alertVariants({ tone, size, orientation }), className)}
+    />
+  );
+}
+
+// md 제목은 지금 앱 안 상자처럼 본문 굵기 그대로다. 굵은 제목은 로그인·약관 상자(lg)에만 있다
+function AlertTitle({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "min-w-0 group-data-[size=lg]/alert:text-body-m-emphasis group-data-[size=lg]/alert:mobile:text-body-s-emphasis",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn("min-w-0 text-text-subtle", className)}
+      {...props}
+    />
+  );
+}
+
+// 세로 배치에서 동작은 문구보다 8px 아래다(지금 상자의 mt-2). 부품 사이 gap 4px에 위 여백 4px을 더한다
+function AlertAction({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn(
+        "flex group-data-[orientation=horizontal]/alert:shrink-0 group-data-[orientation=vertical]/alert:pt-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..edfc9aab
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,126 @@
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+// Figma DS에 Avatar 컴포넌트가 없어 지금 화면들의 아바타 모양을 옮긴다. Figma 근거는 Header Profile(5219:10776)의
+// 36px·fill/strong 원뿐이라 이것을 기본값으로 둔다. 크기는 글자 설정을 따라 커지지 않게 px로 둔다(원칙 3-2).
+// 대체 글자는 화면별 지금 크기·굵기(24 가계부, 28 헤더 미리보기, 32 리뷰, 36 구성원, 56 내 정보)에 가장 가까운 토큰이고,
+// 글자를 쓰는 곳이 없는 40은 크기의 44%(18px)다. 대체 아이콘은 지금 채팅 아바타처럼 크기의 58%에 가장 가까운 Figma 아이콘 크기다.
+const avatarVariants = cva("relative flex shrink-0 select-none items-center justify-center overflow-hidden", {
+  variants: {
+    size: {
+      24: "size-[24px] text-body-xs-regular [&_svg]:size-[12px]",
+      28: "size-[28px] text-label-xs-regular [&_svg]:size-[16px]",
+      32: "size-[32px] text-label-m-regular mobile:text-label-xs-regular [&_svg]:size-[20px]",
+      36: "size-[36px] text-label-l-regular [&_svg]:size-[20px]",
+      40: "size-[40px] text-label-xl-regular [&_svg]:size-[24px]",
+      56: "size-[56px] text-heading-s [&_svg]:size-[32px]",
+    },
+    shape: {
+      circle: "rounded-full",
+      rounded: "rounded-xl",
+    },
+    // 배경은 사진을 받는 동안 보이는 색이기도 하다(AvatarImage가 bg-inherit로 아래의 대체를 가린다)
+    tone: {
+      primary: "bg-primary-subtle text-primary",
+      neutral: "bg-fill text-text-subtle",
+      placeholder: "bg-fill-strong text-text-subtle",
+      // 채팅 사진 자리 bg-light-gray(#d9d9d9)에 가장 가까운 gray/300은 맞는 semantic이 없어 원시 변수로 쓴다.
+      // 대체(사람 아이콘) 칸은 지금처럼 사진 자리보다 밝다
+      icon: "bg-[var(--gray-300)] text-icon-disabled *:data-[slot=avatar-fallback]:bg-fill-strong",
+      // WOORI(AI) 그림은 흰 바탕에 둔다
+      elevate: "bg-fill-elevate",
+    },
+    ring: {
+      none: "",
+      online: "ring-2 ring-status-positive",
+      // 구성원 카드는 옆에 접속 상태 글자가 있어 옅은 1px 링, 글자가 없는 헤더 미리보기(겹친 묶음)는 굵은 링과 흑백으로 그린다.
+      // 묶음 안인지로 나눠 쓰는 쪽은 접속 상태만 정한다
+      offline:
+        "ring-1 ring-border-subtle in-data-[slot=avatar-group]:ring-2 in-data-[slot=avatar-group]:ring-border in-data-[slot=avatar-group]:grayscale in-data-[slot=avatar-group]:brightness-110 in-data-[slot=avatar-group]:contrast-75",
+      // 채팅 목록 아바타. 그림자는 지금 쓰는 shadow-sm에 가장 가까운 Figma shadow/subtle(0 1 4 #1f2229 8%)이다
+      subtle: "ring-1 ring-border-subtle shadow-[0_1px_4px_rgba(31,34,41,0.08)]",
+      // 채팅 새 메시지 미리보기. 회색 버튼 바탕(background/strong) 위라 윤곽이 border/default다
+      default: "ring-1 ring-border",
+      // 가계부에서 겹친 아바타 사이를 끊는 안쪽 흰 테두리. 지금 굵기 1.5px에 맞는 토큰이 없다
+      cutout: "border-[1.5px] border-fill-elevate",
+    },
+  },
+  // 채팅 새 메시지 미리보기(24·28)는 10px, 채팅 목록(40)은 14px 모서리다
+  compoundVariants: [{ shape: "rounded", size: [24, 28], className: "rounded-lg" }],
+  defaultVariants: { size: 36, shape: "circle", tone: "placeholder", ring: "none" },
+});
+
+// Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+type AvatarProps = Omit<AvatarPrimitive.Root.Props, "className"> &
+  VariantProps<typeof avatarVariants> & { className?: string };
+
+/** 바깥 className은 배치(겹침 순서·위치)에만 쓴다. 색·크기·모양은 variant로만 바꾼다 */
+function Avatar({ className, size, shape, tone, ring, ...props }: Readonly<AvatarProps>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(avatarVariants({ size, shape, tone, ring }), className)}
+      {...props}
+    />
+  );
+}
+
+type AvatarImageProps = Omit<AvatarPrimitive.Image.Props, "className" | "keepMounted"> & { className?: string };
+
+function AvatarImage({ className, ...props }: Readonly<AvatarImageProps>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      // 구글 프로필(lh3.googleusercontent.com)은 Referer가 붙으면 로드를 거부한다
+      referrerPolicy="no-referrer"
+      // 기본 모드는 src가 바뀌면 이전 사진을 내리고 대체를 보인 채 다시 받는다. 지금처럼 새 사진이 올 때까지 이전 사진을 두도록
+      // 제자리에서 받는다. 받는 동안은 루트 배경(bg-inherit)으로 아래의 대체를 가리고, 실패하면 숨겨 대체가 바로 보이게 한다
+      keepMounted
+      className={cn("absolute inset-0 size-full bg-inherit object-cover data-error:hidden", className)}
+      {...props}
+    />
+  );
+}
+
+// delay를 주면 실패한 사진의 대체도 그만큼 늦게 보인다. 받는 동안은 AvatarImage가 대체를 덮어 delay가 필요 없다
+type AvatarFallbackProps = Omit<AvatarPrimitive.Fallback.Props, "className" | "delay"> & { className?: string };
+
+function AvatarFallback({ className, ...props }: Readonly<AvatarFallbackProps>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn("flex size-full items-center justify-center", className)}
+      {...props}
+    />
+  );
+}
+
+/** 버튼 안에도 두도록 span으로 그린다. 앞사람이 위에 오는 겹침 순서는 쓰는 쪽이 자식 className의 z로 정한다 */
+function AvatarGroup({ className, ...props }: Readonly<ComponentProps<"span">>) {
+  return (
+    <span
+      data-slot="avatar-group"
+      className={cn("isolate flex items-center *:not-first:-ml-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+/** 헤더 구성원 미리보기의 +N. 쓰는 곳이 28px 묶음뿐이라 크기를 고정한다 */
+function AvatarGroupCount({ className, ...props }: Readonly<ComponentProps<"span">>) {
+  return (
+    <span
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-[28px] shrink-0 items-center justify-center rounded-full bg-fill text-label-m-regular text-text-subtle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 00000000..ebf12950
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,81 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Figma 15 Badges: Badge / Weak 5626:32, Badge / Solid 5626:58, Badge / Outline 5626:84. 비조작 라벨이라 hover·focus·transition이 없다
+// 원시 변수로 쓰는 색: Figma primary/subtle(blue/50)은 코드 primary-subtle(blue-100)과 값이 다르고, status/*/subtle·strong은 코드에 토큰이 없다(코드 status-*는 */default).
+// gray/800(Solid Neutral 배경)·green/800·orange/800(아이콘)은 Figma도 원시 변수에 바로 묶었다
+const badgeVariants = cva(
+  // radius/sm 4px은 맞는 토큰이 없다(rounded-sm = 6px)
+  "inline-flex w-fit max-w-full shrink-0 items-center gap-1 overflow-hidden rounded-[4px] whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        weak: "",
+        solid: "",
+        // Figma도 Outline만 1px 테두리가 있어 폭이 2px 넓다. Weak·Solid에 투명 테두리를 두면 Figma보다 넓어진다
+        outline: "border",
+      },
+      tone: {
+        neutral: "",
+        brand: "",
+        informative: "",
+        positive: "",
+        warning: "",
+        critical: "",
+      },
+      // 아이콘은 Figma lg 14·md 12px이고, 글자 크기 설정을 따라 커지지 않게 px로 둔다(원칙 3-2)
+      size: {
+        lg: "min-h-6 px-2 text-label-s-regular [&>svg]:size-[14px]",
+        md: "min-h-5 px-1.5 text-label-xs-regular [&>svg]:size-[12px]",
+      },
+    },
+    // Weak·Outline의 Positive·Warning은 Figma에서 아이콘만 문구보다 한 단계 진하다
+    compoundVariants: [
+      { variant: "weak", tone: "neutral", className: "bg-fill text-text" },
+      { variant: "weak", tone: "brand", className: "bg-[var(--blue-50)] text-primary-strong" },
+      { variant: "weak", tone: "informative", className: "bg-fill text-primary-strong" },
+      { variant: "weak", tone: "positive", className: "bg-[var(--lime-100)] text-[var(--green-700)] [&>svg]:text-[var(--green-800)]" },
+      { variant: "weak", tone: "warning", className: "bg-[var(--orange-100)] text-[var(--orange-700)] [&>svg]:text-[var(--orange-800)]" },
+      { variant: "weak", tone: "critical", className: "bg-[var(--red-100)] text-[var(--red-800)]" },
+      { variant: "solid", tone: "neutral", className: "bg-[var(--gray-800)] text-text-inverse" },
+      { variant: "solid", tone: "brand", className: "bg-primary-strong text-text-inverse" },
+      // Figma도 Weak / Informative와 같은 색이다(5626:38·50)
+      { variant: "solid", tone: "informative", className: "bg-fill text-primary-strong" },
+      { variant: "solid", tone: "positive", className: "bg-[var(--green-700)] text-text-inverse" },
+      { variant: "solid", tone: "warning", className: "bg-[var(--orange-700)] text-text-inverse" },
+      { variant: "solid", tone: "critical", className: "bg-[var(--red-800)] text-text-inverse" },
+      { variant: "outline", tone: "neutral", className: "border-text text-text" },
+      { variant: "outline", tone: "brand", className: "border-primary-strong text-primary-strong" },
+      { variant: "outline", tone: "informative", className: "border-border text-primary-strong" },
+      { variant: "outline", tone: "positive", className: "border-[var(--green-700)] text-[var(--green-700)] [&>svg]:text-[var(--green-800)]" },
+      { variant: "outline", tone: "warning", className: "border-[var(--orange-700)] text-[var(--orange-700)] [&>svg]:text-[var(--orange-800)]" },
+      { variant: "outline", tone: "critical", className: "border-[var(--red-800)] text-[var(--red-800)]" },
+    ],
+    defaultVariants: { variant: "weak", tone: "neutral", size: "lg" },
+  },
+);
+
+/**
+ * 아이콘(@/assets/icons)은 span으로 감싸지 않고 직계 자식으로 넣는다. 크기·색은 Badge의 [&>svg] 규칙이 정한다.
+ * 긴 라벨은 부모 폭에서 잘리기만 한다(Figma에 말줄임 정의가 없다). 말줄임표가 필요한 곳은 호출부가 라벨을 `<span className="truncate">`로 감싼다.
+ */
+function Badge({
+  className,
+  variant = "weak",
+  tone = "neutral",
+  size = "lg",
+  render,
+  ...props
+}: Readonly<useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">({ className: cn(badgeVariants({ variant, tone, size }), className) }, props),
+    render,
+    state: { slot: "badge", variant, tone, size },
+  });
+}
+
+export { Badge };
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 00000000..3e0fc4c4
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { useId } from "react";
+
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+
+// Figma 01 Button: Button 5272:3019(Type × State) 안의 Button Base 5002:3814(Size)가 실제 모양을 그린다.
+// 상태는 DOM으로 그린다: Hover=:hover, Pressed=:active, Disabled=data-disabled, Loading=aria-busy. Focus는 Figma에 변형이 없어(6055:562) 다른 ui 부품과 같은 outline이다.
+// hover·active를 enabled:가 아니라 not-data-disabled:로 거는 이유: Loading은 focusableWhenDisabled라 native disabled가 아니어서 enabled:가 걸리고,
+// render로 div를 그리면 :enabled가 아예 걸리지 않는다. Base UI는 두 경우 모두 data-disabled를 단다.
+// Loading도 data-disabled라 비활성 색은 not-aria-busy:로 한정해 Loading 색과 겹치지 않게 한다. 비활성은 opacity 없이 Figma 색(6종 모두 fill/default + text/disabled, 5272:2989~3011)이다.
+// 아이콘–문구 간격은 Figma Label 좌우 padding 6px뿐이라(6055:576) 문구 양옆 6px을 버튼 padding에 더하고, 아이콘 쪽은 data-icon으로 6px을 뺀 뒤 gap 6px로 둔다
+const buttonVariants = cva(
+  "group/button relative inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap select-none transition-colors duration-120 ease-out not-data-disabled:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none data-disabled:not-aria-busy:bg-fill data-disabled:not-aria-busy:text-text-disabled [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        solid: "",
+        weak: "",
+        // Figma 테두리는 바깥 1px(strokeAlign OUTSIDE)이지만 높이 안에 둔다. 높이는 같고 폭만 Figma보다 2px 넓다
+        outline: "border",
+      },
+      tone: {
+        neutral: "",
+        brand: "",
+        critical: "",
+      },
+      // Button Base Size(5002:3815·3822·3829·3836). 높이는 시안 값을 min-h로 두고(원칙 3-2) 세로 padding은 따로 주지 않는다.
+      // 가로 padding = Size padding + Label 6px. 아이콘은 크기·선 굵기 그대로 px다
+      size: {
+        // label/xl/emphasis 행간이 Figma 22·코드 토큰 24라 문구만 있으면 Figma 54px보다 2px 높다. 아이콘이 있을 때의 56px로 맞춘다.
+        // radius/lg 12px은 코드 rounded-lg(10px)와 달라 임의값이다
+        lg: "min-h-14 rounded-[12px] px-5.5 text-label-xl-emphasis has-data-[icon=inline-start]:ps-4 has-data-[icon=inline-end]:pe-4 [&_svg:not([class*='size-'])]:size-[24px]",
+        md: "min-h-12 rounded-md px-5 text-label-l-emphasis has-data-[icon=inline-start]:ps-3.5 has-data-[icon=inline-end]:pe-3.5 [&_svg:not([class*='size-'])]:size-[20px]",
+        sm: "min-h-9 rounded-md px-4 text-label-m-emphasis has-data-[icon=inline-start]:ps-2.5 has-data-[icon=inline-end]:pe-2.5 [&_svg:not([class*='size-'])]:size-[16px]",
+        xs: "min-h-8 rounded-md px-3.5 text-label-m-emphasis has-data-[icon=inline-start]:ps-2 has-data-[icon=inline-end]:pe-2 [&_svg:not([class*='size-'])]:size-[16px]",
+      },
+    },
+    // Figma 등록 Type 6종만 둔다(5864:9503 "Brand Weak·Critical Outline 등 미등록 조합을 자동 확장하지 않습니다"). 나머지 조합은 ButtonProps 타입이 막는다.
+    // 원시 변수로 쓰는 색: gray/700·800·900, blue/950, red/900, gray/300은 Figma도 원시 변수에 바로 묶었고, status/negative/strong(red/800)은 코드에 시맨틱 토큰이 없다
+    compoundVariants: [
+      // Neutral Solid: Enabled 5272:3018, Hover 3010, Pressed 2999, Loading 2993
+      {
+        variant: "solid",
+        tone: "neutral",
+        className:
+          "bg-[var(--gray-800)] text-text-inverse not-data-disabled:hover:bg-[var(--gray-700)] not-data-disabled:active:bg-[var(--gray-900)] aria-busy:bg-[var(--gray-700)]",
+      },
+      // Brand Solid: Enabled 5272:3001, Hover 2997, Pressed 3009, Loading 2994
+      {
+        variant: "solid",
+        tone: "brand",
+        className:
+          "bg-primary text-text-inverse not-data-disabled:hover:bg-primary-strong not-data-disabled:active:bg-[var(--blue-950)] aria-busy:bg-primary-strong",
+      },
+      // Critical Solid: Enabled 5272:3016, Hover 3003, Pressed 3000, Loading 3017
+      {
+        variant: "solid",
+        tone: "critical",
+        className:
+          "bg-status-negative text-text-inverse not-data-disabled:hover:bg-[var(--red-800)] not-data-disabled:active:bg-[var(--red-900)] aria-busy:bg-[var(--red-800)]",
+      },
+      // Neutral Weak: Enabled 5272:3015, Hover 3004, Pressed 3008, Loading 3006
+      {
+        variant: "weak",
+        tone: "neutral",
+        className:
+          "bg-fill text-text not-data-disabled:hover:bg-fill-strong not-data-disabled:active:bg-[var(--gray-300)] aria-busy:bg-fill-strong",
+      },
+      // Outline 배경은 투명이 아니라 fill/subtle이다(5864:9503). 테두리는 Hover에서만 border/hover이고 Pressed·Loading·Disabled는 border/default다.
+      // 마우스로 누르면 :hover도 함께 걸려서 Pressed 테두리를 다시 border/default로 둔다
+      // Brand Outline: Enabled 5272:3013, Hover 3005, Pressed 2998, Loading 3012
+      {
+        variant: "outline",
+        tone: "brand",
+        className:
+          "border-border bg-fill-subtle text-primary-strong not-data-disabled:hover:border-border-hover not-data-disabled:hover:bg-fill not-data-disabled:active:border-border not-data-disabled:active:bg-fill-strong aria-busy:bg-fill",
+      },
+      // Neutral Outline: Enabled 5272:3014, Hover 3002, Pressed 2996, Loading 2992
+      {
+        variant: "outline",
+        tone: "neutral",
+        className:
+          "border-border bg-fill-subtle text-text not-data-disabled:hover:border-border-hover not-data-disabled:hover:bg-fill not-data-disabled:active:border-border not-data-disabled:active:bg-fill-strong aria-busy:bg-fill",
+      },
+    ],
+    defaultVariants: { variant: "solid", tone: "neutral", size: "md" },
+  },
+);
+
+/**
+ * Figma 등록 Type 6종(5272:3019)만 받는다. 위계는 Solid(높음)·Weak(중간)·Outline(낮음)이고(5002:3793),
+ * Brand는 핵심 행동, Neutral은 일반 행동, Critical은 파괴적 행동이다(5864:9503).
+ * - solid: neutral(기본)·brand·critical
+ * - weak: neutral
+ * - outline: neutral·brand
+ */
+type ButtonTypeProps =
+  | { variant?: "solid"; tone?: "neutral" | "brand" | "critical" }
+  | { variant: "weak"; tone?: "neutral" }
+  | { variant: "outline"; tone?: "neutral" | "brand" };
+
+type ButtonProps = Omit<ButtonPrimitive.Props, "className"> &
+  ButtonTypeProps & {
+    /** 배치(폭·정렬·위치)에만 쓴다. 색·글자는 variant·tone·size로 고른다 */
+    className?: string;
+    /** Figma Size: lg 56 · md 48(기본, 대화상자 버튼) · sm 36(인라인 작은 버튼) · xs 32 */
+    size?: "lg" | "md" | "sm" | "xs";
+    /** true면 누를 수 없고(중복 실행 차단) 포커스는 남는다. 문구·아이콘은 자리만 남기고 가운데에 progress를 그린다 */
+    loading?: boolean;
+    /** loading 중 버튼의 접근성 이름. 화면에는 보이지 않는다(예: "저장 중") */
+    loadingLabel?: string;
+  };
+
+/**
+ * Base UI Button 위의 디자인 시스템 버튼. Base UI처럼 기본 type이 "button"이라 제출 버튼은 type="submit"을 적는다.
+ * 문구 옆 아이콘(@/assets/icons)은 직계 자식으로 넣고 data-icon="inline-start"·"inline-end"를 단다. 크기는 Size가 정한다.
+ * render는 링크가 아닌 요소(div 등)에만 쓰고 nativeButton={false}를 함께 준다. 이동은 Next Link를 쓴다(버튼 모양 링크는 이번 범위 밖).
+ * 아이콘만 있는 버튼은 쓰지 않는다(Icon Only 크기·필수 접근성 이름이 아직 없다).
+ * loading 중 접근성 이름은 loadingLabel이다. aria-labelledby를 loadingLabel span으로 바꾸므로 호출부 aria-label·aria-labelledby보다 우선하고, loading이 끝나면 호출부 값으로 돌아간다.
+ *
+ * @example
+ * <DialogFooter>
+ *   <DialogClose render={<Button variant="weak" className="flex-1" />}>취소</DialogClose>
+ *   <Button type="submit" loading={isSaving} loadingLabel="저장 중" className="flex-1">확인</Button>
+ * </DialogFooter>
+ */
+function Button({
+  className,
+  variant = "solid",
+  tone = "neutral",
+  size = "md",
+  loading = false,
+  loadingLabel = "처리 중",
+  disabled,
+  focusableWhenDisabled,
+  children,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: Readonly<ButtonProps>) {
+  const loadingLabelId = useId();
+
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      disabled={disabled || loading}
+      // Base UI 권고(button.md "Loading states"): 누른 버튼에 포커스를 남긴다. native disabled 대신 aria-disabled와 클릭·Enter 차단이 걸린다
+      focusableWhenDisabled={focusableWhenDisabled || loading}
+      aria-busy={loading || undefined}
+      // 같은 권고: 포커스된 버튼의 자손 문구 변화는 알리지 않는 브라우저·스크린리더 조합이 있어 aria-labelledby로 이름을 명시한다.
+      // 이름 계산에서 aria-labelledby가 aria-label보다 먼저라 호출부 aria-label도 loading 중에는 쓰이지 않는다
+      aria-labelledby={loading ? loadingLabelId : ariaLabelledBy}
+      className={cn(buttonVariants({ variant, tone, size }), className)}
+      {...props}
+    >
+      {/* Loading 전후로 너비·높이를 유지한다(5002:3811). 문구·아이콘은 늘 이 span 안에 두어 loading이 바뀌어도 다시 마운트되지 않는다 */}
+      <span data-slot="button-content" className="contents group-aria-busy/button:invisible">
+        {children}
+      </span>
+      {loading && (
+        <>
+          <span id={loadingLabelId} className="sr-only">
+            {loadingLabel}
+          </span>
+          {/* 이름은 위 span이 맡아서 Spinner(output, 기본 aria-label "불러오는 중")는 접근성 트리에서 뺀다. 이름·status 알림이 겹치지 않게 한다.
+              Figma Loading의 progress(252:30981)는 lg 24px만 있다. 나머지 크기는 20px. Solid는 icon/inverse, Weak·Outline은 icon/default */}
+          <Spinner
+            aria-hidden
+            size={size === "lg" ? 24 : 20}
+            variant={variant === "solid" ? "inverse" : "default"}
+            className="absolute inset-0"
+          />
+        </>
+      )}
+    </ButtonPrimitive>
+  );
+}
+
+export { Button };
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..4991cfb2
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,56 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { cva } from "class-variance-authority";
+
+import { CheckboxActivatedIcon, CheckboxIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
+
+// Figma ❸ Icon의 checkbox(5024:79)로 그린다. Default(5024:77)는 border/default, Activated(5024:78)는 primary/default 외곽선이다.
+// md 24px은 아이콘 원본, sm 20px은 가계부 결제자·부담자 시안(4338:4508)의 인스턴스 크기다
+const CHECKBOX_ICON_SIZE = { md: 24, sm: 20 } as const;
+
+// size 속성만 주면 shadcn 부모의 [&_svg:not([class*='size-'])]:size-* 규칙에 덮여서 같은 px 클래스로도 준다
+const checkboxIconVariants = cva("", {
+  variants: {
+    size: {
+      md: "size-[24px]",
+      sm: "size-[20px]",
+    },
+  },
+});
+
+type CheckboxProps = Omit<CheckboxPrimitive.Root.Props, "className" | "indeterminate"> & {
+  size?: keyof typeof CHECKBOX_ICON_SIZE;
+  // Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+  className?: string;
+};
+
+/**
+ * 일부 선택(indeterminate)은 Figma mixed(252:31351)의 색·선이 Activated와 달라 정해질 때까지 받지 않는다.
+ * 비활성 모양은 Figma에 없어 커서만 바꾼다. 준비물은 저장하는 동안 모든 체크박스를 비활성으로 바꿔서 흐리게 하면 체크할 때마다 깜빡인다.
+ * 누르는 영역은 감싸는 label 행이 맡는다. after:로 넓히면 촘촘한 목록에서 이웃 행을 덮는다.
+ */
+function Checkbox({ className, size = "md", ...props }: Readonly<CheckboxProps>) {
+  const iconSize = CHECKBOX_ICON_SIZE[size];
+  const iconClassName = checkboxIconVariants({ size });
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "group/checkbox relative inline-flex shrink-0 cursor-pointer rounded-sm select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-disabled:cursor-not-allowed",
+        className,
+      )}
+      {...props}
+    >
+      {/* Indicator는 해제한 뒤 한 프레임 늦게 빠져서 위에 겹쳐 그린다. 체크된 동안에도 이 아이콘이 자리를 잡도록 invisible로 숨긴다 */}
+      <CheckboxIcon
+        size={iconSize}
+        className={cn(iconClassName, "text-border group-aria-checked/checkbox:invisible")}
+      />
+      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="absolute inset-0">
+        <CheckboxActivatedIcon size={iconSize} className={cn(iconClassName, "text-primary")} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
diff --git a/src/components/ui/chip.tsx b/src/components/ui/chip.tsx
new file mode 100644
index 00000000..0260b16f
--- /dev/null
+++ b/src/components/ui/chip.tsx
@@ -0,0 +1,82 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+
+import { CloseIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
+
+// Figma 14 Chips: Chip / Solid 5625:359, Chip / Outline 5625:475
+// Selected는 aria-pressed:, State=Pressed는 :active, Disabled는 data-disabled:로 그린다. Base UI의 data-pressed는 Selected라 눌림에 쓰지 않는다.
+// 비활성을 disabled:로 쓰면 Tailwind가 aria-pressed:보다 먼저 출력해 선택+비활성 칩이 선택 색으로 남는다.
+// 눌림·손가락 커서는 enabled:로 한정해 span 칩(제거용)은 누를 때 색·커서가 바뀌지 않고, button·Toggle로 그린 칩만 바뀐다.
+// 아이콘은 Figma Chip 예시(chevron 5628:50·check 5628:56)대로 16px·선 1.5px이다. 기본 아이콘 선 1.8(createIcon)을 CSS로 덮는다
+const chipVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full whitespace-nowrap transition-colors duration-120 ease-out enabled:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none [&_svg:not([class*='size-'])]:size-[16px] [&_svg_*]:[stroke-width:1.5]",
+  {
+    variants: {
+      variant: {
+        solid:
+          "bg-fill text-text enabled:active:bg-fill-strong aria-pressed:bg-primary aria-pressed:text-text-inverse aria-pressed:enabled:active:bg-primary-strong data-disabled:bg-fill data-disabled:text-text-disabled",
+        // 선택+눌림 배경: Figma primary/subtle은 blue/50인데 코드 primary-subtle은 blue-100이라 원시 변수로 Figma 값에 맞춘다
+        outline:
+          "border border-border bg-fill-subtle text-text enabled:active:bg-fill-strong aria-pressed:border-primary-strong aria-pressed:text-primary-strong aria-pressed:enabled:active:bg-[var(--blue-50)] data-disabled:border-border data-disabled:text-text-disabled aria-pressed:data-disabled:bg-fill",
+      },
+      size: {
+        lg: "min-h-11 px-4 text-label-l-emphasis data-disabled:text-label-l-regular",
+        md: "min-h-9 px-4 text-label-m-emphasis data-disabled:text-label-m-regular",
+        sm: "min-h-8 px-3 text-label-m-emphasis data-disabled:text-label-m-regular",
+      },
+      // Figma Selected=True·State=Enabled. 누를 수 없는 span 칩(고른 목적지)은 aria-pressed를 둘 수 없어 이 값으로 그린다
+      selected: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      { variant: "solid", selected: true, className: "bg-primary text-text-inverse" },
+      { variant: "outline", selected: true, className: "border-primary-strong text-primary-strong" },
+    ],
+    defaultVariants: { variant: "solid", size: "lg", selected: false },
+  },
+);
+
+/**
+ * Badge처럼 기본은 span이다. 누르는 칩은 render로 요소를 넘긴다(동작 버튼 `render={<button type="button" />}`, 고르는 칩 `render={<Toggle />}`).
+ * 긴 라벨에 말줄임표가 필요하면 호출부가 라벨을 `<span className="min-w-0 truncate">`로 감싸고 칩에 폭 제한을 준다.
+ */
+function Chip({
+  className,
+  variant = "solid",
+  size = "lg",
+  selected = false,
+  render,
+  ...props
+}: Readonly<useRender.ComponentProps<"span"> & VariantProps<typeof chipVariants>>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">({ className: cn(chipVariants({ variant, size, selected }), className) }, props),
+    render,
+    state: { slot: "chip", variant, size, selected: Boolean(selected) },
+  });
+}
+
+// Figma Trailing Icon(close 16px, 라벨과 간격 6px). 누르는 영역은 음수 margin으로 28×44px까지만 넓힌다.
+// 가로를 44px까지 넓히면 왼쪽이 간격 6px을 넘어 라벨 끝 8px을 덮는다(라벨 끝을 눌러도 지워짐). 오른쪽 6px은 칩 여백 16px 안이다
+function ChipRemove({ className, ...props }: Readonly<ComponentProps<"button">>) {
+  return (
+    <button
+      type="button"
+      data-slot="chip-remove"
+      className={cn(
+        "-mx-1.5 -my-3.5 grid h-11 w-7 shrink-0 cursor-pointer place-items-center focus-visible:outline-2 focus-visible:outline-primary",
+        className,
+      )}
+      {...props}
+    >
+      <CloseIcon size={16} />
+    </button>
+  );
+}
+
+export { Chip, ChipRemove };
diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
new file mode 100644
index 00000000..bb11f441
--- /dev/null
+++ b/src/components/ui/combobox.tsx
@@ -0,0 +1,230 @@
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import type { ReactNode } from "react";
+
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "@/assets/icons";
+import { SearchBar, SearchBarIcon, SearchBarInput } from "@/components/ui/search-bar";
+import { cn } from "@/lib/utils";
+
+// Figma 07 Select Field 5030:666 = 검색 입력 + 결과 목록. 입력은 Search Bar(5002:4433)와 같은 규격이라 ui/search-bar를 그대로 쓴다.
+// Error·Disabled·선택 완료·아이템 선택·최대 높이·모션은 Figma에 없다(5912:493 "별도 지정·미정").
+// 팝업 안 입력 패턴(Base UI combobox.md "Input inside popup")의 트리거는 07에 없어 08 Select(5047:440)의 Field 값을 빌린다
+
+/** Base UI Combobox.Root. items·value·onValueChange·itemToStringLabel·filter로 값과 검색을 정한다. modal 기본 false(바깥 클릭이 뒤로 전달되고 스크롤을 잠그지 않는다) */
+const Combobox = ComboboxPrimitive.Root;
+
+// Base UI는 상태 함수 className도 받지만 cn(clsx)이 함수를 소리 없이 버리므로 배치용 문자열만 받는다(select.tsx와 같다)
+type StringClassName<P> = Omit<P, "className"> & { className?: string };
+
+// Figma Header Label(5030:658): label/xs/regular, text/default. 트리거와 간격 4는 감싸는 부모(Field)가 준다.
+// 팝업 안 입력 패턴에서 트리거의 이름(aria-labelledby)으로 붙는다
+function ComboboxLabel({ className, ...props }: Readonly<StringClassName<ComboboxPrimitive.Label.Props>>) {
+  return (
+    <ComboboxPrimitive.Label
+      data-slot="combobox-label"
+      className={cn("text-label-xs-regular text-text select-none", className)}
+      {...props}
+    />
+  );
+}
+
+// 08 Select Field(Default 5047:164, Focused 5047:230, Disabled 5047:390): 48, padding L14 R10, gap 8, r8, fill/subtle, border/default.
+// 열림(Focused)은 테두리 primary/default·chevron 위쪽, Disabled는 fill/default·text/disabled·icon/disabled. 트리거 hover는 Figma에 없다.
+// Disabled에도 자리표시 글자가 있어 자리표시 색은 비활성이 아닐 때만 준다
+function ComboboxTrigger({ className, children, ...props }: Readonly<StringClassName<ComboboxPrimitive.Trigger.Props>>) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn(
+        "group/combobox-trigger flex min-h-12 w-full min-w-0 items-center gap-2 rounded-md border border-border bg-fill-subtle pl-3.5 pr-2.5 text-start text-body-m-regular text-text transition-colors not-data-disabled:cursor-pointer focus-visible:outline-2 focus-visible:outline-primary data-placeholder:not-data-disabled:text-text-subtle data-popup-open:border-primary data-disabled:cursor-not-allowed data-disabled:bg-fill data-disabled:text-text-disabled motion-reduce:transition-none",
+        className,
+      )}
+      {...props}
+    >
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      {/* Trailing Icon 래퍼 32×46(5046:256): 칸 안쪽 높이를 채운다 */}
+      <span
+        aria-hidden
+        className="grid w-8 shrink-0 place-items-center self-stretch text-icon-subtle group-data-disabled/combobox-trigger:text-icon-disabled"
+      >
+        <ChevronDownIcon size={20} className="group-data-popup-open/combobox-trigger:rotate-180" />
+      </span>
+    </ComboboxPrimitive.Trigger>
+  );
+}
+
+/**
+ * 선택값의 글자. 자기 요소 없이 글자만 돌려준다(className 없음).
+ * children이 없으면: 값이 있을 때 Root의 itemToStringLabel로 그리고, 값이 없을 때 placeholder를 그린다.
+ * children이 있으면(함수 포함) placeholder는 쓰이지 않는다(ComboboxValue.mjs). 함수 children이면 값이 없을 때의 글자도 함수가 돌려준다.
+ * 값이 없어도 트리거의 data-placeholder는 붙으므로 자리표시 색은 어느 쪽이든 유지된다.
+ * @example
+ * // 정석: itemToStringLabel + placeholder
+ * <Combobox items={currencies} itemToStringLabel={(c) => c.currency}>
+ *   <ComboboxTrigger><ComboboxValue placeholder="통화 선택" /></ComboboxTrigger>
+ * </Combobox>
+ * // 글자를 따로 만들 때: 값 없음도 함수 안에서 처리
+ * <ComboboxValue>{(c: Currency | null) => (c ? `${c.currency} ${c.name}` : "통화 선택")}</ComboboxValue>
+ */
+const ComboboxValue = ComboboxPrimitive.Value;
+
+type ComboboxContentProps = StringClassName<ComboboxPrimitive.Popup.Props> &
+  Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset">;
+
+// Figma 목록(I5030:670;5030:661)은 입력과 간격 4, 폭은 입력과 같다. 표면(테두리·배경)은 팝업이 아니라 입력·목록·빈 결과가 각자 갖고
+// 팝업은 그것을 간격 4로 쌓기만 한다(팝업 안 입력의 배치는 Figma에 없어 07의 입력–목록 간격을 그대로 쓴다). 그림자는 Figma에 없다.
+// z-50은 ui 대화상자와 같은 값이다. 나중에 연 포털이 body 뒤쪽에 붙어 대화상자 안에서 열어도 그 위에 뜬다.
+// 열림·닫힘 모션은 Figma가 정하지 않아 짧은 투명도 전환만 둔다
+/**
+ * Portal + Positioner + Popup. 기본은 아래(side="bottom")·왼쪽 맞춤(align="start")·간격 4(sideOffset=4)·폭은 트리거(입력) 폭이다.
+ * 폭을 바꾸려면 className에 w-*를 준다(예: 좁은 트리거면 `w-[min(20rem,calc(100vw-2rem))]`). 팝업 안 입력 패턴이면 aria-label을 단다.
+ */
+function ComboboxContent({
+  className,
+  side = "bottom",
+  align = "start",
+  sideOffset = 4,
+  alignOffset = 0,
+  ...props
+}: Readonly<ComboboxContentProps>) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        className="z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          className={cn(
+            "flex max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) flex-col gap-1 outline-hidden transition-opacity duration-150 ease-out data-starting-style:opacity-0 data-ending-style:opacity-0 motion-reduce:transition-none",
+            className,
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+type ComboboxInputProps = StringClassName<ComboboxPrimitive.Input.Props> & {
+  /** SearchBarInput처럼 꼭 받는다. 값이 있는지(Filled 테두리)를 :placeholder-shown으로 읽는다 */
+  placeholder: string;
+  /** 입력 뒤 Trailing Icon 자리(32×48). 검색어 지우기는 SearchBarClear를 넣는다 */
+  children?: ReactNode;
+};
+
+// Figma Search Bar(5002:4433)와 같다: 앞 돋보기 20 icon/subtle, 포커스 테두리 primary/default.
+// Combobox.InputGroup을 SearchBar로 그려서, 입력이 트리거인 패턴에서도 팝업이 입력 요소가 아니라 칸 전체 폭에 붙는다.
+// Base UI Combobox.Clear는 검색어와 함께 선택값까지 지워서 팝업 안 입력 패턴에 맞지 않아 두지 않는다
+/** 검색 입력. 팝업 안 입력 패턴이면 ComboboxContent 안 첫 자식으로, 입력이 트리거인 패턴이면 ComboboxContent 밖에 둔다. className은 칸(SearchBar)에 간다 */
+function ComboboxInput({ className, placeholder, children, ...props }: Readonly<ComboboxInputProps>) {
+  return (
+    <ComboboxPrimitive.InputGroup
+      data-slot="combobox-input-group"
+      render={<SearchBar />}
+      className={cn("shrink-0", className)}
+    >
+      <SearchBarIcon>
+        <SearchIcon size={20} />
+      </SearchBarIcon>
+      <ComboboxPrimitive.Input
+        data-slot="combobox-input"
+        render={<SearchBarInput placeholder={placeholder} />}
+        {...props}
+      />
+      {children}
+    </ComboboxPrimitive.InputGroup>
+  );
+}
+
+// Figma 목록 표면(I5030:670;5030:661): fill/subtle, border/default 1px, r8, padding 0, 행 사이 gap 0.
+// 최대 높이는 Figma가 정하지 않아("별도 지정") 지금 통화 목록 값 max-h-52를 기본으로 두고, 화면 높이가 모자라면 팝업 안에서 더 줄어든다.
+// 결과가 없으면 숨기고 ComboboxEmpty가 같은 표면을 그린다
+/** 결과 목록. children에 (item) => <ComboboxItem key value={item}>를 넘기면 Root items의 걸러진 결과로 그린다 */
+function ComboboxList({ className, ...props }: Readonly<StringClassName<ComboboxPrimitive.List.Props>>) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "max-h-52 min-h-0 overflow-y-auto overscroll-contain rounded-md border border-border bg-fill-subtle data-empty:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type ComboboxItemProps = StringClassName<ComboboxPrimitive.Item.Props> & {
+  /** Leading Icon 자리(20px, icon/subtle). @/assets/icons 아이콘을 size={20}으로 넣는다 */
+  icon?: ReactNode;
+  /** 부제(Subtitle). 제목은 children */
+  description?: ReactNode;
+};
+
+// Figma Select Option Item(5030:646) 07 사용형: 행 56, padding L14·R0, Text 래퍼 R16, 아래 구분선 border/subtle 0.5px.
+// 제목 body/sm/emphasis text/default, 부제 caption/md/regular text/subtle(5030:651·652).
+// 아이콘–글자 10(Text 래퍼 L10)은 gap 8 + 래퍼 L2로 둔다. 아이콘이 없으면 08 Select의 재정의(5046:217)처럼 L14 + L2가 된다.
+// Hover(5030:671)는 Base UI가 포인터·키보드 강조에 함께 다는 data-highlighted로 그린다: 배경 fill/default, 부제 gray/800(Figma도 원시 변수에 묶었다).
+// 마지막 행 구분선은 Figma에서 목록 테두리(INSIDE 1px)에 덮여 보이지 않아 뺀다.
+// 선택됨·비활성 State는 Figma에 없다. 선택 표시는 Trailing Icon 슬롯(5030:653, 행 오른쪽 끝 48×48 안 check 16×16 5030:654)을
+// Base UI ItemIndicator로 켠다. 선택된 행에만 그려져서, 선택 안 된 행은 Text 래퍼 R16이 그대로 오른쪽 끝이다.
+// 체크 색은 Figma 인스턴스에서 읽히지 않아(루트 fill #ffffff만 있음) 지금 통화 선택 화면 값 primary를 쓴다(디자이너 확인 필요).
+// 선택 행 배경은 Figma에 없어 두지 않는다
+function ComboboxItem({ className, icon, description, children, ...props }: Readonly<ComboboxItemProps>) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "group/combobox-item flex min-h-14 w-full cursor-pointer items-center gap-2 border-b-[0.5px] border-border-subtle pl-3.5 outline-hidden select-none last:border-b-0 data-highlighted:bg-fill",
+        className,
+      )}
+      {...props}
+    >
+      {icon && (
+        <span aria-hidden className="flex shrink-0 text-icon-subtle">
+          {icon}
+        </span>
+      )}
+      <span className="flex min-w-0 flex-1 flex-col pr-4 pl-0.5">
+        <span className="text-body-s-emphasis wrap-break-word text-text">{children}</span>
+        {description && (
+          <span className="text-caption-m-regular text-text-subtle group-data-highlighted/combobox-item:text-[var(--gray-800)]">
+            {description}
+          </span>
+        )}
+      </span>
+      <ComboboxPrimitive.ItemIndicator className="grid size-12 shrink-0 place-items-center text-primary">
+        <CheckIcon size={16} />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  );
+}
+
+// Figma Empty(I5030:679;5030:661;5030:678): 목록과 같은 표면에 행 56 하나, 아이콘 없음, 글자 왼쪽 18(padding L14 + 래퍼 L4)·오른쪽 16, body/sm/regular text/subtle.
+// 높이는 목록 행 하나와 같은 58(행 56 + 테두리 위아래 1, Empty 프레임 130 = 16 + 4 + 48 + 4 + 58). border-box라 min-h에 테두리를 더한다.
+// Base UI Empty는 결과가 있으면 자식만 비우고, 알림 영역(role=status)은 숨기지 말고 DOM에 남겨야 해서 표면은 자식 div가 갖는다.
+// 자식이 빈 동안에는 absolute로 흐름에서만 빼서 팝업 gap 4가 하나 더 생기지 않게 한다
+/** 결과가 없을 때의 문구. Root에 items를 줘야 동작한다. 화면에 늘 두고 children에 문구만 넣는다 */
+function ComboboxEmpty({ className, children, ...props }: Readonly<StringClassName<ComboboxPrimitive.Empty.Props>>) {
+  return (
+    <ComboboxPrimitive.Empty data-slot="combobox-empty" className={cn("empty:absolute", className)} {...props}>
+      <div className="flex min-h-14.5 items-center rounded-md border border-border bg-fill-subtle pl-4.5 pr-4 text-body-s-regular text-text-subtle">
+        {children}
+      </div>
+    </ComboboxPrimitive.Empty>
+  );
+}
+
+export {
+  Combobox,
+  ComboboxLabel,
+  ComboboxTrigger,
+  ComboboxValue,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxEmpty,
+};
diff --git a/src/components/ui/dialog-event-boundary.test.tsx b/src/components/ui/dialog-event-boundary.test.tsx
new file mode 100644
index 00000000..5d53d379
--- /dev/null
+++ b/src/components/ui/dialog-event-boundary.test.tsx
@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+import { act, type SyntheticEvent } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+import { Dialog, DialogContent, DialogTitle } from "./dialog";
+import { AlertDialog, AlertDialogContent, AlertDialogTitle } from "./alert-dialog";
+
+let host: HTMLDivElement;
+let root: Root;
+const outer = vi.fn();
+const close = vi.fn();
+const contain = (event: SyntheticEvent) => event.stopPropagation();
+const boundary = { onClick: contain, onMouseDown: contain, onPointerDown: contain, onTouchStart: contain };
+const hostEvents = { onClick: outer, onMouseDown: outer, onPointerDown: outer, onTouchStart: outer };
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  vi.clearAllMocks();
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+// Without backdrop forwarding, portal background events reach the owning card.
+it.each(["dialog", "alert-dialog"])("contains %s backdrop events without blocking dismissal", async kind => {
+  await act(async () => root.render(
+    <div {...hostEvents}>
+      {kind === "dialog" ? (
+        <Dialog open onOpenChange={open => { if (!open) close(); }}>
+          <DialogContent {...boundary} backdropProps={boundary}>
+            <DialogTitle>선택</DialogTitle>
+            <p>내용</p>
+          </DialogContent>
+        </Dialog>
+      ) : (
+        <AlertDialog open onOpenChange={open => { if (!open) close(); }}>
+          <AlertDialogContent {...boundary} backdropProps={boundary} backdropCloseLabel="배경 닫기">
+            <AlertDialogTitle>선택</AlertDialogTitle>
+            <p>내용</p>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+    </div>,
+  ));
+  const backdrop = document.querySelector(`[data-slot="${kind}-overlay"]`)!;
+  const target = backdrop.querySelector("button") ?? backdrop;
+  for (const type of ["mousedown", "pointerdown", "touchstart", "click"]) {
+    await act(async () => target.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true })));
+  }
+  expect(outer).not.toHaveBeenCalled();
+  expect(close).toHaveBeenCalled();
+  close.mockClear();
+  await act(async () => document.querySelector("p")!.click());
+  expect(outer).not.toHaveBeenCalled();
+  expect(close).not.toHaveBeenCalled();
+  await act(async () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
+  expect(close).toHaveBeenCalledOnce();
+});
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..83bf9b0a
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { createContext, use, type ComponentProps } from "react";
+
+import { CloseIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
+
+// Figma Modal 5956:24724: 353 고정 폭, padding 20, 영역(Header·Body·Footer) 간격 20, radius 12, fill/elevation, shadow/default.
+// Figma Modal은 "컨테이너 자체"라 딤·가운데 배치·애니메이션이 없다(6038:6504). 그 셋은 지금 앱 값과 Base UI 권장 방식으로 채운다.
+// 열림·닫힘은 Base UI data-starting-style·data-ending-style + transition이다(handbook/animation.md). 지금 PC 대화상자에는 애니메이션이 없어 짧은 fade·scale만 둔다.
+// 저장 중 닫힘 막기(closeDisabled)·닫기 X 자리·Esc 처리는 Drawer(ui/drawer.tsx)와 같은 API다. 반응형 대화상자가 PC Dialog ↔ 모바일 Drawer로 껍데기만 바꾼다
+
+const DialogCloseDisabledContext = createContext(false);
+// DialogContent가 DialogHeader에 넘기는 닫기 X의 접근성 이름. null이면 X를 그리지 않는다(showCloseButton={false})
+const DialogCloseLabelContext = createContext<string | null>(null);
+
+type DialogProps = DialogPrimitive.Root.Props & {
+  /** 저장 중처럼 닫으면 안 될 때 true. Esc·딤·X·취소(DialogClose)를 모두 막는다. 화면이 open을 false로 바꾸는 것(저장 성공 뒤 닫기)은 막지 않는다 */
+  closeDisabled?: boolean;
+};
+
+/**
+ * 열림 상태를 갖는 Root. `open`·`onOpenChange`로 제어하거나 DialogTrigger로 연다.
+ * 안쪽 입력이 Esc를 먼저 쓰고 preventDefault했으면(추천 목록 닫기 등) 대화상자는 닫지 않는다.
+ */
+function Dialog({ closeDisabled = false, onOpenChange, ...props }: Readonly<DialogProps>) {
+  return (
+    <DialogCloseDisabledContext value={closeDisabled}>
+      <DialogPrimitive.Root
+        onOpenChange={(open, eventDetails) => {
+          // Base UI는 Esc를 Popup onKeyDown·document keydown에서 받고 defaultPrevented를 보지 않는다(useDismiss).
+          // 둘 다 안쪽 입력의 React onKeyDown보다 뒤에 실행돼, 안쪽에서 preventDefault했으면 이 값이 채워져 있다
+          const isEscapeUsedInside = eventDetails.reason === "escape-key" && eventDetails.event.defaultPrevented;
+          if (!open && (closeDisabled || isEscapeUsedInside)) {
+            eventDetails.cancel();
+            return;
+          }
+          onOpenChange?.(open, eventDetails);
+        }}
+        {...props}
+      />
+    </DialogCloseDisabledContext>
+  );
+}
+
+function DialogTrigger(props: Readonly<DialogPrimitive.Trigger.Props>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+/** 대화상자를 닫는 버튼. 취소 버튼은 `render={<Button variant="weak" />}`로 그린다. closeDisabled이면 비활성으로 보인다 */
+function DialogClose({ disabled, ...props }: Readonly<DialogPrimitive.Close.Props>) {
+  const closeDisabled = use(DialogCloseDisabledContext);
+  return <DialogPrimitive.Close data-slot="dialog-close" disabled={closeDisabled || disabled} {...props} />;
+}
+
+// 폭은 Figma 353을 기본으로 하고, 지금 화면마다 다른 폭은 size로 남긴다(Figma Modal은 최소·최대 폭 미정, 6058:1050).
+// 화면 좌우 20px은 Figma 393 화면의 353 Modal 여백이다. 좁은 화면에서는 모든 size가 화면 폭 − 40px로 줄어든다(원칙 3-2)
+const dialogContentVariants = cva(
+  "fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-5 overflow-y-auto overscroll-contain rounded-[12px] bg-fill-elevate p-5 text-text shadow-[0_2px_10px_rgb(31_34_41/0.1)] outline-none transition-[opacity,scale] duration-150 ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:transition-none",
+  {
+    variants: {
+      size: {
+        // Figma Modal 원본 폭(5956:24724). 날짜 선택 팝업(DatePickerLayer 최대 353)도 이 폭이다
+        default: "w-[min(353px,calc(100vw-2.5rem))]",
+        // 옛 앱 max-w-sm: 북마크 추가·편집, 북마크에 담기, 일정에 추가, 시간 설정
+        sm: "w-[min(384px,calc(100vw-2.5rem))]",
+        // 옛 앱 max-w-md: SettingsDialog compact(준비물 이름), 가계부 범위 목록, 북마크에서 장소 추가. 초대하기·쿠키 설정도 이 폭이다
+        md: "w-[min(448px,calc(100vw-2.5rem))]",
+        // 옛 앱 max-w-[640px]: SettingsDialog 기본, 비용 추가·수정. 여행 정보 수정(600)도 여기에 둔다
+        lg: "w-[min(640px,calc(100vw-2.5rem))]",
+        // 옛 앱 max-w-[720px]: 정산 요약
+        xl: "w-[min(720px,calc(100vw-2.5rem))]",
+      },
+    },
+    defaultVariants: { size: "default" },
+  },
+);
+
+type DialogContentProps = Omit<DialogPrimitive.Popup.Props, "className"> &
+  VariantProps<typeof dialogContentVariants> & {
+    /** 제목 줄 오른쪽 닫기(X). 기본 표시. Figma Modal에는 늘 있다 */
+    showCloseButton?: boolean;
+    /** 포털 배경 이벤트를 호출부 카드로 올리지 않을 때 지정한다. 키보드 이벤트는 그대로 전달한다 */
+    backdropProps?: Pick<DialogPrimitive.Backdrop.Props, "onClick" | "onMouseDown" | "onPointerDown" | "onTouchStart">;
+    /** 닫기(X)의 접근성 이름. 화면에는 보이지 않는다(예: "쿠키 설정 닫기") */
+    closeLabel?: string;
+    /** 배치(높이 상한 등)에만 쓴다. 폭은 size로 고른다 */
+    className?: string;
+  };
+
+/**
+ * 포털·딤·표면을 함께 그린다. 안에는 DialogHeader → 본문 → DialogFooter 순서로 넣는다(간격 20은 표면 gap이 준다).
+ * 본문이 높이 상한을 넘으면 표면 전체가 스크롤된다. 긴 폼처럼 제목 줄·Footer를 고정하려면 본문을 DialogBody로 감싼다.
+ * 닫기 X는 DialogHeader가 제목 줄에 그린다. DialogHeader 없이 본문으로 시작하는 대화상자에는 X가 없다(DialogClose를 직접 둔다).
+ * 처음 포커스는 Base UI 기본(첫 포커스 요소, 터치로 열면 표면)이고, 바꾸려면 `initialFocus`·`finalFocus`를 넘긴다.
+ */
+function DialogContent({
+  className,
+  children,
+  size,
+  showCloseButton = true,
+  closeLabel = "닫기",
+  backdropProps,
+  ...props
+}: Readonly<DialogContentProps>) {
+  return (
+    <DialogPrimitive.Portal data-slot="dialog-portal">
+      {/* 딤은 Figma에 정의가 없어(Modal 6038:6504) 옛 앱 대화상자에서 가장 많던 bg-black/40(SettingsDialog 등 14곳)을 쓴다.
+          iOS 26 Safari는 fixed 딤이 스크롤 뒤 화면 전체를 덮지 못해 Base UI 권장대로 absolute로 바꾸고 min-h-dvh로 채운다(body는 globals.css에서 position: relative).
+          Base UI는 다른 대화상자·시트 안에서 연(nested) 대화상자의 딤을 그리지 않는다. 지금 앱처럼 뒤 대화상자도 딤으로 덮도록 forceRender로 늘 그린다 */}
+      <DialogPrimitive.Backdrop
+        {...backdropProps}
+        forceRender
+        data-slot="dialog-overlay"
+        className="fixed inset-0 z-50 min-h-dvh bg-black/40 transition-opacity duration-150 ease-out data-starting-style:opacity-0 data-ending-style:opacity-0 motion-reduce:transition-none supports-[-webkit-touch-callout:none]:absolute"
+      />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(dialogContentVariants({ size }), className)}
+        {...props}
+      >
+        <DialogCloseLabelContext value={showCloseButton ? closeLabel : null}>{children}</DialogCloseLabelContext>
+      </DialogPrimitive.Popup>
+    </DialogPrimitive.Portal>
+  );
+}
+
+/**
+ * Figma Header 6157:5571: Title Row → Subtitle, 간격 4. 제목 줄(DialogTitle + 닫기 X)과 그 아래 DialogDescription.
+ * Title Row 6157:5574: 제목 Fill + Close 24, 사이 간격 0. 제목 줄에 다른 요소(아이콘·초기화 버튼)를 함께 두려면 첫 자식을 한 줄로 묶어 넣는다
+ */
+function DialogHeader({ className, children, ...props }: Readonly<ComponentProps<"div">>) {
+  const closeLabel = use(DialogCloseLabelContext);
+  const closeDisabled = use(DialogCloseDisabledContext);
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("grid grid-cols-[minmax(0,1fr)_auto] items-center gap-y-1", className)}
+      {...props}
+    >
+      {children}
+      {closeLabel !== null && (
+        // Figma Close 24px icon/subtle + 투명 Touch Target 44×44(6157:5576). 영역은 음수 margin으로 되돌려 제목 줄 높이를 키우지 않는다.
+        // hover는 Figma에 없어 옛 SettingsDialog의 원형 배경을 fill/default로 둔다
+        <DialogPrimitive.Close
+          data-slot="dialog-header-close"
+          aria-label={closeLabel}
+          disabled={closeDisabled}
+          className="col-start-2 row-start-1 -m-2.5 grid size-11 place-items-center rounded-full text-icon-subtle transition-colors duration-120 ease-out not-data-disabled:cursor-pointer not-data-disabled:hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary data-disabled:text-icon-disabled motion-reduce:transition-none"
+        >
+          <CloseIcon size={24} />
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 본문만 스크롤하는 영역. 표면 높이 상한(화면 − 32px)을 넘으면 제목 줄·Footer는 제자리에 두고 이 안만 스크롤한다(예: 비용 추가·수정 폼).
+ * 좌우는 표면 padding만큼 넓혀 스크롤 막대를 표면 가장자리에 붙이고, 위아래 4px은 첫·마지막 요소의 포커스 윤곽(2px + 띄움 2px)이 잘리지 않게 넓힌 값이다(DrawerBody와 같음)
+ */
+function DialogBody({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      data-slot="dialog-body"
+      className={cn("-mx-5 -my-1 flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain px-5 py-1", className)}
+      {...props}
+    />
+  );
+}
+
+// Figma Footer: 높이 48(버튼 md), 간격 8, 버튼은 각자 Fill. 두 개면 취소(Neutral Weak) → 확인(Neutral Solid), 하나면 전체 폭이다
+function DialogFooter({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex gap-2 *:min-w-0 *:flex-1", className)}
+      {...props}
+    />
+  );
+}
+
+// Figma Title: title/lg, text/default, 왼쪽 정렬. aria-labelledby는 Base UI가 잇는다
+function DialogTitle({ className, ...props }: Readonly<Omit<DialogPrimitive.Title.Props, "className"> & { className?: string }>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-title-l text-text", className)}
+      {...props}
+    />
+  );
+}
+
+// Figma Subtitle: caption/md/regular, text/subtle("항목 · 항목" 같은 보조 줄). aria-describedby는 Base UI가 잇는다
+function DialogDescription({
+  className,
+  ...props
+}: Readonly<Omit<DialogPrimitive.Description.Props, "className"> & { className?: string }>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("col-span-full text-caption-m-regular text-text-subtle", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
new file mode 100644
index 00000000..d530772c
--- /dev/null
+++ b/src/components/ui/drawer.tsx
@@ -0,0 +1,255 @@
+"use client";
+
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { cva, type VariantProps } from "class-variance-authority";
+import { createContext, use, type ComponentProps, type TouchEvent } from "react";
+
+import { CloseIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
+
+// Figma ② Bottom Sheet 5924:13961(Height=Min·Half·BelowNav·BelowSafeArea). 모바일 기기 전용 아래 시트다. PC는 Dialog를 쓴다.
+// 손잡이만 옛 MobileBottomSheet 값(36×4 border/subtle, DECISIONS)이고 제목·간격은 Figma 값이다. 옛 시트의 menu(제목 20·간격 8)/form(18·16) 두 모양은
+// Figma에 없어 하나로 합쳤다(Figma Bottom Sheet는 제목 title/lg 하나, 영역 간격 20 하나).
+// 저장 중 닫힘 막기(closeDisabled)·닫기 X 자리·Esc 처리는 Dialog(ui/dialog.tsx)와 같은 API다. 반응형 대화상자가 PC Dialog ↔ 모바일 Drawer로 껍데기만 바꾼다.
+// 닫는 기준(높이 50% 또는 빠르게 튕김)·끌리는 곳·포커스·스크롤 잠금은 Base UI 기본이다. 옛 시트의 '80px 끌면 닫힘'은 없다.
+
+// 터치 스와이프는 버튼·입력 위에서도 시작한다(Base UI DrawerViewport가 터치에는 제외 목록을 쓰지 않는다: ignoreSelectorWhenTouch false).
+// 옛 시트(useSheetDrag)처럼 누르는 요소 위에서는 끌리지 않게, 터치가 닿은 요소에 Base UI 공식 제외 속성을 단다.
+// Popup의 캡처 단계라 Viewport의 터치 처리보다 먼저 실행된다. 목록은 옛 useSheetDrag의 제외 목록과 같다
+const SWIPE_IGNORE_TARGETS =
+  "button, input, textarea, select, a, label, [role='button'], [role='checkbox'], [role='switch'], [role='radio'], [contenteditable='true']";
+
+function ignoreSwipeOnControl(event: TouchEvent<HTMLDivElement>) {
+  if (!(event.target instanceof Element)) return;
+  event.target.closest(SWIPE_IGNORE_TARGETS)?.setAttribute("data-base-ui-swipe-ignore", "");
+}
+
+const DrawerCloseDisabledContext = createContext(false);
+// DrawerContent가 DrawerHeader에 넘기는 닫기 X의 접근성 이름
+const DrawerCloseLabelContext = createContext("닫기");
+
+type DrawerProps = Omit<
+  DrawerPrimitive.Root.Props,
+  "swipeDirection" | "snapPoints" | "snapPoint" | "defaultSnapPoint" | "onSnapPointChange" | "snapToSequentialPoints"
+> & {
+  /** 저장 중처럼 닫으면 안 될 때 true. Esc·딤·X·취소(DrawerClose)·스와이프 닫기를 모두 막고 시트가 끌리지 않는다. 화면이 open을 false로 바꾸는 것(저장 성공 뒤 닫기)은 막지 않는다 */
+  closeDisabled?: boolean;
+};
+
+/**
+ * 아래 방향 스와이프로 닫히는 시트만 둔다(스냅·다른 방향은 이 부품의 모양이 지원하지 않는다).
+ * 기본 modal(포커스 가둠·배경 스크롤 잠금). 닫힌 뒤 정리(폼 초기화 등)는 onOpenChangeComplete(false)에서 한다.
+ * 안쪽 입력이 Esc를 먼저 쓰고 preventDefault했으면(추천 목록 닫기 등) 시트는 닫지 않는다.
+ */
+function Drawer({ closeDisabled = false, onOpenChange, ...props }: Readonly<DrawerProps>) {
+  return (
+    <DrawerCloseDisabledContext value={closeDisabled}>
+      <DrawerPrimitive.Root
+        onOpenChange={(open, eventDetails) => {
+          // Base UI는 Esc를 Popup onKeyDown·document keydown에서 받고 defaultPrevented를 보지 않는다(useDismiss).
+          // 둘 다 안쪽 입력의 React onKeyDown보다 뒤에 실행돼, 안쪽에서 preventDefault했으면 이 값이 채워져 있다
+          const isEscapeUsedInside = eventDetails.reason === "escape-key" && eventDetails.event.defaultPrevented;
+          // cancel()이면 스와이프로 끌던 시트도 제자리로 돌아간다
+          if (!open && (closeDisabled || isEscapeUsedInside)) {
+            eventDetails.cancel();
+            return;
+          }
+          onOpenChange?.(open, eventDetails);
+        }}
+        {...props}
+      />
+    </DrawerCloseDisabledContext>
+  );
+}
+
+/** 다른 요소로 그리려면 render(예: render={<Button variant="weak" />}). 트리거 없이 open으로 여는 시트는 쓰지 않는다 */
+function DrawerTrigger(props: Readonly<DrawerPrimitive.Trigger.Props>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+/** Footer의 취소 버튼에 쓴다: <DrawerClose render={<Button variant="weak" />}>취소</DrawerClose>. closeDisabled이면 비활성으로 보인다 */
+function DrawerClose({ disabled, ...props }: Readonly<DrawerPrimitive.Close.Props>) {
+  const closeDisabled = use(DrawerCloseDisabledContext);
+  return <DrawerPrimitive.Close data-slot="drawer-close" disabled={closeDisabled || disabled} {...props} />;
+}
+
+// 열기는 옛 시트처럼 아래에서 200ms(ease) 올라온다. 닫기는 Base UI 기본대로 내려가며 사라지고,
+// 스와이프로 놓았을 때는 Base UI가 주는 세기(--drawer-swipe-strength 0.1~1)만큼 짧아진다(여기선 열기와 같은 200ms 기준).
+// 손으로 끄는 동안(data-swiping)은 손가락을 바로 따라가게 transition을 끈다.
+// 위로 끌면 Base UI가 조금 따라 올라가게(감쇠) 두므로, 시트 아래에 같은 색 띠(after)를 깔아 바닥과 틈이 보이지 않게 한다.
+// 아래 여백은 Figma Sheet Surface 12(5924:13964)이고, safe-area가 더 크면 그 값을 쓴다(DECISIONS: safe-area 여백 유지)
+const drawerPopupVariants = cva(
+  "relative flex w-full flex-col rounded-t-[20px] bg-fill-elevate pb-[max(12px,env(safe-area-inset-bottom))] text-text outline-hidden [transform:translateY(var(--drawer-swipe-movement-y,0px))] transition-transform duration-200 ease-[ease] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-12 after:bg-fill-elevate data-swiping:select-none data-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%+2px))] data-ending-style:[transform:translateY(calc(100%+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*200ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength,1)*200ms)] motion-reduce:transition-none",
+  {
+    variants: {
+      size: {
+        // Figma Height=Min(5924:13962)·Half(5924:13989)는 내용 높이(Hug)다. 최대 90dvh는 옛 MobileBottomSheet 값
+        auto: "max-h-[90dvh]",
+        // Figma Height=BelowNav(6211:4395): 상단 내비 아래 12px까지 채운다. 모바일 헤더는 56px(HeaderBar h-14)
+        belowNav: "h-[calc(100dvh-68px)]",
+        // Figma Height=BelowSafeArea(6211:4434): Safe Area 아래 12px까지 채운다
+        belowSafeArea: "h-[calc(100dvh-env(safe-area-inset-top,0px)-12px)]",
+      },
+    },
+    defaultVariants: { size: "auto" },
+  },
+);
+
+// Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+type DrawerContentProps = Omit<DrawerPrimitive.Popup.Props, "className"> &
+  VariantProps<typeof drawerPopupVariants> & {
+    /** 닫기(X)의 접근성 이름. 화면에는 보이지 않는다(예: "메모 닫기") */
+    closeLabel?: string;
+    /** 배치에만 쓴다. 지금 화면별 고정 높이(예: h-[70dvh], max-h-[60dvh])를 옮길 때 */
+    className?: string;
+  };
+
+/**
+ * 딤·손잡이·표면을 그리고 children(Header·Body·Footer)을 세로로 쌓는다(영역 간격 20, Figma Sheet Surface 5924:13964).
+ * Figma Header에는 제목 줄이 늘 있어(5924:13965) DrawerHeader를 늘 넣는다. 손잡이 아래 간격은 DrawerHeader까지 합쳐 Figma 값이 된다.
+ * 열 때 포커스는 Base UI Drawer 기본대로 시트 자체로 간다(입력에 바로 포커스하려면 initialFocus={ref}).
+ */
+function DrawerContent({
+  className,
+  closeLabel = "닫기",
+  size,
+  children,
+  onTouchStartCapture,
+  ...props
+}: Readonly<DrawerContentProps>) {
+  const closeDisabled = use(DrawerCloseDisabledContext);
+  return (
+    <DrawerPrimitive.Portal data-slot="drawer-portal">
+      {/* Figma Backdrop 5924:13963: #16181D(gray/950 값, 변수 바인딩 없음) 20%. 끄는 만큼 옅어지는 것은 Base UI 기본.
+          iOS Safari에서 absolute로 두는 것은 Base UI 안내(body relative와 짝, globals.css).
+          Base UI는 시트 안에서 연(nested) 시트의 딤을 그리지 않는다. 지금 앱처럼 뒤 시트도 딤으로 덮도록 forceRender로 늘 그린다.
+          안쪽 시트의 딤은 끄는 동안 옅어지지 않고 닫힐 때 사라진다(Base UI가 nested 시트에는 끄는 진행도를 0으로 둔다, DrawerViewport) */}
+      <DrawerPrimitive.Backdrop
+        forceRender
+        data-slot="drawer-overlay"
+        className="fixed inset-0 z-50 min-h-dvh bg-[var(--gray-950)]/20 opacity-[calc(1-var(--drawer-swipe-progress,0))] transition-opacity duration-200 ease-[ease] data-swiping:duration-0 data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*200ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength,1)*200ms)] motion-reduce:transition-none supports-[-webkit-touch-callout:none]:absolute"
+      />
+      {/* z-50은 다른 Base UI 팝업(dialog·select·popover 등)과 같은 값이다. 앱은 isolate로 묶여 있어(app-chrome-shell) 앱 안 z와는
+          비교되지 않고, Base UI 팝업끼리는 나중에 연 것이 위에 온다(시트 안 Select 목록이 시트 위에 뜬다) */}
+      <DrawerPrimitive.Viewport data-slot="drawer-viewport" className="fixed inset-0 z-50 flex flex-col justify-end">
+        <DrawerPrimitive.Popup
+          data-slot="drawer-content"
+          // 저장 중에는 시트가 끌리지도 않게 한다(옛 시트와 같음). 닫기 자체는 Drawer의 cancel이 막는다
+          data-base-ui-swipe-ignore={closeDisabled ? "" : undefined}
+          onTouchStartCapture={(event) => {
+            ignoreSwipeOnControl(event);
+            onTouchStartCapture?.(event);
+          }}
+          className={cn(drawerPopupVariants({ size }), className)}
+          {...props}
+        >
+          {/* 손잡이 36×4 border/subtle(옛 시트 값, DECISIONS). 위 12·아래 4는 Figma Header padding 위 12·행 간격 4(5924:13965). 장식이고 끄는 곳은 시트 전체다 */}
+          <div aria-hidden data-slot="drawer-handle" className="flex shrink-0 justify-center pt-3 pb-1">
+            <span className="h-1 w-9 rounded-full bg-border-subtle" />
+          </div>
+          {/* Drawer.Content 안에서는 마우스로 글자를 고를 때 시트가 끌리지 않는다(Base UI) */}
+          <DrawerPrimitive.Content className="flex min-h-0 flex-1 flex-col gap-5">
+            <DrawerCloseLabelContext value={closeLabel}>{children}</DrawerCloseLabelContext>
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPrimitive.Portal>
+  );
+}
+
+/**
+ * 제목 줄(DrawerTitle + 닫기 X)과 그 아래 DrawerDescription. 닫기 X는 늘 그린다(Figma Title Row 5924:13968, 숨김 속성 없음).
+ * Figma Header 5924:13965: 좌우 20, 행 간격 4. Title Row: 위 padding 8, 제목 Fill + Close 24, 사이 간격 0
+ */
+function DrawerHeader({ className, children, ...props }: Readonly<ComponentProps<"div">>) {
+  const closeLabel = use(DrawerCloseLabelContext);
+  const closeDisabled = use(DrawerCloseDisabledContext);
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-y-1 px-5 pt-2",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {/* Close 24 icon/subtle + 누르는 영역 44(Figma). 영역은 음수 margin으로 되돌려 제목 줄 높이를 키우지 않는다 */}
+      <DrawerPrimitive.Close
+        data-slot="drawer-header-close"
+        aria-label={closeLabel}
+        disabled={closeDisabled}
+        className="col-start-2 row-start-1 -m-2.5 grid size-11 shrink-0 place-items-center text-icon-subtle not-data-disabled:cursor-pointer focus-visible:outline-2 focus-visible:outline-primary data-disabled:text-icon-disabled"
+      >
+        <CloseIcon />
+      </DrawerPrimitive.Close>
+    </div>
+  );
+}
+
+// Figma Title 5924:13969: title/lg text/default. h2. 한 줄로 줄인다(옛 시트와 같음)
+function DrawerTitle({ className, ...props }: Readonly<Omit<DrawerPrimitive.Title.Props, "className"> & { className?: string }>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("truncate text-title-l text-text", className)}
+      {...props}
+    />
+  );
+}
+
+// Figma Subtitle 5924:13973: caption/md/regular text/subtle. 예: 장소 이름
+function DrawerDescription({
+  className,
+  ...props
+}: Readonly<Omit<DrawerPrimitive.Description.Props, "className"> & { className?: string }>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("col-span-full truncate text-caption-m-regular text-text-subtle", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * 스크롤되는 본문(Figma Body slot, 좌우 20). 높이가 넘치면 여기만 스크롤되고 제목 줄과 Footer는 고정이다.
+ * 맨 위까지 스크롤된 상태에서 아래로 당기면 시트가 끌린다(Base UI 기본).
+ * 안쪽 간격은 Figma 슬롯에 없어 넣는 내용이 정한다(메뉴 목록은 className="gap-2", 폼은 폼 컴포넌트의 gap). 같은 폼을 Dialog 본문에도 넣기 때문이다.
+ * Dialog는 표면 전체가 스크롤돼 짝이 되는 Body 파트가 없다
+ */
+function DrawerBody({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      data-slot="drawer-body"
+      className={cn(
+        // 위아래 4px은 스크롤 영역이 첫·마지막 항목의 포커스 윤곽(2px + 띄움 2px)을 자르지 않게 넓히고 음수 margin으로 되돌린 값이다
+        "-my-1 flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain px-5 py-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Figma Action 5924:13980: 위아래 12·좌우 16, 버튼 간격 8, 버튼은 각각 꽉 채운다. 순서는 취소(Neutral Weak) → 확인(Neutral Solid), 크기 md.
+ * 그 아래 표면 여백 12(또는 safe-area)는 DrawerContent가 준다
+ */
+function DrawerFooter({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div data-slot="drawer-footer" className={cn("flex shrink-0 gap-2 px-4 py-3 *:min-w-0 *:flex-1", className)} {...props} />
+  );
+}
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerBody,
+  DrawerFooter,
+};
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..39f4c967
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,191 @@
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+// Figma 08 Dropdown: Dropdown Menu 5864:13084(Type=Default 5864:11039 · Profile 5864:13083), Item 5956:16861(Size=sm 5956:16698 · lg 5956:16862)
+// Figma에 없는 상태(hover·키보드 강조·비활성)는 지금 앱 메뉴 값을 쓴다(RoomCardMenu·HomeHeader의 hover:bg-fill focus-visible:bg-fill).
+// 키보드 포커스는 강조 배경만으로는 흰 표면과 거의 구분되지 않아 윤곽선을 더한다(principles 3-7).
+// 체크·라디오 항목, 구분선, 그룹 라벨, 단축키는 Figma와 지금 화면 모두에 없어 두지 않는다
+
+/**
+ * 동작 메뉴의 Root. 기본 modal={false}: 지금 메뉴들은 바깥을 누르면 닫히면서 그 클릭이 뒤 요소에도 전달되고 페이지 스크롤을 막지 않는다.
+ * Base UI 기본(true)은 바깥 첫 클릭을 막고 스크롤을 잠근다. 대화상자 안에서 열린 상태를 직접 다루면 open·onOpenChange를 쓴다
+ */
+function DropdownMenu({ modal = false, ...props }: Readonly<MenuPrimitive.Root.Props>) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" modal={modal} {...props} />;
+}
+
+/**
+ * `<button type="button">`을 그리고 열림에 따라 aria-expanded·data-popup-open을 단다. 모양은 화면이 정한다(열림 표시는 aria-expanded:bg-fill).
+ * 다른 부품으로 그리려면 render(`render={<Button variant="weak" size="sm" />}`)
+ */
+function DropdownMenuTrigger(props: Readonly<MenuPrimitive.Trigger.Props>) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+type DropdownMenuContentProps = Omit<MenuPrimitive.Popup.Props, "className"> &
+  Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & {
+    /** 배치(폭)만. 기본은 내용 폭에 맞추고 최소 160px(Figma minWidth). 프로필 메뉴처럼 정한 폭은 `w-60` */
+    className?: string;
+    /** Figma Item Size. sm(48, Type=Default) / lg(50, Type=Profile). 안의 항목이 모두 이 크기를 따른다 */
+    size?: "sm" | "lg";
+  };
+
+/**
+ * Portal + Positioner + Popup. 트리거 아래(side="bottom")에 4px 띄워 연다.
+ * align 기본은 shadcn대로 "start"(트리거 왼쪽 맞춤)이고, 지금 메뉴 대부분은 오른쪽 끝 맞춤이라 화면에서 align="end"를 준다.
+ * 간격·정렬은 Figma에 정의가 없다("열리는 방향·화면 경계 대응은 구현 시 별도")
+ */
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  size = "sm",
+  className,
+  ...props
+}: Readonly<DropdownMenuContentProps>) {
+  return (
+    <MenuPrimitive.Portal>
+      {/* z-50은 다른 shadcn 팝업과 같은 값이다. 앱 내용은 isolate로 감싸 있어 body 포털 팝업이 앱 위에 뜬다(app-chrome-shell) */}
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          data-size={size}
+          className={cn(
+            // 5864:11039: padding 0, radius/lg 12(토큰 없음, rounded-lg = 10px), fill/elevation, 테두리 없음, shadow/default 0 2 10 #1f2229 10%(그림자 토큰 없음).
+            // 화면이 좁으면 남은 폭·높이(--available-*)까지만 커지고 넘치는 항목은 스크롤한다. 둥근 모서리 밖 항목 배경은 overflow로 잘린다
+            "group/dropdown-menu flex w-max max-w-(--available-width) min-w-40 max-h-(--available-height) flex-col overflow-x-hidden overflow-y-auto rounded-[12px] bg-fill-elevate shadow-[0_2px_10px_#1f22291a] outline-none",
+            // 열림·닫힘: Figma 정의 없음. 지금 BookmarkPlaceRow 메뉴의 fade + zoom 95%·150ms를 transition으로 옮겼다.
+            // 키보드로 열고 닫거나 Esc로 닫으면 Base UI가 data-instant를 달아 바로 나타나고 사라진다
+            "origin-(--transform-origin) transition-[opacity,scale] duration-150 ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 data-instant:transition-none motion-reduce:transition-none",
+            className,
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+// Item 5956:16698(sm): padding T14 R16 B14 L16, gap 8, label/md/regular text/default, 아이콘 20 icon/default.
+// 5956:16862(lg): 좌우 20, label/lg/regular. 높이 48·50은 padding + 글자 행간(20·22)으로 나온다(글자가 커지면 같이 늘어난다).
+// 구분선은 모든 행(마지막 포함) 아래 border/subtle 0.5px. Figma는 높이에 넣지 않아 테두리 대신 안쪽 그림자로 그린다(지금 RoomCardMenu와 같음).
+// 강조는 Base UI가 hover·화살표 키 모두에 다는 data-highlighted 배경 fill/default다(지금 앱 hover·focus-visible:bg-fill).
+// fill/default(#f6f6f8)는 표면 fill/elevate(#ffffff)와 대비가 약해 키보드 포커스에는 안쪽 primary 윤곽선을 더한다.
+// 포인터로 연 메뉴는 hover가 항목에 포커스를 옮겨도 focus-visible이 아니라 배경만 바뀐다. 둥근 모서리 밖은 Popup overflow가 자르므로 안쪽(-outline-offset-2)에 그린다.
+// 비활성: Figma·지금 앱 모두 없음. Button과 같이 opacity 대신 text/disabled·icon/disabled 토큰을 쓴다
+const dropdownMenuItemVariants = cva(
+  "flex w-full min-w-0 cursor-pointer items-center gap-2 px-4 py-3.5 text-left text-label-m-regular text-text shadow-[inset_0_-0.5px_0_var(--color-border-subtle)] select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary data-highlighted:bg-fill data-disabled:cursor-not-allowed data-disabled:text-text-disabled group-data-[size=lg]/dropdown-menu:px-5 group-data-[size=lg]/dropdown-menu:text-label-l-regular [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-icon [&_svg:not([class*='size-'])]:size-5 data-disabled:[&_svg]:text-icon-disabled",
+  {
+    variants: {
+      variant: {
+        default: "",
+        // 5956:16735 "방 삭제하기": 글자 status/negative/strong(#c10000, 시맨틱 토큰 없음), 아이콘 status/negative/default.
+        // 지금 앱은 글자도 status-negative(#ff2035)라 조금 진해진다
+        destructive: "text-[var(--red-800)] [&_svg]:text-status-negative",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+type DropdownMenuItemProps = Omit<MenuPrimitive.Item.Props, "className"> &
+  VariantProps<typeof dropdownMenuItemVariants> & { className?: string };
+
+/**
+ * 동작 항목. 아이콘(@/assets/icons)은 글자 앞 직계 자식으로 넣는다(크기·색은 항목이 정한다).
+ * 누르면 메뉴가 닫히고 포커스가 트리거로 돌아간다. 이동·편집처럼 성공 뒤에 닫아야 하는 항목은 closeOnClick={false}로 두고 성공 콜백에서 닫는다.
+ * 대화상자를 여는 항목은 onClick에서 controlled 대화상자의 open을 켠다(Base UI menu.md "Open a dialog")
+ */
+function DropdownMenuItem({ className, variant = "default", ...props }: Readonly<DropdownMenuItemProps>) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-variant={variant}
+      className={cn(dropdownMenuItemVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+type DropdownMenuLinkItemProps = Omit<MenuPrimitive.LinkItem.Props, "className"> &
+  VariantProps<typeof dropdownMenuItemVariants> & { className?: string };
+
+/**
+ * 이동 항목(`<a>`). 앱 안 이동은 Next Link를 render로 넘긴다: `<DropdownMenuLinkItem render={<Link href="/home/my-info" />}>내 정보</DropdownMenuLinkItem>`.
+ * 외부 링크는 href·target·rel을 그대로 준다.
+ * closeOnClick 기본 true: Base UI 기본(false)은 Next 클라이언트 이동 뒤에도 헤더 메뉴가 열려 있다. 지금 HeaderBar·HomeHeader는 링크를 누르면 닫는다
+ */
+function DropdownMenuLinkItem({
+  className,
+  variant = "default",
+  closeOnClick = true,
+  ...props
+}: Readonly<DropdownMenuLinkItemProps>) {
+  return (
+    <MenuPrimitive.LinkItem
+      data-slot="dropdown-menu-link-item"
+      data-variant={variant}
+      closeOnClick={closeOnClick}
+      className={cn(dropdownMenuItemVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+// Profile Header 5864:13003: padding T20 R16 B20 L20, gap 4, 아래 구분선 border/subtle 0.5px.
+// 메뉴 항목이 아니라 키보드 탐색에서 건너뛴다. 스크린리더에 사용자 이름이 필요하면 트리거 aria-label에 넣는다
+function DropdownMenuHeader({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      data-slot="dropdown-menu-header"
+      className={cn(
+        "flex min-w-0 flex-col gap-1 py-5 pr-4 pl-5 shadow-[inset_0_-0.5px_0_var(--color-border-subtle)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// 닉네임: label/xl/emphasis text/default. Figma 행간 22, 코드 토큰 24(Button lg와 같은 차이)라 Header 높이가 86 → 88
+function DropdownMenuHeaderTitle({ className, ...props }: Readonly<ComponentProps<"p">>) {
+  return (
+    <p
+      data-slot="dropdown-menu-header-title"
+      className={cn("truncate text-label-xl-emphasis text-text", className)}
+      {...props}
+    />
+  );
+}
+
+// 이메일: body/sm/regular text/subtle
+function DropdownMenuHeaderDescription({ className, ...props }: Readonly<ComponentProps<"p">>) {
+  return (
+    <p
+      data-slot="dropdown-menu-header-description"
+      className={cn("truncate text-body-s-regular text-text-subtle", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLinkItem,
+  DropdownMenuHeader,
+  DropdownMenuHeaderTitle,
+  DropdownMenuHeaderDescription,
+};
diff --git a/src/components/ui/field.tsx b/src/components/ui/field.tsx
new file mode 100644
index 00000000..582e0f05
--- /dev/null
+++ b/src/components/ui/field.tsx
@@ -0,0 +1,111 @@
+import type { ComponentProps } from "react";
+
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+// Figma 02 Text Field: Text Field Base 5002:4415·Textarea Field Base 5002:4424(Header·입력·Footer 세로 간격 4), Header 5002:4449, Footer 5002:4440
+// 오류 라벨·보조 문구·카운트의 status/negative/strong(#c10000)은 시맨틱 토큰이 없어 원시 변수 --red-800을 쓴다
+
+// shadcn의 role="group"은 두지 않는다. 입력 하나와 라벨을 묶는 배치용 div라(Base UI Field.Root도 role 없는 div) 이름 없는 그룹만 한 겹 더 읽힌다
+function Field({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      data-slot="field"
+      className={cn("group/field flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+// Label 프레임 Fill + Suffix Slot Hug, 간격 30
+function FieldHeader({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return (
+    <div
+      data-slot="field-header"
+      className={cn(
+        "flex items-center gap-7.5 *:data-[slot=field-label]:min-w-0 *:data-[slot=field-label]:flex-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({ className, ...props }: Readonly<ComponentProps<typeof Label>>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        // 비활성·읽기 전용은 입력(input·textarea)에서만 읽는다. 같은 Field 안 버튼이 비활성이어도 라벨은 그대로다
+        // 겹치면 오류 > 비활성 > 읽기 전용: 저장 중 비활성이 돼도 오류 표시를 남긴다
+        "group-has-[[aria-invalid=true]]/field:text-[var(--red-800)] group-has-[:is(input,textarea):disabled:not([aria-invalid=true])]/field:text-text-disabled group-has-[:is(input,textarea)[readonly]:enabled:not([aria-invalid=true])]/field:text-text-subtle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldSuffix({ className, ...props }: Readonly<ComponentProps<"span">>) {
+  return (
+    <span
+      data-slot="field-suffix"
+      className={cn("shrink-0 text-caption-s-regular text-text-subtle", className)}
+      {...props}
+    />
+  );
+}
+
+function FieldFooter({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return <div data-slot="field-footer" className={cn("flex items-center", className)} {...props} />;
+}
+
+function FieldDescription({ className, ...props }: Readonly<ComponentProps<"p">>) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn("min-w-0 text-caption-s-regular text-text-subtle", className)}
+      {...props}
+    />
+  );
+}
+
+// Figma Error 상태의 Helper Text
+function FieldError({ className, children, ...props }: Readonly<ComponentProps<"p">>) {
+  if (!children) return null;
+  return (
+    <p
+      role="alert"
+      data-slot="field-error"
+      className={cn("min-w-0 text-caption-s-regular text-[var(--red-800)]", className)}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+}
+
+// Helper Text 없이 카운트만 있어도 오른쪽 끝에 붙도록 Footer의 space-between 대신 ms-auto로 민다
+function FieldCount({ className, ...props }: Readonly<ComponentProps<"span">>) {
+  return (
+    <span
+      data-slot="field-count"
+      className={cn(
+        "ms-auto shrink-0 text-caption-s-regular text-text-subtle group-has-[[aria-invalid=true]]/field:text-[var(--red-800)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Field,
+  FieldHeader,
+  FieldLabel,
+  FieldSuffix,
+  FieldFooter,
+  FieldDescription,
+  FieldError,
+  FieldCount,
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 00000000..05c2c630
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,24 @@
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+// Figma 02 Text Field 5002:4382의 Field 프레임. Type은 DOM 상태로 그린다: Focused=:focus, Error Filled·Error Focused=aria-invalid, Disabled=:disabled, Read Only=:read-only
+// Read Only 글자는 Figma가 원시 gray/800에 바로 바인딩해 시맨틱 토큰이 없어 원시 변수를 쓴다
+// :read-only는 비활성 입력에도 걸리지만 Tailwind가 disabled:를 뒤에 출력해 비활성 색이 이긴다. aria-invalid:도 focus: 뒤라 포커스 중에도 오류 테두리가 남는다
+function Input({ className, type, ...props }: Readonly<ComponentProps<"input">>) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        // 세로 padding 12 대신 min-h-12와 입력의 기본 세로 가운데 정렬로 48px을 맞춘다(CSS 테두리는 padding 밖이라 py-3이면 50px). 오른쪽 14 = padding 10 + Text 프레임 4
+        "min-h-12 w-full min-w-0 rounded-md border border-border bg-fill-subtle px-3.5 text-body-m-regular text-text transition-colors placeholder:text-text-subtle focus:border-primary focus:outline-hidden read-only:bg-fill read-only:text-[var(--gray-800)] disabled:cursor-not-allowed disabled:bg-fill disabled:text-text-disabled disabled:placeholder:text-text-disabled aria-invalid:border-status-negative",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 00000000..8080df7c
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,20 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+// Figma 02 Text Field Header 5002:4449의 Label: label/xs/regular, text/default, 필수 표시와 간격 2
+// 비활성·오류·읽기 전용 색은 FieldLabel이 같은 Field 안 입력에서 읽는다. 라벨이 입력 앞에 있어 shadcn의 peer-disabled:로는 읽지 못한다
+function Label({ className, htmlFor, children, ...props }: Readonly<ComponentProps<"label">>) {
+  return (
+    <label
+      htmlFor={htmlFor}
+      data-slot="label"
+      className={cn("flex items-center gap-0.5 text-label-xs-regular text-text select-none", className)}
+      {...props}
+    >
+      {children}
+    </label>
+  );
+}
+
+export { Label };
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 00000000..d11cc7d0
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * 트리거에 붙어 뜨는 패널. 동작 목록이면 DropdownMenu, 값 하나를 고르면 Select를 쓴다.
+ * modal 기본값은 Base UI 기본 false다. 지금 패널들처럼 바깥 클릭이 뒤로 전달되고 페이지 스크롤을 막지 않는다.
+ * 바깥 클릭·Esc로 닫히고, 열면 첫 포커스 가능 요소로(터치면 패널로), 닫으면 트리거로 포커스가 돌아간다.
+ */
+function Popover(props: Readonly<PopoverPrimitive.Root.Props>) {
+  return <PopoverPrimitive.Root {...props} />;
+}
+
+/** 기본은 `<button type="button">`이다. 아바타 묶음처럼 모양이 있는 버튼은 className으로 그리고, 다른 요소는 render로 넘긴다 */
+function PopoverTrigger(props: Readonly<PopoverPrimitive.Trigger.Props>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+// Figma DS에 일반 팝오버 컴포넌트가 없어 표면은 Modal(5956:24724)의 fill/elevation·radius 12·shadow/default(0 2 10 #1f2229 10%)를 쓴다.
+// 안쪽 여백·간격·폭은 Figma 근거가 없어 지금 화면 값을 variant로 옮긴다.
+// 열림·닫힘 전환은 Figma에 없어 Select 목록과 같은 Base UI 문서 예시(scale 0.98·opacity, 100ms)를 쓴다.
+// data-instant(키보드로 열기·Esc·포커스 이탈로 닫힘)에는 전환하지 않는다(Select 팝업에는 이 속성이 없다)
+const popoverContentVariants = cva(
+  "flex origin-(--transform-origin) flex-col outline-hidden transition-[opacity,scale] duration-100 ease-out data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none motion-reduce:transition-none",
+  {
+    variants: {
+      variant: {
+        // 지금 헤더 구성원 미리보기(HeaderMemberPreview) 값: 폭 305·padding 24·gap 16. 띄운 패널이라 화면 폭으로 상한을 건다(원칙 3-2)
+        panel:
+          "w-[min(305px,calc(100vw-2rem))] gap-4 rounded-[12px] bg-fill-elevate p-6 text-text shadow-[0_2px_10px_rgba(31,34,41,0.10)]",
+        // 내용이 자기 표면을 그릴 때(기간 칸 아래 달력 = DatePicker 카드). 표면 없이 기준 요소 폭에 맞춘다(지금 달력의 inset-x-0)
+        bare: "w-(--anchor-width)",
+      },
+    },
+    defaultVariants: { variant: "panel" },
+  },
+);
+
+// Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+type PopoverContentProps = Omit<PopoverPrimitive.Popup.Props, "className"> &
+  Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "anchor"> &
+  VariantProps<typeof popoverContentVariants> & { className?: string };
+
+/**
+ * 포털·위치·표면을 한 번에 그린다. 접근성 이름은 `aria-label`로 준다(패널 role은 dialog).
+ * - variant: `panel`(기본, 표면 있음) / `bare`(표면 없음, 기준 요소 폭)
+ * - side·align: Base UI 기본 bottom·center. 오른쪽 끝 맞춤은 `align="end"`
+ * - sideOffset: 기본 8(지금 헤더 미리보기 mt-2). 기간 달력은 12(Figma Date Picker 열림 배치 5956:15759 gap 12)
+ * - anchor: 트리거가 아닌 요소에 붙일 때(기간 칸 두 개를 감싼 묶음)
+ * - initialFocus·finalFocus: Base UI Popup 그대로. 열 때 포커스를 옮기지 않으려면 `initialFocus={false}`
+ * - className: 배치(폭 등)만. 색·여백은 variant로 바꾼다
+ */
+function PopoverContent({
+  className,
+  variant,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 8,
+  anchor,
+  ...props
+}: Readonly<PopoverContentProps>) {
+  return (
+    <PopoverPrimitive.Portal>
+      {/* 다른 body 포털 부품(대화상자·Select 등)과 같은 z-50이라 나중에 연 이 패널이 위에 뜬다. 앱 내용은 isolate로 감싸 있어(app-chrome-shell) 앱 안 z와 겨루지 않는다 */}
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        anchor={anchor}
+        className="z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(popoverContentVariants({ variant }), className)}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+export { Popover, PopoverContent, PopoverTrigger };
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
new file mode 100644
index 00000000..88bd8515
--- /dev/null
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,41 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+
+import { RadioButtonIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
+
+// Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+type RadioGroupProps = Omit<RadioGroupPrimitive.Props, "className"> & { className?: string };
+type RadioGroupItemProps = Omit<RadioPrimitive.Root.Props, "className"> & { className?: string };
+
+/** 항목 사이 간격은 쓰는 쪽이 className으로 정한다 */
+function RadioGroup({ className, ...props }: Readonly<RadioGroupProps>) {
+  return (
+    <RadioGroupPrimitive data-slot="radio-group" className={cn("flex flex-col", className)} {...props} />
+  );
+}
+
+// Figma ❸ Icon의 radio button(5024:68)으로 그린다. Default(5024:67)는 border/default 원, Activated(5024:65)는 primary/subtle 원과 10px primary 점이다.
+// Activated 원: Figma primary/subtle은 blue/50인데 코드 primary-subtle은 blue-100이라 원시 변수로 Figma 값에 맞춘다.
+// 비활성 모양은 Figma에 없어 커서만 바꾼다. 누르는 영역은 감싸는 label 행이 맡는다
+function RadioGroupItem({ className, ...props }: Readonly<RadioGroupItemProps>) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
+      className={cn(
+        "relative inline-flex shrink-0 cursor-pointer rounded-full text-border select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-checked:text-[var(--blue-50)] aria-disabled:cursor-not-allowed",
+        className,
+      )}
+      {...props}
+    >
+      {/* size 속성만 주면 shadcn 부모의 [&_svg:not([class*='size-'])]:size-* 규칙에 덮여서 같은 px 클래스로도 준다 */}
+      <RadioButtonIcon size={24} className="size-[24px]" />
+      <RadioPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="absolute inset-0 m-auto size-[10px] rounded-full bg-primary"
+      />
+    </RadioPrimitive.Root>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };
diff --git a/src/components/ui/responsive-dialog.tsx b/src/components/ui/responsive-dialog.tsx
new file mode 100644
index 00000000..0fadb2a2
--- /dev/null
+++ b/src/components/ui/responsive-dialog.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { createContext, use, type ComponentProps, type ReactElement, type ReactNode } from "react";
+
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { useMobileView } from "@/contexts/MobileViewContext";
+
+// 반응형 대화상자(DECISIONS 'Dialog'): PC는 Dialog, 모바일 기기(useMobileView().isMobileDevice)는 아래 시트 Drawer.
+// 같은 내용(폼·목록)을 두 껍데기에 넣는다. 파트 이름·순서는 Dialog·Drawer와 같고, Root가 고른 모드를 context로 내린다.
+// 모드는 UA 기준이라 열린 채 바뀌지 않는다(바뀌면 다른 Root로 다시 마운트돼 안쪽 상태를 잃는다).
+//
+// @example
+// <ResponsiveDialog open={open} onOpenChange={setOpen} closeDisabled={isSaving}>
+//   <ResponsiveDialogContent size="md" closeLabel="예산 설정 닫기">
+//     <ResponsiveDialogHeader>
+//       <ResponsiveDialogTitle>예산 설정</ResponsiveDialogTitle>
+//     </ResponsiveDialogHeader>
+//     <ResponsiveDialogBody>
+//       <form id={formId} onSubmit={handleSubmit}>…</form>
+//     </ResponsiveDialogBody>
+//     <ResponsiveDialogFooter>
+//       <ResponsiveDialogClose render={<Button variant="weak" />}>취소</ResponsiveDialogClose>
+//       <Button type="submit" form={formId} loading={isSaving} loadingLabel="저장 중">저장</Button>
+//     </ResponsiveDialogFooter>
+//   </ResponsiveDialogContent>
+// </ResponsiveDialog>
+
+const ResponsiveDialogIsDrawerContext = createContext(false);
+
+// 파트들이 Root와 같은 껍데기를 고르게 한다. 내용이 모드별로 달라야 하면 화면이 useMobileView()를 직접 읽는다
+function useResponsiveDialogIsDrawer() {
+  return use(ResponsiveDialogIsDrawerContext);
+}
+
+type DialogRootProps = ComponentProps<typeof Dialog>;
+type DrawerRootProps = ComponentProps<typeof Drawer>;
+type DialogChangeEventDetails = Parameters<NonNullable<DialogRootProps["onOpenChange"]>>[1];
+type DrawerChangeEventDetails = Parameters<NonNullable<DrawerRootProps["onOpenChange"]>>[1];
+
+type ResponsiveDialogProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  /** eventDetails는 두 껍데기의 공통 모양(reason·event·cancel)이다. Drawer는 reason에 "swipe"가 더 있다 */
+  onOpenChange?: (open: boolean, eventDetails: DialogChangeEventDetails | DrawerChangeEventDetails) => void;
+  /** 닫힘 애니메이션까지 끝난 뒤. 폼 초기화 등 정리는 여기서(onOpenChangeComplete(false)) */
+  onOpenChangeComplete?: (open: boolean) => void;
+  /** 저장 중처럼 닫으면 안 될 때 true. Esc·딤·X·취소(ResponsiveDialogClose)·스와이프를 모두 막는다 */
+  closeDisabled?: boolean;
+  /** 딤을 눌러도 닫히지 않게 한다(두 껍데기 모두). PC에서만 막으려면 화면이 isMobileDevice로 값을 고른다 */
+  disablePointerDismissal?: boolean;
+  children?: ReactNode;
+};
+
+function ResponsiveDialog(props: Readonly<ResponsiveDialogProps>) {
+  const { isMobileDevice } = useMobileView();
+  return (
+    <ResponsiveDialogIsDrawerContext value={isMobileDevice}>
+      {isMobileDevice ? <Drawer {...props} /> : <Dialog {...props} />}
+    </ResponsiveDialogIsDrawerContext>
+  );
+}
+
+type ResponsiveDialogContentProps = {
+  /** PC Dialog 폭(default 353 · sm 384 · md 448 · lg 640 · xl 720). 시트는 화면 폭이라 쓰지 않는다 */
+  size?: ComponentProps<typeof DialogContent>["size"];
+  /** 시트 높이(auto 내용 높이 · belowNav · belowSafeArea). PC는 쓰지 않는다 */
+  drawerSize?: ComponentProps<typeof DrawerContent>["size"];
+  /** 닫기 X의 접근성 이름(예: "예산 설정 닫기") */
+  closeLabel?: string;
+  /** PC 제목 줄 X 표시(기본 true). 시트 X는 Figma에 숨김 속성이 없어 늘 그린다 */
+  showCloseButton?: boolean;
+  initialFocus?: ComponentProps<typeof DialogContent>["initialFocus"];
+  finalFocus?: ComponentProps<typeof DialogContent>["finalFocus"];
+  /** 배치(높이 상한 등)에만 쓴다. 두 껍데기 모두에 붙는다 */
+  className?: string;
+  children?: ReactNode;
+};
+
+function ResponsiveDialogContent({ size, drawerSize, showCloseButton, ...props }: Readonly<ResponsiveDialogContentProps>) {
+  const isDrawer = useResponsiveDialogIsDrawer();
+  return isDrawer ? (
+    <DrawerContent size={drawerSize} {...props} />
+  ) : (
+    <DialogContent size={size} showCloseButton={showCloseButton} {...props} />
+  );
+}
+
+function ResponsiveDialogHeader(props: Readonly<ComponentProps<"div">>) {
+  return useResponsiveDialogIsDrawer() ? <DrawerHeader {...props} /> : <DialogHeader {...props} />;
+}
+
+function ResponsiveDialogTitle(props: Readonly<{ className?: string; children?: ReactNode }>) {
+  return useResponsiveDialogIsDrawer() ? <DrawerTitle {...props} /> : <DialogTitle {...props} />;
+}
+
+function ResponsiveDialogDescription(props: Readonly<{ className?: string; children?: ReactNode }>) {
+  return useResponsiveDialogIsDrawer() ? <DrawerDescription {...props} /> : <DialogDescription {...props} />;
+}
+
+/**
+ * 본문. 두 껍데기 모두 본문만 스크롤하고 제목 줄·Footer는 고정한다(시트 DrawerBody, PC DialogBody).
+ * 안쪽 간격은 두 껍데기 모두 없어 넣는 내용이 정한다(className="gap-2" 또는 폼 자신의 gap)
+ */
+function ResponsiveDialogBody(props: Readonly<ComponentProps<"div">>) {
+  return useResponsiveDialogIsDrawer() ? <DrawerBody {...props} /> : <DialogBody {...props} />;
+}
+
+function ResponsiveDialogFooter(props: Readonly<ComponentProps<"div">>) {
+  return useResponsiveDialogIsDrawer() ? <DrawerFooter {...props} /> : <DialogFooter {...props} />;
+}
+
+type ResponsiveDialogCloseProps = Omit<ComponentProps<typeof DialogClose>, "className" | "render"> & {
+  className?: string;
+  /** 취소 버튼은 render={<Button variant="weak" />} */
+  render?: ReactElement;
+};
+
+/** 닫는 버튼. closeDisabled이면 비활성으로 보인다 */
+function ResponsiveDialogClose(props: Readonly<ResponsiveDialogCloseProps>) {
+  return useResponsiveDialogIsDrawer() ? <DrawerClose {...props} /> : <DialogClose {...props} />;
+}
+
+export {
+  ResponsiveDialog,
+  ResponsiveDialogBody,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+};
diff --git a/src/components/ui/search-bar.tsx b/src/components/ui/search-bar.tsx
new file mode 100644
index 00000000..4a331711
--- /dev/null
+++ b/src/components/ui/search-bar.tsx
@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+
+import { ChevronLeftIcon, CloseIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
+
+// Figma 02 Text Field의 Search Bar(5002:4377): 48px, padding L14 R10, gap 8, radius 8, 바탕 fill/subtle.
+// 테두리는 Default border/default → Focused primary/default → 값이 있고 포커스가 없으면(Filled) primary/strong.
+// Filled는 입력의 :placeholder-shown으로 읽어서 SearchBarInput은 placeholder를 꼭 받는다
+const searchBarVariants = cva(
+  "flex h-12 w-full min-w-0 items-center gap-2 border border-border bg-fill-subtle pl-3.5 pr-2.5 transition-colors focus-within:border-primary has-[input:disabled]:bg-fill [&:has(input:not(:placeholder-shown)):not(:focus-within)]:border-primary-strong",
+  {
+    variants: {
+      // pill은 모바일 검색 전용 화면(지도 검색·장소 추가 검색)의 기존 알약 모양이다. Figma Search Bar에는 없다
+      shape: {
+        rounded: "rounded-md",
+        pill: "rounded-full",
+      },
+    },
+    defaultVariants: { shape: "rounded" },
+  },
+);
+
+function SearchBar({
+  className,
+  shape,
+  ...props
+}: Readonly<ComponentProps<"div"> & VariantProps<typeof searchBarVariants>>) {
+  return (
+    <div
+      data-slot="search-bar"
+      className={cn(searchBarVariants({ shape }), className)}
+      {...props}
+    />
+  );
+}
+
+// Leading Icon 20px, icon/subtle. 아이콘(@/assets/icons)을 size={20}으로 넣는다
+function SearchBarIcon({ className, ...props }: Readonly<ComponentProps<"span">>) {
+  return (
+    <span
+      aria-hidden
+      data-slot="search-bar-icon"
+      className={cn("flex shrink-0 text-icon-subtle", className)}
+      {...props}
+    />
+  );
+}
+
+// 모바일 검색 전용 화면의 뒤로가기. Figma Search Bar에는 없어 Leading Icon 자리(20px)에 둔다.
+// 누르는 영역은 지우기와 같은 32px × 칸 높이이고, 음수 margin으로 줄 안에서는 아이콘 폭 20px만 차지한다(왼쪽 여백 14·간격 8 안에서 끝난다)
+function SearchBarBack({ className, ...props }: Readonly<ComponentProps<"button">>) {
+  return (
+    <button
+      type="button"
+      data-slot="search-bar-back"
+      className={cn(
+        "-mx-1.5 grid w-8 shrink-0 cursor-pointer place-items-center self-stretch text-icon-subtle focus-visible:outline-2 focus-visible:outline-primary",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronLeftIcon size={20} />
+    </button>
+  );
+}
+
+// Figma Text 프레임 오른쪽 4px, 입력 글자 text/default, 플레이스홀더 text/subtle
+function SearchBarInput({
+  className,
+  placeholder,
+  ...props
+}: Readonly<ComponentProps<"input"> & { placeholder: string }>) {
+  return (
+    <input
+      data-slot="search-bar-input"
+      placeholder={placeholder}
+      className={cn(
+        "min-w-0 flex-1 self-stretch bg-transparent pr-1 text-body-m-regular text-text outline-none placeholder:text-text-subtle disabled:cursor-not-allowed disabled:text-text-disabled [&::-webkit-search-cancel-button]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// Trailing Icon 영역 32×48, close 20px. 언제 보일지는 호출부가 정한다(값이 있을 때 등)
+function SearchBarClear({ className, ...props }: Readonly<ComponentProps<"button">>) {
+  return (
+    <button
+      type="button"
+      data-slot="search-bar-clear"
+      className={cn(
+        "grid w-8 shrink-0 cursor-pointer place-items-center self-stretch text-icon-subtle focus-visible:outline-2 focus-visible:outline-primary",
+        className,
+      )}
+      {...props}
+    >
+      <CloseIcon size={20} />
+    </button>
+  );
+}
+
+export { SearchBar, SearchBarBack, SearchBarIcon, SearchBarInput, SearchBarClear };
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 00000000..aaae4c2f
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,140 @@
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+
+import { CheckIcon, ChevronDownIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
+
+// Figma 08 Dropdown의 Select(5047:440): Default 5047:164, Focused(=열림) 5047:230, Hover(=첫 옵션 hover) 5047:281, Filled 5047:336, Disabled 5047:390.
+// Figma에 트리거 hover·키보드 포커스·오류, 옵션 선택됨·비활성, 목록 최대 높이·모션이 없다. 오류는 Text Field(1단계 Input) 모양을 빌리고 나머지는 지금 ExpenseSelect 값을 따른다
+
+/**
+ * 값 하나를 고르는 목록. modal은 false가 기본이다: 지금 드롭다운처럼 열린 동안 페이지 스크롤을 막지 않고 바깥 클릭이 뒤 요소에도 전달된다(Base UI 기본은 true).
+ * 트리거에 고른 값의 라벨을 보이려면 `items`({ value: label } 또는 [{ value, label }])를 꼭 준다. 없으면 SelectValue가 원시 value를 그린다.
+ * 비활성은 SelectTrigger가 아니라 여기 `disabled`로 준다. 숨은 input까지 비활성이 돼 FieldLabel이 회색으로 바뀐다.
+ */
+function Select<Value, Multiple extends boolean | undefined = false>({
+  modal = false,
+  ...props
+}: Readonly<SelectPrimitive.Root.Props<Value, Multiple>>) {
+  return <SelectPrimitive.Root modal={modal} {...props} />;
+}
+
+// Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+type SelectTriggerProps = Omit<SelectPrimitive.Trigger.Props, "className"> & { className?: string };
+
+/**
+ * Field 프레임(I5047:231;5046:254): 48px, padding L14 R10, gap 8, radius 8, fill/subtle, border/default. 1단계 Input과 높이·글자·왼쪽 여백이 같다.
+ * 자식으로 SelectValue를 넣는다. 오류는 `aria-invalid`로 알린다(Field 안이면 FieldLabel도 빨개진다). 보이는 라벨이 없으면 `aria-label`을 단다.
+ */
+function SelectTrigger({ className, children, ...props }: Readonly<SelectTriggerProps>) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(
+        // 열림(Focused)은 primary/default 테두리. 키보드 포커스는 Figma에 없어 다른 ui 부품(Button 등)과 같은 outline이라 오류 테두리와 겹쳐도 보인다.
+        // 오류 테두리는 열림·hover 중에도 남는다(Input의 Error Focused). Tailwind가 data-*를 aria-* 뒤에 출력해 열림 테두리는 not-aria-invalid로 한정한다.
+        // hover는 Figma에 없어 지금 ExpenseSelect(테두리 primary 40%)를 Button outline과 같은 border/hover 토큰으로 옮겼다. 비활성·오류·열림에서는 걸지 않는다
+        // Disabled: fill/default, text/disabled(플레이스홀더 포함, data-placeholder가 data-disabled 뒤에 출력돼 not-data-disabled로 한정). opacity는 쓰지 않는다
+        "group/select-trigger flex min-h-12 w-full min-w-0 cursor-pointer items-center gap-2 rounded-md border border-border bg-fill-subtle pl-3.5 pr-2.5 text-left text-body-m-regular text-text transition-colors select-none not-data-disabled:not-aria-invalid:not-data-popup-open:hover:border-border-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-status-negative data-placeholder:not-data-disabled:text-text-subtle data-popup-open:not-aria-invalid:border-primary data-disabled:cursor-not-allowed data-disabled:bg-fill data-disabled:text-text-disabled",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {/* Trailing Icon 32×46 안에 chevron 20px icon/subtle(5046:256·257). Figma는 열리면 up 아이콘이라 down을 뒤집는다 */}
+      <SelectPrimitive.Icon
+        data-slot="select-icon"
+        className="grid w-8 shrink-0 place-items-center self-stretch text-icon-subtle transition-transform duration-120 ease-out group-data-disabled/select-trigger:text-icon-disabled data-popup-open:rotate-180 motion-reduce:transition-none"
+      >
+        <ChevronDownIcon size={20} />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+type SelectValueProps = Omit<SelectPrimitive.Value.Props, "className"> & { className?: string };
+
+/**
+ * 고른 값의 라벨, 없으면 `placeholder`(Figma 예시 "선택해 주세요")를 그린다. 글자색은 트리거가 정한다(값 text/default, 플레이스홀더 text/subtle).
+ * Figma 값 칸은 한 줄(24px)이라 넘치면 말줄임한다
+ */
+function SelectValue({ className, ...props }: Readonly<SelectValueProps>) {
+  return (
+    <SelectPrimitive.Value data-slot="select-value" className={cn("min-w-0 flex-1 truncate", className)} {...props} />
+  );
+}
+
+type SelectContentProps = Omit<SelectPrimitive.Popup.Props, "className"> & { className?: string } & Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >;
+
+/**
+ * 목록 패널(I5047:231;5046:216): 트리거 폭, 트리거 아래 4px, padding 0, radius 8, fill/elevation, border/default, shadow/default.
+ * alignItemWithTrigger는 false가 기본이다: 지금 드롭다운처럼 늘 트리거 아래로 연다(Base UI 기본 true는 마우스로 열면 목록이 트리거를 덮는다).
+ * 최대 높이는 Figma가 정하지 않아 지금 ExpenseSelect의 240px이고, 화면 아래 남은 높이를 넘지 않는다. 넘치면 목록 안에서 스크롤한다
+ */
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  alignOffset = 0,
+  alignItemWithTrigger = false,
+  ...props
+}: Readonly<SelectContentProps>) {
+  return (
+    <SelectPrimitive.Portal>
+      {/* 다른 body 포털 부품(대화상자 등)과 같은 z-50이라 나중에 여는 이 목록이 위에 뜬다 */}
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          className={cn(
+            // shadow/default(0 2 10 #1f2229 10%)는 그림자 토큰이 없어 임의값이다. 열림·닫힘 모션은 Figma에 없어 Base UI 예시의 짧은 페이드만 둔다
+            "max-h-[min(15rem,var(--available-height))] w-(--anchor-width) origin-(--transform-origin) overflow-y-auto overscroll-contain rounded-md border border-border bg-fill-elevate shadow-[0_2px_10px_rgba(31,34,41,0.10)] outline-hidden transition-[opacity,scale] duration-100 ease-out data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-ending-style:scale-[0.98] data-ending-style:opacity-0 motion-reduce:transition-none",
+            className,
+          )}
+          {...props}
+        >
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+type SelectItemProps = Omit<SelectPrimitive.Item.Props, "className"> & { className?: string };
+
+/**
+ * Select Option Item(I5047:231;5046:217): 56px, padding L14, Text 프레임 L2 R16, body/md/regular text/default, 아래 구분선 border/subtle 0.5px.
+ * hover·키보드 이동(data-highlighted)은 fill/default(5047:333). 마지막 행의 구분선은 패널 테두리와 겹쳐 두 줄로 보여 뺀다.
+ * 비활성 옵션은 Figma·지금 앱에 없어 Text Field Disabled 글자색(text/disabled)을 빌린다.
+ * 선택됨 체크는 Trailing Icon 48×48 안 check 16px(5030:653·654)이다. 색은 Figma에서 확인 못 해 지금 ExpenseSelect 값(text-primary)이다
+ */
+function SelectItem({ className, children, ...props }: Readonly<SelectItemProps>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "flex min-h-14 w-full cursor-pointer items-center border-b-[0.5px] border-border-subtle pl-3.5 text-body-m-regular text-text outline-hidden select-none last:border-b-0 data-highlighted:bg-fill data-disabled:cursor-not-allowed data-disabled:text-text-disabled",
+        className,
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="min-w-0 flex-1 pl-0.5 pr-4 break-words">{children}</SelectPrimitive.ItemText>
+      {/* 선택된 행에만 그린다(Base UI가 aria-hidden을 단다. 선택 여부는 role=option의 aria-selected로 읽힌다) */}
+      <SelectPrimitive.ItemIndicator className="grid size-12 shrink-0 place-items-center text-primary">
+        <CheckIcon size={16} />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  );
+}
+
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue };
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..3e6c0c4e
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,49 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Figma DS에 Skeleton이 없어 지금 화면들이 쓰는 스켈레톤 블록 모양을 그대로 옮긴다.
+const skeletonVariants = cva(
+  // 글줄 모서리는 지금 쓰는 bare `rounded`(Tailwind v4에서 지원 중단된 0.25rem)를 rem 그대로 옮긴다.
+  // 기본 글자 크기에서 Figma radius/sm 4px(6034:29246)이고, 맞는 토큰이 없다(rounded-sm = 6px).
+  // block: render={<span />}로 그려도 h-*·w-*가 먹게 한다(인라인 자리는 className에 inline-block)
+  "block animate-pulse rounded-[0.25rem] motion-reduce:animate-none",
+  {
+    variants: {
+      tone: {
+        strong: "bg-fill-strong",
+        // strong보다 옅은 톤이라는 뜻으로 fill/default다. bg-fill-subtle이 아니다.
+        subtle: "bg-fill",
+      },
+    },
+    defaultVariants: { tone: "strong" },
+  },
+);
+
+/**
+ * 로딩 안내(output·aria-busy)는 감싸는 영역이 맡아 블록은 aria-hidden이다.
+ * 바깥 className은 크기·배치와 모서리만 바꾼다. 모서리는 대신하는 요소(버튼·카드·사진)를 따라야 해서
+ * 예외로 둔다(Figma Radius 6057:472: 기존 컴포넌트에 명시된 Radius 우선). 색은 tone으로만 바꾼다.
+ * div를 둘 수 없는 `<output>`·`<span>` 안에서는 render={<span />}를 쓴다. render 요소에 준 className은
+ * cn을 거치지 않고 이어 붙어 기본 클래스와 겹쳐도 정리되지 않으므로, 클래스는 Skeleton의 className으로 넘긴다.
+ */
+function Skeleton({
+  className,
+  tone,
+  render,
+  ...props
+}: Readonly<useRender.ComponentProps<"div"> & VariantProps<typeof skeletonVariants>>) {
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(
+      { "aria-hidden": true, className: cn(skeletonVariants({ tone }), className) },
+      props,
+    ),
+    state: { slot: "skeleton" },
+  });
+}
+
+export { Skeleton };
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 00000000..42a563a2
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,49 @@
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+import { CircleBanIcon, CircleCheckIcon, CloseIcon } from "@/assets/icons";
+
+// 색·아이콘·글자는 이 부품이 정한다. 화면은 위치·여백·표시 시간 같은 배치·동작만 넘긴다
+type Props = Omit<ToasterProps, "theme" | "richColors" | "icons" | "toastOptions">;
+
+function Toaster(props: Readonly<Props>) {
+  return (
+    <Sonner
+      // 다크 모드를 쓰지 않는다. sonner 다크 규칙은 레이어 밖 CSS라 unstyled에도 적용돼 라이트로 고정한다
+      theme="light"
+      containerAriaLabel="알림"
+      icons={{
+        success: <CircleCheckIcon size={20} className="text-status-positive" />,
+        error: <CircleBanIcon size={20} className="text-status-negative" />,
+        // 일반 안내는 아이콘 없이 보인다. 비워 두면 sonner 기본 아이콘이 나와 null로 끈다.
+        // warning·loading은 쓰는 곳이 없어 정하지 않았다(쓰면 sonner 기본 아이콘·스피너가 나온다)
+        info: null,
+        close: <CloseIcon size={20} />,
+      }}
+      toastOptions={{
+        // sonner 기본 CSS는 레이어 밖에 들어가 Tailwind 유틸리티를 이긴다. 끄고 Figma Toast Base(5285:5064)를 토큰으로 그린다
+        unstyled: true,
+        closeButtonAriaLabel: "닫기",
+        classNames: {
+          // unstyled가 함께 끄는 목록 폭(w-full)과 접힌 스택의 뒤 토스트 내용 숨김(*:opacity-0)을 되살린다.
+          // font-sans: sonner가 목록(ol)에 system-ui 글꼴을 레이어 밖에서 지정해 Pretendard가 상속되지 않는다
+          toast:
+            "flex min-h-13 w-full items-center gap-2 rounded-md border border-border bg-fill-elevate py-1 ps-4 pe-2 font-sans text-text data-[expanded=false]:data-[front=false]:*:opacity-0",
+          icon: "shrink-0",
+          // 설명(description)은 Figma에 슬롯이 없어 제목과의 간격은 지금 sonner 값(2px)을 따른다
+          content: "flex min-w-0 flex-1 flex-col gap-0.5",
+          title: "text-body-s-emphasis",
+          description: "text-body-s-regular text-text-subtle",
+          // Figma Button Neutral Weak·XS. 보이는 높이는 32px 그대로 두고 누르는 영역만 의사 요소로 44px까지 넓힌다
+          actionButton:
+            "relative inline-flex min-h-8 shrink-0 cursor-pointer items-center rounded-md bg-fill-elevate px-3.5 py-1.5 text-label-m-regular text-text-subtle underline after:absolute after:inset-x-0 after:-inset-y-1.5 hover:bg-fill active:bg-fill-strong focus-visible:outline-2 focus-visible:outline-primary",
+          // sonner는 닫기를 첫 자식으로 그린다. Figma 순서(문구 → 액션 → 닫기)로 옮겨 Tab 순서는 닫기가 먼저다
+          closeButton:
+            "order-last grid size-11 shrink-0 cursor-pointer place-items-center text-icon-subtle focus-visible:outline-2 focus-visible:outline-primary",
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Toaster };
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
new file mode 100644
index 00000000..468baa97
--- /dev/null
+++ b/src/components/ui/spinner.tsx
@@ -0,0 +1,53 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+
+import { ProgressIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
+
+// Figma에 Spinner 컴포넌트는 없어 progress 아이콘(type=default 252:30981)과 Button State=Loading의 아이콘 색을 따른다
+const spinnerVariants = cva("inline-flex items-center justify-center", {
+  variants: {
+    variant: {
+      default: "text-icon", // progress 원본색 icon/default
+      inverse: "text-icon-inverse", // Solid 버튼 Loading의 icon/inverse(5272:2993·2994·3017)
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+// width·height 속성만 주면 shadcn 부모의 [&_svg:not([class*='size-'])]:size-* 규칙에 덮여서 클래스로도 준다.
+// 회전 속도는 Figma가 개발에 맡겨(5864:9498) animate-spin 기본값을 쓴다
+const spinnerIconVariants = cva("motion-safe:animate-spin", {
+  variants: {
+    size: {
+      12: "size-[12px]",
+      16: "size-[16px]",
+      20: "size-[20px]",
+      24: "size-[24px]",
+      28: "size-[28px]",
+      32: "size-[32px]",
+    },
+  },
+});
+
+type SpinnerProps = Omit<ComponentProps<"output">, "children"> &
+  VariantProps<typeof spinnerVariants> & {
+    /** 아이콘 px(Figma 아이콘 크기). 아이콘 크기는 이 값으로만 바뀐다. className의 size-*는 output 칸 크기만 바꾼다 */
+    size?: 12 | 16 | 20 | 24 | 28 | 32;
+  };
+
+/** 화면 문구 없이 aria-label로만 알린다. output의 암묵 role이 status라 role은 달지 않는다(Sonar S6819) */
+function Spinner({ variant, size = 20, className, ...props }: Readonly<SpinnerProps>) {
+  return (
+    <output
+      data-slot="spinner"
+      aria-label="불러오는 중"
+      className={cn(spinnerVariants({ variant }), className)}
+      {...props}
+    >
+      <ProgressIcon size={size} className={spinnerIconVariants({ size })} />
+    </output>
+  );
+}
+
+export { Spinner };
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 00000000..f1f9aafa
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,76 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Figma에 Switch가 없어 지금 화면의 두 스위치 모양을 옮긴다. md는 쿠키 설정(AnalyticsConsentSettings), sm은 일정의 '지도에 경로 표시'(PlanDaySection)다.
+// md는 루트가 지금 버튼과 같은 56×44 누르는 영역이고 그 안에 트랙이 있다. sm은 루트가 트랙 크기이고 누르는 영역은 감싸는 label 행이 맡는다
+const switchVariants = cva(
+  "group/switch inline-flex shrink-0 cursor-pointer items-center focus-visible:outline-2 focus-visible:outline-primary disabled:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        md: "min-h-11 rounded-lg p-1 focus-visible:outline-offset-4",
+        // 지금은 윤곽선을 행 전체에 간격 없이 그린다. 트랙에 바로 붙이면 켜진 트랙과 같은 primary라 보이지 않아 띄운다
+        sm: "rounded-full focus-visible:outline-offset-2",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+// 꺼짐 색은 지금 쓰는 Tailwind 기본 팔레트·레거시 별칭(사용 금지)을 가까운 우때 값으로 바꾼 것이다.
+// md: neutral-400(#a1a1a1) → RGB 거리가 가장 가깝고 흰 배경 대비 3:1을 넘는 gray/600. 같은 값의 icon-subtle은 아이콘 색이라 원시 변수를 쓴다.
+// sm: 레거시 gray-300(#e2e8f0) → fill-strong
+const switchTrackVariants = cva(
+  "flex items-center rounded-full transition-colors group-aria-checked/switch:bg-primary motion-reduce:transition-none",
+  {
+    variants: {
+      size: {
+        md: "h-7 w-12 bg-[var(--gray-600)] p-1",
+        sm: "h-5 w-9 bg-fill-strong p-0.5",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+// 그림자는 Figma 명세가 없어 지금 쓰는 Tailwind shadow-sm 값을 그대로 옮긴다
+const switchThumbVariants = cva(
+  "rounded-full bg-fill-elevate shadow-[0_1px_3px_0_rgb(0_0_0/0.1),0_1px_2px_-1px_rgb(0_0_0/0.1)] transition-transform motion-reduce:transition-none",
+  {
+    variants: {
+      size: {
+        md: "size-5 data-checked:translate-x-5",
+        sm: "size-4 data-checked:translate-x-4",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+type SwitchProps = Omit<SwitchPrimitive.Root.Props, "className" | "nativeButton" | "render"> &
+  VariantProps<typeof switchVariants> & {
+    // Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+    className?: string;
+  };
+
+/** 비활성 모양은 지금 화면에 없어 커서만 바꾼다 */
+function Switch({ className, size, ...props }: Readonly<SwitchProps>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      // 지금 스위치처럼 폼을 제출하지 않는 <button type="button">으로 그린다. Base UI 기본은 span이다
+      nativeButton
+      render={<button type="button" />}
+      className={cn(switchVariants({ size }), className)}
+      {...props}
+    >
+      <span data-slot="switch-track" className={switchTrackVariants({ size })}>
+        <SwitchPrimitive.Thumb data-slot="switch-thumb" className={switchThumbVariants({ size })} />
+      </span>
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 00000000..69b82e80
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import { createContext, useContext, useMemo } from "react";
+
+import { cn } from "@/lib/utils";
+
+// Figma 11 Tabs(5138:2632): Tabs Line 5139:2996, Tabs Chip 5139:2997, Tab Item 5139:2681.
+// Figma에 세로 탭은 없다. orientation="vertical"은 배치(열 방향)만 바꾸고 모양은 가로와 같다.
+
+// Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+type ClassNameProp = { className?: string };
+
+/**
+ * 패널(내용 덩어리)을 바꾸는 탭. 같은 목록을 거르는 필터는 Chip(Toggle)을 쓴다.
+ * - value·onValueChange(제어) 또는 defaultValue. Base UI 기본 defaultValue는 0이라 문자열 값을 쓰면 꼭 정한다
+ * - 목록과 패널 사이 간격은 화면이 className(gap-*)으로 정한다(Figma 패널 규격 없음)
+ */
+function Tabs({ className, ...props }: Readonly<Omit<TabsPrimitive.Root.Props, "className"> & ClassNameProp>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col data-[orientation=vertical]:flex-row", className)}
+      {...props}
+    />
+  );
+}
+
+type TabsStyle = {
+  variant: "line" | "solid" | "outline";
+  size: "lg" | "md" | "sm";
+  layout: "fill" | "hug";
+};
+
+// Line md(44·label/lg)와 Chip md(36·label/md)처럼 같은 size 이름이 종류마다 달라 종류×크기를 cva compoundVariants로 푼다.
+// group-data로 쓰면 조합 선택자끼리 명시도가 같아 출력 순서에 기대게 되어, shadcn ToggleGroup처럼 Context로 탭에 넘긴다
+const TabsStyleContext = createContext<TabsStyle>({ variant: "line", size: "md", layout: "fill" });
+
+// Figma 컨테이너: Line은 gap 0(5139:2682·2760), Chip은 gap 8(spacing/8, 5139:2838·2916). 배경·밑줄은 없다(막대는 탭마다 그린다).
+// 넘치면 Figma가 '별도 스크롤 컨테이너'로 정해(5139:2681 description) 여기서 가로 스크롤을 넣지 않는다. 화면이 overflow-x-auto로 감싼다
+const tabsListVariants = cva("flex data-[orientation=vertical]:flex-col", {
+  variants: {
+    variant: {
+      line: "",
+      solid: "gap-2",
+      outline: "gap-2",
+    },
+  },
+});
+
+type TabsListProps = Omit<TabsPrimitive.List.Props, "className"> &
+  ClassNameProp &
+  (
+    | {
+        /** Tabs Line(기본): 주요 콘텐츠 전환 */
+        variant?: "line";
+        /** md 44(기본) / sm 40 */
+        size?: "md" | "sm";
+        /** fill(기본): 탭이 폭을 균등 분할 / hug: 탭이 글자 폭 */
+        layout?: "fill" | "hug";
+      }
+    | {
+        /** Tabs Chip Type=Solid·Outline: 하위 콘텐츠 전환. 탭은 늘 글자 폭이다 */
+        variant: "solid" | "outline";
+        /** lg 44(기본) / md 36 */
+        size?: "lg" | "md";
+        layout?: never;
+      }
+  );
+
+/**
+ * 탭 묶음. 모양(variant·size·layout)은 여기서 한 번 정하고 TabsTrigger가 따른다.
+ * activateOnFocus는 Base UI 기본 false다. 화살표는 포커스만 옮기고 Enter·Space·클릭으로 바꾼다(지금 탭들의 클릭 전환과 같다)
+ */
+function TabsList({ className, variant = "line", size, layout, ...props }: Readonly<TabsListProps>) {
+  // Figma 기본: Tabs Line은 Fill·md, Tabs Chip은 lg. Chip 탭은 늘 Hug다
+  const resolvedSize = size ?? (variant === "line" ? "md" : "lg");
+  const resolvedLayout = variant === "line" ? (layout ?? "fill") : "hug";
+  const style = useMemo(
+    () => ({ variant, size: resolvedSize, layout: resolvedLayout }),
+    [variant, resolvedSize, resolvedLayout],
+  );
+  return (
+    <TabsStyleContext.Provider value={style}>
+      <TabsPrimitive.List
+        data-slot="tabs-list"
+        data-variant={variant}
+        className={cn(tabsListVariants({ variant }), className)}
+        {...props}
+      />
+    </TabsStyleContext.Provider>
+  );
+}
+
+// Tab Item 공통(5139:2681): padding 좌우 24(spacing/24 바인딩 — description의 '16'이 아니라 실제 바인딩), 위아래 0, gap 4, 가운데 정렬.
+// 글자색 Enabled text/subtle · Disabled text/disabled. 선택은 aria-selected(Base UI Tab), 비활성은 data-disabled로 그린다.
+// data-disabled가 aria-selected보다 뒤에 출력돼 선택+비활성(Figma에 없음)은 비활성 모양이 된다.
+// hover·눌림은 Figma에 없어 넣지 않는다. 키보드 포커스 표시도 Figma에 없어 다른 ui 부품과 같은 primary 윤곽선을 쓴다(원칙 3-7)
+const tabsTriggerVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 px-6 whitespace-nowrap text-text-subtle transition-[color,background-color,border-color,box-shadow] duration-120 ease-out focus-visible:outline-2 focus-visible:outline-primary motion-reduce:transition-none data-disabled:cursor-not-allowed data-disabled:text-text-disabled",
+  {
+    variants: {
+      variant: {
+        // 막대(Indicator 5139:2612·2616)는 탭마다 고정된 2px: 선택 안 됨 border/subtle, 선택 primary/default.
+        // Figma 막대는 absolute라 높이를 차지하지 않아 border 대신 안쪽 그림자로 그린다(글자가 44 높이 가운데에 남는다).
+        // 붙은 탭끼리 윤곽선이 겹치지 않게 포커스 윤곽선을 안쪽에 둔다
+        line: "shadow-[inset_0_-2px_0_var(--color-border-subtle)] focus-visible:-outline-offset-2 aria-selected:text-primary-strong aria-selected:shadow-[inset_0_-2px_0_var(--color-primary-default)] data-disabled:shadow-[inset_0_-2px_0_var(--color-border-subtle)]",
+        // Solid(5139:2633·2637·2641): fill/subtle, 선택 primary/default + text/inverse
+        solid:
+          "rounded-full bg-fill-subtle focus-visible:outline-offset-2 aria-selected:bg-primary aria-selected:text-text-inverse data-disabled:bg-fill-subtle",
+        // Outline(5139:2657·2661·2665): border/default 1px 안쪽, 선택 primary/default 테두리 + primary/strong 글자.
+        // 선택 배경 Figma primary/subtle은 blue/50인데 코드 primary-subtle은 blue-100이라 원시 변수로 Figma 값에 맞춘다
+        outline:
+          "rounded-full border border-border bg-fill-subtle focus-visible:outline-offset-2 aria-selected:border-primary aria-selected:bg-[var(--blue-50)] aria-selected:text-primary-strong data-disabled:border-border data-disabled:bg-fill-subtle",
+      },
+      size: { lg: "", md: "", sm: "" },
+      // Line Fill은 탭을 균등 분할한다(5139:2682). flex-1이라도 글자 폭보다 줄지 않는다
+      layout: { fill: "flex-1", hug: "" },
+    },
+    // 높이는 글자가 커지면 늘어나게 min-h로 둔다(원칙 3-2). 선택은 emphasis, 비활성은 regular 글자다
+    compoundVariants: [
+      // Line md 44 · label/lg (5139:2609·2613·2617)
+      {
+        variant: "line",
+        size: "md",
+        className: "min-h-11 text-label-l-regular aria-selected:text-label-l-emphasis data-disabled:text-label-l-regular",
+      },
+      // Line sm 40 · label/md (5139:2621·2625·2629)
+      {
+        variant: "line",
+        size: "sm",
+        className: "min-h-10 text-label-m-regular aria-selected:text-label-m-emphasis data-disabled:text-label-m-regular",
+      },
+      // Solid·Outline lg 44 · label/lg (5139:2633·2657)
+      {
+        variant: ["solid", "outline"],
+        size: "lg",
+        className: "min-h-11 text-label-l-regular aria-selected:text-label-l-emphasis data-disabled:text-label-l-regular",
+      },
+      // Solid·Outline md 36 · label/md (5139:2645·2669)
+      {
+        variant: ["solid", "outline"],
+        size: "md",
+        className: "min-h-9 text-label-m-regular aria-selected:text-label-m-emphasis data-disabled:text-label-m-regular",
+      },
+    ],
+  },
+);
+
+/**
+ * 탭 하나. value는 TabsContent의 value와 짝이다. disabled면 고를 수 없다(클릭·Enter·Space 무시).
+ * 포커스는 받는다: 화살표 이동이 비활성 탭에도 멈춘다(Base UI가 aria-disabled로 그려 WAI-ARIA 탭 패턴대로 건너뛰지 않음).
+ * 링크로 그릴 때는 `nativeButton={false} render={<Link href=… />}`(Base UI Tabs "Links").
+ * className은 배치만. 모양은 TabsList가 정한다
+ */
+function TabsTrigger({ className, ...props }: Readonly<Omit<TabsPrimitive.Tab.Props, "className"> & ClassNameProp>) {
+  const style = useContext(TabsStyleContext);
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(tabsTriggerVariants(style), className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * 탭 패널. keepMounted는 Base UI 기본 false라 숨은 패널은 DOM에서 빠진다(안의 state·스크롤 초기화 — 지금 장소 상세 홈·리뷰와 같다).
+ * 패널 자체가 포커스를 받을 수 있어(tabIndex 0) 키보드 포커스 표시를 안쪽 윤곽선으로 둔다
+ */
+function TabsContent({ className, ...props }: Readonly<Omit<TabsPrimitive.Panel.Props, "className"> & ClassNameProp>) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn(
+        "min-w-0 flex-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..9d840f39
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+// Figma 02 Text Field의 Textarea Field 5002:4364. 상태 색과 그 출력 순서는 Input과 같다
+// 스크롤 막대 gray/400과 Read Only 글자 gray/800은 Figma가 원시 색에 바로 바인딩해 시맨틱 토큰이 없어 원시 변수를 쓴다
+function Textarea({ className, ...props }: Readonly<ComponentProps<"textarea">>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        // 시작 높이는 rows와 무관하게 96(rows로 정하면 rows=3이 98px이 된다), 넘치면 스크롤한다. 오른쪽 28 = Text 래퍼 14 + 스크롤 레인 14(막대 4×24는 얇은 기본 스크롤바로 대신한다)
+        // 손으로 세로만 늘릴 수 있고 96보다 줄지 않으며 8줄(줄 24 × 8 + 위아래 여백 24 + 테두리 2 = 218)까지 늘어난다.
+        // Figma는 자동 확장·최대 높이를 정하지 않았다(Textarea Field 5002:4364 설명). 터치 기기는 손잡이가 없어 96 그대로다
+        "block h-24 max-h-[218px] min-h-24 w-full min-w-0 resize-y overflow-y-auto rounded-md border border-border bg-fill-subtle py-3 pr-7 pl-3.5 text-body-m-regular text-text transition-colors [scrollbar-color:var(--gray-400)_transparent] [scrollbar-width:thin] placeholder:text-text-subtle focus:border-primary focus:outline-hidden read-only:bg-fill read-only:text-[var(--gray-800)] disabled:cursor-not-allowed disabled:bg-fill disabled:text-text-disabled disabled:placeholder:text-text-disabled aria-invalid:border-status-negative",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/src/components/user/UserAvatar.tsx b/src/components/user/UserAvatar.tsx
index 440e1a84..c99b3121 100644
--- a/src/components/user/UserAvatar.tsx
+++ b/src/components/user/UserAvatar.tsx
@@ -1,46 +1,23 @@
-"use client";
+import type { ComponentProps } from "react";
 
-import Image from "next/image";
-import { useState } from "react";
+import { UserIcon } from "@/assets/icons";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
-import { cn } from "@/lib/utils";
-
-type Props = {
+type Props = Pick<ComponentProps<typeof Avatar>, "size" | "shape" | "tone" | "ring" | "className" | "style"> & {
   user: { nickname: string; profileImageUrl: string | null };
-  size?: number;
-  className?: string;
-  /** 이니셜 대체 표시 글자 스타일 */
-  initialClassName?: string;
 };
 
-/** 프로필 이미지가 없거나 로드에 실패하면 닉네임 첫 글자로 대체 */
-export function UserAvatar({ user, size = 32, className, initialClassName = "font-semibold text-white" }: Readonly<Props>) {
-  const [failed, setFailed] = useState(false);
-  const initial = user.nickname.charAt(0);
-  const showImage = Boolean(user.profileImageUrl) && !failed;
+/**
+ * 프로필 사진이 없거나 로드에 실패하면 닉네임 첫 글자로, tone="icon"(채팅·가계부 사진 자리)이면 사람 아이콘으로 대체.
+ * 쓰는 곳마다 이름이 옆에 보이거나 버튼 aria-label이 있어 장식으로 숨긴다
+ */
+export function UserAvatar({ user, tone, ...avatarProps }: Readonly<Props>) {
+  const src = user.profileImageUrl?.trim();
 
   return (
-    <span
-      className={cn("flex shrink-0 items-center justify-center overflow-hidden rounded-full", className)}
-      style={{ width: size, height: size }}
-    >
-      {showImage ? (
-        <Image
-          src={user.profileImageUrl as string}
-          alt={user.nickname}
-          width={size}
-          height={size}
-          className="h-full w-full object-cover"
-          onError={() => setFailed(true)}
-        />
-      ) : (
-        <span
-          className={initialClassName}
-          style={{ fontSize: Math.round(size * 0.44) }}
-        >
-          {initial}
-        </span>
-      )}
-    </span>
+    <Avatar aria-hidden tone={tone} {...avatarProps}>
+      {src ? <AvatarImage src={src} alt="" /> : null}
+      <AvatarFallback>{tone === "icon" ? <UserIcon /> : Array.from(user.nickname.trim())[0]}</AvatarFallback>
+    </Avatar>
   );
 }
diff --git a/src/contexts/stomp/StompProvider.tsx b/src/contexts/stomp/StompProvider.tsx
index b4bcc050..81d8cdae 100644
--- a/src/contexts/stomp/StompProvider.tsx
+++ b/src/contexts/stomp/StompProvider.tsx
@@ -17,6 +17,7 @@ import {
   evictRoomFromClientCaches,
   refreshRoomsList,
   showForcedExitToast,
+  showRoomAccessLostToast,
   showRoomLeftToast,
 } from "@/lib/stomp/forced-room-exit-dispatch";
 import {
@@ -34,11 +35,11 @@ import {
 import type { ServerChatMessage } from "@/types/chat";
 
 import { StompConnectionBanner } from "@/components/stomp/StompConnectionBanner";
-import { handleStompReconnect } from "@/lib/stomp/stomp-session-recovery";
 import { useStompConnectionStore } from "@/stores/stomp-connection-store";
 
 import {
   useStompClientLifecycleEffect,
+  useStompOnlineRetryEffect,
   useStompRoomTopicsResyncEffect,
   type StompConnectionState,
 } from "./use-stomp-provider-effects";
@@ -91,6 +92,7 @@ export function StompProvider({ children }: { children: ReactNode }) {
   const lastSubscribedRoomIdRef = useRef<string | null>(null);
   const forcedExitConsumedRef = useRef(false);
   const suppressCloseRecoveryRef = useRef(false);
+  const retryConnectionRef = useRef<(() => void) | null>(null);
   const [connectionState, setConnectionState] = useState<StompConnectionState>({
     client: null,
     connected: false,
@@ -102,19 +104,8 @@ export function StompProvider({ children }: { children: ReactNode }) {
   }, []);
 
   const retryStompConnection = useCallback(() => {
-    const client = clientRef.current;
-    if (!client) return;
-
-    useStompConnectionStore.getState().resumeAutoRecovery();
-    setConnectionState((prev) => ({ ...prev, connected: false }));
-    invalidateRoomTopics();
-    void handleStompReconnect({
-      client,
-      queryClient: queryClientRef.current,
-      isSuppressed: () => suppressCloseRecoveryRef.current,
-      isActive: () => clientRef.current === client,
-    });
-  }, [invalidateRoomTopics]);
+    retryConnectionRef.current?.();
+  }, []);
 
   const detachRoomTopicsOnly = useCallback(() => {
     roomTopicsUnsubRef.current?.();
@@ -184,6 +175,30 @@ export function StompProvider({ children }: { children: ReactNode }) {
     [getResolvedRoomId, handleForcedRoomExit],
   );
 
+  /** 끊긴 동안 접근을 잃은 방에 다시 구독하다 거부됐을 때 — 놓친 개인 큐 알림 대신 HTTP 확인 결과로 내보낸다 */
+  const notifyRoomAccessLost = useCallback(
+    (roomId: string) => {
+      const rid = roomId.trim();
+      if (!rid) return;
+
+      evictRoomFromClientCaches(queryClientRef.current, rid);
+      refreshRoomsList(queryClientRef.current);
+      showRoomAccessLostToast(rid);
+
+      if ((getResolvedRoomId()?.trim() ?? "") === rid) {
+        if (forcedExitConsumedRef.current) return;
+        forcedExitConsumedRef.current = true;
+        handleForcedRoomExit();
+        return;
+      }
+
+      if (useSessionStore.getState().currentRoomId?.trim() === rid) {
+        useSessionStore.getState().clearCurrentRoomId();
+      }
+    },
+    [getResolvedRoomId, handleForcedRoomExit],
+  );
+
   const roomChatMessageHandlerRef = useRef<
     ((msg: ServerChatMessage) => void) | null
   >(null);
@@ -237,6 +252,7 @@ export function StompProvider({ children }: { children: ReactNode }) {
     stompEligible,
     suppressCloseRecoveryRef,
     notifyForcedRoomExit,
+    notifyRoomAccessLost,
     subscribeToRoomTopics,
     invalidateRoomTopics,
     teardownConnectedClient,
@@ -247,8 +263,11 @@ export function StompProvider({ children }: { children: ReactNode }) {
     forcedExitConsumedRef,
     queryClientRef,
     setConnectionState,
+    retryConnectionRef,
   });
 
+  useStompOnlineRetryEffect(retryConnectionRef);
+
   const roomTopicsDeferred = pathDefersRoomStompRoomTopics(pathname);
 
   useStompRoomTopicsResyncEffect({
diff --git a/src/contexts/stomp/use-stomp-provider-effects.test.tsx b/src/contexts/stomp/use-stomp-provider-effects.test.tsx
index 9a3fde0e..84fe7b70 100644
--- a/src/contexts/stomp/use-stomp-provider-effects.test.tsx
+++ b/src/contexts/stomp/use-stomp-provider-effects.test.tsx
@@ -2,10 +2,15 @@
 import { act } from "react";
 import { QueryClient } from "@tanstack/react-query";
 import type { Client } from "@stomp/stompjs";
-import { expect, it, vi } from "vitest";
+import { afterEach, expect, it, vi } from "vitest";
 import { hookHarness } from "@/test/hook-harness";
+import {
+  STOMP_CONNECTION_ISSUE_MESSAGE,
+  useStompConnectionStore,
+} from "@/stores/stomp-connection-store";
 import {
   useStompClientLifecycleEffect,
+  useStompOnlineRetryEffect,
   useStompRoomTopicsResyncEffect,
 } from "./use-stomp-provider-effects";
 const mocks = vi.hoisted(() => ({
@@ -13,10 +18,17 @@ const mocks = vi.hoisted(() => ({
   ping: vi.fn(),
   queue: vi.fn(),
   stop: vi.fn(),
+  refresh: vi.fn(),
+  validate: vi.fn(),
 }));
 vi.mock("@/lib/stomp/client", () => ({
   createStompClient: mocks.create,
   getStompBrokerURL: () => "http://fixture.invalid/ws",
+  STOMP_MAX_RECONNECT_ATTEMPTS: 7,
+  STOMP_MAX_RECONNECT_DELAY_MS: 30_000,
+}));
+vi.mock("@/lib/rooms", () => ({
+  validateRoomAccess: mocks.validate,
 }));
 vi.mock("@/lib/stomp/sessionPresencePing", () => ({
   startSessionPresencePing: mocks.ping,
@@ -25,30 +37,57 @@ vi.mock("@/lib/stomp/subscribe-user-rooms-queue", () => ({
   subscribeUserRoomsQueue: mocks.queue,
 }));
 vi.mock("@/lib/stomp/stomp-session-recovery", () => ({
-  handleStompReconnect: vi.fn(),
+  refreshSessionBeforeReconnect: mocks.refresh,
   STOMP_ACCESS_TOKEN_EXPIRED_CLOSE_CODE: 4001,
 }));
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
-it("stable dependencies keep one client and pathname/room resync uses current committed refs", async () => {
-  const client = {
+
+const CONNECTED_FRAME = {
+  command: "CONNECTED",
+  headers: {},
+  body: "",
+  isBinaryBody: false,
+  binaryBody: new Uint8Array(),
+};
+const ABNORMAL_CLOSE = { code: 1006 };
+const PROTOCOL_ERROR_CLOSE = { code: 1002 };
+const RECONNECT_CAP_MS = 30_000;
+const MAX_RECONNECT_ATTEMPTS = 7;
+
+type FakeClient = {
+  activate: ReturnType<typeof vi.fn>;
+  deactivate: ReturnType<typeof vi.fn>;
+  connected: boolean;
+  beforeConnect: () => Promise<void>;
+  onConnect: (frame: typeof CONNECTED_FRAME) => void;
+  onStompError: () => void;
+  onWebSocketClose: (event: { code: number }) => void;
+};
+
+function fakeClient(connected = false): FakeClient {
+  return {
     activate: vi.fn(),
-    connected: true,
+    deactivate: vi.fn(() => Promise.resolve()),
+    connected,
+    beforeConnect: () => Promise.resolve(),
     onConnect: () => {},
+    onStompError: () => {},
     onWebSocketClose: () => {},
-  } as unknown as Client;
+  };
+}
+
+function lifecycleOpts(client: FakeClient) {
   mocks.create.mockReturnValue(client);
   mocks.ping.mockReturnValue(mocks.stop);
   mocks.queue.mockReturnValue(vi.fn());
-  const subscribe = vi.fn();
-  const teardown = vi.fn();
-  const detach = vi.fn();
-  const opts = {
+  return {
     stompEligible: true,
     suppressCloseRecoveryRef: { current: false },
     notifyForcedRoomExit: vi.fn(),
-    subscribeToRoomTopics: subscribe,
+    notifyRoomAccessLost: vi.fn(),
+    subscribeToRoomTopics: vi.fn(),
     invalidateRoomTopics: vi.fn(),
-    teardownConnectedClient: teardown,
+    teardownConnectedClient: vi.fn(),
     clientRef: { current: null as Client | null },
     userRoomsQueueUnsubRef: { current: null as (() => void) | null },
     getResolvedRoomId: () => "a",
@@ -56,7 +95,21 @@ it("stable dependencies keep one client and pathname/room resync uses current co
     forcedExitConsumedRef: { current: false },
     queryClientRef: { current: new QueryClient() },
     setConnectionState: vi.fn(),
+    retryConnectionRef: { current: null as (() => void) | null },
   };
+}
+
+afterEach(() => {
+  vi.clearAllMocks();
+  useStompConnectionStore.setState({ connectionIssue: null });
+});
+
+it("stable dependencies keep one client and pathname/room resync uses current committed refs", async () => {
+  const client = fakeClient(true);
+  const opts = lifecycleOpts(client);
+  const subscribe = opts.subscribeToRoomTopics;
+  const teardown = opts.teardownConnectedClient;
+  const detach = vi.fn();
   const hook = hookHarness((p: { room: string; deferred: boolean }) => {
     useStompClientLifecycleEffect(opts);
     useStompRoomTopicsResyncEffect({
@@ -70,15 +123,7 @@ it("stable dependencies keep one client and pathname/room resync uses current co
     });
   });
   await hook.render({ room: "a", deferred: false });
-  await act(async () =>
-    client.onConnect({
-      command: "CONNECTED",
-      headers: {},
-      body: "",
-      isBinaryBody: false,
-      binaryBody: new Uint8Array(),
-    }),
-  );
+  await act(async () => client.onConnect(CONNECTED_FRAME));
   await hook.render({ room: "b", deferred: false });
   expect(subscribe.mock.lastCall?.[1]).toBe("b");
   await hook.render({ room: "b", deferred: true });
@@ -90,3 +135,226 @@ it("stable dependencies keep one client and pathname/room resync uses current co
   expect(mocks.stop).toHaveBeenCalled();
   opts.queryClientRef.current.clear();
 });
+
+it("leaves reconnecting to stompjs when the socket closes", async () => {
+  const client = fakeClient();
+  const opts = lifecycleOpts(client);
+  const hook = hookHarness(() => useStompClientLifecycleEffect(opts));
+  await hook.render(undefined);
+
+  client.onWebSocketClose(ABNORMAL_CLOSE);
+
+  expect(client.activate).toHaveBeenCalledTimes(1);
+  expect(client.deactivate).not.toHaveBeenCalled();
+  expect(opts.invalidateRoomTopics).toHaveBeenCalledTimes(1);
+  await hook.unmount();
+});
+
+it("refreshes the session only before attempts that follow a dropped connection", async () => {
+  const client = fakeClient();
+  const opts = lifecycleOpts(client);
+  const hook = hookHarness(() => useStompClientLifecycleEffect(opts));
+  await hook.render(undefined);
+
+  await client.beforeConnect();
+  expect(mocks.refresh).not.toHaveBeenCalled();
+
+  client.onWebSocketClose(ABNORMAL_CLOSE);
+  await client.beforeConnect();
+  expect(mocks.refresh).toHaveBeenCalledTimes(1);
+  expect(mocks.refresh.mock.lastCall?.[0].isActive()).toBe(true);
+
+  await hook.unmount();
+  expect(mocks.refresh.mock.lastCall?.[0].isActive()).toBe(false);
+});
+
+/** 끊긴 뒤 재연결 시도와 실패를 count번 겪게 한다 */
+async function failReconnects(client: FakeClient, count: number) {
+  for (let i = 0; i < count; i += 1) {
+    await client.beforeConnect();
+    client.onWebSocketClose(ABNORMAL_CLOSE);
+  }
+}
+
+it("stops reconnecting and shows the banner once the last allowed attempt fails", async () => {
+  const client = fakeClient();
+  const opts = lifecycleOpts(client);
+  const hook = hookHarness(() => useStompClientLifecycleEffect(opts));
+  await hook.render(undefined);
+
+  client.onWebSocketClose(ABNORMAL_CLOSE);
+  await failReconnects(client, MAX_RECONNECT_ATTEMPTS - 1);
+  expect(client.deactivate).not.toHaveBeenCalled();
+  expect(useStompConnectionStore.getState().connectionIssue).toBeNull();
+
+  await failReconnects(client, 1);
+  expect(client.deactivate).toHaveBeenCalledTimes(1);
+  expect(useStompConnectionStore.getState().connectionIssue).toBe(
+    STOMP_CONNECTION_ISSUE_MESSAGE,
+  );
+
+  client.onConnect(CONNECTED_FRAME);
+  expect(useStompConnectionStore.getState().connectionIssue).toBeNull();
+  await hook.unmount();
+});
+
+it("counts attempts again from zero after the connection recovers", async () => {
+  const client = fakeClient();
+  const opts = lifecycleOpts(client);
+  const hook = hookHarness(() => useStompClientLifecycleEffect(opts));
+  await hook.render(undefined);
+
+  client.onWebSocketClose(ABNORMAL_CLOSE);
+  await failReconnects(client, MAX_RECONNECT_ATTEMPTS - 1);
+  await client.beforeConnect();
+  client.onConnect(CONNECTED_FRAME);
+
+  client.onWebSocketClose(ABNORMAL_CLOSE);
+  await failReconnects(client, MAX_RECONNECT_ATTEMPTS - 1);
+
+  expect(client.deactivate).not.toHaveBeenCalled();
+  expect(useStompConnectionStore.getState().connectionIssue).toBeNull();
+  await hook.unmount();
+});
+
+it("gives the retry button a fresh round of attempts after reconnecting stopped", async () => {
+  const client = fakeClient();
+  const opts = lifecycleOpts(client);
+  const hook = hookHarness(() => useStompClientLifecycleEffect(opts));
+  await hook.render(undefined);
+
+  client.onWebSocketClose(ABNORMAL_CLOSE);
+  await failReconnects(client, MAX_RECONNECT_ATTEMPTS);
+  expect(client.deactivate).toHaveBeenCalledTimes(1);
+
+  opts.retryConnectionRef.current?.();
+  await hook.flush();
+  expect(client.deactivate).toHaveBeenCalledTimes(2);
+  expect(client.activate).toHaveBeenCalledTimes(2);
+
+  await failReconnects(client, MAX_RECONNECT_ATTEMPTS - 1);
+  expect(client.deactivate).toHaveBeenCalledTimes(2);
+  await hook.unmount();
+});
+
+it("retries immediately unless a connection attempt is in flight", async () => {
+  const client = fakeClient();
+  const opts = lifecycleOpts(client);
+  const hook = hookHarness(() => useStompClientLifecycleEffect(opts));
+  await hook.render(undefined);
+
+  await client.beforeConnect();
+  opts.retryConnectionRef.current?.();
+  expect(client.deactivate).not.toHaveBeenCalled();
+
+  client.onWebSocketClose(ABNORMAL_CLOSE);
+  opts.retryConnectionRef.current?.();
+  await hook.flush();
+  expect(client.deactivate).toHaveBeenCalledTimes(1);
+  expect(client.activate).toHaveBeenCalledTimes(2);
+
+  await hook.unmount();
+  expect(opts.retryConnectionRef.current).toBeNull();
+});
+
+it("reconnects right away when the browser reports the network is back", async () => {
+  const retry = vi.fn();
+  const retryConnectionRef = { current: retry as (() => void) | null };
+  const hook = hookHarness(() => useStompOnlineRetryEffect(retryConnectionRef));
+  await hook.render(undefined);
+
+  window.dispatchEvent(new Event("online"));
+  expect(retry).toHaveBeenCalledTimes(1);
+
+  await hook.unmount();
+  window.dispatchEvent(new Event("online"));
+  expect(retry).toHaveBeenCalledTimes(1);
+});
+
+it("restarts reconnecting on online even after it stopped and the banner is shown", async () => {
+  const retry = vi.fn();
+  const retryConnectionRef = { current: retry as (() => void) | null };
+  const hook = hookHarness(() => useStompOnlineRetryEffect(retryConnectionRef));
+  await hook.render(undefined);
+  useStompConnectionStore.setState({ connectionIssue: STOMP_CONNECTION_ISSUE_MESSAGE });
+
+  window.dispatchEvent(new Event("online"));
+
+  expect(retry).toHaveBeenCalledTimes(1);
+  await hook.unmount();
+});
+
+it("exits the room when a subscription error turns out to be lost access", async () => {
+  mocks.validate.mockResolvedValue("forbidden");
+  const client = fakeClient();
+  const opts = lifecycleOpts(client);
+  const hook = hookHarness(() => useStompClientLifecycleEffect(opts));
+  await hook.render(undefined);
+
+  client.onStompError();
+  client.onStompError();
+  await hook.flush();
+
+  expect(mocks.validate).toHaveBeenCalledTimes(1);
+  expect(mocks.validate).toHaveBeenCalledWith("a");
+  expect(opts.notifyRoomAccessLost).toHaveBeenCalledWith("a");
+  await hook.unmount();
+});
+
+it("keeps the room when access is still valid after a subscription error", async () => {
+  mocks.validate.mockResolvedValue("ok");
+  const client = fakeClient();
+  const opts = lifecycleOpts(client);
+  const hook = hookHarness(() => useStompClientLifecycleEffect(opts));
+  await hook.render(undefined);
+
+  client.onStompError();
+  await hook.flush();
+
+  expect(opts.notifyRoomAccessLost).not.toHaveBeenCalled();
+  await hook.unmount();
+});
+
+it("waits the capped delay before reconnecting after the server closes on a subscription error", async () => {
+  vi.useFakeTimers();
+  try {
+    mocks.validate.mockResolvedValue("ok");
+    const client = fakeClient();
+    const opts = lifecycleOpts(client);
+    const hook = hookHarness(() => useStompClientLifecycleEffect(opts));
+    await hook.render(undefined);
+
+    client.onStompError();
+    client.onWebSocketClose(PROTOCOL_ERROR_CLOSE);
+    // 라이브러리 재연결을 멈춰야 CONNECTED 때 초기화되는 1초 간격으로 반복하지 않는다
+    expect(client.deactivate).toHaveBeenCalledTimes(1);
+
+    await vi.advanceTimersByTimeAsync(RECONNECT_CAP_MS - 1);
+    expect(client.activate).toHaveBeenCalledTimes(1);
+    await vi.advanceTimersByTimeAsync(1);
+    expect(client.activate).toHaveBeenCalledTimes(2);
+    await hook.unmount();
+  } finally {
+    vi.useRealTimers();
+  }
+});
+
+it("leaves an ordinary close to the stompjs reconnect", async () => {
+  vi.useFakeTimers();
+  try {
+    const client = fakeClient();
+    const opts = lifecycleOpts(client);
+    const hook = hookHarness(() => useStompClientLifecycleEffect(opts));
+    await hook.render(undefined);
+
+    client.onWebSocketClose(ABNORMAL_CLOSE);
+    await vi.advanceTimersByTimeAsync(RECONNECT_CAP_MS);
+
+    expect(client.deactivate).not.toHaveBeenCalled();
+    expect(client.activate).toHaveBeenCalledTimes(1);
+    expect(mocks.validate).not.toHaveBeenCalled();
+    await hook.unmount();
+  } finally {
+    vi.useRealTimers();
+  }
+});
diff --git a/src/contexts/stomp/use-stomp-provider-effects.tsx b/src/contexts/stomp/use-stomp-provider-effects.tsx
index 7626adbc..79c675a3 100644
--- a/src/contexts/stomp/use-stomp-provider-effects.tsx
+++ b/src/contexts/stomp/use-stomp-provider-effects.tsx
@@ -6,16 +6,25 @@ import { useEffect } from "react";
 import type { QueryClient } from "@tanstack/react-query";
 import type { Client } from "@stomp/stompjs";
 
-import { createStompClient, getStompBrokerURL } from "@/lib/stomp/client";
+import { validateRoomAccess } from "@/lib/rooms";
+import {
+  createStompClient,
+  getStompBrokerURL,
+  STOMP_MAX_RECONNECT_ATTEMPTS,
+  STOMP_MAX_RECONNECT_DELAY_MS,
+} from "@/lib/stomp/client";
 import { pathDefersRoomStompRoomTopics } from "@/lib/stomp/stompPathPolicy";
 import {
-  handleStompReconnect,
+  refreshSessionBeforeReconnect,
   STOMP_ACCESS_TOKEN_EXPIRED_CLOSE_CODE,
 } from "@/lib/stomp/stomp-session-recovery";
 import { startSessionPresencePing } from "@/lib/stomp/sessionPresencePing";
 import { subscribeUserRoomsQueue } from "@/lib/stomp/subscribe-user-rooms-queue";
 import type { ForcedRoomExitReason } from "@/lib/stomp/user-room-queue";
-import { useStompConnectionStore } from "@/stores/stomp-connection-store";
+import {
+  STOMP_CONNECTION_ISSUE_MESSAGE,
+  useStompConnectionStore,
+} from "@/stores/stomp-connection-store";
 
 export type StompConnectionState = {
   client: Client | null;
@@ -30,6 +39,7 @@ type LifecycleOpts = {
     eventRoomId: string,
     message?: string,
   ) => void;
+  notifyRoomAccessLost: (roomId: string) => void;
   subscribeToRoomTopics: (client: Client, roomId: string) => void;
   invalidateRoomTopics: () => void;
   teardownConnectedClient: () => void;
@@ -40,15 +50,19 @@ type LifecycleOpts = {
   forcedExitConsumedRef: MutableRefObject<boolean>;
   queryClientRef: MutableRefObject<QueryClient>;
   setConnectionState: Dispatch<SetStateAction<StompConnectionState>>;
+  /** 배너의 '다시 시도'와 online 이벤트가 부르는 즉시 재연결. 시도 횟수를 처음부터 다시 센다 */
+  retryConnectionRef: MutableRefObject<(() => void) | null>;
 };
 
 /**
  * 로그인·경로 조건으로 STOMP 클라이언트 1개를 유지하고, 재연결 시 유저 방 큐 구독을 세팅합니다.
+ * 재연결 간격은 stompjs(`createStompClient`)가 맡고, 이 effect는 재연결 직전 세션 갱신·시도 횟수 제한·연결 상태 표시를 합니다.
  */
 export function useStompClientLifecycleEffect({
   stompEligible,
   suppressCloseRecoveryRef,
   notifyForcedRoomExit,
+  notifyRoomAccessLost,
   subscribeToRoomTopics,
   invalidateRoomTopics,
   teardownConnectedClient,
@@ -59,6 +73,7 @@ export function useStompClientLifecycleEffect({
   forcedExitConsumedRef,
   queryClientRef,
   setConnectionState,
+  retryConnectionRef,
 }: LifecycleOpts): void {
   useEffect(() => {
     if (!stompEligible) {
@@ -72,36 +87,71 @@ export function useStompClientLifecycleEffect({
 
     const stopPingRef: { current: (() => void) | null } = { current: null };
     let effectActive = true;
+    // 첫 연결은 proxy가 세션을 확인했으므로, 한 번이라도 끊긴 뒤의 시도에서만 세션을 갱신한다
+    let connectionDropped = false;
+    // 연결 시도(세션 확인~CONNECTED·close) 중에 다시 시도하면 연결이 둘로 갈라진다
+    let attemptInFlight = false;
+    // 끊긴 뒤 연결에 성공하기 전까지의 재연결 시도 수
+    let reconnectAttempts = 0;
+    // 서버는 구독 거부 등으로 ERROR를 보낸 뒤 연결을 닫는다(Spring 기본 동작)
+    let closingAfterStompError = false;
+    let stompErrorReconnectTimer: ReturnType<typeof setTimeout> | null = null;
+    let accessCheckRoomId: string | null = null;
 
     const stopAppPing = () => {
       stopPingRef.current?.();
       stopPingRef.current = null;
     };
 
+    const clearStompErrorReconnectTimer = () => {
+      if (stompErrorReconnectTimer === null) return;
+      clearTimeout(stompErrorReconnectTimer);
+      stompErrorReconnectTimer = null;
+    };
+
     const client = createStompClient(getStompBrokerURL());
     clientRef.current = client;
     setConnectionState({ client, connected: false });
 
-    const isActive = () => effectActive;
-    const isSuppressed = () => suppressCloseRecoveryRef.current;
+    const isActive = () => effectActive && !suppressCloseRecoveryRef.current;
 
-    const requestStompRecovery = () => {
-      if (!effectActive || suppressCloseRecoveryRef.current) return;
-
-      stopAppPing();
-      setConnectionState((prev) => ({ ...prev, connected: false }));
-      invalidateRoomTopics();
+    // ERROR 프레임은 원인과 상관없이 같은 문구라 강퇴인지 서버 장애인지 알 수 없다. 그래서 방 접근을 HTTP로 확인한다
+    const confirmRoomAccess = (roomId: string) => {
+      if (accessCheckRoomId === roomId) return;
+      accessCheckRoomId = roomId;
+      void validateRoomAccess(roomId).then((verdict) => {
+        accessCheckRoomId = null;
+        if (!isActive() || verdict !== "forbidden") return;
+        notifyRoomAccessLost(roomId);
+      });
+    };
 
-      void handleStompReconnect({
+    client.beforeConnect = async () => {
+      attemptInFlight = true;
+      if (!connectionDropped) return;
+      reconnectAttempts += 1;
+      await refreshSessionBeforeReconnect({
         client,
         queryClient: queryClientRef.current,
-        isSuppressed,
         isActive,
       });
     };
 
+    retryConnectionRef.current = () => {
+      if (!isActive() || attemptInFlight || client.connected) return;
+      clearStompErrorReconnectTimer();
+      reconnectAttempts = 0;
+      // deactivate→activate는 예약된 재연결을 지우고 간격을 처음 값으로 되돌린 뒤 바로 시도한다
+      void client.deactivate().then(() => {
+        if (isActive()) client.activate();
+      });
+    };
+
     client.onConnect = () => {
       if (!effectActive) return;
+      attemptInFlight = false;
+      closingAfterStompError = false;
+      reconnectAttempts = 0;
       useStompConnectionStore.getState().clearConnectionIssue();
       setConnectionState({ client, connected: true });
       forcedExitConsumedRef.current = false;
@@ -121,31 +171,58 @@ export function useStompClientLifecycleEffect({
       }
     };
 
-    client.onDisconnect = () => {
-      if (!effectActive) return;
-      requestStompRecovery();
-    };
-
     client.onStompError = () => {
       if (!effectActive) return;
+      closingAfterStompError = true;
       setConnectionState((prev) => ({ ...prev, connected: false }));
+      // 끊긴 동안 강퇴·방 삭제 알림을 놓친 방에 다시 구독하면 서버가 ERROR로 거부한다
+      const rid = getResolvedRoomId()?.trim();
+      if (rid) confirmRoomAccess(rid);
     };
 
     client.onWebSocketClose = (event) => {
-      if (!effectActive) return;
-      if (suppressCloseRecoveryRef.current) return;
+      attemptInFlight = false;
+      if (!isActive()) return;
 
       if (event.code === STOMP_ACCESS_TOKEN_EXPIRED_CLOSE_CODE) {
         console.debug("[stomp] WebSocket closed: ACCESS_TOKEN_EXPIRED (4001)");
       }
 
-      requestStompRecovery();
+      connectionDropped = true;
+      stopAppPing();
+      setConnectionState((prev) => ({ ...prev, connected: false }));
+      invalidateRoomTopics();
+
+      // 정해진 횟수를 모두 실패하면 재연결을 멈추고 배너로 알린다. 다시 시작은 '다시 시도'·online이 맡는다
+      if (reconnectAttempts >= STOMP_MAX_RECONNECT_ATTEMPTS) {
+        closingAfterStompError = false;
+        clearStompErrorReconnectTimer();
+        void client.deactivate();
+        useStompConnectionStore
+          .getState()
+          .setConnectionIssue(STOMP_CONNECTION_ISSUE_MESSAGE);
+        return;
+      }
+
+      // stompjs는 CONNECTED를 받을 때마다 간격을 처음 값으로 되돌려, 구독 오류로 닫히는 연결은 1초마다 다시 붙는다.
+      // 이 경우만 라이브러리 재연결을 멈추고 상한 간격 뒤에 다시 연결한다(문서 밖 보강)
+      if (closingAfterStompError) {
+        closingAfterStompError = false;
+        void client.deactivate();
+        clearStompErrorReconnectTimer();
+        stompErrorReconnectTimer = setTimeout(() => {
+          stompErrorReconnectTimer = null;
+          if (isActive()) client.activate();
+        }, STOMP_MAX_RECONNECT_DELAY_MS);
+      }
     };
 
     client.activate();
 
     return () => {
       effectActive = false;
+      retryConnectionRef.current = null;
+      clearStompErrorReconnectTimer();
       stopAppPing();
       teardownConnectedClient();
     };
@@ -154,11 +231,13 @@ export function useStompClientLifecycleEffect({
     forcedExitConsumedRef,
     pathnameRef,
     queryClientRef,
+    retryConnectionRef,
     setConnectionState,
     userRoomsQueueUnsubRef,
     getResolvedRoomId,
     invalidateRoomTopics,
     notifyForcedRoomExit,
+    notifyRoomAccessLost,
     stompEligible,
     subscribeToRoomTopics,
     suppressCloseRecoveryRef,
@@ -166,6 +245,20 @@ export function useStompClientLifecycleEffect({
   ]);
 }
 
+/**
+ * 브라우저가 네트워크 복귀를 알리면 다음 재연결 예약(최대 30초)을 기다리지 않고 바로 다시 연결합니다.
+ * 횟수를 다 써서 멈춘 뒤에도 다시 시작하며, 이때 시도 횟수를 처음부터 다시 셉니다.
+ */
+export function useStompOnlineRetryEffect(
+  retryConnectionRef: MutableRefObject<(() => void) | null>,
+): void {
+  useEffect(() => {
+    const retry = () => retryConnectionRef.current?.();
+    window.addEventListener("online", retry);
+    return () => window.removeEventListener("online", retry);
+  }, [retryConnectionRef]);
+}
+
 type RoomTopicsOpts = {
   /** `/home` 등 방 토픽을 미루는 경로 여부 — plan↔bookmark 탭 전환과 분리 */
   roomTopicsDeferred: boolean;
diff --git a/src/hooks/useChatMessageRead.test.tsx b/src/hooks/useChatMessageRead.test.tsx
index e263a3c8..581a1a63 100644
--- a/src/hooks/useChatMessageRead.test.tsx
+++ b/src/hooks/useChatMessageRead.test.tsx
@@ -57,3 +57,26 @@ it("stable incoming handlers see committed panel/connection state and read dedup
   await hook.unmount();
   client.clear();
 });
+it("keeps markMessagesRead stable across reconnects so the history load is not restarted", async () => {
+  const client = new QueryClient();
+  const rawMessagesRef = { current: [] as ServerChatMessage[] };
+  const hook = hookHarness(
+    (roomId: string) =>
+      useChatMessageRead({ roomId, panelOpen: true, rawMessagesRef }),
+    (child) => (
+      <QueryClientProvider client={client}>{child}</QueryClientProvider>
+    ),
+  );
+  state.connected = true;
+  await hook.render("a");
+  const markMessagesRead = hook.current.markMessagesRead;
+
+  state.connected = false;
+  await hook.render("a");
+  state.connected = true;
+  await hook.render("a");
+
+  expect(hook.current.markMessagesRead).toBe(markMessagesRead);
+  await hook.unmount();
+  client.clear();
+});
diff --git a/src/hooks/useChatMessageRead.ts b/src/hooks/useChatMessageRead.ts
index 8a5cc78e..295adab3 100644
--- a/src/hooks/useChatMessageRead.ts
+++ b/src/hooks/useChatMessageRead.ts
@@ -29,15 +29,22 @@ export function useChatMessageRead({
   const lastPublishedReadIdRef = useRef<string | null>(null);
   const panelOpenRef = useRef(panelOpen);
   const markMessagesReadRef = useRef<(messageId?: string) => void>(() => {});
+  // 연결 상태는 보낼 때 읽는다 — 함수가 연결마다 바뀌면 이 함수에 기대는 기록 조회가 다시 시작된다
+  const stompRef = useRef({ client, connected });
 
   useLayoutEffect(() => {
     panelOpenRef.current = panelOpen;
   }, [panelOpen]);
 
+  useLayoutEffect(() => {
+    stompRef.current = { client, connected };
+  }, [client, connected]);
+
   const markMessagesRead = useCallback(
     (messageId?: string) => {
       const rid = roomId?.trim();
-      if (!rid || !client || !connected) return;
+      const stomp = stompRef.current;
+      if (!rid || !stomp.client || !stomp.connected) return;
 
       const id =
         messageId?.trim() ||
@@ -45,10 +52,10 @@ export function useChatMessageRead({
       if (!id || id === lastPublishedReadIdRef.current) return;
 
       lastPublishedReadIdRef.current = id;
-      publishRoomMessageRead(client, rid, id);
+      publishRoomMessageRead(stomp.client, rid, id);
       optimisticallyClearRoomUnreadCount(queryClient, rid);
     },
-    [client, connected, roomId, queryClient, rawMessagesRef],
+    [roomId, queryClient, rawMessagesRef],
   );
 
   useLayoutEffect(() => {
diff --git a/src/hooks/useChatMessages.recovery.test.tsx b/src/hooks/useChatMessages.recovery.test.tsx
new file mode 100644
index 00000000..e695be58
--- /dev/null
+++ b/src/hooks/useChatMessages.recovery.test.tsx
@@ -0,0 +1,317 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { hookHarness } from "@/test/hook-harness";
+import { HttpError } from "@/lib/api/errors";
+import type { InitialRoomHistoryLoadResult } from "@/lib/chat/initialRoomHistory";
+import type { ServerChatMessage } from "@/types/chat";
+import { useChatMessages } from "./useChatMessages";
+
+const mocks = vi.hoisted(() => ({
+  history: vi.fn(),
+  initial: vi.fn(),
+  read: vi.fn(),
+  publish: vi.fn(),
+  stomp: {
+    connected: true,
+    handler: null as ((msg: ServerChatMessage) => void) | null,
+  },
+}));
+vi.mock("@/hooks/useSessionUser", () => ({
+  useSessionUser: () => ({ data: { id: 1 } }),
+}));
+vi.mock("@/hooks/useRooms", () => ({
+  useRoomMembers: () => ({ data: { members: [] } }),
+}));
+vi.mock("@/hooks/useChatActions", () => ({ useChatActions: () => ({}) }));
+vi.mock("@/contexts/StompContext", () => {
+  const client = { publish: mocks.publish };
+  const setRoomChatMessageHandler = (
+    fn: ((msg: ServerChatMessage) => void) | null,
+  ) => {
+    mocks.stomp.handler = fn;
+  };
+  return {
+    useStompContext: () => ({
+      client,
+      connected: mocks.stomp.connected,
+      setRoomChatMessageHandler,
+    }),
+  };
+});
+vi.mock("@/lib/api/rooms", () => ({
+  getRoomMessageReadStatus: mocks.read,
+  getRoomMessages: mocks.history,
+}));
+vi.mock("@/lib/chat/initialRoomHistory", () => ({
+  loadInitialRoomHistory: mocks.initial,
+  hasOlderHistoryPage: (count: number, size: number) => count >= size,
+}));
+vi.mock("@/lib/places/warmChatHistoryPlacePhotos", () => ({
+  warmPlacePhotoQueriesFromChatHistory: vi.fn(),
+}));
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const ROOM = "room";
+
+function message(
+  sequence: number,
+  overrides: Partial<ServerChatMessage> = {},
+): ServerChatMessage {
+  return {
+    roomId: ROOM,
+    id: `m${sequence}`,
+    senderId: 2,
+    messageType: "CHAT",
+    content: `m${sequence}`,
+    createdAt: new Date(Date.UTC(2026, 9, 25, 0, 0, sequence)).toISOString(),
+    sequence,
+    ...overrides,
+  };
+}
+
+function range(from: number, to: number): ServerChatMessage[] {
+  return Array.from({ length: to - from + 1 }, (_, i) => message(from + i));
+}
+
+function snapshot(
+  serverSlice: ServerChatMessage[],
+  overrides: Partial<InitialRoomHistoryLoadResult> = {},
+): InitialRoomHistoryLoadResult {
+  return {
+    serverSlice,
+    hasMoreOlder: false,
+    hasMoreNewer: false,
+    lastReadMessageId: null,
+    warmHistory: [],
+    ...overrides,
+  };
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((r) => {
+    resolve = r;
+  });
+  return { promise, resolve };
+}
+
+const queryClient = new QueryClient();
+let hook: ReturnType<typeof mountHook>;
+
+function mountHook() {
+  return hookHarness(
+    (roomId: string | null) => useChatMessages(roomId, { fetchHistory: true }),
+    (child) => (
+      <QueryClientProvider client={queryClient}>{child}</QueryClientProvider>
+    ),
+  );
+}
+
+const ids = () => hook.current.messages.map((m) => m.id);
+
+const lastPublishedRead = () => {
+  const body = mocks.publish.mock.calls[mocks.publish.mock.calls.length - 1]?.[0]?.body;
+  return body ? JSON.parse(body).lastReadMessageId : null;
+};
+
+async function receive(...msgs: ServerChatMessage[]) {
+  await act(async () => {
+    for (const msg of msgs) mocks.stomp.handler?.(msg);
+  });
+}
+
+async function reconnect() {
+  mocks.stomp.connected = false;
+  await hook.render(ROOM);
+  mocks.stomp.connected = true;
+  await hook.render(ROOM);
+  await hook.flush();
+}
+
+beforeEach(async () => {
+  mocks.stomp.connected = true;
+  mocks.read.mockResolvedValue({ lastReadMessageId: null });
+  hook = mountHook();
+});
+
+afterEach(async () => {
+  await hook.unmount();
+  queryClient.clear();
+  vi.resetAllMocks();
+});
+
+describe("while the first history loads", () => {
+  it("keeps chat messages received before the snapshot arrives", async () => {
+    const load = deferred<InitialRoomHistoryLoadResult>();
+    mocks.initial.mockReturnValueOnce(load.promise);
+    await hook.render(ROOM);
+
+    await receive(message(41));
+    await act(async () => load.resolve(snapshot(range(39, 40))));
+
+    expect(ids()).toEqual(["m39", "m40", "m41"]);
+    expect(mocks.history).not.toHaveBeenCalled();
+  });
+
+  it("keeps an AI request canceled during the load instead of the queued snapshot", async () => {
+    const queued = message(40, {
+      id: "ai",
+      messageType: "AI_REQUEST",
+      metadata: { aiStatus: "QUEUED", cancelable: "true" },
+    });
+    const canceled = {
+      ...queued,
+      metadata: { aiStatus: "CANCELED", cancelable: "false" },
+    };
+    const load = deferred<InitialRoomHistoryLoadResult>();
+    mocks.initial.mockReturnValueOnce(load.promise);
+    await hook.render(ROOM);
+
+    await receive(canceled);
+    await act(async () => load.resolve(snapshot([message(39), queued])));
+
+    const ai = hook.current.messages.find((m) => m.id === "ai");
+    expect(ai?.aiRequest?.aiStatus).toBe("CANCELED");
+  });
+
+  it("finishes the load when the connection drops and returns, then catches up", async () => {
+    const load = deferred<InitialRoomHistoryLoadResult>();
+    mocks.initial.mockReturnValueOnce(load.promise);
+    await hook.render(ROOM);
+
+    await reconnect();
+    mocks.history.mockResolvedValueOnce([message(41)]);
+    await act(async () => load.resolve(snapshot(range(39, 40))));
+    await hook.flush();
+
+    expect(mocks.initial).toHaveBeenCalledTimes(1);
+    expect(mocks.history).toHaveBeenCalledWith(ROOM, {
+      afterSequence: "40",
+      size: 200,
+    });
+    expect(ids()).toEqual(["m39", "m40", "m41"]);
+  });
+
+  it("loads the history again after reconnecting when the load gave up", async () => {
+    mocks.read.mockRejectedValueOnce(new HttpError(400, "rejected"));
+    mocks.initial.mockResolvedValueOnce(snapshot(range(39, 40)));
+    await hook.render(ROOM);
+    expect(ids()).toEqual([]);
+
+    await reconnect();
+
+    expect(ids()).toEqual(["m39", "m40"]);
+  });
+});
+
+describe("after the history is loaded", () => {
+  beforeEach(async () => {
+    mocks.initial.mockResolvedValueOnce(snapshot(range(39, 40)));
+    await hook.render(ROOM);
+  });
+
+  it("catches up a missing sequence once and marks it read after it is shown", async () => {
+    const catchUp = deferred<ServerChatMessage[]>();
+    mocks.history.mockReturnValueOnce(catchUp.promise);
+
+    await receive(message(41), message(43));
+    await receive(message(44));
+    expect(lastPublishedRead()).toBe("m41");
+    await act(async () => catchUp.resolve([message(42), message(43)]));
+
+    expect(ids()).toEqual(["m39", "m40", "m41", "m42", "m43", "m44"]);
+    expect(mocks.history).toHaveBeenCalledTimes(1);
+    expect(mocks.history).toHaveBeenCalledWith(ROOM, {
+      afterSequence: "41",
+      size: 200,
+    });
+    expect(lastPublishedRead()).toBe("m44");
+  });
+
+  it("asks once after reconnecting even when nothing was missed", async () => {
+    mocks.history.mockResolvedValueOnce([]);
+
+    await reconnect();
+
+    expect(mocks.history).toHaveBeenCalledTimes(1);
+    expect(mocks.history).toHaveBeenCalledWith(ROOM, {
+      afterSequence: "40",
+      size: 200,
+    });
+    expect(ids()).toEqual(["m39", "m40"]);
+    expect(hook.current.readDividerPlacement).toBeNull();
+  });
+
+  it("pages through a long disconnection and marks where the missed messages start", async () => {
+    mocks.history
+      .mockResolvedValueOnce(range(41, 240))
+      .mockResolvedValueOnce(range(241, 440))
+      .mockResolvedValueOnce(range(441, 450));
+
+    await reconnect();
+
+    expect(hook.current.messages).toHaveLength(412);
+    expect(
+      mocks.history.mock.calls.map(([, params]) => params.afterSequence),
+    ).toEqual(["40", "240", "440"]);
+    expect(hook.current.readDividerPlacement).toEqual({
+      afterMessageId: "m40",
+      beforeFirst: false,
+    });
+    expect(hook.current.scrollToAnchor?.anchorId).toBe("m40");
+  });
+
+  it("does not append live messages to a middle window", async () => {
+    await hook.render(null);
+    mocks.initial.mockResolvedValueOnce(
+      snapshot(range(39, 40), { hasMoreNewer: true }),
+    );
+    await hook.render(ROOM);
+
+    await receive(message(41), message(40, { content: "edited" }));
+
+    expect(ids()).toEqual(["m39", "m40"]);
+    expect(hook.current.messages[1]?.text).toBe("edited");
+    expect(mocks.history).not.toHaveBeenCalled();
+  });
+
+  it("stops catching up when the room rejects the request", async () => {
+    mocks.history.mockRejectedValue(new HttpError(403, "forbidden"));
+
+    await receive(message(42));
+    await hook.flush();
+
+    expect(mocks.history).toHaveBeenCalledTimes(1);
+    expect(ids()).toEqual(["m39", "m40"]);
+  });
+
+  it("catches up a room after coming back from another room", async () => {
+    mocks.initial.mockResolvedValueOnce(snapshot([]));
+    await hook.render("other");
+    mocks.history.mockResolvedValueOnce([message(41)]);
+
+    await hook.render(ROOM);
+    await hook.flush();
+
+    expect(mocks.history).toHaveBeenCalledWith(ROOM, {
+      afterSequence: "40",
+      size: 200,
+    });
+    expect(ids()).toEqual(["m39", "m40", "m41"]);
+  });
+});
+
+describe("in an empty room", () => {
+  it("loads the latest page instead of asking for afterSequence=0", async () => {
+    mocks.initial.mockResolvedValueOnce(snapshot([]));
+    await hook.render(ROOM);
+    mocks.history.mockResolvedValueOnce(range(1, 2));
+
+    await reconnect();
+
+    expect(mocks.history).toHaveBeenCalledWith(ROOM, { size: 15 });
+    expect(ids()).toEqual(["m1", "m2"]);
+  });
+});
diff --git a/src/hooks/useChatMessages.ts b/src/hooks/useChatMessages.ts
index 976e3089..0046ccfe 100644
--- a/src/hooks/useChatMessages.ts
+++ b/src/hooks/useChatMessages.ts
@@ -16,8 +16,10 @@ import {
   normalizeFetchedRoomMessages,
   oldestServerMessageByCreatedAt,
   parseFiniteNumber,
+  partitionLiveMessages,
+  replaceExistingServerMessages,
   serverMessageToChatMessage,
-  transientMessagesDuringRoomHistoryFetch,
+  tailCursorOf,
 } from "@/lib/chat";
 import { useStompContext } from "@/contexts/StompContext";
 import { useSessionUser } from "@/hooks/useSessionUser";
@@ -31,6 +33,10 @@ import {
   hasOlderHistoryPage,
   loadInitialRoomHistory,
 } from "@/lib/chat/initialRoomHistory";
+import {
+  fetchRoomMessagesAfter,
+  retryChatHistoryRequest,
+} from "@/lib/chat/messageCatchUp";
 import {
   CHAT_MESSAGE_PAGE_SIZE,
   EMPTY_READ_DIVIDER_PLACEMENT,
@@ -44,11 +50,25 @@ export type UseChatMessagesOptions = {
   /**
    * `false`: 패널 닫힘 — GET 없음. STOMP만 유지.
    * `true`: 이 `roomId`에 대해 **이번 페이지 수명 내 아직 GET을 한 적 없을 때만** 히스토리 GET.
-   * (닫았다 다시 열 때는 같은 방이면 히스토리 GET 없이 read-status로 마커·스크롤만 복원.)
+   * (닫았다 다시 열 때는 같은 방이면 놓친 메시지만 따라잡고 read-status로 마커·스크롤을 복원.)
    */
   fetchHistory: boolean;
 };
 
+/**
+ * 빈 번호를 따라잡는 이유 — 따라잡은 뒤 화면 처리가 다르다.
+ * - gap: 실시간 수신 중 번호가 비었다. 받은 메시지는 실시간 메시지처럼 읽음 처리한다
+ * - reconnect: 끊긴 동안 놓쳤다. 새로 붙은 메시지 앞에 구분선을 두고 그 자리로 스크롤한다
+ * - reopen: 다른 방에 다녀왔거나 패널을 다시 열었다. 읽음 경계를 서버 기준으로 복원한다
+ */
+type CatchUpReason = "gap" | "reconnect" | "reopen";
+
+const CATCH_UP_REASON_PRIORITY: Record<CatchUpReason, number> = {
+  gap: 0,
+  reconnect: 1,
+  reopen: 2,
+};
+
 function chatHistoryGateKey(
   uid: number | null | undefined,
   roomId: string,
@@ -56,44 +76,35 @@ function chatHistoryGateKey(
   return `${uid ?? "anon"}:${roomId.trim()}`;
 }
 
-function bumpRoomLastSequence(
-  map: Map<string, number>,
-  rid: string,
-  msgs: readonly ServerChatMessage[],
-) {
-  const mx = maxSequenceInMessages(msgs);
-  if (mx == null) return;
-  const prev = map.get(rid);
-  map.set(rid, prev != null ? Math.max(prev, mx) : mx);
-}
-
-function applyBridgedSlice(
-  roomId: string,
-  bridged: Awaited<ReturnType<typeof mergeSliceWithReadBridge>>,
-  refs: {
-    hasMoreNewerByRoom: Map<string, boolean>;
-    lastSequenceByRoom: Map<string, number>;
-  },
-  setters: {
-    setHasMoreNewer: (v: boolean) => void;
-    setRawMessages: (msgs: ServerChatMessage[]) => void;
-  },
-  queryClient: ReturnType<typeof useQueryClient>,
-) {
-  if (bridged.bridgedHasMoreNewer == null) return;
-
-  refs.hasMoreNewerByRoom.set(roomId, bridged.bridgedHasMoreNewer);
-  setters.setHasMoreNewer(bridged.bridgedHasMoreNewer);
-  setters.setRawMessages(bridged.slice);
-
-  if (bridged.bridgedSlice?.length) {
-    bumpRoomLastSequence(
-      refs.lastSequenceByRoom,
-      roomId,
-      bridged.bridgedSlice,
-    );
-    void warmPlacePhotoQueriesFromChatHistory(queryClient, bridged.bridgedSlice);
+/** 패널 최초 기록 — 읽음 위치 앞 페이지에, 읽음 위치부터 이어지는 페이지를 붙인다 */
+async function loadRoomHistorySnapshot(roomId: string) {
+  const { lastReadMessageId } = await getRoomMessageReadStatus(roomId);
+  const out = await loadInitialRoomHistory(
+    roomId,
+    lastReadMessageId,
+    CHAT_MESSAGE_PAGE_SIZE,
+  );
+  // 서버는 페이지를 sequence·문서 id 순으로 준다 — 화면은 작성 시각 순으로 맞춘다
+  const serverSlice = mergeServerMessageLists(out.serverSlice);
+  if (!out.lastReadMessageId) {
+    return { ...out, slice: serverSlice, placementBeforeSlice: serverSlice };
   }
+
+  const bridged = await mergeSliceWithReadBridge(
+    roomId,
+    out.lastReadMessageId,
+    serverSlice,
+    serverSlice,
+  );
+  return {
+    ...out,
+    slice: bridged.slice,
+    placementBeforeSlice: bridged.placementBeforeSlice,
+    hasMoreNewer: bridged.bridgedHasMoreNewer ?? out.hasMoreNewer,
+    warmHistory: bridged.bridgedSlice?.length
+      ? mergeServerMessageLists(out.warmHistory, bridged.bridgedSlice)
+      : out.warmHistory,
+  };
 }
 
 export function useChatMessages(
@@ -159,17 +170,27 @@ export function useChatMessages(
   const readBoundaryRestoreVersionRef = useRef(0);
   const activeRoomIdRef = useRef("");
   const fetchHistoryRef = useRef(fetchHistory);
-  const hasObservedConnectedRef = useRef(false);
-  const disconnectedAfterConnectionRef = useRef(false);
+  /** 마운트 때 이미 연결돼 있었으면 구독이 최초 기록 조회보다 먼저다 — 그 뒤의 재연결만 따라잡는다 */
+  const wasConnectedRef = useRef(connected);
   const historyFetchedRoomIdsRef = useRef<Set<string>>(new Set());
   const hasMoreByRoomRef = useRef<Map<string, boolean>>(new Map());
   const hasMoreNewerByRoomRef = useRef<Map<string, boolean>>(new Map());
-  const lastSequenceByRoomRef = useRef<Map<string, number>>(new Map());
+  /** 목록 끝까지 빠짐없이 반영한 마지막 sequence. 목록이 최신 끝일 때만 둔다 */
+  const cursorByRoomRef = useRef<Map<string, number>>(new Map());
   const lastReadMarkerByRoomRef = useRef<Map<string, string>>(new Map());
   const readDividerPlacementByRoomRef = useRef<Map<string, ReadDividerPlacement>>(
     new Map(),
   );
-  const recoveringSequenceRoomsRef = useRef<Set<string>>(new Set());
+  /**
+   * 목록 끝을 바꾸는 조회(최초 기록·최신으로 이동·아래 페이지·따라잡기)는 마지막에 시작한 하나만 반영한다.
+   * 조회 중 받은 실시간 메시지는 모았다가, 조회 결과를 반영한 뒤 같은 커서 규칙으로 처리한다.
+   */
+  const tailSyncTokenRef = useRef(0);
+  const liveBufferRef = useRef<ServerChatMessage[] | null>(null);
+  const pendingCatchUpRef = useRef<CatchUpReason | null>(null);
+  const requestCatchUpRef = useRef<(rid: string, reason: CatchUpReason) => void>(
+    () => {},
+  );
   const isFetchingOlderRef = useRef(false);
   const isFetchingNewerRef = useRef(false);
   const rawMessagesRef = useRef<ServerChatMessage[]>([]);
@@ -179,6 +200,8 @@ export function useChatMessages(
     roomLifetimeRef.current += 1;
     isFetchingOlderRef.current = false;
     isFetchingNewerRef.current = false;
+    liveBufferRef.current = null;
+    pendingCatchUpRef.current = null;
     return () => { roomLifetimeRef.current += 1; };
   }, [roomId, userId]);
 
@@ -324,22 +347,28 @@ export function useChatMessages(
         );
         if (!isCurrentRequest()) return;
 
-        applyBridgedSlice(
-          targetRoomId,
-          bridged,
-          {
-            hasMoreNewerByRoom: hasMoreNewerByRoomRef.current,
-            lastSequenceByRoom: lastSequenceByRoomRef.current,
-          },
-          { setHasMoreNewer, setRawMessages },
-          queryClient,
-        );
+        const bridgedSlice = bridged.bridgedSlice;
+        const bridgedHasMoreNewer = bridged.bridgedHasMoreNewer;
+        if (bridgedSlice && bridgedHasMoreNewer != null) {
+          hasMoreNewerByRoomRef.current.set(rid, bridgedHasMoreNewer);
+          setHasMoreNewer(bridgedHasMoreNewer);
+          // 그사이 붙은 실시간 메시지를 지우지 않게 현재 목록에 합친다
+          setRawMessages((prev) => mergeServerMessageLists(prev, bridgedSlice));
+          const last = maxSequenceInMessages(bridgedSlice);
+          const cursor = cursorByRoomRef.current.get(rid);
+          if (bridgedHasMoreNewer) {
+            cursorByRoomRef.current.delete(rid);
+          } else if (last != null) {
+            cursorByRoomRef.current.set(rid, Math.max(cursor ?? last, last));
+          }
+          void warmPlacePhotoQueriesFromChatHistory(queryClient, bridgedSlice);
+        }
 
         const placement = resolveReadDividerPlacement(
           bridged.slice,
           lastReadMessageId,
           bridged.placementBeforeSlice,
-          hasMoreNewerByRoomRef.current.get(targetRoomId) === true,
+          hasMoreNewerByRoomRef.current.get(rid) === true,
         );
         applySessionReadBoundary(rid, lastReadMessageId, placement);
 
@@ -370,6 +399,228 @@ export function useChatMessages(
     ],
   );
 
+  /** 목록 끝을 바꾸는 조회를 시작한다. 돌려받은 함수가 거짓이면 그 결과는 버린다 */
+  const beginTailSync = useCallback(() => {
+    tailSyncTokenRef.current += 1;
+    liveBufferRef.current ??= [];
+    const token = tailSyncTokenRef.current;
+    const lifetime = roomLifetimeRef.current;
+    return () =>
+      tailSyncTokenRef.current === token &&
+      roomLifetimeRef.current === lifetime;
+  }, []);
+
+  const applyLiveMessages = useCallback(
+    (rid: string, msgs: readonly ServerChatMessage[], catchUpOnGap: boolean) => {
+      // 첫 기록을 받기 전에는 그 조회가 이 메시지까지 가져온다
+      if (
+        msgs.length === 0 ||
+        !historyFetchedRoomIdsRef.current.has(chatHistoryGateKey(userId, rid))
+      ) {
+        return;
+      }
+
+      const { appended, updates, cursor, hasGap } = partitionLiveMessages(msgs, {
+        cursor: cursorByRoomRef.current.get(rid),
+        atTail: hasMoreNewerByRoomRef.current.get(rid) !== true,
+        list: rawMessagesRef.current,
+      });
+      if (cursor != null) cursorByRoomRef.current.set(rid, cursor);
+      if (appended.length > 0 || updates.length > 0) {
+        setRawMessages((prev) => {
+          const updated = replaceExistingServerMessages(prev, updates);
+          return appended.length > 0
+            ? mergeServerMessageLists(updated, appended)
+            : updated;
+        });
+      }
+      if (hasGap && catchUpOnGap) requestCatchUpRef.current(rid, "gap");
+
+      const newest = appended[appended.length - 1];
+      if (newest) onIncomingMessage(newest, true);
+    },
+    [userId, onIncomingMessage],
+  );
+
+  /** 조회 결과를 반영한 뒤 모아 둔 실시간 메시지를 처리하고, 미뤄 둔 따라잡기를 잇는다 */
+  const finishTailSync = useCallback(
+    (rid: string, succeeded: boolean) => {
+      const buffered = liveBufferRef.current ?? [];
+      liveBufferRef.current = null;
+      // 조회가 실패했으면 빈 번호를 바로 다시 요청하지 않는다 — 다음 수신·재연결이 다시 맞춘다
+      applyLiveMessages(rid, buffered, succeeded);
+      const pending = pendingCatchUpRef.current;
+      pendingCatchUpRef.current = null;
+      if (pending) requestCatchUpRef.current(rid, pending);
+    },
+    [applyLiveMessages],
+  );
+
+  const showCaughtUpMessages = useCallback(
+    (
+      rid: string,
+      reason: CatchUpReason,
+      appended: readonly ServerChatMessage[],
+      newestBefore: ServerChatMessage | null,
+    ) => {
+      if (reason === "reopen") {
+        void restoreSessionReadBoundary(rid);
+        return;
+      }
+      const newest = appended[appended.length - 1];
+      if (!newest) return;
+      if (reason === "gap") {
+        onIncomingMessage(newest, true);
+        return;
+      }
+      // 끊긴 동안 온 메시지는 읽지 않은 메시지로 보여 준다
+      if (!newestBefore || !fetchHistoryRef.current) return;
+      applySessionReadBoundary(rid, newestBefore.id, {
+        afterMessageId: newestBefore.id,
+        beforeFirst: false,
+      });
+      publishScrollToAnchor(newestBefore.id);
+    },
+    [
+      restoreSessionReadBoundary,
+      onIncomingMessage,
+      applySessionReadBoundary,
+      publishScrollToAnchor,
+    ],
+  );
+
+  const requestCatchUp = useCallback(
+    (rid: string, reason: CatchUpReason) => {
+      if (liveBufferRef.current) {
+        // 목록 끝을 바꾸는 다른 조회가 진행 중이다 — 끝난 뒤(finishTailSync) 이어서 따라잡는다
+        const pending = pendingCatchUpRef.current;
+        if (
+          !pending ||
+          CATCH_UP_REASON_PRIORITY[reason] > CATCH_UP_REASON_PRIORITY[pending]
+        ) {
+          pendingCatchUpRef.current = reason;
+        }
+        return;
+      }
+      if (!historyFetchedRoomIdsRef.current.has(chatHistoryGateKey(userId, rid))) {
+        return;
+      }
+      if (hasMoreNewerByRoomRef.current.get(rid) === true) {
+        // 중간 창은 아래 페이지 조회가 최신 끝까지 맞춘다
+        if (reason === "reopen") void restoreSessionReadBoundary(rid);
+        return;
+      }
+
+      const isCurrent = beginTailSync();
+      const cursor = cursorByRoomRef.current.get(rid);
+      const newestBefore = newestServerMessageByCreatedAt(rawMessagesRef.current);
+      void fetchRoomMessagesAfter(rid, cursor, isCurrent)
+        .then((rows) => {
+          if (!isCurrent()) return;
+          const known = new Set(rawMessagesRef.current.map((m) => m.id));
+          const appended = rows.filter((m) => !known.has(m.id));
+          setRawMessages((prev) => mergeServerMessageLists(prev, rows));
+          const last = maxSequenceInMessages(rows);
+          if (last != null) {
+            cursorByRoomRef.current.set(rid, Math.max(cursor ?? last, last));
+          }
+          if (cursor === 0) {
+            // 빈 방에서 최신 페이지를 받았다 — 그 앞 기록은 위로 스크롤해 받는다
+            const more = hasOlderHistoryPage(rows.length, CHAT_MESSAGE_PAGE_SIZE);
+            hasMoreByRoomRef.current.set(rid, more);
+            setHasMore(more);
+          }
+          void warmPlacePhotoQueriesFromChatHistory(queryClient, rows);
+          // 모아 둔 실시간 메시지가 더 새것이다 — 읽음 위치가 뒤로 가지 않게 따라잡은 메시지를 먼저 처리한다
+          showCaughtUpMessages(rid, reason, appended, newestBefore);
+          finishTailSync(rid, true);
+        })
+        .catch(() => {
+          // 재시도 뒤에도 실패하면 커서를 그대로 둔다 — 다음 빈 번호 수신·재연결 때 같은 커서로 다시 받는다
+          if (!isCurrent()) return;
+          finishTailSync(rid, false);
+          if (reason === "reopen") void restoreSessionReadBoundary(rid);
+        });
+    },
+    [
+      userId,
+      queryClient,
+      beginTailSync,
+      finishTailSync,
+      showCaughtUpMessages,
+      restoreSessionReadBoundary,
+    ],
+  );
+
+  useLayoutEffect(() => {
+    requestCatchUpRef.current = requestCatchUp;
+  }, [requestCatchUp]);
+
+  const startHistoryLoad = useCallback(
+    (targetRoomId: string) => {
+      const rid = targetRoomId.trim();
+      const isCurrent = beginTailSync();
+      void retryChatHistoryRequest(
+        () => loadRoomHistorySnapshot(targetRoomId),
+        isCurrent,
+      )
+        .then((out) => {
+          if (!isCurrent()) return;
+          hasMoreByRoomRef.current.set(rid, out.hasMoreOlder);
+          hasMoreNewerByRoomRef.current.set(rid, out.hasMoreNewer);
+          setHasMore(out.hasMoreOlder);
+          setHasMoreNewer(out.hasMoreNewer);
+
+          const placement = out.lastReadMessageId
+            ? resolveReadDividerPlacement(
+                out.slice,
+                out.lastReadMessageId,
+                out.placementBeforeSlice,
+                out.hasMoreNewer,
+              )
+            : EMPTY_READ_DIVIDER_PLACEMENT;
+          applySessionReadBoundary(rid, out.lastReadMessageId, placement);
+
+          setRawMessages(out.slice);
+          // 최신 끝까지 받았으면 그 마지막 번호 다음부터 실시간 메시지를 붙인다
+          const cursor = out.hasMoreNewer ? undefined : tailCursorOf(out.slice);
+          if (cursor == null) cursorByRoomRef.current.delete(rid);
+          else cursorByRoomRef.current.set(rid, cursor);
+          historyFetchedRoomIdsRef.current.add(chatHistoryGateKey(userId, rid));
+          void warmPlacePhotoQueriesFromChatHistory(queryClient, out.warmHistory);
+
+          const newest = newestServerMessageByCreatedAt(out.slice);
+          if (newest && !out.hasMoreNewer) {
+            resetReadDedup();
+            markMessagesRead(newest.id);
+          }
+
+          if (
+            out.lastReadMessageId &&
+            canRenderReadDivider(out.slice, placement)
+          ) {
+            publishScrollToAnchor(out.lastReadMessageId);
+          }
+          finishTailSync(rid, true);
+        })
+        .catch(() => {
+          // gate를 세우지 않는다 — 재연결되거나 패널을 다시 열 때 다시 받는다
+          if (isCurrent()) finishTailSync(rid, false);
+        });
+    },
+    [
+      userId,
+      queryClient,
+      beginTailSync,
+      finishTailSync,
+      applySessionReadBoundary,
+      canRenderReadDivider,
+      publishScrollToAnchor,
+      markMessagesRead,
+      resetReadDedup,
+    ],
+  );
+
   useEffect(() => {
     if (!roomId) {
       readBoundaryRestoreVersionRef.current += 1;
@@ -378,10 +629,9 @@ export function useChatMessages(
       historyFetchedRoomIdsRef.current.clear();
       hasMoreByRoomRef.current.clear();
       hasMoreNewerByRoomRef.current.clear();
-      lastSequenceByRoomRef.current.clear();
+      cursorByRoomRef.current.clear();
       lastReadMarkerByRoomRef.current.clear();
       readDividerPlacementByRoomRef.current.clear();
-      recoveringSequenceRoomsRef.current.clear();
       return;
     }
 
@@ -397,138 +647,43 @@ export function useChatMessages(
     prevRoomForHistoryGateRef.current = roomId;
     if (userId == null) return;
 
-    const gateKey = chatHistoryGateKey(userId, roomId);
-    const ridTrim = roomId.trim();
-    if (historyFetchedRoomIdsRef.current.has(gateKey)) {
-      if (reopened) void restoreSessionReadBoundary(roomId);
+    const rid = roomId.trim();
+    if (historyFetchedRoomIdsRef.current.has(chatHistoryGateKey(userId, rid))) {
+      if (!reopened) return;
+      // 다른 방에 있던 동안은 이 방 메시지를 구독하지 않았다 — 다시 구독(부모 effect)을 보낸 뒤 따라잡는다
+      queueMicrotask(() => {
+        if (activeRoomIdRef.current === rid) requestCatchUp(rid, "reopen");
+      });
       return;
     }
-
-    let cancelled = false;
-    const restoreVersion = ++readBoundaryRestoreVersionRef.current;
-    const isCurrentRequest = () =>
-      !cancelled &&
-      readBoundaryRestoreVersionRef.current === restoreVersion &&
-      fetchHistoryRef.current &&
-      activeRoomIdRef.current === ridTrim;
-
-    void (async () => {
-      try {
-        const { lastReadMessageId } = await getRoomMessageReadStatus(roomId);
-        if (!isCurrentRequest()) return;
-
-        const out = await loadInitialRoomHistory(
-          roomId,
-          lastReadMessageId,
-          CHAT_MESSAGE_PAGE_SIZE,
-        );
-        if (!isCurrentRequest()) return;
-
-        let slice = mergeServerMessageLists(
-          out.serverSlice,
-          transientMessagesDuringRoomHistoryFetch(rawMessagesRef.current),
-        );
-        let hasMoreNewer = out.hasMoreNewer;
-        let warmHistory = [...out.warmHistory];
-        let placementBeforeSlice: readonly ServerChatMessage[] = out.serverSlice;
-
-        if (out.lastReadMessageId) {
-          const bridged = await mergeSliceWithReadBridge(
-            roomId,
-            out.lastReadMessageId,
-            slice,
-            out.serverSlice,
-          );
-          if (!isCurrentRequest()) return;
-          slice = bridged.slice;
-          placementBeforeSlice = bridged.placementBeforeSlice;
-          if (bridged.bridgedHasMoreNewer != null) {
-            hasMoreNewer = bridged.bridgedHasMoreNewer;
-          }
-          if (bridged.bridgedSlice?.length) {
-            warmHistory = mergeServerMessageLists(
-              warmHistory,
-              bridged.bridgedSlice,
-            );
-          }
-        }
-
-        hasMoreByRoomRef.current.set(roomId, out.hasMoreOlder);
-        hasMoreNewerByRoomRef.current.set(roomId, hasMoreNewer);
-        setHasMore(out.hasMoreOlder);
-        setHasMoreNewer(hasMoreNewer);
-
-        const placement = out.lastReadMessageId
-          ? resolveReadDividerPlacement(
-              slice,
-              out.lastReadMessageId,
-              placementBeforeSlice,
-              hasMoreNewer,
-            )
-          : EMPTY_READ_DIVIDER_PLACEMENT;
-        applySessionReadBoundary(ridTrim, out.lastReadMessageId, placement);
-
-        setRawMessages(slice);
-        bumpRoomLastSequence(lastSequenceByRoomRef.current, roomId, slice);
-        historyFetchedRoomIdsRef.current.add(gateKey);
-        void warmPlacePhotoQueriesFromChatHistory(queryClient, warmHistory);
-
-        const newest = newestServerMessageByCreatedAt(slice);
-        if (newest && !hasMoreNewer) {
-          resetReadDedup();
-          markMessagesRead(newest.id);
-        }
-
-        if (
-          out.lastReadMessageId &&
-          canRenderReadDivider(slice, placement)
-        ) {
-          publishScrollToAnchor(out.lastReadMessageId);
-        }
-      } catch {
-        /* 실패 시 Set에 넣지 않음 → 다음 패널 오픈 시 재시도 */
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    roomId,
-    fetchHistory,
-    queryClient,
-    userId,
-    markMessagesRead,
-    resetReadDedup,
-    publishScrollToAnchor,
-    applySessionReadBoundary,
-    canRenderReadDivider,
-    restoreSessionReadBoundary,
-  ]);
+    // 진행 중인 최초 조회가 있으면 그 결과를 쓴다
+    if (!liveBufferRef.current) startHistoryLoad(roomId);
+  }, [roomId, fetchHistory, userId, requestCatchUp, startHistoryLoad]);
 
   useEffect(() => {
-    if (!connected) {
-      if (hasObservedConnectedRef.current) {
-        disconnectedAfterConnectionRef.current = true;
-      }
-      return;
-    }
-
-    if (!hasObservedConnectedRef.current) {
-      hasObservedConnectedRef.current = true;
-      return;
-    }
+    const wasConnected = wasConnectedRef.current;
+    wasConnectedRef.current = connected;
+    if (!connected || wasConnected || !roomId || userId == null) return;
 
-    if (!disconnectedAfterConnectionRef.current) return;
-    disconnectedAfterConnectionRef.current = false;
-
-    if (!fetchHistory || !roomId) return;
-    queueMicrotask(() => void restoreSessionReadBoundary(roomId));
-  }, [connected, fetchHistory, roomId, restoreSessionReadBoundary]);
+    const rid = roomId.trim();
+    // 다시 구독한 토픽은 끊긴 동안의 메시지를 주지 않는다 — 구독(부모 effect)을 보낸 뒤 따라잡는다
+    queueMicrotask(() => {
+      if (activeRoomIdRef.current !== rid) return;
+      if (
+        liveBufferRef.current ||
+        historyFetchedRoomIdsRef.current.has(chatHistoryGateKey(userId, rid))
+      ) {
+        requestCatchUp(rid, "reconnect");
+      } else if (fetchHistoryRef.current) {
+        // 끊긴 동안 최초 기록 조회가 끝내 실패했다 — 연결이 돌아온 지금 다시 받는다
+        startHistoryLoad(roomId);
+      }
+    });
+  }, [connected, roomId, userId, requestCatchUp, startHistoryLoad]);
 
   const fetchOlderMessages = useCallback(() => {
-    const rid = roomId;
-    if (!rid || activeRoomIdRef.current !== rid.trim()) return;
+    const rid = roomId?.trim();
+    if (!rid || activeRoomIdRef.current !== rid) return;
     if (isFetchingOlderRef.current) return;
     if (hasMoreByRoomRef.current.get(rid) === false) return;
 
@@ -555,7 +710,6 @@ export function useChatMessages(
         setRawMessages((prev) =>
           mergeServerMessageLists(normalizedHistory, prev),
         );
-        bumpRoomLastSequence(lastSequenceByRoomRef.current, rid, normalizedHistory);
         void warmPlacePhotoQueriesFromChatHistory(
           queryClient,
           normalizedHistory,
@@ -572,8 +726,8 @@ export function useChatMessages(
   }, [roomId, queryClient]);
 
   const fetchNewerMessages = useCallback(() => {
-    const rid = roomId;
-    if (!rid || activeRoomIdRef.current !== rid.trim()) return;
+    const rid = roomId?.trim();
+    if (!rid || activeRoomIdRef.current !== rid) return;
     if (isFetchingNewerRef.current) return;
     if (hasMoreNewerByRoomRef.current.get(rid) !== true) return;
 
@@ -583,13 +737,14 @@ export function useChatMessages(
     isFetchingNewerRef.current = true;
     const lifetime = roomLifetimeRef.current;
     setIsFetchingNewer(true);
+    const isCurrent = beginTailSync();
 
     void getRoomMessages(rid, {
       afterId: newest.id,
       size: CHAT_MESSAGE_PAGE_SIZE,
     })
       .then((history) => {
-        if (roomLifetimeRef.current !== lifetime) return;
+        if (!isCurrent()) return;
         const normalizedHistory = normalizeFetchedRoomMessages(history);
         const more = hasOlderHistoryPage(
           normalizedHistory.length,
@@ -600,57 +755,40 @@ export function useChatMessages(
         setRawMessages((prev) =>
           mergeServerMessageLists(prev, normalizedHistory),
         );
-        bumpRoomLastSequence(lastSequenceByRoomRef.current, rid, normalizedHistory);
+        if (!more) {
+          // 최신 끝에 닿았다 — 이 페이지의 마지막 번호 다음부터 실시간 메시지를 붙인다
+          const last = maxSequenceInMessages([
+            ...rawMessagesRef.current,
+            ...normalizedHistory,
+          ]);
+          if (last == null) cursorByRoomRef.current.delete(rid);
+          else cursorByRoomRef.current.set(rid, last);
+        }
         void warmPlacePhotoQueriesFromChatHistory(
           queryClient,
           normalizedHistory,
         );
+        finishTailSync(rid, true);
       })
       .catch(() => {
-        /* 유지: hasMoreNewer 그대로, 다음 스크롤에서 재시도 가능 */
+        // 유지: hasMoreNewer 그대로, 다음 스크롤에서 다시 받는다
+        if (isCurrent()) finishTailSync(rid, false);
       })
       .finally(() => {
         if (roomLifetimeRef.current !== lifetime) return;
         isFetchingNewerRef.current = false;
         setIsFetchingNewer(false);
       });
-  }, [roomId, queryClient]);
-
-  const recoverMissingMessages = useCallback(
-    (rid: string, afterSeq: number) => {
-      if (recoveringSequenceRoomsRef.current.has(rid)) return;
-      recoveringSequenceRoomsRef.current.add(rid);
-      const lifetime = roomLifetimeRef.current;
-
-      void getRoomMessages(rid, {
-        afterSequence: String(afterSeq),
-        size: CHAT_MESSAGE_PAGE_SIZE,
-      })
-        .then((rows) => {
-          if (roomLifetimeRef.current !== lifetime) return;
-          const normalized = normalizeFetchedRoomMessages(rows);
-          setRawMessages((prev) => mergeServerMessageLists(prev, normalized));
-          bumpRoomLastSequence(lastSequenceByRoomRef.current, rid, normalized);
-          void warmPlacePhotoQueriesFromChatHistory(queryClient, normalized);
-        })
-        .catch(() => {
-          /* 다음 STOMP 수신 시 재감지 */
-        })
-        .finally(() => {
-          recoveringSequenceRoomsRef.current.delete(rid);
-        });
-    },
-    [queryClient],
-  );
+  }, [roomId, queryClient, beginTailSync, finishTailSync]);
 
   const jumpToLatest = useCallback(() => {
-    const rid = roomId;
-    if (!rid || activeRoomIdRef.current !== rid.trim()) return;
+    const rid = roomId?.trim();
+    if (!rid || activeRoomIdRef.current !== rid) return;
 
-    const lifetime = roomLifetimeRef.current;
+    const isCurrent = beginTailSync();
     void getRoomMessages(rid, { size: CHAT_MESSAGE_PAGE_SIZE })
       .then((history) => {
-        if (roomLifetimeRef.current !== lifetime) return;
+        if (!isCurrent()) return;
         const normalized = normalizeFetchedRoomMessages(history);
         const more = hasOlderHistoryPage(
           normalized.length,
@@ -658,22 +796,29 @@ export function useChatMessages(
         );
         hasMoreByRoomRef.current.set(rid, more);
         hasMoreNewerByRoomRef.current.set(rid, false);
-        clearSessionReadBoundary(rid.trim());
+        const cursor = tailCursorOf(normalized);
+        if (cursor == null) cursorByRoomRef.current.delete(rid);
+        else cursorByRoomRef.current.set(rid, cursor);
+        clearSessionReadBoundary(rid);
         setHasMore(more);
         setHasMoreNewer(false);
-        lastSequenceByRoomRef.current.delete(rid);
-        setRawMessages([]);
-        queueMicrotask(() => {
-          if (roomLifetimeRef.current !== lifetime) return;
-          setRawMessages(normalized);
-          bumpRoomLastSequence(lastSequenceByRoomRef.current, rid, normalized);
-          void warmPlacePhotoQueriesFromChatHistory(queryClient, normalized);
-        });
+        setRawMessages(mergeServerMessageLists(normalized));
+        publishScrollToAnchor(undefined);
+        void warmPlacePhotoQueriesFromChatHistory(queryClient, normalized);
+        finishTailSync(rid, true);
       })
       .catch(() => {
-        /* noop */
+        // 중간 창을 그대로 둔다 — 버튼을 다시 누르면 다시 받는다
+        if (isCurrent()) finishTailSync(rid, false);
       });
-  }, [roomId, queryClient, clearSessionReadBoundary]);
+  }, [
+    roomId,
+    queryClient,
+    beginTailSync,
+    finishTailSync,
+    clearSessionReadBoundary,
+    publishScrollToAnchor,
+  ]);
 
   useEffect(() => {
     if (!roomId) {
@@ -681,44 +826,18 @@ export function useChatMessages(
       return;
     }
 
+    const rid = roomId.trim();
     const handler = (msg: ServerChatMessage) => {
-      const rid = roomId.trim();
       if (activeRoomIdRef.current !== rid) return;
-      const lastSeq = lastSequenceByRoomRef.current.get(rid);
-      const seq = msg.sequence;
-      const isNew = !rawMessagesRef.current.some((m) => m.id === msg.id);
-
-      setRawMessages((prev) => {
-        const i = prev.findIndex((m) => m.id === msg.id);
-        if (i < 0) return [...prev, msg];
-        const next = [...prev];
-        next[i] = msg;
-        return next;
-      });
-
-      const atTail = hasMoreNewerByRoomRef.current.get(rid) !== true;
-      if (
-        atTail &&
-        seq != null &&
-        lastSeq != null &&
-        seq > lastSeq + 1 &&
-        !recoveringSequenceRoomsRef.current.has(rid)
-      ) {
-        recoverMissingMessages(rid, lastSeq);
+      if (liveBufferRef.current) {
+        liveBufferRef.current.push(msg);
+        return;
       }
-
-      if (seq != null) {
-        lastSequenceByRoomRef.current.set(
-          rid,
-          Math.max(lastSeq ?? seq, seq),
-        );
-      }
-
-      onIncomingMessage(msg, isNew);
+      applyLiveMessages(rid, [msg], true);
     };
     setRoomChatMessageHandler(handler);
     return () => setRoomChatMessageHandler(null);
-  }, [roomId, setRoomChatMessageHandler, onIncomingMessage, recoverMissingMessages]);
+  }, [roomId, setRoomChatMessageHandler, applyLiveMessages]);
 
   const rid = roomId?.trim() ?? "";
   const effectiveReadMarkerMessageId =
diff --git a/src/hooks/useDebouncedPlacePredictions.test.tsx b/src/hooks/useDebouncedPlacePredictions.test.tsx
new file mode 100644
index 00000000..d337fee4
--- /dev/null
+++ b/src/hooks/useDebouncedPlacePredictions.test.tsx
@@ -0,0 +1,85 @@
+// @vitest-environment jsdom
+import { act, useEffect } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { useDebouncedPlacePredictions } from "./useDebouncedPlacePredictions";
+
+const sdk = vi.hoisted(() => ({ fetch: vi.fn() }));
+vi.mock("@/lib/placesAutocompleteSuggest", () => ({
+  AUTOCOMPLETE_SUGGEST_DEBOUNCE_MS: 250,
+  fetchPlacePredictionsForRequest: sdk.fetch,
+  newAutocompleteSessionToken: () => ({}),
+}));
+
+type Hook = ReturnType<typeof useDebouncedPlacePredictions>;
+const buildRequest = (input: string) => ({ input }) as google.maps.places.AutocompleteRequest;
+let api: Hook, root: Root, host: HTMLDivElement;
+function Harness() {
+  const hook = useDebouncedPlacePredictions({ placesLibReady: true, minInputLength: 2, buildRequest });
+  useEffect(() => {
+    api = hook;
+  });
+  return null;
+}
+function deferred() {
+  let resolve!: (list: unknown[]) => void;
+  const promise = new Promise<unknown[]>((r) => { resolve = r; });
+  return { promise, resolve };
+}
+const prediction = (text: string) => ({ placeId: text }) as unknown as google.maps.places.PlacePrediction;
+
+beforeEach(async () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  vi.useFakeTimers();
+  sdk.fetch.mockReset();
+  host = document.createElement("div");
+  root = createRoot(host);
+  await act(async () => root.render(<Harness />));
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  vi.useRealTimers();
+});
+
+// 예: '도쿄' 요청이 가는 중에 Enter로 검색하면, 늦게 온 '도쿄' 추천이 검색 뒤에 목록을 다시 열었다
+it("a response that arrives after the list is closed does not reopen it", async () => {
+  const first = deferred();
+  sdk.fetch.mockReturnValueOnce(first.promise);
+  await act(async () => api.scheduleFetch("도쿄"));
+  await act(async () => vi.advanceTimersByTimeAsync(250));
+  await act(async () => api.clearSuggestionUi());
+  await act(async () => first.resolve([prediction("도쿄")]));
+  expect(api.isOpen).toBe(false);
+  expect(api.predictions).toEqual([]);
+});
+
+it("a response that arrives after the input got too short does not reopen the list", async () => {
+  const first = deferred();
+  sdk.fetch.mockReturnValueOnce(first.promise);
+  await act(async () => api.scheduleFetch("도쿄"));
+  await act(async () => vi.advanceTimersByTimeAsync(250));
+  await act(async () => api.scheduleFetch("도"));
+  await act(async () => first.resolve([prediction("도쿄")]));
+  expect(api.isOpen).toBe(false);
+});
+
+it("typing again ignores the previous response and shows only the new one", async () => {
+  const first = deferred();
+  sdk.fetch.mockReturnValueOnce(first.promise).mockResolvedValueOnce([prediction("도쿄타워")]);
+  await act(async () => api.scheduleFetch("도쿄"));
+  await act(async () => vi.advanceTimersByTimeAsync(250));
+  await act(async () => api.scheduleFetch("도쿄타"));
+  await act(async () => first.resolve([prediction("도쿄")]));
+  expect(api.isOpen).toBe(false);
+  await act(async () => vi.advanceTimersByTimeAsync(250));
+  expect(api.predictions.map((p) => p.placeId)).toEqual(["도쿄타워"]);
+  expect(api.isOpen).toBe(true);
+});
+
+it("closing before the debounce fires sends no request", async () => {
+  await act(async () => api.scheduleFetch("도쿄"));
+  await act(async () => root.unmount());
+  await act(async () => vi.advanceTimersByTimeAsync(300));
+  expect(sdk.fetch).not.toHaveBeenCalled();
+  root = createRoot(host);
+});
diff --git a/src/hooks/useDebouncedPlacePredictions.ts b/src/hooks/useDebouncedPlacePredictions.ts
index e2c27b7b..b69f2be9 100644
--- a/src/hooks/useDebouncedPlacePredictions.ts
+++ b/src/hooks/useDebouncedPlacePredictions.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import {
   AUTOCOMPLETE_SUGGEST_DEBOUNCE_MS,
@@ -42,23 +42,32 @@ export function useDebouncedPlacePredictions(options: {
     useRef<google.maps.places.AutocompleteSessionToken | null>(null);
   const fetchGenRef = useRef(0);
 
+  // 취소 = 예약한 타이머 취소 + 이미 보낸 요청의 응답 무시(번호 올리기). 취소하는 모든 경로가 이 함수를 거친다
+  const cancelPending = useCallback(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+    fetchGenRef.current += 1;
+  }, []);
+
+  // 입력 직후 화면이 닫히면 대기 중인 타이머가 Google 자동완성을 한 번 더 보낸다(건별 과금)
+  useEffect(() => cancelPending, [cancelPending]);
+
   const invalidateSession = useCallback(() => {
     sessionTokenRef.current = null;
   }, []);
 
   const clearSuggestionUi = useCallback(() => {
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-      debounceRef.current = null;
-    }
+    cancelPending();
     setPredictions([]);
     setIsOpen(false);
     setActiveIndex(-1);
-  }, []);
+  }, [cancelPending]);
 
   const scheduleFetch = useCallback(
     (value: string) => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
+      cancelPending();
 
       if (!value.trim()) {
         sessionTokenRef.current = null;
@@ -74,11 +83,10 @@ export function useDebouncedPlacePredictions(options: {
         return;
       }
 
+      // 번호는 예약할 때 잡는다. 그래야 예약 뒤의 취소(다시 입력·닫기·선택)를 모두 알아챈다
+      const gen = fetchGenRef.current;
       debounceRef.current = setTimeout(() => {
         void (async () => {
-          fetchGenRef.current += 1;
-          const gen = fetchGenRef.current;
-
           if (!sessionTokenRef.current) {
             sessionTokenRef.current = newAutocompleteSessionToken();
           }
@@ -103,7 +111,7 @@ export function useDebouncedPlacePredictions(options: {
         })();
       }, debounceMs);
     },
-    [buildRequest, debounceMs, disabled, minInputLength, placesLibReady],
+    [buildRequest, cancelPending, debounceMs, disabled, minInputLength, placesLibReady],
   );
 
   return {
diff --git a/src/hooks/useExpenseInvalidation.test.ts b/src/hooks/useExpenseInvalidation.test.ts
index fcdc5797..95d2b099 100644
--- a/src/hooks/useExpenseInvalidation.test.ts
+++ b/src/hooks/useExpenseInvalidation.test.ts
@@ -3,7 +3,7 @@ import { beforeEach, expect, it, vi } from "vitest";
 const mock = vi.hoisted(() => ({
   client: null as unknown,
   mutation: vi.fn(),
-  hydrate: vi.fn(async () => []),
+  refresh: vi.fn(async () => []),
 }));
 vi.mock("@tanstack/react-query", async (importOriginal) => ({
   ...(await importOriginal<object>()),
@@ -12,12 +12,12 @@ vi.mock("@tanstack/react-query", async (importOriginal) => ({
 }));
 vi.mock("@/lib/rooms", async (importOriginal) => ({
   ...(await importOriginal<object>()),
-  hydrateRoomSchedulesFromServer: mock.hydrate,
+  refreshRoomSchedules: mock.refresh,
   syncRoomDetailFromServer: vi.fn(),
 }));
 vi.mock("@/lib/plan/scheduleItemPlaces", () => ({
   syncAfterCrossScheduleItemMove: vi.fn(),
-  applyScheduleItemDeletedOnClient: vi.fn(),
+  removeScheduleItemFromPlanPlacesCache: vi.fn(),
 }));
 import {
   useMoveRoomSchedule,
@@ -32,7 +32,7 @@ beforeEach(() => {
   client = new QueryClient();
   mock.client = client;
   mock.mutation.mockReset();
-  mock.hydrate.mockResolvedValue([]);
+  mock.refresh.mockResolvedValue([]);
   for (const suffix of ["list", "summary"])
     client.setQueryData(["room-expenses", "r", suffix], []);
   client.setQueryData(["room-expenses", "other", "list"], []);
diff --git a/src/hooks/usePlacePhotoUrl.test.ts b/src/hooks/usePlacePhotoUrl.test.ts
index 9e46a867..02beb924 100644
--- a/src/hooks/usePlacePhotoUrl.test.ts
+++ b/src/hooks/usePlacePhotoUrl.test.ts
@@ -1,7 +1,5 @@
-import { QueryClient, QueryObserver } from "@tanstack/react-query";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 
-const useQueryMock = vi.hoisted(() => vi.fn((options) => options));
 const requestPlacePhotoUrlMock = vi.hoisted(() => vi.fn());
 const requestPlacePhotoUrlsBatchMock = vi.hoisted(() => vi.fn());
 
@@ -12,11 +10,6 @@ vi.hoisted(() => {
   process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY = "test-maps-key";
 });
 
-vi.mock("@tanstack/react-query", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@tanstack/react-query")>();
-  return { ...actual, useQuery: useQueryMock };
-});
-
 vi.mock("@/lib/api/places", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@/lib/api/places")>();
   return {
@@ -26,302 +19,185 @@ vi.mock("@/lib/api/places", async (importOriginal) => {
   };
 });
 
-let fetchAndSeedPlacePhotoUrls: typeof import("@/lib/places/place-batch-cache").fetchAndSeedPlacePhotoUrls;
-let ensurePlacePhotoUrlsCached: typeof import("@/lib/places/place-batch-cache").ensurePlacePhotoUrlsCached;
-let placePhotoUrlQueryKey: typeof import("@/lib/place-photo-query").placePhotoUrlQueryKey;
-let seededPlacePhotoUrlQueryOptions: typeof import("@/lib/place-photo-query").seededPlacePhotoUrlQueryOptions;
-let registerQueryClient: typeof import("@/lib/query-client").registerQueryClient;
-let usePlacePhotoUrlQuery: typeof import("@/hooks/usePlacePhotoUrl").usePlacePhotoUrlQuery;
+let createQueryClient: typeof import("@/lib/query-client").createQueryClient;
+let HttpError: typeof import("@/lib/api/errors").HttpError;
+let placePhotoUrlQueryOptions: typeof import("@/hooks/usePlacePhotoUrl").placePhotoUrlQueryOptions;
 
 beforeAll(async () => {
-  ({ fetchAndSeedPlacePhotoUrls, ensurePlacePhotoUrlsCached } = await import(
-    "@/lib/places/place-batch-cache"
-  ));
-  ({ placePhotoUrlQueryKey, seededPlacePhotoUrlQueryOptions } = await import(
-    "@/lib/place-photo-query"
-  ));
-  ({ registerQueryClient } = await import("@/lib/query-client"));
-  ({ usePlacePhotoUrlQuery } = await import("@/hooks/usePlacePhotoUrl"));
+  ({ createQueryClient } = await import("@/lib/query-client"));
+  ({ HttpError } = await import("@/lib/api/errors"));
+  ({ placePhotoUrlQueryOptions } = await import("@/hooks/usePlacePhotoUrl"));
 });
 
 beforeEach(() => {
-  useQueryMock.mockClear();
   requestPlacePhotoUrlMock.mockReset();
   requestPlacePhotoUrlsBatchMock.mockReset();
 });
 
-describe("usePlacePhotoUrlQuery", () => {
-  it("requests a cold single photo directly and reuses the shared cache", async () => {
-    const queryClient = new QueryClient();
-    registerQueryClient(queryClient);
-    requestPlacePhotoUrlsBatchMock.mockResolvedValue([]);
+/** 같은 커밋에 카드 여러 장이 마운트된 것처럼 한 태스크 안에서 조회를 시작한다 */
+function fetchCards(queryClient: ReturnType<typeof createQueryClient>, ids: string[]) {
+  return Promise.allSettled(ids.map((id) => queryClient.fetchQuery(placePhotoUrlQueryOptions(id))));
+}
+
+const ok = (googlePlaceId: string) => ({
+  status: "OK" as const,
+  googlePlaceId,
+  photoUrl: `https://cdn.example/${googlePlaceId}.jpg`,
+});
+const failed = (googlePlaceId: string) => ({
+  status: "FAILED" as const,
+  googlePlaceId,
+  errorCode: "EXTERNAL_API_ERROR",
+});
+
+describe("placePhotoUrlQueryOptions", () => {
+  it("사진 1장은 단건 API로 받고 같은 캐시를 다시 쓴다", async () => {
+    const queryClient = createQueryClient();
     requestPlacePhotoUrlMock.mockResolvedValue("https://cdn.example/single.jpg");
-    usePlacePhotoUrlQuery(" ChIJ-single ");
-    const options = useQueryMock.mock.lastCall![0];
+    const options = placePhotoUrlQueryOptions(" ChIJ-single ");
+
     await expect(queryClient.fetchQuery(options)).resolves.toBe("https://cdn.example/single.jpg");
     await expect(queryClient.fetchQuery(options)).resolves.toBe("https://cdn.example/single.jpg");
     expect(requestPlacePhotoUrlMock).toHaveBeenCalledExactlyOnceWith("ChIJ-single");
     expect(requestPlacePhotoUrlsBatchMock).not.toHaveBeenCalled();
   });
 
-  it("reuses a batch-seeded photo without issuing a single request", async () => {
-    const queryClient = new QueryClient();
-    registerQueryClient(queryClient);
-    requestPlacePhotoUrlsBatchMock.mockResolvedValue([{status:"OK",googlePlaceId:"ChIJ-seeded",photoUrl:"https://cdn.example/seeded.jpg"}]);
-    await fetchAndSeedPlacePhotoUrls(["ChIJ-seeded"],queryClient);
-    usePlacePhotoUrlQuery("ChIJ-seeded");
-    await expect(queryClient.fetchQuery(useQueryMock.mock.lastCall![0])).resolves.toBe("https://cdn.example/seeded.jpg");
+  it("같은 커밋에 마운트된 카드 사진은 batch 하나로 받는다", async () => {
+    const queryClient = createQueryClient();
+    requestPlacePhotoUrlsBatchMock.mockResolvedValueOnce([
+      ok("ChIJ-a"),
+      { status: "OK", googlePlaceId: "ChIJ-b", photoUrl: null },
+      ok("ChIJ-c"),
+    ]);
+
+    const results = await fetchCards(queryClient, ["ChIJ-a", "ChIJ-b", "ChIJ-c"]);
+
+    expect(results).toEqual([
+      { status: "fulfilled", value: "https://cdn.example/ChIJ-a.jpg" },
+      { status: "fulfilled", value: "" },
+      { status: "fulfilled", value: "https://cdn.example/ChIJ-c.jpg" },
+    ]);
+    expect(requestPlacePhotoUrlsBatchMock).toHaveBeenCalledExactlyOnceWith(["ChIJ-a", "ChIJ-b", "ChIJ-c"]);
     expect(requestPlacePhotoUrlMock).not.toHaveBeenCalled();
+  });
+
+  it("batch 응답 id의 형식이 요청과 달라도 같은 장소로 맞춘다", async () => {
+    const queryClient = createQueryClient();
+    requestPlacePhotoUrlsBatchMock.mockResolvedValueOnce([ok("ChIJ-a"), ok("places/ChIJ-b")]);
+
+    const results = await fetchCards(queryClient, ["places/ChIJ-a", "ChIJ-b"]);
+
+    expect(results).toEqual([
+      { status: "fulfilled", value: "https://cdn.example/ChIJ-a.jpg" },
+      { status: "fulfilled", value: "https://cdn.example/places/ChIJ-b.jpg" },
+    ]);
     expect(requestPlacePhotoUrlsBatchMock).toHaveBeenCalledTimes(1);
+    expect(requestPlacePhotoUrlMock).not.toHaveBeenCalled();
   });
 
-  it("authoritative empty 항목만 캐시하고 per-item FAILED는 cache miss로 남긴다", async () => {
-    const queryClient = new QueryClient();
-    registerQueryClient(queryClient);
-    const emptyId = "ChIJ-authoritative-empty";
-    const failedId = "ChIJ-per-item-failed";
+  it("batch 응답에 id가 빈 항목이 있어도 나머지 장은 받고, 빠진 장만 한 번 더 받는다", async () => {
+    const queryClient = createQueryClient();
     requestPlacePhotoUrlsBatchMock.mockResolvedValueOnce([
-      { status: "OK", googlePlaceId: emptyId },
-      {
-        status: "FAILED",
-        googlePlaceId: failedId,
-        errorCode: "UPSTREAM_TIMEOUT",
-      },
+      ok("ChIJ-a"),
+      { status: "OK", googlePlaceId: null, photoUrl: "https://cdn.example/unknown.jpg" },
     ]);
+    requestPlacePhotoUrlMock.mockResolvedValueOnce("https://cdn.example/ChIJ-b.jpg");
 
-    await fetchAndSeedPlacePhotoUrls([emptyId, failedId], queryClient);
+    const results = await fetchCards(queryClient, ["ChIJ-a", "ChIJ-b"]);
 
-    expect(queryClient.getQueryData(placePhotoUrlQueryKey(emptyId))).toBe("");
-    expect(
-      queryClient.getQueryData(placePhotoUrlQueryKey(failedId)),
-    ).toBeUndefined();
+    expect(results).toEqual([
+      { status: "fulfilled", value: "https://cdn.example/ChIJ-a.jpg" },
+      { status: "fulfilled", value: "https://cdn.example/ChIJ-b.jpg" },
+    ]);
+    expect(requestPlacePhotoUrlsBatchMock).toHaveBeenCalledTimes(1);
+    expect(requestPlacePhotoUrlMock).toHaveBeenCalledExactlyOnceWith("ChIJ-b");
   });
 
-  it("mixed batch의 FAILED 항목은 빈 URL로 고정하지 않고 단건 GET으로 fallback한다", async () => {
-    const queryClient = new QueryClient();
-    registerQueryClient(queryClient);
-    const okId = "ChIJ-ok";
-    const failedId = "ChIJ-failed";
-    const failedItem = {
-      status: "FAILED" as const,
-      googlePlaceId: failedId,
-      errorCode: "UPSTREAM_TIMEOUT",
-    };
+  it("batch 항목이 실패하면 실패한 장만 batch로 한 번 더 받고, 그래도 실패하면 끝낸다", async () => {
+    const queryClient = createQueryClient();
     requestPlacePhotoUrlsBatchMock
-      .mockResolvedValueOnce([
-        {
-          status: "OK",
-          googlePlaceId: okId,
-          photoUrl: "https://cdn.example/ok.jpg",
-        },
-        failedItem,
-      ])
-      .mockResolvedValueOnce([failedItem]);
-    requestPlacePhotoUrlMock.mockResolvedValueOnce(
-      "https://cdn.example/fallback.jpg",
-    );
+      .mockResolvedValueOnce([ok("ChIJ-a"), failed("ChIJ-b"), failed("ChIJ-c")])
+      .mockResolvedValueOnce([ok("ChIJ-b"), failed("ChIJ-c")]);
 
-    await fetchAndSeedPlacePhotoUrls([okId, failedId], queryClient);
+    const [a, b, c] = await fetchCards(queryClient, ["ChIJ-a", "ChIJ-b", "ChIJ-c"]);
 
-    expect(queryClient.getQueryData(placePhotoUrlQueryKey(okId))).toBe(
-      "https://cdn.example/ok.jpg",
-    );
-    expect(queryClient.getQueryData(placePhotoUrlQueryKey(failedId))).toBeUndefined();
-
-    usePlacePhotoUrlQuery(failedId);
-    const queryOptions = useQueryMock.mock.lastCall?.[0];
-    const photoUrl = await queryClient.fetchQuery(queryOptions);
-
-    expect(photoUrl).toBe("https://cdn.example/fallback.jpg");
-    expect(requestPlacePhotoUrlMock).toHaveBeenCalledWith(failedId);
-    expect(queryClient.getQueryData(placePhotoUrlQueryKey(failedId))).toBe(
-      "https://cdn.example/fallback.jpg",
-    );
+    expect(a).toEqual({ status: "fulfilled", value: "https://cdn.example/ChIJ-a.jpg" });
+    expect(b).toEqual({ status: "fulfilled", value: "https://cdn.example/ChIJ-b.jpg" });
+    expect(c.status).toBe("rejected");
+    expect(requestPlacePhotoUrlsBatchMock.mock.calls).toEqual([
+      [["ChIJ-a", "ChIJ-b", "ChIJ-c"]],
+      [["ChIJ-b", "ChIJ-c"]],
+    ]);
+    expect(requestPlacePhotoUrlMock).not.toHaveBeenCalled();
   });
 
-  it("단건 GET 실패 재시도에서는 batch 요청을 보내지 않는다", async () => {
-    const queryClient = new QueryClient();
-    registerQueryClient(queryClient);
-    const failedId = "ChIJ-single-retry";
-    requestPlacePhotoUrlMock
-      .mockRejectedValueOnce(new Error("single request failed once"))
-      .mockRejectedValueOnce(new Error("single request failed twice"))
-      .mockResolvedValueOnce("https://cdn.example/retried.jpg");
+  it("batch 429 → 총 1건: 다시 보내지 않는다", async () => {
+    const queryClient = createQueryClient();
+    requestPlacePhotoUrlsBatchMock.mockRejectedValueOnce(new HttpError(429, "요청이 너무 많습니다"));
 
-    usePlacePhotoUrlQuery(failedId);
-    const queryOptions = useQueryMock.mock.lastCall?.[0];
+    const results = await fetchCards(queryClient, ["ChIJ-a", "ChIJ-b"]);
 
-    await expect(queryClient.fetchQuery(queryOptions)).resolves.toBe(
-      "https://cdn.example/retried.jpg",
-    );
-    expect(requestPlacePhotoUrlsBatchMock).not.toHaveBeenCalled();
-    expect(requestPlacePhotoUrlMock).toHaveBeenCalledTimes(3);
+    expect(results.map((result) => result.status)).toEqual(["rejected", "rejected"]);
+    expect(requestPlacePhotoUrlsBatchMock).toHaveBeenCalledTimes(1);
+    expect(requestPlacePhotoUrlMock).not.toHaveBeenCalled();
   });
 
-  it("seeded multi-photo query도 FAILED 캐시 miss를 빈 URL 성공으로 바꾸지 않는다", async () => {
-    const queryClient = new QueryClient();
-    registerQueryClient(queryClient);
-    const okId = "ChIJ-multi-ok";
-    const failedId = "ChIJ-multi-failed";
-    requestPlacePhotoUrlsBatchMock.mockResolvedValueOnce([
-      {
-        status: "OK",
-        googlePlaceId: okId,
-        photoUrl: "https://cdn.example/multi-ok.jpg",
-      },
-      {
-        status: "FAILED",
-        googlePlaceId: failedId,
-        errorCode: "UPSTREAM_TIMEOUT",
-      },
-    ]);
-    requestPlacePhotoUrlMock.mockResolvedValueOnce(
-      "https://cdn.example/multi-fallback.jpg",
-    );
+  it("항목 오류 + 단건 429 → 총 2건: 실패한 1장은 단건으로 한 번만 받는다", async () => {
+    const queryClient = createQueryClient();
+    requestPlacePhotoUrlsBatchMock.mockResolvedValueOnce([ok("ChIJ-a"), failed("ChIJ-b")]);
+    requestPlacePhotoUrlMock.mockRejectedValueOnce(new HttpError(429, "요청이 너무 많습니다"));
 
-    await fetchAndSeedPlacePhotoUrls([okId, failedId], queryClient);
-    const options = seededPlacePhotoUrlQueryOptions(failedId);
+    const [a, b] = await fetchCards(queryClient, ["ChIJ-a", "ChIJ-b"]);
 
-    await expect(queryClient.fetchQuery(options)).resolves.toBe(
-      "https://cdn.example/multi-fallback.jpg",
-    );
-    expect(requestPlacePhotoUrlMock).toHaveBeenCalledWith(failedId);
-    expect(queryClient.getQueryData(placePhotoUrlQueryKey(failedId))).toBe(
-      "https://cdn.example/multi-fallback.jpg",
-    );
+    expect(a.status).toBe("fulfilled");
+    expect(b.status).toBe("rejected");
+    expect(requestPlacePhotoUrlsBatchMock).toHaveBeenCalledTimes(1);
+    expect(requestPlacePhotoUrlMock).toHaveBeenCalledExactlyOnceWith("ChIJ-b");
   });
 
-  it("seeded multi-photo의 no-photo 캐시도 5분 후 단건 GET을 허용한다", async () => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date("2026-09-02T00:00:00.000Z"));
+  it.each([429, 404, 500, 502])("단건 GET이 %i면 다시 보내지 않는다", async (status) => {
+    const queryClient = createQueryClient();
+    requestPlacePhotoUrlMock.mockRejectedValueOnce(new HttpError(status, "Place photo failed"));
 
-    try {
-      const queryClient = new QueryClient();
-      registerQueryClient(queryClient);
-      const id = "ChIJ-seeded-no-photo";
-      requestPlacePhotoUrlsBatchMock.mockResolvedValueOnce([
-        { status: "OK", googlePlaceId: id, photoUrl: null },
-      ]);
-      await fetchAndSeedPlacePhotoUrls([id], queryClient);
-
-      const options = seededPlacePhotoUrlQueryOptions(id);
-      await expect(queryClient.fetchQuery(options)).resolves.toBe("");
-      expect(requestPlacePhotoUrlMock).not.toHaveBeenCalled();
+    await expect(queryClient.fetchQuery(placePhotoUrlQueryOptions("ChIJ-http-error"))).rejects.toThrow(
+      "Place photo failed",
+    );
+    expect(requestPlacePhotoUrlMock).toHaveBeenCalledTimes(1);
+  });
 
-      vi.advanceTimersByTime(5 * 60 * 1000 + 1);
-      requestPlacePhotoUrlMock.mockResolvedValueOnce(
-        "https://cdn.example/seeded-available-later.jpg",
-      );
+  it("일시적 네트워크 오류만 한 번 더 보낸다", async () => {
+    const queryClient = createQueryClient();
+    requestPlacePhotoUrlMock
+      .mockRejectedValueOnce(new TypeError("Failed to fetch"))
+      .mockResolvedValueOnce("https://cdn.example/retried.jpg");
 
-      const observer = new QueryObserver(queryClient, options);
-      const unsubscribe = observer.subscribe(() => undefined);
-      try {
-        await vi.waitFor(() => {
-          expect(requestPlacePhotoUrlMock).toHaveBeenCalledWith(id);
-          expect(queryClient.getQueryData(options.queryKey)).toBe(
-            "https://cdn.example/seeded-available-later.jpg",
-          );
-        });
-      } finally {
-        unsubscribe();
-      }
-    } finally {
-      vi.useRealTimers();
-    }
+    await expect(
+      queryClient.fetchQuery({ ...placePhotoUrlQueryOptions("ChIJ-network-error"), retryDelay: 0 }),
+    ).resolves.toBe("https://cdn.example/retried.jpg");
+    expect(requestPlacePhotoUrlMock).toHaveBeenCalledTimes(2);
   });
 
-  it("single no-photo is cached for five minutes then retried with a single GET", async () => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date("2026-09-02T00:00:00.000Z"));
+  it("사진 없음('')은 5분 동안 다시 묻지 않는다", async () => {
+    vi.useFakeTimers({ toFake: ["Date"] });
     try {
-      const queryClient = new QueryClient();
-      registerQueryClient(queryClient);
-      const id = "ChIJ-no-photo";
-      requestPlacePhotoUrlMock.mockResolvedValueOnce("").mockResolvedValueOnce("https://cdn.example/available-later.jpg");
-      usePlacePhotoUrlQuery(id);
-      const options = useQueryMock.mock.lastCall![0];
+      const now = new Date("2026-10-25T00:00:00.000Z").getTime();
+      vi.setSystemTime(now);
+      const queryClient = createQueryClient();
+      requestPlacePhotoUrlMock
+        .mockResolvedValueOnce("")
+        .mockResolvedValueOnce("https://cdn.example/available-later.jpg");
+      const options = placePhotoUrlQueryOptions("ChIJ-no-photo");
+
       await expect(queryClient.fetchQuery(options)).resolves.toBe("");
-      vi.advanceTimersByTime(4 * 60 * 1000);
+      vi.setSystemTime(now + 4 * 60 * 1000);
       await expect(queryClient.fetchQuery(options)).resolves.toBe("");
       expect(requestPlacePhotoUrlMock).toHaveBeenCalledTimes(1);
-      vi.advanceTimersByTime(60 * 1000 + 1);
-      await expect(queryClient.fetchQuery(options)).resolves.toBe("https://cdn.example/available-later.jpg");
-      expect(requestPlacePhotoUrlMock).toHaveBeenCalledTimes(2);
-      expect(requestPlacePhotoUrlsBatchMock).not.toHaveBeenCalled();
-    } finally { vi.useRealTimers(); }
-  });
-
-  it("만료된 no-photo 뒤 batch FAILED면 낡은 빈 값을 쓰지 않고 단건 fallback한다", async () => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date("2026-09-02T00:00:00.000Z"));
-
-    try {
-      const queryClient = new QueryClient();
-      registerQueryClient(queryClient);
-      const id = "ChIJ-expired-then-failed";
-      requestPlacePhotoUrlsBatchMock
-        .mockResolvedValueOnce([
-          { status: "OK", googlePlaceId: id, photoUrl: null },
-        ])
-        .mockResolvedValueOnce([
-          {
-            status: "FAILED",
-            googlePlaceId: id,
-            errorCode: "UPSTREAM_TIMEOUT",
-          },
-        ]);
-      requestPlacePhotoUrlMock.mockResolvedValueOnce(
-        "https://cdn.example/single-fallback.jpg",
-      );
-
-      await fetchAndSeedPlacePhotoUrls([id], queryClient);
-      usePlacePhotoUrlQuery(id);
-      const queryOptions = useQueryMock.mock.lastCall?.[0];
-      await expect(queryClient.fetchQuery(queryOptions)).resolves.toBe("");
-
-      vi.advanceTimersByTime(5 * 60 * 1000 + 1);
-      await fetchAndSeedPlacePhotoUrls([id], queryClient);
-
-      await expect(queryClient.fetchQuery(queryOptions)).resolves.toBe(
-        "https://cdn.example/single-fallback.jpg",
-      );
-      expect(requestPlacePhotoUrlsBatchMock).toHaveBeenCalledTimes(2);
-      expect(requestPlacePhotoUrlMock).toHaveBeenCalledWith(id);
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it("중간 ensure 호출이 no-photo의 최초 5분 TTL을 연장하지 않는다", async () => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date("2026-09-02T00:00:00.000Z"));
 
-    try {
-      const queryClient = new QueryClient();
-      registerQueryClient(queryClient);
-      const id = "ChIJ-no-photo-ensure";
-      requestPlacePhotoUrlsBatchMock
-        .mockResolvedValueOnce([
-          { status: "OK", googlePlaceId: id, photoUrl: null },
-        ])
-        .mockResolvedValueOnce([
-          {
-            status: "OK",
-            googlePlaceId: id,
-            photoUrl: "https://cdn.example/available-after-ttl.jpg",
-          },
-        ]);
-
-      await ensurePlacePhotoUrlsCached([id], queryClient);
-      vi.advanceTimersByTime(4 * 60 * 1000);
-      await ensurePlacePhotoUrlsCached([id], queryClient);
-      vi.advanceTimersByTime(60 * 1000 + 1);
-      await ensurePlacePhotoUrlsCached([id], queryClient);
-
-      expect(requestPlacePhotoUrlsBatchMock).toHaveBeenCalledTimes(2);
-      expect(queryClient.getQueryData(placePhotoUrlQueryKey(id))).toBe(
-        "https://cdn.example/available-after-ttl.jpg",
+      vi.setSystemTime(now + 5 * 60 * 1000 + 1);
+      await expect(queryClient.fetchQuery(options)).resolves.toBe(
+        "https://cdn.example/available-later.jpg",
       );
+      expect(requestPlacePhotoUrlMock).toHaveBeenCalledTimes(2);
     } finally {
       vi.useRealTimers();
     }
diff --git a/src/hooks/usePlacePhotoUrl.ts b/src/hooks/usePlacePhotoUrl.ts
index 47467def..444b6e71 100644
--- a/src/hooks/usePlacePhotoUrl.ts
+++ b/src/hooks/usePlacePhotoUrl.ts
@@ -1,93 +1,28 @@
-import { useMemo } from "react";
-import { useQueries, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 
-import { requestPlacePhotoUrl } from "@/lib/api/places";
-import { fetchAndSeedPlacePhotoUrls } from "@/lib/places/place-batch-cache";
 import {
-  PLACE_PHOTO_QUERY_GC_MS,
+  loadPlacePhotoUrl,
   placePhotoUrlQueryDefaults,
   placePhotoUrlQueryKey,
-  seededPlacePhotoUrlQueryOptions,
 } from "@/lib/place-photo-query";
-import { getQueryClient } from "@/lib/query-client";
 
-export function usePlacePhotoUrlQuery(
+/** 장소 사진 주소 조회 옵션 — useQuery 밖에서도 같은 키·queryFn·캐시 설정을 쓰게 한다 */
+export function placePhotoUrlQueryOptions(
   googlePlaceId: string | null | undefined,
   options?: { enabled?: boolean },
 ) {
   const id = typeof googlePlaceId === "string" ? googlePlaceId.trim() : "";
-  const queryKey = placePhotoUrlQueryKey(id);
-  return useQuery({
-    queryKey,
-    queryFn: () => requestPlacePhotoUrl(id),
+  return {
+    queryKey: placePhotoUrlQueryKey(id),
+    queryFn: () => loadPlacePhotoUrl(id),
     enabled: id.length > 0 && (options?.enabled ?? true),
     ...placePhotoUrlQueryDefaults,
-  });
+  };
 }
 
-export function useSeededPlacePhotoUrlQuery(
+export function usePlacePhotoUrlQuery(
   googlePlaceId: string | null | undefined,
   options?: { enabled?: boolean },
 ) {
-  const id = typeof googlePlaceId === "string" ? googlePlaceId.trim() : "";
-  return useQuery(
-    seededPlacePhotoUrlQueryOptions(id, {
-      enabled: (options?.enabled ?? true) && id.length > 0,
-    }),
-  );
-}
-
-/**
- * 여러 googlePlaceId를 단일 카드와 동일한 `["places","photoUrl",id]` 캐시 키로 해석.
- * 미캐시 id는 batch API 1회로 시딩 후 개별 query subscribe.
- */
-export function usePlacePhotoUrlsQuery(
-  googlePlaceIds: readonly (string | null | undefined)[] | null | undefined,
-) {
-  const ids = useMemo(
-    () =>
-      (googlePlaceIds ?? [])
-        .map((id) => (typeof id === "string" ? id.trim() : ""))
-        .filter((id) => id.length > 0),
-    [googlePlaceIds],
-  );
-
-  const idsKey = ids.join("\0");
-
-  const seedQuery = useQuery({
-    queryKey: ["places", "photoUrlsSeed", idsKey],
-    queryFn: async () => {
-      await fetchAndSeedPlacePhotoUrls(ids, getQueryClient());
-      return true;
-    },
-    enabled: ids.length > 0,
-    staleTime: Infinity,
-    gcTime: PLACE_PHOTO_QUERY_GC_MS,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    retry: 1,
-  });
-
-  const photosSeeded = ids.length === 0 || seedQuery.isSuccess;
-
-  const results = useQueries({
-    queries: ids.map((id) =>
-      seededPlacePhotoUrlQueryOptions(id, { enabled: photosSeeded }),
-    ),
-  });
-
-  const photoUrls = useMemo(
-    () =>
-      results
-        .map((r) => (typeof r.data === "string" ? r.data.trim() : ""))
-        .filter((u) => u.length > 0),
-    [results],
-  );
-
-  const isLoading =
-    ids.length > 0 &&
-    (seedQuery.isLoading || !photosSeeded || results.some((r) => r.isLoading));
-
-  return { photoUrls, isLoading };
+  return useQuery(placePhotoUrlQueryOptions(googlePlaceId, options));
 }
diff --git a/src/hooks/usePlacesSearch.test.ts b/src/hooks/usePlacesSearch.test.ts
index 3aa9924a..c94bf21b 100644
--- a/src/hooks/usePlacesSearch.test.ts
+++ b/src/hooks/usePlacesSearch.test.ts
@@ -1,7 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const apiFetch = vi.fn();
-const fetchAndSeedPlacePhotoUrls = vi.fn();
 
 vi.mock("@/lib/api/client", () => ({
   apiFetch,
@@ -11,14 +10,9 @@ vi.mock("@/lib/api/config", () => ({
   API_BASE: "https://api.example.test",
 }));
 
-vi.mock("@/lib/places/place-batch-cache", () => ({
-  fetchAndSeedPlacePhotoUrls,
-}));
-
 describe("fetchPlacesPageWithPhotos", () => {
   beforeEach(() => {
     apiFetch.mockReset();
-    fetchAndSeedPlacePhotoUrls.mockReset();
   });
 
   it("does not prefetch photo URLs for the full search result page", async () => {
@@ -52,7 +46,7 @@ describe("fetchPlacesPageWithPhotos", () => {
       pageToken: undefined,
     });
 
-    expect(fetchAndSeedPlacePhotoUrls).not.toHaveBeenCalled();
+    expect(apiFetch).toHaveBeenCalledTimes(1);
     expect(page.items[0]?.googlePlaceId).toBe("ChIJ-place-1");
     expect(page.items[0]).not.toHaveProperty("image");
   });
diff --git a/src/hooks/usePlacesSearch.ts b/src/hooks/usePlacesSearch.ts
index 6aea8de3..6a6c91f3 100644
--- a/src/hooks/usePlacesSearch.ts
+++ b/src/hooks/usePlacesSearch.ts
@@ -5,6 +5,7 @@ import { useCallback, useState } from "react";
 
 import {
   searchPlaces,
+  searchPlacesInArea,
   type PlaceSearchItem,
 } from "@/lib/api/places";
 import type { SearchResultCardProps } from "@/types/place";
@@ -55,6 +56,19 @@ export async function fetchPlacesPageWithPhotos(args: {
   return { items: itemsBase, nextPageToken };
 }
 
+export async function fetchPlacesAreaPage(args: {
+  query: string;
+  area: google.maps.LatLngBoundsLiteral;
+  pageSize: number;
+}): Promise<PlaceSearchPage> {
+  const { items, nextPageToken } = await searchPlacesInArea({
+    query: args.query,
+    ...args.area,
+    pageSize: args.pageSize,
+  });
+  return { items: items.map((item) => mapPlaceSearchItem(item)), nextPageToken };
+}
+
 export function placesSearchQueryKey(
   query: string,
   latitude: number | null,
diff --git a/src/hooks/usePlanItineraryReorder.analytics.test.tsx b/src/hooks/usePlanItineraryReorder.analytics.test.tsx
index 03f1e9f0..452d1cff 100644
--- a/src/hooks/usePlanItineraryReorder.analytics.test.tsx
+++ b/src/hooks/usePlanItineraryReorder.analytics.test.tsx
@@ -12,6 +12,10 @@ const api = vi.hoisted(() => ({ reorder: vi.fn() }));
 vi.mock("@/lib/client-env", () => ({ clientEnv: { NEXT_PUBLIC_API_BASE_URL: "https://api.example.test" } }));
 vi.mock("@/lib/api/rooms", async (original) => ({ ...await original<object>(), reorderScheduleItem: api.reorder }));
 vi.mock("@/lib/analytics/track", () => ({ AnalyticsEvents: { reorderItinerary: "reorder_itinerary" }, trackAnalyticsEvent: vi.fn() }));
+const toastError = vi.hoisted(() => vi.fn());
+vi.mock("sonner", () => ({ toast: { error: toastError } }));
+const stomp = vi.hoisted(() => ({ connected: true }));
+vi.mock("@/contexts/StompContext", () => ({ useStompContext: () => stomp }));
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 
 it("attributes a completed drag reorder to the request's room after the hook switches rooms", async () => {
@@ -59,3 +63,88 @@ it("attributes a completed drag reorder to the request's room after the hook swi
     client.clear();
   }
 });
+
+it("saves the dragged item at the dropped index even when the day's list changed during the drag", async () => {
+  api.reorder.mockClear();
+  type Place = { id: string; itemId: number; title: string };
+  const placesAtStart: Place[] = [{ id: "item-1", itemId: 1, title: "One" }, { id: "item-2", itemId: 2, title: "Two" }];
+  const client = new QueryClient({ defaultOptions: { mutations: { retry: false } } });
+  const hook = hookHarness((places: Place[]) => usePlanItineraryReorder({ roomId: "room-a", scheduleId: 1, places }),
+    (child) => <QueryClientProvider client={client}>{child}</QueryClientProvider>);
+  const data = new Map<string, string>();
+  const dataTransfer = {
+    setData: (key: string, value: string) => data.set(key, value),
+    getData: (key: string) => data.get(key) ?? "",
+    setDragImage: () => {},
+    get types() { return Array.from(data.keys()); },
+  } as unknown as DataTransfer;
+  const rows = [0, 1].map((index) => {
+    const row = document.createElement("div");
+    row.getBoundingClientRect = () => ({ top: index * 100, left: 0, width: 200, height: 100, bottom: index * 100 + 100, right: 200, x: 0, y: index * 100, toJSON: () => ({}) });
+    return row;
+  });
+  const event = { dataTransfer, currentTarget: rows[0], clientX: 10, clientY: 10, preventDefault: () => {} };
+  try {
+    await hook.render(placesAtStart);
+    rows.forEach((row, index) => hook.current.getRowProps(index, false).ref(row));
+    await act(async () => hook.current.getRowProps(0, false).placeCardDragProps.onDragStart({ ...event, nativeEvent: event } as unknown as DragEvent<Element>));
+    await act(async () => {
+      hook.current.listContainerProps.onDragOver!({ ...event, clientY: 190 } as unknown as DragEvent<Element>);
+      await new Promise((yes) => requestAnimationFrame(yes));
+    });
+    // 드래그하는 동안 다른 사람이 맨 앞에 장소를 추가했다
+    await hook.render([{ id: "item-3", itemId: 3, title: "Three" }, ...placesAtStart]);
+    await act(async () => { await hook.current.listContainerProps.onDrop!(event as unknown as DragEvent<Element>); });
+
+    expect(api.reorder).toHaveBeenCalledWith("room-a", 1, 1, { newOrderIndex: 1 });
+  } finally {
+    document.dispatchEvent(new Event("dragend"));
+    await hook.unmount();
+    client.clear();
+  }
+});
+
+it("does not save a drop made while the connection is down", async () => {
+  api.reorder.mockClear();
+  toastError.mockClear();
+  const places = [{ id: "item-1", itemId: 1, title: "One" }, { id: "item-2", itemId: 2, title: "Two" }];
+  const client = new QueryClient({ defaultOptions: { mutations: { retry: false } } });
+  const hook = hookHarness((connected: boolean) => {
+    stomp.connected = connected;
+    return usePlanItineraryReorder({ roomId: "room-a", scheduleId: 1, places });
+  }, (child) => <QueryClientProvider client={client}>{child}</QueryClientProvider>);
+  const data = new Map<string, string>();
+  const dataTransfer = {
+    setData: (key: string, value: string) => data.set(key, value),
+    getData: (key: string) => data.get(key) ?? "",
+    setDragImage: () => {},
+    get types() { return Array.from(data.keys()); },
+  } as unknown as DataTransfer;
+  const rows = [0, 1].map((index) => {
+    const row = document.createElement("div");
+    row.getBoundingClientRect = () => ({ top: index * 100, left: 0, width: 200, height: 100, bottom: index * 100 + 100, right: 200, x: 0, y: index * 100, toJSON: () => ({}) });
+    return row;
+  });
+  const event = { dataTransfer, currentTarget: rows[0], clientX: 10, clientY: 10, preventDefault: () => {} };
+  try {
+    await hook.render(true);
+    rows.forEach((row, index) => hook.current.getRowProps(index, false).ref(row));
+    await act(async () => hook.current.getRowProps(0, false).placeCardDragProps.onDragStart({ ...event, nativeEvent: event } as unknown as DragEvent<Element>));
+    await act(async () => {
+      hook.current.listContainerProps.onDragOver!({ ...event, clientY: 190 } as unknown as DragEvent<Element>);
+      await new Promise((yes) => requestAnimationFrame(yes));
+    });
+    // 드래그하는 동안 연결이 끊겼다
+    await hook.render(false);
+    expect(hook.current.getRowProps(1, false).placeCardDragProps.dragDisabled).toBe(true);
+    await act(async () => { await hook.current.listContainerProps.onDrop!(event as unknown as DragEvent<Element>); });
+
+    expect(api.reorder).not.toHaveBeenCalled();
+    expect(toastError).toHaveBeenCalledOnce();
+  } finally {
+    stomp.connected = true;
+    document.dispatchEvent(new Event("dragend"));
+    await hook.unmount();
+    client.clear();
+  }
+});
diff --git a/src/hooks/usePlanItineraryReorder.ts b/src/hooks/usePlanItineraryReorder.ts
index 0e682e0f..183de7aa 100644
--- a/src/hooks/usePlanItineraryReorder.ts
+++ b/src/hooks/usePlanItineraryReorder.ts
@@ -10,6 +10,7 @@ import {
 import { toast } from "sonner";
 
 import { useDragAutoScroll } from "@/hooks/useDragAutoScroll";
+import { useScheduleResyncPending } from "@/hooks/useScheduleResyncPending";
 import {
   useMoveScheduleItemToSchedule,
   useReorderScheduleItem,
@@ -24,9 +25,11 @@ import {
   executePlanItemCrossDayMove,
   getPlanItemRowReorderStyle,
   isPlanItemDrag,
+  PLAN_ORDER_RESYNCING_MESSAGE,
   type PlanItemRowPreviewMode,
   PlanItemRowLayoutSnapshot,
   readPlanItemDragIndex,
+  readPlanItemDragItemId,
 } from "@/lib/plan/planItemReorder";
 import { newOrderIndexAfterMove } from "@/lib/plan/scheduleItemPlaces";
 import type { PlanPlace } from "@/lib/plan/types";
@@ -57,7 +60,7 @@ export function usePlanItineraryReorder({
   places,
   interactionLocked = false,
 }: UsePlanItineraryReorderArgs) {
-  const { mutateAsync: reorderMutate, isReorderSettling } =
+  const { mutateAsync: reorderMutate, isPending: isReorderPending } =
     useReorderScheduleItem();
   const { mutateAsync: moveMutate, isPending: isMovePending } =
     useMoveScheduleItemToSchedule();
@@ -79,7 +82,8 @@ export function usePlanItineraryReorder({
   const externalCaptureRafRef = useRef(0);
 
   const mutationLocked =
-    interactionLocked || isReorderSettling || isMovePending;
+    interactionLocked || isReorderPending || isMovePending;
+  const scheduleResyncPending = useScheduleResyncPending(roomId);
   const isDraggingActive = dragFromIndex !== null || incomingExternalDrag;
 
   useDragAutoScroll({ active: isDraggingActive });
@@ -167,7 +171,9 @@ export function usePlanItineraryReorder({
   const handleDragStart = useCallback(
     (index: number) => (e: DragEvent<Element>) => {
       const itemId = places[index]?.itemId;
-      if (mutationLocked || typeof itemId !== "number") return;
+      if (mutationLocked || scheduleResyncPending || typeof itemId !== "number") {
+        return;
+      }
       const target = e.currentTarget;
       if (!(target instanceof HTMLElement)) return;
       beginPlanItemDrag(e.nativeEvent, target, index, {
@@ -182,7 +188,7 @@ export function usePlanItineraryReorder({
       setDragFromIndex(index);
       setPreviewIndex(index);
     },
-    [beginItemDrag, mutationLocked, places, scheduleId],
+    [beginItemDrag, mutationLocked, places, scheduleId, scheduleResyncPending],
   );
 
   const handleDragEnd = useCallback(() => {
@@ -260,6 +266,13 @@ export function usePlanItineraryReorder({
         previewIndex ??
         (Number.isFinite(fromIndex) ? fromIndex : null);
 
+      // 드래그하는 동안 연결이 끊겼으면 놓은 자리를 서버 순서로 확인할 수 없다
+      if (scheduleResyncPending) {
+        resetDragPreview();
+        toast.error(PLAN_ORDER_RESYNCING_MESSAGE);
+        return;
+      }
+
       const crossDayHandled = await executePlanItemCrossDayMove({
         dataTransfer,
         roomId,
@@ -290,7 +303,8 @@ export function usePlanItineraryReorder({
         return;
       }
 
-      const itemId = places[fromIndex]?.itemId;
+      const itemId =
+        readPlanItemDragItemId(dataTransfer) ?? places[fromIndex]?.itemId;
       if (typeof itemId !== "number") return;
 
       try {
@@ -323,6 +337,7 @@ export function usePlanItineraryReorder({
       resetDragPreview,
       roomId,
       scheduleId,
+      scheduleResyncPending,
     ],
   );
 
@@ -377,7 +392,9 @@ export function usePlanItineraryReorder({
           displayOrderIndex,
           isDragging,
           dragDisabled:
-            mutationLocked || typeof places[index]?.itemId !== "number",
+            mutationLocked ||
+            scheduleResyncPending ||
+            typeof places[index]?.itemId !== "number",
           onDragStart: handleDragStart(index),
           onDragEnd: handleDragEnd,
         },
@@ -392,6 +409,7 @@ export function usePlanItineraryReorder({
       mutationLocked,
       places,
       previewIndex,
+      scheduleResyncPending,
       setRowRef,
     ],
   );
@@ -411,7 +429,7 @@ export function usePlanItineraryReorder({
     getRowProps,
     listContainerProps,
     isDraggingActive,
-    isReorderSettling: isReorderSettling || isMovePending,
+    isReorderSettling: isReorderPending || isMovePending,
     listReservePaddingBottom,
   };
 }
diff --git a/src/hooks/usePlanItineraryStopNormalizedPlaceIds.ts b/src/hooks/usePlanItineraryStopNormalizedPlaceIds.ts
index 46e866cb..1f5bd983 100644
--- a/src/hooks/usePlanItineraryStopNormalizedPlaceIds.ts
+++ b/src/hooks/usePlanItineraryStopNormalizedPlaceIds.ts
@@ -5,8 +5,7 @@ import { useMemo } from "react";
 
 import { useRoomSchedules } from "@/hooks/useRooms";
 import { normalizeGooglePlaceResourceId } from "@/lib/maps";
-import { readSchedulePlanPlacesFromCache } from "@/lib/plan/scheduleItemPlaces";
-import { scheduleItemsQueryKey } from "@/lib/query-keys";
+import { schedulePlanPlacesQueryOptions } from "@/lib/plan/scheduleItemPlaces";
 import { usePlanScheduleRouteVisibilityStore } from "@/stores/plan-schedule-route-visibility-store";
 import { useSessionStore } from "@/stores/session-store";
 
@@ -41,15 +40,12 @@ export function usePlanItineraryStopNormalizedPlaceIds(
 
   const placesQueries = useQueries({
     queries: orderedScheduleIdsForQueries.map((scheduleId) => ({
-      queryKey: scheduleItemsQueryKey(rid || null, scheduleId),
-      queryFn: () => readSchedulePlanPlacesFromCache(queryClient, rid, scheduleId),
+      ...schedulePlanPlacesQueryOptions(queryClient, rid, scheduleId),
       enabled:
         enabled &&
         rid.length > 0 &&
         orderedScheduleIdsForQueries.length > 0 &&
         schedulesHydrated,
-      staleTime: Infinity,
-      refetchOnMount: false,
       refetchOnWindowFocus: false,
     })),
   });
diff --git a/src/hooks/usePlanScheduleDayReorder.ts b/src/hooks/usePlanScheduleDayReorder.ts
index f8cb348d..710971fe 100644
--- a/src/hooks/usePlanScheduleDayReorder.ts
+++ b/src/hooks/usePlanScheduleDayReorder.ts
@@ -10,11 +10,13 @@ import {
 import { toast } from "sonner";
 
 import { useDragAutoScroll } from "@/hooks/useDragAutoScroll";
+import { useScheduleResyncPending } from "@/hooks/useScheduleResyncPending";
 import { useMoveRoomSchedule } from "@/hooks/useRooms";
 import type { RoomSchedule } from "@/lib/api/rooms";
 import {
   computeRowTranslateY,
   getPlanItemRowReorderStyle,
+  PLAN_ORDER_RESYNCING_MESSAGE,
   PlanItemRowLayoutSnapshot,
 } from "@/lib/plan/planItemReorder";
 import {
@@ -44,6 +46,7 @@ export function usePlanScheduleDayReorder({
   const pointerYRef = useRef(0);
   const dragOverRafRef = useRef(0);
 
+  const scheduleResyncPending = useScheduleResyncPending(roomId);
   const dragLocked =
     interactionLocked || isMovePending || schedules.length < 2;
   const isDraggingActive = dragFromIndex !== null;
@@ -90,7 +93,7 @@ export function usePlanScheduleDayReorder({
 
   const handleDragStart = useCallback(
     (index: number) => (e: DragEvent<Element>) => {
-      if (dragLocked || schedules[index] == null) return;
+      if (dragLocked || scheduleResyncPending || schedules[index] == null) return;
       const sectionEl = sectionRefs.current[index];
       if (sectionEl instanceof HTMLElement) {
         beginPlanScheduleDayDrag(e.nativeEvent, sectionEl, index);
@@ -99,7 +102,7 @@ export function usePlanScheduleDayReorder({
       setDragFromIndex(index);
       setPreviewIndex(index);
     },
-    [dragLocked, schedules],
+    [dragLocked, scheduleResyncPending, schedules],
   );
 
   const handleDragEnd = useCallback(() => {
@@ -144,6 +147,12 @@ export function usePlanScheduleDayReorder({
 
       resetDragPreview();
 
+      // 드래그하는 동안 연결이 끊겼으면 놓은 자리를 서버 순서로 확인할 수 없다
+      if (scheduleResyncPending) {
+        toast.error(PLAN_ORDER_RESYNCING_MESSAGE);
+        return;
+      }
+
       if (
         !Number.isFinite(fromIndex) ||
         fromIndex < 0 ||
@@ -175,7 +184,7 @@ export function usePlanScheduleDayReorder({
         );
       }
     },
-    [moveMutate, previewIndex, resetDragPreview, roomId, schedules],
+    [moveMutate, previewIndex, resetDragPreview, roomId, scheduleResyncPending, schedules],
   );
 
   const getSectionProps = useCallback(
@@ -209,7 +218,8 @@ export function usePlanScheduleDayReorder({
           motionEnabled: isDraggingActive,
         }),
         dragHandleProps: {
-          dragDisabled: dragLocked || schedules[index] == null,
+          dragDisabled:
+            dragLocked || scheduleResyncPending || schedules[index] == null,
           isDragging,
           onDragStart: handleDragStart(index),
           onDragEnd: handleDragEnd,
@@ -223,6 +233,7 @@ export function usePlanScheduleDayReorder({
       handleDragStart,
       isDraggingActive,
       previewIndex,
+      scheduleResyncPending,
       schedules,
       setSectionRef,
     ],
diff --git a/src/hooks/usePrefetchScheduleRoutes.ts b/src/hooks/usePrefetchScheduleRoutes.ts
index b4c52dd3..93c6bd48 100644
--- a/src/hooks/usePrefetchScheduleRoutes.ts
+++ b/src/hooks/usePrefetchScheduleRoutes.ts
@@ -7,7 +7,7 @@ import type { PlanPlace } from "@/lib/plan/types";
 
 /**
  * 페이지 진입·새로고침 시 일차별 구간 경로를 저장된 공유 이동수단 기준 `routes/batch`로 1회 시딩합니다.
- * 리오더·추가·삭제 등으로 장소 목록이 바뀌면 batch는 재호출하지 않고, 무효화된 구간만 개별 GET합니다.
+ * 리오더·추가·삭제 등으로 장소 목록이 바뀌면 batch는 재호출하지 않고, 새로 생긴 구간(받은 적 없는 출발·도착 항목)만 개별 GET합니다.
  */
 export function usePrefetchScheduleRoutes(
   roomId: string,
diff --git a/src/hooks/useRoomSchedules.test.tsx b/src/hooks/useRoomSchedules.test.tsx
new file mode 100644
index 00000000..43ceeaa3
--- /dev/null
+++ b/src/hooks/useRoomSchedules.test.tsx
@@ -0,0 +1,47 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { expect, it, vi } from "vitest";
+
+import { roomSchedulesQueryKey } from "@/lib/query-keys";
+import { useRoomSchedules } from "./useRooms";
+
+const rooms = vi.hoisted(() => ({ hydrate: vi.fn() }));
+vi.mock("@/lib/rooms", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  hydrateRoomSchedulesFromServer: rooms.hydrate,
+}));
+
+function Probe() {
+  useRoomSchedules("room");
+  return null;
+}
+
+it("reuses schedules on reentry but refetches them when they were invalidated while away", async () => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  rooms.hydrate.mockResolvedValue([]);
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const root = createRoot(document.createElement("div"));
+  const render = (visible: boolean) =>
+    root.render(
+      <QueryClientProvider client={client}>{visible && <Probe />}</QueryClientProvider>,
+    );
+  try {
+    await act(async () => render(true));
+    await act(async () => render(false));
+    await act(async () => render(true));
+    expect(rooms.hydrate).toHaveBeenCalledTimes(1);
+
+    await act(async () => render(false));
+    await client.invalidateQueries({ queryKey: roomSchedulesQueryKey("room") });
+    expect(rooms.hydrate).toHaveBeenCalledTimes(1);
+
+    await act(async () => render(true));
+    expect(rooms.hydrate).toHaveBeenCalledTimes(2);
+  } finally {
+    await act(async () => root.unmount());
+    client.clear();
+    vi.unstubAllGlobals();
+  }
+});
diff --git a/src/hooks/useRoomUnreadCount.ts b/src/hooks/useRoomUnreadCount.ts
index 79872cbf..60efcd3d 100644
--- a/src/hooks/useRoomUnreadCount.ts
+++ b/src/hooks/useRoomUnreadCount.ts
@@ -16,7 +16,6 @@ export function useRoomUnreadCount(roomId: string | null) {
     /** 패널 열림 중에는 GET 없음 — STOMP read + optimistic 캐시만 사용 */
     enabled: id.length > 0 && !chatPanelOpen,
     staleTime: Number.POSITIVE_INFINITY,
-    refetchOnMount: false,
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
   });
diff --git a/src/hooks/useRooms.analytics.test.tsx b/src/hooks/useRooms.analytics.test.tsx
index 52075034..4c8a0a56 100644
--- a/src/hooks/useRooms.analytics.test.tsx
+++ b/src/hooks/useRooms.analytics.test.tsx
@@ -11,14 +11,14 @@ import { roomDetailQueryKey, roomMembersQueryKey, sessionUserQueryKey } from "@/
 import { useSessionStore } from "@/stores/session-store";
 
 const calls = vi.hoisted(() => ({
-  issue: vi.fn(), update: vi.fn(), hydrate: vi.fn(),
+  issue: vi.fn(), update: vi.fn(), refresh: vi.fn(),
   track: vi.fn(), initAll: vi.fn(async () => {}), setUserId: vi.fn(), setOptOut: vi.fn(), reset: vi.fn(),
 }));
 vi.mock("@/lib/api/rooms", async (original) => ({
   ...await original<object>(), regenerateInviteCode: calls.issue, updateRoom: calls.update,
 }));
 vi.mock("@/lib/rooms", async (original) => ({
-  ...await original<object>(), hydrateRoomSchedulesFromServer: calls.hydrate,
+  ...await original<object>(), refreshRoomSchedules: calls.refresh,
 }));
 vi.mock("@amplitude/unified", () => ({
   track: calls.track, initAll: calls.initAll, setUserId: calls.setUserId, setOptOut: calls.setOptOut, reset: calls.reset,
@@ -57,7 +57,7 @@ beforeEach(async () => {
   await Promise.resolve(); await Promise.resolve();
   calls.issue.mockResolvedValue({ inviteCode: "new-private-code" });
   calls.update.mockResolvedValue({ ...detail, title: "changed-private-title" });
-  calls.hydrate.mockResolvedValue([]);
+  calls.refresh.mockResolvedValue([]);
   await act(async () => { renderer = create(<QueryClientProvider client={client}><Harness /></QueryClientProvider>); });
 });
 afterEach(async () => {
@@ -84,7 +84,7 @@ it("does not count automatic fallback or failed issuance", async () => {
 });
 it("uses the actual PATCH response role and counts success before a failing follow-up refresh", async () => {
   client.setQueryData(roomDetailQueryKey(detail.id), { ...detail, role: "HOST" });
-  calls.hydrate.mockRejectedValue(new Error("refresh failed"));
+  calls.refresh.mockRejectedValue(new Error("refresh failed"));
   await act(async () => { await expect(update.mutateAsync({ ...variables, data: { endDate: "2026-10-13" } })).rejects.toThrow("refresh failed"); });
   expect(events()).toEqual([{ event_type: "room_info_updated", event_properties: { room_id: detail.id, role: "member", page_path: "/", page_location: window.location.origin + "/" }, groups: { room_id: detail.id } }]);
 });
diff --git a/src/hooks/useRooms.schedule-items.test.tsx b/src/hooks/useRooms.schedule-items.test.tsx
new file mode 100644
index 00000000..8018efd9
--- /dev/null
+++ b/src/hooks/useRooms.schedule-items.test.tsx
@@ -0,0 +1,94 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import {
+  QueryClient,
+  QueryClientProvider,
+  QueryObserver,
+} from "@tanstack/react-query";
+import { expect, it, vi } from "vitest";
+
+import type { RoomScheduleItem } from "@/lib/api/rooms/schedule-items";
+import { schedulePlanPlacesQueryOptions } from "@/lib/plan/scheduleItemPlaces";
+import type { PlanPlace } from "@/lib/plan/types";
+import { scheduleItemsQueryKey } from "@/lib/query-keys";
+import { hookHarness } from "@/test/hook-harness";
+
+import { useDeleteScheduleItem } from "./useRooms";
+
+const api = vi.hoisted(() => ({
+  deleteScheduleItem: vi.fn(),
+  getScheduleItems: vi.fn(),
+}));
+vi.mock("@/lib/client-env", () => ({
+  clientEnv: { NEXT_PUBLIC_API_BASE_URL: "https://api.example.test" },
+}));
+vi.mock("@/lib/api/rooms/schedule-items", async (original) => ({
+  ...(await original<object>()),
+  deleteScheduleItem: api.deleteScheduleItem,
+  getScheduleItems: api.getScheduleItems,
+}));
+vi.mock("@/contexts/StompContext", () => ({
+  useStompContext: () => ({ connected: true }),
+}));
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const place = (itemId: number): PlanPlace => ({
+  id: `item-${itemId}`,
+  itemId,
+  googlePlaceId: `g${itemId}`,
+  title: `장소 ${itemId}`,
+});
+const items = (...itemIds: number[]): RoomScheduleItem[] =>
+  itemIds.map((itemId, orderIndex) => ({
+    itemId,
+    scheduleId: 10,
+    googlePlaceId: `g${itemId}`,
+    startTime: null,
+    endTime: null,
+    orderIndex,
+    travelMode: "DRIVING",
+    createdAt: "",
+  }));
+
+it("refetches the day after the user's own delete so an older in-flight refetch cannot bring the place back", async () => {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  const key = scheduleItemsQueryKey("room-1", 10);
+  client.setQueryData(key, [place(100), place(101)]);
+  // 일정 화면처럼 일차 목록을 보고 있는 구독자
+  const unwatch = new QueryObserver(
+    client,
+    schedulePlanPlacesQueryOptions(client, "room-1", 10),
+  ).subscribe(() => {});
+  let resolveBeforeDelete!: (rows: RoomScheduleItem[]) => void;
+  api.getScheduleItems
+    .mockReturnValueOnce(
+      new Promise<RoomScheduleItem[]>((resolve) => {
+        resolveBeforeDelete = resolve;
+      }),
+    )
+    .mockResolvedValueOnce(items(100));
+  api.deleteScheduleItem.mockResolvedValue(undefined);
+  const hook = hookHarness(
+    () => useDeleteScheduleItem(),
+    (child) => <QueryClientProvider client={client}>{child}</QueryClientProvider>,
+  );
+  try {
+    await hook.render(undefined);
+    // 다른 사람의 변경으로 일차를 다시 받는 중에 본인이 101을 지운다
+    void client.invalidateQueries({ queryKey: key, exact: true });
+    await act(async () => {
+      await hook.current.mutateAsync({ roomId: "room-1", scheduleId: 10, itemId: 101 });
+    });
+    resolveBeforeDelete(items(100, 101));
+    await hook.flush();
+
+    expect(api.getScheduleItems).toHaveBeenCalledTimes(2);
+    expect(client.getQueryData<PlanPlace[]>(key)?.map((p) => p.itemId)).toEqual([100]);
+  } finally {
+    unwatch();
+    await hook.unmount();
+    client.clear();
+  }
+});
diff --git a/src/hooks/useRooms.ts b/src/hooks/useRooms.ts
index f6668bc8..5fb5ac77 100644
--- a/src/hooks/useRooms.ts
+++ b/src/hooks/useRooms.ts
@@ -9,7 +9,6 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
 
 import { useStompContext } from "@/contexts/StompContext";
 
@@ -58,14 +57,14 @@ import {
   type RoomListResponse,
 } from "@/lib/api/rooms";
 import {
+  applyCreatedScheduleItemToPlanPlaces,
   applyRoomScheduleItemToPlanPlaces,
-  applyScheduleItemDeletedOnClient,
   createScheduleItemAtPlanIndex,
-  ensureSchedulePlanPlacesEnriched,
+  removeScheduleItemFromPlanPlacesCache,
+  schedulePlanPlacesQueryOptions,
   syncAfterCrossScheduleItemMove,
   syncPlanPlacesAfterReorderSuccess,
 } from "@/lib/plan/scheduleItemPlaces";
-import { planPlacesNeedPreviewEnrich } from "@/lib/plan/schedule-bulk-hydration";
 import { fetchAndSeedAllRoomBookmarks } from "@/lib/bookmarks/bookmark-bulk-cache";
 import {
   appendBookmarkCategoryToCache,
@@ -84,6 +83,7 @@ import {
 } from "@/lib/query-keys";
 import {
   hydrateRoomSchedulesFromServer,
+  refreshRoomSchedules,
   syncRoomDetailFromServer,
 } from "@/lib/rooms";
 import type { PlanPlace } from "@/lib/plan/types";
@@ -92,9 +92,7 @@ import {
   pathSuspendsStomp,
 } from "@/lib/stomp/stompPathPolicy";
 import { persistedScheduleItemRouteQueryOptions } from "@/lib/plan/scheduleItemRoutePersistedQuery";
-import { invalidateScheduleItemRouteForWholeSchedule } from "@/lib/plan/scheduleStompRouteScope";
 import type { ScheduleTravelModeValue } from "@/lib/plan/scheduleTravelMode";
-import { usePlanMapDirectionsEpochStore } from "@/stores/plan-map-directions-epoch-store";
 import { useSessionUser } from "@/hooks/useSessionUser";
 import { applyHostTransferToCache } from "@/lib/rooms/host-transfer-cache";
 import { readSessionUserId } from "@/lib/session-user-cache";
@@ -153,7 +151,7 @@ export function useCreateRoom() {
         });
       }
       queryClient.invalidateQueries({ queryKey: ROOMS_QUERY_KEY });
-      await hydrateRoomSchedulesFromServer(queryClient, room.id);
+      await refreshRoomSchedules(queryClient, room.id);
       await syncRoomDetailFromServer(queryClient, room.id);
     },
   });
@@ -164,10 +162,10 @@ export function useRoomSchedules(roomId: string | null) {
   const queryClient = useQueryClient();
   return useQuery({
     queryKey: roomSchedulesQueryKey(id || null),
-    queryFn: () => hydrateRoomSchedulesFromServer(queryClient, id),
+    queryFn: ({ signal }) =>
+      hydrateRoomSchedulesFromServer(queryClient, id, signal),
     enabled: id.length > 0,
     staleTime: Infinity,
-    refetchOnMount: false,
     refetchOnWindowFocus: false,
   });
 }
@@ -176,7 +174,9 @@ export function useScheduleItemRoute(
   roomId: string | null,
   scheduleId: number | null,
   segmentSourceItemId: number | null,
-  travelMode: ScheduleTravelModeValue,
+  /** 다음 장소의 `itemId` */
+  destinationItemId: number | null,
+  travelMode: ScheduleTravelModeValue | null,
   /** 일정 장소 목록상 구간 소스 아이디가 존재·목록 안정 후에만 true */
   routeQueryEnabled = true,
   /** 빈 문자열이면 LS 미사용 — `scheduleFingerprint` 지문 필요 */
@@ -189,6 +189,7 @@ export function useScheduleItemRoute(
       rid,
       scheduleId,
       segmentSourceItemId,
+      destinationItemId,
       travelMode,
       scheduleFingerprint,
       { segmentReady: Boolean(routeQueryEnabled) },
@@ -206,22 +207,12 @@ export function useDeleteRoomSchedule() {
       roomId: string;
       scheduleId: number;
     }) => deleteRoomSchedule(roomId, scheduleId),
-    onSuccess: async (_data, { roomId, scheduleId }) => {
+    onSuccess: async (_data, { roomId }) => {
       await invalidateExpenses(queryClient, roomId);
       const id = roomId.trim();
       if (!id.length) return;
 
-      const sorted = await hydrateRoomSchedulesFromServer(queryClient, id);
-      const scheduleStillExists = sorted.some((s) => s.scheduleId === scheduleId);
-      if (scheduleStillExists) {
-        await invalidateScheduleItemRouteForWholeSchedule(
-          queryClient,
-          id,
-          scheduleId,
-        );
-        usePlanMapDirectionsEpochStore.getState().bumpForDirections(id);
-      }
-
+      await refreshRoomSchedules(queryClient, id);
       await syncRoomDetailFromServer(queryClient, id);
     },
   });
@@ -243,7 +234,7 @@ export function useCreateRoomSchedule() {
     onSuccess: async (_created, { roomId }) => {
       const id = roomId.trim();
       if (!id.length) return;
-      await hydrateRoomSchedulesFromServer(queryClient, id);
+      await refreshRoomSchedules(queryClient, id);
       await syncRoomDetailFromServer(queryClient, id);
     },
   });
@@ -266,7 +257,7 @@ export function useMoveRoomSchedule() {
       const id = roomId.trim();
       if (!id.length) return;
       await invalidateExpenses(queryClient, id);
-      await hydrateRoomSchedulesFromServer(queryClient, id);
+      await refreshRoomSchedules(queryClient, id);
     },
   });
 }
@@ -287,6 +278,8 @@ export function useMoveScheduleItemToSchedule() {
       itemId: number;
       targetScheduleId: number;
       targetOrderIndex: number;
+      /** 저장하는 동안 대상 일차에 먼저 보여 줄 카드(모바일 편집 목록) — 요청에는 쓰지 않는다 */
+      place?: PlanPlace;
     }) => {
       if (sourceScheduleId === targetScheduleId) {
         throw new Error("같은 일차 안에서는 순서 변경만 가능해요.");
@@ -298,7 +291,7 @@ export function useMoveScheduleItemToSchedule() {
     },
     onSuccess: async (
       _moved,
-      { roomId, sourceScheduleId, targetScheduleId, itemId },
+      { roomId, sourceScheduleId, targetScheduleId },
     ) => {
       await invalidateExpenses(queryClient, roomId);
       await syncAfterCrossScheduleItemMove(
@@ -306,7 +299,6 @@ export function useMoveScheduleItemToSchedule() {
         roomId,
         sourceScheduleId,
         targetScheduleId,
-        itemId,
       );
     },
   });
@@ -322,26 +314,35 @@ export function useSchedulePlanPlaces(
   const { isSuccess: schedulesHydrated } = useRoomSchedules(rid || null);
 
   return useQuery({
-    queryKey: scheduleItemsQueryKey(rid || null, sid),
-    queryFn: () => ensureSchedulePlanPlacesEnriched(queryClient, rid, sid!),
+    ...schedulePlanPlacesQueryOptions(queryClient, rid, sid),
     enabled:
       rid.length > 0 &&
       typeof sid === "number" &&
       Number.isFinite(sid) &&
       schedulesHydrated,
-    staleTime: Infinity,
-    refetchOnMount: (query) => {
-      const data = query.state.data;
-      return !Array.isArray(data) || planPlacesNeedPreviewEnrich(data);
-    },
     refetchOnWindowFocus: false,
   });
 }
 
+/**
+ * 본인이 일정 장소를 바꾼 뒤(성공·실패 모두) 그 일차를 다시 받는다. 여러 사람이 함께 고치는 목록이라
+ * 응답을 쓰는 사이 끝난 옛 조회나 다른 사람의 변경을 서버 기준으로 맞춘다. 진행 중인 옛 조회는 TanStack이 취소한다.
+ */
+function invalidateDayPlacesAfterOwnChange(
+  queryClient: ReturnType<typeof useQueryClient>,
+  roomId: string,
+  scheduleId: number,
+) {
+  return queryClient.invalidateQueries({
+    queryKey: scheduleItemsQueryKey(roomId.trim(), scheduleId),
+    exact: true,
+  });
+}
+
 export function useCreateScheduleItem() {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (vars: {
+    mutationFn: (vars: {
       roomId: string;
       scheduleId: number;
       googlePlaceId: string;
@@ -349,16 +350,23 @@ export function useCreateScheduleItem() {
       placesSnapshot?: PlanPlace[];
     }) => {
       const places = vars.placesSnapshot ?? [];
-      const insertIndex = vars.insertIndex ?? places.length;
-
-      return createScheduleItemAtPlanIndex(queryClient, {
+      return createScheduleItemAtPlanIndex({
         roomId: vars.roomId,
         scheduleId: vars.scheduleId,
         places,
-        insertIndex,
+        insertIndex: vars.insertIndex ?? places.length,
         googlePlaceId: vars.googlePlaceId,
       });
     },
+    onSuccess: (response, { roomId, scheduleId }) =>
+      applyCreatedScheduleItemToPlanPlaces(
+        queryClient,
+        roomId,
+        scheduleId,
+        response,
+      ),
+    onSettled: (_response, _error, { roomId, scheduleId }) =>
+      invalidateDayPlacesAfterOwnChange(queryClient, roomId, scheduleId),
   });
 }
 
@@ -378,28 +386,22 @@ export function useUpdateScheduleItem() {
         vars.body,
       ),
     onSuccess: (updated, { roomId, scheduleId, body }) => {
-      const rid = roomId.trim();
-      if (!rid.length) return;
-      const key = scheduleItemsQueryKey(rid, scheduleId);
-      const prev = queryClient.getQueryData<PlanPlace[]>(key);
-      const merged = applyRoomScheduleItemToPlanPlaces(prev, updated, {
-        memoTouched: Object.prototype.hasOwnProperty.call(body, "memo"),
-      });
-      if (merged) {
-        queryClient.setQueryData(key, merged);
-      } else {
-        void queryClient.invalidateQueries({
-          queryKey: key,
-          refetchType: "active",
-        });
-      }
+      queryClient.setQueryData<PlanPlace[]>(
+        scheduleItemsQueryKey(roomId.trim(), scheduleId),
+        (old) =>
+          applyRoomScheduleItemToPlanPlaces(old, updated, {
+            memoTouched: Object.prototype.hasOwnProperty.call(body, "memo"),
+          }) ?? old,
+      );
     },
+    onSettled: (_updated, _error, { roomId, scheduleId }) =>
+      invalidateDayPlacesAfterOwnChange(queryClient, roomId, scheduleId),
   });
 }
 
 /**
  * 구간 공유 이동수단 변경 — 서버 DB 저장 후 `SCHEDULE_ITEM_TRAVEL_MODE_UPDATED`가
- * 브로드캐스트되며, 액터는 응답으로 `schedule-items` 캐시만 갱신합니다.
+ * 브로드캐스트되며, 액터는 응답으로 `schedule-items` 캐시를 갱신합니다.
  * 수단별 경로 캐시는 모드 키로 분리돼 있어 무효화가 필요 없습니다.
  */
 export function useUpdateScheduleItemTravelMode() {
@@ -418,20 +420,13 @@ export function useUpdateScheduleItemTravelMode() {
         { travelMode: vars.travelMode },
       ),
     onSuccess: (updated, { roomId, scheduleId }) => {
-      const rid = roomId.trim();
-      if (!rid.length) return;
-      const key = scheduleItemsQueryKey(rid, scheduleId);
-      const prev = queryClient.getQueryData<PlanPlace[]>(key);
-      const merged = applyRoomScheduleItemToPlanPlaces(prev, updated);
-      if (merged) {
-        queryClient.setQueryData(key, merged);
-      } else {
-        void queryClient.invalidateQueries({
-          queryKey: key,
-          refetchType: "active",
-        });
-      }
+      queryClient.setQueryData<PlanPlace[]>(
+        scheduleItemsQueryKey(roomId.trim(), scheduleId),
+        (old) => applyRoomScheduleItemToPlanPlaces(old, updated) ?? old,
+      );
     },
+    onSettled: (_updated, _error, { roomId, scheduleId }) =>
+      invalidateDayPlacesAfterOwnChange(queryClient, roomId, scheduleId),
   });
 }
 
@@ -445,21 +440,22 @@ export function useDeleteScheduleItem() {
     }) => deleteScheduleItem(vars.roomId, vars.scheduleId, vars.itemId),
     onSuccess: async (_, { roomId, scheduleId, itemId }) => {
       await invalidateExpenses(queryClient, roomId);
-      await applyScheduleItemDeletedOnClient(
+      removeScheduleItemFromPlanPlacesCache(
         queryClient,
         roomId,
         scheduleId,
         itemId,
       );
     },
+    onSettled: (_data, _error, { roomId, scheduleId }) =>
+      invalidateDayPlacesAfterOwnChange(queryClient, roomId, scheduleId),
   });
 }
 
+/** 순서 변경 — 응답·경로 캐시 반영과 일차 재조회를 기다리므로 `isPending`이 그 끝까지 이어진다 */
 export function useReorderScheduleItem() {
   const queryClient = useQueryClient();
-  const [isChainedTimeSyncPending, setIsChainedTimeSyncPending] =
-    useState(false);
-  const mutation = useMutation({
+  return useMutation({
     mutationFn: (vars: {
       roomId: string;
       scheduleId: number;
@@ -472,33 +468,16 @@ export function useReorderScheduleItem() {
         vars.itemId,
         vars.body,
       ),
-    onMutate: () => {
-      setIsChainedTimeSyncPending(true);
-    },
-    onError: () => {
-      setIsChainedTimeSyncPending(false);
-    },
-    onSuccess: async (items, { roomId, scheduleId, itemId }) => {
-      try {
-        await syncPlanPlacesAfterReorderSuccess(
-          queryClient,
-          roomId,
-          scheduleId,
-          items,
-          itemId,
-        );
-      } finally {
-        setIsChainedTimeSyncPending(false);
-      }
-    },
+    onSuccess: (items, { roomId, scheduleId }) =>
+      syncPlanPlacesAfterReorderSuccess(
+        queryClient,
+        roomId,
+        scheduleId,
+        items,
+      ),
+    onSettled: (_items, _error, { roomId, scheduleId }) =>
+      invalidateDayPlacesAfterOwnChange(queryClient, roomId, scheduleId),
   });
-
-  return {
-    ...mutation,
-    /** 리오더 요청 + 시작 시각 연쇄 PATCH까지(캐시가 일관될 때까지) */
-    isReorderSettling:
-      mutation.isPending || isChainedTimeSyncPending,
-  };
 }
 
 export function useUpdateRoom() {
@@ -558,7 +537,7 @@ export function useUpdateRoom() {
 
       if (datesChanged) {
         await invalidateExpenses(queryClient, roomId);
-        await hydrateRoomSchedulesFromServer(queryClient, roomId);
+        await refreshRoomSchedules(queryClient, roomId);
       }
     },
   });
@@ -613,7 +592,6 @@ export function useRoomMembers(roomId: string | null) {
     queryFn: () => getRoomMembers(roomId!),
     enabled: !!roomId && (!waitForStompBeforeMembers || stompConnected),
     staleTime: Infinity,
-    refetchOnMount: false,
     refetchOnWindowFocus: false,
   });
 }
diff --git a/src/hooks/useScheduleResyncPending.ts b/src/hooks/useScheduleResyncPending.ts
new file mode 100644
index 00000000..be3433ee
--- /dev/null
+++ b/src/hooks/useScheduleResyncPending.ts
@@ -0,0 +1,16 @@
+import { useIsFetching } from "@tanstack/react-query";
+
+import { useStompContext } from "@/contexts/StompContext";
+import { roomSchedulesQueryKey } from "@/lib/query-keys";
+
+/**
+ * 연결이 끊긴 동안이나 놓친 변경을 다시 받는 동안 — 이때 보이는 일정 순서는 서버와 다를 수 있다.
+ * 재정렬 API는 절대 위치만 받으므로 이 구간에는 순서를 바꾸지 않는다.
+ */
+export function useScheduleResyncPending(roomId: string): boolean {
+  const { connected } = useStompContext();
+  const rid = roomId.trim();
+  const isResyncing =
+    useIsFetching({ queryKey: roomSchedulesQueryKey(rid || null), exact: true }) > 0;
+  return !connected || isResyncing;
+}
diff --git a/src/hooks/useVisiblePlacePhotoUrl.test.tsx b/src/hooks/useVisiblePlacePhotoUrl.test.tsx
new file mode 100644
index 00000000..15830713
--- /dev/null
+++ b/src/hooks/useVisiblePlacePhotoUrl.test.tsx
@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it } from "vitest";
+
+import { useVisiblePlacePhotoUrl } from "./useVisiblePlacePhotoUrl";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+/** 버튼을 누르면 사진을 불러오지 못한 것으로 표시한다 */
+function Probe({ url }: Readonly<{ url: string | null }>) {
+  const photo = useVisiblePlacePhotoUrl(url);
+  return (
+    <button type="button" onClick={photo.markUnavailable}>
+      {photo.visibleUrl ?? "사진 없음"}
+    </button>
+  );
+}
+
+it("못 불러온 주소는 숨기고, 주소가 바뀌면 다시 보인다", async () => {
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  try {
+    await act(async () => root.render(<Probe url="https://cdn.example/broken.jpg" />));
+    expect(container.textContent).toBe("https://cdn.example/broken.jpg");
+
+    await act(async () => container.querySelector("button")?.click());
+    expect(container.textContent).toBe("사진 없음");
+
+    await act(async () => root.render(<Probe url="https://cdn.example/fresh.jpg" />));
+    expect(container.textContent).toBe("https://cdn.example/fresh.jpg");
+  } finally {
+    await act(async () => root.unmount());
+  }
+});
diff --git a/src/hooks/useVisiblePlacePhotoUrl.ts b/src/hooks/useVisiblePlacePhotoUrl.ts
new file mode 100644
index 00000000..2094b3ab
--- /dev/null
+++ b/src/hooks/useVisiblePlacePhotoUrl.ts
@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+/**
+ * 다시 받아도 불러오지 못한 사진 주소는 그리지 않는다 — 깨진 이미지 대신 각 카드의 '사진 없음' 모양을 보인다.
+ * 주소가 바뀌면(다시 받은 주소가 다르면) 다시 그린다.
+ */
+export function useVisiblePlacePhotoUrl(url: string | null | undefined) {
+  const [unavailableUrl, setUnavailableUrl] = useState<string | null>(null);
+  const visibleUrl = url && url !== unavailableUrl ? url : null;
+  return {
+    visibleUrl,
+    markUnavailable: () => setUnavailableUrl(visibleUrl),
+  };
+}
diff --git a/src/lib/analytics/context.ts b/src/lib/analytics/context.ts
index 881c19d0..8bf67658 100644
--- a/src/lib/analytics/context.ts
+++ b/src/lib/analytics/context.ts
@@ -34,7 +34,7 @@ const dynamicPagePaths: ReadonlyArray<readonly [RegExp, string]> = [
   [/^\/bookmark\/[^/]+$/, "/bookmark/[folderId]"],
 ];
 
-const analyticsCampaignParameterNames = [
+export const analyticsCampaignParameterNames = [
   "utm_id",
   "utm_source",
   "utm_medium",
diff --git a/src/lib/api/client.test.ts b/src/lib/api/client.test.ts
new file mode 100644
index 00000000..52f2f852
--- /dev/null
+++ b/src/lib/api/client.test.ts
@@ -0,0 +1,82 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  authenticatedFetch: vi.fn(),
+  getTabId: vi.fn<() => string | null>(),
+}));
+
+vi.mock("@/lib/api/authenticated-fetch", () => ({
+  authenticatedFetch: mocks.authenticatedFetch,
+}));
+vi.mock("@/lib/auth-session-client", () => ({
+  expireClientSessionAndRedirect: vi.fn(),
+}));
+vi.mock("@/lib/auth", () => ({ fetchSessionUserRaw: vi.fn() }));
+vi.mock("@/lib/query-client", () => ({ getQueryClient: () => null }));
+vi.mock("@/lib/tab-id", () => ({ getTabId: mocks.getTabId }));
+
+import { apiFetch } from "./client";
+import { jsonBody } from "./http";
+
+const TAB_ID = "3f2b8c1e-7d4a-4e9b-9c2f-1a2b3c4d5e6f";
+const REQUEST_URL = "http://localhost:8080/rooms/room-1/schedules/10/items";
+
+/** apiFetch가 실제로 보낸 요청의 탭 ID 헤더 */
+function sentTabId(): string | null {
+  const init: RequestInit | undefined = mocks.authenticatedFetch.mock.calls[0]?.[1];
+  return new Headers(init?.headers).get("X-Client-Tab-Id");
+}
+
+describe("apiFetch tab ID header", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.authenticatedFetch.mockResolvedValue({
+      response: new Response(null, { status: 204 }),
+      didRefresh: false,
+    });
+    mocks.getTabId.mockReturnValue(TAB_ID);
+  });
+
+  it.each([
+    ["JSON POST", { method: "POST", ...jsonBody({ placeId: "p" }) }],
+    ["PATCH", { method: "PATCH", ...jsonBody({ memo: "m" }) }],
+    ["PUT", { method: "PUT", ...jsonBody({ content: "c" }) }],
+    ["DELETE", { method: "DELETE" }],
+  ] satisfies [string, RequestInit][])("adds the header to a %s that is already preflighted", async (_, init) => {
+    await apiFetch(REQUEST_URL, init);
+
+    expect(sentTabId()).toBe(TAB_ID);
+  });
+
+  it.each([
+    ["GET without init", undefined],
+    ["GET", { method: "GET" }],
+    ["POST without body", { method: "POST" }],
+  ] satisfies [string, RequestInit | undefined][])("leaves a %s without the header", async (_, init) => {
+    await apiFetch(REQUEST_URL, init);
+
+    expect(sentTabId()).toBeNull();
+  });
+
+  it("does not add the header when the tab has no ID", async () => {
+    mocks.getTabId.mockReturnValue(null);
+
+    await apiFetch(REQUEST_URL, { method: "DELETE" });
+
+    expect(sentTabId()).toBeNull();
+  });
+
+  it.each([
+    ["object", { "Content-Type": "application/json", "X-Extra": "1" }],
+    ["Headers", new Headers({ "Content-Type": "application/json", "X-Extra": "1" })],
+    ["array", [["Content-Type", "application/json"], ["X-Extra", "1"]]],
+  ] satisfies [string, HeadersInit][])("keeps existing %s headers", async (_, headers) => {
+    await apiFetch(REQUEST_URL, { method: "POST", headers, body: "{}" });
+
+    const init: RequestInit | undefined = mocks.authenticatedFetch.mock.calls[0]?.[1];
+    const sent = new Headers(init?.headers);
+    expect(sent.get("Content-Type")).toBe("application/json");
+    expect(sent.get("X-Extra")).toBe("1");
+    expect(sent.get("X-Client-Tab-Id")).toBe(TAB_ID);
+  });
+});
diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
index a71ca10c..1578a9af 100644
--- a/src/lib/api/client.ts
+++ b/src/lib/api/client.ts
@@ -6,6 +6,32 @@ import {
   readSessionUserCache,
   setSessionUserCache,
 } from "@/lib/session-user-cache";
+import { getTabId } from "@/lib/tab-id";
+
+const CLIENT_TAB_ID_HEADER = "X-Client-Tab-Id";
+
+/**
+ * 일정·북마크 STOMP 이벤트의 `originTabId`로 돌아와, 이 탭이 보낸 변경의 반향을 가려낸다.
+ * 이미 CORS preflight를 하는 요청(PATCH·PUT·DELETE, JSON POST)에만 싣는다 — GET·body 없는 POST에
+ * 커스텀 헤더를 붙이면 preflight가 새로 생기고, 백엔드 CORS에 maxAge가 없어 Chrome은 그 결과를 약 5초만 기억한다.
+ */
+function withClientTabIdHeader(init: RequestInit | undefined): RequestInit | undefined {
+  const tabId = getTabId();
+  if (!tabId || !init) return init;
+
+  const method = (init.method ?? "GET").toUpperCase();
+  const headers = new Headers(init.headers);
+  const isPreflighted =
+    method === "PATCH" ||
+    method === "PUT" ||
+    method === "DELETE" ||
+    (method === "POST" &&
+      (headers.get("Content-Type") ?? "").toLowerCase().startsWith("application/json"));
+  if (!isPreflighted) return init;
+
+  headers.set(CLIENT_TAB_ID_HEADER, tabId);
+  return { ...init, headers };
+}
 
 /**
  * Drop-in replacement for fetch that automatically retries once after
@@ -15,7 +41,10 @@ export async function apiFetch(
   input: RequestInfo | URL,
   init?: RequestInit,
 ): Promise<Response> {
-  const { response: res, didRefresh } = await authenticatedFetch(input, init);
+  const { response: res, didRefresh } = await authenticatedFetch(
+    input,
+    withClientTabIdHeader(init),
+  );
 
   if (res.status === 401) {
     expireClientSessionAndRedirect({
diff --git a/src/lib/api/errors.ts b/src/lib/api/errors.ts
index 1f36b0fd..843b1143 100644
--- a/src/lib/api/errors.ts
+++ b/src/lib/api/errors.ts
@@ -234,6 +234,14 @@ export class HttpError extends Error {
   }
 }
 
+/**
+ * 서버 응답을 받지 못한 일시적 네트워크 오류인지 — fetch는 이 실패를 TypeError로 던진다.
+ * 429·4xx·5xx 응답은 다시 보내도 같은 결과라 여기에 넣지 않는다.
+ */
+export function isNetworkError(error: unknown): boolean {
+  return error instanceof TypeError;
+}
+
 /** 방 생성·수정 API의 여행지 관련 서버 에러(HTTP 4xx) → 한국어 사용자 메시지 */
 export function messageForRoomDestinationError(
   body: unknown,
diff --git a/src/lib/api/places.test.ts b/src/lib/api/places.test.ts
index 86f2c86e..6f4b7921 100644
--- a/src/lib/api/places.test.ts
+++ b/src/lib/api/places.test.ts
@@ -71,6 +71,38 @@ describe("place photo API requests", () => {
     );
   });
 
+  it("throws an HttpError carrying the status when a single photo request fails", async () => {
+    const { requestPlacePhotoUrl } = await import("@/lib/api/places");
+    const { HttpError } = await import("@/lib/api/errors");
+    apiFetch.mockResolvedValueOnce({
+      status: 502,
+      ok: false,
+      json: async () => ({ code: "EXTERNAL_API_ERROR", message: "외부 API 호출 중 오류가 발생했습니다" }),
+    });
+
+    const error = await requestPlacePhotoUrl("ChIJ-place-1").catch((reason: unknown) => reason);
+
+    expect(error).toBeInstanceOf(HttpError);
+    expect(error).toMatchObject({ status: 502, message: "외부 API 호출 중 오류가 발생했습니다" });
+  });
+
+  it("throws an HttpError when the whole photo batch request is rate limited", async () => {
+    const { requestPlacePhotoUrlsBatch } = await import("@/lib/api/places");
+    const { HttpError } = await import("@/lib/api/errors");
+    apiFetch.mockResolvedValueOnce({
+      status: 429,
+      ok: false,
+      json: async () => ({ code: "RATE_LIMIT_EXCEEDED", message: "요청이 너무 많습니다" }),
+    });
+
+    const error = await requestPlacePhotoUrlsBatch(["ChIJ-place-1", "ChIJ-place-2"]).catch(
+      (reason: unknown) => reason,
+    );
+
+    expect(error).toBeInstanceOf(HttpError);
+    expect(error).toMatchObject({ status: 429 });
+  });
+
   it("requests batch photo URLs with googlePlaceIds and reads googlePlaceId response items", async () => {
     const { requestPlacePhotoUrlsBatch } = await import("@/lib/api/places");
     apiFetch.mockResolvedValueOnce({
@@ -149,3 +181,56 @@ describe("place photo API requests", () => {
     ]);
   });
 });
+
+describe("place preview API requests", () => {
+  beforeEach(() => {
+    apiFetch.mockReset();
+  });
+
+  it("throws an HttpError when the preview batch request is rate limited", async () => {
+    const { requestPlacePreviewsBatch } = await import("@/lib/api/places");
+    const { HttpError } = await import("@/lib/api/errors");
+    apiFetch.mockResolvedValueOnce({
+      status: 429,
+      ok: false,
+      json: async () => ({ code: "RATE_LIMIT_EXCEEDED", message: "요청이 너무 많습니다" }),
+    });
+
+    const error = await requestPlacePreviewsBatch(["ChIJ-place-1", "ChIJ-place-2"]).catch(
+      (reason: unknown) => reason,
+    );
+
+    expect(error).toBeInstanceOf(HttpError);
+    expect(error).toMatchObject({ status: 429, message: "요청이 너무 많습니다" });
+  });
+
+  it("throws an HttpError carrying the status when a single preview request fails", async () => {
+    const { requestPlacePreview } = await import("@/lib/api/places");
+    const { HttpError } = await import("@/lib/api/errors");
+    apiFetch.mockResolvedValueOnce({ status: 502, ok: false, json: async () => ({}) });
+
+    const error = await requestPlacePreview("ChIJ-place-1").catch((reason: unknown) => reason);
+
+    expect(error).toBeInstanceOf(HttpError);
+    expect(error).toMatchObject({ status: 502 });
+  });
+});
+
+describe("place area search API request", () => {
+  beforeEach(() => {
+    apiFetch.mockReset();
+  });
+
+  it("sends the visible rectangle to the area search endpoint without a center or radius", async () => {
+    const { searchPlacesInArea } = await import("@/lib/api/places");
+    apiFetch.mockResolvedValueOnce({ ok: true, json: async () => ({ items: [], nextPageToken: null }) });
+
+    await searchPlacesInArea({ query: "카페", south: 35.7, west: 139.75, north: 35.72, east: 139.8, pageSize: 20 });
+
+    const requestedUrl = new URL(apiFetch.mock.calls[0]![0] as string);
+    expect(requestedUrl.pathname).toBe("/places/search/area");
+    expect(Object.fromEntries(requestedUrl.searchParams)).toEqual({
+      query: "카페", south: "35.7", west: "139.75", north: "35.72", east: "139.8", pageSize: "20",
+    });
+  });
+});
diff --git a/src/lib/api/places.ts b/src/lib/api/places.ts
index 0a43c89d..10c4cf44 100644
--- a/src/lib/api/places.ts
+++ b/src/lib/api/places.ts
@@ -1,7 +1,7 @@
 import { API_BASE } from "./config";
 import { apiFetch } from "./client";
 import { chunkArray, PLACE_BATCH_MAX_SIZE } from "./batch-chunk";
-import { readUserFacingMessageFromApiBody } from "./errors";
+import { HttpError, readUserFacingMessageFromApiBody } from "./errors";
 import { apiUrl, jsonBody, requestJson, tryParseJson } from "./http";
 
 // ─── Response types ────────────────────────────────────────────────────────
@@ -156,7 +156,35 @@ export async function searchPlaces(params: {
   }
 
   const res = await apiFetch(url.toString());
-  if (!res.ok) throw new Error(`Places search failed: ${res.status}`);
+  if (!res.ok) throw new HttpError(res.status, `Places search failed: ${res.status}`);
+  return res.json();
+}
+
+/** 사각형(지금 보이는 지도 화면) 안의 장소만 찾는다. 다음 페이지는 같은 사각형으로 요청해야 한다 */
+export async function searchPlacesInArea(params: {
+  query: string;
+  south: number;
+  west: number;
+  north: number;
+  east: number;
+  pageSize?: number;
+  pageToken?: string;
+}): Promise<PlaceSearchPageResponse> {
+  const url = new URL(`${API_BASE}/places/search/area`);
+  url.searchParams.set("query", params.query);
+  url.searchParams.set("south", String(params.south));
+  url.searchParams.set("west", String(params.west));
+  url.searchParams.set("north", String(params.north));
+  url.searchParams.set("east", String(params.east));
+  if (params.pageSize !== undefined) {
+    url.searchParams.set("pageSize", String(params.pageSize));
+  }
+  if (params.pageToken) {
+    url.searchParams.set("pageToken", params.pageToken);
+  }
+
+  const res = await apiFetch(url.toString());
+  if (!res.ok) throw new HttpError(res.status, `Places area search failed: ${res.status}`);
   return res.json();
 }
 
@@ -166,7 +194,7 @@ export async function requestPlaceDetail(
   const res = await apiFetch(
     `${API_BASE}/places/${encodeURIComponent(googlePlaceId)}`,
   );
-  if (!res.ok) throw new Error(`Place detail failed: ${res.status}`);
+  if (!res.ok) throw new HttpError(res.status, `Place detail failed: ${res.status}`);
   return res.json();
 }
 
@@ -176,7 +204,7 @@ export async function requestPlacePreview(
   const res = await apiFetch(
     `${API_BASE}/places/${encodeURIComponent(googlePlaceId)}/preview`,
   );
-  if (!res.ok) throw new Error(`Place preview failed: ${res.status}`);
+  if (!res.ok) throw new HttpError(res.status, `Place preview failed: ${res.status}`);
   return res.json();
 }
 
@@ -196,7 +224,7 @@ export async function requestPlacePhotoUrl(
   if (!res.ok) {
     const body = await tryParseJson(res);
     const detail = readUserFacingMessageFromApiBody(body);
-    throw new Error(detail ?? `Place photo failed: ${res.status}`);
+    throw new HttpError(res.status, detail ?? `Place photo failed: ${res.status}`);
   }
   const data: PlacePhotoResponse = await res.json();
   return typeof data.photoUrl === "string" ? data.photoUrl : "";
@@ -208,7 +236,7 @@ async function requestPlacePreviewsBatchChunk(
   const data = await requestJson<PlacePreviewBatchResponse>(
     apiUrl("/places/previews/batch"),
     { method: "POST", ...jsonBody({ googlePlaceIds }) },
-    { errorMessage: "장소 미리보기 일괄 조회 실패" },
+    { errorMessage: "장소 미리보기 일괄 조회 실패", useHttpError: true },
   );
   return readBatchResponseList<PlacePreviewBatchItem>(data, "previews");
 }
@@ -254,7 +282,7 @@ async function requestPlacePhotoUrlsBatchChunk(
   if (!res.ok) {
     const body = await tryParseJson(res);
     const detail = readUserFacingMessageFromApiBody(body);
-    throw new Error(detail ?? `장소 사진 URL 일괄 조회 실패: ${res.status}`);
+    throw new HttpError(res.status, detail ?? `장소 사진 URL 일괄 조회 실패: ${res.status}`);
   }
   const data = (await res.json()) as PlacePhotoUrlBatchResponse;
   return readBatchResponseList<PlacePhotoUrlBatchItem>(data, "photos");
diff --git a/src/lib/api/rooms/messages.ts b/src/lib/api/rooms/messages.ts
index 27223a06..ca3802e0 100644
--- a/src/lib/api/rooms/messages.ts
+++ b/src/lib/api/rooms/messages.ts
@@ -20,6 +20,7 @@ export async function getRoomMessages(
 
   return requestJson(url.toString(), undefined, {
     errorMessage: "메시지 목록 조회 실패",
+    useHttpError: true,
   });
 }
 
@@ -31,6 +32,7 @@ export async function getRoomMessageReadStatus(
     undefined,
     {
       errorMessage: "읽음 위치 조회 실패",
+      useHttpError: true,
     },
   );
 }
diff --git a/src/lib/api/rooms/schedule-items.time.test.ts b/src/lib/api/rooms/schedule-items.time.test.ts
index 0e911ac8..6cd61797 100644
--- a/src/lib/api/rooms/schedule-items.time.test.ts
+++ b/src/lib/api/rooms/schedule-items.time.test.ts
@@ -66,8 +66,16 @@ describe("schedule time JSON contract", () => {
         }),
       ),
     );
-    expect(await api.getScheduleItemRoute("room", 10, 1)).toMatchObject({
+    expect(await api.getScheduleItemRoute("room", 10, 1, 2)).toMatchObject({
       durationSeconds: 1200,
     });
   });
+  it("asks the route to the given destination item", async () => {
+    apiFetch.mockResolvedValue(new Response(null, { status: 204 }));
+    await api.getScheduleItemRoute("room", 10, 1, 2, "WALKING");
+    const url = new URL(String(apiFetch.mock.calls.at(-1)?.[0]));
+    expect(url.pathname).toMatch(/\/rooms\/room\/schedules\/10\/items\/1\/route$/);
+    expect(url.searchParams.get("destinationItemId")).toBe("2");
+    expect(url.searchParams.get("travelMode")).toBe("WALKING");
+  });
 });
diff --git a/src/lib/api/rooms/schedule-items.ts b/src/lib/api/rooms/schedule-items.ts
index daae5c2f..6de10c06 100644
--- a/src/lib/api/rooms/schedule-items.ts
+++ b/src/lib/api/rooms/schedule-items.ts
@@ -21,7 +21,7 @@ export type RoomScheduleItem = {
 };
 
 export type UpdateTravelModeRequest = {
-  /** `DRIVING` | `WALKING` | `BICYCLING` | `TRANSIT` */
+  /** 서버 원본 수단. 프론트 지원 여부는 소비 경계에서 검증합니다. */
   travelMode: string;
 };
 
@@ -87,6 +87,8 @@ export type ScheduleItemRouteBatchItem =
   | ({
       status: "OK";
       itemId: number;
+      /** 서버가 계산한 구간의 도착 항목(요청을 받은 순간의 다음 항목) */
+      toItemId?: number;
       travelMode: string;
       distanceMeters: number;
       durationSeconds: number;
@@ -96,6 +98,8 @@ export type ScheduleItemRouteBatchItem =
   | {
       status: "ERROR";
       itemId: number;
+      /** 경로 없음(`NO_ROUTE`)이면 있고, 마지막 항목·항목 없음이면 서버가 생략 */
+      toItemId?: number;
       travelMode: string;
       errorCode?: string;
     };
@@ -118,11 +122,13 @@ function readScheduleItemRouteBatchItems(
 export async function getScheduleItemRoute(
   roomId: string,
   scheduleId: number,
-  /** 구간 시작(현재) 일정 항목 ID — 명세상 ‘현재 항목에서 다음 항목으로’ */
+  /** 구간 출발 일정 항목 ID */
   itemId: number,
+  /** 구간 도착 일정 항목 ID — 보내면 서버가 그 순간의 순서와 관계없이 이 항목까지 계산한다 */
+  destinationItemId: number,
   travelMode?: string | null,
 ): Promise<ScheduleItemRouteResponse | null> {
-  const params = new URLSearchParams();
+  const params = new URLSearchParams({ destinationItemId: String(destinationItemId) });
   const tm =
     typeof travelMode === "string" && travelMode.trim().length > 0
       ? travelMode.trim()
@@ -183,10 +189,11 @@ export async function getScheduleItemRoutesBatch(
 export async function getScheduleItems(
   roomId: string,
   scheduleId: number,
+  signal?: AbortSignal,
 ): Promise<RoomScheduleItem[]> {
   return requestJson(
     apiUrl(`/rooms/${roomId}/schedules/${scheduleId}/items`),
-    undefined,
+    { signal },
     { errorMessage: "일정 장소 목록 조회 실패" },
   );
 }
diff --git a/src/lib/api/rooms/schedules.ts b/src/lib/api/rooms/schedules.ts
index ba50775d..67a17a61 100644
--- a/src/lib/api/rooms/schedules.ts
+++ b/src/lib/api/rooms/schedules.ts
@@ -36,6 +36,7 @@ export type RoomScheduleWithItems = RoomSchedule & {
 
 export type GetRoomSchedulesOptions = {
   includeItems?: boolean;
+  signal?: AbortSignal;
 };
 
 export async function getRoomSchedules(
@@ -46,7 +47,7 @@ export async function getRoomSchedules(
   if (options?.includeItems) {
     url.searchParams.set("includeItems", "true");
   }
-  return requestJson(url.toString(), undefined, {
+  return requestJson(url.toString(), { signal: options?.signal }, {
     errorMessage: "일정 목록 조회 실패",
   });
 }
diff --git a/src/lib/auth-server.test.ts b/src/lib/auth-server.test.ts
new file mode 100644
index 00000000..8d358c57
--- /dev/null
+++ b/src/lib/auth-server.test.ts
@@ -0,0 +1,171 @@
+import { NextRequest } from "next/server";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.hoisted(() => {
+  process.env.API_BASE_URL = "http://backend.test";
+});
+
+import {
+  sessionCheckResponse,
+  verifySessionWithOptionalRefresh,
+} from "@/lib/auth-server";
+
+const COOKIE = "access_token=old-access; refresh_token=old-refresh";
+const REFRESHED_COOKIES = [
+  "access_token=new-access; Path=/; HttpOnly",
+  "refresh_token=new-refresh; Path=/; HttpOnly",
+];
+
+const fetchMock = vi.fn<typeof fetch>();
+
+function status(code: number): Response {
+  return new Response(null, { status: code });
+}
+
+function refreshed(): Response {
+  const headers = new Headers();
+  for (const cookie of REFRESHED_COOKIES) headers.append("set-cookie", cookie);
+  return new Response(null, { status: 200, headers });
+}
+
+function sessionRequest(cookie: string): NextRequest {
+  return new NextRequest("https://www.uttae.app/api/auth/session", {
+    headers: { cookie },
+  });
+}
+
+beforeEach(() => {
+  fetchMock.mockReset();
+  vi.stubGlobal("fetch", fetchMock);
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("verifySessionWithOptionalRefresh", () => {
+  it("treats a missing cookie as unauthenticated without calling the backend", async () => {
+    await expect(verifySessionWithOptionalRefresh(null)).resolves.toEqual({
+      ok: false,
+      unavailable: false,
+      setCookies: [],
+    });
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it("marks an unreachable backend as unavailable", async () => {
+    fetchMock.mockRejectedValueOnce(new TypeError("fetch failed"));
+
+    await expect(verifySessionWithOptionalRefresh(COOKIE)).resolves.toEqual({
+      ok: false,
+      unavailable: true,
+      setCookies: [],
+    });
+  });
+
+  it.each([500, 502, 503, 429])(
+    "marks users/me %i as unavailable without refreshing",
+    async (code) => {
+      fetchMock.mockResolvedValueOnce(status(code));
+
+      const result = await verifySessionWithOptionalRefresh(COOKIE);
+
+      expect(result).toMatchObject({ ok: false, unavailable: true });
+      expect(fetchMock).toHaveBeenCalledOnce();
+    },
+  );
+
+  it("treats an expired access token without refresh_token as unauthenticated", async () => {
+    fetchMock.mockResolvedValueOnce(status(401));
+
+    await expect(
+      verifySessionWithOptionalRefresh("access_token=old-access"),
+    ).resolves.toEqual({ ok: false, unavailable: false, setCookies: [] });
+  });
+
+  it("treats a rejected refresh as unauthenticated", async () => {
+    fetchMock.mockResolvedValueOnce(status(401)).mockResolvedValueOnce(status(401));
+
+    await expect(verifySessionWithOptionalRefresh(COOKIE)).resolves.toEqual({
+      ok: false,
+      unavailable: false,
+      setCookies: [],
+    });
+  });
+
+  it("marks a failed refresh request as unavailable", async () => {
+    fetchMock.mockResolvedValueOnce(status(401)).mockResolvedValueOnce(status(502));
+
+    await expect(verifySessionWithOptionalRefresh(COOKIE)).resolves.toEqual({
+      ok: false,
+      unavailable: true,
+      setCookies: [],
+    });
+  });
+
+  it("returns refreshed cookies after a successful refresh", async () => {
+    fetchMock
+      .mockResolvedValueOnce(status(401))
+      .mockResolvedValueOnce(refreshed())
+      .mockResolvedValueOnce(status(200));
+
+    await expect(verifySessionWithOptionalRefresh(COOKIE)).resolves.toEqual({
+      ok: true,
+      unavailable: false,
+      setCookies: REFRESHED_COOKIES,
+    });
+  });
+
+  it("keeps refreshed cookies when the backend fails right after refreshing", async () => {
+    fetchMock
+      .mockResolvedValueOnce(status(401))
+      .mockResolvedValueOnce(refreshed())
+      .mockResolvedValueOnce(status(503));
+
+    await expect(verifySessionWithOptionalRefresh(COOKIE)).resolves.toEqual({
+      ok: false,
+      unavailable: true,
+      setCookies: REFRESHED_COOKIES,
+    });
+  });
+});
+
+describe("sessionCheckResponse", () => {
+  it("responds 200 for a valid session", async () => {
+    fetchMock.mockResolvedValueOnce(status(200));
+
+    const response = await sessionCheckResponse(sessionRequest(COOKIE));
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get("cache-control")).toBe("no-store");
+  });
+
+  it("responds 503 when the backend is unavailable so clients retry instead of logging out", async () => {
+    fetchMock.mockResolvedValueOnce(status(502));
+
+    const response = await sessionCheckResponse(sessionRequest(COOKIE));
+
+    expect(response.status).toBe(503);
+    expect(response.headers.get("cache-control")).toBe("no-store");
+  });
+
+  it("forwards refreshed cookies with 503", async () => {
+    fetchMock
+      .mockResolvedValueOnce(status(401))
+      .mockResolvedValueOnce(refreshed())
+      .mockResolvedValueOnce(status(503));
+
+    const response = await sessionCheckResponse(sessionRequest(COOKIE));
+
+    expect(response.status).toBe(503);
+    expect(response.headers.getSetCookie()).toEqual(REFRESHED_COOKIES);
+  });
+
+  it("responds 401 only when authentication is confirmed to have failed", async () => {
+    fetchMock.mockResolvedValueOnce(status(401)).mockResolvedValueOnce(status(401));
+
+    const response = await sessionCheckResponse(sessionRequest(COOKIE));
+
+    expect(response.status).toBe(401);
+  });
+});
diff --git a/src/lib/auth-server.ts b/src/lib/auth-server.ts
index 46f3c925..e1e44484 100644
--- a/src/lib/auth-server.ts
+++ b/src/lib/auth-server.ts
@@ -40,10 +40,25 @@ function cookieHeaderHasRefreshToken(cookieHeader: string): boolean {
 
 type SessionVerifyResult = {
   ok: boolean;
+  /** `ok`가 false인 이유가 백엔드 장애(도달 실패·5xx·429)인지. 인증 실패 확정과 구분한다 */
+  unavailable: boolean;
   /** refresh 성공 시 브라우저에 전달할 Set-Cookie */
   setCookies: string[];
 };
 
+function unauthenticatedResult(): SessionVerifyResult {
+  return { ok: false, unavailable: false, setCookies: [] };
+}
+
+function unavailableResult(setCookies: string[] = []): SessionVerifyResult {
+  return { ok: false, unavailable: true, setCookies };
+}
+
+/** 백엔드가 응답했지만 지금 처리하지 못하는 상태 — 인증 실패로 보지 않는다 */
+function isBackendUnavailable(res: Response): boolean {
+  return res.status >= 500 || res.status === 429;
+}
+
 /**
  * 백엔드 도달 불가(네트워크 오류 등)와 정상 응답을 구분하기 위한 래퍼.
  * 도달 실패 시 `null`을 반환하고, 예외를 호출부로 전파하지 않습니다.
@@ -82,7 +97,7 @@ async function fetchBackendRefresh(
 
 function warnSessionFetchFailed(label: string): void {
   if (process.env.NODE_ENV === "development") {
-    console.warn(`[auth-server] ${label} unreachable — treating as unauthenticated`);
+    console.warn(`[auth-server] ${label} unreachable`);
   }
 }
 
@@ -90,7 +105,7 @@ function warnSessionFetchFailed(label: string): void {
  * `users/me`로 세션 검증. access 만료(401 등)이고 refresh_token이 있으면
  * `POST /auth/refresh` 후 `users/me` 재시도.
  *
- * 백엔드 도달 불가(네트워크 오류)는 fail-closed(`ok: false`)로 처리합니다.
+ * 백엔드 도달 불가·5xx·429는 `unavailable`로 표시하고 `ok: false`(fail-closed)로 둡니다.
  * 예외를 던지지 않아 미들웨어 크래시·dev 자동 리로드를 막고,
  * fail-open 시 생기던 `/home`↔`/login` document 루프도 차단합니다.
  */
@@ -99,52 +114,61 @@ export async function verifySessionWithOptionalRefresh(
 ): Promise<SessionVerifyResult> {
   const cookie = cookieHeader?.trim() ?? "";
   if (!cookie.length) {
-    return { ok: false, setCookies: [] };
+    return unauthenticatedResult();
   }
 
   const meRes = await fetchUsersMe(cookie);
   if (meRes === null) {
     warnSessionFetchFailed("GET /users/me");
-    return { ok: false, setCookies: [] };
+    return unavailableResult();
   }
   if (meRes.ok) {
-    return { ok: true, setCookies: [] };
+    return { ok: true, unavailable: false, setCookies: [] };
+  }
+  if (isBackendUnavailable(meRes)) {
+    return unavailableResult();
   }
 
   if (!cookieHeaderHasRefreshToken(cookie)) {
-    return { ok: false, setCookies: [] };
+    return unauthenticatedResult();
   }
 
   const refreshRes = await fetchBackendRefresh(cookie);
   if (refreshRes === null) {
     warnSessionFetchFailed("POST /auth/refresh");
-    return { ok: false, setCookies: [] };
+    return unavailableResult();
+  }
+  if (isBackendUnavailable(refreshRes)) {
+    return unavailableResult();
   }
   if (!refreshRes.ok) {
-    return { ok: false, setCookies: [] };
+    return unauthenticatedResult();
   }
 
   const setCookies = getSetCookieHeaders(refreshRes);
   const retryCookie = mergeSetCookiesIntoCookieHeader(cookie, setCookies);
   const retryMe = await fetchUsersMe(retryCookie);
+  // refresh가 성공했으면 이전 refresh_token은 이미 폐기됐다. 재확인이 장애로 실패해도
+  // 새 쿠키를 전달해야 다음 확인에서 폐기된 토큰을 다시 쓰지 않는다
   if (retryMe === null) {
     warnSessionFetchFailed("GET /users/me (after refresh)");
-    return { ok: false, setCookies: [] };
+    return unavailableResult(setCookies);
   }
-
-  return {
-    ok: retryMe.ok,
-    setCookies: retryMe.ok ? setCookies : [],
-  };
+  if (retryMe.ok) {
+    return { ok: true, unavailable: false, setCookies };
+  }
+  if (isBackendUnavailable(retryMe)) {
+    return unavailableResult(setCookies);
+  }
+  return unauthenticatedResult();
 }
 
 /** `GET /api/auth/session` Route Handler 본문 */
 export async function sessionCheckResponse(
   request: NextRequest,
 ): Promise<NextResponse> {
-  const { ok, setCookies } = await verifySessionWithOptionalRefresh(
-    request.headers.get("cookie"),
-  );
+  const { ok, unavailable, setCookies } =
+    await verifySessionWithOptionalRefresh(request.headers.get("cookie"));
 
   const baseHeaders = { "Cache-Control": "no-store" } as const;
 
@@ -157,6 +181,16 @@ export async function sessionCheckResponse(
     return res;
   }
 
+  // 백엔드 장애는 로그아웃 사유가 아니다. 클라이언트는 503을 일시 오류로 보고 다시 확인한다
+  if (unavailable) {
+    const res = NextResponse.json(
+      { authenticated: false },
+      { status: 503, headers: baseHeaders },
+    );
+    appendSetCookies(res, setCookies);
+    return res;
+  }
+
   return NextResponse.json(
     { authenticated: false },
     { status: 401, headers: baseHeaders },
diff --git a/src/lib/chat.test.ts b/src/lib/chat.test.ts
new file mode 100644
index 00000000..21862df5
--- /dev/null
+++ b/src/lib/chat.test.ts
@@ -0,0 +1,140 @@
+import { describe, expect, it } from "vitest";
+
+import type { ServerChatMessage } from "@/types/chat";
+
+import {
+  mergeServerMessageLists,
+  partitionLiveMessages,
+  replaceExistingServerMessages,
+  tailCursorOf,
+} from "./chat";
+
+function msg(sequence: number | undefined, id = `m${sequence}`): ServerChatMessage {
+  return {
+    id,
+    roomId: "room",
+    senderId: 2,
+    messageType: "CHAT",
+    content: id,
+    createdAt: new Date(Date.UTC(2026, 9, 25, 0, 0, sequence ?? 0)).toISOString(),
+    ...(sequence != null ? { sequence } : {}),
+  };
+}
+
+function aiRequest(aiStatus: string): ServerChatMessage {
+  return {
+    ...msg(50, "ai-50"),
+    messageType: "AI_REQUEST",
+    metadata: { aiStatus, cancelable: aiStatus === "QUEUED" ? "true" : "false" },
+  };
+}
+
+const ids = (list: readonly ServerChatMessage[]) => list.map((m) => m.id);
+
+describe("partitionLiveMessages", () => {
+  const tail = { atTail: true, list: [msg(39), msg(40)] };
+
+  it("appends only the next sequence and advances the cursor", () => {
+    const result = partitionLiveMessages([msg(41), msg(42)], { ...tail, cursor: 40 });
+    expect(ids(result.appended)).toEqual(["m41", "m42"]);
+    expect(result.cursor).toBe(42);
+    expect(result.hasGap).toBe(false);
+  });
+
+  it("reports a gap instead of appending past a missing sequence", () => {
+    const result = partitionLiveMessages([msg(41), msg(43)], { ...tail, cursor: 40 });
+    expect(ids(result.appended)).toEqual(["m41"]);
+    expect(result.cursor).toBe(41);
+    expect(result.hasGap).toBe(true);
+  });
+
+  it("treats sequences up to the cursor as updates of received messages", () => {
+    const result = partitionLiveMessages([msg(40)], { ...tail, cursor: 40 });
+    expect(result.appended).toEqual([]);
+    expect(ids(result.updates)).toEqual(["m40"]);
+  });
+
+  it("sorts a buffered batch so out-of-order delivery is not a gap", () => {
+    const result = partitionLiveMessages([msg(42), msg(41)], { ...tail, cursor: 40 });
+    expect(ids(result.appended)).toEqual(["m41", "m42"]);
+    expect(result.hasGap).toBe(false);
+  });
+
+  it("does not append in a middle window", () => {
+    const result = partitionLiveMessages([msg(41)], { ...tail, atTail: false, cursor: undefined });
+    expect(result.appended).toEqual([]);
+    expect(ids(result.updates)).toEqual(["m41"]);
+  });
+
+  it("starts an empty room at sequence 1", () => {
+    const result = partitionLiveMessages([msg(1)], { atTail: true, list: [], cursor: 0 });
+    expect(ids(result.appended)).toEqual(["m1"]);
+    expect(result.cursor).toBe(1);
+  });
+
+  it("falls back to ids for messages without a sequence", () => {
+    const legacy = msg(undefined, "legacy");
+    const result = partitionLiveMessages([legacy, msg(undefined, "new")], {
+      atTail: true,
+      list: [legacy],
+      cursor: undefined,
+    });
+    expect(ids(result.updates)).toEqual(["legacy"]);
+    expect(ids(result.appended)).toEqual(["new"]);
+  });
+});
+
+describe("mergeServerMessageLists", () => {
+  it("keeps the written order when sequences were assigned out of order", () => {
+    // 거의 동시에 저장되면 먼저 쓴 메시지가 더 큰 sequence를 받을 수 있다
+    const writtenFirst = { ...msg(42), createdAt: "2026-10-25T00:00:00.118Z" };
+    const writtenLater = { ...msg(41), createdAt: "2026-10-25T00:00:00.139Z" };
+    expect(ids(mergeServerMessageLists([writtenLater], [writtenFirst]))).toEqual([
+      "m42",
+      "m41",
+    ]);
+  });
+
+  it("keeps the later copy of the same message", () => {
+    const edited = { ...msg(41), content: "edited" };
+    expect(mergeServerMessageLists([msg(41)], [edited])[0]?.content).toBe("edited");
+  });
+
+  it("does not put a processed or canceled AI request back into the queue", () => {
+    const [kept] = mergeServerMessageLists([aiRequest("CANCELED")], [aiRequest("QUEUED")]);
+    expect(kept?.metadata?.aiStatus).toBe("CANCELED");
+  });
+
+  it("moves an AI request forward from the queue", () => {
+    const [kept] = mergeServerMessageLists([aiRequest("QUEUED")], [aiRequest("PROCESSING")]);
+    expect(kept?.metadata?.aiStatus).toBe("PROCESSING");
+  });
+});
+
+describe("replaceExistingServerMessages", () => {
+  it("replaces listed ids and ignores new ones", () => {
+    const list = [msg(40), aiRequest("QUEUED")];
+    const next = replaceExistingServerMessages(list, [aiRequest("CANCELED"), msg(41)]);
+    expect(ids(next)).toEqual(["m40", "ai-50"]);
+    expect(next[1]?.metadata?.aiStatus).toBe("CANCELED");
+  });
+
+  it("keeps the same list when nothing changes", () => {
+    const list = [msg(40)];
+    expect(replaceExistingServerMessages(list, [msg(41)])).toBe(list);
+  });
+});
+
+describe("tailCursorOf", () => {
+  it("uses 0 for an empty room so the first message is next", () => {
+    expect(tailCursorOf([])).toBe(0);
+  });
+
+  it("uses the largest sequence of the snapshot", () => {
+    expect(tailCursorOf([msg(39), msg(40)])).toBe(40);
+  });
+
+  it("has no cursor when no message carries a sequence", () => {
+    expect(tailCursorOf([msg(undefined, "legacy")])).toBeUndefined();
+  });
+});
diff --git a/src/lib/chat.ts b/src/lib/chat.ts
index de8654d6..673569e2 100644
--- a/src/lib/chat.ts
+++ b/src/lib/chat.ts
@@ -589,16 +589,40 @@ function formatQuotePreview(content: string, maxLen = 96): string {
   return `${oneLine.slice(0, maxLen).trimEnd()}…`;
 }
 
+/** AI 요청 상태는 대기(QUEUED)에서 처리(PROCESSING)나 취소(CANCELED)로만 바뀐다 */
+function aiRequestStatusRank(msg: ServerChatMessage): number | undefined {
+  if (normalizeMessageKind(msg.messageType) !== "AI_REQUEST") return undefined;
+  const status = normalizeAiStatus(msg.metadata?.aiStatus ?? msg.metadata?.aistatus);
+  if (status === undefined) return undefined;
+  return status === "QUEUED" ? 0 : 1;
+}
+
+/**
+ * 같은 id는 나중에 받은 것(b)을 쓴다. AI 요청만은 대기 상태로 되돌리지 않는다 —
+ * 상태가 바뀌기 전에 서버가 만든 조회 응답이 실시간으로 받은 처리·취소 상태를 덮지 않게.
+ */
 function preferNewerServerMessage(
   a: ServerChatMessage,
   b: ServerChatMessage,
 ): ServerChatMessage {
-  if (!a.createdAt) return b;
-  if (!b.createdAt) return a;
-  return b.createdAt >= a.createdAt ? b : a;
+  const before = aiRequestStatusRank(a);
+  const after = aiRequestStatusRank(b);
+  return before !== undefined && after !== undefined && after < before ? a : b;
 }
 
-/** 같은 id 는 하나만 유지(타임스탬프가 더 최신인 행). */
+/** 커서 판단용 방별 sequence 순서. sequence가 없는 옛 메시지는 작성 시각으로 비교한다 */
+function compareBySequence(
+  x: ServerChatMessage,
+  y: ServerChatMessage,
+): number {
+  if (x.sequence != null && y.sequence != null) return x.sequence - y.sequence;
+  return x.createdAt.localeCompare(y.createdAt);
+}
+
+/**
+ * 같은 id는 하나만 유지하고 작성 시각 순으로 정렬한다.
+ * 거의 동시에 저장된 메시지는 서버가 충돌을 재시도한 순서로 sequence를 받아 보낸 순서와 다를 수 있다.
+ */
 export function mergeServerMessageLists(
   ...lists: ServerChatMessage[][]
 ): ServerChatMessage[] {
@@ -616,6 +640,93 @@ export function mergeServerMessageLists(
   return [...map.values()].sort((x, y) => x.createdAt.localeCompare(y.createdAt));
 }
 
+/** 목록에 이미 있는 id만 새 내용으로 바꾼다. 새 id는 붙이지 않는다 */
+export function replaceExistingServerMessages(
+  list: ServerChatMessage[],
+  updates: readonly ServerChatMessage[],
+): ServerChatMessage[] {
+  if (updates.length === 0) return list;
+  const byId = new Map<string, ServerChatMessage>();
+  for (const m of updates) {
+    const prev = byId.get(m.id);
+    byId.set(m.id, prev ? preferNewerServerMessage(prev, m) : m);
+  }
+  let changed = false;
+  const next = list.map((m) => {
+    const update = byId.get(m.id);
+    if (!update) return m;
+    const kept = preferNewerServerMessage(m, update);
+    if (kept !== m) changed = true;
+    return kept;
+  });
+  return changed ? next : list;
+}
+
+export type LiveMessagePartition = {
+  /** 커서 다음 번호부터 이어지는 새 메시지 — 목록 끝에 붙인다 */
+  appended: ServerChatMessage[];
+  /** 이미 반영한 번호거나 중간 창에서 받은 메시지 — 목록에 있는 id만 바꾼다 */
+  updates: ServerChatMessage[];
+  cursor: number | undefined;
+  /** 커서 다음 번호가 비었다 — 서버에서 따라잡아야 한다 */
+  hasGap: boolean;
+};
+
+/**
+ * 실시간 메시지를 sequence 커서로 나눈다. 커서는 목록 끝까지 빠짐없이 반영한 마지막 번호다.
+ * - 목록이 최신 끝이 아니면(중간 창) 새 메시지를 붙이지 않는다. 붙이면 그 사이가 빈다
+ * - 커서+1만 붙이고, 그보다 큰 번호는 빈 번호를 따라잡을 때 함께 받는다
+ * - sequence가 없는 옛 메시지는 id로만 판단한다
+ */
+export function partitionLiveMessages(
+  msgs: readonly ServerChatMessage[],
+  {
+    cursor,
+    atTail,
+    list,
+  }: {
+    cursor: number | undefined;
+    atTail: boolean;
+    list: readonly ServerChatMessage[];
+  },
+): LiveMessagePartition {
+  const appended: ServerChatMessage[] = [];
+  const updates: ServerChatMessage[] = [];
+  let next = cursor;
+  let hasGap = false;
+  for (const msg of [...msgs].sort(compareBySequence)) {
+    const seq = msg.sequence;
+    if (!atTail) {
+      updates.push(msg);
+    } else if (seq == null || next == null) {
+      if (list.some((m) => m.id === msg.id)) {
+        updates.push(msg);
+      } else {
+        appended.push(msg);
+        if (seq != null) next = seq;
+      }
+    } else if (seq <= next) {
+      updates.push(msg);
+    } else if (seq === next + 1) {
+      appended.push(msg);
+      next = seq;
+    } else {
+      hasGap = true;
+    }
+  }
+  return { appended, updates, cursor: next, hasGap };
+}
+
+/**
+ * 최신 끝까지 받은 스냅샷의 커서. 빈 방은 0(첫 메시지가 1번)이고,
+ * sequence가 없는 옛 메시지뿐이면 커서를 둘 수 없다.
+ */
+export function tailCursorOf(
+  snapshot: readonly ServerChatMessage[],
+): number | undefined {
+  return snapshot.length === 0 ? 0 : maxSequenceInMessages(snapshot);
+}
+
 /** GET /messages (페이징) 응답 행 → 토픽과 동일한 `ServerChatMessage[]` */
 export function normalizeFetchedRoomMessages(
   rows: readonly unknown[],
@@ -663,19 +774,6 @@ export function maxSequenceInMessages(
   return max;
 }
 
-/**
- * 초기 히스토리 GET 동안 패널에서만 잠깐 쌓이는 메시지(STOMP 등) —
- * 병합 시 서버 페이지와 함께 유지.
- */
-export function transientMessagesDuringRoomHistoryFetch(
-  prev: ServerChatMessage[],
-): ServerChatMessage[] {
-  return prev.filter((m) => {
-    const k = normalizeMessageKind(m.messageType);
-    return k === "SYSTEM" || k === "PLACE_SHARE" || k === "AI_REQUEST";
-  });
-}
-
 function buildAiRequestReplyLookup(
   rawMessages: ServerChatMessage[],
 ): Map<string, AiRequestReplyLookupEntry> {
diff --git a/src/lib/chat/messageCatchUp.test.ts b/src/lib/chat/messageCatchUp.test.ts
new file mode 100644
index 00000000..4bbc971b
--- /dev/null
+++ b/src/lib/chat/messageCatchUp.test.ts
@@ -0,0 +1,120 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { HttpError } from "@/lib/api/errors";
+
+import {
+  CHAT_CATCH_UP_PAGE_SIZE,
+  fetchRoomMessagesAfter,
+  retryChatHistoryRequest,
+} from "./messageCatchUp";
+
+const mocks = vi.hoisted(() => ({ getRoomMessages: vi.fn() }));
+
+vi.mock("@/lib/api/rooms", () => ({ getRoomMessages: mocks.getRoomMessages }));
+
+function rows(from: number, to: number) {
+  return Array.from({ length: to - from + 1 }, (_, i) => ({
+    id: `m${from + i}`,
+    roomId: "room",
+    senderId: 2,
+    messageType: "CHAT",
+    content: "",
+    createdAt: new Date(Date.UTC(2026, 9, 25, 0, 0, from + i)).toISOString(),
+    sequence: from + i,
+  }));
+}
+
+const active = () => true;
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.clearAllMocks();
+});
+
+describe("fetchRoomMessagesAfter", () => {
+  it("pages past the cursor until a short page", async () => {
+    mocks.getRoomMessages
+      .mockResolvedValueOnce(rows(41, 240))
+      .mockResolvedValueOnce(rows(241, 440))
+      .mockResolvedValueOnce(rows(441, 450));
+
+    const result = await fetchRoomMessagesAfter("room", 40, active);
+
+    expect(result).toHaveLength(410);
+    expect(mocks.getRoomMessages.mock.calls).toEqual([
+      ["room", { afterSequence: "40", size: CHAT_CATCH_UP_PAGE_SIZE }],
+      ["room", { afterSequence: "240", size: CHAT_CATCH_UP_PAGE_SIZE }],
+      ["room", { afterSequence: "440", size: CHAT_CATCH_UP_PAGE_SIZE }],
+    ]);
+  });
+
+  it("asks once when nothing was missed", async () => {
+    mocks.getRoomMessages.mockResolvedValueOnce([]);
+
+    await expect(fetchRoomMessagesAfter("room", 40, active)).resolves.toEqual([]);
+    expect(mocks.getRoomMessages).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([0, undefined])(
+    "loads the latest page instead of afterSequence=%s",
+    async (cursor) => {
+      mocks.getRoomMessages.mockResolvedValueOnce(rows(1, 3));
+
+      const result = await fetchRoomMessagesAfter("room", cursor, active);
+
+      expect(result.map((m) => m.sequence)).toEqual([1, 2, 3]);
+      expect(mocks.getRoomMessages).toHaveBeenCalledWith("room", { size: 15 });
+    },
+  );
+});
+
+describe("retryChatHistoryRequest", () => {
+  it.each([new TypeError("Failed to fetch"), new HttpError(503, "unavailable")])(
+    "retries %s after the backoff delay",
+    async (error) => {
+      vi.useFakeTimers();
+      const request = vi.fn().mockRejectedValueOnce(error).mockResolvedValueOnce("ok");
+
+      const pending = retryChatHistoryRequest(request, active);
+      await vi.advanceTimersByTimeAsync(999);
+      expect(request).toHaveBeenCalledTimes(1);
+      await vi.advanceTimersByTimeAsync(1);
+
+      await expect(pending).resolves.toBe("ok");
+      expect(request).toHaveBeenCalledTimes(2);
+    },
+  );
+
+  it.each([400, 403, 404])("does not retry %s", async (status) => {
+    const request = vi.fn().mockRejectedValue(new HttpError(status, "rejected"));
+
+    await expect(retryChatHistoryRequest(request, active)).rejects.toBeInstanceOf(HttpError);
+    expect(request).toHaveBeenCalledTimes(1);
+  });
+
+  it("gives up after three retries", async () => {
+    vi.useFakeTimers();
+    const request = vi.fn().mockRejectedValue(new HttpError(500, "down"));
+
+    const pending = retryChatHistoryRequest(request, active);
+    const settled = expect(pending).rejects.toBeInstanceOf(HttpError);
+    await vi.advanceTimersByTimeAsync(1_000 + 2_000 + 4_000);
+
+    await settled;
+    expect(request).toHaveBeenCalledTimes(4);
+  });
+
+  it("stops when the room is left during the wait", async () => {
+    vi.useFakeTimers();
+    let isActive = true;
+    const request = vi.fn().mockRejectedValue(new HttpError(500, "down"));
+
+    const pending = retryChatHistoryRequest(request, () => isActive);
+    const settled = expect(pending).rejects.toBeInstanceOf(HttpError);
+    isActive = false;
+    await vi.advanceTimersByTimeAsync(1_000);
+
+    await settled;
+    expect(request).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/lib/chat/messageCatchUp.ts b/src/lib/chat/messageCatchUp.ts
new file mode 100644
index 00000000..ede6500c
--- /dev/null
+++ b/src/lib/chat/messageCatchUp.ts
@@ -0,0 +1,87 @@
+import type { ServerChatMessage } from "@/types/chat";
+import { getRoomMessages } from "@/lib/api/rooms";
+import { HttpError } from "@/lib/api/errors";
+import { maxSequenceInMessages, normalizeFetchedRoomMessages } from "@/lib/chat";
+import { CHAT_MESSAGE_PAGE_SIZE } from "@/lib/chat/readBoundary";
+
+/** 백엔드 GET /messages `size` 상한 */
+export const CHAT_CATCH_UP_PAGE_SIZE = 200;
+
+/** TanStack Query 기본 재시도(3회, 1·2·4초)와 같다 */
+const CHAT_HISTORY_RETRY_DELAYS_MS = [1_000, 2_000, 4_000];
+
+/** 네트워크 오류·5xx·429만 다시 보낸다. 400·403·404는 다시 보내도 같다 */
+function isRetryableHistoryError(error: unknown): boolean {
+  return (
+    !(error instanceof HttpError) ||
+    error.status >= 500 ||
+    error.status === 429
+  );
+}
+
+/**
+ * 채팅 기록 조회를 실패 종류에 따라 다시 보낸다.
+ * `isActive`가 거짓이면(방을 떠났거나 더 새 조회가 시작됨) 기다린 뒤 보내지 않는다.
+ */
+export async function retryChatHistoryRequest<T>(
+  request: () => Promise<T>,
+  isActive: () => boolean,
+): Promise<T> {
+  for (let attempt = 0; ; attempt += 1) {
+    try {
+      return await request();
+    } catch (error) {
+      const delay = CHAT_HISTORY_RETRY_DELAYS_MS[attempt];
+      if (delay === undefined || !isRetryableHistoryError(error) || !isActive()) {
+        throw error;
+      }
+      await new Promise((resolve) => setTimeout(resolve, delay));
+      if (!isActive()) throw error;
+    }
+  }
+}
+
+/**
+ * 커서 뒤의 메시지를 끝까지 받는다.
+ * 커서가 없거나 0이면(빈 방·sequence 없는 옛 목록) 최신 페이지를 받는다 —
+ * 백엔드는 afterSequence가 1보다 작으면 400을 준다.
+ */
+export async function fetchRoomMessagesAfter(
+  roomId: string,
+  cursor: number | undefined,
+  isActive: () => boolean,
+): Promise<ServerChatMessage[]> {
+  if (cursor == null || cursor < 1) {
+    const latest = await retryChatHistoryRequest(
+      () => getRoomMessages(roomId, { size: CHAT_MESSAGE_PAGE_SIZE }),
+      isActive,
+    );
+    return normalizeFetchedRoomMessages(latest);
+  }
+
+  const rows: ServerChatMessage[] = [];
+  let after = cursor;
+  for (;;) {
+    const page = normalizeFetchedRoomMessages(
+      await retryChatHistoryRequest(
+        () =>
+          getRoomMessages(roomId, {
+            afterSequence: String(after),
+            size: CHAT_CATCH_UP_PAGE_SIZE,
+          }),
+        isActive,
+      ),
+    );
+    rows.push(...page);
+    const last = maxSequenceInMessages(page);
+    if (
+      page.length < CHAT_CATCH_UP_PAGE_SIZE ||
+      last == null ||
+      last <= after ||
+      !isActive()
+    ) {
+      return rows;
+    }
+    after = last;
+  }
+}
diff --git a/src/lib/contact.ts b/src/lib/contact.ts
index 8f195f07..126737d4 100644
--- a/src/lib/contact.ts
+++ b/src/lib/contact.ts
@@ -1,2 +1,2 @@
 export const SUPPORT_EMAIL = "contact@uttae.app";
-export const FEEDBACK_FORM_URL = "https://forms.gle/giYqRzrhCYF9Hz1M9";
+export const FEEDBACK_FORM_URL = "https://forms.gle/jYpDAJj6qKNMwbiWA";
diff --git a/src/lib/expenses/expense-policy.ts b/src/lib/expenses/expense-policy.ts
index bd3e693e..19209caf 100644
--- a/src/lib/expenses/expense-policy.ts
+++ b/src/lib/expenses/expense-policy.ts
@@ -84,35 +84,44 @@ export function roleOptions(
   ].sort((a, b) => a.userId - b.userId);
 }
 export type ExpenseDay = { scheduleId: number; items?: { itemId: number }[] };
-export function validateExpense(
-  body: ExpenseInput,
-  currencies: ExpenseCurrency[],
-  members: RoomMember[],
-  original: Expense | undefined,
+
+// 칸별 검증. 비용 편집 폼이 칸마다 부르고(TanStack Form validators), validateExpense가 같은 순서로 묶어 첫 오류를 돌려준다
+export function expenseCategoryError(category: unknown): string | null {
+  return isExpenseCategory(category) ? null : "카테고리를 선택해 주세요.";
+}
+export function expenseMemoError(memo: string | null | undefined): string | null {
+  return (memo?.length ?? 0) > 1000 ? "메모는 1000자까지 입력할 수 있어요." : null;
+}
+/** 일차 구분·연결 장소. 준비 비용은 연결 없음, 일차 비용은 있는 일차와 그 일차의 장소(또는 장소 없음)여야 한다 */
+export function expenseLinkError(
+  link: Pick<ExpenseInput, "expenseGroup" | "scheduleId" | "scheduleItemId">,
   days: ExpenseDay[],
 ): string | null {
-  const error = amountError(
-    body.totalAmount,
-    currencies.find((c) => c.currency === body.currency),
-  );
-  if (error) return error;
-  if (!isExpenseCategory(body.category)) return "카테고리를 선택해 주세요.";
-  if ((body.memo?.length ?? 0) > 1000)
-    return "메모는 1000자까지 입력할 수 있어요.";
-  if (body.expenseGroup === "PREPARATION") {
-    if (body.scheduleId !== null || body.scheduleItemId !== null)
+  if (link.expenseGroup === "PREPARATION") {
+    if (link.scheduleId !== null || link.scheduleItemId !== null)
       return "준비 비용은 일차·장소에 연결할 수 없어요.";
-  } else if (body.expenseGroup === "TRIP_DAY") {
-    const day = days.find((d) => d.scheduleId === body.scheduleId);
+    return null;
+  }
+  if (link.expenseGroup === "TRIP_DAY") {
+    const day = days.find((d) => d.scheduleId === link.scheduleId);
     if (
       !day ||
-      (body.scheduleItemId !== null &&
-        !day.items?.some((i) => i.itemId === body.scheduleItemId))
+      (link.scheduleItemId !== null &&
+        !day.items?.some((i) => i.itemId === link.scheduleItemId))
     )
       return "유효한 일차와 해당 일차의 장소를 선택해 주세요.";
-  } else return "일차 구분을 선택해 주세요.";
+    return null;
+  }
+  return "일차 구분을 선택해 주세요.";
+}
+/** 결제자·부담자. 각각 한 명 이상·중복 없음, 고를 수 있는 멤버이거나 원래 비용에 있던 알 수 없는 멤버여야 한다 */
+export function expenseRolesError(
+  roles: Pick<ExpenseInput, "payerUserIds" | "participantUserIds">,
+  members: RoomMember[],
+  original: Expense | undefined,
+): string | null {
   for (const role of ["payerUserIds", "participantUserIds"] as const) {
-    const ids = body[role];
+    const ids = roles[role];
     if (!ids.length || new Set(ids).size !== ids.length)
       return "결제자와 부담자를 각각 한 명 이상, 중복 없이 선택해 주세요.";
     if (
@@ -131,3 +140,21 @@ export function validateExpense(
   }
   return null;
 }
+export function validateExpense(
+  body: ExpenseInput,
+  currencies: ExpenseCurrency[],
+  members: RoomMember[],
+  original: Expense | undefined,
+  days: ExpenseDay[],
+): string | null {
+  return (
+    amountError(
+      body.totalAmount,
+      currencies.find((c) => c.currency === body.currency),
+    ) ??
+    expenseCategoryError(body.category) ??
+    expenseMemoError(body.memo) ??
+    expenseLinkError(body, days) ??
+    expenseRolesError(body, members, original)
+  );
+}
diff --git a/src/lib/google-login-client.test.ts b/src/lib/google-login-client.test.ts
new file mode 100644
index 00000000..77e015cc
--- /dev/null
+++ b/src/lib/google-login-client.test.ts
@@ -0,0 +1,68 @@
+// @vitest-environment jsdom
+import { QueryClient } from "@tanstack/react-query";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { finishGoogleLogin } from "./google-login-client";
+import { setPendingInviteCode, consumePendingInviteCode } from "./session-user-flow";
+import { saveGoogleAgreementFlowSession } from "./google-oauth";
+import { analyticsConsentStore } from "./analytics/consent-store";
+import { initializeGoogleAnalytics, revokeGoogleAnalyticsConsent } from "./analytics/client";
+import { tearDownClientSession } from "./client-storage";
+
+vi.mock("./analytics/runtime", () => ({ analyticsRuntime: { enabled: true } }));
+vi.mock("./analytics/amplitude-runtime", () => ({ amplitudeRuntime: { enabled: false } }));
+const session = vi.hoisted(() => ({ read: vi.fn() }));
+vi.mock("./session-user", () => ({ fetchSessionUserWithRetry: session.read }));
+let client: QueryClient;
+function commands() {
+  return (window.dataLayer ?? []).map(c => Array.from(c as ArrayLike<unknown>));
+}
+beforeEach(() => {
+  client = new QueryClient();
+  sessionStorage.clear();
+  window.history.replaceState(null, "", "/auth/callback?code=test-code&state=test-state");
+  window.dataLayer = [];
+  session.read.mockResolvedValue({ id: 42, email: "fixture@example.test", nickname: "fixture", profileImageUrl: null, provider: "GOOGLE", tutorialCompleted: false });
+  analyticsConsentStore.set("granted");
+  initializeGoogleAnalytics("G-TEST", false);
+  window.dataLayer = [];
+});
+afterEach(() => { client.clear(); vi.clearAllMocks(); });
+it.each(["login", "signup", "reaccept"] as const)("returns the same invite campaign after %s and sets identity before its event", async kind => {
+  setPendingInviteCode("test-invite", "?utm_campaign=existing&code=secret");
+  if (kind === "signup") saveGoogleAgreementFlowSession({ kind, signupToken: "test-signup", expiresAt: Date.now() + 10000 });
+  if (kind === "reaccept") saveGoogleAgreementFlowSession({ kind, reacceptanceToken: "test-reaccept", expiresAt: Date.now() + 10000 });
+  expect(await finishGoogleLogin(client)).toBe("/join/test-invite?utm_campaign=existing");
+  expect(consumePendingInviteCode()).toBeNull();
+  expect(commands()).toEqual([
+    ["set", { user_id: "42" }],
+    ["event", kind === "signup" ? "sign_up" : "login", {
+      method: "google", entry_point: "invite", page_path: "/auth/callback", page_location: "http://localhost:3000/auth/callback",
+    }],
+  ]);
+  tearDownClientSession({ queryClient: client });
+  expect(commands().at(-1)).toEqual(["set", { user_id: null }]);
+});
+it("does not replay a denied-consent login after later consent", async () => {
+  revokeGoogleAnalyticsConsent();
+  analyticsConsentStore.set("denied");
+  window.dataLayer = [];
+  setPendingInviteCode("test-invite", "?utm_source=partner");
+  expect(await finishGoogleLogin(client)).toBe("/join/test-invite?utm_source=partner");
+  expect(commands()).toEqual([]);
+  analyticsConsentStore.set("granted");
+  initializeGoogleAnalytics("G-TEST", false);
+  expect(commands().some(([name]) => name === "event")).toBe(false);
+});
+it("keeps the pending invitation when session confirmation fails", async () => {
+  session.read.mockResolvedValue(null);
+  setPendingInviteCode("test-invite", "?utm_source=partner");
+  expect(await finishGoogleLogin(client)).toBeNull();
+  expect(consumePendingInviteCode()).toBe("test-invite");
+  expect(commands().some(([name]) => name === "event")).toBe(false);
+});
+it("does not invent an invite campaign for ordinary login", async () => {
+  expect(await finishGoogleLogin(client)).toBe("/home");
+  expect(commands()[1]).toEqual(["event", "login", {
+    method: "google", entry_point: "direct", page_path: "/auth/callback", page_location: "http://localhost:3000/auth/callback",
+  }]);
+});
diff --git a/src/lib/google-login-client.ts b/src/lib/google-login-client.ts
index 1e004272..aa949e1a 100644
--- a/src/lib/google-login-client.ts
+++ b/src/lib/google-login-client.ts
@@ -15,6 +15,7 @@ import {
   clearGoogleAgreementFlowSession,
   readGoogleAgreementFlowSession,
 } from "@/lib/google-oauth";
+import { pendingInviteReturnPath } from "@/lib/session-user-flow";
 import { setSessionUserCache } from "@/lib/session-user-cache";
 import { useSessionStore } from "@/stores/session-store";
 
@@ -32,6 +33,7 @@ export async function finishGoogleLogin(
   setSessionUserCache(queryClient, me);
   useSessionStore.getState().setSessionReady(true);
   const agreementFlow = readGoogleAgreementFlowSession();
+  const inviteDestination = pendingInviteReturnPath();
   const pendingInviteCode = consumePendingInviteCode();
   clearGoogleAgreementFlowSession();
   setAnalyticsUserId(me.id);
@@ -45,5 +47,5 @@ export async function finishGoogleLogin(
     },
   );
 
-  return pendingInviteCode ? `/join/${pendingInviteCode}` : "/home";
+  return inviteDestination ?? "/home";
 }
diff --git a/src/lib/google-maps-url.test.ts b/src/lib/google-maps-url.test.ts
index 8111487b..87455cca 100644
--- a/src/lib/google-maps-url.test.ts
+++ b/src/lib/google-maps-url.test.ts
@@ -7,7 +7,7 @@ type GoogleMapsUrlModule = typeof maps & {
     originQuery: string;
     destinationPlaceId: string;
     destinationQuery: string;
-    travelMode: "WALKING" | "TRANSIT" | "DRIVING" | "BICYCLING";
+    travelMode: "WALKING" | "TRANSIT" | "DRIVING";
   }) => string | null;
 };
 
diff --git a/src/lib/invite-campaign.test.ts b/src/lib/invite-campaign.test.ts
new file mode 100644
index 00000000..8283bbe6
--- /dev/null
+++ b/src/lib/invite-campaign.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { buildSharedInviteUrl, inviteCampaignSearch, withInviteCampaign } from "./invite-campaign";
+
+describe("invite campaign URLs", () => {
+  it("tags an outgoing invitation with the approved campaign", () => {
+    expect(buildSharedInviteUrl("https://example.test/join/test-invite"))
+      .toBe("https://example.test/join/test-invite?utm_source=member_invite&utm_medium=referral&utm_campaign=invite");
+  });
+  it.each([
+    "utm_source=partner&utm_medium=email&utm_campaign=launch&utm_content=a",
+    "utm_campaign=launch", "utm_source=", "utm_custom=keep",
+  ])("does not mix defaults into an existing campaign: %s", search => {
+    const url = `https://example.test/join/test-invite?${search}#section`;
+    expect(buildSharedInviteUrl(url)).toBe(url);
+  });
+  it("carries only allowed campaign keys, including empty and repeated values", () => {
+    expect(inviteCampaignSearch("?utm_source=partner&utm_content=a&utm_content=b&utm_campaign=&code=secret&state=secret&inviteCode=secret&redirect=https://other.test#hash"))
+      .toBe("utm_source=partner&utm_content=a&utm_content=b&utm_campaign=");
+  });
+  it("preserves destination campaign as one set, rather than merging fields", () => {
+    expect(withInviteCampaign("/login?utm_campaign=other&error=OAuthCallback", "utm_source=member_invite"))
+      .toBe("/login?utm_campaign=other&error=OAuthCallback");
+  });
+  it("carries context without inventing a default on internal navigation", () => {
+    expect(withInviteCampaign("/login?error=OAuthCallback", "utm_source=partner"))
+      .toBe("/login?error=OAuthCallback&utm_source=partner");
+    expect(withInviteCampaign("/login", "")).toBe("/login");
+  });
+});
diff --git a/src/lib/invite-campaign.ts b/src/lib/invite-campaign.ts
new file mode 100644
index 00000000..0f16ed4d
--- /dev/null
+++ b/src/lib/invite-campaign.ts
@@ -0,0 +1,37 @@
+import { analyticsCampaignParameterNames } from "@/lib/analytics/context";
+
+const allowedCampaignNames = new Set<string>(analyticsCampaignParameterNames);
+const defaultInviteCampaign = "utm_source=member_invite&utm_medium=referral&utm_campaign=invite";
+
+function hasCampaign(search: URLSearchParams): boolean {
+  return [...search.keys()].some(name => name.startsWith("utm_"));
+}
+
+/** Navigation context only: never retain OAuth parameters, arbitrary queries or fragments. */
+export function inviteCampaignSearch(search: string): string {
+  const source = new URLSearchParams(search.split("#", 1)[0]);
+  const campaign = new URLSearchParams();
+  for (const [name, value] of source) {
+    if (allowedCampaignNames.has(name)) campaign.append(name, value);
+  }
+  return campaign.toString();
+}
+
+/** Preserve an existing campaign as a whole, including partial/empty sets. */
+export function withInviteCampaign(path: string, campaign: string): string {
+  const hashIndex = path.indexOf("#");
+  const beforeHash = hashIndex === -1 ? path : path.slice(0, hashIndex);
+  const fragment = hashIndex === -1 ? "" : path.slice(hashIndex);
+  const queryIndex = beforeHash.indexOf("?");
+  const search = new URLSearchParams(queryIndex === -1 ? "" : beforeHash.slice(queryIndex + 1));
+  if (hasCampaign(search)) return path;
+  const allowedCampaign = inviteCampaignSearch(campaign);
+  if (!allowedCampaign) return path;
+  const separator = queryIndex === -1 ? "?" : beforeHash.endsWith("?") ? "" : "&";
+  return `${beforeHash}${separator}${allowedCampaign}${fragment}`;
+}
+
+/** Only outgoing copy/share links create the default invitation campaign. */
+export function buildSharedInviteUrl(url: string): string {
+  return withInviteCampaign(url, defaultInviteCampaign);
+}
diff --git a/src/lib/layout-tokens.ts b/src/lib/layout-tokens.ts
index ad2bd9f4..0da4c792 100644
--- a/src/lib/layout-tokens.ts
+++ b/src/lib/layout-tokens.ts
@@ -55,8 +55,6 @@ export const PLAN_PLACE_CARD_TW = {
     "absolute -left-2 -top-2 z-10 h-8 w-8 rounded-lg border-2 border-white text-body-s-regular mobile:text-body-xs-regular shadow-md",
   titleCompact: "text-body-m-emphasis mobile:text-body-s-emphasis font-semibold leading-snug text-gray-900",
   title: "truncate text-body-l-emphasis mobile:text-body-s-emphasis text-text",
-  primaryTypeBadge:
-    "w-fit max-w-full shrink-0 truncate rounded-full bg-fill px-1.5 py-0.5 text-body-xs-regular text-text-subtle",
   deleteButtonCompact: "p-1 @min-[370px]/plan:p-1.5",
   deleteIconSize: 16,
   /** 카드 아래 시간·비용(왼쪽)과 메모(오른쪽) 버튼 줄 — 버튼 배경이 카드 안쪽 여백보다 바깥에 오도록 좌우를 넓힌다 */
@@ -83,10 +81,6 @@ export const PLAN_PLACE_CARD_TW = {
   timeField: "flex min-w-0 w-full flex-col gap-1",
   timeInputCompact:
     "h-9 min-w-0 w-full rounded-md border border-gray-200 bg-white px-2 text-body-s-regular shadow-none transition focus:border-secondary focus:outline-none focus:ring-1 focus:ring-secondary/30",
-  timeSaveButtonCompact:
-    "h-8 shrink-0 rounded-md px-3 text-label-xs-regular font-medium",
-  memoTextarea:
-    "min-h-[6rem] w-full resize-y rounded-lg border border-gray-200 bg-white px-3 py-2 text-body-s-regular leading-relaxed text-gray-900 shadow-none transition placeholder:text-dark-gray/50 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30",
 } as const;
 
 /** 플랜 구간(경로) 카드 가로 고정폭(px). 좌측 패널 max(s2) 기준 본문 영역 근사 */
diff --git a/src/lib/layout/mapDetailPanelLayout.ts b/src/lib/layout/mapDetailPanelLayout.ts
index 4e9c0914..c88e4f26 100644
--- a/src/lib/layout/mapDetailPanelLayout.ts
+++ b/src/lib/layout/mapDetailPanelLayout.ts
@@ -12,6 +12,3 @@ export const MAP_TOOLBAR_ELEVATED_Z_CLASS = "z-[25]" as const;
 
 /** 지도 툴바 기본 스택 */
 export const MAP_TOOLBAR_Z_CLASS = "z-[15]" as const;
-
-/** 툴바 elevated 스택 안 드롭다운 메뉴 */
-export const MAP_FILTER_DROPDOWN_MENU_Z_CLASS = "z-[30]" as const;
diff --git a/src/lib/map-viewport-commit.test.ts b/src/lib/map-viewport-commit.test.ts
new file mode 100644
index 00000000..463d2d30
--- /dev/null
+++ b/src/lib/map-viewport-commit.test.ts
@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+import { beforeEach, expect, it } from "vitest";
+import { settleSearchSnapshotAfterMove } from "./map-viewport-commit";
+import { useMapCenterStore } from "@/stores/map-center-store";
+import { useSearchRecenterStore } from "@/stores/search-recenter-store";
+
+const searched = { center: { lat: 0, lng: 0 }, zoom: 10, radius: 5000 };
+
+function fakeMap() {
+  const div = document.createElement("div");
+  const handlers = new Map<string, () => void>();
+  return {
+    div,
+    fire: (name: string) => handlers.get(name)?.(),
+    map: {
+      getDiv: () => div,
+      addListener: (name: string, handler: () => void) => {
+        handlers.set(name, handler);
+        return { remove: () => handlers.delete(name) };
+      },
+    },
+  };
+}
+
+beforeEach(() => {
+  useSearchRecenterStore.setState({ searchSnapshot: searched });
+  useMapCenterStore.setState({ mapCenter: { lat: 1, lng: 2 }, zoom: 14, radiusMeters: 1500 });
+});
+
+// 카페 검색 결과에 맞춰 지도가 확대되면 그 화면이 기준점이라 버튼이 보이지 않는다
+it("takes the settled result camera as the search-here baseline", () => {
+  const { map, fire } = fakeMap();
+  settleSearchSnapshotAfterMove(map);
+  fire("idle");
+  expect(useSearchRecenterStore.getState().searchSnapshot).toEqual({ center: { lat: 1, lng: 2 }, zoom: 14, radius: 1500 });
+});
+
+it.each(["pointerdown", "wheel"])("keeps the searched area when the user %s the map before it settles", (event) => {
+  const { map, div, fire } = fakeMap();
+  settleSearchSnapshotAfterMove(map);
+  div.dispatchEvent(new Event(event));
+  fire("idle");
+  expect(useSearchRecenterStore.getState().searchSnapshot).toEqual(searched);
+});
+
+it("does not restore a search the user already cleared", () => {
+  const { map, fire } = fakeMap();
+  settleSearchSnapshotAfterMove(map);
+  useSearchRecenterStore.getState().clearSearchSnapshot();
+  fire("idle");
+  expect(useSearchRecenterStore.getState().searchSnapshot).toBeNull();
+});
diff --git a/src/lib/map-viewport-commit.ts b/src/lib/map-viewport-commit.ts
index cdced274..548a5b30 100644
--- a/src/lib/map-viewport-commit.ts
+++ b/src/lib/map-viewport-commit.ts
@@ -3,9 +3,10 @@
 import { clampPlacesSearchRadiusMeters } from "@/lib/places/placesSearchRadius";
 import { viewportSearchRadiusMetersFromBounds } from "@/lib/maps";
 import { useMapCenterStore } from "@/stores/map-center-store";
-import type {
-  DiscoverMapSnapshot,
-  SearchMapSnapshot,
+import {
+  useSearchRecenterStore,
+  type DiscoverMapSnapshot,
+  type SearchMapSnapshot,
 } from "@/stores/search-recenter-store";
 
 /** 검색 페이지 `GET /places/search` 의 위치 고정 스냅샷 (`map-center-store` 기준) */
@@ -24,6 +25,32 @@ export function buildSearchMapSnapshotFromMapCenterStore(): SearchMapSnapshot |
   };
 }
 
+/**
+ * 검색 결과를 보여 주려고 옮긴 지도가 멈추면 그 화면을 「현 위치에서 검색」 기준점으로 삼는다.
+ * 기준점이 검색 요청 때 화면이면 결과로 옮기자마자(맞춤 확대·첫 결과로 이동) 버튼이 다시 보인다.
+ * 옮길 곳이 지금 화면과 같으면 idle이 오지 않으므로, 그 전에 사용자가 지도를 만지면 취소해
+ * 사용자가 옮긴 화면을 기준점으로 삼지 않는다. +/−는 지도 안 컨트롤이라 함께 잡힌다.
+ */
+export function settleSearchSnapshotAfterMove(
+  map: Pick<google.maps.Map, "getDiv" | "addListener">,
+): () => void {
+  const div = map.getDiv();
+  const cancel = () => {
+    idle.remove();
+    div.removeEventListener("pointerdown", cancel, true);
+    div.removeEventListener("wheel", cancel, true);
+  };
+  const idle = map.addListener("idle", () => {
+    cancel();
+    const camera = buildSearchMapSnapshotFromMapCenterStore();
+    const { searchSnapshot, setSearchSnapshot } = useSearchRecenterStore.getState();
+    if (camera && searchSnapshot) setSearchSnapshot(camera);
+  });
+  div.addEventListener("pointerdown", cancel, true);
+  div.addEventListener("wheel", cancel, { capture: true, passive: true });
+  return cancel;
+}
+
 /** Discover(Places JS) 영역 고정 스냅샷 — 맵 현재 카메라 기준 1회 커밋 */
 export function buildDiscoverSnapshotFromGoogleMap(
   map: google.maps.Map,
diff --git a/src/lib/maps.ts b/src/lib/maps.ts
index b6b62540..e084523f 100644
--- a/src/lib/maps.ts
+++ b/src/lib/maps.ts
@@ -73,14 +73,12 @@ export const MAP_MAX_ZOOM = 21;
 type GoogleMapsDirectionsTravelMode =
   | "WALKING"
   | "TRANSIT"
-  | "DRIVING"
-  | "BICYCLING";
+  | "DRIVING";
 
 const GOOGLE_MAPS_DIRECTIONS_TRAVEL_MODE = {
   WALKING: "walking",
   TRANSIT: "transit",
   DRIVING: "driving",
-  BICYCLING: "bicycling",
 } as const satisfies Record<GoogleMapsDirectionsTravelMode, string>;
 
 /** Place ID로 Google Maps 장소 상세 URL을 만든다. */
diff --git a/src/lib/place-photo-query.ts b/src/lib/place-photo-query.ts
index 299a0596..38dff823 100644
--- a/src/lib/place-photo-query.ts
+++ b/src/lib/place-photo-query.ts
@@ -1,13 +1,23 @@
 import type { Query } from "@tanstack/react-query";
 
-import { requestPlacePhotoUrl } from "@/lib/api/places";
-import { getQueryClient } from "@/lib/query-client";
+import { isBatchItemOk } from "@/lib/api/batch-types";
+import { HttpError } from "@/lib/api/errors";
+import {
+  requestPlacePhotoUrl,
+  requestPlacePhotoUrlsBatch,
+  type PlacePhotoUrlBatchItem,
+} from "@/lib/api/places";
+import { normalizeGooglePlaceResourceId } from "@/lib/maps";
+import {
+  createPlaceBatchLoader,
+  type PlaceBatchResult,
+} from "@/lib/places/place-batch-loader";
 
 /**
  * `usePlacePhotoUrlQuery` — 같은 `googlePlaceId`에 대해 불필요한 `GET /places/photos` 재호출 방지.
  */
-export const PLACE_PHOTO_QUERY_GC_MS = 7 * 24 * 60 * 60 * 1000;
-export const PLACE_PHOTO_EMPTY_STALE_MS = 5 * 60 * 1000;
+const PLACE_PHOTO_QUERY_GC_MS = 7 * 24 * 60 * 60 * 1000;
+const PLACE_PHOTO_EMPTY_STALE_MS = 5 * 60 * 1000;
 
 export function placePhotoUrlQueryKey(googlePlaceId: string) {
   const id = typeof googlePlaceId === "string" ? googlePlaceId.trim() : "";
@@ -34,35 +44,42 @@ export const placePhotoUrlQueryDefaults = {
   refetchOnMount: true,
   refetchOnWindowFocus: false,
   refetchOnReconnect: false,
-  retry: 2,
 } as const;
 
-/** batch 시딩 후 구독 — 항목별 실패로 캐시 miss이면 단건 GET fallback */
-export function seededPlacePhotoUrlQueryOptions(
-  googlePlaceId: string,
-  options?: { enabled?: boolean },
-) {
-  const id = typeof googlePlaceId === "string" ? googlePlaceId.trim() : "";
-  const enabled = (options?.enabled ?? true) && id.length > 0;
+function photoBatchItemResult(item: PlacePhotoUrlBatchItem): PlaceBatchResult<string> {
+  if (isBatchItemOk(item)) {
+    return {
+      ok: true,
+      value: typeof item.photoUrl === "string" ? item.photoUrl.trim() : "",
+    };
+  }
+  // 항목 실패는 외부 API 실패(EXTERNAL_API_ERROR)일 때만 온다 — 단건으로 보냈으면 502였을 실패다
   return {
-    queryKey: placePhotoUrlQueryKey(id),
-    queryFn: (): string | Promise<string> => {
-      const state = getQueryClient()?.getQueryState<string>(
-        placePhotoUrlQueryKey(id),
-      );
-      const cached = state?.data;
-      if (typeof cached === "string") {
-        const trimmed = cached.trim();
-        if (
-          trimmed.length > 0 ||
-          Date.now() - (state?.dataUpdatedAt ?? 0) < PLACE_PHOTO_EMPTY_STALE_MS
-        ) {
-          return trimmed;
-        }
-      }
-      return requestPlacePhotoUrl(id);
-    },
-    enabled,
-    ...placePhotoUrlQueryDefaults,
+    ok: false,
+    error: new HttpError(502, `장소 사진 URL 조회 실패: ${item.errorCode ?? item.status}`),
   };
 }
+
+/** 응답 id는 요청과 형식(`places/` 접두)이 다르거나 비어 있을 수 있어 같은 기준으로 맞춘다 */
+function placeKey(googlePlaceId: unknown): string {
+  return typeof googlePlaceId === "string"
+    ? normalizeGooglePlaceResourceId(googlePlaceId.trim())
+    : "";
+}
+
+/** 같은 커밋에 보이는 카드 사진을 모아 받는다 — 1장이면 단건, 2장 이상이면 batch */
+export const loadPlacePhotoUrl = createPlaceBatchLoader<string>({
+  fetchOne: (id) => requestPlacePhotoUrl(id),
+  fetchMany: async (ids) => {
+    const byPlace = new Map<string, PlaceBatchResult<string>>();
+    for (const item of await requestPlacePhotoUrlsBatch(ids)) {
+      byPlace.set(placeKey(item.googlePlaceId), photoBatchItemResult(item));
+    }
+    const results = new Map<string, PlaceBatchResult<string>>();
+    for (const id of ids) {
+      const result = byPlace.get(placeKey(id));
+      if (result) results.set(id, result);
+    }
+    return results;
+  },
+});
diff --git a/src/lib/places/place-batch-cache.ts b/src/lib/places/place-batch-cache.ts
index 768826d7..2becad90 100644
--- a/src/lib/places/place-batch-cache.ts
+++ b/src/lib/places/place-batch-cache.ts
@@ -1,24 +1,10 @@
 import type { QueryClient } from "@tanstack/react-query";
 
-import type {
-  PlacePhotoUrlBatchItem,
-  PlacePreview,
-  PlacePreviewBatchItem,
-} from "@/lib/api/places";
+import type { PlacePreview } from "@/lib/api/places";
 import {
-  requestPlacePhotoUrlsBatch,
-  requestPlacePreviewsBatch,
-} from "@/lib/api/places";
-import { isBatchItemError, isBatchItemOk } from "@/lib/api/batch-types";
-import {
-  PLACE_PHOTO_EMPTY_STALE_MS,
-  placePhotoUrlQueryDefaults,
-  placePhotoUrlQueryKey,
-} from "@/lib/place-photo-query";
-import {
-  normalizePlacePreview,
   placePreviewQueryDefaults,
   placePreviewQueryKey,
+  placePreviewQueryOptions,
   resolvePreviewGooglePlaceId,
 } from "@/lib/places/place-queries";
 import type { PlanPlace } from "@/lib/plan/types";
@@ -27,67 +13,6 @@ import { getQueryClient } from "@/lib/query-client";
 
 const PLAN_PLACE_PREVIEW_ERROR_TITLE = "장소 정보를 불러올 수 없음";
 
-/** 동일 googlePlaceId에 대한 in-flight batch 요청 공유 */
-const inFlightPreviewSeedByPlaceId = new Map<string, Promise<void>>();
-const inFlightPhotoSeedByPlaceId = new Map<string, Promise<void>>();
-
-function isUsablePreviewBatchItem(item: PlacePreviewBatchItem): boolean {
-  if (isBatchItemError(item)) return false;
-  if (isBatchItemOk(item)) return true;
-
-  const record = item as {
-    googlePlaceId?: unknown;
-    name?: unknown;
-    status?: unknown;
-  };
-  if (record.status === "ERROR") return false;
-
-  const googlePlaceId =
-    typeof record.googlePlaceId === "string" ? record.googlePlaceId.trim() : "";
-  const name = typeof record.name === "string" ? record.name.trim() : "";
-  return googlePlaceId.length > 0 && name.length > 0;
-}
-
-function previewBatchItemToNormalized(
-  item: PlacePreviewBatchItem,
-): ReturnType<typeof normalizePlacePreview> | null {
-  if (!isUsablePreviewBatchItem(item)) return null;
-
-  const record = item as {
-    googlePlaceId: string;
-    name: string;
-    formattedAddress?: string;
-    location?: { latitude: number; longitude: number } | null;
-    primaryType?: string;
-    primaryTypeDisplayName?: string;
-  };
-
-  return normalizePlacePreview({
-    googlePlaceId: record.googlePlaceId,
-    name: record.name,
-    formattedAddress: record.formattedAddress ?? "",
-    location: record.location ?? null,
-    primaryType: record.primaryType ?? "",
-    primaryTypeDisplayName: record.primaryTypeDisplayName ?? "",
-  });
-}
-
-export function seedPlacePreviewCaches(
-  queryClient: QueryClient,
-  items: readonly PlacePreviewBatchItem[],
-): void {
-  for (const item of items) {
-    const preview = previewBatchItemToNormalized(item);
-    if (!preview) continue;
-    const id = resolvePreviewGooglePlaceId(preview.googlePlaceId);
-    if (!id.length) continue;
-    queryClient.setQueryData(placePreviewQueryKey(id), preview, {
-      updatedAt: Date.now(),
-    });
-  }
-  reconcileSchedulePlanPlacesAfterPreviewSeed(queryClient);
-}
-
 function readCachedPreviewForReconcile(
   queryClient: QueryClient,
   googlePlaceId: string,
@@ -156,22 +81,6 @@ export function reconcileSchedulePlanPlacesAfterPreviewSeed(
   }
 }
 
-export function seedPlacePhotoUrlCaches(
-  queryClient: QueryClient,
-  items: readonly PlacePhotoUrlBatchItem[],
-): void {
-  for (const item of items) {
-    if (!isBatchItemOk(item)) continue;
-    const id =
-      typeof item.googlePlaceId === "string" ? item.googlePlaceId.trim() : "";
-    const url = typeof item.photoUrl === "string" ? item.photoUrl.trim() : "";
-    if (!id.length) continue;
-    queryClient.setQueryData(placePhotoUrlQueryKey(id), url, {
-      updatedAt: Date.now(),
-    });
-  }
-}
-
 function uncachedPreviewIds(
   queryClient: QueryClient,
   googlePlaceIds: readonly string[],
@@ -187,55 +96,10 @@ function uncachedPreviewIds(
   return [...new Set(out)];
 }
 
-function uncachedPhotoPlaceIds(
-  queryClient: QueryClient,
-  googlePlaceIds: readonly string[],
-): string[] {
-  const out: string[] = [];
-  for (const raw of googlePlaceIds) {
-    const id = typeof raw === "string" ? raw.trim() : "";
-    if (!id.length) continue;
-    const state = queryClient.getQueryState<string>(placePhotoUrlQueryKey(id));
-    const cached = state?.data;
-    if (typeof cached === "string" && cached.trim().length > 0) continue;
-    if (
-      typeof cached === "string" &&
-      Date.now() - (state?.dataUpdatedAt ?? 0) < PLACE_PHOTO_EMPTY_STALE_MS
-    ) {
-      continue;
-    }
-    out.push(id);
-  }
-  return [...new Set(out)];
-}
-
-async function fetchAndSeedUncachedPlacePreviews(
-  missing: readonly string[],
-  queryClient: QueryClient,
-): Promise<void> {
-  const results = await requestPlacePreviewsBatch(missing);
-  seedPlacePreviewCaches(queryClient, results);
-
-  const byNormalizedId = new Map<string, ReturnType<typeof normalizePlacePreview>>();
-  for (const item of results) {
-    const preview = previewBatchItemToNormalized(item);
-    if (!preview) continue;
-    const id = resolvePreviewGooglePlaceId(preview.googlePlaceId);
-    if (!id.length) continue;
-    byNormalizedId.set(id, preview);
-  }
-
-  for (const requestedId of missing) {
-    const id = resolvePreviewGooglePlaceId(requestedId);
-    if (!id.length) continue;
-    const preview = byNormalizedId.get(id);
-    if (!preview) continue;
-    queryClient.setQueryData(placePreviewQueryKey(id), preview, {
-      updatedAt: Date.now(),
-    });
-  }
-}
-
+/**
+ * 캐시에 없는 장소 미리보기를 batch로 받아 캐시에 채운다(실패한 곳만 batch로 한 번 더).
+ * 그래도 실패한 곳은 던지지 않고 비워 둔다 — 일정에는 자리표시자로 보이고, 다음 진입 때 다시 받는다.
+ */
 export async function fetchAndSeedPlacePreviews(
   googlePlaceIds: readonly string[],
   queryClient?: QueryClient | null,
@@ -246,107 +110,8 @@ export async function fetchAndSeedPlacePreviews(
   const missing = uncachedPreviewIds(qc, googlePlaceIds);
   if (!missing.length) return;
 
-  const toFetch: string[] = [];
-  const waits: Promise<void>[] = [];
-
-  for (const id of missing) {
-    const inFlight = inFlightPreviewSeedByPlaceId.get(id);
-    if (inFlight) {
-      waits.push(inFlight);
-      continue;
-    }
-    if (!toFetch.includes(id)) {
-      toFetch.push(id);
-    }
-  }
-
-  let fetchPromise: Promise<void> | null = null;
-  if (toFetch.length) {
-    fetchPromise = (async () => {
-      try {
-        await fetchAndSeedUncachedPlacePreviews(toFetch, qc);
-      } finally {
-        for (const id of toFetch) {
-          inFlightPreviewSeedByPlaceId.delete(id);
-        }
-      }
-    })();
-    for (const id of toFetch) {
-      inFlightPreviewSeedByPlaceId.set(id, fetchPromise);
-    }
-  }
-
-  const pending = [
-    ...(fetchPromise ? [fetchPromise] : []),
-    ...waits.filter((promise) => promise !== fetchPromise),
-  ];
-  if (pending.length) {
-    await Promise.all(pending);
-  }
+  await Promise.allSettled(missing.map((id) => qc.fetchQuery(placePreviewQueryOptions(id))));
+  reconcileSchedulePlanPlacesAfterPreviewSeed(qc);
 }
 
-export async function fetchAndSeedPlacePhotoUrls(
-  googlePlaceIds: readonly string[],
-  queryClient?: QueryClient | null,
-): Promise<void> {
-  const qc = queryClient ?? getQueryClient();
-  if (!qc) return;
-
-  const missing = uncachedPhotoPlaceIds(qc, googlePlaceIds);
-  if (!missing.length) return;
-
-  const toFetch: string[] = [];
-  const waits: Promise<void>[] = [];
-
-  for (const id of missing) {
-    const inFlight = inFlightPhotoSeedByPlaceId.get(id);
-    if (inFlight) {
-      waits.push(inFlight);
-      continue;
-    }
-    if (!toFetch.includes(id)) {
-      toFetch.push(id);
-    }
-  }
-
-  let fetchPromise: Promise<void> | null = null;
-  if (toFetch.length) {
-    fetchPromise = (async () => {
-      try {
-        const results = await requestPlacePhotoUrlsBatch(toFetch);
-        seedPlacePhotoUrlCaches(qc, results);
-      } finally {
-        for (const id of toFetch) {
-          inFlightPhotoSeedByPlaceId.delete(id);
-        }
-      }
-    })();
-    for (const id of toFetch) {
-      inFlightPhotoSeedByPlaceId.set(id, fetchPromise);
-    }
-  }
-
-  const pending = [
-    ...(fetchPromise ? [fetchPromise] : []),
-    ...waits.filter((promise) => promise !== fetchPromise),
-  ];
-  if (pending.length) {
-    await Promise.all(pending);
-  }
-}
-
-/** 미캐시·만료된 장소 사진 URL을 batch로 시딩 */
-export async function ensurePlacePhotoUrlsCached(
-  googlePlaceIds: readonly string[],
-  queryClient?: QueryClient | null,
-): Promise<void> {
-  const qc = queryClient ?? getQueryClient();
-  if (!qc) return;
-
-  await fetchAndSeedPlacePhotoUrls(googlePlaceIds, qc);
-}
-
-export {
-  placePhotoUrlQueryDefaults,
-  placePreviewQueryDefaults,
-};
+export { placePreviewQueryDefaults };
diff --git a/src/lib/places/place-batch-loader.test.ts b/src/lib/places/place-batch-loader.test.ts
new file mode 100644
index 00000000..415099bb
--- /dev/null
+++ b/src/lib/places/place-batch-loader.test.ts
@@ -0,0 +1,206 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { PLACE_BATCH_MAX_SIZE } from "@/lib/api/batch-chunk";
+import { createPlaceBatchLoader, type PlaceBatchResult } from "@/lib/places/place-batch-loader";
+
+type Outcome = "ok" | "failed" | "missing";
+
+/** id마다 응답 결과를 정한 batch 응답을 만든다 */
+function batchResponse(ids: string[], outcomeOf: (id: string) => Outcome) {
+  const results = new Map<string, PlaceBatchResult<string>>();
+  for (const id of ids) {
+    const outcome = outcomeOf(id);
+    if (outcome === "ok") results.set(id, { ok: true, value: `many:${id}` });
+    if (outcome === "failed") results.set(id, { ok: false, error: new Error(`failed:${id}`) });
+  }
+  return results;
+}
+
+function createLoader(outcomeOf: (id: string, call: number) => Outcome = () => "ok") {
+  let call = 0;
+  const fetchOne = vi.fn(async (id: string) => `one:${id}`);
+  const fetchMany = vi.fn(async (ids: string[]) => {
+    call += 1;
+    return batchResponse(ids, (id) => outcomeOf(id, call));
+  });
+  return { fetchOne, fetchMany, load: createPlaceBatchLoader({ fetchOne, fetchMany }) };
+}
+
+describe("createPlaceBatchLoader", () => {
+  it("같은 태스크에서 들어온 id는 batch 하나로 보내고 같은 id는 한 번만 싣는다", async () => {
+    const { fetchOne, fetchMany, load } = createLoader();
+
+    await expect(Promise.all([load("a"), load("b"), load("a")])).resolves.toEqual([
+      "many:a",
+      "many:b",
+      "many:a",
+    ]);
+    expect(fetchMany).toHaveBeenCalledExactlyOnceWith(["a", "b"]);
+    expect(fetchOne).not.toHaveBeenCalled();
+  });
+
+  it("한 건만 들어오면 단건 API로 보낸다", async () => {
+    const { fetchOne, fetchMany, load } = createLoader();
+
+    await expect(load("a")).resolves.toBe("one:a");
+    expect(fetchOne).toHaveBeenCalledExactlyOnceWith("a");
+    expect(fetchMany).not.toHaveBeenCalled();
+  });
+
+  it("다른 태스크에서 들어온 요청은 따로 보낸다", async () => {
+    const { fetchOne, load } = createLoader();
+
+    await load("a");
+    await load("b");
+    expect(fetchOne.mock.calls).toEqual([["a"], ["b"]]);
+  });
+
+  it("실패한 항목이 여러 개면 그 id만 batch로 한 번 더 보낸다", async () => {
+    const { fetchOne, fetchMany, load } = createLoader((id, call) =>
+      call === 1 && id !== "a" ? "failed" : "ok",
+    );
+
+    await expect(Promise.all([load("a"), load("b"), load("c")])).resolves.toEqual([
+      "many:a",
+      "many:b",
+      "many:c",
+    ]);
+    expect(fetchMany.mock.calls).toEqual([[["a", "b", "c"]], [["b", "c"]]]);
+    expect(fetchOne).not.toHaveBeenCalled();
+  });
+
+  it("실패한 항목이 하나면 단건 API로 한 번 더 보낸다", async () => {
+    const { fetchOne, fetchMany, load } = createLoader((id) => (id === "b" ? "failed" : "ok"));
+
+    await expect(Promise.all([load("a"), load("b")])).resolves.toEqual(["many:a", "one:b"]);
+    expect(fetchMany).toHaveBeenCalledTimes(1);
+    expect(fetchOne).toHaveBeenCalledExactlyOnceWith("b");
+  });
+
+  it("다시 보낸 요청에서도 실패하면 그 id는 실패로 끝내고 더 보내지 않는다", async () => {
+    const { fetchOne, fetchMany, load } = createLoader((id) => (id === "a" ? "ok" : "failed"));
+
+    const settled = await Promise.allSettled([load("a"), load("b"), load("c")]);
+
+    expect(settled.map((result) => result.status)).toEqual(["fulfilled", "rejected", "rejected"]);
+    expect(fetchMany).toHaveBeenCalledTimes(2);
+    expect(fetchOne).not.toHaveBeenCalled();
+  });
+
+  it("batch 응답에서 빠진 id도 실패처럼 한 번 더 받는다", async () => {
+    const { fetchMany, load } = createLoader((id, call) =>
+      call === 1 && id !== "a" ? "missing" : "ok",
+    );
+
+    await expect(Promise.all([load("a"), load("b"), load("c")])).resolves.toEqual([
+      "many:a",
+      "many:b",
+      "many:c",
+    ]);
+    expect(fetchMany.mock.calls).toEqual([[["a", "b", "c"]], [["b", "c"]]]);
+  });
+
+  it("첫 요청 자체가 실패하면 모은 id 모두 같은 에러로 실패하고 다시 보내지 않는다", async () => {
+    const failure = new Error("batch failed");
+    const fetchMany = vi.fn(async () => {
+      throw failure;
+    });
+    const fetchOne = vi.fn(async (id: string) => `one:${id}`);
+    const load = createPlaceBatchLoader({ fetchOne, fetchMany });
+
+    const settled = await Promise.allSettled([load("a"), load("b")]);
+
+    expect(settled).toEqual([
+      { status: "rejected", reason: failure },
+      { status: "rejected", reason: failure },
+    ]);
+    expect(fetchMany).toHaveBeenCalledTimes(1);
+    expect(fetchOne).not.toHaveBeenCalled();
+  });
+
+  it("다시 보낸 요청 자체가 실패하면 실패한 id만 그 에러로 끝난다", async () => {
+    const failure = new Error("retry failed");
+    const fetchMany = vi
+      .fn()
+      .mockResolvedValueOnce(batchResponse(["a", "b", "c"], (id) => (id === "a" ? "ok" : "failed")))
+      .mockRejectedValueOnce(failure);
+    const fetchOne = vi.fn(async (id: string) => `one:${id}`);
+    const load = createPlaceBatchLoader<string>({ fetchOne, fetchMany });
+
+    const settled = await Promise.allSettled([load("a"), load("b"), load("c")]);
+
+    expect(settled).toEqual([
+      { status: "fulfilled", value: "many:a" },
+      { status: "rejected", reason: failure },
+      { status: "rejected", reason: failure },
+    ]);
+  });
+
+  describe("서버 한도를 넘으면", () => {
+    const ids = Array.from({ length: PLACE_BATCH_MAX_SIZE + 20 }, (_, index) => `p${index}`);
+    const head = ids.slice(0, PLACE_BATCH_MAX_SIZE);
+    const tail = ids.slice(PLACE_BATCH_MAX_SIZE);
+    const fulfilled = (id: string) => ({ status: "fulfilled", value: `many:${id}` });
+
+    it("나눠 차례로 보내고, 뒤 묶음 요청이 실패해도 앞 묶음에서 받은 값은 쓴다", async () => {
+      const failure = new Error("rate limited");
+      const fetchMany = vi
+        .fn()
+        .mockResolvedValueOnce(batchResponse(head, () => "ok"))
+        .mockRejectedValueOnce(failure);
+      const fetchOne = vi.fn(async (id: string) => `one:${id}`);
+      const load = createPlaceBatchLoader<string>({ fetchOne, fetchMany });
+
+      const settled = await Promise.allSettled(ids.map((id) => load(id)));
+
+      expect(fetchMany.mock.calls).toEqual([[head], [tail]]);
+      expect(settled).toEqual([
+        ...head.map(fulfilled),
+        ...tail.map(() => ({ status: "rejected", reason: failure })),
+      ]);
+    });
+
+    it("앞 묶음 요청이 실패하면 남은 묶음은 보내지 않고 모두 같은 에러로 실패한다", async () => {
+      const failure = new Error("rate limited");
+      const fetchMany = vi.fn().mockRejectedValueOnce(failure);
+      const fetchOne = vi.fn(async (id: string) => `one:${id}`);
+      const load = createPlaceBatchLoader<string>({ fetchOne, fetchMany });
+
+      const settled = await Promise.allSettled(ids.map((id) => load(id)));
+
+      expect(fetchMany).toHaveBeenCalledTimes(1);
+      expect(settled).toEqual(ids.map(() => ({ status: "rejected", reason: failure })));
+    });
+
+    it("묶음마다 실패한 항목을 모아 한 번에 다시 보낸다", async () => {
+      const { fetchMany, load } = createLoader((id, call) =>
+        call <= 2 && (id === head[0] || id === tail[0]) ? "failed" : "ok",
+      );
+
+      const settled = await Promise.allSettled(ids.map((id) => load(id)));
+
+      expect(fetchMany.mock.calls).toEqual([[head], [tail], [[head[0], tail[0]]]]);
+      expect(settled).toEqual(ids.map(fulfilled));
+    });
+
+    it("요청이 실패한 묶음이 있으면 앞 묶음의 실패 항목도 다시 보내지 않는다", async () => {
+      const failure = new Error("rate limited");
+      const fetchMany = vi
+        .fn()
+        .mockResolvedValueOnce(batchResponse(head, (id) => (id === head[0] ? "failed" : "ok")))
+        .mockRejectedValueOnce(failure);
+      const fetchOne = vi.fn(async (id: string) => `one:${id}`);
+      const load = createPlaceBatchLoader<string>({ fetchOne, fetchMany });
+
+      const settled = await Promise.allSettled(ids.map((id) => load(id)));
+
+      expect(fetchMany).toHaveBeenCalledTimes(2);
+      expect(fetchOne).not.toHaveBeenCalled();
+      expect(settled).toEqual([
+        { status: "rejected", reason: new Error(`failed:${head[0]}`) },
+        ...head.slice(1).map(fulfilled),
+        ...tail.map(() => ({ status: "rejected", reason: failure })),
+      ]);
+    });
+  });
+});
diff --git a/src/lib/places/place-batch-loader.ts b/src/lib/places/place-batch-loader.ts
new file mode 100644
index 00000000..29f55f58
--- /dev/null
+++ b/src/lib/places/place-batch-loader.ts
@@ -0,0 +1,100 @@
+import { chunkArray, PLACE_BATCH_MAX_SIZE } from "@/lib/api/batch-chunk";
+
+/** batch 응답 항목 하나 — 받은 값, 또는 그 항목만의 실패 */
+export type PlaceBatchResult<T> =
+  | { ok: true; value: T }
+  | { ok: false; error: unknown };
+
+type Deferred<T> = {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+  reject: (error: unknown) => void;
+};
+
+function createDeferred<T>(): Deferred<T> {
+  let resolve: (value: T) => void = () => {};
+  let reject: (error: unknown) => void = () => {};
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+/**
+ * 같은 태스크에서 요청된 장소 id를 모아 서버 한도(100곳)씩 차례로 보낸다. 한 번에 1건이면 단건 API, 2건 이상이면
+ * batch API를 쓴다 — batch rate limit(사용자당 분당)이 단건보다 작아서 1건짜리 batch는 한도만 먼저 쓴다.
+ * 항목이 실패하면 실패한 id만 같은 방식으로 한 번 더 보내고, 그래도 실패하면 그 id는 실패로 끝낸다.
+ * 요청 자체가 실패하면 그 묶음과 아직 보내지 않은 id가 그 에러로 실패하고, 실패한 항목도 다시 보내지 않는다 —
+ * 앞 묶음에서 받은 값은 그대로 쓴다. 다시 보낼지는 TanStack 재시도 규칙이 정한다.
+ */
+export function createPlaceBatchLoader<T>({
+  fetchOne,
+  fetchMany,
+}: {
+  fetchOne: (id: string) => Promise<T>;
+  fetchMany: (ids: string[]) => Promise<ReadonlyMap<string, PlaceBatchResult<T>>>;
+}): (id: string) => Promise<T> {
+  const pending = new Map<string, Deferred<T>>();
+  let queued: string[] = [];
+
+  function settle(id: string, result: PlaceBatchResult<T>) {
+    const deferred = pending.get(id);
+    pending.delete(id);
+    if (!deferred) return;
+    if (result.ok) deferred.resolve(result.value);
+    else deferred.reject(result.error);
+  }
+
+  async function request(ids: string[]): Promise<ReadonlyMap<string, PlaceBatchResult<T>>> {
+    if (ids.length > 1) return fetchMany(ids);
+    const [id] = ids;
+    return new Map<string, PlaceBatchResult<T>>([[id, { ok: true, value: await fetchOne(id) }]]);
+  }
+
+  /** 받은 값은 바로 끝내고, 항목이 실패했거나 응답에 없던 id는 실패 결과로 돌려준다 */
+  async function send(ids: string[]) {
+    const failed = new Map<string, PlaceBatchResult<T>>();
+    const chunks = chunkArray(ids, PLACE_BATCH_MAX_SIZE);
+    for (const [index, chunk] of chunks.entries()) {
+      let results: ReadonlyMap<string, PlaceBatchResult<T>>;
+      try {
+        results = await request(chunk);
+      } catch (error) {
+        for (const id of chunks.slice(index).flat()) settle(id, { ok: false, error });
+        return { failed, stopped: true };
+      }
+      for (const id of chunk) {
+        const result: PlaceBatchResult<T> = results.get(id) ?? {
+          ok: false,
+          error: new Error(`batch 응답에 ${id}가 없음`),
+        };
+        if (result.ok) settle(id, result);
+        else failed.set(id, result);
+      }
+    }
+    return { failed, stopped: false };
+  }
+
+  async function flush() {
+    const ids = queued;
+    queued = [];
+
+    const first = await send(ids);
+    // 요청이 실패했으면 실패한 항목도 다시 보내지 않는다 — 실패 직후에 보내면 같은 이유(429·5xx)로 또 실패한다
+    const { failed } = first.stopped ? first : await send([...first.failed.keys()]);
+    for (const [id, result] of failed) settle(id, result);
+  }
+
+  return (id) => {
+    const inFlight = pending.get(id);
+    if (inFlight) return inFlight.promise;
+
+    const deferred = createDeferred<T>();
+    pending.set(id, deferred);
+    // 같은 커밋에서 마운트된 카드들의 요청이 이번 태스크 안에 다 들어온 뒤 한 번에 보낸다
+    if (!queued.length) setTimeout(() => void flush(), 0);
+    queued.push(id);
+    return deferred.promise;
+  };
+}
diff --git a/src/lib/places/place-detail-cache.test.tsx b/src/lib/places/place-detail-cache.test.tsx
index 5438d7eb..40a8f48d 100644
--- a/src/lib/places/place-detail-cache.test.tsx
+++ b/src/lib/places/place-detail-cache.test.tsx
@@ -53,7 +53,7 @@ it("resolved full raw response seeds canonical cache and later panels reuse it w
   };
   vi.mocked(requestPlaceDetail).mockReset().mockResolvedValue(detail);
   vi.mocked(apiFetch).mockResolvedValue(Response.json({ detail, source: "GOOGLE", cacheStatus: "MISS", googleDetailsRequested: true, termination: "SUCCEEDED" }));
-  await confirmPlaceSearch({ query: "카페", kind: "specific", prediction: { placeId: "one", text: null, structuredFormat: null }, session: { sessionToken: "token", expiresAt: Date.now()+60000 }, mapCenter: null, isCurrent: () => true, search: async () => [] });
+  await confirmPlaceSearch({ query: "카페", kind: "specific", prediction: { placeId: "one", text: null, structuredFormat: null }, session: { sessionToken: "token", expiresAt: Date.now()+60000 }, mapCenter: null, radius: 5000, isCurrent: () => true, search: async () => [] });
   const cached = client.getQueryData(placeDetailQueryKey("one"));
   expect(cached).toEqual(detail);
   expect(await fetchPlaceDetail("places/one")).toBe(cached);
diff --git a/src/lib/places/place-photo-refresh.test.ts b/src/lib/places/place-photo-refresh.test.ts
index 4e227083..04a7ab6b 100644
--- a/src/lib/places/place-photo-refresh.test.ts
+++ b/src/lib/places/place-photo-refresh.test.ts
@@ -101,4 +101,71 @@ describe("refreshPlacePhotoUrl", () => {
       }),
     );
   });
+
+  describe("onPhotoUnavailable", () => {
+    function brokenImage(dataset: Record<string, string> = {}) {
+      return {
+        src: "https://example.invalid/broken.jpg",
+        currentSrc: "https://example.invalid/broken.jpg",
+        complete: true,
+        naturalWidth: 0,
+        naturalHeight: 0,
+        dataset,
+        isConnected: true,
+      } as unknown as HTMLImageElement;
+    }
+
+    async function failImage(
+      image: HTMLImageElement,
+      googlePlaceId: string | null = "ChIJ-place-1",
+    ) {
+      const { handlePlacePhotoImageError } = await import(
+        "@/lib/places/place-photo-refresh"
+      );
+      vi.spyOn(console, "warn").mockImplementation(() => {});
+      const onPhotoUnavailable = vi.fn();
+      handlePlacePhotoImageError({
+        source: "plan-place-card",
+        googlePlaceId,
+        placeName: "Spasso",
+        image,
+        onPhotoUnavailable,
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      return onPhotoUnavailable;
+    }
+
+    it("is called without another request when the element already tried a refresh", async () => {
+      const onPhotoUnavailable = await failImage(brokenImage({ photoRefreshAttempted: "true" }));
+
+      expect(onPhotoUnavailable).toHaveBeenCalledOnce();
+      expect(requestPlacePhotoUrl).not.toHaveBeenCalled();
+    });
+
+    it("is called right away when there is no place to refresh", async () => {
+      const onPhotoUnavailable = await failImage(brokenImage(), null);
+
+      expect(onPhotoUnavailable).toHaveBeenCalledOnce();
+      expect(requestPlacePhotoUrl).not.toHaveBeenCalled();
+    });
+
+    it("is called when the refresh returns no URL or fails", async () => {
+      requestPlacePhotoUrl.mockResolvedValueOnce("");
+      const afterEmpty = await failImage(brokenImage());
+      requestPlacePhotoUrl.mockRejectedValueOnce(new Error("Place photo failed: 500"));
+      const afterFailure = await failImage(brokenImage());
+
+      expect(afterEmpty).toHaveBeenCalledOnce();
+      expect(afterFailure).toHaveBeenCalledOnce();
+    });
+
+    it("is not called while the refreshed URL loads", async () => {
+      requestPlacePhotoUrl.mockResolvedValueOnce("https://cdn.example/fresh.jpg");
+      const image = brokenImage();
+      const onPhotoUnavailable = await failImage(image);
+
+      expect(image.src).toBe("https://cdn.example/fresh.jpg");
+      expect(onPhotoUnavailable).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/src/lib/places/place-photo-refresh.ts b/src/lib/places/place-photo-refresh.ts
index cc82884f..49270be3 100644
--- a/src/lib/places/place-photo-refresh.ts
+++ b/src/lib/places/place-photo-refresh.ts
@@ -57,13 +57,17 @@ export function handlePlacePhotoImageError(args: {
   googlePlaceId?: string | null;
   placeName?: string | null;
   image: HTMLImageElement;
+  /** 다시 받아도 보여 줄 사진이 없을 때 — 깨진 이미지 대신 사진 없음 상태로 바꾸게 한다 */
+  onPhotoUnavailable?: () => void;
 }): void {
   logPlacePhotoImageError(args);
 
   const id =
     typeof args.googlePlaceId === "string" ? args.googlePlaceId.trim() : "";
-  if (!id.length) return;
-  if (args.image.dataset.photoRefreshAttempted === "true") return;
+  if (!id.length || args.image.dataset.photoRefreshAttempted === "true") {
+    args.onPhotoUnavailable?.();
+    return;
+  }
 
   args.image.dataset.photoRefreshAttempted = "true";
   void refreshPlacePhotoUrl(id)
@@ -78,6 +82,7 @@ export function handlePlacePhotoImageError(args: {
         placeName: args.placeName ?? null,
         imageConnected: args.image.isConnected,
       });
+      args.onPhotoUnavailable?.();
     })
     .catch((error: unknown) => {
       console.warn("[PHOTO-URL] refresh failed", {
@@ -86,5 +91,6 @@ export function handlePlacePhotoImageError(args: {
         placeName: args.placeName ?? null,
         ...describeUnknownError(error),
       });
+      args.onPhotoUnavailable?.();
     });
 }
diff --git a/src/lib/places/place-queries.test.ts b/src/lib/places/place-queries.test.ts
new file mode 100644
index 00000000..67ba8384
--- /dev/null
+++ b/src/lib/places/place-queries.test.ts
@@ -0,0 +1,101 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const requestPlacePreview = vi.fn();
+const requestPlacePreviewsBatch = vi.fn();
+
+vi.mock("@/lib/api/places", () => ({
+  requestPlaceDetail: vi.fn(),
+  requestPlacePreview,
+  requestPlacePreviewsBatch,
+}));
+
+const previewItem = (googlePlaceId: string) => ({
+  googlePlaceId,
+  name: `이름 ${googlePlaceId}`,
+  formattedAddress: "서울",
+  location: { latitude: 37.5, longitude: 127.0 },
+  primaryType: "cafe",
+  primaryTypeDisplayName: "카페",
+});
+const failed = (googlePlaceId: string) => ({
+  status: "FAILED",
+  googlePlaceId,
+  errorCode: "EXTERNAL_API_ERROR",
+});
+
+/** 같은 커밋에 미리보기 쿼리 여러 개가 마운트된 것처럼 한 태스크 안에서 queryFn을 부른다 */
+async function loadPreviews(ids: string[]) {
+  const { placePreviewQueryOptions } = await import("@/lib/places/place-queries");
+  return Promise.allSettled(ids.map((id) => placePreviewQueryOptions(id).queryFn()));
+}
+
+describe("placePreviewQueryOptions", () => {
+  beforeEach(() => {
+    requestPlacePreview.mockReset();
+    requestPlacePreviewsBatch.mockReset();
+  });
+
+  it("같은 커밋의 미리보기 쿼리는 batch 하나로 받고, 응답 id 형식이 달라도 같은 장소로 맞춘다", async () => {
+    requestPlacePreviewsBatch.mockResolvedValueOnce([
+      { status: "OK", ...previewItem("places/ChIJ-a") },
+      { status: "OK", ...previewItem("ChIJ-b") },
+    ]);
+
+    const [a, b] = await loadPreviews(["ChIJ-a", "ChIJ-b"]);
+
+    expect(requestPlacePreviewsBatch).toHaveBeenCalledExactlyOnceWith(["ChIJ-a", "ChIJ-b"]);
+    expect(a).toMatchObject({
+      status: "fulfilled",
+      value: { name: "이름 places/ChIJ-a", location: { lat: 37.5, lng: 127.0 } },
+    });
+    expect(b).toMatchObject({ status: "fulfilled", value: { name: "이름 ChIJ-b" } });
+    expect(requestPlacePreview).not.toHaveBeenCalled();
+  });
+
+  it("status 없이 온 항목도 id와 이름이 있으면 받는다", async () => {
+    requestPlacePreviewsBatch.mockResolvedValueOnce([previewItem("ChIJ-a"), previewItem("ChIJ-b")]);
+
+    const [a, b] = await loadPreviews(["ChIJ-a", "ChIJ-b"]);
+
+    expect(a).toMatchObject({ status: "fulfilled", value: { name: "이름 ChIJ-a" } });
+    expect(b).toMatchObject({ status: "fulfilled", value: { name: "이름 ChIJ-b" } });
+    expect(requestPlacePreviewsBatch).toHaveBeenCalledTimes(1);
+    expect(requestPlacePreview).not.toHaveBeenCalled();
+  });
+
+  it("FAILED 항목은 실패한 곳만 batch로 한 번 더 받고, 그래도 실패하면 502로 끝낸다", async () => {
+    const { HttpError } = await import("@/lib/api/errors");
+    requestPlacePreviewsBatch
+      .mockResolvedValueOnce([
+        { status: "OK", ...previewItem("ChIJ-ok") },
+        failed("ChIJ-retried"),
+        failed("ChIJ-failed"),
+      ])
+      .mockResolvedValueOnce([{ status: "OK", ...previewItem("ChIJ-retried") }, failed("ChIJ-failed")]);
+
+    const [ok, retried, stillFailed] = await loadPreviews(["ChIJ-ok", "ChIJ-retried", "ChIJ-failed"]);
+
+    expect(requestPlacePreviewsBatch.mock.calls).toEqual([
+      [["ChIJ-ok", "ChIJ-retried", "ChIJ-failed"]],
+      [["ChIJ-retried", "ChIJ-failed"]],
+    ]);
+    expect(ok.status).toBe("fulfilled");
+    expect(retried.status).toBe("fulfilled");
+    expect(stillFailed.status).toBe("rejected");
+    if (stillFailed.status === "rejected") {
+      expect(stillFailed.reason).toBeInstanceOf(HttpError);
+      expect(stillFailed.reason).toMatchObject({ status: 502 });
+    }
+    expect(requestPlacePreview).not.toHaveBeenCalled();
+  });
+
+  it("미리보기 1곳은 단건 API로 받는다", async () => {
+    requestPlacePreview.mockResolvedValueOnce(previewItem("ChIJ-single"));
+
+    const [single] = await loadPreviews(["places/ChIJ-single"]);
+
+    expect(single).toMatchObject({ status: "fulfilled", value: { googlePlaceId: "ChIJ-single" } });
+    expect(requestPlacePreview).toHaveBeenCalledExactlyOnceWith("ChIJ-single");
+    expect(requestPlacePreviewsBatch).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/lib/places/place-queries.ts b/src/lib/places/place-queries.ts
index 005ff847..f87b051a 100644
--- a/src/lib/places/place-queries.ts
+++ b/src/lib/places/place-queries.ts
@@ -1,17 +1,20 @@
+import { isBatchItemError, isBatchItemOk } from "@/lib/api/batch-types";
+import { HttpError } from "@/lib/api/errors";
 import {
   requestPlaceDetail,
-  requestPlacePhotoUrl,
   requestPlacePreview,
+  requestPlacePreviewsBatch,
   type PlaceDetail,
   type PlacePreview,
+  type PlacePreviewBatchItem,
   type PlacePreviewResponse,
 } from "@/lib/api/places";
 import { normalizeGooglePlaceResourceId } from "@/lib/maps";
-import { getQueryClient } from "@/lib/query-client";
 import {
-  placePhotoUrlQueryDefaults,
-  placePhotoUrlQueryKey,
-} from "@/lib/place-photo-query";
+  createPlaceBatchLoader,
+  type PlaceBatchResult,
+} from "@/lib/places/place-batch-loader";
+import { getQueryClient } from "@/lib/query-client";
 
 export const placeDetailQueryDefaults = {
   staleTime: Infinity,
@@ -104,6 +107,51 @@ export function resolvePreviewGooglePlaceId(googlePlaceId: string): string {
   return raw.length ? normalizeGooglePlaceResourceId(raw) : "";
 }
 
+/** status 없이 오는 응답(레거시 `items`)도 id와 이름이 있으면 받은 것으로 본다 */
+function hasPreviewIdAndName({
+  googlePlaceId,
+  name,
+}: {
+  googlePlaceId?: unknown;
+  name?: unknown;
+}): boolean {
+  return (
+    typeof googlePlaceId === "string" &&
+    googlePlaceId.trim().length > 0 &&
+    typeof name === "string" &&
+    name.trim().length > 0
+  );
+}
+
+function previewBatchItemResult(
+  item: PlacePreviewBatchItem,
+): PlaceBatchResult<PlacePreview> | null {
+  if (isBatchItemError(item)) {
+    // 항목 실패는 외부 API 실패(EXTERNAL_API_ERROR)일 때만 온다 — 단건으로 보냈으면 502였을 실패다
+    return {
+      ok: false,
+      error: new HttpError(502, `장소 미리보기 조회 실패: ${item.errorCode ?? item.status}`),
+    };
+  }
+  if (isBatchItemOk(item) || hasPreviewIdAndName(item)) {
+    return { ok: true, value: normalizePlacePreview(item) };
+  }
+  return null;
+}
+
+/** 같은 커밋에 요청된 미리보기를 모아 받는다 — 1곳이면 단건, 2곳 이상이면 batch */
+const loadPlacePreviewInBatch = createPlaceBatchLoader<PlacePreview>({
+  fetchOne: async (id) => normalizePlacePreview(await requestPlacePreview(id)),
+  fetchMany: async (ids) => {
+    const results = new Map<string, PlaceBatchResult<PlacePreview>>();
+    for (const item of await requestPlacePreviewsBatch(ids)) {
+      const result = previewBatchItemResult(item);
+      if (result) results.set(resolvePreviewGooglePlaceId(item.googlePlaceId), result);
+    }
+    return results;
+  },
+});
+
 /** useQueries queryFn 등 중첩 fetchQuery 없이 preview API만 호출 */
 export async function loadPlacePreview(googlePlaceId: string): Promise<PlacePreview> {
   const id = resolvePreviewGooglePlaceId(googlePlaceId);
@@ -116,15 +164,15 @@ export async function loadPlacePreview(googlePlaceId: string): Promise<PlacePrev
 
 /**
  * 북마크·일정 카드 등 `useQueries`용 — `fetchPlacePreview`와 동일 `placePreviewQueryKey`·60s 캐시.
+ * 같은 커밋에 마운트된 미리보기(북마크 목록·지도 핀)는 batch 하나로 모은다.
  */
 export function placePreviewQueryOptions(googlePlaceId: string) {
   const id = resolvePreviewGooglePlaceId(googlePlaceId);
   return {
     queryKey: placePreviewQueryKey(id),
-    queryFn: () => loadPlacePreview(id),
+    queryFn: () => loadPlacePreviewInBatch(id),
     enabled: id.length > 0,
     ...placePreviewQueryDefaults,
-    retry: 1,
   };
 }
 
@@ -173,21 +221,3 @@ export async function fetchPlacePreview(googlePlaceId: string): Promise<PlacePre
     ...placePreviewQueryDefaults,
   });
 }
-
-export async function fetchPlacePhotoUrl(googlePlaceId: string): Promise<string> {
-  const id = typeof googlePlaceId === "string" ? googlePlaceId.trim() : "";
-  if (!id.length) {
-    throw new Error("fetchPlacePhotoUrl: empty googlePlaceId");
-  }
-
-  const queryClient = getQueryClient();
-  if (!queryClient) {
-    return requestPlacePhotoUrl(id);
-  }
-
-  return queryClient.fetchQuery({
-    queryKey: placePhotoUrlQueryKey(id),
-    queryFn: () => requestPlacePhotoUrl(id),
-    ...placePhotoUrlQueryDefaults,
-  });
-}
diff --git a/src/lib/places/search-session.test.ts b/src/lib/places/search-session.test.ts
index 34a5b244..cbaf076a 100644
--- a/src/lib/places/search-session.test.ts
+++ b/src/lib/places/search-session.test.ts
@@ -24,18 +24,18 @@ function setup(overrides = {}) {
   return { search, args: { query: "원래 검색어", kind: "whole" as const,
     prediction: { placeId: "first", text: null, structuredFormat: null },
     session: { sessionToken: "server-token", expiresAt: Date.now() + 60000 },
-    mapCenter: { lat: 1, lng: 2 }, isCurrent: () => true, search, ...overrides } };
+    mapCenter: { lat: 1, lng: 2 }, radius: 5000, isCurrent: () => true, search, ...overrides } };
 }
 describe("server session confirmation", () => {
   it("resolves same server token once and seeds full raw detail before publishing anchor", async () => {
-    const { args, search } = setup();
+    const { args, search } = setup({ kind: "specific" });
     const onAnchor = vi.fn(() => expect(client.getQueryData(placeDetailQueryKey("first"))).toEqual(detail));
     const result = await confirmPlaceSearch({ ...args, onAnchor });
     expect(apiFetch).toHaveBeenCalledExactlyOnceWith(expect.stringContaining("/places/resolve"), expect.objectContaining({ method: "POST", body: JSON.stringify({ sessionToken: "server-token", googlePlaceId: "first" }) }));
     expect(result?.anchor?.detail).toEqual(detail);
     expect(result?.termination).toBe("SUCCEEDED");
     expect(onAnchor).toHaveBeenCalledTimes(1);
-    expect(search).toHaveBeenCalledExactlyOnceWith({ query: "원래 검색어", latitude: 37, longitude: 127, radius: 5000 });
+    expect(search).not.toHaveBeenCalled();
   });
   it("frontend cache HIT still resolves; keeps server HIT distinct from termination", async () => {
     client.setQueryData(placeDetailQueryKey("first"), detail);
@@ -51,15 +51,13 @@ describe("server session confirmation", () => {
     expect((await confirmPlaceSearch(args))?.anchor?.detail.rating).toBe(4.5);
     expect(search).not.toHaveBeenCalled();
   });
-  it.each(["absent", "failed", "null coordinates"])("whole uses map-center fallback for %s without another Google call", async mode => {
-    const { args, search } = setup(mode === "absent" ? { prediction: undefined } : {});
-    if (mode === "failed") vi.mocked(apiFetch).mockResolvedValue(Response.json({ code: "EXTERNAL_API_ERROR", message: "실패" }, { status: 502 }));
-    if (mode === "null coordinates") vi.mocked(apiFetch).mockResolvedValue(Response.json({ ...response, detail: { ...detail, location: null } }));
+  // 도쿄 지도에서 '음식점' 첫 후보가 용인의 '음식점' 가게여도 지도 중심에서 찾는다
+  it.each(["with", "without"])("whole searches around the map center %s a first suggestion and never resolves it", async mode => {
+    const { args, search } = setup({ radius: 1234, ...(mode === "without" ? { prediction: undefined } : {}) });
     const result = await confirmPlaceSearch(args);
-    expect(result?.fallback).toBe(true);
-    expect(search).toHaveBeenCalledExactlyOnceWith({ query: "원래 검색어", latitude: 1, longitude: 2, radius: 5000 });
-    expect(apiFetch).toHaveBeenCalledTimes(mode === "absent" ? 0 : 1);
-    if (mode === "null coordinates") expect(result?.termination).toBe("SUCCEEDED");
+    expect(apiFetch).not.toHaveBeenCalled();
+    expect(search).toHaveBeenCalledExactlyOnceWith({ query: "원래 검색어", latitude: 1, longitude: 2, radius: 1234 });
+    expect(result).toMatchObject({ anchor: null, termination: "not-requested" });
   });
   it("specific null coordinates cannot fake location or make supplementary requests", async () => {
     vi.mocked(apiFetch).mockResolvedValue(Response.json({ ...response, detail: { ...detail, location: null } }));
@@ -70,7 +68,7 @@ describe("server session confirmation", () => {
   it("late resolve cannot seed scope cache or publish search", async () => {
     let finish!: (v: Response) => void; let current = true;
     vi.mocked(apiFetch).mockReturnValue(new Promise(r => { finish = r; }));
-    const { args, search } = setup({ isCurrent: () => current });
+    const { args, search } = setup({ kind: "specific", isCurrent: () => current });
     const pending = confirmPlaceSearch(args); current = false; finish(Response.json(response));
     expect(await pending).toBeNull();
     expect(client.getQueryData(placeDetailQueryKey("first"))).toBeUndefined();
diff --git a/src/lib/places/search-session.ts b/src/lib/places/search-session.ts
index f4a30ce9..3ecd88ee 100644
--- a/src/lib/places/search-session.ts
+++ b/src/lib/places/search-session.ts
@@ -48,6 +48,8 @@ export function terminatePredictionSession(
 }
 type ConfirmPlaceSearchArgs<T> = Omit<SearchConfirmation, "generation"> & {
   mapCenter: google.maps.LatLngLiteral | null;
+  /** 모두검색 locationBias 반경(m) */
+  radius: number;
   isCurrent: () => boolean;
   onAnchor?: (anchor: ResolvedSearchAnchor) => void;
   onResolved?: (resolved: PlaceResolveResponse) => void;
@@ -59,47 +61,41 @@ type SearchResolution = {
 };
 async function resolveSearchPrediction<T>(
   args: ConfirmPlaceSearchArgs<T>, prediction: PlacePrediction,
-): Promise<SearchResolution | null> {
-  let anchor: ResolvedSearchAnchor | null = null;
-  let termination: SearchResolution["termination"] = "not-requested";
+): Promise<ResolvedSearchAnchor | null> {
   try {
     const resolved = await terminatePredictionSession(prediction, args.session, args.isCurrent);
     if (!args.isCurrent()) return null;
-    termination = resolved.termination;
     // Seed the complete untouched server DTO BEFORE a detail consumer mounts.
     getQueryClient()?.setQueryData(placeDetailQueryKey(resolved.detail.googlePlaceId), resolved.detail);
     args.onResolved?.(resolved);
     const location = normalizePreviewLocation(resolved.detail.location);
-    if (location && Math.abs(location.lat) <= 90 && Math.abs(location.lng) <= 180)
-      anchor = { ...resolved, googlePlaceId: resolved.detail.googlePlaceId, location };
-    else if (args.kind === "specific") throw new Error("장소 좌표를 확인할 수 없어요.");
+    if (!location || Math.abs(location.lat) > 90 || Math.abs(location.lng) > 180)
+      throw new Error("장소 좌표를 확인할 수 없어요.");
+    return { ...resolved, googlePlaceId: resolved.detail.googlePlaceId, location };
   } catch (error) {
-    // Coordinate absence does not erase a verified server termination.
-    if (termination === "not-requested") termination = "failed";
-    if (args.kind === "specific" && args.isCurrent()) throw error;
+    if (args.isCurrent()) throw error;
+    return null;
   }
-  return { anchor, termination };
 }
 export async function confirmPlaceSearch<T>(args: ConfirmPlaceSearchArgs<T>): Promise<
-  SearchResolution & { items: T[]; fallback: boolean } | null
+  SearchResolution & { items: T[] } | null
 > {
   const query = args.query.trim();
   if (!query) throw new Error("검색어를 입력해주세요.");
   if (!args.isCurrent()) return null;
-  const resolution = args.prediction
-    ? await resolveSearchPrediction(args, args.prediction)
-    : { anchor: null, termination: "not-requested" as const };
-  if (!resolution) return null;
-  const { anchor, termination } = resolution;
-  if (!args.isCurrent()) return null;
-  if (anchor) args.onAnchor?.(anchor);
   if (args.kind === "specific") {
-    if (!anchor) throw new Error("장소 정보를 확인할 수 없어요.");
-    return { anchor, items: [], fallback: false, termination };
+    if (!args.prediction) throw new Error("장소 정보를 확인할 수 없어요.");
+    const anchor = await resolveSearchPrediction(args, args.prediction);
+    if (!anchor || !args.isCurrent()) return null;
+    args.onAnchor?.(anchor);
+    return { anchor, items: [], termination: anchor.termination };
   }
-  const center = anchor?.location ?? args.mapCenter;
+  // 모두검색은 자동완성 첫 후보가 아니라 보고 있는 지도 중심에서 찾는다.
+  // 첫 후보는 이름만 같은 다른 나라 장소일 수 있다(도쿄 지도에서 '음식점' → 용인의 '음식점' 가게).
+  // 검색어에 지명이 있으면 Google이 locationBias를 무시하므로 서울 지도에서 '라스베가스'도 찾는다.
+  const center = args.mapCenter;
   if (!center) throw new Error("지도 위치를 확인한 뒤 다시 검색해주세요.");
-  const items = await args.search({ query, latitude: center.lat, longitude: center.lng, radius: 5000 });
+  const items = await args.search({ query, latitude: center.lat, longitude: center.lng, radius: args.radius });
   if (!args.isCurrent()) return null;
-  return { anchor, items, fallback: !anchor, termination };
+  return { anchor: null, items, termination: "not-requested" };
 }
diff --git a/src/lib/places/warmChatHistoryPlacePhotos.test.ts b/src/lib/places/warmChatHistoryPlacePhotos.test.ts
index 2b0fe86e..6c668fe8 100644
--- a/src/lib/places/warmChatHistoryPlacePhotos.test.ts
+++ b/src/lib/places/warmChatHistoryPlacePhotos.test.ts
@@ -1,15 +1,18 @@
 import { QueryClient } from "@tanstack/react-query";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-const fetchAndSeedPlacePhotoUrls = vi.fn();
+const requestPlacePhotoUrl = vi.fn();
+const requestPlacePhotoUrlsBatch = vi.fn();
 
-vi.mock("@/lib/places/place-batch-cache", () => ({
-  fetchAndSeedPlacePhotoUrls,
+vi.mock("@/lib/api/places", () => ({
+  requestPlacePhotoUrl,
+  requestPlacePhotoUrlsBatch,
 }));
 
 describe("warmPlacePhotoQueriesFromChatHistory", () => {
   beforeEach(() => {
-    fetchAndSeedPlacePhotoUrls.mockReset();
+    requestPlacePhotoUrl.mockReset();
+    requestPlacePhotoUrlsBatch.mockReset();
   });
 
   it("does not warm photo URLs before place cards enter the viewport", async () => {
@@ -57,6 +60,7 @@ describe("warmPlacePhotoQueriesFromChatHistory", () => {
       },
     ]);
 
-    expect(fetchAndSeedPlacePhotoUrls).not.toHaveBeenCalled();
+    expect(requestPlacePhotoUrl).not.toHaveBeenCalled();
+    expect(requestPlacePhotoUrlsBatch).not.toHaveBeenCalled();
   });
 });
diff --git a/src/lib/plan/planItemReorder.ts b/src/lib/plan/planItemReorder.ts
index 761bdeec..1b185ea4 100644
--- a/src/lib/plan/planItemReorder.ts
+++ b/src/lib/plan/planItemReorder.ts
@@ -10,6 +10,10 @@ export const PLAN_ITEM_DND_ITEM_ID_MIME = "application/x-plan-item-id";
 
 export const PLAN_ITEM_ITINERARY_DROP_ZONE_ATTR = "data-plan-itinerary-drop-zone";
 
+/** 연결이 끊긴 동안이나 놓친 변경을 다시 받는 동안 놓은 경우 */
+export const PLAN_ORDER_RESYNCING_MESSAGE =
+  "일정을 다시 맞추는 중이라 옮기지 않았어요. 잠시 후 다시 옮겨 주세요.";
+
 export const PLAN_ITEM_REORDER_ROW_TRANSITION =
   "transform 200ms cubic-bezier(0.2, 0, 0, 1)";
 
diff --git a/src/lib/plan/planItineraryMapSegments.test.ts b/src/lib/plan/planItineraryMapSegments.test.ts
index d339442a..6732af77 100644
--- a/src/lib/plan/planItineraryMapSegments.test.ts
+++ b/src/lib/plan/planItineraryMapSegments.test.ts
@@ -30,6 +30,6 @@ test("소문자 이동수단을 표준값으로 정규화한다", () => {
   expect(flattenTravelMode("walking")).toBe("WALKING");
 });
 
-test("이동수단이 누락되면 일정 기본값을 사용한다", () => {
-  expect(flattenTravelMode()).toBe("DRIVING");
+test.each([undefined, "", "BICYCLING", "CYCLING", "BOAT"])("미지원 수단 %s의 지도 경로를 만들지 않는다", (mode) => {
+  expect(flattenTravelMode(mode)).toBeUndefined();
 });
diff --git a/src/lib/plan/planItineraryMapSegments.ts b/src/lib/plan/planItineraryMapSegments.ts
index a37aad67..22c91918 100644
--- a/src/lib/plan/planItineraryMapSegments.ts
+++ b/src/lib/plan/planItineraryMapSegments.ts
@@ -2,7 +2,6 @@
 
 import type { PlanPlace } from "@/lib/plan/types";
 import {
-  SCHEDULE_TRAVEL_MODE_DEFAULT,
   canonicalScheduleTravelMode,
   type ScheduleTravelModeValue,
 } from "@/lib/plan/scheduleTravelMode";
@@ -11,6 +10,8 @@ import {
 export type PlanItinerarySegmentDescriptor = {
   scheduleId: number;
   segmentSourceItemId: number;
+  /** 다음 장소의 `itemId` — 경로를 이 항목까지 계산한다 */
+  destinationItemId: number;
   originPlaceId: string;
   destPlaceId: string;
   travelModeCanon: ScheduleTravelModeValue;
@@ -36,17 +37,18 @@ export function flattenPlanItinerarySegmentsFromPlaces(
         typeof a.googlePlaceId === "string" ? a.googlePlaceId.trim() : "";
       const d =
         typeof b.googlePlaceId === "string" ? b.googlePlaceId.trim() : "";
-      if (typeof a.itemId !== "number" || !o.length || !d.length) {
+      if (typeof a.itemId !== "number" || typeof b.itemId !== "number" || !o.length || !d.length) {
         continue;
       }
+      const travelModeCanon = canonicalScheduleTravelMode(a.travelMode);
+      if (!travelModeCanon) continue;
       segments.push({
         scheduleId,
         segmentSourceItemId: a.itemId,
+        destinationItemId: b.itemId,
         originPlaceId: o,
         destPlaceId: d,
-        travelModeCanon:
-          canonicalScheduleTravelMode(a.travelMode) ??
-          SCHEDULE_TRAVEL_MODE_DEFAULT,
+        travelModeCanon,
         originLocation: a.location,
         destLocation: b.location,
       });
diff --git a/src/lib/plan/planTravelLocalStorage.test.ts b/src/lib/plan/planTravelLocalStorage.test.ts
new file mode 100644
index 00000000..1d32417c
--- /dev/null
+++ b/src/lib/plan/planTravelLocalStorage.test.ts
@@ -0,0 +1,49 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  readScheduleRouteFromSessionStorage,
+  writeScheduleRouteToSessionStorage,
+} from "./planTravelLocalStorage";
+
+function memoryStorage(): Storage {
+  const map = new Map<string, string>();
+  return {
+    get length() {
+      return map.size;
+    },
+    key: (index) => [...map.keys()][index] ?? null,
+    getItem: (key) => map.get(key) ?? null,
+    setItem: (key, value) => {
+      map.set(key, String(value));
+    },
+    removeItem: (key) => {
+      map.delete(key);
+    },
+    clear: () => map.clear(),
+  };
+}
+
+describe("구간 경로 sessionStorage", () => {
+  beforeEach(() => {
+    const storage = memoryStorage();
+    vi.stubGlobal("window", { sessionStorage: storage });
+    vi.stubGlobal("sessionStorage", storage);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("출발 항목과 일정 지문이 같아도 도착 항목이 다르면 저장한 경로를 쓰지 않는다", () => {
+    const toC = { distanceMeters: 999, durationSeconds: 60, travelMode: "DRIVING" };
+    // 순서 저장 중 새 순서([1,3,2])로 그린 칸이 옛 순서([1,2,3])의 지문으로 1→3 경로를 저장한 경우
+    writeScheduleRouteToSessionStorage("room-1", 10, 1, 3, "DRIVING", "fp-1-2-3", toC);
+
+    expect(
+      readScheduleRouteFromSessionStorage("room-1", 10, 1, 2, "DRIVING", "fp-1-2-3"),
+    ).toBeUndefined();
+    expect(
+      readScheduleRouteFromSessionStorage("room-1", 10, 1, 3, "DRIVING", "fp-1-2-3"),
+    ).toEqual(toC);
+  });
+});
diff --git a/src/lib/plan/planTravelLocalStorage.ts b/src/lib/plan/planTravelLocalStorage.ts
index 4a385ff8..e93eeda7 100644
--- a/src/lib/plan/planTravelLocalStorage.ts
+++ b/src/lib/plan/planTravelLocalStorage.ts
@@ -8,13 +8,15 @@ function roundCoord(n: number): string {
 
 const NS_ROUTE = "hau:plan:route:v1";
 
+/** 구간 = 출발 항목 → 도착 항목. 도착 항목이 없던 예전 형식(`…:출발:수단`)은 이 key와 겹치지 않아 읽지 않는다 */
 function routeStorageKey(
   roomId: string,
   scheduleId: number,
   segmentSourceItemId: number,
+  destinationItemId: number,
   travelMode: string,
 ): string {
-  return `${NS_ROUTE}:${roomId.trim()}:${scheduleId}:${segmentSourceItemId}:${travelMode.trim()}`;
+  return `${NS_ROUTE}:${roomId.trim()}:${scheduleId}:${segmentSourceItemId}:${destinationItemId}:${travelMode.trim()}`;
 }
 
 type PersistedRouteV1 = {
@@ -75,21 +77,6 @@ function removeSessionStorageKeysMatchingPrefixes(prefixes: string[]): void {
   }
 }
 
-/** 지정 구간(`segmentSourceItemId`)의 경로 sessionStorage만 제거 */
-export function clearPersistedScheduleRoutesForSegmentSources(
-  roomId: string,
-  scheduleId: number,
-  segmentSourceItemIds: number[],
-): void {
-  const rid = roomId.trim();
-  if (!rid.length || segmentSourceItemIds.length === 0) return;
-  removeSessionStorageKeysMatchingPrefixes(
-    segmentSourceItemIds.map(
-      (id) => `${NS_ROUTE}:${rid}:${scheduleId}:${id}:`,
-    ),
-  );
-}
-
 /** 해당 일차 경로 sessionStorage 항목 일괄 제거 */
 export function clearPersistedScheduleRoutesForSchedule(
   roomId: string,
@@ -110,13 +97,14 @@ export function readScheduleRouteFromSessionStorage(
   roomId: string,
   scheduleId: number,
   segmentSourceItemId: number,
+  destinationItemId: number,
   travelMode: string,
   expectedFp: string,
 ): ScheduleItemRouteResponse | null | undefined {
   if (typeof window === "undefined" || !expectedFp) return undefined;
   try {
     const raw = sessionStorage.getItem(
-      routeStorageKey(roomId, scheduleId, segmentSourceItemId, travelMode),
+      routeStorageKey(roomId, scheduleId, segmentSourceItemId, destinationItemId, travelMode),
     );
     if (!raw) return undefined;
     const o = JSON.parse(raw) as PersistedRouteV1;
@@ -133,6 +121,7 @@ export function writeScheduleRouteToSessionStorage(
   roomId: string,
   scheduleId: number,
   segmentSourceItemId: number,
+  destinationItemId: number,
   travelMode: string,
   fp: string,
   data: ScheduleItemRouteResponse | null,
@@ -143,6 +132,7 @@ export function writeScheduleRouteToSessionStorage(
       roomId,
       scheduleId,
       segmentSourceItemId,
+      destinationItemId,
       travelMode,
     );
     if (data === null) {
diff --git a/src/lib/plan/schedule-bulk-hydration.test.ts b/src/lib/plan/schedule-bulk-hydration.test.ts
index 78fef7eb..ab2f628b 100644
--- a/src/lib/plan/schedule-bulk-hydration.test.ts
+++ b/src/lib/plan/schedule-bulk-hydration.test.ts
@@ -16,6 +16,9 @@ vi.mock("@/lib/api/rooms/schedule-items", async (importOriginal) => {
 let hydrateScheduleRoutesBatch: typeof import("@/lib/plan/schedule-bulk-hydration").hydrateScheduleRoutesBatch;
 let fetchAndSeedScheduleRoutesBatch: typeof import("@/lib/plan/schedule-bulk-hydration").fetchAndSeedScheduleRoutesBatch;
 let resolveScheduleSegmentRoute: typeof import("@/lib/plan/scheduleSegmentRoute").resolveScheduleSegmentRoute;
+let persistedScheduleItemRouteQueryOptions: typeof import("@/lib/plan/scheduleItemRoutePersistedQuery").persistedScheduleItemRouteQueryOptions;
+let loadScheduleItemRouteForMap: typeof import("@/lib/plan/scheduleItemRoutePersistedQuery").loadScheduleItemRouteForMap;
+let flattenPlanItinerarySegmentsFromPlaces: typeof import("@/lib/plan/planItineraryMapSegments").flattenPlanItinerarySegmentsFromPlaces;
 let scheduleItemsQueryKey: typeof import("@/lib/query-keys").scheduleItemsQueryKey;
 let scheduleItemRouteQueryKey: typeof import("@/lib/query-keys").scheduleItemRouteQueryKey;
 let registerQueryClient: typeof import("@/lib/query-client").registerQueryClient;
@@ -31,6 +34,7 @@ function place(itemId: number, googlePlaceId: string): PlanPlace {
     itemId,
     googlePlaceId,
     title: googlePlaceId,
+    travelMode: "DRIVING",
   };
 }
 
@@ -46,6 +50,12 @@ beforeAll(async () => {
   ({ resolveScheduleSegmentRoute } = await import(
     "@/lib/plan/scheduleSegmentRoute"
   ));
+  ({ persistedScheduleItemRouteQueryOptions, loadScheduleItemRouteForMap } = await import(
+    "@/lib/plan/scheduleItemRoutePersistedQuery"
+  ));
+  ({ flattenPlanItinerarySegmentsFromPlaces } = await import(
+    "@/lib/plan/planItineraryMapSegments"
+  ));
   ({ scheduleItemsQueryKey, scheduleItemRouteQueryKey } = await import(
     "@/lib/query-keys"
   ));
@@ -66,13 +76,14 @@ describe("hydrateScheduleRoutesBatch", () => {
   const routeResult = {
     status: "OK" as const,
     itemId: 1,
+    toItemId: 2,
     travelMode: "DRIVING",
     distanceMeters: 1200,
     durationSeconds: 300,
     encodedPolyline: "_p~iF~ps|U_ulLnnqC",
   };
 
-  it("응답 시점에 일정 지문이 그대로면 경로를 시딩한다", async () => {
+  it("응답이 알려 준 출발·도착 항목 구간으로 경로를 시딩한다", async () => {
     const queryClient = new QueryClient();
     queryClient.setQueryData(
       scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID),
@@ -84,7 +95,7 @@ describe("hydrateScheduleRoutesBatch", () => {
 
     expect(
       queryClient.getQueryData(
-        scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, "DRIVING"),
+        scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, 2, "DRIVING"),
       ),
     ).toMatchObject({
       distanceMeters: 1200,
@@ -93,7 +104,7 @@ describe("hydrateScheduleRoutesBatch", () => {
     });
   });
 
-  it("자전거로 저장된 구간만 화면에 보이는 수단(자동차)으로 계산해 달라고 지정한다", async () => {
+  it("미지원 수단 구간은 제외하고 지원하는 구간만 조회한다", async () => {
     const queryClient = new QueryClient();
     const places = [
       { ...place(1, "places/a"), travelMode: "BICYCLING" },
@@ -106,7 +117,6 @@ describe("hydrateScheduleRoutesBatch", () => {
     await hydrateScheduleRoutesBatch(queryClient, ROOM_ID, SCHEDULE_ID, places);
 
     expect(getScheduleItemRoutesBatchMock).toHaveBeenCalledWith(ROOM_ID, SCHEDULE_ID, [
-      { itemId: 1, travelMode: "DRIVING" },
       { itemId: 2 },
     ]);
   });
@@ -125,7 +135,7 @@ describe("hydrateScheduleRoutesBatch", () => {
 
     expect(
       queryClient.getQueryData(
-        scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, "DRIVING"),
+        scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, 2, "DRIVING"),
       ),
     ).not.toHaveProperty("encodedPolyline");
   });
@@ -147,6 +157,7 @@ describe("hydrateScheduleRoutesBatch", () => {
       {
         status: "ERROR",
         itemId: 2,
+        toItemId: 3,
         travelMode: "WALKING",
         errorCode: "UPSTREAM_TIMEOUT",
       },
@@ -171,6 +182,7 @@ describe("hydrateScheduleRoutesBatch", () => {
       ROOM_ID,
       SCHEDULE_ID,
       2,
+      3,
       "WALKING",
     );
     expect(queryClient.getQueryData(failedKey)).toBeUndefined();
@@ -179,6 +191,7 @@ describe("hydrateScheduleRoutesBatch", () => {
         roomId: ROOM_ID,
         scheduleId: SCHEDULE_ID,
         segmentSourceItemId: 2,
+        destinationItemId: 3,
         travelMode: "WALKING",
       }),
     ).rejects.toThrow("temporary single route failure");
@@ -188,20 +201,80 @@ describe("hydrateScheduleRoutesBatch", () => {
         roomId: ROOM_ID,
         scheduleId: SCHEDULE_ID,
         segmentSourceItemId: 2,
+        destinationItemId: 3,
         travelMode: "WALKING",
       }),
     ).resolves.toEqual(fallbackRoute);
     expect(getScheduleItemRouteMock).toHaveBeenCalledTimes(2);
   });
 
-  it("응답 대기 중 일정이 바뀌면(지문 불일치) 늦게 도착한 결과를 버린다", async () => {
+  it("경로 없음 답(NO_ROUTE)은 그 구간을 null로 시딩해 단건으로 다시 묻지 않는다", async () => {
+    const queryClient = new QueryClient();
+    registerQueryClient(queryClient);
+    const places = [place(1, "places/a"), place(2, "places/b"), place(3, "places/c")];
+    queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID), places);
+    getScheduleItemRoutesBatchMock.mockResolvedValue([
+      routeResult,
+      { status: "FAILED", itemId: 2, toItemId: 3, travelMode: "WALKING", errorCode: "NO_ROUTE" },
+    ]);
+
+    await hydrateScheduleRoutesBatch(queryClient, ROOM_ID, SCHEDULE_ID, places);
+
+    expect(
+      queryClient.getQueryData(scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 2, 3, "WALKING")),
+    ).toBeNull();
+    await expect(
+      resolveScheduleSegmentRoute({
+        roomId: ROOM_ID,
+        scheduleId: SCHEDULE_ID,
+        segmentSourceItemId: 2,
+        destinationItemId: 3,
+        travelMode: "WALKING",
+      }),
+    ).resolves.toBeNull();
+    expect(getScheduleItemRouteMock).not.toHaveBeenCalled();
+  });
+
+  it.each(["LAST_ITEM", "SCHEDULE_ITEM_NOT_FOUND"])(
+    "도착 항목이 없는 답(%s)은 시딩하지 않고 그 칸이 도착 항목을 지정한 단건으로 받는다",
+    async (errorCode) => {
+      const queryClient = new QueryClient();
+      registerQueryClient(queryClient);
+      const places = [place(1, "places/a"), place(2, "places/b"), place(3, "places/c")];
+      queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID), places);
+      getScheduleItemRoutesBatchMock.mockResolvedValue([
+        routeResult,
+        { status: "FAILED", itemId: 2, travelMode: "WALKING", errorCode },
+      ]);
+      const toThree = { travelMode: "WALKING", distanceMeters: 800, durationSeconds: 600 };
+      getScheduleItemRouteMock.mockResolvedValue(toThree);
+
+      await hydrateScheduleRoutesBatch(queryClient, ROOM_ID, SCHEDULE_ID, places);
+
+      expect(
+        queryClient.getQueryState(scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 2, 3, "WALKING")),
+      ).toBeUndefined();
+      await expect(
+        resolveScheduleSegmentRoute({
+          roomId: ROOM_ID,
+          scheduleId: SCHEDULE_ID,
+          segmentSourceItemId: 2,
+          destinationItemId: 3,
+          travelMode: "WALKING",
+        }),
+      ).resolves.toEqual(toThree);
+      expect(getScheduleItemRouteMock).toHaveBeenCalledExactlyOnceWith(ROOM_ID, SCHEDULE_ID, 2, 3, "WALKING");
+    },
+  );
+
+  it("응답 대기 중 순서가 바뀌어도 응답이 알려 준 구간에 저장하고 새 순서의 구간에는 넣지 않는다", async () => {
     const queryClient = new QueryClient();
     queryClient.setQueryData(
       scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID),
       snapshot,
     );
     getScheduleItemRoutesBatchMock.mockImplementation(async () => {
-      // batch 응답이 도착하기 전에 목적지가 B → C 로 교체된 상황
+      // batch 응답이 도착하기 전에 1번 다음 장소가 2 → 3으로 바뀐 상황 — 서버는 요청을 받은 순간의 1→2를 계산했다
       queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID), [
         place(1, "places/a"),
         place(3, "places/c"),
@@ -213,7 +286,12 @@ describe("hydrateScheduleRoutesBatch", () => {
 
     expect(
       queryClient.getQueryData(
-        scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, "DRIVING"),
+        scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, 2, "DRIVING"),
+      ),
+    ).toMatchObject({ distanceMeters: 1200 });
+    expect(
+      queryClient.getQueryState(
+        scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, 3, "DRIVING"),
       ),
     ).toBeUndefined();
   });
@@ -226,8 +304,8 @@ describe("fetchAndSeedScheduleRoutesBatch", () => {
   function seededClient() {
     const queryClient = new QueryClient();
     queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID), places);
-    queryClient.setQueryData(scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, "DRIVING"), route);
-    queryClient.setQueryData(scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 2, "DRIVING"), route);
+    queryClient.setQueryData(scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, 2, "DRIVING"), route);
+    queryClient.setQueryData(scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 2, 3, "DRIVING"), route);
     return queryClient;
   }
 
@@ -239,7 +317,7 @@ describe("fetchAndSeedScheduleRoutesBatch", () => {
 
   it("캐시에 없는 구간이 있으면 일괄로 다시 받는다", async () => {
     const queryClient = seededClient();
-    queryClient.removeQueries({ queryKey: scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 2, "DRIVING") });
+    queryClient.removeQueries({ queryKey: scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 2, 3, "DRIVING") });
     getScheduleItemRoutesBatchMock.mockResolvedValue([]);
 
     await fetchAndSeedScheduleRoutesBatch(queryClient, ROOM_ID, SCHEDULE_ID, places);
@@ -247,10 +325,23 @@ describe("fetchAndSeedScheduleRoutesBatch", () => {
     expect(getScheduleItemRoutesBatchMock).toHaveBeenCalledOnce();
   });
 
+  it("순서를 바꿨다가 되돌리면 받아 둔 경로가 있어 일괄 요청을 보내지 않는다", async () => {
+    const queryClient = seededClient();
+    const reordered = [place(1, "places/a"), place(3, "places/c"), place(2, "places/b")];
+    queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID), reordered);
+    getScheduleItemRoutesBatchMock.mockResolvedValue([]);
+
+    await fetchAndSeedScheduleRoutesBatch(queryClient, ROOM_ID, SCHEDULE_ID, reordered);
+    queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID), places);
+    await fetchAndSeedScheduleRoutesBatch(queryClient, ROOM_ID, SCHEDULE_ID, places);
+
+    expect(getScheduleItemRoutesBatchMock).toHaveBeenCalledOnce();
+  });
+
   it("일정 변경으로 무효화된 구간이 있으면 일괄로 다시 받는다", async () => {
     const queryClient = seededClient();
     await queryClient.invalidateQueries({
-      queryKey: scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, "DRIVING"),
+      queryKey: scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, 1, 2, "DRIVING"),
       refetchType: "none",
     });
     getScheduleItemRoutesBatchMock.mockResolvedValue([]);
@@ -260,3 +351,65 @@ describe("fetchAndSeedScheduleRoutesBatch", () => {
     expect(getScheduleItemRoutesBatchMock).toHaveBeenCalledOnce();
   });
 });
+
+describe("진입 batch·일정 목록·지도가 같은 구간 경로 캐시를 쓴다", () => {
+  const places = [place(1, "places/a"), place(2, "places/b"), place(3, "places/c")];
+  const batchRoute = (itemId: number, distanceMeters: number) => ({
+    status: "OK" as const,
+    itemId,
+    toItemId: itemId + 1,
+    travelMode: "DRIVING",
+    distanceMeters,
+    durationSeconds: 60,
+    encodedPolyline: "_p~iF~ps|U_ulLnnqC",
+  });
+
+  it("진입 batch가 받아 둔 경로를 목록 칸과 지도가 다시 요청하지 않고 쓴다", async () => {
+    const queryClient = new QueryClient();
+    queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID), places);
+    getScheduleItemRoutesBatchMock.mockResolvedValue([batchRoute(1, 100), batchRoute(2, 200)]);
+
+    await fetchAndSeedScheduleRoutesBatch(queryClient, ROOM_ID, SCHEDULE_ID, places);
+
+    // 목록 칸 — PlanItinerary가 넘기는 것처럼 다음 장소의 itemId로 조회한다
+    const listDistances = await Promise.all(
+      places.slice(0, -1).map((origin, index) =>
+        queryClient
+          .fetchQuery(
+            persistedScheduleItemRouteQueryOptions(
+              ROOM_ID,
+              SCHEDULE_ID,
+              origin.itemId ?? null,
+              places[index + 1]?.itemId ?? null,
+              "DRIVING",
+              "",
+              { segmentReady: true },
+            ),
+          )
+          .then((route) => route?.distanceMeters),
+      ),
+    );
+    // 지도 — 지도가 쓰는 구간 계산 그대로 조회한다
+    const mapDistances = await Promise.all(
+      flattenPlanItinerarySegmentsFromPlaces([SCHEDULE_ID], [places]).map((segment) =>
+        loadScheduleItemRouteForMap(
+          queryClient,
+          persistedScheduleItemRouteQueryOptions(
+            ROOM_ID,
+            segment.scheduleId,
+            segment.segmentSourceItemId,
+            segment.destinationItemId,
+            segment.travelModeCanon,
+            "",
+            { segmentReady: true },
+          ),
+        ).then((route) => route?.distanceMeters),
+      ),
+    );
+
+    expect(listDistances).toEqual([100, 200]);
+    expect(mapDistances).toEqual([100, 200]);
+    expect(getScheduleItemRoutesBatchMock).toHaveBeenCalledOnce();
+    expect(getScheduleItemRouteMock).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/lib/plan/schedule-bulk-hydration.ts b/src/lib/plan/schedule-bulk-hydration.ts
index fd7e85fa..47484427 100644
--- a/src/lib/plan/schedule-bulk-hydration.ts
+++ b/src/lib/plan/schedule-bulk-hydration.ts
@@ -13,14 +13,12 @@ import {
 } from "@/lib/places/place-batch-cache";
 import type { PlacePreview } from "@/lib/api/places";
 import {
-  fetchPlacePreview,
   placePreviewQueryKey,
   resolvePreviewGooglePlaceId,
 } from "@/lib/places/place-queries";
 import { schedulePlacesFingerprint } from "@/lib/plan/planTravelLocalStorage";
 import { sortRoomSchedules } from "@/lib/plan/scheduleMerge";
 import {
-  SCHEDULE_TRAVEL_MODE_DEFAULT,
   canonicalScheduleTravelMode,
 } from "@/lib/plan/scheduleTravelMode";
 import type { PlanPlace } from "@/lib/plan/types";
@@ -146,33 +144,19 @@ function buildPlanPlacesFromItemsWithCache(
   );
 }
 
-/** batch 시딩 후 preview 캐시 miss 항목만 GET `/preview`로 보강합니다. */
+/** preview 캐시 miss 항목만 batch로 받아 채웁니다 — 그래도 없는 장소는 단건으로 다시 받지 않고 자리표시자로 둡니다. */
 export async function buildPlanPlacesFromItemsWithPreviewEnrichment(
   queryClient: QueryClient,
   items: RoomScheduleItem[],
 ): Promise<PlanPlace[]> {
-  const sorted = sortRoomScheduleItemsByOrder(items);
-  const placeIds = sorted
+  const placeIds = items
     .map((item) => item.googlePlaceId)
     .filter((id) => typeof id === "string" && id.trim().length > 0);
 
   if (placeIds.length) {
     await fetchAndSeedPlacePreviews(placeIds, queryClient);
   }
-
-  const out: PlanPlace[] = [];
-  for (const item of sorted) {
-    let preview = readCachedPreview(queryClient, item.googlePlaceId);
-    if (!preview) {
-      try {
-        preview = await fetchPlacePreview(item.googlePlaceId);
-      } catch {
-        preview = null;
-      }
-    }
-    out.push(planPlaceFromItemAndPreview(item, preview));
-  }
-  return out;
+  return buildPlanPlacesFromItemsWithCache(queryClient, items);
 }
 
 function collectGooglePlaceIdsFromSchedules(
@@ -189,30 +173,74 @@ function collectGooglePlaceIdsFromSchedules(
   return [...ids];
 }
 
-export async function hydrateScheduleItemsFromSchedulesWithItems(
+/**
+ * 일차별 장소 목록을 만들기만 합니다. 미리보기를 기다리는 동안 다른 변경이 들어올 수 있어
+ * 캐시 쓰기(`writeSchedulePlacesFromHydrate`)와 나눕니다.
+ */
+export async function buildSchedulePlacesFromSchedulesWithItems(
   queryClient: QueryClient,
-  roomId: string,
   schedules: readonly RoomScheduleWithItems[],
-): Promise<void> {
-  const rid = roomId.trim();
-  if (!rid.length) return;
-
+): Promise<Map<number, PlanPlace[]>> {
   const placeIds = collectGooglePlaceIdsFromSchedules(schedules);
   if (placeIds.length) {
     await fetchAndSeedPlacePreviews(placeIds, queryClient);
   }
 
+  const placesBySchedule = new Map<number, PlanPlace[]>();
   for (const schedule of schedules) {
     const sid = schedule.scheduleId;
     if (typeof sid !== "number" || !Number.isFinite(sid)) continue;
 
     const items = Array.isArray(schedule.items) ? schedule.items : [];
-    const places = await buildPlanPlacesFromItemsWithPreviewEnrichment(
-      queryClient,
-      items,
+    placesBySchedule.set(
+      sid,
+      buildPlanPlacesFromItemsWithCache(queryClient, items),
     );
-    queryClient.setQueryData(scheduleItemsQueryKey(rid, sid), places);
   }
+  return placesBySchedule;
+}
+
+/**
+ * 만든 일차 목록을 한 번에 씁니다. 경로는 도착 항목까지 key에 있어 순서가 바뀌어도 무효화하지 않습니다.
+ * `startedAt`(일정 전체 조회를 보낸 시각) 뒤에 바뀐 일차는 그쪽이 더 새 상태라 덮지 않고,
+ * 그 일차를 받는 중이면 이 조회보다 먼저 보낸 요청일 수 있어 다시 받게 합니다.
+ */
+export function writeSchedulePlacesFromHydrate(
+  queryClient: QueryClient,
+  roomId: string,
+  placesBySchedule: ReadonlyMap<number, PlanPlace[]>,
+  startedAt: number,
+): void {
+  const rid = roomId.trim();
+  if (!rid.length) return;
+
+  for (const [sid, places] of placesBySchedule) {
+    const key = scheduleItemsQueryKey(rid, sid);
+    const state = queryClient.getQueryState(key);
+    if (state && state.dataUpdatedAt > startedAt) continue;
+
+    queryClient.setQueryData(key, places);
+    if (state?.fetchStatus === "fetching") {
+      void queryClient.refetchQueries({ queryKey: key, exact: true });
+    }
+  }
+}
+
+export async function hydrateScheduleItemsFromSchedulesWithItems(
+  queryClient: QueryClient,
+  roomId: string,
+  schedules: readonly RoomScheduleWithItems[],
+  startedAt: number,
+): Promise<void> {
+  const rid = roomId.trim();
+  if (!rid.length) return;
+
+  writeSchedulePlacesFromHydrate(
+    queryClient,
+    rid,
+    await buildSchedulePlacesFromSchedulesWithItems(queryClient, schedules),
+    startedAt,
+  );
 }
 
 function batchRouteItemToResponse(
@@ -228,6 +256,10 @@ function batchRouteItemToResponse(
 
 const inFlightScheduleRoutesBatch = new Map<string, Promise<void>>();
 
+/**
+ * 실패가 아니라 "경로 없음"이라는 답인 batch 항목 — 단건으로 다시 물어도 같은 답(204·404)이 오므로
+ * 경로 없음(`null`)으로 시딩하고 다시 묻지 않는다.
+ */
 /**
  * in-flight dedup 키 — 일정 지문(`itemId` 순서·장소 정체성)을 포함해
  * 목적지만 바뀐 일정(`[A,B]`→`[A,C]`)이 이전 batch Promise를 공유하지 않게 합니다.
@@ -240,9 +272,26 @@ function scheduleRoutesBatchKey(
   return `${roomId.trim()}:${scheduleId}:${placesFingerprint}`;
 }
 
+/** 구간 출발 항목 → 다음 장소의 `itemId` (마지막 장소와 항목 ID가 없는 구간은 뺀다) */
+function segmentDestinationsByItemId(places: readonly PlanPlace[]): Map<number, number> {
+  const out = new Map<number, number>();
+  for (let i = 0; i < places.length - 1; i += 1) {
+    const itemId = places[i]?.itemId;
+    const destination = places[i + 1]?.itemId;
+    if (isFiniteItemId(itemId) && isFiniteItemId(destination)) {
+      out.set(itemId, destination);
+    }
+  }
+  return out;
+}
+
+function isFiniteItemId(id: number | undefined): id is number {
+  return typeof id === "number" && Number.isFinite(id);
+}
+
 /**
  * 일차의 모든 구간 경로가 이미 캐시에 있는지 — 일정 화면에서 받아 뒀거나, 화면을 다시 열었거나,
- * 지도 경로 보기로 넘어온 경우다. 캐시가 지워졌거나(gc) 일정 변경으로 무효화된 구간이 하나라도 있으면 false.
+ * 지도 경로 보기로 넘어온 경우다. 받은 적 없거나(새 순서·gc) 무효화된 구간이 하나라도 있으면 false.
  */
 export function scheduleSegmentRoutesCached(
   queryClient: QueryClient,
@@ -251,13 +300,17 @@ export function scheduleSegmentRoutesCached(
   places: readonly PlanPlace[],
 ): boolean {
   const rid = roomId.trim();
-  const sources = places
-    .slice(0, -1)
-    .filter((p): p is PlanPlace & { itemId: number } => typeof p.itemId === "number" && Number.isFinite(p.itemId));
-  if (!rid.length || !sources.length) return false;
-  return sources.every((place) => {
-    const mode = canonicalScheduleTravelMode(place.travelMode) ?? SCHEDULE_TRAVEL_MODE_DEFAULT;
-    const state = queryClient.getQueryState(scheduleItemRouteQueryKey(rid, scheduleId, place.itemId, mode));
+  const destinationByItemId = segmentDestinationsByItemId(places);
+  if (!rid.length || !destinationByItemId.size) return false;
+  return places.every((place) => {
+    if (typeof place.itemId !== "number") return true;
+    const destination = destinationByItemId.get(place.itemId);
+    if (destination === undefined) return true;
+    const mode = canonicalScheduleTravelMode(place.travelMode);
+    if (!mode) return true;
+    const state = queryClient.getQueryState(
+      scheduleItemRouteQueryKey(rid, scheduleId, place.itemId, destination, mode),
+    );
     return state?.status === "success" && !state.isInvalidated;
   });
 }
@@ -328,40 +381,30 @@ export async function hydrateScheduleRoutesBatch(
   const requestItems = segments.flatMap((place) => {
     const itemId = place.itemId;
     if (typeof itemId !== "number" || !Number.isFinite(itemId)) return [];
-    // 저장값이 표준 수단과 다르면(예: 고를 수 없게 된 자전거) 화면에 보이는 수단으로 계산해 달라고 지정한다 —
-    // 수단을 빼면 서버가 저장값으로 계산해, 자동차로 보이는 구간에 자전거 경로가 들어간다
     const saved = place.travelMode?.trim().toUpperCase() ?? "";
-    const shown = canonicalScheduleTravelMode(saved);
-    return [saved && shown && shown !== saved ? { itemId, travelMode: shown } : { itemId }];
+    const mode = canonicalScheduleTravelMode(saved);
+    if (!mode) return [];
+    return [mode === saved ? { itemId } : { itemId, travelMode: mode }];
   });
 
   if (!requestItems.length) return;
 
   const results = await getScheduleItemRoutesBatch(rid, scheduleId, requestItems);
 
-  /**
-   * 응답 대기 중 일정이 바뀌었으면(지문 불일치) 늦게 도착한 결과를 버립니다 —
-   * 구간 캐시 키는 출발 항목만 담고 있어 옛 목적지의 경로가 새 구간에 시딩될 수 있음.
-   */
-  const snapshotFp = schedulePlacesFingerprint([...places]);
-  const currentPlaces = queryClient.getQueryData<PlanPlace[]>(
-    scheduleItemsQueryKey(rid, scheduleId),
-  );
-  const currentFp = schedulePlacesFingerprint([...(currentPlaces ?? [])]);
-  if (!snapshotFp.length || snapshotFp !== currentFp) return;
-
+  // 서버는 요청을 받은 순간의 순서로 다음 항목을 정하므로, 응답이 알려 준 도착 항목(toItemId)의 구간으로 저장한다 —
+  // 기다리는 사이 순서가 바뀌었어도 그 구간의 값이라 버리지 않는다. 마지막 항목·항목 없음은 도착 항목이 없어
+  // 저장하지 않고, 그 칸이 도착 항목을 지정한 단건 조회로 받는다
   for (const result of results) {
-    if (!isBatchItemOk(result)) continue;
-    const route = batchRouteItemToResponse(result);
-    const itemId = result.itemId;
+    const { itemId, toItemId } = result;
     const mode = canonicalScheduleTravelMode(result.travelMode);
-    if (!mode) continue;
-    if (typeof itemId !== "number" || !Number.isFinite(itemId)) continue;
+    if (!mode || !isFiniteItemId(itemId) || !isFiniteItemId(toItemId)) continue;
 
-    queryClient.setQueryData(
-      scheduleItemRouteQueryKey(rid, scheduleId, itemId, mode),
-      route,
-    );
+    const routeKey = scheduleItemRouteQueryKey(rid, scheduleId, itemId, toItemId, mode);
+    if (isBatchItemOk(result)) {
+      queryClient.setQueryData(routeKey, batchRouteItemToResponse(result));
+    } else if (result.errorCode === "NO_ROUTE") {
+      queryClient.setQueryData(routeKey, null);
+    }
   }
 }
 
@@ -372,9 +415,10 @@ export async function hydrateRoomSchedulesWithItems(
   const rid = roomId.trim();
   if (!rid.length) return [];
 
+  const startedAt = Date.now();
   const schedules = await getRoomSchedules(rid, { includeItems: true });
   const sorted = sortRoomSchedules(schedules);
-  await hydrateScheduleItemsFromSchedulesWithItems(queryClient, rid, sorted);
+  await hydrateScheduleItemsFromSchedulesWithItems(queryClient, rid, sorted, startedAt);
   return sorted;
 }
 
diff --git a/src/lib/plan/schedule-preview-hydration.test.ts b/src/lib/plan/schedule-preview-hydration.test.ts
new file mode 100644
index 00000000..c5aa29d3
--- /dev/null
+++ b/src/lib/plan/schedule-preview-hydration.test.ts
@@ -0,0 +1,232 @@
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { RoomScheduleWithItems } from "@/lib/api/rooms/schedules";
+import type { PlanPlace } from "@/lib/plan/types";
+
+const requestPlacePreviewsBatch = vi.hoisted(() => vi.fn());
+const requestPlacePreview = vi.hoisted(() => vi.fn());
+const getScheduleItems = vi.hoisted(() => vi.fn());
+vi.mock("@/lib/api/rooms/schedule-items", async (importOriginal) => ({
+  ...await importOriginal<typeof import("@/lib/api/rooms/schedule-items")>(),
+  getScheduleItems,
+}));
+
+vi.hoisted(() => {
+  process.env.NEXT_PUBLIC_API_BASE_URL = "http://localhost:8080";
+  process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID = "test-client";
+  process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI = "http://localhost/callback";
+  process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY = "test-maps-key";
+});
+
+vi.mock("@/lib/api/places", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/api/places")>();
+  return { ...actual, requestPlacePreviewsBatch, requestPlacePreview };
+});
+
+let hydrateScheduleItemsFromSchedulesWithItems: typeof import("@/lib/plan/schedule-bulk-hydration").hydrateScheduleItemsFromSchedulesWithItems;
+let ensureSchedulePlanPlacesEnriched: typeof import("@/lib/plan/scheduleItemPlaces").ensureSchedulePlanPlacesEnriched;
+let schedulePlanPlacesQueryOptions: typeof import("@/lib/plan/scheduleItemPlaces").schedulePlanPlacesQueryOptions;
+let PLAN_PLACE_PREVIEW_ERROR_TITLE: string;
+let createQueryClient: typeof import("@/lib/query-client").createQueryClient;
+let scheduleItemsQueryKey: typeof import("@/lib/query-keys").scheduleItemsQueryKey;
+let roomSchedulesQueryKey: typeof import("@/lib/query-keys").roomSchedulesQueryKey;
+let HttpError: typeof import("@/lib/api/errors").HttpError;
+
+beforeAll(async () => {
+  ({ hydrateScheduleItemsFromSchedulesWithItems, PLAN_PLACE_PREVIEW_ERROR_TITLE } = await import(
+    "@/lib/plan/schedule-bulk-hydration"
+  ));
+  ({ ensureSchedulePlanPlacesEnriched, schedulePlanPlacesQueryOptions } = await import("@/lib/plan/scheduleItemPlaces"));
+  ({ createQueryClient } = await import("@/lib/query-client"));
+  ({ scheduleItemsQueryKey, roomSchedulesQueryKey } = await import("@/lib/query-keys"));
+  ({ HttpError } = await import("@/lib/api/errors"));
+});
+
+beforeEach(() => {
+  requestPlacePreviewsBatch.mockReset();
+  requestPlacePreview.mockReset();
+  getScheduleItems.mockReset();
+});
+
+const ROOM_ID = "room-1";
+
+function schedule(scheduleId: number, googlePlaceIds: string[]): RoomScheduleWithItems {
+  return {
+    scheduleId,
+    roomId: ROOM_ID,
+    dayNumber: scheduleId,
+    date: "2026-11-01",
+    createdAt: "2026-10-01T00:00:00",
+    items: googlePlaceIds.map((googlePlaceId, orderIndex) => ({
+      itemId: scheduleId * 100 + orderIndex,
+      scheduleId,
+      googlePlaceId,
+      startTime: null,
+      endTime: null,
+      orderIndex,
+      travelMode: "DRIVING",
+      createdAt: "2026-10-01T00:00:00",
+    })),
+  };
+}
+
+const ok = (googlePlaceId: string) => ({
+  status: "OK",
+  googlePlaceId,
+  name: `이름 ${googlePlaceId}`,
+  formattedAddress: "서울",
+  location: { latitude: 37.5, longitude: 127.0 },
+  primaryType: "cafe",
+  primaryTypeDisplayName: "카페",
+});
+const failed = (googlePlaceId: string) => ({
+  status: "FAILED",
+  googlePlaceId,
+  errorCode: "EXTERNAL_API_ERROR",
+});
+
+function titles(queryClient: ReturnType<typeof createQueryClient>, scheduleId: number) {
+  return (
+    queryClient.getQueryData<PlanPlace[]>(scheduleItemsQueryKey(ROOM_ID, scheduleId)) ?? []
+  ).map((place) => place.title);
+}
+
+describe("hydrateScheduleItemsFromSchedulesWithItems", () => {
+  it("모든 일차 장소를 batch 한 번으로 받고 실패한 곳만 batch로 한 번 더 받는다 — 단건으로는 받지 않는다", async () => {
+    const queryClient = createQueryClient();
+    requestPlacePreviewsBatch
+      .mockResolvedValueOnce([ok("a"), failed("b"), ok("c"), failed("d")])
+      .mockResolvedValueOnce([ok("b"), failed("d")]);
+
+    await hydrateScheduleItemsFromSchedulesWithItems(queryClient, ROOM_ID, [
+      schedule(1, ["a", "b"]),
+      schedule(2, ["c", "d"]),
+    ], Date.now());
+
+    expect(requestPlacePreviewsBatch.mock.calls).toEqual([[["a", "b", "c", "d"]], [["b", "d"]]]);
+    expect(requestPlacePreview).not.toHaveBeenCalled();
+    expect(titles(queryClient, 1)).toEqual(["이름 a", "이름 b"]);
+    expect(titles(queryClient, 2)).toEqual(["이름 c", PLAN_PLACE_PREVIEW_ERROR_TITLE]);
+  });
+
+  it("미리보기 batch 요청이 실패해도 일정은 자리표시자로 채우고 다시 보내지 않는다", async () => {
+    const queryClient = createQueryClient();
+    requestPlacePreviewsBatch.mockRejectedValueOnce(new HttpError(429, "요청이 너무 많습니다"));
+
+    await hydrateScheduleItemsFromSchedulesWithItems(queryClient, ROOM_ID, [schedule(1, ["a", "b"])], Date.now());
+
+    expect(requestPlacePreviewsBatch).toHaveBeenCalledTimes(1);
+    expect(requestPlacePreview).not.toHaveBeenCalled();
+    expect(titles(queryClient, 1)).toEqual([
+      PLAN_PLACE_PREVIEW_ERROR_TITLE,
+      PLAN_PLACE_PREVIEW_ERROR_TITLE,
+    ]);
+  });
+});
+
+describe("ensureSchedulePlanPlacesEnriched", () => {
+  const placeholder = (googlePlaceId: string, itemId: number): PlanPlace => ({
+    id: `item-${itemId}`,
+    itemId,
+    googlePlaceId,
+    title: PLAN_PLACE_PREVIEW_ERROR_TITLE,
+    subtitle: googlePlaceId,
+  });
+
+  it("일정 불러오기가 진행 중이면 끝날 때까지 기다려 그 결과를 쓰고, 미리보기를 다시 받지 않는다", async () => {
+    const queryClient = createQueryClient();
+    let finishHydration: (schedules: RoomScheduleWithItems[]) => void = () => {};
+    const hydration = queryClient.fetchQuery({
+      queryKey: roomSchedulesQueryKey(ROOM_ID),
+      queryFn: () =>
+        new Promise<RoomScheduleWithItems[]>((resolve) => {
+          finishHydration = resolve;
+        }),
+    });
+
+    const enriching = ensureSchedulePlanPlacesEnriched(queryClient, ROOM_ID, 1);
+    const hydratedPlaces = [placeholder("a", 100)];
+    queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, 1), hydratedPlaces);
+    finishHydration([schedule(1, ["a"])]);
+    await hydration;
+
+    await expect(enriching).resolves.toBe(hydratedPlaces);
+    expect(requestPlacePreviewsBatch).not.toHaveBeenCalled();
+    expect(requestPlacePreview).not.toHaveBeenCalled();
+  });
+
+  it("기다리던 일정 불러오기가 취소되고 다시 시작되면 새 불러오기를 기다려 그 결과를 쓴다", async () => {
+    const queryClient = createQueryClient();
+    // 이미 받은 일정을 다시 받는 중에 또 다시 받으면 TanStack이 진행 중인 불러오기를 취소한다
+    queryClient.setQueryData(roomSchedulesQueryKey(ROOM_ID), [schedule(1, ["a"])]);
+    const finishHydrations: Array<(schedules: RoomScheduleWithItems[]) => void> = [];
+    const queryFn = () =>
+      new Promise<RoomScheduleWithItems[]>((resolve) => {
+        finishHydrations.push(resolve);
+      });
+    void queryClient.fetchQuery({ queryKey: roomSchedulesQueryKey(ROOM_ID), queryFn, staleTime: 0 });
+
+    const enriching = ensureSchedulePlanPlacesEnriched(queryClient, ROOM_ID, 1);
+    const refetching = queryClient.refetchQueries({
+      queryKey: roomSchedulesQueryKey(ROOM_ID),
+      exact: true,
+    });
+    const hydratedPlaces = [placeholder("a", 100)];
+    queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, 1), hydratedPlaces);
+    finishHydrations[1]([schedule(1, ["a"])]);
+    await refetching;
+
+    await expect(enriching).resolves.toBe(hydratedPlaces);
+    expect(finishHydrations).toHaveLength(2);
+    expect(requestPlacePreviewsBatch).not.toHaveBeenCalled();
+    expect(requestPlacePreview).not.toHaveBeenCalled();
+  });
+
+  it("다시 들어오면 지금 일차 목록은 그대로 두고 자리표시자 장소만 다시 받는다 — 지운 장소가 되살아나지 않는다", async () => {
+    const queryClient = createQueryClient();
+    // 일정을 불러온 뒤 c를 지웠다 — room-schedules의 items에는 c가 아직 남아 있다
+    queryClient.setQueryData(roomSchedulesQueryKey(ROOM_ID), [schedule(1, ["a", "b", "c"])]);
+    queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, 1), [
+      placeholder("a", 100),
+      { id: "item-101", itemId: 101, googlePlaceId: "b", title: "이름 b", subtitle: "서울" },
+    ]);
+    requestPlacePreview.mockResolvedValueOnce({
+      googlePlaceId: "a",
+      name: "이름 a",
+      formattedAddress: "서울",
+      location: { latitude: 37.5, longitude: 127.0 },
+      primaryType: "cafe",
+      primaryTypeDisplayName: "카페",
+    });
+
+    const places = await ensureSchedulePlanPlacesEnriched(queryClient, ROOM_ID, 1);
+
+    expect(places.map((place) => place.title)).toEqual(["이름 a", "이름 b"]);
+    expect(requestPlacePreview).toHaveBeenCalledExactlyOnceWith("a");
+    expect(requestPlacePreviewsBatch).not.toHaveBeenCalled();
+  });
+});
+
+describe("schedulePlanPlacesQueryOptions after preview recovery merge", () => {
+  it("invalidated placeholder data fetches authoritative items instead of only enriching old items", async () => {
+    const queryClient = createQueryClient();
+    const key = scheduleItemsQueryKey(ROOM_ID, 1);
+    queryClient.setQueryData(key, [{ id: "item-100", itemId: 100, googlePlaceId: "a", title: PLAN_PLACE_PREVIEW_ERROR_TITLE }]);
+    await queryClient.invalidateQueries({ queryKey: key, refetchType: "none" });
+    getScheduleItems.mockResolvedValue([]);
+    await expect(queryClient.fetchQuery(schedulePlanPlacesQueryOptions(queryClient, ROOM_ID, 1))).resolves.toEqual([]);
+    expect(getScheduleItems).toHaveBeenCalledExactlyOnceWith(ROOM_ID, 1, expect.any(AbortSignal));
+    expect(requestPlacePreview).not.toHaveBeenCalled();
+  });
+
+  it("non-invalidated placeholder retry enriches only the surviving cached items", async () => {
+    const queryClient = createQueryClient();
+    queryClient.setQueryData(scheduleItemsQueryKey(ROOM_ID, 1), [{ id: "item-100", itemId: 100, googlePlaceId: "a", title: PLAN_PLACE_PREVIEW_ERROR_TITLE }]);
+    requestPlacePreview.mockResolvedValue(ok("a"));
+    const places = await queryClient.fetchQuery({ ...schedulePlanPlacesQueryOptions(queryClient, ROOM_ID, 1), staleTime: 0 });
+    expect(places.map((place) => place.itemId)).toEqual([100]);
+    expect(places[0].title).toBe("이름 a");
+    expect(getScheduleItems).not.toHaveBeenCalled();
+    expect(requestPlacePreview).toHaveBeenCalledExactlyOnceWith("a");
+  });
+});
diff --git a/src/lib/plan/scheduleItemPlaces.create.test.ts b/src/lib/plan/scheduleItemPlaces.create.test.ts
index fd7c9ce5..1c3eca3c 100644
--- a/src/lib/plan/scheduleItemPlaces.create.test.ts
+++ b/src/lib/plan/scheduleItemPlaces.create.test.ts
@@ -1,51 +1,30 @@
-import { QueryClient } from "@tanstack/react-query";
+import { QueryClient, QueryObserver } from "@tanstack/react-query";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 
 import type {
   CreateScheduleItemResponse,
   RoomScheduleItem,
 } from "@/lib/api/rooms/schedule-items";
+import type { PlanPlace } from "@/lib/plan/types";
 import { scheduleItemsQueryKey } from "@/lib/query-keys";
 
 const mocks = vi.hoisted(() => ({
-  bumpForDirections: vi.fn(),
-  bumpPlanMapRouteSegments: vi.fn(),
   createScheduleItem: vi.fn(),
+  updateScheduleItem: vi.fn(),
   fetchPlacePreview: vi.fn(),
   getScheduleItems: vi.fn(),
-  invalidateScheduleItemRouteForSources: vi.fn(),
-  invalidateScheduleItemRouteForWholeSchedule: vi.fn(),
-  invalidateScheduleItemRoutesAfterDelete: vi.fn(),
-  invalidateScheduleItemRoutesAfterItemCreated: vi.fn(),
-  readOrderedItemIdsFromScheduleItemsCache: vi.fn(),
 }));
 
 vi.mock("@/lib/api/rooms/schedule-items", () => ({
   createScheduleItem: mocks.createScheduleItem,
   getScheduleItems: mocks.getScheduleItems,
-  updateScheduleItem: vi.fn(),
+  updateScheduleItem: mocks.updateScheduleItem,
 }));
 
 vi.mock("@/lib/places/place-queries", () => ({
   fetchPlacePreview: mocks.fetchPlacePreview,
 }));
 
-vi.mock("@/lib/plan/scheduleStompRouteScope", () => ({
-  bumpPlanMapRouteSegments: mocks.bumpPlanMapRouteSegments,
-  invalidateScheduleItemRouteForSources:
-    mocks.invalidateScheduleItemRouteForSources,
-  invalidateScheduleItemRouteForWholeSchedule:
-    mocks.invalidateScheduleItemRouteForWholeSchedule,
-  invalidateScheduleItemRoutesAfterDelete:
-    mocks.invalidateScheduleItemRoutesAfterDelete,
-  invalidateScheduleItemRoutesAfterItemCreated:
-    mocks.invalidateScheduleItemRoutesAfterItemCreated,
-  invalidateScheduleItemRoutesAfterReorder: vi.fn(),
-  readOrderedItemIdsFromScheduleItemsCache:
-    mocks.readOrderedItemIdsFromScheduleItemsCache,
-  removeRouteQueriesForDeletedItemSource: vi.fn(),
-}));
-
 vi.mock("@/lib/rooms", () => ({
   awaitRoomSchedulesHydrated: vi.fn(),
 }));
@@ -54,13 +33,8 @@ vi.mock("@/lib/query-client", () => ({
   getQueryClient: vi.fn(),
 }));
 
-vi.mock("@/stores/plan-map-directions-epoch-store", () => ({
-  usePlanMapDirectionsEpochStore: {
-    getState: () => ({ bumpForDirections: mocks.bumpForDirections }),
-  },
-}));
-
 let createScheduleItemAtPlanIndex: typeof import("@/lib/plan/scheduleItemPlaces").createScheduleItemAtPlanIndex;
+let applyCreatedScheduleItemToPlanPlaces: typeof import("@/lib/plan/scheduleItemPlaces").applyCreatedScheduleItemToPlanPlaces;
 let syncAfterCrossScheduleItemMove: typeof import("@/lib/plan/scheduleItemPlaces").syncAfterCrossScheduleItemMove;
 
 beforeAll(async () => {
@@ -69,8 +43,11 @@ beforeAll(async () => {
   process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI = "http://localhost/callback";
   process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY = "test-maps-key";
 
-  ({ createScheduleItemAtPlanIndex, syncAfterCrossScheduleItemMove } =
-    await import("@/lib/plan/scheduleItemPlaces"));
+  ({
+    createScheduleItemAtPlanIndex,
+    applyCreatedScheduleItemToPlanPlaces,
+    syncAfterCrossScheduleItemMove,
+  } = await import("@/lib/plan/scheduleItemPlaces"));
 });
 
 const scheduleItem = (itemId: number, orderIndex: number): RoomScheduleItem => ({
@@ -91,122 +68,133 @@ describe("createScheduleItemAtPlanIndex", () => {
       name: "Created place",
       formattedAddress: "Address",
     });
-    mocks.invalidateScheduleItemRouteForSources.mockResolvedValue(undefined);
-    mocks.invalidateScheduleItemRoutesAfterItemCreated.mockResolvedValue(
-      undefined,
-    );
   });
 
-  it("invalidates the route IDs returned by the create response", async () => {
-    const queryClient = new QueryClient();
-    const response: CreateScheduleItemResponse = {
-      createdItem: scheduleItem(3, 1),
-      updatedItems: [scheduleItem(2, 2)],
-      affectedRouteItemIds: [777],
-    };
+  const response: CreateScheduleItemResponse = {
+    createdItem: scheduleItem(3, 1),
+    updatedItems: [scheduleItem(2, 2)],
+    affectedRouteItemIds: [777],
+  };
+  const places = [
+    { id: "item-1", itemId: 1, googlePlaceId: "place-1", title: "One" },
+    { id: "item-2", itemId: 2, googlePlaceId: "place-2", title: "Two" },
+  ];
+
+  it("sends the dropped position as the server order index", async () => {
     mocks.createScheduleItem.mockResolvedValue(response);
-    const places = [
-      { id: "item-1", itemId: 1, googlePlaceId: "place-1", title: "One" },
-      { id: "item-2", itemId: 2, googlePlaceId: "place-2", title: "Two" },
-    ];
-    queryClient.setQueryData(scheduleItemsQueryKey("room-1", 10), places);
 
-    await createScheduleItemAtPlanIndex(queryClient, {
-      roomId: "room-1",
-      scheduleId: 10,
-      places,
-      insertIndex: 1,
+    await expect(
+      createScheduleItemAtPlanIndex({
+        roomId: " room-1 ",
+        scheduleId: 10,
+        places,
+        insertIndex: 5,
+        googlePlaceId: "place-3",
+      }),
+    ).resolves.toBe(response);
+
+    expect(mocks.createScheduleItem).toHaveBeenCalledWith("room-1", 10, {
       googlePlaceId: "place-3",
+      orderIndex: 2,
     });
+  });
+
+  it("merges the create response into the day list", async () => {
+    const queryClient = new QueryClient();
+    const key = scheduleItemsQueryKey("room-1", 10);
+    queryClient.setQueryData(key, places);
+
+    await applyCreatedScheduleItemToPlanPlaces(queryClient, "room-1", 10, response);
 
     expect(
-      mocks.invalidateScheduleItemRoutesAfterItemCreated,
-    ).not.toHaveBeenCalled();
-    expect(mocks.invalidateScheduleItemRouteForSources).toHaveBeenCalledWith(
-      queryClient,
-      "room-1",
-      10,
-      [777],
-    );
-    expect(mocks.bumpPlanMapRouteSegments).toHaveBeenCalledWith(
-      "room-1",
-      10,
-      [777],
-    );
+      queryClient.getQueryData<PlanPlace[]>(key)?.map((place) => place.itemId),
+    ).toEqual([1, 3, 2]);
   });
 
-  it("returns the created item when post-create route synchronization fails", async () => {
+  it("merges a placeholder place when the created place preview fails", async () => {
     const queryClient = new QueryClient();
-    const response: CreateScheduleItemResponse = {
-      createdItem: scheduleItem(3, 1),
-      updatedItems: [scheduleItem(2, 2)],
-      affectedRouteItemIds: [777],
-    };
-    mocks.createScheduleItem.mockResolvedValue(response);
-    mocks.invalidateScheduleItemRouteForSources.mockRejectedValueOnce(
-      new Error("route sync failed"),
-    );
-    const places = [
-      { id: "item-1", itemId: 1, googlePlaceId: "place-1", title: "One" },
-      { id: "item-2", itemId: 2, googlePlaceId: "place-2", title: "Two" },
-    ];
     const key = scheduleItemsQueryKey("room-1", 10);
+    mocks.fetchPlacePreview.mockRejectedValueOnce(new Error("preview 429"));
     queryClient.setQueryData(key, places);
 
     await expect(
-      createScheduleItemAtPlanIndex(queryClient, {
-        roomId: "room-1",
-        scheduleId: 10,
-        places,
-        insertIndex: 1,
-        googlePlaceId: "place-3",
-      }),
-    ).resolves.toEqual(response.createdItem);
+      applyCreatedScheduleItemToPlanPlaces(queryClient, "room-1", 10, response),
+    ).resolves.toBeUndefined();
 
-    expect(queryClient.getQueryState(key)?.isInvalidated).toBe(true);
-    expect(
-      mocks.invalidateScheduleItemRouteForWholeSchedule,
-    ).toHaveBeenCalledWith(queryClient, "room-1", 10);
-    expect(mocks.bumpForDirections).toHaveBeenCalledWith("room-1");
+    expect(queryClient.getQueryData<PlanPlace[]>(key)?.[1]).toMatchObject({
+      itemId: 3,
+      title: "장소 정보를 불러올 수 없음",
+    });
   });
+});
 
-  it("maps server-provided move route IDs to the refreshed schedules", async () => {
-    const queryClient = new QueryClient();
-    mocks.getScheduleItems.mockResolvedValue([]);
-    mocks.readOrderedItemIdsFromScheduleItemsCache.mockImplementation(
-      (_queryClient: QueryClient, _roomId: string, scheduleId: number) =>
-        scheduleId === 10 ? [11] : [20, 21],
-    );
-
-    await syncAfterCrossScheduleItemMove(
-      queryClient,
-      "room-1",
-      10,
-      20,
-      20,
-      [11, 21, 20],
-    );
-
-    expect(mocks.invalidateScheduleItemRoutesAfterDelete).not.toHaveBeenCalled();
-    expect(
-      mocks.invalidateScheduleItemRoutesAfterItemCreated,
-    ).not.toHaveBeenCalled();
-    expect(mocks.invalidateScheduleItemRouteForSources).toHaveBeenNthCalledWith(
-      1,
-      queryClient,
-      "room-1",
-      10,
-      [11],
-    );
-    expect(mocks.invalidateScheduleItemRouteForSources).toHaveBeenNthCalledWith(
-      2,
-      queryClient,
-      "room-1",
-      20,
-      [21, 20],
-    );
-    expect(
-      mocks.invalidateScheduleItemRouteForWholeSchedule,
-    ).not.toHaveBeenCalled();
+describe("cross-schedule refresh sequencing", () => {
+  it("waits for source refresh before target", async () => {
+    const client = new QueryClient();
+    let finishSource!: () => void;
+    const source = new Promise<void>((resolve) => { finishSource = resolve; });
+    const invalidate = vi.spyOn(client, "invalidateQueries").mockReturnValueOnce(source).mockResolvedValue(undefined);
+    const syncing = syncAfterCrossScheduleItemMove(client, "room-1", 10, 20);
+    expect(invalidate).toHaveBeenCalledTimes(1);
+    expect(invalidate.mock.calls[0][0]?.queryKey).toEqual(scheduleItemsQueryKey("room-1", 10));
+    finishSource();
+    await syncing;
+    expect(invalidate.mock.calls[1][0]?.queryKey).toEqual(scheduleItemsQueryKey("room-1", 20));
   });
+  it("refreshes identical source and target once", async () => {
+    const client = new QueryClient();
+    const invalidate = vi.spyOn(client, "invalidateQueries").mockResolvedValue(undefined);
+    await syncAfterCrossScheduleItemMove(client, "room-1", 10, 10);
+    expect(invalidate).toHaveBeenCalledTimes(1);
+  });
+  it("does not refresh target when source refresh fails", async () => {
+    const client = new QueryClient();
+    const invalidate = vi.spyOn(client, "invalidateQueries").mockRejectedValue(new Error("source failed"));
+    await expect(syncAfterCrossScheduleItemMove(client, "room-1", 10, 20)).rejects.toThrow("source failed");
+    expect(invalidate).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("reorder preserves user times", () => {
+  it.each([
+    [null, null], ["12:45", null], ["23:00", "01:00"], ["00:00", "00:00"],
+  ])("keeps %s / %s and never sends a time PATCH", async (startTime, endTime) => {
+    vi.clearAllMocks();
+    const { syncPlanPlacesAfterReorderSuccess } = await import("./scheduleItemPlaces");
+    const client = new QueryClient();
+    const key = scheduleItemsQueryKey("room", 10);
+    client.setQueryData(key, [1, 2].map((itemId) => ({ id: `item-${itemId}`, itemId, title: "Place" })));
+    const items = [
+      { ...scheduleItem(2, 0), startTime, endTime },
+      { ...scheduleItem(1, 1), startTime: null, endTime: null },
+    ];
+    await syncPlanPlacesAfterReorderSuccess(client, "room", 10, items);
+    expect(mocks.updateScheduleItem).not.toHaveBeenCalled();
+    expect(client.getQueryData<Array<{ itemId: number; startTime?: string; endTime?: string }>>(key)?.map(p =>
+      [p.itemId, p.startTime ?? null, p.endTime ?? null])).toEqual([[2, startTime, endTime], [1, null, null]]);
+    client.clear();
+  });
+});
+
+
+it("cross-day move refresh preserves unset and partial times without a time PATCH", async () => {
+  vi.clearAllMocks();
+  const client = new QueryClient();
+  client.setQueryData(scheduleItemsQueryKey("room", 10), [{ id: "item-1", itemId: 1, title: "One" }]);
+  client.setQueryData(scheduleItemsQueryKey("room", 20), [{ id: "item-2", itemId: 2, title: "Two" }]);
+  mocks.getScheduleItems.mockImplementation(async (_room, scheduleId) => scheduleId === 10
+    ? [scheduleItem(1, 0)]
+    : [{ ...scheduleItem(2, 0), scheduleId: 20, startTime: "12:45", endTime: null }]);
+  const { schedulePlanPlacesQueryOptions } = await import("./scheduleItemPlaces");
+  const unsubscribe = [10, 20].map((scheduleId) =>
+    new QueryObserver(client, schedulePlanPlacesQueryOptions(client, "room", scheduleId))
+      .subscribe(() => {}),
+  );
+  await syncAfterCrossScheduleItemMove(client, "room", 10, 20);
+  expect(mocks.updateScheduleItem).not.toHaveBeenCalled();
+  expect(client.getQueryData<Array<{ startTime?: string; endTime?: string }>>(scheduleItemsQueryKey("room", 10))?.[0]).not.toHaveProperty("startTime");
+  expect(client.getQueryData<Array<{ startTime?: string; endTime?: string }>>(scheduleItemsQueryKey("room", 20))?.[0]).toMatchObject({ startTime: "12:45" });
+  expect(client.getQueryData<Array<{ startTime?: string; endTime?: string }>>(scheduleItemsQueryKey("room", 20))?.[0]).not.toHaveProperty("endTime");
+  unsubscribe.forEach((stop) => stop());
+  client.clear();
 });
diff --git a/src/lib/plan/scheduleItemPlaces.test.ts b/src/lib/plan/scheduleItemPlaces.test.ts
index aff46a07..35376647 100644
--- a/src/lib/plan/scheduleItemPlaces.test.ts
+++ b/src/lib/plan/scheduleItemPlaces.test.ts
@@ -166,20 +166,4 @@ describe("end time cache and reorder", () => {
     });
     expect(next?.[0]).toMatchObject({ startTime: "00:00", endTime: "23:59" });
   });
-  it("chains reorder while retaining overnight duration, zero and unset ends", async () => {
-    const { buildChainedStartPatchesForReorder } =
-      await import("./scheduleItemPlaces");
-    const items = [
-      { ...scheduleItem(1, 0), startTime: "23:00", endTime: "01:00" },
-      { ...scheduleItem(2, 1), startTime: "09:00", endTime: "09:00" },
-      { ...scheduleItem(3, 2), startTime: null, endTime: null },
-      { ...scheduleItem(4, 3), startTime: "00:00", endTime: "23:59" },
-    ];
-    expect(buildChainedStartPatchesForReorder(items)).toEqual([
-      { itemId: 1, startTime: "00:00", endTime: "02:00" },
-      { itemId: 2, startTime: "02:00", endTime: "02:00" },
-      { itemId: 3, startTime: "02:00", endTime: null },
-      { itemId: 4, startTime: "02:00", endTime: "01:59" },
-    ]);
-  });
 });
diff --git a/src/lib/plan/scheduleItemPlaces.ts b/src/lib/plan/scheduleItemPlaces.ts
index 76d6ad4e..b087ce82 100644
--- a/src/lib/plan/scheduleItemPlaces.ts
+++ b/src/lib/plan/scheduleItemPlaces.ts
@@ -1,42 +1,27 @@
-import type { QueryClient } from "@tanstack/react-query";
-import { toast } from "sonner";
+import { queryOptions, type QueryClient } from "@tanstack/react-query";
 
-import { awaitRoomSchedulesHydrated } from "@/lib/rooms";
+import { awaitRoomSchedulesHydrated, waitForRoomSchedulesHydration } from "@/lib/rooms";
 
 import {
   createScheduleItem,
   getScheduleItems,
-  updateScheduleItem,
   type CreateScheduleItemResponse,
   type RoomScheduleItem,
 } from "@/lib/api/rooms/schedule-items";
+import {
+  fetchAndSeedPlacePreviews,
+  reconcileSchedulePlanPlacesAfterPreviewSeed,
+} from "@/lib/places/place-batch-cache";
 import { fetchPlacePreview } from "@/lib/places/place-queries";
 import {
   buildPlanPlacesFromItemsWithPreviewEnrichment,
+  PLAN_PLACE_PREVIEW_ERROR_TITLE,
   planPlacesNeedPreviewEnrich,
   resolveScheduleItemsFromCacheOrHydrate,
 } from "@/lib/plan/schedule-bulk-hydration";
 import { getQueryClient } from "@/lib/query-client";
-import {
-  bumpPlanMapRouteSegments,
-  invalidateScheduleItemRouteForSources,
-  invalidateScheduleItemRouteForWholeSchedule,
-  invalidateScheduleItemRoutesAfterDelete,
-  invalidateScheduleItemRoutesAfterItemCreated,
-  invalidateScheduleItemRoutesAfterReorder,
-  readOrderedItemIdsFromScheduleItemsCache,
-  removeRouteQueriesForDeletedItemSource,
-} from "@/lib/plan/scheduleStompRouteScope";
 import { scheduleItemsQueryKey } from "@/lib/query-keys";
-import {
-  addMinutesToHm,
-  computeDurationMinutesFromRange,
-  hmToMinutesSinceMidnight,
-  minutesSinceMidnightToHm,
-  normalizeStartTimeToHm,
-} from "@/lib/plan/scheduleTime";
 import type { PlanPlace } from "@/lib/plan/types";
-import { usePlanMapDirectionsEpochStore } from "@/stores/plan-map-directions-epoch-store";
 
 /** `orderIndex` 기준 정렬(비변형) */
 export function sortRoomScheduleItemsByOrder(
@@ -182,75 +167,36 @@ export function removeScheduleItemFromPlanPlacesCache(
   roomId: string,
   scheduleId: number,
   deletedItemId: number,
-): boolean {
-  const rid = roomId.trim();
-  if (!rid.length) return false;
-  const key = scheduleItemsQueryKey(rid, scheduleId);
-  const prev = queryClient.getQueryData<PlanPlace[]>(key);
-  if (!prev?.length) return false;
-  const next = prev.filter((p) => p.itemId !== deletedItemId);
-  if (next.length === prev.length) return false;
-  queryClient.setQueryData(key, next);
-  return true;
-}
-
-/** 본인 DELETE mutation 직후 — 캐시 패치·삭제 구간 route·쿼리 정리 */
-export async function applyScheduleItemDeletedOnClient(
-  queryClient: QueryClient,
-  roomId: string,
-  scheduleId: number,
-  deletedItemId: number,
-): Promise<void> {
-  const rid = roomId.trim();
-  if (!rid.length) return;
-
-  const oldIds = readOrderedItemIdsFromScheduleItemsCache(
-    queryClient,
-    rid,
-    scheduleId,
-  );
-  removeScheduleItemFromPlanPlacesCache(
-    queryClient,
-    rid,
-    scheduleId,
-    deletedItemId,
-  );
-  removeRouteQueriesForDeletedItemSource(
-    queryClient,
-    rid,
-    scheduleId,
-    deletedItemId,
-  );
-  await invalidateScheduleItemRoutesAfterDelete(
-    queryClient,
-    rid,
-    scheduleId,
-    deletedItemId,
-    oldIds,
+): void {
+  queryClient.setQueryData<PlanPlace[]>(
+    scheduleItemsQueryKey(roomId.trim(), scheduleId),
+    (old) => old?.filter((p) => p.itemId !== deletedItemId),
   );
 }
 
-/** STOMP·뮤테이션 동기화: 해당 일차만 `GET …/items`로 `schedule-items` 캐시를 갱신합니다. */
-export async function refetchSchedulePlanPlacesIntoCache(
+/**
+ * STOMP·뮤테이션 동기화: 그 일차 장소 목록을 서버에서 다시 받게 합니다. 보는 화면이 있으면 바로 받고,
+ * 없으면 다시 받을 목록으로 표시해 두었다가 그 화면에 들어갈 때 받습니다.
+ * 같은 일차를 받는 중이면 그 조회는 이 변경 전에 보낸 요청이라 취소하고 새로 받습니다(늦게 온 옛 응답은 버려짐).
+ * 다시 받지 못하면 throw합니다.
+ */
+export async function invalidateSchedulePlanPlaces(
   queryClient: QueryClient,
   roomId: string,
   scheduleId: number,
-): Promise<PlanPlace[]> {
-  const rid = roomId.trim();
-  if (!rid.length) return [];
-  const items = await getScheduleItems(rid, scheduleId);
-  await mergeOrRefetchSchedulePlanPlacesFromItems(
-    queryClient,
-    rid,
-    scheduleId,
-    items,
-  );
-  return readSchedulePlanPlacesFromCache(queryClient, rid, scheduleId);
+): Promise<void> {
+  const queryKey = scheduleItemsQueryKey(roomId.trim(), scheduleId);
+  // 목록이 아직 없으면 TanStack은 진행 중인 첫 조회를 취소하지 않고 합류만 한다
+  const state = queryClient.getQueryState(queryKey);
+  if (state?.data === undefined && state?.fetchStatus === "fetching") {
+    await queryClient.cancelQueries({ queryKey, exact: true });
+  }
+  await queryClient.invalidateQueries({ queryKey, exact: true }, { throwOnError: true });
 }
 
 /**
- * STOMP 리오더·`reorderScheduleItem` 응답 등 공통 경로: `RoomScheduleItem[]`로
- * 캐시된 PlanPlace를 갱신하고, 머지 불가 시에만 전체 enrich를 다시 가져옵니다.
+ * `reorderScheduleItem` 응답(`RoomScheduleItem[]`)으로 캐시된 PlanPlace를 갱신하고,
+ * 머지 불가 시에만 전체 enrich를 다시 가져옵니다.
  */
 export async function mergeOrRefetchSchedulePlanPlacesFromItems(
   queryClient: QueryClient,
@@ -258,116 +204,33 @@ export async function mergeOrRefetchSchedulePlanPlacesFromItems(
   scheduleId: number,
   items: RoomScheduleItem[],
 ): Promise<void> {
-  const rid = roomId.trim();
-  if (!rid.length) return;
-  const key = scheduleItemsQueryKey(rid, scheduleId);
-  const prev = queryClient.getQueryData<PlanPlace[]>(key);
-  const merged = await mergeScheduleItemsIntoPlanPlaces(prev, items);
-  if (merged) {
-    queryClient.setQueryData(key, merged);
-    return;
-  }
-  const places = await buildPlanPlacesFromScheduleItems(items);
-  queryClient.setQueryData(key, places);
+  const key = scheduleItemsQueryKey(roomId.trim(), scheduleId);
+  queryClient.setQueryData(
+    key,
+    (await mergeScheduleItemsIntoPlanPlaces(
+      queryClient.getQueryData<PlanPlace[]>(key),
+      items,
+    )) ?? (await buildPlanPlacesFromScheduleItems(items)),
+  );
 }
 
-/** cross-day item 이동 후 source/target 일차 items·route 캐시 동기화 */
+/**
+ * 다른 일차로 옮긴 뒤 두 일차 장소 목록을 다시 받습니다. 경로는 도착 항목까지 key에 있어
+ * 순서가 바뀐 구간은 새 key로 받으므로 따로 무효화하지 않습니다.
+ */
 export async function syncAfterCrossScheduleItemMove(
   queryClient: QueryClient,
   roomId: string,
   sourceScheduleId: number,
   targetScheduleId: number,
-  movedItemId?: number,
-  affectedRouteItemIds?: number[] | null,
 ): Promise<void> {
   const rid = roomId.trim();
   if (!rid.length) return;
 
-  const scheduleIds =
-    sourceScheduleId === targetScheduleId
-      ? [sourceScheduleId]
-      : [sourceScheduleId, targetScheduleId];
-
-  const oldSourceOrderedIds =
-    movedItemId != null
-      ? readOrderedItemIdsFromScheduleItemsCache(
-          queryClient,
-          rid,
-          sourceScheduleId,
-        )
-      : null;
-
-  for (const sid of scheduleIds) {
-    const items = await getScheduleItems(rid, sid);
-    await mergeOrRefetchSchedulePlanPlacesFromItems(
-      queryClient,
-      rid,
-      sid,
-      items,
-    );
-  }
-
-  if (affectedRouteItemIds !== undefined) {
-    if (affectedRouteItemIds === null) {
-      for (const sid of scheduleIds) {
-        await invalidateScheduleItemRouteForWholeSchedule(queryClient, rid, sid);
-      }
-      usePlanMapDirectionsEpochStore.getState().bumpForDirections(rid);
-      return;
-    }
-
-    const remaining = new Set(affectedRouteItemIds);
-    for (const sid of scheduleIds) {
-      const orderedIds = readOrderedItemIdsFromScheduleItemsCache(
-        queryClient,
-        rid,
-        sid,
-      );
-      const scheduleItemIds = new Set(orderedIds ?? []);
-      const sources = affectedRouteItemIds.filter(
-        (id) => remaining.has(id) && scheduleItemIds.has(id),
-      );
-      for (const id of sources) remaining.delete(id);
-      await invalidateScheduleItemRouteForSources(
-        queryClient,
-        rid,
-        sid,
-        sources,
-      );
-      bumpPlanMapRouteSegments(rid, sid, sources);
-    }
-
-    if (remaining.size > 0) {
-      for (const sid of scheduleIds) {
-        await invalidateScheduleItemRouteForWholeSchedule(queryClient, rid, sid);
-      }
-      usePlanMapDirectionsEpochStore.getState().bumpForDirections(rid);
-    }
-    return;
+  await invalidateSchedulePlanPlaces(queryClient, rid, sourceScheduleId);
+  if (targetScheduleId !== sourceScheduleId) {
+    await invalidateSchedulePlanPlaces(queryClient, rid, targetScheduleId);
   }
-
-  if (movedItemId != null) {
-    await invalidateScheduleItemRoutesAfterDelete(
-      queryClient,
-      rid,
-      sourceScheduleId,
-      movedItemId,
-      oldSourceOrderedIds,
-    );
-    await invalidateScheduleItemRoutesAfterItemCreated(
-      queryClient,
-      rid,
-      targetScheduleId,
-      movedItemId,
-    );
-    return;
-  }
-
-  for (const sid of scheduleIds) {
-    await invalidateScheduleItemRouteForWholeSchedule(queryClient, rid, sid);
-  }
-
-  usePlanMapDirectionsEpochStore.getState().bumpForDirections(rid);
 }
 
 /** 캐시에 preview 에러 title이 있으면 enrich 후 `schedule-items`를 갱신합니다. */
@@ -379,10 +242,22 @@ export async function ensureSchedulePlanPlacesEnriched(
   const rid = roomId.trim();
   if (!rid.length) return [];
   const key = scheduleItemsQueryKey(rid, scheduleId);
+  // 일정 불러오기가 진행 중이면 그 결과를 쓴다 — 방금 batch로 받은 장소를 일차마다 다시 받지 않는다
+  const waitedForHydration = await waitForRoomSchedulesHydration(queryClient, rid);
   const cached = queryClient.getQueryData<PlanPlace[]>(key);
-  if (cached != null && !planPlacesNeedPreviewEnrich(cached)) {
+  if (cached != null && (waitedForHydration || !planPlacesNeedPreviewEnrich(cached))) {
     return cached;
   }
+  if (cached != null) {
+    // 지금 일차 목록(삭제·수정·순서가 반영됨)은 그대로 두고 자리표시자 장소의 미리보기만 채운다 —
+    // room-schedules의 items는 장소 단위 변경을 따라가지 않아, 거기서 다시 만들면 지운 장소가 되살아난다
+    const placeholderIds = cached
+      .filter((place) => place.title === PLAN_PLACE_PREVIEW_ERROR_TITLE)
+      .flatMap((place) => (place.googlePlaceId ? [place.googlePlaceId] : []));
+    await fetchAndSeedPlacePreviews(placeholderIds, queryClient);
+    reconcileSchedulePlanPlacesAfterPreviewSeed(queryClient, rid);
+    return queryClient.getQueryData<PlanPlace[]>(key) ?? cached;
+  }
 
   const items = await resolveScheduleItemsFromCacheOrHydrate(
     queryClient,
@@ -397,20 +272,58 @@ export async function ensureSchedulePlanPlacesEnriched(
   return places;
 }
 
-/** hydrate가 채운 `schedule-items` 캐시를 읽습니다 (`[]` 포함). */
-export function readSchedulePlanPlacesFromCache(
+/**
+ * 그 일차 항목을 서버에서 받아 캐시된 장소의 이름·주소와 합칩니다. 캐시는 TanStack이 씁니다.
+ * 같은 일차 조회가 겹치면 TanStack이 옛 조회를 취소하고 그 응답을 버립니다.
+ */
+async function fetchSchedulePlanPlaces(
   queryClient: QueryClient,
   roomId: string,
   scheduleId: number,
-): PlanPlace[] {
-  const rid = roomId.trim();
-  if (!rid.length) return [];
+  signal: AbortSignal,
+): Promise<PlanPlace[]> {
+  const key = scheduleItemsQueryKey(roomId, scheduleId);
+  const state = queryClient.getQueryState<PlanPlace[]>(key);
+  // 미리보기 오류의 재진입 복구만 캐시 목록을 유지한다. 변경 알림의 무효화는 HTTP로 확인한다.
+  if (!state?.isInvalidated && state?.data && planPlacesNeedPreviewEnrich(state.data)) {
+    return ensureSchedulePlanPlacesEnriched(queryClient, roomId, scheduleId);
+  }
+  const items = await getScheduleItems(roomId, scheduleId, signal);
+  const prev = queryClient.getQueryData<PlanPlace[]>(
+    scheduleItemsQueryKey(roomId, scheduleId),
+  );
   return (
-    queryClient.getQueryData<PlanPlace[]>(scheduleItemsQueryKey(rid, scheduleId)) ??
-    []
+    (await mergeScheduleItemsIntoPlanPlaces(prev, items)) ??
+    buildPlanPlacesFromItemsWithPreviewEnrichment(queryClient, items)
   );
 }
 
+/**
+ * `schedule-items` 조회 옵션. 일차 장소 목록을 읽는 곳(일정 목록·지도)은 모두 이 옵션을 쓴다 —
+ * 무효화로 다시 받을 때 TanStack은 마지막에 옵션을 넘긴 구독자의 queryFn을 쓰므로, 한 곳이라도
+ * 캐시만 읽는 queryFn을 넘기면 서버를 부르지 않게 된다.
+ */
+export function schedulePlanPlacesQueryOptions(
+  queryClient: QueryClient,
+  roomId: string,
+  scheduleId: number | null,
+) {
+  const rid = roomId.trim();
+  return queryOptions({
+    queryKey: scheduleItemsQueryKey(rid || null, scheduleId),
+    queryFn: async ({ signal }): Promise<PlanPlace[]> =>
+      rid.length > 0 && scheduleId !== null
+        ? fetchSchedulePlanPlaces(queryClient, rid, scheduleId, signal)
+        : [],
+    // 본인 저장 응답과 STOMP 무효화로만 갱신한다. 화면 밖에서 무효화된 목록은 다시 마운트될 때 받는다
+    staleTime: Infinity,
+    refetchOnMount: (query) => {
+      const data = query.state.data;
+      return data && planPlacesNeedPreviewEnrich(data) ? "always" : true;
+    },
+  });
+}
+
 /** `schedule-items` 캐시가 있으면 반환, 없으면 room hydrate 후 재시도·최후에만 enrich. */
 export async function fetchSchedulePlanPlacesFromCacheOrApi(
   roomId: string,
@@ -435,136 +348,22 @@ export async function fetchSchedulePlanPlacesFromCacheOrApi(
   return fetchScheduleItemsAsPlanPlaces(rid, scheduleId);
 }
 
-/** 새 항목 POST 시 `startTime` — `HH:mm` (로컬 슬롯: 08:00부터 번호당 1시간, 최대 22:00) */
-export function slotStartTimeHm(itemIndex: number): string {
-  const hour = Math.min(8 + itemIndex, 22);
-  return `${String(hour).padStart(2, "0")}:00`;
-}
-
-/** 일차 항목들 중 유효한 시작 시각이 가장 이른 `HH:mm` — 리오더 시 1번 칸 기준이 뒷줄로 밀려 올라가지 않도록 앵커로 씁니다. */
-function earliestAnchoredHmFromScheduleItems(items: RoomScheduleItem[]): string {
-  let minM: number | null = null;
-  for (const it of items) {
-    const hm = normalizeStartTimeToHm(it.startTime ?? "");
-    if (!hm) continue;
-    const m = hmToMinutesSinceMidnight(hm);
-    if (m === null) continue;
-    if (minM === null || m < minM) minM = m;
-  }
-  if (minM === null) return slotStartTimeHm(0);
-  return minutesSinceMidnightToHm(minM);
-}
-
-/**
- * 기존 순서 변경 동작을 유지하되, 시각 범위로 계산한 길이만큼 종료도 함께 옮깁니다.
- * 가장 이른 시작을 앵커로 사용하며 미정 종료는 null로 보존합니다.
- */
-export function buildChainedStartPatchesForReorder(
-  items: RoomScheduleItem[],
-): Array<{ itemId: number; startTime: string; endTime: string | null }> {
-  const sorted = sortRoomScheduleItemsByOrder(items);
-  if (sorted.length === 0) return [];
-  let targetHm = earliestAnchoredHmFromScheduleItems(sorted);
-  const patches: Array<{
-    itemId: number;
-    startTime: string;
-    endTime: string | null;
-  }> = [];
-  for (const item of sorted) {
-    const duration = computeDurationMinutesFromRange(
-      item.startTime ?? "",
-      item.endTime ?? "",
-    );
-    const endTime = duration === null ? null : addMinutesToHm(targetHm, duration);
-    if (normalizeStartTimeToHm(item.startTime ?? "") !== targetHm) {
-      patches.push({ itemId: item.itemId, startTime: targetHm, endTime });
-    }
-    targetHm = endTime ?? targetHm;
-  }
-  return patches;
-}
-
-/**
- * 리오더 API 성공 직후: 순서를 캐시에 반영한 뒤, 필요하면 시작 시각 연쇄 PATCH 후 최종 머지.
- */
+/** 순서 응답을 반영합니다. 경로 캐시는 출발·도착 항목 키로 구분합니다. */
 export async function syncPlanPlacesAfterReorderSuccess(
   queryClient: QueryClient,
   roomId: string,
   scheduleId: number,
   items: RoomScheduleItem[],
-  movedItemId: number,
 ): Promise<void> {
   const rid = roomId.trim();
   if (!rid.length) return;
 
-  const oldOrderedIds = readOrderedItemIdsFromScheduleItemsCache(
-    queryClient,
-    rid,
-    scheduleId,
-  );
-
   await mergeOrRefetchSchedulePlanPlacesFromItems(
     queryClient,
     roomId,
     scheduleId,
     items,
   );
-
-  const patches = buildChainedStartPatchesForReorder(items);
-  if (patches.length === 0) {
-    await invalidateScheduleItemRoutesAfterReorder(
-      queryClient,
-      rid,
-      scheduleId,
-      movedItemId,
-      oldOrderedIds,
-      items,
-    );
-    return;
-  }
-
-  const snapshot = sortRoomScheduleItemsByOrder(items);
-  const byItemId = new Map(snapshot.map((it) => [it.itemId, it]));
-
-  try {
-    for (const p of patches) {
-      const updated = await updateScheduleItem(rid, scheduleId, p.itemId, {
-        startTime: p.startTime,
-        endTime: p.endTime,
-      });
-      byItemId.set(updated.itemId, updated);
-    }
-  } catch {
-    toast.error("순서에 맞게 시작 시간을 바꾸지 못했어요.");
-    try {
-      const fresh = await getScheduleItems(rid, scheduleId);
-      await mergeOrRefetchSchedulePlanPlacesFromItems(
-        queryClient,
-        roomId,
-        scheduleId,
-        fresh,
-      );
-    } catch {
-      //
-    }
-    return;
-  }
-
-  const finalItems = sortRoomScheduleItemsByOrder([...byItemId.values()]);
-  await mergeOrRefetchSchedulePlanPlacesFromItems(
-    queryClient,
-    roomId,
-    scheduleId,
-    finalItems,
-  );
-  await invalidateScheduleItemRoutesAfterReorder(
-    queryClient,
-    rid,
-    scheduleId,
-    movedItemId,
-    oldOrderedIds,
-    finalItems,
-  );
 }
 
 /** PATCH 응답 한 건으로 로컬 PlanPlace 캐시만 갱신(같은 목록에 itemId가 있을 때). */
@@ -676,77 +475,38 @@ export function mergeCreatedScheduleItemDelta(
   return next;
 }
 
-/** 서버가 지정 위치 삽입과 이동수단 추천을 함께 처리하고 델타를 반환합니다. */
-export async function createScheduleItemAtPlanIndex(
-  queryClient: QueryClient,
-  args: {
-    roomId: string;
-    scheduleId: number;
-    places: PlanPlace[];
-    insertIndex: number;
-    googlePlaceId: string;
-  },
-): Promise<RoomScheduleItem> {
+/** 놓은 자리(`insertIndex`)를 서버 `orderIndex`로 바꿔 장소를 추가합니다. 서버가 이동수단 추천까지 처리하고 델타를 돌려줍니다. */
+export function createScheduleItemAtPlanIndex(args: {
+  roomId: string;
+  scheduleId: number;
+  places: PlanPlace[];
+  insertIndex: number;
+  googlePlaceId: string;
+}): Promise<CreateScheduleItemResponse> {
   const rid = args.roomId.trim();
   if (!rid.length) {
     throw new Error("createScheduleItemAtPlanIndex: empty roomId");
   }
-
-  const listLengthAfterCreate = args.places.length + 1;
-  const targetIndex = resolveInsertTargetIndex(
-    args.insertIndex,
-    listLengthAfterCreate,
-  );
-  const response = await createScheduleItem(rid, args.scheduleId, {
+  return createScheduleItem(rid, args.scheduleId, {
     googlePlaceId: args.googlePlaceId,
-    orderIndex: targetIndex,
+    orderIndex: resolveInsertTargetIndex(args.insertIndex, args.places.length + 1),
   });
+}
 
-  const key = scheduleItemsQueryKey(rid, args.scheduleId);
-  try {
-    const prev = queryClient.getQueryData<PlanPlace[]>(key);
-    const createdPlace = await planPlaceFromScheduleItem(response.createdItem);
-    const merged = mergeCreatedScheduleItemDelta(prev, createdPlace, response);
-    if (merged) {
-      queryClient.setQueryData(key, merged);
-    } else {
-      const fresh = await getScheduleItems(rid, args.scheduleId);
-      await mergeOrRefetchSchedulePlanPlacesFromItems(
-        queryClient,
-        rid,
-        args.scheduleId,
-        fresh,
-      );
-    }
-
-    await invalidateScheduleItemRouteForSources(
-      queryClient,
-      rid,
-      args.scheduleId,
-      response.affectedRouteItemIds,
-    );
-    bumpPlanMapRouteSegments(
-      rid,
-      args.scheduleId,
-      response.affectedRouteItemIds,
-    );
-  } catch {
-    await Promise.allSettled([
-      queryClient.invalidateQueries({
-        queryKey: key,
-        exact: true,
-        refetchType: "active",
-      }),
-      invalidateScheduleItemRouteForWholeSchedule(
-        queryClient,
-        rid,
-        args.scheduleId,
-      ),
-    ]);
-    usePlanMapDirectionsEpochStore.getState().bumpForDirections(rid);
-  }
-
-  return response.createdItem;
+/** 장소 추가 응답(추가된 항목·순서가 밀린 항목)을 일차 목록에 합칩니다. */
+export async function applyCreatedScheduleItemToPlanPlaces(
+  queryClient: QueryClient,
+  roomId: string,
+  scheduleId: number,
+  response: CreateScheduleItemResponse,
+): Promise<void> {
+  // 미리보기를 못 받으면 자리표시자 장소로 합친다(planPlaceFromScheduleItem은 던지지 않음)
+  const createdPlace = await planPlaceFromScheduleItem(response.createdItem);
+  // 미리보기를 기다리는 사이 다른 사람의 변경을 받았을 수 있어 그 뒤의 목록에 합친다
+  queryClient.setQueryData<PlanPlace[]>(
+    scheduleItemsQueryKey(roomId.trim(), scheduleId),
+    (old) => mergeCreatedScheduleItemDelta(old, createdPlace, response) ?? old,
+  );
 }
 
 /** 드래그를 `toIndex` 자리에 놓았을 때 PATCH에 넣을 `newOrderIndex`(0-based) */
diff --git a/src/lib/plan/scheduleItemRoutePersistedQuery.test.ts b/src/lib/plan/scheduleItemRoutePersistedQuery.test.ts
index b05a43f4..7171e8c4 100644
--- a/src/lib/plan/scheduleItemRoutePersistedQuery.test.ts
+++ b/src/lib/plan/scheduleItemRoutePersistedQuery.test.ts
@@ -11,6 +11,7 @@ vi.mock("@/lib/api/rooms/schedule-items", async (importOriginal) => {
 });
 
 let persistedScheduleItemRouteQueryOptions: typeof import("@/lib/plan/scheduleItemRoutePersistedQuery").persistedScheduleItemRouteQueryOptions;
+let loadScheduleItemRouteForMap: typeof import("@/lib/plan/scheduleItemRoutePersistedQuery").loadScheduleItemRouteForMap;
 let registerQueryClient: typeof import("@/lib/query-client").registerQueryClient;
 let getScheduleItemRouteMock: ReturnType<typeof vi.fn>;
 
@@ -20,7 +21,7 @@ beforeAll(async () => {
   process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI = "http://localhost/callback";
   process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY = "test-maps-key";
 
-  ({ persistedScheduleItemRouteQueryOptions } = await import(
+  ({ persistedScheduleItemRouteQueryOptions, loadScheduleItemRouteForMap } = await import(
     "@/lib/plan/scheduleItemRoutePersistedQuery"
   ));
   ({ registerQueryClient } = await import("@/lib/query-client"));
@@ -41,6 +42,7 @@ describe("persistedScheduleItemRouteQueryOptions", () => {
       "room-1",
       10,
       1,
+      2,
       "DRIVING",
       "",
       { segmentReady: true },
@@ -68,3 +70,55 @@ describe("persistedScheduleItemRouteQueryOptions", () => {
     expect(result).toEqual(freshRoute);
   });
 });
+
+describe("persistedScheduleItemRouteQueryOptions key", () => {
+  it("도착 항목이 key에 들어가 같은 출발 항목이라도 도착 항목마다 다른 캐시를 쓴다", () => {
+    const toB = persistedScheduleItemRouteQueryOptions("room-1", 10, 1, 2, "DRIVING", "", {
+      segmentReady: true,
+    });
+    const toC = persistedScheduleItemRouteQueryOptions("room-1", 10, 1, 3, "DRIVING", "", {
+      segmentReady: true,
+    });
+
+    expect(toB.queryKey).toEqual(["schedule-item-route", "room-1", 10, 1, 2, "DRIVING"]);
+    expect(toC.queryKey).not.toEqual(toB.queryKey);
+  });
+
+  it("도착 항목이 없으면 조회하지 않는다", () => {
+    const options = persistedScheduleItemRouteQueryOptions("room-1", 10, 1, null, "DRIVING", "", {
+      segmentReady: true,
+    });
+
+    expect(options.enabled).toBe(false);
+  });
+});
+
+describe("loadScheduleItemRouteForMap", () => {
+  const route = { travelMode: "TRANSIT", distanceMeters: 1700, durationSeconds: 1140 };
+  const routeOptions = () =>
+    persistedScheduleItemRouteQueryOptions("room-1", 10, 1, 2, "TRANSIT", "", {
+      segmentReady: true,
+    });
+
+  it("목록 요청이 방금 실패한 구간은 다시 보내지 않고 가진 값을 쓴다", async () => {
+    const queryClient = new QueryClient();
+    registerQueryClient(queryClient);
+    const options = routeOptions();
+    queryClient.setQueryData(options.queryKey, route);
+    await queryClient.invalidateQueries({ queryKey: options.queryKey, refetchType: "none" });
+    getScheduleItemRouteMock.mockRejectedValueOnce(new Error("이동 정보 조회 실패: 429"));
+    await queryClient.fetchQuery(options).catch(() => undefined);
+
+    await expect(loadScheduleItemRouteForMap(queryClient, options)).resolves.toEqual(route);
+    expect(getScheduleItemRouteMock).toHaveBeenCalledOnce();
+  });
+
+  it("받은 적 없는 구간은 경로 쿼리로 받는다", async () => {
+    const queryClient = new QueryClient();
+    registerQueryClient(queryClient);
+    getScheduleItemRouteMock.mockResolvedValueOnce(route);
+
+    await expect(loadScheduleItemRouteForMap(queryClient, routeOptions())).resolves.toEqual(route);
+    expect(getScheduleItemRouteMock).toHaveBeenCalledOnce();
+  });
+});
diff --git a/src/lib/plan/scheduleItemRoutePersistedQuery.ts b/src/lib/plan/scheduleItemRoutePersistedQuery.ts
index 1bfafba1..297902e8 100644
--- a/src/lib/plan/scheduleItemRoutePersistedQuery.ts
+++ b/src/lib/plan/scheduleItemRoutePersistedQuery.ts
@@ -1,5 +1,6 @@
 import type {
   OmitKeyof,
+  QueryClient,
   QueryKey,
   UseQueryOptions,
 } from "@tanstack/react-query";
@@ -14,7 +15,7 @@ type RouteCached = ScheduleItemRouteResponse | null;
 
 /**
  * — `segmentReady`: 네트워크 패치·sessionStorage 시드 허용(`routeQueryEnabled`). 쿼리 키는 이것과 무관하게
- *   `(room, schedule, 구간, 모드)`로 고정 — 일정 refetch 중 잠깐 false가 되어도 구간끼리 캐시를 공유하지 않음
+ *   `(room, schedule, 출발 항목, 도착 항목, 모드)`로 고정 — 일정 refetch 중 잠깐 false가 되어도 구간끼리 캐시를 공유하지 않음
  * — `networkEnabled` 생략 시 `segmentReady`와 동일; 지연 수단은 메뉴 열림 시만 `true`
  */
 export type PersistedScheduleRoutePersistFlags = {
@@ -24,12 +25,14 @@ export type PersistedScheduleRoutePersistFlags = {
   networkEnabled?: boolean;
 };
 
-/** `GET …/route?travelMode=…` — sessionStorage(`scheduleFingerprint` 일치) ↔ React Query */
+/** `GET …/route?destinationItemId=…&travelMode=…` — sessionStorage(`scheduleFingerprint` 일치) ↔ React Query */
 export function persistedScheduleItemRouteQueryOptions(
   roomIdTrimmed: string,
   scheduleId: number | null,
   segmentSourceItemId: number | null,
-  travelMode: ScheduleTravelModeValue,
+  /** 다음 장소의 `itemId` — 없으면 구간이 정해지지 않아 조회하지 않는다 */
+  destinationItemId: number | null,
+  travelMode: ScheduleTravelModeValue | null,
   fingerprintTrimmed: string,
   flags: PersistedScheduleRoutePersistFlags,
 ): OmitKeyof<
@@ -42,10 +45,13 @@ export function persistedScheduleItemRouteQueryOptions(
   const itemOk =
     typeof segmentSourceItemId === "number" &&
     Number.isFinite(segmentSourceItemId);
+  const destOk =
+    typeof destinationItemId === "number" &&
+    Number.isFinite(destinationItemId);
   const fp = fingerprintTrimmed.trim();
 
   const keyEligible =
-    flags.segmentReady && rid.length > 0 && sidOk && itemOk;
+    flags.segmentReady && travelMode !== null && rid.length > 0 && sidOk && itemOk && destOk;
 
   const network =
     typeof flags.networkEnabled === "boolean"
@@ -57,8 +63,8 @@ export function persistedScheduleItemRouteQueryOptions(
   const keyRoom = rid.length > 0 ? rid : null;
   const keySchedule = sidOk ? sid : null;
   const keySegment = itemOk ? segmentSourceItemId : null;
-  const keyMode =
-    sidOk && itemOk && rid.length > 0 ? travelMode : null;
+  const keyDestination = destOk ? destinationItemId : null;
+  const keyMode = sidOk && itemOk && destOk && rid.length > 0 ? travelMode : null;
 
   const sessionSeed: RouteCached | undefined =
     fp.length > 0 &&
@@ -69,6 +75,7 @@ export function persistedScheduleItemRouteQueryOptions(
           rid,
           sid!,
           segmentSourceItemId!,
+          destinationItemId!,
           travelMode,
           fp,
         )
@@ -79,6 +86,7 @@ export function persistedScheduleItemRouteQueryOptions(
       keyRoom,
       keySchedule,
       keySegment,
+      keyDestination,
       keyMode,
     ),
     ...(sessionSeed !== undefined
@@ -88,10 +96,11 @@ export function persistedScheduleItemRouteQueryOptions(
         }
       : {}),
     queryFn: (): Promise<RouteCached> =>
-      resolveScheduleSegmentRoute({
+      travelMode === null ? Promise.resolve(null) : resolveScheduleSegmentRoute({
         roomId: rid,
         scheduleId: sid!,
         segmentSourceItemId: segmentSourceItemId!,
+        destinationItemId: destinationItemId!,
         travelMode,
         scheduleFingerprint: fp,
       }),
@@ -103,3 +112,18 @@ export function persistedScheduleItemRouteQueryOptions(
     retry: false,
   };
 }
+
+/**
+ * 지도 구간 경로 — 목록과 같은 경로 쿼리를 쓴다(진행 중이면 합류). 방금 받다가 실패한 구간은 다시 보내지 않고
+ * 가진 값(없으면 null)을 쓴다 — 실패(429·5xx) 직후 같은 구간을 지도가 또 요청하지 않게 한다.
+ */
+export async function loadScheduleItemRouteForMap(
+  queryClient: QueryClient,
+  options: ReturnType<typeof persistedScheduleItemRouteQueryOptions>,
+): Promise<RouteCached> {
+  const state = queryClient.getQueryState<RouteCached>(options.queryKey);
+  if (state?.status === "error" && state.fetchStatus === "idle") {
+    return state.data ?? null;
+  }
+  return queryClient.fetchQuery(options);
+}
diff --git a/src/lib/plan/scheduleSegmentRoute.test.ts b/src/lib/plan/scheduleSegmentRoute.test.ts
index 9fafad1a..ce240784 100644
--- a/src/lib/plan/scheduleSegmentRoute.test.ts
+++ b/src/lib/plan/scheduleSegmentRoute.test.ts
@@ -18,6 +18,7 @@ let getScheduleItemRouteMock: ReturnType<typeof vi.fn>;
 const ROOM_ID = "room-1";
 const SCHEDULE_ID = 10;
 const ITEM_ID = 1;
+const DESTINATION = 2;
 
 const ROUTE = {
   distanceMeters: 1200,
@@ -50,14 +51,15 @@ beforeEach(() => {
   registerQueryClient(queryClient);
 });
 
-const ROUTE_KEY = () =>
-  scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, ITEM_ID, "DRIVING");
+const ROUTE_KEY = (destination = DESTINATION) =>
+  scheduleItemRouteQueryKey(ROOM_ID, SCHEDULE_ID, ITEM_ID, destination, "DRIVING");
 
-function resolve() {
+function resolve(destinationItemId = DESTINATION) {
   return resolveScheduleSegmentRoute({
     roomId: ROOM_ID,
     scheduleId: SCHEDULE_ID,
     segmentSourceItemId: ITEM_ID,
+    destinationItemId,
     travelMode: "DRIVING",
   });
 }
@@ -70,11 +72,17 @@ describe("resolveScheduleSegmentRoute", () => {
     expect(getScheduleItemRouteMock).not.toHaveBeenCalled();
   });
 
-  it("캐시 miss면 단건 GET 결과를 반환한다", async () => {
+  it("캐시 miss면 도착 항목을 지정한 단건 GET 결과를 반환한다", async () => {
     getScheduleItemRouteMock.mockResolvedValue(ROUTE);
 
     await expect(resolve()).resolves.toEqual(ROUTE);
-    expect(getScheduleItemRouteMock).toHaveBeenCalledTimes(1);
+    expect(getScheduleItemRouteMock).toHaveBeenCalledExactlyOnceWith(
+      ROOM_ID,
+      SCHEDULE_ID,
+      ITEM_ID,
+      DESTINATION,
+      "DRIVING",
+    );
   });
 
   it("경로 없음(204)은 null을 반환한다", async () => {
@@ -83,10 +91,16 @@ describe("resolveScheduleSegmentRoute", () => {
     await expect(resolve()).resolves.toBeNull();
   });
 
-  /**
-   * 재정렬로 무효화된 구간은 같은 키라도 목적지가 달라져 있습니다.
-   * 낡은 값을 그대로 돌려주면 지도에 이전 순서의 폴리라인이 남습니다.
-   */
+  it("같은 출발 항목이라도 도착 항목이 다르면 그 도착 항목의 경로를 받고, 순서를 되돌리면 받아 둔 경로를 쓴다", async () => {
+    queryClient.setQueryData(ROUTE_KEY(2), ROUTE);
+    const toC = { ...ROUTE, distanceMeters: 999, encodedPolyline: "zzz" };
+    getScheduleItemRouteMock.mockResolvedValue(toC);
+
+    await expect(resolve(3)).resolves.toEqual(toC);
+    await expect(resolve(2)).resolves.toEqual(ROUTE);
+    expect(getScheduleItemRouteMock).toHaveBeenCalledTimes(1);
+  });
+
   it("캐시가 무효화된 상태면 낡은 값을 쓰지 않고 다시 조회한다", async () => {
     queryClient.setQueryData(ROUTE_KEY(), ROUTE);
     await queryClient.invalidateQueries({
@@ -101,10 +115,7 @@ describe("resolveScheduleSegmentRoute", () => {
     expect(getScheduleItemRouteMock).toHaveBeenCalledTimes(1);
   });
 
-  /**
-   * 캐시 쓰기는 React Query가 소유합니다. 리졸버가 직접 setQueryData 하면
-   * 무효화 플래그까지 지워져 재정렬 뒤 낡은 경로가 유효한 값으로 굳습니다.
-   */
+  /** 캐시 쓰기는 이 리졸버를 queryFn으로 쓰는 쿼리가 맡는다 */
   it("캐시에 직접 쓰지 않는다", async () => {
     getScheduleItemRouteMock.mockResolvedValue(ROUTE);
 
diff --git a/src/lib/plan/scheduleSegmentRoute.ts b/src/lib/plan/scheduleSegmentRoute.ts
index 6667d654..e943810a 100644
--- a/src/lib/plan/scheduleSegmentRoute.ts
+++ b/src/lib/plan/scheduleSegmentRoute.ts
@@ -13,24 +13,25 @@ export type ResolveScheduleSegmentRouteArgs = {
   roomId: string;
   scheduleId: number;
   segmentSourceItemId: number;
+  /** 다음 장소의 `itemId` — 서버가 그 순간의 순서와 관계없이 이 항목까지 계산한다 */
+  destinationItemId: number;
   travelMode: ScheduleTravelModeValue;
   /** 일정 지문 — 비면 sessionStorage에 기록하지 않습니다. */
   scheduleFingerprint?: string;
 };
 
 /**
- * 구간 `(room, schedule, 출발 항목, 이동수단)` 경로를 가져오는 fetch 본체입니다.
+ * 구간 `(room, schedule, 출발 항목, 도착 항목, 이동수단)` 경로를 가져오는 fetch 본체입니다.
  * 거리·소요 시간과 지도 폴리라인이 같은 캐시 항목을 공유하도록 일정 리스트와 지도가 모두
  * 이 함수를 queryFn으로 쓰는 하나의 쿼리(`scheduleItemRouteQueryKey`)를 거칩니다.
  *
- * in-flight 합치기와 재정렬 중 뒤늦게 도착한 응답 폐기는 React Query가 담당합니다.
- * 여기서 직접 캐시에 쓰지 않습니다 — `setQueryData`는 무효화 플래그까지 지워서
- * 순서가 바뀐 뒤의 낡은 경로를 유효한 값으로 만들어 버립니다.
+ * in-flight 합치기와 캐시 쓰기는 이 함수를 queryFn으로 쓰는 쿼리(React Query)가 맡아, 여기서 직접 캐시에 쓰지 않습니다.
  */
 export async function resolveScheduleSegmentRoute({
   roomId,
   scheduleId,
   segmentSourceItemId,
+  destinationItemId,
   travelMode,
   scheduleFingerprint,
 }: ResolveScheduleSegmentRouteArgs): Promise<ScheduleSegmentRoute> {
@@ -44,6 +45,7 @@ export async function resolveScheduleSegmentRoute({
     rid,
     scheduleId,
     segmentSourceItemId,
+    destinationItemId,
     travelMode,
   );
   const cached = getQueryClient()?.getQueryState<ScheduleSegmentRoute>(routeKey);
@@ -55,6 +57,7 @@ export async function resolveScheduleSegmentRoute({
     rid,
     scheduleId,
     segmentSourceItemId,
+    destinationItemId,
     travelMode,
   );
 
@@ -64,6 +67,7 @@ export async function resolveScheduleSegmentRoute({
       rid,
       scheduleId,
       segmentSourceItemId,
+      destinationItemId,
       travelMode,
       fp,
       fresh,
diff --git a/src/lib/plan/scheduleStompRouteScope.ts b/src/lib/plan/scheduleStompRouteScope.ts
deleted file mode 100644
index 52e2c784..00000000
--- a/src/lib/plan/scheduleStompRouteScope.ts
+++ /dev/null
@@ -1,271 +0,0 @@
-import type { QueryClient } from "@tanstack/react-query";
-
-import type { RoomScheduleItem } from "@/lib/api/rooms/schedule-items";
-import {
-  clearPersistedScheduleRoutesForSchedule,
-  clearPersistedScheduleRoutesForSegmentSources,
-} from "@/lib/plan/planTravelLocalStorage";
-import { usePlanMapDirectionsEpochStore } from "@/stores/plan-map-directions-epoch-store";
-import type { PlanPlace } from "@/lib/plan/types";
-import { scheduleItemsQueryKey } from "@/lib/query-keys";
-
-function asOrderedItemIds(places: unknown): number[] | null {
-  if (!Array.isArray(places)) return null;
-  const out: number[] = [];
-  for (const p of places) {
-    const row = p as PlanPlace;
-    if (typeof row?.itemId === "number" && Number.isFinite(row.itemId)) {
-      out.push(row.itemId);
-    }
-  }
-  return out.length > 0 || places.length === 0 ? out : null;
-}
-
-/** `schedule-items` 캐시의 `PlanPlace[]`에서 순서대로 `itemId`를 뽑습니다. */
-export function readOrderedItemIdsFromScheduleItemsCache(
-  queryClient: QueryClient,
-  roomId: string,
-  scheduleId: number,
-): number[] | null {
-  const data = queryClient.getQueryData<PlanPlace[]>(
-    scheduleItemsQueryKey(roomId, scheduleId),
-  );
-  return asOrderedItemIds(data ?? null);
-}
-
-/** 리오더 API 응답 `RoomScheduleItem[]` → `orderIndex` 순 `itemId` 목록 */
-export function orderedItemIdsFromRoomScheduleItems(
-  items: RoomScheduleItem[],
-): number[] {
-  return [...items]
-    .sort((a, b) => a.orderIndex - b.orderIndex)
-    .map((it) => it.itemId)
-    .filter((id): id is number => typeof id === "number" && Number.isFinite(id));
-}
-
-/** 항목 `itemId`에 인접한 구간의 출발 `segmentSourceItemId` (최대 prev, 자신). */
-function segmentSourcesTouchingItem(
-  orderedItemIds: number[],
-  itemId: number,
-): Set<number> {
-  const s = new Set<number>();
-  const i = orderedItemIds.indexOf(itemId);
-  if (i < 0) return s;
-  if (i > 0) s.add(orderedItemIds[i - 1]!);
-  if (i < orderedItemIds.length - 1) s.add(orderedItemIds[i]!);
-  return s;
-}
-
-export function collectSegmentSourcesForCreate(
-  newOrderedIds: number[] | null,
-  itemId: number,
-): { sources: number[]; useFallback: boolean } {
-  if (!newOrderedIds?.length) {
-    return { sources: [], useFallback: true };
-  }
-  if (newOrderedIds.indexOf(itemId) < 0) {
-    return { sources: [], useFallback: true };
-  }
-  return {
-    sources: [...segmentSourcesTouchingItem(newOrderedIds, itemId)],
-    useFallback: false,
-  };
-}
-
-export function removeRouteQueriesForDeletedItemSource(
-  queryClient: QueryClient,
-  roomId: string,
-  scheduleId: number,
-  itemId: number,
-): void {
-  const rid = roomId.trim();
-  queryClient.removeQueries({
-    predicate: (q) => {
-      const key = q.queryKey;
-      if (!Array.isArray(key) || key[0] !== "schedule-item-route") {
-        return false;
-      }
-      if (String(key[1] ?? "").trim() !== rid) return false;
-      if (key[2] !== scheduleId) return false;
-      return key[3] === itemId;
-    },
-  });
-}
-
-export function collectSegmentSourcesForDelete(
-  oldOrderedIds: number[] | null,
-  deletedItemId: number,
-): { sources: number[]; useFallback: boolean } {
-  if (!oldOrderedIds?.length) {
-    return { sources: [], useFallback: true };
-  }
-  const i = oldOrderedIds.indexOf(deletedItemId);
-  if (i < 0) {
-    return { sources: [], useFallback: true };
-  }
-  if (i === 0) {
-    return { sources: [], useFallback: false };
-  }
-  return { sources: [oldOrderedIds[i - 1]!], useFallback: false };
-}
-
-export function collectSegmentSourcesForReorder(
-  oldOrderedIds: number[] | null,
-  newOrderedIds: number[] | null,
-  itemId: number,
-): { sources: number[]; useFallback: boolean } {
-  if (!newOrderedIds?.length) {
-    return { sources: [], useFallback: true };
-  }
-  if (newOrderedIds.indexOf(itemId) < 0) {
-    return { sources: [], useFallback: true };
-  }
-  const s = new Set(segmentSourcesTouchingItem(newOrderedIds, itemId));
-  if (oldOrderedIds?.length) {
-    segmentSourcesTouchingItem(oldOrderedIds, itemId).forEach((id) =>
-      s.add(id),
-    );
-  }
-  return { sources: [...s], useFallback: false };
-}
-
-export function bumpPlanMapRouteSegments(
-  roomId: string,
-  scheduleId: number,
-  sourceItemIds: number[],
-): void {
-  if (sourceItemIds.length === 0) return;
-  const rid = roomId.trim();
-  if (!rid.length) return;
-  usePlanMapDirectionsEpochStore.getState().bumpSegments(
-    rid,
-    sourceItemIds.map((segmentSourceItemId) => ({
-      scheduleId,
-      segmentSourceItemId,
-    })),
-  );
-}
-
-/** 항목 삭제 직후 — 삭제 전 순서 스냅샷 기준 인접 구간 route만 무효화(본인 mutation). */
-export async function invalidateScheduleItemRoutesAfterDelete(
-  queryClient: QueryClient,
-  roomId: string,
-  scheduleId: number,
-  deletedItemId: number,
-  oldOrderedIds: number[] | null,
-): Promise<void> {
-  const rid = roomId.trim();
-  if (!rid.length) return;
-  const { sources, useFallback } = collectSegmentSourcesForDelete(
-    oldOrderedIds,
-    deletedItemId,
-  );
-  if (useFallback) {
-    await invalidateScheduleItemRouteForWholeSchedule(queryClient, rid, scheduleId);
-    usePlanMapDirectionsEpochStore.getState().bumpForDirections(rid);
-    return;
-  }
-  await invalidateScheduleItemRouteForSources(queryClient, rid, scheduleId, sources);
-  bumpPlanMapRouteSegments(rid, scheduleId, sources);
-}
-
-/** 항목 생성 후 캐시 반영 직후 — 인접 구간 route만 무효화(본인 mutation). */
-export async function invalidateScheduleItemRoutesAfterItemCreated(
-  queryClient: QueryClient,
-  roomId: string,
-  scheduleId: number,
-  itemId: number,
-): Promise<void> {
-  const rid = roomId.trim();
-  if (!rid.length) return;
-  const orderedIds = readOrderedItemIdsFromScheduleItemsCache(
-    queryClient,
-    rid,
-    scheduleId,
-  );
-  const { sources, useFallback } = collectSegmentSourcesForCreate(
-    orderedIds,
-    itemId,
-  );
-  if (useFallback) {
-    await invalidateScheduleItemRouteForWholeSchedule(queryClient, rid, scheduleId);
-    usePlanMapDirectionsEpochStore.getState().bumpForDirections(rid);
-    return;
-  }
-  await invalidateScheduleItemRouteForSources(queryClient, rid, scheduleId, sources);
-  bumpPlanMapRouteSegments(rid, scheduleId, sources);
-}
-
-/**
- * 리오더·중간 삽입 직후 — STOMP보다 먼저 캐시·서버 순서를 알 때 구간만 무효화.
- * `oldOrderedIds`는 merge 전 `schedule-items` 스냅샷, `items`는 리오더(또는 최종 PATCH) 응답.
- */
-export async function invalidateScheduleItemRoutesAfterReorder(
-  queryClient: QueryClient,
-  roomId: string,
-  scheduleId: number,
-  movedItemId: number,
-  oldOrderedIds: number[] | null,
-  items: RoomScheduleItem[],
-): Promise<void> {
-  const rid = roomId.trim();
-  if (!rid.length) return;
-  const newOrderedIds = orderedItemIdsFromRoomScheduleItems(items);
-  const { sources, useFallback } = collectSegmentSourcesForReorder(
-    oldOrderedIds,
-    newOrderedIds,
-    movedItemId,
-  );
-  if (useFallback) {
-    await invalidateScheduleItemRouteForWholeSchedule(queryClient, rid, scheduleId);
-    usePlanMapDirectionsEpochStore.getState().bumpForDirections(rid);
-    return;
-  }
-  await invalidateScheduleItemRouteForSources(queryClient, rid, scheduleId, sources);
-  bumpPlanMapRouteSegments(rid, scheduleId, sources);
-}
-
-export async function invalidateScheduleItemRouteForSources(
-  queryClient: QueryClient,
-  roomId: string,
-  scheduleId: number,
-  sourceItemIds: number[],
-): Promise<void> {
-  if (sourceItemIds.length === 0) return;
-  const rid = roomId.trim();
-  clearPersistedScheduleRoutesForSegmentSources(rid, scheduleId, sourceItemIds);
-  const want = new Set(sourceItemIds);
-  await queryClient.invalidateQueries({
-    predicate: (q) => {
-      const key = q.queryKey;
-      if (!Array.isArray(key) || key[0] !== "schedule-item-route") {
-        return false;
-      }
-      if (String(key[1] ?? "").trim() !== rid) return false;
-      if (key[2] !== scheduleId) return false;
-      return typeof key[3] === "number" && want.has(key[3]);
-    },
-    /** `all`이면 옵저버 없는 캐시(재정렬로 구간이 사라진 뒤)도 refetch되어 모드 4개가 동시에 나감 */
-    refetchType: "active",
-  });
-}
-
-export async function invalidateScheduleItemRouteForWholeSchedule(
-  queryClient: QueryClient,
-  roomId: string,
-  scheduleId: number,
-): Promise<void> {
-  const rid = roomId.trim();
-  clearPersistedScheduleRoutesForSchedule(rid, scheduleId);
-  await queryClient.invalidateQueries({
-    predicate: (q) => {
-      const key = q.queryKey;
-      if (!Array.isArray(key) || key[0] !== "schedule-item-route") {
-        return false;
-      }
-      if (String(key[1] ?? "").trim() !== rid) return false;
-      return key[2] === scheduleId;
-    },
-    refetchType: "active",
-  });
-}
diff --git a/src/lib/plan/scheduleTime.ts b/src/lib/plan/scheduleTime.ts
index 9713e643..789b7e87 100644
--- a/src/lib/plan/scheduleTime.ts
+++ b/src/lib/plan/scheduleTime.ts
@@ -70,22 +70,3 @@ export function hmToMinutesSinceMidnight(hm: string): number | null {
   if (!Number.isFinite(h) || !Number.isFinite(m)) return null;
   return h * 60 + m;
 }
-
-/** 0..1439 분을 같은 날 기준 `HH:mm`으로. */
-export function minutesSinceMidnightToHm(totalMinutes: number): string {
-  const wrapped =
-    ((totalMinutes % MINUTES_PER_DAY) + MINUTES_PER_DAY) % MINUTES_PER_DAY;
-  const h = Math.floor(wrapped / 60);
-  const m = wrapped % 60;
-  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
-}
-
-/** `HH:mm`(또는 `normalizeStartTimeToHm` 가능한 문자열)에 분을 더한 같은 날 래핑 결과. 입력이 빈 문자열이면 분만 적용합니다. */
-export function addMinutesToHm(hm: string, minutesToAdd: number): string {
-  if (!Number.isFinite(minutesToAdd)) minutesToAdd = 0;
-  const base = hmToMinutesSinceMidnight(hm);
-  if (base === null) {
-    return minutesSinceMidnightToHm(minutesToAdd);
-  }
-  return minutesSinceMidnightToHm(base + minutesToAdd);
-}
diff --git a/src/lib/plan/scheduleTravelMode.test.ts b/src/lib/plan/scheduleTravelMode.test.ts
index 7817cd85..7329523c 100644
--- a/src/lib/plan/scheduleTravelMode.test.ts
+++ b/src/lib/plan/scheduleTravelMode.test.ts
@@ -1,10 +1,8 @@
 import { describe, expect, it } from "vitest";
 
 import {
-  SCHEDULE_TRAVEL_MODE_DEFAULT,
   SCHEDULE_TRAVEL_MODES,
   canonicalScheduleTravelMode,
-  scheduleTravelModeLabel,
 } from "./scheduleTravelMode";
 
 describe("scheduleTravelMode", () => {
@@ -12,11 +10,8 @@ describe("scheduleTravelMode", () => {
     expect(SCHEDULE_TRAVEL_MODES.map((m) => m.value)).toEqual(["WALKING", "TRANSIT", "DRIVING"]);
   });
 
-  it("예전에 자전거로 저장된 값은 기본값(자동차)으로 읽는다", () => {
-    expect(SCHEDULE_TRAVEL_MODE_DEFAULT).toBe("DRIVING");
-    expect(canonicalScheduleTravelMode("BICYCLING")).toBe("DRIVING");
-    expect(canonicalScheduleTravelMode("cycling")).toBe("DRIVING");
-    expect(scheduleTravelModeLabel("BICYCLING")).toBe("자동차");
+  it.each(["BICYCLING", "CYCLING", "BOAT", "", undefined])("미지원 값 %s를 다른 수단으로 바꾸지 않는다", (mode) => {
+    expect(canonicalScheduleTravelMode(mode)).toBeNull();
   });
 
   it("표준 수단과 예전 별칭은 그대로 읽는다", () => {
diff --git a/src/lib/plan/scheduleTravelMode.ts b/src/lib/plan/scheduleTravelMode.ts
index d9426a1b..7084dcf0 100644
--- a/src/lib/plan/scheduleTravelMode.ts
+++ b/src/lib/plan/scheduleTravelMode.ts
@@ -1,8 +1,3 @@
-/**
- * 일정 구간(이전 장소 → 이 항목) 이동 수단 — 서버: `WALKING`, `DRIVING`, `BICYCLING`, `TRANSIT`.
- * 자전거는 경로 조회(Google Routes)를 줄이려 고를 수 없게 뺐다 — 예전에 자전거로 저장된 구간은
- * 기본값(자동차)으로 보이고, 사용자가 다시 고르면 서버 값도 바뀐다(`LEGACY_ALIAS`).
- */
 export const SCHEDULE_TRAVEL_MODES = [
   { value: "WALKING", label: "도보" },
   { value: "TRANSIT", label: "대중교통" },
@@ -12,26 +7,13 @@ export const SCHEDULE_TRAVEL_MODES = [
 export type ScheduleTravelModeValue =
   (typeof SCHEDULE_TRAVEL_MODES)[number]["value"];
 
-/** 서버 `schedule_items.travel_mode` 기본값 — 저장값을 아직 모를 때의 폴백 */
-export const SCHEDULE_TRAVEL_MODE_DEFAULT: ScheduleTravelModeValue = "DRIVING";
-
 const API_VALUES = new Set<string>(
   SCHEDULE_TRAVEL_MODES.map((m) => m.value),
 );
 
-/** 예전 클라이언트·데이터 호환 — 고를 수 없게 된 자전거는 기본값으로 읽는다 */
-const LEGACY_ALIAS: Record<string, ScheduleTravelModeValue> = {
-  WALK: "WALKING",
-  CYCLING: SCHEDULE_TRAVEL_MODE_DEFAULT,
-  WALKING: "WALKING",
-  TRANSIT: "TRANSIT",
-  DRIVING: "DRIVING",
-  BICYCLING: SCHEDULE_TRAVEL_MODE_DEFAULT,
-};
-
 /**
  * API·쿼리스트링에 쓸 표준 이동 수단 코드.
- * 알 수 없으면 `null`(호출부에서 기본값 처리).
+ * 미지원·미설정 값은 `null`로 유지하며 자동 조회나 다른 수단으로 대체하지 않습니다.
  */
 export function canonicalScheduleTravelMode(
   mode: string | null | undefined,
@@ -39,8 +21,7 @@ export function canonicalScheduleTravelMode(
   const raw = typeof mode === "string" ? mode.trim() : "";
   if (!raw.length) return null;
   const upper = raw.toUpperCase();
-  const fromLegacy = LEGACY_ALIAS[upper];
-  if (fromLegacy) return fromLegacy;
+  if (upper === "WALK") return "WALKING";
   if (API_VALUES.has(upper))
     return upper as ScheduleTravelModeValue;
   return null;
@@ -52,5 +33,5 @@ export function scheduleTravelModeLabel(mode: string): string {
     const row = SCHEDULE_TRAVEL_MODES.find((m) => m.value === canon);
     if (row) return row.label;
   }
-  return mode;
+  return "이동수단 선택";
 }
diff --git a/src/lib/plan/timePickerDraft.ts b/src/lib/plan/timePickerDraft.ts
new file mode 100644
index 00000000..a2a795c4
--- /dev/null
+++ b/src/lib/plan/timePickerDraft.ts
@@ -0,0 +1,29 @@
+import { normalizeStartTimeToHm } from "./scheduleTime";
+
+export type TimePeriod = "AM" | "PM";
+export type TimeParts = {
+  period: TimePeriod | null;
+  hour: number | null;
+  minute: number | null;
+};
+
+export function timePartsFromHm(value: string): TimeParts {
+  if (!normalizeStartTimeToHm(value)) return { period: null, hour: null, minute: null };
+  const [hour, minute] = value.split(":").map(Number);
+  return { period: hour < 12 ? "AM" : "PM", hour: hour % 12, minute };
+}
+
+/** Empty, incomplete, and complete input have different save semantics. */
+export function timePartsToHm(parts: TimeParts): string | null {
+  if (parts.period === null && parts.hour === null && parts.minute === null) return "";
+  if (parts.period === null || parts.hour === null || parts.minute === null) return null;
+  const hour = parts.hour + (parts.period === "PM" ? 12 : 0);
+  return `${String(hour).padStart(2, "0")}:${String(parts.minute).padStart(2, "0")}`;
+}
+
+export function formatTimePickerValue(value: string | null): string {
+  if (value === null) return "선택 중";
+  if (!value) return "";
+  const [hour, minute] = value.split(":").map(Number);
+  return `${hour < 12 ? "오전" : "오후"} ${hour % 12 || 12}:${String(minute).padStart(2, "0")}`;
+}
diff --git a/src/lib/public-assets.ts b/src/lib/public-assets.ts
index f2024b50..939435e3 100644
--- a/src/lib/public-assets.ts
+++ b/src/lib/public-assets.ts
@@ -44,8 +44,6 @@ export const chatAssets = {
 export const packingIcons = {
   plusWhite: "/icons/packing/plus-white.svg",
   plus: "/icons/packing/plus.svg",
-  checkbox: "/icons/packing/checkbox.svg",
-  checkboxChecked: "/icons/packing/checkbox-checked.svg",
   menu: "/icons/packing/menu.svg",
   edit: "/icons/packing/edit.svg",
   delete: "/icons/packing/delete.svg",
diff --git a/src/lib/query-client.test.ts b/src/lib/query-client.test.ts
index 7bdbad82..d5dc8fa4 100644
--- a/src/lib/query-client.test.ts
+++ b/src/lib/query-client.test.ts
@@ -21,3 +21,22 @@ describe("getOrCreateQueryClient", () => {
     expect(queryClientModule.getQueryClient()).toBe(first);
   });
 });
+
+describe("shouldRetryQuery", () => {
+  it("HTTP 오류(429·4xx·5xx)는 다시 보내지 않는다", async () => {
+    const { shouldRetryQuery } = await import("@/lib/query-client");
+    const { HttpError } = await import("@/lib/api/errors");
+
+    for (const status of [400, 401, 404, 429, 500, 502, 503, 504]) {
+      expect(shouldRetryQuery(0, new HttpError(status, "failed"))).toBe(false);
+    }
+    expect(shouldRetryQuery(0, new Error("일정 목록 조회 실패: 500"))).toBe(false);
+  });
+
+  it("일시적 네트워크 오류는 한 번만 다시 보낸다", async () => {
+    const { shouldRetryQuery } = await import("@/lib/query-client");
+
+    expect(shouldRetryQuery(0, new TypeError("Failed to fetch"))).toBe(true);
+    expect(shouldRetryQuery(1, new TypeError("Failed to fetch"))).toBe(false);
+  });
+});
diff --git a/src/lib/query-client.ts b/src/lib/query-client.ts
index cedede77..7953a7d4 100644
--- a/src/lib/query-client.ts
+++ b/src/lib/query-client.ts
@@ -1,12 +1,19 @@
 import { QueryClient } from "@tanstack/react-query";
 
+import { isNetworkError } from "@/lib/api/errors";
+
 let registeredQueryClient: QueryClient | null = null;
 
+/** 일시적 네트워크 오류만 한 번 더 보낸다 — Google 429도 백엔드에서 502로 오므로 HTTP 오류는 재시도하지 않는다 */
+export function shouldRetryQuery(failureCount: number, error: unknown): boolean {
+  return failureCount < 1 && isNetworkError(error);
+}
+
 export function createQueryClient() {
   return new QueryClient({
     defaultOptions: {
       queries: {
-        retry: 1,
+        retry: shouldRetryQuery,
         refetchOnWindowFocus: false,
         staleTime: 60_000,
       },
diff --git a/src/lib/query-keys.ts b/src/lib/query-keys.ts
index 849003ef..e63a7b29 100644
--- a/src/lib/query-keys.ts
+++ b/src/lib/query-keys.ts
@@ -51,11 +51,10 @@ export function planItinerarySegmentMapPathQueryKey(
   rid: string,
   scheduleId: number,
   segmentSourceItemId: number,
+  destinationItemId: number,
   originPlaceId: string,
   destPlaceId: string,
   travelModeCanon: string,
-  roomDirectionsEpoch: number,
-  segmentEpoch: number,
 ) {
   return [
     "plan-itinerary-map-segment-path",
@@ -63,11 +62,10 @@ export function planItinerarySegmentMapPathQueryKey(
     rid,
     scheduleId,
     segmentSourceItemId,
+    destinationItemId,
     originPlaceId.trim(),
     destPlaceId.trim(),
     travelModeCanon,
-    roomDirectionsEpoch,
-    segmentEpoch,
   ] as const;
 }
 
@@ -107,6 +105,11 @@ export function joinRequestsQueryKey(roomId: string | null) {
   return ["join-requests", roomId] as const;
 }
 
+/** 모든 방의 입장 요청 조회에 공통 접두 */
+export function joinRequestsRootQueryKey() {
+  return ["join-requests"] as const;
+}
+
 // ─── Schedule items / routes ─────────────────────────────────────────────────
 
 export const scheduleItemsQueryKey = (
@@ -115,13 +118,15 @@ export const scheduleItemsQueryKey = (
 ) => ["schedule-items", roomId, scheduleId, "v2-loc"] as const;
 
 /**
- * 구간별 길찾기 API 결과 (`GET …/route?travelMode=…`).
- * 무효화: `["schedule-item-route", roomId]` prefix.
+ * 구간별 길찾기 API 결과 (`GET …/route?destinationItemId=…&travelMode=…`).
+ * 요청에 보내는 출발·도착 항목과 이동수단이 곧 key라, 순서가 바뀌면 다른 key가 되고
+ * 순서를 되돌리면 받아 둔 값을 그대로 쓴다. 일정이 바뀌어도 무효화하지 않는다.
  */
 export const scheduleItemRouteQueryKey = (
   roomId: string | null,
   scheduleId: number | null,
   segmentSourceItemId: number | null,
+  destinationItemId: number | null,
   travelMode: ScheduleTravelModeValue | null,
 ) =>
   [
@@ -129,6 +134,7 @@ export const scheduleItemRouteQueryKey = (
     roomId,
     scheduleId,
     segmentSourceItemId,
+    destinationItemId,
     travelMode,
   ] as const;
 
diff --git a/src/lib/rooms.hydrate.test.ts b/src/lib/rooms.hydrate.test.ts
new file mode 100644
index 00000000..d8c9e6ab
--- /dev/null
+++ b/src/lib/rooms.hydrate.test.ts
@@ -0,0 +1,120 @@
+import { QueryClient } from "@tanstack/react-query";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { RoomScheduleWithItems } from "@/lib/api/rooms/schedules";
+import type { PlanPlace } from "@/lib/plan/types";
+import { roomSchedulesQueryKey, scheduleItemsQueryKey } from "@/lib/query-keys";
+
+const mocks = vi.hoisted(() => ({
+  getRoomSchedules: vi.fn(),
+  build: vi.fn(),
+}));
+
+vi.mock("@/lib/api/rooms", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  getRoomSchedules: mocks.getRoomSchedules,
+}));
+vi.mock("@/lib/plan/schedule-bulk-hydration", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  buildSchedulePlacesFromSchedulesWithItems: mocks.build,
+}));
+
+import { hydrateRoomSchedulesFromServer, refreshRoomSchedules } from "@/lib/rooms";
+
+const ROOM_ID = "room-1";
+const SERVER_SCHEDULES: RoomScheduleWithItems[] = [
+  { scheduleId: 1, roomId: ROOM_ID, dayNumber: 1, date: "2026-10-25", createdAt: "", items: [] },
+];
+const SERVER_PLACES: PlanPlace[] = [{ id: "item-7", itemId: 7, title: "B" }];
+const CACHED_PLACES: PlanPlace[] = [{ id: "item-5", itemId: 5, title: "A" }];
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((r) => {
+    resolve = r;
+  });
+  return { promise, resolve };
+}
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("hydrateRoomSchedulesFromServer", () => {
+  it("does not overwrite caches with a snapshot whose fetch was cancelled", async () => {
+    const client = new QueryClient();
+    client.setQueryData(scheduleItemsQueryKey(ROOM_ID, 1), CACHED_PLACES);
+    const response = deferred<RoomScheduleWithItems[]>();
+    mocks.getRoomSchedules.mockReturnValueOnce(response.promise);
+    mocks.build.mockResolvedValueOnce(new Map([[1, SERVER_PLACES]]));
+    const controller = new AbortController();
+
+    const pending = hydrateRoomSchedulesFromServer(client, ROOM_ID, controller.signal);
+    controller.abort();
+    response.resolve(SERVER_SCHEDULES);
+    await pending;
+
+    expect(client.getQueryData(scheduleItemsQueryKey(ROOM_ID, 1))).toBe(CACHED_PLACES);
+    expect(client.getQueryData(roomSchedulesQueryKey(ROOM_ID))).toBeUndefined();
+    client.clear();
+  });
+
+  it("writes the day lists once the snapshot is current", async () => {
+    const client = new QueryClient();
+    mocks.getRoomSchedules.mockResolvedValueOnce(SERVER_SCHEDULES);
+    mocks.build.mockResolvedValueOnce(new Map([[1, SERVER_PLACES]]));
+
+    await hydrateRoomSchedulesFromServer(client, ROOM_ID, new AbortController().signal);
+
+    expect(client.getQueryData(scheduleItemsQueryKey(ROOM_ID, 1))).toEqual(SERVER_PLACES);
+    expect(client.getQueryData(roomSchedulesQueryKey(ROOM_ID))).toEqual(SERVER_SCHEDULES);
+    client.clear();
+  });
+
+  it("keeps a day list that changed after the whole-room fetch was sent", async () => {
+    vi.useFakeTimers({ toFake: ["Date"], now: 1_000 });
+    try {
+      const client = new QueryClient();
+      const response = deferred<RoomScheduleWithItems[]>();
+      mocks.getRoomSchedules.mockReturnValueOnce(response.promise);
+      mocks.build.mockResolvedValueOnce(new Map([[1, SERVER_PLACES]]));
+
+      const pending = hydrateRoomSchedulesFromServer(client, ROOM_ID, new AbortController().signal);
+      vi.setSystemTime(2_000);
+      client.setQueryData(scheduleItemsQueryKey(ROOM_ID, 1), CACHED_PLACES);
+      response.resolve(SERVER_SCHEDULES);
+      await pending;
+
+      expect(client.getQueryData(scheduleItemsQueryKey(ROOM_ID, 1))).toBe(CACHED_PLACES);
+      expect(client.getQueryData(roomSchedulesQueryKey(ROOM_ID))).toEqual(SERVER_SCHEDULES);
+      client.clear();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});
+
+describe("refreshRoomSchedules", () => {
+  it("cancels an in-flight snapshot so only the refresh started after the change is written", async () => {
+    const client = new QueryClient();
+    const stale = deferred<RoomScheduleWithItems[]>();
+    mocks.getRoomSchedules
+      .mockReturnValueOnce(stale.promise)
+      .mockResolvedValueOnce(SERVER_SCHEDULES);
+    mocks.build.mockResolvedValue(new Map([[1, SERVER_PLACES]]));
+    const staleFetch = client
+      .fetchQuery({
+        queryKey: roomSchedulesQueryKey(ROOM_ID),
+        queryFn: ({ signal }) => hydrateRoomSchedulesFromServer(client, ROOM_ID, signal),
+      })
+      .catch(() => null);
+
+    await refreshRoomSchedules(client, ROOM_ID);
+    stale.resolve([]);
+    await staleFetch;
+
+    expect(client.getQueryData(roomSchedulesQueryKey(ROOM_ID))).toEqual(SERVER_SCHEDULES);
+    expect(client.getQueryData(scheduleItemsQueryKey(ROOM_ID, 1))).toEqual(SERVER_PLACES);
+    client.clear();
+  });
+});
diff --git a/src/lib/rooms.ts b/src/lib/rooms.ts
index 1044a6a5..532f6ea7 100644
--- a/src/lib/rooms.ts
+++ b/src/lib/rooms.ts
@@ -1,4 +1,4 @@
-import type { QueryClient } from "@tanstack/react-query";
+import { isCancelledError, type QueryClient } from "@tanstack/react-query";
 
 import { apiFetch } from "@/lib/api/client";
 import type {
@@ -10,7 +10,10 @@ import { getRoomDetail, getRoomSchedules } from "@/lib/api/rooms";
 import type { RoomScheduleWithItems } from "@/lib/api/rooms/schedules";
 import { apiUrl } from "@/lib/api/http";
 import { clearPersistedScheduleRoutesForSchedule } from "@/lib/plan/planTravelLocalStorage";
-import { hydrateScheduleItemsFromSchedulesWithItems } from "@/lib/plan/schedule-bulk-hydration";
+import {
+  buildSchedulePlacesFromSchedulesWithItems,
+  writeSchedulePlacesFromHydrate,
+} from "@/lib/plan/schedule-bulk-hydration";
 import { sortRoomSchedules } from "@/lib/plan/scheduleMerge";
 import type { PlanPlace } from "@/lib/plan/types";
 import {
@@ -96,21 +99,30 @@ export function selectHostRoom(
 }
 
 /**
- * `GET /rooms/{roomId}/schedules`로 서버 일정을 **항상** 재조회해 React Query 캐시에 넣습니다.
- * `fetchQuery`는 `staleTime: Infinity` 캐시를 재사용할 수 있어 일차 이동(dayNumber shift) 후
- * 순서가 UI에 반영되지 않을 수 있으므로 API를 직접 호출합니다.
+ * `room-schedules`의 queryFn — `GET /rooms/{roomId}/schedules?includeItems=true`로 일차 목록과
+ * 일차별 장소(`schedule-items`) 캐시를 함께 채웁니다. 직접 부르지 말고 조회(`useRoomSchedules`·
+ * `refreshRoomSchedules`)를 거쳐야 진행 중인 옛 조회가 취소됩니다.
  * 신규 일차만 항목 캐시를 `[]`로 시딩하고, 기존 scheduleId의 항목 캐시는 보존합니다.
  */
 export async function hydrateRoomSchedulesFromServer(
   queryClient: QueryClient,
   roomId: string,
+  signal?: AbortSignal,
 ): Promise<RoomScheduleWithItems[]> {
   const rid = roomId.trim();
   if (!rid.length) return [];
 
-  const schedules = await getRoomSchedules(rid, { includeItems: true });
+  const startedAt = Date.now();
+  const schedules = await getRoomSchedules(rid, { includeItems: true, signal });
   const sorted = sortRoomSchedules(schedules);
+  const placesBySchedule = await buildSchedulePlacesFromSchedulesWithItems(
+    queryClient,
+    sorted,
+  );
+  // 더 늦게 시작한 조회가 이 조회를 취소했으면 이 응답은 옛 스냅샷이다 — 캐시를 덮지 않는다
+  if (signal?.aborted) return sorted;
 
+  // 미리보기를 기다리는 동안 들어온 변경을 덮지 않도록 캐시는 여기서 한 번에 쓴다
   const prevSchedules =
     queryClient.getQueryData<RoomScheduleWithItems[]>(
       roomSchedulesQueryKey(rid),
@@ -129,11 +141,7 @@ export async function hydrateRoomSchedulesFromServer(
     }
   }
 
-  await hydrateScheduleItemsFromSchedulesWithItems(
-    queryClient,
-    rid,
-    sorted as RoomScheduleWithItems[],
-  );
+  writeSchedulePlacesFromHydrate(queryClient, rid, placesBySchedule, startedAt);
 
   for (const s of sorted) {
     const key = scheduleItemsQueryKey(rid, s.scheduleId);
@@ -155,11 +163,66 @@ export async function awaitRoomSchedulesHydrated(
 
   return queryClient.fetchQuery({
     queryKey: roomSchedulesQueryKey(rid),
-    queryFn: () => hydrateRoomSchedulesFromServer(queryClient, rid),
+    queryFn: ({ signal }) =>
+      hydrateRoomSchedulesFromServer(queryClient, rid, signal),
     staleTime: Infinity,
   });
 }
 
+/**
+ * `useRoomSchedules`의 일정 불러오기가 진행 중이면 끝날 때까지 기다리고 true를 돌려줍니다.
+ * 진행 중인 요청에 합류할 뿐 새로 보내지 않습니다 — 진행 중이 아니면 바로 false입니다.
+ * 기다리던 불러오기가 취소되고 새로 시작되면 새 불러오기를 기다립니다.
+ */
+export async function waitForRoomSchedulesHydration(
+  queryClient: QueryClient,
+  roomId: string,
+): Promise<boolean> {
+  const rid = roomId.trim();
+  const queryKey = roomSchedulesQueryKey(rid);
+  if (!rid.length || queryClient.isFetching({ queryKey, exact: true }) === 0) {
+    return false;
+  }
+
+  // 합류한 불러오기가 취소되면 그 promise는 CancelledError로 끝난다. 그대로 던지면 이 함수를 부른
+  // 일차 조회가 성공도 실패도 아닌 '조회 중'으로 남는다(TanStack이 취소 에러는 상태로 남기지 않음)
+  while (queryClient.isFetching({ queryKey, exact: true }) > 0) {
+    try {
+      await queryClient.fetchQuery({
+        queryKey,
+        queryFn: () => hydrateRoomSchedulesFromServer(queryClient, rid),
+        staleTime: 0,
+      });
+      return true;
+    } catch (error) {
+      if (!isCancelledError(error)) throw error;
+    }
+  }
+  return true;
+}
+
+/**
+ * 일정 전체를 다시 받습니다(본인의 일차 생성·삭제·이동, 여행 날짜 변경 직후).
+ * 진행 중이던 조회는 이 변경 전 스냅샷이라 취소하고, `room-schedules` 조회 하나로 받아
+ * 마지막에 시작한 조회만 캐시에 쓰게 합니다.
+ */
+export async function refreshRoomSchedules(
+  queryClient: QueryClient,
+  roomId: string,
+): Promise<RoomScheduleWithItems[]> {
+  const rid = roomId.trim();
+  if (!rid.length) return [];
+
+  const queryKey = roomSchedulesQueryKey(rid);
+  await queryClient.cancelQueries({ queryKey, exact: true });
+  return queryClient.fetchQuery({
+    queryKey,
+    queryFn: ({ signal }) =>
+      hydrateRoomSchedulesFromServer(queryClient, rid, signal),
+    staleTime: 0,
+  });
+}
+
 /** `GET /rooms/{roomId}` 결과로 room-detail·방 목록 캐시를 맞춥니다. */
 export async function syncRoomDetailFromServer(
   queryClient: QueryClient,
diff --git a/src/lib/rooms/trip-form.ts b/src/lib/rooms/trip-form.ts
index defb5ac9..49725390 100644
--- a/src/lib/rooms/trip-form.ts
+++ b/src/lib/rooms/trip-form.ts
@@ -1,16 +1,20 @@
+import {
+  isTripScheduleDayLimitExceeded,
+  TRIP_SCHEDULE_DAY_LIMIT_MESSAGE,
+} from "@/lib/plan/schedulePolicy";
+
 export const ROOM_TRIP_TITLE_MAX_LENGTH = 20;
 export const TRIP_DESTINATIONS_MAX_COUNT = 5;
 export const TRIP_DESTINATION_MAX_LENGTH = 100;
 
-export const TRIP_FORM_FIELD_CLASS =
-  "rounded-2xl border-2 border-gray-border bg-white px-5 py-4 transition focus-within:border-primary";
-
-export const TRIP_FORM_FIELD_READ_ONLY_CLASS =
-  "rounded-2xl border-2 border-gray-border bg-bubble-gray/30 px-5 py-4";
-
 export const TRIP_DATE_RANGE_INVALID_MESSAGE =
   "종료일은 시작일 이후여야 해요." as const;
 
+export const TRIP_TITLE_REQUIRED_MESSAGE = "여행 제목을 입력해 주세요." as const;
+export const TRIP_DESTINATIONS_REQUIRED_MESSAGE = "여행지를 하나 이상 선택해 주세요." as const;
+export const TRIP_DESTINATIONS_INVALID_MESSAGE = "여행지는 서로 다른 곳으로 5개까지 선택해 주세요." as const;
+export const TRIP_DATES_REQUIRED_MESSAGE = "여행 기간을 선택해 주세요." as const;
+
 export const TRIP_START_BEFORE_MIN_MESSAGE =
   "시작일은 최초 여행 시작일 이전으로 바꿀 수 없어요." as const;
 
@@ -73,3 +77,23 @@ export function areDestinationsEqual(a: string[], b: string[]): boolean {
 export function isTripDateRangeInvalid(startDate: string, endDate: string) {
   return Boolean(startDate && endDate && endDate < startDate);
 }
+
+/*
+ * 여행 정보 칸별 검증. 오류 문장을 돌려주고 통과면 undefined다.
+ * TanStack Form 칸 validators와 적용하기 잠금이 같이 쓴다. zod를 붙이면 이 함수들 자리에 스키마를 넣는다
+ */
+export function tripTitleError(title: string): string | undefined {
+  return title.trim() ? undefined : TRIP_TITLE_REQUIRED_MESSAGE;
+}
+
+export function tripDestinationsError(destinations: string[]): string | undefined {
+  if (destinations.length === 0) return TRIP_DESTINATIONS_REQUIRED_MESSAGE;
+  return isTripDestinationsValid(destinations) ? undefined : TRIP_DESTINATIONS_INVALID_MESSAGE;
+}
+
+export function tripDateRangeError(startDate: string, endDate: string): string | undefined {
+  if (!startDate || !endDate) return TRIP_DATES_REQUIRED_MESSAGE;
+  if (isTripDateRangeInvalid(startDate, endDate)) return TRIP_DATE_RANGE_INVALID_MESSAGE;
+  if (isTripScheduleDayLimitExceeded(startDate, endDate)) return TRIP_SCHEDULE_DAY_LIMIT_MESSAGE;
+  return undefined;
+}
diff --git a/src/lib/session-user-flow.test.ts b/src/lib/session-user-flow.test.ts
new file mode 100644
index 00000000..524fc2ff
--- /dev/null
+++ b/src/lib/session-user-flow.test.ts
@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+import { beforeEach, expect, it } from "vitest";
+import { consumePendingInviteCode, pendingInviteAuthPath, setPendingInviteCode } from "./session-user-flow";
+
+beforeEach(() => sessionStorage.clear());
+it("preserves an invite campaign across login and agreements until consumed", () => {
+  setPendingInviteCode("test-invite", "?utm_source=partner&utm_campaign=launch&code=secret");
+  expect(pendingInviteAuthPath("/login")).toBe("/login?utm_source=partner&utm_campaign=launch");
+  expect(pendingInviteAuthPath("/login/agreements")).toBe("/login/agreements?utm_source=partner&utm_campaign=launch");
+  expect(consumePendingInviteCode()).toBe("test-invite");
+  expect(pendingInviteAuthPath("/login")).toBe("/login");
+  expect(consumePendingInviteCode()).toBeNull();
+});
+it("replaces the entire old campaign when a different invitation arrives", () => {
+  setPendingInviteCode("first", "?utm_source=partner&utm_medium=email");
+  setPendingInviteCode("second", "?utm_campaign=partial");
+  expect(pendingInviteAuthPath("/login")).toBe("/login?utm_campaign=partial");
+  setPendingInviteCode("third");
+  expect(pendingInviteAuthPath("/login")).toBe("/login");
+  expect(consumePendingInviteCode()).toBe("third");
+});
+it("does not add a default campaign to a legacy or general login", () => {
+  expect(pendingInviteAuthPath("/login?error=OAuthCallback")).toBe("/login?error=OAuthCallback");
+  sessionStorage.setItem("pendingInviteCode", "legacy");
+  expect(pendingInviteAuthPath("/login")).toBe("/login");
+});
diff --git a/src/lib/session-user-flow.ts b/src/lib/session-user-flow.ts
index 6ba236b2..a51ca773 100644
--- a/src/lib/session-user-flow.ts
+++ b/src/lib/session-user-flow.ts
@@ -1,3 +1,5 @@
+import { inviteCampaignSearch, withInviteCampaign } from "@/lib/invite-campaign";
+
 /** OAuth·초대 등 인증 흐름 부가 유틸 */
 
 export async function checkClientAuthenticated(): Promise<boolean> {
@@ -10,16 +12,37 @@ export async function checkClientAuthenticated(): Promise<boolean> {
 }
 
 const PENDING_INVITE_KEY = "pendingInviteCode";
+const PENDING_INVITE_CAMPAIGN_KEY = "pendingInviteCampaign";
 
-export function setPendingInviteCode(code: string): void {
+export function setPendingInviteCode(code: string, search = ""): void {
   if (typeof window === "undefined") return;
+  // Replace, never merge: a new invite must not inherit the previous campaign.
+  sessionStorage.removeItem(PENDING_INVITE_CAMPAIGN_KEY);
   sessionStorage.setItem(PENDING_INVITE_KEY, code);
+  const campaign = inviteCampaignSearch(search);
+  if (campaign) sessionStorage.setItem(PENDING_INVITE_CAMPAIGN_KEY, campaign);
 }
 
 export function consumePendingInviteCode(): string | null {
   if (typeof window === "undefined") return null;
   const value = sessionStorage.getItem(PENDING_INVITE_KEY);
-  if (value) sessionStorage.removeItem(PENDING_INVITE_KEY);
+  sessionStorage.removeItem(PENDING_INVITE_KEY);
+  sessionStorage.removeItem(PENDING_INVITE_CAMPAIGN_KEY);
   return value;
 }
 
+function pendingInviteCampaign(): string {
+  if (typeof window === "undefined" || !sessionStorage.getItem(PENDING_INVITE_KEY)) return "";
+  return sessionStorage.getItem(PENDING_INVITE_CAMPAIGN_KEY) ?? "";
+}
+
+/** Only the invite authentication detour carries this context; ordinary login creates none. */
+export function pendingInviteAuthPath(path: "/login" | "/login/agreements" | `/login?error=${string}`): string {
+  return withInviteCampaign(path, pendingInviteCampaign());
+}
+
+export function pendingInviteReturnPath(): string | null {
+  if (typeof window === "undefined") return null;
+  const code = sessionStorage.getItem(PENDING_INVITE_KEY);
+  return code ? withInviteCampaign(`/join/${encodeURIComponent(code)}`, pendingInviteCampaign()) : null;
+}
diff --git a/src/lib/stomp/bookmarks-dispatch.test.ts b/src/lib/stomp/bookmarks-dispatch.test.ts
new file mode 100644
index 00000000..746d9166
--- /dev/null
+++ b/src/lib/stomp/bookmarks-dispatch.test.ts
@@ -0,0 +1,75 @@
+import { QueryClient } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { sessionUserQueryKey } from "@/lib/query-keys";
+import type { RoomBookmarkChangedEvent } from "@/types/roomBookmarkStomp";
+
+const mocks = vi.hoisted(() => ({
+  invalidateRoomBookmarkQueries: vi.fn(),
+}));
+
+vi.mock("@/lib/bookmarks-invalidation", () => ({
+  invalidateRoomBookmarkQueries: mocks.invalidateRoomBookmarkQueries,
+}));
+vi.mock("@/lib/tab-id", () => ({ getTabId: () => "tab-a" }));
+
+import { applyRoomBookmarkStompMessage } from "@/lib/stomp/bookmarks-dispatch";
+
+const ME = 7;
+
+/** 이 계정(ME)이 폴더를 추가한 이벤트 */
+function categoryCreated(originTabId: string | null | undefined): string {
+  const event: RoomBookmarkChangedEvent = {
+    roomId: "room-1",
+    actorUserId: ME,
+    type: "CATEGORY_CREATED",
+    bookmarkId: 0,
+    categoryId: 10,
+    originTabId,
+  };
+  return JSON.stringify(event);
+}
+
+describe("applyRoomBookmarkStompMessage — echo of this tab", () => {
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.invalidateRoomBookmarkQueries.mockResolvedValue(undefined);
+    queryClient = new QueryClient();
+    queryClient.setQueryData(sessionUserQueryKey, { id: ME });
+  });
+
+  afterEach(() => {
+    queryClient.clear();
+  });
+
+  it("skips a change sent from this tab", async () => {
+    await applyRoomBookmarkStompMessage(queryClient, categoryCreated("tab-a"));
+
+    expect(mocks.invalidateRoomBookmarkQueries).not.toHaveBeenCalled();
+  });
+
+  it("applies a change whose tab ID matches this tab but comes from another account", async () => {
+    queryClient.setQueryData(sessionUserQueryKey, { id: ME + 1 });
+
+    await applyRoomBookmarkStompMessage(queryClient, categoryCreated("tab-a"));
+
+    expect(mocks.invalidateRoomBookmarkQueries).toHaveBeenCalledOnce();
+  });
+
+  it("applies a change sent from another tab of the same account", async () => {
+    await applyRoomBookmarkStompMessage(queryClient, categoryCreated("tab-b"));
+
+    expect(mocks.invalidateRoomBookmarkQueries).toHaveBeenCalledOnce();
+  });
+
+  it.each([null, undefined])(
+    "applies a change of the same account without a tab ID (%s) — it may come from another tab",
+    async (originTabId) => {
+      await applyRoomBookmarkStompMessage(queryClient, categoryCreated(originTabId));
+
+      expect(mocks.invalidateRoomBookmarkQueries).toHaveBeenCalledOnce();
+    },
+  );
+});
diff --git a/src/lib/stomp/bookmarks-dispatch.tsx b/src/lib/stomp/bookmarks-dispatch.tsx
index 5fe9f2f9..d3510493 100644
--- a/src/lib/stomp/bookmarks-dispatch.tsx
+++ b/src/lib/stomp/bookmarks-dispatch.tsx
@@ -3,7 +3,7 @@
 import type { QueryClient } from "@tanstack/react-query";
 
 import { invalidateRoomBookmarkQueries } from "@/lib/bookmarks-invalidation";
-import { readSessionUserId } from "@/lib/session-user-cache";
+import { isOwnEcho } from "@/lib/stomp/own-echo";
 import type { RoomBookmarkChangedEvent } from "@/types/roomBookmarkStomp";
 
 /** bookmarks 토픽 STOMP — React Query 무효화만 (토스트·선 fetch 없음) */
@@ -15,13 +15,8 @@ export async function applyRoomBookmarkStompMessage(
   const rid = String(event.roomId ?? "").trim();
   if (!rid) return;
 
-  const me = readSessionUserId(queryClient);
-  const actorIsMe =
-    typeof me === "number" &&
-    Number.isFinite(me) &&
-    me === event.actorUserId;
-  /** 본인 mutation은 `onSuccess`에서 캐시 패치 */
-  if (actorIsMe) {
+  /** 본인 탭의 변경은 그 탭의 mutation이 캐시를 맞춘다 */
+  if (isOwnEcho(queryClient, event)) {
     return;
   }
 
diff --git a/src/lib/stomp/client.test.ts b/src/lib/stomp/client.test.ts
new file mode 100644
index 00000000..0e21e177
--- /dev/null
+++ b/src/lib/stomp/client.test.ts
@@ -0,0 +1,18 @@
+import { ReconnectionTimeMode } from "@stomp/stompjs";
+import { describe, expect, it } from "vitest";
+
+import {
+  createStompClient,
+  STOMP_MAX_RECONNECT_DELAY_MS,
+} from "@/lib/stomp/client";
+
+describe("createStompClient", () => {
+  it("delegates reconnecting to stompjs with a capped exponential backoff", () => {
+    const client = createStompClient("http://fixture.invalid/ws");
+
+    expect(client.reconnectTimeMode).toBe(ReconnectionTimeMode.EXPONENTIAL);
+    expect(client.maxReconnectDelay).toBe(STOMP_MAX_RECONNECT_DELAY_MS);
+    expect(client.reconnectDelay).toBeGreaterThanOrEqual(1_000);
+    expect(client.reconnectDelay).toBeLessThan(2_000);
+  });
+});
diff --git a/src/lib/stomp/client.ts b/src/lib/stomp/client.ts
index 9a87f56a..e36e37bb 100644
--- a/src/lib/stomp/client.ts
+++ b/src/lib/stomp/client.ts
@@ -1,8 +1,14 @@
-import { Client } from "@stomp/stompjs";
+import { Client, ReconnectionTimeMode } from "@stomp/stompjs";
 import SockJS from "sockjs-client";
 
 import { clientEnv } from "@/lib/client-env";
 
+/** 재연결 간격 상한 */
+export const STOMP_MAX_RECONNECT_DELAY_MS = 30_000;
+
+/** 끊긴 뒤 다시 연결을 이만큼 실패하면 멈춘다. 간격 합으로 약 1분 30초~2분 */
+export const STOMP_MAX_RECONNECT_ATTEMPTS = 7;
+
 /**
  * NEXT_PUBLIC_API_BASE_URL 기반으로 SockJS HTTP URL을 반환합니다.
  * 백엔드가 .withSockJS()로 설정되어 있으므로 ws:// 대신 http:// 를 사용합니다.
@@ -11,9 +17,13 @@ export function getStompBrokerURL(): string {
   return `${clientEnv.NEXT_PUBLIC_API_BASE_URL}/ws`;
 }
 
+/** 끊기면 stompjs가 지수 간격(1→2→4…초, 상한 30초)으로 다시 연결한다. 횟수 제한은 연결 effect가 맡는다 */
 export function createStompClient(httpURL: string): Client {
   return new Client({
     webSocketFactory: () => new SockJS(httpURL),
-    reconnectDelay: 0,
+    // 시작 간격을 탭마다 1~2초로 흩어, 함께 끊긴 탭들이 같은 순간 다시 붙지 않게 한다
+    reconnectDelay: 1_000 + Math.random() * 1_000,
+    reconnectTimeMode: ReconnectionTimeMode.EXPONENTIAL,
+    maxReconnectDelay: STOMP_MAX_RECONNECT_DELAY_MS,
   });
 }
diff --git a/src/lib/stomp/forced-room-exit-dispatch.ts b/src/lib/stomp/forced-room-exit-dispatch.ts
index 2ea701fd..5fc9cf65 100644
--- a/src/lib/stomp/forced-room-exit-dispatch.ts
+++ b/src/lib/stomp/forced-room-exit-dispatch.ts
@@ -39,6 +39,14 @@ export function showRoomLeftToast(roomId: string): void {
   toast.success("방에서 나갔어요.", { id: `room-left-${roomId.trim()}` });
 }
 
+/** 끊긴 동안 강퇴·방 삭제·다른 기기의 나가기를 놓쳐 접근을 잃은 경우 — 사유를 알 수 없어 중립 문구로 알린다 */
+export function showRoomAccessLostToast(roomId: string): void {
+  toast.error("방에 더 이상 접근할 수 없어요.", {
+    id: `room-access-lost-${roomId.trim()}`,
+    duration: FORCED_ROOM_EXIT_TOAST_MS,
+  });
+}
+
 /** 강퇴·방 삭제 시 홈 목록·방 단위 React Query 캐시에서 해당 roomId 제거 */
 export function evictRoomFromClientCaches(
   queryClient: QueryClient,
diff --git a/src/lib/stomp/members-dispatch.test.ts b/src/lib/stomp/members-dispatch.test.ts
new file mode 100644
index 00000000..c915d8fb
--- /dev/null
+++ b/src/lib/stomp/members-dispatch.test.ts
@@ -0,0 +1,76 @@
+import { QueryClient } from "@tanstack/react-query";
+import { afterEach, describe, expect, it } from "vitest";
+
+import type { RoomMember, RoomMemberListResponse } from "@/lib/api/rooms";
+import { roomMembersQueryKey } from "@/lib/query-keys";
+import type { RoomMemberPayload } from "@/lib/stomp/member-events";
+import { dispatchRoomMemberEvent } from "@/lib/stomp/members-dispatch";
+import { dispatchRoomPresence } from "@/lib/stomp/presence-dispatch";
+
+const ROOM_ID = "room";
+const KEY = roomMembersQueryKey(ROOM_ID);
+
+const member = (userId: number, isOnline = false): RoomMember => ({
+  userId,
+  nickname: `user-${userId}`,
+  profileImageUrl: null,
+  role: "MEMBER",
+  status: "ACTIVE",
+  joinedAt: "2026-10-25T00:00:00Z",
+  isOnline,
+});
+
+const joined = (userId: number): RoomMemberPayload => ({
+  type: "MEMBER_JOINED",
+  id: `event-${userId}`,
+  roomId: ROOM_ID,
+  createdAt: "2026-10-25T00:00:00Z",
+  detail: { userId, nickname: `user-${userId}` },
+});
+
+const clients: QueryClient[] = [];
+function clientWith(data?: RoomMemberListResponse) {
+  const client = new QueryClient();
+  clients.push(client);
+  if (data) client.setQueryData(KEY, data);
+  return client;
+}
+
+afterEach(() => {
+  for (const client of clients.splice(0)) client.clear();
+});
+
+describe("member cache patches", () => {
+  it("applies a member event to a valid list", () => {
+    const client = clientWith({ members: [member(1)] });
+
+    dispatchRoomMemberEvent(client, ROOM_ID, joined(2));
+
+    expect(client.getQueryData<RoomMemberListResponse>(KEY)?.members.map((m) => m.userId)).toEqual([1, 2]);
+  });
+
+  it("keeps the pending refetch of a list invalidated while off screen", async () => {
+    const client = clientWith({ members: [member(1)] });
+    await client.invalidateQueries({ queryKey: KEY, refetchType: "none" });
+
+    dispatchRoomMemberEvent(client, ROOM_ID, joined(2));
+    dispatchRoomPresence(client, ROOM_ID, {
+      type: "USER_CONNECTED",
+      userId: 1,
+      roomId: ROOM_ID,
+      nickname: null,
+      profileImageUrl: null,
+    });
+
+    expect(client.getQueryState(KEY)?.isInvalidated).toBe(true);
+    expect(client.getQueryData(KEY)).toEqual({ members: [member(1)] });
+  });
+
+  it("does not build a partial list before the member list was ever loaded", () => {
+    const client = clientWith();
+
+    dispatchRoomMemberEvent(client, ROOM_ID, joined(2));
+
+    expect(client.getQueryData(KEY)).toBeUndefined();
+  });
+});
diff --git a/src/lib/stomp/members-dispatch.tsx b/src/lib/stomp/members-dispatch.tsx
index 0a8b8ca7..572b4b1c 100644
--- a/src/lib/stomp/members-dispatch.tsx
+++ b/src/lib/stomp/members-dispatch.tsx
@@ -80,15 +80,22 @@ export function dispatchRoomMemberEvent(
   if (!rid) return;
   void queryClient.invalidateQueries({ queryKey: expenseKeys.members(rid) });
 
+  // 무효화돼 다시 받을 목록은 패치하지 않는다 — setQueryData가 '갱신 필요' 표시를 지워 재조회가 사라진다.
+  // 방 목록 역할(HOST_DELEGATED)은 따로 맞춘다
+  const membersAwaitingRefetch =
+    queryClient.getQueryState(roomMembersQueryKey(rid))?.isInvalidated === true;
+
   switch (event.type) {
     case "MEMBER_JOINED": {
       const d = event.detail;
-      if (!d) return;
+      if (!d || membersAwaitingRefetch) return;
 
       queryClient.setQueryData<RoomMemberListResponse>(
         roomMembersQueryKey(rid),
         (prev) => {
-          const members = prev?.members ?? [];
+          // 목록을 받은 적이 없으면 한 명짜리 목록을 만들지 않고 처음 조회에 맡긴다
+          if (!prev) return prev;
+          const members = prev.members;
           const joinedAt =
             event.createdAt.trim().length > 0
               ? event.createdAt
@@ -111,7 +118,7 @@ export function dispatchRoomMemberEvent(
               isOnline: true,
             },
           );
-          return prev ? { ...prev, members: next } : { members: next };
+          return { ...prev, members: next };
         },
       );
       break;
@@ -120,12 +127,13 @@ export function dispatchRoomMemberEvent(
     case "MEMBER_LEFT":
     case "MEMBER_KICKED": {
       const d = event.detail;
-      if (!d) return;
+      if (!d || membersAwaitingRefetch) return;
 
       queryClient.setQueryData<RoomMemberListResponse>(
         roomMembersQueryKey(rid),
         (prev) => {
-          const members = prev?.members ?? [];
+          if (!prev) return prev;
+          const members = prev.members;
           const idx = members.findIndex((m) => m.userId === d.userId);
           const display = memberDisplayPatch(d);
 
@@ -138,7 +146,7 @@ export function dispatchRoomMemberEvent(
               status: "LEFT",
               isOnline: false,
             };
-            return prev ? { ...prev, members: next } : { members: next };
+            return { ...prev, members: next };
           }
 
           const leftMember: RoomMember = {
@@ -153,9 +161,7 @@ export function dispatchRoomMemberEvent(
                 : new Date().toISOString(),
             isOnline: false,
           };
-          return {
-            members: [...members, leftMember],
-          };
+          return { ...prev, members: [...members, leftMember] };
         },
       );
       break;
@@ -165,22 +171,24 @@ export function dispatchRoomMemberEvent(
       const d = event.detail;
       if (!d) return;
 
-      queryClient.setQueryData<RoomMemberListResponse>(
-        roomMembersQueryKey(rid),
-        (prev) => {
-          if (!prev?.members?.length) return prev;
-          const members = prev.members.map((m) => {
-            if (m.userId === d.previousHostUserId) {
-              return { ...m, role: "MEMBER" as const };
-            }
-            if (m.userId === d.newHostUserId) {
-              return { ...m, role: "HOST" as const };
-            }
-            return m;
-          });
-          return { ...prev, members };
-        },
-      );
+      if (!membersAwaitingRefetch) {
+        queryClient.setQueryData<RoomMemberListResponse>(
+          roomMembersQueryKey(rid),
+          (prev) => {
+            if (!prev?.members?.length) return prev;
+            const members = prev.members.map((m) => {
+              if (m.userId === d.previousHostUserId) {
+                return { ...m, role: "MEMBER" as const };
+              }
+              if (m.userId === d.newHostUserId) {
+                return { ...m, role: "HOST" as const };
+              }
+              return m;
+            });
+            return { ...prev, members };
+          },
+        );
+      }
 
       patchRoomsRoleForHostDelegation(
         queryClient,
diff --git a/src/lib/stomp/own-echo.test.ts b/src/lib/stomp/own-echo.test.ts
new file mode 100644
index 00000000..ec90a607
--- /dev/null
+++ b/src/lib/stomp/own-echo.test.ts
@@ -0,0 +1,48 @@
+import { QueryClient } from "@tanstack/react-query";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { sessionUserQueryKey } from "@/lib/query-keys";
+
+const tab = vi.hoisted(() => ({ id: "tab-a" as string | null }));
+
+vi.mock("@/lib/tab-id", () => ({ getTabId: () => tab.id }));
+
+import { isOwnEcho } from "@/lib/stomp/own-echo";
+
+const ME = 7;
+const OTHER = 8;
+
+describe("isOwnEcho", () => {
+  const queryClient = new QueryClient();
+
+  afterEach(() => {
+    queryClient.clear();
+    tab.id = "tab-a";
+  });
+
+  it.each([
+    { name: "sent from this tab by me", originTabId: "tab-a", actorUserId: ME, expected: true },
+    { name: "sent from another tab of my account", originTabId: "tab-b", actorUserId: ME, expected: false },
+    // 탭 ID는 방 멤버 모두에게 보여 흉내 낼 수 있다 — 다른 계정이면 반향이 아니다
+    { name: "my tab ID forged by another account", originTabId: "tab-a", actorUserId: OTHER, expected: false },
+    // 탭 ID가 없으면 어느 탭 것인지 몰라 놓치지 않도록 받는다
+    { name: "no tab ID", originTabId: null, actorUserId: ME, expected: false },
+    { name: "tab ID field missing", originTabId: undefined, actorUserId: ME, expected: false },
+    { name: "empty tab ID", originTabId: "", actorUserId: ME, expected: false },
+  ])("$name → $expected", ({ originTabId, actorUserId, expected }) => {
+    queryClient.setQueryData(sessionUserQueryKey, { id: ME });
+
+    expect(isOwnEcho(queryClient, { actorUserId, originTabId })).toBe(expected);
+  });
+
+  it("does not match a tab-less event in a tab that could not make an ID", () => {
+    tab.id = null;
+    queryClient.setQueryData(sessionUserQueryKey, { id: ME });
+
+    expect(isOwnEcho(queryClient, { actorUserId: ME, originTabId: null })).toBe(false);
+  });
+
+  it("receives this tab's change while the session user is not loaded yet", () => {
+    expect(isOwnEcho(queryClient, { actorUserId: ME, originTabId: "tab-a" })).toBe(false);
+  });
+});
diff --git a/src/lib/stomp/own-echo.ts b/src/lib/stomp/own-echo.ts
new file mode 100644
index 00000000..0194f017
--- /dev/null
+++ b/src/lib/stomp/own-echo.ts
@@ -0,0 +1,21 @@
+import type { QueryClient } from "@tanstack/react-query";
+
+import { readSessionUserId } from "@/lib/session-user-cache";
+import { getTabId } from "@/lib/tab-id";
+
+type ChangeOrigin = {
+  actorUserId: number;
+  /** 변경 요청의 `X-Client-Tab-Id`. 헤더를 싣기 전 백엔드거나 탭 ID를 못 만든 탭의 변경이면 없다 */
+  originTabId?: string | null;
+};
+
+/**
+ * 이 탭이 보낸 변경의 반향인지 판정한다 — 반향이면 그 탭의 mutation이 이미 캐시를 맞춘다.
+ * 탭 ID가 없는 이벤트는 어느 탭의 변경인지 알 수 없어, 놓치지 않도록 다른 탭의 변경으로 받는다.
+ * 탭 ID는 방 멤버 모두에게 보이고 헤더로 흉내 낼 수 있어, 서버가 인증으로 정한 `actorUserId`도 나여야 반향으로 본다.
+ */
+export function isOwnEcho(queryClient: QueryClient, event: ChangeOrigin): boolean {
+  if (!event.originTabId || event.originTabId !== getTabId()) return false;
+  const me = readSessionUserId(queryClient);
+  return typeof me === "number" && me === event.actorUserId;
+}
diff --git a/src/lib/stomp/presence-dispatch.tsx b/src/lib/stomp/presence-dispatch.tsx
index 96789894..0c8f85d8 100644
--- a/src/lib/stomp/presence-dispatch.tsx
+++ b/src/lib/stomp/presence-dispatch.tsx
@@ -21,6 +21,11 @@ function patchMemberOnline(
   const rid = roomId.trim();
   if (!rid.length) return false;
 
+  // 무효화돼 다시 받을 목록은 패치하지 않는다 — setQueryData가 '갱신 필요' 표시를 지워 재조회가 사라진다
+  if (queryClient.getQueryState(roomMembersQueryKey(rid))?.isInvalidated) {
+    return false;
+  }
+
   const cached = queryClient.getQueryData<RoomMemberListResponse>(
     roomMembersQueryKey(rid),
   );
diff --git a/src/lib/stomp/room-resync-dispatch.test.ts b/src/lib/stomp/room-resync-dispatch.test.ts
new file mode 100644
index 00000000..719f95a0
--- /dev/null
+++ b/src/lib/stomp/room-resync-dispatch.test.ts
@@ -0,0 +1,77 @@
+import { QueryClient, QueryObserver } from "@tanstack/react-query";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { expenseKeys } from "@/lib/expenses/expense-queries";
+import {
+  bookmarkCategoriesQueryKey,
+  joinRequestsQueryKey,
+  roomSchedulesQueryKey,
+  roomUnreadCountQueryKey,
+} from "@/lib/query-keys";
+import {
+  resyncRoomDataAfterSubscribe,
+  resyncUserQueueDataAfterSubscribe,
+} from "./room-resync-dispatch";
+
+const clients: QueryClient[] = [];
+function newClient() {
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  clients.push(client);
+  return client;
+}
+
+afterEach(() => {
+  for (const client of clients.splice(0)) client.clear();
+});
+
+describe("resyncRoomDataAfterSubscribe", () => {
+  it("refetches shared room data on screen and only marks the rest for its next mount", async () => {
+    const client = newClient();
+    let scheduleFetches = 0;
+    const observer = new QueryObserver(client, {
+      queryKey: roomSchedulesQueryKey("room"),
+      queryFn: async () => {
+        scheduleFetches += 1;
+        return [];
+      },
+      staleTime: Infinity,
+    });
+    const stop = observer.subscribe(() => {});
+    await observer.refetch();
+    client.setQueryData(bookmarkCategoriesQueryKey("room"), []);
+    client.setQueryData(roomUnreadCountQueryKey("room"), { unreadCount: 0 });
+
+    resyncRoomDataAfterSubscribe(client, "room");
+
+    await expect.poll(() => scheduleFetches).toBe(2);
+    expect(client.getQueryState(bookmarkCategoriesQueryKey("room"))?.isInvalidated).toBe(true);
+    expect(client.getQueryState(roomUnreadCountQueryKey("room"))?.isInvalidated).toBe(true);
+    stop();
+  });
+
+  it("leaves other rooms and data that recovers on its own untouched", () => {
+    const client = newClient();
+    client.setQueryData(roomSchedulesQueryKey("other"), []);
+    client.setQueryData(expenseKeys.room("room"), []);
+    client.setQueryData(["packing", "room", 1], []);
+
+    resyncRoomDataAfterSubscribe(client, "room");
+
+    expect(client.getQueryState(roomSchedulesQueryKey("other"))?.isInvalidated).toBe(false);
+    expect(client.getQueryState(expenseKeys.room("room"))?.isInvalidated).toBe(false);
+    expect(client.getQueryState(["packing", "room", 1])?.isInvalidated).toBe(false);
+  });
+});
+
+describe("resyncUserQueueDataAfterSubscribe", () => {
+  it("marks every room's join requests for refetch", () => {
+    const client = newClient();
+    client.setQueryData(joinRequestsQueryKey("a"), []);
+    client.setQueryData(joinRequestsQueryKey("b"), []);
+
+    resyncUserQueueDataAfterSubscribe(client);
+
+    expect(client.getQueryState(joinRequestsQueryKey("a"))?.isInvalidated).toBe(true);
+    expect(client.getQueryState(joinRequestsQueryKey("b"))?.isInvalidated).toBe(true);
+  });
+});
diff --git a/src/lib/stomp/room-resync-dispatch.ts b/src/lib/stomp/room-resync-dispatch.ts
new file mode 100644
index 00000000..bf922a99
--- /dev/null
+++ b/src/lib/stomp/room-resync-dispatch.ts
@@ -0,0 +1,40 @@
+import type { QueryClient } from "@tanstack/react-query";
+
+import {
+  bookmarkCategoriesQueryKey,
+  joinRequestsRootQueryKey,
+  roomAllBookmarksQueryKey,
+  roomBookmarksByRoomRootQueryKey,
+  roomSchedulesQueryKey,
+  roomUnreadCountQueryKey,
+} from "@/lib/query-keys";
+
+/**
+ * 방 토픽을 (다시) 구독한 직후 — 구독하지 않던 동안(첫 연결 전·재연결·`/home` 이탈·방 전환) 놓친
+ * 브로드캐스트를 복구하려고 방 공용 데이터를 무효화한다. 화면에 있는 조회만 바로 다시 받고
+ * 나머지는 다시 볼 때 받는다. 서버(simple broker)는 구독 성립을 알리지 않아 SUBSCRIBE를 보낸 직후에
+ * 하므로 아주 짧은 틈은 남는다. 멤버는 presence 재동기화가, 가계부·채팅 목록은 각자 복구하고,
+ * 준비물은 개인 데이터라 넣지 않는다.
+ */
+export function resyncRoomDataAfterSubscribe(
+  queryClient: QueryClient,
+  roomId: string,
+): void {
+  const rid = roomId.trim();
+  if (!rid.length) return;
+
+  for (const queryKey of [
+    roomSchedulesQueryKey(rid),
+    bookmarkCategoriesQueryKey(rid),
+    roomBookmarksByRoomRootQueryKey(rid),
+    roomAllBookmarksQueryKey(rid),
+    roomUnreadCountQueryKey(rid),
+  ]) {
+    void queryClient.invalidateQueries({ queryKey });
+  }
+}
+
+/** 개인 큐(`/user/queue/rooms`)를 (다시) 구독한 직후 — 구독하지 않던 동안 놓친 입장 요청을 복구한다 */
+export function resyncUserQueueDataAfterSubscribe(queryClient: QueryClient): void {
+  void queryClient.invalidateQueries({ queryKey: joinRequestsRootQueryKey() });
+}
diff --git a/src/lib/stomp/schedule-events.ts b/src/lib/stomp/schedule-events.ts
index b4cf8bbb..7b7e0b84 100644
--- a/src/lib/stomp/schedule-events.ts
+++ b/src/lib/stomp/schedule-events.ts
@@ -16,6 +16,8 @@ export type RoomScheduleChangedEvent = {
   itemId: number | null;
   affectedRouteItemIds: number[] | null;
   scheduleIds: number[] | null;
+  /** 변경 요청을 보낸 탭 ID — 같으면 이 탭의 반향(`isOwnEcho`) */
+  originTabId?: string | null;
 };
 
 const KNOWN_TYPES = new Set<string>([
diff --git a/src/lib/stomp/schedules-dispatch.order.test.ts b/src/lib/stomp/schedules-dispatch.order.test.ts
new file mode 100644
index 00000000..9b7df890
--- /dev/null
+++ b/src/lib/stomp/schedules-dispatch.order.test.ts
@@ -0,0 +1,274 @@
+import { QueryClient, QueryObserver } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { RoomScheduleItem } from "@/lib/api/rooms/schedule-items";
+import type { PlanPlace } from "@/lib/plan/types";
+import {
+  roomSchedulesQueryKey,
+  scheduleItemsQueryKey,
+  sessionUserQueryKey,
+} from "@/lib/query-keys";
+import type { RoomScheduleChangedEvent } from "@/lib/stomp/schedule-events";
+
+const fixtures = vi.hoisted(() => ({
+  getScheduleItems: vi.fn(),
+  place: (itemId: number) => ({
+    id: `item-${itemId}`,
+    itemId,
+    googlePlaceId: `g${itemId}`,
+    title: `장소 ${itemId}`,
+  }),
+}));
+
+vi.mock("@/lib/api/rooms/schedule-items", () => ({
+  getScheduleItems: fixtures.getScheduleItems,
+}));
+vi.mock("@/lib/places/place-queries", () => ({
+  fetchPlacePreview: async (googlePlaceId: string) => ({
+    name: googlePlaceId,
+    formattedAddress: "",
+  }),
+}));
+vi.mock("@/lib/plan/schedule-bulk-hydration", async (importOriginal) => ({
+  ...await importOriginal<typeof import("@/lib/plan/schedule-bulk-hydration")>(),
+  buildPlanPlacesFromItemsWithPreviewEnrichment: async (
+    _queryClient: unknown,
+    items: RoomScheduleItem[],
+  ) =>
+    [...items]
+      .sort((a, b) => a.orderIndex - b.orderIndex)
+      .map((item) => fixtures.place(item.itemId)),
+  resolveScheduleItemsFromCacheOrHydrate: vi.fn(),
+}));
+vi.mock("@/lib/rooms", () => ({
+  syncRoomDetailFromServer: vi.fn(),
+}));
+vi.mock("@/lib/query-client", () => ({
+  getQueryClient: () => null,
+}));
+vi.mock("@/lib/tab-id", () => ({ getTabId: () => "tab-a" }));
+
+import {
+  removeScheduleItemFromPlanPlacesCache,
+  schedulePlanPlacesQueryOptions,
+} from "@/lib/plan/scheduleItemPlaces";
+import { dispatchRoomScheduleEvent } from "@/lib/stomp/schedules-dispatch";
+
+const ROOM_ID = "room-1";
+const SCHEDULE_ID = 10;
+const DAY_KEY = scheduleItemsQueryKey(ROOM_ID, SCHEDULE_ID);
+
+/** 서버가 돌려주는 일차 항목 — 넘긴 순서가 곧 `orderIndex` */
+const items = (...itemIds: number[]): RoomScheduleItem[] =>
+  itemIds.map((itemId, orderIndex) => ({
+    itemId,
+    scheduleId: SCHEDULE_ID,
+    googlePlaceId: `g${itemId}`,
+    startTime: null,
+    endTime: null,
+    orderIndex,
+    travelMode: "DRIVING",
+    createdAt: "",
+  }));
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((r) => {
+    resolve = r;
+  });
+  return { promise, resolve };
+}
+
+/** 늦게 도착한 응답이 캐시에 쓸 기회를 준다 */
+const settle = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+function remoteEvent(
+  type: RoomScheduleChangedEvent["type"],
+  itemId: number,
+): RoomScheduleChangedEvent {
+  return {
+    roomId: ROOM_ID,
+    actorUserId: 2,
+    type,
+    scheduleId: SCHEDULE_ID,
+    itemId,
+    affectedRouteItemIds: [],
+    scheduleIds: null,
+  };
+}
+
+describe("schedule day list refetch order", () => {
+  let client: QueryClient;
+  let unwatch: () => void;
+
+  // 일정 화면처럼 일차 목록을 보고 있는 구독자 — 무효화되면 바로 다시 받는다
+  const watchDayList = () => {
+    unwatch = new QueryObserver(
+      client,
+      schedulePlanPlacesQueryOptions(client, ROOM_ID, SCHEDULE_ID),
+    ).subscribe(() => {});
+  };
+  const dayItemIds = () =>
+    client.getQueryData<PlanPlace[]>(DAY_KEY)?.map((place) => place.itemId);
+
+  beforeEach(() => {
+    client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    unwatch = () => {};
+    fixtures.getScheduleItems.mockReset();
+  });
+
+  afterEach(() => {
+    unwatch();
+    client.clear();
+  });
+
+  it("keeps the latest order when the refetch for an earlier reorder answers last", async () => {
+    client.setQueryData(DAY_KEY, [100, 101, 102].map(fixtures.place));
+    watchDayList();
+    const afterFirstReorder = deferred<RoomScheduleItem[]>();
+    const afterSecondReorder = deferred<RoomScheduleItem[]>();
+    fixtures.getScheduleItems
+      .mockReturnValueOnce(afterFirstReorder.promise)
+      .mockReturnValueOnce(afterSecondReorder.promise);
+
+    const first = dispatchRoomScheduleEvent(
+      client,
+      remoteEvent("SCHEDULE_ITEMS_REORDERED", 101),
+    );
+    const second = dispatchRoomScheduleEvent(
+      client,
+      remoteEvent("SCHEDULE_ITEMS_REORDERED", 100),
+    );
+    await vi.waitFor(() =>
+      expect(fixtures.getScheduleItems).toHaveBeenCalledTimes(2),
+    );
+    afterSecondReorder.resolve(items(101, 102, 100));
+    afterFirstReorder.resolve(items(101, 100, 102));
+    await Promise.all([first, second]);
+    await settle();
+
+    expect(dayItemIds()).toEqual([101, 102, 100]);
+    // 앞선 조회는 취소되면서 요청도 끊긴다
+    const firstSignal = fixtures.getScheduleItems.mock.calls[0]?.[2] as AbortSignal;
+    expect(firstSignal.aborted).toBe(true);
+  });
+
+  it("does not bring back a place deleted while the refetch for its creation was slow", async () => {
+    client.setQueryData(DAY_KEY, [100, 101, 102].map(fixtures.place));
+    watchDayList();
+    const afterCreate = deferred<RoomScheduleItem[]>();
+    const afterDelete = deferred<RoomScheduleItem[]>();
+    fixtures.getScheduleItems
+      .mockReturnValueOnce(afterCreate.promise)
+      .mockReturnValueOnce(afterDelete.promise);
+
+    const created = dispatchRoomScheduleEvent(
+      client,
+      remoteEvent("SCHEDULE_ITEM_CREATED", 103),
+    );
+    const deleted = dispatchRoomScheduleEvent(
+      client,
+      remoteEvent("SCHEDULE_ITEM_DELETED", 103),
+    );
+    await vi.waitFor(() =>
+      expect(fixtures.getScheduleItems).toHaveBeenCalledTimes(2),
+    );
+    afterDelete.resolve(items(100, 101, 102));
+    afterCreate.resolve(items(100, 101, 102, 103));
+    await Promise.all([created, deleted]);
+    await settle();
+
+    expect(dayItemIds()).toEqual([100, 101, 102]);
+  });
+
+  it("restarts a first load that was sent before the event", async () => {
+    const beforeReorder = deferred<RoomScheduleItem[]>();
+    fixtures.getScheduleItems
+      .mockReturnValueOnce(beforeReorder.promise)
+      .mockResolvedValueOnce(items(101, 100));
+    watchDayList();
+    await vi.waitFor(() =>
+      expect(fixtures.getScheduleItems).toHaveBeenCalledOnce(),
+    );
+
+    await dispatchRoomScheduleEvent(
+      client,
+      remoteEvent("SCHEDULE_ITEMS_REORDERED", 101),
+    );
+    beforeReorder.resolve(items(100, 101));
+    await settle();
+
+    expect(fixtures.getScheduleItems).toHaveBeenCalledTimes(2);
+    expect(dayItemIds()).toEqual([101, 100]);
+  });
+
+  it("keeps the user's delete when the mutation's settled refetch replaces an older in-flight refetch", async () => {
+    client.setQueryData(DAY_KEY, [100, 101].map(fixtures.place));
+    watchDayList();
+    const beforeDelete = deferred<RoomScheduleItem[]>();
+    fixtures.getScheduleItems
+      .mockReturnValueOnce(beforeDelete.promise)
+      .mockResolvedValueOnce(items(100));
+
+    // 다른 사람의 변경으로 다시 받는 중에 본인 삭제 응답이 들어온다(useDeleteScheduleItem의 onSuccess → onSettled)
+    void client.invalidateQueries({ queryKey: DAY_KEY, exact: true });
+    removeScheduleItemFromPlanPlacesCache(client, ROOM_ID, SCHEDULE_ID, 101);
+    await client.invalidateQueries({ queryKey: DAY_KEY, exact: true });
+    beforeDelete.resolve(items(100, 101));
+    await settle();
+
+    expect(fixtures.getScheduleItems).toHaveBeenCalledTimes(2);
+    expect(dayItemIds()).toEqual([100]);
+  });
+
+  it("refetches a garbage-collected day list instead of rebuilding it from the whole-room copy", async () => {
+    // 101을 지우기 전에 받아 둔 일정 전체 — 일차 목록이 gc된 뒤에도 남아 있다
+    client.setQueryData(roomSchedulesQueryKey(ROOM_ID), [
+      {
+        scheduleId: SCHEDULE_ID,
+        roomId: ROOM_ID,
+        dayNumber: 1,
+        date: "2026-10-28",
+        createdAt: "",
+        items: items(100, 101, 102),
+      },
+    ]);
+    fixtures.getScheduleItems.mockResolvedValue(items(100, 102));
+
+    watchDayList();
+
+    await vi.waitFor(() => expect(dayItemIds()).toEqual([100, 102]));
+    expect(fixtures.getScheduleItems).toHaveBeenCalledOnce();
+  });
+
+  it("shows a reorder made in another tab of the same account", async () => {
+    // remoteEvent의 actorUserId(2)가 이 계정 — 예전에는 계정이 같아 버렸다
+    client.setQueryData(sessionUserQueryKey, { id: 2 });
+    client.setQueryData(DAY_KEY, [100, 101, 102].map(fixtures.place));
+    watchDayList();
+    fixtures.getScheduleItems.mockResolvedValue(items(102, 100, 101));
+
+    await dispatchRoomScheduleEvent(client, {
+      ...remoteEvent("SCHEDULE_ITEMS_REORDERED", 102),
+      originTabId: "tab-b",
+    });
+    await settle();
+
+    expect(fixtures.getScheduleItems).toHaveBeenCalledOnce();
+    expect(dayItemIds()).toEqual([102, 100, 101]);
+  });
+
+  it("fetches from the server when the day list is invalidated", async () => {
+    client.setQueryData(DAY_KEY, [100, 102].map(fixtures.place));
+    watchDayList();
+    fixtures.getScheduleItems.mockResolvedValue(items(100, 102, 103));
+
+    await client.invalidateQueries({
+      queryKey: DAY_KEY,
+      exact: true,
+      refetchType: "active",
+    });
+
+    expect(dayItemIds()).toEqual([100, 102, 103]);
+  });
+});
diff --git a/src/lib/stomp/schedules-dispatch.test.ts b/src/lib/stomp/schedules-dispatch.test.ts
index 5f5663b1..89bf39d4 100644
--- a/src/lib/stomp/schedules-dispatch.test.ts
+++ b/src/lib/stomp/schedules-dispatch.test.ts
@@ -1,62 +1,27 @@
 import { QueryClient } from "@tanstack/react-query";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import { sessionUserQueryKey } from "@/lib/query-keys";
+import { scheduleItemRouteQueryKey, sessionUserQueryKey } from "@/lib/query-keys";
 
 import type { RoomScheduleChangedEvent } from "@/lib/stomp/schedule-events";
 
 const mocks = vi.hoisted(() => ({
-  collectSegmentSourcesForCreate: vi.fn(),
-  collectSegmentSourcesForDelete: vi.fn(),
-  collectSegmentSourcesForReorder: vi.fn(),
-  getScheduleItems: vi.fn(),
-  invalidateScheduleItemRouteForSources: vi.fn(),
-  invalidateScheduleItemRouteForWholeSchedule: vi.fn(),
-  mergeOrRefetchSchedulePlanPlacesFromItems: vi.fn(),
-  readOrderedItemIdsFromScheduleItemsCache: vi.fn(),
-  refetchSchedulePlanPlacesIntoCache: vi.fn(),
-  removeRouteQueriesForDeletedItemSource: vi.fn(),
+  invalidateSchedulePlanPlaces: vi.fn(),
   syncAfterCrossScheduleItemMove: vi.fn(),
-}));
-
-vi.mock("@/lib/api/rooms/schedule-items", () => ({
-  getScheduleItems: mocks.getScheduleItems,
+  syncRoomDetailFromServer: vi.fn(),
 }));
 
 vi.mock("@/lib/plan/scheduleItemPlaces", () => ({
-  mergeOrRefetchSchedulePlanPlacesFromItems:
-    mocks.mergeOrRefetchSchedulePlanPlacesFromItems,
-  refetchSchedulePlanPlacesIntoCache: mocks.refetchSchedulePlanPlacesIntoCache,
+  invalidateSchedulePlanPlaces: mocks.invalidateSchedulePlanPlaces,
   syncAfterCrossScheduleItemMove: mocks.syncAfterCrossScheduleItemMove,
 }));
 
-vi.mock("@/lib/plan/scheduleStompRouteScope", () => ({
-  collectSegmentSourcesForCreate: mocks.collectSegmentSourcesForCreate,
-  collectSegmentSourcesForDelete: mocks.collectSegmentSourcesForDelete,
-  collectSegmentSourcesForReorder: mocks.collectSegmentSourcesForReorder,
-  invalidateScheduleItemRouteForSources:
-    mocks.invalidateScheduleItemRouteForSources,
-  invalidateScheduleItemRouteForWholeSchedule:
-    mocks.invalidateScheduleItemRouteForWholeSchedule,
-  readOrderedItemIdsFromScheduleItemsCache:
-    mocks.readOrderedItemIdsFromScheduleItemsCache,
-  removeRouteQueriesForDeletedItemSource:
-    mocks.removeRouteQueriesForDeletedItemSource,
-}));
-
 vi.mock("@/lib/rooms", () => ({
-  hydrateRoomSchedulesFromServer: vi.fn(),
-  syncRoomDetailFromServer: vi.fn(),
+  syncRoomDetailFromServer: mocks.syncRoomDetailFromServer,
 }));
 
-vi.mock("@/stores/plan-map-directions-epoch-store", () => ({
-  usePlanMapDirectionsEpochStore: {
-    getState: () => ({
-      bumpForDirections: vi.fn(),
-      bumpSegments: vi.fn(),
-    }),
-  },
-}));
+vi.mock("@/lib/tab-id", () => ({ getTabId: () => "tab-a" }));
+const MY_TAB_ID = "tab-a";
 
 import { dispatchRoomScheduleEvent } from "@/lib/stomp/schedules-dispatch";
 
@@ -77,17 +42,14 @@ function itemEvent(
 
 describe("dispatchRoomScheduleEvent", () => {
   let queryClient: QueryClient;
+  // 경로는 도착 항목까지 key에 있어 일정이 바뀌어도 무효화하지 않는다 — 순서가 바뀐 구간은 새 key로 받는다
+  const routeKey = scheduleItemRouteQueryKey("room-1", 10, 20, 21, "DRIVING");
 
   beforeEach(() => {
     queryClient = new QueryClient();
+    queryClient.setQueryData(routeKey, { travelMode: "DRIVING", distanceMeters: 100, durationSeconds: 60 });
     vi.clearAllMocks();
-    mocks.getScheduleItems.mockResolvedValue([]);
-    mocks.invalidateScheduleItemRouteForSources.mockResolvedValue(undefined);
-    mocks.invalidateScheduleItemRouteForWholeSchedule.mockResolvedValue(
-      undefined,
-    );
-    mocks.mergeOrRefetchSchedulePlanPlacesFromItems.mockResolvedValue(undefined);
-    mocks.refetchSchedulePlanPlacesIntoCache.mockResolvedValue(undefined);
+    mocks.invalidateSchedulePlanPlaces.mockResolvedValue(undefined);
     mocks.syncAfterCrossScheduleItemMove.mockResolvedValue(undefined);
   });
 
@@ -96,85 +58,28 @@ describe("dispatchRoomScheduleEvent", () => {
     queryClient.clear();
   });
 
-  it.each([false, true])("refetches ID-only time updates, including own-user tabs (%s)", async (ownUser) => {
+  it("refetches consecutive ID-only time updates once", async () => {
     vi.useFakeTimers();
-    if (ownUser) queryClient.setQueryData(sessionUserQueryKey, { id: 99 });
-    const rows = [{ itemId: 20, startTime: "23:00", endTime: "01:00" }];
-    mocks.getScheduleItems.mockResolvedValue(rows);
     const event = itemEvent("SCHEDULE_ITEM_UPDATED", []);
     await dispatchRoomScheduleEvent(queryClient, event);
     await dispatchRoomScheduleEvent(queryClient, event);
     await vi.runAllTimersAsync();
-    expect(mocks.getScheduleItems).toHaveBeenCalledExactlyOnceWith("room-1", 10);
-    expect(mocks.mergeOrRefetchSchedulePlanPlacesFromItems).toHaveBeenCalledWith(queryClient, "room-1", 10, rows);
-    expect(mocks.invalidateScheduleItemRouteForSources).not.toHaveBeenCalled();
-    expect(mocks.invalidateScheduleItemRouteForWholeSchedule).not.toHaveBeenCalled();
-  });
-
-  it("uses affectedRouteItemIds instead of calculating routes for a created item", async () => {
-    mocks.readOrderedItemIdsFromScheduleItemsCache.mockReturnValue([10, 20]);
-    mocks.collectSegmentSourcesForCreate.mockReturnValue({
-      sources: [10, 20],
-      useFallback: false,
-    });
-
-    await dispatchRoomScheduleEvent(
-      queryClient,
-      itemEvent("SCHEDULE_ITEM_CREATED", [777]),
-    );
 
-    expect(mocks.collectSegmentSourcesForCreate).not.toHaveBeenCalled();
-    expect(mocks.invalidateScheduleItemRouteForSources).toHaveBeenCalledWith(
-      queryClient,
-      "room-1",
-      10,
-      [777],
-    );
+    expect(mocks.invalidateSchedulePlanPlaces).toHaveBeenCalledExactlyOnceWith(queryClient, "room-1", 10);
+    expect(queryClient.getQueryState(routeKey)?.isInvalidated).toBe(false);
   });
 
-  it("uses affectedRouteItemIds instead of calculating routes for a deleted item", async () => {
-    mocks.collectSegmentSourcesForDelete.mockReturnValue({
-      sources: [10],
-      useFallback: false,
-    });
+  it.each(["SCHEDULE_ITEM_CREATED", "SCHEDULE_ITEM_DELETED", "SCHEDULE_ITEMS_REORDERED"] as const)(
+    "refetches the day list without invalidating route caches for %s",
+    async (type) => {
+      await dispatchRoomScheduleEvent(queryClient, itemEvent(type, [20]));
 
-    await dispatchRoomScheduleEvent(
-      queryClient,
-      itemEvent("SCHEDULE_ITEM_DELETED", [888]),
-    );
-
-    expect(mocks.collectSegmentSourcesForDelete).not.toHaveBeenCalled();
-    expect(mocks.invalidateScheduleItemRouteForSources).toHaveBeenCalledWith(
-      queryClient,
-      "room-1",
-      10,
-      [888],
-    );
-  });
+      expect(mocks.invalidateSchedulePlanPlaces).toHaveBeenCalledExactlyOnceWith(queryClient, "room-1", 10);
+      expect(queryClient.getQueryState(routeKey)?.isInvalidated).toBe(false);
+    },
+  );
 
-  it("uses affectedRouteItemIds instead of calculating routes after reorder", async () => {
-    vi.useFakeTimers();
-    mocks.collectSegmentSourcesForReorder.mockReturnValue({
-      sources: [10, 20],
-      useFallback: false,
-    });
-
-    await dispatchRoomScheduleEvent(
-      queryClient,
-      itemEvent("SCHEDULE_ITEMS_REORDERED", [999]),
-    );
-    await vi.runAllTimersAsync();
-
-    expect(mocks.collectSegmentSourcesForReorder).not.toHaveBeenCalled();
-    expect(mocks.invalidateScheduleItemRouteForSources).toHaveBeenCalledWith(
-      queryClient,
-      "room-1",
-      10,
-      [999],
-    );
-  });
-
-  it("passes affectedRouteItemIds through a cross-schedule move", async () => {
+  it("refetches both days after a cross-schedule move", async () => {
     const event = itemEvent("SCHEDULE_ITEM_MOVED", [11, 21, 20]);
     event.scheduleId = 20;
     event.scheduleIds = [10, 20];
@@ -186,21 +91,12 @@ describe("dispatchRoomScheduleEvent", () => {
       "room-1",
       10,
       20,
-      20,
-      [11, 21, 20],
     );
+    expect(queryClient.getQueryState(routeKey)?.isInvalidated).toBe(false);
   });
 
-  it("refreshes travel mode before invalidating affectedRouteItemIds", async () => {
+  it("refetches the day list after another member changes a travel mode, leaving route caches as they are", async () => {
     vi.useFakeTimers();
-    const order: string[] = [];
-    mocks.getScheduleItems.mockImplementation(async () => {
-      order.push("refetch");
-      return [];
-    });
-    mocks.invalidateScheduleItemRouteForSources.mockImplementation(async () => {
-      order.push("invalidate");
-    });
 
     await dispatchRoomScheduleEvent(
       queryClient,
@@ -208,52 +104,8 @@ describe("dispatchRoomScheduleEvent", () => {
     );
     await vi.runAllTimersAsync();
 
-    expect(order).toEqual(["refetch", "invalidate"]);
-    expect(mocks.invalidateScheduleItemRouteForSources).toHaveBeenCalledWith(
-      queryClient,
-      "room-1",
-      10,
-      [20],
-    );
-  });
-
-  it("preserves a newer route bucket when an earlier travel-mode refresh fails", async () => {
-    vi.useFakeTimers();
-    let rejectFirst!: (reason?: unknown) => void;
-    let resolveSecond!: (value: never[]) => void;
-    const first = new Promise<never[]>((_, reject) => {
-      rejectFirst = reject;
-    });
-    const second = new Promise<never[]>((resolve) => {
-      resolveSecond = resolve;
-    });
-    mocks.getScheduleItems
-      .mockReturnValueOnce(first)
-      .mockReturnValueOnce(second);
-
-    await dispatchRoomScheduleEvent(
-      queryClient,
-      itemEvent("SCHEDULE_ITEM_TRAVEL_MODE_UPDATED", [20]),
-    );
-    await vi.advanceTimersByTimeAsync(90);
-
-    await dispatchRoomScheduleEvent(
-      queryClient,
-      itemEvent("SCHEDULE_ITEM_TRAVEL_MODE_UPDATED", [30]),
-    );
-    await vi.advanceTimersByTimeAsync(90);
-
-    rejectFirst(new Error("first refresh failed"));
-    resolveSecond([]);
-    await vi.runAllTimersAsync();
-
-    expect(mocks.invalidateScheduleItemRouteForSources).toHaveBeenCalledTimes(1);
-    expect(mocks.invalidateScheduleItemRouteForSources).toHaveBeenCalledWith(
-      queryClient,
-      "room-1",
-      10,
-      [30],
-    );
+    expect(mocks.invalidateSchedulePlanPlaces).toHaveBeenCalledExactlyOnceWith(queryClient, "room-1", 10);
+    expect(queryClient.getQueryState(routeKey)?.isInvalidated).toBe(false);
   });
 });
 
@@ -267,3 +119,86 @@ describe("expense synchronization on existing schedule events",()=>{
   client.clear();
  });
 });
+
+describe("echo of this tab vs. other tabs of the same account", () => {
+  const SKIPPABLE_TYPES = [
+    "ROOM_SCHEDULES_RESYNCED",
+    "SCHEDULE_ITEM_MOVED",
+    "SCHEDULE_ITEM_DELETED",
+    "SCHEDULE_ITEM_CREATED",
+    "SCHEDULE_ITEMS_REORDERED",
+    "SCHEDULE_ITEM_TRAVEL_MODE_UPDATED",
+  ] as const;
+  let queryClient: QueryClient;
+
+  /** itemEvent의 actorUserId(99)가 이 계정이다 */
+  function ownAccountEvent(
+    type: RoomScheduleChangedEvent["type"],
+    originTabId: string | null,
+  ): RoomScheduleChangedEvent {
+    return { ...itemEvent(type, [20]), scheduleIds: [10, 11], originTabId };
+  }
+
+  /** 일차 목록·일정 전체·방 상세 중 어느 것이든 다시 받은 횟수 */
+  const refetchCount = () =>
+    mocks.invalidateSchedulePlanPlaces.mock.calls.length +
+    mocks.syncAfterCrossScheduleItemMove.mock.calls.length +
+    mocks.syncRoomDetailFromServer.mock.calls.length;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+    mocks.invalidateSchedulePlanPlaces.mockResolvedValue(undefined);
+    mocks.syncAfterCrossScheduleItemMove.mockResolvedValue(undefined);
+    queryClient = new QueryClient();
+    queryClient.setQueryData(sessionUserQueryKey, { id: 99 });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    queryClient.clear();
+  });
+
+  it.each(SKIPPABLE_TYPES)("skips %s sent from this tab", async (type) => {
+    await dispatchRoomScheduleEvent(queryClient, ownAccountEvent(type, MY_TAB_ID));
+    await vi.runAllTimersAsync();
+
+    expect(refetchCount()).toBe(0);
+  });
+
+  it.each(SKIPPABLE_TYPES)("applies %s sent from another tab of the same account", async (type) => {
+    await dispatchRoomScheduleEvent(queryClient, ownAccountEvent(type, "tab-b"));
+    await vi.runAllTimersAsync();
+
+    expect(refetchCount()).toBe(1);
+  });
+
+  it.each(SKIPPABLE_TYPES)("applies %s of the same account without a tab ID — it may come from another tab", async (type) => {
+    await dispatchRoomScheduleEvent(queryClient, ownAccountEvent(type, null));
+    await vi.runAllTimersAsync();
+
+    expect(refetchCount()).toBe(1);
+  });
+
+  it("applies a change whose tab ID matches this tab but comes from another account", async () => {
+    queryClient.setQueryData(sessionUserQueryKey, { id: 100 });
+
+    await dispatchRoomScheduleEvent(queryClient, ownAccountEvent("SCHEDULE_ITEM_DELETED", MY_TAB_ID));
+
+    expect(refetchCount()).toBe(1);
+  });
+
+  it("skips a time update sent from this tab — its own settled refetch already has it", async () => {
+    await dispatchRoomScheduleEvent(queryClient, ownAccountEvent("SCHEDULE_ITEM_UPDATED", MY_TAB_ID));
+    await vi.runAllTimersAsync();
+
+    expect(mocks.invalidateSchedulePlanPlaces).not.toHaveBeenCalled();
+  });
+
+  it.each(["tab-b", null])("refetches a time update of the same account from another tab (%s)", async (originTabId) => {
+    await dispatchRoomScheduleEvent(queryClient, ownAccountEvent("SCHEDULE_ITEM_UPDATED", originTabId));
+    await vi.runAllTimersAsync();
+
+    expect(mocks.invalidateSchedulePlanPlaces).toHaveBeenCalledExactlyOnceWith(queryClient, "room-1", 10);
+  });
+});
diff --git a/src/lib/stomp/schedules-dispatch.ts b/src/lib/stomp/schedules-dispatch.ts
index cfa53dd2..3a10e7ea 100644
--- a/src/lib/stomp/schedules-dispatch.ts
+++ b/src/lib/stomp/schedules-dispatch.ts
@@ -2,190 +2,36 @@ import { invalidateExpenses } from "@/lib/expenses/expense-queries";
 import type { QueryClient } from "@tanstack/react-query";
 
 import {
-  mergeOrRefetchSchedulePlanPlacesFromItems,
-  refetchSchedulePlanPlacesIntoCache,
+  invalidateSchedulePlanPlaces,
   syncAfterCrossScheduleItemMove,
 } from "@/lib/plan/scheduleItemPlaces";
-import { getScheduleItems } from "@/lib/api/rooms/schedule-items";
-import {
-  invalidateScheduleItemRouteForSources,
-  invalidateScheduleItemRouteForWholeSchedule,
-  removeRouteQueriesForDeletedItemSource,
-} from "@/lib/plan/scheduleStompRouteScope";
-import {
-  hydrateRoomSchedulesFromServer,
-  syncRoomDetailFromServer,
-} from "@/lib/rooms";
+import { roomSchedulesQueryKey } from "@/lib/query-keys";
+import { syncRoomDetailFromServer } from "@/lib/rooms";
+import { isOwnEcho } from "@/lib/stomp/own-echo";
 import type { RoomScheduleChangedEvent } from "@/lib/stomp/schedule-events";
-import { readSessionUserId } from "@/lib/session-user-cache";
-import { usePlanMapDirectionsEpochStore } from "@/stores/plan-map-directions-epoch-store";
-
-async function refetchScheduleItemsPlaces(
-  queryClient: QueryClient,
-  roomId: string,
-  scheduleId: number,
-): Promise<void> {
-  await refetchSchedulePlanPlacesIntoCache(queryClient, roomId, scheduleId);
-}
-
-function bumpMapForRouteSources(
-  roomId: string,
-  scheduleId: number,
-  sourceItemIds: number[],
-): void {
-  if (sourceItemIds.length === 0) return;
-  usePlanMapDirectionsEpochStore.getState().bumpSegments(
-    roomId,
-    sourceItemIds.map((segmentSourceItemId) => ({
-      scheduleId,
-      segmentSourceItemId,
-    })),
-  );
-}
-
-type DebouncedRouteInvBucket =
-  | { scope: "whole" }
-  | { scope: "sources"; ids: Set<number> };
-
-/** 리오더 시 같은 구간 무효화를 짧게 묶어 `/route` 이중 패치를 줄임 */
-const scheduleRouteInvalidateDebounceTimers = new Map<
-  string,
-  ReturnType<typeof setTimeout>
->();
-const scheduleRouteInvalidatePending = new Map<string, DebouncedRouteInvBucket>();
-const DEBOUNCE_SCHEDULE_ROUTE_INVALIDATE_MS = 100;
-
-function mergeRouteInvalidateBucket(
-  prev: DebouncedRouteInvBucket | undefined,
-  sourcesToAdd: number[],
-  forceWholeSchedule: boolean,
-): DebouncedRouteInvBucket {
-  if (forceWholeSchedule || prev?.scope === "whole") {
-    return { scope: "whole" };
-  }
-  const ids =
-    prev?.scope === "sources" ? prev.ids : new Set<number>();
-  for (const id of sourcesToAdd) {
-    ids.add(id);
-  }
-  return { scope: "sources", ids };
-}
-
-function enqueueDebouncedInvalidateScheduleRoutes(
-  queryClient: QueryClient,
-  rid: string,
-  sid: number,
-  sourcesForInvalidation: number[],
-  forceWholeSchedule: boolean,
-): void {
-  const mapKey = `${rid}:${sid}`;
-  scheduleRouteInvalidatePending.set(
-    mapKey,
-    mergeRouteInvalidateBucket(
-      scheduleRouteInvalidatePending.get(mapKey),
-      sourcesForInvalidation,
-      forceWholeSchedule,
-    ),
-  );
-  const existing = scheduleRouteInvalidateDebounceTimers.get(mapKey);
-  if (existing !== undefined) clearTimeout(existing);
-
-  scheduleRouteInvalidateDebounceTimers.set(
-    mapKey,
-    setTimeout(() => {
-      scheduleRouteInvalidateDebounceTimers.delete(mapKey);
-      const epochStore = usePlanMapDirectionsEpochStore.getState();
-      const bucket = scheduleRouteInvalidatePending.get(mapKey);
-      scheduleRouteInvalidatePending.delete(mapKey);
-      if (!bucket) return;
-      void (async () => {
-        if (bucket.scope === "whole") {
-          await invalidateScheduleItemRouteForWholeSchedule(
-            queryClient,
-            rid,
-            sid,
-          );
-          epochStore.bumpForDirections(rid);
-        } else if (bucket.ids.size > 0) {
-          const sources = [...bucket.ids];
-          await invalidateScheduleItemRouteForSources(
-            queryClient,
-            rid,
-            sid,
-            sources,
-          );
-          bumpMapForRouteSources(rid, sid, sources);
-        }
-      })();
-    }, DEBOUNCE_SCHEDULE_ROUTE_INVALIDATE_MS),
-  );
-}
 
 /** 연속 일정 항목 동기화(GET items)를 한 번으로 묶음 — `SCHEDULE_ITEM_UPDATED` 전용 */
 const syncSchedulePlacesFromItemsDebouncers = new Map<
   string,
   ReturnType<typeof setTimeout>
 >();
-const syncSchedulePlacesRouteInvalidationPending = new Map<
-  string,
-  DebouncedRouteInvBucket
->();
 const DEBOUNCE_ITEMS_GET_MS = 90;
 
 function enqueueDebouncedHydratePlacesFromScheduleItemsApi(
   queryClient: QueryClient,
   rid: string,
   sid: number,
-  affectedRouteItemIds?: number[] | null,
 ): void {
   const mapKey = `${rid}:${sid}`;
-  if (affectedRouteItemIds !== undefined) {
-    syncSchedulePlacesRouteInvalidationPending.set(
-      mapKey,
-      mergeRouteInvalidateBucket(
-        syncSchedulePlacesRouteInvalidationPending.get(mapKey),
-        affectedRouteItemIds ?? [],
-        affectedRouteItemIds === null,
-      ),
-    );
-  }
   const pending = syncSchedulePlacesFromItemsDebouncers.get(mapKey);
   if (pending !== undefined) clearTimeout(pending);
   syncSchedulePlacesFromItemsDebouncers.set(
     mapKey,
     setTimeout(() => {
       syncSchedulePlacesFromItemsDebouncers.delete(mapKey);
-      const routeBucket =
-        syncSchedulePlacesRouteInvalidationPending.get(mapKey);
-      syncSchedulePlacesRouteInvalidationPending.delete(mapKey);
       void (async () => {
         try {
-          const rows = await getScheduleItems(rid, sid);
-          await mergeOrRefetchSchedulePlanPlacesFromItems(
-            queryClient,
-            rid,
-            sid,
-            rows,
-          );
-          if (routeBucket?.scope === "whole") {
-            await invalidateScheduleItemRouteForWholeSchedule(
-              queryClient,
-              rid,
-              sid,
-            );
-            usePlanMapDirectionsEpochStore
-              .getState()
-              .bumpForDirections(rid);
-          } else if (routeBucket && routeBucket.ids.size > 0) {
-            const sources = [...routeBucket.ids];
-            await invalidateScheduleItemRouteForSources(
-              queryClient,
-              rid,
-              sid,
-              sources,
-            );
-            bumpMapForRouteSources(rid, sid, sources);
-          }
+          await invalidateSchedulePlanPlaces(queryClient, rid, sid);
         } catch {
           //
         }
@@ -196,12 +42,13 @@ function enqueueDebouncedHydratePlacesFromScheduleItemsApi(
 
 /**
  * Plan 화면 등이 쓰는 캐시만, 스키마의 `type`별로 갱신합니다.
- * — `ROOM_SCHEDULES_RESYNCED`: `room-schedules` 전체 재조회 + 방 상세 동기화 (원격 탭; 액터는 mutation `onSuccess`)
- * — `schedule-items`: 일차별 장소 목록
- * — `schedule-item-route`: `itemId`·인접 구간의 `segmentSourceItemId`만 무효화(폴백 시 일정 전체)
- * — `SCHEDULE_ITEM_UPDATED`: 일정 목록만 동기화할 때 사용(본인 이벤트 포함); 경로(`schedule-item-route`)는 무효화하지 않음
- * — `SCHEDULE_ITEM_TRAVEL_MODE_UPDATED`: 공유 이동수단 변경 — 일정 목록만 동기화(경로 캐시는 수단별 키로 유지)
- * — 맵 polyline: 구간별 에폭(`bumpSegments`); 폴백 시 방 단위(`bumpForDirections`)
+ * — 이 탭이 보낸 변경의 반향(`isOwnEcho`)은 건너뛴다. 그 탭의 mutation이 캐시를 맞춘다.
+ *   같은 계정의 다른 탭과 탭 ID가 없는 변경은 다른 사람의 변경처럼 받는다
+ * — `ROOM_SCHEDULES_RESYNCED`: `room-schedules` 전체 재조회 + 방 상세 동기화
+ * — `schedule-items`: 그 일차 장소 목록을 무효화해 다시 받는다(보는 화면이 없으면 그 화면에 들어갈 때)
+ * — `schedule-item-route`: 무효화하지 않는다 — key에 도착 항목·이동수단이 있어, 순서·수단이 바뀐 구간은
+ *   새 목록을 그릴 때 새 key로 받고 되돌리면 받아 둔 값을 쓴다
+ * — `SCHEDULE_ITEM_UPDATED`·`SCHEDULE_ITEM_TRAVEL_MODE_UPDATED`: 연속 이벤트를 모아 그 일차를 한 번만 다시 받는다
  */
 export async function dispatchRoomScheduleEvent(
   queryClient: QueryClient,
@@ -216,21 +63,12 @@ export async function dispatchRoomScheduleEvent(
   ) {
     await invalidateExpenses(queryClient, rid);
   }
-  const epochStore = usePlanMapDirectionsEpochStore.getState();
+  if (isOwnEcho(queryClient, event)) return;
 
   switch (event.type) {
     case "ROOM_SCHEDULES_RESYNCED": {
-      const me = readSessionUserId(queryClient);
-      const actorIsMe =
-        typeof me === "number" &&
-        Number.isFinite(me) &&
-        me === event.actorUserId;
-      /** 본인 mutation은 `onSuccess`에서 schedules·room-detail 캐시 갱신 */
-      if (actorIsMe) {
-        return;
-      }
-
-      await hydrateRoomSchedulesFromServer(queryClient, rid);
+      // 일정 전체 재조회는 room-schedules 조회 하나로 한다 — 진행 중인 옛 조회가 취소돼 새 일정을 덮지 않는다
+      await queryClient.invalidateQueries({ queryKey: roomSchedulesQueryKey(rid) });
       await syncRoomDetailFromServer(queryClient, rid);
       return;
     }
@@ -241,24 +79,12 @@ export async function dispatchRoomScheduleEvent(
 
       const sourceScheduleId = scheduleIds[0]!;
       const targetScheduleId = scheduleIds[1]!;
-      const itemId = event.itemId;
-
-      const me = readSessionUserId(queryClient);
-      const actorIsMe =
-        typeof me === "number" &&
-        Number.isFinite(me) &&
-        me === event.actorUserId;
-      if (actorIsMe) {
-        return;
-      }
 
       await syncAfterCrossScheduleItemMove(
         queryClient,
         rid,
         sourceScheduleId,
         targetScheduleId,
-        itemId ?? undefined,
-        event.affectedRouteItemIds,
       );
       return;
     }
@@ -268,34 +94,7 @@ export async function dispatchRoomScheduleEvent(
       const itemId = event.itemId;
       if (sid == null || itemId == null) return;
 
-      const me = readSessionUserId(queryClient);
-      const actorIsMe =
-        typeof me === "number" &&
-        Number.isFinite(me) &&
-        me === event.actorUserId;
-      /** 본인 mutation은 `applyScheduleItemDeletedOnClient`에서 캐시·route 처리 */
-      if (actorIsMe) {
-        return;
-      }
-
-      removeRouteQueriesForDeletedItemSource(queryClient, rid, sid, itemId);
-
-      const items = await getScheduleItems(rid, sid);
-      await mergeOrRefetchSchedulePlanPlacesFromItems(
-        queryClient,
-        rid,
-        sid,
-        items,
-      );
-
-      const sources = event.affectedRouteItemIds;
-      if (sources === null) {
-        await invalidateScheduleItemRouteForWholeSchedule(queryClient, rid, sid);
-        epochStore.bumpForDirections(rid);
-      } else {
-        await invalidateScheduleItemRouteForSources(queryClient, rid, sid, sources);
-        bumpMapForRouteSources(rid, sid, sources);
-      }
+      await invalidateSchedulePlanPlaces(queryClient, rid, sid);
       return;
     }
 
@@ -304,26 +103,7 @@ export async function dispatchRoomScheduleEvent(
       const itemId = event.itemId;
       if (sid == null || itemId == null) return;
 
-      const me = readSessionUserId(queryClient);
-      const actorIsMe =
-        typeof me === "number" &&
-        Number.isFinite(me) &&
-        me === event.actorUserId;
-      /** 본인 mutation은 append/reorder 직후 구간 단위 무효화 — STOMP 선도착 시 일정 전체 `/route` 폭주 방지 */
-      if (actorIsMe) {
-        return;
-      }
-
-      await refetchScheduleItemsPlaces(queryClient, rid, sid);
-
-      const sources = event.affectedRouteItemIds;
-      if (sources === null) {
-        await invalidateScheduleItemRouteForWholeSchedule(queryClient, rid, sid);
-        epochStore.bumpForDirections(rid);
-      } else {
-        await invalidateScheduleItemRouteForSources(queryClient, rid, sid, sources);
-        bumpMapForRouteSources(rid, sid, sources);
-      }
+      await invalidateSchedulePlanPlaces(queryClient, rid, sid);
       return;
     }
 
@@ -332,31 +112,7 @@ export async function dispatchRoomScheduleEvent(
       const itemId = event.itemId;
       if (sid == null || itemId == null) return;
 
-      const me = readSessionUserId(queryClient);
-      const actorIsMe =
-        typeof me === "number" &&
-        Number.isFinite(me) &&
-        me === event.actorUserId;
-      /** 본인 mutation은 `syncPlanPlacesAfterReorderSuccess` 직후 구간 무효화 */
-      if (actorIsMe) {
-        return;
-      }
-
-      const items = await getScheduleItems(rid, sid);
-      await mergeOrRefetchSchedulePlanPlacesFromItems(
-        queryClient,
-        rid,
-        sid,
-        items,
-      );
-      const sources = event.affectedRouteItemIds;
-      enqueueDebouncedInvalidateScheduleRoutes(
-        queryClient,
-        rid,
-        sid,
-        sources ?? [],
-        sources === null,
-      );
+      await invalidateSchedulePlanPlaces(queryClient, rid, sid);
       return;
     }
 
@@ -365,7 +121,6 @@ export async function dispatchRoomScheduleEvent(
       const itemId = event.itemId;
       if (sid == null || itemId == null) return;
 
-      // 같은 사용자의 다른 탭도 이 이벤트를 받으므로 HTTP 응답과 무관하게 목록을 동기화합니다.
       enqueueDebouncedHydratePlacesFromScheduleItemsApi(queryClient, rid, sid);
       return;
     }
@@ -375,23 +130,7 @@ export async function dispatchRoomScheduleEvent(
       const itemId = event.itemId;
       if (sid == null || itemId == null) return;
 
-      const me = readSessionUserId(queryClient);
-      const actorIsMe =
-        typeof me === "number" &&
-        Number.isFinite(me) &&
-        event.actorUserId === me;
-      /** 본인 PATCH는 mutation `onSuccess`에서 `schedule-items` 캐시 갱신 */
-      if (actorIsMe) {
-        return;
-      }
-
-      /** 항목 재조회 후 서버가 지정한 출발 항목의 경로만 갱신합니다. */
-      enqueueDebouncedHydratePlacesFromScheduleItemsApi(
-        queryClient,
-        rid,
-        sid,
-        event.affectedRouteItemIds,
-      );
+      enqueueDebouncedHydratePlacesFromScheduleItemsApi(queryClient, rid, sid);
       return;
     }
   }
diff --git a/src/lib/stomp/stomp-session-recovery.test.ts b/src/lib/stomp/stomp-session-recovery.test.ts
new file mode 100644
index 00000000..a7f2c55c
--- /dev/null
+++ b/src/lib/stomp/stomp-session-recovery.test.ts
@@ -0,0 +1,104 @@
+import { QueryClient } from "@tanstack/react-query";
+import type { Client } from "@stomp/stompjs";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  expire: vi.fn(),
+  fetchUser: vi.fn(),
+  setUser: vi.fn(),
+}));
+
+vi.mock("@/lib/auth-session-client", () => ({
+  expireClientSessionAndRedirect: mocks.expire,
+}));
+vi.mock("@/lib/session-user", () => ({
+  fetchSessionUserRaw: mocks.fetchUser,
+}));
+vi.mock("@/lib/session-user-cache", () => ({
+  setSessionUserCache: mocks.setUser,
+}));
+
+import { refreshSessionBeforeReconnect } from "@/lib/stomp/stomp-session-recovery";
+
+const fetchMock = vi.fn<typeof fetch>();
+
+function setup(isActive = true) {
+  const client = { deactivate: vi.fn(() => Promise.resolve()) };
+  const queryClient = new QueryClient();
+  const run = () =>
+    refreshSessionBeforeReconnect({
+      client: client as unknown as Client,
+      queryClient,
+      isActive: () => isActive,
+    });
+  return { client, queryClient, run };
+}
+
+beforeEach(() => {
+  // probeClientSession은 브라우저에서만 세션을 확인한다
+  vi.stubGlobal("window", {});
+  vi.stubGlobal("fetch", fetchMock);
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  fetchMock.mockReset();
+  vi.clearAllMocks();
+});
+
+describe("refreshSessionBeforeReconnect", () => {
+  it("stops reconnecting and expires the client session when the session is gone", async () => {
+    fetchMock.mockResolvedValueOnce(new Response(null, { status: 401 }));
+    const { client, queryClient, run } = setup();
+
+    await run();
+
+    expect(client.deactivate).toHaveBeenCalledOnce();
+    expect(mocks.expire).toHaveBeenCalledWith({ queryClient });
+  });
+
+  it("syncs the session user before reconnecting with a valid session", async () => {
+    fetchMock.mockResolvedValueOnce(new Response(null, { status: 200 }));
+    const user = { id: 1 };
+    mocks.fetchUser.mockResolvedValueOnce(user);
+    const { client, queryClient, run } = setup();
+
+    await run();
+
+    expect(mocks.setUser).toHaveBeenCalledWith(queryClient, user);
+    expect(client.deactivate).not.toHaveBeenCalled();
+  });
+
+  it.each([503, 500])(
+    "lets stompjs attempt the connection when the session check returns %i",
+    async (status) => {
+      fetchMock.mockResolvedValueOnce(new Response(null, { status }));
+      const { client, run } = setup();
+
+      await run();
+
+      expect(client.deactivate).not.toHaveBeenCalled();
+      expect(mocks.expire).not.toHaveBeenCalled();
+    },
+  );
+
+  it("treats a network failure as transient", async () => {
+    fetchMock.mockRejectedValueOnce(new TypeError("Failed to fetch"));
+    const { client, run } = setup();
+
+    await expect(run()).resolves.toBeUndefined();
+
+    expect(client.deactivate).not.toHaveBeenCalled();
+    expect(mocks.expire).not.toHaveBeenCalled();
+  });
+
+  it("does nothing when the connection was torn down while checking", async () => {
+    fetchMock.mockResolvedValueOnce(new Response(null, { status: 401 }));
+    const { client, run } = setup(false);
+
+    await run();
+
+    expect(client.deactivate).not.toHaveBeenCalled();
+    expect(mocks.expire).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/lib/stomp/stomp-session-recovery.ts b/src/lib/stomp/stomp-session-recovery.ts
index 9998fd89..5d833597 100644
--- a/src/lib/stomp/stomp-session-recovery.ts
+++ b/src/lib/stomp/stomp-session-recovery.ts
@@ -4,17 +4,12 @@ import type { Client } from "@stomp/stompjs";
 import { expireClientSessionAndRedirect } from "@/lib/auth-session-client";
 import { fetchSessionUserRaw } from "@/lib/session-user";
 import { setSessionUserCache } from "@/lib/session-user-cache";
-import {
-  isStompAutoRecoverySuspended,
-  STOMP_CONNECTION_ISSUE_MESSAGE,
-  useStompConnectionStore,
-} from "@/stores/stomp-connection-store";
 
 /** 백엔드 access 만료 시 WebSocket close code (분기·로깅 참고용) */
 export const STOMP_ACCESS_TOKEN_EXPIRED_CLOSE_CODE = 4001;
 
-export const SESSION_PROBE_MAX_ATTEMPTS = 10;
-export const SESSION_PROBE_RETRY_DELAY_MS = 5000;
+/** 세션 확인이 응답 없이 매달리면 재연결 시도 전체가 멈추므로 시간을 제한한다 */
+const SESSION_PROBE_TIMEOUT_MS = 5_000;
 
 export type SessionProbeOutcome = "authenticated" | "unauthorized" | "transient";
 
@@ -22,31 +17,28 @@ export type SessionProbeResult = {
   outcome: SessionProbeOutcome;
 };
 
-export type HandleStompReconnectOptions = {
+export type RefreshSessionBeforeReconnectOptions = {
   client: Client;
   queryClient: QueryClient;
-  isSuppressed: () => boolean;
+  /** 세션 확인을 기다리는 동안 연결이 정리됐는지(로그아웃·경로 이탈) */
   isActive: () => boolean;
 };
 
-let reconnectPromise: Promise<void> | null = null;
-
-function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
 /**
- * `GET /api/auth/session` — 200 / 401 / transient(5xx·네트워크·기타 4xx) 분기.
+ * `GET /api/auth/session` — 200 / 401 / transient(503·네트워크·시간 초과·기타) 분기.
  */
 export async function probeClientSession(): Promise<SessionProbeResult> {
   if (typeof window === "undefined") {
     return { outcome: "transient" };
   }
 
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), SESSION_PROBE_TIMEOUT_MS);
   try {
     const res = await fetch("/api/auth/session", {
       credentials: "include",
       cache: "no-store",
+      signal: controller.signal,
     });
 
     if (res.status === 200) {
@@ -55,28 +47,14 @@ export async function probeClientSession(): Promise<SessionProbeResult> {
     if (res.status === 401) {
       return { outcome: "unauthorized" };
     }
-    if (res.status >= 500) {
-      return { outcome: "transient" };
-    }
     return { outcome: "transient" };
   } catch {
     return { outcome: "transient" };
+  } finally {
+    clearTimeout(timeout);
   }
 }
 
-async function probeWithRetries(): Promise<SessionProbeResult> {
-  for (let attempt = 1; attempt <= SESSION_PROBE_MAX_ATTEMPTS; attempt++) {
-    const result = await probeClientSession();
-    if (result.outcome !== "transient") {
-      return result;
-    }
-    if (attempt < SESSION_PROBE_MAX_ATTEMPTS) {
-      await sleep(SESSION_PROBE_RETRY_DELAY_MS);
-    }
-  }
-  return { outcome: "transient" };
-}
-
 async function syncSessionUserCache(queryClient: QueryClient): Promise<void> {
   try {
     const user = await fetchSessionUserRaw();
@@ -93,66 +71,31 @@ export function handleStompSessionExpired(queryClient: QueryClient): void {
   expireClientSessionAndRedirect({ queryClient });
 }
 
-async function runStompReconnect({
+/**
+ * stompjs `beforeConnect`에서 재연결 직전에 부릅니다.
+ * `/api/auth/session`이 쿠키를 갱신해, access 만료(4001) 뒤 만료된 쿠키로 다시 붙지 않게 합니다.
+ * 재시도 간격은 stompjs가 맡으므로 한 번만 확인합니다. 안에서 부르는 함수는 예외를 던지지 않습니다.
+ * stompjs는 `beforeConnect` 예외를 잡지 않아 던지면 재연결이 멈추기 때문입니다.
+ */
+export async function refreshSessionBeforeReconnect({
   client,
   queryClient,
-  isSuppressed,
   isActive,
-}: HandleStompReconnectOptions): Promise<void> {
-  if (!isActive() || isSuppressed() || isStompAutoRecoverySuspended()) {
-    return;
-  }
-
-  const probe = await probeWithRetries();
-
-  if (!isActive() || isSuppressed()) {
+}: RefreshSessionBeforeReconnectOptions): Promise<void> {
+  const probe = await probeClientSession();
+  if (!isActive()) {
     return;
   }
 
   if (probe.outcome === "unauthorized") {
-    handleStompSessionExpired(queryClient);
-    return;
-  }
-
-  if (probe.outcome === "transient") {
-    useStompConnectionStore
-      .getState()
-      .setConnectionIssue(STOMP_CONNECTION_ISSUE_MESSAGE);
-    return;
-  }
-
-  useStompConnectionStore.getState().clearConnectionIssue();
-  await syncSessionUserCache(queryClient);
-
-  if (!isActive() || isSuppressed()) {
-    return;
-  }
-
-  if (client.active) {
     await client.deactivate();
-  }
-
-  if (!isActive() || isSuppressed()) {
+    handleStompSessionExpired(queryClient);
     return;
   }
 
-  client.activate();
-}
-
-/**
- * WebSocket close 후 session 검증 → deactivate/activate 재연결 또는 로그아웃·장애 UI.
- * 단일 in-flight promise로 동시 호출을 합칩니다.
- */
-export function handleStompReconnect(
-  options: HandleStompReconnectOptions,
-): Promise<void> {
-  if (reconnectPromise) {
-    return reconnectPromise;
+  if (probe.outcome === "authenticated") {
+    // 다른 탭에서 계정이 바뀌었으면 여기서 세션 사용자 캐시가 새 사용자로 바뀐다
+    await syncSessionUserCache(queryClient);
   }
-
-  reconnectPromise = runStompReconnect(options).finally(() => {
-    reconnectPromise = null;
-  });
-
-  return reconnectPromise;
+  // transient면 그대로 연결을 시도한다. 실패하면 stompjs가 다음 간격에 다시 부른다
 }
diff --git a/src/lib/stomp/subscribe-room-topics.test.ts b/src/lib/stomp/subscribe-room-topics.test.ts
index c39259f1..a07782be 100644
--- a/src/lib/stomp/subscribe-room-topics.test.ts
+++ b/src/lib/stomp/subscribe-room-topics.test.ts
@@ -1,7 +1,7 @@
 import type { Client, IMessage } from "@stomp/stompjs";
 import { QueryClient, QueryObserver } from "@tanstack/react-query";
 import { expect, it, vi } from "vitest";
-import { roomUnreadCountQueryKey, sessionUserQueryKey } from "@/lib/query-keys";
+import { roomSchedulesQueryKey, roomUnreadCountQueryKey, sessionUserQueryKey } from "@/lib/query-keys";
 import { subscribeRoomStompTopics } from "./subscribe-room-topics";
 
 vi.mock("@/lib/stomp/bookmarks-dispatch", () => ({ applyRoomBookmarkStompMessage: vi.fn() }));
@@ -75,3 +75,18 @@ it("본인 MEMBER_LEFT만 onSelfLeftRoom으로 알린다 — 다른 탭에서 
     queryClient.clear();
   }
 });
+
+it("구독할 때마다 구독하지 않던 동안 놓친 일정 변경을 받도록 일정을 무효화한다", () => {
+  const client = {
+    subscribe: () => ({ unsubscribe: () => {} }),
+  } as unknown as Client;
+  const queryClient = new QueryClient();
+  queryClient.setQueryData(roomSchedulesQueryKey("room"), []);
+  const unsubscribe = subscribeRoomStompTopics(client, "room", { current: queryClient }, {});
+  try {
+    expect(queryClient.getQueryState(roomSchedulesQueryKey("room"))?.isInvalidated).toBe(true);
+  } finally {
+    unsubscribe();
+    queryClient.clear();
+  }
+});
diff --git a/src/lib/stomp/subscribe-room-topics.ts b/src/lib/stomp/subscribe-room-topics.ts
index ef354c9d..c307cb12 100644
--- a/src/lib/stomp/subscribe-room-topics.ts
+++ b/src/lib/stomp/subscribe-room-topics.ts
@@ -14,6 +14,7 @@ import {
   optimisticPatchSelfOnline,
   scheduleRoomMembersResyncAfterSubscribe,
 } from "@/lib/stomp/presence-dispatch";
+import { resyncRoomDataAfterSubscribe } from "@/lib/stomp/room-resync-dispatch";
 import { parseRoomScheduleMessage } from "@/lib/stomp/schedule-events";
 import { dispatchRoomScheduleEvent } from "@/lib/stomp/schedules-dispatch";
 import { dispatchUserError } from "@/lib/stomp/user-error-dispatch";
@@ -113,6 +114,7 @@ export function subscribeRoomStompTopics(
     queryClientRef.current,
     subscribedRoomId,
   );
+  resyncRoomDataAfterSubscribe(queryClientRef.current, subscribedRoomId);
 
   return () => {
     membersSub.unsubscribe();
diff --git a/src/lib/stomp/subscribe-user-rooms-queue.ts b/src/lib/stomp/subscribe-user-rooms-queue.ts
index 6e581f19..a567f0f6 100644
--- a/src/lib/stomp/subscribe-user-rooms-queue.ts
+++ b/src/lib/stomp/subscribe-user-rooms-queue.ts
@@ -3,6 +3,7 @@ import type { MutableRefObject } from "react";
 import type { QueryClient } from "@tanstack/react-query";
 
 import { dispatchHostJoinRequestFromStomp } from "@/lib/stomp/join-requests-dispatch";
+import { resyncUserQueueDataAfterSubscribe } from "@/lib/stomp/room-resync-dispatch";
 import {
   parseUserRoomQueueMessage,
   type ForcedRoomExitReason,
@@ -44,6 +45,7 @@ export function subscribeUserRoomsQueue(
       parsed.nickname,
     );
   });
+  resyncUserQueueDataAfterSubscribe(options.queryClientRef.current);
 
   return () => {
     sub.unsubscribe();
diff --git a/src/lib/tab-id.test.ts b/src/lib/tab-id.test.ts
new file mode 100644
index 00000000..3724141c
--- /dev/null
+++ b/src/lib/tab-id.test.ts
@@ -0,0 +1,54 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const UUID_V4 = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/;
+
+/** 탭 ID는 모듈 변수에 한 번 만들어 두므로 경우마다 모듈을 새로 읽는다 */
+async function loadGetTabId() {
+  vi.resetModules();
+  return (await import("@/lib/tab-id")).getTabId;
+}
+
+describe("getTabId", () => {
+  beforeEach(() => {
+    vi.stubGlobal("window", {});
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("returns null during server render", async () => {
+    vi.unstubAllGlobals();
+    const getTabId = await loadGetTabId();
+
+    expect(getTabId()).toBeNull();
+  });
+
+  it("creates the ID once with randomUUID and keeps it for the tab", async () => {
+    const randomUUID = vi.fn(() => "3f2b8c1e-7d4a-4e9b-9c2f-1a2b3c4d5e6f");
+    vi.stubGlobal("crypto", { randomUUID, getRandomValues: vi.fn() });
+    const getTabId = await loadGetTabId();
+
+    expect(getTabId()).toBe("3f2b8c1e-7d4a-4e9b-9c2f-1a2b3c4d5e6f");
+    expect(getTabId()).toBe("3f2b8c1e-7d4a-4e9b-9c2f-1a2b3c4d5e6f");
+    expect(randomUUID).toHaveBeenCalledOnce();
+  });
+
+  it("builds a v4 UUID from getRandomValues when randomUUID is missing (non-secure context)", async () => {
+    vi.stubGlobal("crypto", {
+      getRandomValues: (bytes: Uint8Array) => bytes.fill(0xff),
+    });
+    const getTabId = await loadGetTabId();
+
+    const id = getTabId();
+    expect(id).toMatch(UUID_V4);
+    expect(id).toBe("ffffffff-ffff-4fff-bfff-ffffffffffff");
+  });
+
+  it("returns null when the browser cannot make random values", async () => {
+    vi.stubGlobal("crypto", {});
+    const getTabId = await loadGetTabId();
+
+    expect(getTabId()).toBeNull();
+  });
+});
diff --git a/src/lib/tab-id.ts b/src/lib/tab-id.ts
new file mode 100644
index 00000000..95050886
--- /dev/null
+++ b/src/lib/tab-id.ts
@@ -0,0 +1,29 @@
+/**
+ * 이 탭이 보낸 변경 요청과 그 STOMP 반향(`originTabId`)을 잇는 ID.
+ *
+ * 모듈 변수에만 둔다. sessionStorage는 탭을 복제하면 값이 복사돼 두 탭이 같은 ID가 되고,
+ * localStorage는 모든 탭이 같은 값을 쓴다. 새로고침하면 새 ID가 된다.
+ */
+let tabId: string | null | undefined;
+
+/** 서버 렌더에서는 null. UUID를 만들 수 없는 브라우저도 null이고, 그때는 헤더를 싣지 않는다 */
+export function getTabId(): string | null {
+  if (tabId !== undefined) return tabId;
+  if (typeof window === "undefined") return null;
+  tabId = createUuidV4();
+  return tabId;
+}
+
+function createUuidV4(): string | null {
+  if (typeof crypto === "undefined") return null;
+  // randomUUID는 보안 컨텍스트(https·localhost)에서만 있다 — `http://<LAN IP>`로 연 화면은 getRandomValues로 만든다
+  if (typeof crypto.randomUUID === "function") return crypto.randomUUID();
+  if (typeof crypto.getRandomValues !== "function") return null;
+
+  const hex = Array.from(crypto.getRandomValues(new Uint8Array(16)), (byte) =>
+    byte.toString(16).padStart(2, "0"),
+  ).join("");
+  // RFC 9562 v4: 13번째 자리는 버전 4, 17번째 자리는 변형 8~b
+  const variant = ((Number.parseInt(hex.charAt(16), 16) & 0x3) | 0x8).toString(16);
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-4${hex.slice(13, 16)}-${variant}${hex.slice(17, 20)}-${hex.slice(20, 32)}`;
+}
diff --git a/src/providers/app-chrome-shell.tsx b/src/providers/app-chrome-shell.tsx
index f314669c..f84ee258 100644
--- a/src/providers/app-chrome-shell.tsx
+++ b/src/providers/app-chrome-shell.tsx
@@ -23,7 +23,11 @@ export function AppChromeShell({
 
   return (
     <CookieSettingsProvider>
-      <MobileChrome>{children}</MobileChrome>
+      {/* Base UI 권장: 앱을 별도 쌓임 맥락으로 묶어 body로 포털되는 대화상자·팝업이 늘 앱 위에 뜨게 한다.
+          토스트는 이 밖에 두어 대화상자가 열려 있어도 위에 보인다 */}
+      <div className="isolate flex min-h-full w-full flex-1 flex-col">
+        <MobileChrome>{children}</MobileChrome>
+      </div>
       {analyticsEnabled ? (
         <ConsentGatedAnalytics
           debugMode={analyticsRuntime.debugMode}
diff --git a/src/stores/map-center-store.ts b/src/stores/map-center-store.ts
index 750f025f..92265c89 100644
--- a/src/stores/map-center-store.ts
+++ b/src/stores/map-center-store.ts
@@ -7,11 +7,14 @@ type MapCenterState = {
   zoom: number | null;
   /** 현재 뷰포트 기준 대략 반경(m): 중심 ↔ bounds 북동 코너 */
   radiusMeters: number | null;
+  /** 현재 뷰포트 경계 — 「현 위치에서 검색」 결과를 화면 안으로 거른다 */
+  bounds: google.maps.LatLngBoundsLiteral | null;
   setMapCenter: (center: MapCenterCoords) => void;
   setMapCamera: (payload: {
     mapCenter: MapCenterCoords;
     zoom: number;
     radiusMeters: number;
+    bounds: google.maps.LatLngBoundsLiteral | null;
   }) => void;
 };
 
@@ -19,7 +22,8 @@ export const useMapCenterStore = create<MapCenterState>((set) => ({
   mapCenter: null,
   zoom: null,
   radiusMeters: null,
+  bounds: null,
   setMapCenter: (mapCenter) => set({ mapCenter }),
-  setMapCamera: ({ mapCenter, zoom, radiusMeters }) =>
-    set({ mapCenter, zoom, radiusMeters }),
+  setMapCamera: ({ mapCenter, zoom, radiusMeters, bounds }) =>
+    set({ mapCenter, zoom, radiusMeters, bounds }),
 }));
diff --git a/src/stores/place-search-store.ts b/src/stores/place-search-store.ts
index 96126b1a..94dccb8f 100644
--- a/src/stores/place-search-store.ts
+++ b/src/stores/place-search-store.ts
@@ -3,11 +3,16 @@ import type { PlaceResolveResponse } from "@/lib/api/place-sessions";
 import type { SearchRankBucket } from "@/lib/analytics/context";
 import type { PlaceSearchResult } from "@/hooks/usePlacesSearch";
 
+/** 검색창에서 찾기(text) / 「현 위치에서 검색」 버튼(map_recenter) */
+export type PlaceSearchMode = "text" | "map_recenter";
+
 type PlaceSearchState = {
   scope: string;
   generation: number;
   query: string;
   confirmationKind: "whole" | "specific" | null;
+  /** 이 검색을 시작한 곳. 「현 위치에서 검색」의 실패·결과 없음은 검색창이 아니라 그 버튼 자리에서 알린다 */
+  searchMode: PlaceSearchMode;
   items: PlaceSearchResult[];
   /** Coarse original Text Search rank, independent of retained recommendation/display order. */
   searchRankBuckets: Readonly<Record<string, SearchRankBucket>>;
@@ -15,7 +20,6 @@ type PlaceSearchState = {
   expanded: boolean;
   status: "idle" | "pending" | "done" | "error";
   error: string | null;
-  fallback: boolean;
   termination: PlaceResolveResponse["termination"] | "failed" | "not-requested";
   resolution: Omit<PlaceResolveResponse, "detail"> | null;
   setScope: (scope: string) => void;
@@ -27,13 +31,13 @@ type PlaceSearchState = {
 const empty = {
   query: "",
   confirmationKind: null,
+  searchMode: "text" as const,
   items: [],
   searchRankBuckets: {},
   selectedId: null,
   expanded: false,
   status: "idle" as const,
   error: null,
-  fallback: false,
   termination: "not-requested" as const,
   resolution: null,
 };
diff --git a/src/stores/plan-map-directions-epoch-store.ts b/src/stores/plan-map-directions-epoch-store.ts
deleted file mode 100644
index f38add8f..00000000
--- a/src/stores/plan-map-directions-epoch-store.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { create } from "zustand";
-
-type PlanMapSegmentEpochEntry = {
-  scheduleId: number;
-  segmentSourceItemId: number;
-};
-
-/** `epochBySegmentKey`: `{roomId}:{scheduleId}:{segmentSourceItemId}` */
-export function planMapSegmentEpochStoreKey(
-  roomId: string,
-  scheduleId: number,
-  segmentSourceItemId: number,
-): string {
-  return `${String(roomId ?? "").trim()}:${scheduleId}:${segmentSourceItemId}`;
-}
-
-/** STOMP 일정 브로드캐스트 중 지도 경로(polyline) 갱신 — 방 전체 에폭 + 구간별 에폭. */
-type EpochState = {
-  epochByRoomId: Record<string, number>;
-  epochBySegmentKey: Record<string, number>;
-  bumpForDirections: (roomId: string) => void;
-  bumpSegments: (roomId: string, entries: PlanMapSegmentEpochEntry[]) => void;
-};
-
-export const usePlanMapDirectionsEpochStore = create<EpochState>((set) => ({
-  epochByRoomId: {},
-  epochBySegmentKey: {},
-  bumpForDirections: (roomId) => {
-    const rid = String(roomId ?? "").trim();
-    if (!rid.length) return;
-    set((s) => ({
-      epochByRoomId: {
-        ...s.epochByRoomId,
-        [rid]: (s.epochByRoomId[rid] ?? 0) + 1,
-      },
-    }));
-  },
-  bumpSegments: (roomId, entries) => {
-    const rid = String(roomId ?? "").trim();
-    if (!rid.length || entries.length === 0) return;
-    set((s) => {
-      const next = { ...s.epochBySegmentKey };
-      for (const e of entries) {
-        const k = planMapSegmentEpochStoreKey(rid, e.scheduleId, e.segmentSourceItemId);
-        next[k] = (next[k] ?? 0) + 1;
-      }
-      return { epochBySegmentKey: next };
-    });
-  },
-}));
diff --git a/src/stores/stomp-connection-store.ts b/src/stores/stomp-connection-store.ts
index 91081bb3..6e7f210b 100644
--- a/src/stores/stomp-connection-store.ts
+++ b/src/stores/stomp-connection-store.ts
@@ -5,30 +5,18 @@ export const STOMP_CONNECTION_ISSUE_MESSAGE =
 
 interface StompConnectionStore {
   connectionIssue: string | null;
-  autoRecoverySuspended: boolean;
   setConnectionIssue: (message: string) => void;
   clearConnectionIssue: () => void;
-  resumeAutoRecovery: () => void;
 }
 
 export const useStompConnectionStore = create<StompConnectionStore>((set) => ({
   connectionIssue: null,
-  autoRecoverySuspended: false,
 
   setConnectionIssue: (message) => {
-    set({ connectionIssue: message, autoRecoverySuspended: true });
+    set({ connectionIssue: message });
   },
 
   clearConnectionIssue: () => {
-    set({ connectionIssue: null, autoRecoverySuspended: false });
-  },
-
-  resumeAutoRecovery: () => {
-    set({ autoRecoverySuspended: false });
+    set({ connectionIssue: null });
   },
 }));
-
-/** STOMP 복구 콜백 등 React 밖에서 자동 재시도 중단 여부 확인 */
-export function isStompAutoRecoverySuspended(): boolean {
-  return useStompConnectionStore.getState().autoRecoverySuspended;
-}
diff --git a/src/types/roomBookmarkStomp.ts b/src/types/roomBookmarkStomp.ts
index 721e17d3..25ec194b 100644
--- a/src/types/roomBookmarkStomp.ts
+++ b/src/types/roomBookmarkStomp.ts
@@ -12,4 +12,6 @@ export type RoomBookmarkChangedEvent = {
   categoryId: number;
   roomId: string;
   type: RoomBookmarkChangedType;
+  /** 변경 요청을 보낸 탭 ID — 같으면 이 탭의 반향(`isOwnEcho`) */
+  originTabId?: string | null;
 };