feat(analysis): jwt 만료 시간 수정, 프론트엔드 히스토리 부분 UI 개선 및 정렬 추가

feat(analysis): jwt 만료 시간 수정, 프론트엔드 히스토리 부분 UI 개선 및 정렬 추가

Author: Hyeseung-OH

backend/src/main/java/com/backend/domain/analysis/dto/response/AnalysisResultResponseDto.java

@@ -3,6 +3,8 @@
 import com.backend.domain.analysis.entity.AnalysisResult;
 import com.backend.domain.analysis.entity.Score;
 
+import java.time.LocalDateTime;
+
 /**
  * 특정 분석 결과의 상세 정보 응답 DTO
  * 분석 점수, 피드백 등을 포함
@@ -15,7 +17,8 @@ public record AnalysisResultResponseDto(
     int cicdScore,
     String summary,
     String strengths,
-    String improvements
+    String improvements,
+    LocalDateTime createDate
 ) {
     public AnalysisResultResponseDto(AnalysisResult analysisResult, Score score){
         this(
@@ -26,7 +29,8 @@ public AnalysisResultResponseDto(AnalysisResult analysisResult, Score score){
                 score.getCicdScore(),
                 analysisResult.getSummary(),
                 analysisResult.getStrengths(),
-                analysisResult.getImprovements()
+                analysisResult.getImprovements(),
+                analysisResult.getCreateDate()
         );
     }
 }

backend/src/main/java/com/backend/domain/repository/dto/response/RepositoryResponse.java

@@ -2,6 +2,7 @@
 
 import com.backend.domain.repository.entity.Repositories;
 
+import java.time.LocalDateTime;
 import java.util.List;
 import java.util.stream.Collectors;
 
@@ -16,7 +17,8 @@ public record RepositoryResponse(
         String htmlUrl,
         boolean publicRepository,
         String mainBranch,
-        List<String> languages
+        List<String> languages,
+        LocalDateTime createDate
 ) {
     public RepositoryResponse(Repositories repositories) {
         this(
@@ -28,7 +30,8 @@ public RepositoryResponse(Repositories repositories) {
                 repositories.getMainBranch(),
                 repositories.getLanguages().stream()
                         .map(lang -> lang.getLanguage().name())
-                        .collect(Collectors.toList())
+                        .collect(Collectors.toList()),
+                repositories.getCreateDate()
         );
     }
 }

backend/src/main/resources/application.yml

@@ -43,4 +43,4 @@ github:
 
 jwt:
   secret: ${SECRET_KEY}
-  access-token-expiration-in-milliseconds: 600000 # 600 * 1000
+  access-token-expiration-in-milliseconds: 7200000 # 두 시간

front/src/app/community/[id]/page.tsx

@@ -1,9 +1,13 @@
 "use client"
 
+import { useEffect } from "react"
 import { useHistory } from "@/hooks/history/useHistory"
+import { HistoryStats } from "@/components/history/HistoryStatsProps"
 import { Card } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/Button"
+import { ScoreBadge } from "@/components/history/ScoreBadge"
+import { formatRelativeTimeKST } from "@/lib/utils/formatDate"
 import { Github, ExternalLink, Trash2, Calendar } from "lucide-react"
 import { useRouter } from "next/navigation"
 
@@ -13,25 +17,62 @@ interface HistoryContentProps {
 }
 
 export default function HistoryContent({ memberId, name }: HistoryContentProps) {
-    const { repositories, loading, error } = useHistory(memberId)
+    const { repositories, loading, error, handleDelete, sortType, setSortType } = useHistory(memberId)
     const router = useRouter()
 
     if (loading) return <p className="p-8 text-center">히스토리 불러오는 중...</p>
     if (error) return <p className="p-8 text-center text-red-500">{error}</p>
 
     return (
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="max-w-3xl mx-auto p-6">
             <div className="mb-8">
                 <h1 className="mb-2 text-3xl font-bold">분석 히스토리</h1>
                 <p className="text-muted-foreground">시간에 따른 리포지토리 개선 사항을 추적하세요</p>
             </div>
 
+            {/*  통계 카드 컴포넌트 */}
+            <HistoryStats repositories={repositories} />
+
+            {/* ✅ 정렬 버튼 */}
+            <div className="flex justify-end gap-2 mb-4">
+                <Button
+                    variant={sortType === "latest" ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setSortType("latest")}
+                >
+                최신순
+                </Button>
+                <Button
+                    variant={sortType === "score" ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setSortType("score")}
+                >
+                점수순
+                </Button>
+            </div>
+
             <div className="w-full max-w-3xl space-y-4">
