관리자 대시보드 통계 상세 UX 개선

This commit is contained in:
2026-07-08 14:20:24 +09:00
parent eb840b4224
commit 14c7245f06
10 changed files with 547 additions and 607 deletions

View File

@@ -0,0 +1,2 @@
ALTER TABLE analytics_active_sessions
ADD COLUMN IF NOT EXISTS ip_address TEXT NOT NULL DEFAULT '';

View File

@@ -1,6 +1,6 @@
# 배포 가이드 # 배포 가이드
> 로컬 기준 v1.10.59에서 `npm run lint`와 `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다. > 로컬 기준 v1.10.64에서 `npm run lint`와 `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
## 빌드 유형 ## 빌드 유형
@@ -263,7 +263,7 @@ docker compose --env-file .env.production up -d --build
- `site_analytics_daily`, `post_analytics_daily`: 사이트 전체 방문자와 게시물별 조회수의 누적 원본이므로 자동 삭제하지 않는다. - `site_analytics_daily`, `post_analytics_daily`: 사이트 전체 방문자와 게시물별 조회수의 누적 원본이므로 자동 삭제하지 않는다.
- `analytics_traffic_daily`: 유입원·디바이스·키워드 축약 집계 원본이므로 자동 삭제하지 않는다. - `analytics_traffic_daily`: 유입원·디바이스·키워드 축약 집계 원본이므로 자동 삭제하지 않는다.
- `analytics_daily_visitors`: 일별 중복 방문 제거용 해시만 담으므로 32일 초과 행은 통계 수집·관리자 조회 흐름에서 주기적으로 삭제한다. - `analytics_daily_visitors`: 일별 중복 방문 제거용 해시만 담으므로 32일 초과 행은 통계 수집·관리자 조회 흐름에서 주기적으로 삭제한다.
- `analytics_active_sessions`: 현재 접속자 목록용 임시 데이터이며 90초 초과 행은 조회·수집 시 삭제한다. - `analytics_active_sessions`: 현재 접속자 목록용 임시 데이터이며 90초 초과 행은 조회·수집 시 삭제한다. `ip_address`는 현재 접속자 화면에서 `session_hash` 앞자리 SID와 함께 보조 식별 정보로 표시한다.
- 관리자 대시보드 차트는 최대 365일 범위를 조회하며, 차트 범위를 넘는 집계도 누적 통계 원본으로 보관한다. - 관리자 대시보드 차트는 최대 365일 범위를 조회하며, 차트 범위를 넘는 집계도 누적 통계 원본으로 보관한다.
- 관리자 통계 집계 시작일은 `ANALYTICS_COLLECTED_SINCE` 환경 변수로 설정한다. 기본값은 `2026-06-01`이다. - 관리자 통계 집계 시작일은 `ANALYTICS_COLLECTED_SINCE` 환경 변수로 설정한다. 기본값은 `2026-06-01`이다.
- 관리자 세션으로 공개 글·페이지를 확인하는 요청은 통계 수집에서 제외된다. 운영자가 직접 방문자처럼 검증해야 할 때는 관리자 로그아웃 또는 별도 브라우저 프로필을 사용한다. - 관리자 세션으로 공개 글·페이지를 확인하는 요청은 통계 수집에서 제외된다. 운영자가 직접 방문자처럼 검증해야 할 때는 관리자 로그아웃 또는 별도 브라우저 프로필을 사용한다.

View File

