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

프로젝트 : 활동 로그(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) 역할을 합니다. 문제 해결 시 활동 로그를 통해 언제 무엇이 변경되었는지 확인할 수 있습니다.
Made with Slashpage