Cursor AI(커서 AI)로 만든 게시판 웹서비스 - 관리자 페이지 생성

지난 게시판 웹서비스 만들기 - 사용자 프로필 기능 및 Display 명 수정 기능에 이어서 이번에는 관리 기능을 조금 더 확장해 본 경험에 대하여 포스팅합니다. 아예 관리자 페이지를 만들었습니다.

관리자 페이지 생성

실제 서비스를 런칭하고 나면 사용자들이 사용하는 화면 이외에 관리자를 위한 기능이 필요한 순간이 있습니다. 이번 포스팅은 관리자를 위한 관리자 페이지 생성과 관련 기능을 추가해본 내용입니다.

 

게시판 웹서비스의 관리자 페이지 추가 - Cursor AI 프롬프트

사실 관리자 페이지와 기능은 최초에 PRD를 작성할 md 파일에 내용이 포함되어 있었습니다. 이번에 정상적으로 동작하는지 확인하면서 잘 동작하지 않는 부분을 수정하여 적용하였습니다.

👉 결과물: https://board-app--board-app-7d889.us-east4.hosted.app/

 

게시판 앱의 기능 정리

board-app/
├── app/
│   ├── globals.css          # 글로벌 스타일 (복고 감성)
│   ├── layout.tsx           # 루트 레이아웃
│   ├── page.tsx             # 메인 페이지 (글 목록)
│   ├── login/page.tsx       # 로그인 페이지
│   ├── write/page.tsx       # 글쓰기 페이지
│   ├── post/[id]/page.tsx   # 글 상세 페이지
│   ├── edit/[id]/page.tsx   # 글 수정 페이지
│   └── admin/page.tsx       # 관리자 대시보드
├── components/
│   └── Header.tsx           # 헤더 컴포넌트
├── contexts/
│   └── AuthContext.tsx      # 인증 컨텍스트
├── lib/
│   ├── firebase.ts          # Firebase 초기화
│   ├── firestore.ts         # Firestore CRUD 함수
│   └── storage.ts           # Storage 업로드 함수
├── types/
│   └── index.ts             # TypeScript 타입 정의
└── README.md                # 설치 및 실행 가이드

 

게시판 웹서비스의 관리자 페이지 추가 - 개발 확인

프롬프트를 실행하고 로컬에서 몇 번의 시행착오를 통하여 기능을 완성하였습니다.

 

어드민 사용자의 권한을 "Admin"으로 부여

 

Firebase 데이터베이스에서 확인

users 테이블에서 해당 사용자의 role 이 "Admin"으로 적용된 것을 확인하였습니다.

게시판 웹서비스의 관리자 페이지 추가 - 반영 내용

개발 후 git commmit, git push 를 통해서 배포를 완료한 후에 확인하였습니다.

"Admin" 사용자에게만 표시되는 "관리자" 페이지

관리자라고 표시된 부분을 클릭하면 관리자 페이지로 이동할 수 있습니다.

 

관리자 대시보드를 볼 수 있습니다. 관리자 대시보드에서 전체 게시글을 확인할 수 있습니다.

 

첨부한 이미지처럼 숨김 처리된 글을 확인할 수 있습니다.

 

가입 회원도 확인할 수 있습니다. 가입한 회원 중에 "일반회원"과 "관리자"가 구분되어 있는 것을 볼 수 있습니다.

 

약간의 시행착오가 있었지만 무사히 원하는 기능을 완성하였습니다. 진짜... 너무 쉽네요.... ㅠㅠ

이렇게 또 한 발자국 전진하게 되었습니다. 바이브코딩 하이팅!