-                {repositories.map((repo) => (
+            {repositories.length === 0 ? (
+                // ✅ 분석 결과 없음 안내 카드
+                <Card className="p-10 text-center bg-muted/30 border-dashed border-2 border-muted-foreground/20 rounded-2xl shadow-sm hover:shadow-md transition-all">
+                    <p className="text-lg mb-6 text-muted-foreground">
+                    아직 분석 결과가 없습니다. 지금 바로{" "}
+                    <span className="font-semibold text-primary">새 분석</span>을 시작해 보세요!
+                    </p>
+                    <Button
+                    size="lg"
+                    onClick={() => router.push("/analysis")}
+                    className="px-8"
+                    >
+                    🚀 새 분석 시작하기
+                    </Button>
+                </Card>
+                ) : (
+                repositories.map((repo) => (
                     <Card
                         key={repo.id}
                         className="p-6 transition-all hover:border-primary/50 cursor-pointer"
-                        onClick={() => router.push(`/history/${repo.id}`)}
+                        onClick={() => router.push(`/analysis/${repo.id}`)}
                     >
                         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                             {/* 왼쪽 정보 */}
@@ -76,25 +117,36 @@ export default function HistoryContent({ memberId, name }: HistoryContentProps)
 
                                 <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                     <Calendar className="h-4 w-4" />
-                                    <span>브랜치: {repo.mainBranch}</span>
+                                    <span>{formatRelativeTimeKST(repo.createDate)}</span>
                                 </div>
                             </div>
 
                             <div className="flex items-center gap-6">
+                                {repo.latestScore !== undefined && repo.latestScore !== null ? (
+                                    <div className="text-center">
+                                    <div className="mb-1 text-sm text-muted-foreground">점수</div>
+                                    <ScoreBadge score={repo.latestScore} size="sm" />
+                                    </div>
+                                ) : (
+                                    <div className="text-sm text-muted-foreground">점수 없음</div>
+                                )}
                                 <Button
                                     variant="ghost"
                                     size="sm"
                                     onClick={(e) => {
                                         e.stopPropagation()
-                                        console.log("삭제 요청:", repo.id)
+                                        if (confirm("정말 이 리포지토리를 삭제하시겠습니까?")) {
+                                        handleDelete(repo.id)
+                                        }
                                     }}
-                                >
+                                    >
                                     <Trash2 className="h-4 w-4 text-destructive" />
                                 </Button>
                             </div>
                         </div>
                     </Card>
-                ))}
+                ))
+            )}
             </div>
         </div>
     )

front/src/components/history/HistoryContent.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { Card } from "@/components/ui/card"
+
+interface HistoryStatsProps {
+  repositories: { latestScore?: number | null }[]
+}
+
+/** ✅ 리포지토리 통계 카드 */
+export function HistoryStats({ repositories }: HistoryStatsProps) {
+  const total = repositories.length
+  const validScores = repositories
+    .map((r) => r.latestScore ?? 0)
+    .filter((s) => s > 0)
+
+  const average =
+    validScores.length > 0
+      ? (validScores.reduce((a, b) => a + b, 0) / validScores.length).toFixed(1)
+      : "0.0"
+
+  const max = validScores.length > 0 ? Math.max(...validScores) : 0
+
+  return (
+    <div className="mb-8 grid gap-4 sm:grid-cols-3">
+      <Card className="p-6">
+        <div className="mb-2 text-sm text-muted-foreground">총 리포지토리 수</div>
+        <div className="text-3xl font-bold">{total}</div>
+      </Card>
+
+      <Card className="p-6">
+        <div className="mb-2 text-sm text-muted-foreground">평균 점수</div>
+        <div className="text-3xl font-bold text-score-good">{average}</div>
+      </Card>
+
+      <Card className="p-6">
+        <div className="mb-2 text-sm text-muted-foreground">최고 점수</div>
+        <div className="text-3xl font-bold text-score-excellent">{max}</div>
+      </Card>
+    </div>
+  )
+}

front/src/components/history/HistoryStatsProps.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import { analysisApi } from "@/lib/api/analysis"
 import type { HistoryResponseDto, AnalysisResultResponseDto } from "@/types/analysis"
-import { formatDate } from "@/lib/utils/formatDate"
+import { formatDateTimeKST } from "@/lib/utils/formatDate"
 
 export function useAnalysisResult(userId?: number, repoId?: number) {
   const [history, setHistory] = useState<HistoryResponseDto | null>(null)
@@ -23,7 +23,7 @@ export function useAnalysisResult(userId?: number, repoId?: number) {
 
         const relabeled = sorted.map((ver, idx) => ({
           ...ver,
-          versionLabel: `v${sorted.length - idx} (${formatDate(ver.analysisDate)})`,
+          versionLabel: `v${sorted.length - idx} (${formatDateTimeKST(ver.analysisDate)})`,
         }))
 
         setHistory({ ...data, analysisVersions: relabeled })

front/src/hooks/analysis/useAnalysisResult.ts

@@ -52,6 +52,24 @@ export function useAuth() {
     }
   }, []);
 