@@ -1,3 +1,21 @@
## 2026-07-08 v1.10.62 — 대시보드 자동 갱신은 사용자의 선택을 덮어쓰지 않는다
대시보드는 30초마다 통계를 다시 조회하지만, 조회 결과가 바뀔 때마다 기본 날짜 선택 로직을 다시 실행하면 사용자가 과거 날짜를 보고 있는 중에도 오늘 통계로 되돌아간다. 차트 막대 클릭은 사용자의 명시 선택이므로 자동 갱신보다 우선해야 한다. 따라서 기본 선택은 초기 진입과 기간 탭 변경 때만 수행하고, 자동 갱신은 현재 선택 범위를 유지한 채 값만 새로 받아오도록 정리한다.
상세 패널 재조회 중 기존 콘텐츠를 로딩 문구 하나로 교체하면 패널 높이가 줄어 화면 위치가 흔들린다. 운영자가 대시보드를 켜둔 상태에서 읽고 있는 위치가 유지되어야 하므로, 재조회 중에는 기존 내용을 그대로 두고 새 응답이 도착했을 때 값만 바꾼다.
## 2026-07-08 v1.10.61 — 현재 접속자 식별은 IP와 세션을 함께 본다
현재 접속자 화면에서 IP만 표시하면 같은 공유망 방문자가 한 사람처럼 보이거나, 같은 사람이 네트워크를 바꾸면 다른 사람처럼 보일 수 있다. 반대로 세션만 표시하면 운영자가 같은 네트워크에서 들어온 방문자인지 빠르게 판단하기 어렵다. 따라서 실시간 세션에는 요청 IP를 보조로 저장하고, 화면에는 IP와 `session_hash` 앞자리 SID를 함께 표시한다. 원문 클라이언트 세션 ID는 노출하지 않고, 방문자 통계 고유성은 기존 해시 기반 집계를 유지한다.
인기 게시물과 인기 페이지는 제목이 운영 판단의 핵심이므로 좌우 2열 카드보다 세로 목록이 더 적합하다. 조회·읽음·최근 30일 조회·작성일·스크롤 도달은 보조 지표라 한 줄 압축 표기로 정리해 제목 폭을 우선 확보한다.
## 2026-07-08 v1.10.60 — 대시보드 통계 상세는 모달보다 본문 패널로 다룬다
통계 차트 막대 클릭 시 모달을 띄우면 하단의 유입·인기 콘텐츠 카드가 어떤 기간을 기준으로 하는지 분리되어 보이고, 일간 선택에서도 오늘인지 선택 날짜인지 해석이 흐려질 수 있다. 따라서 차트는 기간 선택 도구로 두고, 선택 결과는 하단 **선택한 기간 상세** 패널에 직접 표시한다.
검색 유입 키워드는 대형 검색엔진이 referrer query를 대부분 전달하지 않아 자체 통계만으로 안정적으로 제공하기 어렵다. 빈 키워드 영역은 기능 오류처럼 보일 수 있으므로 대시보드에서는 제거하고, 운영 판단에 더 안정적인 유입원·디바이스·인기 게시물·인기 페이지 중심으로 정리한다.
## 2026-07-08 v1.10.56 — 글쓰기 미디어 선택은 하나의 서버 페이지 흐름으로 맞춘다 ## 2026-07-08 v1.10.56 — 글쓰기 미디어 선택은 하나의 서버 페이지 흐름으로 맞춘다
본문 이미지 삽입 모달은 이미 관리자 미디어 API의 페이지 응답과 검색을 사용하지만, 대표 이미지 선택 모달은 전체 미디어 배열을 받은 뒤 클라이언트에서 원본 이미지만 걸러 쓰는 레거시 방식이 남아 있었다. 미디어가 많아질수록 두 선택 화면의 성능과 검색 결과가 달라질 수 있으므로 대표 이미지 선택도 같은 `/admin/api/media?paged=1&tab=library` 흐름으로 통일했다. 본문 이미지 삽입 모달은 이미 관리자 미디어 API의 페이지 응답과 검색을 사용하지만, 대표 이미지 선택 모달은 전체 미디어 배열을 받은 뒤 클라이언트에서 원본 이미지만 걸러 쓰는 레거시 방식이 남아 있었다. 미디어가 많아질수록 두 선택 화면의 성능과 검색 결과가 달라질 수 있으므로 대표 이미지 선택도 같은 `/admin/api/media?paged=1&tab=library` 흐름으로 통일했다.

View File

@@ -87,6 +87,7 @@
| db/migrations/063_site_settings_upload_limits.sql | 사이트 설정 관리자 업로드 제한 컬럼 추가 | | db/migrations/063_site_settings_upload_limits.sql | 사이트 설정 관리자 업로드 제한 컬럼 추가 |
| db/migrations/064_posts_admin_pinned.sql | 관리자 글 목록 전용 상단 고정 컬럼·정렬 인덱스 추가 | | db/migrations/064_posts_admin_pinned.sql | 관리자 글 목록 전용 상단 고정 컬럼·정렬 인덱스 추가 |
| db/migrations/065_public_search_index.sql | 공개 통합 검색용 `search_text` 컬럼·자동 갱신 트리거·`pg_trgm` GIN 인덱스 추가 | | db/migrations/065_public_search_index.sql | 공개 통합 검색용 `search_text` 컬럼·자동 갱신 트리거·`pg_trgm` GIN 인덱스 추가 |
| db/migrations/066_analytics_active_session_ip.sql | 실시간 접속 세션 IP 표시용 `analytics_active_sessions.ip_address` 컬럼 추가 |
## 서버 미들웨어 ## 서버 미들웨어
@@ -189,7 +190,7 @@
| 파일 | 화면 | | 파일 | 화면 |
|------|------| |------|------|
| pages/admin/index.vue | 대시보드(상단 요약: 현재 접속자·오늘 접속자·게시물 수, 일일·주간·월간·년간 선택형 방문자수·평균 체류·50% 스크롤 차트, 차트 막대 클릭 날짜·구간 상세 모달, 방문자 유입 정보·디바이스·유입 키워드, 접속자 목록, 인기 게시물 월간 조회수·작성일, 인기 페이지 참여 지표) | | pages/admin/index.vue | 대시보드(상단 요약: 현재 접속자·오늘 접속자·게시물 수, 일일·주간·월간·년간 선택형 방문자수·평균 체류·50% 스크롤 차트, 차트 막대 클릭 시 하단 선택 기간 상세 갱신, 자동 갱신 중 선택 기간 유지, 선택 기간 기준 왼쪽 인기 게시물·인기 페이지와 오른쪽 유입원·디바이스, IP·SID 포함 접속자 목록) |
| pages/admin/login.vue | 관리자 로그인, 일반 로그인과 같은 다크 인증 스타일·우측 배치 및 내부 오른쪽 정렬 폼, 이메일·비밀번호 모두 입력 시에만 제출 버튼 활성 | | pages/admin/login.vue | 관리자 로그인, 일반 로그인과 같은 다크 인증 스타일·우측 배치 및 내부 오른쪽 정렬 폼, 이메일·비밀번호 모두 입력 시에만 제출 버튼 활성 |
| pages/admin/posts/index.vue | 글 목록, 본문 없는 `/admin/api/posts?paged=true` 페이지 응답 사용, 서버 검색·필터(상태·검색형 태그 combobox·추천·정렬)와 번호형 페이지네이션, 관리자 전용 상단 고정 배지·정렬·행 메뉴 토글, 헤더 우측 «새 글» 배치, 예약/초안/공개/멤버십/비공개 텍스트 상태, 추천 표시와 제목 사이 `featuredImageThumbnail` 우선 대표 이미지 썸네일, 제목 옆 댓글 수, 제목 아래 주소·공개 보기 hover 아이콘, 별도 조회수 열의 누적 조회수·통계 모달 버튼, 적용 태그 전체 색상 배지, 화면 기준 행 more vert 메뉴(고정 전용 API·추천 전용 API·삭제) | | pages/admin/posts/index.vue | 글 목록, 본문 없는 `/admin/api/posts?paged=true` 페이지 응답 사용, 서버 검색·필터(상태·검색형 태그 combobox·추천·정렬)와 번호형 페이지네이션, 관리자 전용 상단 고정 배지·정렬·행 메뉴 토글, 헤더 우측 «새 글» 배치, 예약/초안/공개/멤버십/비공개 텍스트 상태, 추천 표시와 제목 사이 `featuredImageThumbnail` 우선 대표 이미지 썸네일, 제목 옆 댓글 수, 제목 아래 주소·공개 보기 hover 아이콘, 별도 조회수 열의 누적 조회수·통계 모달 버튼, 적용 태그 전체 색상 배지, 화면 기준 행 more vert 메뉴(고정 전용 API·추천 전용 API·삭제) |
| pages/admin/posts/new.vue | 글 작성, Ghost 스타일 작성 폼, 초안 `POST` 디바운스 자동 저장·첫 저장 준비 오버레이·첫 생성 중 추가 입력 PUT 반영·이탈 직전 플러시, 저장 토스트 | | pages/admin/posts/new.vue | 글 작성, Ghost 스타일 작성 폼, 초안 `POST` 디바운스 자동 저장·첫 저장 준비 오버레이·첫 생성 중 추가 입력 PUT 반영·이탈 직전 플러시, 저장 토스트 |

