Just describe what you need. Bkend builds it for you 🚀 
Get Started!
Sign In

프로젝트 : 인증(Auth)

개요

Auth 페이지는 프로젝트의 사용자 인증 및 사용자 관리를 담당하는 페이지입니다. 사용자 목록 조회, 사용자 상세 정보 확인, 사용자 삭제 등의 기능을 제공합니다.
경로: /org/{orgSlug}/project/{projectSlug}/auth

주요 기능

1. Users 탭

사용자 관리 탭에서는 프로젝트에 가입한 모든 사용자를 조회하고 관리할 수 있습니다.

통계 카드

•
전체 사용자: 프로젝트에 가입한 총 사용자 수
•
활성 사용자: 이메일 인증을 완료했거나 로그인 이력이 있는 사용자 수

사용자 테이블

다음 정보를 테이블 형태로 표시합니다:
컬럼
설명
정렬 가능
이메일
사용자의 이메일 주소
✓
이름
사용자 이름 및 닉네임 (@닉네임 형태)
✗
역할
사용자 역할 (예: user, admin)
✗
상태
인증 상태 (인증됨/미인증) 및 차단 상태
✗
생성일
계정 생성 날짜
✓
상태 배지:
•
인증됨 (초록색): 이메일 인증 완료
•
미인증 (회색): 이메일 인증 미완료
•
차단됨 (빨간색): 관리자에 의해 차단된 사용자

검색 및 필터

•
검색: 이메일, 이름, 닉네임으로 실시간 검색 (클라이언트 사이드)
•
정렬: 이메일, 생성일, 마지막 로그인 기준으로 오름차순/내림차순 정렬 가능
•
새로고침: 우측 상단 "새로고침" 버튼으로 최신 데이터 갱신

페이지네이션

•
페이지당 10명씩 표시
•
"이전", "다음" 버튼으로 페이지 이동
•
현재 표시 범위 표시 (예: "1에서 10까지 (전체 25명)")

2. Providers 탭

기본 제공:
•
Email: 이메일 기반 인증
향후 지원 예정:
•
Google: Google OAuth 로그인
•
GitHub: GitHub OAuth 로그인
•
Apple: Apple 로그인

3. Templates 탭 (준비 중)

이메일 템플릿 커스터마이징 탭입니다.
편집 가능한 템플릿:
•
회원가입 확인: 새 사용자에게 이메일 확인 링크 발송
•
사용자 초대: 초대된 사용자에게 발송
•
매직 링크: 비밀번호 없는 로그인 링크 발송
•
비밀번호 재설정: 비밀번호 재설정 링크 발송
•
이메일 변경: 이메일 변경 확인 링크 발송

4. Settings 탭 (준비 중)

인증 고급 설정 탭입니다.
향후 설정 가능한 항목:

일반 설정

•
이메일 확인 필요 여부
•
이메일 변경 시 이중 확인
•
수동 계정 연결 허용

비밀번호 설정

•
최소 길이
•
필수 문자 (대소문자, 숫자, 특수문자)
•
유출 비밀번호 확인

세션 설정

•
JWT 만료 시간 (기본: 3600초/1시간)
•
리프레시 토큰 만료 (기본: 604800초/7일)
•
단일 세션 강제

사용 방법

사용자 목록 조회하기

1.
Auth 페이지 접속
2.
기본적으로 "사용자" 탭이 활성화됨
3.
통계 카드에서 전체/활성 사용자 수 확인
4.
테이블에서 전체 사용자 목록 확인

사용자 검색하기

1.
검색창에 이메일, 이름 또는 닉네임 입력
2.
실시간으로 검색 결과 필터링됨
3.
검색어 우측 X 버튼으로 검색 초기화

사용자 정렬하기

1.
"정렬" 버튼 클릭
2.
정렬 기준 선택 (이메일/생성일/마지막 로그인)
3.
선택한 기준으로 자동 정렬됨
4.
같은 기준 재선택 시 오름차순/내림차순 토글
또는 테이블 헤더의 "이메일", "생성일" 클릭으로 직접 정렬 가능

사용자 상세 정보 보기

1.
사용자 행 우측 점 3개 (⋯) 버튼 클릭
2.
"상세 보기" 선택
3.
우측 슬라이드 패널에 상세 정보 표시
표시되는 정보:
•
기본 정보:
◦
User ID (복사 가능)
◦
이름
◦
닉네임
◦
이메일 (인증 상태 배지 포함)
◦
역할
◦
휴대폰 번호
•
타임스탬프:
◦
계정 생성일
◦
마지막 로그인
◦
이메일 인증 날짜
•
메타데이터 (있는 경우):
◦
자기소개
•
소셜 링크 (있는 경우):
◦
GitHub
◦
Twitter
◦
LinkedIn
•
연결된 계정 (있는 경우):
◦
제공자 (provider)
◦
계정 ID
◦
계정 유형

사용자 삭제하기

1.
사용자 행 우측 점 3개 (⋯) 버튼 클릭
2.
"사용자 삭제" 선택
3.
경고 메시지 확인:
•
계정 영구 삭제
•
모든 활성 세션 무효화
•
모든 사용자 데이터 제거
•
되돌릴 수 없음
4.
확인을 위해 사용자 이메일 입력
5.
"삭제" 버튼 클릭 (이메일 일치 시 활성화됨)

데이터 새로고침하기

1.
우측 상단 "새로고침" 버튼 클릭
2.
최신 사용자 데이터 다시 로드됨

기술적 특징

데이터 소스

•
API 엔드포인트: Enduser Data API 사용
•
캐싱: TanStack Query를 통한 자동 캐싱 및 갱신
•
페이지네이션: 서버 사이드 페이지네이션 (페이지당 10개)
•
검색: 클라이언트 사이드 필터링

성능 최적화

•
로딩 상태: 스켈레톤 UI 표시
•
에러 핸들링: 사용자 친화적 에러 메시지 및 재시도 옵션
•
데이터 무효화: 사용자 삭제 시 자동으로 캐시 무효화 및 재조회

관련 API

•
GET /api/projects/{projectId}/enduser-data/stats - 사용자 통계 조회
•
GET /api/projects/{projectId}/enduser-data/users - 사용자 목록 조회 (페이지네이션)
•
DELETE /api/users/{userId} - 사용자 삭제
Made with Slashpage