refactor: SVG Badge API 구조 개선 및 응답 Json으로 변경

refactor: SVG Badge API 구조 개선 및 응답 Json으로 변경

- assets, withrank 쿼리 파라미터 삭제
- API 응답 Svg에서 Json으로 변경

Author: Jihyun3478

src/controllers/svg.controller.ts

@@ -13,18 +13,11 @@ export class SvgController {
     ) => {
         try {
             const { username } = req.params;
-            const { type = 'default', assets = 'views,likes,posts', withrank = 'false'} = req.query;
+            const { type = 'default'} = req.query;
 
-            const svgString = await this.svgService.generateBadgeSvg(
-                username,
-                type,
-                assets,
-                withrank === 'true',
-            );
+            const data = await this.svgService.getBadgeData(username, type);
 
-            res.setHeader('Content-Type', 'image/svg+xml');
-            res.setHeader('Cache-Control', 'public, max-age=1800');
-            res.send(svgString);
+            res.json(data);
         } catch (error) {
             logger.error('SVG Badge 생성 실패: ', error);
             next(error);

src/repositories/leaderboard.repository.ts

@@ -1,6 +1,6 @@
 import logger from '@/configs/logger.config';
 import { Pool } from 'pg';
-import { DBError } from '@/exception';
+import { DBError, NotFoundError } from '@/exception';
 import { UserLeaderboardSortType, PostLeaderboardSortType } from '@/types/index';
 import { getCurrentKSTDateString, getKSTDateStringWithOffset } from '@/utils/date.util';
 
@@ -82,6 +82,74 @@ export class LeaderboardRepository {
     }
   }
 
+  async getUserStats(username: string, dateRange: number = 30) {
+    try {
+      const pastDateKST = getKSTDateStringWithOffset(-dateRange * 24 * 60);
+      const cteQuery = this.buildLeaderboardCteQuery(dateRange, pastDateKST);
+
+      const query = `
+      ${cteQuery}
+      SELECT
+        u.username,
+        COALESCE(SUM(ts.today_view), 0) AS total_views,
+        COALESCE(SUM(ts.today_like), 0) AS total_likes,
+        COUNT(DISTINCT CASE WHEN p.is_active = true THEN p.id END) AS total_posts,
+        SUM(COALESCE(ts.today_view, 0) - COALESCE(ss.start_view, 0)) AS view_diff,
+        SUM(COALESCE(ts.today_like, 0) - COALESCE(ss.start_like, 0)) AS like_diff,
+        COUNT(DISTINCT CASE WHEN p.released_at >= '${pastDateKST}' AND p.is_active = true THEN p.id END) AS post_diff
+      FROM users_user u
+      LEFT JOIN posts_post p ON p.user_id = u.id
+      LEFT JOIN today_stats ts ON ts.post_id = p.id
+      LEFT JOIN start_stats ss ON ss.post_id = p.id
+      WHERE u.username = $1
+      GROUP BY u.username
+    `;
+
+      const result = await this.pool.query(query, [username]);
+
+      if (result.rows.length === 0) {
+        throw new NotFoundError(`사용자를 찾을 수 없습니다: ${username}`);
+      }
+
+      return result.rows[0];
+    } catch (error) {
+      if (error instanceof NotFoundError) throw error;
+      logger.error('LeaderboardRepository getUserStats error:', error);
+      throw new DBError('사용자 통계 조회 중 문제가 발생했습니다.');
+    }
+  }
+
+  async getRecentPosts(username: string, dateRange: number = 30, limit: number = 3) {
+    try {
+      const pastDateKST = getKSTDateStringWithOffset(-dateRange * 24 * 60);
+      const cteQuery = this.buildLeaderboardCteQuery(dateRange, pastDateKST);
+
+      const query = `
+      ${cteQuery}
+      SELECT
+        p.title,
+        p.released_at,
+        COALESCE(ts.today_view, 0) AS today_view,
+        COALESCE(ts.today_like, 0) AS today_like,
+        (COALESCE(ts.today_view, 0) - COALESCE(ss.start_view, 0)) AS view_diff
+      FROM posts_post p
+      JOIN users_user u ON u.id = p.user_id
+      LEFT JOIN today_stats ts ON ts.post_id = p.id
+      LEFT JOIN start_stats ss ON ss.post_id = p.id
+      WHERE u.username = $1
+        AND p.is_active = true
+      ORDER BY p.released_at DESC
+      LIMIT $2
+    `;
+
+      const result = await this.pool.query(query, [username, limit]);
+      return result.rows;
+    } catch (error) {
+      logger.error('LeaderboardRepository getRecentPosts error:', error);
+      throw new DBError('최근 게시글 조회 중 문제가 발생했습니다.');
+    }
+  }
+
   // 오늘 날짜와 기준 날짜의 통계를 가져오는 CTE(임시 결과 집합) 쿼리 빌드
   private buildLeaderboardCteQuery(dateRange: number, pastDateKST?: string) {
     // KST 기준 00시~01시 (UTC 15:00~16:00) 사이라면 전날 데이터를 사용

src/repositories/svg.repository.ts

@@ -1,22 +1,22 @@
 import pool from '@/configs/db.config';
 import express, { Router } from 'express';
-import { SvgRepository } from '@/repositories/svg.repository';
+import { LeaderboardRepository } from '@/repositories/leaderboard.repository';
 import { SvgService } from '@/services/svg.service';
 import { SvgController } from '@/controllers/svg.controller';
 import { validateRequestDto } from '@/middlewares/validation.middleware';
 import { GetSvgBadgeQueryDto } from '@/types';
 
 const router: Router = express.Router();
 
-const svgRepository = new SvgRepository(pool);
-const svgService = new SvgService(svgRepository);
+const leaderboardRepository = new LeaderboardRepository(pool);
+const svgService = new SvgService(leaderboardRepository);
 const svgController = new SvgController(svgService);
 
 /**
  * @swagger
  * /api/{username}/badge:
  *   get:
- *     summary: 사용자 배지 SVG 조회
+ *     summary: 사용자 배지 데이터 조회
  *     tags:
  *       - SVG
  *     security: []
@@ -27,37 +27,46 @@ const svgController = new SvgController(svgService);
  *         schema:
  *           type: string
  *         description: 조회할 사용자명
- *         example: six-standard
+ *         example: ljh3478
  *       - in: query
  *         name: type
  *         schema:
  *           type: string
  *           enum: [default, simple]
  *           default: default
- *       - in: query
- *         name: assets
- *         schema:
- *           type: string
- *           default: views,likes,posts
- *           example: views,likes,posts
- *       - in: query
- *         name: withrank
- *         schema:
- *           type: string
- *           enum: [true, false]
- *           default: false
  *     responses:
  *       '200':
- *         description: SVG 배지 생성 성공
+ *         description: 배지 데이터 조회 성공
  *         content:
- *           image/svg+xml:
+ *           application/json:
  *             schema:
- *               type: string
- *               example: <svg>...</svg>
+ *               type: object
+ *               properties:
+ *                 user:
+ *                   type: object
+ *                   properties:
+ *                     username:
+ *                       type: string
+ *                     totalViews:
+ *                       type: number
+ *                     totalLikes:
+ *                       type: number
+ *                     totalPosts:
+ *                       type: number
+ *                     viewDiff:
+ *                       type: number
+ *                     likeDiff:
+ *                       type: number
+ *                     postDiff:
+ *                       type: number
+ *                 recentPosts:
+ *                   type: array
+ *                   items:
+ *                     type: object
  *       '404':
  *         description: 사용자를 찾을 수 없음
  *       '500':
- *         description: 서버 오류 / 데이터 베이스 조회 오류
+ *         description: 서버 오류
  */
 router.get(
   '/:username/badge',

src/routes/svg.router.ts

@@ -1,26 +1,41 @@
 import logger from '@/configs/logger.config';
-import { SvgBadgeType } from '@/types';
-import { SvgRepository } from '@/repositories/svg.repository';
+import { BadgeDataResponseDto, SvgBadgeType } from '@/types';
+import { LeaderboardRepository } from '@/repositories/leaderboard.repository';
 
 export class SvgService {
-    constructor(private svgRepo: SvgRepository) {}
+    constructor(private leaderboardRepo: LeaderboardRepository) {}
 
-    async generateBadgeSvg(
+    async getBadgeData(
         username: string,
         type: SvgBadgeType,
-        assets: string,
-        withRank: boolean,
-    ): Promise<string> {
+        dateRange: number = 30,
+    ): Promise<BadgeDataResponseDto> {
         try {
-            const data = await this.svgRepo.getUserBadgeData(username, withRank);
-
-            if (type === 'simple') {
-                return this.generateSimpleSvg(data, assets);
-            } else {
-                return this.generateDefaultSvg(data, assets, withRank);
-            }
+            const userStats = await this.leaderboardRepo.getUserStats(username, dateRange);
+            const recentPosts = type === 'default'
+                ? await this.leaderboardRepo.getRecentPosts(username, dateRange, 3)
+                : [];
+
+            return new BadgeDataResponseDto(
+                {
+                    username: userStats.username,
+                    totalViews: Number(userStats.total_views),
+                    totalLikes: Number(userStats.total_likes),
+                    totalPosts: Number(userStats.total_posts),
+                    viewDiff: Number(userStats.view_diff),
+                    likeDiff: Number(userStats.like_diff),
+                    postDiff: Number(userStats.post_diff),
+                },
+                recentPosts.map(post => ({
+                    title: post.title,
+                    releasedAt: post.released_at,
+                    viewCount: Number(post.today_view),
+                    likeCount: Number(post.today_like),
+                    viewDiff: Number(post.view_diff),
+                }))
+            )
         } catch (error) {
-            logger.error('SvgService generateBadgeSvg error: ', error);
+            logger.error('SvgService getBadgeData error: ', error);
             throw error;
         }
     }
@@ -43,16 +58,4 @@ export class SvgService {
             ${withRank ? `<text x="20" y="120" fill="white">Rank: #${data.view_rank || 'N/A'}</text>` : ''}
         </svg>`;
     }
-
-    private formatNumber(num: number): string {
-        if (num >= 1000000) {
-            return (num / 1000000).toFixed(1) + 'm';
-        }
-
-        if (num >= 1000) {
-            return (num / 1000).toFixed(1) + 'k';
-        }
-
-        return num.toString();
-    }
-}
+}

src/services/svg.service.ts

@@ -8,8 +8,6 @@ export interface GetSvgBadgeParams {
 
 export interface GetSvgBadgeQuery {
     type?: SvgBadgeType;
-    assets?: string;
-    withrank?: string;
 }
 
 export class GetSvgBadgeQueryDto {
@@ -25,9 +23,7 @@ export class GetSvgBadgeQueryDto {
     @IsEnum(['true', 'false'])
     withrank?: string;
 
-    constructor(type?: SvgBadgeType, assets?: string, withrank?: string) {
+    constructor(type?: SvgBadgeType) {
         this.type = type || 'default';
-        this.assets = assets || 'views,likes,posts'
-        this.withrank = withrank || 'false';
     }
 }