From a819d32b747b87b20237c6c0a00a0a07dbf75c07 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 01:52:45 +0900
Subject: [PATCH 01/50] =?UTF-8?q?chore(ui):=20=EB=8F=99=EC=9E=91=20?=
 =?UTF-8?q?=EB=B6=80=ED=92=88=20shadcn=20base-nova=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EB=B0=9B=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- button, dialog, alert-dialog, drawer, dropdown-menu, select, combobox, popover, tabs와 combobox가 쓰는 input-group을 받은 그대로 둠(모두 Base UI 기반, drawer도 vaul 없음)
- add가 함께 설치한 cn 패키지는 부품을 고칠 때 @/lib/utils로 바꾸고 지운다
- add가 덮어쓴 input·textarea는 우리 파일로 되돌림

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 package-lock.json                   |  13 ++
 package.json                        |   1 +
 src/components/ui/alert-dialog.tsx  | 187 ++++++++++++++++++
 src/components/ui/button.tsx        |  57 ++++++
 src/components/ui/combobox.tsx      | 297 ++++++++++++++++++++++++++++
 src/components/ui/dialog.tsx        | 160 +++++++++++++++
 src/components/ui/drawer.tsx        | 227 +++++++++++++++++++++
 src/components/ui/dropdown-menu.tsx | 267 +++++++++++++++++++++++++
 src/components/ui/input-group.tsx   | 158 +++++++++++++++
 src/components/ui/popover.tsx       |  89 +++++++++
 src/components/ui/select.tsx        | 200 +++++++++++++++++++
 src/components/ui/tabs.tsx          |  81 ++++++++
 12 files changed, 1737 insertions(+)
 create mode 100644 src/components/ui/alert-dialog.tsx
 create mode 100644 src/components/ui/button.tsx
 create mode 100644 src/components/ui/combobox.tsx
 create mode 100644 src/components/ui/dialog.tsx
 create mode 100644 src/components/ui/drawer.tsx
 create mode 100644 src/components/ui/dropdown-menu.tsx
 create mode 100644 src/components/ui/input-group.tsx
 create mode 100644 src/components/ui/popover.tsx
 create mode 100644 src/components/ui/select.tsx
 create mode 100644 src/components/ui/tabs.tsx

diff --git a/package-lock.json b/package-lock.json
index 8198e11f..727c50cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@vis.gl/react-google-maps": "^1.8.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cn": "^0.5.1",
         "framer-motion": "^12.38.0",
         "lucide-react": "^1.7.0",
         "next": "16.2.1",
@@ -6134,6 +6135,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/cn": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/cn/-/cn-0.5.1.tgz",
+      "integrity": "sha512-SA06SpzSWXRNrt/EQWnRpck9jEVDfVJonw8ZewiNR6pOC4U0SQ81tWaQ9/PKNPh/lWvjuY4CMlxpc8tJViiX6Q==",
+      "license": "MIT",
+      "bin": {
+        "cn": "bin/cn.mjs"
+      },
+      "engines": {
+        "node": ">=22"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
diff --git a/package.json b/package.json
index 8e9911a0..d9ea1611 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@vis.gl/react-google-maps": "^1.8.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cn": "^0.5.1",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.7.0",
     "next": "16.2.1",
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..0f96bcd7
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import { cn } from "cn"
+
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 00000000..997e0c70
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
new file mode 100644
index 00000000..d4ca41bf
--- /dev/null
+++ b/src/components/ui/combobox.tsx
@@ -0,0 +1,297 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import { cn } from "cn"
+
+import { Button } from "@/components/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            render={<ComboboxTrigger />}
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..344287ff
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import { cn } from "cn"
+
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
new file mode 100644
index 00000000..d861de23
--- /dev/null
+++ b/src/components/ui/drawer.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
+import { cn } from "cn"
+
+type DrawerContextProps = {
+  hasSnapPoints: boolean
+  modal: DrawerPrimitive.Root.Props["modal"]
+  showSwipeHandle: boolean
+  swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>
+}
+
+const DrawerContext = React.createContext<DrawerContextProps | null>(null)
+
+function useDrawer() {
+  const context = React.useContext(DrawerContext)
+
+  if (!context) {
+    throw new Error("useDrawer must be used within a Drawer.")
+  }
+
+  return context
+}
+
+function Drawer({
+  modal = true,
+  showSwipeHandle = false,
+  snapPoints,
+  swipeDirection = "down",
+  ...props
+}: DrawerPrimitive.Root.Props & {
+  showSwipeHandle?: boolean
+}) {
+  const hasSnapPoints = snapPoints != null && snapPoints.length > 0
+  const contextValue = React.useMemo(
+    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
+    [hasSnapPoints, modal, showSwipeHandle, swipeDirection]
+  )
+
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      <DrawerPrimitive.Root
+        data-slot="drawer"
+        modal={modal}
+        snapPoints={snapPoints}
+        swipeDirection={swipeDirection}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  )
+}
+
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: DrawerPrimitive.Backdrop.Props) {
+  return (
+    <DrawerPrimitive.Backdrop
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerSwipeHandle({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-swipe-handle"
+      aria-hidden="true"
+      className={cn(
+        "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: DrawerPrimitive.Popup.Props) {
+  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
+  const swipeAxis =
+    swipeDirection === "down" || swipeDirection === "up" ? "y" : "x"
+
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      {modal === true && (
+        <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />
+      )}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        data-modal={modal}
+        className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
+      >
+        <DrawerPrimitive.Popup
+          data-slot="drawer-popup"
+          data-swipe-axis={swipeAxis}
+          data-snap-points={hasSnapPoints ? "" : undefined}
+          className={cn(
+            // Base.
+            "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
+            // Nested.
+            "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+            // Bleed.
+            "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
+            // Sizing.
+            "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+            // Stack.
+            "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
+            // Transitions.
+            "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+            // Axis: y.
+            "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
+            // Axis: x.
+            "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+            // Direction: down.
+            "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: up.
+            "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: left.
+            "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+            // Direction: right.
+            "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
+            className
+          )}
+          {...props}
+        >
+          {showSwipeHandle && <DrawerSwipeHandle />}
+          <DrawerPrimitive.Content
+            data-slot="drawer-content"
+            className={cn(
+              "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
+            )}
+          >
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(
+        "text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: DrawerPrimitive.Description.Props) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-balance text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerSwipeHandle,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..cafe6ba8
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,267 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { cn } from "cn"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/src/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
new file mode 100644
index 00000000..08cd6aae
--- /dev/null
+++ b/src/components/ui/input-group.tsx
@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset"
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 00000000..c911a360
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import { cn } from "cn"
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 00000000..ca1ee68d
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+import { cn } from "cn"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 00000000..74e47661
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

From 8713ae31054c8f486d9c6c9d9f438082eee5f6e2 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 01:53:27 +0900
Subject: [PATCH 02/50] =?UTF-8?q?chore(deps):=20TanStack=20Form=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 대화상자 안 폼을 새로 쓸 때 @tanstack/react-form으로 칸별 검증·제출 상태를 다룬다(zod는 나중에)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 package-lock.json | 95 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 96 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 727c50cd..bb7b7671 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@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",
@@ -4549,6 +4550,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",
@@ -4569,6 +4614,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",
@@ -4602,6 +4687,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",
diff --git a/package.json b/package.json
index d9ea1611..e6135a39 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@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",

From 0425918f28e48ef47feaba542c76738066a95650 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 01:54:38 +0900
Subject: [PATCH 03/50] =?UTF-8?q?chore(ui):=20Base=20UI=20=EB=8C=80?=
 =?UTF-8?q?=ED=99=94=EC=83=81=EC=9E=90=C2=B7=ED=8C=9D=EC=97=85=EC=9D=B4=20?=
 =?UTF-8?q?=EC=95=B1=20=EC=9C=84=EC=97=90=20=EB=9C=A8=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EB=A3=A8=ED=8A=B8=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 앱 내용을 isolate 묶음으로 감싸 body로 포털되는 Base UI 팝업이 앱의 z-index와 섞이지 않게 함(토스트는 밖에 두어 대화상자 위에 보임)
- iOS 26 Safari용 body { position: relative } 추가(Base UI 빠른 시작 안내)
- 랜딩·로그인 PC·모바일에서 감싸기 전후 배치가 같음을 확인

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/globals.css                | 5 +++++
 src/providers/app-chrome-shell.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index e7a00b79..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;
+  }
+
   /* 스크롤바 공간 예약은 폭 유지가 필요한 본문·목록에서만 개별 지정한다. */
 }
 
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}

From 9a4832d2107bbd0fd276aaaea26c34426fdb40e0 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:02 +0900
Subject: [PATCH 04/50] =?UTF-8?q?feat(icons):=20check=C2=B7sign/logout=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma ❸ Icon의 check(252:27411)·sign/logout(252:30979) 24px 원본, 선 1.8·currentColor
- Select·Combobox 선택 표시와 메뉴의 나가기·로그아웃 항목에 쓴다

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/assets/icons/check.svg       | 3 +++
 src/assets/icons/index.tsx       | 4 ++++
 src/assets/icons/sign-logout.svg | 5 +++++
 3 files changed, 12 insertions(+)
 create mode 100644 src/assets/icons/check.svg
 create mode 100644 src/assets/icons/sign-logout.svg

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/index.tsx b/src/assets/icons/index.tsx
index fb2e8e1b..e31c896c 100644
--- a/src/assets/icons/index.tsx
+++ b/src/assets/icons/index.tsx
@@ -2,6 +2,7 @@ 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";
@@ -34,6 +35,7 @@ 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";
@@ -55,6 +57,7 @@ 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");
@@ -88,6 +91,7 @@ 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");
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>

From 3a84f966cfe9e5d9060c50dfc3537a79a62869d0 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:02 +0900
Subject: [PATCH 05/50] =?UTF-8?q?style(ui):=20Button=EC=9D=84=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20Button?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma Button(5272:3019)·Button Base(5002:3814): variant solid·weak·outline × tone neutral·brand·critical × size lg 56·md 48·sm 36·xs 32, 등록된 6종만 타입으로 허용
- Hover·Pressed·Disabled(opacity 없이 fill/default·text/disabled)·Loading 색을 Figma 값으로, 비활성은 data-disabled로 그림
- loading이면 내용 자리를 남기고 가운데 progress(lg 24·그 외 20), 중복 실행 차단·포커스 유지, 이름은 loadingLabel(aria-labelledby)
- buttonVariants는 내보내지 않음(className으로 버튼 모양 흉내 금지)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/button.tsx | 201 ++++++++++++++++++++++++++++-------
 1 file changed, 163 insertions(+), 38 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 997e0c70..3e0fc4c4 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,57 +1,182 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
+"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 inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "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: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
+        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: {
-        default:
-          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-8",
-        "icon-xs":
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
+        // 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]",
       },
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+    // 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 = "default",
-  size = "default",
+  variant = "solid",
+  tone = "neutral",
+  size = "md",
+  loading = false,
+  loadingLabel = "처리 중",
+  disabled,
+  focusableWhenDisabled,
+  children,
+  "aria-labelledby": ariaLabelledBy,
   ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+}: Readonly<ButtonProps>) {
+  const loadingLabelId = useId();
+
   return (
     <ButtonPrimitive
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      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, buttonVariants }
+export { Button };

From cfbcceb33ff1d86988754582d0af4d0ba507e715 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:02 +0900
Subject: [PATCH 06/50] =?UTF-8?q?style(ui):=20Dialog=EB=A5=BC=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20Modal?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma Modal(5956:24724): padding 20·간격 20·모서리 12·fill/elevate·shadow/default, 딤은 지금 앱 값 black/40
- 제목 줄에 닫기 X(24, 누르는 영역 44), Footer는 취소→확인 꽉 채움, 폭은 Figma 353 기본 + 지금 화면 폭 변형
- closeDisabled면 Esc·딤·X·취소로 닫히지 않고, 안쪽 입력이 막은 Esc는 대화상자를 닫지 않음
- 열림·닫힘은 Base UI data-starting/ending-style 전환, 중첩 대화상자도 딤을 그림

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/dialog.tsx | 236 ++++++++++++++++++++---------------
 1 file changed, 138 insertions(+), 98 deletions(-)

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 344287ff..371a0c3b 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,149 +1,191 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
-import { cn } from "cn"
+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 { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { CloseIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
 
-function Dialog({ ...props }: DialogPrimitive.Root.Props) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
+// 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로 껍데기만 바꾼다
 
-function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
+const DialogCloseDisabledContext = createContext(false);
+// DialogContent가 DialogHeader에 넘기는 닫기 X의 접근성 이름. null이면 X를 그리지 않는다(showCloseButton={false})
+const DialogCloseLabelContext = createContext<string | null>(null);
 
-function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+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 DialogClose({ ...props }: DialogPrimitive.Close.Props) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+function DialogTrigger(props: Readonly<DialogPrimitive.Trigger.Props>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: DialogPrimitive.Backdrop.Props) {
-  return (
-    <DialogPrimitive.Backdrop
-      data-slot="dialog-overlay"
-      className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
-      )}
-      {...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(준비물 이름), 회원 탈퇴 2종, 가계부 범위 목록, 북마크에서 장소 추가
+        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;
+    /** 닫기(X)의 접근성 이름. 화면에는 보이지 않는다(예: "쿠키 설정 닫기") */
+    closeLabel?: string;
+    /** 배치(높이 상한 등)에만 쓴다. 폭은 size로 고른다 */
+    className?: string;
+  };
+
+/**
+ * 포털·딤·표면을 함께 그린다. 안에는 DialogHeader → 본문 → DialogFooter 순서로 넣는다(간격 20은 표면 gap이 준다).
+ * 닫기 X는 DialogHeader가 제목 줄에 그린다. DialogHeader 없이 본문으로 시작하는 대화상자에는 X가 없다(DialogClose를 직접 둔다).
+ * 처음 포커스는 Base UI 기본(첫 포커스 요소, 터치로 열면 표면)이고, 바꾸려면 `initialFocus`·`finalFocus`를 넘긴다.
+ */
 function DialogContent({
   className,
   children,
+  size,
   showCloseButton = true,
+  closeLabel = "닫기",
   ...props
-}: DialogPrimitive.Popup.Props & {
-  showCloseButton?: boolean
-}) {
+}: Readonly<DialogContentProps>) {
   return (
-    <DialogPortal>
-      <DialogOverlay />
+    <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
+        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(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
-        )}
+        className={cn(dialogContentVariants({ size }), className)}
         {...props}
       >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            render={
-              <Button
-                variant="ghost"
-                className="absolute top-2 right-2"
-                size="icon-sm"
-              />
-            }
-          >
-            <XIcon
-            />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
+        <DialogCloseLabelContext value={showCloseButton ? closeLabel : null}>{children}</DialogCloseLabelContext>
       </DialogPrimitive.Popup>
-    </DialogPortal>
-  )
+    </DialogPrimitive.Portal>
+  );
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+/**
+ * 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("flex flex-col gap-2", className)}
+      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>
+  );
 }
 
-function DialogFooter({
-  className,
-  showCloseButton = false,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
-}) {
+// 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(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
-        className
-      )}
+      className={cn("flex gap-2 *:min-w-0 *:flex-1", className)}
       {...props}
-    >
-      {children}
-      {showCloseButton && (
-        <DialogPrimitive.Close render={<Button variant="outline" />}>
-          Close
-        </DialogPrimitive.Close>
-      )}
-    </div>
-  )
+    />
+  );
 }
 
-function DialogTitle({ className, ...props }: DialogPrimitive.Title.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-base leading-none font-medium",
-        className
-      )}
+      className={cn("text-title-l text-text", className)}
       {...props}
     />
-  )
+  );
 }
 
+// Figma Subtitle: caption/md/regular, text/subtle("항목 · 항목" 같은 보조 줄). aria-describedby는 Base UI가 잇는다
 function DialogDescription({
   className,
   ...props
-}: DialogPrimitive.Description.Props) {
+}: Readonly<Omit<DialogPrimitive.Description.Props, "className"> & { className?: string }>) {
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn(
-        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
-      )}
+      className={cn("col-span-full text-caption-m-regular text-text-subtle", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -153,8 +195,6 @@ export {
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogOverlay,
-  DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};

From d2a38a13e404aaffdb0ea9d0f14046ed885a62ae Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:02 +0900
Subject: [PATCH 07/50] =?UTF-8?q?style(ui):=20AlertDialog=EB=A5=BC=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20Ale?=
 =?UTF-8?q?rt=20Dialog=EC=97=90=20=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma Alert Dialog(5621:3002): 353~400 폭·padding 24·모서리 10·그림자 없음·가운데 정렬, 버튼 md 48 꽉 채움(가로 취소→주요, 세로 주요→취소)
- 확인 버튼은 Neutral Solid 또는 Critical Solid만, 첫 포커스는 취소 버튼
- backdropCloseLabel을 주면 딤을 눌러 닫힘(지금 확인창 동작), closeDisabled로 처리 중 닫힘을 막음, z-50·최대 높이 스크롤

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/alert-dialog.tsx | 288 +++++++++++++++++------------
 1 file changed, 170 insertions(+), 118 deletions(-)

diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 0f96bcd7..7b6856f2 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -1,174 +1,229 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
-import { cn } from "cn"
+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 { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
-function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
+// 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;
+};
 
-function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+/**
+ * Base UI AlertDialog.Root. 모달·role="alertdialog"는 고정이다. 메뉴 항목 등에서 열면 open·onOpenChange로 제어한다.
+ * 안쪽 요소가 Esc를 먼저 쓰고 preventDefault했으면 닫지 않는다(Dialog와 같은 규칙).
+ */
+function AlertDialog({ closeDisabled = false, onOpenChange, ...props }: Readonly<AlertDialogProps>) {
   return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+    <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}
+    />
+  );
 }
 
-function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+/** 여는 버튼. 우리 Button으로 그리려면 render={<Button … />} */
+function AlertDialogTrigger(props: Readonly<AlertDialogPrimitive.Trigger.Props>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
-function AlertDialogOverlay({
-  className,
-  ...props
-}: AlertDialogPrimitive.Backdrop.Props) {
+// 딤은 Alert Dialog 페이지에 정의가 없어(figma-button-dialog 3-6) 지금 앱 값 black/40을 쓴다.
+// 대화상자 안에서 연 확인창(중첩)도 딤을 그린다(forceRender). 확인창은 그림자가 없어 흰 대화상자 위에서 경계가 사라지고, 지금 확인창도 대화상자 위에 딤을 한 겹 더 깐다.
+// iOS 26 Safari는 fixed 딤이 스크롤 뒤 화면을 다 덮지 못해 absolute로 둔다(Base UI 권장, body position: relative는 globals.css)
+function AlertDialogOverlay({ closeLabel }: Readonly<{ closeLabel?: string }>) {
   return (
     <AlertDialogPrimitive.Backdrop
+      forceRender
       data-slot="alert-dialog-overlay"
-      className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
+      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"
+        />
       )}
-      {...props}
-    />
-  )
+    </AlertDialogPrimitive.Backdrop>
+  );
 }
 
-function AlertDialogContent({
-  className,
-  size = "default",
-  ...props
-}: AlertDialogPrimitive.Popup.Props & {
-  size?: "default" | "sm"
-}) {
+type AlertDialogContentProps = Omit<AlertDialogPrimitive.Popup.Props, "className" | "ref"> & {
+  /** 배치(폭)에만 쓴다 */
+  className?: string;
+  /** 주면 딤을 눌러 닫힌다(지금 확인창 동작). 값은 딤 위 숨은 닫기 버튼의 이름이다(예: "{제목} 배경 닫기"). 없으면 Esc·취소로만 닫힌다 */
+  backdropCloseLabel?: string;
+  /** 확인창의 접근성 이름. 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, initialFocus, ...props }: Readonly<AlertDialogContentProps>) {
+  const popupRef = useRef<HTMLDivElement>(null);
   return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal">
+      <AlertDialogOverlay closeLabel={backdropCloseLabel} />
       <AlertDialogPrimitive.Popup
+        ref={popupRef}
         data-slot="alert-dialog-content"
-        data-size={size}
+        // 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(
-          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
+          "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}
       />
-    </AlertDialogPortal>
-  )
+    </AlertDialogPrimitive.Portal>
+  );
 }
 
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+/** Figma Content: 제목·본문 세로 간격 4, 가운데 정렬(5621:2819·2820) */
+function AlertDialogHeader({ className, ...props }: Readonly<ComponentProps<"div">>) {
   return (
     <div
       data-slot="alert-dialog-header"
-      className={cn(
-        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
-        className
-      )}
+      className={cn("flex flex-col gap-1 text-center", className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn(
-        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+// 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-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
-        className
-      )}
+      className={cn("text-title-l text-text", className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+// body/lg/regular · text/subtle(5621:2820). 설명 문자열의 줄바꿈(\n)은 지금 확인창처럼 그대로 보인다(ConfirmDialog whitespace-pre-line)
+function AlertDialogDescription({ className, ...props }: Readonly<AlertDialogPrimitive.Description.Props>) {
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn(
-        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
-      )}
+      className={cn("text-body-l-regular whitespace-pre-line text-text-subtle", className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDialogAction({
+// 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
-}: React.ComponentProps<typeof Button>) {
+}: Readonly<ComponentProps<"div"> & VariantProps<typeof alertDialogFooterVariants>>) {
   return (
-    <Button
-      data-slot="alert-dialog-action"
-      className={cn(className)}
+    <div
+      data-slot="alert-dialog-footer"
+      data-layout={layout}
+      className={cn(alertDialogFooterVariants({ layout }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDialogCancel({
-  className,
-  variant = "outline",
-  size = "default",
-  ...props
-}: AlertDialogPrimitive.Close.Props &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+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"
-      className={cn(className)}
-      render={<Button variant={variant} size={size} />}
+      render={<Button variant="weak" className={className} />}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -179,9 +234,6 @@ export {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
   AlertDialogTitle,
   AlertDialogTrigger,
-}
+};

From 97089b698e37be0f12f2fc5e77dc808185573046 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:02 +0900
Subject: [PATCH 08/50] =?UTF-8?q?style(ui):=20Drawer=EB=A5=BC=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20Bottom=20She?=
 =?UTF-8?q?et=EC=97=90=20=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma Bottom Sheet(5924:13961): 위 모서리 20, 딤 gray-950 20%, 제목 title/lg·영역 간격 20, 손잡이 36×4
- 아래로 스와이프해 닫기(Base UI 기준), 버튼·입력·label·checkbox/switch/radio 위에서는 끌리지 않음
- Dialog와 같은 closeDisabled·Esc 규칙, 중첩 시트도 딤을 그림

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/drawer.tsx | 366 +++++++++++++++++++----------------
 1 file changed, 197 insertions(+), 169 deletions(-)

diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
index d861de23..154363cf 100644
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,227 +1,255 @@
-"use client"
-
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
-import { cn } from "cn"
-
-type DrawerContextProps = {
-  hasSnapPoints: boolean
-  modal: DrawerPrimitive.Root.Props["modal"]
-  showSwipeHandle: boolean
-  swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>
-}
-
-const DrawerContext = React.createContext<DrawerContextProps | null>(null)
-
-function useDrawer() {
-  const context = React.useContext(DrawerContext)
-
-  if (!context) {
-    throw new Error("useDrawer must be used within a Drawer.")
-  }
-
-  return context
+"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", "");
 }
 
-function Drawer({
-  modal = true,
-  showSwipeHandle = false,
-  snapPoints,
-  swipeDirection = "down",
-  ...props
-}: DrawerPrimitive.Root.Props & {
-  showSwipeHandle?: boolean
-}) {
-  const hasSnapPoints = snapPoints != null && snapPoints.length > 0
-  const contextValue = React.useMemo(
-    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
-    [hasSnapPoints, modal, showSwipeHandle, swipeDirection]
-  )
-
+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 (
-    <DrawerContext.Provider value={contextValue}>
+    <DrawerCloseDisabledContext value={closeDisabled}>
       <DrawerPrimitive.Root
-        data-slot="drawer"
-        modal={modal}
-        snapPoints={snapPoints}
-        swipeDirection={swipeDirection}
+        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}
       />
-    </DrawerContext.Provider>
-  )
-}
-
-function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+    </DrawerCloseDisabledContext>
+  );
 }
 
-function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+/** 다른 요소로 그리려면 render(예: render={<Button variant="weak" />}). 트리거 없이 open으로 여는 시트는 쓰지 않는다 */
+function DrawerTrigger(props: Readonly<DrawerPrimitive.Trigger.Props>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }
 
-function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
-}
-
-function DrawerOverlay({
-  className,
-  ...props
-}: DrawerPrimitive.Backdrop.Props) {
-  return (
-    <DrawerPrimitive.Backdrop
-      data-slot="drawer-overlay"
-      className={cn(
-        "fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerSwipeHandle({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-swipe-handle"
-      aria-hidden="true"
-      className={cn(
-        "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing",
-        className
-      )}
-      {...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
-}: DrawerPrimitive.Popup.Props) {
-  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
-  const swipeAxis =
-    swipeDirection === "down" || swipeDirection === "up" ? "y" : "x"
-
+}: Readonly<DrawerContentProps>) {
+  const closeDisabled = use(DrawerCloseDisabledContext);
   return (
-    <DrawerPortal data-slot="drawer-portal">
-      {modal === true && (
-        <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />
-      )}
-      <DrawerPrimitive.Viewport
-        data-slot="drawer-viewport"
-        data-modal={modal}
-        className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
-      >
+    <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-popup"
-          data-swipe-axis={swipeAxis}
-          data-snap-points={hasSnapPoints ? "" : undefined}
-          className={cn(
-            // Base.
-            "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
-            // Nested.
-            "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
-            // Bleed.
-            "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
-            // Sizing.
-            "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
-            // Stack.
-            "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
-            // Transitions.
-            "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
-            // Axis: y.
-            "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
-            // Axis: x.
-            "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
-            // Direction: down.
-            "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
-            // Direction: up.
-            "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
-            // Direction: left.
-            "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
-            // Direction: right.
-            "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
-            className
-          )}
+          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}
         >
-          {showSwipeHandle && <DrawerSwipeHandle />}
-          <DrawerPrimitive.Content
-            data-slot="drawer-content"
-            className={cn(
-              "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
-            )}
-          >
-            {children}
+          {/* 손잡이 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>
-    </DrawerPortal>
-  )
+    </DrawerPrimitive.Portal>
+  );
 }
 
-function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+/**
+ * 제목 줄(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(
-        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left",
-        className
+        "grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-y-1 px-5 pt-2",
+        className,
       )}
       {...props}
-    />
-  )
-}
-
-function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-footer"
-      className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", 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>
+  );
 }
 
-function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
+// 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(
-        "text-base font-medium text-foreground",
-        className
-      )}
+      className={cn("truncate text-title-l text-text", className)}
       {...props}
     />
-  )
+  );
 }
 
+// Figma Subtitle 5924:13973: caption/md/regular text/subtle. 예: 장소 이름
 function DrawerDescription({
   className,
   ...props
-}: DrawerPrimitive.Description.Props) {
+}: Readonly<Omit<DrawerPrimitive.Description.Props, "className"> & { className?: string }>) {
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn("text-sm text-balance text-muted-foreground", className)}
+      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,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerSwipeHandle,
   DrawerTrigger,
   DrawerClose,
   DrawerContent,
   DrawerHeader,
-  DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+  DrawerBody,
+  DrawerFooter,
+};

From f732b8a5a676ec2211c494246852b32b87de2da4 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:02 +0900
Subject: [PATCH 09/50] =?UTF-8?q?style(ui):=20DropdownMenu=EB=A5=BC=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20Dro?=
 =?UTF-8?q?pdown=20Menu=EC=97=90=20=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma Dropdown Menu(5864:13084)·Item(5956:16861): 모서리 12·테두리 없음·shadow/default·최소 폭 160·항목 48/50, 위험 항목 red-800
- 기본 modal={false}로 바깥 클릭이 뒤로 전달되고 스크롤을 막지 않는 지금 동작 유지, 키보드 포커스 윤곽선
- 링크 항목은 누르면 닫힘, 북마크 2단 메뉴용 하위 메뉴 파트

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/dropdown-menu.tsx | 364 +++++++++++++---------------
 1 file changed, 170 insertions(+), 194 deletions(-)

diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index cafe6ba8..793deaf2 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,36 +1,56 @@
-"use client"
-
-import * as React from "react"
-import { Menu as MenuPrimitive } from "@base-ui/react/menu"
-import { cn } from "cn"
-import { ChevronRightIcon, CheckIcon } from "lucide-react"
-
-function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
-  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
-  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-}
-
-function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
-  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
-}
-
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+
+import { ChevronRightIcon } from "@/assets/icons";
+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
-}: MenuPrimitive.Popup.Props &
-  Pick<
-    MenuPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
+}: Readonly<DropdownMenuContentProps>) {
   return (
     <MenuPrimitive.Portal>
+      {/* z-50은 다른 shadcn 팝업과 같은 값이다. 앱 내용은 isolate로 감싸 있어 body 포털 팝업이 앱 위에 뜬다(app-chrome-shell) */}
       <MenuPrimitive.Positioner
         className="isolate z-50 outline-none"
         align={align}
@@ -40,228 +60,184 @@ function DropdownMenuContent({
       >
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
-          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          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>
-  )
-}
-
-function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
-  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: MenuPrimitive.GroupLabel.Props & {
-  inset?: boolean
-}) {
+  );
+}
+
+// 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.GroupLabel
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
-        className
-      )}
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-variant={variant}
+      className={cn(dropdownMenuItemVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function DropdownMenuItem({
+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,
-  inset,
   variant = "default",
+  closeOnClick = true,
   ...props
-}: MenuPrimitive.Item.Props & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
+}: Readonly<DropdownMenuLinkItemProps>) {
   return (
-    <MenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
+    <MenuPrimitive.LinkItem
+      data-slot="dropdown-menu-link-item"
       data-variant={variant}
-      className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
-        className
-      )}
+      closeOnClick={closeOnClick}
+      className={cn(dropdownMenuItemVariants({ variant }), className)}
       {...props}
     />
-  )
-}
-
-function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
-  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+  );
 }
 
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: MenuPrimitive.SubmenuTrigger.Props & {
-  inset?: boolean
-}) {
+// 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 (
-    <MenuPrimitive.SubmenuTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
+    <div
+      data-slot="dropdown-menu-header"
       className={cn(
-        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        "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}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </MenuPrimitive.SubmenuTrigger>
-  )
+    />
+  );
 }
 
-function DropdownMenuSubContent({
-  align = "start",
-  alignOffset = -3,
-  side = "right",
-  sideOffset = 0,
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuContent>) {
+// 닉네임: label/xl/emphasis text/default. Figma 행간 22, 코드 토큰 24(Button lg와 같은 차이)라 Header 높이가 86 → 88
+function DropdownMenuHeaderTitle({ className, ...props }: Readonly<ComponentProps<"p">>) {
   return (
-    <DropdownMenuContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
-      align={align}
-      alignOffset={alignOffset}
-      side={side}
-      sideOffset={sideOffset}
+    <p
+      data-slot="dropdown-menu-header-title"
+      className={cn("truncate text-label-xl-emphasis text-text", className)}
       {...props}
     />
-  )
+  );
 }
 
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  inset,
-  ...props
-}: MenuPrimitive.CheckboxItem.Props & {
-  inset?: boolean
-}) {
+// 이메일: body/sm/regular text/subtle
+function DropdownMenuHeaderDescription({ className, ...props }: Readonly<ComponentProps<"p">>) {
   return (
-    <MenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
+    <p
+      data-slot="dropdown-menu-header-description"
+      className={cn("truncate text-body-s-regular text-text-subtle", className)}
       {...props}
-    >
-      <span
-        className="pointer-events-none absolute right-2 flex items-center justify-center"
-        data-slot="dropdown-menu-checkbox-item-indicator"
-      >
-        <MenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon
-          />
-        </MenuPrimitive.CheckboxItemIndicator>
-      </span>
-      {children}
-    </MenuPrimitive.CheckboxItem>
-  )
+    />
+  );
 }
 
-function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
-  return (
-    <MenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
+/**
+ * 2단 메뉴(BookmarkPlaceRow '카테고리 변경 → 폴더 목록'용). Figma에 하위 메뉴가 없어 항목·표면은 위 Item·Content를 그대로 쓴다.
+ * 포인터는 hover, 터치는 누르면 열리고 ← · Esc는 하위 메뉴만 닫는다.
+ * 하위 메뉴와 메뉴 안 단계 전환(지금 BookmarkPlaceRow 방식) 중 무엇을 쓸지는 디자이너 질문으로 남아 있다.
+ * 화면 교체 단계에서 BookmarkPlaceRow가 이 파트를 쓰지 않게 되면 Sub·SubTrigger·SubContent와 ChevronRightIcon import를 지운다
+ */
+function DropdownMenuSub(props: Readonly<MenuPrimitive.SubmenuRoot.Props>) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
 }
 
-function DropdownMenuRadioItem({
-  className,
-  children,
-  inset,
-  ...props
-}: MenuPrimitive.RadioItem.Props & {
-  inset?: boolean
-}) {
+type DropdownMenuSubTriggerProps = Omit<MenuPrimitive.SubmenuTrigger.Props, "className"> & {
+  className?: string;
+};
+
+// 하위 메뉴가 열려 있는 동안에도 강조 배경을 유지한다. 오른쪽 chevron 20px
+function DropdownMenuSubTrigger({ className, children, ...props }: Readonly<DropdownMenuSubTriggerProps>) {
   return (
-    <MenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      className={cn(dropdownMenuItemVariants(), "data-popup-open:bg-fill", className)}
       {...props}
     >
-      <span
-        className="pointer-events-none absolute right-2 flex items-center justify-center"
-        data-slot="dropdown-menu-radio-item-indicator"
-      >
-        <MenuPrimitive.RadioItemIndicator>
-          <CheckIcon
-          />
-        </MenuPrimitive.RadioItemIndicator>
-      </span>
       {children}
-    </MenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: MenuPrimitive.Separator.Props) {
-  return (
-    <MenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
+      <ChevronRightIcon size={20} className="ms-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  );
 }
 
-function DropdownMenuShortcut({
-  className,
+/** 상위 메뉴 옆(inline-end)에 첫 행 높이를 맞춰 붙인다. 화면 끝에 닿으면 Base UI가 반대쪽으로 뒤집는다 */
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = 0,
+  side = "inline-end",
+  sideOffset = 0,
   ...props
-}: React.ComponentProps<"span">) {
+}: Readonly<DropdownMenuContentProps>) {
   return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
-        className
-      )}
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
       {...props}
     />
-  )
+  );
 }
 
 export {
   DropdownMenu,
-  DropdownMenuPortal,
   DropdownMenuTrigger,
   DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
   DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
+  DropdownMenuLinkItem,
+  DropdownMenuHeader,
+  DropdownMenuHeaderTitle,
+  DropdownMenuHeaderDescription,
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};