View File

@@ -545,7 +545,7 @@ components/content/
| page_analytics_daily | day, page_id, views, visitors, engaged_views, total_engaged_seconds, scroll_25~100 | 페이지 일별 조회·방문자·스크롤 구간 | | page_analytics_daily | day, page_id, views, visitors, engaged_views, total_engaged_seconds, scroll_25~100 | 페이지 일별 조회·방문자·스크롤 구간 |
| analytics_traffic_daily | day, source_group, source_name, device_type, os_name, keyword, page_views, visitors | 유입원·디바이스·키워드 일별 축약 집계 | | analytics_traffic_daily | day, source_group, source_name, device_type, os_name, keyword, page_views, visitors | 유입원·디바이스·키워드 일별 축약 집계 |
| analytics_daily_visitors | day, scope(`site`/`post`/`page`/`traffic`), post_id?, page_id?, visitor_hash, source_group?, source_name?, device_type?, os_name?, keyword? | 일별 방문자 해시 등록(중복 방문 제거용) | | analytics_daily_visitors | day, scope(`site`/`post`/`page`/`traffic`), post_id?, page_id?, visitor_hash, source_group?, source_name?, device_type?, os_name?, keyword? | 일별 방문자 해시 등록(중복 방문 제거용) |
| analytics_active_sessions | session_hash, user_id?, path, post_id?, post_slug, page_id?, page_slug, duration_seconds, max_scroll_ratio, last_seen_at | 실시간 접속 세션(TTL 90초) | | analytics_active_sessions | session_hash, user_id?, path, post_id?, post_slug, page_id?, page_slug, ip_address, duration_seconds, max_scroll_ratio, last_seen_at | 실시간 접속 세션(TTL 90초) |
- 추적 대상: 공개 경로만. `/admin`, `/signin`, `/signup`, `/forgot-password`, `/settings`는 제외. - 추적 대상: 공개 경로만. `/admin`, `/signin`, `/signup`, `/forgot-password`, `/settings`는 제외.
- 관리자 세션(`sori_admin_session`)이 있는 요청은 공개 경로라도 페이지뷰, 게시물 읽음, heartbeat 체류·스크롤, 실시간 접속자 집계에 포함하지 않는다. - 관리자 세션(`sori_admin_session`)이 있는 요청은 공개 경로라도 페이지뷰, 게시물 읽음, heartbeat 체류·스크롤, 실시간 접속자 집계에 포함하지 않는다.
@@ -554,16 +554,15 @@ components/content/
- 검색 유입은 네이버·다음·구글·줌·빙을 우선 분류하고, SNS 유입은 카카오톡·페이스북·인스타그램·트위터/X·유튜브를 우선 분류한다. 검색 키워드는 referrer query에 남아 있는 경우만 표시한다. - 검색 유입은 네이버·다음·구글·줌·빙을 우선 분류하고, SNS 유입은 카카오톡·페이스북·인스타그램·트위터/X·유튜브를 우선 분류한다. 검색 키워드는 referrer query에 남아 있는 경우만 표시한다.
- 게시물 `reads`는 클라이언트에서 15초 이상 체류·50% 이상 스크롤 후 별도 전송. - 게시물 `reads`는 클라이언트에서 15초 이상 체류·50% 이상 스크롤 후 별도 전송.
- `POST /api/analytics/heartbeat`는 20초 간격으로 체류시간·스크롤·현재 경로를 전송한다. 로그인 사용자는 서버 세션으로 `user_id`를 연결한다. - `POST /api/analytics/heartbeat`는 20초 간격으로 체류시간·스크롤·현재 경로를 전송한다. 로그인 사용자는 서버 세션으로 `user_id`를 연결한다.
- 관리자 대시보드는 `GET /admin/api/analytics/realtime`으로 현재 접속자 목록(닉네임·아바타·게시물 제목·접속 유지시간)을 조회한다. - 관리자 대시보드는 `GET /admin/api/analytics/realtime`으로 현재 접속자 목록(닉네임·아바타·게시물 제목·접속 유지시간·IP·짧은 세션 ID)을 조회한다. 세션 ID는 클라이언트 세션 원문이 아니라 서버 `session_hash` 앞부분만 표시해 같은 IP 안의 방문자를 구분하는 보조 정보로 사용한다.
- 관리자 대시보드 **통계 추이**는 `trends` 데이터를 3개 막대 차트(방문자수·평균 체류시간·50% 스크롤 도달)로 표시한다. 선택지는 일간·주간·월간·년간이며 기본값은 일간이다. 집계는 `ANALYTICS_COLLECTED_SINCE` 환경 변수(기본 `2026-06-01`) 이후 데이터만 합산하고 그 이전 구간은 0으로 표시한다. **방문자수** 막대는 검색(빨강)·SNS(청록)·기타(회색) 유입 비율을 스택으로 표시하며, hover 시 해당 막대만 색상을 강조한다. 안내 문구는 `통계는 2026년 6월 1일부터 집계한 데이터를 표시합니다.` 형식이다. 막대 hover/focus 시 기간과 정확한 값을 툴팁으로 표시하며, 막대 클릭 시 해당 날짜 또는 묶음 구간의 유입·디바이스·유입 키워드·인기 게시물·인기 페이지 상세 모달을 표시한다. 표(table)나 외부 차트 라이브러리는 사용하지 않는다. - 관리자 대시보드 **통계 추이**는 `trends` 데이터를 3개 막대 차트(방문자수·평균 체류시간·50% 스크롤 도달)로 표시한다. 선택지는 일간·주간·월간·년간이며 기본값은 일간이다. 집계는 `ANALYTICS_COLLECTED_SINCE` 환경 변수(기본 `2026-06-01`) 이후 데이터만 합산하고 그 이전 구간은 0으로 표시한다. **방문자수** 막대는 검색(빨강)·SNS(청록)·기타(회색) 유입 비율을 스택으로 표시하며, hover 시 해당 막대만 색상을 강조한다. 안내 문구는 `통계는 2026년 6월 1일부터 집계한 데이터를 표시합니다.` 형식이다. 막대 hover/focus 시 기간과 정확한 값을 툴팁으로 표시하며, 막대 클릭 시 하단 **선택한 기간 상세** 패널을 해당 날짜 또는 묶음 구간 기준으로 갱신한다. 표(table)나 외부 차트 라이브러리는 사용하지 않는다.
- 관리자 대시보드 **방문자 유입 정보**는 선택 기간 기준 검색·SNS·기타(직접 포함) 유입원, 디바이스/OS, 유입 키워드를 표시한다. - 관리자 대시보드 **선택한 기간 상세**는 기본값으로 오늘 통계를 표시하고, 차트 막대 클릭 시 선택 범위의 페이지뷰·방문자·평균 체류·50% 스크롤·검색/SNS/직접 포함 유입원·디바이스/OS·인기 게시물·인기 페이지를 표시한다. 자동 갱신 중에는 사용자가 선택한 날짜·기간을 유지하고, 상세 재조회 중에도 기존 내용을 유지해 화면 높이가 줄어들지 않게 한다. 인기 게시물·인기 페이지는 데스크톱에서 왼쪽 75% 영역에 세로 목록으로 표시하고, 유입·디바이스는 오른쪽 25% 영역에 세로 배치한다. 인기 콘텐츠 메타는 `V 조회`, `R 읽음/방문자`, `M 최근 30일 조회`, `C 작성일`, `S 50/75/100% 스크롤` 형식의 한 줄 압축 표기를 사용한다. `V/R/M` 알파벳만 서로 다른 색상으로 강조하고 숫자는 보조 텍스트 색상으로 표시한다. 구분자 `|`는 연한 회색으로 표시하며, `S`의 50/75/100 스크롤 값은 단계가 깊어질수록 진하게 표시한다. 유입 프로그래스 바는 보조 지표로 보이도록 카드 폭의 절반만 사용한다. 검색엔진이 대부분 검색어를 전달하지 않는 현실을 반영해 대시보드의 유입 키워드 영역은 표시하지 않는다.
- 관리자 대시보드 **인기 게시물**은 선택 기간 조회수와 함께 최근 30일 월간 조회수, 작성일을 표시한다.
- 관리자 글 목록은 게시물별 `post_analytics_daily.views` 누적 합계를 별도 조회수 열에 `1,000`처럼 숫자만 표시하고, 같은 셀 아래 작은 회색 통계 버튼으로 게시물별 통계 모달을 연다. 통계 버튼은 hover 시에만 파란색으로 표시한다. - 관리자 글 목록은 게시물별 `post_analytics_daily.views` 누적 합계를 별도 조회수 열에 `1,000`처럼 숫자만 표시하고, 같은 셀 아래 작은 회색 통계 버튼으로 게시물별 통계 모달을 연다. 통계 버튼은 hover 시에만 파란색으로 표시한다.
- 관리자 게시물별 통계 모달과 상세 화면은 누적 조회수, 조회수/방문자 추이, 읽음·평균 체류·스크롤 지표, 게시물별 유입원·디바이스·유입 키워드를 표시한다. 추이는 일간(최근 14일), 주간(최근 12주, 일요일~토요일), 월간(최근 12개월) 단위로 전환한다. 게시물별 유입은 `059_post_analytics_traffic_daily.sql` 적용 이후 새로 수집되는 페이지뷰부터 집계된다. - 관리자 게시물별 통계 모달과 상세 화면은 누적 조회수, 조회수/방문자 추이, 읽음·평균 체류·스크롤 지표, 게시물별 유입원·디바이스·유입 키워드를 표시한다. 추이는 일간(최근 14일), 주간(최근 12주, 일요일~토요일), 월간(최근 12개월) 단위로 전환한다. 게시물별 유입은 `059_post_analytics_traffic_daily.sql` 적용 이후 새로 수집되는 페이지뷰부터 집계된다.
- 관리자 대시보드 추이 차트는 일일 7개, 주간 최대 8개, 월간 12개, 년간 최대 8개 버킷을 조회한다. 게시물별 통계와 기타 인기/유입 목록 API는 기존 최대 365일 조회 제한을 유지한다. - 관리자 대시보드 추이 차트는 일일 7개, 주간 최대 8개, 월간 12개, 년간 최대 8개 버킷을 조회한다. 게시물별 통계와 기타 인기/유입 목록 API는 기존 최대 365일 조회 제한을 유지한다.
- `site_analytics_daily`, `post_analytics_daily`, `analytics_traffic_daily`는 사이트 전체 방문자와 게시물별 조회수, 유입 통계 누적 원본이므로 자동 삭제하지 않는다. - `site_analytics_daily`, `post_analytics_daily`, `analytics_traffic_daily`는 사이트 전체 방문자와 게시물별 조회수, 유입 통계 누적 원본이므로 자동 삭제하지 않는다.
- `analytics_daily_visitors`는 일별 중복 방문 제거용이며, 수집·조회 흐름에서 32일보다 오래된 행을 주기적으로 삭제한다. - `analytics_daily_visitors`는 일별 중복 방문 제거용이며, 수집·조회 흐름에서 32일보다 오래된 행을 주기적으로 삭제한다.
- `analytics_active_sessions`는 현재 접속자 목록용이며, 90초보다 오래된 행을 삭제한다. - `analytics_active_sessions`는 현재 접속자 목록용이며, 90초보다 오래된 행을 삭제한다. IP는 실시간 접속자 식별 보조용으로만 저장하고, 방문자 통계 고유성은 기존 해시 기반 집계를 유지한다.
--- ---
@@ -631,9 +630,9 @@ components/content/
- `GET /admin/api/analytics/summary?period=weekly&days=56` - 통계 요약(오늘 및 최근 7/30/180/365일 방문, 30일 조회, 현재 접속자, 평균 체류, 50% 스크롤 도달, `collectedSince`, 선택 집계 단위 `trends`). `period`는 `daily`, `weekly`, `monthly`, `yearly`를 사용하며 대시보드는 일일·주간·월간·년간으로 전환한다. - `GET /admin/api/analytics/summary?period=weekly&days=56` - 통계 요약(오늘 및 최근 7/30/180/365일 방문, 30일 조회, 현재 접속자, 평균 체류, 50% 스크롤 도달, `collectedSince`, 선택 집계 단위 `trends`). `period`는 `daily`, `weekly`, `monthly`, `yearly`를 사용하며 대시보드는 일일·주간·월간·년간으로 전환한다.
- `GET /admin/api/analytics/posts?days=30&limit=5` - 기간 내 인기 게시물(조회·최근 30일 월간 조회·작성일·읽음·평균 체류·스크롤 구간) - `GET /admin/api/analytics/posts?days=30&limit=5` - 기간 내 인기 게시물(조회·최근 30일 월간 조회·작성일·읽음·평균 체류·스크롤 구간)
- `GET /admin/api/analytics/pages?days=30&limit=5` - 기간 내 인기 페이지(조회·방문자·평균 체류·스크롤 구간) - `GET /admin/api/analytics/pages?days=30&limit=5` - 기간 내 인기 페이지(조회·방문자·평균 체류·스크롤 구간)
- `GET /admin/api/analytics/realtime?limit=20` - 현재 접속자 요약·목록(로그인 사용자 닉네임·아바타 포함) - `GET /admin/api/analytics/realtime?limit=20` - 현재 접속자 요약·목록(로그인 사용자 닉네임·아바타, IP, 세션 해시 포함)
- `GET /admin/api/analytics/traffic?days=30` - 기간 내 유입원·디바이스·유입 키워드 통계 - `GET /admin/api/analytics/traffic?days=30` - 기간 내 유입원·디바이스·유입 키워드 통계
- `GET /admin/api/analytics/range-detail?startDay=YYYY-MM-DD&endDay=YYYY-MM-DD&limit=5` - 통계 추이 막대 상세(요약·유입·디바이스·유입 키워드·인기 게시물·인기 페이지). 최대 31일 범위로 제한한다. - `GET /admin/api/analytics/range-detail?startDay=YYYY-MM-DD&endDay=YYYY-MM-DD&limit=5` - 통계 추이 막대 상세(요약·유입·디바이스·인기 게시물·인기 페이지). 인기 콘텐츠는 조회·읽음/방문자·최근 30일 조회·작성일·스크롤 도달 지표를 포함한다. 최대 31일 범위로 제한한다.
- `GET /admin/api/analytics/posts/:id?period=daily&days=14` - 게시물별 통계(누적·기간 요약, 일간/주간/월간 조회·방문자 추이, 게시물별 유입·디바이스·키워드) - `GET /admin/api/analytics/posts/:id?period=daily&days=14` - 게시물별 통계(누적·기간 요약, 일간/주간/월간 조회·방문자 추이, 게시물별 유입·디바이스·키워드)
- `GET /admin/api/analytics/pages/:id?period=daily&days=14` - 페이지별 통계(누적·기간 요약, 일간/주간/월간 조회·방문자 추이, 체류·스크롤 구간) - `GET /admin/api/analytics/pages/:id?period=daily&days=14` - 페이지별 통계(누적·기간 요약, 일간/주간/월간 조회·방문자 추이, 체류·스크롤 구간)
- `GET /admin/api/posts` - 글 목록. 기본은 본문 없는 배열 응답이며, `paged=true&page=1&pageSize=50&q=검색어&status=published&tag=slug&featured=featured&sort=newest|oldest` 쿼리를 보내면 서버 필터링된 `{ items, pagination, counts }` 페이지 응답을 반환한다. - `GET /admin/api/posts` - 글 목록. 기본은 본문 없는 배열 응답이며, `paged=true&page=1&pageSize=50&q=검색어&status=published&tag=slug&featured=featured&sort=newest|oldest` 쿼리를 보내면 서버 필터링된 `{ items, pagination, counts }` 페이지 응답을 반환한다.

