# 프로젝트 : 활동 로그(Activities)

## 개요

Activities 페이지는 프로젝트에서 발생한 모든 활동(Activity)을 시간순으로 확인하고, 엔티티 타입과 액션 타입으로 필터링하여 조회할 수 있는 활동 로그 페이지입니다. 데이터베이스 테이블 생성, 환경 변경, 멤버 초대 등 프로젝트의 모든 중요한 이벤트가 기록됩니다.

**경로**: `/org/{orgSlug}/project/{projectSlug}/activities`

## 주요 기능

### 1. 활동 검색

**검색 기능**:

- 메시지 내용으로 활동 검색

- 실시간 필터링 (입력하는 즉시 결과 반영)

- 대소문자 구분 없는 검색

**검색창 위치**: 필터 카드 상단 좌측
**플레이스홀더**: "메시지 검색..."

### 2. 필터링 시스템

프로젝트 활동을 세밀하게 필터링할 수 있는 3가지 필터를 제공합니다:

### 엔티티 타입 필터

활동이 발생한 대상(엔티티)별로 필터링:

- **모든 엔티티** (기본값)

- **프로젝트**: 프로젝트 설정 관련 활동

- **초대**: 멤버 초대 관련 활동

※ 현재 Beta에서는 조직, 프로젝트, 멤버 관련 활동이 표시됩니다.

### 액션 타입 필터

수행된 작업 유형별로 필터링:

- **모든 액션** (기본값)

- **생성**: 새로운 리소스 생성

- **수정**: 기존 리소스 변경

- **삭제**: 리소스 삭제

- **배포**: 환경 배포 작업

### 새로고침 버튼

- 활동 목록을 수동으로 새로고침

- 새로고침 중에는 아이콘이 회전하는 애니메이션 표시

- 최신 활동 내역을 즉시 반영

### 3. 활동 목록 표시

**카드 구조**:

각 활동 카드에는 다음 정보가 표시됩니다:

- **엔티티 아이콘**: 원형 배경에 엔티티 타입을 나타내는 아이콘

- **액션 아이콘**: 수행된 작업을 나타내는 색상 아이콘

- **이벤트 타입**: 활동 유형 (예: "테이블 생성", "환경 수정")

- **메시지**: 활동에 대한 상세 설명

- **엔티티 배지**: 활동 대상 엔티티 타입 표시

- **타임스탬프**: 활동 발생 시간 (상대 시간 표시)

**시각적 특징**:

- 카드에 마우스 오버 시 배경색 변경 (호버 효과)

- 스크롤 가능한 목록 영역 (최대 높이: 500px)

- 구분선으로 각 활동 구분

### 4. 페이지네이션

**설정**:

- 페이지당 활동 개수: 20개

- 자동 페이지 번호 계산

- 필터 변경 시 첫 페이지로 자동 이동

**페이지 네비게이션**:

- 현재 페이지 / 총 페이지 수 표시 (예: "1 / 5 페이지")

- 이전 페이지 버튼 (ChevronLeft 아이콘)

- 다음 페이지 버튼 (ChevronRight 아이콘)

- 첫 페이지 또는 마지막 페이지에서 해당 버튼 비활성화

### 5. 실시간 카운터

**표시 정보**:

- 필터링된 활동의 총 개수

- 카드 설명 영역에 표시 (예: "총 47개의 활동")

## 활동 유형

### 엔티티 타입별 아이콘

| 엔티티 | 아이콘 | 설명 |
| --- | --- | --- |
| 조직 (organization) | Building2 | 조직 관련 활동 |
| 프로젝트 (project) | FolderKanban | 프로젝트 설정 변경 |
| 초대 (invitation) | UserPlus | 멤버 초대 관련 |

### 액션 타입별 아이콘 및 색상

| 액션 | 아이콘 | 색상 | 설명 |
| --- | --- | --- | --- |
| 생성 (created) | Plus | 초록색 (success) | 새 리소스 생성 |
| 수정 (updated) | Pencil | 파란색 (info) | 기존 리소스 수정 |
| 삭제 (deleted) | Trash2 | 빨간색 (error) | 리소스 삭제 |
| 수락 (accepted) | CheckCircle | 초록색 (success) | 초대 수락 |
| 취소 (revoked) | XCircle | 주황색 (warning) | 초대 취소 |