From 3b4270c969aaf6850d40abea0fe29c6719b7e44f Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:02 +0900
Subject: [PATCH 10/50] =?UTF-8?q?style(ui):=20Select=EB=A5=BC=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20Select?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma 08 Select(5047:440): 트리거 48·모서리 8, 목록 fill/elevate·border·shadow·행 56+구분선, 선택 행 체크 16
- 기본 alignItemWithTrigger={false}·modal={false}(아래로 열리고 바깥 클릭이 전달되는 지금 동작)
- 오류는 Text Field 모양(aria-invalid 빨간 테두리, Field 라벨·FieldError), 포커스 윤곽선·hover 테두리

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/select.tsx | 228 +++++++++++++----------------------
 1 file changed, 84 insertions(+), 144 deletions(-)

diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index ca1ee68d..aaae4c2f 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,200 +1,140 @@
-"use client"
+import { Select as SelectPrimitive } from "@base-ui/react/select";
 
-import * as React from "react"
-import { Select as SelectPrimitive } from "@base-ui/react/select"
-import { cn } from "cn"
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+import { CheckIcon, ChevronDownIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
 
-const Select = SelectPrimitive.Root
+// 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 값을 따른다
 
-function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
-  return (
-    <SelectPrimitive.Group
-      data-slot="select-group"
-      className={cn("scroll-my-1 p-1", className)}
-      {...props}
-    />
-  )
+/**
+ * 값 하나를 고르는 목록. 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} />;
 }
 
-function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
-  return (
-    <SelectPrimitive.Value
-      data-slot="select-value"
-      className={cn("flex flex-1 text-left", className)}
-      {...props}
-    />
-  )
-}
+// Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+type SelectTriggerProps = Omit<SelectPrimitive.Trigger.Props, "className"> & { className?: string };
 
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: SelectPrimitive.Trigger.Props & {
-  size?: "sm" | "default"
-}) {
+/**
+ * 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"
-      data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        // 열림(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
-        render={
-          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
-        }
-      />
+        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 = "center",
+  align = "start",
   alignOffset = 0,
-  alignItemWithTrigger = true,
+  alignItemWithTrigger = false,
   ...props
-}: SelectPrimitive.Popup.Props &
-  Pick<
-    SelectPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
-  >) {
+}: Readonly<SelectContentProps>) {
   return (
     <SelectPrimitive.Portal>
+      {/* 다른 body 포털 부품(대화상자 등)과 같은 z-50이라 나중에 여는 이 목록이 위에 뜬다 */}
       <SelectPrimitive.Positioner
         side={side}
         sideOffset={sideOffset}
         align={align}
         alignOffset={alignOffset}
         alignItemWithTrigger={alignItemWithTrigger}
-        className="isolate z-50"
+        className="z-50"
       >
         <SelectPrimitive.Popup
           data-slot="select-content"
-          data-align-trigger={alignItemWithTrigger}
-          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          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}
         >
-          <SelectScrollUpButton />
           <SelectPrimitive.List>{children}</SelectPrimitive.List>
-          <SelectScrollDownButton />
         </SelectPrimitive.Popup>
       </SelectPrimitive.Positioner>
     </SelectPrimitive.Portal>
-  )
+  );
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: SelectPrimitive.GroupLabel.Props) {
-  return (
-    <SelectPrimitive.GroupLabel
-      data-slot="select-label"
-      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
+type SelectItemProps = Omit<SelectPrimitive.Item.Props, "className"> & { className?: string };
 
-function SelectItem({
-  className,
-  children,
-  ...props
-}: SelectPrimitive.Item.Props) {
+/**
+ * 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(
-        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
+        "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="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
-        {children}
-      </SelectPrimitive.ItemText>
-      <SelectPrimitive.ItemIndicator
-        render={
-          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-        }
-      >
-        <CheckIcon className="pointer-events-none" />
+      <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>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: SelectPrimitive.Separator.Props) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
-  return (
-    <SelectPrimitive.ScrollUpArrow
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon
-      />
-    </SelectPrimitive.ScrollUpArrow>
-  )
+  );
 }
 
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
-  return (
-    <SelectPrimitive.ScrollDownArrow
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon
-      />
-    </SelectPrimitive.ScrollDownArrow>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue };

From 0c68aa5d6deb2e361b479b1615640089f13d9de0 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:02 +0900
Subject: [PATCH 11/50] =?UTF-8?q?style(ui):=20Combobox=EB=A5=BC=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20Sel?=
 =?UTF-8?q?ect=20Field=EC=97=90=20=EB=A7=9E=EC=B6=94=EA=B3=A0=20input-grou?=
 =?UTF-8?q?p=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma 07 Select Field(5030:666): 검색칸은 SearchBar 모양, 목록 fill/subtle·border·그림자 없음·행 56+구분선, 선택 행 체크 16
- 통화 선택처럼 트리거 → 팝업 안 검색 → 목록 패턴용 파트만 남김
- input-group은 SearchBar와 겹치고 쓰는 곳이 없어 지움

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/combobox.tsx    | 405 +++++++++++++-----------------
 src/components/ui/input-group.tsx | 158 ------------
 2 files changed, 169 insertions(+), 394 deletions(-)
 delete mode 100644 src/components/ui/input-group.tsx

diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
index d4ca41bf..bb11f441 100644
--- a/src/components/ui/combobox.tsx
+++ b/src/components/ui/combobox.tsx
@@ -1,297 +1,230 @@
-"use client"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import type { ReactNode } from "react";
 
-import * as React from "react"
-import { Combobox as ComboboxPrimitive } from "@base-ui/react"
-import { cn } from "cn"
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "@/assets/icons";
+import { SearchBar, SearchBarIcon, SearchBarInput } from "@/components/ui/search-bar";
+import { cn } from "@/lib/utils";
 
-import { Button } from "@/components/ui/button"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/components/ui/input-group"
-import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+// 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 값을 빌린다
 
-const Combobox = ComboboxPrimitive.Root
+/** Base UI Combobox.Root. items·value·onValueChange·itemToStringLabel·filter로 값과 검색을 정한다. modal 기본 false(바깥 클릭이 뒤로 전달되고 스크롤을 잠그지 않는다) */
+const Combobox = ComboboxPrimitive.Root;
 
-function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
-}
+// Base UI는 상태 함수 className도 받지만 cn(clsx)이 함수를 소리 없이 버리므로 배치용 문자열만 받는다(select.tsx와 같다)
+type StringClassName<P> = Omit<P, "className"> & { className?: string };
 
-function ComboboxTrigger({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Trigger.Props) {
+// 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.Trigger
-      data-slot="combobox-trigger"
-      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+    <ComboboxPrimitive.Label
+      data-slot="combobox-label"
+      className={cn("text-label-xs-regular text-text select-none", className)}
       {...props}
-    >
-      {children}
-      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
-    </ComboboxPrimitive.Trigger>
-  )
+    />
+  );
 }
 
-function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.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.Clear
-      data-slot="combobox-clear"
-      render={<InputGroupButton variant="ghost" size="icon-xs" />}
-      className={cn(className)}
+    <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}
     >
-      <XIcon className="pointer-events-none" />
-    </ComboboxPrimitive.Clear>
-  )
-}
-
-function ComboboxInput({
-  className,
-  children,
-  disabled = false,
-  showTrigger = true,
-  showClear = false,
-  ...props
-}: ComboboxPrimitive.Input.Props & {
-  showTrigger?: boolean
-  showClear?: boolean
-}) {
-  return (
-    <InputGroup className={cn("w-auto", className)}>
-      <ComboboxPrimitive.Input
-        render={<InputGroupInput disabled={disabled} />}
-        {...props}
-      />
-      <InputGroupAddon align="inline-end">
-        {showTrigger && (
-          <InputGroupButton
-            size="icon-xs"
-            variant="ghost"
-            render={<ComboboxTrigger />}
-            data-slot="input-group-button"
-            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
-            disabled={disabled}
-          />
-        )}
-        {showClear && <ComboboxClear disabled={disabled} />}
-      </InputGroupAddon>
-      {children}
-    </InputGroup>
-  )
-}
-
+      <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",
-  sideOffset = 6,
   align = "start",
+  sideOffset = 4,
   alignOffset = 0,
-  anchor,
   ...props
-}: ComboboxPrimitive.Popup.Props &
-  Pick<
-    ComboboxPrimitive.Positioner.Props,
-    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
-  >) {
+}: Readonly<ComboboxContentProps>) {
   return (
     <ComboboxPrimitive.Portal>
       <ComboboxPrimitive.Positioner
         side={side}
-        sideOffset={sideOffset}
         align={align}
+        sideOffset={sideOffset}
         alignOffset={alignOffset}
-        anchor={anchor}
-        className="isolate z-50"
+        className="z-50"
       >
         <ComboboxPrimitive.Popup
           data-slot="combobox-content"
-          data-chips={!!anchor}
-          className={cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          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>
-  )
+  );
 }
 
-function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
-  return (
-    <ComboboxPrimitive.List
-      data-slot="combobox-list"
-      className={cn(
-        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+type ComboboxInputProps = StringClassName<ComboboxPrimitive.Input.Props> & {
+  /** SearchBarInput처럼 꼭 받는다. 값이 있는지(Filled 테두리)를 :placeholder-shown으로 읽는다 */
+  placeholder: string;
+  /** 입력 뒤 Trailing Icon 자리(32×48). 검색어 지우기는 SearchBarClear를 넣는다 */
+  children?: ReactNode;
+};
 
-function ComboboxItem({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Item.Props) {
+// 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.Item
-      data-slot="combobox-item"
-      className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
+    <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.ItemIndicator
-        render={
-          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-        }
-      >
-        <CheckIcon className="pointer-events-none" />
-      </ComboboxPrimitive.ItemIndicator>
-    </ComboboxPrimitive.Item>
-  )
-}
-
-function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
-  return (
-    <ComboboxPrimitive.Group
-      data-slot="combobox-group"
-      className={cn(className)}
-      {...props}
-    />
-  )
-}
-
-function ComboboxLabel({
-  className,
-  ...props
-}: ComboboxPrimitive.GroupLabel.Props) {
-  return (
-    <ComboboxPrimitive.GroupLabel
-      data-slot="combobox-label"
-      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
-  return (
-    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
-  )
-}
-
-function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
-  return (
-    <ComboboxPrimitive.Empty
-      data-slot="combobox-empty"
-      className={cn(
-        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ComboboxSeparator({
-  className,
-  ...props
-}: ComboboxPrimitive.Separator.Props) {
-  return (
-    <ComboboxPrimitive.Separator
-      data-slot="combobox-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
+    </ComboboxPrimitive.InputGroup>
+  );
 }
 
-function ComboboxChips({
-  className,
-  ...props
-}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
-  ComboboxPrimitive.Chips.Props) {
+// 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.Chips
-      data-slot="combobox-chips"
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
       className={cn(
-        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
-        className
+        "max-h-52 min-h-0 overflow-y-auto overscroll-contain rounded-md border border-border bg-fill-subtle data-empty:hidden",
+        className,
       )}
       {...props}
     />
-  )
-}
-
-function ComboboxChip({
-  className,
-  children,
-  showRemove = true,
-  ...props
-}: ComboboxPrimitive.Chip.Props & {
-  showRemove?: boolean
-}) {
+  );
+}
+
+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.Chip
-      data-slot="combobox-chip"
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
       className={cn(
-        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
-        className
+        "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}
     >
-      {children}
-      {showRemove && (
-        <ComboboxPrimitive.ChipRemove
-          render={<Button variant="ghost" size="icon-xs" />}
-          className="-ml-1 opacity-50 hover:opacity-100"
-          data-slot="combobox-chip-remove"
-        >
-          <XIcon className="pointer-events-none" />
-        </ComboboxPrimitive.ChipRemove>
+      {icon && (
+        <span aria-hidden className="flex shrink-0 text-icon-subtle">
+          {icon}
+        </span>
       )}
-    </ComboboxPrimitive.Chip>
-  )
+      <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>
+  );
 }
 
-function ComboboxChipsInput({
-  className,
-  ...props
-}: ComboboxPrimitive.Input.Props) {
+// 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.Input
-      data-slot="combobox-chip-input"
-      className={cn("min-w-16 flex-1 outline-none", className)}
-      {...props}
-    />
-  )
-}
-
-function useComboboxAnchor() {
-  return React.useRef<HTMLDivElement | null>(null)
+    <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,
-  ComboboxInput,
+  ComboboxLabel,
+  ComboboxTrigger,
+  ComboboxValue,
   ComboboxContent,
+  ComboboxInput,
   ComboboxList,
   ComboboxItem,
-  ComboboxGroup,
-  ComboboxLabel,
-  ComboboxCollection,
   ComboboxEmpty,
-  ComboboxSeparator,
-  ComboboxChips,
-  ComboboxChip,
-  ComboboxChipsInput,
-  ComboboxTrigger,
-  ComboboxValue,
-  useComboboxAnchor,
-}
+};
diff --git a/src/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
deleted file mode 100644
index 08cd6aae..00000000
--- a/src/components/ui/input-group.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
-
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-
-function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-group"
-      role="group"
-      className={cn(
-        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
-        "inline-end":
-          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
-        "block-start":
-          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-        "block-end":
-          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  }
-)
-
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
-          return
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
-      }}
-      {...props}
-    />
-  )
-}
-
-const inputGroupButtonVariants = cva(
-  "flex items-center gap-2 text-sm shadow-none",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
-  }
-)
-
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
-  VariantProps<typeof inputGroupButtonVariants> & {
-    type?: "button" | "submit" | "reset"
-  }) {
-  return (
-    <Button
-      type={type}
-      data-size={size}
-      variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...props}
-    />
-  )
-}
-
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      className={cn(
-        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-}

From 6644ef5e0cc72ff09666c781aa77013d976d7a9c Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:02 +0900
Subject: [PATCH 12/50] =?UTF-8?q?style(ui):=20Popover=20=ED=91=9C=EB=A9=B4?=
 =?UTF-8?q?=EC=9D=84=20Modal=EA=B3=BC=20=EA=B0=99=EA=B2=8C=20=EB=A7=9E?=
 =?UTF-8?q?=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma에 일반 팝오버가 없어 Modal 표면(fill/elevate·모서리 12·shadow/default), 여백·폭은 지금 헤더 미리보기 값(panel)
- 기간 칸 아래 달력용 bare 변형(기준 요소 폭), 기본 sideOffset 8

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/popover.tsx | 120 +++++++++++++++++-----------------
 1 file changed, 59 insertions(+), 61 deletions(-)

diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index c911a360..d11cc7d0 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,89 +1,87 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
-import { cn } from "cn"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cva, type VariantProps } from "class-variance-authority";
 
-function Popover({ ...props }: PopoverPrimitive.Root.Props) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+import { cn } from "@/lib/utils";
+
+/**
+ * 트리거에 붙어 뜨는 패널. 동작 목록이면 DropdownMenu, 값 하나를 고르면 Select를 쓴다.
+ * modal 기본값은 Base UI 기본 false다. 지금 패널들처럼 바깥 클릭이 뒤로 전달되고 페이지 스크롤을 막지 않는다.
+ * 바깥 클릭·Esc로 닫히고, 열면 첫 포커스 가능 요소로(터치면 패널로), 닫으면 트리거로 포커스가 돌아간다.
+ */
+function Popover(props: Readonly<PopoverPrimitive.Root.Props>) {
+  return <PopoverPrimitive.Root {...props} />;
 }
 
-function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...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 = 4,
+  sideOffset = 8,
+  anchor,
   ...props
-}: PopoverPrimitive.Popup.Props &
-  Pick<
-    PopoverPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
+}: Readonly<PopoverContentProps>) {
   return (
     <PopoverPrimitive.Portal>
+      {/* 다른 body 포털 부품(대화상자·Select 등)과 같은 z-50이라 나중에 연 이 패널이 위에 뜬다. 앱 내용은 isolate로 감싸 있어(app-chrome-shell) 앱 안 z와 겨루지 않는다 */}
       <PopoverPrimitive.Positioner
         align={align}
         alignOffset={alignOffset}
         side={side}
         sideOffset={sideOffset}
-        className="isolate z-50"
+        anchor={anchor}
+        className="z-50"
       >
         <PopoverPrimitive.Popup
           data-slot="popover-content"
-          className={cn(
-            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
-          )}
+          className={cn(popoverContentVariants({ variant }), className)}
           {...props}
         />
       </PopoverPrimitive.Positioner>
     </PopoverPrimitive.Portal>
-  )
-}
-
-function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="popover-header"
-      className={cn("flex flex-col gap-0.5 text-sm", className)}
-      {...props}
-    />
-  )
+  );
 }
 
-function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
-  return (
-    <PopoverPrimitive.Title
-      data-slot="popover-title"
-      className={cn("font-medium", className)}
-      {...props}
-    />
-  )
-}
-
-function PopoverDescription({
-  className,
-  ...props
-}: PopoverPrimitive.Description.Props) {
-  return (
-    <PopoverPrimitive.Description
-      data-slot="popover-description"
-      className={cn("text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-}
+export { Popover, PopoverContent, PopoverTrigger };

From 61f4b7bd86e710cf9aa9372b4488db4407d8aeb4 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:02 +0900
Subject: [PATCH 13/50] =?UTF-8?q?style(ui):=20Tabs=EB=A5=BC=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20Tabs?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma 11 Tabs(5138:2632): Line은 탭마다 고정 2px 막대(border-subtle, 선택 primary), Chip Solid·Outline 변형, 좌우 padding 24
- shadcn 전용 변형(data-horizontal 등)을 data-[orientation]으로 바꿈

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/tabs.tsx | 208 +++++++++++++++++++++++++++----------
 1 file changed, 156 insertions(+), 52 deletions(-)

diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 74e47661..69b82e80 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,81 +1,185 @@
-"use client"
+"use client";
 
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import { createContext, useContext, useMemo } from "react";
 
-function Tabs({
-  className,
-  orientation = "horizontal",
-  ...props
-}: TabsPrimitive.Root.Props) {
+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"
-      data-orientation={orientation}
-      className={cn(
-        "group/tabs flex gap-2 data-horizontal:flex-col",
-        className
-      )}
+      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>
+  );
 }
 
-const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+// 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: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
+        // 막대(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: "" },
     },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function TabsList({
-  className,
-  variant = "default",
-  ...props
-}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      data-variant={variant}
-      className={cn(tabsListVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
+    // 높이는 글자가 커지면 늘어나게 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",
+      },
+    ],
+  },
+);
 
-function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+/**
+ * 탭 하나. 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(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-        className
-      )}
+      className={cn(tabsTriggerVariants(style), className)}
       {...props}
     />
-  )
+  );
 }
 
-function TabsContent({ className, ...props }: TabsPrimitive.Panel.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("flex-1 text-sm outline-none", className)}
+      className={cn(
+        "min-w-0 flex-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
+export { Tabs, TabsContent, TabsList, TabsTrigger };

From 57c9a838e83753280b197fa9823e869985166356 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:16 +0900
Subject: [PATCH 14/50] =?UTF-8?q?chore(deps):=20shadcn=20add=EA=B0=80=20?=
 =?UTF-8?q?=ED=95=A8=EA=BB=98=20=EC=84=A4=EC=B9=98=ED=95=9C=20cn=20?=
 =?UTF-8?q?=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 받은 부품을 모두 @/lib/utils의 cn(타이포 토큰 등록)으로 바꿔 쓰는 곳이 없음

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 package-lock.json | 13 -------------
 package.json      |  1 -
 2 files changed, 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bb7b7671..bb66e5a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,6 @@
         "@vis.gl/react-google-maps": "^1.8.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "cn": "^0.5.1",
         "framer-motion": "^12.38.0",
         "lucide-react": "^1.7.0",
         "next": "16.2.1",
@@ -6230,18 +6229,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/cn": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/cn/-/cn-0.5.1.tgz",
-      "integrity": "sha512-SA06SpzSWXRNrt/EQWnRpck9jEVDfVJonw8ZewiNR6pOC4U0SQ81tWaQ9/PKNPh/lWvjuY4CMlxpc8tJViiX6Q==",
-      "license": "MIT",
-      "bin": {
-        "cn": "bin/cn.mjs"
-      },
-      "engines": {
-        "node": ">=22"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
diff --git a/package.json b/package.json
index e6135a39..6dd9c67d 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
     "@vis.gl/react-google-maps": "^1.8.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cn": "^0.5.1",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.7.0",
     "next": "16.2.1",

From 9fbb59a0a1393dbb09b648ef094e2eaba04d6114 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 02:44:16 +0900
Subject: [PATCH 15/50] =?UTF-8?q?docs(conventions):=20Button=C2=B7Base=20U?=
 =?UTF-8?q?I=20=ED=8C=9D=EC=97=85=C2=B7=EB=8C=80=ED=99=94=EC=83=81?=
 =?UTF-8?q?=EC=9E=90=20=ED=8F=BC=20=EC=9B=90=EC=B9=99=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 원칙 1-1: 범용 Button 보류 문구를 ui Button 사용법으로, 팝업 z-index는 모두 z-50 + 앱 isolate 묶음, 예시를 ui Dialog로
- 원칙 2-9 새로 씀: 대화상자 폼은 TanStack Form, 검증은 칸마다, 버튼 loading·closeDisabled는 mutation isPending 하나로
- 안티패턴 6: 손으로 만든 메뉴·셀렉트·탭과 useState 폼을 신호로, 쓸 부품 목록 갱신

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 Design.md                              |  2 +-
 docs/code-conventions/anti-patterns.md |  4 +-
 docs/code-conventions/principles.md    | 56 ++++++++++++++++++++------
 3 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/Design.md b/Design.md
index 3719d6df..2fffb557 100644
--- a/Design.md
+++ b/Design.md
@@ -112,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/docs/code-conventions/anti-patterns.md b/docs/code-conventions/anti-patterns.md
index 9d7bca9f..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`·새 아이콘 패키지
-- ✓ `src/components/ui/`의 부품(`Spinner`·`Skeleton` 등)과 `ConfirmDialog`·`SettingsDialog`·`MobileBottomSheet`를 먼저 쓴다. 버튼은 `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` 같은 생명주기 훅, 쓰는 곳 없는 설정 레이어. 로직을 나누는 화면 훅은 사용처가 하나여도 걸리지 않는다.
diff --git a/docs/code-conventions/principles.md b/docs/code-conventions/principles.md
index 6c3b626b..a727c46c 100644
--- a/docs/code-conventions/principles.md
+++ b/docs/code-conventions/principles.md
@@ -15,36 +15,39 @@
 
 ### 1-1. 부품은 한 번 만들고 조립한다 (Headless UI)
 
-목표는 동작(포커스 가두기·키보드·aria·포털)은 shadcn(Base UI) 프리미티브가, 모양은 디자인 시스템 토큰이 맡는 것이다. 둘을 합친 부품을 `src/components/ui/`에 한 번 두고 화면은 조립만 한다. shadcn은 `base-nova` 스타일(`components.json`)로 받고, 옮기는 동안 기존 공용 부품과 병행한다.
+목표는 동작(포커스 가두기·키보드·aria·포털)은 shadcn(Base UI) 프리미티브가, 모양은 디자인 시스템 토큰이 맡는 것이다. 둘을 합친 부품을 `src/components/ui/`에 한 번 두고 화면은 조립만 한다. shadcn은 `base-nova` 스타일(`components.json`)로 받는다.
 
 | 상황 | 할 일 |
 | :-- | :-- |
-| 맞는 부품이 있다(`src/components/ui/`의 shadcn 부품, `src/components/<도메인>/`의 `ConfirmDialog`·`SettingsDialog`·`MobileBottomSheet`·`SettingsActionButton` 등) | 그대로 쓴다. 같은 역할의 shadcn 부품이 생기면 새로 쓰는 곳은 그쪽을 쓰고, 기존 사용처는 아래 4행대로 따로 옮긴다 |
-| 맞는 공용 부품이 없는 동작 부품(드롭다운·팝오버·탭·셀렉트)이 필요하다 | shadcn으로 만든다. `src/components/ui/`에 아직 없는 부품이면 받기 전에 묻는다(새 파일·의존성이 생긴다). 미루면 공용 셸에서 동작 처리(portal·포커스 가두기·Escape·aria)만 가져오고, 클래스·토큰·아이콘은 3-6과 Design.md를 따른다 |
+| 맞는 부품이 있다(`src/components/ui/`의 `Button`·`Dialog`·`AlertDialog`·`Drawer`(바텀시트)·`DropdownMenu`·`Select`·`Combobox`·`Popover`·`Tabs`·`Field`·`Input` 등, 확인창은 `ConfirmDialog`) | 그대로 쓴다. 같은 역할의 shadcn 부품이 생기면 새로 쓰는 곳은 그쪽을 쓰고, 기존 사용처는 아래 4행대로 따로 옮긴다 |
+| 맞는 부품이 없는 동작 부품이 필요하다 | shadcn으로 만든다. `src/components/ui/`에 아직 없는 부품이면 받기 전에 묻는다(새 파일·의존성이 생긴다). 클래스·토큰·아이콘은 3-6과 Design.md를 따른다 |
 | 동작 없는 표시 부품이 필요하다 | Tailwind로 만든다 |
 | 기존 공용 부품이나 그 사용처를 shadcn으로 바꾼다 | 기능·버그 작업에 섞지 않고 따로 한다 |
 
 - 변형은 `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 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가 다크 모드면 적용된다.
-  - z값은 같은 역할의 공용 셸(대화상자 `SettingsDialog`, 시트 `MobileBottomSheet`)에 맞추고, 그 안에서 여는 팝오버·셀렉트는 셸보다 위에 둔다.
+  - 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으로 옮긴 뒤: 동작은 Base UI, 모양은 토큰을 입힌 ui 부품
-<Dialog>
-  <DialogTrigger className="…">초대</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>
 ```
 
@@ -140,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).
 
@@ -424,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)

From cf724c8880b43b53a6b8b6fdf483abd226f099ce Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:56:44 +0900
Subject: [PATCH 16/50] =?UTF-8?q?feat(ui):=20=EB=B0=98=EC=9D=91=ED=98=95?=
 =?UTF-8?q?=20=EB=8C=80=ED=99=94=EC=83=81=EC=9E=90=EC=99=80=20=EB=B3=B8?=
 =?UTF-8?q?=EB=AC=B8=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20DialogBody=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ResponsiveDialog: PC는 Dialog, 모바일 기기(isMobileDevice)는 아래 시트(Drawer)로 같은 내용을 그린다
- DialogBody: 긴 폼에서 제목 줄·Footer는 고정하고 본문만 스크롤한다(시트 DrawerBody와 같은 방식)
- 원칙 1-1 부품 표에 ResponsiveDialog 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/code-conventions/principles.md     |   2 +-
 src/components/ui/dialog.tsx            |  16 +++
 src/components/ui/responsive-dialog.tsx | 151 ++++++++++++++++++++++++
 3 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/responsive-dialog.tsx

diff --git a/docs/code-conventions/principles.md b/docs/code-conventions/principles.md
index a727c46c..451be718 100644
--- a/docs/code-conventions/principles.md
+++ b/docs/code-conventions/principles.md
@@ -19,7 +19,7 @@
 
 | 상황 | 할 일 |
 | :-- | :-- |
-| 맞는 부품이 있다(`src/components/ui/`의 `Button`·`Dialog`·`AlertDialog`·`Drawer`(바텀시트)·`DropdownMenu`·`Select`·`Combobox`·`Popover`·`Tabs`·`Field`·`Input` 등, 확인창은 `ConfirmDialog`) | 그대로 쓴다. 같은 역할의 shadcn 부품이 생기면 새로 쓰는 곳은 그쪽을 쓰고, 기존 사용처는 아래 4행대로 따로 옮긴다 |
+| 맞는 부품이 있다(`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으로 바꾼다 | 기능·버그 작업에 섞지 않고 따로 한다 |
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 371a0c3b..28fa8775 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -90,6 +90,7 @@ type DialogContentProps = Omit<DialogPrimitive.Popup.Props, "className"> &
 
 /**
  * 포털·딤·표면을 함께 그린다. 안에는 DialogHeader → 본문 → DialogFooter 순서로 넣는다(간격 20은 표면 gap이 준다).
+ * 본문이 높이 상한을 넘으면 표면 전체가 스크롤된다. 긴 폼처럼 제목 줄·Footer를 고정하려면 본문을 DialogBody로 감싼다.
  * 닫기 X는 DialogHeader가 제목 줄에 그린다. DialogHeader 없이 본문으로 시작하는 대화상자에는 X가 없다(DialogClose를 직접 둔다).
  * 처음 포커스는 Base UI 기본(첫 포커스 요소, 터치로 열면 표면)이고, 바꾸려면 `initialFocus`·`finalFocus`를 넘긴다.
  */
@@ -152,6 +153,20 @@ function DialogHeader({ className, children, ...props }: Readonly<ComponentProps
   );
 }
 
