confirm.md

패턴: 확인

되돌릴 수 없는 액션 앞에서만 묻는다. 묻는다면 앱의 ConfirmDialog 로, 결과를 말하는 동사 버튼으로.

언제 이 패턴을 마주치나

• 채팅·팀 채팅·프로젝트를 삭제할 때
• 채팅방이나 프로젝트에서 나갈 때
• 멤버를 제거하거나 방장을 넘길 때
• 이름 바꾸기·설정 변경처럼 되돌릴 수 있는 동작 (→ 묻지 않는다)

결정 트리

이 동작을 되돌릴 수 있나?
├─ 예 (이름 바꾸기·설정 변경·선택 해제) ──────────── 확인 없이 바로 실행
└─ 아니오
   ├─ 나에게만 영향 + 잃는 게 적음 ───────────────── ConfirmDialog (간단)
   └─ 다른 사람에게도 영향 or 잃는 게 큼 ─────────── ConfirmDialog emphasis (강조)

옵션별 세부

간단 — <ConfirmDialog>

• 쓰는 곳: 개인 채팅 삭제, 섹션 삭제, 팀 채팅 나가기, 공유 취소
• 모양: 질문형 제목 + 한 줄 설명 + [취소 secondary] [동사 danger]

강조 — <ConfirmDialog emphasis>

• 쓰는 곳: 팀 채팅 삭제, 프로젝트 삭제, 멤버 제거, 프로젝트 나가기
• 모양: 질문형 제목 + 빨간 경고 "이 작업은 되돌릴 수 없어요" 안에 결과 설명 + [취소] [동사 danger]

모달 안에서 — 줄 안 확인

• 이미 열린 모달 안의 목록에서 되돌릴 수 없는 동작(예: 팀 채팅 멤버 내보내기)은 ConfirmDialog 를 겹치지 않는다(모달 위 모달 금지).
• 그 줄이 내보낼까요? [취소] [내보내기] 로 바뀐다. 포커스는 취소 에 먼저 둔다(실수 방지).
• 실패는 모달 위쪽 InlineAlert 로, 성공하면 줄이 원래대로.
• 참고 구현: components/feature/teamChat/TeamChatMembersModal.tsx — confirmKickId 상태, autoFocus 취소, isLoading 확인 버튼, kick.isError InlineAlert, 닫을 때 reset().

공통 규칙

• 제목: 질문형으로 대상을 밝힌다 — ‘z’ 채팅방을 삭제할까요?
• 설명: 무엇이 사라지고 누구에게 영향이 가는지. 코드·서버 동작으로 확인할 수 있는 사실만 쓴다(Trust).
• 버튼: 결과를 말하는 동사(삭제·나가기·제거). "확인"·"예" 금지. 위험 버튼은 오른쪽 끝 danger.
• 처리 중: 버튼에 로딩, 취소·닫기 막기(중간 상태로 닫히지 않게).
• 실패: 모달을 닫지 않고 error 로 안에 보여준다 — 에러 패턴.
• 금지: window.confirm — OS 창이라 앱 디자인·키보드 규칙을 벗어나고 Electron·웹에서 모양이 다르다.
• 이름 입력 확인(GitHub 식)은 두지 않는다 — 삭제 권한이 OWNER 로 제한돼 있고 강조형 모달로 충분.

접근성

• OverlayModal 이 포커스 가두기·Esc·포커스 복귀를 맡는다.
• 강조형 경고는 role="alert"(InlineAlert danger) 라 열리는 즉시 읽힌다.

Do / Don't

Do	Don't
‘z’ 채팅방을 삭제할까요? + [취소] [삭제]	정말 삭제하시겠습니까? + [취소] [확인]
이름 바꾸기는 바로 저장	이름 바꾸기에도 "변경할까요?" 확인
ConfirmDialog	window.confirm(...)

Qode 에서의 실제 결정 기록

• 2026-09-26: 확인 방식이 window.confirm 4곳과 앱 모달 2곳으로 섞여 있던 것을 ConfirmDialog 하나로 통일. 모양은 가벼움에 따라 간단·강조 두 단계로 결정(전부 강조형은 가벼운 삭제까지 무겁게 보이고, 전부 간단형은 프로젝트 삭제의 무게를 못 전함). 프로젝트 삭제의 이름 입력 확인은 두지 않기로 결정.
• 2026-09-26: 팀 채팅 멤버 내보내기가 확인 없이 실행되던 것을 발견. 모달 안이라 ConfirmDialog 대신 줄 안 확인으로 결정.