🎨 Palette: [UX improvement] 관계 및 업무 그룹 삭제 시 사용자 확인(Confirm) 다이얼로그 추가 by seonghobae · Pull Request #669 · ContextualWisdomLab/pg-erd-cloud

seonghobae · 2026-07-28T13:52:07Z

💡 What: EditEdgeModal과 GroupModal에서 삭제 버튼(관계 삭제, 그룹 삭제) 클릭 시 window.confirm 다이얼로그를 통해 사용자 확인을 받도록 UX를 개선했습니다.
🎯 Why: 삭제와 같은 파괴적인 액션(Destructive Actions)에 대해 사용자 확인 과정이 누락되어 실수로 인한 데이터 유실 및 의도치 않은 삭제가 발생할 위험이 컸습니다. 확인 절차를 추가하여 사용자 경험을 더 안전하게 만들었습니다.
📸 Before/After: '삭제' 버튼 클릭 시 바로 삭제되던 기존 방식에서 브라우저 네이티브 알림창(Confirm)을 띄워 한 번 더 묻는 방식으로 변경되었습니다.
♿ Accessibility: 기존 접근성에 큰 영향은 없으며 스크린 리더 사용자와 키보드 사용자 또한 명시적인 알림을 통해 잘못된 액션을 인지하고 취소할 기회를 갖게 됩니다.

PR created automatically by Jules for task 11479908492292940390 started by @seonghobae

Summary by CodeRabbit

버그 수정
- 관계 삭제 시 확인 메시지를 표시하고, 사용자가 확인한 경우에만 삭제하도록 개선했습니다.
- 그룹 삭제 전 그룹명을 포함한 확인 절차를 추가해 실수로 삭제하는 것을 방지했습니다.
테스트
- 삭제 확인 동작에 대한 모킹 및 테스트 정리 절차를 보완했습니다.

- EditEdgeModal의 관계 삭제 시 `window.confirm` 추가 - GroupModal의 그룹 삭제 시 `window.confirm` 추가 - ModalCoverage.test.tsx 내 `window.confirm` 모킹 추가

google-labs-jules · 2026-07-28T13:52:09Z

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

coderabbitai · 2026-07-28T13:52:29Z

📝 Walkthrough

Walkthrough

관계 및 그룹 삭제 동작에 window.confirm 확인 단계를 추가하고, 모달 테스트에서 확인 응답을 기본 승인으로 모킹하도록 변경했습니다.

Changes

삭제 확인 흐름

Layer / File(s)	Summary
모달 삭제 확인과 테스트 설정 `frontend/src/components/modals/EditEdgeModal.tsx`, `frontend/src/components/modals/GroupModal.tsx`, `frontend/src/components/modals/ModalCoverage.test.tsx`	관계와 그룹 삭제 핸들러가 `window.confirm`이 참일 때만 실행되며, 테스트는 확인 응답을 모킹하고 각 테스트 후 목을 복원합니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

ContextualWisdomLab/pg-erd-cloud#666: EditEdgeModal의 삭제 버튼과 관련 테스트 선택자를 수정한 변경입니다.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 관계 및 업무 그룹 삭제 시 확인 다이얼로그 추가라는 주요 변경을 정확히 요약합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch palette-ux-confirm-destructive-11479908492292940390