+/**
+ * 본문만 스크롤하는 영역. 표면 높이 상한(화면 − 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 (
@@ -190,6 +205,7 @@ function DialogDescription({
 
 export {
   Dialog,
+  DialogBody,
   DialogClose,
   DialogContent,
   DialogDescription,
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,
+};

From aa1915fe80cc9d3fefd89f86a19c82633d07c803 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:56:57 +0900
Subject: [PATCH 17/50] =?UTF-8?q?refactor(settings):=20=ED=99=95=EC=9D=B8?=
 =?UTF-8?q?=EC=B0=BD=20ConfirmDialog=EB=A5=BC=20ui=20AlertDialog=20?=
 =?UTF-8?q?=EC=9C=84=EB=A1=9C=20=EC=98=AE=EA=B8=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 확인창 모양 3종(default·ledger·alert)을 Figma Alert Dialog 하나로 통일하고 appearance prop 삭제
- 처리 중에는 확인 버튼에 progress를 보이고 Esc·딤·취소를 모두 막는다(문구 '처리 중…' 대신)
- 딤을 누르면 닫히는 지금 동작은 유지, 닫기 X는 Figma에 없어 뺐다
- 삭제·비우기 확인창(북마크 폴더·장소, 일차, 일정 장소, 메모)에 destructive를 줘 Critical 버튼으로

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../_components/BookmarkFoldersView.tsx       |   1 +
 .../bookmark/_components/BookmarkPlaceRow.tsx |   1 +
 .../_components/useMemberActions.tsx          |   3 -
 .../_components/itinerary/PlanPageView.tsx    |   1 +
 .../_components/itinerary/PlanPlaceCard.tsx   |   2 +
 .../mobile/MobilePlanPlaceSheets.tsx          |   1 +
 .../home/_components/DeleteConfirmModal.tsx   |   1 -
 .../home/_components/LeaveConfirmModal.tsx    |   1 -
 src/components/expenses/ExpensePanel.tsx      |   1 -
 src/components/settings/ConfirmDialog.tsx     | 155 ++++++++----------
 10 files changed, 74 insertions(+), 93 deletions(-)

diff --git a/src/app/(main)/bookmark/_components/BookmarkFoldersView.tsx b/src/app/(main)/bookmark/_components/BookmarkFoldersView.tsx
index 4d7e5a29..37915f05 100644
--- a/src/app/(main)/bookmark/_components/BookmarkFoldersView.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkFoldersView.tsx
@@ -362,6 +362,7 @@ export function BookmarkFoldersView() {
       )}
       {folderToDelete ? (
         <ConfirmDialog
+          destructive
           title={`「${folderToDelete.title}」 북마크 목록을 삭제할까요?`}
           description="소속 북마크 항목도 함께 삭제됩니다."
           confirmLabel="삭제"
diff --git a/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx b/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx
index d3b7dad9..35c1830f 100644
--- a/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx
@@ -288,6 +288,7 @@ export function BookmarkPlaceRow({
       </div>
       {confirmOpen ? (
         <ConfirmDialog
+          destructive
           title="이 장소를 북마크에서 삭제할까요?"
           confirmLabel="삭제"
           isPending={deleting}
diff --git a/src/app/(main)/member-settings/_components/useMemberActions.tsx b/src/app/(main)/member-settings/_components/useMemberActions.tsx
index 6b00a6c7..42ef5a32 100644
--- a/src/app/(main)/member-settings/_components/useMemberActions.tsx
+++ b/src/app/(main)/member-settings/_components/useMemberActions.tsx
@@ -97,7 +97,6 @@ export function useMemberActions() {
     <>
       {leaveDialog === "confirm" ? (
         <ConfirmDialog
-          appearance="alert"
           destructive
           title="방에서 나가시겠어요?"
           description={"방을 나가면 이 여행의 일정과 대화에\n더 이상 접근할 수 없어요."}
@@ -129,7 +128,6 @@ export function useMemberActions() {
 
       {transferTarget && roomId ? (
         <ConfirmDialog
-          appearance="alert"
           title="방장을 위임하시겠어요?"
           description={`${transferTarget.nickname}님에게 방장을 넘기면\n나는 참여자가 돼요.`}
           confirmLabel="위임"
@@ -157,7 +155,6 @@ export function useMemberActions() {
 
       {kickTarget && roomId ? (
         <ConfirmDialog
-          appearance="alert"
           destructive
           title="강제 퇴장하시겠어요?"
           description={`${kickTarget.nickname}님을 이 여행에서 내보내요.`}
diff --git a/src/app/(main)/plan/_components/itinerary/PlanPageView.tsx b/src/app/(main)/plan/_components/itinerary/PlanPageView.tsx
index bee1cee9..9c7bc2f0 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanPageView.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanPageView.tsx
@@ -181,6 +181,7 @@ export function PlanPageView() {
 
   const deleteDayDialog = dayToDelete ? (
     <ConfirmDialog
+      destructive
       title={dayToDelete.isLast ? "이 일차를 비울까요?" : "이 일차를 삭제할까요?"}
       description={
         dayToDelete.isLast
diff --git a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
index a37373f1..9139ad99 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
@@ -467,6 +467,7 @@ export function PlanPlaceCard({
       ) : null}
       {confirmTarget === "item" ? (
         <ConfirmDialog
+          destructive
           title="일정에서 이 장소를 삭제할까요?"
           description="이 장소와 연결된 모든 비용도 함께 삭제돼요."
           confirmLabel="삭제"
@@ -477,6 +478,7 @@ export function PlanPlaceCard({
       ) : null}
       {confirmTarget === "memo" ? (
         <ConfirmDialog
+          destructive
           title="메모를 삭제할까요?"
           confirmLabel="삭제"
           isPending={isUpdatingItem}
diff --git a/src/app/(main)/plan/_components/mobile/MobilePlanPlaceSheets.tsx b/src/app/(main)/plan/_components/mobile/MobilePlanPlaceSheets.tsx
index 51cb878b..e118fa78 100644
--- a/src/app/(main)/plan/_components/mobile/MobilePlanPlaceSheets.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobilePlanPlaceSheets.tsx
@@ -138,6 +138,7 @@ export function MobilePlanPlaceSheets({
   if (sheet.kind === "delete") {
     return (
       <ConfirmDialog
+        destructive
         title="일정에서 이 장소를 삭제할까요?"
         description="이 장소와 연결된 모든 비용도 함께 삭제돼요."
         confirmLabel="삭제"
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/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/components/expenses/ExpensePanel.tsx b/src/components/expenses/ExpensePanel.tsx
index f0a996ec..94c00d2f 100644
--- a/src/components/expenses/ExpensePanel.tsx
+++ b/src/components/expenses/ExpensePanel.tsx
@@ -555,7 +555,6 @@ export function ExpensePanel() {
       {expenseToDelete ? (
         <ConfirmDialog
           title="비용을 삭제할까요?"
-          appearance="ledger"
           destructive
           description={`${expenseTitle(expenseToDelete)} 내역을 삭제해요. 삭제한 내역은 복구할 수 없어요.`}
           confirmLabel="삭제"
diff --git a/src/components/settings/ConfirmDialog.tsx b/src/components/settings/ConfirmDialog.tsx
index 2c0d7dfb..d454ccf3 100644
--- a/src/components/settings/ConfirmDialog.tsx
+++ b/src/components/settings/ConfirmDialog.tsx
@@ -1,28 +1,48 @@
 "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;
+  /** 삭제·탈퇴·나가기 같은 위험 동작이면 true(확인 버튼 Critical Solid) */
   destructive?: boolean;
-  appearance?: "default" | "ledger" | "alert";
-  /** 확인 동작이 실패했을 때 버튼 아래에 보여줄 한 줄 안내 — `alert`에서만 쓴다 */
+  /** 확인 동작이 실패했을 때 버튼 아래에 보여줄 한 줄 안내 */
   errorMessage?: string | null;
   onConfirm: () => void;
   onCancel: () => void;
 };
 
+// 포털 안 이벤트가 React 트리를 따라 카드 클릭·드래그 호스트(PlanPlaceCard·BookmarkPlaceRow)로 올라가는 것만 막는다.
+// Base UI 포털도 React 부모로 이벤트를 올리고, 딤의 '배경 닫기' 버튼은 표면 밖이라 표면 props로는 못 막아 Root 바깥을 감싼다.
+// 감싼 요소는 display: contents라 호출부 배치에 상자를 더하지 않는다. 키 입력은 Base UI가 document에서 받으므로 막지 않는다
+const stopPropagation = (event: SyntheticEvent) => event.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,
@@ -30,90 +50,51 @@ export function ConfirmDialog({
   cancelLabel = "취소",
   isPending = 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
+    <div
+      className="contents"
+      onClick={stopPropagation}
+      onMouseDown={stopPropagation}
+      onPointerDown={stopPropagation}
+      onTouchStart={stopPropagation}
     >
-      {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>
+      <AlertDialog
+        open
+        closeDisabled={isPending}
+        // 열린 채 마운트되므로 닫기 요청(open=false)만 온다
+        onOpenChange={(open) => {
+          if (!open) onCancel();
+        }}
+      >
+        <AlertDialogContent 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"}
+                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>
+    </div>
   );
 }

From 6c0ce5e6d2a41d94fef512ea483f0f8bc26e7c0d Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:57:19 +0900
Subject: [PATCH 18/50] =?UTF-8?q?refactor(expenses):=20=EA=B0=80=EA=B3=84?=
 =?UTF-8?q?=EB=B6=80=20=EB=8C=80=ED=99=94=EC=83=81=EC=9E=90=C2=B7=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=EA=B8=B0=EB=A5=BC=20ui=20=EB=B6=80=ED=92=88=EA=B3=BC?=
 =?UTF-8?q?=20TanStack=20Form=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 비용 추가·수정, 비용 목록, 정산 요약: showModal 대화상자 → ResponsiveDialog(PC Dialog, 모바일 기기 시트)
- 비용 추가·수정 폼을 TanStack Form으로 옮기고 칸마다 오류(빨간 테두리 + 아래 문구)를 보인다. 카테고리 Select도 같은 오류 모양
- validateExpense를 칸별 검증 함수로 나눔(기존 결과·문구는 그대로)
- 카테고리·일차·연결 장소는 ui Select, 통화는 ui Combobox(팝업 안 검색, 검색어 입력 뒤 Enter로 첫 결과 선택)
- 통화 목록이 없거나 목록 밖 통화여도 통화 칸에 폼 값을 보인다
- 비용 삭제 확인은 AlertDialog, 실패하면 포커스를 그 삭제 버튼으로 돌린다
- 정산 요약 대화상자는 시트 높이를 BelowNav로 고정하고 쓰지 않던 settlement 분기 삭제

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../expenses/ExpenseCurrencyPicker.tsx        | 256 ++----
 src/components/expenses/ExpenseDialog.tsx     | 109 +--
 src/components/expenses/ExpenseEditor.tsx     | 832 ++++++++++--------
 src/components/expenses/ExpensePanel.tsx      |   1 -
 src/components/expenses/ExpenseScopePanel.tsx | 244 +++--
 src/components/expenses/ExpenseSelect.tsx     | 257 +++---
 src/lib/expenses/expense-policy.ts            |  69 +-
 7 files changed, 814 insertions(+), 954 deletions(-)

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.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.tsx b/src/components/expenses/ExpenseEditor.tsx
index 9b68784e..3350e39e 100644
--- a/src/components/expenses/ExpenseEditor.tsx
+++ b/src/components/expenses/ExpenseEditor.tsx
@@ -1,18 +1,23 @@
 "use client";
-import { Field, FieldCount, FieldFooter, FieldLabel } from "@/components/ui/field";
+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 { 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 { useEffect, useId, useRef, useState, type FormEvent } from "react";
 import {
   ExpenseApiError,
   expenseCategories,
@@ -21,21 +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,
-} 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,
@@ -84,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>
   );
@@ -116,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,
@@ -124,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<{
@@ -138,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 }
       : {
@@ -160,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);
@@ -182,39 +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 nameId = useId();
   const amountId = useId();
+  const dayId = useId();
+  const placeId = useId();
+  const categoryId = useId();
   const memoId = 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 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,
   );
@@ -251,346 +300,353 @@ 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>
               : <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">
-          <Field>
-            <FieldLabel htmlFor={nameId}>제목 (선택)</FieldLabel>
-            <Input id={nameId} name="expense-title" aria-label="제목 (선택)" maxLength={100}
-              placeholder="제목 없음"
-              value={body.name ?? ""} onChange={(event) => change("name", event.target.value)} />
-          </Field>
-          {/* 통화 이름이 숨는 조건(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);
-              }}
-            />
-            <Field>
-              <FieldLabel htmlFor={amountId}>금액</FieldLabel>
-              <ExpenseAmountInput
-                id={amountId}
-                value={body.totalAmount}
-                fractionDigits={currency?.fractionDigits}
-                onChange={(value) => change("totalAmount", value)}
-                placeholder={amountPlaceholder(currency)}
-              />
-            </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>
-          )}
-          <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글자 + ▼ 폭으로 줄여 금액 칸을 넓힌다 */}
+              <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-[96px_minmax(0,1fr)] max-sm:grid-cols-[96px_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 ?? []}
-                disabled={pending}
-                onChange={(ids) => change("payerUserIds", ids)}
-              />
-              <ExpenseRolePicker
-                title="부담자"
-                members={context.members}
-                currentUserId={context.currentUserId}
-                selected={body.participantUserIds}
-                original={original?.participantUserIds ?? []}
-                disabled={pending}
-                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
-          )}
-          <Field>
-            <FieldLabel htmlFor={memoId}>메모 (선택)</FieldLabel>
-            <Textarea
-              id={memoId}
-              rows={3}
-              maxLength={1000}
-              value={body.memo ?? ""}
-              onChange={(e) => change("memo", e.target.value)}
-            />
-            <FieldFooter>
-              <FieldCount>{body.memo?.length ?? 0}/1000</FieldCount>
-            </FieldFooter>
-          </Field>
-        </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/ExpensePanel.tsx b/src/components/expenses/ExpensePanel.tsx
index 94c00d2f..eb978d67 100644
--- a/src/components/expenses/ExpensePanel.tsx
+++ b/src/components/expenses/ExpensePanel.tsx
@@ -509,7 +509,6 @@ 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
diff --git a/src/components/expenses/ExpenseScopePanel.tsx b/src/components/expenses/ExpenseScopePanel.tsx
index 88c7960f..f4b92c10 100644
--- a/src/components/expenses/ExpenseScopePanel.tsx
+++ b/src/components/expenses/ExpenseScopePanel.tsx
@@ -1,12 +1,31 @@
 "use client";
+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,7 +134,7 @@ 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 ? (
             <Spinner aria-label="비용 불러오는 중" className="flex w-full py-5" />
           ) : isError && !scoped.length ? (
@@ -161,7 +143,7 @@ export function ExpenseScopePanel({
               <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.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/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)
+  );
+}

From df7668be8462339b23d69dcf50bcfe9fb29b72f4 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:57:25 +0900
Subject: [PATCH 19/50] =?UTF-8?q?refactor(expenses):=20=EA=B0=80=EA=B3=84?=
 =?UTF-8?q?=EB=B6=80=20=ED=8C=A8=EB=84=90=20=EB=B2=84=ED=8A=BC=C2=B7?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=C2=B7=ED=83=AD=C2=B7=EC=98=88=EC=82=B0=20?=
 =?UTF-8?q?=EB=8C=80=ED=99=94=EC=83=81=EC=9E=90=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 가계부 버튼을 ui Button으로(expenseButtonClass 삭제), 비용 더보기 메뉴는 DropdownMenu
- 정산 범위·분석 기준 탭은 Tabs(Chip Outline). 일차 필터 알약은 그대로
- 예산 대화상자: Dialog + TanStack Form. 입력 오류는 칸 아래, 저장 실패는 칸 밖 문장(지금 구분 유지), 저장 중 progress·닫기 막기
- 조회 다시 시도 버튼은 테스트가 disabled를 확인해 loading 대신 지금처럼 문구 + disabled

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../expenses/ExpenseBudgetModal.tsx           | 334 ++++++++++--------
 .../expenses/ExpenseBudgetSummary.tsx         |   5 +-
 src/components/expenses/ExpenseItemMenu.tsx   |  89 ++---
 src/components/expenses/ExpensePanel.tsx      | 127 +++----
 src/components/expenses/ExpenseViews.tsx      |  69 ++--
 5 files changed, 281 insertions(+), 343 deletions(-)

diff --git a/src/components/expenses/ExpenseBudgetModal.tsx b/src/components/expenses/ExpenseBudgetModal.tsx
index de19e79f..f50fcdda 100644
--- a/src/components/expenses/ExpenseBudgetModal.tsx
+++ b/src/components/expenses/ExpenseBudgetModal.tsx
@@ -1,23 +1,32 @@
 "use client";
+import { useForm } from "@tanstack/react-form";
+import { useId, useRef, useState, type FormEvent } 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 { useCallback, useId, useRef, useState } from "react";
 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,