+    // ✅ 로그인된 상태일 때 자동 로그아웃 타이머 (2시간 후)
+    useEffect(() => {
+      if (!token) return; // 로그인 안 되어 있으면 실행 안 함
+  
+      console.log('⏰ 2시간 자동 로그아웃 타이머 시작');
+      const logoutTimer = setTimeout(() => {
+        console.warn('🔒 토큰 만료 — 자동 로그아웃 실행');
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('user');
+        setToken(null);
+        setUser(null);
+        toast.push('세션이 만료되어 로그아웃되었습니다.');
+        window.location.reload();
+      }, 2 * 60 * 60 * 1000); // ✅ 2시간 (7200000ms)
+  
+      return () => clearTimeout(logoutTimer);
+    }, [token]); // token이 새로 설정될 때마다 타이머 재설정
+
   const isAuthed = useMemo(() => !!token, [token]);
 
   function loginWithToken(userData: GetUserResponse) {

front/src/hooks/auth/useAuth.ts

@@ -1,27 +1,90 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useState, useMemo } from "react"
 import { fetchHistory } from "@/lib/api/history"
-import type { RepositoryResponse } from "@/types/history"
+import { analysisApi } from "@/lib/api/analysis"
+import type { RepositoryResponse as RepoBaseResponse } from "@/types/history"
+import type { HistoryResponseDto } from "@/types/analysis"
 
 export function useHistory(memberId: number) {
-  const [repositories, setRepositories] = useState<RepositoryResponse[]>([])
+  const [repositories, setRepositories] = useState<RepoBaseResponse[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [sortType, setSortType] = useState<"latest" | "score">("latest")
 
   useEffect(() => {
-    async function load() {
-      try {
-        const result = await fetchHistory(memberId)
-        setRepositories(result)
-      } catch (err) {
-        setError((err as Error).message)
-      } finally {
-        setLoading(false)
-      }
+    console.log("🧾 repositories:", repositories.map(r => ({
+      id: r.id,
+      createDate: r.createDate,
+      latestScore: r.latestScore
+    })))
+  }, [repositories])
+
+  
+  async function load() {
+    try {
+      setLoading(true)
+      const baseRepos = await fetchHistory(memberId)
+
+      const enrichedRepos: RepoBaseResponse[] = await Promise.all(
+        baseRepos.map(async (repo): Promise<RepoBaseResponse> => {
+          try {
+            const historyData: HistoryResponseDto = await analysisApi.getRepositoryHistory(memberId, repo.id)
+            const versions = historyData.analysisVersions
+            const latest = versions.length > 0 ? versions[0] : null
+
+            return {
+              ...repo,
+              latestScore: latest?.totalScore ?? null,
+              latestAnalysisDate: latest?.analysisDate ?? null,
+            }
+          } catch (err) {
+            console.error(`❌ 점수 불러오기 실패 (repoId: ${repo.id})`, err)
+            return repo
+          }
+        })
+      )
+
+      setRepositories(enrichedRepos)
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setLoading(false)
     }
+  }
+
+  useEffect(() => {
     load()
   }, [memberId])
 
-  return { repositories, loading, error }
+  const sortedRepositories = useMemo(() => {
+    if (sortType === "score") {
+      return repositories
+        .slice()
+        .sort((a, b) => (b.latestScore ?? 0) - (a.latestScore ?? 0))
+    }
+  
+    // ✅ microseconds 제거 + UTC 보정
+    const parseDate = (d?: string) => {
+      if (!d) return 0
+      return Date.parse(d.split(".")[0] + "Z")
+    }
+  
+    return repositories
+      .slice()
+      .sort((a, b) => parseDate(b.createDate) - parseDate(a.createDate))
+  }, [repositories, sortType])
+  
+
+  async function handleDelete(repoId: number) {
+    try {
+      await analysisApi.deleteRepository(memberId, repoId)
+      setRepositories((prev) => prev.filter((repo) => repo.id !== repoId))
+    } catch (err) {
+      console.error("삭제 실패:", err)
+      alert("삭제 중 오류가 발생했습니다.")
+    }
+  }
+
+  return { repositories: sortedRepositories, loading, error, handleDelete, sortType, setSortType }
 }

front/src/hooks/history/useHistory.ts

@@ -52,6 +52,17 @@ export async function api<T = unknown>(
     const text = await res.text();
     const responseData = text ? JSON.parse(text) : null;
 
+    if (res.status === 401) {
+      console.warn("🔐 토큰 만료 — 로그인 페이지로 이동합니다.");
+      if (typeof window !== "undefined") {
+        localStorage.removeItem("accessToken");
+        localStorage.removeItem("user");
+        window.location.href = "/login";
+      }
+      // 즉시 리턴해서 아래 로직 수행 안 함
+      throw new Error("Unauthorized");
+    }
+    
     if (!res.ok) {
       // 🔥 에러 응답 데이터를 함께 전달
       const errorResponse = responseData as ErrorResponse;