우리 커스터마이징 서비스(QUOSTOMIZE)를 위한 관리자 페이지입니다.
정보 조회, 알림 메일 발송, 서비스 및 로그 관리, 실시간 모니터링 기능을 통해 서비스를 효율적으로 관리합니다.
👉🏻 관리자 페이지 바로가기
본 프로젝트는 서비스 안정성과 효율성 증대를 주요 설계 방향으로 두고 개발되었습니다.
- Authentication + Role 기반 Admin 여부 확인: 로그인 시 사용자 인증 후, 관리자인지 확인하는 절차를 구현하여 권한을 제어합니다.
- MiddleWare + API 내부 Role 체크: 중간 미들웨어에서 API 접근 시 역할을 확인하여 이중 인증을 제공합니다.
- 만료 토큰 갱신 및 예외 처리: 토큰 기반 인증을 적용하여 토큰 만료 시 갱신하고 예외 처리를 통해 안정적인 인증 프로세스를 유지합니다.
- 역할 기반 접근 제어: Admin만 민감한 데이터에 접근할 수 있도록 하여 보안을 강화했습니다.
-
정보 조회: 관리자가 다양한 정보(이용자, 카드, 가맹점 등)를 조회할 수 있습니다.
-
알림 메일 발송: 관리자가 이메일을 통해 알림을 발송할 수 있는 기능입니다.
-
서비스 관리: 이용자, 카드, 가맹점 관리 기능을 제공합니다.
-
로그 관리: MDC(Mapped Diagnostic Context) 필터를 적용하여 로그를 순차적으로 관리하고 분석할 수 있습니다.
- 모니터링: Grafana를 통해 시스템 상태를 실시간으로 모니터링하고 문제를 즉시 대응할 수 있도록 합니다.
관리자 페이지는 Vercel을 이용해 배포를 진행하였습니다. Vercel 대시보드를 통해 배포 상태를 한눈에 확인할 수 있습니다.
배포 과정
- 커밋 푸시: Github에 브랜치로 푸시합니다.
- Vercel 배포: 메인 브랜치 병합 후 Vercel에 배포합니다.
- 실시간 업데이트: Vercel을 통해 관리자 사이트가 즉시 업데이트됩니다.
프론트엔드
root/
├── app/
│ ├── (nav)/
│ │ ├── cards/
│ │ ├── franchises/
│ │ ├── information/
│ │ ├── members/
│ │ ├── notifications/
│ │ ├── setting/
│ │ └── layout.jsx
│ └── api/
│ ├── auth/
│ │ ├── [...nestauth]/
│ │ └── logout/
│ ├── cards/
│ ├── mail/
│ ├── manager/
│ ├── members/
│ └── setting/
├── components/
│ ├── button/
│ ├── modal/
│ ├── sideNav/
│ ├── spinner/
│ └── table/
├── public/
│ ├── fonts/
│ ├── icons/
│ └── images/
├── service/
│ └── apiMethodList.js
├── jsconfig.json
├── next.config.mjs
├── tailwind.config.js
├── middleware.js
├── .env.local
├── package.json
├── pnpm-lock.yaml
└── postcss.config.js
- 프로젝트 시작일: 2024.11.27.
- 프로젝트 종료일: 2024.12.09.
| 카테고리 | 라이브러리 | 설명 |
|---|---|---|
| 프레임워크 & 코어 | Next.js (v14.2.19) | React 기반의 풀스택 웹 프레임워크로 SSR 및 SSG 지원 |
| React (v18.2.0) | 선언형 사용자 인터페이스를 개발하기 위한 라이브러리 | |
| UI & 아이콘 | Ant Design (v5.22.3) | 웹 애플리케이션 UI 컴포넌트 라이브러리, 빠르고 일관된 UI 구축 지원 |
| Headless UI (v2.2.0) | 접근성 표준을 준수하는 UI 컴포넌트 라이브러리, 디자인 커스터마이징 용이 | |
| Ant Design Icons (v5.5.2) | Ant Design 스타일의 아이콘 세트 제공 | |
| Material UI Icons (v6.1.9) | Material Design 기반의 아이콘 세트 제공 | |
| React Icons (v5.4.0) | 다양한 스타일의 아이콘 라이브러리 모음 제공 | |
| 날짜 & 시간 | JS-Joda (v5.6.3) | 불변성을 갖춘 날짜와 시간 처리 라이브러리 |
| date-fns (v4.1.0) | JavaScript 날짜 처리 라이브러리, 간단하고 직관적인 API 제공 | |
| 인증 | NextAuth.js (v5.0.0-beta.25) | OAuth, Credentials 등 다양한 인증 방식을 간편하게 구현 |
| 추가 기능 | React Paginate (v8.2.0) | 효율적인 페이지네이션 기능을 제공하는 React 컴포넌트 |
| React Quill (v3.3.3) | 리치 텍스트 편집기 라이브러리, 알림메일 입력 기능 구현 |
커밋 컨벤션
- {Tag}/{작업 내용}
Feat/input : 비밀번호 숨김 처리
- 커밋 규칙
| Tag Name | Description |
|---|---|
| Feat | 새로운 기능을 추가 |
| Fix | 버그 수정 |
| Design | CSS 등 사용자 UI 디자인 변경 |
| !BREAKING CHANGE | 커다란 API 변경의 경우 |
| !HOTFIX | 치명적인 버그 긴급 수정 |
| Style | 코드 포맷 변경, 세미콜론 누락 등 |
| Refactor | 프로덕션 코드 리팩토링 |
| Comment | 주석 추가 및 변경 |
| Docs | 문서 수정 |
| Test | 테스트 코드 추가 또는 수정 |
| Chore | 빌드 업무 수정 및 패키지 관리 업데이트 |
| Rename | 파일/폴더명 수정 |
| Remove | 파일/폴더 삭제 |
|
|
|
| 기남석 | 김영성 | 김현우 |
| 총괄 팀장 Frontend 팀장 FullStack 개발 |
FullStack 개발 팀원 | Backend 팀장 FullStack 개발 |
|
프로젝트 세팅 SMTP 기반 이메일 전송 프론트 인증/인가 |
정보 조회 페이지 API 연결 |
- - - |
|
|
|
| 방성경 | 오선민 | 홍찬의 |
| FullStack 개발 팀원 | PM FullStack 개발 팀원 |
FullStack 개발 팀원 |
|
- - - |
- - - |
- - - |