@@ -27,23 +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);
-  // 입력 검증 오류(field)는 칸의 Error 상태로, 저장 실패(save: 네트워크·충돌·서버 메시지)는 칸 밖 문장으로 그린다
-  const [error, setError] = useState<{ kind: "field" | "save"; message: string } | null>(null);
+  // 입력 검증 오류는 칸의 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 {
@@ -64,157 +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({
-        kind: "field",
-        message: "예산은 1~15자리 숫자로 입력해 주세요. 음수·소수점·공백은 사용할 수 없어요.",
-      });
-      return;
-    }
+  async function submit() {
     lock.current = true;
-    setPending(true);
-    setError(null);
     try {
-      await context.saveBudget({
-        budgetKrw: draft,
-        expectedVersion: version,
-      });
-      onClose();
-    } catch (e) {
-      setError({
-        kind: "save",
-        message: 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>
-        <Field>
-          <FieldLabel htmlFor={inputId}>
-            예산 (KRW)
-          </FieldLabel>
-          <ExpenseAmountInput
-            id={inputId}
-            type="text"
-            inputMode="numeric"
-            autoComplete="off"
-            value={draft}
-            disabled={busy}
-            aria-invalid={error?.kind === "field"}
-            aria-describedby={error ? errorId : undefined}
-            onChange={(value) => {
-              setDraft(value);
-              setError(null);
+      <DialogContent size="lg" 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>
+              );
             }}
-          />
-          {/* 두 오류는 함께 뜨지 않아 id 하나를 나눠 쓴다 */}
-          <FieldError id={errorId}>{error?.kind === "field" ? error.message : null}</FieldError>
-        </Field>
-        {error?.kind === "save" && (
-          <p
-            id={errorId}
-            role="alert"
-            className="text-body-s-regular mobile:text-body-xs-regular text-status-negative"
-          >
-            {error.message}
-          </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(null);
-                  }}
-                >
-                  최신 예산 확인 후 수정 계속
-                </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
-                  ? "최신 예산 조회에 실패했어요. 다시 조회한 뒤 확인해 주세요."
-                  : <Spinner aria-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/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/ExpensePanel.tsx b/src/components/expenses/ExpensePanel.tsx
index eb978d67..e3103c3f 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 { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
-import { cn } from "@/lib/utils";
 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 };
@@ -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로 보인다. loading은 aria-disabled라 ExpensePanel.test의 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 && (
@@ -509,17 +500,7 @@ 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")}
-          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 && (
             <Spinner aria-label="정산 불러오는 중" className="flex min-h-32 w-full" />
@@ -527,14 +508,14 @@ export function ExpensePanel() {
           {context.summary.isError && (
             <div className="space-y-3">
               <p role="alert">정산 조회에 실패했어요.</p>
-              <button
-                type="button"
-                className={expenseButtonClass}
+              <Button
+                variant="outline"
+                size="sm"
                 disabled={refreshing || context.busy}
                 onClick={() => void refresh()}
               >
-                {refreshing ? "조회 다시 시도 중" : "조회 다시 시도"}
-              </button>
+                {retryLabel}
+              </Button>
             </div>
           )}
           {context.summary.isSuccess &&
diff --git a/src/components/expenses/ExpenseViews.tsx b/src/components/expenses/ExpenseViews.tsx
index 40033b99..6f7ad929 100644
--- a/src/components/expenses/ExpenseViews.tsx
+++ b/src/components/expenses/ExpenseViews.tsx
@@ -1,7 +1,9 @@
 "use client";
 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";
 
@@ -29,8 +31,6 @@ import {
 } from "@/lib/expenses/expense-policy";
 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";
 // Group the integer string directly so large amounts and trailing decimals stay exact.
 import { formatExpenseAmount } from "@/lib/expenses/format-expense-amount";
 
@@ -178,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 && (
@@ -676,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>
@@ -792,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">
           분석할 비용이 없어요.

From b3a39200783544bb002fa95d0f13bbae04ed77ea Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:57:33 +0900
Subject: [PATCH 20/50] =?UTF-8?q?refactor(plan):=20PC=20=EC=9D=BC=EC=A0=95?=
 =?UTF-8?q?=20=EB=8C=80=ED=99=94=EC=83=81=EC=9E=90=C2=B7=EB=A9=94=EB=89=B4?=
 =?UTF-8?q?=EB=A5=BC=20ui=20=EB=B6=80=ED=92=88=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 시간 설정: Dialog + TanStack Form, 적용 중 progress·닫기 막기
- 메모 덮어쓰기 확인은 ConfirmDialog, 메모 인라인 취소·저장은 Button sm
- 일차 메뉴는 DropdownMenu(포털 클릭이 일차 섹션으로 올라가지 않게 감쌈)
- 북마크에서 추가: ResponsiveDialog(PC Dialog, 모바일 기기 시트)
- 쓰지 않게 된 timeSaveButtonCompact 토큰 삭제

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../itinerary/AddFromBookmarkModal.tsx        | 105 +++---
 .../_components/itinerary/PlanDaySection.tsx  | 130 +++----
 .../itinerary/PlanItemMemoForm.tsx            | 112 ++----
 .../itinerary/PlanItemTimeForm.tsx            | 324 +++++++++---------
 src/lib/layout-tokens.ts                      |   2 -
 5 files changed, 270 insertions(+), 403 deletions(-)

diff --git a/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx b/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
index ad1cadfa..15d4b71f 100644
--- a/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
+++ b/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
@@ -1,6 +1,15 @@
 "use client";
-import { useSheetDrag } from "@/components/mobile/useSheetDrag";
-import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
+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";
 
@@ -71,14 +80,6 @@ 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,
@@ -148,7 +149,6 @@ export function AddFromBookmarkModal({
     useCreateScheduleItem();
 
   const busy = isCreatingItem || addingGooglePlaceId != null;
-  const sheetDrag = useSheetDrag(onClose, busy);
 
   const handleAddPlace = useCallback(
     async (googlePlaceId: string) => {
@@ -224,50 +224,27 @@ 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"><Spinner aria-label="북마크 불러오는 중" /></div>
         ) : categoriesError ? (
@@ -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.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
index 1c885798..bd30fd91 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
@@ -1,24 +1,23 @@
 "use client";
 
+import { MenuDotHorizontalIcon, PlusIcon, TrashIcon } from "@/assets/icons";
 import { ExpenseIcon } from "@/components/icons/ExpenseIcon";
 import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Switch } from "@/components/ui/switch";
-import { useOnClickOutside } from "@/hooks/useOnClickOutside";
 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;
@@ -63,6 +62,10 @@ export type PlanDaySectionProps = {
   };
 };
 
+// 메뉴는 body로 포털되지만 React 이벤트는 트리를 따라 섹션(일차 간 드롭 핸들러)으로 올라간다.
+// 지금 메뉴처럼 트리거·항목의 클릭이 섹션으로 가지 않게 Root를 감싼 요소에서 끊는다(MIGRATION 7장)
+const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+
 export function PlanDaySection({
   title,
   subtitle,
@@ -149,8 +152,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
@@ -226,87 +227,52 @@ export function PlanDaySection({
             </span>
           </button>
           {showScheduleMenu ? (
-            <div ref={menuRef} className="relative shrink-0 self-center">
-              <button
-                type="button"
-                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",
-                  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"
+            <div
+              className="contents"
+              onClick={stopPropagation}
+              onMouseDown={stopPropagation}
+              onPointerDown={stopPropagation}
+              onTouchStart={stopPropagation}
+            >
+              {/* mutation·드래그 중(isScheduleMenuDisabled)에는 열려 있던 메뉴도 감춘다(지금 동작) */}
+              <DropdownMenu open={menuOpen && !isScheduleMenuDisabled} onOpenChange={setMenuOpen}>
+                <DropdownMenuTrigger
+                  aria-label="일차 메뉴"
+                  disabled={isScheduleMenuDisabled}
+                  className={cn(
+                    "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",
+                  )}
                 >
+                  <MenuDotHorizontalIcon size={20} />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
                   {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" />
+                    <DropdownMenuItem disabled={isAddExpenseDisabled} onClick={onRequestAddExpense}>
+                      <ExpenseIcon />
                       {title} 비용 추가
-                    </button>
+                    </DropdownMenuItem>
                   ) : 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 />
+                    <DropdownMenuItem onClick={onRequestInsertScheduleAfter}>
+                      <PlusIcon />
                       일차 추가
-                    </button>
+                    </DropdownMenuItem>
                   ) : null}
                   {onRequestDeleteSchedule ? (
-                    <button
-                      type="button"
-                      role="menuitem"
+                    <DropdownMenuItem
+                      variant="destructive"
                       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();
-                      }}
+                      onClick={onRequestDeleteSchedule}
                     >
-                      <Trash2 className="size-4 shrink-0" aria-hidden />
+                      <TrashIcon />
                       일차 삭제
-                    </button>
+                    </DropdownMenuItem>
                   ) : null}
-                </div>
-              ) : null}
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
           ) : null}
         </div>
diff --git a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
index 6341196f..b80310a2 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
@@ -5,6 +5,8 @@ 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";
@@ -36,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,
@@ -241,8 +176,9 @@ export function PlanItemMemoEditor({
             <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));
@@ -250,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.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.tsx
index 14e917b5..800b64db 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,152 @@ 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;
+
+  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();
+          }}
+          // 입력 칸에서 Enter는 바로 적용한다. 적용 버튼이 비활성(검증 실패)이어도 실패 안내 토스트를 띄우려고 암묵 제출 대신 직접 부른다
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && event.target instanceof HTMLInputElement) {
+              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={`${formId}-help${validation.valid ? "" : ` ${formId}-error`}`}
+                  />
+                </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 +220,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/lib/layout-tokens.ts b/src/lib/layout-tokens.ts
index 32113a22..0da4c792 100644
--- a/src/lib/layout-tokens.ts
+++ b/src/lib/layout-tokens.ts
@@ -81,8 +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",
 } as const;
 
 /** 플랜 구간(경로) 카드 가로 고정폭(px). 좌측 패널 max(s2) 기준 본문 영역 근사 */

From b85899e5ca259f7f33c901c652fef73c80a40173 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:57:46 +0900
Subject: [PATCH 21/50] =?UTF-8?q?refactor(plan):=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=EC=9D=BC=EC=A0=95=20=EC=8B=9C=ED=8A=B8=EB=A5=BC=20?=
 =?UTF-8?q?ui=20Drawer=EB=A1=9C=20=EC=98=AE=EA=B8=B0=EA=B3=A0=20MobileBott?=
 =?UTF-8?q?omSheet=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 일차 관리·장소 메뉴·메모·시간 시트를 Base UI Drawer로(끌어서 닫기·포커스·스크롤 잠금은 Base UI 기본)
- 메모 시트는 TanStack Form, 2000자 넘으면 칸 오류. 저장·삭제는 누른 버튼에만 progress
- 시간 시트 저장 버튼은 Button loading(폼은 버튼·휠 구성이라 그대로)
- 장소 메뉴 '일정 추가'로 검색 화면을 열 때는 시트의 포커스 복귀를 꺼 검색창 포커스·키보드를 지킨다
- 메뉴 행은 MobileSheetMenuItem으로 옮기고, 쓰는 곳이 없어진 MobileBottomSheet와 테스트 삭제
- drawer.tsx 주석의 '지금 시트'를 '옛 시트'로 정리

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../_components/mobile/MobileMemoSheet.tsx    | 183 +++++++++++------
 .../mobile/MobilePlanDaySection.tsx           |  89 +++++----
 .../mobile/MobilePlanPlaceSheets.tsx          | 118 ++++++-----
 .../mobile/MobileSheetMenuItem.tsx            |  47 +++++
 .../_components/mobile/MobileTimeSheet.tsx    | 185 +++++++++---------
 .../mobile/MobileBottomSheet.test.tsx         |  32 ---
 src/components/mobile/MobileBottomSheet.tsx   | 149 --------------
 src/components/ui/drawer.tsx                  |  18 +-
 8 files changed, 378 insertions(+), 443 deletions(-)
 create mode 100644 src/app/(main)/plan/_components/mobile/MobileSheetMenuItem.tsx
 delete mode 100644 src/components/mobile/MobileBottomSheet.test.tsx
 delete mode 100644 src/components/mobile/MobileBottomSheet.tsx

diff --git a/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx b/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
index cc17be6d..97fab0d7 100644
--- a/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
@@ -1,15 +1,30 @@
 "use client";
 
-import { useEffect, useId, 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 { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
+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;
@@ -29,25 +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 memoId = useId();
-  const descriptionId = useId();
-
-  // 시트가 열리면 바로 입력할 수 있게 포커스하고 커서를 기존 메모 끝에 둔다
-  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;
+  const formId = useId();
+  const memoId = `${formId}-memo`;
+  const descriptionId = `${formId}-memo-description`;
+  const errorId = `${formId}-memo-error`;
 
-  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 {
@@ -55,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}
-    >
-      <Field>
-        <FieldLabel htmlFor={memoId}>메모</FieldLabel>
-        <Textarea
-          id={memoId}
-          ref={textareaRef}
-          value={draft}
-          maxLength={MEMO_MAX_LENGTH}
-          onChange={(e) => setDraft(e.target.value)}
-          disabled={isPending}
-          rows={5}
-          placeholder="메모를 입력하세요"
-          aria-describedby={descriptionId}
-          className="h-36"
-        />
-        <FieldDescription id={descriptionId}>
-          예약 정보나 함께 기억할 내용을 남겨보세요.
-        </FieldDescription>
-      </Field>
-      <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/MobilePlanPlaceSheets.tsx b/src/app/(main)/plan/_components/mobile/MobilePlanPlaceSheets.tsx
index e118fa78..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";
 
 /** 장소 카드에서 여는 시트 — 일정 관리 메뉴와 그 안의 메모·시간·삭제, 북마크에서 추가 */
@@ -168,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.tsx b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
index 47f127a9..d9653e55 100644
--- a/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
@@ -3,8 +3,17 @@
 import { useState } from "react";
 import { toast } from "sonner";
 
-import { MobileBottomSheet } from "@/components/mobile/MobileBottomSheet";
-import { Spinner } from "@/components/ui/spinner";
+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,
@@ -105,99 +114,87 @@ export function MobileTimeSheet({
   ];
 
   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 (
-            <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",
-              )}
-            >
-              <span
-                className={cn(
-                  "w-full px-1 text-center text-label-xs-regular",
-                  active ? "text-primary-strong" : "text-text-subtle",
-                )}
+    <Drawer open onOpenChange={(open) => { if (!open) onClose(); }} closeDisabled={isPending}>
+      <DrawerContent closeLabel="방문 시간 닫기">
+        <DrawerHeader>
+          <DrawerTitle>{placeName}</DrawerTitle>
+          {subtitle ? <DrawerDescription>{subtitle}</DrawerDescription> : null}
+        </DrawerHeader>
+        <DrawerBody className="gap-4">
+          <div className="flex w-full items-end gap-2">
+            {fields.map(({ key, label, value }) => {
+              const active = activeField === key;
+              const display = formatHm12h(value);
+              return (
+                <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",
+                  )}
+                >
+                  <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>
+
+          {activeField ? (
+            // 휠은 세로로 끌어 고른다. 시트가 같이 끌려 닫히지 않게 Base UI 스와이프에서 뺀다(옛 시트도 제목 줄에서만 끌렸다)
+            <div data-base-ui-swipe-ignore="" 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"
               >
-                {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>
-
-      {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"
+                시간 지우기
+              </button>
+            </div>
+          ) : null}
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose render={<Button variant="weak" />}>취소</DrawerClose>
+          <Button
+            loading={isPending}
+            loadingLabel="저장 중"
+            disabled={!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 ? <Spinner aria-label="저장 중" variant="inverse" /> : "확인"}
-        </button>
-      </div>
-    </MobileBottomSheet>
+            확인
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
   );
 }
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/ui/drawer.tsx b/src/components/ui/drawer.tsx
index 154363cf..d530772c 100644
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -8,14 +8,14 @@ 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) 두 모양은
+// 손잡이만 옛 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 끌면 닫힘'은 없다.
+// 닫는 기준(높이 50% 또는 빠르게 튕김)·끌리는 곳·포커스·스크롤 잠금은 Base UI 기본이다. 옛 시트의 '80px 끌면 닫힘'은 없다.
 
 // 터치 스와이프는 버튼·입력 위에서도 시작한다(Base UI DrawerViewport가 터치에는 제외 목록을 쓰지 않는다: ignoreSelectorWhenTouch false).
-// 지금 시트(useSheetDrag)처럼 누르는 요소 위에서는 끌리지 않게, 터치가 닿은 요소에 Base UI 공식 제외 속성을 단다.
-// Popup의 캡처 단계라 Viewport의 터치 처리보다 먼저 실행된다. 목록은 지금 useSheetDrag의 제외 목록과 같다
+// 옛 시트(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']";
 
@@ -73,7 +73,7 @@ function DrawerClose({ disabled, ...props }: Readonly<DrawerPrimitive.Close.Prop
   return <DrawerPrimitive.Close data-slot="drawer-close" disabled={closeDisabled || disabled} {...props} />;
 }
 
-// 열기는 지금 시트처럼 아래에서 200ms(ease) 올라온다. 닫기는 Base UI 기본대로 내려가며 사라지고,
+// 열기는 옛 시트처럼 아래에서 200ms(ease) 올라온다. 닫기는 Base UI 기본대로 내려가며 사라지고,
 // 스와이프로 놓았을 때는 Base UI가 주는 세기(--drawer-swipe-strength 0.1~1)만큼 짧아진다(여기선 열기와 같은 200ms 기준).
 // 손으로 끄는 동안(data-swiping)은 손가락을 바로 따라가게 transition을 끈다.
 // 위로 끌면 Base UI가 조금 따라 올라가게(감쇠) 두므로, 시트 아래에 같은 색 띠(after)를 깔아 바닥과 틈이 보이지 않게 한다.
@@ -83,7 +83,7 @@ const drawerPopupVariants = cva(
   {
     variants: {
       size: {
-        // Figma Height=Min(5924:13962)·Half(5924:13989)는 내용 높이(Hug)다. 최대 90dvh는 지금 MobileBottomSheet 값
+        // 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)]",
@@ -134,7 +134,7 @@ function DrawerContent({
       <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이 막는다
+          // 저장 중에는 시트가 끌리지도 않게 한다(옛 시트와 같음). 닫기 자체는 Drawer의 cancel이 막는다
           data-base-ui-swipe-ignore={closeDisabled ? "" : undefined}
           onTouchStartCapture={(event) => {
             ignoreSwipeOnControl(event);
@@ -143,7 +143,7 @@ function DrawerContent({
           className={cn(drawerPopupVariants({ size }), className)}
           {...props}
         >
-          {/* 손잡이 36×4 border/subtle(지금 시트 값, DECISIONS). 위 12·아래 4는 Figma Header padding 위 12·행 간격 4(5924:13965). 장식이고 끄는 곳은 시트 전체다 */}
+          {/* 손잡이 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>
@@ -187,7 +187,7 @@ function DrawerHeader({ className, children, ...props }: Readonly<ComponentProps
   );
 }
 
-// Figma Title 5924:13969: title/lg text/default. h2. 한 줄로 줄인다(지금 시트와 같음)
+// Figma Title 5924:13969: title/lg text/default. h2. 한 줄로 줄인다(옛 시트와 같음)
 function DrawerTitle({ className, ...props }: Readonly<Omit<DrawerPrimitive.Title.Props, "className"> & { className?: string }>) {
   return (
     <DrawerPrimitive.Title

From d7e3adc7028403d654cd2246d7085add660ea58f Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:57:52 +0900
Subject: [PATCH 22/50] =?UTF-8?q?refactor(place):=20=EC=9E=A5=EC=86=8C?=
 =?UTF-8?q?=C2=B7=EB=B6=81=EB=A7=88=ED=81=AC=20=EB=8C=80=ED=99=94=EC=83=81?=
 =?UTF-8?q?=EC=9E=90=C2=B7=EB=A9=94=EB=89=B4=C2=B7=ED=83=AD=EC=9D=84=20ui?=
 =?UTF-8?q?=20=EB=B6=80=ED=92=88=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 북마크에 담기·일정에 추가: createPortal 오버레이 → Dialog, 처리 중 progress·닫기 막기. 일정 목록은 DialogBody로 포커스 윤곽이 잘리지 않게
- 북마크 생성·편집: Dialog + TanStack Form(제목 50자 검증·글자 수), 색 선택은 그대로
- 북마크 폴더·장소 메뉴는 DropdownMenu. 장소의 '카테고리 변경'은 하위 메뉴 대신 지금처럼 메뉴 안 단계 전환
- 장소 상세 홈·리뷰 탭은 ui Tabs(line)
- 쓰지 않게 된 DropdownMenuSub 파트와 place Tab 타입 삭제

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../bookmark/_components/AddBookmarkModal.tsx | 264 +++++++-------
 .../_components/BookmarkFoldersView.tsx       |  95 ++---
 .../bookmark/_components/BookmarkPlaceRow.tsx | 265 ++++----------
 src/components/place/AddToBookmarkModal.tsx   | 335 +++++++++---------
 src/components/place/AddToScheduleModal.tsx   | 214 ++++++-----
 src/components/place/PlaceDetailTabs.tsx      |  44 ++-
 src/components/place/types.ts                 |   1 -
 src/components/ui/dropdown-menu.tsx           |  52 ---
 8 files changed, 529 insertions(+), 741 deletions(-)

diff --git a/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx b/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx
index ea3dcec1..fbccb9bf 100644
--- a/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx
+++ b/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx
@@ -1,7 +1,18 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Field, FieldHeader, FieldLabel, FieldSuffix } from "@/components/ui/field";
+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";
@@ -28,158 +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">
-          <Field>
-            <FieldHeader>
-              <FieldLabel htmlFor="bookmark-title">제목</FieldLabel>
-              <FieldSuffix id="bookmark-title-counter" aria-live="polite">
-                {title.length}/{TITLE_MAX_LENGTH}
-              </FieldSuffix>
-            </FieldHeader>
-            <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"
-            />
-          </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={() => 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/BookmarkFoldersView.tsx b/src/app/(main)/bookmark/_components/BookmarkFoldersView.tsx
index 37915f05..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 {
@@ -63,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);
@@ -92,7 +82,6 @@ export function BookmarkFoldersView() {
   };
 
   const openEdit = (folder: BookmarkFolder) => {
-    closeMenu();
     setFolderFormError(null);
     setModalKey((k) => k + 1);
     setModalMode("edit");
@@ -160,7 +149,6 @@ export function BookmarkFoldersView() {
     const categoryId = Number.parseInt(folder.id, 10);
     if (!Number.isFinite(categoryId)) return;
 
-    closeMenu();
     setFolderToDelete({ categoryId, title: folder.title });
   };
 
@@ -284,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>
             ))}
@@ -358,6 +328,7 @@ export function BookmarkFoldersView() {
           }}
           onSave={handleSave}
           formError={folderFormError}
+          finalFocus={modalMode === "edit" ? menuTriggerRef : undefined}
         />
       )}
       {folderToDelete ? (
diff --git a/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx b/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx
index 35c1830f..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,108 +98,68 @@ 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
diff --git a/src/components/place/AddToBookmarkModal.tsx b/src/components/place/AddToBookmarkModal.tsx
index 967c184a..c1103518 100644
--- a/src/components/place/AddToBookmarkModal.tsx
+++ b/src/components/place/AddToBookmarkModal.tsx
@@ -1,12 +1,21 @@
 "use client";
 
-import { Spinner } from "@/components/ui/spinner";
-
 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,10 @@ import {
 import { cn } from "@/lib/utils";
 import { useSessionStore } from "@/stores/session-store";
 
+// 포털 안 클릭·터치가 React 트리를 따라 부모(지도 상세 패널·시트 드래그, 검색 결과 카드)로 올라가지 않게 Root 바깥에서 끊는다.
+// 딤은 표면 밖이라 표면 props로는 못 막는다. 감싼 요소는 display: contents라 배치에 상자를 더하지 않는다
+const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+
 type Props = {
   googlePlaceId: string;
   placeCategory?: string;
@@ -69,15 +82,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,181 +212,164 @@ export function AddToBookmarkModal({
     return null;
   }
 
-  /* 부모(지도 상세 패널·시트)의 transform 때문에 fixed가 패널 기준이 되지 않도록 body로 포털 */
-  return createPortal(
+  return (
     <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();
-      }}
-      onClick={(ev) => ev.stopPropagation()}
-      onPointerDown={(ev) => ev.stopPropagation()}
-      onTouchStart={(ev) => ev.stopPropagation()}
+      className="contents"
+      onClick={stopPropagation}
+      onMouseDown={stopPropagation}
+      onPointerDown={stopPropagation}
+      onTouchStart={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"
+      <Dialog
+        open
+        closeDisabled={isAddingBookmarks}
+        // 열린 채 마운트되므로 닫기 요청(open=false)만 온다. 추가 중에는 Esc·딤·닫기를 막는다.
+        // 새 북마크 대화상자가 위에 열려 있으면 Esc는 위 대화상자만 닫는다(Base UI 중첩)
+        onOpenChange={(open) => {
+          if (!open) onClose();
+        }}
       >
-        <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 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]">
-          <button
-            type="button"
-            disabled={isCreatingCategory || isAddingBookmarks}
-            onClick={openCreateFolderModal}
-            className={cn(
-              "flex w-full items-center gap-2.5 border-b border-gray-border px-5 py-3.5 text-left text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 transition-colors hover:bg-bubble-gray",
-              "disabled:opacity-55",
-            )}
-          >
-            <Plus className="size-4 shrink-0 stroke-[2.25]" aria-hidden />
-            <span className="break-keep">새 북마크 만들기</span>
-          </button>
+          {/* 제목 줄·버튼은 고정하고 목록만 스크롤한다. 행 구분선·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}
+              onClick={openCreateFolderModal}
+              className={cn(
+                "flex w-full items-center gap-2.5 border-b border-gray-border px-5 py-3.5 text-left text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 transition-colors hover:bg-bubble-gray",
+                "disabled:opacity-55",
+              )}
+            >
+              <Plus className="size-4 shrink-0 stroke-[2.25]" aria-hidden />
+              <span className="break-keep">새 북마크 만들기</span>
+            </button>
 
-          {categoriesLoading && (
-            <div className="flex justify-center py-6">
-              <Spinner aria-label="북마크 불러오는 중" />
-            </div>
-          )}
+            {categoriesLoading && (
+              <div className="flex justify-center py-6">
+                <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">
-                {categoriesErr instanceof Error
-                  ? categoriesErr.message
-                  : "카테고리를 불러오지 못했습니다."}
-              </p>
-              <button
-                type="button"
-                onClick={() => refetch()}
-                className="text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 underline"
-              >
-                다시 시도
-              </button>
-            </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">
+                  {categoriesErr instanceof Error
+                    ? categoriesErr.message
+                    : "카테고리를 불러오지 못했습니다."}
+                </p>
+                <button
+                  type="button"
+                  onClick={() => refetch()}
+                  className="text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 underline"
+                >
+                  다시 시도
+                </button>
+              </div>
+            )}
 
-          {categories && categories.length === 0 && !categoriesLoading && (
-            <div className="px-5 py-8 text-center">
-              <p className="text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-dark-gray break-keep text-pretty">
-                아직 북마크가 없어요.
-              </p>
-            </div>
-          )}
+            {categories && categories.length === 0 && !categoriesLoading && (
+              <div className="px-5 py-8 text-center">
+                <p className="text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-dark-gray break-keep text-pretty">
+                  아직 북마크가 없어요.
+                </p>
+              </div>
+            )}
 
-          {categories && categories.length > 0 && (
-            <div className="w-full bg-white">
-              <ul role="list" className="divide-y divide-gray-border">
-                {categories.map((c) => {
-                  const sel = selectedIds.has(c.categoryId);
-                  return (
-                    <li key={c.categoryId}>
-                      <button
-                        type="button"
-                        disabled={isAddingBookmarks}
-                        aria-pressed={sel}
-                        aria-label={`${c.name} 북마크에서 ${sel ? "선택 해제" : "선택"}`}
-                        onClick={() => toggleCategory(c.categoryId)}
-                        className={cn(
-                          "flex w-full items-center gap-3 px-4 py-4 text-left transition-colors hover:bg-bubble-gray/60",
-                          "disabled:opacity-60",
-                        )}
-                      >
-                        <FolderRibbonIcon color={c.colorCode} />
-                        <div className="min-w-0 flex-1">
-                          <p className="truncate text-body-l-emphasis mobile:text-body-m-emphasis font-medium text-neutral-900">
-                            {c.name}
-                          </p>
-                          <p className="mt-0.5 text-body-m-regular mobile:text-body-s-regular text-dark-gray">
-                            {c.placeCount ?? 0}개 장소
-                          </p>
-                        </div>
-                        <span
+            {categories && categories.length > 0 && (
+              <div className="w-full bg-white">
+                <ul role="list" className="divide-y divide-gray-border">
+                  {categories.map((c) => {
+                    const sel = selectedIds.has(c.categoryId);
+                    return (
+                      <li key={c.categoryId}>
+                        <button
+                          type="button"
+                          disabled={isAddingBookmarks}
+                          aria-pressed={sel}
+                          aria-label={`${c.name} 북마크에서 ${sel ? "선택 해제" : "선택"}`}
+                          onClick={() => toggleCategory(c.categoryId)}
                           className={cn(
-                            "flex size-9 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
-                            sel
-                              ? "border-primary bg-primary text-white shadow-sm"
-                              : "border-gray-300 bg-white text-transparent",
+                            "flex w-full items-center gap-3 px-4 py-4 text-left transition-colors hover:bg-bubble-gray/60",
+                            "disabled:opacity-60",
                           )}
                         >
-                          <Check className="size-[1.125rem]" strokeWidth={3} />
-                        </span>
-                      </button>
-                    </li>
-                  );
-                })}
-              </ul>
-            </div>
-          )}
+                          <FolderRibbonIcon color={c.colorCode} />
+                          <div className="min-w-0 flex-1">
+                            <p className="truncate text-body-l-emphasis mobile:text-body-m-emphasis font-medium text-neutral-900">
+                              {c.name}
+                            </p>
+                            <p className="mt-0.5 text-body-m-regular mobile:text-body-s-regular text-dark-gray">
+                              {c.placeCount ?? 0}개 장소
+                            </p>
+                          </div>
+                          <span
+                            className={cn(
+                              "flex size-9 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                              sel
+                                ? "border-primary bg-primary text-white shadow-sm"
+                                : "border-gray-300 bg-white text-transparent",
+                            )}
+                          >
+                            <Check className="size-[1.125rem]" strokeWidth={3} />
+                          </span>
+                        </button>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            )}
 
-          {submitFeedback && (
-            <p
-              className={cn(
-                "border-t border-gray-border px-5 py-3 text-center text-body-m-regular mobile:text-body-s-regular",
-                submitFeedback.variant === "error"
-                  ? "text-primary"
-                  : "text-dark-gray",
-              )}
-            >
-              {submitFeedback.message}
-            </p>
-          )}
-        </div>
+            {submitFeedback && (
+              <p
+                className={cn(
+                  "border-t border-gray-border px-5 py-3 text-center text-body-m-regular mobile:text-body-s-regular",
+                  submitFeedback.variant === "error"
+                    ? "text-primary"
+                    : "text-dark-gray",
+                )}
+              >
+                {submitFeedback.message}
+              </p>
+            )}
+          </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}
-            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"
-          >
-            {isAddingBookmarks ? "추가 중…" : "추가"}
-          </button>
-        </div>
-      </div>
+          <DialogFooter>
+            <DialogClose render={<Button variant="weak" />}>닫기</DialogClose>
+            <Button
+              loading={isAddingBookmarks}
+              loadingLabel="추가 중"
+              disabled={
+                selectedIds.size === 0 ||
+                (categories?.length === 0 && !categoriesLoading)
+              }
+              onClick={handleConfirmAdd}
+            >
+              추가
+            </Button>
+          </DialogFooter>
 
-      {createFolderModalOpen && (
-        <AddBookmarkModal
-          key={createFolderModalKey}
-          mode="create"
-          initialFolder={null}
-          overlayZClass="z-[65]"
-          busy={isCreatingCategory || isAddingBookmarks}
-          untitledNameHint={pickUniqueUntitledBookmarkCategoryName(
-            (categories ?? []).map((c) => c.name),
+          {createFolderModalOpen && (
+            <AddBookmarkModal
+              key={createFolderModalKey}
+              mode="create"
+              initialFolder={null}
+              busy={isCreatingCategory || isAddingBookmarks}
+              untitledNameHint={pickUniqueUntitledBookmarkCategoryName(
+                (categories ?? []).map((c) => c.name),
+              )}
+              onClose={() => setCreateFolderModalOpen(false)}
+              onSave={handleCreateFolderSave}
+            />
           )}
-          onClose={() => setCreateFolderModalOpen(false)}
-          onSave={handleCreateFolderSave}
-        />
-      )}
-    </div>,
-    document.body,
+        </DialogContent>
+      </Dialog>
+    </div>
   );
 }
diff --git a/src/components/place/AddToScheduleModal.tsx b/src/components/place/AddToScheduleModal.tsx
index f783e4c5..61900f46 100644
--- a/src/components/place/AddToScheduleModal.tsx
+++ b/src/components/place/AddToScheduleModal.tsx
@@ -1,12 +1,22 @@
 "use client";
 
-import { Spinner } from "@/components/ui/spinner";
-
 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,10 @@ import {
 } from "@/lib/plan/tripRange";
 import { useSessionStore } from "@/stores/session-store";
 
+// 포털 안 클릭·터치가 React 트리를 따라 부모(지도 상세 패널·시트 드래그, 검색 결과 카드)로 올라가지 않게 Root 바깥에서 끊는다.
+// 딤은 표면 밖이라 표면 props로는 못 막는다. 감싼 요소는 display: contents라 배치에 상자를 더하지 않는다
+const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+
 type Props = {
   googlePlaceId: string;
   placeCategory?: string;
@@ -55,14 +69,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,109 +97,93 @@ export function AddToScheduleModal({
     }
   }
 
-  /* 부모(지도 상세 패널·시트)의 transform 때문에 fixed가 패널 기준이 되지 않도록 body로 포털 */
-  return createPortal(
+  return (
     <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();
-      }}
-      onClick={(ev) => ev.stopPropagation()}
-      onPointerDown={(ev) => ev.stopPropagation()}
-      onTouchStart={(ev) => ev.stopPropagation()}
+      className="contents"
+      onClick={stopPropagation}
+      onMouseDown={stopPropagation}
+      onPointerDown={stopPropagation}
+      onTouchStart={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()}
+      <Dialog
+        open
+        closeDisabled={isAdding}
+        // 열린 채 마운트되므로 닫기 요청(open=false)만 온다. 추가 중에는 Esc·딤·닫기를 막는다
+        onOpenChange={(open) => {
+          if (!open) onClose();
+        }}
       >
-        <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">
-          {!rid ? (
-            <p className="text-center text-body-m-regular mobile:text-body-s-regular text-dark-gray">
-              참여 중인 방이 없어요. 방에 입장한 뒤 다시 시도해 주세요.
-            </p>
-          ) : null}
-
-          {rid && schedulesLoading ? (
-            <div className="flex justify-center py-6">
-              <Spinner aria-label="일정 불러오는 중" />
-            </div>
-          ) : null}
-
-          {rid && schedulesError ? (
-            <div className="space-y-2 text-center">
-              <p className="text-body-m-regular mobile:text-body-s-regular text-primary">
-                {schedulesErr instanceof Error
-                  ? schedulesErr.message
-                  : "일정을 불러오지 못했습니다."}
+        <DialogContent 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">
+                참여 중인 방이 없어요. 방에 입장한 뒤 다시 시도해 주세요.
+              </p>
+            ) : null}
+
+            {rid && schedulesLoading ? (
+              <div className="flex justify-center py-6">
+                <Spinner aria-label="일정 불러오는 중" />
+              </div>
+            ) : null}
+
+            {rid && schedulesError ? (
+              <div className="space-y-2 text-center">
+                <p className="text-body-m-regular mobile:text-body-s-regular text-primary">
+                  {schedulesErr instanceof Error
+                    ? schedulesErr.message
+                    : "일정을 불러오지 못했습니다."}
+                </p>
+                <button
+                  type="button"
+                  onClick={() => refetch()}
+                  className="text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 underline"
+                >
+                  다시 시도
+                </button>
+              </div>
+            ) : null}
+
+            {rid && !schedulesLoading && !schedulesError && sorted.length === 0 ? (
+              <p className="text-center text-body-m-regular mobile:text-body-s-regular text-dark-gray">
+                아직 생성된 일정이 없어요. 계획 탭에서 여행 기간을 적용한 뒤
+                다시 시도해 주세요.
               </p>
-              <button
-                type="button"
-                onClick={() => refetch()}
-                className="text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 underline"
-              >
-                다시 시도
-              </button>
-            </div>
-          ) : null}
-
-          {rid && !schedulesLoading && !schedulesError && sorted.length === 0 ? (
-            <p className="text-center text-body-m-regular mobile:text-body-s-regular text-dark-gray">
-              아직 생성된 일정이 없어요. 계획 탭에서 여행 기간을 적용한 뒤
-              다시 시도해 주세요.
-            </p>
-          ) : null}
-
-          {rid && sorted.length > 0 ? (
-            <ul className="space-y-2">
-              {sorted.map((s, i) => (
-                <li key={s.scheduleId}>
-                  <button
-                    type="button"
-                    disabled={isAdding}
-                    onClick={() => void pickDay(s.scheduleId)}
-                    className="flex w-full flex-col gap-0.5 rounded-xl border border-gray-border px-3 py-3 text-left transition-colors hover:bg-bubble-gray disabled:opacity-60"
-                  >
-                    <span className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-neutral-900">
-                      {`${i + 1}일차`}
-                    </span>
-                    <span className="text-body-s-regular mobile:text-body-xs-regular text-dark-gray">
-                      {formatKoreanDateLabel(parseLocalYmd(s.date))}
-                    </span>
-                  </button>
-                </li>
-              ))}
-            </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,
+            ) : null}
+
+            {rid && sorted.length > 0 ? (
+              <ul className="space-y-2">
+                {sorted.map((s, i) => (
+                  <li key={s.scheduleId}>
+                    <button
+                      type="button"
+                      disabled={isAdding}
+                      onClick={() => void pickDay(s.scheduleId)}
+                      className="flex w-full flex-col gap-0.5 rounded-xl border border-gray-border px-3 py-3 text-left transition-colors hover:bg-bubble-gray disabled:opacity-60"
+                    >
+                      <span className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-neutral-900">
+                        {`${i + 1}일차`}
+                      </span>
+                      <span className="text-body-s-regular mobile:text-body-xs-regular text-dark-gray">
+                        {formatKoreanDateLabel(parseLocalYmd(s.date))}
+                      </span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </DialogBody>
+
+          <DialogFooter>
+            <DialogClose render={<Button variant="weak" />}>닫기</DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </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/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/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 793deaf2..39f4c967 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -2,7 +2,6 @@ import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { cva, type VariantProps } from "class-variance-authority";
 import type { ComponentProps } from "react";
 
-import { ChevronRightIcon } from "@/assets/icons";
 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)
@@ -180,54 +179,6 @@ function DropdownMenuHeaderDescription({ className, ...props }: Readonly<Compone
   );
 }
 
-/**
- * 2단 메뉴(BookmarkPlaceRow '카테고리 변경 → 폴더 목록'용). Figma에 하위 메뉴가 없어 항목·표면은 위 Item·Content를 그대로 쓴다.
- * 포인터는 hover, 터치는 누르면 열리고 ← · Esc는 하위 메뉴만 닫는다.
- * 하위 메뉴와 메뉴 안 단계 전환(지금 BookmarkPlaceRow 방식) 중 무엇을 쓸지는 디자이너 질문으로 남아 있다.
- * 화면 교체 단계에서 BookmarkPlaceRow가 이 파트를 쓰지 않게 되면 Sub·SubTrigger·SubContent와 ChevronRightIcon import를 지운다
- */
-function DropdownMenuSub(props: Readonly<MenuPrimitive.SubmenuRoot.Props>) {
-  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
-}
-
-type DropdownMenuSubTriggerProps = Omit<MenuPrimitive.SubmenuTrigger.Props, "className"> & {
-  className?: string;
-};
-
-// 하위 메뉴가 열려 있는 동안에도 강조 배경을 유지한다. 오른쪽 chevron 20px
-function DropdownMenuSubTrigger({ className, children, ...props }: Readonly<DropdownMenuSubTriggerProps>) {
-  return (
-    <MenuPrimitive.SubmenuTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      className={cn(dropdownMenuItemVariants(), "data-popup-open:bg-fill", className)}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon size={20} className="ms-auto" />
-    </MenuPrimitive.SubmenuTrigger>
-  );
-}
-
-/** 상위 메뉴 옆(inline-end)에 첫 행 높이를 맞춰 붙인다. 화면 끝에 닿으면 Base UI가 반대쪽으로 뒤집는다 */
-function DropdownMenuSubContent({
-  align = "start",
-  alignOffset = 0,
-  side = "inline-end",
-  sideOffset = 0,
-  ...props
-}: Readonly<DropdownMenuContentProps>) {
-  return (
-    <DropdownMenuContent
-      data-slot="dropdown-menu-sub-content"
-      align={align}
-      alignOffset={alignOffset}
-      side={side}
-      sideOffset={sideOffset}
-      {...props}
-    />
-  );
-}
-
 export {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -237,7 +188,4 @@ export {
   DropdownMenuHeader,
   DropdownMenuHeaderTitle,
   DropdownMenuHeaderDescription,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
 };

From 68333a0bf2f02769daccd0176767a4bd66f78c0e Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:57:58 +0900
Subject: [PATCH 23/50] =?UTF-8?q?refactor(map):=20=ED=8F=89=EC=A0=90=20?=
 =?UTF-8?q?=ED=95=84=ED=84=B0=C2=B7=EB=82=A0=EC=A7=9C=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=EC=9D=84=20ui=20Select=C2=B7Popover=C2=B7Dialog=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 지도 평점 필터: FilterDropdown → ui Select(트리거는 칩 모양, 고르면 선택 칩). 스크롤·창 크기 변경 때 닫힘은 유지
- 날짜 선택: 칸 아래 달력은 Popover, 가운데 팝업은 Base UI Dialog(대화상자 위에서 열면 Esc는 달력만 닫는다)
- 쓰지 않게 된 filter-dropdown·map-chip-button과 드롭다운 z 상수 삭제
- 다음 커밋(여행 정보 수정 대화상자 교체)과 함께 대화상자 안 날짜 팝업이 위에 뜬다

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../travel-time/travelSegmentRailLayout.ts    |   2 +-
 .../date-picker/DatePickerLayer.tsx           | 154 +++++++++---------
 src/components/date-picker/DateRangeField.tsx |   7 +-
 src/components/filter-dropdown.tsx            | 127 ---------------
 src/components/map/MapFilter.tsx              |  91 +++++++++--
 src/components/map/map-chip-button.ts         |  10 --
 src/components/map/map-filters.ts             |   4 +-
 src/lib/layout/mapDetailPanelLayout.ts        |   3 -
 8 files changed, 167 insertions(+), 231 deletions(-)
 delete mode 100644 src/components/filter-dropdown.tsx
 delete mode 100644 src/components/map/map-chip-button.ts

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/components/date-picker/DatePickerLayer.tsx b/src/components/date-picker/DatePickerLayer.tsx
index a90889b3..d37a795d 100644
--- a/src/components/date-picker/DatePickerLayer.tsx
+++ b/src/components/date-picker/DatePickerLayer.tsx
@@ -1,19 +1,27 @@
 "use client";
 
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 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 +29,9 @@ export function DatePickerLayer({
   children,
 }: Readonly<{
   presentation: DatePickerPresentation;
-  /** `anchored`에서 바깥 클릭 판정 범위 — 입력 칸과 레이어를 함께 감싼 요소 */
+  /** `anchored`에서 달력을 붙일 입력 칸 — 달력 폭·비율의 기준 */
+  anchorRef?: RefObject<HTMLElement | null>;
+  /** `anchored`에서 바깥 클릭·포커스 이탈 판정 범위 — 입력 칸 두 개를 함께 감싼 요소 */
   boundaryRef?: RefObject<HTMLElement | null>;
   label: string;
   /** 바깥 클릭·키보드로 레이어를 벗어날 때 */
@@ -30,10 +40,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 +55,82 @@ 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 (
+      <Popover
+        open
+        onOpenChange={(open, details) => {
+          if (open) return;
+          if (details.reason === "escape-key") {
+            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>
+        </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/filter-dropdown.tsx b/src/components/filter-dropdown.tsx
deleted file mode 100644
index d36a4b0d..00000000
--- a/src/components/filter-dropdown.tsx
+++ /dev/null
@@ -1,127 +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 { mapChipButtonClassName } 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",
-          mapChipButtonClassName(isActive),
-        )}
-      >
-        <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/map/MapFilter.tsx b/src/components/map/MapFilter.tsx
index ebef2d76..046419a8 100644
--- a/src/components/map/MapFilter.tsx
+++ b/src/components/map/MapFilter.tsx
@@ -1,13 +1,17 @@
-import { FilterDropdown } from "@/components/filter-dropdown";
-import { MAP_FILTER_DROPDOWN_MENU_Z_CLASS } from "@/lib/layout/mapDetailPanelLayout";
+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;
@@ -30,14 +34,7 @@ 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}
-      />
+      <RatingSelect value={rating} onChange={setRating} onOpenChange={onRatingDropdownOpenChange} />
       <MapChipToggle
         pressed={isOpenOnly}
         onPressedChange={(pressed) => setOpenNow(pressed ? "open" : "all")}
@@ -47,3 +44,75 @@ export default function MapFilter({
     </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/map-chip-button.ts b/src/components/map/map-chip-button.ts
deleted file mode 100644
index f5e6b23b..00000000
--- a/src/components/map/map-chip-button.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { cn } from "@/lib/utils";
-
-// FilterDropdown 트리거 전용이다. Dropdown 단계에서 ui 부품으로 옮기기 전까지 같은 줄의 Chip(outline md)과 같은 값으로 둔다.
-// 값을 고른 모양은 트리거에 aria-pressed가 없어 Chip이 그리지 못하므로 active로 테두리·글자 색을 준다.
-const mapChipButtonBaseClass =
-  "inline-flex min-h-9 shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-full border bg-fill-subtle px-4 text-label-m-emphasis transition-colors duration-120 ease-out active:bg-fill-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none";
-
-export function mapChipButtonClassName(active: boolean) {
-  return cn(mapChipButtonBaseClass, active ? "border-primary-strong text-primary-strong" : "border-border text-text");
-}
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/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;

From 2a7971b51c932fb5fdc80daba1b9a8dfc6cd93ed Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:58:06 +0900
Subject: [PATCH 24/50] =?UTF-8?q?refactor(rooms):=20=EC=97=AC=ED=96=89?=
 =?UTF-8?q?=EB=B0=A9=C2=B7=ED=99=88=20=EB=8C=80=ED=99=94=EC=83=81=EC=9E=90?=
 =?UTF-8?q?=C2=B7=EB=A9=94=EB=89=B4=EB=A5=BC=20ui=20=EB=B6=80=ED=92=88?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 초대하기·여행 정보 수정: SettingsDialog → Dialog. 적용하기는 Button(대화상자 규칙 Neutral Solid)
- 여행 정보 수정 폼 값은 TanStack Form으로 관리(칸 표시 props·저장 호출은 테스트가 확인해 유지)
- 기간 축소 확인은 폼의 자식 AlertDialog로 대화상자 위에 뜬다
- 목적지 입력의 Esc는 추천 목록이 열려 있을 때만 목록을 닫고, 닫혀 있으면 대화상자가 닫힌다
- 홈 프로필·방 카드 메뉴는 DropdownMenu(아이콘은 디자인 시스템 아이콘), 쓰지 않게 된 Figma svg 4개 삭제

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/rooms/figma/README.md                  |   5 +-
 public/rooms/figma/logout.svg                 |   7 -
 public/rooms/figma/menu.svg                   |   7 -
 public/rooms/figma/trash.svg                  |   9 --
 public/rooms/figma/user.svg                   |   6 -
 src/app/home/_components/HomeHeader.tsx       |  93 ++++-------
 src/app/home/_components/InviteRoomModal.tsx  |   7 +-
 src/app/home/_components/RoomCardMenu.tsx     | 115 +++++---------
 src/components/rooms/InviteRoomDialog.tsx     |  74 +++++----
 src/components/rooms/RoomTripEditDialog.tsx   |  35 +++--
 src/components/rooms/RoomTripEditForm.tsx     | 145 +++++++++---------
 .../rooms/TripDateShrinkConfirmModal.tsx      | 114 +++++---------
 .../search/DestinationSearchInput.tsx         |   4 +-
 13 files changed, 266 insertions(+), 355 deletions(-)
 delete mode 100644 public/rooms/figma/logout.svg
 delete mode 100644 public/rooms/figma/menu.svg
 delete mode 100644 public/rooms/figma/trash.svg
 delete mode 100644 public/rooms/figma/user.svg

diff --git a/public/rooms/figma/README.md b/public/rooms/figma/README.md
index 0973baab..a21969e2 100644
--- a/public/rooms/figma/README.md
+++ b/public/rooms/figma/README.md
@@ -4,10 +4,9 @@
 - 모바일: 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 대신 로컬 파일을 참조한다.
 
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/home/_components/HomeHeader.tsx b/src/app/home/_components/HomeHeader.tsx
index 72804dfb..2e58360c 100644
--- a/src/app/home/_components/HomeHeader.tsx
+++ b/src/app/home/_components/HomeHeader.tsx
@@ -2,17 +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";
@@ -20,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) {
@@ -57,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} />
             ) : (
               <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..f4058a29 100644
--- a/src/app/home/_components/InviteRoomModal.tsx
+++ b/src/app/home/_components/InviteRoomModal.tsx
@@ -1,12 +1,16 @@
 "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 }: {
   room: RoomListItem;
+  /** 닫은 뒤 포커스를 돌릴 곳(방 카드 더보기 버튼) */
+  finalFocus: ComponentProps<typeof InviteRoomDialog>["finalFocus"];
   onClose: () => void;
 }) {
   const { data, isLoading, isError, refetch } = useRoomDetail(room.id);
@@ -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/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/components/rooms/InviteRoomDialog.tsx b/src/components/rooms/InviteRoomDialog.tsx
index 3c91d4ec..3949d738 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,46 @@ 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();
+      }}
+    >
+      {/* 지금 폭 400(SettingsDialog alert)에 가장 가까운 sm(384) */}
+      <DialogContent size="sm" 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.tsx b/src/components/rooms/RoomTripEditDialog.tsx
index 59025560..118bbd70 100644
--- a/src/components/rooms/RoomTripEditDialog.tsx
+++ b/src/components/rooms/RoomTripEditDialog.tsx
@@ -4,18 +4,33 @@ import {
   RoomTripDeleteButton,
   RoomTripSettingsSection,
 } from "@/components/rooms/RoomTripSettingsSection";
-import { SettingsDialog } from "@/components/settings/SettingsDialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 
+/**
+ * 여행 정보 수정 대화상자. 마운트되면 열린 상태라 HeaderBar가 조건부로 그린다.
+ * 기간 축소 확인(RoomTripEditForm)·여행 삭제 확인(RoomTripDeleteButton)은 이 대화상자의 React 자식이라 위 레이어만 Esc·포커스를 받는다
+ */
 export function RoomTripEditDialog({ onClose }: { onClose: () => void }) {
   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
+      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 onSaved={onClose} />
+          {/* 여행 삭제는 적용하기 아래 오른쪽 끝 — 방장이 아니면 버튼이 없어 줄째 숨긴다 */}
+          <div className="flex justify-end empty:hidden">
+            <RoomTripDeleteButton />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/components/rooms/RoomTripEditForm.tsx b/src/components/rooms/RoomTripEditForm.tsx
index 764004de..953948b9 100644
--- a/src/components/rooms/RoomTripEditForm.tsx
+++ b/src/components/rooms/RoomTripEditForm.tsx
@@ -1,14 +1,12 @@
 "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 { TripDateShrinkConfirmModal } from "@/components/rooms/TripDateShrinkConfirmModal";
 import { RoomTripEditFields } from "@/components/rooms/RoomTripEditFields";
+import { Button } from "@/components/ui/button";
 import { useRoomSchedules, useUpdateRoom } from "@/hooks/useRooms";
 import {
   countSchedulesTrimmedByDateChange,
@@ -22,6 +20,7 @@ import {
   ROOM_TRIP_TITLE_MAX_LENGTH,
   toTripFormValues,
   type RoomTripFormSource,
+  type TripFormValues,
 } from "@/lib/rooms/trip-form";
 
 type Props = {
@@ -39,15 +38,10 @@ function RoomTripEditSession({ room, readOnly = false, onSaved }: 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);
 
   // Keep the original date floor throughout this room's edit session.
@@ -55,44 +49,20 @@ function RoomTripEditSession({ room, readOnly = false, onSaved }: Props) {
 
   const { data: schedules } = useRoomSchedules(room.id);
   const { mutate: updateRoom, isPending, error } = useUpdateRoom();
-
-  const dateRangeInvalid = isTripDateRangeInvalid(startDate, endDate);
-  const scheduleDayLimitExceeded = isTripScheduleDayLimitExceeded(
-    startDate,
-    endDate,
-  );
   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 &&
-    !isTripStartBeforeMin(startDate, baselineStartYmd) &&
-    !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,
@@ -102,7 +72,8 @@ function RoomTripEditSession({ room, readOnly = false, onSaved }: Props) {
         onSuccess: () => {
           setShrinkConfirmOpen(false);
           // 저장한 값이 새 기준 — 모달이 남아 있어도 다시 바꾼 게 없으면 적용하기가 꺼진다
-          setOpened({ title, destinations, startDate, endDate });
+          setOpened(value);
+          form.reset(value);
           toast.success("여행 정보가 수정되었어요");
           onSaved?.();
         },
@@ -110,37 +81,61 @@ 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();
-  }
+  // 칸 오류 문장은 RoomTripEditFields가 입력 중에 바로 보여 주고, 여기서는 적용하기만 잠근다(지금 화면 동작).
+  // 잠긴 버튼은 제출되지 않아 칸별 onSubmit 검증을 따로 두지 않는다
+  const canApply =
+    title.trim() &&
+    isTripDestinationsValid(destinations) &&
+    startDate &&
+    endDate &&
+    !isTripDateRangeInvalid(startDate, endDate) &&
+    !isTripStartBeforeMin(startDate, baselineStartYmd) &&
+    !isTripScheduleDayLimitExceeded(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 }}
+        values={readOnly ? latest : values}
         readOnly={readOnly}
         startDateMin={baselineStartYmd || undefined}
-        onTitleChange={setTitle}
-        onDestinationsChange={setDestinations}
-        onStartDateChange={setStartDate}
-        onEndDateChange={setEndDate}
+        onTitleChange={(next) => form.setFieldValue("title", next)}
+        onDestinationsChange={(next) => form.setFieldValue("destinations", next)}
+        onStartDateChange={(next) => form.setFieldValue("startDate", next)}
+        onEndDateChange={(next) => form.setFieldValue("endDate", next)}
       />
 
       {error && !readOnly && (
@@ -151,24 +146,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/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/search/DestinationSearchInput.tsx b/src/components/search/DestinationSearchInput.tsx
index b07ba7f7..9ed33577 100644
--- a/src/components/search/DestinationSearchInput.tsx
+++ b/src/components/search/DestinationSearchInput.tsx
@@ -164,7 +164,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;
     }

From 79dfff386437ef7ca8490025b0350ea3ca095666 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:58:15 +0900
Subject: [PATCH 25/50] =?UTF-8?q?refactor(layout):=20=ED=97=A4=EB=8D=94?=
 =?UTF-8?q?=C2=B7=EA=B5=AC=EC=84=B1=EC=9B=90=C2=B7=EC=84=A4=EC=A0=95?=
 =?UTF-8?q?=EC=9D=98=20=EB=A9=94=EB=89=B4=C2=B7=EB=8C=80=ED=99=94=EC=83=81?=
 =?UTF-8?q?=EC=9E=90=EB=A5=BC=20ui=20=EB=B6=80=ED=92=88=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모바일 헤더 메뉴·구성원 옵션 메뉴는 DropdownMenu, 헤더 구성원 미리보기는 Popover(안의 구성원 메뉴를 눌러도 닫히지 않음)
- 구성원 안내·회원 탈퇴 2종은 AlertDialog(탈퇴는 Critical), 쿠키 설정은 Dialog(포커스 복귀 순서는 지금과 같음)
- 쿠키 저장·동의 배너·내 정보 버튼을 SettingsActionButton → ui Button
- 쿠키 동의 배너를 z-40으로 낮춰 Base UI 대화상자(z-50)가 배너를 덮게 한다

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../_components/MemberCard.tsx                | 100 +++-------------
 .../_components/useMemberActions.tsx          |  36 ++++--
 src/app/home/(with-header)/my-info/page.tsx   |  28 ++---
 .../analytics/AnalyticsConsentSettings.tsx    |  12 +-
 .../analytics/CookieConsentBanner.tsx         |  20 ++--
 .../analytics/CookieSettingsProvider.tsx      |  51 ++++++++-
 src/components/layout/HeaderBar.tsx           |  68 ++++-------
 src/components/layout/HeaderMemberPreview.tsx | 107 +++++++-----------
 .../settings/WithdrawAccountConfirmModal.tsx  | 100 +++++++---------
 .../WithdrawalDelegationRequiredModal.tsx     | 107 +++++++-----------
 10 files changed, 266 insertions(+), 363 deletions(-)

diff --git a/src/app/(main)/member-settings/_components/MemberCard.tsx b/src/app/(main)/member-settings/_components/MemberCard.tsx
index 2b58733e..eb2cff13 100644
--- a/src/app/(main)/member-settings/_components/MemberCard.tsx
+++ b/src/app/(main)/member-settings/_components/MemberCard.tsx
@@ -1,10 +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";
@@ -52,39 +50,6 @@ 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
@@ -108,55 +73,26 @@ export function MemberCard({ member, isViewerHost, onKick, onTransfer }: Readonl
       </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/useMemberActions.tsx b/src/app/(main)/member-settings/_components/useMemberActions.tsx
index 42ef5a32..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>
   );
 }
 
diff --git a/src/app/home/(with-header)/my-info/page.tsx b/src/app/home/(with-header)/my-info/page.tsx
index efab83c5..e997b9da 100644
--- a/src/app/home/(with-header)/my-info/page.tsx
+++ b/src/app/home/(with-header)/my-info/page.tsx
@@ -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";
 
@@ -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,15 +169,15 @@ 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"
diff --git a/src/components/analytics/AnalyticsConsentSettings.tsx b/src/components/analytics/AnalyticsConsentSettings.tsx
index 71c43a2e..3d6bb0fe 100644
--- a/src/components/analytics/AnalyticsConsentSettings.tsx
+++ b/src/components/analytics/AnalyticsConsentSettings.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useId, useState, useSyncExternalStore } from "react";
 
-import { SettingsActionButton } from "@/components/settings/SettingsActionButton";
+import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import {
   denyAnalyticsConsent,
@@ -98,14 +98,10 @@ export function AnalyticsConsentSettingsView({
         >
           개인정보 처리방침
         </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}
-        >
+        {/* 대화상자 확인 버튼(Neutral Solid md). 폭은 지금 최소 폭을 유지한다 */}
+        <Button className="min-w-24" onClick={onSave}>
           저장
-        </SettingsActionButton>
+        </Button>
       </div>
       <p
         aria-live="polite"
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/CookieSettingsProvider.tsx b/src/components/analytics/CookieSettingsProvider.tsx
index b7967a56..c6a1fbf8 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="lg"
+            closeLabel="쿠키 설정 닫기"
+            finalFocus={() => getCookieSettingsReturnFocus(openerRef.current)}
+          >
+            <DialogHeader>
+              <DialogTitle>쿠키 설정</DialogTitle>
+            </DialogHeader>
+            <AnalyticsConsentSettings />
+          </DialogContent>
+        </Dialog>
       )}
     </OpenCookieSettingsContext>
   );
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 5506963a..93c36e92 100644
--- a/src/components/layout/HeaderMemberPreview.tsx
+++ b/src/components/layout/HeaderMemberPreview.tsx
@@ -1,6 +1,6 @@
 "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";
@@ -8,6 +8,8 @@ import { useMemberActions } from "@/app/(main)/member-settings/_components/useMe
 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";
@@ -45,38 +47,16 @@ 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"
           >
             <AvatarGroup>
@@ -102,46 +82,43 @@ export function HeaderMemberPreview() {
                 {pendingJoinRequestsCount > 0 ? <SidebarPingBadge className="-right-1 -top-1" /> : null}
               </span>
             </AvatarGroup>
-          </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={() => {
+          </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/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>
   );
 }

From 15bf999c1d501ee469003f1a84b0fbd7a43e9fae Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:58:15 +0900
Subject: [PATCH 26/50] =?UTF-8?q?refactor(packing):=20=EC=A4=80=EB=B9=84?=
 =?UTF-8?q?=EB=AC=BC=20=EB=8C=80=ED=99=94=EC=83=81=EC=9E=90=C2=B7=EB=A9=94?=
 =?UTF-8?q?=EB=89=B4=C2=B7=EC=8B=9C=ED=8A=B8=EB=A5=BC=20ui=20=EB=B6=80?=
 =?UTF-8?q?=ED=92=88=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 카테고리·준비물 이름 대화상자: Dialog + TanStack Form(이름 검증은 칸 오류), 메모도 TanStack Form
- 카테고리 메뉴는 DropdownMenu, 삭제 확인은 ConfirmDialog, 버튼은 ui Button
- 상세는 PC 오른쪽 패널 그대로, 모바일 기기는 Drawer. 시트 이름은 준비물 이름
- 동기화 오류처럼 저장할 수 없는 상태면 저장·추가 버튼을 비활성으로 보인다(다른 항목 저장 중에는 제출만 막음)
- 쓰지 않게 된 CSS 규칙과 테스트의 SettingsDialog mock 삭제

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/packing/PackingPage.module.css |  68 +---
 src/components/packing/PackingPage.test.tsx   |   2 -
 src/components/packing/PackingPage.tsx        | 370 ++++++++++++------
 3 files changed, 259 insertions(+), 181 deletions(-)

diff --git a/src/components/packing/PackingPage.module.css b/src/components/packing/PackingPage.module.css
index 07582a80..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,.dialog button: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,11 +31,8 @@
 .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)}
@@ -53,38 +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}
-.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}
-.deleteCopy {margin:0;color:var(--color-text-subtle);font-size:16px;line-height:24px;overflow-wrap:anywhere}
-.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}
@@ -95,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}
@@ -118,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)}
@@ -154,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 0be9cc6d..271d29a4 100644
--- a/src/components/packing/PackingPage.test.tsx
+++ b/src/components/packing/PackingPage.test.tsx
@@ -1,13 +1,11 @@
 // @vitest-environment jsdom
 import { act, create, type ReactTestRenderer } from 'react-test-renderer';
 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}));
 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>}));
 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:[]}]};
diff --git a/src/components/packing/PackingPage.tsx b/src/components/packing/PackingPage.tsx
index 2859d3d9..7719d258 100644
--- a/src/components/packing/PackingPage.tsx
+++ b/src/components/packing/PackingPage.tsx
@@ -1,16 +1,20 @@
 "use client";
 
-import { useCallback, useEffect, useId, 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";
@@ -21,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">
@@ -40,140 +64,255 @@ function PackingCheckbox({item,context,detail = false}: {item:PackingItem;contex
   </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}: {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 inputId=useId();
-  const errorId=useId();
   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}>
-    <Field><FieldLabel htmlFor={inputId}>{noun} 이름</FieldLabel><Input id={inputId} aria-label={`${noun} 이름`} aria-invalid={Boolean(error)} aria-describedby={error ? errorId : undefined} 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();}}/>
-    <FieldError id={errorId}>{error}</FieldError></Field>
-    <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=editor.kind==="createPart" ? {type:"createPart" as const,name:value.name} : editor.kind==="renamePart" ? {type:"renamePart" as const,id:editor.id,name:value.name} : editor.kind==="createItem" ? {type:"createItem" as const,partId:editor.id,name:value.name} : {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>;
+  return <ConfirmDialog destructive title={part ? "카테고리를 삭제할까요?" : "준비물을 삭제할까요?"}
+    description={`‘${confirmation.name}’${part ? `의 준비물 ${count}개와` : " 준비물과"}\n작성한 메모가 함께 삭제됩니다.`}
+    confirmLabel="삭제" isPending={deleting} 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 errorId=useId();
-  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}: {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>
-    <Field><Textarea id={`packing-memo-${item.id}`} aria-label="준비물 메모" aria-invalid={Boolean(error)} aria-describedby={error ? errorId : undefined} value={value}
-      onChange={event=>{latestValue.current=event.target.value;setValue(event.target.value);setError("");}}
-      placeholder="준비물에 대한 메모를 남겨 주세요." maxLength={2000} rows={3}/>
-    <FieldFooter><FieldError id={errorId}>{error}</FieldError><FieldCount>({value.length}/2000)</FieldCount></FieldFooter></Field>
-    <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}: {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}: {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}: 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}: 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}: {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>
@@ -193,21 +332,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}/>
@@ -215,7 +357,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}`}/>}
@@ -237,29 +379,7 @@ function PackingContent({context}: {context:Context}) {
               <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}
@@ -273,7 +393,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>)}
@@ -281,10 +401,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>;
 }

From fdc86743ec79842cba5b36030954b99ed9dbb6e5 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 03:58:22 +0900
Subject: [PATCH 27/50] =?UTF-8?q?refactor(ui):=20=EC=93=B0=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EA=B2=8C=20=EB=90=9C=20=EC=98=9B=20=EB=8C=80=ED=99=94?=
 =?UTF-8?q?=EC=83=81=EC=9E=90=C2=B7=EC=8B=9C=ED=8A=B8=20=EB=B6=80=ED=92=88?=
 =?UTF-8?q?=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SettingsDialog·SettingsActionButton·useSheetDrag·BottomSheetDragHandle 삭제(모든 화면이 ui 부품으로 옮김)
- 지운 SettingsDialog의 테스트 케이스 삭제
- ui 주석에서 옛 부품을 가리키는 표현 정리

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../mobile/BottomSheetDragHandle.tsx          |  13 --
 src/components/mobile/useSheetDrag.ts         |  62 ------
 .../settings/ConfirmDialog.test.tsx           |  14 --
 .../settings/SettingsActionButton.tsx         |  64 ------
 src/components/settings/SettingsDialog.tsx    | 194 ------------------
 src/components/ui/alert-dialog.tsx            |   2 +-
 src/components/ui/dialog.tsx                  |  12 +-
 7 files changed, 7 insertions(+), 354 deletions(-)
 delete mode 100644 src/components/mobile/BottomSheetDragHandle.tsx
 delete mode 100644 src/components/mobile/useSheetDrag.ts
 delete mode 100644 src/components/settings/SettingsActionButton.tsx
 delete mode 100644 src/components/settings/SettingsDialog.tsx

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/useSheetDrag.ts b/src/components/mobile/useSheetDrag.ts
deleted file mode 100644
index ef6c7274..00000000
--- a/src/components/mobile/useSheetDrag.ts
+++ /dev/null
@@ -1,62 +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;
-        // Base UI 체크박스·스위치·라디오는 기본으로 role을 단 span이라(숨김 input은 따로 있다) 감싼 label과 role로도 제외한다
-        if ((event.target as Element).closest("button, input, textarea, select, a, label, [role='button'], [role='checkbox'], [role='switch'], [role='radio'], [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/settings/ConfirmDialog.test.tsx b/src/components/settings/ConfirmDialog.test.tsx
index 1c251772..2218be75 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;
@@ -77,16 +76,3 @@ it("uses current pending state without resetting focus and blocks all pending ac
   await act(async () => button("삭제 닫기").dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
   expect(confirm).not.toHaveBeenCalled(); expect(cancel).not.toHaveBeenCalled();
 });
-
-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);
-});
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/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 7b6856f2..383ff75e 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -69,7 +69,7 @@ function AlertDialogOverlay({ closeLabel }: Readonly<{ closeLabel?: string }>) {
       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의 '배경 닫기' 버튼과 같은 구조).
+      {/* Base UI에 AlertDialog 바깥 닫기 옵션이 없어 딤 전체를 덮는 Close 버튼으로 연다(옛 SettingsDialog의 '배경 닫기' 버튼과 같은 구조).
           Close라 onOpenChange(false, reason "close-press")를 거치므로 closeDisabled면 거기서 막힌다. 키보드는 Esc로 닫으니 탭 순서에서 뺀다 */}
       {closeLabel && (
         <AlertDialogPrimitive.Close
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 28fa8775..4f49c739 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -64,13 +64,13 @@ const dialogContentVariants = cva(
       size: {
         // Figma Modal 원본 폭(5956:24724). 날짜 선택 팝업(DatePickerLayer 최대 353)도 이 폭이다
         default: "w-[min(353px,calc(100vw-2.5rem))]",
-        // 지금 앱 max-w-sm: 북마크 추가·편집, 북마크에 담기, 일정에 추가, 시간 설정
+        // 옛 앱 max-w-sm: 북마크 추가·편집, 북마크에 담기, 일정에 추가, 시간 설정
         sm: "w-[min(384px,calc(100vw-2.5rem))]",
-        // 지금 앱 max-w-md: SettingsDialog compact(준비물 이름), 회원 탈퇴 2종, 가계부 범위 목록, 북마크에서 장소 추가
+        // 옛 앱 max-w-md: SettingsDialog compact(준비물 이름), 회원 탈퇴 2종, 가계부 범위 목록, 북마크에서 장소 추가
         md: "w-[min(448px,calc(100vw-2.5rem))]",
-        // 지금 앱 max-w-[640px]: SettingsDialog 기본(쿠키 설정), 비용 추가·수정. 여행 정보 수정(600)도 여기에 둔다
+        // 옛 앱 max-w-[640px]: SettingsDialog 기본(쿠키 설정), 비용 추가·수정. 여행 정보 수정(600)도 여기에 둔다
         lg: "w-[min(640px,calc(100vw-2.5rem))]",
-        // 지금 앱 max-w-[720px]: 정산 요약
+        // 옛 앱 max-w-[720px]: 정산 요약
         xl: "w-[min(720px,calc(100vw-2.5rem))]",
       },
     },
@@ -104,7 +104,7 @@ function DialogContent({
 }: Readonly<DialogContentProps>) {
   return (
     <DialogPrimitive.Portal data-slot="dialog-portal">
-      {/* 딤은 Figma에 정의가 없어(Modal 6038:6504) 지금 앱 대화상자에서 가장 많은 bg-black/40(SettingsDialog 등 14곳)을 쓴다.
+      {/* 딤은 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
@@ -139,7 +139,7 @@ function DialogHeader({ className, children, ...props }: Readonly<ComponentProps
       {children}
       {closeLabel !== null && (
         // Figma Close 24px icon/subtle + 투명 Touch Target 44×44(6157:5576). 영역은 음수 margin으로 되돌려 제목 줄 높이를 키우지 않는다.
-        // hover는 Figma에 없어 지금 SettingsDialog의 원형 배경을 fill/default로 둔다
+        // hover는 Figma에 없어 옛 SettingsDialog의 원형 배경을 fill/default로 둔다
         <DialogPrimitive.Close
           data-slot="dialog-header-close"
           aria-label={closeLabel}

From 641201183238104e1ec4e385ad6a9968aee8fa75 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 16:59:10 +0900
Subject: [PATCH 28/50] =?UTF-8?q?style(analytics):=20=EC=BF=A0=ED=82=A4=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EB=8C=80=ED=99=94=EC=83=81=EC=9E=90=20?=
 =?UTF-8?q?=ED=8F=AD=EC=9D=84=20sm(384)=EC=9C=BC=EB=A1=9C=20=EC=A4=84?=
 =?UTF-8?q?=EC=9D=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- lg(640) → sm(384), dialog size 주석의 사용처도 옮김

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/analytics/CookieSettingsProvider.tsx | 2 +-
 src/components/ui/dialog.tsx                        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/analytics/CookieSettingsProvider.tsx b/src/components/analytics/CookieSettingsProvider.tsx
index c6a1fbf8..398becca 100644
--- a/src/components/analytics/CookieSettingsProvider.tsx
+++ b/src/components/analytics/CookieSettingsProvider.tsx
@@ -56,7 +56,7 @@ export function CookieSettingsProvider({ children }: Readonly<{ children: ReactN
           }}
         >
           <DialogContent
-            size="lg"
+            size="sm"
             closeLabel="쿠키 설정 닫기"
             finalFocus={() => getCookieSettingsReturnFocus(openerRef.current)}
           >
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 4f49c739..76bcdc18 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -64,11 +64,11 @@ const dialogContentVariants = cva(
       size: {
         // Figma Modal 원본 폭(5956:24724). 날짜 선택 팝업(DatePickerLayer 최대 353)도 이 폭이다
         default: "w-[min(353px,calc(100vw-2.5rem))]",
-        // 옛 앱 max-w-sm: 북마크 추가·편집, 북마크에 담기, 일정에 추가, 시간 설정
+        // 옛 앱 max-w-sm: 북마크 추가·편집, 북마크에 담기, 일정에 추가, 시간 설정. 쿠키 설정도 이 폭이다
         sm: "w-[min(384px,calc(100vw-2.5rem))]",
         // 옛 앱 max-w-md: SettingsDialog compact(준비물 이름), 회원 탈퇴 2종, 가계부 범위 목록, 북마크에서 장소 추가
         md: "w-[min(448px,calc(100vw-2.5rem))]",
-        // 옛 앱 max-w-[640px]: SettingsDialog 기본(쿠키 설정), 비용 추가·수정. 여행 정보 수정(600)도 여기에 둔다
+        // 옛 앱 max-w-[640px]: SettingsDialog 기본, 비용 추가·수정. 여행 정보 수정(600)도 여기에 둔다
         lg: "w-[min(640px,calc(100vw-2.5rem))]",
         // 옛 앱 max-w-[720px]: 정산 요약
         xl: "w-[min(720px,calc(100vw-2.5rem))]",

From 28aa95beab629bc69f1209e2b3958f2f0f7ef2e0 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 17:00:25 +0900
Subject: [PATCH 29/50] =?UTF-8?q?style(analytics):=20=EC=BF=A0=ED=82=A4=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=EC=97=90=20=EB=8C=80=ED=99=94=EC=83=81?=
 =?UTF-8?q?=EC=9E=90=20=EC=B7=A8=EC=86=8C=C2=B7=EC=A0=80=EC=9E=A5=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=A4=84=20=EB=91=90=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 개인정보 처리방침을 한 줄로 두고 그 아래 Footer(취소 Neutral Weak → 저장 Neutral Solid)
- 취소는 대화상자를 닫음(onCancel), 저장 결과 문장은 버튼 아래
- 테스트 렌더에 onCancel 추가(기대값 그대로)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../AnalyticsConsentSettings.test.tsx         |  3 ++
 .../analytics/AnalyticsConsentSettings.tsx    | 30 +++++++++++--------
 .../analytics/CookieSettingsProvider.tsx      |  2 +-
 3 files changed, 22 insertions(+), 13 deletions(-)

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 3d6bb0fe..82e8db19 100644
--- a/src/components/analytics/AnalyticsConsentSettings.tsx
+++ b/src/components/analytics/AnalyticsConsentSettings.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useId, useState, useSyncExternalStore } from "react";
 
 import { Button } from "@/components/ui/button";
+import { DialogFooter } from "@/components/ui/dialog";
 import { Switch } from "@/components/ui/switch";
 import {
   denyAnalyticsConsent,
@@ -21,6 +22,7 @@ type AnalyticsConsentSettingsViewProps = {
   message: string;
   draft: AnalyticsConsentState;
   onSave: () => void;
+  onCancel: () => void;
   onDeny: () => void;
   onGrant: () => void;
 };
@@ -44,6 +46,7 @@ export function AnalyticsConsentSettingsView({
   onGrant,
   draft,
   onSave,
+  onCancel,
 }: AnalyticsConsentSettingsViewProps) {
   const categoryId = useId();
   const descriptionId = useId();
@@ -91,18 +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>
-        {/* 대화상자 확인 버튼(Neutral Solid md). 폭은 지금 최소 폭을 유지한다 */}
-        <Button className="min-w-24" onClick={onSave}>
-          저장
+      <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>
-      </div>
+        <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"
@@ -113,7 +117,8 @@ export function AnalyticsConsentSettingsView({
   );
 }
 
-export function AnalyticsConsentSettings() {
+// 취소는 대화상자를 닫는다(저장하지 않은 선택은 다음에 열 때 저장된 값으로 다시 읽음)
+export function AnalyticsConsentSettings({ onCancel }: Readonly<{ onCancel: () => void }>) {
   const consent = useSyncExternalStore(
     analyticsConsentStore.subscribe,
     analyticsConsentStore.getSnapshot,
@@ -140,6 +145,7 @@ export function AnalyticsConsentSettings() {
       onGrant={() => select("granted")}
       onDeny={() => select("denied")}
       onSave={save}
+      onCancel={onCancel}
     />
   );
 }
diff --git a/src/components/analytics/CookieSettingsProvider.tsx b/src/components/analytics/CookieSettingsProvider.tsx
index 398becca..8800286d 100644
--- a/src/components/analytics/CookieSettingsProvider.tsx
+++ b/src/components/analytics/CookieSettingsProvider.tsx
@@ -63,7 +63,7 @@ export function CookieSettingsProvider({ children }: Readonly<{ children: ReactN
             <DialogHeader>
               <DialogTitle>쿠키 설정</DialogTitle>
             </DialogHeader>
-            <AnalyticsConsentSettings />
+            <AnalyticsConsentSettings onCancel={() => setOpen(false)} />
           </DialogContent>
         </Dialog>
       )}

From 062ad0c60371df6cf98588739ebecdd218c79b9d Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 17:00:39 +0900
Subject: [PATCH 30/50] =?UTF-8?q?style(rooms):=20=EC=B4=88=EB=8C=80?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EB=8C=80=ED=99=94=EC=83=81=EC=9E=90=20?=
 =?UTF-8?q?=ED=8F=AD=EC=9D=84=20md(448)=EB=A1=9C=20=EB=84=93=ED=9E=88?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sm(384) → md(448), dialog size 주석의 사용처도 옮김(회원 탈퇴는 AlertDialog로 바뀌어 뺌)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/rooms/InviteRoomDialog.tsx | 3 +--
 src/components/ui/dialog.tsx              | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/rooms/InviteRoomDialog.tsx b/src/components/rooms/InviteRoomDialog.tsx
index 3949d738..4178c872 100644
--- a/src/components/rooms/InviteRoomDialog.tsx
+++ b/src/components/rooms/InviteRoomDialog.tsx
@@ -37,8 +37,7 @@ export function InviteRoomDialog({
         if (!open) onClose();
       }}
     >
-      {/* 지금 폭 400(SettingsDialog alert)에 가장 가까운 sm(384) */}
-      <DialogContent size="sm" closeLabel="초대하기 닫기" finalFocus={finalFocus}>
+      <DialogContent size="md" closeLabel="초대하기 닫기" finalFocus={finalFocus}>
         <DialogHeader>
           <DialogTitle>초대하기</DialogTitle>
         </DialogHeader>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 76bcdc18..68c03518 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -66,7 +66,7 @@ const dialogContentVariants = cva(
         default: "w-[min(353px,calc(100vw-2.5rem))]",
         // 옛 앱 max-w-sm: 북마크 추가·편집, 북마크에 담기, 일정에 추가, 시간 설정. 쿠키 설정도 이 폭이다
         sm: "w-[min(384px,calc(100vw-2.5rem))]",
-        // 옛 앱 max-w-md: SettingsDialog compact(준비물 이름), 회원 탈퇴 2종, 가계부 범위 목록, 북마크에서 장소 추가
+        // 옛 앱 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))]",

From c2f0e007a978a431e41c295bc39f9f37c94c4a11 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 17:00:47 +0900
Subject: [PATCH 31/50] =?UTF-8?q?style(settings):=20=ED=9A=8C=EC=9B=90=20?=
 =?UTF-8?q?=ED=83=88=ED=87=B4=20=EA=B8=80=EC=9E=90=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=EC=97=90=20=EC=86=90=EA=B0=80=EB=9D=BD=20=EC=BB=A4=EC=84=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/home/(with-header)/my-info/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/home/(with-header)/my-info/page.tsx b/src/app/home/(with-header)/my-info/page.tsx
index e997b9da..63c67c1d 100644
--- a/src/app/home/(with-header)/my-info/page.tsx
+++ b/src/app/home/(with-header)/my-info/page.tsx
@@ -182,7 +182,7 @@ export default function MyInfoPage() {
                 <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>

From 19fd9b758ec6682a9e740dead2a2c19e434e02ab Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 17:07:05 +0900
Subject: [PATCH 32/50] =?UTF-8?q?style(analytics):=20=EC=BF=A0=ED=82=A4=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EB=8C=80=ED=99=94=EC=83=81=EC=9E=90=20?=
 =?UTF-8?q?=ED=8F=AD=EC=9D=84=20md(448)=EB=A1=9C=20=ED=95=9C=20=EB=8B=A8?=
 =?UTF-8?q?=EA=B3=84=20=EB=84=93=ED=9E=88=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sm(384)이 좁아 어색해서 md(448), dialog size 주석의 사용처도 옮김

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/analytics/CookieSettingsProvider.tsx | 2 +-
 src/components/ui/dialog.tsx                        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/analytics/CookieSettingsProvider.tsx b/src/components/analytics/CookieSettingsProvider.tsx
index 8800286d..258d9bde 100644
--- a/src/components/analytics/CookieSettingsProvider.tsx
+++ b/src/components/analytics/CookieSettingsProvider.tsx
@@ -56,7 +56,7 @@ export function CookieSettingsProvider({ children }: Readonly<{ children: ReactN
           }}
         >
           <DialogContent
-            size="sm"
+            size="md"
             closeLabel="쿠키 설정 닫기"
             finalFocus={() => getCookieSettingsReturnFocus(openerRef.current)}
           >
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 68c03518..dbeb04a3 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -64,9 +64,9 @@ const dialogContentVariants = cva(
       size: {
         // Figma Modal 원본 폭(5956:24724). 날짜 선택 팝업(DatePickerLayer 최대 353)도 이 폭이다
         default: "w-[min(353px,calc(100vw-2.5rem))]",
-        // 옛 앱 max-w-sm: 북마크 추가·편집, 북마크에 담기, 일정에 추가, 시간 설정. 쿠키 설정도 이 폭이다
+        // 옛 앱 max-w-sm: 북마크 추가·편집, 북마크에 담기, 일정에 추가, 시간 설정
         sm: "w-[min(384px,calc(100vw-2.5rem))]",
-        // 옛 앱 max-w-md: SettingsDialog compact(준비물 이름), 가계부 범위 목록, 북마크에서 장소 추가. 초대하기도 이 폭이다
+        // 옛 앱 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))]",

From ca49e19f86cea3fc1fd2ec1da916b44e945265c2 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 17:15:36 +0900
Subject: [PATCH 33/50] =?UTF-8?q?style(ui):=20=ED=99=95=EC=9D=B8=EC=B0=BD?=
 =?UTF-8?q?=20=EB=B3=B8=EB=AC=B8=20=EA=B8=80=EC=9E=90=EB=A5=BC=2016px(body?=
 =?UTF-8?q?/md)=EB=A1=9C=20=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma body/lg(18)가 제목에 비해 커 보여 body-m-regular(16/24)로, 제목 22는 그대로

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/alert-dialog.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 383ff75e..49e6bb93 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -154,12 +154,13 @@ function AlertDialogTitle({ className, ...props }: Readonly<AlertDialogPrimitive
   );
 }
 
-// body/lg/regular · text/subtle(5621:2820). 설명 문자열의 줄바꿈(\n)은 지금 확인창처럼 그대로 보인다(ConfirmDialog whitespace-pre-line)
+// 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-l-regular whitespace-pre-line text-text-subtle", className)}
+      className={cn("text-body-m-regular whitespace-pre-line text-text-subtle", className)}
       {...props}
     />
   );

From 52fe2feca41865157b54cb787edaa89ae21e6199 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 17:40:38 +0900
Subject: [PATCH 34/50] =?UTF-8?q?style(expenses):=20=EC=98=88=EC=82=B0=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=8C=80=ED=99=94=EC=83=81=EC=9E=90=20?=
 =?UTF-8?q?=ED=8F=AD=EC=9D=84=20sm(384)=EC=9C=BC=EB=A1=9C=20=EC=A4=84?=
 =?UTF-8?q?=EC=9D=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/expenses/ExpenseBudgetModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/expenses/ExpenseBudgetModal.tsx b/src/components/expenses/ExpenseBudgetModal.tsx
index f50fcdda..532abcbd 100644
--- a/src/components/expenses/ExpenseBudgetModal.tsx
+++ b/src/components/expenses/ExpenseBudgetModal.tsx
@@ -123,7 +123,7 @@ export function ExpenseBudgetModal({
       // 저장·최신 예산 재조회 중에는 Esc·딤·X로 닫지 않는다(지금 동작)
       closeDisabled={pending}
     >
-      <DialogContent size="lg" closeLabel={`${title} 닫기`}>
+      <DialogContent size="sm" closeLabel={`${title} 닫기`}>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription className="sr-only">여행 전체의 예산을 설정해 주세요.</DialogDescription>

From c5e0ec28fbe0e47d8d28b36fa50cdfbf171fd2fa Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 17:41:59 +0900
Subject: [PATCH 35/50] =?UTF-8?q?style(expenses):=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=ED=95=84=ED=84=B0=20=EC=B9=B8=EC=9D=84=20?=
 =?UTF-8?q?184=EB=A1=9C=20=EB=84=93=ED=98=80=20'=EC=A0=84=EC=B2=B4=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC'=20=EC=A4=84=EB=B0=94?=
 =?UTF-8?q?=EA=BF=88=20=EB=A7=89=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 목록 폭이 트리거 폭(144·160)과 같아, 체크 자리 48과 스크롤 막대 15가 생기면 '전체 카테고리'가 두 줄이 됨
- 두 폭 구분 없이 184 하나로

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/expenses/ExpensePanel.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/expenses/ExpensePanel.tsx b/src/components/expenses/ExpensePanel.tsx
index e3103c3f..9cc91af1 100644
--- a/src/components/expenses/ExpensePanel.tsx
+++ b/src/components/expenses/ExpensePanel.tsx
@@ -407,7 +407,9 @@ 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">
             <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"

From dc99191767479e5caf53bbfe4e520ccd8c06ca58 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 17:42:54 +0900
Subject: [PATCH 36/50] =?UTF-8?q?style(chat):=20PC=20=EC=B1=84=ED=8C=85=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=EC=B9=B8=EC=9D=84=203=EC=A4=84=20=EB=86=92?=
 =?UTF-8?q?=EC=9D=B4=EB=A1=9C=20=ED=82=A4=EC=9A=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 입력바 100 → 124(14px 글자 3줄), 모바일 기기는 100 그대로, 작은 패널 110 그대로
- 높이를 인라인 style에서 클래스(mobile: 변형)로

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/chat/ChatInputBar.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

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}

From 2e1ffe078561720d90af29cd73497e705ae65cf6 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 18:47:48 +0900
Subject: [PATCH 37/50] =?UTF-8?q?fix(expenses):=20PC=20=EA=B0=80=EA=B3=84?=
 =?UTF-8?q?=EB=B6=80=20=EC=9D=BC=EC=B0=A8=20=ED=95=84=ED=84=B0=EA=B0=80=20?=
 =?UTF-8?q?=EB=84=98=EC=B9=98=EB=A9=B4=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EB=A7=89=EB=8C=80=EB=A1=9C=20=EC=98=86=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=84=98=EA=B8=B0=EA=B2=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 스크롤 막대를 늘 숨겨 마우스로는 뒤쪽 일차(Day 20 등)에 닿을 수 없었음
- PC는 얇은 막대(북마크에서 추가 칩 줄과 같은 모양), 모바일 기기는 지금처럼 숨김

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/expenses/ExpensePanel.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/expenses/ExpensePanel.tsx b/src/components/expenses/ExpensePanel.tsx
index 9cc91af1..0624bf0b 100644
--- a/src/components/expenses/ExpensePanel.tsx
+++ b/src/components/expenses/ExpensePanel.tsx
@@ -410,9 +410,11 @@ export function ExpensePanel() {
           {/* 카테고리 필터 칸 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

From 22408d113c6f737c4447f9f5eae32bbb255d5186 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 18:54:06 +0900
Subject: [PATCH 38/50] =?UTF-8?q?fix(expenses):=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=EB=B9=84=EC=9A=A9=20=ED=8E=B8=EC=A7=91=20=ED=86=B5?=
 =?UTF-8?q?=ED=99=94=20=EC=B9=B8=EC=97=90=EC=84=9C=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?3=EA=B8=80=EC=9E=90=EA=B0=80=20=EC=9E=98=EB=A6=AC=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EA=B2=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 통화 칸 96 → 112: ui Combobox 트리거의 여백·▼ 자리(66)를 빼면 코드 자리가 30이라 KRW·BHD가 말줄임됐음
- 16px에서 가장 넓은 코드(MWK 37)도 들어가는 46 확보

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/expenses/ExpenseEditor.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/expenses/ExpenseEditor.tsx b/src/components/expenses/ExpenseEditor.tsx
index 3350e39e..8826fae4 100644
--- a/src/components/expenses/ExpenseEditor.tsx
+++ b/src/components/expenses/ExpenseEditor.tsx
@@ -386,8 +386,9 @@ export function ExpenseEditor({
                   );
                 }}
               </form.Field>
-              {/* 통화 이름이 숨는 조건(ExpenseCurrencyPicker의 mobile·max-sm)에서는 통화 칸을 코드 3글자 + ▼ 폭으로 줄여 금액 칸을 넓힌다 */}
-              <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-[96px_minmax(0,1fr)] max-sm:grid-cols-[96px_minmax(0,1fr)] mobile:gap-3 mobile:p-3">
+              {/* 통화 이름이 숨는 조건(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

From 01b71129ea23049db7f37aa1ccf73d6791f6c60f Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 19:36:44 +0900
Subject: [PATCH 39/50] =?UTF-8?q?fix(packing):=20=EC=A0=80=EC=9E=A5?=
 =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=97=86=EB=8A=94=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=A4=80=EB=B9=84=EB=AC=BC=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=ED=99=95=EC=9D=B8=20=EB=B2=84=ED=8A=BC=EC=9D=84=20?=
 =?UTF-8?q?=EB=B9=84=ED=99=9C=EC=84=B1=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ConfirmDialog에 confirmDisabled 추가(확인 버튼만 비활성, 취소·닫기는 그대로)
- 동기화 오류 등 ready가 아닐 때 '삭제'가 눌리는데 아무 반응이 없던 문제(옛 화면은 비활성)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/packing/PackingPage.tsx    | 2 +-
 src/components/settings/ConfirmDialog.tsx | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/packing/PackingPage.tsx b/src/components/packing/PackingPage.tsx
index 7719d258..4df8f321 100644
--- a/src/components/packing/PackingPage.tsx
+++ b/src/components/packing/PackingPage.tsx
@@ -131,7 +131,7 @@ function DeleteDialog({context,onClose}: {context:Context;onClose:()=>void}) {
   const count=context.state.data?.parts.find(value=>value.id===confirmation.id)?.items.length ?? 0;
   return <ConfirmDialog destructive title={part ? "카테고리를 삭제할까요?" : "준비물을 삭제할까요?"}
     description={`‘${confirmation.name}’${part ? `의 준비물 ${count}개와` : " 준비물과"}\n작성한 메모가 함께 삭제됩니다.`}
-    confirmLabel="삭제" isPending={deleting} onConfirm={()=>void confirm()} onCancel={close}/>;
+    confirmLabel="삭제" isPending={deleting} confirmDisabled={context.state.status!=="ready"} onConfirm={()=>void confirm()} onCancel={close}/>;
 }
 
 /**
diff --git a/src/components/settings/ConfirmDialog.tsx b/src/components/settings/ConfirmDialog.tsx
index d454ccf3..18fbdee9 100644
--- a/src/components/settings/ConfirmDialog.tsx
+++ b/src/components/settings/ConfirmDialog.tsx
@@ -20,6 +20,8 @@ type Props = {
   cancelLabel?: string;
   /** 확인 동작 처리 중. Esc·딤·취소를 모두 막고 확인 버튼은 progress로 바뀐다 */
   isPending?: boolean;
+  /** 지금은 확인할 수 없는 상태(예: 동기화 오류). 확인 버튼만 비활성으로 보이고 취소·닫기는 그대로 된다 */
+  confirmDisabled?: boolean;
   /** 삭제·탈퇴·나가기 같은 위험 동작이면 true(확인 버튼 Critical Solid) */
   destructive?: boolean;
   /** 확인 동작이 실패했을 때 버튼 아래에 보여줄 한 줄 안내 */
@@ -49,6 +51,7 @@ export function ConfirmDialog({
   confirmLabel = "확인",
   cancelLabel = "취소",
   isPending = false,
+  confirmDisabled = false,
   destructive = false,
   errorMessage,
   onConfirm,
@@ -80,6 +83,7 @@ export function ConfirmDialog({
               <AlertDialogCancel disabled={isPending}>{cancelLabel}</AlertDialogCancel>
               <AlertDialogAction
                 tone={destructive ? "critical" : "neutral"}
+                disabled={confirmDisabled}
                 loading={isPending}
                 loadingLabel="처리 중"
                 onClick={onConfirm}

From ad7b36315f19c7326113505b7cc01d7ce3290b24 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 19:36:51 +0900
Subject: [PATCH 40/50] =?UTF-8?q?fix(expenses):=20=EC=A0=95=EC=82=B0=20?=
 =?UTF-8?q?=EC=9A=94=EC=95=BD=20=EB=8C=80=ED=99=94=EC=83=81=EC=9E=90?=
 =?UTF-8?q?=EC=9D=98=20=EC=A1=B0=ED=9A=8C=20=EC=9E=AC=EC=8B=9C=EB=8F=84=20?=
 =?UTF-8?q?=EC=A7=84=ED=96=89=EC=9D=84=20progress=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 대화상자 안 버튼만 loading(progress·aria-busy), 패널의 재시도 버튼은 대화상자 밖이라 문구 그대로

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/expenses/ExpensePanel.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/expenses/ExpensePanel.tsx b/src/components/expenses/ExpensePanel.tsx
index 0624bf0b..2bfba9df 100644
--- a/src/components/expenses/ExpensePanel.tsx
+++ b/src/components/expenses/ExpensePanel.tsx
@@ -312,7 +312,7 @@ export function ExpensePanel() {
         : {},
     );
   }
-  // 조회 재시도 진행은 지금처럼 문구와 native disabled로 보인다. loading은 aria-disabled라 ExpensePanel.test의 disabled 단정과 맞지 않아 쓰지 않았다
+  // 패널(대화상자 밖)의 조회 재시도 진행은 지금처럼 문구와 native disabled로 보인다
   const retryLabel = refreshing ? "조회 다시 시도 중" : "조회 다시 시도";
   if (context.revoked) return null;
   return (
@@ -512,13 +512,16 @@ export function ExpensePanel() {
           {context.summary.isError && (
             <div className="space-y-3">
               <p role="alert">정산 조회에 실패했어요.</p>
+              {/* 대화상자 안 버튼이라 진행은 progress로 보인다(대화상자 버튼 규칙). 패널의 재시도 버튼은 대화상자 밖이라 문구 그대로 */}
               <Button
                 variant="outline"
                 size="sm"
-                disabled={refreshing || context.busy}
+                loading={refreshing}
+                loadingLabel="조회 다시 시도 중"
+                disabled={context.busy}
                 onClick={() => void refresh()}
               >
-                {retryLabel}
+                조회 다시 시도
               </Button>
             </div>
           )}

From 63215501f8f70b39f4bffee1213532f8070c28eb Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 19:41:00 +0900
Subject: [PATCH 41/50] =?UTF-8?q?refactor(rooms):=20=EC=97=AC=ED=96=89=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=20=EC=B9=B8=EC=9D=84=20?=
 =?UTF-8?q?form.Field=EB=A1=9C=20=EA=B7=B8=EB=A6=AC=EA=B3=A0=20=EC=B9=B8?=
 =?UTF-8?q?=EB=B3=84=20=EC=98=A4=EB=A5=98=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 제목·목적지·기간을 form.Field + validators로, 오류는 칸 아래 FieldError(제목은 aria-invalid로 Text Field 오류 모양)
- 검증 함수는 trip-form.ts의 tripTitleError·tripDestinationsError·tripDateRangeError(나중에 zod 스키마 자리), 적용하기 잠금도 같은 함수
- RoomTripEditFields는 읽기 전용 칸만 남겨 RoomTripReadOnlyFields로, 목적지는 새 여행 만들기와 같은 DestinationChipsField 재사용
- 테스트는 실제 제목 칸·목적지·기간 onChange로 바꾸고 칸별 오류 테스트 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../rooms/DestinationChipsField.tsx           |   2 +-
 src/components/rooms/RoomTripEditFields.tsx   | 168 ------------------
 .../rooms/RoomTripEditForm.test.tsx           | 120 +++++++++----
 src/components/rooms/RoomTripEditForm.tsx     | 107 ++++++++---
 .../rooms/RoomTripReadOnlyFields.tsx          |  35 ++++
 src/components/rooms/TripFormFields.tsx       |   2 +-
 src/lib/rooms/trip-form.ts                    |  30 ++++
 7 files changed, 238 insertions(+), 226 deletions(-)
 delete mode 100644 src/components/rooms/RoomTripEditFields.tsx
 create mode 100644 src/components/rooms/RoomTripReadOnlyFields.tsx

diff --git a/src/components/rooms/DestinationChipsField.tsx b/src/components/rooms/DestinationChipsField.tsx
index 8cb90b61..dba323e5 100644
--- a/src/components/rooms/DestinationChipsField.tsx
+++ b/src/components/rooms/DestinationChipsField.tsx
@@ -12,7 +12,7 @@ type Props = {
   maxLength: number;
 };
 
-/** 목적지 검색 칸 → 고른 칩 → 경고 순서. 여행 정보 수정(`RoomTripEditFields`)의 목적지와 같은 배치이고, 간격은 감싸는 Field가 준다 */
+/** 목적지 검색 칸 → 고른 칩 → 경고 순서. 새 여행 만들기(`TripFormFields`)와 여행 정보 수정(`RoomTripEditForm`)이 같이 쓰고, 간격은 감싸는 Field가 준다 */
 export function DestinationChipsField({
   values,
   onChange,
diff --git a/src/components/rooms/RoomTripEditFields.tsx b/src/components/rooms/RoomTripEditFields.tsx
deleted file mode 100644
index c708e1c0..00000000
--- a/src/components/rooms/RoomTripEditFields.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-"use client";
-
-import { useState, type ReactNode } from "react";
-
-import { DateRangeField } from "@/components/date-picker/DateRangeField";
-import { DestinationSearchInput } from "@/components/search/DestinationSearchInput";
-import { Chip, ChipRemove } from "@/components/ui/chip";
-import { Field as TextField, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-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, 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>
-  );
-}
-
-/** 여행 정보 수정 모달 전용 입력 필드 — 새 여행 만들기(`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">
-      <TextField>
-        <FieldLabel htmlFor={`${idPrefix}-title`}>여행 제목</FieldLabel>
-        <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="예: 봄 일본 여행, 하와이 신혼여행"
-        />
-      </TextField>
-
-      <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
-            appearance="field"
-          />
-        )}
-        {destinations.length > 0 ? (
-          <div className="mt-1 flex flex-wrap gap-2">
-            {destinations.map((destination, index) => (
-              <Chip key={`${destination}-${index}`} variant="outline" size="md" selected className="max-w-full">
-                <span className="min-w-0 truncate">{destination}</span>
-                <ChipRemove
-                  aria-label={`${destination} 삭제`}
-                  onClick={() => {
-                    onDestinationsChange(destinations.filter((_, i) => i !== index));
-                    setDestinationWarning(null);
-                  }}
-                />
-              </Chip>
-            ))}
-          </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..72d14b02 100644
--- a/src/components/rooms/RoomTripEditForm.test.tsx
+++ b/src/components/rooms/RoomTripEditForm.test.tsx
@@ -3,18 +3,27 @@ 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;
+// 목적지 검색(구글 장소)과 날짜 달력은 칸이 받은 값·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 +31,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);
@@ -36,23 +59,19 @@ it("preserves drafts on same-room refresh; reopening and room switch reset corre
     await act(async () => root.render(<RoomTripEditForm 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 +80,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 +90,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} />));
   // 열어 둔 사이 다른 멤버가 제목과 종료일을 바꿨다
   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);
+  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());
@@ -91,9 +110,9 @@ it("keeps the values from when it opened while the server changes and saves the
   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());
+  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",
@@ -112,9 +131,9 @@ it("allows moving the start date earlier than the saved start date", async () =>
   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());
+  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" }),
@@ -130,13 +149,50 @@ it("does not submit draft edits and submits once for rapid apply clicks", async
   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 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 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 733bdf11..515b35df 100644
--- a/src/components/rooms/RoomTripEditForm.tsx
+++ b/src/components/rooms/RoomTripEditForm.tsx
@@ -4,20 +4,24 @@ import { useForm, useStore } from "@tanstack/react-form";
 import { useRef, useState } from "react";
 import { toast } from "sonner";
 
+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 { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
 import { useRoomSchedules, useUpdateRoom } from "@/hooks/useRooms";
-import {
-  countSchedulesTrimmedByDateChange,
-  isTripScheduleDayLimitExceeded,
-} from "@/lib/plan/schedulePolicy";
+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";
@@ -42,6 +46,7 @@ function RoomTripEditSession({ room, readOnly = false, onSaved }: Props) {
    */
   const [opened, setOpened] = useState(latest);
   const [shrinkConfirmOpen, setShrinkConfirmOpen] = useState(false);
+  const idPrefix = `trip-${room.id}`;
 
   const { data: schedules } = useRoomSchedules(room.id);
   const { mutate: updateRoom, isPending, error } = useUpdateRoom();
@@ -108,29 +113,83 @@ function RoomTripEditSession({ room, readOnly = false, onSaved }: Props) {
     startDate !== opened.startDate ||
     endDate !== opened.endDate;
 
-  // 칸 오류 문장은 RoomTripEditFields가 입력 중에 바로 보여 주고, 여기서는 적용하기만 잠근다(지금 화면 동작).
-  // 잠긴 버튼은 제출되지 않아 칸별 onSubmit 검증을 따로 두지 않는다
+  // 칸 오류는 각 form.Field의 validators가 입력할 때마다 칸 아래에 보인다. 적용하기는 같은 검증 함수로 잠근다
+  // (validators는 건드린 칸에서만 돌아서, 연 순간부터 비어 있던 칸(기간 없는 방 등)도 잠그려면 값으로 다시 본다)
   const canApply =
-    title.trim() &&
-    isTripDestinationsValid(destinations) &&
-    startDate &&
-    endDate &&
-    !isTripDateRangeInvalid(startDate, endDate) &&
-    !isTripScheduleDayLimitExceeded(startDate, endDate) &&
+    !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 : values}
-        readOnly={readOnly}
-        onTitleChange={(next) => form.setFieldValue("title", next)}
-        onDestinationsChange={(next) => form.setFieldValue("destinations", next)}
-        onStartDateChange={(next) => form.setFieldValue("startDate", next)}
-        onEndDateChange={(next) => form.setFieldValue("endDate", next)}
-      />
+      {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">
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/TripFormFields.tsx b/src/components/rooms/TripFormFields.tsx
index 007dc185..57f23a91 100644
--- a/src/components/rooms/TripFormFields.tsx
+++ b/src/components/rooms/TripFormFields.tsx
@@ -30,7 +30,7 @@ type Props = {
   onEndDateChange: (value: string) => void;
 };
 
-/** 새 여행 만들기 입력 필드. 칸 모양과 배치는 여행 정보 수정(`RoomTripEditFields`)과 같은 Figma Text Field이고, 글자 수만 Header Suffix로 더 보인다 */
+/** 새 여행 만들기 입력 필드. 칸 모양과 배치는 여행 정보 수정(`RoomTripEditForm`)과 같은 Figma Text Field이고, 글자 수만 Header Suffix로 더 보인다 */
 export function TripFormFields({
   idPrefix,
   values,
diff --git a/src/lib/rooms/trip-form.ts b/src/lib/rooms/trip-form.ts
index c66d0a5d..49725390 100644
--- a/src/lib/rooms/trip-form.ts
+++ b/src/lib/rooms/trip-form.ts
@@ -1,3 +1,8 @@
+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;
@@ -5,6 +10,11 @@ export const TRIP_DESTINATION_MAX_LENGTH = 100;
 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;
 
@@ -67,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;
+}

From 15c3ec2fb66ab782e46b2200d7a1bd537e6d6353 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 19:48:52 +0900
Subject: [PATCH 42/50] =?UTF-8?q?test(plan):=20=EC=9D=BC=EC=A0=95=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=C2=B7=EC=97=AC=ED=96=89=20=EC=A0=95=EB=B3=B4?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=C2=B7=EB=B0=A9=20=EB=A9=94=EB=89=B4=C2=B7?=
 =?UTF-8?q?=EB=B6=81=EB=A7=88=ED=81=AC=20=EB=A9=94=EB=89=B4=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EB=A5=BC=20Base=20UI=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 포털된 대화상자·메뉴를 document에서 찾고, dialog[open] 대신 role="dialog"·menuitem
- Tab 순환·메뉴 좌표 단정은 Base UI 몫이라 빼고, 바깥 aria-hidden·포커스 복귀·메뉴 단계 전환으로 검사
- 저장 중 닫힘 막힘, 제목 칸 오류(aria-invalid·칸 아래 문장), 목적지 비움 오류, 기간 축소 확인 저장 테스트 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../BookmarkPlaceRow.lifecycle.test.tsx       | 75 ++++++++---------
 .../itinerary/PlanItemTimeForm.test.tsx       | 45 ++++++++---
 .../home/_components/RoomCardMenu.test.tsx    | 10 ++-
 .../rooms/RoomTripEditDialog.test.tsx         | 81 ++++++++++++++++---
 4 files changed, 151 insertions(+), 60 deletions(-)

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)/plan/_components/itinerary/PlanItemTimeForm.test.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.test.tsx
index b845c5d5..ff2840d7 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);
@@ -172,6 +180,7 @@ describe("web time editing", () => {
     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");
@@ -184,7 +193,7 @@ describe("web time editing", () => {
     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.mutateAsync).not.toHaveBeenCalled();
     await type(0, "22");
@@ -201,24 +210,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();
diff --git a/src/app/home/_components/RoomCardMenu.test.tsx b/src/app/home/_components/RoomCardMenu.test.tsx
index 4e47173e..0b278a1e 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(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();
 });
diff --git a/src/components/rooms/RoomTripEditDialog.test.tsx b/src/components/rooms/RoomTripEditDialog.test.tsx
index ca3089a1..395581bf 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,34 @@ 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("names the existing title, destination and date fields", async () => {
   await open();
   const modal = dialog()!;

From 6bf03c284ef8ed075d021a2ea19f128bb74c5ba9 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 19:49:32 +0900
Subject: [PATCH 43/50] =?UTF-8?q?test(packing):=20=EC=A4=80=EB=B9=84?=
 =?UTF-8?q?=EB=AC=BC=C2=B7=ED=99=95=EC=9D=B8=EC=B0=BD=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20Base=20UI=20=ED=99=94=EB=A9=B4=20=EA=B8=B0?=
 =?UTF-8?q?=EC=A4=80=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- react-test-renderer 대신 react-dom + document 조회, props 직접 호출 대신 실제 클릭·입력 이벤트
- 확인창: X 없음, 바깥 aria-hidden, 진행 중 접근성 이름 '처리 중'·aria-busy, 첫 포커스 '취소'
- 시트 끌기 수치·Tab 순환 테스트는 지우고, 저장 중 닫힘 막힘·모바일 메모 초안 유지·삭제 확인 confirmDisabled 테스트 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../packing/PackingPage.dialog.test.tsx       | 100 ++--
 src/components/packing/PackingPage.test.tsx   | 459 ++++++++++++------
 .../settings/ConfirmDialog.test.tsx           |  82 +++-
 3 files changed, 434 insertions(+), 207 deletions(-)

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.test.tsx b/src/components/packing/PackingPage.test.tsx
index 271d29a4..76d181e1 100644
--- a/src/components/packing/PackingPage.test.tsx
+++ b/src/components/packing/PackingPage.test.tsx
@@ -1,234 +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 { 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}));
+// 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)!;}
-// Base UI Input은 사용자 핸들러 다음에 event.currentTarget을 읽는다(onChange는 value, Enter onKeyDown은 tagName·value·form)
-function changeEvent(value:string){const element={value};return {target:element,currentTarget:element};}
+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':'준비물 상세'});
-  // Base UI Checkbox의 숨김 input onChange는 event.nativeEvent를 읽어 가짜 이벤트 대신 onCheckedChange를 부른다
-  const checkbox = detail.findByProps({'aria-label':'상세: 여권 준비 완료'});
-  await act(async () => checkbox.props.onCheckedChange(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()=>renderer.root.findByProps({'aria-label':'항공권 예약 내역 준비 완료'}).props.onCheckedChange(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(changeEvent('새 카테고리')));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(changeEvent('비상 연락처')));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(changeEvent('추가 준비')));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(changeEvent('개인용')));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(changeEvent('여권')));
-  name.props.onCompositionStart();
-  const preventDefault=vi.fn();name.props.onKeyDown({key:'Enter',nativeEvent:{isComposing:false},keyCode:229,preventDefault,currentTarget:{tagName:'INPUT',value:'여권',form:null}});
-  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(changeEvent(' '.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(changeEvent('여권')));
-  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(changeEvent('첫 번째 이름')));
-  let pending!:Promise<void>;act(()=>{pending=renderer.root.findByType('form').props.onSubmit({preventDefault(){}});});
-  await act(async()=>input('준비물 이름').props.onChange(changeEvent('두 번째 이름')));
-  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(changeEvent('새 초안')));
-  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/settings/ConfirmDialog.test.tsx b/src/components/settings/ConfirmDialog.test.tsx
index 2218be75..60957721 100644
--- a/src/components/settings/ConfirmDialog.test.tsx
+++ b/src/components/settings/ConfirmDialog.test.tsx
@@ -10,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>,
   ));
 }
@@ -35,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);
@@ -43,36 +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("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);
 });

From dabccd649661136565a6eb0411270c31202e55e2 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 19:52:19 +0900
Subject: [PATCH 44/50] =?UTF-8?q?test(analytics):=20=EC=BF=A0=ED=82=A4=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=C2=B7=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EB=A9=94=EB=89=B4=C2=B7=EC=A7=80=EB=8F=84=20?=
 =?UTF-8?q?=ED=8F=89=EC=A0=90=20=ED=95=84=ED=84=B0=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20Base=20UI=20=ED=99=94=EB=A9=B4=20=EA=B8=B0?=
 =?UTF-8?q?=EC=A4=80=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- dialog[open]·aria-modal·inert 대신 role="dialog"·바깥 aria-hidden, 메뉴·Select 목록은 document에서 menuitem·option으로
- 옛 SettingsDialog 클래스 계약(거터·640 폭) 테스트는 지움
- 쿠키 설정 취소(저장 안 하고 닫힘)·저장 결과 문장이 버튼 아래 live 영역에 보이는지, 모바일 메뉴 항목으로 수정 대화상자 열기 테스트 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../CookieSettingsEntrypoints.test.tsx        |  21 ++-
 .../CookieSettingsLandingEntry.test.tsx       |  12 +-
 .../analytics/CookieSettingsModal.test.tsx    | 167 +++++++++++-------
 src/components/layout/mobile-header.test.tsx  |  52 ++++--
 .../layout/planning-chrome.test.tsx           |  20 ++-
 src/components/map/Map.search-rank.test.tsx   |   5 +-
 .../map/MapDiscoverToolbar.test.tsx           |  29 +--
 7 files changed, 207 insertions(+), 99 deletions(-)

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/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/map/Map.search-rank.test.tsx b/src/components/map/Map.search-rank.test.tsx
index 70238ffe..1760aa39 100644
--- a/src/components/map/Map.search-rank.test.tsx
+++ b/src/components/map/Map.search-rank.test.tsx
@@ -508,7 +508,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/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();
 });