View File

@@ -1,5 +1,35 @@
# 업데이트 이력 # 업데이트 이력
## v1.10.64
- 관리자 대시보드 인기 콘텐츠 메타에서 `V/R/M` 알파벳만 색상 강조하고 숫자는 보조 텍스트 색상으로 표시하도록 수정.
- `S` 스크롤 메타의 라벨과 50/75/100 값 사이 간격을 명확하게 조정.
## v1.10.63
- 관리자 대시보드 인기 콘텐츠 메타의 `V/R/M` 값을 서로 다른 색상으로 강조.
- 인기 콘텐츠 메타 구분자 `|`를 연한 회색으로 낮춰 보조 구분선처럼 보이도록 수정.
- `S` 스크롤 50/75/100 값을 단계별로 점점 진한 색상으로 표시.
## v1.10.62
- 관리자 대시보드 자동 갱신 시 선택한 통계 날짜·기간이 오늘로 되돌아가던 문제 수정.
- 선택 기간 상세 갱신 중 기존 내용을 유지해 패널 높이 변화로 화면 위치가 흔들리지 않도록 수정.
- 대시보드 선택 기간 상세 레이아웃을 인기 콘텐츠 75%·유입/디바이스 25% 구조로 정리.
- 유입 프로그래스 바 폭을 절반으로 줄여 보조 지표처럼 보이도록 조정.
## v1.10.61
- 관리자 대시보드 선택 기간 상세의 인기 게시물·인기 페이지를 세로 목록으로 정리.
- 선택 기간 인기 콘텐츠 메타를 `V/R/M/C/S` 한 줄 압축 표기로 수정.
- 현재 접속자 목록에 IP와 짧은 세션 ID(SID)를 함께 표시하도록 수정.
- 실시간 접속 세션 IP 저장용 마이그레이션 `066_analytics_active_session_ip.sql` 추가.
## v1.10.60
- 관리자 대시보드 통계 차트 클릭 상세 모달을 제거하고 선택한 기간 상세를 하단 패널에 직접 표시하도록 수정.
- 대시보드 유입 키워드 영역을 제거하고 유입원·디바이스·인기 게시물·인기 페이지를 선택 기간 기준으로 통합 표시.
## v1.10.59 ## v1.10.59
- 글쓰기 이미지/갤러리 미디어 모달 헤더의 선택 개수 문구를 제거해 탭 전환 시 레이아웃 흔들림을 줄임. - 글쓰기 이미지/갤러리 미디어 모달 헤더의 선택 개수 문구를 제거해 탭 전환 시 레이아웃 흔들림을 줄임.

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "sori.studio", "name": "sori.studio",
"version": "1.10.59", "version": "1.10.64",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "sori.studio", "name": "sori.studio",
"version": "1.10.59", "version": "1.10.64",
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"@nuxtjs/tailwindcss": "^6.14.0", "@nuxtjs/tailwindcss": "^6.14.0",

