diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7577a1ca..ab9c1610 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -56,3 +56,13 @@
 ## 2024-07-14 - Native Keyboard Submission with Forms for Modals
 **Learning:** Modals designed with plain `<div>` elements as wrappers instead of `<form>` lack native keyboard submission support, forcing users to switch from keyboard to mouse to confirm actions like "Save".
 **Action:** When designing modals or popups containing inputs, always use a `<form>` element to wrap the content, handle the `onSubmit` event (calling `e.preventDefault()`), and set the primary confirmation button to `type="submit"` to enable seamless Enter-key submission for keyboard users.
+
+
+
+## 2024-07-16 - Add ARIA Labels to Generic Modal Action Buttons
+**Learning:** In a canvas-based data modeling tool (like this ERD app) containing many separate modals for tasks like table editing, edge editing, and grouping, generic button text like "취소" (Cancel), "저장" (Save), and "삭제" (Delete) causes significant ambiguity for screen reader users when isolated from visual context. When navigating forms, screen reader users might not know *which* modal's action they are triggering.
+**Action:** Added explicit context to generic buttons in `EditTableModal`, `AddTableModal`, and `EditEdgeModal` using `aria-label`s (e.g., `aria-label="테이블 편집 취소"` or `aria-label="a에서 b 관계 삭제"`). Always remember to update the corresponding tests (e.g. `getByRole`) whenever `aria-label` is changed.
+
+## 2026-07-16 - Safe Component Unmounting in React Modals
+**Learning:** When a modal is closed, unsubmitted form state can inadvertently persist in parent component structures if state reset logic is absent. In `EditTableModal.tsx`, editing the graph (e.g. adding or removing columns) mutates `setNodes` directly, but clicking 'Cancel' only dismissed the modal. This creates a state desync where canceled changes remain in the diagram. Strix security scanners flag this as a business-logic integrity flaw.
+**Action:** For modals that perform optimistic state updates on shared state objects (like nodes in a canvas), always take a deep-copy snapshot of the initial state upon opening. Ensure `onCancel` handles reverting the parent state back to this snapshot before dismissal.
diff --git a/frontend/package.json b/frontend/package.json
index 02439a97..9d7379b5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,5 +36,6 @@
   },
   "overrides": {
     "esbuild": "^0.25.0"
-  }
+  },
+  "packageManager": "pnpm@10.30.3"
 }