From f0c5b5830e080ad48110e403d68f3064b7f71a2f Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 19:52:30 +0900
Subject: [PATCH 45/50] =?UTF-8?q?test(expenses):=20=EA=B0=80=EA=B3=84?=
 =?UTF-8?q?=EB=B6=80=20=ED=8C=A8=EB=84=90=C2=B7=EB=B6=84=EC=84=9D=20?=
 =?UTF-8?q?=ED=83=AD=C2=B7=EB=A9=94=EB=89=B4=C2=B7=EC=98=88=EC=82=B0=20?=
 =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=EB=A5=BC=20Base=20UI=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- react-test-renderer(Base UI 메뉴 트리거가 렌더 단계에서 실패) 대신 react-dom + document 조회, props 직접 호출 대신 실제 메뉴·Select·탭 조작
- 확인창 mock 대신 실제 alertdialog, 예산 칸 오류는 aria-invalid·aria-describedby FieldError로 검사
- 정산 요약 대화상자 안 재시도는 progress(aria-busy·이름 '조회 다시 시도 중'), 패널 재시도는 native disabled 그대로인지 테스트 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../expenses/ExpenseBudget.test.tsx           |  17 +-
 .../ExpenseLedgerInteractions.test.tsx        | 106 ++--
 .../expenses/ExpenseNameFallback.test.tsx     |  25 +-
 src/components/expenses/ExpensePanel.test.tsx | 546 ++++++++++--------
 src/components/expenses/ExpenseViews.test.tsx | 123 ++--
 5 files changed, 465 insertions(+), 352 deletions(-)

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/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/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();
+  }
 });

