[2팀] 관리자 도구의 개선 및 데이터 유실 불량 수정

[fruitman200912]

---

[PR] 관리자 도구 안정성 개선 및 데이터 유실 결함 수정

1. 개요

• 관리자 페이지 운영 중 발생할 수 있는 데이터 유실 및 무결성 파괴 결함 3건을 파악하여 해결했습니다.
• 오조작을 시스템적으로 방지하고 데이터 품질을 확보하는 데 초점을 맞췄습니다.

---

2.주요 수정 내용

SiteEditor: 저장 전 이탈 시 변경사항 유실 수정

• 문제 : 배너, SEO 등 다수의 필드 편집 중 탭 닫기나 라우팅 이동 시 수정 데이터가 즉시 휘발됨.
• 해결 :
  • useUnsavedGuard 커스텀 훅을 구현하여 브라우저 종료/새로고침/뒤로가기 시 이탈 방지 가드 적용.
  • 자동 저장 : localStorage를 활용해 30초 주기로 편집본을 자동 임시저장.
  • Draft 복구 : 페이지 재진입 시 기존 편집 데이터가 있으면 복원 여부를 묻는 팝업 로직 추가.

OrgChartEditor: 노드 삭제 시 확인 절차 및 복구 기능 도입

• 문제 : 삭제 시 하위 트리까지 영구 삭제되나 확인 절차나 Undo 기능이 없어 데이터 파괴 위험이 큼.
• 해결 :
  • 재귀적 노드 카운팅 : 삭제 전 "하위 N개 노드 포함 삭제" 문구를 명시하여 인지 편향 방지.
  • Undo 시스템 : 히스토리 스택(20단계) 기반의 되돌리기 기능 구현.
  • 단축키 지원 : Ctrl+Z / Cmd+Z 핸들러를 추가하여 편집 편의성 개선.

폼 제출 유효성 검사 누락 및 중복 생성 결함 수정

• 문제 : 빈 제목/내용으로 문서 생성이 가능하여 DB가 오염되고 목록 UI가 깨지는 현상.
• 해결 :
  • Zod 스키마 정의 : src/lib/validation.ts에 게시글 규격(trim 처리, 최소 길이 등) 강제.
  • 2중 제출 잠금 : isSubmitting(RHF)과 isPending(명시적 상태)을 조합해 네트워크 지연 중 중복 클릭 방지.
  • 인라인 에러 : 필드 하단에 실시간 검증 메시지를 노출하여 사용자 피드백 강화.

---

3. 변경 파일 요약

구분	파일 경로	주요 역할
Hooks	src/hooks/useUnsavedGuard.ts	페이지 이탈 방지 공통 로직
Logic	src/lib/validation.ts	Zod 기반 데이터 검증 스키마
UI	src/containers/admin/SiteEditor.tsx	자동 저장 및 복구 UI 연동
UI	src/containers/admin/OrgChartEditor.tsx	Undo 기능 및 삭제 확인 모달 적용
UI	src/containers/write/WriteFooter.tsx	유효성 검사 및 중복 제출 방지 로직
Config	package.json	zod, react-hook-form, sonner 패키지 추가

---

4. 테스트 결과

• SiteEditor: 필드 수정 중 탭 닫기 시 이탈 방지 팝업 노출 확인.
• SiteEditor: 재접속 시 로컬 스토리지 데이터 복구 팝업 정상 작동 확인.
• OrgChart: 하위 노드 삭제 시 카운트 정상 표시 및 삭제 후 Ctrl+Z 복구 확인.
• Write: 빈 제목 입력 시 '등록' 차단 및 에러 메시지 노출 확인.
• 공통: 등록 버튼 연타 시 Firestore에 1개 문서만 생성되는지 검증 완료.

---