_{Comment @coderabbitai help to get the list of available commands.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/src/components/modals/ModalCoverage.test.tsx (1)
44-50: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

확인 취소 경로도 명시적으로 검증하세요.

window.confirm을 항상 true로 설정하면 승인 경로만 테스트됩니다. 확인 응답이 false일 때 onRelDelete와 onDeleteBusinessGroup이 호출되지 않는지 별도 테스트를 추가해야 취소 동작의 회귀를 잡을 수 있습니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/modals/ModalCoverage.test.tsx` around lines 44 - 50,
Extend the ModalCoverage tests to explicitly cover the cancellation path by
mocking window.confirm to return false and asserting that neither onRelDelete
nor onDeleteBusinessGroup is called. Keep the existing true-confirmation setup
and approval-path tests unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/modals/EditEdgeModal.tsx`:
- Around line 84-88: 중복 확인 대화를 제거하세요.
frontend/src/components/modals/EditEdgeModal.tsx 84-88에서는 삭제 버튼을 onRelDelete에 직접
연결하고, frontend/src/components/modals/GroupModal.tsx 111-115에서는
onDeleteBusinessGroup(group.id)를 직접 호출하도록 변경해 상위 삭제 핸들러의 단일 확인 및 상세 경고를 유지하세요.

---

Nitpick comments:
In `@frontend/src/components/modals/ModalCoverage.test.tsx`:
- Around line 44-50: Extend the ModalCoverage tests to explicitly cover the
cancellation path by mocking window.confirm to return false and asserting that
neither onRelDelete nor onDeleteBusinessGroup is called. Keep the existing
true-confirmation setup and approval-path tests unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 44d53844-a285-4b16-905c-73e05e08aa1e

📥 Commits

Reviewing files that changed from the base of the PR and between 4bf3968 and 50aaa24.

📒 Files selected for processing (3)

frontend/src/components/modals/EditEdgeModal.tsx
frontend/src/components/modals/GroupModal.tsx
frontend/src/components/modals/ModalCoverage.test.tsx

coderabbitai · 2026-07-28T13:54:23Z

+            onClick={() => {
+              if (window.confirm("관계를 삭제하시겠습니까?")) {
+                onRelDelete();
+              }
+            }}


🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

모달과 상위 삭제 핸들러의 확인이 중복됩니다.

frontend/src/App.tsx의 관계 및 그룹 삭제 핸들러가 이미 확인 후 상태를 변경하므로, 두 모달의 새 확인창은 동일한 삭제 동작에 두 번째 대화상자를 추가합니다.

frontend/src/components/modals/EditEdgeModal.tsx#L84-L88: onClick={onRelDelete}로 되돌리거나 상위 핸들러의 확인을 제거해 단일화하세요.

frontend/src/components/modals/GroupModal.tsx#L111-L115: onClick={() => onDeleteBusinessGroup(group.id)}로 변경해 상위 핸들러의 상세 경고를 유지하세요.

📍 Affects 2 files

frontend/src/components/modals/EditEdgeModal.tsx#L84-L88 (this comment)

frontend/src/components/modals/GroupModal.tsx#L111-L115

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/modals/EditEdgeModal.tsx` around lines 84 - 88, 중복 확인 대화를 제거하세요. frontend/src/components/modals/EditEdgeModal.tsx 84-88에서는 삭제 버튼을 onRelDelete에 직접 연결하고, frontend/src/components/modals/GroupModal.tsx 111-115에서는 onDeleteBusinessGroup(group.id)를 직접 호출하도록 변경해 상위 삭제 핸들러의 단일 확인 및 상세 경고를 유지하세요.

seonghobae · 2026-07-31T12:41:43Z

Closed as superseded/duplicate Palette a11y PR; keyboard/form a11y baseline already on main (#568/#567/#534). Remaining a11y land via priority PR or follow-up if needed.

google-labs-jules · 2026-07-31T12:42:38Z

Closed as superseded/duplicate Palette a11y PR; keyboard/form a11y baseline already on main (#568/#567/#534). Remaining a11y land via priority PR or follow-up if needed.

Understood. Acknowledging that this work is now obsolete and stopping work on this task.

coderabbitai Bot reviewed Jul 28, 2026

View reviewed changes

seonghobae closed this Jul 31, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

🎨 Palette: [UX improvement] 관계 및 업무 그룹 삭제 시 사용자 확인(Confirm) 다이얼로그 추가 - #669

🎨 Palette: [UX improvement] 관계 및 업무 그룹 삭제 시 사용자 확인(Confirm) 다이얼로그 추가#669
seonghobae wants to merge 1 commit into
mainfrom
palette-ux-confirm-destructive-11479908492292940390

seonghobae commented Jul 28, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

google-labs-jules Bot commented Jul 28, 2026

Uh oh!

coderabbitai Bot commented Jul 28, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Jul 28, 2026

Uh oh!

seonghobae commented Jul 31, 2026

Uh oh!

google-labs-jules Bot commented Jul 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

seonghobae commented Jul 28, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

google-labs-jules Bot commented Jul 28, 2026

Uh oh!

coderabbitai Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 28, 2026

Choose a reason for hiding this comment

Uh oh!

seonghobae commented Jul 31, 2026

Uh oh!

google-labs-jules Bot commented Jul 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

seonghobae commented Jul 28, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 28, 2026 •

edited

Loading