# 프로젝트 : 인증(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}` - 사용자 삭제

For the site tree, see the [root Markdown](https://slashpage.com/bkend.md).