개발 일지
(WEB_PORTAL) 관리자 페이지 첫 CRUD 기능 — 직원 관리 화면
#Next.js#관리자페이지#CRUD
개요
관리자가 소속 인원 정보를 등록·수정·삭제할 수 있는 화면을 구현했습니다. 이 프로젝트에서 처음으로 완성한 관리자 전용 CRUD 화면이라, 이후 다른 관리 화면들의 기본 패턴 역할을 하게 된 기능이기도 합니다.
핵심 구현 포인트
1. 조회·수정·삭제 API
목록 조회, 부분 수정, 삭제를 각각 담당하는 API를 구성했습니다. 목록에는 사번·이름·역할·연차 현황처럼 관리자가 자주 확인하는 정보를 함께 내려주도록 해서, 별도 화면 이동 없이 한 화면에서 대부분의 관리 업무가 끝나도록 했습니다.
2. 추가·수정 모달
새 인원을 등록하거나 기존 정보를 수정할 때 페이지 전체를 이동하지 않고, 모달 창에서 바로 처리할 수 있도록 구성했습니다.
3. 자기 자신 삭제 방지
관리자가 실수로 로그인된 자기 자신의 계정을 삭제하는 상황을 막기 위해, 현재 로그인한 계정과 삭제 대상이 같으면 삭제 버튼 자체를 비활성화하도록 처리했습니다.
회고
- 관리자 화면은 "실수했을 때 되돌리기 어려운 동작"이 많아서, 기능 구현 자체보다 이런 안전장치를 먼저 챙기는 게 더 중요하다는 걸 느꼈습니다. 자기 자신을 삭제하지 못하게 막는 것처럼 사소해 보이는 제약이, 실제 운영에서는 가장 자주 발생할 수 있는 사고를 막아줍니다.
- 이 화면에서 잡은 "목록 + 모달 CRUD" 패턴을 이후 다른 관리 기능에도 그대로 재사용하면서, 매번 구조를 새로 고민하지 않아도 되는 이점을 봤습니다.
#Next.js#관리자페이지#CRUD