View File

@@ -1,6 +1,6 @@
{ {
"name": "sori.studio", "name": "sori.studio",
"version": "1.10.59", "version": "1.10.64",
"private": true, "private": true,
"type": "module", "type": "module",
"imports": { "imports": {

File diff suppressed because it is too large Load Diff

View File

@@ -22,6 +22,7 @@ import {
import { getPostgresClient } from './postgres-client.js' import { getPostgresClient } from './postgres-client.js'
import { getRuntimeEnvValue } from '../utils/runtime-env.js' import { getRuntimeEnvValue } from '../utils/runtime-env.js'
import { getMemberSession } from '../utils/member-auth.js' import { getMemberSession } from '../utils/member-auth.js'
import { getClientIp } from '../utils/request-ip.js'
/** @type {number} 마지막 통계 보관 정리 실행 시각 */ /** @type {number} 마지막 통계 보관 정리 실행 시각 */
let lastAnalyticsRetentionPurgeAt = 0 let lastAnalyticsRetentionPurgeAt = 0
@@ -788,6 +789,7 @@ export const recordAnalyticsHeartbeat = async (input) => {
const maxScrollRatio = clampAnalyticsScrollRatio(input.maxScrollRatio) const maxScrollRatio = clampAnalyticsScrollRatio(input.maxScrollRatio)
const memberSession = getMemberSession(input.event) const memberSession = getMemberSession(input.event)
const userId = memberSession?.userId || null const userId = memberSession?.userId || null
const ipAddress = getClientIp(input.event)
const previousRows = await sql` const previousRows = await sql`
SELECT duration_seconds, max_scroll_ratio SELECT duration_seconds, max_scroll_ratio
@@ -810,6 +812,7 @@ export const recordAnalyticsHeartbeat = async (input) => {
post_slug, post_slug,
page_id, page_id,
page_slug, page_slug,
ip_address,
duration_seconds, duration_seconds,
max_scroll_ratio max_scroll_ratio
) )
@@ -821,6 +824,7 @@ export const recordAnalyticsHeartbeat = async (input) => {
${postSlug}, ${postSlug},
${pageId}, ${pageId},
${pageSlug}, ${pageSlug},
${ipAddress},
${durationSeconds}, ${durationSeconds},
${maxScrollRatio} ${maxScrollRatio}
) )
@@ -832,6 +836,7 @@ export const recordAnalyticsHeartbeat = async (input) => {
post_slug = EXCLUDED.post_slug, post_slug = EXCLUDED.post_slug,
page_id = EXCLUDED.page_id, page_id = EXCLUDED.page_id,
page_slug = EXCLUDED.page_slug, page_slug = EXCLUDED.page_slug,
ip_address = EXCLUDED.ip_address,
duration_seconds = GREATEST(analytics_active_sessions.duration_seconds, EXCLUDED.duration_seconds), duration_seconds = GREATEST(analytics_active_sessions.duration_seconds, EXCLUDED.duration_seconds),
max_scroll_ratio = GREATEST(analytics_active_sessions.max_scroll_ratio, EXCLUDED.max_scroll_ratio), max_scroll_ratio = GREATEST(analytics_active_sessions.max_scroll_ratio, EXCLUDED.max_scroll_ratio),
last_seen_at = now() last_seen_at = now()
@@ -1355,6 +1360,7 @@ export const getAnalyticsActiveSessions = async (options = {}) => {
analytics_active_sessions.path, analytics_active_sessions.path,
analytics_active_sessions.post_slug, analytics_active_sessions.post_slug,
analytics_active_sessions.page_slug, analytics_active_sessions.page_slug,
analytics_active_sessions.ip_address,
analytics_active_sessions.duration_seconds, analytics_active_sessions.duration_seconds,
analytics_active_sessions.max_scroll_ratio, analytics_active_sessions.max_scroll_ratio,
analytics_active_sessions.last_seen_at, analytics_active_sessions.last_seen_at,
@@ -1377,6 +1383,7 @@ export const getAnalyticsActiveSessions = async (options = {}) => {
path: row.path, path: row.path,
postSlug: row.post_slug || '', postSlug: row.post_slug || '',
pageSlug: row.page_slug || '', pageSlug: row.page_slug || '',
ipAddress: row.ip_address || '',
postTitle: row.post_title || '', postTitle: row.post_title || '',
pageTitle: row.page_title || '', pageTitle: row.page_title || '',
durationSeconds: Number(row.duration_seconds || 0), durationSeconds: Number(row.duration_seconds || 0),
@@ -1511,6 +1518,7 @@ export const getAnalyticsRangeDetail = async (options = {}) => {
} }
await purgeAnalyticsRetention(sql) await purgeAnalyticsRetention(sql)
const monthlyStartDay = getAnalyticsDayBefore(endDay, 29)
const summaryRows = await sql` const summaryRows = await sql`
SELECT SELECT
@@ -1573,13 +1581,20 @@ export const getAnalyticsRangeDetail = async (options = {}) => {
posts.id, posts.id,
posts.title, posts.title,
posts.slug, posts.slug,
posts.created_at,
COALESCE(SUM(post_analytics_daily.views), 0)::int AS views, COALESCE(SUM(post_analytics_daily.views), 0)::int AS views,
COALESCE(SUM(post_analytics_daily.views) FILTER (
WHERE post_analytics_daily.day >= ${monthlyStartDay}::date
), 0)::int AS monthly_views,
COALESCE(SUM(post_analytics_daily.reads), 0)::int AS reads, COALESCE(SUM(post_analytics_daily.reads), 0)::int AS reads,
COALESCE(SUM(post_analytics_daily.visitors), 0)::int AS visitors COALESCE(SUM(post_analytics_daily.visitors), 0)::int AS visitors,
COALESCE(SUM(post_analytics_daily.scroll_50), 0)::int AS scroll_50,
COALESCE(SUM(post_analytics_daily.scroll_75), 0)::int AS scroll_75,
COALESCE(SUM(post_analytics_daily.scroll_100), 0)::int AS scroll_100
FROM post_analytics_daily FROM post_analytics_daily
INNER JOIN posts ON posts.id = post_analytics_daily.post_id INNER JOIN posts ON posts.id = post_analytics_daily.post_id
WHERE post_analytics_daily.day BETWEEN ${startDay}::date AND ${endDay}::date WHERE post_analytics_daily.day BETWEEN ${startDay}::date AND ${endDay}::date
GROUP BY posts.id, posts.title, posts.slug GROUP BY posts.id, posts.title, posts.slug, posts.created_at
ORDER BY views DESC, reads DESC, posts.published_at DESC NULLS LAST ORDER BY views DESC, reads DESC, posts.published_at DESC NULLS LAST
LIMIT ${limit} LIMIT ${limit}
` `
@@ -1589,12 +1604,19 @@ export const getAnalyticsRangeDetail = async (options = {}) => {
pages.id, pages.id,
pages.title, pages.title,
pages.slug, pages.slug,
pages.created_at,
COALESCE(SUM(page_analytics_daily.views), 0)::int AS views, COALESCE(SUM(page_analytics_daily.views), 0)::int AS views,
COALESCE(SUM(page_analytics_daily.visitors), 0)::int AS visitors COALESCE(SUM(page_analytics_daily.views) FILTER (
WHERE page_analytics_daily.day >= ${monthlyStartDay}::date
), 0)::int AS monthly_views,
COALESCE(SUM(page_analytics_daily.visitors), 0)::int AS visitors,
COALESCE(SUM(page_analytics_daily.scroll_50), 0)::int AS scroll_50,
COALESCE(SUM(page_analytics_daily.scroll_75), 0)::int AS scroll_75,
COALESCE(SUM(page_analytics_daily.scroll_100), 0)::int AS scroll_100
FROM page_analytics_daily FROM page_analytics_daily
INNER JOIN pages ON pages.id = page_analytics_daily.page_id INNER JOIN pages ON pages.id = page_analytics_daily.page_id
WHERE page_analytics_daily.day BETWEEN ${startDay}::date AND ${endDay}::date WHERE page_analytics_daily.day BETWEEN ${startDay}::date AND ${endDay}::date
GROUP BY pages.id, pages.title, pages.slug GROUP BY pages.id, pages.title, pages.slug, pages.created_at
ORDER BY views DESC, visitors DESC, pages.updated_at DESC NULLS LAST ORDER BY views DESC, visitors DESC, pages.updated_at DESC NULLS LAST
LIMIT ${limit} LIMIT ${limit}
` `
@@ -1636,16 +1658,26 @@ export const getAnalyticsRangeDetail = async (options = {}) => {
id: row.id, id: row.id,
title: row.title, title: row.title,
slug: row.slug, slug: row.slug,
createdAt: row.created_at ? new Date(row.created_at).toISOString() : null,
views: Number(row.views || 0), views: Number(row.views || 0),
monthlyViews: Number(row.monthly_views || 0),
reads: Number(row.reads || 0), reads: Number(row.reads || 0),
visitors: Number(row.visitors || 0) visitors: Number(row.visitors || 0),
scroll50: Number(row.scroll_50 || 0),
scroll75: Number(row.scroll_75 || 0),
scroll100: Number(row.scroll_100 || 0)
})), })),
topPages: pageRows.map((row) => ({ topPages: pageRows.map((row) => ({
id: row.id, id: row.id,
title: row.title, title: row.title,
slug: row.slug, slug: row.slug,
createdAt: row.created_at ? new Date(row.created_at).toISOString() : null,
views: Number(row.views || 0), views: Number(row.views || 0),
visitors: Number(row.visitors || 0) monthlyViews: Number(row.monthly_views || 0),
visitors: Number(row.visitors || 0),
scroll50: Number(row.scroll_50 || 0),
scroll75: Number(row.scroll_75 || 0),
scroll100: Number(row.scroll_100 || 0)
})) }))
} }
} }