### 주요 이벤트 타입

**조직 관련**:

- `organization:created`: 조직 생성

- `organization:updated`: 조직 수정

- `organization:deleted`: 조직 삭제

**멤버 관련**:

- `member:invited`: 멤버 초대

- `member:joined`: 멤버 가입

- `member:removed`: 멤버 제거

- `member:role_changed`: 멤버 역할 변경

**프로젝트 관련**:

- `project:created`: 프로젝트 생성

- `project:updated`: 프로젝트 수정

- `project:deleted`: 프로젝트 삭제

## 타임스탬프 표시

활동 발생 시간은 상대적 시간으로 표시됩니다:

- **1분 이내**: "방금 전"

- **1시간 이내**: "N분 전" (예: "15분 전")

- **24시간 이내**: "N시간 전" (예: "3시간 전")

- **7일 이내**: "N일 전" (예: "2일 전")

- **7일 이후**: 전체 날짜와 시간 (예: "2025-01-15 14:30")

## 사용 방법

### 활동 로그 확인하기

1. 프로젝트 사이드바에서 "활동 로그" 메뉴 클릭

2. Activities 페이지에서 최근 활동 목록 확인

3. 스크롤하여 더 많은 활동 조회

### 특정 활동 검색하기

1. 검색창에 찾고자 하는 키워드 입력

2. 메시지에 해당 키워드가 포함된 활동만 필터링되어 표시

3. 검색어 삭제 시 전체 목록으로 복원

### 엔티티별 활동 보기

1. "엔티티 필터" 드롭다운 클릭

2. 원하는 엔티티 타입 선택 (예: "테이블")

3. 해당 엔티티 관련 활동만 필터링되어 표시

4. "모든 엔티티" 선택 시 전체 목록으로 복원

### 액션별 활동 보기

1. "액션 필터" 드롭다운 클릭

2. 원하는 액션 타입 선택 (예: "생성")

3. 해당 액션 관련 활동만 필터링되어 표시

4. "모든 액션" 선택 시 전체 목록으로 복원

### 복합 필터 사용하기

1. 엔티티 필터와 액션 필터를 동시에 적용 가능

2. 검색어와 필터를 함께 사용 가능

3. 예: "테이블" + "생성" + "user" 검색 = user 관련 테이블 생성 활동만 표시

### 최신 활동 확인하기

1. 새로고침 버튼 (원형 화살표 아이콘) 클릭

2. 최신 활동이 목록에 추가됨

3. 새로고침 중에는 아이콘이 회전하며 로딩 상태 표시

### 페이지 이동하기

1. 목록 하단의 페이지 네비게이션 확인

2. "< (이전)" 버튼으로 이전 페이지 이동

3. "> (다음)" 버튼으로 다음 페이지 이동

4. 현재 페이지 번호와 총 페이지 수 확인

## 환경 선택

## 기술적 세부사항

### 데이터 페칭

- **API 엔드포인트**: `/stats/projects/{projectId}/activities`

- **요청 파라미터**:

    - `environment`: 환경 이름 (필수)

    - `limit`: 가져올 활동 개수 (기본값: 100개)

- **캐싱**: TanStack Query를 통한 자동 캐싱 및 재검증

### 필터링 로직

1. **검색 필터**: 메시지 텍스트에 검색어 포함 여부 (대소문자 구분 없음)

2. **엔티티 필터**: 정확한 엔티티 타입 일치

3. **액션 필터**: 정확한 액션 타입 일치

4. **AND 조건**: 모든 필터는 AND 조건으로 결합됨

### 페이지네이션

- **클라이언트 사이드 페이지네이션**: 100개의 활동을 불러와서 클라이언트에서 페이징 처리

- **페이지 크기**: 20개

- **총 페이지**: `Math.ceil(filteredActivities.length / 20)`

---

**참고**: Activities 페이지는 프로젝트의 모든 변경 사항을 추적하는 감사 로그(audit log) 역할을 합니다. 문제 해결 시 활동 로그를 통해 언제 무엇이 변경되었는지 확인할 수 있습니다.

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