From 5b40da9a054d3e3fa01087e418073ac0a2df6cb1 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 19:53:55 +0900
Subject: [PATCH 46/50] =?UTF-8?q?test(expenses):=20=EB=B9=84=EC=9A=A9=20?=
 =?UTF-8?q?=ED=8E=B8=EC=A7=91=C2=B7=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?Select=C2=B7=ED=86=B5=ED=99=94=20Combobox=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20Base=20UI=20=ED=99=94=EB=A9=B4=20=EA=B8=B0?=
 =?UTF-8?q?=EC=A4=80=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- react-test-renderer props 호출 대신 react-dom + 실제 클릭·입력·키 이벤트, 가짜 native dialog 제거
- 오류는 칸별(aria-invalid·칸 아래 FieldError)로, 폼 아래 문장은 저장 실패·권한 같은 폼 전체 오류만
- 카테고리 칸 오류, 목록·통화 검색 Esc는 팝업만 닫힘, PC 딤은 안 닫고 모바일 시트 딤은 닫음, 빈 값 '장소 연결 없음' 표시 테스트 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../expenses/ExpenseCurrencyPicker.test.tsx   |  149 +-
 .../expenses/ExpenseEditor.pending.test.tsx   |  190 ++-
 .../expenses/ExpenseEditor.test.tsx           | 1194 ++++++++---------
 .../expenses/ExpenseSelect.test.tsx           |  146 +-
 4 files changed, 839 insertions(+), 840 deletions(-)

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/ExpenseEditor.pending.test.tsx b/src/components/expenses/ExpenseEditor.pending.test.tsx
index dd98013a..94eba2f3 100644
--- a/src/components/expenses/ExpenseEditor.pending.test.tsx
+++ b/src/components/expenses/ExpenseEditor.pending.test.tsx
@@ -1,17 +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 { Checkbox } from "@/components/ui/checkbox";
 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"],
