[DONE] 덱과 보내기 창 여섯이 Esc 로 닫히고, 열리면 초점이 창 안으로, 닫히면 연 단추로 간다

web/src/app/community/d/[id]/DeckDetailClient.tsx

@@ -25,6 +25,7 @@ import {
 import { DESCRIPTION_MAX, TITLE_MAX } from "@/lib/community/validate";
 import { useDeviceHost } from "@/lib/community/deviceHost";
 import { useBackdropClose } from "@/lib/hooks/useBackdropClose";
+import { useDialog } from "@/lib/hooks/useDialog";
 import { useZipDownload, zipStatusUrl } from "@/lib/community/zipDownload";
 import type { DeckPageItem } from "@/lib/community/server/serialize";
 import { captureEvent } from "@/lib/posthogEvents";
@@ -608,6 +609,7 @@ function PerformanceModal({
   const [json, setJson] = useState(initialJson ?? "");
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
+  const cardRef = useDialog<HTMLDivElement>(onClose);
   const closeOnBackdrop = useBackdropClose(onClose);
 
   const send = async (value: string | null) => {
@@ -646,7 +648,12 @@ function PerformanceModal({
 
   return (
     <div className={styles.modalOverlay} role="dialog" aria-modal="true" {...closeOnBackdrop}>
-      <div className={styles.modalCard} onClick={(event) => event.stopPropagation()}>
+      <div
+        ref={cardRef}
+        tabIndex={-1}
+        className={styles.modalCard}
+        onClick={(event) => event.stopPropagation()}
+      >
         <div className={styles.modalHeader}>
           <span>Deck performance</span>
           <button type="button" onClick={onClose} aria-label="Close">
@@ -717,6 +724,9 @@ function EditDeckModal({
   const [description, setDescription] = useState(initialDescription ?? "");
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
+  // The title field takes the focus, as its autoFocus did, and the hook sees
+  // the Edit details button first so the focus goes back to it on close.
+  const titleRef = useDialog<HTMLInputElement>(onClose);
   const closeOnBackdrop = useBackdropClose(onClose);
 
   const save = async () => {
@@ -760,10 +770,10 @@ function EditDeckModal({
           <label className={styles.field}>
             <span className={styles.fieldLabel}>Title</span>
             <input
+              ref={titleRef}
               className={styles.textInput}
               value={title}
               maxLength={TITLE_MAX}
-              autoFocus
               onChange={(event) => setTitle(event.target.value)}
             />
           </label>

web/src/app/pattern-lab/HardwareModal.test.tsx

@@ -4,8 +4,9 @@
 // translated lives only in this modal's state, so it went with it.
 //
 // Esc goes the same way. This modal hears the Esc meant for the window on
-// top, Send or Publish, and closes that one alone. Publish hears the same
-// Esc itself and closes itself, which leaves this modal open all the same.
+// top, Send or Publish, and closes that one alone. Send and Publish hear the
+// same Esc themselves and close themselves, which leaves this modal open all
+// the same.
 //
 // The modal is mounted the way the lab mounts it, behind an open flag that
 // onClose clears, so a stray close really unmounts it. The pasted header is

web/src/app/pattern-lab/HardwareModal.tsx

@@ -212,9 +212,9 @@ export default function HardwareModal({
   // here as well, and that one began in the card.
   const closeOnBackdrop = useBackdropClose(onClose);
 
-  // Esc closes the window on top and the header stays. Send opens over this
-  // one and hears no keys of its own, so this listener closes it. Publish
-  // hears Esc itself, and both listeners close Publish and nothing else.
+  // Esc closes the window on top and the header stays. Send and Publish open
+  // over this one and hear Esc themselves, and both listeners close the one
+  // on top and nothing else.
   const cardRef = useDialog<HTMLDivElement>(() => {
     if (sendOpen) setSendOpen(false);
     else if (publishCode !== null) setPublishCode(null);