Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/woorifisa-projects-3rd/quostomize-admin
Quostomize 프로젝트 어드민 FE 프로젝트
https://github.com/woorifisa-projects-3rd/quostomize-admin
Last synced: about 10 hours ago
JSON representation
Quostomize 프로젝트 어드민 FE 프로젝트
- Host: GitHub
- URL: https://github.com/woorifisa-projects-3rd/quostomize-admin
- Owner: woorifisa-projects-3rd
- Created: 2024-11-29T02:15:14.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-01-15T01:28:24.000Z (26 days ago)
- Last Synced: 2025-01-15T02:56:36.854Z (26 days ago)
- Language: JavaScript
- Size: 2.59 MB
- Stars: 0
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📌 Quostomize-admin: 관리자 페이지
## 📝 프로젝트 소개
우리 커스터마이징 서비스(QUOSTOMIZE)를 위한 관리자 페이지입니다.
정보 조회, 알림 메일 발송, 서비스 및 로그 관리, 실시간 모니터링 기능을 통해 서비스를 효율적으로 관리합니다.
### 👉🏻 [관리자 페이지 바로가기](https://quostomize-admin.vercel.app/)
## 🚀 주요 설계 방향
본 프로젝트는 **서비스 안정성**과 **효율성 증대**를 주요 설계 방향으로 두고 개발되었습니다.
- **Authentication + Role 기반 Admin 여부 확인**: 로그인 시 사용자 인증 후, 관리자인지 확인하는 절차를 구현하여 권한을 제어합니다.
- **MiddleWare + API 내부 Role 체크**: 중간 미들웨어에서 API 접근 시 역할을 확인하여 이중 인증을 제공합니다.
- **만료 토큰 갱신 및 예외 처리**: 토큰 기반 인증을 적용하여 토큰 만료 시 갱신하고 예외 처리를 통해 안정적인 인증 프로세스를 유지합니다.
- **역할 기반 접근 제어**: **Admin**만 민감한 데이터에 접근할 수 있도록 하여 보안을 강화했습니다.
## 🔧 주요 기능
- **정보 조회**: 관리자가 다양한 정보(이용자, 카드, 가맹점 등)를 조회할 수 있습니다.
- **알림 메일 발송**: 관리자가 이메일을 통해 알림을 발송할 수 있는 기능입니다.
- **서비스 관리**: 이용자, 카드, 가맹점 관리 기능을 제공합니다.
- **로그 관리**: MDC(Mapped Diagnostic Context) 필터를 적용하여 로그를 순차적으로 관리하고 분석할 수 있습니다.
## 🌟 추가 구현사항
- **모니터링**: Grafana를 통해 시스템 상태를 실시간으로 모니터링하고 문제를 즉시 대응할 수 있도록 합니다.
---
## ⚙️ 기술 스택
## 🌐 배포 파이프라인
관리자 페이지는 Vercel을 이용해 배포를 진행하였습니다. Vercel 대시보드를 통해 배포 상태를 한눈에 확인할 수 있습니다.
**배포 과정**
1. 커밋 푸시: Github에 브랜치로 푸시합니다.
2. Vercel 배포: 메인 브랜치 병합 후 Vercel에 배포합니다.
3. 실시간 업데이트: 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
```
## 📅 진행 일정 (13Days)
- 프로젝트 시작일: 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 개발 팀원
-
-
-
-
-
-
-
-
-
---
## 📝 회고
[팀원 최종 회고 작성](https://ohsanman.notion.site/b60218a5e80f4dc494dd02e4a0a0f976?pvs=4)
---
[요구사항 정의서.pdf](https://github.com/user-attachments/files/18225291/default.pdf)
[서비스 요구사항 정의서.pdf](https://github.com/user-attachments/files/18225293/default.pdf)
[비즈니스프로세스모델.pdf](https://github.com/user-attachments/files/18225295/default.pdf)
[WBS.pdf](https://github.com/user-attachments/files/18225296/WBS.pdf)
[DB 설계서.pdf](https://github.com/user-attachments/files/18225297/DB.pdf)
## 🔗 관련 문서 링크
- [Quostomize-BE](https://github.com/woorifisa-projects-3rd/Quostomize-BE)
- [Quostomize-FE](https://github.com/woorifisa-projects-3rd/Quostomize-FE)
- [HeadlessUI](https://headlessui.com/)