@@ -39,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 = {
@@ -61,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)(
@@ -92,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,
@@ -115,77 +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") {
-    // Base UI Input은 사용자 onChange 다음에 event.currentTarget.value를 읽는다
-    await act(async () => renderer.root.findAllByType("input").find((i) => i.props.inputMode === "decimal")!.props.onChange({ target: { value: "200" }, currentTarget: { 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");
-  // Base UI Checkbox의 숨김 input onChange는 event.nativeEvent를 읽어 가짜 이벤트 대신 onCheckedChange를 부른다
-  await act(async () => labels.find((l) => text(l).includes("#99"))!.findByType(Checkbox).props.onCheckedChange(false));
-  expect(text(picker("결제자"))).not.toContain("#99");
-  await act(async () => labels.find((l) => text(l).includes("나간 멤버"))!.findByType(Checkbox).props.onCheckedChange(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);
 });
@@ -193,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 91daf689..350f56ae 100644
--- a/src/components/expenses/ExpenseEditor.test.tsx
+++ b/src/components/expenses/ExpenseEditor.test.tsx
@@ -1,24 +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 { Checkbox } from "@/components/ui/checkbox";
 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: "경복궁" }],
@@ -31,831 +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;
 }
-
-// Base UI Input은 사용자 onChange 다음에 event.currentTarget.value를 읽는다
-function changeEvent(value: string) {
-  const element = { value };
-  return { target: element, currentTarget: element };
+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(changeEvent(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.length).toBe(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.length).toBe(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.length).toBe(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.length).toBe(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]);
-    // Base UI Checkbox의 숨김 input onChange는 event.nativeEvent를 읽어 가짜 이벤트 대신 onCheckedChange를 부른다
-    await act(async () =>
-      picker.findAllByType(Checkbox)[0].props.onCheckedChange(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(changeEvent("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(changeEvent("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(changeEvent("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(changeEvent("100")),
-    );
-    for (const checkbox of renderer.root
-      .findAllByType(Checkbox)
-      .filter((i) => !i.props.checked))
-      await act(async () => checkbox.props.onCheckedChange(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 () =>
-    renderer.root.findAllByType(Checkbox)[1].props.onCheckedChange(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(changeEvent("100")));
-  for (const checkbox of renderer.root
-    .findAllByType(Checkbox)
-    .filter((i) => !i.props.checked)) {
-    await act(async () => checkbox.props.onCheckedChange(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/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");
+});

From 8b002c24d92af911751ce523d5906f46a3771a32 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 19:55:31 +0900
Subject: [PATCH 47/50] =?UTF-8?q?test(expenses):=20=EA=B0=80=EA=B3=84?=
 =?UTF-8?q?=EB=B6=80=20Provider=C2=B7=EB=94=A4=C2=B7=EB=B9=84=EC=9A=A9=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EB=A5=BC=20Bas?=
 =?UTF-8?q?e=20UI=20=ED=99=94=EB=A9=B4=20=EA=B8=B0=EC=A4=80=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C,=20=EC=98=9B=20=EB=81=8C=EA=B8=B0=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ExpenseDialog.drag.test 삭제: 옛 useSheetDrag 수치(translateY·80px) 검사라 끌기는 Base UI Drawer 몫
- ExpenseBackdrop.test를 새 동작으로 다시 씀: 모바일 시트는 딤으로 닫힘, PC는 딤으로 안 닫힘, 저장·삭제 중엔 딤·Esc·X·취소 모두 막힘
- ExpenseProvider·ExpenseScopePanel은 react-dom + document 조회, 삭제 중 확인 버튼 progress(aria-busy·이름 '삭제 중')

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../expenses/ExpenseBackdrop.test.tsx         | 181 ++++++---
 .../expenses/ExpenseDialog.drag.test.tsx      | 134 -------
 .../expenses/ExpenseProvider.test.tsx         | 378 +++++++++++-------
 .../expenses/ExpenseScopePanel.test.tsx       |  55 ++-
 4 files changed, 399 insertions(+), 349 deletions(-)
 delete mode 100644 src/components/expenses/ExpenseDialog.drag.test.tsx

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/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/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();
 });

From ea85edd5835c05b869c21d6a256e479f7c827182 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 20:01:57 +0900
Subject: [PATCH 48/50] =?UTF-8?q?fix(rooms):=20=EC=97=AC=ED=96=89=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=20=EB=8C=80=ED=99=94?=
 =?UTF-8?q?=EC=83=81=EC=9E=90=EA=B0=80=20=EC=A0=80=EC=9E=A5=20=EC=A4=91?=
 =?UTF-8?q?=EC=97=90=20Esc=C2=B7=EB=94=A4=C2=B7X=EB=A1=9C=20=EB=8B=AB?=
 =?UTF-8?q?=ED=9E=88=EC=A7=80=20=EC=95=8A=EA=B2=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 저장 요청(useUpdateRoom)을 대화상자가 만들어 폼에 내려 주고, 대화상자는 그 isPending으로 closeDisabled
- 저장 중 Esc·X로 닫히지 않는 테스트 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../rooms/RoomTripEditDialog.test.tsx         | 21 +++++++++++++++++++
 src/components/rooms/RoomTripEditDialog.tsx   |  8 +++++--
 .../rooms/RoomTripEditForm.test.tsx           | 19 +++++++++--------
 src/components/rooms/RoomTripEditForm.tsx     |  8 ++++---
 .../rooms/RoomTripSettingsSection.tsx         | 12 ++++++++---
 5 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/src/components/rooms/RoomTripEditDialog.test.tsx b/src/components/rooms/RoomTripEditDialog.test.tsx
index 395581bf..29eafa08 100644
--- a/src/components/rooms/RoomTripEditDialog.test.tsx
+++ b/src/components/rooms/RoomTripEditDialog.test.tsx
@@ -250,6 +250,27 @@ it("saves the shortened period from the confirmation and keeps it open while sav
   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 118bbd70..b640ac83 100644
--- a/src/components/rooms/RoomTripEditDialog.tsx
+++ b/src/components/rooms/RoomTripEditDialog.tsx
@@ -5,15 +5,19 @@ import {
   RoomTripSettingsSection,
 } from "@/components/rooms/RoomTripSettingsSection";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { useUpdateRoom } from "@/hooks/useRooms";
 
 /**
  * 여행 정보 수정 대화상자. 마운트되면 열린 상태라 HeaderBar가 조건부로 그린다.
- * 기간 축소 확인(RoomTripEditForm)·여행 삭제 확인(RoomTripDeleteButton)은 이 대화상자의 React 자식이라 위 레이어만 Esc·포커스를 받는다
+ * 기간 축소 확인(RoomTripEditForm)·여행 삭제 확인(RoomTripDeleteButton)은 이 대화상자의 React 자식이라 위 레이어만 Esc·포커스를 받는다.
+ * 저장 요청을 여기서 만들어 폼에 내려 주고, 저장 중에는 Esc·딤·X로 닫히지 않게 한다(대화상자 공통 규칙)
  */
 export function RoomTripEditDialog({ onClose }: { onClose: () => void }) {
+  const update = useUpdateRoom();
   return (
     <Dialog
       open
+      closeDisabled={update.isPending}
       onOpenChange={(open) => {
         if (!open) onClose();
       }}
@@ -24,7 +28,7 @@ export function RoomTripEditDialog({ onClose }: { onClose: () => void }) {
           <DialogTitle>여행 정보 수정</DialogTitle>
         </DialogHeader>
         <div className="flex flex-col gap-3">
-          <RoomTripSettingsSection onSaved={onClose} />
+          <RoomTripSettingsSection update={update} onSaved={onClose} />
           {/* 여행 삭제는 적용하기 아래 오른쪽 끝 — 방장이 아니면 버튼이 없어 줄째 숨긴다 */}
           <div className="flex justify-end empty:hidden">
             <RoomTripDeleteButton />
diff --git a/src/components/rooms/RoomTripEditForm.test.tsx b/src/components/rooms/RoomTripEditForm.test.tsx
index 72d14b02..be2e5424 100644
--- a/src/components/rooms/RoomTripEditForm.test.tsx
+++ b/src/components/rooms/RoomTripEditForm.test.tsx
@@ -12,8 +12,9 @@ const state = vi.hoisted(() => ({
 }));
 vi.mock("@/hooks/useRooms", () => ({
   useRoomSchedules: () => ({ data: [{}, {}, {}] }),
-  useUpdateRoom: () => ({ mutate: state.update, isPending: false }),
 }));
+// 저장 요청은 대화상자(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>) => {
@@ -56,7 +57,7 @@ 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 typeTitle(container, "draft");
@@ -91,10 +92,10 @@ it("keeps the values from when it opened while the server changes and saves the
   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 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} />));
+  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);
@@ -108,8 +109,8 @@ 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" }} />));
+  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());
@@ -130,7 +131,7 @@ 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} />));
+  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());
@@ -148,7 +149,7 @@ 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 () => root.render(<RoomTripEditForm update={update} room={room} />));
   await typeTitle(container, "cancelled");
   expect(state.update).not.toHaveBeenCalled();
   await typeTitle(container, "new");
@@ -165,7 +166,7 @@ it("shows each field's error under that field and locks apply until it is fixed"
   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 room={room} />));
+  await act(async () => root.render(<RoomTripEditForm update={update} room={room} />));
   expect(container.textContent).not.toContain("입력해 주세요");
 
   // 제목을 비우면 제목 칸이 오류 상태가 되고 칸 아래에 문장이 붙는다
diff --git a/src/components/rooms/RoomTripEditForm.tsx b/src/components/rooms/RoomTripEditForm.tsx
index 515b35df..bde4c744 100644
--- a/src/components/rooms/RoomTripEditForm.tsx
+++ b/src/components/rooms/RoomTripEditForm.tsx
@@ -11,7 +11,7 @@ import { TripDateShrinkConfirmModal } from "@/components/rooms/TripDateShrinkCon
 import { Button } from "@/components/ui/button";
 import { Field, FieldError, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { useRoomSchedules, useUpdateRoom } from "@/hooks/useRooms";
+import { useRoomSchedules, type useUpdateRoom } from "@/hooks/useRooms";
 import { countSchedulesTrimmedByDateChange } from "@/lib/plan/schedulePolicy";
 import {
   areDestinationsEqual,
@@ -28,6 +28,8 @@ import {
 
 type Props = {
   room: RoomTripFormSource;
+  /** 여행 정보 저장 요청. 대화상자가 저장 중에 닫히지 않게 그 isPending을 쓰므로 대화상자가 만들어 내려 준다 */
+  update: ReturnType<typeof useUpdateRoom>;
   readOnly?: boolean;
   onSaved?: () => void;
 };
@@ -36,7 +38,7 @@ 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 }: Props) {
   /** 서버 최신 값 — 다른 멤버가 바꾸면 따라 바뀐다. 읽기 전용 표시와 저장 직전 기준(기간 축소 확인·이전 기간)에 쓴다 */
   // 저장은 화면에 보이는 폼 값 그대로 보낸다 — 열어 둔 사이 다른 멤버가 바꾼 값보다 마지막에 저장한 사람의 화면 값이 남는다
   const latest = toTripFormValues(room);
@@ -49,7 +51,7 @@ function RoomTripEditSession({ room, readOnly = false, onSaved }: Props) {
   const idPrefix = `trip-${room.id}`;
 
   const { data: schedules } = useRoomSchedules(room.id);
-  const { mutate: updateRoom, isPending, error } = useUpdateRoom();
+  const { mutate: updateRoom, isPending, error } = update;
   const scheduleCount = schedules?.length ?? 0;
 
   const submitInFlight = useRef(false);
diff --git a/src/components/rooms/RoomTripSettingsSection.tsx b/src/components/rooms/RoomTripSettingsSection.tsx
index 1bd9f1d5..d322b444 100644
--- a/src/components/rooms/RoomTripSettingsSection.tsx
+++ b/src/components/rooms/RoomTripSettingsSection.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, type ComponentProps } from "react";
 import { useRouter } from "next/navigation";
 
 import { DeleteConfirmModal } from "@/app/home/_components/DeleteConfirmModal";
@@ -42,7 +42,13 @@ export function RoomTripDeleteButton() {
   );
 }
 
-export function RoomTripSettingsSection({ onSaved }: { onSaved?: () => void }) {
+export function RoomTripSettingsSection({
+  update,
+  onSaved,
+}: {
+  update: ComponentProps<typeof RoomTripEditForm>["update"];
+  onSaved?: () => void;
+}) {
   const { roomId, roomSource, isLoading } = useCurrentRoomMembership();
   const canEdit = isRoomMemberRole(roomSource?.role);
   const description = !isLoading && roomSource && roomId && !canEdit
@@ -62,7 +68,7 @@ export function RoomTripSettingsSection({ onSaved }: { onSaved?: () => void }) {
           여행 정보를 불러오지 못했어요.
         </p>
       ) : (
-        <RoomTripEditForm room={roomSource} readOnly={!canEdit} onSaved={onSaved} />
+        <RoomTripEditForm room={roomSource} update={update} readOnly={!canEdit} onSaved={onSaved} />
       )}
     </div>
   );

From 576ac963879e02838402a199abade98bf53c079b Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sun, 1 Nov 2026 20:04:07 +0900
Subject: [PATCH 49/50] =?UTF-8?q?fix(date-picker):=20=EC=B9=B8=20=EC=95=84?=
 =?UTF-8?q?=EB=9E=98=20=EB=8B=AC=EB=A0=A5=EC=97=90=EC=84=9C=20Tab=EC=9D=B4?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=A8=20=EC=95=9E=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B9=A0=EC=A0=B8=EB=82=98=EA=B0=80=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EA=B2=8C=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=20=EA=B0=80?=
 =?UTF-8?q?=EB=91=90=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Popover modal="trap-focus" + 보이지 않는 Popover.Close(Base UI는 닫기 부품이 있어야 가둠, Tab 순서 밖, 누르면 Esc처럼 취소)
- 달력이 body로 포털된 뒤 마지막 버튼에서 Tab을 누르면 로고 링크로 튀고 달력이 열린 채 남던 회귀

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/date-picker/DatePickerLayer.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/date-picker/DatePickerLayer.tsx b/src/components/date-picker/DatePickerLayer.tsx
index d37a795d..452b23cd 100644
--- a/src/components/date-picker/DatePickerLayer.tsx
+++ b/src/components/date-picker/DatePickerLayer.tsx
@@ -1,6 +1,7 @@
 "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";
@@ -68,11 +69,14 @@ export function DatePickerLayer({
 
   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") {
+          if (details.reason === "escape-key" || details.reason === "close-press") {
             onEscape();
             return;
           }
@@ -96,6 +100,11 @@ export function DatePickerLayer({
           <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>
     );

From d5299db331b498629128def1c7134c779a61c4fb Mon Sep 17 00:00:00 2001
From: minbros <realminbros@gmail.com>
Date: Mon, 2 Nov 2026 18:55:37 +0900
Subject: [PATCH 50/50] =?UTF-8?q?refactor(ui):=20=ED=8C=9D=EC=97=85=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EA=B2=BD=EA=B3=84=EC=99=80=20Son?=
 =?UTF-8?q?ar=20=ED=92=88=EC=A7=88=20=EA=B2=BD=EA=B3=A0=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../itinerary/PlanDaySection.menu.test.tsx    |  50 +++
 .../_components/itinerary/PlanDaySection.tsx  |  94 +++---
 .../itinerary/PlanItemTimeForm.test.tsx       |   5 +-
 .../itinerary/PlanItemTimeForm.tsx            |  17 +-
 .../plan/_components/itinerary/TimeInput.tsx  |   5 +
 src/app/home/_components/InviteRoomModal.tsx  |   4 +-
 .../expenses/ExpenseEditor.test.tsx           |   8 +-
 src/components/packing/PackingPage.tsx        |  26 +-
 src/components/place/AddToBookmarkModal.tsx   | 294 +++++++++---------
 src/components/place/AddToScheduleModal.tsx   | 172 +++++-----
 src/components/place/room-analytics.test.tsx  |  24 ++
 src/components/rooms/RoomTripEditForm.tsx     |   2 +-
 .../rooms/RoomTripSettingsSection.tsx         |   4 +-
 src/components/settings/ConfirmDialog.tsx     |  85 +++--
 src/components/ui/alert-dialog.tsx            |  11 +-
 .../ui/dialog-event-boundary.test.tsx         |  64 ++++
 src/components/ui/dialog.tsx                  |   4 +
 17 files changed, 511 insertions(+), 358 deletions(-)
 create mode 100644 src/app/(main)/plan/_components/itinerary/PlanDaySection.menu.test.tsx
 create mode 100644 src/components/ui/dialog-event-boundary.test.tsx

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.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
index bd30fd91..4b2163aa 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
@@ -63,8 +63,14 @@ export type PlanDaySectionProps = {
 };
 
 // 메뉴는 body로 포털되지만 React 이벤트는 트리를 따라 섹션(일차 간 드롭 핸들러)으로 올라간다.
-// 지금 메뉴처럼 트리거·항목의 클릭이 섹션으로 가지 않게 Root를 감싼 요소에서 끊는다(MIGRATION 7장)
+// 트리거와 포털 표면에서만 포인터 전파를 끊고, 키보드는 Base UI에 전달한다
 const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+const pointerBoundary = {
+  onClick: stopPropagation,
+  onMouseDown: stopPropagation,
+  onPointerDown: stopPropagation,
+  onTouchStart: stopPropagation,
+};
 
 export function PlanDaySection({
   title,
@@ -227,53 +233,45 @@ export function PlanDaySection({
             </span>
           </button>
           {showScheduleMenu ? (
-            <div
-              className="contents"
-              onClick={stopPropagation}
-              onMouseDown={stopPropagation}
-              onPointerDown={stopPropagation}
-              onTouchStart={stopPropagation}
-            >
-              {/* mutation·드래그 중(isScheduleMenuDisabled)에는 열려 있던 메뉴도 감춘다(지금 동작) */}
-              <DropdownMenu open={menuOpen && !isScheduleMenuDisabled} onOpenChange={setMenuOpen}>
-                <DropdownMenuTrigger
-                  aria-label="일차 메뉴"
-                  disabled={isScheduleMenuDisabled}
-                  className={cn(
-                    "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",
-                  )}
-                >
-                  <MenuDotHorizontalIcon size={20} />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  {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>
-            </div>
+            <DropdownMenu open={menuOpen && !isScheduleMenuDisabled} onOpenChange={setMenuOpen}>
+              <DropdownMenuTrigger
+                {...pointerBoundary}
+                aria-label="일차 메뉴"
+                disabled={isScheduleMenuDisabled}
+                className={cn(
+                  "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",
+                )}
+              >
+                <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 ? (
diff --git a/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.test.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.test.tsx
index ff2840d7..6cf42a12 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.test.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.test.tsx
@@ -176,7 +176,7 @@ 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();
@@ -186,7 +186,7 @@ describe("web time editing", () => {
     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) => {
@@ -195,6 +195,7 @@ describe("web time editing", () => {
     expect(input(0).getAttribute("aria-invalid")).toBe("true");
     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");
diff --git a/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.tsx
index 800b64db..501d2c22 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItemTimeForm.tsx
@@ -116,6 +116,7 @@ export function PlanItemTimeEditor({
     startHm && endHm ? computeDurationMinutesFromRange(startHm, endHm) : null;
   const dirty = serverStartHm !== startHm || serverEndHm !== endHm;
   const validation = validateScheduleTimeDraft(startHm, endHm);
+  const describedBy = validation.valid ? `${formId}-help` : `${formId}-help ${formId}-error`;
 
   function submit() {
     // 라이브러리는 연타를 막지 않는다. isPending은 다음 렌더에 바뀌어 ref 락을 함께 본다
@@ -166,13 +167,6 @@ export function PlanItemTimeEditor({
             event.preventDefault();
             submit();
           }}
-          // 입력 칸에서 Enter는 바로 적용한다. 적용 버튼이 비활성(검증 실패)이어도 실패 안내 토스트를 띄우려고 암묵 제출 대신 직접 부른다
-          onKeyDown={(event) => {
-            if (event.key === "Enter" && event.target instanceof HTMLInputElement) {
-              event.preventDefault();
-              submit();
-            }
-          }}
         >
           <p id={`${formId}-help`} className="text-center text-body-xs-regular text-dark-gray">
             24시간 기준 · 시와 분을 직접 입력하세요
@@ -192,7 +186,14 @@ export function PlanItemTimeEditor({
                     value={field.state.value ?? serverValue}
                     onChange={field.handleChange}
                     disabled={disabled}
-                    describedBy={`${formId}-help${validation.valid ? "" : ` ${formId}-error`}`}
+                    describedBy={describedBy}
+                    // 적용 버튼이 비활성이어도 Enter로 검증 실패 안내를 보여 준다.
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter") {
+                        event.preventDefault();
+                        submit();
+                      }
+                    }}
                   />
                 </div>
               )}
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/home/_components/InviteRoomModal.tsx b/src/app/home/_components/InviteRoomModal.tsx
index f4058a29..ca7b2c22 100644
--- a/src/app/home/_components/InviteRoomModal.tsx
+++ b/src/app/home/_components/InviteRoomModal.tsx
@@ -7,12 +7,12 @@ import { useRoomDetail } from "@/hooks/useRoomDetail";
 import type { RoomListItem } from "@/lib/api/rooms";
 
 /** 홈 방 카드 메뉴의 초대 — 헤더와 같은 초대하기 모달에 이 방의 정보를 넘긴다 */
-export function InviteRoomModal({ room, finalFocus, 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 (
diff --git a/src/components/expenses/ExpenseEditor.test.tsx b/src/components/expenses/ExpenseEditor.test.tsx
index 350f56ae..a6577c76 100644
--- a/src/components/expenses/ExpenseEditor.test.tsx
+++ b/src/components/expenses/ExpenseEditor.test.tsx
@@ -208,7 +208,7 @@ it("remembers currency only after a successful new expense save", async () => {
   expect(currencyValue()).toBe("KRW");
   await chooseCurrency("USD");
   expect(currencyValue()).toBe("USD");
-  expect(localStorage.length).toBe(0);
+  expect(localStorage).toHaveLength(0);
   await completeNewExpense();
   expect(mocks.save).toHaveBeenCalledOnce();
   expect(Object.values({ ...localStorage })).toEqual(["USD"]);
@@ -221,17 +221,17 @@ it("does not remember cancelled, failed, or edited expense currency", async () =
   await chooseCurrency("USD");
   await click(button("닫기")!);
   expect(mocks.close).toHaveBeenCalledOnce();
-  expect(localStorage.length).toBe(0);
+  expect(localStorage).toHaveLength(0);
   await mount(null);
   await chooseCurrency("USD");
   mocks.save.mockRejectedValueOnce(new Error("저장 실패"));
   await completeNewExpense();
   expect(mocks.save).toHaveBeenCalledOnce();
-  expect(localStorage.length).toBe(0);
+  expect(localStorage).toHaveLength(0);
   await mount();
   await clickSave();
   expect(mocks.save).toHaveBeenCalledOnce();
-  expect(localStorage.length).toBe(0);
+  expect(localStorage).toHaveLength(0);
 });
 
 it("scopes the remembered currency to the authenticated user and room", async () => {
diff --git a/src/components/packing/PackingPage.tsx b/src/components/packing/PackingPage.tsx
index 4df8f321..6112fa74 100644
--- a/src/components/packing/PackingPage.tsx
+++ b/src/components/packing/PackingPage.tsx
@@ -69,7 +69,7 @@ function PackingCheckbox({item,context,detail = false}: {item:PackingItem;contex
  * 다른 항목을 저장하는 동안(status writing)은 제출만 막고 버튼 모양은 그대로 둔다(체크할 때마다 깜빡이지 않게).
  * 동기화 오류처럼 저장할 수 없는 상태(ready·writing 밖)에서는 버튼을 비활성으로 보인다(옛 동작)
  */
-function NameDialog({editor,context,finalFocus,onClose}: {editor:Editor;context:Context;finalFocus:()=>HTMLElement|null;onClose:()=>void}) {
+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);
@@ -82,7 +82,14 @@ function NameDialog({editor,context,finalFocus,onClose}: {editor:Editor;context:
     onSubmit:async({value,formApi})=>{
       const coordinator=context.coordinator;
       if(!coordinator) return;
-      const command=editor.kind==="createPart" ? {type:"createPart" as const,name:value.name} : editor.kind==="renamePart" ? {type:"renamePart" as const,id:editor.id,name:value.name} : editor.kind==="createItem" ? {type:"createItem" as const,partId:editor.id,name:value.name} : {type:"renameItem" as const,id:editor.id,name:value.name};
+      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();
@@ -129,8 +136,9 @@ function DeleteDialog({context,onClose}: {context:Context;onClose:()=>void}) {
   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;
+  const deletionSubject=part ? `의 준비물 ${count}개와` : " 준비물과";
   return <ConfirmDialog destructive title={part ? "카테고리를 삭제할까요?" : "준비물을 삭제할까요?"}
-    description={`‘${confirmation.name}’${part ? `의 준비물 ${count}개와` : " 준비물과"}\n작성한 메모가 함께 삭제됩니다.`}
+    description={`‘${confirmation.name}’${deletionSubject}\n작성한 메모가 함께 삭제됩니다.`}
     confirmLabel="삭제" isPending={deleting} confirmDisabled={context.state.status!=="ready"} onConfirm={()=>void confirm()} onCancel={close}/>;
 }
 
@@ -185,7 +193,7 @@ function useMemoForm(item:PackingItem, context:Context, open:boolean, onComplete
   return {form,isSaving,blocked,cancel,save};
 }
 
-function MemoPanel({item,memo}: {item:PackingItem;memo:ReturnType<typeof useMemoForm>}) {
+function MemoPanel({item,memo}: Readonly<{item:PackingItem;memo:ReturnType<typeof useMemoForm>}>) {
   const {isMobileDevice}=useMobileView();
   const errorId=useId();
   const {form}=memo;
@@ -210,7 +218,7 @@ function MemoPanel({item,memo}: {item:PackingItem;memo:ReturnType<typeof useMemo
   </section>;
 }
 
-function DetailSections({item,memo}: {item:PackingItem;memo:ReturnType<typeof useMemoForm>}) {
+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}>
@@ -224,7 +232,7 @@ function DetailSections({item,memo}: {item:PackingItem;memo:ReturnType<typeof us
 }
 
 /** 체크·이름·수정/삭제 줄. 이름 요소(children)는 PC 패널은 h2, 모바일 시트는 시트 제목(DrawerTitle)이다 */
-function DetailHeader({item,context,onRename,onDelete,children}: {item:PackingItem;context:Context;onRename:()=>void;onDelete:()=>void;children:ReactNode}) {
+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}
@@ -239,7 +247,7 @@ type DetailProps = {item:PackingItem|null;context:Context;open:boolean;onClose:(
 type ItemDetailProps = Omit<DetailProps,"item"> & {item:PackingItem};
 
 /** PC: 목록 오른쪽 비모달 패널. 닫혀도 언마운트하지 않아 메모 초안이 남는다 */
-function DetailPanel({item,context,open,onClose,onRename,onDelete}: DetailProps) {
+function DetailPanel({item,context,open,onClose,onRename,onDelete}: Readonly<DetailProps>) {
   useEffect(()=>{
     if(!open) return;
     function handleEscape(event:KeyboardEvent) {
@@ -272,7 +280,7 @@ function DetailPanelBody({item,context,open,onClose,onRename,onDelete}: ItemDeta
  * 모바일 기기: 아래 시트(Drawer). 저장 중(status writing)에는 Esc·딤·X·스와이프로 닫히지 않는다.
  * 시트 내용은 닫히면 언마운트되므로 메모 폼은 시트 바깥(DetailSheetBody)이 들고 있다
  */
-function DetailSheet({item,context,open,onClose,onRename,onDelete}: DetailProps) {
+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>;
@@ -293,7 +301,7 @@ function DetailSheetBody({item,context,open,onClose,onRename,onDelete}: ItemDeta
 }
 
 /** 카테고리 메뉴. 항목에서 연 이름 대화상자는 닫힐 때 이 메뉴 버튼으로 포커스를 돌려준다(항목은 메뉴와 함께 사라진다) */
-function PartMenu({part,onEdit,onDelete}: {part:PackingPart;onEdit:(editor:Editor,returnFocus:HTMLElement|null)=>void;onDelete:()=>void}) {
+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}`}>
diff --git a/src/components/place/AddToBookmarkModal.tsx b/src/components/place/AddToBookmarkModal.tsx
index c1103518..a3637852 100644
--- a/src/components/place/AddToBookmarkModal.tsx
+++ b/src/components/place/AddToBookmarkModal.tsx
@@ -33,9 +33,15 @@ import {
 import { cn } from "@/lib/utils";
 import { useSessionStore } from "@/stores/session-store";
 
-// 포털 안 클릭·터치가 React 트리를 따라 부모(지도 상세 패널·시트 드래그, 검색 결과 카드)로 올라가지 않게 Root 바깥에서 끊는다.
-// 딤은 표면 밖이라 표면 props로는 못 막는다. 감싼 요소는 display: contents라 배치에 상자를 더하지 않는다
+// 포털 안 클릭·터치가 React 트리를 따라 부모(지도 상세 패널·시트 드래그, 검색 결과 카드)로 올라가지 않게 포털 표면과 배경에서 끊는다.
+// 딤은 표면 밖이므로 표면과 배경 각각에서 차단한다. 키보드는 Base UI에 그대로 전달한다
 const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+const pointerBoundary = {
+  onClick: stopPropagation,
+  onMouseDown: stopPropagation,
+  onPointerDown: stopPropagation,
+  onTouchStart: stopPropagation,
+};
 
 type Props = {
   googlePlaceId: string;
@@ -213,163 +219,155 @@ export function AddToBookmarkModal({
   }
 
   return (
-    <div
-      className="contents"
-      onClick={stopPropagation}
-      onMouseDown={stopPropagation}
-      onPointerDown={stopPropagation}
-      onTouchStart={stopPropagation}
+    <Dialog
+      open
+      closeDisabled={isAddingBookmarks}
+      // 열린 채 마운트되므로 닫기 요청(open=false)만 온다. 추가 중에는 Esc·딤·닫기를 막는다.
+      // 새 북마크 대화상자가 위에 열려 있으면 Esc는 위 대화상자만 닫는다(Base UI 중첩)
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
     >
-      <Dialog
-        open
-        closeDisabled={isAddingBookmarks}
-        // 열린 채 마운트되므로 닫기 요청(open=false)만 온다. 추가 중에는 Esc·딤·닫기를 막는다.
-        // 새 북마크 대화상자가 위에 열려 있으면 Esc는 위 대화상자만 닫는다(Base UI 중첩)
-        onOpenChange={(open) => {
-          if (!open) onClose();
-        }}
-      >
-        <DialogContent size="sm" showCloseButton={false} className="max-h-[min(85dvh,560px)]">
-          <DialogHeader>
-            <DialogTitle>북마크에 추가</DialogTitle>
-            <DialogDescription>북마크를 선택한 뒤 추가해 주세요.</DialogDescription>
-          </DialogHeader>
+      <DialogContent {...pointerBoundary} backdropProps={pointerBoundary} size="sm" showCloseButton={false} className="max-h-[min(85dvh,560px)]">
+        <DialogHeader>
+          <DialogTitle>북마크에 추가</DialogTitle>
+          <DialogDescription>북마크를 선택한 뒤 추가해 주세요.</DialogDescription>
+        </DialogHeader>
 
-          {/* 제목 줄·버튼은 고정하고 목록만 스크롤한다. 행 구분선·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}
-              onClick={openCreateFolderModal}
-              className={cn(
-                "flex w-full items-center gap-2.5 border-b border-gray-border px-5 py-3.5 text-left text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 transition-colors hover:bg-bubble-gray",
-                "disabled:opacity-55",
-              )}
-            >
-              <Plus className="size-4 shrink-0 stroke-[2.25]" aria-hidden />
-              <span className="break-keep">새 북마크 만들기</span>
-            </button>
-
-            {categoriesLoading && (
-              <div className="flex justify-center py-6">
-                <Spinner aria-label="북마크 불러오는 중" />
-              </div>
+        {/* 제목 줄·버튼은 고정하고 목록만 스크롤한다. 행 구분선·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}
+            onClick={openCreateFolderModal}
+            className={cn(
+              "flex w-full items-center gap-2.5 border-b border-gray-border px-5 py-3.5 text-left text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 transition-colors hover:bg-bubble-gray",
+              "disabled:opacity-55",
             )}
+          >
+            <Plus className="size-4 shrink-0 stroke-[2.25]" aria-hidden />
+            <span className="break-keep">새 북마크 만들기</span>
+          </button>
 
-            {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">
-                  {categoriesErr instanceof Error
-                    ? categoriesErr.message
-                    : "카테고리를 불러오지 못했습니다."}
-                </p>
-                <button
-                  type="button"
-                  onClick={() => refetch()}
-                  className="text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 underline"
-                >
-                  다시 시도
-                </button>
-              </div>
-            )}
+          {categoriesLoading && (
+            <div className="flex justify-center py-6">
+              <Spinner aria-label="북마크 불러오는 중" />
+            </div>
+          )}
 
-            {categories && categories.length === 0 && !categoriesLoading && (
-              <div className="px-5 py-8 text-center">
-                <p className="text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-dark-gray break-keep text-pretty">
-                  아직 북마크가 없어요.
-                </p>
-              </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">
+                {categoriesErr instanceof Error
+                  ? categoriesErr.message
+                  : "카테고리를 불러오지 못했습니다."}
+              </p>
+              <button
+                type="button"
+                onClick={() => refetch()}
+                className="text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 underline"
+              >
+                다시 시도
+              </button>
+            </div>
+          )}
+
+          {categories && categories.length === 0 && !categoriesLoading && (
+            <div className="px-5 py-8 text-center">
+              <p className="text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-dark-gray break-keep text-pretty">
+                아직 북마크가 없어요.
+              </p>
+            </div>
+          )}
 
-            {categories && categories.length > 0 && (
-              <div className="w-full bg-white">
-                <ul role="list" className="divide-y divide-gray-border">
-                  {categories.map((c) => {
-                    const sel = selectedIds.has(c.categoryId);
-                    return (
-                      <li key={c.categoryId}>
-                        <button
-                          type="button"
-                          disabled={isAddingBookmarks}
-                          aria-pressed={sel}
-                          aria-label={`${c.name} 북마크에서 ${sel ? "선택 해제" : "선택"}`}
-                          onClick={() => toggleCategory(c.categoryId)}
+          {categories && categories.length > 0 && (
+            <div className="w-full bg-white">
+              <ul role="list" className="divide-y divide-gray-border">
+                {categories.map((c) => {
+                  const sel = selectedIds.has(c.categoryId);
+                  return (
+                    <li key={c.categoryId}>
+                      <button
+                        type="button"
+                        disabled={isAddingBookmarks}
+                        aria-pressed={sel}
+                        aria-label={`${c.name} 북마크에서 ${sel ? "선택 해제" : "선택"}`}
+                        onClick={() => toggleCategory(c.categoryId)}
+                        className={cn(
+                          "flex w-full items-center gap-3 px-4 py-4 text-left transition-colors hover:bg-bubble-gray/60",
+                          "disabled:opacity-60",
+                        )}
+                      >
+                        <FolderRibbonIcon color={c.colorCode} />
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-body-l-emphasis mobile:text-body-m-emphasis font-medium text-neutral-900">
+                            {c.name}
+                          </p>
+                          <p className="mt-0.5 text-body-m-regular mobile:text-body-s-regular text-dark-gray">
+                            {c.placeCount ?? 0}개 장소
+                          </p>
+                        </div>
+                        <span
                           className={cn(
-                            "flex w-full items-center gap-3 px-4 py-4 text-left transition-colors hover:bg-bubble-gray/60",
-                            "disabled:opacity-60",
+                            "flex size-9 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                            sel
+                              ? "border-primary bg-primary text-white shadow-sm"
+                              : "border-gray-300 bg-white text-transparent",
                           )}
                         >
-                          <FolderRibbonIcon color={c.colorCode} />
-                          <div className="min-w-0 flex-1">
-                            <p className="truncate text-body-l-emphasis mobile:text-body-m-emphasis font-medium text-neutral-900">
-                              {c.name}
-                            </p>
-                            <p className="mt-0.5 text-body-m-regular mobile:text-body-s-regular text-dark-gray">
-                              {c.placeCount ?? 0}개 장소
-                            </p>
-                          </div>
-                          <span
-                            className={cn(
-                              "flex size-9 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
-                              sel
-                                ? "border-primary bg-primary text-white shadow-sm"
-                                : "border-gray-300 bg-white text-transparent",
-                            )}
-                          >
-                            <Check className="size-[1.125rem]" strokeWidth={3} />
-                          </span>
-                        </button>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>
-            )}
-
-            {submitFeedback && (
-              <p
-                className={cn(
-                  "border-t border-gray-border px-5 py-3 text-center text-body-m-regular mobile:text-body-s-regular",
-                  submitFeedback.variant === "error"
-                    ? "text-primary"
-                    : "text-dark-gray",
-                )}
-              >
-                {submitFeedback.message}
-              </p>
-            )}
-          </div>
-
-          <DialogFooter>
-            <DialogClose render={<Button variant="weak" />}>닫기</DialogClose>
-            <Button
-              loading={isAddingBookmarks}
-              loadingLabel="추가 중"
-              disabled={
-                selectedIds.size === 0 ||
-                (categories?.length === 0 && !categoriesLoading)
-              }
-              onClick={handleConfirmAdd}
-            >
-              추가
-            </Button>
-          </DialogFooter>
+                          <Check className="size-[1.125rem]" strokeWidth={3} />
+                        </span>
+                      </button>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
 
-          {createFolderModalOpen && (
-            <AddBookmarkModal
-              key={createFolderModalKey}
-              mode="create"
-              initialFolder={null}
-              busy={isCreatingCategory || isAddingBookmarks}
-              untitledNameHint={pickUniqueUntitledBookmarkCategoryName(
-                (categories ?? []).map((c) => c.name),
+          {submitFeedback && (
+            <p
+              className={cn(
+                "border-t border-gray-border px-5 py-3 text-center text-body-m-regular mobile:text-body-s-regular",
+                submitFeedback.variant === "error"
+                  ? "text-primary"
+                  : "text-dark-gray",
               )}
-              onClose={() => setCreateFolderModalOpen(false)}
-              onSave={handleCreateFolderSave}
-            />
+            >
+              {submitFeedback.message}
+            </p>
           )}
-        </DialogContent>
-      </Dialog>
-    </div>
+        </div>
+
+        <DialogFooter>
+          <DialogClose render={<Button variant="weak" />}>닫기</DialogClose>
+          <Button
+            loading={isAddingBookmarks}
+            loadingLabel="추가 중"
+            disabled={
+              selectedIds.size === 0 ||
+              (categories?.length === 0 && !categoriesLoading)
+            }
+            onClick={handleConfirmAdd}
+          >
+            추가
+          </Button>
+        </DialogFooter>
+
+        {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 61900f46..5f1a6a71 100644
--- a/src/components/place/AddToScheduleModal.tsx
+++ b/src/components/place/AddToScheduleModal.tsx
@@ -33,9 +33,15 @@ import {
 } from "@/lib/plan/tripRange";
 import { useSessionStore } from "@/stores/session-store";
 
-// 포털 안 클릭·터치가 React 트리를 따라 부모(지도 상세 패널·시트 드래그, 검색 결과 카드)로 올라가지 않게 Root 바깥에서 끊는다.
-// 딤은 표면 밖이라 표면 props로는 못 막는다. 감싼 요소는 display: contents라 배치에 상자를 더하지 않는다
+// 포털 안 클릭·터치가 React 트리를 따라 부모(지도 상세 패널·시트 드래그, 검색 결과 카드)로 올라가지 않게 포털 표면과 배경에서 끊는다.
+// 딤은 표면 밖이므로 표면과 배경 각각에서 차단한다. 키보드는 Base UI에 그대로 전달한다
 const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+const pointerBoundary = {
+  onClick: stopPropagation,
+  onMouseDown: stopPropagation,
+  onPointerDown: stopPropagation,
+  onTouchStart: stopPropagation,
+};
 
 type Props = {
   googlePlaceId: string;
@@ -98,92 +104,84 @@ export function AddToScheduleModal({
   }
 
   return (
-    <div
-      className="contents"
-      onClick={stopPropagation}
-      onMouseDown={stopPropagation}
-      onPointerDown={stopPropagation}
-      onTouchStart={stopPropagation}
+    <Dialog
+      open
+      closeDisabled={isAdding}
+      // 열린 채 마운트되므로 닫기 요청(open=false)만 온다. 추가 중에는 Esc·딤·닫기를 막는다
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
     >
-      <Dialog
-        open
-        closeDisabled={isAdding}
-        // 열린 채 마운트되므로 닫기 요청(open=false)만 온다. 추가 중에는 Esc·딤·닫기를 막는다
-        onOpenChange={(open) => {
-          if (!open) onClose();
-        }}
-      >
-        <DialogContent 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">
-                참여 중인 방이 없어요. 방에 입장한 뒤 다시 시도해 주세요.
-              </p>
-            ) : null}
-
-            {rid && schedulesLoading ? (
-              <div className="flex justify-center py-6">
-                <Spinner aria-label="일정 불러오는 중" />
-              </div>
-            ) : null}
-
-            {rid && schedulesError ? (
-              <div className="space-y-2 text-center">
-                <p className="text-body-m-regular mobile:text-body-s-regular text-primary">
-                  {schedulesErr instanceof Error
-                    ? schedulesErr.message
-                    : "일정을 불러오지 못했습니다."}
-                </p>
-                <button
-                  type="button"
-                  onClick={() => refetch()}
-                  className="text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 underline"
-                >
-                  다시 시도
-                </button>
-              </div>
-            ) : null}
-
-            {rid && !schedulesLoading && !schedulesError && sorted.length === 0 ? (
-              <p className="text-center text-body-m-regular mobile:text-body-s-regular text-dark-gray">
-                아직 생성된 일정이 없어요. 계획 탭에서 여행 기간을 적용한 뒤
-                다시 시도해 주세요.
+      <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">
+              참여 중인 방이 없어요. 방에 입장한 뒤 다시 시도해 주세요.
+            </p>
+          ) : null}
+
+          {rid && schedulesLoading ? (
+            <div className="flex justify-center py-6">
+              <Spinner aria-label="일정 불러오는 중" />
+            </div>
+          ) : null}
+
+          {rid && schedulesError ? (
+            <div className="space-y-2 text-center">
+              <p className="text-body-m-regular mobile:text-body-s-regular text-primary">
+                {schedulesErr instanceof Error
+                  ? schedulesErr.message
+                  : "일정을 불러오지 못했습니다."}
               </p>
-            ) : null}
-
-            {rid && sorted.length > 0 ? (
-              <ul className="space-y-2">
-                {sorted.map((s, i) => (
-                  <li key={s.scheduleId}>
-                    <button
-                      type="button"
-                      disabled={isAdding}
-                      onClick={() => void pickDay(s.scheduleId)}
-                      className="flex w-full flex-col gap-0.5 rounded-xl border border-gray-border px-3 py-3 text-left transition-colors hover:bg-bubble-gray disabled:opacity-60"
-                    >
-                      <span className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-neutral-900">
-                        {`${i + 1}일차`}
-                      </span>
-                      <span className="text-body-s-regular mobile:text-body-xs-regular text-dark-gray">
-                        {formatKoreanDateLabel(parseLocalYmd(s.date))}
-                      </span>
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            ) : null}
-          </DialogBody>
-
-          <DialogFooter>
-            <DialogClose render={<Button variant="weak" />}>닫기</DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
+              <button
+                type="button"
+                onClick={() => refetch()}
+                className="text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900 underline"
+              >
+                다시 시도
+              </button>
+            </div>
+          ) : null}
+
+          {rid && !schedulesLoading && !schedulesError && sorted.length === 0 ? (
+            <p className="text-center text-body-m-regular mobile:text-body-s-regular text-dark-gray">
+              아직 생성된 일정이 없어요. 계획 탭에서 여행 기간을 적용한 뒤
+              다시 시도해 주세요.
+            </p>
+          ) : null}
+
+          {rid && sorted.length > 0 ? (
+            <ul className="space-y-2">
+              {sorted.map((s, i) => (
+                <li key={s.scheduleId}>
+                  <button
+                    type="button"
+                    disabled={isAdding}
+                    onClick={() => void pickDay(s.scheduleId)}
+                    className="flex w-full flex-col gap-0.5 rounded-xl border border-gray-border px-3 py-3 text-left transition-colors hover:bg-bubble-gray disabled:opacity-60"
+                  >
+                    <span className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-neutral-900">
+                      {`${i + 1}일차`}
+                    </span>
+                    <span className="text-body-s-regular mobile:text-body-xs-regular text-dark-gray">
+                      {formatKoreanDateLabel(parseLocalYmd(s.date))}
+                    </span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </DialogBody>
+
+        <DialogFooter>
+          <DialogClose render={<Button variant="weak" />}>닫기</DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
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/rooms/RoomTripEditForm.tsx b/src/components/rooms/RoomTripEditForm.tsx
index bde4c744..87848168 100644
--- a/src/components/rooms/RoomTripEditForm.tsx
+++ b/src/components/rooms/RoomTripEditForm.tsx
@@ -38,7 +38,7 @@ export function RoomTripEditForm(props: Props) {
   return <RoomTripEditSession key={props.room.id} {...props} />;
 }
 
-function RoomTripEditSession({ room, update, readOnly = false, onSaved }: Props) {
+function RoomTripEditSession({ room, update, readOnly = false, onSaved }: Readonly<Props>) {
   /** 서버 최신 값 — 다른 멤버가 바꾸면 따라 바뀐다. 읽기 전용 표시와 저장 직전 기준(기간 축소 확인·이전 기간)에 쓴다 */
   // 저장은 화면에 보이는 폼 값 그대로 보낸다 — 열어 둔 사이 다른 멤버가 바꾼 값보다 마지막에 저장한 사람의 화면 값이 남는다
   const latest = toTripFormValues(room);
diff --git a/src/components/rooms/RoomTripSettingsSection.tsx b/src/components/rooms/RoomTripSettingsSection.tsx
index d322b444..235654cc 100644
--- a/src/components/rooms/RoomTripSettingsSection.tsx
+++ b/src/components/rooms/RoomTripSettingsSection.tsx
@@ -45,10 +45,10 @@ export function RoomTripDeleteButton() {
 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
diff --git a/src/components/settings/ConfirmDialog.tsx b/src/components/settings/ConfirmDialog.tsx
index 18fbdee9..b45ebc8b 100644
--- a/src/components/settings/ConfirmDialog.tsx
+++ b/src/components/settings/ConfirmDialog.tsx
@@ -30,10 +30,15 @@ type Props = {
   onCancel: () => void;
 };
 
-// 포털 안 이벤트가 React 트리를 따라 카드 클릭·드래그 호스트(PlanPlaceCard·BookmarkPlaceRow)로 올라가는 것만 막는다.
-// Base UI 포털도 React 부모로 이벤트를 올리고, 딤의 '배경 닫기' 버튼은 표면 밖이라 표면 props로는 못 막아 Root 바깥을 감싼다.
-// 감싼 요소는 display: contents라 호출부 배치에 상자를 더하지 않는다. 키 입력은 Base UI가 document에서 받으므로 막지 않는다
+// 포털 표면과 배경에서만 카드 클릭·드래그 호스트로 가는 포인터 이벤트를 끊는다.
+// 키 입력은 Base UI가 document에서도 받으므로 막지 않는다.
 const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+const pointerBoundary = {
+  onClick: stopPropagation,
+  onMouseDown: stopPropagation,
+  onPointerDown: stopPropagation,
+  onTouchStart: stopPropagation,
+};
 
 /**
  * 확인창(Figma Alert Dialog 5621:3002). 마운트되면 열린 상태라 호출부는 조건부로 렌더한다.
@@ -58,47 +63,39 @@ export function ConfirmDialog({
   onCancel,
 }: Readonly<Props>) {
   return (
-    <div
-      className="contents"
-      onClick={stopPropagation}
-      onMouseDown={stopPropagation}
-      onPointerDown={stopPropagation}
-      onTouchStart={stopPropagation}
+    <AlertDialog
+      open
+      closeDisabled={isPending}
+      // 열린 채 마운트되므로 닫기 요청(open=false)만 온다
+      onOpenChange={(open) => {
+        if (!open) onCancel();
+      }}
     >
-      <AlertDialog
-        open
-        closeDisabled={isPending}
-        // 열린 채 마운트되므로 닫기 요청(open=false)만 온다
-        onOpenChange={(open) => {
-          if (!open) onCancel();
-        }}
-      >
-        <AlertDialogContent 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>
-    </div>
+      <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/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 49e6bb93..766d55b2 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -62,9 +62,12 @@ function AlertDialogTrigger(props: Readonly<AlertDialogPrimitive.Trigger.Props>)
 // 딤은 Alert Dialog 페이지에 정의가 없어(figma-button-dialog 3-6) 지금 앱 값 black/40을 쓴다.
 // 대화상자 안에서 연 확인창(중첩)도 딤을 그린다(forceRender). 확인창은 그림자가 없어 흰 대화상자 위에서 경계가 사라지고, 지금 확인창도 대화상자 위에 딤을 한 겹 더 깐다.
 // iOS 26 Safari는 fixed 딤이 스크롤 뒤 화면을 다 덮지 못해 absolute로 둔다(Base UI 권장, body position: relative는 globals.css)
-function AlertDialogOverlay({ closeLabel }: Readonly<{ closeLabel?: string }>) {
+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"
@@ -88,6 +91,8 @@ type AlertDialogContentProps = Omit<AlertDialogPrimitive.Popup.Props, "className
   className?: string;
   /** 주면 딤을 눌러 닫힌다(지금 확인창 동작). 값은 딤 위 숨은 닫기 버튼의 이름이다(예: "{제목} 배경 닫기"). 없으면 Esc·취소로만 닫힌다 */
   backdropCloseLabel?: string;
+  /** 배경 닫기 버튼을 포함한 포털 이벤트의 전파 경계. 키보드는 차단하지 않는다 */
+  backdropProps?: BackdropEventProps;
   /** 확인창의 접근성 이름. AlertDialogTitle 없이(Figma Show Title=false) 쓸 때 꼭 준다. 제목이 있으면 Base UI가 aria-labelledby로 제목을 잇는다 */
   "aria-label"?: string;
 };
@@ -103,11 +108,11 @@ type AlertDialogContentProps = Omit<AlertDialogPrimitive.Popup.Props, "className
  * 첫 포커스는 취소 버튼이다(없으면 Base UI 기본: 첫 포커스 요소, 터치로 열면 표면). 세로 배치(주요 → 취소)에서도 Enter 한 번에 파괴적 동작이 실행되지 않게 한다.
  * 바꾸려면 initialFocus를 넘긴다.
  */
-function AlertDialogContent({ className, backdropCloseLabel, initialFocus, ...props }: Readonly<AlertDialogContentProps>) {
+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} />
+      <AlertDialogOverlay closeLabel={backdropCloseLabel} backdropProps={backdropProps} />
       <AlertDialogPrimitive.Popup
         ref={popupRef}
         data-slot="alert-dialog-content"
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
index dbeb04a3..83bf9b0a 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -82,6 +82,8 @@ 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로 고른다 */
@@ -100,6 +102,7 @@ function DialogContent({
   size,
   showCloseButton = true,
   closeLabel = "닫기",
+  backdropProps,
   ...props
 }: Readonly<DialogContentProps>) {
   return (
@@ -108,6 +111,7 @@ function DialogContent({
           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"