From 277cb31df4487c57dbecb7fedd50ae57e8a43b97 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 15:04:12 +0900
Subject: [PATCH 01/93] =?UTF-8?q?chore(ui):=20shadcn=20base-nova=20?=
 =?UTF-8?q?=EC=84=A4=EC=B9=98=EC=99=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EB=B0=9B=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- @base-ui/react, class-variance-authority 설치
- components.json 작성(style base-nova, init 없이 globals.css 유지)
- shadcn add로 sonner·spinner·alert·skeleton·badge·avatar·toggle·field·input·textarea·checkbox·switch·radio-group 받기(label·separator는 field가 함께 받음)
- 받은 코드는 그대로 두고 적용할 때 디자인 시스템에 맞춰 고친다. add가 함께 설치한 cn·next-themes도 그때 정리한다

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 components.json                   |  21 +++
 package-lock.json                 | 157 ++++++++++++++++++++
 package.json                      |   4 +
 src/components/ui/alert.tsx       |  75 ++++++++++
 src/components/ui/avatar.tsx      | 108 ++++++++++++++
 src/components/ui/badge.tsx       |  51 +++++++
 src/components/ui/checkbox.tsx    |  28 ++++
 src/components/ui/field.tsx       | 238 ++++++++++++++++++++++++++++++
 src/components/ui/input.tsx       |  19 +++
 src/components/ui/label.tsx       |  19 +++
 src/components/ui/radio-group.tsx |  37 +++++
 src/components/ui/separator.tsx   |  24 +++
 src/components/ui/skeleton.tsx    |  13 ++
 src/components/ui/sonner.tsx      |  49 ++++++
 src/components/ui/spinner.tsx     |  10 ++
 src/components/ui/switch.tsx      |  31 ++++
 src/components/ui/textarea.tsx    |  17 +++
 src/components/ui/toggle.tsx      |  44 ++++++
 18 files changed, 945 insertions(+)
 create mode 100644 components.json
 create mode 100644 src/components/ui/alert.tsx
 create mode 100644 src/components/ui/avatar.tsx
 create mode 100644 src/components/ui/badge.tsx
 create mode 100644 src/components/ui/checkbox.tsx
 create mode 100644 src/components/ui/field.tsx
 create mode 100644 src/components/ui/input.tsx
 create mode 100644 src/components/ui/label.tsx
 create mode 100644 src/components/ui/radio-group.tsx
 create mode 100644 src/components/ui/separator.tsx
 create mode 100644 src/components/ui/skeleton.tsx
 create mode 100644 src/components/ui/sonner.tsx
 create mode 100644 src/components/ui/spinner.tsx
 create mode 100644 src/components/ui/switch.tsx
 create mode 100644 src/components/ui/textarea.tsx
 create mode 100644 src/components/ui/toggle.tsx

diff --git a/components.json b/components.json
new file mode 100644
index 00000000..f5b65cba
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/package-lock.json b/package-lock.json
index 675fe989..8066fc9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,16 +9,20 @@
       "version": "0.1.0",
       "dependencies": {
         "@amplitude/unified": "^1.1.28",
+        "@base-ui/react": "^1.9.0",
         "@ncdai/react-wheel-picker": "^1.2.3",
         "@next/third-parties": "^16.2.1",
         "@stomp/stompjs": "^7.3.0",
         "@tanstack/react-query": "^5.95.2",
         "@tanstack/react-query-devtools": "^5.95.2",
         "@vis.gl/react-google-maps": "^1.8.2",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cn": "^0.5.0",
         "framer-motion": "^12.38.0",
         "lucide-react": "^1.7.0",
         "next": "16.2.1",
+        "next-themes": "^0.4.6",
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "react-markdown": "^10.1.0",
@@ -2166,6 +2170,12 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-8.0.8.tgz",
+      "integrity": "sha512-dEu8nGlRqjsJsvviUUoSMfcRHpwomCiRlXsc2mPfJ79+ffTpDm+JtfUtTMzUrqCApHQnCsVPD3gT1ZT8RgBRCQ==",
+      "license": "MIT"
+    },
     "node_modules/@babel/template": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
@@ -2214,6 +2224,66 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@base-ui/react": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.9.0.tgz",
+      "integrity": "sha512-S8CSYosASBKtpL8SWUfS78rFElfLijiCgA7oHOK22jCJ95FULsYyKwBNFOgudt0RA+/7yNc7F81bOvQnRgbBiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7 || ^8.0.0",
+        "@base-ui/utils": "0.5.0",
+        "@floating-ui/react-dom": "^2.1.9",
+        "@floating-ui/utils": "^0.2.12",
+        "use-sync-external-store": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@date-fns/tz": "^1.2.0",
+        "@types/react": "^17 || ^18 || ^19",
+        "date-fns": "^4.0.0",
+        "react": "^17 || ^18 || ^19",
+        "react-dom": "^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@date-fns/tz": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@base-ui/utils": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.5.0.tgz",
+      "integrity": "sha512-dYGGcEttjkYiMoa5nHm8vLaJ2UcuTWxo3BFAwOYXeRg/q7UVVvA6cacEIXEs3FgBfK1CGtW1ptElqs7wsx+t9A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7 || ^8.0.0",
+        "@floating-ui/utils": "^0.2.12",
+        "reselect": "^5.3.0",
+        "use-sync-external-store": "^1.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17 || ^18 || ^19",
+        "react": "^17 || ^18 || ^19",
+        "react-dom": "^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@bramus/specificity": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
@@ -2562,6 +2632,44 @@
         }
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.9.tgz",
+      "integrity": "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.8.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+      "license": "MIT"
+    },
     "node_modules/@googlemaps/js-api-loader": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-2.0.2.tgz",
@@ -6001,6 +6109,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -6016,6 +6136,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/cn": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cn/-/cn-0.5.0.tgz",
+      "integrity": "sha512-JGEixZEpfFXm1P5uXwvEobOFLlHwIWi5v4tjd1ZwfiYmcEilkuD2l+054rvJcYCR1B+uVThHeUbgmNz1FwuxuA==",
+      "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",
@@ -10044,6 +10176,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/@img/sharp-darwin-arm64": {
       "version": "0.34.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
@@ -11359,6 +11501,12 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.3.0.tgz",
+      "integrity": "sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -12833,6 +12981,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz",
+      "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
diff --git a/package.json b/package.json
index 9432c968..c396c17d 100644
--- a/package.json
+++ b/package.json
@@ -11,16 +11,20 @@
   },
   "dependencies": {
     "@amplitude/unified": "^1.1.28",
+    "@base-ui/react": "^1.9.0",
     "@ncdai/react-wheel-picker": "^1.2.3",
     "@next/third-parties": "^16.2.1",
     "@stomp/stompjs": "^7.3.0",
     "@tanstack/react-query": "^5.95.2",
     "@tanstack/react-query-devtools": "^5.95.2",
     "@vis.gl/react-google-maps": "^1.8.2",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cn": "^0.5.0",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.7.0",
     "next": "16.2.1",
+    "next-themes": "^0.4.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-markdown": "^10.1.0",
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
new file mode 100644
index 00000000..17ba728c
--- /dev/null
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,75 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..3afe8a93
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+import { cn } from "cn"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 00000000..6bc28c30
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,51 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..e1a35742
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+import { cn } from "cn"
+import { CheckIcon } from "lucide-react"
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 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 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/src/components/ui/field.tsx b/src/components/ui/field.tsx
new file mode 100644
index 00000000..8ae7f291
--- /dev/null
+++ b/src/components/ui/field.tsx
@@ -0,0 +1,238 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 00000000..7c4ab5ab
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+import { cn } from "cn"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 00000000..ddfd2e16
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
new file mode 100644
index 00000000..8989cb5e
--- /dev/null
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import { Radio as RadioPrimitive } from "@base-ui/react/radio"
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+import { cn } from "cn"
+
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return (
+    <RadioGroupPrimitive
+      data-slot="radio-group"
+      className={cn("grid w-full gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 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 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4 items-center justify-center"
+      >
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 00000000..d69c1342
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+import { cn } from "cn"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..b7f61b3a
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "cn"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 00000000..9280ee52
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
new file mode 100644
index 00000000..4b753d23
--- /dev/null
+++ b/src/components/ui/spinner.tsx
@@ -0,0 +1,10 @@
+import { cn } from "cn"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+  )
+}
+
+export { Spinner }
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 00000000..cf814744
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+import { cn } from "cn"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..5141de79
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,17 @@
+import * as React from "react"
+import { cn } from "cn"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
new file mode 100644
index 00000000..f38073f1
--- /dev/null
+++ b/src/components/ui/toggle.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default:
+          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] 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 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

From 0e91fd68b92c465c208281bf2e57d17fef9ca81f Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 15:10:31 +0900
Subject: [PATCH 02/93] =?UTF-8?q?docs(conventions):=20shadcn=20=EC=9B=90?=
 =?UTF-8?q?=EC=B9=99=EC=9D=84=20Base=20UI=C2=B7cva=20=EA=B8=B0=EC=A4=80?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 원칙 1-1: Radix 대신 Base UI(base-nova), init 없이 add로만 받기, cn import·dark: 정리, asChild 대신 render
- 원칙 3-6·안티패턴 17: 변형은 클래스 맵 대신 cva로 모으기
- Design.md 1-3·3-3: 설치 전 문구 정리

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

diff --git a/Design.md b/Design.md
index 5bc7bfc8..d2d1ed67 100644
--- a/Design.md
+++ b/Design.md
@@ -17,9 +17,9 @@
 예를들어서 피그마 페이지에 폰트가 17px이고 시멘틱 토큰과 css변수가 없다면 임의값을 사용한다.
 
 ### 1-3. 컴포넌트
-목표는 shadcn이다. 아직 설치 전이라 기존 공용 컴포넌트와 병행하고, 무엇을 쓸지는 [핵심 원칙 1-1](docs/code-conventions/principles.md)을 따른다.
+목표는 shadcn(Base UI)이다. 옮기는 동안 기존 공용 컴포넌트와 병행하고, 무엇을 쓸지는 [핵심 원칙 1-1](docs/code-conventions/principles.md)을 따른다.
 - 공용: `src/components/<도메인>/`(`layout`, `place`, `map`, `settings` …)
-- shadcn: 설치 후 `src/components/ui/`
+- shadcn: `src/components/ui/`
 - 특정 페이지 전용: `src/app/**/_components/`
 
 ### 1-4. Figma 디자인 시스템
@@ -111,7 +111,7 @@ import { MapPinIcon } from "@/assets/icons";
 
 ### 3-3. 이벤트 피드백
 - 사용자 액션에는 결과 피드백이 있어야 한다
-- alert는 toast, confirm은 `ConfirmDialog`를 쓰고 요구조건에 맞춘다(shadcn 설치 후 기준은 [핵심 원칙 1-1](docs/code-conventions/principles.md))
+- alert는 toast, confirm은 `ConfirmDialog`를 쓰고 요구조건에 맞춘다(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 5206acc2..9494e55e 100644
--- a/docs/code-conventions/anti-patterns.md
+++ b/docs/code-conventions/anti-patterns.md
@@ -87,7 +87,7 @@
 
 ### 17. 토큰 우회
 - 신호: 토큰에 있는 값을 `text-[16px] leading-6`·`rounded-[8px]`·`#333`으로 쓴다. `bg-gray-800`·`shadow-md`(Tailwind 기본값), `dark-gray`(레거시 별칭), `text-body-s`(없는 토큰 이름), 타이포 토큰에 붙인 `font-semibold`, 템플릿 리터럴 className, 조립한 클래스 이름(`` `bg-${tone}` ``)
-- ✓ `text-body-m-regular`, `rounded-md`, `text-text`, 클래스는 `cn("…", TONE_CLASS[tone], className)`(원칙 3-6).
+- ✓ `text-body-m-regular`, `rounded-md`, `text-text`, 변형은 cva로 두고 `cn(tagVariants({ tone }), className)`(원칙 3-6).
 
 ### 18. div 버튼과 지운 포커스
 - 신호: `<div onClick>`, 단순 이동을 `router.push` 버튼으로 만든다. 아이콘 버튼에 `aria-label`이 없다. placeholder만 있는 입력, `outline-none`으로 지운 포커스 표시
diff --git a/docs/code-conventions/principles.md b/docs/code-conventions/principles.md
index aebd03fe..75dc392e 100644
--- a/docs/code-conventions/principles.md
+++ b/docs/code-conventions/principles.md
@@ -15,22 +15,23 @@
 
 ### 1-1. 부품은 한 번 만들고 조립한다 (Headless UI)
 
-목표는 동작(포커스 가두기·키보드·aria·포털)은 shadcn(Radix) 프리미티브가, 모양은 디자인 시스템 토큰이 맡는 것이다. 둘을 합친 부품을 `src/components/ui/`에 한 번 두고 화면은 조립만 한다. shadcn은 아직 설치 전이라, 옮기는 동안 기존 공용 부품과 병행한다.
+목표는 동작(포커스 가두기·키보드·aria·포털)은 shadcn(Base UI) 프리미티브가, 모양은 디자인 시스템 토큰이 맡는 것이다. 둘을 합친 부품을 `src/components/ui/`에 한 번 두고 화면은 조립만 한다. shadcn은 `base-nova` 스타일(`components.json`)로 받고, 옮기는 동안 기존 공용 부품과 병행한다.
 
 | 상황 | 할 일 |
 | :-- | :-- |
 | 맞는 공용 부품이 있다(`src/components/<도메인>/`의 `ConfirmDialog`·`SettingsDialog`·`MobileBottomSheet`·`LoadingIndicator`·`SettingsActionButton` 등) | 그대로 쓴다. 같은 역할의 shadcn 부품이 생기면 새로 쓰는 곳만 그쪽을 쓰고 기존 사용처는 둔다 |
-| 맞는 공용 부품이 없는 동작 부품(드롭다운·팝오버·탭·셀렉트)이 필요하다 | shadcn으로 만든다. 설치 전이면 만들기 전에 도입할지 묻는다. 미루면 공용 셸에서 동작 처리(portal·포커스 가두기·Escape·aria)만 가져오고, 클래스·토큰·아이콘은 3-6과 Design.md를 따른다 |
+| 맞는 공용 부품이 없는 동작 부품(드롭다운·팝오버·탭·셀렉트)이 필요하다 | shadcn으로 만든다. `src/components/ui/`에 아직 없는 부품이면 받기 전에 묻는다(새 파일·의존성이 생긴다). 미루면 공용 셸에서 동작 처리(portal·포커스 가두기·Escape·aria)만 가져오고, 클래스·토큰·아이콘은 3-6과 Design.md를 따른다 |
 | 동작 없는 표시 부품이 필요하다 | Tailwind로 만든다 |
 | 기존 공용 부품이나 그 사용처를 shadcn으로 바꾼다 | 기능·버그 작업에 섞지 않고 따로 한다 |
 
-- 변형은 `variant`·`size` 같은 유니온 prop으로 받고, 값은 Figma 컴포넌트 속성 값에 맞춘다.
+- 변형은 `variant`·`size` 같은 유니온 prop으로 받고, 값은 Figma 컴포넌트 속성 값에 맞춘다. 변형별 클래스는 cva로 정의한다(3-6).
 - 화면은 부품의 색·글자를 덮지 않는다. 바깥에서 주는 `className`은 배치(폭·정렬·위치)에만 쓴다.
 - 공용 Button은 사이즈 기획이 끝나지 않아 보류 중이다. 범용 Button 부품을 새로 만들지 않는다.
 - shadcn 코드를 받으면 디자인 시스템에 맞춘다.
   - 색·그림자·포커스 클래스(`secondary`·`*-foreground`·`muted`·`accent`·`input`·`ring`·`shadow-*`)는 시맨틱 토큰으로 바꾼다. 이름이 같아도 뜻이 다르고(`secondary`는 라임), 없는 이름은 CSS가 생기지 않는다.
-  - 설치 때 shadcn이 `globals.css`에 넣는 색 변수(`:root`·`@theme inline`)는 받지 않는다. 기존 `primary`·`border`·`background` 토큰을 앱 전체에서 덮는다.
-  - 아이콘은 `lucide-react` 대신 `@/assets/icons`, `cn`은 `@/lib/utils`의 것을 쓴다.
+  - `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`)에 맞추고, 그 안에서 여는 팝오버·셀렉트는 셸보다 위에 둔다.
 
 ```tsx
@@ -40,13 +41,15 @@
 // ✓ 지금: 공용 셸을 쓴다(포커스 가두기·ESC·aria 포함)
 {isInviteOpen && <SettingsDialog title="초대" onClose={closeInvite}>…</SettingsDialog>}
 
-// ✓ shadcn 설치 후: 동작은 shadcn, 모양은 토큰을 입힌 ui 부품
+// ✓ shadcn으로 옮긴 뒤: 동작은 Base UI, 모양은 토큰을 입힌 ui 부품
 <Dialog>
-  <DialogTrigger asChild><button type="button" className="…">초대</button></DialogTrigger>
+  <DialogTrigger className="…">초대</DialogTrigger>
   <DialogContent>…</DialogContent>
 </Dialog>
 ```
 
+- Base UI 부품은 기본 요소(Trigger는 `<button type="button">`)를 그린다. 다른 요소로 그려야 하면 `asChild` 대신 `render` prop을 쓴다.
+
 ### 1-2. 로직은 화면 훅, 그리기는 컴포넌트 (Custom Hook · Container / Presentational)
 
 로직과 그리기를 나눈다. 컴포넌트를 열면 무엇을 그리는지만, 화면 훅을 열면 무엇을 하는지만 보이게 해서 한쪽을 바꿀 때 다른 쪽을 건드리지 않게 한다.
@@ -534,7 +537,7 @@ z-index는 같은 스태킹 컨텍스트 안에서만 비교된다. 그래서 
 - 타이포는 토큰 하나로 쓴다. display·heading·title은 `text-<역할>-<크기>`(`text-title-m`), body·label·caption은 굵기까지 붙인다(`text-body-s-regular`). `text-body-s`처럼 없는 이름은 CSS가 생기지 않는다.
 - 타이포 토큰에 `font-*`·`leading-*`·`tracking-*`·`/N`을 덧붙이지 않는다(토큰 값을 덮거나 굵기·자간이 빠진다). 맞는 토큰이 없으면 Figma 값대로 크기·줄 높이·굵기를 함께 임의값으로 쓰고(`text-[17px]/[24px] font-semibold`) 근거 주석을 단다(Design.md 1-2).
 - radius는 재정의된 토큰을 쓴다(`rounded-md` = 8px, Tailwind 기본과 다르다). 그림자 토큰은 아직 없다. `shadow-sm` 같은 Tailwind 기본값 대신 Figma 값을 임의값과 근거 주석으로 쓴다. 같은 임의값이 반복되면 토큰 추가를 요청한다.
-- 클래스는 `cn()`으로만 합친다. 템플릿 리터럴은 겹친 클래스(`px-2`와 바깥 `px-4`)를 정리하지 못하고, 조립한 이름(`` `bg-${tone}` ``)은 Tailwind가 소스에서 찾지 못한다. 변형은 `as const` 클래스 맵에 모은다.
+- 클래스는 `cn()`으로만 합친다. 템플릿 리터럴은 겹친 클래스(`px-2`와 바깥 `px-4`)를 정리하지 못하고, 조립한 이름(`` `bg-${tone}` ``)은 Tailwind가 소스에서 찾지 못한다. 변형은 cva(`class-variance-authority`)로 모은다.
 - 상태 스타일은 aria 속성을 variant로 읽는다(`aria-expanded:bg-fill`, `aria-current="page"`는 `aria-[current=page]:`). aria가 없는 상태만 `data-*`로 둔다. 여러 하위가 함께 따르는 루트 상태(채팅 최소화·밀도)는 하위마다 prop으로 내리지 않고, 루트의 `data-minimized`를 하위가 `group-data-minimized/chat:`처럼 읽는다.
 - 전역 요소 스타일은 `@layer base`에 둔다. 레이어 밖 CSS는 모든 유틸리티를 이긴다.
 
@@ -542,12 +545,17 @@ z-index는 같은 스태킹 컨텍스트 안에서만 비교된다. 그래서 
 // ✗ 문자열 결합과 조립한 클래스 이름
 <span className={`rounded-full px-2 ${className} bg-${tone}`}>{label}</span>
 
-// ✓ 완성된 클래스 맵과 cn
-const TONE_CLASS = {
-  neutral: "bg-fill text-text",
-  brand: "bg-primary-subtle text-primary",
-} as const;
-<span className={cn("rounded-full px-2", TONE_CLASS[tone], className)}>{label}</span>
+// ✓ 변형은 cva, 합치기는 cn
+const tagVariants = cva("rounded-full px-2", {
+  variants: {
+    tone: {
+      neutral: "bg-fill text-text",
+      brand: "bg-primary-subtle text-primary",
+    },
+  },
+  defaultVariants: { tone: "neutral" },
+});
+<span className={cn(tagVariants({ tone }), className)}>{label}</span>
 ```
 
 ### 3-7. 시맨틱 마크업과 접근성 (Semantic HTML)
@@ -575,7 +583,7 @@ const TONE_CLASS = {
 | 원칙 | 출처 |
 | :-- | :-- |
 | 0 | React [Thinking in React](https://react.dev/learn/thinking-in-react)·[Keeping Components Pure](https://react.dev/learn/keeping-components-pure), Josh Comeau [Understanding Layout Algorithms](https://www.joshwcomeau.com/css/understanding-layout-algorithms/) |
-| 1-1 | [shadcn/ui](https://ui.shadcn.com/docs) |
+| 1-1 | [shadcn/ui](https://ui.shadcn.com/docs), [Base UI](https://base-ui.com/react/overview/quick-start) |
 | 1-3 | React [Thinking in React](https://react.dev/learn/thinking-in-react), Matt Pocock [codebase-design](https://github.com/mattpocock/skills)(삭제 테스트) |
 | 1-4 | Vercel [composition-patterns](https://github.com/vercel-labs/agent-skills/tree/main/skills/composition-patterns) `architecture-avoid-boolean-props`·`patterns-explicit-variants`·`patterns-children-over-render-props` |
 | 2-1 | React [Choosing the State Structure](https://react.dev/learn/choosing-the-state-structure), Vercel [react-best-practices](https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices) `rerender-derived-state-no-effect` |
@@ -590,4 +598,4 @@ const TONE_CLASS = {
 | 3-2 | Josh Comeau [The Height Enigma](https://www.joshwcomeau.com/css/height-enigma/), [Defensive CSS](https://defensivecss.dev/), web.dev [Viewport units](https://web.dev/blog/viewport-units) |
 | 3-3 | Josh Comeau [The Surprising Truth About Pixels and Accessibility](https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/) |
 | 3-5 | Josh Comeau [What The Heck, z-index??](https://www.joshwcomeau.com/css/stacking-contexts/) |
-| 3-6 | Tailwind [Detecting classes in source files](https://tailwindcss.com/docs/detecting-classes-in-source-files) |
+| 3-6 | Tailwind [Detecting classes in source files](https://tailwindcss.com/docs/detecting-classes-in-source-files), [cva](https://cva.style/docs) |

From 9d0f471fa0a8a05e8814775cfc42da45002d18fd Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 15:53:54 +0900
Subject: [PATCH 03/93] =?UTF-8?q?feat(icons):=20shadcn=20=EB=B6=80?=
 =?UTF-8?q?=ED=92=88=EC=97=90=20=EC=93=B8=20Figma=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=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

- Toast: circle-check(Positive)·circle-ban(Negative)
- Spinner: progress
- Checkbox·Radio: checkbox·checkbox-activated·radio-button(Figma 원본 선 2px·1.8px 유지)
- Avatar 대체: user
- 지도 카테고리 Chip: travel-restaurant·hotel·themepark·museum·train
- Design.md 2-1대로 width·height 삭제, currentColor, 원본에 있던 24×24 clipPath 제거

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/assets/icons/checkbox-activated.svg |  4 ++++
 src/assets/icons/checkbox.svg           |  3 +++
 src/assets/icons/circle-ban.svg         |  4 ++++
 src/assets/icons/circle-check.svg       |  4 ++++
 src/assets/icons/index.tsx              | 24 ++++++++++++++++++++++++
 src/assets/icons/progress.svg           |  7 +++++++
 src/assets/icons/radio-button.svg       |  3 +++
 src/assets/icons/travel-hotel.svg       |  5 +++++
 src/assets/icons/travel-museum.svg      | 10 ++++++++++
 src/assets/icons/travel-restaurant.svg  |  5 +++++
 src/assets/icons/travel-themepark.svg   |  6 ++++++
 src/assets/icons/travel-train.svg       |  9 +++++++++
 src/assets/icons/user.svg               |  4 ++++
 13 files changed, 88 insertions(+)
 create mode 100644 src/assets/icons/checkbox-activated.svg
 create mode 100644 src/assets/icons/checkbox.svg
 create mode 100644 src/assets/icons/circle-ban.svg
 create mode 100644 src/assets/icons/circle-check.svg
 create mode 100644 src/assets/icons/progress.svg
 create mode 100644 src/assets/icons/radio-button.svg
 create mode 100644 src/assets/icons/travel-hotel.svg
 create mode 100644 src/assets/icons/travel-museum.svg
 create mode 100644 src/assets/icons/travel-restaurant.svg
 create mode 100644 src/assets/icons/travel-themepark.svg
 create mode 100644 src/assets/icons/travel-train.svg
 create mode 100644 src/assets/icons/user.svg

diff --git a/src/assets/icons/checkbox-activated.svg b/src/assets/icons/checkbox-activated.svg
new file mode 100644
index 00000000..b25d08a3
--- /dev/null
+++ b/src/assets/icons/checkbox-activated.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/checkbox.svg b/src/assets/icons/checkbox.svg
new file mode 100644
index 00000000..8ba21e2c
--- /dev/null
+++ b/src/assets/icons/checkbox.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/circle-ban.svg b/src/assets/icons/circle-ban.svg
new file mode 100644
index 00000000..c7f063da
--- /dev/null
+++ b/src/assets/icons/circle-ban.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 10.8181 3.23279 9.64778 3.68508 8.55585C4.13738 7.46392 4.80031 6.47177 5.63604 5.63604C6.47177 4.80031 7.46392 4.13738 8.55585 3.68508C9.64778 3.23279 10.8181 3 12 3C13.1819 3 14.3522 3.23279 15.4442 3.68508C16.5361 4.13738 17.5282 4.80031 18.364 5.63604C19.1997 6.47177 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5.69995 5.70001L18.3 18.3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/circle-check.svg b/src/assets/icons/circle-check.svg
new file mode 100644
index 00000000..be0dffff
--- /dev/null
+++ b/src/assets/icons/circle-check.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 10.8181 3.23279 9.64778 3.68508 8.55585C4.13738 7.46392 4.80031 6.47177 5.63604 5.63604C6.47177 4.80031 7.46392 4.13738 8.55585 3.68508C9.64778 3.23279 10.8181 3 12 3C13.1819 3 14.3522 3.23279 15.4442 3.68508C16.5361 4.13738 17.5282 4.80031 18.364 5.63604C19.1997 6.47177 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/index.tsx b/src/assets/icons/index.tsx
index c46c9cab..fb2e8e1b 100644
--- a/src/assets/icons/index.tsx
+++ b/src/assets/icons/index.tsx
@@ -2,10 +2,14 @@ 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 CheckboxActivatedSvg from "@/assets/icons/checkbox-activated.svg";
+import CheckboxSvg from "@/assets/icons/checkbox.svg";
 import ChevronDownSvg from "@/assets/icons/chevron-down.svg";
 import ChevronLeftSvg from "@/assets/icons/chevron-left.svg";
 import ChevronRightSvg from "@/assets/icons/chevron-right.svg";
+import CircleBanSvg from "@/assets/icons/circle-ban.svg";
 import CircleCancelSvg from "@/assets/icons/circle-cancel.svg";
+import CircleCheckSvg from "@/assets/icons/circle-check.svg";
 import CloseSvg from "@/assets/icons/close.svg";
 import CoinSvg from "@/assets/icons/coin.svg";
 import CopySvg from "@/assets/icons/copy.svg";
@@ -19,6 +23,8 @@ import MenuDotHorizontalSvg from "@/assets/icons/menu-dot-horizontal.svg";
 import MenuDotVerticalSvg from "@/assets/icons/menu-dot-vertical.svg";
 import MenuHamburgerSvg from "@/assets/icons/menu-hamburger.svg";
 import PlusSvg from "@/assets/icons/plus.svg";
+import ProgressSvg from "@/assets/icons/progress.svg";
+import RadioButtonSvg from "@/assets/icons/radio-button.svg";
 import ReactionStarSvg from "@/assets/icons/reaction-star.svg";
 import RefreshSvg from "@/assets/icons/refresh.svg";
 import RouteSvg from "@/assets/icons/route.svg";
@@ -30,7 +36,13 @@ import SendSvg from "@/assets/icons/send.svg";
 import ShareSvg from "@/assets/icons/share.svg";
 import TimeClockSvg from "@/assets/icons/time-clock.svg";
 import TrashSvg from "@/assets/icons/trash.svg";
+import TravelHotelSvg from "@/assets/icons/travel-hotel.svg";
+import TravelMuseumSvg from "@/assets/icons/travel-museum.svg";
+import TravelRestaurantSvg from "@/assets/icons/travel-restaurant.svg";
+import TravelThemeparkSvg from "@/assets/icons/travel-themepark.svg";
+import TravelTrainSvg from "@/assets/icons/travel-train.svg";
 import UserEditSvg from "@/assets/icons/user-edit.svg";
+import UserSvg from "@/assets/icons/user.svg";
 import UserXSvg from "@/assets/icons/user-x.svg";
 import WriteAddSvg from "@/assets/icons/write-add.svg";
 import WriteSvg from "@/assets/icons/write.svg";
@@ -43,10 +55,14 @@ 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 CheckboxActivatedIcon = createIcon(CheckboxActivatedSvg, "CheckboxActivatedIcon");
+export const CheckboxIcon = createIcon(CheckboxSvg, "CheckboxIcon");
 export const ChevronDownIcon = createIcon(ChevronDownSvg, "ChevronDownIcon");
 export const ChevronLeftIcon = createIcon(ChevronLeftSvg, "ChevronLeftIcon");
 export const ChevronRightIcon = createIcon(ChevronRightSvg, "ChevronRightIcon");
+export const CircleBanIcon = createIcon(CircleBanSvg, "CircleBanIcon");
 export const CircleCancelIcon = createIcon(CircleCancelSvg, "CircleCancelIcon");
+export const CircleCheckIcon = createIcon(CircleCheckSvg, "CircleCheckIcon");
 export const CloseIcon = createIcon(CloseSvg, "CloseIcon");
 export const CoinIcon = createIcon(CoinSvg, "CoinIcon");
 export const CopyCheckIcon = createIcon(CopyCheckSvg, "CopyCheckIcon");
@@ -60,6 +76,8 @@ export const MenuDotHorizontalIcon = createIcon(MenuDotHorizontalSvg, "MenuDotHo
 export const MenuDotVerticalIcon = createIcon(MenuDotVerticalSvg, "MenuDotVerticalIcon");
 export const MenuHamburgerIcon = createIcon(MenuHamburgerSvg, "MenuHamburgerIcon");
 export const PlusIcon = createIcon(PlusSvg, "PlusIcon");
+export const ProgressIcon = createIcon(ProgressSvg, "ProgressIcon");
+export const RadioButtonIcon = createIcon(RadioButtonSvg, "RadioButtonIcon");
 export const ReactionStarIcon = createIcon(ReactionStarSvg, "ReactionStarIcon");
 export const RefreshIcon = createIcon(RefreshSvg, "RefreshIcon");
 // Figma DS에 없어 Tabler `route`(outline)를 받아 씀 — Design.md "Figma에 추가 요청할 아이콘" 참고
@@ -72,7 +90,13 @@ export const SendIcon = createIcon(SendSvg, "SendIcon");
 export const ShareIcon = createIcon(ShareSvg, "ShareIcon");
 export const TimeClockIcon = createIcon(TimeClockSvg, "TimeClockIcon");
 export const TrashIcon = createIcon(TrashSvg, "TrashIcon");
+export const TravelHotelIcon = createIcon(TravelHotelSvg, "TravelHotelIcon");
+export const TravelMuseumIcon = createIcon(TravelMuseumSvg, "TravelMuseumIcon");
+export const TravelRestaurantIcon = createIcon(TravelRestaurantSvg, "TravelRestaurantIcon");
+export const TravelThemeparkIcon = createIcon(TravelThemeparkSvg, "TravelThemeparkIcon");
+export const TravelTrainIcon = createIcon(TravelTrainSvg, "TravelTrainIcon");
 export const UserEditIcon = createIcon(UserEditSvg, "UserEditIcon");
+export const UserIcon = createIcon(UserSvg, "UserIcon");
 export const UserXIcon = createIcon(UserXSvg, "UserXIcon");
 export const WriteAddIcon = createIcon(WriteAddSvg, "WriteAddIcon");
 export const WriteIcon = createIcon(WriteSvg, "WriteIcon");
diff --git a/src/assets/icons/progress.svg b/src/assets/icons/progress.svg
new file mode 100644
index 00000000..d0972030
--- /dev/null
+++ b/src/assets/icons/progress.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M10 20.777C9.12963 20.5796 8.2937 20.2529 7.52002 19.808" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14 3.22302C15.9882 3.67709 17.7632 4.79271 19.0347 6.38723C20.3061 7.98174 20.9984 9.96067 20.9984 12C20.9984 14.0394 20.3061 16.0183 19.0347 17.6128C17.7632 19.2073 15.9882 20.323 14 20.777" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.57905 17.093C4.03356 16.3004 3.61925 15.4252 3.35205 14.501" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3.12402 10.5C3.28402 9.55002 3.59202 8.65002 4.02402 7.82502L4.19302 7.52002" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6.90698 4.57902C7.84264 3.93492 8.8923 3.47474 9.99998 3.22302" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/radio-button.svg b/src/assets/icons/radio-button.svg
new file mode 100644
index 00000000..292909f7
--- /dev/null
+++ b/src/assets/icons/radio-button.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 10.8181 3.23279 9.64778 3.68508 8.55585C4.13738 7.46392 4.80031 6.47177 5.63604 5.63604C6.47177 4.80031 7.46392 4.13738 8.55585 3.68508C9.64778 3.23279 10.8181 3 12 3C13.1819 3 14.3522 3.23279 15.4442 3.68508C16.5361 4.13738 17.5282 4.80031 18.364 5.63604C19.1997 6.47177 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/travel-hotel.svg b/src/assets/icons/travel-hotel.svg
new file mode 100644
index 00000000..1a720751
--- /dev/null
+++ b/src/assets/icons/travel-hotel.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M5.41421 11.5858C5.03914 11.2107 4.53043 11 4 11C3.46957 11 2.96086 11.2107 2.58579 11.5858C2.21071 11.9609 2 12.4696 2 13V18C2 18.2652 2.10536 18.5196 2.29289 18.7071C2.48043 18.8946 2.73478 19 3 19H21C21.2652 19 21.5196 18.8946 21.7071 18.7071C21.8946 18.5196 22 18.2652 22 18V13C22 12.4696 21.7893 11.9609 21.4142 11.5858C21.0391 11.2107 20.5304 11 20 11C19.4696 11 18.9609 11.2107 18.5858 11.5858C18.2107 11.9609 18 12.4696 18 13V14H6V13C6 12.4696 5.78929 11.9609 5.41421 11.5858Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4 11V8C4 7.20435 4.31607 6.44129 4.87868 5.87868C5.44129 5.31607 6.20435 5 7 5H17C17.7956 5 18.5587 5.31607 19.1213 5.87868C19.6839 6.44129 20 7.20435 20 8V11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 5V14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/travel-museum.svg b/src/assets/icons/travel-museum.svg
new file mode 100644
index 00000000..43da85eb
--- /dev/null
+++ b/src/assets/icons/travel-museum.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3 21H21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 10H21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 6L12 3L19 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4 10V21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20 10V21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 14V17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 14V17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16 14V17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/travel-restaurant.svg b/src/assets/icons/travel-restaurant.svg
new file mode 100644
index 00000000..897c0243
--- /dev/null
+++ b/src/assets/icons/travel-restaurant.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M7.25879 3.5V20.5M4.25879 3.5V8.86258C4.25879 9.25654 4.33639 9.64665 4.48715 10.0106C4.63791 10.3746 4.85889 10.7053 5.13747 10.9839C5.41604 11.2625 5.74676 11.4835 6.11074 11.6342C6.47472 11.785 6.86482 11.8626 7.25879 11.8626C7.65275 11.8626 8.04286 11.785 8.40684 11.6342C8.77082 11.4835 9.10153 11.2625 9.38011 10.9839C9.65869 10.7053 9.87966 10.3746 10.0304 10.0106C10.1812 9.64665 10.2588 9.25654 10.2588 8.86258V3.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14.6199 10.3284C14.0573 9.57828 13.7412 8.56087 13.7412 7.5C13.7412 6.43913 14.0573 5.42172 14.6199 4.67157C15.1825 3.92143 15.9456 3.5 16.7412 3.5C17.5369 3.5 18.2999 3.92143 18.8625 4.67157C19.4251 5.42172 19.7412 6.43913 19.7412 7.5C19.7412 8.56087 19.4251 9.57828 18.8625 10.3284C18.2999 11.0786 17.5369 11.5 16.7412 11.5C15.9456 11.5 15.1825 11.0786 14.6199 10.3284Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16.7412 11.5V20.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/travel-themepark.svg b/src/assets/icons/travel-themepark.svg
new file mode 100644
index 00000000..8d9d7f52
--- /dev/null
+++ b/src/assets/icons/travel-themepark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M3.5 17.5C9.167 22.167 14.833 22.167 20.5 17.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19 18.5L17 10L18 8L20 9L21.5 7.5L19 3C13.948 3.218 13.01 6.133 12 9H6C5.20435 9 4.44129 9.31607 3.87868 9.87868C3.31607 10.4413 3 11.2044 3 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 18.5L7 9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 20L10 15H14L16 20" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/travel-train.svg b/src/assets/icons/travel-train.svg
new file mode 100644
index 00000000..5941cd20
--- /dev/null
+++ b/src/assets/icons/travel-train.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M21 13C21 9.13 17.63 6 11 6H3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 15H19C19.5304 15 20.0391 14.7893 20.4142 14.4142C20.7893 14.0391 21 13.5304 21 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 6V11H20.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 11V15" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 11V6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M13 11V6.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 19H21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg
new file mode 100644
index 00000000..cc2d2ef9
--- /dev/null
+++ b/src/assets/icons/user.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M9.17157 9.82843C8.42143 9.07828 8 8.06087 8 7C8 5.93913 8.42143 4.92172 9.17157 4.17157C9.92172 3.42143 10.9391 3 12 3C13.0609 3 14.0783 3.42143 14.8284 4.17157C15.5786 4.92172 16 5.93913 16 7C16 8.06087 15.5786 9.07828 14.8284 9.82843C14.0783 10.5786 13.0609 11 12 11C10.9391 11 9.92172 10.5786 9.17157 9.82843Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6 21V19C6 17.9391 6.42143 16.9217 7.17157 16.1716C7.92172 15.4214 8.93913 15 10 15H14C15.0609 15 16.0783 15.4214 16.8284 16.1716C17.5786 16.9217 18 17.9391 18 19V21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From 209a00393ffe0db05182c9bee9b0fc038d41dd73 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:04:05 +0900
Subject: [PATCH 04/93] =?UTF-8?q?style(ui):=20Toast=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=20Toast?=
 =?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 Toast Base(5285:5064) 값으로 그림: 최소 높이 52, 여백 4·8·4·16, 간격 8, 모서리 8, border/default 1px, fill/elevation, 그림자 없음
- sonner 기본 CSS가 레이어 밖이라 unstyled + classNames로 토큰만 씀, 라이트 테마 고정
- 아이콘: Positive circle-check, Negative circle-ban(20px), 일반 안내는 아이콘 없음
- 닫기 44px·액션 XS Neutral Weak 모양, 접근성 라벨 한국어('알림', '닫기')
- next-themes·lucide·shadcn CSS 변수 제거, 화면은 위치·여백·시간만 넘기도록 Props 제한
- 쓰는 곳이 없어진 next-themes 의존성 삭제

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 package-lock.json            | 11 ------
 package.json                 |  1 -
 src/components/ui/sonner.tsx | 68 ++++++++++++++++++------------------
 3 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8066fc9c..7f775aea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,6 @@
         "framer-motion": "^12.38.0",
         "lucide-react": "^1.7.0",
         "next": "16.2.1",
-        "next-themes": "^0.4.6",
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "react-markdown": "^10.1.0",
@@ -10176,16 +10175,6 @@
         }
       }
     },
-    "node_modules/next-themes": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
-      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
-      }
-    },
     "node_modules/next/node_modules/@img/sharp-darwin-arm64": {
       "version": "0.34.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
diff --git a/package.json b/package.json
index c396c17d..6fef7fd7 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.7.0",
     "next": "16.2.1",
-    "next-themes": "^0.4.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-markdown": "^10.1.0",
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 9280ee52..42a563a2 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,49 +1,49 @@
-"use client"
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+import { CircleBanIcon, CircleCheckIcon, CloseIcon } from "@/assets/icons";
 
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+// 색·아이콘·글자는 이 부품이 정한다. 화면은 위치·여백·표시 시간 같은 배치·동작만 넘긴다
+type Props = Omit<ToasterProps, "theme" | "richColors" | "icons" | "toastOptions">;
 
+function Toaster(props: Readonly<Props>) {
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
+      // 다크 모드를 쓰지 않는다. sonner 다크 규칙은 레이어 밖 CSS라 unstyled에도 적용돼 라이트로 고정한다
+      theme="light"
+      containerAriaLabel="알림"
       icons={{
-        success: (
-          <CircleCheckIcon className="size-4" />
-        ),
-        info: (
-          <InfoIcon className="size-4" />
-        ),
-        warning: (
-          <TriangleAlertIcon className="size-4" />
-        ),
-        error: (
-          <OctagonXIcon className="size-4" />
-        ),
-        loading: (
-          <Loader2Icon className="size-4 animate-spin" />
-        ),
+        success: <CircleCheckIcon size={20} className="text-status-positive" />,
+        error: <CircleBanIcon size={20} className="text-status-negative" />,
+        // 일반 안내는 아이콘 없이 보인다. 비워 두면 sonner 기본 아이콘이 나와 null로 끈다.
+        // warning·loading은 쓰는 곳이 없어 정하지 않았다(쓰면 sonner 기본 아이콘·스피너가 나온다)
+        info: null,
+        close: <CloseIcon size={20} />,
       }}
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
-        } as React.CSSProperties
-      }
       toastOptions={{
+        // sonner 기본 CSS는 레이어 밖에 들어가 Tailwind 유틸리티를 이긴다. 끄고 Figma Toast Base(5285:5064)를 토큰으로 그린다
+        unstyled: true,
+        closeButtonAriaLabel: "닫기",
         classNames: {
-          toast: "cn-toast",
+          // unstyled가 함께 끄는 목록 폭(w-full)과 접힌 스택의 뒤 토스트 내용 숨김(*:opacity-0)을 되살린다.
+          // font-sans: sonner가 목록(ol)에 system-ui 글꼴을 레이어 밖에서 지정해 Pretendard가 상속되지 않는다
+          toast:
+            "flex min-h-13 w-full items-center gap-2 rounded-md border border-border bg-fill-elevate py-1 ps-4 pe-2 font-sans text-text data-[expanded=false]:data-[front=false]:*:opacity-0",
+          icon: "shrink-0",
+          // 설명(description)은 Figma에 슬롯이 없어 제목과의 간격은 지금 sonner 값(2px)을 따른다
+          content: "flex min-w-0 flex-1 flex-col gap-0.5",
+          title: "text-body-s-emphasis",
+          description: "text-body-s-regular text-text-subtle",
+          // Figma Button Neutral Weak·XS. 보이는 높이는 32px 그대로 두고 누르는 영역만 의사 요소로 44px까지 넓힌다
+          actionButton:
+            "relative inline-flex min-h-8 shrink-0 cursor-pointer items-center rounded-md bg-fill-elevate px-3.5 py-1.5 text-label-m-regular text-text-subtle underline after:absolute after:inset-x-0 after:-inset-y-1.5 hover:bg-fill active:bg-fill-strong focus-visible:outline-2 focus-visible:outline-primary",
+          // sonner는 닫기를 첫 자식으로 그린다. Figma 순서(문구 → 액션 → 닫기)로 옮겨 Tab 순서는 닫기가 먼저다
+          closeButton:
+            "order-last grid size-11 shrink-0 cursor-pointer place-items-center text-icon-subtle focus-visible:outline-2 focus-visible:outline-primary",
         },
       }}
       {...props}
     />
-  )
+  );
 }
 
-export { Toaster }
+export { Toaster };

From c0496b5232982ed91a5b0a82df285dbdb3cf6cf2 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:04:05 +0900
Subject: [PATCH 05/93] =?UTF-8?q?style(ui):=20Spinner=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=20progress=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=EC=9C=BC=EB=A1=9C=20=EA=B7=B8?=
 =?UTF-8?q?=EB=A6=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma progress 아이콘(252:30981)과 Button Loading 색: 기본 icon/default, 버튼 안 inverse
- 크기는 Figma 아이콘 크기(12·16·20·24·28·32, 기본 20)만 받고 svg에 px 클래스로도 줌(shadcn 부모 규칙에 덮이지 않게)
- 루트는 output(암묵 status), 기본 aria-label '불러오는 중', 동작 줄이기에서는 회전 멈춤
- lucide·cn 패키지 제거

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/spinner.tsx | 55 +++++++++++++++++++++++++++++++----
 1 file changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
index 4b753d23..468baa97 100644
--- a/src/components/ui/spinner.tsx
+++ b/src/components/ui/spinner.tsx
@@ -1,10 +1,53 @@
-import { cn } from "cn"
-import { Loader2Icon } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
 
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+import { ProgressIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
+
+// Figma에 Spinner 컴포넌트는 없어 progress 아이콘(type=default 252:30981)과 Button State=Loading의 아이콘 색을 따른다
+const spinnerVariants = cva("inline-flex items-center justify-center", {
+  variants: {
+    variant: {
+      default: "text-icon", // progress 원본색 icon/default
+      inverse: "text-icon-inverse", // Solid 버튼 Loading의 icon/inverse(5272:2993·2994·3017)
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+// width·height 속성만 주면 shadcn 부모의 [&_svg:not([class*='size-'])]:size-* 규칙에 덮여서 클래스로도 준다.
+// 회전 속도는 Figma가 개발에 맡겨(5864:9498) animate-spin 기본값을 쓴다
+const spinnerIconVariants = cva("motion-safe:animate-spin", {
+  variants: {
+    size: {
+      12: "size-[12px]",
+      16: "size-[16px]",
+      20: "size-[20px]",
+      24: "size-[24px]",
+      28: "size-[28px]",
+      32: "size-[32px]",
+    },
+  },
+});
+
+type SpinnerProps = Omit<ComponentProps<"output">, "children"> &
+  VariantProps<typeof spinnerVariants> & {
+    /** 아이콘 px(Figma 아이콘 크기). 아이콘 크기는 이 값으로만 바뀐다. className의 size-*는 output 칸 크기만 바꾼다 */
+    size?: 12 | 16 | 20 | 24 | 28 | 32;
+  };
+
+/** 화면 문구 없이 aria-label로만 알린다. output의 암묵 role이 status라 role은 달지 않는다(Sonar S6819) */
+function Spinner({ variant, size = 20, className, ...props }: Readonly<SpinnerProps>) {
   return (
-    <Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
-  )
+    <output
+      data-slot="spinner"
+      aria-label="불러오는 중"
+      className={cn(spinnerVariants({ variant }), className)}
+      {...props}
+    >
+      <ProgressIcon size={size} className={spinnerIconVariants({ size })} />
+    </output>
+  );
 }
 
-export { Spinner }
+export { Spinner };

From 316daca196d69a9c0eaef559d4c99827b63e941a Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:23:25 +0900
Subject: [PATCH 06/93] =?UTF-8?q?style(ui):=20Alert=EB=A5=BC=20=EC=A7=80?=
 =?UTF-8?q?=EA=B8=88=20=ED=99=94=EB=A9=B4=EC=9D=98=20=EC=95=88=EB=82=B4=20?=
 =?UTF-8?q?=EC=83=81=EC=9E=90=20=EB=AA=A8=EC=96=91=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma에 인라인 Alert가 없어 지금 상자 3종을 tone으로 옮김: neutral 회색 상자, brand 파란 틴트, warning 주황 테두리
- size lg(로그인·약관 화면)·md(앱 안 상자), orientation vertical·horizontal(동작 위치)
- 금지 색(primary 투명도, muted-brown 등)은 가까운 토큰·원시 색으로 바꿈
- 폭·바깥 margin을 두지 않아 넘치지 않게 함, role="alert" 기본(덮어쓰기 가능)
- shadcn 아이콘 칸·absolute 동작 위치·cn 패키지 제거

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

diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 17ba728c..d0a0105a 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -1,75 +1,91 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
 
-const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
-      },
+import { cn } from "@/lib/utils";
+
+// Figma DS에 인라인 Alert가 없어 지금 화면의 안내 상자 모양을 옮긴다.
+// lg는 로그인·약관 동의 화면 상자, md는 장소 상세·모바일 장소 검색·준비물 상자다.
+// brand의 테두리·바탕은 지금 쓰는 primary/35·primary/[0.06](합성색 #9ccfff·#f0f8ff)에 맞는 시맨틱 토큰이 없어 가장 가까운 원시 색을 쓴다
+const alertVariants = cva("group/alert flex border text-left", {
+  variants: {
+    tone: {
+      neutral: "border-border-subtle bg-fill-subtle text-text",
+      brand: "border-[var(--blue-300)] bg-[var(--blue-50)] text-primary",
+      warning: "border-status-cautionary bg-fill-subtle text-text",
+    },
+    size: {
+      lg: "rounded-xl px-4 py-3 text-body-m-regular mobile:text-body-s-regular",
+      md: "rounded-md p-3 text-body-s-regular",
     },
-    defaultVariants: {
-      variant: "default",
+    // 모바일 장소 검색·준비물 상자는 동작이 문구 바로 옆에 있다(horizontal)
+    orientation: {
+      vertical: "flex-col gap-1",
+      horizontal: "items-center gap-2",
     },
-  }
-)
+  },
+  defaultVariants: { tone: "neutral", size: "md", orientation: "vertical" },
+});
 
+/**
+ * 급하지 않은 안내는 role="status"로 덮는다.
+ * 폭을 정하지 않는다. w-full에 바깥 margin을 더하면 넘치므로 간격은 부모가 주고, items-center 부모 안에서는 호출부가 self-stretch로 채운다.
+ * 아이콘 칸이 없다. 앞에 붙는 표시(로그인 '!' 원)는 호출부가 감싸서 배치한다.
+ */
 function Alert({
   className,
-  variant,
+  tone = "neutral",
+  size = "md",
+  orientation = "vertical",
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+}: Readonly<ComponentProps<"div"> & VariantProps<typeof alertVariants>>) {
   return (
     <div
       data-slot="alert"
       role="alert"
-      className={cn(alertVariants({ variant }), className)}
       {...props}
+      data-size={size}
+      data-orientation={orientation}
+      className={cn(alertVariants({ tone, size, orientation }), className)}
     />
-  )
+  );
 }
 
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+// md 제목은 지금 앱 안 상자처럼 본문 굵기 그대로다. 굵은 제목은 로그인·약관 상자(lg)에만 있다
+function AlertTitle({ className, ...props }: Readonly<ComponentProps<"div">>) {
   return (
     <div
       data-slot="alert-title"
       className={cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
-        className
+        "min-w-0 group-data-[size=lg]/alert:text-body-m-emphasis group-data-[size=lg]/alert:mobile:text-body-s-emphasis",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDescription({ className, ...props }: Readonly<ComponentProps<"div">>) {
   return (
     <div
       data-slot="alert-description"
-      className={cn(
-        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-        className
-      )}
+      className={cn("min-w-0 text-text-subtle", className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+// 세로 배치에서 동작은 문구보다 8px 아래다(지금 상자의 mt-2). 부품 사이 gap 4px에 위 여백 4px을 더한다
+function AlertAction({ className, ...props }: Readonly<ComponentProps<"div">>) {
   return (
     <div
       data-slot="alert-action"
-      className={cn("absolute top-2 right-2", className)}
+      className={cn(
+        "flex group-data-[orientation=horizontal]/alert:shrink-0 group-data-[orientation=vertical]/alert:pt-1",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-export { Alert, AlertTitle, AlertDescription, AlertAction }
+export { Alert, AlertTitle, AlertDescription, AlertAction };

From 826765a7ed7c057a7077e0935e40dbbec4e51aad Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:23:25 +0900
Subject: [PATCH 07/93] =?UTF-8?q?style(ui):=20Skeleton=EC=9D=84=20?=
 =?UTF-8?q?=EC=A7=80=EA=B8=88=20=ED=99=94=EB=A9=B4=20=EC=8A=A4=EC=BC=88?=
 =?UTF-8?q?=EB=A0=88=ED=86=A4=20=EB=AA=A8=EC=96=91=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma에 없어 지금 블록 모양을 기본값으로: fill-strong, 0.25rem 모서리, 펄스, 동작 줄이기에서 멈춤
- tone subtle(fill)로 일정 목록 스켈레톤의 옅은 톤을 보존
- render={<span />} 지원(output·span 안), 기본 block, aria-hidden
- bg-muted(우때에 없는 색)·cn 패키지 제거

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/skeleton.tsx | 58 +++++++++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
index b7f61b3a..3e6c0c4e 100644
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -1,13 +1,49 @@
-import { cn } from "cn"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Figma DS에 Skeleton이 없어 지금 화면들이 쓰는 스켈레톤 블록 모양을 그대로 옮긴다.
+const skeletonVariants = cva(
+  // 글줄 모서리는 지금 쓰는 bare `rounded`(Tailwind v4에서 지원 중단된 0.25rem)를 rem 그대로 옮긴다.
+  // 기본 글자 크기에서 Figma radius/sm 4px(6034:29246)이고, 맞는 토큰이 없다(rounded-sm = 6px).
+  // block: render={<span />}로 그려도 h-*·w-*가 먹게 한다(인라인 자리는 className에 inline-block)
+  "block animate-pulse rounded-[0.25rem] motion-reduce:animate-none",
+  {
+    variants: {
+      tone: {
+        strong: "bg-fill-strong",
+        // strong보다 옅은 톤이라는 뜻으로 fill/default다. bg-fill-subtle이 아니다.
+        subtle: "bg-fill",
+      },
+    },
+    defaultVariants: { tone: "strong" },
+  },
+);
+
+/**
+ * 로딩 안내(output·aria-busy)는 감싸는 영역이 맡아 블록은 aria-hidden이다.
+ * 바깥 className은 크기·배치와 모서리만 바꾼다. 모서리는 대신하는 요소(버튼·카드·사진)를 따라야 해서
+ * 예외로 둔다(Figma Radius 6057:472: 기존 컴포넌트에 명시된 Radius 우선). 색은 tone으로만 바꾼다.
+ * div를 둘 수 없는 `<output>`·`<span>` 안에서는 render={<span />}를 쓴다. render 요소에 준 className은
+ * cn을 거치지 않고 이어 붙어 기본 클래스와 겹쳐도 정리되지 않으므로, 클래스는 Skeleton의 className으로 넘긴다.
+ */
+function Skeleton({
+  className,
+  tone,
+  render,
+  ...props
+}: Readonly<useRender.ComponentProps<"div"> & VariantProps<typeof skeletonVariants>>) {
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(
+      { "aria-hidden": true, className: cn(skeletonVariants({ tone }), className) },
+      props,
+    ),
+    state: { slot: "skeleton" },
+  });
 }
 
-export { Skeleton }
+export { Skeleton };

From 4fbb458f620ab0852de7933c7103478b87f314f5 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:23:25 +0900
Subject: [PATCH 08/93] =?UTF-8?q?style(ui):=20Badge=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=20Badge?=
 =?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 15 Badges: variant weak·solid·outline × tone 6종 × size lg(24)·md(20)
- Figma 값이 코드 토큰과 다른 색(primary/subtle은 blue-50, status subtle·strong)은 원시 변수로 맞춤
- 모서리 4px, 아이콘 lg 14·md 12px 고정, 비조작 라벨이라 hover·focus 없음
- shadcn variant(default·secondary·destructive 등)·cn 패키지 제거

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

diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 6bc28c30..ebf12950 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -1,51 +1,81 @@
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
 
+import { cn } from "@/lib/utils";
+
+// Figma 15 Badges: Badge / Weak 5626:32, Badge / Solid 5626:58, Badge / Outline 5626:84. 비조작 라벨이라 hover·focus·transition이 없다
+// 원시 변수로 쓰는 색: Figma primary/subtle(blue/50)은 코드 primary-subtle(blue-100)과 값이 다르고, status/*/subtle·strong은 코드에 토큰이 없다(코드 status-*는 */default).
+// gray/800(Solid Neutral 배경)·green/800·orange/800(아이콘)은 Figma도 원시 변수에 바로 묶었다
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  // radius/sm 4px은 맞는 토큰이 없다(rounded-sm = 6px)
+  "inline-flex w-fit max-w-full shrink-0 items-center gap-1 overflow-hidden rounded-[4px] whitespace-nowrap",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
+        weak: "",
+        solid: "",
+        // Figma도 Outline만 1px 테두리가 있어 폭이 2px 넓다. Weak·Solid에 투명 테두리를 두면 Figma보다 넓어진다
+        outline: "border",
+      },
+      tone: {
+        neutral: "",
+        brand: "",
+        informative: "",
+        positive: "",
+        warning: "",
+        critical: "",
+      },
+      // 아이콘은 Figma lg 14·md 12px이고, 글자 크기 설정을 따라 커지지 않게 px로 둔다(원칙 3-2)
+      size: {
+        lg: "min-h-6 px-2 text-label-s-regular [&>svg]:size-[14px]",
+        md: "min-h-5 px-1.5 text-label-xs-regular [&>svg]:size-[12px]",
       },
     },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+    // Weak·Outline의 Positive·Warning은 Figma에서 아이콘만 문구보다 한 단계 진하다
+    compoundVariants: [
+      { variant: "weak", tone: "neutral", className: "bg-fill text-text" },
+      { variant: "weak", tone: "brand", className: "bg-[var(--blue-50)] text-primary-strong" },
+      { variant: "weak", tone: "informative", className: "bg-fill text-primary-strong" },
+      { variant: "weak", tone: "positive", className: "bg-[var(--lime-100)] text-[var(--green-700)] [&>svg]:text-[var(--green-800)]" },
+      { variant: "weak", tone: "warning", className: "bg-[var(--orange-100)] text-[var(--orange-700)] [&>svg]:text-[var(--orange-800)]" },
+      { variant: "weak", tone: "critical", className: "bg-[var(--red-100)] text-[var(--red-800)]" },
+      { variant: "solid", tone: "neutral", className: "bg-[var(--gray-800)] text-text-inverse" },
+      { variant: "solid", tone: "brand", className: "bg-primary-strong text-text-inverse" },
+      // Figma도 Weak / Informative와 같은 색이다(5626:38·50)
+      { variant: "solid", tone: "informative", className: "bg-fill text-primary-strong" },
+      { variant: "solid", tone: "positive", className: "bg-[var(--green-700)] text-text-inverse" },
+      { variant: "solid", tone: "warning", className: "bg-[var(--orange-700)] text-text-inverse" },
+      { variant: "solid", tone: "critical", className: "bg-[var(--red-800)] text-text-inverse" },
+      { variant: "outline", tone: "neutral", className: "border-text text-text" },
+      { variant: "outline", tone: "brand", className: "border-primary-strong text-primary-strong" },
+      { variant: "outline", tone: "informative", className: "border-border text-primary-strong" },
+      { variant: "outline", tone: "positive", className: "border-[var(--green-700)] text-[var(--green-700)] [&>svg]:text-[var(--green-800)]" },
+      { variant: "outline", tone: "warning", className: "border-[var(--orange-700)] text-[var(--orange-700)] [&>svg]:text-[var(--orange-800)]" },
+      { variant: "outline", tone: "critical", className: "border-[var(--red-800)] text-[var(--red-800)]" },
+    ],
+    defaultVariants: { variant: "weak", tone: "neutral", size: "lg" },
+  },
+);
 
+/**
+ * 아이콘(@/assets/icons)은 span으로 감싸지 않고 직계 자식으로 넣는다. 크기·색은 Badge의 [&>svg] 규칙이 정한다.
+ * 긴 라벨은 부모 폭에서 잘리기만 한다(Figma에 말줄임 정의가 없다). 말줄임표가 필요한 곳은 호출부가 라벨을 `<span className="truncate">`로 감싼다.
+ */
 function Badge({
   className,
-  variant = "default",
+  variant = "weak",
+  tone = "neutral",
+  size = "lg",
   render,
   ...props
-}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+}: Readonly<useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>>) {
   return useRender({
     defaultTagName: "span",
-    props: mergeProps<"span">(
-      {
-        className: cn(badgeVariants({ variant }), className),
-      },
-      props
-    ),
+    props: mergeProps<"span">({ className: cn(badgeVariants({ variant, tone, size }), className) }, props),
     render,
-    state: {
-      slot: "badge",
-      variant,
-    },
-  })
+    state: { slot: "badge", variant, tone, size },
+  });
 }
 
-export { Badge, badgeVariants }
+export { Badge };

From 79fd6cd07307bec04956b1908d0132f94f6a40be Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:23:25 +0900
Subject: [PATCH 09/93] =?UTF-8?q?style(ui):=20Avatar=EB=A5=BC=20=EC=A7=80?=
 =?UTF-8?q?=EA=B8=88=20=ED=99=94=EB=A9=B4=20=EC=95=84=EB=B0=94=ED=83=80=20?=
 =?UTF-8?q?=EB=AA=A8=EC=96=91=EC=9C=BC=EB=A1=9C=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma Avatar가 없어 지금 크기(24·28·32·36·40·56)·모양(원·둥근 사각)·톤·접속 링을 variant로 옮김
- 기본값은 Figma Header Profile(36px, fill/strong 원)
- 사진: referrer 없이 요청, 받는 동안 배경색, 실패하면 바로 대체, 주소가 바뀌어도 새 사진이 올 때까지 이전 사진 유지
- AvatarGroup·AvatarGroupCount는 버튼 안에 둘 수 있게 span으로, 쓰지 않는 AvatarBadge 삭제

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/avatar.tsx | 158 +++++++++++++++++++----------------
 1 file changed, 88 insertions(+), 70 deletions(-)

diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index 3afe8a93..b7136a9c 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -1,108 +1,126 @@
-"use client"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
 
-import * as React from "react"
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
-import { cn } from "cn"
+import { cn } from "@/lib/utils";
 
-function Avatar({
-  className,
-  size = "default",
-  ...props
-}: AvatarPrimitive.Root.Props & {
-  size?: "default" | "sm" | "lg"
-}) {
+// Figma DS에 Avatar 컴포넌트가 없어 지금 화면들의 아바타 모양을 옮긴다. Figma 근거는 Header Profile(5219:10776)의
+// 36px·fill/strong 원뿐이라 이것을 기본값으로 둔다. 크기는 글자 설정을 따라 커지지 않게 px로 둔다(원칙 3-2).
+// 대체 글자는 화면별 지금 크기·굵기(24 가계부, 28 헤더 미리보기, 32 리뷰, 36 구성원, 56 내 정보)에 가장 가까운 토큰이고,
+// 글자를 쓰는 곳이 없는 40은 UserAvatar 규칙(크기의 44%)을 따른다. 대체 아이콘은 채팅 아바타 규칙(크기의 58%)에 가장 가까운 Figma 아이콘 크기다.
+const avatarVariants = cva("relative flex shrink-0 select-none items-center justify-center overflow-hidden", {
+  variants: {
+    size: {
+      24: "size-[24px] text-body-xs-regular [&_svg]:size-[12px]",
+      28: "size-[28px] text-label-xs-regular [&_svg]:size-[16px]",
+      32: "size-[32px] text-label-m-regular mobile:text-label-xs-regular [&_svg]:size-[20px]",
+      36: "size-[36px] text-label-l-regular [&_svg]:size-[20px]",
+      40: "size-[40px] text-label-xl-regular [&_svg]:size-[24px]",
+      56: "size-[56px] text-heading-s [&_svg]:size-[32px]",
+    },
+    shape: {
+      circle: "rounded-full",
+      rounded: "rounded-xl",
+    },
+    // 배경은 사진을 받는 동안 보이는 색이기도 하다(AvatarImage가 bg-inherit로 아래의 대체를 가린다)
+    tone: {
+      primary: "bg-primary-subtle text-primary",
+      neutral: "bg-fill text-text-subtle",
+      placeholder: "bg-fill-strong text-text-subtle",
+      // 채팅 사진 자리 bg-light-gray(#d9d9d9)에 가장 가까운 gray/300은 맞는 semantic이 없어 원시 변수로 쓴다.
+      // 대체(사람 아이콘) 칸은 지금처럼 사진 자리보다 밝다
+      icon: "bg-[var(--gray-300)] text-icon-disabled *:data-[slot=avatar-fallback]:bg-fill-strong",
+      // WOORI(AI) 그림은 흰 바탕에 둔다
+      elevate: "bg-fill-elevate",
+    },
+    ring: {
+      none: "",
+      online: "ring-2 ring-status-positive",
+      // 구성원 카드는 옆에 접속 상태 글자가 있어 옅은 1px 링, 글자가 없는 헤더 미리보기(겹친 묶음)는 굵은 링과 흑백으로 그린다.
+      // 묶음 안인지로 나눠 쓰는 쪽은 접속 상태만 정한다
+      offline:
+        "ring-1 ring-border-subtle in-data-[slot=avatar-group]:ring-2 in-data-[slot=avatar-group]:ring-border in-data-[slot=avatar-group]:grayscale in-data-[slot=avatar-group]:brightness-110 in-data-[slot=avatar-group]:contrast-75",
+      // 채팅 목록 아바타. 그림자는 지금 쓰는 shadow-sm에 가장 가까운 Figma shadow/subtle(0 1 4 #1f2229 8%)이다
+      subtle: "ring-1 ring-border-subtle shadow-[0_1px_4px_rgba(31,34,41,0.08)]",
+      // 채팅 새 메시지 미리보기. 회색 버튼 바탕(background/strong) 위라 윤곽이 border/default다
+      default: "ring-1 ring-border",
+      // 가계부에서 겹친 아바타 사이를 끊는 안쪽 흰 테두리. 지금 굵기 1.5px에 맞는 토큰이 없다
+      cutout: "border-[1.5px] border-fill-elevate",
+    },
+  },
+  // 채팅 새 메시지 미리보기(24·28)는 10px, 채팅 목록(40)은 14px 모서리다
+  compoundVariants: [{ shape: "rounded", size: [24, 28], className: "rounded-lg" }],
+  defaultVariants: { size: 36, shape: "circle", tone: "placeholder", ring: "none" },
+});
+
+// Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+type AvatarProps = Omit<AvatarPrimitive.Root.Props, "className"> &
+  VariantProps<typeof avatarVariants> & { className?: string };
+
+/** 바깥 className은 배치(겹침 순서·위치)에만 쓴다. 색·크기·모양은 variant로만 바꾼다 */
+function Avatar({ className, size, shape, tone, ring, ...props }: Readonly<AvatarProps>) {
   return (
     <AvatarPrimitive.Root
       data-slot="avatar"
-      data-size={size}
-      className={cn(
-        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
-        className
-      )}
+      className={cn(avatarVariants({ size, shape, tone, ring }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+type AvatarImageProps = Omit<AvatarPrimitive.Image.Props, "className" | "keepMounted"> & { className?: string };
+
+function AvatarImage({ className, ...props }: Readonly<AvatarImageProps>) {
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
-      className={cn(
-        "aspect-square size-full rounded-full object-cover",
-        className
-      )}
+      // 구글 프로필(lh3.googleusercontent.com)은 Referer가 붙으면 로드를 거부한다
+      referrerPolicy="no-referrer"
+      // 기본 모드는 src가 바뀌면 이전 사진을 내리고 대체를 보인 채 다시 받는다. 지금처럼 새 사진이 올 때까지 이전 사진을 두도록
+      // 제자리에서 받는다. 받는 동안은 루트 배경(bg-inherit)으로 아래의 대체를 가리고, 실패하면 숨겨 대체가 바로 보이게 한다
+      keepMounted
+      className={cn("absolute inset-0 size-full bg-inherit object-cover data-error:hidden", className)}
       {...props}
     />
-  )
+  );
 }
 
-function AvatarFallback({
-  className,
-  ...props
-}: AvatarPrimitive.Fallback.Props) {
+// delay를 주면 실패한 사진의 대체도 그만큼 늦게 보인다. 받는 동안은 AvatarImage가 대체를 덮어 delay가 필요 없다
+type AvatarFallbackProps = Omit<AvatarPrimitive.Fallback.Props, "className" | "delay"> & { className?: string };
+
+function AvatarFallback({ className, ...props }: Readonly<AvatarFallbackProps>) {
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
-      className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
-        className
-      )}
+      className={cn("flex size-full items-center justify-center", className)}
       {...props}
     />
-  )
+  );
 }
 
-function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+/** 버튼 안에도 두도록 span으로 그린다. 앞사람이 위에 오는 겹침 순서는 쓰는 쪽이 자식 className의 z로 정한다 */
+function AvatarGroup({ className, ...props }: Readonly<ComponentProps<"span">>) {
   return (
     <span
-      data-slot="avatar-badge"
-      className={cn(
-        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
-        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
-        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
-        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
       data-slot="avatar-group"
-      className={cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
-        className
-      )}
+      className={cn("isolate flex items-center *:not-first:-ml-1.5", className)}
       {...props}
     />
-  )
+  );
 }
 
-function AvatarGroupCount({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+/** 헤더 구성원 미리보기의 +N. 쓰는 곳이 28px 묶음뿐이라 크기를 고정한다 */
+function AvatarGroupCount({ className, ...props }: Readonly<ComponentProps<"span">>) {
   return (
-    <div
+    <span
       data-slot="avatar-group-count"
       className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
-        className
+        "relative flex size-[28px] shrink-0 items-center justify-center rounded-full bg-fill text-label-m-regular text-text-subtle",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarBadge,
-}
+export { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

From 12d1a0741f7bfb83fc1e79ea0d3ed7ff8e3b77a0 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:23:25 +0900
Subject: [PATCH 10/93] =?UTF-8?q?style(ui):=20Chip=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=20Chip?=
 =?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

- toggle.tsx를 chip.tsx로 바꿈: Base UI Toggle 위의 Chip, 모양만 맡는 chipVariants(제거용 칩 등 버튼이 아닌 칩용)
- Figma 14 Chips: Solid·Outline × lg 44·md 36·sm 32, Selected(aria-pressed)·Pressed(:active)·Disabled 색
- Outline 선택+눌림 배경은 원시 변수로 Figma primary/subtle(blue-50)
- 120ms 색 전환, 모바일에서 md·sm 누르는 영역만 44px로 넓힘
- hover·그림자 없음(Figma에 없음)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/chip.tsx   | 53 ++++++++++++++++++++++++++++++++++++
 src/components/ui/toggle.tsx | 44 ------------------------------
 2 files changed, 53 insertions(+), 44 deletions(-)
 create mode 100644 src/components/ui/chip.tsx
 delete mode 100644 src/components/ui/toggle.tsx

diff --git a/src/components/ui/chip.tsx b/src/components/ui/chip.tsx
new file mode 100644
index 00000000..19c5a930
--- /dev/null
+++ b/src/components/ui/chip.tsx
@@ -0,0 +1,53 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Figma 14 Chips: Chip / Solid 5625:359, Chip / Outline 5625:475
+// Selected는 aria-pressed:, State=Pressed는 :active, Disabled는 data-disabled:로 그린다. Base UI의 data-pressed는 Selected라 눌림에 쓰지 않는다.
+// 비활성을 disabled:로 쓰면 Tailwind가 aria-pressed:보다 먼저 출력해 선택+비활성 칩이 선택 색으로 남는다.
+// 눌림은 enabled:로 한정해, 버튼이 아닌 요소(제거용 칩의 span)에 chipVariants를 써도 누를 때 색이 바뀌지 않게 한다.
+const chipVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full whitespace-nowrap transition-colors duration-120 ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none [&_svg:not([class*='size-'])]:size-[16px]",
+  {
+    variants: {
+      variant: {
+        solid:
+          "bg-fill text-text enabled:active:bg-fill-strong aria-pressed:bg-primary aria-pressed:text-text-inverse aria-pressed:enabled:active:bg-primary-strong data-disabled:bg-fill data-disabled:text-text-disabled",
+        // 선택+눌림 배경: Figma primary/subtle은 blue/50인데 코드 primary-subtle은 blue-100이라 원시 변수로 Figma 값에 맞춘다
+        outline:
+          "border border-border bg-fill-subtle text-text enabled:active:bg-fill-strong aria-pressed:border-primary-strong aria-pressed:text-primary-strong aria-pressed:enabled:active:bg-[var(--blue-50)] data-disabled:border-border data-disabled:text-text-disabled aria-pressed:data-disabled:bg-fill",
+      },
+      size: {
+        lg: "min-h-11 px-4 text-label-l-emphasis data-disabled:text-label-l-regular",
+        md: "min-h-9 px-4 text-label-m-emphasis data-disabled:text-label-m-regular",
+        sm: "min-h-8 px-3 text-label-m-emphasis data-disabled:text-label-m-regular",
+      },
+    },
+    defaultVariants: { variant: "solid", size: "lg" },
+  },
+);
+
+type ChipProps = Omit<TogglePrimitive.Props, "className"> &
+  VariantProps<typeof chipVariants> & {
+    // Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+    className?: string;
+  };
+
+function Chip({ className, variant, size, ...props }: Readonly<ChipProps>) {
+  return (
+    <TogglePrimitive
+      data-slot="chip"
+      className={cn(
+        chipVariants({ variant, size }),
+        // 누르는 동작에만 필요한 클래스라 chipVariants에 두지 않는다. 두면 제거용 칩(span) 안의 버튼을 가상 요소가 덮는다.
+        // md 36px·sm 32px는 모바일에서 누르는 영역만 가상 요소로 44px까지 넓힌다. 배경이 보이는 칩이라 padding·음수 margin(원칙 3-7)으로 넓히면 모양이 커진다.
+        "relative cursor-pointer data-disabled:pointer-events-none [&_svg]:pointer-events-none mobile:before:absolute mobile:before:inset-x-0 mobile:before:top-1/2 mobile:before:h-11 mobile:before:-translate-y-1/2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Chip, chipVariants };
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
deleted file mode 100644
index f38073f1..00000000
--- a/src/components/ui/toggle.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client"
-
-import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
-
-const toggleVariants = cva(
-  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border border-input bg-transparent hover:bg-muted",
-      },
-      size: {
-        default:
-          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] 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 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Toggle({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Toggle, toggleVariants }

From 413bcf54725e7f085d6176cfee4f469ab8d09316 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:23:25 +0900
Subject: [PATCH 11/93] =?UTF-8?q?style(ui):=20Field=C2=B7Input=C2=B7Textar?=
 =?UTF-8?q?ea=EB=A5=BC=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=8A=A4?=
 =?UTF-8?q?=ED=85=9C=20Text=20Field=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

- Input: Figma Text Field 48px, Focused·Error·Disabled·Read Only를 DOM 상태(:focus·aria-invalid·:disabled·:read-only)로 그림
- Textarea: Figma Textarea Field 96px 고정 높이와 스크롤
- Field: Figma Header·Footer에 맞춰 FieldHeader·FieldLabel·FieldSuffix·FieldFooter·FieldDescription·FieldError·FieldCount
- 오류 글자는 status/negative/strong(원시 변수 red-800), 오류 테두리는 status-negative
- 쓰지 않는 Field 부품·separator.tsx와 이름 없는 role="group" 제거

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/field.tsx     | 243 ++++++++------------------------
 src/components/ui/input.tsx     |  21 +--
 src/components/ui/label.tsx     |  18 ++-
 src/components/ui/separator.tsx |  24 ----
 src/components/ui/textarea.tsx  |  18 ++-
 5 files changed, 90 insertions(+), 234 deletions(-)
 delete mode 100644 src/components/ui/separator.tsx

diff --git a/src/components/ui/field.tsx b/src/components/ui/field.tsx
index 8ae7f291..582e0f05 100644
--- a/src/components/ui/field.tsx
+++ b/src/components/ui/field.tsx
@@ -1,238 +1,111 @@
-"use client"
+import type { ComponentProps } from "react";
 
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
 
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
+// Figma 02 Text Field: Text Field Base 5002:4415·Textarea Field Base 5002:4424(Header·입력·Footer 세로 간격 4), Header 5002:4449, Footer 5002:4440
+// 오류 라벨·보조 문구·카운트의 status/negative/strong(#c10000)은 시맨틱 토큰이 없어 원시 변수 --red-800을 쓴다
 
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
-  return (
-    <fieldset
-      data-slot="field-set"
-      className={cn(
-        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldLegend({
-  className,
-  variant = "legend",
-  ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
-  return (
-    <legend
-      data-slot="field-legend"
-      data-variant={variant}
-      className={cn(
-        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+// shadcn의 role="group"은 두지 않는다. 입력 하나와 라벨을 묶는 배치용 div라(Base UI Field.Root도 role 없는 div) 이름 없는 그룹만 한 겹 더 읽힌다
+function Field({ className, ...props }: Readonly<ComponentProps<"div">>) {
   return (
     <div
-      data-slot="field-group"
-      className={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const fieldVariants = cva(
-  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
-  {
-    variants: {
-      orientation: {
-        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
-        horizontal:
-          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        responsive:
-          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-      },
-    },
-    defaultVariants: {
-      orientation: "vertical",
-    },
-  }
-)
-
-function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
-  return (
-    <div
-      role="group"
       data-slot="field"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
+      className={cn("group/field flex w-full min-w-0 flex-col gap-1", className)}
       {...props}
     />
-  )
+  );
 }
 
-function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+// Label 프레임 Fill + Suffix Slot Hug, 간격 30
+function FieldHeader({ className, ...props }: Readonly<ComponentProps<"div">>) {
   return (
     <div
-      data-slot="field-content"
+      data-slot="field-header"
       className={cn(
-        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
-        className
+        "flex items-center gap-7.5 *:data-[slot=field-label]:min-w-0 *:data-[slot=field-label]:flex-1",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label>) {
+function FieldLabel({ className, ...props }: Readonly<ComponentProps<typeof Label>>) {
   return (
     <Label
       data-slot="field-label"
       className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
-        className
+        // 비활성·읽기 전용은 입력(input·textarea)에서만 읽는다. 같은 Field 안 버튼이 비활성이어도 라벨은 그대로다
+        // 겹치면 오류 > 비활성 > 읽기 전용: 저장 중 비활성이 돼도 오류 표시를 남긴다
+        "group-has-[[aria-invalid=true]]/field:text-[var(--red-800)] group-has-[:is(input,textarea):disabled:not([aria-invalid=true])]/field:text-text-disabled group-has-[:is(input,textarea)[readonly]:enabled:not([aria-invalid=true])]/field:text-text-subtle",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+function FieldSuffix({ className, ...props }: Readonly<ComponentProps<"span">>) {
   return (
-    <div
-      data-slot="field-label"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
-        className
-      )}
+    <span
+      data-slot="field-suffix"
+      className={cn("shrink-0 text-caption-s-regular text-text-subtle", className)}
       {...props}
     />
-  )
+  );
+}
+
+function FieldFooter({ className, ...props }: Readonly<ComponentProps<"div">>) {
+  return <div data-slot="field-footer" className={cn("flex items-center", className)} {...props} />;
 }
 
-function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+function FieldDescription({ className, ...props }: Readonly<ComponentProps<"p">>) {
   return (
     <p
       data-slot="field-description"
-      className={cn(
-        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
-        "last:mt-0 nth-last-2:-mt-1",
-        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
-      )}
+      className={cn("min-w-0 text-caption-s-regular text-text-subtle", className)}
       {...props}
     />
-  )
+  );
 }
 
-function FieldSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
-}) {
+// Figma Error 상태의 Helper Text
+function FieldError({ className, children, ...props }: Readonly<ComponentProps<"p">>) {
+  if (!children) return null;
   return (
-    <div
-      data-slot="field-separator"
-      data-content={!!children}
-      className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
-      )}
+    <p
+      role="alert"
+      data-slot="field-error"
+      className={cn("min-w-0 text-caption-s-regular text-[var(--red-800)]", className)}
       {...props}
     >
-      <Separator className="absolute inset-0 top-1/2" />
-      {children && (
-        <span
-          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
-          data-slot="field-separator-content"
-        >
-          {children}
-        </span>
-      )}
-    </div>
-  )
+      {children}
+    </p>
+  );
 }
 
-function FieldError({
-  className,
-  children,
-  errors,
-  ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
-}) {
-  const content = useMemo(() => {
-    if (children) {
-      return children
-    }
-
-    if (!errors?.length) {
-      return null
-    }
-
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
-
-    if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
-    }
-
-    return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
-        {uniqueErrors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
-        )}
-      </ul>
-    )
-  }, [children, errors])
-
-  if (!content) {
-    return null
-  }
-
+// Helper Text 없이 카운트만 있어도 오른쪽 끝에 붙도록 Footer의 space-between 대신 ms-auto로 민다
+function FieldCount({ className, ...props }: Readonly<ComponentProps<"span">>) {
   return (
-    <div
-      role="alert"
-      data-slot="field-error"
-      className={cn("text-sm font-normal text-destructive", className)}
+    <span
+      data-slot="field-count"
+      className={cn(
+        "ms-auto shrink-0 text-caption-s-regular text-text-subtle group-has-[[aria-invalid=true]]/field:text-[var(--red-800)]",
+        className,
+      )}
       {...props}
-    >
-      {content}
-    </div>
-  )
+    />
+  );
 }
 
 export {
   Field,
+  FieldHeader,
   FieldLabel,
+  FieldSuffix,
+  FieldFooter,
   FieldDescription,
   FieldError,
-  FieldGroup,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldContent,
-  FieldTitle,
-}
+  FieldCount,
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 7c4ab5ab..05c2c630 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,19 +1,24 @@
-import * as React from "react"
-import { Input as InputPrimitive } from "@base-ui/react/input"
-import { cn } from "cn"
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import type { ComponentProps } from "react";
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+import { cn } from "@/lib/utils";
+
+// Figma 02 Text Field 5002:4382의 Field 프레임. Type은 DOM 상태로 그린다: Focused=:focus, Error Filled·Error Focused=aria-invalid, Disabled=:disabled, Read Only=:read-only
+// Read Only 글자는 Figma가 원시 gray/800에 바로 바인딩해 시맨틱 토큰이 없어 원시 변수를 쓴다
+// :read-only는 비활성 입력에도 걸리지만 Tailwind가 disabled:를 뒤에 출력해 비활성 색이 이긴다. aria-invalid:도 focus: 뒤라 포커스 중에도 오류 테두리가 남는다
+function Input({ className, type, ...props }: Readonly<ComponentProps<"input">>) {
   return (
     <InputPrimitive
       type={type}
       data-slot="input"
       className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
+        // 세로 padding 12 대신 min-h-12와 입력의 기본 세로 가운데 정렬로 48px을 맞춘다(CSS 테두리는 padding 밖이라 py-3이면 50px). 오른쪽 14 = padding 10 + Text 프레임 4
+        "min-h-12 w-full min-w-0 rounded-md border border-border bg-fill-subtle px-3.5 text-body-m-regular text-text transition-colors placeholder:text-text-subtle focus:border-primary focus:outline-hidden read-only:bg-fill read-only:text-[var(--gray-800)] disabled:cursor-not-allowed disabled:bg-fill disabled:text-text-disabled disabled:placeholder:text-text-disabled aria-invalid:border-status-negative",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index ddfd2e16..79494f01 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,19 +1,17 @@
-"use client"
+import type { ComponentProps } from "react";
 
-import * as React from "react"
-import { cn } from "cn"
+import { cn } from "@/lib/utils";
 
-function Label({ className, ...props }: React.ComponentProps<"label">) {
+// Figma 02 Text Field Header 5002:4449의 Label: label/xs/regular, text/default, 필수 표시와 간격 2
+// 비활성·오류·읽기 전용 색은 FieldLabel이 같은 Field 안 입력에서 읽는다. 라벨이 입력 앞에 있어 shadcn의 peer-disabled:로는 읽지 못한다
+function Label({ className, ...props }: Readonly<ComponentProps<"label">>) {
   return (
     <label
       data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
+      className={cn("flex items-center gap-0.5 text-label-xs-regular text-text select-none", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
deleted file mode 100644
index d69c1342..00000000
--- a/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
-import { cn } from "cn"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  ...props
-}: SeparatorPrimitive.Props) {
-  return (
-    <SeparatorPrimitive
-      data-slot="separator"
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 5141de79..8abe8a86 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,17 +1,21 @@
-import * as React from "react"
-import { cn } from "cn"
+import type { ComponentProps } from "react";
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+import { cn } from "@/lib/utils";
+
+// Figma 02 Text Field의 Textarea Field 5002:4364. 상태 색과 그 출력 순서는 Input과 같다
+// 스크롤 막대 gray/400과 Read Only 글자 gray/800은 Figma가 원시 색에 바로 바인딩해 시맨틱 토큰이 없어 원시 변수를 쓴다
+function Textarea({ className, ...props }: Readonly<ComponentProps<"textarea">>) {
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
+        // rows와 무관하게 96 고정, 넘치면 스크롤한다(rows로 높이를 정하면 rows=3이 98px이 된다). 오른쪽 28 = Text 래퍼 14 + 스크롤 레인 14(막대 4×24는 얇은 기본 스크롤바로 대신한다)
+        "block h-24 w-full min-w-0 resize-none overflow-y-auto rounded-md border border-border bg-fill-subtle py-3 pr-7 pl-3.5 text-body-m-regular text-text transition-colors [scrollbar-color:var(--gray-400)_transparent] [scrollbar-width:thin] placeholder:text-text-subtle focus:border-primary focus:outline-hidden read-only:bg-fill read-only:text-[var(--gray-800)] disabled:cursor-not-allowed disabled:bg-fill disabled:text-text-disabled disabled:placeholder:text-text-disabled aria-invalid:border-status-negative",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Textarea }
+export { Textarea };

From dc8a4d43108ca677dd9c4f07e94e9af847d5c70d Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:23:26 +0900
Subject: [PATCH 12/93] =?UTF-8?q?style(ui):=20Checkbox=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=20che?=
 =?UTF-8?q?ckbox=20=EC=95=84=EC=9D=B4=EC=BD=98=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B7=B8=EB=A6=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma checkbox 아이콘: 해제는 border/default 외곽선, 선택은 primary 외곽선과 체크
- size md 24·sm 20(가계부 결제자·부담자 시안 크기)
- 비활성은 커서만 바꿈(저장 중 깜빡임 방지), 일부 선택(indeterminate)은 받지 않음
- lucide·cn 패키지 제거

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/checkbox.tsx | 58 +++++++++++++++++++++++++---------
 1 file changed, 43 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index e1a35742..4991cfb2 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,28 +1,56 @@
-"use client"
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { cva } from "class-variance-authority";
 
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
-import { cn } from "cn"
-import { CheckIcon } from "lucide-react"
+import { CheckboxActivatedIcon, CheckboxIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
 
-function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+// Figma ❸ Icon의 checkbox(5024:79)로 그린다. Default(5024:77)는 border/default, Activated(5024:78)는 primary/default 외곽선이다.
+// md 24px은 아이콘 원본, sm 20px은 가계부 결제자·부담자 시안(4338:4508)의 인스턴스 크기다
+const CHECKBOX_ICON_SIZE = { md: 24, sm: 20 } as const;
+
+// size 속성만 주면 shadcn 부모의 [&_svg:not([class*='size-'])]:size-* 규칙에 덮여서 같은 px 클래스로도 준다
+const checkboxIconVariants = cva("", {
+  variants: {
+    size: {
+      md: "size-[24px]",
+      sm: "size-[20px]",
+    },
+  },
+});
+
+type CheckboxProps = Omit<CheckboxPrimitive.Root.Props, "className" | "indeterminate"> & {
+  size?: keyof typeof CHECKBOX_ICON_SIZE;
+  // Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+  className?: string;
+};
+
+/**
+ * 일부 선택(indeterminate)은 Figma mixed(252:31351)의 색·선이 Activated와 달라 정해질 때까지 받지 않는다.
+ * 비활성 모양은 Figma에 없어 커서만 바꾼다. 준비물은 저장하는 동안 모든 체크박스를 비활성으로 바꿔서 흐리게 하면 체크할 때마다 깜빡인다.
+ * 누르는 영역은 감싸는 label 행이 맡는다. after:로 넓히면 촘촘한 목록에서 이웃 행을 덮는다.
+ */
+function Checkbox({ className, size = "md", ...props }: Readonly<CheckboxProps>) {
+  const iconSize = CHECKBOX_ICON_SIZE[size];
+  const iconClassName = checkboxIconVariants({ size });
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 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 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
-        className
+        "group/checkbox relative inline-flex shrink-0 cursor-pointer rounded-sm select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-disabled:cursor-not-allowed",
+        className,
       )}
       {...props}
     >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
-      >
-        <CheckIcon
-        />
+      {/* Indicator는 해제한 뒤 한 프레임 늦게 빠져서 위에 겹쳐 그린다. 체크된 동안에도 이 아이콘이 자리를 잡도록 invisible로 숨긴다 */}
+      <CheckboxIcon
+        size={iconSize}
+        className={cn(iconClassName, "text-border group-aria-checked/checkbox:invisible")}
+      />
+      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="absolute inset-0">
+        <CheckboxActivatedIcon size={iconSize} className={cn(iconClassName, "text-primary")} />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  )
+  );
 }
 
-export { Checkbox }
+export { Checkbox };

From b1fa555a0f2f860fffdcd4a4db3f28f1644cd25f Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:23:26 +0900
Subject: [PATCH 13/93] =?UTF-8?q?style(ui):=20Switch=EB=A5=BC=20=EC=A7=80?=
 =?UTF-8?q?=EA=B8=88=20=ED=99=94=EB=A9=B4=20=EC=8A=A4=EC=9C=84=EC=B9=98=20?=
 =?UTF-8?q?=EB=AA=A8=EC=96=91=EC=9C=BC=EB=A1=9C=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma에 없어 쿠키 설정(md 트랙 48×28, 누르는 영역 56×44)과 경로 표시(sm 36×20) 모양을 옮김
- 지금처럼 <button type="button" role="switch">로 그림(nativeButton)
- 금지 색은 가까운 값으로: md 꺼짐 gray-600, sm 꺼짐 fill-strong, 손잡이 그림자는 지금 값 그대로

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/switch.tsx | 87 +++++++++++++++++++++++++++---------
 1 file changed, 66 insertions(+), 21 deletions(-)

diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index cf814744..f1f9aafa 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,31 +1,76 @@
-"use client"
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
-import { cn } from "cn"
+import { cn } from "@/lib/utils";
 
-function Switch({
-  className,
-  size = "default",
-  ...props
-}: SwitchPrimitive.Root.Props & {
-  size?: "sm" | "default"
-}) {
+// Figma에 Switch가 없어 지금 화면의 두 스위치 모양을 옮긴다. md는 쿠키 설정(AnalyticsConsentSettings), sm은 일정의 '지도에 경로 표시'(PlanDaySection)다.
+// md는 루트가 지금 버튼과 같은 56×44 누르는 영역이고 그 안에 트랙이 있다. sm은 루트가 트랙 크기이고 누르는 영역은 감싸는 label 행이 맡는다
+const switchVariants = cva(
+  "group/switch inline-flex shrink-0 cursor-pointer items-center focus-visible:outline-2 focus-visible:outline-primary disabled:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        md: "min-h-11 rounded-lg p-1 focus-visible:outline-offset-4",
+        // 지금은 윤곽선을 행 전체에 간격 없이 그린다. 트랙에 바로 붙이면 켜진 트랙과 같은 primary라 보이지 않아 띄운다
+        sm: "rounded-full focus-visible:outline-offset-2",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+// 꺼짐 색은 지금 쓰는 Tailwind 기본 팔레트·레거시 별칭(사용 금지)을 가까운 우때 값으로 바꾼 것이다.
+// md: neutral-400(#a1a1a1) → RGB 거리가 가장 가깝고 흰 배경 대비 3:1을 넘는 gray/600. 같은 값의 icon-subtle은 아이콘 색이라 원시 변수를 쓴다.
+// sm: 레거시 gray-300(#e2e8f0) → fill-strong
+const switchTrackVariants = cva(
+  "flex items-center rounded-full transition-colors group-aria-checked/switch:bg-primary motion-reduce:transition-none",
+  {
+    variants: {
+      size: {
+        md: "h-7 w-12 bg-[var(--gray-600)] p-1",
+        sm: "h-5 w-9 bg-fill-strong p-0.5",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+// 그림자는 Figma 명세가 없어 지금 쓰는 Tailwind shadow-sm 값을 그대로 옮긴다
+const switchThumbVariants = cva(
+  "rounded-full bg-fill-elevate shadow-[0_1px_3px_0_rgb(0_0_0/0.1),0_1px_2px_-1px_rgb(0_0_0/0.1)] transition-transform motion-reduce:transition-none",
+  {
+    variants: {
+      size: {
+        md: "size-5 data-checked:translate-x-5",
+        sm: "size-4 data-checked:translate-x-4",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+type SwitchProps = Omit<SwitchPrimitive.Root.Props, "className" | "nativeButton" | "render"> &
+  VariantProps<typeof switchVariants> & {
+    // Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+    className?: string;
+  };
+
+/** 비활성 모양은 지금 화면에 없어 커서만 바꾼다 */
+function Switch({ className, size, ...props }: Readonly<SwitchProps>) {
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
-      data-size={size}
-      className={cn(
-        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
-        className
-      )}
+      // 지금 스위치처럼 폼을 제출하지 않는 <button type="button">으로 그린다. Base UI 기본은 span이다
+      nativeButton
+      render={<button type="button" />}
+      className={cn(switchVariants({ size }), className)}
       {...props}
     >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
-      />
+      <span data-slot="switch-track" className={switchTrackVariants({ size })}>
+        <SwitchPrimitive.Thumb data-slot="switch-thumb" className={switchThumbVariants({ size })} />
+      </span>
     </SwitchPrimitive.Root>
-  )
+  );
 }
 
-export { Switch }
+export { Switch };

From 792a29ae4be15d19b62263b1cf155b20aacd9200 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:23:26 +0900
Subject: [PATCH 14/93] =?UTF-8?q?style(ui):=20Radio=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=20radio=20butt?=
 =?UTF-8?q?on=20=EC=95=84=EC=9D=B4=EC=BD=98=EC=9C=BC=EB=A1=9C=20=EA=B7=B8?=
 =?UTF-8?q?=EB=A6=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma radio button 아이콘: 해제는 border/default 원, 선택은 primary/subtle(원시 변수 blue-50) 원과 10px primary 점
- 간격은 쓰는 쪽이 정하도록 RadioGroup 기본 grid gap 제거

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/radio-group.tsx | 44 +++++++++++++++++--------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
index 8989cb5e..88bd8515 100644
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -1,37 +1,41 @@
-"use client"
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 
-import { Radio as RadioPrimitive } from "@base-ui/react/radio"
-import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
-import { cn } from "cn"
+import { RadioButtonIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
 
-function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+// Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
+type RadioGroupProps = Omit<RadioGroupPrimitive.Props, "className"> & { className?: string };
+type RadioGroupItemProps = Omit<RadioPrimitive.Root.Props, "className"> & { className?: string };
+
+/** 항목 사이 간격은 쓰는 쪽이 className으로 정한다 */
+function RadioGroup({ className, ...props }: Readonly<RadioGroupProps>) {
   return (
-    <RadioGroupPrimitive
-      data-slot="radio-group"
-      className={cn("grid w-full gap-2", className)}
-      {...props}
-    />
-  )
+    <RadioGroupPrimitive data-slot="radio-group" className={cn("flex flex-col", className)} {...props} />
+  );
 }
 
-function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+// Figma ❸ Icon의 radio button(5024:68)으로 그린다. Default(5024:67)는 border/default 원, Activated(5024:65)는 primary/subtle 원과 10px primary 점이다.
+// Activated 원: Figma primary/subtle은 blue/50인데 코드 primary-subtle은 blue-100이라 원시 변수로 Figma 값에 맞춘다.
+// 비활성 모양은 Figma에 없어 커서만 바꾼다. 누르는 영역은 감싸는 label 행이 맡는다
+function RadioGroupItem({ className, ...props }: Readonly<RadioGroupItemProps>) {
   return (
     <RadioPrimitive.Root
       data-slot="radio-group-item"
       className={cn(
-        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 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 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
-        className
+        "relative inline-flex shrink-0 cursor-pointer rounded-full text-border select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-checked:text-[var(--blue-50)] aria-disabled:cursor-not-allowed",
+        className,
       )}
       {...props}
     >
+      {/* size 속성만 주면 shadcn 부모의 [&_svg:not([class*='size-'])]:size-* 규칙에 덮여서 같은 px 클래스로도 준다 */}
+      <RadioButtonIcon size={24} className="size-[24px]" />
       <RadioPrimitive.Indicator
         data-slot="radio-group-indicator"
-        className="flex size-4 items-center justify-center"
-      >
-        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
-      </RadioPrimitive.Indicator>
+        className="absolute inset-0 m-auto size-[10px] rounded-full bg-primary"
+      />
     </RadioPrimitive.Root>
-  )
+  );
 }
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };

From aa946210ace1f4fe236eebf84ed85d82e23cb4b3 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:23:39 +0900
Subject: [PATCH 15/93] =?UTF-8?q?chore(deps):=20=EB=B0=9B=EC=9D=80=20shadc?=
 =?UTF-8?q?n=20=EC=BD=94=EB=93=9C=EA=B0=80=20=EC=93=B0=EB=8D=98=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

- ui 파일이 모두 @/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 7f775aea..8198e11f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,6 @@
         "@vis.gl/react-google-maps": "^1.8.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "cn": "^0.5.0",
         "framer-motion": "^12.38.0",
         "lucide-react": "^1.7.0",
         "next": "16.2.1",
@@ -6135,18 +6134,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/cn": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cn/-/cn-0.5.0.tgz",
-      "integrity": "sha512-JGEixZEpfFXm1P5uXwvEobOFLlHwIWi5v4tjd1ZwfiYmcEilkuD2l+054rvJcYCR1B+uVThHeUbgmNz1FwuxuA==",
-      "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 6fef7fd7..8e9911a0 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
     "@vis.gl/react-google-maps": "^1.8.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cn": "^0.5.0",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.7.0",
     "next": "16.2.1",

From 9526bba4f9ce381c6b1cb9abb0e41d8d20ac8de2 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:23:49 +0900
Subject: [PATCH 16/93] =?UTF-8?q?refactor(toast):=20=EC=95=B1=20=ED=86=A0?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EB=A5=BC=20ui=20Toaster=EB=A1=9C=20=EA=B5=90?=
 =?UTF-8?q?=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AppToaster가 ui/sonner의 Toaster를 그림(기기별 위치·여백은 그대로), richColors 제거
- unstyled로 바뀌어 쓰이지 않는 sonner [data-icon] 24px 규칙 삭제
- toast() 호출부는 그대로 sonner를 씀

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/globals.css           | 7 -------
 src/components/AppToaster.tsx | 6 ++----
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index ea5ef06f..e7a00b79 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -65,13 +65,6 @@ html:has([data-mobile-main-tabs]) {
   --toast-bottom-inset: calc(52px + env(safe-area-inset-bottom));
 }
 
-/* Sonner 기본 [data-icon]는 16×16(상태 SVG용). 아바타 등은 24×24로 맞춤 */
-[data-sonner-toast][data-styled="true"] [data-icon] {
-  width: 24px;
-  height: 24px;
-  justify-content: center;
-}
-
 /**
  * 채팅 메시지 목록 스크롤 영역 — 스크롤바 트랙·막대 항상 표시
  * (패딩은 내부 콘텐츠 래퍼에 두어 말풍선과 스크롤바가 겹치지 않게 함)
diff --git a/src/components/AppToaster.tsx b/src/components/AppToaster.tsx
index c312d363..1e91460b 100644
--- a/src/components/AppToaster.tsx
+++ b/src/components/AppToaster.tsx
@@ -1,14 +1,13 @@
 "use client";
 
-import { Toaster } from "sonner";
-
+import { Toaster } from "@/components/ui/sonner";
 import { readIsMobileDevice } from "@/lib/mobile-view";
 
 /** --toast-bottom-inset은 모바일 하단 탭바가 있을 때만 globals.css에서 정의된다 */
 const MOBILE_BOTTOM_OFFSET = "calc(var(--toast-bottom-inset, 0px) + 16px)";
 export function AppToaster() {
   if (!readIsMobileDevice()) {
-    return <Toaster position="top-right" richColors />;
+    return <Toaster position="top-right" />;
   }
 
   return (
@@ -16,7 +15,6 @@ export function AppToaster() {
       position="bottom-right"
       offset={{ bottom: MOBILE_BOTTOM_OFFSET }}
       mobileOffset={{ bottom: MOBILE_BOTTOM_OFFSET }}
-      richColors
     />
   );
 }

From 50608c7d59f1810335bab959e240d6578fc8ef03 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:57:11 +0900
Subject: [PATCH 17/93] =?UTF-8?q?refactor(spinner):=20=EB=A1=9C=EB=94=A9?=
 =?UTF-8?q?=20=ED=91=9C=EC=8B=9C=EB=A5=BC=20ui=20Spinner=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- LoadingIndicator 27곳(21파일)을 Spinner로 바꾸고 LoadingIndicator.tsx 삭제(label → aria-label, size 14 → 16, 40 → 32)
- 버튼 안 2곳(승인 상태 확인·시간 시트 확인)은 색 className 대신 variant="inverse"
- 테두리 링 3곳(AuthFlowSpinner·RoomGrid·RoomTripSettingsSection)을 Spinner size 32로, RoomGrid의 role=status 래퍼 이름은 Spinner로 옮김
- lucide Loader2 3곳 교체: 이동 수단 행은 size 16·라벨(줄 높이가 튀지 않게 align-top), 일정 카드 사진·AI 처리 중은 장식용 aria-hidden

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../_components/AddMemberPanel.tsx            |  4 ++--
 .../_components/RoomMembersSection.tsx        |  4 ++--
 .../itinerary/AddFromBookmarkModal.tsx        |  4 ++--
 .../_components/itinerary/PlanItinerary.tsx   |  4 ++--
 .../_components/itinerary/PlanPlaceCard.tsx   |  7 ++++---
 .../_components/mobile/MobileTimeSheet.tsx    |  4 ++--
 .../travel-time/TravelDirectionsCard.tsx      |  7 +++----
 .../travel-time/TravelRouteSummaryLine.tsx    |  6 +++---
 src/app/home/(with-header)/my-info/page.tsx   |  4 ++--
 src/app/home/_components/RoomGrid.tsx         |  5 +++--
 src/app/join/[inviteCode]/page.tsx            |  4 ++--
 src/app/waiting/page.tsx                      |  6 +++---
 .../agreements/AgreementConsentSection.tsx    |  4 ++--
 .../agreements/PolicyDocumentView.tsx         |  4 ++--
 src/components/auth/AuthFlowSpinner.tsx       |  4 +++-
 .../chat/messages/ChatMessageGroup.tsx        |  7 ++++---
 .../chat/messages/ChatMessageList.tsx         |  6 +++---
 .../expenses/ExpenseBudgetModal.tsx           |  4 ++--
 .../expenses/ExpenseCategorySummary.tsx       |  4 ++--
 src/components/expenses/ExpenseEditor.tsx     |  6 +++---
 src/components/expenses/ExpensePanel.tsx      |  8 ++++----
 src/components/expenses/ExpenseScopePanel.tsx |  4 ++--
 src/components/expenses/ExpenseViews.tsx      |  4 ++--
 src/components/loading/LoadingIndicator.tsx   | 19 -------------------
 src/components/map/MapPlaceSearch.tsx         |  4 ++--
 src/components/place/AddToBookmarkModal.tsx   |  4 ++--
 src/components/place/AddToScheduleModal.tsx   |  4 ++--
 .../rooms/RoomTripSettingsSection.tsx         |  3 ++-
 28 files changed, 67 insertions(+), 81 deletions(-)
 delete mode 100644 src/components/loading/LoadingIndicator.tsx

diff --git a/src/app/(main)/member-settings/_components/AddMemberPanel.tsx b/src/app/(main)/member-settings/_components/AddMemberPanel.tsx
index 3ae9471a..c8a91c7f 100644
--- a/src/app/(main)/member-settings/_components/AddMemberPanel.tsx
+++ b/src/app/(main)/member-settings/_components/AddMemberPanel.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { CopyCheckIcon, CopyIcon, RefreshIcon, ShareIcon } from "@/assets/icons";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -37,7 +37,7 @@ function InviteFallback({ canIssue, inviteCode, isRoomDetailLoading, isRoomDetai
   isRegenerating: boolean;
 }>) {
   if (isRoomDetailLoading || isRegenerating) {
-    return <LoadingIndicator label={isRoomDetailLoading ? "방 정보 불러오는 중" : "초대 링크 발급 중"} />;
+    return <Spinner aria-label={isRoomDetailLoading ? "방 정보 불러오는 중" : "초대 링크 발급 중"} />;
   }
   let message = "발급에 실패했어요. 아래에서 재발급을 눌러 주세요.";
   if (isRoomDetailError) message = "방 정보를 불러오지 못했어요.";
diff --git a/src/app/(main)/member-settings/_components/RoomMembersSection.tsx b/src/app/(main)/member-settings/_components/RoomMembersSection.tsx
index 36c2bac3..386cc879 100644
--- a/src/app/(main)/member-settings/_components/RoomMembersSection.tsx
+++ b/src/app/(main)/member-settings/_components/RoomMembersSection.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { MainPageHeader } from "@/components/layout/MainPageHeader";
 import { AddMemberPanel } from "./AddMemberPanel";
 import { JoinRequestsSection } from "./JoinRequestsSection";
@@ -54,7 +54,7 @@ export function RoomMembersSection() {
           ) : null}
         </h2>
         {isMembersLoading ? (
-          <LoadingIndicator label="구성원 불러오는 중" className="flex min-h-36 w-full" />
+          <Spinner aria-label="구성원 불러오는 중" className="flex min-h-36 w-full" />
         ) : (
           <MemberList me={me} others={others} isHost={isHost} onKick={requestKick} onTransfer={requestTransfer} />
         )}
diff --git a/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx b/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
index bfef1d87..ad1cadfa 100644
--- a/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
+++ b/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useSheetDrag } from "@/components/mobile/useSheetDrag";
 import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { PlanLoadingSkeleton } from "../PlanLoadingSkeleton";
 
 import { useQueries } from "@tanstack/react-query";
@@ -269,7 +269,7 @@ export function AddFromBookmarkModal({
 
         </BottomSheetDragHandle>
         {categoriesLoading ? (
-          <div className="px-5 py-6 text-center"><LoadingIndicator label="북마크 불러오는 중" /></div>
+          <div className="px-5 py-6 text-center"><Spinner aria-label="북마크 불러오는 중" /></div>
         ) : categoriesError ? (
           <div className="space-y-2 px-5 py-6 text-center">
             <p className="text-body-m-regular mobile:text-body-s-regular text-primary">
diff --git a/src/app/(main)/plan/_components/itinerary/PlanItinerary.tsx b/src/app/(main)/plan/_components/itinerary/PlanItinerary.tsx
index 43e1b919..c239b562 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItinerary.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItinerary.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useReducedMotion } from "framer-motion";
@@ -293,7 +293,7 @@ export function PlanItinerary({ roomId, scheduleId }: PlanItineraryProps) {
           onOpenBookmark={() => setBookmarkModal({})}
         />
         {isAdding ?
-          <LoadingIndicator label="장소 추가 중" />
+          <Spinner aria-label="장소 추가 중" />
         : null}
       </div>
 
diff --git a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
index e8a1e9b6..8c45cce3 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
@@ -5,10 +5,11 @@ import { ExpenseEntryButton } from "@/components/expenses/ExpenseProvider";
 import type { DragEvent } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Image from "next/image";
-import { Loader2, MapPin } from "lucide-react";
+import { MapPin } from "lucide-react";
 
 import { CoinIcon, MemoAddIcon, TimeClockIcon } from "@/assets/icons";
 import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
+import { Spinner } from "@/components/ui/spinner";
 import { toast } from "sonner";
 
 import { useInViewport } from "@/hooks/useInViewport";
@@ -316,8 +317,8 @@ export function PlanPlaceCard({
 
         {(() => {
           const media = photoLoading ? (
-            <Loader2
-              className="absolute inset-0 m-auto h-5 w-5 animate-spin text-primary-strong"
+            <Spinner
+              className="absolute inset-0 m-auto h-5 w-5"
               aria-hidden
             />
           ) : resolvedPhotoUrl ? (
diff --git a/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
index 5414f7f2..47f127a9 100644
--- a/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
@@ -3,8 +3,8 @@
 import { useState } from "react";
 import { toast } from "sonner";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
 import { MobileBottomSheet } from "@/components/mobile/MobileBottomSheet";
+import { Spinner } from "@/components/ui/spinner";
 import { useUpdateScheduleItem } from "@/hooks/useRooms";
 import {
   addMinutesToHm,
@@ -195,7 +195,7 @@ export function MobileTimeSheet({
               : "bg-[var(--gray-800)] enabled:hover:bg-[var(--gray-700)] enabled:active:bg-[var(--gray-900)] disabled:bg-fill disabled:text-text-disabled",
           )}
         >
-          {isPending ? <LoadingIndicator label="저장 중" className="text-text-inverse" /> : "확인"}
+          {isPending ? <Spinner aria-label="저장 중" variant="inverse" /> : "확인"}
         </button>
       </div>
     </MobileBottomSheet>
diff --git a/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.tsx b/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.tsx
index 8bf43af2..47bcf5fa 100644
--- a/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.tsx
+++ b/src/app/(main)/plan/_components/travel-time/TravelDirectionsCard.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { ChevronDown, ExternalLink, EyeOff, Loader2 } from "lucide-react";
+import { ChevronDown, ExternalLink, EyeOff } from "lucide-react";
 import { toast } from "sonner";
 
+import { Spinner } from "@/components/ui/spinner";
 import type { ScheduleItemRouteResponse } from "@/lib/api/rooms";
 import {
   formatRouteDistance,
@@ -146,9 +147,7 @@ export function TravelDirectionsCard({
                     {formatRouteDistance(rowSummary.distanceMeters)}
                   </>
                 ) : modeRouteRowLoading[value] ? (
-                  <span className="inline-flex items-center gap-1 text-dark-gray">
-                    <Loader2 className="h-3 w-3 animate-spin" />
-                  </span>
+                  <Spinner aria-label="이동 시간 불러오는 중" size={16} className="align-top" />
                 ) : null; // 고르지 않은 수단은 골라야 계산한다(미리 조회하지 않음)
               const rowClass = cn(
                 "col-span-3 grid grid-cols-subgrid items-center rounded-md px-1.5 py-1.5 text-left text-body-s-regular mobile:text-body-xs-regular",
diff --git a/src/app/(main)/plan/_components/travel-time/TravelRouteSummaryLine.tsx b/src/app/(main)/plan/_components/travel-time/TravelRouteSummaryLine.tsx
index 5d3d7e44..3629c108 100644
--- a/src/app/(main)/plan/_components/travel-time/TravelRouteSummaryLine.tsx
+++ b/src/app/(main)/plan/_components/travel-time/TravelRouteSummaryLine.tsx
@@ -1,4 +1,4 @@
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import type { ScheduleItemRouteResponse } from "@/lib/api/rooms";
 import { formatRouteDistance, formatRouteDuration } from "@/lib/plan/routeFormat";
@@ -37,13 +37,13 @@ export function TravelRouteSummaryLine({
 
   if (isFetching) {
     return (
-      <LoadingIndicator label="이동 시간 불러오는 중" size={14} />
+      <Spinner aria-label="이동 시간 불러오는 중" size={16} />
     );
   }
 
   if (isPending) {
     return (
-      <LoadingIndicator label="이동 시간 불러오는 중" size={14} />
+      <Spinner aria-label="이동 시간 불러오는 중" size={16} />
     );
   }
   if (isError) return <span className="text-status-negative">경로 조회 오류</span>;
diff --git a/src/app/home/(with-header)/my-info/page.tsx b/src/app/home/(with-header)/my-info/page.tsx
index 5362cc22..efab83c5 100644
--- a/src/app/home/(with-header)/my-info/page.tsx
+++ b/src/app/home/(with-header)/my-info/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import Link from "next/link";
 import { ArrowLeft, ChevronRight } from "lucide-react";
@@ -100,7 +100,7 @@ export default function MyInfoPage() {
 
           {isLoading && (
             <div className="flex items-center justify-center py-20">
-              <LoadingIndicator label="내 정보 불러오는 중" size={32} />
+              <Spinner aria-label="내 정보 불러오는 중" size={32} />
             </div>
           )}
 
diff --git a/src/app/home/_components/RoomGrid.tsx b/src/app/home/_components/RoomGrid.tsx
index b6a65de2..f6019143 100644
--- a/src/app/home/_components/RoomGrid.tsx
+++ b/src/app/home/_components/RoomGrid.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { Spinner } from "@/components/ui/spinner";
 import { RoomListItem } from "@/lib/api/rooms";
 import { RoomCard } from "./RoomCard";
 import { NewTripLink } from "./NewTripLink";
@@ -24,8 +25,8 @@ export function RoomGrid({
 }: Props) {
   if (isLoading) {
     return (
-      <div role="status" aria-label="여행 목록 불러오는 중" className="flex items-center justify-center py-20">
-        <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-border border-t-primary" />
+      <div className="flex items-center justify-center py-20">
+        <Spinner aria-label="여행 목록 불러오는 중" size={32} />
       </div>
     );
   }
diff --git a/src/app/join/[inviteCode]/page.tsx b/src/app/join/[inviteCode]/page.tsx
index b9b4a21c..69615cc8 100644
--- a/src/app/join/[inviteCode]/page.tsx
+++ b/src/app/join/[inviteCode]/page.tsx
@@ -4,7 +4,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { BrandLogo } from "@/components/BrandLogo";
 
 import { checkClientAuthenticated, setPendingInviteCode } from "@/lib/auth";
@@ -103,7 +103,7 @@ export default function JoinPage() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center gap-6 bg-gradient-to-b from-bubble-gray/80 via-white to-white px-4">
       <BrandLogo variant="combination" size="M" alt="우때 로고" />
-      <LoadingIndicator label="입장 요청 중" size={40} />
+      <Spinner aria-label="입장 요청 중" size={32} />
     </div>
   );
 }
diff --git a/src/app/waiting/page.tsx b/src/app/waiting/page.tsx
index 46d16bf1..53e991a2 100644
--- a/src/app/waiting/page.tsx
+++ b/src/app/waiting/page.tsx
@@ -5,7 +5,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useState } from "react";
 
 import { BrandLogo } from "@/components/BrandLogo";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import { useCheckJoinStatus } from "@/hooks/useRooms";
 import { getRoomDetail, HttpError } from "@/lib/api/rooms";
@@ -114,7 +114,7 @@ function WaitingContent() {
             aria-busy={isChecking}
             className="flex h-12 w-full cursor-pointer items-center justify-center rounded-lg bg-primary text-label-l-emphasis text-text-inverse transition-colors enabled:hover:bg-primary-strong disabled:cursor-not-allowed"
           >
-            {isChecking ? <LoadingIndicator label="승인 상태 확인 중" className="text-text-inverse" /> : "승인 상태 확인"}
+            {isChecking ? <Spinner aria-label="승인 상태 확인 중" variant="inverse" /> : "승인 상태 확인"}
           </button>
         )}
       </div>
@@ -133,7 +133,7 @@ export default function WaitingPage() {
     <Suspense
       fallback={
         <div className="flex min-h-screen items-center justify-center bg-fill-elevate">
-          <LoadingIndicator label="승인 대기 화면 준비 중" size={32} />
+          <Spinner aria-label="승인 대기 화면 준비 중" size={32} />
         </div>
       }
     >
diff --git a/src/components/agreements/AgreementConsentSection.tsx b/src/components/agreements/AgreementConsentSection.tsx
index 93c60f7a..842b178d 100644
--- a/src/components/agreements/AgreementConsentSection.tsx
+++ b/src/components/agreements/AgreementConsentSection.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import { ChevronRight } from "lucide-react";
 import Link from "next/link";
@@ -55,7 +55,7 @@ export function AgreementConsentSection({ onStateChange }: Props) {
   if (isPending) {
     return (
       <div className="w-full rounded-xl border border-gray-border bg-bubble-gray/40 px-4 py-3 text-left">
-        <LoadingIndicator label="약관 불러오는 중" />
+        <Spinner aria-label="약관 불러오는 중" />
       </div>
     );
   }
diff --git a/src/components/agreements/PolicyDocumentView.tsx b/src/components/agreements/PolicyDocumentView.tsx
index ccfdcd47..cb7804ab 100644
--- a/src/components/agreements/PolicyDocumentView.tsx
+++ b/src/components/agreements/PolicyDocumentView.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import { useCurrentAgreements } from "@/hooks/useCurrentAgreements";
 import { findAgreementByType } from "@/lib/agreements/paths";
@@ -21,7 +21,7 @@ export function PolicyDocumentView({ agreementType }: Props) {
     return (
       <div className="mx-auto w-full max-w-3xl rounded-3xl border border-gray-border bg-white/95 px-6 py-10 text-center shadow-[0_24px_80px_-12px_rgba(15,23,42,0.12)] backdrop-blur-sm">
         <PolicyHomeLink />
-        <LoadingIndicator label="문서 불러오는 중" />
+        <Spinner aria-label="문서 불러오는 중" />
       </div>
     );
   }
diff --git a/src/components/auth/AuthFlowSpinner.tsx b/src/components/auth/AuthFlowSpinner.tsx
index 895fd817..021c4e84 100644
--- a/src/components/auth/AuthFlowSpinner.tsx
+++ b/src/components/auth/AuthFlowSpinner.tsx
@@ -1,8 +1,10 @@
+import { Spinner } from "@/components/ui/spinner";
+
 /** 로그인·OAuth 콜백 등 전체 화면 로딩 표시 (배경·스피너 동일). */
 export function AuthFlowSpinner() {
   return (
     <div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-bubble-gray/80 via-white to-white px-4">
-      <div className="h-10 w-10 animate-spin rounded-full border-2 border-gray-border border-t-primary" />
+      <Spinner size={32} />
     </div>
   );
 }
diff --git a/src/components/chat/messages/ChatMessageGroup.tsx b/src/components/chat/messages/ChatMessageGroup.tsx
index 511d4a0f..f04172de 100644
--- a/src/components/chat/messages/ChatMessageGroup.tsx
+++ b/src/components/chat/messages/ChatMessageGroup.tsx
@@ -5,9 +5,9 @@ import { getChatPanelLook } from "@/components/chat/chat-panel-look";
 import { AiResponseBubble } from "@/components/chat/messages/AiResponseBubble";
 import { ChatMemberAvatarRing } from "@/components/chat/messages/ChatMemberAvatarRing";
 import type { ChatMessageTextTypography } from "@/components/chat/chat-typography";
+import { Spinner } from "@/components/ui/spinner";
 import { cn } from "@/lib/utils";
 import type { AiRequestStatus, ChatMessage } from "@/types/chat";
-import { Loader2 } from "lucide-react";
 
 function labelForAiStatus(status: AiRequestStatus): string {
   const labels: Record<AiRequestStatus, string> = {
@@ -64,8 +64,9 @@ function AiRequestMetaRow({
         {ar.aiStatus === "PROCESSING" ? (
           <span className="inline-flex items-center gap-1.5">
             <span>{labelForAiStatus(ar.aiStatus)}</span>
-            <Loader2
-              className="h-3.5 w-3.5 shrink-0 animate-spin text-primary-strong"
+            <Spinner
+              size={16}
+              className="shrink-0"
               aria-hidden
             />
           </span>
diff --git a/src/components/chat/messages/ChatMessageList.tsx b/src/components/chat/messages/ChatMessageList.tsx
index 1bbeebe4..c37ea9ec 100644
--- a/src/components/chat/messages/ChatMessageList.tsx
+++ b/src/components/chat/messages/ChatMessageList.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import {
   useCallback,
@@ -458,7 +458,7 @@ export function ChatMessageList({
                 isMinimized && "mb-1.5 min-h-4 text-body-xs-regular",
               )}
             >
-              <LoadingIndicator label="이전 메시지 불러오는 중" size={isMinimized ? 16 : 20} />
+              <Spinner aria-label="이전 메시지 불러오는 중" size={isMinimized ? 16 : 20} />
             </div>
           ) : null}
           {readMarkerMessageId != null &&
@@ -526,7 +526,7 @@ export function ChatMessageList({
                 isMinimized && "mt-1.5 min-h-4 text-body-xs-regular",
               )}
             >
-              <LoadingIndicator label="다음 메시지 불러오는 중" size={isMinimized ? 16 : 20} />
+              <Spinner aria-label="다음 메시지 불러오는 중" size={isMinimized ? 16 : 20} />
             </div>
           ) : null}
           <div
diff --git a/src/components/expenses/ExpenseBudgetModal.tsx b/src/components/expenses/ExpenseBudgetModal.tsx
index 1859a872..1c9d122d 100644
--- a/src/components/expenses/ExpenseBudgetModal.tsx
+++ b/src/components/expenses/ExpenseBudgetModal.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import { useCallback, useId, useRef, useState } from "react";
 import {
@@ -175,7 +175,7 @@ export function ExpenseBudgetModal({
               <p>
                 {conflict.failed
                   ? "최신 예산 조회에 실패했어요. 다시 조회한 뒤 확인해 주세요."
-                  : <LoadingIndicator label="최신 예산 확인 중" />}
+                  : <Spinner aria-label="최신 예산 확인 중" />}
               </p>
             )}
             {conflict.failed && (
diff --git a/src/components/expenses/ExpenseCategorySummary.tsx b/src/components/expenses/ExpenseCategorySummary.tsx
index c21a5a16..25082faf 100644
--- a/src/components/expenses/ExpenseCategorySummary.tsx
+++ b/src/components/expenses/ExpenseCategorySummary.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { ExpenseKrwAmount } from "./ExpenseKrw";
 import { useId, useState } from "react";
 import { ChevronDownIcon } from "@/assets/icons";
@@ -48,7 +48,7 @@ export function ExpenseCategorySummary() {
         className={`${expanded ? "block" : "hidden"} @min-[800px]/expenses:block`}
       >
         {list.isPending && (
-          <LoadingIndicator label="비용 요약 불러오는 중" className="flex w-full py-3" />
+          <Spinner aria-label="비용 요약 불러오는 중" className="flex w-full py-3" />
         )}
         {list.isSuccess && !rows.length && (
           <p className="py-3 text-body-xs-regular text-text-subtle">
diff --git a/src/components/expenses/ExpenseEditor.tsx b/src/components/expenses/ExpenseEditor.tsx
index 4fc3a7e5..e60695b9 100644
--- a/src/components/expenses/ExpenseEditor.tsx
+++ b/src/components/expenses/ExpenseEditor.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { useMobileView } from "@/contexts/MobileViewContext";
 import { useSheetDrag } from "@/components/mobile/useSheetDrag";
 import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
@@ -53,7 +53,7 @@ function ExpenseEditorConflict({
   let message = "비용이 삭제되었어요. 입력 내용은 복사할 수 있어요.";
   if (pending) message = "최신 비용 확인 중…";
   else if (conflict.failed) message = "최신 비용 조회에 실패했어요. 저장은 중단돼요.";
-  const unavailable = pending ? <LoadingIndicator label={message} /> : <p>{message}</p>;
+  const unavailable = pending ? <Spinner aria-label={message} /> : <p>{message}</p>;
   return (
     <div
       role="alert"
@@ -326,7 +326,7 @@ export function ExpenseEditor({
   }
   const memberFallback = context.memberStatus === "error"
               ? <output className="block text-body-s-regular mobile:text-body-xs-regular text-dark-gray">멤버 정보 조회 실패. 기존 선택은 유지되며 저장은 잠시 중단돼요.</output>
-              : <LoadingIndicator label="멤버 정보 불러오는 중" className="flex min-h-28 w-full" />;
+              : <Spinner aria-label="멤버 정보 불러오는 중" className="flex min-h-28 w-full" />;
   return (
     <dialog
       ref={dialog}
diff --git a/src/components/expenses/ExpensePanel.tsx b/src/components/expenses/ExpensePanel.tsx
index 5c8043b2..f0a996ec 100644
--- a/src/components/expenses/ExpensePanel.tsx
+++ b/src/components/expenses/ExpensePanel.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { cn } from "@/lib/utils";
 import { expenseTitle } from "@/lib/expenses/expense-name";
 
@@ -51,7 +51,7 @@ function ExpenseDeleteConflict({
   if (deleting) message = "최신 비용 확인 중…";
   else if (conflict.failed)
     message = "최신 비용 조회에 실패했어요. 삭제는 중단돼요.";
-  const unavailable = deleting ? <LoadingIndicator label={message} /> : <p>{message}</p>;
+  const unavailable = deleting ? <Spinner aria-label={message} /> : <p>{message}</p>;
   return (
     <div
       role="alert"
@@ -465,7 +465,7 @@ export function ExpensePanel() {
             )}
           </div>
           {context.filteredKrwSummary?.isError && <p role="alert">선택한 비용의 원화 조회에 실패했어요. 조회 다시 시도 버튼을 눌러 주세요.</p>}
-          {context.list.isPending ? <LoadingIndicator label="비용 목록 불러오는 중" className="flex min-h-40 w-full" /> : context.list.isSuccess && (
+          {context.list.isPending ? <Spinner aria-label="비용 목록 불러오는 중" className="flex min-h-40 w-full" /> : context.list.isSuccess && (
             <>
               <div aria-busy={categoryPending}>
                 <ExpenseList
@@ -523,7 +523,7 @@ export function ExpensePanel() {
           }
         >
           {context.summary.isPending && (
-            <LoadingIndicator label="정산 불러오는 중" className="flex min-h-32 w-full" />
+            <Spinner aria-label="정산 불러오는 중" className="flex min-h-32 w-full" />
           )}
           {context.summary.isError && (
             <div className="space-y-3">
diff --git a/src/components/expenses/ExpenseScopePanel.tsx b/src/components/expenses/ExpenseScopePanel.tsx
index ea26e561..88c7960f 100644
--- a/src/components/expenses/ExpenseScopePanel.tsx
+++ b/src/components/expenses/ExpenseScopePanel.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { useMobileView } from "@/contexts/MobileViewContext";
 import { useSheetDrag } from "@/components/mobile/useSheetDrag";
 import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
@@ -154,7 +154,7 @@ export function ExpenseScopePanel({
           {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>
           {isPending && !scoped.length ? (
-            <LoadingIndicator label="비용 불러오는 중" className="flex w-full py-5" />
+            <Spinner aria-label="비용 불러오는 중" className="flex w-full py-5" />
           ) : isError && !scoped.length ? (
             <div className="space-y-3 py-5 text-body-s-regular text-dark-gray">
               <p role="alert">비용 조회에 실패했어요.</p>
diff --git a/src/components/expenses/ExpenseViews.tsx b/src/components/expenses/ExpenseViews.tsx
index 8f4ec007..c32809ee 100644
--- a/src/components/expenses/ExpenseViews.tsx
+++ b/src/components/expenses/ExpenseViews.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { ExpenseKrwAmount, ExpenseRowAmount } from "./ExpenseKrw";
 import { expenseTitle } from "@/lib/expenses/expense-name";
 
@@ -527,7 +527,7 @@ function SettlementContent({
 }: Readonly<SettlementProps>) {
   if (scope === "mine" && currentUserId === undefined) {
     return (
-      <LoadingIndicator label="내 정산 사용자 정보 불러오는 중" className="flex w-full py-4" />
+      <Spinner aria-label="내 정산 사용자 정보 불러오는 중" className="flex w-full py-4" />
     );
   }
   if (!summary.currencies.length) {
diff --git a/src/components/loading/LoadingIndicator.tsx b/src/components/loading/LoadingIndicator.tsx
deleted file mode 100644
index af97ac6a..00000000
--- a/src/components/loading/LoadingIndicator.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { LoaderCircle } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-/** A compact visual indicator with a screen-reader-only loading announcement. */
-export function LoadingIndicator({
-  label = "불러오는 중",
-  className,
-  size = 20,
-}: Readonly<{
-  label?: string;
-  className?: string;
-  size?: number;
-}>) {
-  return (
-    <output aria-label={label} className={cn("inline-flex items-center justify-center text-text-subtle", className)}>
-      <LoaderCircle size={size} aria-hidden="true" className="animate-spin motion-reduce:animate-none" />
-    </output>
-  );
-}
diff --git a/src/components/map/MapPlaceSearch.tsx b/src/components/map/MapPlaceSearch.tsx
index d543bb1d..32954c3e 100644
--- a/src/components/map/MapPlaceSearch.tsx
+++ b/src/components/map/MapPlaceSearch.tsx
@@ -5,7 +5,7 @@ import { flushSync } from "react-dom";
 import { useMobileMapSearchStore } from "@/stores/mobile-map-search-store";
 import { useSearchParams } from "next/navigation";
 import { MapPlaceSearchInput } from "@/components/search/MapPlaceSearchInput";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 import { usePlaceSearchStore } from "@/stores/place-search-store";
 import type { SearchConfirmation } from "@/lib/places/search-session";
 import { useMapPlaceSearch } from "./useMapPlaceSearch";
@@ -101,7 +101,7 @@ function SearchFeedback({ status, error, hasItems, retry }: Readonly<{
   hasItems: boolean;
   retry: () => void;
 }>) {
-  if (status === "pending") return <LoadingIndicator label="장소 검색 중" />;
+  if (status === "pending") return <Spinner aria-label="장소 검색 중" />;
   if (status === "error") return (
     <div role="alert" className="flex items-center gap-2 text-body-s-regular text-text">
       <span>{error}</span>
diff --git a/src/components/place/AddToBookmarkModal.tsx b/src/components/place/AddToBookmarkModal.tsx
index 5018d60b..967c184a 100644
--- a/src/components/place/AddToBookmarkModal.tsx
+++ b/src/components/place/AddToBookmarkModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import { Check, Plus } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -256,7 +256,7 @@ export function AddToBookmarkModal({
 
           {categoriesLoading && (
             <div className="flex justify-center py-6">
-              <LoadingIndicator label="북마크 불러오는 중" />
+              <Spinner aria-label="북마크 불러오는 중" />
             </div>
           )}
 
diff --git a/src/components/place/AddToScheduleModal.tsx b/src/components/place/AddToScheduleModal.tsx
index 5519352f..f783e4c5 100644
--- a/src/components/place/AddToScheduleModal.tsx
+++ b/src/components/place/AddToScheduleModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
 
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect } from "react";
@@ -132,7 +132,7 @@ export function AddToScheduleModal({
 
           {rid && schedulesLoading ? (
             <div className="flex justify-center py-6">
-              <LoadingIndicator label="일정 불러오는 중" />
+              <Spinner aria-label="일정 불러오는 중" />
             </div>
           ) : null}
 
diff --git a/src/components/rooms/RoomTripSettingsSection.tsx b/src/components/rooms/RoomTripSettingsSection.tsx
index 98473854..1bd9f1d5 100644
--- a/src/components/rooms/RoomTripSettingsSection.tsx
+++ b/src/components/rooms/RoomTripSettingsSection.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 
 import { DeleteConfirmModal } from "@/app/home/_components/DeleteConfirmModal";
 import { RoomTripEditForm } from "@/components/rooms/RoomTripEditForm";
+import { Spinner } from "@/components/ui/spinner";
 import { useCurrentRoomMembership } from "@/hooks/useCurrentRoomMembership";
 import { isRoomMemberRole } from "@/lib/rooms";
 import { useSessionStore } from "@/stores/session-store";
@@ -54,7 +55,7 @@ export function RoomTripSettingsSection({ onSaved }: { onSaved?: () => void }) {
 
       {isLoading ? (
         <div className="flex items-center justify-center py-20">
-          <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-border border-t-primary" />
+          <Spinner aria-label="여행 정보 불러오는 중" size={32} />
         </div>
       ) : !roomSource || !roomId ? (
         <p className="py-10 text-center text-body-m-regular mobile:text-body-s-regular text-dark-gray">

From b01aefb01f297fbd02003fc94395a6975549ba5f Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:57:11 +0900
Subject: [PATCH 18/93] =?UTF-8?q?refactor(chip):=20=EC=A7=80=EB=8F=84=20?=
 =?UTF-8?q?=EC=B9=A9=EA=B3=BC=20=EB=AA=A9=EC=A0=81=EC=A7=80=20=EC=B9=A9?=
 =?UTF-8?q?=EC=9D=84=20ui=20Chip=EC=9C=BC=EB=A1=9C=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 지도 카테고리·선택 카테고리·'영업 중' 칩을 Chip(outline md)으로, 아이콘은 Figma travel 아이콘(글자색을 따름)으로 바꿈
- 지도 칩 그림자를 칩 대신 가로 스크롤 줄 drop-shadow로 옮김(Figma Chip에는 그림자가 없음)
- 카테고리 초기화 버튼은 chipVariants와 CloseIcon, 평점 트리거 helper는 하나만 남기고 칩 값에 맞춤
- 목적지 입력값 칩을 chipVariants outline md로 바꾸고 제거 버튼 누르는 영역을 44×44로 넓힘
- 쓰지 않게 된 map-search SVG 6개와 MapSearchIcon 이름 정리

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/map-search/attraction.svg              |  8 ----
 public/map-search/hotel.svg                   | 14 -------
 public/map-search/museum.svg                  | 19 ---------
 public/map-search/reset.svg                   |  6 ---
 public/map-search/restaurant.svg              | 14 -------
 public/map-search/transit.svg                 | 11 ------
 src/components/filter-dropdown.tsx            |  9 +----
 src/components/map/MapCategoryChips.tsx       | 39 +++++++------------
 src/components/map/MapDiscoverToolbar.tsx     | 18 ++++-----
 src/components/map/MapFilter.tsx              | 22 ++++-------
 src/components/map/MapSearchIcon.tsx          |  3 +-
 src/components/map/map-chip-button.ts         | 19 ++-------
 src/components/map/map-place-categories.ts    | 24 ++++++++----
 .../rooms/DestinationChipsField.tsx           | 12 +++---
 src/components/rooms/RoomTripEditFields.tsx   |  7 ++--
 15 files changed, 63 insertions(+), 162 deletions(-)
 delete mode 100644 public/map-search/attraction.svg
 delete mode 100644 public/map-search/hotel.svg
 delete mode 100644 public/map-search/museum.svg
 delete mode 100644 public/map-search/reset.svg
 delete mode 100644 public/map-search/restaurant.svg
 delete mode 100644 public/map-search/transit.svg

diff --git a/public/map-search/attraction.svg b/public/map-search/attraction.svg
deleted file mode 100644
index 30038055..00000000
--- a/public/map-search/attraction.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon">
-<path id="Vector" d="M2.33333 11.6667C6.11133 14.778 9.88867 14.778 13.6667 11.6667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_2" d="M12.6667 12.3333L11.3333 6.66667L12 5.33333L13.3333 6L14.3333 5L12.6667 2C9.29867 2.14533 8.67333 4.08867 8 6H4C3.46957 6 2.96086 6.21071 2.58579 6.58579C2.21071 6.96086 2 7.46957 2 8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_3" d="M3.33333 12.3333L4.66667 6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_4" d="M5.33333 13.3333L6.66667 10H9.33333L10.6667 13.3333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-</g>
-</svg>
diff --git a/public/map-search/hotel.svg b/public/map-search/hotel.svg
deleted file mode 100644
index e3fad22b..00000000
--- a/public/map-search/hotel.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon" clip-path="url(#clip0_0_179)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M2.66667 7.33333C3.02029 7.33333 3.35943 7.47381 3.60948 7.72386C3.85952 7.97391 4 8.31304 4 8.66667V9.33333H12V8.66667C12 8.31304 12.1405 7.97391 12.3905 7.72386C12.6406 7.47381 12.9797 7.33333 13.3333 7.33333C13.687 7.33333 14.0261 7.47381 14.2761 7.72386C14.5262 7.97391 14.6667 8.31304 14.6667 8.66667V12C14.6667 12.1768 14.5964 12.3464 14.4714 12.4714C14.3464 12.5964 14.1768 12.6667 14 12.6667H2C1.82319 12.6667 1.65362 12.5964 1.5286 12.4714C1.40357 12.3464 1.33333 12.1768 1.33333 12V8.66667C1.33333 8.31304 1.47381 7.97391 1.72386 7.72386C1.97391 7.47381 2.31304 7.33333 2.66667 7.33333Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_3" d="M2.66667 7.33333V5.33333C2.66667 4.8029 2.87738 4.29419 3.25245 3.91912C3.62753 3.54405 4.13623 3.33333 4.66667 3.33333H11.3333C11.8638 3.33333 12.3725 3.54405 12.7475 3.91912C13.1226 4.29419 13.3333 4.8029 13.3333 5.33333V7.33333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_4" d="M8 3.33333V9.33333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-</g>
-<defs>
-<clipPath id="clip0_0_179">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/map-search/museum.svg b/public/map-search/museum.svg
deleted file mode 100644
index 50eb214f..00000000
--- a/public/map-search/museum.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon" clip-path="url(#clip0_0_194)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M2 14H14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_3" d="M2 6.66667H14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_4" d="M3.33333 4L8 2L12.6667 4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_5" d="M2.66667 6.66667V14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_6" d="M13.3333 6.66667V14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_7" d="M5.33333 9.33333V11.3333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_8" d="M8 9.33333V11.3333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_9" d="M10.6667 9.33333V11.3333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-</g>
-<defs>
-<clipPath id="clip0_0_194">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/map-search/reset.svg b/public/map-search/reset.svg
deleted file mode 100644
index f0c45e54..00000000
--- a/public/map-search/reset.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon">
-<path id="Vector" d="M12 4L4 12" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#16181D"/>
-<path id="Vector_2" d="M4 4L12 12" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#3B3F4E"/>
-</g>
-</svg>
diff --git a/public/map-search/restaurant.svg b/public/map-search/restaurant.svg
deleted file mode 100644
index 09b7a658..00000000
--- a/public/map-search/restaurant.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon" clip-path="url(#clip0_0_169)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M4.83919 2.33333V7.90839M4.83919 7.90839V13.6667M4.83919 7.90839C4.57655 7.90839 4.31648 7.85665 4.07383 7.75614C3.83117 7.65564 3.6107 7.50832 3.42498 7.3226C3.23926 7.13688 3.09194 6.9164 2.99143 6.67375C2.89092 6.4311 2.83919 6.17103 2.83919 5.90839V2.33333M4.83919 7.90839C5.10184 7.90839 5.36191 7.85665 5.60456 7.75614C5.84721 7.65564 6.06769 7.50832 6.25341 7.3226C6.43912 7.13688 6.58644 6.9164 6.68695 6.67375C6.78746 6.4311 6.83919 6.17103 6.83919 5.90839V2.33333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_3" d="M9.16081 5C9.16081 5.70724 9.37152 6.38552 9.74659 6.88562C10.1217 7.38572 10.6304 7.66667 11.1608 7.66667C11.6912 7.66667 12.1999 7.38572 12.575 6.88562C12.9501 6.38552 13.1608 5.70724 13.1608 5C13.1608 4.29276 12.9501 3.61448 12.575 3.11438C12.1999 2.61428 11.6912 2.33333 11.1608 2.33333C10.6304 2.33333 10.1217 2.61428 9.74659 3.11438C9.37152 3.61448 9.16081 4.29276 9.16081 5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_4" d="M11.1608 7.66667V13.6667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-</g>
-<defs>
-<clipPath id="clip0_0_169">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/map-search/transit.svg b/public/map-search/transit.svg
deleted file mode 100644
index 721fffd2..00000000
--- a/public/map-search/transit.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Leading Icon">
-<path id="Vector" d="M14 8.66667C14 6.08667 11.7533 4 7.33333 4H2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_2" d="M2 10H12.6667C13.0203 10 13.3594 9.85952 13.6095 9.60948C13.8595 9.35943 14 9.02029 14 8.66667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_3" d="M2 4V7.33333H13.6667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_4" d="M2 7.33333V10" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_5" d="M5.33333 7.33333V4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_6" d="M8.66667 7.33333V4.33333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-<path id="Vector_7" d="M2 12.6667H14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#005BD9"/>
-</g>
-</svg>
diff --git a/src/components/filter-dropdown.tsx b/src/components/filter-dropdown.tsx
index 4c50bd05..d36a4b0d 100644
--- a/src/components/filter-dropdown.tsx
+++ b/src/components/filter-dropdown.tsx
@@ -6,10 +6,7 @@ import { createPortal } from "react-dom";
 import { MapSearchIcon } from "@/components/map/MapSearchIcon";
 import { cn } from "@/lib/utils";
 
-import {
-  mapFilterChipActiveRingClassName,
-  mapFilterChipInactiveClassName,
-} from "@/components/map/map-chip-button";
+import { mapChipButtonClassName } from "@/components/map/map-chip-button";
 
 export type FilterOption<T extends string> = { label: string; value: T };
 
@@ -88,9 +85,7 @@ export function FilterDropdown<T extends string>({
         }}
         className={cn(
           "flex items-center gap-1",
-          isActive
-            ? mapFilterChipActiveRingClassName()
-            : mapFilterChipInactiveClassName(),
+          mapChipButtonClassName(isActive),
         )}
       >
         <span>{isActive ? selectedLabel : label}</span>
diff --git a/src/components/map/MapCategoryChips.tsx b/src/components/map/MapCategoryChips.tsx
index a55789ff..6c2bd7a3 100644
--- a/src/components/map/MapCategoryChips.tsx
+++ b/src/components/map/MapCategoryChips.tsx
@@ -1,11 +1,9 @@
 "use client";
 
-import { MapSearchIcon } from "./MapSearchIcon";
-
+import { Chip } from "@/components/ui/chip";
 import { cn } from "@/lib/utils";
 
 import { MAP_PLACE_CATEGORIES } from "./map-place-categories";
-import { mapChipButtonClassName } from "./map-chip-button";
 
 type MapCategoryChipsProps = {
   selectedCategoryId: string | null;
@@ -19,11 +17,6 @@ export function MapCategoryChips({
   onSelectCategory,
   className,
 }: MapCategoryChipsProps) {
-  function handleChipClick(categoryId: string) {
-    if (selectedCategoryId === categoryId) onSelectCategory(null);
-    else onSelectCategory(categoryId);
-  }
-
   return (
     <div
       className={cn(
@@ -31,24 +24,18 @@ export function MapCategoryChips({
         className,
       )}
     >
-      {MAP_PLACE_CATEGORIES.map((cat) => {
-        const active = selectedCategoryId === cat.id;
-        return (
-          <button
-            key={cat.id}
-            type="button"
-            onClick={() => handleChipClick(cat.id)}
-            aria-pressed={active}
-            className={cn(
-              "flex items-center gap-1.5",
-              mapChipButtonClassName(active),
-            )}
-          >
-            <MapSearchIcon name={cat.icon}/>
-            <span>{cat.label}</span>
-          </button>
-        );
-      })}
+      {MAP_PLACE_CATEGORIES.map((cat) => (
+        <Chip
+          key={cat.id}
+          variant="outline"
+          size="md"
+          pressed={selectedCategoryId === cat.id}
+          onPressedChange={(pressed) => onSelectCategory(pressed ? cat.id : null)}
+        >
+          <cat.icon />
+          <span>{cat.label}</span>
+        </Chip>
+      ))}
     </div>
   );
 }
diff --git a/src/components/map/MapDiscoverToolbar.tsx b/src/components/map/MapDiscoverToolbar.tsx
index 35cf6e45..c58ea7c3 100644
--- a/src/components/map/MapDiscoverToolbar.tsx
+++ b/src/components/map/MapDiscoverToolbar.tsx
@@ -3,7 +3,8 @@
 import { type ReactNode } from "react";
 import { flushSync } from "react-dom";
 
-import { CircleCancelIcon, SearchIcon } from "@/assets/icons";
+import { CircleCancelIcon, CloseIcon, SearchIcon } from "@/assets/icons";
+import { Chip, chipVariants } from "@/components/ui/chip";
 import { useMobileView } from "@/contexts/MobileViewContext";
 import { useMobileMapSearchStore } from "@/stores/mobile-map-search-store";
 
@@ -14,9 +15,7 @@ import {
 import { cn } from "@/lib/utils";
 
 import MapFilter from "./MapFilter";
-import { MapSearchIcon } from "./MapSearchIcon";
 import { MAP_PLACE_CATEGORIES } from "./map-place-categories";
-import { mapChipButtonClassName } from "./map-chip-button";
 import { MapCategoryChips } from "./MapCategoryChips";
 import type { OpenValue, RatingValue } from "./map-filters";
 
@@ -57,16 +56,17 @@ export function MapDiscoverToolbar({
       {isMobileDevice ? <MobileMapSearchBar /> : null}
       <div className="flex min-h-12 min-w-0 flex-nowrap items-center gap-6">
         <div className="pointer-events-auto min-w-0 flex-1">
-          <div className="-my-2 overflow-x-auto py-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {/* Figma Chip에는 그림자가 없어 지도 위에 뜨는 그림자를 칩마다 주지 않고 이 줄에 준다. 색은 검색 말풍선과 같은 #0000001a, drop-shadow 5px는 box-shadow 10px와 같은 퍼짐이다 */}
+          <div className="-my-2 overflow-x-auto py-2 drop-shadow-[0_2px_5px_#0000001a] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
             {category ? (
               <div className="flex w-max flex-nowrap items-center gap-1.5">
-                <button type="button" aria-pressed onClick={resetCategory} className={mapChipButtonClassName(true)}>
-                  <MapSearchIcon name={category.icon}/><span>{category.label}</span>
-                </button>
+                <Chip variant="outline" size="md" pressed onPressedChange={resetCategory}>
+                  <category.icon/><span>{category.label}</span>
+                </Chip>
                 <MapFilter rating={rating} openNow={openNow} setRating={setRating} setOpenNow={setOpenNow}/>
                 <button type="button" aria-label="카테고리 필터 초기화" onClick={resetCategory}
-                  className={cn(mapChipButtonClassName(false), "w-9 px-0")}>
-                  <MapSearchIcon name="reset"/>
+                  className={cn(chipVariants({ variant: "outline", size: "md" }), "w-9 cursor-pointer px-0")}>
+                  <CloseIcon/>
                 </button>
               </div>
             ) : <MapCategoryChips selectedCategoryId={selectedCategoryId} onSelectCategory={onSelectCategory}/>}
diff --git a/src/components/map/MapFilter.tsx b/src/components/map/MapFilter.tsx
index 5c4592ee..a17e981f 100644
--- a/src/components/map/MapFilter.tsx
+++ b/src/components/map/MapFilter.tsx
@@ -1,9 +1,6 @@
 import { FilterDropdown } from "@/components/filter-dropdown";
+import { Chip } from "@/components/ui/chip";
 import { MAP_FILTER_DROPDOWN_MENU_Z_CLASS } from "@/lib/layout/mapDetailPanelLayout";
-import {
-  mapFilterChipActiveFilledClassName,
-  mapFilterChipInactiveClassName,
-} from "./map-chip-button";
 
 import {
   RATING_OPTIONS,
@@ -41,19 +38,14 @@ export default function MapFilter({
         onOpenChange={onRatingDropdownOpenChange}
         menuClassName={MAP_FILTER_DROPDOWN_MENU_Z_CLASS}
       />
-      <button
-        type="button"
-        aria-pressed={isOpenOnly}
-        onClick={() => setOpenNow(isOpenOnly ? "all" : "open")}
-        className={cn(
-          "inline-flex items-center gap-1",
-          isOpenOnly
-            ? mapFilterChipActiveFilledClassName()
-            : mapFilterChipInactiveClassName(),
-        )}
+      <Chip
+        variant="outline"
+        size="md"
+        pressed={isOpenOnly}
+        onPressedChange={(pressed) => setOpenNow(pressed ? "open" : "all")}
       >
         영업 중
-      </button>
+      </Chip>
     </div>
   );
 }
diff --git a/src/components/map/MapSearchIcon.tsx b/src/components/map/MapSearchIcon.tsx
index 0cafbdff..21d25f97 100644
--- a/src/components/map/MapSearchIcon.tsx
+++ b/src/components/map/MapSearchIcon.tsx
@@ -2,8 +2,7 @@ import Image from "next/image";
 
 /** Original vector exports from Figma 6153:8257; explicit dimensions preserve the glyphs. */
 export function MapSearchIcon({ name, size = 16, className }: Readonly<{
-  name: "restaurant" | "hotel" | "attraction" | "museum" | "transit" |
-    "chevron-down" | "reset" | "search" | "search-white" | "location" |
+  name: "chevron-down" | "search" | "search-white" | "location" |
     "clear" | "close" | "star" | "arrow-right";
   size?: number;
   className?: string;
diff --git a/src/components/map/map-chip-button.ts b/src/components/map/map-chip-button.ts
index eb7c4d93..ffb8861c 100644
--- a/src/components/map/map-chip-button.ts
+++ b/src/components/map/map-chip-button.ts
@@ -1,21 +1,10 @@
 import { cn } from "@/lib/utils";
 
+// FilterDropdown 트리거 전용이다. Dropdown 단계에서 ui 부품으로 옮기기 전까지 같은 줄의 Chip(outline md)과 같은 값으로 둔다.
+// 값을 고른 모양은 트리거에 aria-pressed가 없어 chipVariants가 그리지 못하므로 active로 테두리·글자 색을 준다.
 const mapChipButtonBaseClass =
-  "inline-flex h-9 shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-full border bg-fill-elevate px-4 text-label-m-emphasis shadow-[0_2px_10px_#0000001a] transition-colors hover:bg-fill active:bg-fill-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+  "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 mapFilterChipInactiveClassName() {
-  return cn(mapChipButtonBaseClass, "border-border text-text");
-}
-
-export function mapFilterChipActiveRingClassName() {
-  return cn(mapChipButtonBaseClass, "border-primary-strong text-primary-strong");
-}
-
-export function mapFilterChipActiveFilledClassName() {
-  return mapFilterChipActiveRingClassName();
-}
-
-/** Chip / Outline / md, including the selected category. */
 export function mapChipButtonClassName(active: boolean) {
-  return active ? mapFilterChipActiveRingClassName() : mapFilterChipInactiveClassName();
+  return cn(mapChipButtonBaseClass, active ? "border-primary-strong text-primary-strong" : "border-border text-text");
 }
diff --git a/src/components/map/map-place-categories.ts b/src/components/map/map-place-categories.ts
index c51cae17..e84b296e 100644
--- a/src/components/map/map-place-categories.ts
+++ b/src/components/map/map-place-categories.ts
@@ -1,5 +1,13 @@
-import type { ComponentProps } from "react";
-import type { MapSearchIcon } from "./MapSearchIcon";
+import type { ComponentType } from "react";
+
+import {
+  TravelHotelIcon,
+  TravelMuseumIcon,
+  TravelRestaurantIcon,
+  TravelThemeparkIcon,
+  TravelTrainIcon,
+  type IconProps,
+} from "@/assets/icons";
 
 /**
  * Google Maps Place types (Table A).
@@ -11,7 +19,7 @@ export type MapPlaceCategory = {
   label: string;
   /** 레거시/검색 문맥용 쿼리 문자열 */
   searchQuery: string;
-  icon: ComponentProps<typeof MapSearchIcon>["name"];
+  icon: ComponentType<IconProps>;
   /** Nearby Search `includedPrimaryTypes` */
   googlePlaceTypeHint: string;
 };
@@ -21,35 +29,35 @@ export const MAP_PLACE_CATEGORIES: MapPlaceCategory[] = [
     id: "restaurant",
     label: "음식점",
     searchQuery: "음식점",
-    icon: "restaurant",
+    icon: TravelRestaurantIcon,
     googlePlaceTypeHint: "restaurant",
   },
   {
     id: "lodging",
     label: "호텔",
     searchQuery: "호텔",
-    icon: "hotel",
+    icon: TravelHotelIcon,
     googlePlaceTypeHint: "lodging",
   },
   {
     id: "things_to_do",
     label: "즐길거리",
     searchQuery: "관광명소 즐길거리",
-    icon: "attraction",
+    icon: TravelThemeparkIcon,
     googlePlaceTypeHint: "tourist_attraction",
   },
   {
     id: "museum",
     label: "박물관",
     searchQuery: "박물관",
-    icon: "museum",
+    icon: TravelMuseumIcon,
     googlePlaceTypeHint: "museum",
   },
   {
     id: "transit",
     label: "대중교통",
     searchQuery: "지하철역 버스정류장",
-    icon: "transit",
+    icon: TravelTrainIcon,
     googlePlaceTypeHint: "transit_station",
   },
 ];
diff --git a/src/components/rooms/DestinationChipsField.tsx b/src/components/rooms/DestinationChipsField.tsx
index d40eaa85..f2405d85 100644
--- a/src/components/rooms/DestinationChipsField.tsx
+++ b/src/components/rooms/DestinationChipsField.tsx
@@ -1,9 +1,11 @@
 "use client";
 
-import { X } from "lucide-react";
 import { useState } from "react";
 
+import { CloseIcon } from "@/assets/icons";
 import { DestinationSearchInput } from "@/components/search/DestinationSearchInput";
+import { chipVariants } from "@/components/ui/chip";
+import { cn } from "@/lib/utils";
 
 type Props = {
   values: string[];
@@ -75,16 +77,16 @@ export function DestinationChipsField({
           {values.map((v, i) => (
             <span
               key={`${v}-${i}`}
-              className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 py-1.5 pl-3 pr-1.5 text-body-s-regular mobile:text-body-xs-regular text-primary"
+              className={cn(chipVariants({ variant: "outline", size: "md" }), "max-w-full")}
             >
-              {v}
+              <span className="min-w-0 truncate">{v}</span>
               <button
                 type="button"
                 onClick={() => remove(i)}
                 aria-label={`${v} 삭제`}
-                className="rounded-full p-0.5 transition hover:bg-primary/20"
+                className="-m-3.5 grid size-11 shrink-0 place-items-center focus-visible:outline-2 focus-visible:outline-primary"
               >
-                <X size={14} />
+                <CloseIcon size={16} />
               </button>
             </span>
           ))}
diff --git a/src/components/rooms/RoomTripEditFields.tsx b/src/components/rooms/RoomTripEditFields.tsx
index aaaa9600..3f56cb28 100644
--- a/src/components/rooms/RoomTripEditFields.tsx
+++ b/src/components/rooms/RoomTripEditFields.tsx
@@ -5,6 +5,7 @@ import { useState, type ReactNode } from "react";
 import { CloseIcon } from "@/assets/icons";
 import { DateRangeField } from "@/components/date-picker/DateRangeField";
 import { DestinationSearchInput } from "@/components/search/DestinationSearchInput";
+import { chipVariants } from "@/components/ui/chip";
 import {
   isTripScheduleDayLimitExceeded,
   TRIP_SCHEDULE_DAY_LIMIT_MESSAGE,
@@ -142,9 +143,9 @@ export function RoomTripEditFields({
             {destinations.map((destination, index) => (
               <span
                 key={`${destination}-${index}`}
-                className="inline-flex items-center gap-1 rounded-full bg-primary-subtle py-1 pl-3 pr-1.5 text-label-m-regular text-primary"
+                className={cn(chipVariants({ variant: "outline", size: "md" }), "max-w-full")}
               >
-                {destination}
+                <span className="min-w-0 truncate">{destination}</span>
                 <button
                   type="button"
                   onClick={() => {
@@ -152,7 +153,7 @@ export function RoomTripEditFields({
                     setDestinationWarning(null);
                   }}
                   aria-label={`${destination} 삭제`}
-                  className="rounded-full p-0.5 transition-colors hover:bg-primary/20"
+                  className="-m-3.5 grid size-11 shrink-0 place-items-center focus-visible:outline-2 focus-visible:outline-primary"
                 >
                   <CloseIcon size={16} />
                 </button>

From 856c113116f3fafc0ea59f3f7ce6d33c604e8e01 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 19:58:00 +0900
Subject: [PATCH 19/93] =?UTF-8?q?docs(conventions):=20LoadingIndicator?=
 =?UTF-8?q?=EB=A5=BC=20Spinner=EB=A1=9C=20=EB=B0=94=EA=BE=BC=20=EA=B2=83?=
 =?UTF-8?q?=EA=B3=BC=20ui=20=EB=B6=80=ED=92=88=20=EC=9A=B0=EC=84=A0=20?=
 =?UTF-8?q?=EA=B7=9C=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

- AGENTS.md 로딩 원칙·원칙 2-4·안티패턴 6: 작은 영역 로딩 표시는 Spinner
- 원칙 1-1: 맞는 부품에 src/components/ui 포함, 기존 사용처는 '두지' 않고 따로 옮김
- Design.md 1-4: Chips(5624-159)와 Badges(5864-12983) 페이지 링크를 나눔

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

diff --git a/AGENTS.md b/AGENTS.md
index 90f240c8..7ec1f2a5 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -17,7 +17,7 @@
 ## 로딩 UI 원칙
 
 - 화면 전환과 데이터 조회 중에 `불러오는 중…`, `확인 중…` 같은 문장형 로딩 안내를 화면에 노출하지 않는다.
-- 최초 로딩에는 완료 후 화면과 배치·크기가 비슷한 스켈레톤을 우선 사용한다. 작은 영역에는 공통 `LoadingIndicator` 같은 간결한 로딩 표시를 사용한다.
+- 최초 로딩에는 완료 후 화면과 배치·크기가 비슷한 스켈레톤을 우선 사용한다. 작은 영역에는 공통 `Spinner`(`src/components/ui/spinner`) 같은 간결한 로딩 표시를 사용한다.
 - 제목, 진행 현황, 버튼, 목록의 자리를 미리 확보해 로딩 전후에 화면이 튀거나 다른 화면이 잠깐 끼어 보이지 않게 한다.
 - 백그라운드 재조회에서는 이미 표시된 유효한 데이터를 유지하고, 새 데이터가 준비되면 갱신한다. 재조회만으로 전체 화면을 비우거나 금액을 임시 값으로 바꾸지 않는다.
 - 로딩 상태는 `role="status"`, `aria-label`, `aria-busy`, `sr-only` 등으로 접근성 도구에 전달할 수 있다. 화면에서 문구를 숨기는 것과 접근성 안내를 제거하는 것은 구분한다.
diff --git a/Design.md b/Design.md
index d2d1ed67..3719d6df 100644
--- a/Design.md
+++ b/Design.md
@@ -35,7 +35,8 @@
 - 11 [Tabs](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5138-2632) — Tabs Line, Tabs Chip, Tab Item
 - 12 [Toast](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5285-4979) — Toast
 - 13 [Alert Dialog](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5619-553) — Alert Dialog
-- 14·15 [Chip · Badge](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5624-159) — Chip(Solid·Outline), Badge(Weak·Solid·Outline, 톤 6종)
+- 14 [Chips](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5624-159) — Chip(Solid·Outline)
+- 15 [Badges](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5864-12983) — Badge(Weak·Solid·Outline, 톤 6종)
 - [Update Log](https://www.figma.com/design/Va7ys9C4lx9PIHOGvlaAID/Design-System?node-id=5635-11) — 디자인 시스템 변경 기록
 
 ---
diff --git a/docs/code-conventions/anti-patterns.md b/docs/code-conventions/anti-patterns.md
index 9494e55e..9d7bca9f 100644
--- a/docs/code-conventions/anti-patterns.md
+++ b/docs/code-conventions/anti-patterns.md
@@ -38,7 +38,7 @@
 
 ### 6. 있는 부품 다시 만들기
 - 신호: 새 `fixed inset-0` 모달·바텀시트·로딩 표시, `SettingsActionButton`·`alertDialogButtonClass`가 맞는 자리에 복붙한 버튼 클래스, 새로 만든 범용 Button, `lucide-react`·새 아이콘 패키지
-- ✓ `ConfirmDialog`·`SettingsDialog`·`MobileBottomSheet`·`LoadingIndicator`를 먼저 쓴다. 버튼은 `SettingsActionButton`·`alertDialogButtonClass`가 맞으면 쓰고, 아니면 그 자리 `<button>`에 토큰 클래스로 쓴다(범용 Button은 보류). 아이콘은 `@/assets/icons`(원칙 1-1, Design.md 2장).
+- ✓ `src/components/ui/`의 부품(`Spinner`·`Skeleton` 등)과 `ConfirmDialog`·`SettingsDialog`·`MobileBottomSheet`를 먼저 쓴다. 버튼은 `SettingsActionButton`·`alertDialogButtonClass`가 맞으면 쓰고, 아니면 그 자리 `<button>`에 토큰 클래스로 쓴다(범용 Button은 보류). 아이콘은 `@/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 75dc392e..6c3b626b 100644
--- a/docs/code-conventions/principles.md
+++ b/docs/code-conventions/principles.md
@@ -19,7 +19,7 @@
 
 | 상황 | 할 일 |
 | :-- | :-- |
-| 맞는 공용 부품이 있다(`src/components/<도메인>/`의 `ConfirmDialog`·`SettingsDialog`·`MobileBottomSheet`·`LoadingIndicator`·`SettingsActionButton` 등) | 그대로 쓴다. 같은 역할의 shadcn 부품이 생기면 새로 쓰는 곳만 그쪽을 쓰고 기존 사용처는 둔다 |
+| 맞는 부품이 있다(`src/components/ui/`의 shadcn 부품, `src/components/<도메인>/`의 `ConfirmDialog`·`SettingsDialog`·`MobileBottomSheet`·`SettingsActionButton` 등) | 그대로 쓴다. 같은 역할의 shadcn 부품이 생기면 새로 쓰는 곳은 그쪽을 쓰고, 기존 사용처는 아래 4행대로 따로 옮긴다 |
 | 맞는 공용 부품이 없는 동작 부품(드롭다운·팝오버·탭·셀렉트)이 필요하다 | shadcn으로 만든다. `src/components/ui/`에 아직 없는 부품이면 받기 전에 묻는다(새 파일·의존성이 생긴다). 미루면 공용 셸에서 동작 처리(portal·포커스 가두기·Escape·aria)만 가져오고, 클래스·토큰·아이콘은 3-6과 Design.md를 따른다 |
 | 동작 없는 표시 부품이 필요하다 | Tailwind로 만든다 |
 | 기존 공용 부품이나 그 사용처를 shadcn으로 바꾼다 | 기능·버그 작업에 섞지 않고 따로 한다 |
@@ -298,7 +298,7 @@ kick({ roomId, userId }, { onError: () => toast.error("내보내지 못했어요
 | 임시 결과 | `data` + `isPlaceholderData` | 이전 결과 유지. 확정 결과가 필요한 동작만 막는다 |
 | 최초 실패 | `error` | 그 영역의 오류 안내 + 재시도 |
 | 조회 안 함 | `fetchStatus === "idle"`(`enabled: false`) | 곧 채워질 조건(STOMP 연결 등)을 기다리면 스켈레톤. 채워지지 않을 조건(방 미선택)이면 그 이유에 맞는 자리 |
-| 최초 로딩 | 그 밖 | 완료 화면과 같은 배치의 스켈레톤. 작은 영역은 `LoadingIndicator` |
+| 최초 로딩 | 그 밖 | 완료 화면과 같은 배치의 스켈레톤. 작은 영역은 `Spinner` |
 
 - `isPending`·`isLoading` 하나로 로딩을 판정하지 않는다. `enabled: false`면 `isPending`이 계속 true이고, `isLoading`은 오프라인으로 멈춘 첫 조회(`fetchStatus === "paused"`)를 놓친다.
 - 조회가 여럿이면 영역마다 따로 분기한다. 로딩을 합쳐(`a.isLoading || b.isLoading`) 화면 전체를 바꾸지 않는다.

From 8c6066931605bf71434c193b9aebbcf57b156189 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 20:25:58 +0900
Subject: [PATCH 20/93] =?UTF-8?q?refactor(alert):=20=EC=95=88=EB=82=B4=20?=
 =?UTF-8?q?=EC=83=81=EC=9E=90=EB=A5=BC=20ui=20Alert=EB=A1=9C=20=EA=B5=90?=
 =?UTF-8?q?=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 로그인·약관 동의 화면·약관 섹션 오류 상자를 Alert brand lg로, 약관 없음 안내를 Alert lg role=status로 바꿈
- login-error-alert.tsx를 login/page.tsx에 합쳐 삭제하고 '!' 원은 grid로 제목 줄 가운데에 맞춤
- 장소 상세·경로 카드 오류와 모바일 장소 검색 오류를 Alert(기본·가로)로 바꾸고 바깥 margin은 감싸는 div padding으로 옮김
- 준비물 알림을 Alert warning 가로로 바꾸고 .alert·.alert button CSS 삭제(아래 16px은 감싸는 div pb-4)
- 버튼 글자 토큰에 덧붙인 font-medium·font-semibold 제거(약관 화면 버튼은 label-l-emphasis 700)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../_components/MobileRoutePlaceDetail.tsx    | 11 ++++--
 src/app/login/agreements/page.tsx             | 28 +++++++-------
 src/app/login/login-error-alert.tsx           | 33 -----------------
 src/app/login/page.tsx                        | 25 ++++++++++++-
 .../agreements/AgreementConsentSection.tsx    | 37 ++++++++++---------
 src/components/packing/PackingPage.module.css |  2 -
 src/components/packing/PackingPage.tsx        |  9 +++--
 src/components/place/PlaceDetailPanel.tsx     | 11 ++++--
 .../search/MapMobileSearchScreen.tsx          | 26 +++++++------
 9 files changed, 90 insertions(+), 92 deletions(-)
 delete mode 100644 src/app/login/login-error-alert.tsx

diff --git a/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx b/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
index b42911e3..89120205 100644
--- a/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
+++ b/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
@@ -6,6 +6,7 @@ import { useAnalyticsRoomId } from "@/hooks/useAnalyticsRoomId";
 import { HeroImage, HeroSkeleton } from "@/components/place/HeroSection";
 import { PlaceDetailTabs } from "@/components/place/PlaceDetailTabs";
 import { usePlaceDetailData } from "@/components/place/usePlaceDetailData";
+import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
 import { AnalyticsEvents, trackAnalyticsEvent, type AnalyticsSource } from "@/lib/analytics/track";
 import { normalizeGooglePlaceResourceId } from "@/lib/maps";
 import type { SearchRankBucket } from "@/lib/analytics/context";
@@ -50,9 +51,13 @@ export function MobileRoutePlaceDetail({
 
   function renderDetail() {
     if (isError && !detail && active) return (
-      <div role="alert" className="m-3.5 rounded-md border border-border-subtle p-3 text-body-s-regular text-text">
-        <p>장소 정보를 불러오지 못했어요.</p>
-        <button type="button" onClick={() => void refetch()} className="mt-2 text-primary underline">다시 시도</button>
+      <div className="p-3.5">
+        <Alert>
+          <AlertTitle>장소 정보를 불러오지 못했어요.</AlertTitle>
+          <AlertAction>
+            <button type="button" onClick={() => void refetch()} className="text-primary underline">다시 시도</button>
+          </AlertAction>
+        </Alert>
       </div>
     );
     if (showSkeleton) return (
diff --git a/src/app/login/agreements/page.tsx b/src/app/login/agreements/page.tsx
index 4cfeb615..1f68261e 100644
--- a/src/app/login/agreements/page.tsx
+++ b/src/app/login/agreements/page.tsx
@@ -20,6 +20,7 @@ import { AgreementConsentSection } from "@/components/agreements/AgreementConsen
 import type { AgreementConsentState } from "@/components/agreements/AgreementConsentSection";
 import { AuthFlowSpinner } from "@/components/auth/AuthFlowSpinner";
 import { BrandLogo } from "@/components/BrandLogo";
+import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
 
 const SIGNUP_EXPIRED_MESSAGE =
   "가입 요청이 만료되었거나 다른 로그인 시도로 무효화되었습니다. 다시 로그인해 주세요.";
@@ -172,23 +173,20 @@ export default function LoginAgreementsPage() {
           </div>
 
           {errorMessage && (
-            <div
-              role="alert"
-              className="w-full rounded-xl border border-primary/35 bg-primary/[0.06] px-4 py-3 text-left"
-            >
-              <p className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-primary">
-                {errorMessage}
-              </p>
+            <Alert tone="brand" size="lg" className="self-stretch">
+              <AlertTitle>{errorMessage}</AlertTitle>
               {isExpired && (
-                <button
-                  type="button"
-                  onClick={returnToLogin}
-                  className="mt-3 text-label-l-emphasis mobile:text-label-m-emphasis font-semibold text-primary underline-offset-2 hover:underline"
-                >
-                  Google 로그인 다시 시작하기
-                </button>
+                <AlertAction>
+                  <button
+                    type="button"
+                    onClick={returnToLogin}
+                    className="text-label-l-emphasis mobile:text-label-m-emphasis text-primary underline-offset-2 hover:underline"
+                  >
+                    Google 로그인 다시 시작하기
+                  </button>
+                </AlertAction>
               )}
-            </div>
+            </Alert>
           )}
 
           <AgreementConsentSection onStateChange={setConsentState} />
diff --git a/src/app/login/login-error-alert.tsx b/src/app/login/login-error-alert.tsx
deleted file mode 100644
index ea2f0165..00000000
--- a/src/app/login/login-error-alert.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-type LoginErrorAlertProps = {
-  message: string;
-  onDismiss?: () => void;
-};
-
-export function LoginErrorAlert({ message, onDismiss }: LoginErrorAlertProps) {
-  return (
-    <div
-      role="alert"
-      className="flex w-full gap-3 rounded-xl border border-primary/35 bg-primary/[0.06] px-3.5 py-3 text-left"
-    >
-      <span
-        className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/15 text-body-s-emphasis mobile:text-body-xs-emphasis font-bold text-primary"
-        aria-hidden
-      >
-        !
-      </span>
-      <div className="min-w-0 flex-1">
-        <p className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-primary">로그인에 실패했습니다</p>
-        <p className="mt-1 text-body-m-regular mobile:text-body-s-regular leading-relaxed text-muted-brown">{message}</p>
-        {onDismiss && (
-          <button
-            type="button"
-            onClick={onDismiss}
-            className="mt-2 text-label-m-regular mobile:text-label-s-regular font-medium text-primary underline-offset-2 hover:underline"
-          >
-            닫기
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index b165cc8d..796deda9 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -5,8 +5,8 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { Suspense, type ReactNode, useState } from "react";
 
-import { LoginErrorAlert } from "@/app/login/login-error-alert";
 import { BrandLogo } from "@/components/BrandLogo";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   buildGoogleAuthorizationUrl,
   clearGoogleAgreementFlowSession,
@@ -94,7 +94,28 @@ function LoginPageContent() {
   return (
     <LoginShell>
       {errorMessage && (
-        <LoginErrorAlert message={errorMessage} onDismiss={clearError} />
+        <Alert tone="brand" size="lg" className="self-stretch">
+          {/* Alert에 아이콘 칸이 없어 '!' 원을 grid로 제목 줄 가운데에 맞춘다 */}
+          <div className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3 gap-y-1">
+            <span
+              className="inline-flex size-5 items-center justify-center rounded-full bg-primary-subtle text-label-m-emphasis mobile:text-label-xs-emphasis text-primary"
+              aria-hidden
+            >
+              !
+            </span>
+            <AlertTitle>로그인에 실패했습니다</AlertTitle>
+            <AlertDescription className="col-start-2">{errorMessage}</AlertDescription>
+            <AlertAction className="col-start-2">
+              <button
+                type="button"
+                onClick={clearError}
+                className="text-label-m-regular mobile:text-label-s-regular text-primary underline-offset-2 hover:underline"
+              >
+                닫기
+              </button>
+            </AlertAction>
+          </div>
+        </Alert>
       )}
       <button
         type="button"
diff --git a/src/components/agreements/AgreementConsentSection.tsx b/src/components/agreements/AgreementConsentSection.tsx
index 842b178d..73b5115c 100644
--- a/src/components/agreements/AgreementConsentSection.tsx
+++ b/src/components/agreements/AgreementConsentSection.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Spinner } from "@/components/ui/spinner";
 
 import { ChevronRight } from "lucide-react";
@@ -62,34 +63,34 @@ export function AgreementConsentSection({ onStateChange }: Props) {
 
   if (isError) {
     return (
-      <div className="w-full rounded-xl border border-primary/35 bg-primary/[0.06] px-4 py-3 text-left">
-        <p className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-primary">
-          약관을 불러오지 못했습니다
-        </p>
-        <p className="mt-1 text-body-m-regular mobile:text-body-s-regular text-muted-brown">
+      <Alert tone="brand" size="lg" className="self-stretch">
+        <AlertTitle>약관을 불러오지 못했습니다</AlertTitle>
+        <AlertDescription>
           {error instanceof Error
             ? error.message
             : "잠시 후 다시 시도해 주세요."}
-        </p>
-        <button
-          type="button"
-          onClick={() => void refetch()}
-          className="mt-2 text-label-l-regular mobile:text-label-m-regular font-medium text-primary underline-offset-2 hover:underline"
-        >
-          다시 시도
-        </button>
-      </div>
+        </AlertDescription>
+        <AlertAction>
+          <button
+            type="button"
+            onClick={() => void refetch()}
+            className="text-label-l-regular mobile:text-label-m-regular text-primary underline-offset-2 hover:underline"
+          >
+            다시 시도
+          </button>
+        </AlertAction>
+      </Alert>
     );
   }
 
   if (items.length === 0) {
     return (
-      <div className="w-full rounded-xl border border-gray-border bg-bubble-gray/30 px-4 py-3 text-left">
-        <p className="text-body-m-regular mobile:text-body-s-regular text-dark-gray">
+      <Alert size="lg" role="status" className="self-stretch">
+        <AlertDescription>
           현재 동의할 약관 정보를 불러올 수 없습니다. 잠시 후 다시 시도해
           주세요.
-        </p>
-      </div>
+        </AlertDescription>
+      </Alert>
     );
   }
 
diff --git a/src/components/packing/PackingPage.module.css b/src/components/packing/PackingPage.module.css
index 2f716b7a..c38e235c 100644
--- a/src/components/packing/PackingPage.module.css
+++ b/src/components/packing/PackingPage.module.css
@@ -87,8 +87,6 @@
 .field {display:block;width:100%;height:48px;margin-top:4px;border:1px solid var(--color-border-default);border-radius:8px;background:var(--color-fill-subtle);padding:12px 14px;font-size:16px;line-height:24px;font-weight:400}
 .error {margin-top:8px;color:var(--color-status-negative);font-size:12px;line-height:18px}
 .deleteCopy {margin:0;color:var(--color-text-subtle);font-size:16px;line-height:24px;overflow-wrap:anywhere}
-.alert {margin-bottom:16px;border:1px solid var(--color-status-cautionary);border-radius:8px;background:var(--color-fill-subtle);padding:12px;font-size:14px;line-height:20px}
-.alert button {margin-left:8px;text-decoration:underline}
 .dialogOverlay {padding:20px;background:#00000059;backdrop-filter:none}
 .dialog {max-width:448px;border-radius:12px;background:var(--color-fill-elevate, #fff);padding:32px;color:var(--color-text-default);letter-spacing:-0.02em;scrollbar-gutter:auto;box-shadow:0 4px 8px #0000001f}
 .dialog>div:first-child {margin-bottom:24px}
diff --git a/src/components/packing/PackingPage.tsx b/src/components/packing/PackingPage.tsx
index ae3bdada..a161cb6c 100644
--- a/src/components/packing/PackingPage.tsx
+++ b/src/components/packing/PackingPage.tsx
@@ -6,6 +6,7 @@ import { usePackingList } from "@/hooks/usePackingList";
 import { useSheetDrag } from "@/components/mobile/useSheetDrag";
 import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
 import { SettingsDialog } from "@/components/settings/SettingsDialog";
+import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
 import { SetSectionSideDetailWidth } from "@/contexts/SectionWidthContext";
 import { PACKING_DETAIL_WIDTH_PX } from "@/lib/layout-tokens";
 import { renderTextWithLinks } from "@/lib/text/renderTextWithLinks";
@@ -221,10 +222,10 @@ function PackingContent({context}: {context:Context}) {
             {loading && <span aria-hidden="true" className={styles.loadingProgress}/>}
           </div>
         </header>
-        {state.message && <div role="alert" className={styles.alert}>
-          {state.message}
-          {["sync-error","uncertain","error"].includes(state.status) && <button type="button" onClick={()=>void coordinator?.refresh(true)}>다시 확인</button>}
-        </div>}
+        {state.message && <div className="pb-4"><Alert tone="warning" orientation="horizontal">
+          <AlertTitle>{state.message}</AlertTitle>
+          {["sync-error","uncertain","error"].includes(state.status) && <AlertAction><button type="button" className="underline" onClick={()=>void coordinator?.refresh(true)}>다시 확인</button></AlertAction>}
+        </Alert></div>}
         {!state.data ? emptyBoard : (
           <div className={styles.columns} aria-label="준비물 카테고리">
             {parts.map((part:PackingPart)=><section className={styles.part} key={part.id} aria-label={part.name}>
diff --git a/src/components/place/PlaceDetailPanel.tsx b/src/components/place/PlaceDetailPanel.tsx
index 7acebf3c..d3e923a9 100644
--- a/src/components/place/PlaceDetailPanel.tsx
+++ b/src/components/place/PlaceDetailPanel.tsx
@@ -4,6 +4,7 @@ import { X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
+import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
 import { useAnalyticsRoomId } from "@/hooks/useAnalyticsRoomId";
 import { useMobileView } from "@/contexts/MobileViewContext";
 import { useSelectedPlace } from "@/contexts/SelectedPlaceContext";
@@ -195,9 +196,13 @@ export function PlaceDetailPanel({
     : undefined;
 
   const tabs = isDetailError && !detailData ? (
-    <div role="alert" className="m-3.5 rounded-md border border-border-subtle p-3 text-body-s-regular text-text">
-      <p>장소 정보를 불러오지 못했어요.</p>
-      <button type="button" onClick={() => void refetch()} className="mt-2 text-primary underline">다시 시도</button>
+    <div className="p-3.5">
+      <Alert>
+        <AlertTitle>장소 정보를 불러오지 못했어요.</AlertTitle>
+        <AlertAction>
+          <button type="button" onClick={() => void refetch()} className="text-primary underline">다시 시도</button>
+        </AlertAction>
+      </Alert>
     </div>
   ) : (
     <PlaceDetailTabs
diff --git a/src/components/search/MapMobileSearchScreen.tsx b/src/components/search/MapMobileSearchScreen.tsx
index d3b6bb16..2c9e315a 100644
--- a/src/components/search/MapMobileSearchScreen.tsx
+++ b/src/components/search/MapMobileSearchScreen.tsx
@@ -7,6 +7,7 @@ import {
   LocationIcon,
   SearchIcon,
 } from "@/assets/icons";
+import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
 import { useSessionUser } from "@/hooks/useSessionUser";
 import {
   addMapSearchHistory,
@@ -141,18 +142,19 @@ export function MapMobileSearchScreen({
           />
       </div>
       {error ? (
-        <div
-          role="alert"
-          className="mx-3 flex items-center gap-2 rounded-lg border border-border-subtle p-3 text-body-s-regular text-text"
-        >
-          <span>{error}</span>
-          <button
-            type="button"
-            className="shrink-0 text-primary underline"
-            onClick={() => inputRef.current?.focus()}
-          >
-            다시 시도
-          </button>
+        <div className="px-3">
+          <Alert orientation="horizontal">
+            <AlertTitle>{error}</AlertTitle>
+            <AlertAction>
+              <button
+                type="button"
+                className="text-primary underline"
+                onClick={() => inputRef.current?.focus()}
+              >
+                다시 시도
+              </button>
+            </AlertAction>
+          </Alert>
         </div>
       ) : null}
       {!query.trim() ? (

From f192f6b93051fc75714e17881cb2ff0dbe6fb8f0 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 20:25:58 +0900
Subject: [PATCH 21/93] =?UTF-8?q?refactor(badge):=20=EC=9D=BC=EC=B0=A8?=
 =?UTF-8?q?=C2=B7=EC=97=AD=ED=95=A0=C2=B7=EC=9E=A5=EC=86=8C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A5=98=20=EB=9D=BC=EB=B2=A8=EC=9D=84=20ui=20Badge=EB=A1=9C?=
 =?UTF-8?q?=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 일정·가계부 일차, 구성원 역할, 참여 승인 대기 상태 라벨을 Badge(weak md)로 바꿈(방장·승인 대기·일차는 brand, 참여자·참여 거절은 neutral)
- PC 장소 카드와 북마크 행의 장소 분류 라벨을 Badge(neutral md)로 바꾸고, 장소 카드는 안쪽 truncate span으로 말줄임 유지
- 쓰지 않게 된 PLAN_PLACE_CARD_TW.primaryTypeBadge 삭제

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../bookmark/_components/BookmarkPlacePreviewCard.tsx  |  5 +++--
 .../(main)/member-settings/_components/MemberCard.tsx  | 10 +++-------
 .../plan/_components/itinerary/PlanDaySection.tsx      |  6 +++---
 .../plan/_components/itinerary/PlanPlaceCard.tsx       |  7 ++++---
 src/app/waiting/page.tsx                               |  9 +++------
 src/components/expenses/ExpenseViews.tsx               |  5 +++--
 src/lib/layout-tokens.ts                               |  2 --
 7 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx b/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx
index 8599dd87..3c880312 100644
--- a/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx
@@ -2,6 +2,7 @@
 
 import { MapPin } from "lucide-react";
 
+import { Badge } from "@/components/ui/badge";
 import { useInViewport } from "@/hooks/useInViewport";
 import { usePlacePhotoUrlQuery } from "@/hooks/usePlacePhotoUrl";
 import { MAIN_CARD_INNER_PADDING_X_CLASS } from "@/lib/layout-tokens";
@@ -76,9 +77,9 @@ export function BookmarkPlacePreviewCard({
             {name}
           </h3>
           {primaryTypeDisplayName ? (
-            <span className="shrink-0 rounded-full bg-gray-100 px-1.5 py-0.5 text-body-xs-emphasis font-medium leading-none text-dark-gray">
+            <Badge size="md">
               {primaryTypeDisplayName}
-            </span>
+            </Badge>
           ) : null}
         </div>
         {address ? (
diff --git a/src/app/(main)/member-settings/_components/MemberCard.tsx b/src/app/(main)/member-settings/_components/MemberCard.tsx
index ba2dc313..9492d072 100644
--- a/src/app/(main)/member-settings/_components/MemberCard.tsx
+++ b/src/app/(main)/member-settings/_components/MemberCard.tsx
@@ -4,6 +4,7 @@ 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 { UserAvatar } from "@/components/user/UserAvatar";
 import type { RoomMemberStatus } from "@/lib/api/rooms";
 import { cn } from "@/lib/utils";
@@ -99,14 +100,9 @@ export function MemberCard({ member, isViewerHost, onKick, onTransfer }: Readonl
           {member.isCurrentUser ? " (나)" : ""}
         </span>
         <div className="flex items-center gap-2">
-          <span
-            className={cn(
-              "rounded px-1.5 py-0.5 text-label-xs-regular",
-              member.role === "HOST" ? "bg-primary-subtle text-primary" : "bg-fill text-text-subtle",
-            )}
-          >
+          <Badge tone={member.role === "HOST" ? "brand" : "neutral"} size="md">
             {member.role === "HOST" ? "방장" : "참여자"}
-          </span>
+          </Badge>
           <MemberConnectionStatus member={member} />
         </div>
       </div>
diff --git a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
index b13f43ff..b773397c 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { ExpenseIcon } from "@/components/icons/ExpenseIcon";
+import { Badge } from "@/components/ui/badge";
 import { useOnClickOutside } from "@/hooks/useOnClickOutside";
 import { MAIN_CARD_INNER_PADDING_X_CLASS } from "@/lib/layout-tokens";
 import { usePlanItineraryExpandedStore } from "@/stores/plan-itinerary-expanded-store";
@@ -214,10 +215,9 @@ export function PlanDaySection({
                 {subtitle || title}
               </h2>
               {subtitle ? (
-                // 디자인 시스템 Badge / Weak / Brand / md — 배경색은 시맨틱 토큰이 없어 원시 토큰을 쓴다
-                <span className="inline-flex h-5 shrink-0 items-center rounded bg-[var(--blue-50)] px-1.5 text-label-xs-regular text-primary">
+                <Badge tone="brand" size="md">
                   {title}
-                </span>
+                </Badge>
               ) : null}
             </div>
             <span className="shrink-0 text-dark-gray" aria-hidden>
diff --git a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
index 8c45cce3..a37373f1 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
@@ -9,6 +9,7 @@ import { MapPin } from "lucide-react";
 
 import { CoinIcon, MemoAddIcon, TimeClockIcon } from "@/assets/icons";
 import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
+import { Badge } from "@/components/ui/badge";
 import { Spinner } from "@/components/ui/spinner";
 import { toast } from "sonner";
 
@@ -374,9 +375,9 @@ export function PlanPlaceCard({
                 {place.title}
               </h3>
               {place.primaryTypeDisplayName ? (
-                <span className={PLAN_PLACE_CARD_TW.primaryTypeBadge}>
-                  {place.primaryTypeDisplayName}
-                </span>
+                <Badge size="md">
+                  <span className="truncate">{place.primaryTypeDisplayName}</span>
+                </Badge>
               ) : null}
             </div>
             {deleteButton ? (
diff --git a/src/app/waiting/page.tsx b/src/app/waiting/page.tsx
index 53e991a2..5b16cf1b 100644
--- a/src/app/waiting/page.tsx
+++ b/src/app/waiting/page.tsx
@@ -5,6 +5,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useState } from "react";
 
 import { BrandLogo } from "@/components/BrandLogo";
+import { Badge } from "@/components/ui/badge";
 import { Spinner } from "@/components/ui/spinner";
 
 import { useCheckJoinStatus } from "@/hooks/useRooms";
@@ -72,13 +73,9 @@ function WaitingContent() {
       <BrandLogo variant="symbol" size="S" alt="우때 로고" />
 
       <div className="flex w-full max-w-[480px] flex-col gap-6 rounded-xl bg-fill-elevate p-6 shadow-[0_2px_10px_rgba(0,0,0,0.1)]">
-        <span
-          className={`self-start rounded p-1 text-label-xs-regular ${
-            isRejected ? "bg-fill text-text-subtle" : "bg-primary-subtle text-primary"
-          }`}
-        >
+        <Badge tone={isRejected ? "neutral" : "brand"} size="md">
           {isRejected ? "참여 거절" : "승인 대기"}
-        </span>
+        </Badge>
 
         <h1 className="text-title-l text-text">
           {isRejected ? "참여 요청이 거절됐어요" : "참여 요청을 보냈어요"}
diff --git a/src/components/expenses/ExpenseViews.tsx b/src/components/expenses/ExpenseViews.tsx
index c32809ee..79ef0722 100644
--- a/src/components/expenses/ExpenseViews.tsx
+++ b/src/components/expenses/ExpenseViews.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { Badge } from "@/components/ui/badge";
 import { Spinner } from "@/components/ui/spinner";
 import { ExpenseKrwAmount, ExpenseRowAmount } from "./ExpenseKrw";
 import { expenseTitle } from "@/lib/expenses/expense-name";
@@ -292,9 +293,9 @@ export function ExpenseList({
                       expenseDayLabel("TRIP_DAY", Number(key), schedules))}
                 </h3>
                 {day && (
-                  <span className="rounded-full bg-primary-subtle px-2 py-1 text-label-xs-emphasis text-primary">
+                  <Badge tone="brand" size="md">
                     {day.dayNumber}일차
-                  </span>
+                  </Badge>
                 )}
                 <span className="text-[14px] leading-5 text-text-subtle"><ExpenseKrwAmount total={krwSummary?.days?.find((d) => key === "PREPARATION" ? d.expenseGroup === "PREPARATION" : d.expenseGroup === "TRIP_DAY" && String(d.scheduleId) === key)?.total} /></span>
                 {!krwSummary && <span className="text-body-xs-regular text-text-subtle">
diff --git a/src/lib/layout-tokens.ts b/src/lib/layout-tokens.ts
index ad2bd9f4..ba3d23d3 100644
--- a/src/lib/layout-tokens.ts
+++ b/src/lib/layout-tokens.ts
@@ -55,8 +55,6 @@ export const PLAN_PLACE_CARD_TW = {
     "absolute -left-2 -top-2 z-10 h-8 w-8 rounded-lg border-2 border-white text-body-s-regular mobile:text-body-xs-regular shadow-md",
   titleCompact: "text-body-m-emphasis mobile:text-body-s-emphasis font-semibold leading-snug text-gray-900",
   title: "truncate text-body-l-emphasis mobile:text-body-s-emphasis text-text",
-  primaryTypeBadge:
-    "w-fit max-w-full shrink-0 truncate rounded-full bg-fill px-1.5 py-0.5 text-body-xs-regular text-text-subtle",
   deleteButtonCompact: "p-1 @min-[370px]/plan:p-1.5",
   deleteIconSize: 16,
   /** 카드 아래 시간·비용(왼쪽)과 메모(오른쪽) 버튼 줄 — 버튼 배경이 카드 안쪽 여백보다 바깥에 오도록 좌우를 넓힌다 */

From f90a7fc25c103e3bb8bf63c01f11c7ba7cf84880 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 21:03:13 +0900
Subject: [PATCH 22/93] =?UTF-8?q?refactor(skeleton):=20=EB=A1=9C=EB=94=A9?=
 =?UTF-8?q?=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20=EB=B8=94=EB=A1=9D?=
 =?UTF-8?q?=EC=9D=84=20ui=20Skeleton=EC=9C=BC=EB=A1=9C=20=EA=B5=90?=
 =?UTF-8?q?=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 북마크 목록·폴더 상세, 장소 상세·시트 요약, 사진 자리, 경로 카드·후보 카드·경로 상세의 직접 만든 블록을 Skeleton으로 바꿈(bg-fill 블록은 tone subtle, 모서리만 className)
- output 안 블록은 render={<span />}로 span 유지
- 폴더 상세 래퍼의 animate-pulse를 지우고 블록마다 펄스
- PlaceDetailSkeleton의 Bar 헬퍼 삭제, 건드린 템플릿 리터럴 래퍼는 cn()으로
- bg-gray-200 블록은 bg-fill-strong이 되고, 동작 줄이기 설정에서는 펄스가 멈춤
- 일정 목록 스켈레톤(PlanLoadingSkeleton)은 모바일 바탕과 블록 색이 같아 묶음 펄스만 보이는 문제가 있어 결정 전까지 그대로 둠

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/(main)/bookmark/[folderId]/page.tsx   | 13 +++---
 .../_components/BookmarkListSkeleton.tsx      |  4 +-
 .../_components/MobileRouteCandidateCard.tsx  |  5 ++-
 .../map/_components/MobileRoutePlaceCard.tsx  | 11 ++---
 .../_components/MobileRoutePlaceDetail.tsx    |  5 ++-
 src/components/place/HeroSection.tsx          |  3 +-
 src/components/place/PlaceDetailSkeleton.tsx  | 40 +++++++++----------
 7 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/src/app/(main)/bookmark/[folderId]/page.tsx b/src/app/(main)/bookmark/[folderId]/page.tsx
index f0ac1e8c..6e34b481 100644
--- a/src/app/(main)/bookmark/[folderId]/page.tsx
+++ b/src/app/(main)/bookmark/[folderId]/page.tsx
@@ -2,6 +2,7 @@
 
 import { useParams, notFound } from "next/navigation";
 import { useMemo } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
 import { SetSectionMaxWidth } from "@/contexts/SectionWidthContext";
 import { useBookmarkCategories } from "@/hooks/useRooms";
 import { useSessionStore } from "@/stores/session-store";
@@ -11,19 +12,19 @@ import { BookmarkFolderDetailView } from "../_components/BookmarkFolderDetailVie
 function FolderDetailSkeleton() {
   return (
     <div
-      className="flex h-full min-h-0 animate-pulse flex-col border-b border-gray-border"
+      className="flex h-full min-h-0 flex-col border-b border-gray-border"
       aria-busy="true"
       aria-label="북마크 폴더를 불러오는 중"
     >
       <SetSectionMaxWidth value="s1" />
       <div className="flex items-center justify-between border-b border-gray-border pb-5">
-        <div className="h-7 w-48 rounded bg-gray-200" />
-        <div className="h-9 w-32 rounded-full bg-gray-200" />
+        <Skeleton className="h-7 w-48" />
+        <Skeleton className="h-9 w-32 rounded-full" />
       </div>
       <div className="space-y-3 py-5">
-        <div className="h-16 rounded-xl bg-gray-200" />
-        <div className="h-16 rounded-xl bg-gray-200" />
-        <div className="h-16 rounded-xl bg-gray-200" />
+        <Skeleton className="h-16 rounded-xl" />
+        <Skeleton className="h-16 rounded-xl" />
+        <Skeleton className="h-16 rounded-xl" />
       </div>
     </div>
   );
diff --git a/src/app/(main)/bookmark/_components/BookmarkListSkeleton.tsx b/src/app/(main)/bookmark/_components/BookmarkListSkeleton.tsx
index 4f260e54..362b1017 100644
--- a/src/app/(main)/bookmark/_components/BookmarkListSkeleton.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkListSkeleton.tsx
@@ -1,9 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
 export function BookmarkListSkeleton() {
   return (
     <div className="space-y-3 py-5">
       <output className="sr-only">북마크 불러오는 중</output>
       {[0, 1, 2].map((row) => (
-        <div key={row} aria-hidden="true" className="h-16 animate-pulse rounded-xl bg-fill-strong motion-reduce:animate-none" />
+        <Skeleton key={row} className="h-16 rounded-xl" />
       ))}
     </div>
   );
diff --git a/src/app/(main)/map/_components/MobileRouteCandidateCard.tsx b/src/app/(main)/map/_components/MobileRouteCandidateCard.tsx
index 02418ec1..75683a01 100644
--- a/src/app/(main)/map/_components/MobileRouteCandidateCard.tsx
+++ b/src/app/(main)/map/_components/MobileRouteCandidateCard.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 import { CloseIcon, PlusIcon, ReactionStarIcon } from "@/assets/icons";
 import { DashedBorder } from "@/components/mobile/DashedPlaceholderBox";
 import { usePlaceDetailData } from "@/components/place/usePlaceDetailData";
+import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 
 import { MobileRouteExpandedShell } from "./MobileRoutePlaceCard";
@@ -78,8 +79,8 @@ export function MobileRouteCandidateCard({
               aria-busy
               className="flex flex-col gap-1.5 pt-0.5"
             >
-              <span className="h-5 w-2/3 animate-pulse rounded bg-fill-strong" />
-              <span className="h-4 w-1/2 animate-pulse rounded bg-fill" />
+              <Skeleton render={<span />} className="h-5 w-2/3" />
+              <Skeleton render={<span />} tone="subtle" className="h-4 w-1/2" />
             </output>
           ) : (
             <>
diff --git a/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx b/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx
index e2bee4b7..11f5bfb5 100644
--- a/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx
+++ b/src/app/(main)/map/_components/MobileRoutePlaceCard.tsx
@@ -4,6 +4,7 @@ import { useRef, useState, type PointerEvent as ReactPointerEvent, type ReactNod
 
 import { MobilePlanPlaceCard } from "@/app/(main)/plan/_components/mobile/MobilePlanPlaceCard";
 import { DashedBorder, DashedPlaceholderBox } from "@/components/mobile/DashedPlaceholderBox";
+import { Skeleton } from "@/components/ui/skeleton";
 import type { PlanPlace } from "@/lib/plan/types";
 import { cn } from "@/lib/utils";
 
@@ -159,12 +160,12 @@ export function MobileRouteExpandedShell({
 /** 처음 불러오는 동안 — 카드와 같은 자리를 잡는다 */
 export function MobileRoutePlaceCardSkeleton() {
   return (
-    <output aria-label="장소 불러오는 중" aria-busy className={`${CARD_CLASS} flex min-h-[155px] gap-3 pl-3.5 pr-2 pt-3`}>
-      <span className="size-6 shrink-0 animate-pulse rounded-[5.5px] bg-fill-strong" />
+    <output aria-label="장소 불러오는 중" aria-busy className={cn(CARD_CLASS, "flex min-h-[155px] gap-3 pl-3.5 pr-2 pt-3")}>
+      <Skeleton render={<span />} className="size-6 shrink-0 rounded-[5.5px]" />
       <span className="flex min-w-0 flex-1 flex-col gap-2 pt-0.5">
-        <span className="h-5 w-2/3 animate-pulse rounded bg-fill-strong" />
-        <span className="h-4 w-1/2 animate-pulse rounded bg-fill" />
-        <span className="mt-3 h-4 w-5/6 animate-pulse rounded bg-fill" />
+        <Skeleton render={<span />} className="h-5 w-2/3" />
+        <Skeleton render={<span />} tone="subtle" className="h-4 w-1/2" />
+        <Skeleton render={<span />} tone="subtle" className="mt-3 h-4 w-5/6" />
       </span>
     </output>
   );
diff --git a/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx b/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
index 89120205..dd5fd488 100644
--- a/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
+++ b/src/app/(main)/map/_components/MobileRoutePlaceDetail.tsx
@@ -7,6 +7,7 @@ import { HeroImage, HeroSkeleton } from "@/components/place/HeroSection";
 import { PlaceDetailTabs } from "@/components/place/PlaceDetailTabs";
 import { usePlaceDetailData } from "@/components/place/usePlaceDetailData";
 import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
+import { Skeleton } from "@/components/ui/skeleton";
 import { AnalyticsEvents, trackAnalyticsEvent, type AnalyticsSource } from "@/lib/analytics/track";
 import { normalizeGooglePlaceResourceId } from "@/lib/maps";
 import type { SearchRankBucket } from "@/lib/analytics/context";
@@ -62,8 +63,8 @@ export function MobileRoutePlaceDetail({
     );
     if (showSkeleton) return (
       <output aria-label="장소 정보 불러오는 중" aria-busy className="mt-3 flex flex-col gap-2 px-5 py-4">
-        <span className="h-5 w-24 animate-pulse rounded bg-fill-strong" />
-        <span className="h-16 w-full animate-pulse rounded-md bg-fill" />
+        <Skeleton render={<span />} className="h-5 w-24" />
+        <Skeleton render={<span />} tone="subtle" className="h-16 w-full rounded-md" />
       </output>
     );
     return (
diff --git a/src/components/place/HeroSection.tsx b/src/components/place/HeroSection.tsx
index 75f6daa3..d0f26c63 100644
--- a/src/components/place/HeroSection.tsx
+++ b/src/components/place/HeroSection.tsx
@@ -1,10 +1,11 @@
 "use client";
 
+import { Skeleton } from "@/components/ui/skeleton";
 import { usePlacePhotoUrlQuery } from "@/hooks/usePlacePhotoUrl";
 import { handlePlacePhotoImageError } from "@/lib/places/place-photo-refresh";
 
 export function HeroSkeleton() {
-  return <div className="h-full animate-pulse bg-gray-200" />;
+  return <Skeleton className="h-full rounded-none" />;
 }
 
 export function HeroImage({
diff --git a/src/components/place/PlaceDetailSkeleton.tsx b/src/components/place/PlaceDetailSkeleton.tsx
index 421f82a7..ff0eed9c 100644
--- a/src/components/place/PlaceDetailSkeleton.tsx
+++ b/src/components/place/PlaceDetailSkeleton.tsx
@@ -1,35 +1,33 @@
-/** 장소 상세 본문 로딩 스켈레톤 — `PlaceSummaryHeader`·탭·홈 탭 배치를 따른다 */
-function Bar({ className }: { className: string }) {
-  return <div className={`animate-pulse rounded bg-fill-strong ${className}`} />;
-}
+import { Skeleton } from "@/components/ui/skeleton";
 
+/** 장소 상세 본문 로딩 스켈레톤 — `PlaceSummaryHeader`·탭·홈 탭 배치를 따른다 */
 export function PlaceDetailSkeleton() {
   return (
     <div aria-busy="true" aria-label="장소 정보를 불러오는 중">
       {/* 이름·카테고리·평점·액션 버튼 */}
       <div className="border-b border-gray-border px-5 pb-5 pt-4">
-        <Bar className="h-7 w-3/5" />
-        <Bar className="mt-2 h-4 w-1/4" />
-        <Bar className="mt-4 h-4 w-2/5" />
-        <Bar className="mt-4 h-11 w-full rounded-lg" />
+        <Skeleton className="h-7 w-3/5" />
+        <Skeleton className="mt-2 h-4 w-1/4" />
+        <Skeleton className="mt-4 h-4 w-2/5" />
+        <Skeleton className="mt-4 h-11 w-full rounded-lg" />
         <div className="mt-2 flex gap-2">
-          <Bar className="h-11 flex-1 rounded-lg" />
-          <Bar className="h-11 flex-1 rounded-lg" />
+          <Skeleton className="h-11 flex-1 rounded-lg" />
+          <Skeleton className="h-11 flex-1 rounded-lg" />
         </div>
       </div>
 
       {/* 탭 */}
       <div className="flex gap-4 border-b border-gray-border px-5 py-3">
-        <Bar className="h-4 flex-1" />
-        <Bar className="h-4 flex-1" />
+        <Skeleton className="h-4 flex-1" />
+        <Skeleton className="h-4 flex-1" />
       </div>
 
       {/* 홈 탭 본문 */}
       <div className="space-y-3 px-5 py-4">
-        <Bar className="h-4 w-4/5" />
-        <Bar className="h-4 w-3/5" />
-        <Bar className="h-4 w-2/3" />
-        <Bar className="h-4 w-1/2" />
+        <Skeleton className="h-4 w-4/5" />
+        <Skeleton className="h-4 w-3/5" />
+        <Skeleton className="h-4 w-2/3" />
+        <Skeleton className="h-4 w-1/2" />
       </div>
     </div>
   );
@@ -40,13 +38,13 @@ export function PlaceSheetSummarySkeleton() {
   return (
     <div aria-busy="true" aria-label="장소 정보를 불러오는 중">
       <div className="py-1 pl-5 pr-4">
-        <Bar className="mt-0.5 h-6 w-3/5" />
-        <Bar className="mt-2.5 h-4 w-1/4" />
-        <Bar className="mt-3 h-4 w-1/3" />
+        <Skeleton className="mt-0.5 h-6 w-3/5" />
+        <Skeleton className="mt-2.5 h-4 w-1/4" />
+        <Skeleton className="mt-3 h-4 w-1/3" />
       </div>
       <div className="flex gap-1 px-5 py-4">
-        <Bar className="h-9 flex-1 rounded-lg" />
-        <Bar className="h-9 flex-1 rounded-lg" />
+        <Skeleton className="h-9 flex-1 rounded-lg" />
+        <Skeleton className="h-9 flex-1 rounded-lg" />
       </div>
     </div>
   );

From 8995253307a9a87f88816b838e705107c2af5ab8 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 21:03:13 +0900
Subject: [PATCH 23/93] =?UTF-8?q?refactor(avatar):=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=EC=9E=90=C2=B7=EC=B1=84=ED=8C=85=C2=B7=EA=B0=80=EA=B3=84?=
 =?UTF-8?q?=EB=B6=80=C2=B7=EB=A6=AC=EB=B7=B0=20=EC=95=84=EB=B0=94=ED=83=80?=
 =?UTF-8?q?=EB=A5=BC=20ui=20Avatar=EB=A1=9C=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- UserAvatar를 ui Avatar로 다시 짜고 색·모양을 size·shape·tone·ring variant로만 받음(호출부 className 색 덮기 제거)
- 헤더 구성원 미리보기를 AvatarGroup·AvatarGroupCount로 옮기고, 본인이 위인 겹침 순서와 화살표 원을 묶음 안에 둠
- 채팅 메시지·장소 공유·새 메시지 미리보기·가계부 인물 아바타를 UserAvatar로 합치고 ChatMemberAvatarRing·chatMessageChrome.avatarSm 삭제
- WOORI·홈 헤더 빈 원·리뷰 작성자 이니셜을 ui Avatar로 교체
- 이름이 옆에 보이는 아바타는 장식으로 숨김(aria-hidden, alt="")

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../_components/JoinRequestsSection.tsx       |  3 +-
 .../_components/MemberCard.tsx                |  4 +-
 src/app/home/_components/HomeHeader.tsx       |  3 +-
 src/components/chat/chat-message-chrome.ts    |  4 +-
 .../chat/messages/ChatMemberAvatarRing.tsx    | 62 -------------------
 .../chat/messages/ChatMessageGroup.tsx        | 30 ++++-----
 .../chat/messages/NewMessagePreviewButton.tsx | 21 ++++---
 .../chat/messages/PlaceShareCard.tsx          | 19 +++---
 src/components/expenses/ExpenseViews.tsx      | 15 ++---
 src/components/layout/HeaderMemberPreview.tsx | 33 +++++-----
 src/components/place/ReviewsTab.tsx           |  8 ++-
 src/components/ui/avatar.tsx                  |  2 +-
 src/components/user/UserAvatar.tsx            | 51 +++++----------
 13 files changed, 86 insertions(+), 169 deletions(-)
 delete mode 100644 src/components/chat/messages/ChatMemberAvatarRing.tsx

diff --git a/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx b/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx
index 69886680..109cc620 100644
--- a/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx
+++ b/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx
@@ -55,8 +55,7 @@ function JoinRequestCard({
       <UserAvatar
         user={request}
         size={36}
-        className="bg-primary-subtle"
-        initialClassName="font-medium text-primary"
+        tone="primary"
       />
 
       <div className="flex min-w-0 flex-1 flex-col gap-1">
diff --git a/src/app/(main)/member-settings/_components/MemberCard.tsx b/src/app/(main)/member-settings/_components/MemberCard.tsx
index 9492d072..2b58733e 100644
--- a/src/app/(main)/member-settings/_components/MemberCard.tsx
+++ b/src/app/(main)/member-settings/_components/MemberCard.tsx
@@ -90,8 +90,8 @@ export function MemberCard({ member, isViewerHost, onKick, onTransfer }: Readonl
       <UserAvatar
         user={{ nickname: member.name, profileImageUrl: member.profileImageUrl ?? null }}
         size={36}
-        className={isOnline ? "bg-primary-subtle ring-2 ring-status-positive" : "bg-fill ring-1 ring-border-subtle"}
-        initialClassName={cn("font-medium", isOnline ? "text-primary" : "text-text-subtle")}
+        tone={isOnline ? "primary" : "neutral"}
+        ring={isOnline ? "online" : "offline"}
       />
 
       <div className="flex min-w-0 flex-1 flex-col gap-1">
diff --git a/src/app/home/_components/HomeHeader.tsx b/src/app/home/_components/HomeHeader.tsx
index e3224725..72804dfb 100644
--- a/src/app/home/_components/HomeHeader.tsx
+++ b/src/app/home/_components/HomeHeader.tsx
@@ -7,6 +7,7 @@ import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
 import { BrandLogo } from "@/components/BrandLogo";
+import { Avatar } from "@/components/ui/avatar";
 import { UserAvatar } from "@/components/user/UserAvatar";
 
 import { useQueryClient } from "@tanstack/react-query";
@@ -68,7 +69,7 @@ export function HomeHeader() {
             {user?.profileImageUrl ? (
               <UserAvatar user={user} size={36} />
             ) : (
-              <span className="size-9 rounded-full bg-fill-strong" aria-hidden />
+              <Avatar size={36} aria-hidden />
             )}
           </button>
 
diff --git a/src/components/chat/chat-message-chrome.ts b/src/components/chat/chat-message-chrome.ts
index 98ec07a2..c3176c49 100644
--- a/src/components/chat/chat-message-chrome.ts
+++ b/src/components/chat/chat-message-chrome.ts
@@ -1,5 +1,5 @@
 /**
- * 채팅 메시지 말풍선·아바타 래퍼 등 레이아웃·배경 토큰.
+ * 채팅 메시지 말풍선 등 레이아웃·배경 토큰.
  * 글자 크기·행간은 `chatTypography` 를 사용합니다.
  */
 import { chatAssets } from "@/lib/public-assets";
@@ -12,8 +12,6 @@ export const chatMessageChrome = {
     "border border-ai-bubble-border bg-ai-bubble text-gray-900 shadow-sm shadow-slate-900/5",
   systemPill:
     "max-w-[min(100%,20rem)] rounded-full bg-black/25 px-4 py-2 text-center text-white",
-  avatarSm:
-    "h-10 w-10 shrink-0 overflow-hidden rounded-xl shadow-sm ring-1 ring-gray-border",
   wooriIconSrc: chatAssets.woori,
 } as const;
 
diff --git a/src/components/chat/messages/ChatMemberAvatarRing.tsx b/src/components/chat/messages/ChatMemberAvatarRing.tsx
deleted file mode 100644
index 3cd76a01..00000000
--- a/src/components/chat/messages/ChatMemberAvatarRing.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-import { User } from "lucide-react";
-
-export function ChatMemberAvatarRing({
-  avatarUrl,
-  alt,
-  senderNotInRoom,
-  chromeAvatarClassName,
-  reduceMotion,
-}: {
-  avatarUrl?: string;
-  alt: string;
-  /** 방을 나간 타인 — 사진이 있어도 기본 프로필 플레이스홀더 오버레이 */
-  senderNotInRoom?: boolean;
-  chromeAvatarClassName: string;
-  reduceMotion: boolean | null;
-}) {
-  const [imgFailed, setImgFailed] = useState(false);
-
-  const [previousAvatarUrl, setPreviousAvatarUrl] = useState(avatarUrl);
-  if (previousAvatarUrl !== avatarUrl) {
-    setPreviousAvatarUrl(avatarUrl);
-    setImgFailed(false);
-  }
-
-  const showImage = Boolean(avatarUrl?.trim()) && !imgFailed;
-  const showPlaceholderOverlay =
-    Boolean(senderNotInRoom) || !showImage;
-
-  return (
-    <div className={cn(chromeAvatarClassName, "relative bg-light-gray")}>
-      {showImage ? (
-        // eslint-disable-next-line @next/next/no-img-element -- 멤버 프로필 URL 가변
-        <img
-          src={avatarUrl}
-          alt={alt}
-          // 구글 프로필(lh3.googleusercontent.com/a/…)은 Referer가 붙으면 로드를 거부한다
-          referrerPolicy="no-referrer"
-          className={cn(
-            "h-full w-full object-cover",
-            !reduceMotion && "transition-opacity duration-150 ease-out",
-          )}
-          onError={() => setImgFailed(true)}
-        />
-      ) : null}
-      {showPlaceholderOverlay ? (
-        <span
-          className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-[inherit] bg-[#ebebeb]"
-          aria-hidden
-        >
-          <User
-            className="h-[58%] w-[58%] text-[#bfbfbf]"
-            strokeWidth={1.35}
-          />
-        </span>
-      ) : null}
-    </div>
-  );
-}
diff --git a/src/components/chat/messages/ChatMessageGroup.tsx b/src/components/chat/messages/ChatMessageGroup.tsx
index f04172de..61fb5ab7 100644
--- a/src/components/chat/messages/ChatMessageGroup.tsx
+++ b/src/components/chat/messages/ChatMessageGroup.tsx
@@ -3,9 +3,10 @@ import { ChatMarkdownContent } from "@/components/chat/ChatMarkdownContent";
 import type { ChatMarkdownVariant } from "@/components/chat/chat-markdown-components";
 import { getChatPanelLook } from "@/components/chat/chat-panel-look";
 import { AiResponseBubble } from "@/components/chat/messages/AiResponseBubble";
-import { ChatMemberAvatarRing } from "@/components/chat/messages/ChatMemberAvatarRing";
 import type { ChatMessageTextTypography } from "@/components/chat/chat-typography";
+import { Avatar } from "@/components/ui/avatar";
 import { Spinner } from "@/components/ui/spinner";
+import { UserAvatar } from "@/components/user/UserAvatar";
 import { cn } from "@/lib/utils";
 import type { AiRequestStatus, ChatMessage } from "@/types/chat";
 
@@ -153,12 +154,16 @@ export function OtherMessageGroup({
   return (
     <div className="flex gap-2">
       <div className="flex flex-col items-center gap-1">
-        <ChatMemberAvatarRing
-          chromeAvatarClassName={chrome.avatarSm}
-          avatarUrl={first.avatar}
-          alt={first.sender ?? ""}
-          senderNotInRoom={first.senderNotInRoom}
-          reduceMotion
+        <UserAvatar
+          // 방을 나간 사람은 사진이 있어도 사람 아이콘을 보인다
+          user={{
+            nickname: first.sender ?? "",
+            profileImageUrl: first.senderNotInRoom ? null : (first.avatar ?? null),
+          }}
+          size={40}
+          shape="rounded"
+          tone="icon"
+          ring="subtle"
         />
         <span className={typo.metaMuted}>{first.sender}</span>
       </div>
@@ -268,18 +273,15 @@ export function AiMessageGroup({
   return (
     <div className="flex gap-2">
       <div className="flex shrink-0 flex-col items-center gap-0.5">
-        <div
-          className={cn(chrome.avatarSm, "bg-white")}
-          role="img"
-          aria-label="WOORI"
-        >
+        {/* 아래에 보이는 'WOORI' 라벨이 이름을 알리므로 그림은 장식으로 숨긴다 */}
+        <Avatar size={40} shape="rounded" tone="elevate" ring="subtle" aria-hidden>
           {/* eslint-disable-next-line @next/next/no-img-element -- public 정적 SVG(내장 래스터) */}
           <img
             src={chrome.wooriIconSrc}
-            alt="WOORI"
+            alt=""
             className="h-full w-full object-contain p-1"
           />
-        </div>
+        </Avatar>
         <span className={typo.wooriSenderLabel}>WOORI</span>
       </div>
 
diff --git a/src/components/chat/messages/NewMessagePreviewButton.tsx b/src/components/chat/messages/NewMessagePreviewButton.tsx
index 9aac7ce9..5a5d1792 100644
--- a/src/components/chat/messages/NewMessagePreviewButton.tsx
+++ b/src/components/chat/messages/NewMessagePreviewButton.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { UserAvatar } from "@/components/user/UserAvatar";
 import { cn } from "@/lib/utils";
 import type { ChatMessage } from "@/types/chat";
-import { ChatMemberAvatarRing } from "./ChatMemberAvatarRing";
 
 export const PLACE_SHARE_PREVIEW_TEXT = "장소를 공유했습니다.";
 
@@ -36,15 +36,16 @@ export function NewMessagePreviewButton({
           isMinimized && "gap-1.5 py-1 pl-1 pr-3",
         )}
       >
-        <ChatMemberAvatarRing
-          chromeAvatarClassName={cn(
-            "shrink-0 overflow-hidden rounded-lg ring-1 ring-border",
-            isMinimized ? "h-6 w-6" : "h-7 w-7",
-          )}
-          avatarUrl={message.avatar}
-          alt=""
-          senderNotInRoom={message.senderNotInRoom}
-          reduceMotion
+        <UserAvatar
+          // 방을 나간 사람은 사진이 있어도 사람 아이콘을 보인다
+          user={{
+            nickname: message.sender ?? "",
+            profileImageUrl: message.senderNotInRoom ? null : (message.avatar ?? null),
+          }}
+          size={isMinimized ? 24 : 28}
+          shape="rounded"
+          tone="icon"
+          ring="default"
         />
         <span
           className={cn(
diff --git a/src/components/chat/messages/PlaceShareCard.tsx b/src/components/chat/messages/PlaceShareCard.tsx
index 37b3ba96..4f545575 100644
--- a/src/components/chat/messages/PlaceShareCard.tsx
+++ b/src/components/chat/messages/PlaceShareCard.tsx
@@ -7,10 +7,9 @@ import { useSessionUser } from "@/hooks/useSessionUser";
 import { placePhotoUrlQueryKey } from "@/lib/place-photo-query";
 import { getQueryClient } from "@/lib/query-client";
 import { cn } from "@/lib/utils";
-import { chatMessageChrome } from "@/components/chat/chat-message-chrome";
 import { resolveChatMessageTypography } from "@/components/chat/chat-typography";
 import type { ChatMessage } from "@/types/chat";
-import { ChatMemberAvatarRing } from "@/components/chat/messages/ChatMemberAvatarRing";
+import { UserAvatar } from "@/components/user/UserAvatar";
 
 export function PlaceShareCard({
   message,
@@ -82,12 +81,16 @@ export function PlaceShareCard({
   return (
     <div className="flex gap-2">
       <div className="flex flex-col items-center gap-1">
-        <ChatMemberAvatarRing
-          chromeAvatarClassName={chatMessageChrome.avatarSm}
-          avatarUrl={message.avatar}
-          alt={message.sender ?? ""}
-          senderNotInRoom={message.senderNotInRoom}
-          reduceMotion
+        <UserAvatar
+          // 방을 나간 사람은 사진이 있어도 사람 아이콘을 보인다
+          user={{
+            nickname: message.sender ?? "",
+            profileImageUrl: message.senderNotInRoom ? null : (message.avatar ?? null),
+          }}
+          size={40}
+          shape="rounded"
+          tone="icon"
+          ring="subtle"
         />
         <span
           className={cn("max-w-[4rem] truncate text-center", typo.metaMuted)}
diff --git a/src/components/expenses/ExpenseViews.tsx b/src/components/expenses/ExpenseViews.tsx
index 79ef0722..04d63004 100644
--- a/src/components/expenses/ExpenseViews.tsx
+++ b/src/components/expenses/ExpenseViews.tsx
@@ -26,7 +26,7 @@ import {
   roleOptions,
   type MemberQueryStatus,
 } from "@/lib/expenses/expense-policy";
-import { ChatMemberAvatarRing } from "@/components/chat/messages/ChatMemberAvatarRing";
+import { UserAvatar } from "@/components/user/UserAvatar";
 
 export const expenseButtonClass =
   "min-h-10 rounded-lg border border-gray-border px-3 py-2 text-label-m-emphasis mobile:text-label-s-emphasis font-semibold cursor-pointer transition-colors enabled:hover:border-primary/40 enabled:hover:bg-primary/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50";
@@ -71,12 +71,13 @@ export function ExpensePerson({
       title={person.label}
       className="inline-flex min-w-0 max-w-full items-center gap-1.5 align-middle"
     >
-      {person.imageUrl ? <ChatMemberAvatarRing
-        avatarUrl={person.imageUrl ?? undefined}
-        alt=""
-        chromeAvatarClassName="h-6 w-6 shrink-0 overflow-hidden rounded-full border-[1.5px] border-white"
-        reduceMotion={true}
-      /> : <span aria-hidden className="flex size-6 shrink-0 items-center justify-center rounded-full border-[1.5px] border-white bg-primary-subtle text-[12px] leading-4 text-primary">{person.label.slice(0, 1)}</span>}
+      {/* tone이 대체를 정한다: 사진을 못 받으면 사람 아이콘, 사진이 없으면 라벨 첫 글자 */}
+      <UserAvatar
+        user={{ nickname: person.label, profileImageUrl: person.imageUrl }}
+        size={24}
+        tone={person.imageUrl ? "icon" : "primary"}
+        ring="cutout"
+      />
       <span
         className={compact || memberStatus === "pending" ? "sr-only" : "min-w-0 [overflow-wrap:anywhere]"}
       >
diff --git a/src/components/layout/HeaderMemberPreview.tsx b/src/components/layout/HeaderMemberPreview.tsx
index 2d5a4047..5506963a 100644
--- a/src/components/layout/HeaderMemberPreview.tsx
+++ b/src/components/layout/HeaderMemberPreview.tsx
@@ -7,6 +7,7 @@ import { MemberList } from "@/app/(main)/member-settings/_components/MemberList"
 import { useMemberActions } from "@/app/(main)/member-settings/_components/useMemberActions";
 import { ChevronDownIcon, SendIcon } from "@/assets/icons";
 import { InviteRoomDialog } from "@/components/rooms/InviteRoomDialog";
+import { AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar";
 import { UserAvatar } from "@/components/user/UserAvatar";
 import { useHostJoinRequestsBadgeCount } from "@/hooks/useHostJoinRequestsBadgeCount";
 import { selectHeaderMemberPreview } from "@/lib/rooms/member-preview";
@@ -78,35 +79,29 @@ export function HeaderMemberPreview() {
             onClick={() => setDropdownOpen((open) => !open)}
             className="isolate flex cursor-pointer items-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
           >
-            <span className="flex items-center">
+            <AvatarGroup>
               {visible.map(({ member, isOnline }, index) => (
-                <span
+                <UserAvatar
                   key={member.userId}
-                  aria-hidden
+                  user={member}
+                  size={28}
+                  tone={isOnline ? "primary" : "neutral"}
+                  ring={isOnline ? "online" : "offline"}
+                  // 앞사람(본인)이 위에 온다. +N(z-1)·화살표(z-0)보다 위 층이다
                   style={{ zIndex: visible.length - index + 1 }}
-                  className={index > 0 ? "relative -ml-1.5" : "relative"}
-                >
-                  <UserAvatar
-                    user={member}
-                    size={28}
-                    className={isOnline ? "bg-primary-subtle ring-2 ring-status-positive" : "bg-fill ring-2 ring-border grayscale brightness-110 contrast-75"}
-                    initialClassName={cn("font-medium", isOnline ? "text-primary" : "text-text-subtle")}
-                  />
-                </span>
+                />
               ))}
               {restCount > 0 ? (
-                <span
-                  aria-hidden
-                  className="relative z-[1] -ml-1.5 flex size-7 items-center justify-center rounded-full bg-fill text-label-m-regular text-text-subtle"
-                >
+                <AvatarGroupCount aria-hidden className="z-1">
                   +{restCount}
-                </span>
+                </AvatarGroupCount>
               ) : null}
-              <span aria-hidden className="relative z-0 -ml-1.5 flex size-7 items-center justify-center rounded-full bg-fill">
+              {/* 묶음(isolate) 밖에 두면 마지막 아바타를 덮으므로 안에서 가장 아래 층에 둔다 */}
+              <span aria-hidden className="relative z-0 flex size-7 items-center justify-center rounded-full bg-fill">
                 <ChevronDownIcon size={16} className={cn("text-icon-subtle transition-transform", dropdownOpen && "rotate-180")} />
                 {pendingJoinRequestsCount > 0 ? <SidebarPingBadge className="-right-1 -top-1" /> : null}
               </span>
-            </span>
+            </AvatarGroup>
           </button>
 
           {dropdownOpen ? (
diff --git a/src/components/place/ReviewsTab.tsx b/src/components/place/ReviewsTab.tsx
index a3081638..47e44faf 100644
--- a/src/components/place/ReviewsTab.tsx
+++ b/src/components/place/ReviewsTab.tsx
@@ -1,5 +1,7 @@
 import { ExternalLink } from "lucide-react";
 
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
 import { StarRow } from "./StarRow";
 import type { PlaceReview } from "./types";
 
@@ -73,9 +75,9 @@ export function ReviewsTab({
       <div className="space-y-4">
         {reviews.map((review, i) => (
           <div key={i} className="flex gap-2.5">
-            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-100 text-body-s-emphasis mobile:text-body-xs-emphasis font-medium text-dark-gray">
-              {review.authorDisplayName?.charAt(0)}
-            </div>
+            <Avatar size={32} tone="neutral" aria-hidden>
+              <AvatarFallback>{review.authorDisplayName?.charAt(0)}</AvatarFallback>
+            </Avatar>
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-1.5">
                 <span className="text-body-s-emphasis mobile:text-body-xs-emphasis font-medium text-[#364153]">
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index b7136a9c..edfc9aab 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils";
 // Figma DS에 Avatar 컴포넌트가 없어 지금 화면들의 아바타 모양을 옮긴다. Figma 근거는 Header Profile(5219:10776)의
 // 36px·fill/strong 원뿐이라 이것을 기본값으로 둔다. 크기는 글자 설정을 따라 커지지 않게 px로 둔다(원칙 3-2).
 // 대체 글자는 화면별 지금 크기·굵기(24 가계부, 28 헤더 미리보기, 32 리뷰, 36 구성원, 56 내 정보)에 가장 가까운 토큰이고,
-// 글자를 쓰는 곳이 없는 40은 UserAvatar 규칙(크기의 44%)을 따른다. 대체 아이콘은 채팅 아바타 규칙(크기의 58%)에 가장 가까운 Figma 아이콘 크기다.
+// 글자를 쓰는 곳이 없는 40은 크기의 44%(18px)다. 대체 아이콘은 지금 채팅 아바타처럼 크기의 58%에 가장 가까운 Figma 아이콘 크기다.
 const avatarVariants = cva("relative flex shrink-0 select-none items-center justify-center overflow-hidden", {
   variants: {
     size: {
diff --git a/src/components/user/UserAvatar.tsx b/src/components/user/UserAvatar.tsx
index 440e1a84..c99b3121 100644
--- a/src/components/user/UserAvatar.tsx
+++ b/src/components/user/UserAvatar.tsx
@@ -1,46 +1,23 @@
-"use client";
+import type { ComponentProps } from "react";
 
-import Image from "next/image";
-import { useState } from "react";
+import { UserIcon } from "@/assets/icons";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
-import { cn } from "@/lib/utils";
-
-type Props = {
+type Props = Pick<ComponentProps<typeof Avatar>, "size" | "shape" | "tone" | "ring" | "className" | "style"> & {
   user: { nickname: string; profileImageUrl: string | null };
-  size?: number;
-  className?: string;
-  /** 이니셜 대체 표시 글자 스타일 */
-  initialClassName?: string;
 };
 
-/** 프로필 이미지가 없거나 로드에 실패하면 닉네임 첫 글자로 대체 */
-export function UserAvatar({ user, size = 32, className, initialClassName = "font-semibold text-white" }: Readonly<Props>) {
-  const [failed, setFailed] = useState(false);
-  const initial = user.nickname.charAt(0);
-  const showImage = Boolean(user.profileImageUrl) && !failed;
+/**
+ * 프로필 사진이 없거나 로드에 실패하면 닉네임 첫 글자로, tone="icon"(채팅·가계부 사진 자리)이면 사람 아이콘으로 대체.
+ * 쓰는 곳마다 이름이 옆에 보이거나 버튼 aria-label이 있어 장식으로 숨긴다
+ */
+export function UserAvatar({ user, tone, ...avatarProps }: Readonly<Props>) {
+  const src = user.profileImageUrl?.trim();
 
   return (
-    <span
-      className={cn("flex shrink-0 items-center justify-center overflow-hidden rounded-full", className)}
-      style={{ width: size, height: size }}
-    >
-      {showImage ? (
-        <Image
-          src={user.profileImageUrl as string}
-          alt={user.nickname}
-          width={size}
-          height={size}
-          className="h-full w-full object-cover"
-          onError={() => setFailed(true)}
-        />
-      ) : (
-        <span
-          className={initialClassName}
-          style={{ fontSize: Math.round(size * 0.44) }}
-        >
-          {initial}
-        </span>
-      )}
-    </span>
+    <Avatar aria-hidden tone={tone} {...avatarProps}>
+      {src ? <AvatarImage src={src} alt="" /> : null}
+      <AvatarFallback>{tone === "icon" ? <UserIcon /> : Array.from(user.nickname.trim())[0]}</AvatarFallback>
+    </Avatar>
   );
 }

From 04d30c9b89ab464bf738875239915b594cec87ef Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 21:48:14 +0900
Subject: [PATCH 24/93] =?UTF-8?q?refactor(text-field):=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=C2=B7=EB=A9=94=EB=AA=A8=20=EC=B9=B8=EC=9D=84=20ui=20F?=
 =?UTF-8?q?ield=C2=B7Input=C2=B7Textarea=EB=A1=9C=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 북마크 제목, 가계부 제목·금액·메모·예산, 여행 제목, 준비물 이름·메모, 모바일 메모 시트, 일정 카드 메모를 Field·FieldLabel·Input·Textarea로 바꾸고 라벨은 htmlFor/id로 연결
- 북마크 글자 수는 FieldSuffix, 가계부·준비물 메모 글자 수는 FieldFooter·FieldCount, 예산·준비물 입력 오류는 FieldError(role=alert), 모바일 메모 안내는 FieldDescription으로 옮김
- 예산 모달은 입력 검증 오류만 칸의 Error 상태로 그리고, 저장 실패·충돌 문구는 지금처럼 칸 밖 문장으로 둠
- 준비물 이름·메모에 aria-invalid·aria-describedby를 달아 오류를 Figma Error 모양으로 그림
- ExpenseAmountInput은 ui Input을 그리고 금액 고정폭 숫자(tabular-nums)만 더함
- 쓰지 않게 된 expenseInputClass·PLAN_PLACE_CARD_TW.memoTextarea·준비물 CSS 규칙·RoomTripEditFields 로컬 Field의 htmlFor 분기·일정 메모 rows 삭제
- 준비물 CSS의 레이어 밖 focus-visible 규칙에서 input·textarea를 빼 포커스를 primary 테두리로 통일
- react-test-renderer 가짜 이벤트에 currentTarget 추가(Base UI Input이 읽음, 기대값은 그대로)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../bookmark/_components/AddBookmarkModal.tsx | 28 +++++--------
 .../itinerary/PlanItemMemoForm.tsx            |  7 ++--
 .../_components/mobile/MobileMemoSheet.tsx    | 42 ++++++++++---------
 .../expenses/ExpenseAmountInput.tsx           | 12 +++---
 .../expenses/ExpenseBudgetModal.tsx           | 20 +++++----
 .../expenses/ExpenseEditor.pending.test.tsx   |  3 +-
 .../expenses/ExpenseEditor.test.tsx           | 18 +++++---
 src/components/expenses/ExpenseEditor.tsx     | 38 ++++++++++-------
 src/components/expenses/ExpenseViews.tsx      |  2 -
 src/components/packing/PackingPage.module.css |  8 +---
 src/components/packing/PackingPage.test.tsx   | 24 ++++++-----
 src/components/packing/PackingPage.tsx        | 19 +++++----
 src/components/rooms/RoomTripEditFields.tsx   | 17 ++++----
 src/lib/layout-tokens.ts                      |  2 -
 14 files changed, 126 insertions(+), 114 deletions(-)

diff --git a/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx b/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx
index 7b646559..ea3dcec1 100644
--- a/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx
+++ b/src/app/(main)/bookmark/_components/AddBookmarkModal.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { Field, 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";
 
@@ -102,23 +104,14 @@ export function AddBookmarkModal({
         ) : null}
 
         <form onSubmit={handleSubmit} className="mt-5 space-y-5">
-          <div>
-            <div className="mb-1.5 flex items-baseline justify-between gap-2">
-              <label
-                htmlFor="bookmark-title"
-                className="block text-label-l-regular mobile:text-label-m-regular font-medium text-neutral-900"
-              >
-                제목
-              </label>
-              <span
-                id="bookmark-title-counter"
-                className="shrink-0 text-body-s-regular mobile:text-body-xs-regular tabular-nums text-dark-gray"
-                aria-live="polite"
-              >
+          <Field>
+            <FieldHeader>
+              <FieldLabel htmlFor="bookmark-title">제목</FieldLabel>
+              <FieldSuffix id="bookmark-title-counter" aria-live="polite">
                 {title.length}/{TITLE_MAX_LENGTH}
-              </span>
-            </div>
-            <input
+              </FieldSuffix>
+            </FieldHeader>
+            <Input
               id="bookmark-title"
               type="text"
               value={title}
@@ -126,9 +119,8 @@ export function AddBookmarkModal({
               maxLength={TITLE_MAX_LENGTH}
               placeholder={untitledNameHint ?? UNTITLED_BOOKMARK_CATEGORY_LABEL}
               aria-describedby="bookmark-title-counter"
-              className="w-full rounded-xl border border-gray-border px-3 py-2.5 text-body-m-regular outline-none ring-primary/30 focus:border-primary focus:ring-2"
             />
-          </div>
+          </Field>
 
           <div>
             <span className="mb-2 block text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-neutral-900">
diff --git a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
index cadd1c3f..6341196f 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
@@ -5,6 +5,7 @@ import { MemoIcon } from "@/components/icons";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 
+import { Textarea } from "@/components/ui/textarea";
 import { useUpdateScheduleItem } from "@/hooks/useRooms";
 import { PLAN_PLACE_CARD_TW } from "@/lib/layout-tokens";
 import { renderTextWithLinks } from "@/lib/text/renderTextWithLinks";
@@ -224,17 +225,17 @@ export function PlanItemMemoEditor({
         </div>
 
         <div className={PLAN_PLACE_CARD_TW.editorBody}>
-          <textarea
+          <Textarea
             aria-label="일정 메모"
             value={draft}
             maxLength={SCHEDULE_ITEM_MEMO_MAX_LENGTH}
-            rows={4}
             placeholder="여기에 메모를 작성하세요"
             disabled={isPending}
             onMouseDown={stopCardActivation}
             onClick={stopCardActivation}
             onChange={(e) => setDraft(e.target.value)}
-            className={cn(PLAN_PLACE_CARD_TW.memoTextarea, "select-text cursor-text")}
+            // 카드(article)의 select-none과 잡기·기본 커서를 물려받지 않게 글자 선택·글자 커서로 되돌린다
+            className="select-text cursor-text"
           />
           <div className={PLAN_PLACE_CARD_TW.editorFooterRow}>
             <span className="mr-auto text-caption-s-regular tabular-nums text-dark-gray/60">
diff --git a/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx b/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
index 1217c5bf..cc17be6d 100644
--- a/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
@@ -1,9 +1,11 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { toast } from "sonner";
 
 import { MobileBottomSheet } from "@/components/mobile/MobileBottomSheet";
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
+import { Textarea } from "@/components/ui/textarea";
 import { useUpdateScheduleItem } from "@/hooks/useRooms";
 
 const MEMO_MAX_LENGTH = 2000;
@@ -30,6 +32,8 @@ export function MobileMemoSheet({
   const [draft, setDraft] = useState(initial);
   const { mutateAsync, isPending } = useUpdateScheduleItem();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const memoId = useId();
+  const descriptionId = useId();
 
   // 시트가 열리면 바로 입력할 수 있게 포커스하고 커서를 기존 메모 끝에 둔다
   useEffect(() => {
@@ -60,24 +64,24 @@ export function MobileMemoSheet({
       variant="form"
       closeDisabled={isPending}
     >
-      <label className="flex flex-col gap-4">
-        <span className="text-label-m-regular text-text">메모</span>
-        <div className="h-36 rounded-[12px] bg-fill py-3 focus-within:ring-2 focus-within:ring-primary/30">
-          <textarea
-            ref={textareaRef}
-            value={draft}
-            maxLength={MEMO_MAX_LENGTH}
-            onChange={(e) => setDraft(e.target.value)}
-            disabled={isPending}
-            rows={5}
-            placeholder="메모를 입력하세요"
-            className="block size-full resize-none bg-transparent px-3 text-body-m-regular text-text outline-none [scrollbar-color:var(--color-border-default)_transparent] [scrollbar-width:thin] placeholder:text-text-subtle"
-          />
-        </div>
-      </label>
-      <p className="text-caption-l-regular text-text-subtle">
-        예약 정보나 함께 기억할 내용을 남겨보세요.
-      </p>
+      <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
diff --git a/src/components/expenses/ExpenseAmountInput.tsx b/src/components/expenses/ExpenseAmountInput.tsx
index 13aa960a..5341600b 100644
--- a/src/components/expenses/ExpenseAmountInput.tsx
+++ b/src/components/expenses/ExpenseAmountInput.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { useLayoutEffect, useRef, type ComponentProps } from "react";
+import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
-import { expenseInputClass, formatExpenseAmount } from "./ExpenseViews";
+import { formatExpenseAmount } from "./ExpenseViews";
 
 export function ExpenseAmountInput({
   value,
@@ -35,14 +36,11 @@ export function ExpenseAmountInput({
     caret.current = null;
   }, [formatted]);
   return (
-    <input
+    <Input
       {...inputProps}
       ref={input}
-      className={cn(
-        expenseInputClass,
-        "block h-12 text-[16px] font-normal tabular-nums placeholder:text-text-subtle",
-        inputProps.className,
-      )}
+      // 가계부의 다른 금액 표시처럼 고정폭 숫자로 그린다. Input의 글자 토큰(크기·굵기·색)은 덮지 않는다
+      className={cn("tabular-nums", inputProps.className)}
       inputMode={inputProps.inputMode ?? "decimal"}
       value={formatted}
       placeholder={placeholder}
diff --git a/src/components/expenses/ExpenseBudgetModal.tsx b/src/components/expenses/ExpenseBudgetModal.tsx
index 1c9d122d..caddf516 100644
--- a/src/components/expenses/ExpenseBudgetModal.tsx
+++ b/src/components/expenses/ExpenseBudgetModal.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
 import { Spinner } from "@/components/ui/spinner";
 
 import { useCallback, useId, useRef, useState } from "react";
@@ -29,7 +30,9 @@ export function ExpenseBudgetModal({
   const [opened] = useState(initial);
   const [draft, setDraft] = useState(initial.budgetKrw ?? "");
   const [version, setVersion] = useState(initial.version);
+  // 저장 실패(네트워크·충돌·서버 메시지)는 칸 밖 문장으로, 입력 검증 오류만 칸의 Error 상태로 그린다
   const [error, setError] = useState("");
+  const [fieldError, setFieldError] = useState("");
   const [pending, setPending] = useState(false);
   const [conflict, setConflict] = useState<{
     latest?: ExpenseBudget;
@@ -38,6 +41,7 @@ export function ExpenseBudgetModal({
   const lock = useRef(false);
   const inputId = useId();
   const errorId = useId();
+  const fieldErrorId = useId();
   // Stable callback keeps the shared dialog's focus scope intact while typing.
   const close = useCallback(() => {
     if (!lock.current) onClose();
@@ -66,7 +70,7 @@ export function ExpenseBudgetModal({
     if (lock.current || context.budgetBusy || !context.canManage || conflict)
       return;
     if (!/^\d{1,15}$/.test(draft)) {
-      setError(
+      setFieldError(
         "예산은 1~15자리 숫자로 입력해 주세요. 음수·소수점·공백은 사용할 수 없어요.",
       );
       return;
@@ -107,10 +111,10 @@ export function ExpenseBudgetModal({
         }}
       >
         <p className="sr-only">여행 전체의 예산을 설정해 주세요.</p>
-        <div>
-          <label htmlFor={inputId} className="text-[12px] leading-4 font-medium">
+        <Field>
+          <FieldLabel htmlFor={inputId}>
             예산 (KRW)
-          </label>
+          </FieldLabel>
           <ExpenseAmountInput
             id={inputId}
             type="text"
@@ -118,14 +122,16 @@ export function ExpenseBudgetModal({
             autoComplete="off"
             value={draft}
             disabled={busy}
-            aria-invalid={Boolean(error)}
-            aria-describedby={error ? errorId : undefined}
+            aria-invalid={Boolean(fieldError)}
+            aria-describedby={fieldError ? fieldErrorId : error ? errorId : undefined}
             onChange={(value) => {
               setDraft(value);
               setError("");
+              setFieldError("");
             }}
           />
-        </div>
+          <FieldError id={fieldErrorId}>{fieldError}</FieldError>
+        </Field>
         {error && (
           <p
             id={errorId}
diff --git a/src/components/expenses/ExpenseEditor.pending.test.tsx b/src/components/expenses/ExpenseEditor.pending.test.tsx
index 242486d6..f442409a 100644
--- a/src/components/expenses/ExpenseEditor.pending.test.tsx
+++ b/src/components/expenses/ExpenseEditor.pending.test.tsx
@@ -117,7 +117,8 @@ it.each(["memo", "amount", "unchanged"])("retains PENDING and rejects %s edits u
   if (edit === "memo") {
     await act(async () => renderer.root.findByType("textarea").props.onChange({ target: { value: "edited" } }));
   } else if (edit === "amount") {
-    await act(async () => renderer.root.findAllByType("input").find((i) => i.props.inputMode === "decimal")!.props.onChange({ target: { value: "200" } }));
+    // 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" } }));
   }
   await submit();
   expect(mocks.save).not.toHaveBeenCalled();
diff --git a/src/components/expenses/ExpenseEditor.test.tsx b/src/components/expenses/ExpenseEditor.test.tsx
index b1789d1a..17bd849a 100644
--- a/src/components/expenses/ExpenseEditor.test.tsx
+++ b/src/components/expenses/ExpenseEditor.test.tsx
@@ -45,11 +45,17 @@ function stubLocalStorage() {
   return entries;
 }
 
+// Base UI Input은 사용자 onChange 다음에 event.currentTarget.value를 읽는다
+function changeEvent(value: string) {
+  const element = { value };
+  return { target: element, currentTarget: element };
+}
+
 async function completeNewExpense() {
   const amount = renderer.root.findAllByType("input")
     .find((input) => input.props.inputMode === "decimal")!;
   const currency = renderer.root.findByType(ExpenseCurrencyPicker).props.value;
-  await act(async () => amount.props.onChange({ target: { value: currency === "USD" ? "100.00" : "100" } }));
+  await act(async () => 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() {} }));
 }
@@ -202,7 +208,7 @@ it("formats typed amounts without changing exact submitted decimals", async () =
     .findAllByType("input")
     .find((i) => i.props.inputMode === "decimal")!;
   await act(async () =>
-    amount.props.onChange({ target: { value: "999,999,999,999,999.99" } }),
+    amount.props.onChange(changeEvent("999,999,999,999,999.99")),
   );
   expect(amount.props.value).toBe("999,999,999,999,999.99");
   await act(async () =>
@@ -361,14 +367,14 @@ it("blocks wrong currency scale without truncating and guards rapid duplicate su
     .findAllByType("input")
     .find((i) => i.props.inputMode === "decimal")!;
   await act(async () =>
-    amount.props.onChange({ target: { value: "10.001" } }),
+    amount.props.onChange(changeEvent("10.001")),
   );
   await act(async () =>
     renderer.root.findByType("form").props.onSubmit({ preventDefault() {} }),
   );
   expect(mocks.save).not.toHaveBeenCalled();
   await act(async () =>
-    amount.props.onChange({ target: { value: "10.01" } }),
+    amount.props.onChange(changeEvent("10.01")),
   );
   let finish!: () => void;
   mocks.save.mockImplementation(
@@ -418,7 +424,7 @@ it.each([
       .findAllByType("input")
       .find((i) => i.props.inputMode === "decimal")!;
     await act(async () =>
-      amount.props.onChange({ target: { value: "100" } }),
+      amount.props.onChange(changeEvent("100")),
     );
     for (const checkbox of renderer.root
       .findAllByType("input")
@@ -497,7 +503,7 @@ async function fillNewExpense() {
   const amount = renderer.root
     .findAllByType("input")
     .find((i) => i.props.inputMode === "decimal")!;
-  await act(async () => amount.props.onChange({ target: { value: "100" } }));
+  await act(async () => amount.props.onChange(changeEvent("100")));
   for (const checkbox of renderer.root
     .findAllByType("input")
     .filter((i) => i.props.type === "checkbox" && !i.props.checked)) {
diff --git a/src/components/expenses/ExpenseEditor.tsx b/src/components/expenses/ExpenseEditor.tsx
index e60695b9..24bf2fb9 100644
--- a/src/components/expenses/ExpenseEditor.tsx
+++ b/src/components/expenses/ExpenseEditor.tsx
@@ -1,5 +1,8 @@
 "use client";
+import { Field, FieldCount, FieldFooter, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
 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";
@@ -26,7 +29,6 @@ import {
   ExpenseList,
   ExpenseRolePicker,
   expenseButtonClass,
-  expenseInputClass,
 } from "./ExpenseViews";
 export type ExpenseEntry = {
   expense?: Expense;
@@ -193,6 +195,9 @@ export function ExpenseEditor({
   const titleId = useId();
   const heading = useRef<HTMLHeadingElement>(null);
   const errorId = useId();
+  const nameId = useId();
+  const amountId = useId();
+  const memoId = useId();
   const places = useSchedulePlanPlaces(context.roomId, body.scheduleId);
   useEffect(() => {
     const element = dialog.current;
@@ -377,12 +382,12 @@ export function ExpenseEditor({
         </BottomSheetDragHandle>
         <div className="min-h-0 flex-1 space-y-5 overflow-y-auto overscroll-contain px-8 py-6 [scrollbar-gutter:auto] mobile:px-5 mobile:pt-0">
         <fieldset disabled={pending} className="min-w-0 space-y-5 mobile:space-y-4">
-          <label className="block text-[12px] leading-4">
-            <span>제목 (선택)</span>
-            <input name="expense-title" aria-label="제목 (선택)" className={`${expenseInputClass} text-[16px] placeholder:text-text-subtle`} maxLength={100}
+          <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)} />
-          </label>
+          </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
@@ -394,15 +399,16 @@ export function ExpenseEditor({
                 change("currency", value);
               }}
             />
-            <label className="block min-w-0 text-[12px] leading-4 font-medium">
-              <span className="block text-[12px] leading-4 font-medium">금액</span>
+            <Field>
+              <FieldLabel htmlFor={amountId}>금액</FieldLabel>
               <ExpenseAmountInput
+                id={amountId}
                 value={body.totalAmount}
                 fractionDigits={currency?.fractionDigits}
                 onChange={(value) => change("totalAmount", value)}
                 placeholder={amountPlaceholder(currency)}
               />
-            </label>
+            </Field>
           </div>
           {!context.currencies.isSuccess && (
             <output className={context.currencies.isError ? "text-body-s-regular mobile:text-body-xs-regular text-dark-gray" : "sr-only"}>
@@ -511,19 +517,19 @@ export function ExpenseEditor({
           ) : (
             memberFallback
           )}
-          <label className="block text-[12px] leading-4 font-medium">
-            메모 (선택)
-            <textarea
-              className={`${expenseInputClass} min-h-24 resize-none text-[16px]`}
+          <Field>
+            <FieldLabel htmlFor={memoId}>메모 (선택)</FieldLabel>
+            <Textarea
+              id={memoId}
               rows={3}
               maxLength={1000}
               value={body.memo ?? ""}
               onChange={(e) => change("memo", e.target.value)}
             />
-            <span className="block text-right text-body-xs-regular text-dark-gray">
-              {body.memo?.length ?? 0}/1000
-            </span>
-          </label>
+            <FieldFooter>
+              <FieldCount>{body.memo?.length ?? 0}/1000</FieldCount>
+            </FieldFooter>
+          </Field>
         </fieldset>
         {!context.canManage && context.memberStatus === "success" && (
           <p role="alert">
diff --git a/src/components/expenses/ExpenseViews.tsx b/src/components/expenses/ExpenseViews.tsx
index 04d63004..9317b7a7 100644
--- a/src/components/expenses/ExpenseViews.tsx
+++ b/src/components/expenses/ExpenseViews.tsx
@@ -30,8 +30,6 @@ import { UserAvatar } from "@/components/user/UserAvatar";
 
 export const expenseButtonClass =
   "min-h-10 rounded-lg border border-gray-border px-3 py-2 text-label-m-emphasis mobile:text-label-s-emphasis font-semibold cursor-pointer transition-colors enabled:hover:border-primary/40 enabled:hover:bg-primary/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50";
-export const expenseInputClass =
-  "mt-1 min-h-12 w-full min-w-0 rounded-lg border border-border bg-fill-subtle px-3 py-2 text-body-s-regular focus:outline-primary";
 // Group the integer string directly so large amounts and trailing decimals stay exact.
 import { formatExpenseAmount } from "@/lib/expenses/format-expense-amount";
 
diff --git a/src/components/packing/PackingPage.module.css b/src/components/packing/PackingPage.module.css
index c38e235c..8e3b1eb6 100644
--- a/src/components/packing/PackingPage.module.css
+++ b/src/components/packing/PackingPage.module.css
@@ -10,7 +10,7 @@
 }
 .page button:enabled,.dialogActions button:enabled {cursor:pointer}
 .page button:disabled,.dialogActions button:disabled {cursor:not-allowed;opacity:0.5}
-.page button:focus-visible,.page textarea:focus-visible,.page input:focus-visible,.dialog button:focus-visible,.dialog input:focus-visible {outline:2px solid var(--color-primary-default);outline-offset:2px}
+.page button:focus-visible,.dialog 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}
@@ -65,9 +65,6 @@
 .collapseDetail:hover {background:var(--color-icon-default)}
 .memoPanel {min-width:0}
 .sectionTitle {display:block;margin:0 0 12px;font-size:14px;line-height:20px;font-weight:700}
-.memoField {display:block;width:100%;height:96px;min-height:96px;resize:none;border:1px solid var(--color-border-default);border-radius:8px;background:var(--color-fill-subtle);padding:12px 14px;font-size:16px;line-height:24px;overflow-wrap:anywhere}
-.memoField::placeholder {color:var(--color-text-subtle)}
-.memoFooter {height:16px;margin-top:4px;text-align:right;color:var(--color-text-subtle);font-size:11px;line-height:16px}
 .dialogActions {display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
 .actionButton {display:inline-flex;align-items:center;justify-content:center;min-width:80px;height:36px;border:1px solid var(--color-border-default);border-radius:8px;background:var(--color-fill-subtle);padding:8px 16px;color:var(--color-text-default);font-size:14px;line-height:20px;font-weight:700;white-space:nowrap}
 /* 다른 항목의 저장을 기다리는 잠금은 버튼의 명도를 바꾸지 않는다. */
@@ -83,9 +80,6 @@
 .tipCard h4 {margin-bottom:16px;font-weight:700;overflow-wrap:anywhere}
 .tipCard ul {display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
 .tipCard li {color:var(--color-text-subtle);overflow-wrap:anywhere}
-.fieldLabel {display:block;font-size:12px;line-height:16px;font-weight:500}
-.field {display:block;width:100%;height:48px;margin-top:4px;border:1px solid var(--color-border-default);border-radius:8px;background:var(--color-fill-subtle);padding:12px 14px;font-size:16px;line-height:24px;font-weight:400}
-.error {margin-top:8px;color:var(--color-status-negative);font-size:12px;line-height:18px}
 .deleteCopy {margin:0;color:var(--color-text-subtle);font-size:16px;line-height:24px;overflow-wrap:anywhere}
 .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}
diff --git a/src/components/packing/PackingPage.test.tsx b/src/components/packing/PackingPage.test.tsx
index 897a13a9..34b6bb57 100644
--- a/src/components/packing/PackingPage.test.tsx
+++ b/src/components/packing/PackingPage.test.tsx
@@ -20,6 +20,8 @@ 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};}
 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);
@@ -55,35 +57,35 @@ it('renders added categories after the four defaults even when they share backen
 });
 it('selects an item and shows only its server supplied tips',async()=>{await mount();await selectFirstItem();expect(JSON.stringify(renderer.toJSON())).toContain('유효기간을 확인하세요.');expect(JSON.stringify(renderer.toJSON())).toContain('사본을 준비하세요.');await act(async()=>button('준비물 선택: 항공권 예약 내역').props.onClick());expect(JSON.stringify(renderer.toJSON())).not.toContain('유효기간을 확인하세요.');expect(JSON.stringify(renderer.toJSON())).not.toContain('우때의 여행 팁');});
 it('keeps checkbox independent from item selection',async()=>{await mount();await selectFirstItem();await act(async()=>input('항공권 예약 내역 준비 완료').props.onChange({target:{checked:false}}));expect(coordinator.execute).toHaveBeenCalledWith({type:'checkItem',id:12,checked:false});expect(renderer.root.findByProps({'aria-label':'선택한 준비물 이름'}).children.join('')).toBe('여권');});
-it('opens the category menu and sends validated create and rename commands',async()=>{await mount();await act(async()=>button('카테고리 메뉴: 여권·예약·결제').props.onClick());await act(async()=>button('카테고리 이름 수정').props.onClick());await act(async()=>input('카테고리 이름').props.onChange({target:{value:'새 카테고리'}}));await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));expect(coordinator.execute).toHaveBeenCalledWith({type:'renamePart',id:1,name:'새 카테고리'});});
+it('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({target:{value:'비상 연락처'}}));await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));expect(coordinator.execute).toHaveBeenCalledWith({type:'createItem',partId:1,name:'비상 연락처'});});
-it('creates a category without replacing the existing list',async()=>{await mount();await act(async()=>button('카테고리 추가').props.onClick());await act(async()=>input('카테고리 이름').props.onChange({target:{value:'추가 준비'}}));await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));expect(coordinator.execute).toHaveBeenCalledWith({type:'createPart',name:'추가 준비'});expect(state.data!.parts).toHaveLength(4);});
-it('retains a failed name draft and clears it on scope change',async()=>{coordinator.execute.mockResolvedValue({kind:'error'});await mount();await act(async()=>button('카테고리 추가').props.onClick());await act(async()=>input('카테고리 이름').props.onChange({target:{value:'개인용'}}));await act(async()=>renderer.root.findByType('form').props.onSubmit({preventDefault(){}}));expect(input('카테고리 이름').props.value).toBe('개인용');mocks.context={state,coordinator,scopeKey:'other:user'};await act(async()=>renderer.update(<PackingPage/>));expect(renderer.root.findAllByProps({'aria-label':'카테고리 이름'})).toHaveLength(0);});
+it('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('does not submit a Korean name while IME composition is active',async()=>{
   await mount();await act(async()=>button('카테고리 추가').props.onClick());
-  const name=input('카테고리 이름');await act(async()=>name.props.onChange({target:{value:'여권'}}));
+  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});
+  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(){}}));
   expect(coordinator.execute).not.toHaveBeenCalled();
 });
 it('rejects an overlong raw name and permits a duplicate after correction',async()=>{
   await mount();await act(async()=>button('준비물 추가: 여권·예약·결제').props.onClick());
-  await act(async()=>input('준비물 이름').props.onChange({target:{value:' '.repeat(100)+'x'}}));
+  await act(async()=>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({target:{value:'여권'}}));
+  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('keeps later name edits when an earlier save succeeds',async()=>{
   let finish!:(value:{kind:string})=>void;coordinator.execute.mockReturnValue(new Promise(resolve=>{finish=resolve;}));await mount();await selectFirstItem();
   await act(async()=>button('준비물 이름 수정: 여권').props.onClick());
-  await act(async()=>input('준비물 이름').props.onChange({target:{value:'첫 번째 이름'}}));
+  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({target:{value:'두 번째 이름'}}));
+  await act(async()=>input('준비물 이름').props.onChange(changeEvent('두 번째 이름')));
   await act(async()=>{finish({kind:'success'});await pending;});
   expect(input('준비물 이름').props.value).toBe('두 번째 이름');
 });
@@ -93,7 +95,7 @@ it('does not close a reopened name dialog when an old save resolves',async()=>{
   let pending!:Promise<void>;act(()=>{pending=renderer.root.findByType('form').props.onSubmit({preventDefault(){}});});
   await act(async()=>button('취소').props.onClick());
   await act(async()=>button('준비물 이름 수정: 여권').props.onClick());
-  await act(async()=>input('준비물 이름').props.onChange({target:{value:'새 초안'}}));
+  await act(async()=>input('준비물 이름').props.onChange(changeEvent('새 초안')));
   await act(async()=>{finish({kind:'success'});await pending;});
   expect(input('준비물 이름').props.value).toBe('새 초안');
 });
diff --git a/src/components/packing/PackingPage.tsx b/src/components/packing/PackingPage.tsx
index a161cb6c..cda76536 100644
--- a/src/components/packing/PackingPage.tsx
+++ b/src/components/packing/PackingPage.tsx
@@ -1,12 +1,15 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState, type FormEvent } from "react";
+import { useCallback, useEffect, useId, useRef, useState, type FormEvent } from "react";
 import Image from "next/image";
 import { usePackingList } from "@/hooks/usePackingList";
 import { useSheetDrag } from "@/components/mobile/useSheetDrag";
 import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
 import { SettingsDialog } from "@/components/settings/SettingsDialog";
 import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
+import { Field, FieldCount, FieldError, FieldFooter, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { SetSectionSideDetailWidth } from "@/contexts/SectionWidthContext";
 import { PACKING_DETAIL_WIDTH_PX } from "@/lib/layout-tokens";
 import { renderTextWithLinks } from "@/lib/text/renderTextWithLinks";
@@ -45,6 +48,8 @@ function NameDialog({editor,context,onClose}: {editor:Editor;context:Context;onC
   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") ? "추가" : "이름 수정"}`;
@@ -57,8 +62,8 @@ function NameDialog({editor,context,onClose}: {editor:Editor;context:Context;onC
     try {const result=await context.coordinator.execute(command);if(mounted.current && (result.kind==="missing" || (result.kind==="success" && latestValue.current===value))) onClose();} finally {if(mounted.current)setSaving(false);}
   }
   return <SettingsDialog title={title} onClose={onClose} size="compact" className={styles.dialog} overlayClassName={styles.dialogOverlay} showCloseButton={false}><form onSubmit={submit}>
-    <label className={styles.fieldLabel}>{noun} 이름<input aria-label={`${noun} 이름`} value={value} onChange={event=>{latestValue.current=event.target.value;setValue(event.target.value);setError("");}} onCompositionStart={()=>{composing.current=true;}} onCompositionEnd={()=>{composing.current=false;}} onKeyDown={event=>{if(event.key==="Enter" && (composing.current || event.nativeEvent.isComposing || event.keyCode===229)) event.preventDefault();}} className={styles.field}/></label>
-    {error && <p role="alert" className={styles.error}>{error}</p>}
+    <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>;
 }
@@ -82,6 +87,7 @@ function MemoPanel({item,context,open,onComplete}: {item:PackingItem;context:Con
   const [value,setValue]=useState(item.memo?.content ?? "");
   const [saving,setSaving]=useState(false);
   const [error,setError]=useState("");
+  const errorId=useId();
   const latestValue=useRef(value);
   const mounted=useRef(true);
   const completionVersion=useRef(0);
@@ -113,11 +119,10 @@ function MemoPanel({item,context,open,onComplete}: {item:PackingItem;context:Con
   }
   return <section className={styles.memoPanel} aria-label="내 메모">
     <label htmlFor={`packing-memo-${item.id}`} className={styles.sectionTitle}>내 메모</label>
-    <textarea id={`packing-memo-${item.id}`} aria-label="준비물 메모" value={value}
+    <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} className={styles.memoField}/>
-    <div className={styles.memoFooter}>({value.length}/2000)</div>
-    {error && <p role="alert" className={styles.error}>{error}</p>}
+      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>
diff --git a/src/components/rooms/RoomTripEditFields.tsx b/src/components/rooms/RoomTripEditFields.tsx
index 3f56cb28..92a7fbd0 100644
--- a/src/components/rooms/RoomTripEditFields.tsx
+++ b/src/components/rooms/RoomTripEditFields.tsx
@@ -6,6 +6,8 @@ import { CloseIcon } from "@/assets/icons";
 import { DateRangeField } from "@/components/date-picker/DateRangeField";
 import { DestinationSearchInput } from "@/components/search/DestinationSearchInput";
 import { chipVariants } 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,
@@ -37,13 +39,12 @@ type Props = {
   onEndDateChange: (value: string) => void;
 };
 
-function Field({ label, htmlFor, className, children }: Readonly<{ label: string; htmlFor?: string; className?: string; children: ReactNode }>) {
-  const LabelTag = htmlFor ? "label" : "p";
+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)}>
-      <LabelTag {...(htmlFor ? { htmlFor } : {})} className="text-label-xs-regular text-text">
+      <p className="text-label-xs-regular text-text">
         {label}
-      </LabelTag>
+      </p>
       {children}
     </div>
   );
@@ -110,17 +111,17 @@ export function RoomTripEditFields({
 
   return (
     <div className="flex min-w-0 flex-col gap-6">
-      <Field label="여행 제목" htmlFor={`${idPrefix}-title`}>
-        <input
+      <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="예: 봄 일본 여행, 하와이 신혼여행"
-          className={cn(FIELD_BOX_CLASS, "outline-none placeholder:text-text-disabled focus:border-primary")}
         />
-      </Field>
+      </TextField>
 
       <Field label="목적지">
         {destinationsFull ? (
diff --git a/src/lib/layout-tokens.ts b/src/lib/layout-tokens.ts
index ba3d23d3..32113a22 100644
--- a/src/lib/layout-tokens.ts
+++ b/src/lib/layout-tokens.ts
@@ -83,8 +83,6 @@ export const PLAN_PLACE_CARD_TW = {
     "h-9 min-w-0 w-full rounded-md border border-gray-200 bg-white px-2 text-body-s-regular shadow-none transition focus:border-secondary focus:outline-none focus:ring-1 focus:ring-secondary/30",
   timeSaveButtonCompact:
     "h-8 shrink-0 rounded-md px-3 text-label-xs-regular font-medium",
-  memoTextarea:
-    "min-h-[6rem] w-full resize-y rounded-lg border border-gray-200 bg-white px-3 py-2 text-body-s-regular leading-relaxed text-gray-900 shadow-none transition placeholder:text-dark-gray/50 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30",
 } as const;
 
 /** 플랜 구간(경로) 카드 가로 고정폭(px). 좌측 패널 max(s2) 기준 본문 영역 근사 */

From fe02fbfb43e00c6e7d6eee1875eee7996097ba5a Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Thu, 29 Oct 2026 22:36:04 +0900
Subject: [PATCH 25/93] =?UTF-8?q?refactor(checkbox-switch):=20=EC=B2=B4?=
 =?UTF-8?q?=ED=81=AC=EB=B0=95=EC=8A=A4=C2=B7=EC=8A=A4=EC=9C=84=EC=B9=98?=
 =?UTF-8?q?=EB=A5=BC=20ui=20Checkbox=C2=B7Switch=EB=A1=9C=20=EA=B5=90?=
 =?UTF-8?q?=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 준비물 행·상세 헤더 체크박스를 Checkbox md로 바꾸고 label 래퍼(24px, 모바일 44px)는 유지, 비활성 커서는 래퍼 전체에 적용
- 가계부 결제자·부담자를 Checkbox sm으로 바꾸고, fieldset disabled가 닿지 않아 ExpenseRolePicker가 disabled를 받아 저장 중 비활성으로 둠
- 가계부 행 포커스 링을 has-[:focus-visible]로 바꿔 키보드 포커스에서만 표시
- 약관 전체 동의는 Checkbox md, 항목은 sm으로 바꾸고 전체 동의 행을 가운데 정렬
- 일정 '지도에 경로 표시'를 label 행 + Switch sm으로, 쿠키 설정 분석 쿠키를 Switch md로 교체(받은 checked 값 사용)
- 바텀시트 드래그 제외 선택자에 label·checkbox·switch·radio role 추가
- 쓰지 않게 된 준비물 CSS 규칙, packingIcons.checkbox·checkboxChecked, 체크박스 SVG 4개 삭제
- react-test-renderer 가짜 onChange 호출을 onCheckedChange 호출로 바꿈(기대값 그대로)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/expenses/checkbox-checked.svg          | 13 --------
 public/expenses/checkbox.svg                  | 12 -------
 public/icons/packing/checkbox-checked.svg     | 13 --------
 public/icons/packing/checkbox.svg             | 12 -------
 .../_components/itinerary/PlanDaySection.tsx  | 33 ++++++-------------
 .../agreements/AgreementConsentSection.tsx    | 17 ++++------
 .../analytics/AnalyticsConsentSettings.tsx    | 21 +++---------
 .../expenses/ExpenseEditor.pending.test.tsx   |  6 ++--
 .../expenses/ExpenseEditor.test.tsx           | 24 ++++++--------
 src/components/expenses/ExpenseEditor.tsx     |  2 ++
 src/components/expenses/ExpenseViews.tsx      | 16 +++++----
 src/components/mobile/useSheetDrag.ts         |  3 +-
 src/components/packing/PackingPage.module.css |  4 +--
 src/components/packing/PackingPage.test.tsx   |  7 ++--
 src/components/packing/PackingPage.tsx        |  6 ++--
 src/lib/public-assets.ts                      |  2 --
 16 files changed, 57 insertions(+), 134 deletions(-)
 delete mode 100644 public/expenses/checkbox-checked.svg
 delete mode 100644 public/expenses/checkbox.svg
 delete mode 100644 public/icons/packing/checkbox-checked.svg
 delete mode 100644 public/icons/packing/checkbox.svg

diff --git a/public/expenses/checkbox-checked.svg b/public/expenses/checkbox-checked.svg
deleted file mode 100644
index 968b0219..00000000
--- a/public/expenses/checkbox-checked.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="checkbox" clip-path="url(#clip0_0_544)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="#0183FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_3" d="M9 12L11 14L15 10" stroke="#0183FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_0_544">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/expenses/checkbox.svg b/public/expenses/checkbox.svg
deleted file mode 100644
index f38c06a5..00000000
--- a/public/expenses/checkbox.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="checkbox" clip-path="url(#clip0_0_551)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="#D9DBE2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_0_551">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/icons/packing/checkbox-checked.svg b/public/icons/packing/checkbox-checked.svg
deleted file mode 100644
index 8fead7fd..00000000
--- a/public/icons/packing/checkbox-checked.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="checkbox" clip-path="url(#clip0_0_56)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="#0183FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_3" d="M9 12L11 14L15 10" stroke="#0183FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_0_56">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/icons/packing/checkbox.svg b/public/icons/packing/checkbox.svg
deleted file mode 100644
index 1effd532..00000000
--- a/public/icons/packing/checkbox.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="checkbox" clip-path="url(#clip0_0_71)">
-<g id="Vector">
-</g>
-<path id="Vector_2" d="M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z" stroke="#D9DBE2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_0_71">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
index b773397c..1c885798 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
@@ -2,6 +2,7 @@
 
 import { ExpenseIcon } from "@/components/icons/ExpenseIcon";
 import { Badge } from "@/components/ui/badge";
+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";
@@ -120,10 +121,6 @@ export function PlanDaySection({
   const setRouteVisible = usePlanScheduleRouteVisibilityStore(
     (s) => s.setRouteVisible,
   );
-  const toggleRouteVisible = useCallback(() => {
-    if (trackedSid === undefined) return;
-    setRouteVisible(trackedSid, !routeVisible);
-  }, [trackedSid, routeVisible, setRouteVisible]);
 
   const toggle = useCallback(() => {
     if (trackedSid !== undefined) {
@@ -320,27 +317,17 @@ export function PlanDaySection({
           )}>
             <div className="min-w-0 flex-1">{summaryAction}</div>
             {trackedSid !== undefined ? (
-              <button
-                type="button"
-                role="switch"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  toggleRouteVisible();
-                }}
-                aria-checked={routeVisible}
-                className="flex min-h-8 shrink-0 cursor-pointer items-center gap-2 rounded-lg px-2 text-label-xs-regular text-text-subtle transition-colors hover:bg-bubble-gray/60 focus-visible:outline-2 focus-visible:outline-primary"
+              <label
+                onClick={(event) => event.stopPropagation()}
+                className="flex min-h-8 shrink-0 cursor-pointer items-center gap-2 rounded-lg px-2 text-label-xs-regular text-text-subtle transition-colors select-none hover:bg-fill"
               >
                 지도에 경로 표시
-                <span aria-hidden="true" className={cn(
-                  "relative h-5 w-9 rounded-full transition-colors",
-                  routeVisible ? "bg-primary" : "bg-gray-300",
-                )}>
-                  <span className={cn(
-                    "absolute top-0.5 left-0.5 size-4 rounded-full bg-white shadow-sm transition-transform",
-                    routeVisible && "translate-x-4",
-                  )} />
-                </span>
-              </button>
+                <Switch
+                  size="sm"
+                  checked={routeVisible}
+                  onCheckedChange={(checked) => setRouteVisible(trackedSid, checked)}
+                />
+              </label>
             ) : null}
           </div>
         ) : null}
diff --git a/src/components/agreements/AgreementConsentSection.tsx b/src/components/agreements/AgreementConsentSection.tsx
index 73b5115c..2237c2be 100644
--- a/src/components/agreements/AgreementConsentSection.tsx
+++ b/src/components/agreements/AgreementConsentSection.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Spinner } from "@/components/ui/spinner";
 
 import { ChevronRight } from "lucide-react";
@@ -96,13 +97,8 @@ export function AgreementConsentSection({ onStateChange }: Props) {
 
   return (
     <div className="w-full rounded-xl border border-gray-border bg-bubble-gray/25 px-4 py-4 text-left">
-      <label className="flex cursor-pointer items-start gap-3">
-        <input
-          type="checkbox"
-          className="mt-0.5 h-[18px] w-[18px] shrink-0 rounded accent-primary"
-          checked={allAccepted}
-          onChange={(event) => toggleAll(event.target.checked)}
-        />
+      <label className="flex cursor-pointer items-center gap-3">
+        <Checkbox checked={allAccepted} onCheckedChange={toggleAll} />
         <span className="text-body-m-emphasis mobile:text-body-s-emphasis font-semibold leading-snug text-neutral-900">
           필수 약관 전체 동의
         </span>
@@ -117,11 +113,10 @@ export function AgreementConsentSection({ onStateChange }: Props) {
               className="flex items-center gap-2 rounded-lg px-2 py-2 transition-colors hover:bg-white/80"
             >
               <label className="flex min-w-0 flex-1 cursor-pointer items-center gap-2">
-                <input
-                  type="checkbox"
-                  className="h-4 w-4 shrink-0 rounded accent-primary"
+                <Checkbox
+                  size="sm"
                   checked={acceptedIds.has(id)}
-                  onChange={(event) => toggleItem(id, event.target.checked)}
+                  onCheckedChange={(checked) => toggleItem(id, checked)}
                 />
                 <span className="inline-flex h-[18px] shrink-0 items-center rounded px-1 text-body-xs-emphasis font-semibold leading-none text-primary">
                   필수
diff --git a/src/components/analytics/AnalyticsConsentSettings.tsx b/src/components/analytics/AnalyticsConsentSettings.tsx
index c9115fef..71c43a2e 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 { SettingsActionButton } from "@/components/settings/SettingsActionButton";
+import { Switch } from "@/components/ui/switch";
 import {
   denyAnalyticsConsent,
   grantAnalyticsConsent,
@@ -66,26 +67,14 @@ export function AnalyticsConsentSettingsView({
             Google Analytics로 방문과 기능 사용 통계를 분석합니다.
           </p>
         </div>
-        <button
-          type="button"
-          role="switch"
-          aria-checked={allowed}
+        <Switch
+          checked={allowed}
+          onCheckedChange={(checked) => (checked ? onGrant() : onDeny())}
           aria-labelledby={categoryId}
           aria-describedby={
             consent === "pending" ? `${descriptionId} ${hintId}` : descriptionId
           }
-          onClick={allowed ? onDeny : onGrant}
-          className="flex min-h-11 shrink-0 cursor-pointer items-center rounded-lg px-1 py-1 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
-        >
-          <span
-            aria-hidden="true"
-            className={`flex h-7 w-12 items-center rounded-full p-1 transition-colors motion-reduce:transition-none ${allowed ? "bg-primary" : "bg-neutral-400"}`}
-          >
-            <span
-              className={`h-5 w-5 rounded-full bg-white shadow-sm transition-transform motion-reduce:transition-none ${allowed ? "translate-x-5" : "translate-x-0"}`}
-            />
-          </span>
-        </button>
+        />
       </div>
       {consent === "pending" && (
         <p id={hintId} className="mt-3 text-body-xs-regular leading-relaxed text-dark-gray">
diff --git a/src/components/expenses/ExpenseEditor.pending.test.tsx b/src/components/expenses/ExpenseEditor.pending.test.tsx
index f442409a..dd98013a 100644
--- a/src/components/expenses/ExpenseEditor.pending.test.tsx
+++ b/src/components/expenses/ExpenseEditor.pending.test.tsx
@@ -3,6 +3,7 @@ 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";
 
@@ -181,9 +182,10 @@ it("preserves unknown roles, disallows copying/readding unknowns, and still sele
   await submit();
   expect(mocks.save).toHaveBeenLastCalledWith(expect.objectContaining({ payerUserIds: [1, 99], participantUserIds: [1, 98] }), 10, 0);
   const labels = picker("결제자").findAllByType("label");
-  await act(async () => labels.find((l) => text(l).includes("#99"))!.findByType("input").props.onChange({ target: { checked: false } }));
+  // 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("input").props.onChange({ target: { checked: true } }));
+  await act(async () => labels.find((l) => text(l).includes("나간 멤버"))!.findByType(Checkbox).props.onCheckedChange(true));
   await submit();
   expect(mocks.save).toHaveBeenLastCalledWith(expect.objectContaining({ payerUserIds: [1, 3], participantUserIds: [1, 98] }), 10, 0);
 });
diff --git a/src/components/expenses/ExpenseEditor.test.tsx b/src/components/expenses/ExpenseEditor.test.tsx
index 17bd849a..91daf689 100644
--- a/src/components/expenses/ExpenseEditor.test.tsx
+++ b/src/components/expenses/ExpenseEditor.test.tsx
@@ -5,6 +5,7 @@ import { ExpenseSelect } from "./ExpenseSelect";
 import { act, create, type ReactTestRenderer } from "react-test-renderer";
 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";
@@ -187,10 +188,9 @@ it("preselects self in both roles for new expenses and keeps self first", async
         )
         .map((node) => node.props["data-user-id"]),
     ).toEqual([2, 1]);
+    // Base UI Checkbox의 숨김 input onChange는 event.nativeEvent를 읽어 가짜 이벤트 대신 onCheckedChange를 부른다
     await act(async () =>
-      picker
-        .findAllByType("input")[0]
-        .props.onChange({ target: { checked: false } }),
+      picker.findAllByType(Checkbox)[0].props.onCheckedChange(false),
     );
   }
   await act(async () =>
@@ -427,11 +427,9 @@ it.each([
       amount.props.onChange(changeEvent("100")),
     );
     for (const checkbox of renderer.root
-      .findAllByType("input")
-      .filter((i) => i.props.type === "checkbox" && !i.props.checked))
-      await act(async () =>
-        checkbox.props.onChange({ target: { checked: true } }),
-      );
+      .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
@@ -463,7 +461,7 @@ it("cannot re-add an unknown payer after deselection and keeps input on server r
     .filter((i) => i.props.type === "checkbox");
   expect(checkboxes).toHaveLength(3);
   await act(async () =>
-    checkboxes[1].props.onChange({ target: { checked: false } }),
+    renderer.root.findAllByType(Checkbox)[1].props.onCheckedChange(false),
   );
   expect(
     renderer.root
@@ -505,11 +503,9 @@ async function fillNewExpense() {
     .find((i) => i.props.inputMode === "decimal")!;
   await act(async () => amount.props.onChange(changeEvent("100")));
   for (const checkbox of renderer.root
-    .findAllByType("input")
-    .filter((i) => i.props.type === "checkbox" && !i.props.checked)) {
-    await act(async () =>
-      checkbox.props.onChange({ target: { checked: true } }),
-    );
+    .findAllByType(Checkbox)
+    .filter((i) => !i.props.checked)) {
+    await act(async () => checkbox.props.onCheckedChange(true));
   }
 }
 it("requires explicit selection and offers exactly seven labeled categories in approved order", async () => {
diff --git a/src/components/expenses/ExpenseEditor.tsx b/src/components/expenses/ExpenseEditor.tsx
index 24bf2fb9..9b68784e 100644
--- a/src/components/expenses/ExpenseEditor.tsx
+++ b/src/components/expenses/ExpenseEditor.tsx
@@ -503,6 +503,7 @@ export function ExpenseEditor({
                 currentUserId={context.currentUserId}
                 selected={body.payerUserIds}
                 original={original?.payerUserIds ?? []}
+                disabled={pending}
                 onChange={(ids) => change("payerUserIds", ids)}
               />
               <ExpenseRolePicker
@@ -511,6 +512,7 @@ export function ExpenseEditor({
                 currentUserId={context.currentUserId}
                 selected={body.participantUserIds}
                 original={original?.participantUserIds ?? []}
+                disabled={pending}
                 onChange={(ids) => change("participantUserIds", ids)}
               />
             </div>
diff --git a/src/components/expenses/ExpenseViews.tsx b/src/components/expenses/ExpenseViews.tsx
index 9317b7a7..40033b99 100644
--- a/src/components/expenses/ExpenseViews.tsx
+++ b/src/components/expenses/ExpenseViews.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Spinner } from "@/components/ui/spinner";
 import { ExpenseKrwAmount, ExpenseRowAmount } from "./ExpenseKrw";
 import { expenseTitle } from "@/lib/expenses/expense-name";
@@ -103,6 +104,7 @@ export function ExpenseRolePicker({
   currentUserId,
   selected,
   original,
+  disabled,
   onChange,
 }: Readonly<{
   title: string;
@@ -110,6 +112,8 @@ export function ExpenseRolePicker({
   currentUserId?: number;
   selected: number[];
   original: number[];
+  // 감싼 <fieldset disabled>는 Base UI Checkbox(span)에 전달되지 않아 따로 받는다
+  disabled?: boolean;
   onChange: (ids: number[]) => void;
 }>) {
   const titleId = useId();
@@ -140,19 +144,19 @@ export function ExpenseRolePicker({
       {options.map((option) => (
         <label
           key={option.userId}
-          className="flex min-h-12 min-w-0 cursor-pointer items-center gap-2 rounded-lg bg-white px-3 text-[16px] leading-5 font-medium mobile:min-h-11 mobile:px-2 mobile:text-[12px] max-sm:min-h-11 max-sm:px-2 max-sm:text-[12px] transition-colors has-[:enabled]:hover:bg-primary/10 has-[:disabled]:cursor-not-allowed focus-within:ring-2 focus-within:ring-primary/40 has-[:checked]:bg-white has-[:checked]:ring-1 has-[:checked]:ring-primary/30 mobile:has-[:checked]:ring-0 max-sm:has-[:checked]:ring-0"
+          className="flex min-h-12 min-w-0 cursor-pointer items-center gap-2 rounded-lg bg-white px-3 text-[16px] leading-5 font-medium mobile:min-h-11 mobile:px-2 mobile:text-[12px] max-sm:min-h-11 max-sm:px-2 max-sm:text-[12px] transition-colors has-[:enabled]:hover:bg-primary/10 has-[:disabled]:cursor-not-allowed has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary/40 has-[:checked]:bg-white has-[:checked]:ring-1 has-[:checked]:ring-primary/30 mobile:has-[:checked]:ring-0 max-sm:has-[:checked]:ring-0"
         >
-          <input
-            type="checkbox"
+          <Checkbox
+            size="sm"
             checked={selected.includes(option.userId)}
-            onChange={(e) =>
+            disabled={disabled}
+            onCheckedChange={(checked) =>
               onChange(
-                e.target.checked
+                checked
                   ? [...selected, option.userId]
                   : selected.filter((id) => id !== option.userId),
               )
             }
-            className="size-5 shrink-0 cursor-pointer appearance-none bg-[url(/expenses/checkbox.svg)] bg-contain bg-center bg-no-repeat checked:bg-[url(/expenses/checkbox-checked.svg)] disabled:cursor-not-allowed"
           />
           <ExpensePerson
             userId={option.userId}
diff --git a/src/components/mobile/useSheetDrag.ts b/src/components/mobile/useSheetDrag.ts
index f2952043..ef6c7274 100644
--- a/src/components/mobile/useSheetDrag.ts
+++ b/src/components/mobile/useSheetDrag.ts
@@ -33,7 +33,8 @@ export function useSheetDrag(onClose: () => void, disabled = false, mobileOnly =
       onPointerDown(event: PointerEvent<HTMLElement>) {
         if (disabled || !event.isPrimary || event.button !== 0 || gesture.current) return;
         if (mobileOnly && !document.documentElement.classList.contains("is-mobile-device")) return;
-        if ((event.target as Element).closest("button, input, textarea, select, a, [role='button'], [contenteditable='true']")) return;
+        // 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);
diff --git a/src/components/packing/PackingPage.module.css b/src/components/packing/PackingPage.module.css
index 8e3b1eb6..07582a80 100644
--- a/src/components/packing/PackingPage.module.css
+++ b/src/components/packing/PackingPage.module.css
@@ -41,9 +41,7 @@
 .item:hover {border-color:var(--color-border-default)}
 .item[data-selected="true"] {border-color:var(--color-primary-default);background:var(--color-primary-subtle)}
 .checkbox {position:relative;display:flex;flex:none;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer}
-.checkbox input {position:absolute;z-index:1;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
-.checkbox input:disabled {cursor:not-allowed}
-.checkbox input:focus-visible+.icon {outline:2px solid var(--color-primary-default);outline-offset:2px;border-radius:4px}
+.checkbox:has([aria-disabled="true"]) {cursor:not-allowed}
 .item>.checkbox {position:absolute;z-index:1;top:18px;left:16px}
 .itemSelect {display:block;width:100%;min-width:0;border-radius:inherit;padding:16px;text-align:left}
 .itemSelect strong {display:flex;align-items:center;min-height:28px;margin-left:32px;overflow-wrap:anywhere;font-size:16px;line-height:22px;font-weight:500}
diff --git a/src/components/packing/PackingPage.test.tsx b/src/components/packing/PackingPage.test.tsx
index 34b6bb57..0be9cc6d 100644
--- a/src/components/packing/PackingPage.test.tsx
+++ b/src/components/packing/PackingPage.test.tsx
@@ -42,8 +42,9 @@ it('changes the selected item check state from the detail panel', async () => {
   await mount();
   await act(async () => button('준비물 선택: 여권').props.onClick());
   const detail = renderer.root.findByProps({'aria-label':'준비물 상세'});
-  const checkbox = detail.findByProps({type:'checkbox'});
-  await act(async () => checkbox.props.onChange({target:{checked:true}}));
+  // Base UI Checkbox의 숨김 input onChange는 event.nativeEvent를 읽어 가짜 이벤트 대신 onCheckedChange를 부른다
+  const checkbox = detail.findByProps({'aria-label':'상세: 여권 준비 완료'});
+  await act(async () => checkbox.props.onCheckedChange(true));
   expect(coordinator.execute).toHaveBeenCalledWith({type:'checkItem', id:11, checked:true});
   expect(renderer.root.findByProps({'aria-label':'선택한 준비물 이름'}).children.join('')).toBe('여권');
 });
@@ -56,7 +57,7 @@ it('renders added categories after the four defaults even when they share backen
   ]);
 });
 it('selects an item and shows only its server supplied tips',async()=>{await mount();await selectFirstItem();expect(JSON.stringify(renderer.toJSON())).toContain('유효기간을 확인하세요.');expect(JSON.stringify(renderer.toJSON())).toContain('사본을 준비하세요.');await act(async()=>button('준비물 선택: 항공권 예약 내역').props.onClick());expect(JSON.stringify(renderer.toJSON())).not.toContain('유효기간을 확인하세요.');expect(JSON.stringify(renderer.toJSON())).not.toContain('우때의 여행 팁');});
-it('keeps checkbox independent from item selection',async()=>{await mount();await selectFirstItem();await act(async()=>input('항공권 예약 내역 준비 완료').props.onChange({target:{checked:false}}));expect(coordinator.execute).toHaveBeenCalledWith({type:'checkItem',id:12,checked:false});expect(renderer.root.findByProps({'aria-label':'선택한 준비물 이름'}).children.join('')).toBe('여권');});
+it('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:'비상 연락처'});});
diff --git a/src/components/packing/PackingPage.tsx b/src/components/packing/PackingPage.tsx
index cda76536..2859d3d9 100644
--- a/src/components/packing/PackingPage.tsx
+++ b/src/components/packing/PackingPage.tsx
@@ -7,6 +7,7 @@ import { useSheetDrag } from "@/components/mobile/useSheetDrag";
 import { BottomSheetDragHandle } from "@/components/mobile/BottomSheetDragHandle";
 import { SettingsDialog } from "@/components/settings/SettingsDialog";
 import { Alert, AlertAction, AlertTitle } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Field, FieldCount, FieldError, FieldFooter, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
@@ -33,10 +34,9 @@ function PackingIcon({name, size = 24}: {name:keyof typeof packingIcons; size?:n
 
 function PackingCheckbox({item,context,detail = false}: {item:PackingItem;context:Context;detail?:boolean}) {
   return <label className={styles.checkbox}>
-    <input type="checkbox" aria-label={`${detail ? "상세: " : ""}${item.name} 준비 완료`}
+    <Checkbox aria-label={`${detail ? "상세: " : ""}${item.name} 준비 완료`}
       checked={item.checked} disabled={context.state.status!=="ready"}
-      onChange={event=>void context.coordinator?.execute({type:"checkItem",id:item.id,checked:event.target.checked})}/>
-    <PackingIcon name={item.checked ? "checkboxChecked" : "checkbox"}/>
+      onCheckedChange={checked=>void context.coordinator?.execute({type:"checkItem",id:item.id,checked})}/>
   </label>;
 }
 
diff --git a/src/lib/public-assets.ts b/src/lib/public-assets.ts
index f2024b50..939435e3 100644
--- a/src/lib/public-assets.ts
+++ b/src/lib/public-assets.ts
@@ -44,8 +44,6 @@ export const chatAssets = {
 export const packingIcons = {
   plusWhite: "/icons/packing/plus-white.svg",
   plus: "/icons/packing/plus.svg",
-  checkbox: "/icons/packing/checkbox.svg",
-  checkboxChecked: "/icons/packing/checkbox-checked.svg",
   menu: "/icons/packing/menu.svg",
   edit: "/icons/packing/edit.svg",
   delete: "/icons/packing/delete.svg",

From 603f9d46cd1bad7deaaa061548167b66a79f90be Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Fri, 30 Oct 2026 22:37:37 +0900
Subject: [PATCH 26/93] =?UTF-8?q?fix(text-field):=20=EC=9D=BC=EC=A0=95=20?=
 =?UTF-8?q?=EB=A9=94=EB=AA=A8=EC=B9=B8=EC=9D=B4=20=EB=82=B4=EC=9A=A9=20?=
 =?UTF-8?q?=EB=94=B0=EB=9D=BC=203~5=EC=A4=84=EB=A1=9C=20=EC=9E=90=EB=9D=BC?=
 =?UTF-8?q?=EA=B2=8C=20=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ui Textarea에 sizing 변형 추가: fixed(기본, Figma 96px 고정)·content(3줄 98px~5줄 146px, 넘치면 스크롤)
- content는 값이 바뀔 때마다 높이를 내용에 맞추고, 내용이 줄면 다시 줄어든다
- PC 일정 메모(PlanItemMemoForm)만 content를 쓴다(교체 때 사라진 끌어서 늘리기를 대신함)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../itinerary/PlanItemMemoForm.tsx            |  1 +
 src/components/ui/textarea.tsx                | 46 ++++++++++++++++---
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
index 6341196f..6fc8d8dc 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
@@ -227,6 +227,7 @@ export function PlanItemMemoEditor({
         <div className={PLAN_PLACE_CARD_TW.editorBody}>
           <Textarea
             aria-label="일정 메모"
+            sizing="content"
             value={draft}
             maxLength={SCHEDULE_ITEM_MEMO_MAX_LENGTH}
             placeholder="여기에 메모를 작성하세요"
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 8abe8a86..75d3ec35 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,18 +1,50 @@
-import type { ComponentProps } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { useImperativeHandle, useLayoutEffect, useRef, type ComponentProps } from "react";
 
 import { cn } from "@/lib/utils";
 
 // Figma 02 Text Field의 Textarea Field 5002:4364. 상태 색과 그 출력 순서는 Input과 같다
 // 스크롤 막대 gray/400과 Read Only 글자 gray/800은 Figma가 원시 색에 바로 바인딩해 시맨틱 토큰이 없어 원시 변수를 쓴다
-function Textarea({ className, ...props }: Readonly<ComponentProps<"textarea">>) {
+const textareaVariants = cva(
+  // 오른쪽 28 = Text 래퍼 14 + 스크롤 레인 14(막대 4×24는 얇은 기본 스크롤바로 대신한다)
+  "block w-full min-w-0 resize-none overflow-y-auto rounded-md border border-border bg-fill-subtle py-3 pr-7 pl-3.5 text-body-m-regular text-text transition-colors [scrollbar-color:var(--gray-400)_transparent] [scrollbar-width:thin] placeholder:text-text-subtle focus:border-primary focus:outline-hidden read-only:bg-fill read-only:text-[var(--gray-800)] disabled:cursor-not-allowed disabled:bg-fill disabled:text-text-disabled disabled:placeholder:text-text-disabled aria-invalid:border-status-negative",
+  {
+    variants: {
+      sizing: {
+        // rows와 무관하게 96 고정, 넘치면 스크롤한다(rows로 높이를 정하면 rows=3이 98px이 된다)
+        fixed: "h-24",
+        // 내용 따라 3줄(98)에서 5줄(146)까지 자라고 넘치면 스크롤한다. 줄 높이 24 × 줄 수 + 위아래 여백 24 + 테두리 2
+        content: "min-h-[98px] max-h-[146px]",
+      },
+    },
+    defaultVariants: { sizing: "fixed" },
+  },
+);
+
+function Textarea({
+  className,
+  sizing = "fixed",
+  ref,
+  value,
+  ...props
+}: Readonly<ComponentProps<"textarea"> & VariantProps<typeof textareaVariants>>) {
+  const innerRef = useRef<HTMLTextAreaElement>(null);
+  useImperativeHandle(ref, () => innerRef.current as HTMLTextAreaElement, []);
+
+  // content는 값이 바뀔 때마다 높이를 내용에 맞추고 min·max가 3~5줄로 자른다. 줄어들 때도 맞게 auto로 푼 뒤 잰다
+  useLayoutEffect(() => {
+    const el = innerRef.current;
+    if (sizing !== "content" || !el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight + el.offsetHeight - el.clientHeight}px`;
+  }, [sizing, value]);
+
   return (
     <textarea
+      ref={innerRef}
       data-slot="textarea"
-      className={cn(
-        // rows와 무관하게 96 고정, 넘치면 스크롤한다(rows로 높이를 정하면 rows=3이 98px이 된다). 오른쪽 28 = Text 래퍼 14 + 스크롤 레인 14(막대 4×24는 얇은 기본 스크롤바로 대신한다)
-        "block h-24 w-full min-w-0 resize-none overflow-y-auto rounded-md border border-border bg-fill-subtle py-3 pr-7 pl-3.5 text-body-m-regular text-text transition-colors [scrollbar-color:var(--gray-400)_transparent] [scrollbar-width:thin] placeholder:text-text-subtle focus:border-primary focus:outline-hidden read-only:bg-fill read-only:text-[var(--gray-800)] disabled:cursor-not-allowed disabled:bg-fill disabled:text-text-disabled disabled:placeholder:text-text-disabled aria-invalid:border-status-negative",
-        className,
-      )}
+      value={value}
+      className={cn(textareaVariants({ sizing }), className)}
       {...props}
     />
   );

From 3891a6b5f7c63e9563a891cf8fb69e6842adf944 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Fri, 30 Oct 2026 22:37:37 +0900
Subject: [PATCH 27/93] =?UTF-8?q?refactor(chat):=20=EB=82=98=EA=B0=84=20?=
 =?UTF-8?q?=EC=82=AC=EB=9E=8C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EA=B7=9C?=
 =?UTF-8?q?=EC=B9=99=EC=9D=84=20ChatSenderAvatar=20=ED=95=98=EB=82=98?=
 =?UTF-8?q?=EB=A1=9C=20=EB=AA=A8=EC=9D=8C?=
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>
---
 .../chat/messages/ChatMessageGroup.tsx        | 14 ++---------
 .../chat/messages/ChatSenderAvatar.tsx        | 23 +++++++++++++++++++
 .../chat/messages/NewMessagePreviewButton.tsx | 14 ++---------
 .../chat/messages/PlaceShareCard.tsx          | 14 ++---------
 4 files changed, 29 insertions(+), 36 deletions(-)
 create mode 100644 src/components/chat/messages/ChatSenderAvatar.tsx

diff --git a/src/components/chat/messages/ChatMessageGroup.tsx b/src/components/chat/messages/ChatMessageGroup.tsx
index 61fb5ab7..a5f83732 100644
--- a/src/components/chat/messages/ChatMessageGroup.tsx
+++ b/src/components/chat/messages/ChatMessageGroup.tsx
@@ -3,10 +3,10 @@ import { ChatMarkdownContent } from "@/components/chat/ChatMarkdownContent";
 import type { ChatMarkdownVariant } from "@/components/chat/chat-markdown-components";
 import { getChatPanelLook } from "@/components/chat/chat-panel-look";
 import { AiResponseBubble } from "@/components/chat/messages/AiResponseBubble";
+import { ChatSenderAvatar } from "@/components/chat/messages/ChatSenderAvatar";
 import type { ChatMessageTextTypography } from "@/components/chat/chat-typography";
 import { Avatar } from "@/components/ui/avatar";
 import { Spinner } from "@/components/ui/spinner";
-import { UserAvatar } from "@/components/user/UserAvatar";
 import { cn } from "@/lib/utils";
 import type { AiRequestStatus, ChatMessage } from "@/types/chat";
 
@@ -154,17 +154,7 @@ export function OtherMessageGroup({
   return (
     <div className="flex gap-2">
       <div className="flex flex-col items-center gap-1">
-        <UserAvatar
-          // 방을 나간 사람은 사진이 있어도 사람 아이콘을 보인다
-          user={{
-            nickname: first.sender ?? "",
-            profileImageUrl: first.senderNotInRoom ? null : (first.avatar ?? null),
-          }}
-          size={40}
-          shape="rounded"
-          tone="icon"
-          ring="subtle"
-        />
+        <ChatSenderAvatar message={first} size={40} ring="subtle" />
         <span className={typo.metaMuted}>{first.sender}</span>
       </div>
       <div className="min-w-0">
diff --git a/src/components/chat/messages/ChatSenderAvatar.tsx b/src/components/chat/messages/ChatSenderAvatar.tsx
new file mode 100644
index 00000000..c102c16f
--- /dev/null
+++ b/src/components/chat/messages/ChatSenderAvatar.tsx
@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+
+import { UserAvatar } from "@/components/user/UserAvatar";
+import type { ChatMessage } from "@/types/chat";
+
+type Props = Pick<ComponentProps<typeof UserAvatar>, "size" | "ring"> & {
+  message: Pick<ChatMessage, "sender" | "avatar" | "senderNotInRoom">;
+};
+
+/** 채팅 보낸 사람의 사진 자리. 방을 나간 사람은 사진이 있어도 사람 아이콘을 보인다 */
+export function ChatSenderAvatar({ message, ...avatarProps }: Readonly<Props>) {
+  return (
+    <UserAvatar
+      user={{
+        nickname: message.sender ?? "",
+        profileImageUrl: message.senderNotInRoom ? null : (message.avatar ?? null),
+      }}
+      shape="rounded"
+      tone="icon"
+      {...avatarProps}
+    />
+  );
+}
diff --git a/src/components/chat/messages/NewMessagePreviewButton.tsx b/src/components/chat/messages/NewMessagePreviewButton.tsx
index 5a5d1792..fa468e8b 100644
--- a/src/components/chat/messages/NewMessagePreviewButton.tsx
+++ b/src/components/chat/messages/NewMessagePreviewButton.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { UserAvatar } from "@/components/user/UserAvatar";
+import { ChatSenderAvatar } from "@/components/chat/messages/ChatSenderAvatar";
 import { cn } from "@/lib/utils";
 import type { ChatMessage } from "@/types/chat";
 
@@ -36,17 +36,7 @@ export function NewMessagePreviewButton({
           isMinimized && "gap-1.5 py-1 pl-1 pr-3",
         )}
       >
-        <UserAvatar
-          // 방을 나간 사람은 사진이 있어도 사람 아이콘을 보인다
-          user={{
-            nickname: message.sender ?? "",
-            profileImageUrl: message.senderNotInRoom ? null : (message.avatar ?? null),
-          }}
-          size={isMinimized ? 24 : 28}
-          shape="rounded"
-          tone="icon"
-          ring="default"
-        />
+        <ChatSenderAvatar message={message} size={isMinimized ? 24 : 28} ring="default" />
         <span
           className={cn(
             "shrink-0 text-primary",
diff --git a/src/components/chat/messages/PlaceShareCard.tsx b/src/components/chat/messages/PlaceShareCard.tsx
index 4f545575..e2051be1 100644
--- a/src/components/chat/messages/PlaceShareCard.tsx
+++ b/src/components/chat/messages/PlaceShareCard.tsx
@@ -9,7 +9,7 @@ import { getQueryClient } from "@/lib/query-client";
 import { cn } from "@/lib/utils";
 import { resolveChatMessageTypography } from "@/components/chat/chat-typography";
 import type { ChatMessage } from "@/types/chat";
-import { UserAvatar } from "@/components/user/UserAvatar";
+import { ChatSenderAvatar } from "@/components/chat/messages/ChatSenderAvatar";
 
 export function PlaceShareCard({
   message,
@@ -81,17 +81,7 @@ export function PlaceShareCard({
   return (
     <div className="flex gap-2">
       <div className="flex flex-col items-center gap-1">
-        <UserAvatar
-          // 방을 나간 사람은 사진이 있어도 사람 아이콘을 보인다
-          user={{
-            nickname: message.sender ?? "",
-            profileImageUrl: message.senderNotInRoom ? null : (message.avatar ?? null),
-          }}
-          size={40}
-          shape="rounded"
-          tone="icon"
-          ring="subtle"
-        />
+        <ChatSenderAvatar message={message} size={40} ring="subtle" />
         <span
           className={cn("max-w-[4rem] truncate text-center", typo.metaMuted)}
         >

From a6c452f98b9b642bd0b7b0ce5b256ae0d595b0b2 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Fri, 30 Oct 2026 22:37:37 +0900
Subject: [PATCH 28/93] =?UTF-8?q?refactor(expenses):=20=EC=98=88=EC=82=B0?=
 =?UTF-8?q?=20=EC=9E=85=EB=A0=A5=20=EC=98=A4=EB=A5=98=EC=99=80=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5=20=EC=8B=A4=ED=8C=A8=EB=A5=BC=20=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=ED=95=98=EB=82=98=EB=A1=9C=20=ED=95=A9=EC=B9=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 함께 뜨지 않는 두 오류를 kind(field·save)가 있는 유니온 하나로 둠(원칙 2-1)
- 설명 id도 하나를 나눠 씀, 화면 결과는 같음

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../expenses/ExpenseBudgetModal.tsx           | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/components/expenses/ExpenseBudgetModal.tsx b/src/components/expenses/ExpenseBudgetModal.tsx
index caddf516..de19e79f 100644
--- a/src/components/expenses/ExpenseBudgetModal.tsx
+++ b/src/components/expenses/ExpenseBudgetModal.tsx
@@ -30,9 +30,8 @@ export function ExpenseBudgetModal({
   const [opened] = useState(initial);
   const [draft, setDraft] = useState(initial.budgetKrw ?? "");
   const [version, setVersion] = useState(initial.version);
-  // 저장 실패(네트워크·충돌·서버 메시지)는 칸 밖 문장으로, 입력 검증 오류만 칸의 Error 상태로 그린다
-  const [error, setError] = useState("");
-  const [fieldError, setFieldError] = useState("");
+  // 입력 검증 오류(field)는 칸의 Error 상태로, 저장 실패(save: 네트워크·충돌·서버 메시지)는 칸 밖 문장으로 그린다
+  const [error, setError] = useState<{ kind: "field" | "save"; message: string } | null>(null);
   const [pending, setPending] = useState(false);
   const [conflict, setConflict] = useState<{
     latest?: ExpenseBudget;
@@ -41,7 +40,6 @@ export function ExpenseBudgetModal({
   const lock = useRef(false);
   const inputId = useId();
   const errorId = useId();
-  const fieldErrorId = useId();
   // Stable callback keeps the shared dialog's focus scope intact while typing.
   const close = useCallback(() => {
     if (!lock.current) onClose();
@@ -70,14 +68,15 @@ export function ExpenseBudgetModal({
     if (lock.current || context.budgetBusy || !context.canManage || conflict)
       return;
     if (!/^\d{1,15}$/.test(draft)) {
-      setFieldError(
-        "예산은 1~15자리 숫자로 입력해 주세요. 음수·소수점·공백은 사용할 수 없어요.",
-      );
+      setError({
+        kind: "field",
+        message: "예산은 1~15자리 숫자로 입력해 주세요. 음수·소수점·공백은 사용할 수 없어요.",
+      });
       return;
     }
     lock.current = true;
     setPending(true);
-    setError("");
+    setError(null);
     try {
       await context.saveBudget({
         budgetKrw: draft,
@@ -85,7 +84,10 @@ export function ExpenseBudgetModal({
       });
       onClose();
     } catch (e) {
-      setError(e instanceof Error ? e.message : "예산 저장에 실패했어요.");
+      setError({
+        kind: "save",
+        message: e instanceof Error ? e.message : "예산 저장에 실패했어요.",
+      });
       if (
         e instanceof ExpenseApiError &&
         e.status === 409 &&
@@ -122,23 +124,23 @@ export function ExpenseBudgetModal({
             autoComplete="off"
             value={draft}
             disabled={busy}
-            aria-invalid={Boolean(fieldError)}
-            aria-describedby={fieldError ? fieldErrorId : error ? errorId : undefined}
+            aria-invalid={error?.kind === "field"}
+            aria-describedby={error ? errorId : undefined}
             onChange={(value) => {
               setDraft(value);
-              setError("");
-              setFieldError("");
+              setError(null);
             }}
           />
-          <FieldError id={fieldErrorId}>{fieldError}</FieldError>
+          {/* 두 오류는 함께 뜨지 않아 id 하나를 나눠 쓴다 */}
+          <FieldError id={errorId}>{error?.kind === "field" ? error.message : null}</FieldError>
         </Field>
-        {error && (
+        {error?.kind === "save" && (
           <p
             id={errorId}
             role="alert"
             className="text-body-s-regular mobile:text-body-xs-regular text-status-negative"
           >
-            {error}
+            {error.message}
           </p>
         )}
         {!context.canManage && (
@@ -171,7 +173,7 @@ export function ExpenseBudgetModal({
                     if (lock.current || !conflict.latest) return;
                     setVersion(conflict.latest.version);
                     setConflict(null);
-                    setError("");
+                    setError(null);
                   }}
                 >
                   최신 예산 확인 후 수정 계속

From fe1e5303337c556dde085a06f8381fa3a7b34580 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 15:15:57 +0900
Subject: [PATCH 29/93] =?UTF-8?q?refactor(text-field):=20=EC=83=88=20?=
 =?UTF-8?q?=EC=97=AC=ED=96=89=20=EB=A7=8C=EB=93=A4=EA=B8=B0=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=EC=9D=84=20Text=20Field=EB=A1=9C=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 제목은 ui Field·Input, 글자 수는 Header Suffix로 옮김
- 목적지는 여행 정보 수정과 같은 배치(검색 칸 → 칩 → 경고)와 field 모양 검색 칸으로 바꿈
- 카드 클래스(TRIP_FORM_FIELD_*)와 쓰지 않던 읽기 전용 분기 삭제

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../rooms/DestinationChipsField.tsx           |  55 +++------
 src/components/rooms/TripFormFields.tsx       | 110 ++++++------------
 src/lib/rooms/trip-form.ts                    |   6 -
 3 files changed, 57 insertions(+), 114 deletions(-)

diff --git a/src/components/rooms/DestinationChipsField.tsx b/src/components/rooms/DestinationChipsField.tsx
index f2405d85..2ba9c3ec 100644
--- a/src/components/rooms/DestinationChipsField.tsx
+++ b/src/components/rooms/DestinationChipsField.tsx
@@ -10,15 +10,14 @@ import { cn } from "@/lib/utils";
 type Props = {
   values: string[];
   onChange: (next: string[]) => void;
-  readOnly?: boolean;
   maxCount: number;
   maxLength: number;
 };
 
+/** 목적지 검색 칸 → 고른 칩 → 경고 순서. 여행 정보 수정(`RoomTripEditFields`)의 목적지와 같은 배치이고, 간격은 감싸는 Field가 준다 */
 export function DestinationChipsField({
   values,
   onChange,
-  readOnly = false,
   maxCount,
   maxLength,
 }: Props) {
@@ -52,28 +51,25 @@ export function DestinationChipsField({
     setDraft("");
   }
 
-  if (readOnly) {
-    if (!values.length) {
-      return <p className="text-body-m-regular mobile:text-body-s-regular text-dark-gray">—</p>;
-    }
-    return (
-      <div className="flex flex-wrap gap-2">
-        {values.map((v, i) => (
-          <span
-            key={`${v}-${i}`}
-            className="inline-flex items-center rounded-full bg-bubble-gray/60 px-3 py-1 text-body-s-regular mobile:text-body-xs-regular text-dark-gray"
-          >
-            {v}
-          </span>
-        ))}
-      </div>
-    );
-  }
-
   return (
-    <div className="space-y-2">
+    <>
+      {atMax ? (
+        <p className="flex h-12 w-full min-w-0 items-center rounded-lg border border-border bg-fill-subtle pl-3.5 pr-2.5 text-body-m-regular mobile:text-body-s-regular text-text-disabled">
+          최대 {maxCount}개까지 추가할 수 있어요
+        </p>
+      ) : (
+        <DestinationSearchInput
+          value={draft}
+          onChange={setDraft}
+          onResolvedPlace={handleResolved}
+          placeholder="여행지를 검색해 선택하세요"
+          selectionOnly
+          showLeadingIcon={false}
+          appearance="field"
+        />
+      )}
       {values.length > 0 ? (
-        <div className="flex flex-wrap gap-2">
+        <div className="mt-1 flex flex-wrap gap-2">
           {values.map((v, i) => (
             <span
               key={`${v}-${i}`}
@@ -92,22 +88,9 @@ export function DestinationChipsField({
           ))}
         </div>
       ) : null}
-      {atMax ? (
-        <p className="text-body-s-regular mobile:text-body-xs-regular text-light-gray">
-          최대 {maxCount}개까지 추가할 수 있어요
-        </p>
-      ) : (
-        <DestinationSearchInput
-          value={draft}
-          onChange={setDraft}
-          onResolvedPlace={handleResolved}
-          selectionOnly
-          leadingIconType="search"
-        />
-      )}
       {inlineWarning ? (
         <p className="text-body-s-regular mobile:text-body-xs-regular text-primary">{inlineWarning}</p>
       ) : null}
-    </div>
+    </>
   );
 }
diff --git a/src/components/rooms/TripFormFields.tsx b/src/components/rooms/TripFormFields.tsx
index c7dea099..007dc185 100644
--- a/src/components/rooms/TripFormFields.tsx
+++ b/src/components/rooms/TripFormFields.tsx
@@ -2,6 +2,8 @@
 
 import { DateRangeField } from "@/components/date-picker/DateRangeField";
 import { DestinationChipsField } from "@/components/rooms/DestinationChipsField";
+import { Field, FieldHeader, FieldLabel, FieldSuffix } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
 import {
   isTripScheduleDayLimitExceeded,
   TRIP_SCHEDULE_DAY_LIMIT_MESSAGE,
@@ -13,8 +15,6 @@ import {
   TRIP_DATE_RANGE_INVALID_MESSAGE,
   TRIP_DESTINATION_MAX_LENGTH,
   TRIP_DESTINATIONS_MAX_COUNT,
-  TRIP_FORM_FIELD_CLASS,
-  TRIP_FORM_FIELD_READ_ONLY_CLASS,
   TRIP_START_BEFORE_MIN_MESSAGE,
   type TripFormValues,
 } from "@/lib/rooms/trip-form";
@@ -22,7 +22,6 @@ import {
 type Props = {
   idPrefix: string;
   values: TripFormValues;
-  readOnly?: boolean;
   autoFocusTitle?: boolean;
   startDateMin?: string;
   onTitleChange: (value: string) => void;
@@ -31,10 +30,10 @@ type Props = {
   onEndDateChange: (value: string) => void;
 };
 
+/** 새 여행 만들기 입력 필드. 칸 모양과 배치는 여행 정보 수정(`RoomTripEditFields`)과 같은 Figma Text Field이고, 글자 수만 Header Suffix로 더 보인다 */
 export function TripFormFields({
   idPrefix,
   values,
-  readOnly = false,
   autoFocusTitle = false,
   startDateMin,
   onTitleChange,
@@ -43,93 +42,60 @@ export function TripFormFields({
   onEndDateChange,
 }: Props) {
   const { title, destinations, startDate, endDate } = values;
-  const dateRangeInvalid = isTripDateRangeInvalid(startDate, endDate);
-  const startBeforeMin =
-    startDateMin != null && isTripStartBeforeMin(startDate, startDateMin);
-  const scheduleDayLimitExceeded = isTripScheduleDayLimitExceeded(
-    startDate,
-    endDate,
-  );
-  const fieldClassName = readOnly
-    ? TRIP_FORM_FIELD_READ_ONLY_CLASS
-    : TRIP_FORM_FIELD_CLASS;
+  let dateMessage = null;
+  if (startDateMin != null && isTripStartBeforeMin(startDate, startDateMin)) dateMessage = TRIP_START_BEFORE_MIN_MESSAGE;
+  else if (isTripDateRangeInvalid(startDate, endDate)) dateMessage = TRIP_DATE_RANGE_INVALID_MESSAGE;
+  else if (isTripScheduleDayLimitExceeded(startDate, endDate)) dateMessage = TRIP_SCHEDULE_DAY_LIMIT_MESSAGE;
 
   return (
-    <div className="min-w-0 space-y-3">
-      <div className={fieldClassName}>
-        <div className="mb-1.5 flex items-baseline justify-between gap-2">
-          <label htmlFor={`${idPrefix}-title`} className="text-label-l-emphasis mobile:text-label-m-emphasis font-bold text-black">여행 제목</label>
-          {!readOnly && (
-            <p className="shrink-0 text-body-s-regular mobile:text-body-xs-regular tabular-nums text-light-gray">
-              {title.length}/{ROOM_TRIP_TITLE_MAX_LENGTH}
-            </p>
-          )}
-        </div>
-        {readOnly ? (
-          <p className="text-body-m-regular mobile:text-body-s-regular text-dark-gray">{title.trim() || "—"}</p>
-        ) : (
-          <input
-            id={`${idPrefix}-title`}
-            type="text"
-            value={title}
-            maxLength={ROOM_TRIP_TITLE_MAX_LENGTH}
-            onChange={(e) =>
-              onTitleChange(e.target.value.slice(0, ROOM_TRIP_TITLE_MAX_LENGTH))
-            }
-            placeholder="예: 봄 일본 여행, 하와이 신혼여행"
-            className="w-full text-body-m-regular text-dark-gray outline-none placeholder:text-light-gray"
-            autoFocus={autoFocusTitle}
-          />
-        )}
-      </div>
+    <div className="flex min-w-0 flex-col gap-6">
+      <Field>
+        <FieldHeader>
+          <FieldLabel htmlFor={`${idPrefix}-title`}>여행 제목</FieldLabel>
+          <FieldSuffix>
+            {title.length}/{ROOM_TRIP_TITLE_MAX_LENGTH}
+          </FieldSuffix>
+        </FieldHeader>
+        <Input
+          id={`${idPrefix}-title`}
+          type="text"
+          value={title}
+          maxLength={ROOM_TRIP_TITLE_MAX_LENGTH}
+          onChange={(event) => onTitleChange(event.target.value.slice(0, ROOM_TRIP_TITLE_MAX_LENGTH))}
+          placeholder="예: 봄 일본 여행, 하와이 신혼여행"
+          autoFocus={autoFocusTitle}
+        />
+      </Field>
 
-      <div className={fieldClassName}>
-        <div className="mb-1.5 flex items-baseline justify-between gap-2">
-          <p className="text-body-m-emphasis mobile:text-body-s-emphasis font-bold text-black">목적지</p>
-          {!readOnly && (
-            <p className="shrink-0 text-body-s-regular mobile:text-body-xs-regular tabular-nums text-light-gray">
-              {destinations.length}/{TRIP_DESTINATIONS_MAX_COUNT}
-            </p>
-          )}
-        </div>
+      <Field>
+        <FieldHeader>
+          {/* 검색 입력이 DestinationSearchInput 안에 있어 label로 잇지 못한다. 입력 이름은 aria-label '목적지 검색'이다 */}
+          <p className="min-w-0 flex-1 text-label-xs-regular text-text">목적지</p>
+          <FieldSuffix>
+            {destinations.length}/{TRIP_DESTINATIONS_MAX_COUNT}
+          </FieldSuffix>
+        </FieldHeader>
         <DestinationChipsField
           values={destinations}
           onChange={onDestinationsChange}
-          readOnly={readOnly}
           maxCount={TRIP_DESTINATIONS_MAX_COUNT}
           maxLength={TRIP_DESTINATION_MAX_LENGTH}
         />
-      </div>
+      </Field>
 
-      <div>
+      <div className="flex min-w-0 flex-col gap-2">
         <DateRangeField
           idPrefix={idPrefix}
           value={{ start: startDate, end: endDate }}
           min={startDateMin}
-          readOnly={readOnly}
           onChange={(next) => {
             onStartDateChange(next.start);
             onEndDateChange(next.end);
           }}
         />
-        {!readOnly && startBeforeMin && (
-          <p className="mt-2 text-body-s-regular mobile:text-body-xs-regular text-primary">
-            {TRIP_START_BEFORE_MIN_MESSAGE}
-          </p>
-        )}
-        {!readOnly && !startBeforeMin && dateRangeInvalid && (
-          <p className="mt-2 text-body-s-regular mobile:text-body-xs-regular text-primary">
-            {TRIP_DATE_RANGE_INVALID_MESSAGE}
-          </p>
-        )}
-        {!readOnly &&
-          !startBeforeMin &&
-          !dateRangeInvalid &&
-          scheduleDayLimitExceeded && (
-          <p className="mt-2 text-body-s-regular mobile:text-body-xs-regular text-primary">
-            {TRIP_SCHEDULE_DAY_LIMIT_MESSAGE}
-          </p>
-        )}
+        {dateMessage ? (
+          <p className="text-body-s-regular mobile:text-body-xs-regular text-primary">{dateMessage}</p>
+        ) : null}
       </div>
     </div>
   );
diff --git a/src/lib/rooms/trip-form.ts b/src/lib/rooms/trip-form.ts
index defb5ac9..c66d0a5d 100644
--- a/src/lib/rooms/trip-form.ts
+++ b/src/lib/rooms/trip-form.ts
@@ -2,12 +2,6 @@ export const ROOM_TRIP_TITLE_MAX_LENGTH = 20;
 export const TRIP_DESTINATIONS_MAX_COUNT = 5;
 export const TRIP_DESTINATION_MAX_LENGTH = 100;
 
-export const TRIP_FORM_FIELD_CLASS =
-  "rounded-2xl border-2 border-gray-border bg-white px-5 py-4 transition focus-within:border-primary";
-
-export const TRIP_FORM_FIELD_READ_ONLY_CLASS =
-  "rounded-2xl border-2 border-gray-border bg-bubble-gray/30 px-5 py-4";
-
 export const TRIP_DATE_RANGE_INVALID_MESSAGE =
   "종료일은 시작일 이후여야 해요." as const;
 

From f02f47e49db9b2a3e03826682e2e1eebbcfb0414 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 15:39:15 +0900
Subject: [PATCH 30/93] =?UTF-8?q?refactor(chip):=20Chip=EC=9D=84=20Badge?=
 =?UTF-8?q?=EC=B2=98=EB=9F=BC=20=EC=93=B0=EB=8A=94=20=EB=B6=80=ED=92=88?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B0=94=EA=BE=B8=EA=B3=A0=20className=20?=
 =?UTF-8?q?=EC=B9=A9=EC=9D=84=20=EC=97=86=EC=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ui Chip은 기본 span(useRender), 누르는 칩은 render로 button·Toggle을 넘긴다
- ChipRemove(칩 안 X 버튼) 추가, chipVariants는 밖으로 내보내지 않음
- 지도 고르는 칩은 MapChipToggle(Outline md 고정, 모바일 44px 누르는 영역)로 옮김
- 목적지 칩 2곳·지도 초기화 버튼의 chipVariants className을 Chip으로 바꿈

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/map/MapCategoryChips.tsx       |  8 ++-
 src/components/map/MapChipToggle.tsx          | 27 ++++++++++
 src/components/map/MapDiscoverToolbar.tsx     | 13 ++---
 src/components/map/MapFilter.tsx              |  8 ++-
 src/components/map/map-chip-button.ts         |  2 +-
 .../rooms/DestinationChipsField.tsx           | 20 ++------
 src/components/rooms/RoomTripEditFields.tsx   | 20 +++-----
 src/components/ui/chip.tsx                    | 51 ++++++++++++-------
 8 files changed, 85 insertions(+), 64 deletions(-)
 create mode 100644 src/components/map/MapChipToggle.tsx

diff --git a/src/components/map/MapCategoryChips.tsx b/src/components/map/MapCategoryChips.tsx
index 6c2bd7a3..146ec801 100644
--- a/src/components/map/MapCategoryChips.tsx
+++ b/src/components/map/MapCategoryChips.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { Chip } from "@/components/ui/chip";
 import { cn } from "@/lib/utils";
 
+import { MapChipToggle } from "./MapChipToggle";
 import { MAP_PLACE_CATEGORIES } from "./map-place-categories";
 
 type MapCategoryChipsProps = {
@@ -25,16 +25,14 @@ export function MapCategoryChips({
       )}
     >
       {MAP_PLACE_CATEGORIES.map((cat) => (
-        <Chip
+        <MapChipToggle
           key={cat.id}
-          variant="outline"
-          size="md"
           pressed={selectedCategoryId === cat.id}
           onPressedChange={(pressed) => onSelectCategory(pressed ? cat.id : null)}
         >
           <cat.icon />
           <span>{cat.label}</span>
-        </Chip>
+        </MapChipToggle>
       ))}
     </div>
   );
diff --git a/src/components/map/MapChipToggle.tsx b/src/components/map/MapChipToggle.tsx
new file mode 100644
index 00000000..fc0f829d
--- /dev/null
+++ b/src/components/map/MapChipToggle.tsx
@@ -0,0 +1,27 @@
+import { Toggle } from "@base-ui/react/toggle";
+import type { ReactNode } from "react";
+
+import { Chip } from "@/components/ui/chip";
+
+type Props = {
+  pressed: boolean;
+  onPressedChange: (pressed: boolean) => void;
+  children: ReactNode;
+};
+
+/**
+ * 지도 툴바에서 고르는 칩(카테고리·영업 중). Figma Chip Outline md(36px)이고, Base UI Toggle이라 선택 상태가 aria-pressed로 읽힌다.
+ * 모바일에서는 보이는 크기는 두고 누르는 영역만 가상 요소로 44px까지 넓힌다. 배경이 보이는 칩이라 padding으로 넓히면 모양이 커진다
+ */
+export function MapChipToggle({ pressed, onPressedChange, children }: Readonly<Props>) {
+  return (
+    <Chip
+      variant="outline"
+      size="md"
+      render={<Toggle pressed={pressed} onPressedChange={onPressedChange} />}
+      className="relative [&_svg]:pointer-events-none mobile:before:absolute mobile:before:inset-x-0 mobile:before:top-1/2 mobile:before:h-11 mobile:before:-translate-y-1/2"
+    >
+      {children}
+    </Chip>
+  );
+}
diff --git a/src/components/map/MapDiscoverToolbar.tsx b/src/components/map/MapDiscoverToolbar.tsx
index c58ea7c3..79a2b706 100644
--- a/src/components/map/MapDiscoverToolbar.tsx
+++ b/src/components/map/MapDiscoverToolbar.tsx
@@ -4,7 +4,7 @@ import { type ReactNode } from "react";
 import { flushSync } from "react-dom";
 
 import { CircleCancelIcon, CloseIcon, SearchIcon } from "@/assets/icons";
-import { Chip, chipVariants } from "@/components/ui/chip";
+import { Chip } from "@/components/ui/chip";
 import { useMobileView } from "@/contexts/MobileViewContext";
 import { useMobileMapSearchStore } from "@/stores/mobile-map-search-store";
 
@@ -15,6 +15,7 @@ import {
 import { cn } from "@/lib/utils";
 
 import MapFilter from "./MapFilter";
+import { MapChipToggle } from "./MapChipToggle";
 import { MAP_PLACE_CATEGORIES } from "./map-place-categories";
 import { MapCategoryChips } from "./MapCategoryChips";
 import type { OpenValue, RatingValue } from "./map-filters";
@@ -60,14 +61,14 @@ export function MapDiscoverToolbar({
           <div className="-my-2 overflow-x-auto py-2 drop-shadow-[0_2px_5px_#0000001a] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
             {category ? (
               <div className="flex w-max flex-nowrap items-center gap-1.5">
-                <Chip variant="outline" size="md" pressed onPressedChange={resetCategory}>
+                <MapChipToggle pressed onPressedChange={resetCategory}>
                   <category.icon/><span>{category.label}</span>
-                </Chip>
+                </MapChipToggle>
                 <MapFilter rating={rating} openNow={openNow} setRating={setRating} setOpenNow={setOpenNow}/>
-                <button type="button" aria-label="카테고리 필터 초기화" onClick={resetCategory}
-                  className={cn(chipVariants({ variant: "outline", size: "md" }), "w-9 cursor-pointer px-0")}>
+                <Chip variant="outline" size="md" className="w-9 px-0"
+                  render={<button type="button" aria-label="카테고리 필터 초기화" onClick={resetCategory}/>}>
                   <CloseIcon/>
-                </button>
+                </Chip>
               </div>
             ) : <MapCategoryChips selectedCategoryId={selectedCategoryId} onSelectCategory={onSelectCategory}/>}
           </div>
diff --git a/src/components/map/MapFilter.tsx b/src/components/map/MapFilter.tsx
index a17e981f..ebef2d76 100644
--- a/src/components/map/MapFilter.tsx
+++ b/src/components/map/MapFilter.tsx
@@ -1,7 +1,7 @@
 import { FilterDropdown } from "@/components/filter-dropdown";
-import { Chip } from "@/components/ui/chip";
 import { MAP_FILTER_DROPDOWN_MENU_Z_CLASS } from "@/lib/layout/mapDetailPanelLayout";
 
+import { MapChipToggle } from "./MapChipToggle";
 import {
   RATING_OPTIONS,
   type OpenValue,
@@ -38,14 +38,12 @@ export default function MapFilter({
         onOpenChange={onRatingDropdownOpenChange}
         menuClassName={MAP_FILTER_DROPDOWN_MENU_Z_CLASS}
       />
-      <Chip
-        variant="outline"
-        size="md"
+      <MapChipToggle
         pressed={isOpenOnly}
         onPressedChange={(pressed) => setOpenNow(pressed ? "open" : "all")}
       >
         영업 중
-      </Chip>
+      </MapChipToggle>
     </div>
   );
 }
diff --git a/src/components/map/map-chip-button.ts b/src/components/map/map-chip-button.ts
index ffb8861c..f5e6b23b 100644
--- a/src/components/map/map-chip-button.ts
+++ b/src/components/map/map-chip-button.ts
@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils";
 
 // FilterDropdown 트리거 전용이다. Dropdown 단계에서 ui 부품으로 옮기기 전까지 같은 줄의 Chip(outline md)과 같은 값으로 둔다.
-// 값을 고른 모양은 트리거에 aria-pressed가 없어 chipVariants가 그리지 못하므로 active로 테두리·글자 색을 준다.
+// 값을 고른 모양은 트리거에 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";
 
diff --git a/src/components/rooms/DestinationChipsField.tsx b/src/components/rooms/DestinationChipsField.tsx
index 2ba9c3ec..33eedaba 100644
--- a/src/components/rooms/DestinationChipsField.tsx
+++ b/src/components/rooms/DestinationChipsField.tsx
@@ -2,10 +2,8 @@
 
 import { useState } from "react";
 
-import { CloseIcon } from "@/assets/icons";
 import { DestinationSearchInput } from "@/components/search/DestinationSearchInput";
-import { chipVariants } from "@/components/ui/chip";
-import { cn } from "@/lib/utils";
+import { Chip, ChipRemove } from "@/components/ui/chip";
 
 type Props = {
   values: string[];
@@ -71,20 +69,10 @@ export function DestinationChipsField({
       {values.length > 0 ? (
         <div className="mt-1 flex flex-wrap gap-2">
           {values.map((v, i) => (
-            <span
-              key={`${v}-${i}`}
-              className={cn(chipVariants({ variant: "outline", size: "md" }), "max-w-full")}
-            >
+            <Chip key={`${v}-${i}`} variant="outline" size="md" className="max-w-full">
               <span className="min-w-0 truncate">{v}</span>
-              <button
-                type="button"
-                onClick={() => remove(i)}
-                aria-label={`${v} 삭제`}
-                className="-m-3.5 grid size-11 shrink-0 place-items-center focus-visible:outline-2 focus-visible:outline-primary"
-              >
-                <CloseIcon size={16} />
-              </button>
-            </span>
+              <ChipRemove aria-label={`${v} 삭제`} onClick={() => remove(i)} />
+            </Chip>
           ))}
         </div>
       ) : null}
diff --git a/src/components/rooms/RoomTripEditFields.tsx b/src/components/rooms/RoomTripEditFields.tsx
index 92a7fbd0..f66e829e 100644
--- a/src/components/rooms/RoomTripEditFields.tsx
+++ b/src/components/rooms/RoomTripEditFields.tsx
@@ -2,10 +2,9 @@
 
 import { useState, type ReactNode } from "react";
 
-import { CloseIcon } from "@/assets/icons";
 import { DateRangeField } from "@/components/date-picker/DateRangeField";
 import { DestinationSearchInput } from "@/components/search/DestinationSearchInput";
-import { chipVariants } from "@/components/ui/chip";
+import { Chip, ChipRemove } from "@/components/ui/chip";
 import { Field as TextField, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import {
@@ -142,23 +141,16 @@ export function RoomTripEditFields({
         {destinations.length > 0 ? (
           <div className="mt-1 flex flex-wrap gap-2">
             {destinations.map((destination, index) => (
-              <span
-                key={`${destination}-${index}`}
-                className={cn(chipVariants({ variant: "outline", size: "md" }), "max-w-full")}
-              >
+              <Chip key={`${destination}-${index}`} variant="outline" size="md" className="max-w-full">
                 <span className="min-w-0 truncate">{destination}</span>
-                <button
-                  type="button"
+                <ChipRemove
+                  aria-label={`${destination} 삭제`}
                   onClick={() => {
                     onDestinationsChange(destinations.filter((_, i) => i !== index));
                     setDestinationWarning(null);
                   }}
-                  aria-label={`${destination} 삭제`}
-                  className="-m-3.5 grid size-11 shrink-0 place-items-center focus-visible:outline-2 focus-visible:outline-primary"
-                >
-                  <CloseIcon size={16} />
-                </button>
-              </span>
+                />
+              </Chip>
             ))}
           </div>
         ) : null}
diff --git a/src/components/ui/chip.tsx b/src/components/ui/chip.tsx
index 19c5a930..1fbd383e 100644
--- a/src/components/ui/chip.tsx
+++ b/src/components/ui/chip.tsx
@@ -1,14 +1,17 @@
-import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
 
+import { CloseIcon } from "@/assets/icons";
 import { cn } from "@/lib/utils";
 
 // Figma 14 Chips: Chip / Solid 5625:359, Chip / Outline 5625:475
 // Selected는 aria-pressed:, State=Pressed는 :active, Disabled는 data-disabled:로 그린다. Base UI의 data-pressed는 Selected라 눌림에 쓰지 않는다.
 // 비활성을 disabled:로 쓰면 Tailwind가 aria-pressed:보다 먼저 출력해 선택+비활성 칩이 선택 색으로 남는다.
-// 눌림은 enabled:로 한정해, 버튼이 아닌 요소(제거용 칩의 span)에 chipVariants를 써도 누를 때 색이 바뀌지 않게 한다.
+// 눌림·손가락 커서는 enabled:로 한정해 span 칩(제거용)은 누를 때 색·커서가 바뀌지 않고, button·Toggle로 그린 칩만 바뀐다.
 const chipVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full whitespace-nowrap transition-colors duration-120 ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none [&_svg:not([class*='size-'])]:size-[16px]",
+  "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full whitespace-nowrap transition-colors duration-120 ease-out enabled:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none [&_svg:not([class*='size-'])]:size-[16px]",
   {
     variants: {
       variant: {
@@ -28,26 +31,40 @@ const chipVariants = cva(
   },
 );
 
-type ChipProps = Omit<TogglePrimitive.Props, "className"> &
-  VariantProps<typeof chipVariants> & {
-    // Base UI는 상태 함수 className도 받지만 cn이 버리므로 배치용 문자열만 받는다
-    className?: string;
-  };
+/**
+ * Badge처럼 기본은 span이다. 누르는 칩은 render로 요소를 넘긴다(동작 버튼 `render={<button type="button" />}`, 고르는 칩 `render={<Toggle />}`).
+ * 긴 라벨에 말줄임표가 필요하면 호출부가 라벨을 `<span className="min-w-0 truncate">`로 감싸고 칩에 폭 제한을 준다.
+ */
+function Chip({
+  className,
+  variant = "solid",
+  size = "lg",
+  render,
+  ...props
+}: Readonly<useRender.ComponentProps<"span"> & VariantProps<typeof chipVariants>>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">({ className: cn(chipVariants({ variant, size }), className) }, props),
+    render,
+    state: { slot: "chip", variant, size },
+  });
+}
 
-function Chip({ className, variant, size, ...props }: Readonly<ChipProps>) {
+// 칩 안 지우기 버튼. 보이는 크기는 아이콘 16px이고 음수 margin으로 누르는 영역만 44px까지 넓힌다(md 36px 칩의 좌우 여백 16px 안에서 끝난다)
+function ChipRemove({ className, ...props }: Readonly<ComponentProps<"button">>) {
   return (
-    <TogglePrimitive
-      data-slot="chip"
+    <button
+      type="button"
+      data-slot="chip-remove"
       className={cn(
-        chipVariants({ variant, size }),
-        // 누르는 동작에만 필요한 클래스라 chipVariants에 두지 않는다. 두면 제거용 칩(span) 안의 버튼을 가상 요소가 덮는다.
-        // md 36px·sm 32px는 모바일에서 누르는 영역만 가상 요소로 44px까지 넓힌다. 배경이 보이는 칩이라 padding·음수 margin(원칙 3-7)으로 넓히면 모양이 커진다.
-        "relative cursor-pointer data-disabled:pointer-events-none [&_svg]:pointer-events-none mobile:before:absolute mobile:before:inset-x-0 mobile:before:top-1/2 mobile:before:h-11 mobile:before:-translate-y-1/2",
+        "-m-3.5 grid size-11 shrink-0 place-items-center focus-visible:outline-2 focus-visible:outline-primary",
         className,
       )}
       {...props}
-    />
+    >
+      <CloseIcon size={16} />
+    </button>
   );
 }
 
-export { Chip, chipVariants };
+export { Chip, ChipRemove };

From 067dd7131bf22b86846e86a70e04b750806651e0 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 15:39:31 +0900
Subject: [PATCH 31/93] =?UTF-8?q?fix(text-field):=20=EC=9D=BC=EC=A0=95=20?=
 =?UTF-8?q?=EB=A9=94=EB=AA=A8=EC=B9=B8=EC=9D=84=20=EB=8A=98=EB=A6=AC?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EA=B3=A0=20Figma=2096px=20=EA=B3=A0?=
 =?UTF-8?q?=EC=A0=95=20=EB=86=92=EC=9D=B4=EB=A1=9C=20=EB=90=98=EB=8F=8C?=
 =?UTF-8?q?=EB=A6=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 3~5줄로 자라던 sizing 변형과 높이 측정 코드를 지움
- 3줄부터 스크롤된다(다른 Textarea와 같음)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../itinerary/PlanItemMemoForm.tsx            |  1 -
 src/components/ui/textarea.tsx                | 46 +++----------------
 2 files changed, 7 insertions(+), 40 deletions(-)

diff --git a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
index 6fc8d8dc..6341196f 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
@@ -227,7 +227,6 @@ export function PlanItemMemoEditor({
         <div className={PLAN_PLACE_CARD_TW.editorBody}>
           <Textarea
             aria-label="일정 메모"
-            sizing="content"
             value={draft}
             maxLength={SCHEDULE_ITEM_MEMO_MAX_LENGTH}
             placeholder="여기에 메모를 작성하세요"
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 75d3ec35..8abe8a86 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,50 +1,18 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { useImperativeHandle, useLayoutEffect, useRef, type ComponentProps } from "react";
+import type { ComponentProps } from "react";
 
 import { cn } from "@/lib/utils";
 
 // Figma 02 Text Field의 Textarea Field 5002:4364. 상태 색과 그 출력 순서는 Input과 같다
 // 스크롤 막대 gray/400과 Read Only 글자 gray/800은 Figma가 원시 색에 바로 바인딩해 시맨틱 토큰이 없어 원시 변수를 쓴다
-const textareaVariants = cva(
-  // 오른쪽 28 = Text 래퍼 14 + 스크롤 레인 14(막대 4×24는 얇은 기본 스크롤바로 대신한다)
-  "block w-full min-w-0 resize-none overflow-y-auto rounded-md border border-border bg-fill-subtle py-3 pr-7 pl-3.5 text-body-m-regular text-text transition-colors [scrollbar-color:var(--gray-400)_transparent] [scrollbar-width:thin] placeholder:text-text-subtle focus:border-primary focus:outline-hidden read-only:bg-fill read-only:text-[var(--gray-800)] disabled:cursor-not-allowed disabled:bg-fill disabled:text-text-disabled disabled:placeholder:text-text-disabled aria-invalid:border-status-negative",
-  {
-    variants: {
-      sizing: {
-        // rows와 무관하게 96 고정, 넘치면 스크롤한다(rows로 높이를 정하면 rows=3이 98px이 된다)
-        fixed: "h-24",
-        // 내용 따라 3줄(98)에서 5줄(146)까지 자라고 넘치면 스크롤한다. 줄 높이 24 × 줄 수 + 위아래 여백 24 + 테두리 2
-        content: "min-h-[98px] max-h-[146px]",
-      },
-    },
-    defaultVariants: { sizing: "fixed" },
-  },
-);
-
-function Textarea({
-  className,
-  sizing = "fixed",
-  ref,
-  value,
-  ...props
-}: Readonly<ComponentProps<"textarea"> & VariantProps<typeof textareaVariants>>) {
-  const innerRef = useRef<HTMLTextAreaElement>(null);
-  useImperativeHandle(ref, () => innerRef.current as HTMLTextAreaElement, []);
-
-  // content는 값이 바뀔 때마다 높이를 내용에 맞추고 min·max가 3~5줄로 자른다. 줄어들 때도 맞게 auto로 푼 뒤 잰다
-  useLayoutEffect(() => {
-    const el = innerRef.current;
-    if (sizing !== "content" || !el) return;
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight + el.offsetHeight - el.clientHeight}px`;
-  }, [sizing, value]);
-
+function Textarea({ className, ...props }: Readonly<ComponentProps<"textarea">>) {
   return (
     <textarea
-      ref={innerRef}
       data-slot="textarea"
-      value={value}
-      className={cn(textareaVariants({ sizing }), className)}
+      className={cn(
+        // rows와 무관하게 96 고정, 넘치면 스크롤한다(rows로 높이를 정하면 rows=3이 98px이 된다). 오른쪽 28 = Text 래퍼 14 + 스크롤 레인 14(막대 4×24는 얇은 기본 스크롤바로 대신한다)
+        "block h-24 w-full min-w-0 resize-none overflow-y-auto rounded-md border border-border bg-fill-subtle py-3 pr-7 pl-3.5 text-body-m-regular text-text transition-colors [scrollbar-color:var(--gray-400)_transparent] [scrollbar-width:thin] placeholder:text-text-subtle focus:border-primary focus:outline-hidden read-only:bg-fill read-only:text-[var(--gray-800)] disabled:cursor-not-allowed disabled:bg-fill disabled:text-text-disabled disabled:placeholder:text-text-disabled aria-invalid:border-status-negative",
+        className,
+      )}
       {...props}
     />
   );

From 00b642123c66ebc9583e3441b55bd1f936507b5e Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 15:40:43 +0900
Subject: [PATCH 32/93] =?UTF-8?q?fix(chip):=20=EB=AA=A9=EC=A0=81=EC=A7=80?=
 =?UTF-8?q?=20=EC=B9=A9=EC=9D=84=20Selected=20=EB=AA=A8=EC=96=91=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B0=94=EA=BE=B8=EA=B3=A0=20X=20=EB=88=84?=
 =?UTF-8?q?=EB=A5=B4=EB=8A=94=20=EC=98=81=EC=97=AD=EC=9D=B4=20=EB=9D=BC?=
 =?UTF-8?q?=EB=B2=A8=EC=9D=84=20=EB=8D=AE=EC=A7=80=20=EC=95=8A=EA=B2=8C=20?=
 =?UTF-8?q?=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Chip에 selected 변형 추가(Figma Selected=True·Enabled: Outline은 테두리·글자 primary-strong)
- 목적지 칩 2곳(새 여행 만들기·여행 정보 수정)을 selected로 그림
- ChipRemove 누르는 영역 44×44 → 28×44(라벨 끝 8px을 덮던 것 없앰)

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

diff --git a/src/components/rooms/DestinationChipsField.tsx b/src/components/rooms/DestinationChipsField.tsx
index 33eedaba..532ee29c 100644
--- a/src/components/rooms/DestinationChipsField.tsx
+++ b/src/components/rooms/DestinationChipsField.tsx
@@ -69,7 +69,7 @@ export function DestinationChipsField({
       {values.length > 0 ? (
         <div className="mt-1 flex flex-wrap gap-2">
           {values.map((v, i) => (
-            <Chip key={`${v}-${i}`} variant="outline" size="md" className="max-w-full">
+            <Chip key={`${v}-${i}`} variant="outline" size="md" selected className="max-w-full">
               <span className="min-w-0 truncate">{v}</span>
               <ChipRemove aria-label={`${v} 삭제`} onClick={() => remove(i)} />
             </Chip>
diff --git a/src/components/rooms/RoomTripEditFields.tsx b/src/components/rooms/RoomTripEditFields.tsx
index f66e829e..064ade14 100644
--- a/src/components/rooms/RoomTripEditFields.tsx
+++ b/src/components/rooms/RoomTripEditFields.tsx
@@ -141,7 +141,7 @@ export function RoomTripEditFields({
         {destinations.length > 0 ? (
           <div className="mt-1 flex flex-wrap gap-2">
             {destinations.map((destination, index) => (
-              <Chip key={`${destination}-${index}`} variant="outline" size="md" className="max-w-full">
+              <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} 삭제`}
diff --git a/src/components/ui/chip.tsx b/src/components/ui/chip.tsx
index 1fbd383e..28df758b 100644
--- a/src/components/ui/chip.tsx
+++ b/src/components/ui/chip.tsx
@@ -26,8 +26,17 @@ const chipVariants = cva(
         md: "min-h-9 px-4 text-label-m-emphasis data-disabled:text-label-m-regular",
         sm: "min-h-8 px-3 text-label-m-emphasis data-disabled:text-label-m-regular",
       },
+      // Figma Selected=True·State=Enabled. 누를 수 없는 span 칩(고른 목적지)은 aria-pressed를 둘 수 없어 이 값으로 그린다
+      selected: {
+        true: "",
+        false: "",
+      },
     },
-    defaultVariants: { variant: "solid", size: "lg" },
+    compoundVariants: [
+      { variant: "solid", selected: true, className: "bg-primary text-text-inverse" },
+      { variant: "outline", selected: true, className: "border-primary-strong text-primary-strong" },
+    ],
+    defaultVariants: { variant: "solid", size: "lg", selected: false },
   },
 );
 
@@ -39,25 +48,27 @@ function Chip({
   className,
   variant = "solid",
   size = "lg",
+  selected = false,
   render,
   ...props
 }: Readonly<useRender.ComponentProps<"span"> & VariantProps<typeof chipVariants>>) {
   return useRender({
     defaultTagName: "span",
-    props: mergeProps<"span">({ className: cn(chipVariants({ variant, size }), className) }, props),
+    props: mergeProps<"span">({ className: cn(chipVariants({ variant, size, selected }), className) }, props),
     render,
-    state: { slot: "chip", variant, size },
+    state: { slot: "chip", variant, size, selected: Boolean(selected) },
   });
 }
 
-// 칩 안 지우기 버튼. 보이는 크기는 아이콘 16px이고 음수 margin으로 누르는 영역만 44px까지 넓힌다(md 36px 칩의 좌우 여백 16px 안에서 끝난다)
+// Figma Trailing Icon(close 16px, 라벨과 간격 6px). 누르는 영역은 음수 margin으로 28×44px까지만 넓힌다.
+// 가로를 44px까지 넓히면 왼쪽이 간격 6px을 넘어 라벨 끝 8px을 덮는다(라벨 끝을 눌러도 지워짐). 오른쪽 6px은 칩 여백 16px 안이다
 function ChipRemove({ className, ...props }: Readonly<ComponentProps<"button">>) {
   return (
     <button
       type="button"
       data-slot="chip-remove"
       className={cn(
-        "-m-3.5 grid size-11 shrink-0 place-items-center focus-visible:outline-2 focus-visible:outline-primary",
+        "-mx-1.5 -my-3.5 grid h-11 w-7 shrink-0 place-items-center focus-visible:outline-2 focus-visible:outline-primary",
         className,
       )}
       {...props}

From be5af8ed93136d0635fe4b46fccd282be0b79ad9 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 15:45:26 +0900
Subject: [PATCH 33/93] =?UTF-8?q?fix(chip):=20=EC=B9=A9=20X=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EC=97=90=20=EC=86=90=EA=B0=80=EB=9D=BD=20=EC=BB=A4?=
 =?UTF-8?q?=EC=84=9C=20=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/components/ui/chip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/chip.tsx b/src/components/ui/chip.tsx
index 28df758b..38912072 100644
--- a/src/components/ui/chip.tsx
+++ b/src/components/ui/chip.tsx
@@ -68,7 +68,7 @@ function ChipRemove({ className, ...props }: Readonly<ComponentProps<"button">>)
       type="button"
       data-slot="chip-remove"
       className={cn(
-        "-mx-1.5 -my-3.5 grid h-11 w-7 shrink-0 place-items-center focus-visible:outline-2 focus-visible:outline-primary",
+        "-mx-1.5 -my-3.5 grid h-11 w-7 shrink-0 cursor-pointer place-items-center focus-visible:outline-2 focus-visible:outline-primary",
         className,
       )}
       {...props}

From 97b7f08060388bd62ba19bb50e90dc488b331331 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 15:53:30 +0900
Subject: [PATCH 34/93] =?UTF-8?q?style(text-field):=20=EB=AA=A9=EC=A0=81?=
 =?UTF-8?q?=EC=A7=80=20=EA=B2=80=EC=83=89=EC=B9=B8=EC=9D=84=20Figma=20Sear?=
 =?UTF-8?q?ch=20Bar=20=EA=B7=9C=EA=B2=A9=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

- 앞에 돋보기(SearchIcon 20px, icon/subtle)를 보이고 지우기는 CloseIcon 20px·32px 영역으로 바꿈
- 모서리 10 → 8px, 입력 글자 text/default·플레이스홀더 text/subtle
- 테두리: 포커스 primary/default, 값이 있고 포커스가 없으면 primary/strong(Filled)
- 새 여행 만들기·여행 정보 수정 두 곳에 적용(field 모양만, 기본 모양은 그대로)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../rooms/DestinationChipsField.tsx           |  1 -
 src/components/rooms/RoomTripEditFields.tsx   |  1 -
 .../search/DestinationSearchInput.tsx         | 27 ++++++++++++++++---
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/rooms/DestinationChipsField.tsx b/src/components/rooms/DestinationChipsField.tsx
index 532ee29c..8cb90b61 100644
--- a/src/components/rooms/DestinationChipsField.tsx
+++ b/src/components/rooms/DestinationChipsField.tsx
@@ -62,7 +62,6 @@ export function DestinationChipsField({
           onResolvedPlace={handleResolved}
           placeholder="여행지를 검색해 선택하세요"
           selectionOnly
-          showLeadingIcon={false}
           appearance="field"
         />
       )}
diff --git a/src/components/rooms/RoomTripEditFields.tsx b/src/components/rooms/RoomTripEditFields.tsx
index 064ade14..7961596b 100644
--- a/src/components/rooms/RoomTripEditFields.tsx
+++ b/src/components/rooms/RoomTripEditFields.tsx
@@ -134,7 +134,6 @@ export function RoomTripEditFields({
             onResolvedPlace={addDestination}
             placeholder="여행지를 검색해 선택하세요"
             selectionOnly
-            showLeadingIcon={false}
             appearance="field"
           />
         )}
diff --git a/src/components/search/DestinationSearchInput.tsx b/src/components/search/DestinationSearchInput.tsx
index 09a16311..6e380982 100644
--- a/src/components/search/DestinationSearchInput.tsx
+++ b/src/components/search/DestinationSearchInput.tsx
@@ -9,6 +9,7 @@ import {
   DESTINATION_INCLUDED_PRIMARY_TYPES,
   PlacePredictionInlineDescription,
 } from "@/lib/placesAutocompleteSuggest";
+import { CloseIcon, SearchIcon } from "@/assets/icons";
 import { cn } from "@/lib/utils";
 
 const DESTINATION_SELECTION_HINT =
@@ -193,12 +194,18 @@ export function DestinationSearchInput({
         <div
           className={cn(
             "flex w-full items-center gap-2",
+            // field는 Figma 02 Text Field의 Search Bar(5002:4377): 48px, padding L14 R10, gap 8, radius 8.
+            // 테두리는 Default border/default → Focused primary/default → 값이 있고 포커스가 없으면(Filled) primary/strong
             isField
-              ? "h-12 rounded-lg border border-border bg-fill-subtle pl-3.5 pr-2.5 focus-within:border-primary"
+              ? "h-12 rounded-md border border-border bg-fill-subtle pl-3.5 pr-2.5 focus-within:border-primary [&:has(input:not(:placeholder-shown)):not(:focus-within)]:border-primary-strong"
               : selectionOnly && "rounded-xl bg-bubble-gray/60 px-3 py-2.5",
           )}
         >
-          <DestinationLeadingIcon show={showLeadingIcon} type={leadingIconType} />
+          {isField ? (
+            showLeadingIcon && <SearchIcon size={20} className="shrink-0 text-icon-subtle" />
+          ) : (
+            <DestinationLeadingIcon show={showLeadingIcon} type={leadingIconType} />
+          )}
           <input
             ref={inputRef}
             aria-label="목적지 검색"
@@ -222,10 +229,22 @@ export function DestinationSearchInput({
             className={cn(
               "min-w-0 flex-1 text-body-m-regular text-dark-gray outline-none placeholder:text-light-gray",
               selectionOnly && "bg-transparent",
-              isField && "text-text-subtle placeholder:text-text-disabled",
+              // Figma Text 프레임 오른쪽 4px, 입력 글자 text/default, 플레이스홀더 text/subtle
+              isField && "pr-1 text-text placeholder:text-text-subtle",
             )}
           />
-          {showClear ? (
+          {showClear && isField ? (
+            // Figma Trailing Icon 영역 32×48, close 20px
+            <button
+              type="button"
+              onClick={handleClear}
+              aria-label={selectionOnly ? "선택 지우기" : "지우기"}
+              className="grid w-8 shrink-0 cursor-pointer place-items-center self-stretch text-icon-subtle"
+            >
+              <CloseIcon size={20} />
+            </button>
+          ) : null}
+          {showClear && !isField ? (
             <button
               type="button"
               onClick={handleClear}

From 58891fb06ad110fc47de072ce9c251054c7b89ae Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 16:02:56 +0900
Subject: [PATCH 35/93] =?UTF-8?q?style(text-field):=20=EB=AA=A9=EC=A0=81?=
 =?UTF-8?q?=EC=A7=80=20=EA=B2=80=EC=83=89=EC=B9=B8=20=EC=95=84=EB=9E=98?=
 =?UTF-8?q?=EC=97=90=20=EC=84=A0=ED=83=9D=20=EC=95=88=EB=82=B4=EB=A5=BC=20?=
 =?UTF-8?q?Footer=20=EB=B3=B4=EC=A1=B0=20=EB=AC=B8=EA=B5=AC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=8B=A4=EC=8B=9C=20=EB=B3=B4=EC=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- field 모양에서도 '직접 입력은 불가하며, 검색 후 목록에서 선택해 주세요.'를 보이고 입력의 aria-describedby로 잇는다
- 글자는 Figma Footer Helper Text(caption/sm/regular·text/subtle, 칸 아래 4px)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/search/DestinationSearchInput.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/search/DestinationSearchInput.tsx b/src/components/search/DestinationSearchInput.tsx
index 6e380982..b07ba7f7 100644
--- a/src/components/search/DestinationSearchInput.tsx
+++ b/src/components/search/DestinationSearchInput.tsx
@@ -56,7 +56,7 @@ export function DestinationSearchInput({
   appearance = "default",
 }: Readonly<Props>) {
   const isField = appearance === "field";
-  const showHint = selectionOnly && !isField;
+  const showHint = selectionOnly;
   const placesLib = useMapsLibrary("places");
 
   const buildRequest = useCallback(
@@ -292,7 +292,12 @@ export function DestinationSearchInput({
       {showHint ? (
         <p
           id={selectionOnlyFooterId}
-          className="mt-2 text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-light-gray"
+          className={
+            isField
+              ? // Figma Text Field Footer(5002:4440)의 Helper Text: 칸 아래 4px, caption/sm/regular·text/subtle
+                "mt-1 text-caption-s-regular text-text-subtle"
+              : "mt-2 text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-light-gray"
+          }
         >
           {DESTINATION_SELECTION_HINT}
         </p>

From 735c4864414f6cc58055e561f228495b377cd95c Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 16:13:58 +0900
Subject: [PATCH 36/93] =?UTF-8?q?style(badge):=20=EB=8C=80=EA=B8=B0=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20'=EC=B0=B8=EC=97=AC=20=EA=B1=B0=EC=A0=88'?=
 =?UTF-8?q?=20=EB=B0=B0=EC=A7=80=EB=A5=BC=20Critical=20=ED=86=A4=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B0=94=EA=BF=88?=
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/waiting/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/waiting/page.tsx b/src/app/waiting/page.tsx
index 5b16cf1b..8829ce4c 100644
--- a/src/app/waiting/page.tsx
+++ b/src/app/waiting/page.tsx
@@ -73,7 +73,7 @@ function WaitingContent() {
       <BrandLogo variant="symbol" size="S" alt="우때 로고" />
 
       <div className="flex w-full max-w-[480px] flex-col gap-6 rounded-xl bg-fill-elevate p-6 shadow-[0_2px_10px_rgba(0,0,0,0.1)]">
-        <Badge tone={isRejected ? "neutral" : "brand"} size="md">
+        <Badge tone={isRejected ? "critical" : "brand"} size="md">
           {isRejected ? "참여 거절" : "승인 대기"}
         </Badge>
 

From 5ec4881f88e7d93568e814e50a0c4f73912537f6 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 16:13:58 +0900
Subject: [PATCH 37/93] =?UTF-8?q?style(waiting):=20=EB=8C=80=EA=B8=B0=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=83=81=EB=8B=A8=20=EB=A1=9C=EA=B3=A0?=
 =?UTF-8?q?=EB=A5=BC=20=EC=BD=A4=EB=B9=84=EB=84=A4=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EB=A7=88=ED=81=AC=20M=EC=9C=BC=EB=A1=9C=20=EB=B0=94=EA=BF=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 심볼 S(23px) → 콤비네이션 마크 M(147×45px)

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

diff --git a/src/app/waiting/page.tsx b/src/app/waiting/page.tsx
index 8829ce4c..51596b94 100644
--- a/src/app/waiting/page.tsx
+++ b/src/app/waiting/page.tsx
@@ -70,7 +70,7 @@ function WaitingContent() {
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center gap-6 bg-fill-elevate px-4 py-12">
-      <BrandLogo variant="symbol" size="S" alt="우때 로고" />
+      <BrandLogo variant="combination" size="M" alt="우때 로고" />
 
       <div className="flex w-full max-w-[480px] flex-col gap-6 rounded-xl bg-fill-elevate p-6 shadow-[0_2px_10px_rgba(0,0,0,0.1)]">
         <Badge tone={isRejected ? "critical" : "brand"} size="md">

From bce5ded7732c36ff2cb5badca68b07a4f47fcde8 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 16:46:09 +0900
Subject: [PATCH 38/93] =?UTF-8?q?style(chip):=20=EC=A7=80=EB=8F=84=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=B9=A9=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=EC=9D=84=20=EA=B5=90=EC=B2=B4=20=EC=A0=84?=
 =?UTF-8?q?=EC=B2=98=EB=9F=BC=20=ED=8C=8C=EB=9E=80=EC=83=89=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=90=98=EB=8F=8C=EB=A6=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 음식점·호텔 등 카테고리 아이콘을 글자색 대신 primary-strong(#005bd9)으로 그린다(선택 여부와 무관)

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

diff --git a/src/components/map/MapCategoryChips.tsx b/src/components/map/MapCategoryChips.tsx
index 146ec801..e3c565b7 100644
--- a/src/components/map/MapCategoryChips.tsx
+++ b/src/components/map/MapCategoryChips.tsx
@@ -30,7 +30,8 @@ export function MapCategoryChips({
           pressed={selectedCategoryId === cat.id}
           onPressedChange={(pressed) => onSelectCategory(pressed ? cat.id : null)}
         >
-          <cat.icon />
+          {/* 카테고리 아이콘은 선택과 상관없이 파란색이다(교체 전 지도 칩 아이콘 #005bd9) */}
+          <cat.icon className="text-primary-strong" />
           <span>{cat.label}</span>
         </MapChipToggle>
       ))}
diff --git a/src/components/map/MapDiscoverToolbar.tsx b/src/components/map/MapDiscoverToolbar.tsx
index 79a2b706..65a13e5b 100644
--- a/src/components/map/MapDiscoverToolbar.tsx
+++ b/src/components/map/MapDiscoverToolbar.tsx
@@ -62,7 +62,7 @@ export function MapDiscoverToolbar({
             {category ? (
               <div className="flex w-max flex-nowrap items-center gap-1.5">
                 <MapChipToggle pressed onPressedChange={resetCategory}>
-                  <category.icon/><span>{category.label}</span>
+                  <category.icon className="text-primary-strong"/><span>{category.label}</span>
                 </MapChipToggle>
                 <MapFilter rating={rating} openNow={openNow} setRating={setRating} setOpenNow={setOpenNow}/>
                 <Chip variant="outline" size="md" className="w-9 px-0"

From a75317f63cbaee7b90ed5c8a65647ab404dc6a77 Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 16:52:45 +0900
Subject: [PATCH 39/93] =?UTF-8?q?style(chip):=20=EC=B9=A9=20=EC=95=88=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=EC=9D=84=2016px=C2=B7=EC=84=A0=201.?=
 =?UTF-8?q?5px=EB=A1=9C=20=EB=A7=9E=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Figma Chip 예시(chevron 5628:50·check 5628:56)의 16px·1.5px를 따른다
- 기본 아이콘 선 1.8(createIcon)을 칩 안에서만 CSS로 덮는다(칩 밖 아이콘은 그대로 1.8)

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

diff --git a/src/components/ui/chip.tsx b/src/components/ui/chip.tsx
index 38912072..0260b16f 100644
--- a/src/components/ui/chip.tsx
+++ b/src/components/ui/chip.tsx
@@ -10,8 +10,9 @@ import { cn } from "@/lib/utils";
 // Selected는 aria-pressed:, State=Pressed는 :active, Disabled는 data-disabled:로 그린다. Base UI의 data-pressed는 Selected라 눌림에 쓰지 않는다.
 // 비활성을 disabled:로 쓰면 Tailwind가 aria-pressed:보다 먼저 출력해 선택+비활성 칩이 선택 색으로 남는다.
 // 눌림·손가락 커서는 enabled:로 한정해 span 칩(제거용)은 누를 때 색·커서가 바뀌지 않고, button·Toggle로 그린 칩만 바뀐다.
+// 아이콘은 Figma Chip 예시(chevron 5628:50·check 5628:56)대로 16px·선 1.5px이다. 기본 아이콘 선 1.8(createIcon)을 CSS로 덮는다
 const chipVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full whitespace-nowrap transition-colors duration-120 ease-out enabled:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none [&_svg:not([class*='size-'])]:size-[16px]",
+  "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full whitespace-nowrap transition-colors duration-120 ease-out enabled:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none [&_svg:not([class*='size-'])]:size-[16px] [&_svg_*]:[stroke-width:1.5]",
   {
     variants: {
       variant: {

From 286783972c630d5cd08b53da75898b66c98dd39e Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 21:54:30 +0900
Subject: [PATCH 40/93] =?UTF-8?q?feat(ui):=20Figma=20Search=20Bar=EB=A5=BC?=
 =?UTF-8?q?=20SearchBar=20=EB=B6=80=ED=92=88=EC=9C=BC=EB=A1=9C=20=EB=A7=8C?=
 =?UTF-8?q?=EB=93=A4=EA=B3=A0=20=EC=9E=A5=EC=86=8C=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=EC=B9=B8=EC=97=90=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ui SearchBar·SearchBarIcon·SearchBarInput·SearchBarClear 추가(Search Bar 5002:4377: 48px, 모서리 8, 앞 아이콘·지우기 20px, 포커스 primary·값 있음 primary-strong 테두리)
- PC 지도 검색칸, PC 일정 '장소 추가하기'는 Figma 모양(모서리 8)
- 모바일 검색 전용 화면(지도 검색·장소 추가 검색)은 shape="pill"로 알약 모양을 두고 아이콘·테두리만 맞춤
- 지우기 아이콘을 원형 X·옛 지도 SVG에서 CloseIcon으로, 쓰지 않게 된 public/map-search/clear.svg 삭제
- 접힌 지도 검색 버튼(46px)과 검색 동작(PC는 입력 중 지우기 숨김 등)은 그대로

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/map-search/clear.svg                   |  6 --
 src/components/map/MapSearchIcon.tsx          |  3 +-
 src/components/search/MapPlaceSearchInput.tsx | 41 ++++-----
 .../search/MobilePlaceSearchScreen.tsx        | 20 ++---
 src/components/search/PlacesSearchInput.tsx   | 36 +++-----
 src/components/ui/search-bar.tsx              | 86 +++++++++++++++++++
 6 files changed, 117 insertions(+), 75 deletions(-)
 delete mode 100644 public/map-search/clear.svg
 create mode 100644 src/components/ui/search-bar.tsx

diff --git a/public/map-search/clear.svg b/public/map-search/clear.svg
deleted file mode 100644
index 129f6879..00000000
--- a/public/map-search/clear.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="close">
-<path id="Vector" d="M15 5L5 15" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke="#8B92A8"/>
-<path id="Vector_2" d="M5 5L15 15" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke="#8B92A8"/>
-</g>
-</svg>
diff --git a/src/components/map/MapSearchIcon.tsx b/src/components/map/MapSearchIcon.tsx
index 21d25f97..6b49986b 100644
--- a/src/components/map/MapSearchIcon.tsx
+++ b/src/components/map/MapSearchIcon.tsx
@@ -2,8 +2,7 @@ import Image from "next/image";
 
 /** Original vector exports from Figma 6153:8257; explicit dimensions preserve the glyphs. */
 export function MapSearchIcon({ name, size = 16, className }: Readonly<{
-  name: "chevron-down" | "search" | "search-white" | "location" |
-    "clear" | "close" | "star" | "arrow-right";
+  name: "chevron-down" | "search" | "search-white" | "location" | "close" | "star" | "arrow-right";
   size?: number;
   className?: string;
 }>) {
diff --git a/src/components/search/MapPlaceSearchInput.tsx b/src/components/search/MapPlaceSearchInput.tsx
index cb688dd8..0de984f0 100644
--- a/src/components/search/MapPlaceSearchInput.tsx
+++ b/src/components/search/MapPlaceSearchInput.tsx
@@ -10,7 +10,8 @@ import {
 } from "react";
 import { flushSync } from "react-dom";
 import { MapSearchIcon } from "@/components/map/MapSearchIcon";
-import { ChevronLeftIcon, CircleCancelIcon, SearchIcon } from "@/assets/icons";
+import { ChevronLeftIcon, SearchIcon } from "@/assets/icons";
+import { SearchBar, SearchBarClear, SearchBarIcon, SearchBarInput } from "@/components/ui/search-bar";
 import { AutocompleteSearchSession, MAP_AUTOCOMPLETE_DEBOUNCE_MS } from "@/lib/places/autocomplete-session";
 import type { PlacePrediction, PlaceSession, PredictionText } from "@/lib/api/place-sessions";
 import type { SearchConfirmation } from "@/lib/places/search-session";
@@ -44,18 +45,10 @@ const INPUT_STYLES = {
   mobile: {
     container: "flex min-h-0 w-full flex-col",
     form: "shrink-0 px-5 pb-2 pt-4",
-    field: "h-12 gap-2 rounded-lg pl-3.5 pr-2.5",
-    text: "text-body-m-regular",
-    clear: "h-full w-8",
-    iconSize: 20,
   },
   desktop: {
     container: "w-[353px] max-w-full",
     form: undefined,
-    field: "h-12 gap-2 rounded-lg pl-3.5 pr-2.5",
-    text: "text-body-m-regular",
-    clear: "size-8",
-    iconSize: 20,
   },
 } as const;
 
@@ -271,16 +264,17 @@ export function MapPlaceSearchInput({
           void confirm(active);
         }}
       >
-        <div className={cn(
-          "flex items-center border border-border bg-fill-subtle focus-within:border-primary",
-          appearance.field,
-        )}>
+        <SearchBar shape={mobile ? "pill" : "rounded"}>
           {onBack ? (
             <button type="button" aria-label={backLabel} onClick={onBack} className="flex h-12 w-5 shrink-0 cursor-pointer items-center justify-center rounded hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary">
               <ChevronLeftIcon size={20} className="text-icon-subtle" />
             </button>
-          ) : mobile ? <SearchIcon size={appearance.iconSize} className="shrink-0 text-icon-subtle" /> : <MapSearchIcon name="search" size={20} />}
-          <input
+          ) : (
+            <SearchBarIcon>
+              <SearchIcon size={20} />
+            </SearchBarIcon>
+          )}
+          <SearchBarInput
             ref={fieldRef}
             type="search"
             role="combobox"
@@ -347,26 +341,21 @@ export function MapPlaceSearchInput({
             }}
             placeholder="장소 검색"
             autoComplete="off"
-            className={cn(
-              "peer min-w-0 flex-1 bg-transparent pr-1 text-text outline-none placeholder:text-text-subtle [&::-webkit-search-cancel-button]:hidden",
-              appearance.text,
-            )}
+            // PC는 입력 중(포커스)에 지우기를 숨긴다(peer-focus:hidden)
+            className="peer"
           />
           {value ? (
-            <button
-              type="button"
+            <SearchBarClear
               aria-label="검색어 지우기"
               onClick={() => {
                 update("");
                 if (mobile) fieldRef.current?.focus();
                 else fieldRef.current?.blur();
               }}
-              className={cn("flex shrink-0 cursor-pointer items-center justify-center rounded hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary", appearance.clear, !mobile && "peer-focus:hidden")}
-            >
-              {mobile ? <CircleCancelIcon size={appearance.iconSize} className="text-icon-subtle" /> : <MapSearchIcon name="clear" size={20}/>}
-            </button>
+              className={cn(!mobile && "peer-focus:hidden")}
+            />
           ) : null}
-        </div>
+        </SearchBar>
       </form>
       {showDropdown ? <SearchSuggestions listId={listId} active={active} value={value} rows={rows}
         suggestions={suggestions} mobile={mobile} onConfirm={confirm} onActiveChange={setActive} /> : null}
diff --git a/src/components/search/MobilePlaceSearchScreen.tsx b/src/components/search/MobilePlaceSearchScreen.tsx
index 2b86add9..d3840e99 100644
--- a/src/components/search/MobilePlaceSearchScreen.tsx
+++ b/src/components/search/MobilePlaceSearchScreen.tsx
@@ -14,13 +14,13 @@ import { useMapsLibrary } from "@vis.gl/react-google-maps";
 
 import {
   ChevronLeftIcon,
-  CircleCancelIcon,
   CloseIcon,
   LocationErrorIcon,
   LocationIcon,
   SearchIcon,
   type IconProps,
 } from "@/assets/icons";
+import { SearchBar, SearchBarClear, SearchBarInput } from "@/components/ui/search-bar";
 import { useSessionUser } from "@/hooks/useSessionUser";
 import {
   addMapSearchHistory,
@@ -247,7 +247,7 @@ function LegacyMobilePlaceSearchScreen({
       )}
     >
       <form onSubmit={handleSubmit} className="shrink-0 px-2 pb-1 pt-4">
-        <div className="flex h-12 items-center gap-2 rounded-full border border-border bg-fill-subtle pl-3.5 pr-2.5 focus-within:border-primary">
+        <SearchBar shape="pill">
           <button
             type="button"
             onClick={handleClose}
@@ -256,7 +256,7 @@ function LegacyMobilePlaceSearchScreen({
           >
             <ChevronLeftIcon size={20} className="text-icon-subtle" />
           </button>
-          <input
+          <SearchBarInput
             ref={inputRef}
             type="search"
             inputMode="search"
@@ -265,19 +265,9 @@ function LegacyMobilePlaceSearchScreen({
             onChange={(e) => updateInput(e.target.value)}
             placeholder="떠나고 싶은 지역을 입력해주세요"
             autoComplete="off"
-            className="min-w-0 flex-1 bg-transparent pr-1 text-body-m-regular text-text outline-none placeholder:text-text-subtle [&::-webkit-search-cancel-button]:hidden"
           />
-          {inputValue ? (
-            <button
-              type="button"
-              onClick={handleClear}
-              aria-label="검색어 지우기"
-              className="flex h-12 w-8 shrink-0 items-center justify-center"
-            >
-              <CircleCancelIcon size={20} className="text-icon-subtle" />
-            </button>
-          ) : null}
-        </div>
+          {inputValue ? <SearchBarClear onClick={handleClear} aria-label="검색어 지우기" /> : null}
+        </SearchBar>
       </form>
 
       <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pb-5">
diff --git a/src/components/search/PlacesSearchInput.tsx b/src/components/search/PlacesSearchInput.tsx
index fbcac4d3..3c661e04 100644
--- a/src/components/search/PlacesSearchInput.tsx
+++ b/src/components/search/PlacesSearchInput.tsx
@@ -8,9 +8,11 @@ import {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
-import { Search, MapPin, X } from "lucide-react";
+import { MapPin } from "lucide-react";
 import { useMapsLibrary } from "@vis.gl/react-google-maps";
 
+import { LocationIcon, SearchIcon } from "@/assets/icons";
+import { SearchBar, SearchBarClear, SearchBarIcon, SearchBarInput } from "@/components/ui/search-bar";
 import { useDebouncedPlacePredictions } from "@/hooks/useDebouncedPlacePredictions";
 import {
   circleLocationBias,
@@ -294,19 +296,11 @@ export function PlacesSearchInput({
   return (
     <div ref={containerRef} className="relative">
       <form onSubmit={handleSubmit} className="flex items-center gap-1">
-        <div className="relative flex w-full min-w-0 items-center">
-          {leadingIcon === "pin" ? (
-            <MapPin
-              className="pointer-events-none absolute left-3 h-4 w-4 text-dark-gray"
-              aria-hidden
-            />
-          ) : (
-            <Search
-              className="pointer-events-none absolute left-3 h-4 w-4 text-dark-gray"
-              aria-hidden
-            />
-          )}
-          <input
+        <SearchBar>
+          <SearchBarIcon>
+            {leadingIcon === "pin" ? <LocationIcon size={20} /> : <SearchIcon size={20} />}
+          </SearchBarIcon>
+          <SearchBarInput
             ref={inputRef}
             type="text"
             value={inputValue}
@@ -316,19 +310,9 @@ export function PlacesSearchInput({
             onFocus={() => predictions.length > 0 && setIsOpen(true)}
             placeholder={placeholder}
             autoComplete="off"
-            className="w-full rounded-lg border border-gray-border bg-white py-2 pl-9 pr-8 text-body-m-regular outline-none placeholder:text-[#99A1AF] focus:border-primary focus:ring-2 focus:ring-primary/30 focus:ring-inset disabled:cursor-not-allowed disabled:opacity-60"
           />
-          {inputValue ? (
-            <button
-              type="button"
-              onClick={handleClear}
-              className="absolute right-2.5 text-[#99A1AF] hover:text-[#364153]"
-              aria-label="지우기"
-            >
-              <X className="h-3.5 w-3.5" />
-            </button>
-          ) : null}
-        </div>
+          {inputValue ? <SearchBarClear onClick={handleClear} aria-label="지우기" /> : null}
+        </SearchBar>
         {!pickOnly ? (
           <button
             type="submit"
diff --git a/src/components/ui/search-bar.tsx b/src/components/ui/search-bar.tsx
new file mode 100644
index 00000000..6ea65943
--- /dev/null
+++ b/src/components/ui/search-bar.tsx
@@ -0,0 +1,86 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+
+import { CloseIcon } from "@/assets/icons";
+import { cn } from "@/lib/utils";
+
+// Figma 02 Text Field의 Search Bar(5002:4377): 48px, padding L14 R10, gap 8, radius 8, 바탕 fill/subtle.
+// 테두리는 Default border/default → Focused primary/default → 값이 있고 포커스가 없으면(Filled) primary/strong.
+// Filled는 입력의 :placeholder-shown으로 읽어서 SearchBarInput은 placeholder를 꼭 받는다
+const searchBarVariants = cva(
+  "flex h-12 w-full min-w-0 items-center gap-2 border border-border bg-fill-subtle pl-3.5 pr-2.5 transition-colors focus-within:border-primary has-[input:disabled]:bg-fill [&:has(input:not(:placeholder-shown)):not(:focus-within)]:border-primary-strong",
+  {
+    variants: {
+      // pill은 모바일 검색 전용 화면(지도 검색·장소 추가 검색)의 기존 알약 모양이다. Figma Search Bar에는 없다
+      shape: {
+        rounded: "rounded-md",
+        pill: "rounded-full",
+      },
+    },
+    defaultVariants: { shape: "rounded" },
+  },
+);
+
+function SearchBar({
+  className,
+  shape,
+  ...props
+}: Readonly<ComponentProps<"div"> & VariantProps<typeof searchBarVariants>>) {
+  return (
+    <div
+      data-slot="search-bar"
+      className={cn(searchBarVariants({ shape }), className)}
+      {...props}
+    />
+  );
+}
+
+// Leading Icon 20px, icon/subtle. 아이콘(@/assets/icons)을 size={20}으로 넣는다
+function SearchBarIcon({ className, ...props }: Readonly<ComponentProps<"span">>) {
+  return (
+    <span
+      aria-hidden
+      data-slot="search-bar-icon"
+      className={cn("flex shrink-0 text-icon-subtle", className)}
+      {...props}
+    />
+  );
+}
+
+// Figma Text 프레임 오른쪽 4px, 입력 글자 text/default, 플레이스홀더 text/subtle
+function SearchBarInput({
+  className,
+  placeholder,
+  ...props
+}: Readonly<ComponentProps<"input"> & { placeholder: string }>) {
+  return (
+    <input
+      data-slot="search-bar-input"
+      placeholder={placeholder}
+      className={cn(
+        "min-w-0 flex-1 self-stretch bg-transparent pr-1 text-body-m-regular text-text outline-none placeholder:text-text-subtle disabled:cursor-not-allowed disabled:text-text-disabled [&::-webkit-search-cancel-button]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// Trailing Icon 영역 32×48, close 20px. 언제 보일지는 호출부가 정한다(값이 있을 때 등)
+function SearchBarClear({ className, ...props }: Readonly<ComponentProps<"button">>) {
+  return (
+    <button
+      type="button"
+      data-slot="search-bar-clear"
+      className={cn(
+        "grid w-8 shrink-0 cursor-pointer place-items-center self-stretch text-icon-subtle focus-visible:outline-2 focus-visible:outline-primary",
+        className,
+      )}
+      {...props}
+    >
+      <CloseIcon size={20} />
+    </button>
+  );
+}
+
+export { SearchBar, SearchBarIcon, SearchBarInput, SearchBarClear };

From c9008856b4435150544a435ca0d552fb6133e40e Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 22:00:10 +0900
Subject: [PATCH 41/93] =?UTF-8?q?style(ui):=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=20=EA=B2=80=EC=83=89=20=ED=99=94=EB=A9=B4=20=EB=92=A4=EB=A1=9C?=
 =?UTF-8?q?=EA=B0=80=EA=B8=B0=EB=A5=BC=20SearchBarBack=EC=9C=BC=EB=A1=9C?=
 =?UTF-8?q?=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 아이콘 ChevronLeftIcon 20px, 누르는 영역은 지우기와 같은 32px × 칸 높이, 포커스 테두리·손가락 커서 동일
- 모바일 지도 검색(20×48·회색 hover)과 장소 추가 검색(약 28×28·표시 없음)이 달랐던 것을 맞춤

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/search/MapPlaceSearchInput.tsx |  8 +++----
 .../search/MobilePlaceSearchScreen.tsx        | 12 ++--------
 src/components/ui/search-bar.tsx              | 22 +++++++++++++++++--
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/search/MapPlaceSearchInput.tsx b/src/components/search/MapPlaceSearchInput.tsx
index 0de984f0..8604e6b8 100644
--- a/src/components/search/MapPlaceSearchInput.tsx
+++ b/src/components/search/MapPlaceSearchInput.tsx
@@ -10,8 +10,8 @@ import {
 } from "react";
 import { flushSync } from "react-dom";
 import { MapSearchIcon } from "@/components/map/MapSearchIcon";
-import { ChevronLeftIcon, SearchIcon } from "@/assets/icons";
-import { SearchBar, SearchBarClear, SearchBarIcon, SearchBarInput } from "@/components/ui/search-bar";
+import { SearchIcon } from "@/assets/icons";
+import { SearchBar, SearchBarBack, SearchBarClear, SearchBarIcon, SearchBarInput } from "@/components/ui/search-bar";
 import { AutocompleteSearchSession, MAP_AUTOCOMPLETE_DEBOUNCE_MS } from "@/lib/places/autocomplete-session";
 import type { PlacePrediction, PlaceSession, PredictionText } from "@/lib/api/place-sessions";
 import type { SearchConfirmation } from "@/lib/places/search-session";
@@ -266,9 +266,7 @@ export function MapPlaceSearchInput({
       >
         <SearchBar shape={mobile ? "pill" : "rounded"}>
           {onBack ? (
-            <button type="button" aria-label={backLabel} onClick={onBack} className="flex h-12 w-5 shrink-0 cursor-pointer items-center justify-center rounded hover:bg-fill focus-visible:outline-2 focus-visible:outline-primary">
-              <ChevronLeftIcon size={20} className="text-icon-subtle" />
-            </button>
+            <SearchBarBack aria-label={backLabel} onClick={onBack} />
           ) : (
             <SearchBarIcon>
               <SearchIcon size={20} />
diff --git a/src/components/search/MobilePlaceSearchScreen.tsx b/src/components/search/MobilePlaceSearchScreen.tsx
index d3840e99..62b86f37 100644
--- a/src/components/search/MobilePlaceSearchScreen.tsx
+++ b/src/components/search/MobilePlaceSearchScreen.tsx
@@ -13,14 +13,13 @@ import { createPortal } from "react-dom";
 import { useMapsLibrary } from "@vis.gl/react-google-maps";
 
 import {
-  ChevronLeftIcon,
   CloseIcon,
   LocationErrorIcon,
   LocationIcon,
   SearchIcon,
   type IconProps,
 } from "@/assets/icons";
-import { SearchBar, SearchBarClear, SearchBarInput } from "@/components/ui/search-bar";
+import { SearchBar, SearchBarBack, SearchBarClear, SearchBarInput } from "@/components/ui/search-bar";
 import { useSessionUser } from "@/hooks/useSessionUser";
 import {
   addMapSearchHistory,
@@ -248,14 +247,7 @@ function LegacyMobilePlaceSearchScreen({
     >
       <form onSubmit={handleSubmit} className="shrink-0 px-2 pb-1 pt-4">
         <SearchBar shape="pill">
-          <button
-            type="button"
-            onClick={handleClose}
-            aria-label={backLabel}
-            className="-m-1 flex shrink-0 items-center justify-center p-1"
-          >
-            <ChevronLeftIcon size={20} className="text-icon-subtle" />
-          </button>
+          <SearchBarBack onClick={handleClose} aria-label={backLabel} />
           <SearchBarInput
             ref={inputRef}
             type="search"
diff --git a/src/components/ui/search-bar.tsx b/src/components/ui/search-bar.tsx
index 6ea65943..4a331711 100644
--- a/src/components/ui/search-bar.tsx
+++ b/src/components/ui/search-bar.tsx
@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import type { ComponentProps } from "react";
 
-import { CloseIcon } from "@/assets/icons";
+import { ChevronLeftIcon, CloseIcon } from "@/assets/icons";
 import { cn } from "@/lib/utils";
 
 // Figma 02 Text Field의 Search Bar(5002:4377): 48px, padding L14 R10, gap 8, radius 8, 바탕 fill/subtle.
@@ -47,6 +47,24 @@ function SearchBarIcon({ className, ...props }: Readonly<ComponentProps<"span">>
   );
 }
 
+// 모바일 검색 전용 화면의 뒤로가기. Figma Search Bar에는 없어 Leading Icon 자리(20px)에 둔다.
+// 누르는 영역은 지우기와 같은 32px × 칸 높이이고, 음수 margin으로 줄 안에서는 아이콘 폭 20px만 차지한다(왼쪽 여백 14·간격 8 안에서 끝난다)
+function SearchBarBack({ className, ...props }: Readonly<ComponentProps<"button">>) {
+  return (
+    <button
+      type="button"
+      data-slot="search-bar-back"
+      className={cn(
+        "-mx-1.5 grid w-8 shrink-0 cursor-pointer place-items-center self-stretch text-icon-subtle focus-visible:outline-2 focus-visible:outline-primary",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronLeftIcon size={20} />
+    </button>
+  );
+}
+
 // Figma Text 프레임 오른쪽 4px, 입력 글자 text/default, 플레이스홀더 text/subtle
 function SearchBarInput({
   className,
@@ -83,4 +101,4 @@ function SearchBarClear({ className, ...props }: Readonly<ComponentProps<"button
   );
 }
 
-export { SearchBar, SearchBarIcon, SearchBarInput, SearchBarClear };
+export { SearchBar, SearchBarBack, SearchBarIcon, SearchBarInput, SearchBarClear };

From 53381ad199277cde7b7208fe2b080fe99c0c1eda Mon Sep 17 00:00:00 2001
From: KangShinGyu <rkdtlseb@naver.com>
Date: Sat, 31 Oct 2026 22:14:30 +0900
Subject: [PATCH 42/93] =?UTF-8?q?feat(text-field):=20Textarea=EB=A5=BC=20?=
 =?UTF-8?q?=EC=86=90=EC=9C=BC=EB=A1=9C=20=EC=84=B8=EB=A1=9C=20=EB=8A=98?=
 =?UTF-8?q?=EB=A6=B4=20=EC=88=98=20=EC=9E=88=EA=B2=8C=20=ED=95=A8(96px~8?=
 =?UTF-8?q?=EC=A4=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 시작 96px(rows 무관)은 그대로, resize-y와 min-h-24로 96보다 줄지 않게, 최대 8줄 218px
- Figma Textarea Field는 자동 확장·최대 높이를 정하지 않아 8줄은 코드에서 정한 값, 터치 기기는 손잡이가 없어 그대로

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

diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 8abe8a86..9d840f39 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -9,8 +9,10 @@ function Textarea({ className, ...props }: Readonly<ComponentProps<"textarea">>)
     <textarea
       data-slot="textarea"
       className={cn(
-        // rows와 무관하게 96 고정, 넘치면 스크롤한다(rows로 높이를 정하면 rows=3이 98px이 된다). 오른쪽 28 = Text 래퍼 14 + 스크롤 레인 14(막대 4×24는 얇은 기본 스크롤바로 대신한다)
-        "block h-24 w-full min-w-0 resize-none overflow-y-auto rounded-md border border-border bg-fill-subtle py-3 pr-7 pl-3.5 text-body-m-regular text-text transition-colors [scrollbar-color:var(--gray-400)_transparent] [scrollbar-width:thin] placeholder:text-text-subtle focus:border-primary focus:outline-hidden read-only:bg-fill read-only:text-[var(--gray-800)] disabled:cursor-not-allowed disabled:bg-fill disabled:text-text-disabled disabled:placeholder:text-text-disabled aria-invalid:border-status-negative",
+        // 시작 높이는 rows와 무관하게 96(rows로 정하면 rows=3이 98px이 된다), 넘치면 스크롤한다. 오른쪽 28 = Text 래퍼 14 + 스크롤 레인 14(막대 4×24는 얇은 기본 스크롤바로 대신한다)
+        // 손으로 세로만 늘릴 수 있고 96보다 줄지 않으며 8줄(줄 24 × 8 + 위아래 여백 24 + 테두리 2 = 218)까지 늘어난다.
+        // Figma는 자동 확장·최대 높이를 정하지 않았다(Textarea Field 5002:4364 설명). 터치 기기는 손잡이가 없어 96 그대로다
+        "block h-24 max-h-[218px] min-h-24 w-full min-w-0 resize-y overflow-y-auto rounded-md border border-border bg-fill-subtle py-3 pr-7 pl-3.5 text-body-m-regular text-text transition-colors [scrollbar-color:var(--gray-400)_transparent] [scrollbar-width:thin] placeholder:text-text-subtle focus:border-primary focus:outline-hidden read-only:bg-fill read-only:text-[var(--gray-800)] disabled:cursor-not-allowed disabled:bg-fill disabled:text-text-disabled disabled:placeholder:text-text-disabled aria-invalid:border-status-negative",
         className,
       )}
       {...props}

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 43/93] =?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 44/93] =?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 45/93] =?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 46/93] =?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 47/93] =?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 48/93] =?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 49/93] =?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 50/93] =?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 51/93] =?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 52/93] =?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 53/93] =?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 54/93] =?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 55/93] =?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 56/93] =?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 57/93] =?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 58/93] =?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 59/93] =?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 60/93] =?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 61/93] =?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 62/93] =?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 63/93] =?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 64/93] =?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 65/93] =?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 66/93] =?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 67/93] =?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 68/93] =?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 69/93] =?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 70/93] =?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 71/93] =?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 72/93] =?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 73/93] =?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 74/93] =?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 75/93] =?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 76/93] =?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 77/93] =?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 78/93] =?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 79/93] =?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 80/93] =?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 81/93] =?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 82/93] =?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 83/93] =?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 84/93] =?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 85/93] =?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 86/93] =?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 87/93] =?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 88/93] =?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 89/93] =?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 90/93] =?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 91/93] =?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 3d67a6c49379ea0dc8bc19984c61ebf5590f2e4f Mon Sep 17 00:00:00 2001
From: minbros <realminbros@gmail.com>
Date: Mon, 2 Nov 2026 18:54:28 +0900
Subject: [PATCH 92/93] =?UTF-8?q?refactor(ui):=20Sonar=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=20=EB=B6=84=EA=B8=B0=EC=99=80=20=EB=9D=BC=EB=B2=A8=20?=
 =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B2=BD=EA=B3=A0=20=ED=95=B4?=
 =?UTF-8?q?=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PlanDaySection.route-switch.test.tsx      | 30 +++++++
 .../_components/itinerary/PlanDaySection.tsx  |  1 -
 .../search/DestinationSearchInput.test.tsx    | 63 +++++++++++++++
 .../search/DestinationSearchInput.tsx         | 81 ++++++++++---------
 src/components/ui/label.tsx                   |  7 +-
 5 files changed, 140 insertions(+), 42 deletions(-)
 create mode 100644 src/app/(main)/plan/_components/itinerary/PlanDaySection.route-switch.test.tsx
 create mode 100644 src/components/search/DestinationSearchInput.test.tsx

diff --git a/src/app/(main)/plan/_components/itinerary/PlanDaySection.route-switch.test.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.route-switch.test.tsx
new file mode 100644
index 00000000..717c8d81
--- /dev/null
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.route-switch.test.tsx
@@ -0,0 +1,30 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it } from "vitest";
+import { PlanDaySection } from "./PlanDaySection";
+import { usePlanScheduleRouteVisibilityStore } from "@/stores/plan-schedule-route-visibility-store";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+it("label and switch change route visibility without collapsing the day", async () => {
+  usePlanScheduleRouteVisibilityStore.setState({ visibleByScheduleId: {}, visibilityOrder: [] });
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  try {
+    await act(async () => root.render(<PlanDaySection title="1일차" itineraryScheduleId={10}>장소</PlanDaySection>));
+    const heading = host.querySelector<HTMLButtonElement>('button[aria-expanded]')!;
+    const toggle = host.querySelector<HTMLButtonElement>('[role="switch"]')!;
+    await act(async () => host.querySelector("label")!.click());
+    expect(toggle.getAttribute("aria-checked")).toBe("false");
+    expect(usePlanScheduleRouteVisibilityStore.getState().visibleByScheduleId[10]).toBe(false);
+    expect(heading.getAttribute("aria-expanded")).toBe("true");
+    await act(async () => toggle.click());
+    expect(toggle.getAttribute("aria-checked")).toBe("true");
+    expect(heading.getAttribute("aria-expanded")).toBe("true");
+  } finally {
+    await act(async () => root.unmount());
+    host.remove();
+  }
+});
diff --git a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
index 1c885798..d6423df0 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
@@ -318,7 +318,6 @@ export function PlanDaySection({
             <div className="min-w-0 flex-1">{summaryAction}</div>
             {trackedSid !== undefined ? (
               <label
-                onClick={(event) => event.stopPropagation()}
                 className="flex min-h-8 shrink-0 cursor-pointer items-center gap-2 rounded-lg px-2 text-label-xs-regular text-text-subtle transition-colors select-none hover:bg-fill"
               >
                 지도에 경로 표시
diff --git a/src/components/search/DestinationSearchInput.test.tsx b/src/components/search/DestinationSearchInput.test.tsx
new file mode 100644
index 00000000..1b6849b3
--- /dev/null
+++ b/src/components/search/DestinationSearchInput.test.tsx
@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+import { DestinationSearchInput } from "./DestinationSearchInput";
+import { Label } from "@/components/ui/label";
+
+vi.mock("@vis.gl/react-google-maps", () => ({ useMapsLibrary: () => null }));
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+it.each(["default", "field"] as const)("preserves clear behavior and focus for %s appearance", async (appearance) => {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const change = vi.fn();
+  const resolved = vi.fn();
+  try {
+    await act(async () => root.render(<DestinationSearchInput appearance={appearance} value="서울" onChange={change} onResolvedPlace={resolved} />));
+    const input = host.querySelector("input")!;
+    const clear = host.querySelector<HTMLButtonElement>('button[aria-label="지우기"]')!;
+    expect(input.value).toBe("서울");
+    await act(async () => clear.click());
+    expect(input.value).toBe("");
+    expect(change).toHaveBeenCalledExactlyOnceWith("");
+    expect(resolved).toHaveBeenCalledExactlyOnceWith(null);
+    expect(document.activeElement).toBe(input);
+    expect(host.querySelector("button")).toBeNull();
+  } finally {
+    await act(async () => root.unmount());
+    host.remove();
+  }
+});
+
+it("retains the selection-only hint association and does not refocus when cleared", async () => {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  try {
+    await act(async () => root.render(<DestinationSearchInput appearance="field" selectionOnly value="서울" onChange={vi.fn()} />));
+    const input = host.querySelector("input")!;
+    const hint = document.getElementById(input.getAttribute("aria-describedby")!);
+    expect(input.getAttribute("role")).toBe("combobox");
+    expect(hint?.textContent).toContain("목록에서 선택");
+    await act(async () => host.querySelector<HTMLButtonElement>('button[aria-label="선택 지우기"]')!.click());
+    expect(document.activeElement).not.toBe(input);
+    expect(input.value).toBe("");
+  } finally {
+    await act(async () => root.unmount());
+    host.remove();
+  }
+});
+
+it("forwards the label control association and children", async () => {
+  const host = document.createElement("div");
+  const root = createRoot(host);
+  try {
+    await act(async () => root.render(<><Label htmlFor="destination">목적지</Label><input id="destination" /></>));
+    expect(host.querySelector("label")?.control).toBe(host.querySelector("input"));
+    expect(host.querySelector("label")?.textContent).toBe("목적지");
+  } finally {
+    await act(async () => root.unmount());
+  }
+});
diff --git a/src/components/search/DestinationSearchInput.tsx b/src/components/search/DestinationSearchInput.tsx
index b07ba7f7..f4c31141 100644
--- a/src/components/search/DestinationSearchInput.tsx
+++ b/src/components/search/DestinationSearchInput.tsx
@@ -34,12 +34,49 @@ type Props = {
   appearance?: "default" | "field";
 };
 
-function DestinationLeadingIcon({ show, type }: Readonly<{ show: boolean; type: "search" | "map-pin" }>) {
+function DestinationLeadingIcon({ show, type, appearance }: Readonly<{ show: boolean; type: "search" | "map-pin"; appearance: "default" | "field" }>) {
   if (!show) return null;
+  if (appearance === "field") return <SearchIcon size={20} className="shrink-0 text-icon-subtle" />;
   const Icon = type === "search" ? Search : MapPin;
   return <Icon size={15} className="shrink-0 text-dark-gray" />;
 }
 
+function DestinationClearButton({ appearance, selectionOnly, onClick }: Readonly<{
+  appearance: "default" | "field";
+  selectionOnly: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}>) {
+  const isField = appearance === "field";
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={selectionOnly ? "선택 지우기" : "지우기"}
+      className={isField
+        ? "grid w-8 shrink-0 cursor-pointer place-items-center self-stretch text-icon-subtle"
+        : "shrink-0 rounded p-0.5 text-light-gray transition hover:text-dark-gray"}
+    >
+      {isField ? <CloseIcon size={20} /> : <X size={14} />}
+    </button>
+  );
+}
+
+function DestinationSelectionHint({ id, appearance }: Readonly<{
+  id: string;
+  appearance: "default" | "field";
+}>) {
+  return (
+    <p
+      id={id}
+      className={appearance === "field"
+        ? "mt-1 text-caption-s-regular text-text-subtle"
+        : "mt-2 text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-light-gray"}
+    >
+      {DESTINATION_SELECTION_HINT}
+    </p>
+  );
+}
+
 /**
  * Google Places Autocomplete Data API 기반 목적지 검색.
  * `includedPrimaryTypes`로 지역·행정구역·국가 등(레거시 `(regions)`에 대응).
@@ -201,11 +238,7 @@ export function DestinationSearchInput({
               : selectionOnly && "rounded-xl bg-bubble-gray/60 px-3 py-2.5",
           )}
         >
-          {isField ? (
-            showLeadingIcon && <SearchIcon size={20} className="shrink-0 text-icon-subtle" />
-          ) : (
-            <DestinationLeadingIcon show={showLeadingIcon} type={leadingIconType} />
-          )}
+          <DestinationLeadingIcon show={showLeadingIcon} type={leadingIconType} appearance={appearance} />
           <input
             ref={inputRef}
             aria-label="목적지 검색"
@@ -233,26 +266,8 @@ export function DestinationSearchInput({
               isField && "pr-1 text-text placeholder:text-text-subtle",
             )}
           />
-          {showClear && isField ? (
-            // Figma Trailing Icon 영역 32×48, close 20px
-            <button
-              type="button"
-              onClick={handleClear}
-              aria-label={selectionOnly ? "선택 지우기" : "지우기"}
-              className="grid w-8 shrink-0 cursor-pointer place-items-center self-stretch text-icon-subtle"
-            >
-              <CloseIcon size={20} />
-            </button>
-          ) : null}
-          {showClear && !isField ? (
-            <button
-              type="button"
-              onClick={handleClear}
-              aria-label={selectionOnly ? "선택 지우기" : "지우기"}
-              className="shrink-0 rounded p-0.5 text-light-gray transition hover:text-dark-gray"
-            >
-              <X size={14} />
-            </button>
+          {showClear ? (
+            <DestinationClearButton appearance={appearance} selectionOnly={selectionOnly} onClick={handleClear} />
           ) : null}
         </div>
 
@@ -289,19 +304,7 @@ export function DestinationSearchInput({
         ) : null}
       </div>
 
-      {showHint ? (
-        <p
-          id={selectionOnlyFooterId}
-          className={
-            isField
-              ? // Figma Text Field Footer(5002:4440)의 Helper Text: 칸 아래 4px, caption/sm/regular·text/subtle
-                "mt-1 text-caption-s-regular text-text-subtle"
-              : "mt-2 text-body-s-regular mobile:text-body-xs-regular leading-relaxed text-light-gray"
-          }
-        >
-          {DESTINATION_SELECTION_HINT}
-        </p>
-      ) : null}
+      {showHint ? <DestinationSelectionHint id={selectionOnlyFooterId} appearance={appearance} /> : null}
     </div>
   );
 }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 79494f01..8080df7c 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -4,13 +4,16 @@ import { cn } from "@/lib/utils";
 
 // Figma 02 Text Field Header 5002:4449의 Label: label/xs/regular, text/default, 필수 표시와 간격 2
 // 비활성·오류·읽기 전용 색은 FieldLabel이 같은 Field 안 입력에서 읽는다. 라벨이 입력 앞에 있어 shadcn의 peer-disabled:로는 읽지 못한다
-function Label({ className, ...props }: Readonly<ComponentProps<"label">>) {
+function Label({ className, htmlFor, children, ...props }: Readonly<ComponentProps<"label">>) {
   return (
     <label
+      htmlFor={htmlFor}
       data-slot="label"
       className={cn("flex items-center gap-0.5 text-label-xs-regular text-text select-none", className)}
       {...props}
-    />
+    >
+      {children}
+    </label>
   );
 }
 

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 93/93] =?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"