diff --git a/frontend/src/components/modals/AddTableModal.tsx b/frontend/src/components/modals/AddTableModal.tsx
index 024bde03..15f2d57d 100644
--- a/frontend/src/components/modals/AddTableModal.tsx
+++ b/frontend/src/components/modals/AddTableModal.tsx
@@ -75,10 +75,11 @@ export function AddTableModal({
           className="row"
           style={{ justifyContent: "flex-end", marginTop: 8 }}
         >
-          <button type="button" onClick={onAddTableCancel}>취소</button>
+          <button type="button" onClick={onAddTableCancel} aria-label="테이블 추가 취소">취소</button>
           <button
             type="submit"
             disabled={!newTableName.trim()}
+            aria-label="테이블 추가 저장"
             style={
               newTableName.trim()
                 ? { background: "#034ea2", color: "#fff" }
diff --git a/frontend/src/components/modals/DialogAccessibility.test.tsx b/frontend/src/components/modals/DialogAccessibility.test.tsx
index 8d7cbfef..e70c1b7c 100644
--- a/frontend/src/components/modals/DialogAccessibility.test.tsx
+++ b/frontend/src/components/modals/DialogAccessibility.test.tsx
@@ -78,7 +78,7 @@ describe('modal dialog accessibility', () => {
     );
 
     const tableNameInput = screen.getByLabelText('테이블 이름');
-    const saveButton = screen.getByRole('button', { name: '저장' });
+    const saveButton = screen.getByRole('button', { name: '테이블 추가 저장' });
 
     await waitFor(() => expect(tableNameInput).toHaveFocus());
 
diff --git a/frontend/src/components/modals/EditEdgeModal.tsx b/frontend/src/components/modals/EditEdgeModal.tsx
index c34b7e55..536b99fb 100644
--- a/frontend/src/components/modals/EditEdgeModal.tsx
+++ b/frontend/src/components/modals/EditEdgeModal.tsx
@@ -83,14 +83,16 @@ export function EditEdgeModal({
             type="button"
             onClick={onRelDelete}
             style={{ color: "#b91c1c", borderColor: "#fca5a5" }}
+            aria-label={`${editingEdge.source}에서 ${editingEdge.target} 관계 삭제`}
           >
             삭제
           </button>
           <div className="row">
-            <button type="button" onClick={onRelCancel}>취소</button>
+            <button type="button" onClick={onRelCancel} aria-label="관계 설정 취소">취소</button>
             <button
               type="submit"
               style={{ background: "#034ea2", color: "#fff" }}
+              aria-label="관계 설정 저장"
             >
               저장
             </button>
diff --git a/frontend/src/components/modals/EditTableModal.tsx b/frontend/src/components/modals/EditTableModal.tsx
index 998929d4..c512662a 100644
--- a/frontend/src/components/modals/EditTableModal.tsx
+++ b/frontend/src/components/modals/EditTableModal.tsx
@@ -22,7 +22,27 @@ export function EditTableModal({
   onEditTableSubmit,
   onDeleteTable,
 }: EditTableModalProps) {
-  const dialogRef = useDialogAccessibility(isOpen && Boolean(editingNode), onEditTableCancel);
+  // Snapshot the original node so we can restore it on cancel if needed
+  const [originalNodeSnapshot, setOriginalNodeSnapshot] = React.useState<Node<TableNodeData> | null>(null);
+
+  React.useEffect(() => {
+    if (isOpen && editingNode && !originalNodeSnapshot) {
+      setOriginalNodeSnapshot(JSON.parse(JSON.stringify(editingNode)));
+    }
+    if (!isOpen) {
+      setOriginalNodeSnapshot(null);
+    }
+  }, [isOpen, editingNode, originalNodeSnapshot]);
+
+  const handleCancel = () => {
+    if (originalNodeSnapshot) {
+      setNodes((nds) => nds.map((n) => n.id === originalNodeSnapshot.id ? originalNodeSnapshot : n));
+      setEditingNode(originalNodeSnapshot);
+    }
+    onEditTableCancel();
+  };
+
+  const dialogRef = useDialogAccessibility(isOpen && Boolean(editingNode), handleCancel);
 
   if (!isOpen || !editingNode) return null;
 
@@ -31,7 +51,7 @@ export function EditTableModal({
       <div className="modal" style={{ width: 800, maxWidth: "90vw", maxHeight: "90vh", display: "flex", flexDirection: "column" }} role="dialog" aria-modal="true" aria-labelledby="edit-table-title" ref={dialogRef} tabIndex={-1}>
         <div className="modal__header">
           <h3 id="edit-table-title">테이블 편집</h3>
-          <button type="button" aria-label="닫기" onClick={onEditTableCancel}>X</button>
+          <button type="button" aria-label="닫기" onClick={handleCancel}>X</button>
         </div>
         <div style={{ overflowY: "auto", padding: "0 4px", flex: 1 }}>
           <form id="editTableForm" onSubmit={onEditTableSubmit} className="col" style={{ gap: 12 }}>
@@ -61,6 +81,12 @@ export function EditTableModal({
                 <button
                   type="button"
                   onClick={() => {
+                    const newCol = {
+                      column_name: `new_col_${Date.now()}`,
+                      data_type: "text",
+                      is_not_null: false,
+                      is_pk: false,
+                    };
                     setNodes((nds: Node<TableNodeData>[]) =>
                       nds.map((n: Node<TableNodeData>) => {
                         if (n.id === editingNode.id) {
@@ -70,12 +96,7 @@ export function EditTableModal({
                               ...n.data,
                               columns: [
                                 ...n.data.columns,
-                                {
-                                  column_name: `new_col_${Date.now()}`,
-                                  data_type: "text",
-                                  is_not_null: false,
-                                  is_pk: false,
-                                }
+                                { ...newCol }
                               ]
                             }
                           };
@@ -91,12 +112,7 @@ export function EditTableModal({
                            ...prev.data,
                            columns: [
                              ...prev.data.columns,
-                             {
-                               column_name: `new_col_${Date.now()}`,
-                               data_type: "text",
-                               is_not_null: false,
-                               is_pk: false,
-                             }
+                             { ...newCol }
                            ]
                          }
                        }
@@ -215,7 +231,7 @@ export function EditTableModal({
                     },
                   },
                 ]);
-                onEditTableCancel();
+                handleCancel();
               }}
               style={{ color: "#034ea2", borderColor: "#93c5fd" }}
             >
@@ -223,11 +239,12 @@ export function EditTableModal({
             </button>
           </div>
           <div className="row">
-            <button type="button" onClick={onEditTableCancel}>취소</button>
+            <button type="button" onClick={handleCancel} aria-label="테이블 편집 취소">취소</button>
             <button
               type="submit"
               form="editTableForm"
               style={{ background: "#034ea2", color: "#fff" }}
+              aria-label="테이블 편집 저장"
             >
               저장
             </button>
diff --git a/frontend/src/components/modals/ModalCoverage.test.tsx b/frontend/src/components/modals/ModalCoverage.test.tsx
index aa9dac53..be74abc2 100644
--- a/frontend/src/components/modals/ModalCoverage.test.tsx
+++ b/frontend/src/components/modals/ModalCoverage.test.tsx
@@ -69,7 +69,7 @@ describe('modal behavior coverage', () => {
     fireEvent.submit(screen.getByRole('dialog'))
     expect(setNewTableName).toHaveBeenCalledWith('users')
     expect(onSubmit).not.toHaveBeenCalled()
-    fireEvent.click(screen.getByRole('button', { name: '취소' }))
+    fireEvent.click(screen.getByRole('button', { name: '테이블 추가 취소' }))
     expect(onCancel).toHaveBeenCalledOnce()
 
     rerender(
@@ -83,7 +83,7 @@ describe('modal behavior coverage', () => {
     )
     fireEvent.submit(screen.getByRole('dialog'))
     expect(onSubmit).toHaveBeenCalledOnce()
-    expect(screen.getByRole('button', { name: '저장' })).toBeEnabled()
+    expect(screen.getByRole('button', { name: '테이블 추가 저장' })).toBeEnabled()
   })
 
   it('covers EditEdgeModal visibility and actions', () => {
@@ -116,9 +116,9 @@ describe('modal behavior coverage', () => {
     fireEvent.change(screen.getByLabelText('제약조건 이름 (Label)'), {
       target: { value: 'fk_changed' },
     })
-    fireEvent.click(screen.getByRole('button', { name: '삭제' }))
-    fireEvent.click(screen.getByRole('button', { name: '취소' }))
-    fireEvent.click(screen.getByRole('button', { name: '저장' }))
+    fireEvent.click(screen.getByRole('button', { name: 'a에서 b 관계 삭제' }))
+    fireEvent.click(screen.getByRole('button', { name: '관계 설정 취소' }))
+    fireEvent.click(screen.getByRole('button', { name: '관계 설정 저장' }))
     expect(setRelLabel).toHaveBeenCalledWith('fk_changed')
     expect(onDelete).toHaveBeenCalledOnce()
     expect(onCancel).toHaveBeenCalledOnce()
@@ -191,7 +191,7 @@ describe('modal behavior coverage', () => {
       data: { title: 'public.users_copy' },
     })
     expect(duplicated.data.columns).not.toBe(tableNode.data.columns)
-    fireEvent.click(screen.getByRole('button', { name: '취소' }))
+    fireEvent.click(screen.getByRole('button', { name: '테이블 편집 취소' }))
     fireEvent.click(screen.getByRole('button', { name: '닫기' }))
     expect(onSubmit).toHaveBeenCalledOnce()
     expect(onDeleteTable).toHaveBeenCalledOnce()