feat(community): 정렬 추가

Author: Hyeseung-OH

front/src/app/(dashboard)/analysis/[id]/page.tsx

@@ -42,11 +42,10 @@ export default function ResultsPage() {
         </div>
 
         {/* 🌐 공개 설정 및 커뮤니티 섹션 */}
-        <RepositoryPublicSection
-          userId={history.repository.ownerId}
-          repoId={repoId}
-          initialPublic={history.repository.publicRepository}
-        />
+        <RepositoryPublicSection 
+          userId={history.repository.ownerId} 
+          repoId={repoId} 
+          initialPublic={history.repository.publicRepository} />
       </div>
     </div>
   )

front/src/app/community/page.tsx

@@ -5,41 +5,11 @@ import RepositoryList from '@/components/community/RepoList';
 export default function HomePage() {
   return (
     <main className="max-w-3xl mx-auto p-6">
-      <h1 className="text-3xl font-bold mb-2 text-blue-600">Portfol.ioQ</h1>
-      <p className="text-gray-500 text-sm mb-6">커뮤니티 레포지토리 피드</p>
+      <div className="mb-8">
+          <h1 className="mb-2 text-3xl font-bold">커뮤니티</h1>
+          <p className="text-muted-foreground">다른 사용자의 분석 결과를 둘러보세요.</p>
+      </div>
       <RepositoryList />
     </main>
   );
-}
-
-// "use client"
-
-// import { useState } from "react"
-// import { CommentList } from "@/components/community/CommentList"
-// import { CommentForm } from "@/components/community/CommentForm"
-
-// export default function CommunityPage() {
-//   const [refreshKey, setRefreshKey] = useState(0)
-
-//   return (
-//     <main className="max-w-2xl mx-auto py-10">
-//       <h1 className="text-2xl font-bold mb-6">💬 댓글 테스트 페이지</h1>
-
-//       {/* ✅ 댓글 작성 폼을 위로 이동 */}
-//       <section className="mb-8">
-//         <h2 className="text-lg font-semibold mb-3">댓글 작성</h2>
-//         <CommentForm
-//           analysisResultId="1"
-//           memberId={1} // 로그인 후 실제 유저 ID로 대체
-//           onCommentAdded={() => setRefreshKey((k) => k + 1)} // 작성 후 목록 새로고침
-//         />
-//       </section>
-
-//       {/* ✅ 댓글 목록은 아래쪽에 표시 */}
-//       <section className="border-t border-border pt-6">
-//         <h2 className="text-lg font-semibold mb-3">댓글 목록</h2>
-//         <CommentList key={refreshKey} analysisResultId="1" />
-//       </section>
-//     </main>
-//   )
-// }
+}

front/src/components/community/RepoCard.tsx

@@ -2,10 +2,11 @@
 
 import type { RepositoryItem } from '@/types/community';
 import { useRouter } from 'next/navigation'
+import { formatRelativeTimeKST } from '@/lib/utils/formatDate'
 
 export default function RepositoryCard({ item }: { item: RepositoryItem }) {
-
   const router = useRouter();
+  const relativeTime = formatRelativeTimeKST(item.createDate);
 
   return (
     <article className="bg-white border border-gray-200 rounded-2xl shadow-sm p-5 hover:shadow-md transition-all duration-200">
@@ -30,7 +31,7 @@ export default function RepositoryCard({ item }: { item: RepositoryItem }) {
           <p className="font-semibold text-sm">{item.userName}</p>
           <p className="text-gray-500 text-xs">@{item.userName.toLowerCase()}</p>
         </div>
-        <span className="ml-auto text-gray-400 text-xs">2시간 전</span>
+        <span className="ml-auto text-gray-400 text-xs">{relativeTime}</span>
       </div>
 
       {/* 레포지토리 링크 */}

front/src/components/community/RepoList.tsx

@@ -2,18 +2,49 @@
 
 import { useRepositories } from '@/hooks/community/useCommunity';
 import RepositoryCard from './RepoCard';
+import { Button } from '@/components/ui/Button'
 
 export default function RepositoryList() {
-  const { data, loading, error } = useRepositories();
+  const {
+    repositories,
+    loading,
+    error,
+    sortType,
+    setSortType,
+  } = useRepositories()
 
   if (loading) return <p>로딩 중...</p>;
   if (error) return <p className="text-red-500">에러 발생: {error}</p>;
 
   return (
     <section className="flex flex-col gap-6 mt-6">
-      {data.map((item, i) => (
-        <RepositoryCard key={i} item={item} />
-      ))}
+      {/* ✅ 정렬 버튼 */}
+      <div className="flex justify-end gap-2">
+        <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>
+
+      {repositories.length === 0 ? (
+        <p className="text-center text-muted-foreground">아직 공개된 분석이 없습니다.</p>
+      ) : (
+        <div className="flex flex-col gap-6">
+          {repositories.map((item) => (
+            <RepositoryCard key={item.repositoryId} item={item} />
+          ))}
+        </div>
+      )}
     </section>
   );
 }

front/src/hooks/community/useCommunity.ts

@@ -1,13 +1,14 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { fetchRepositories } from '@/lib/api/community';
 import type { RepositoryItem } from '@/types/community';
 
 export function useRepositories() {
   const [data, setData] = useState<RepositoryItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [sortType, setSortType] = useState<'latest' | 'score'>('latest')
 
   useEffect(() => {
     (async () => {
@@ -22,5 +23,30 @@ export function useRepositories() {
     })();
   }, []);
 
-  return { data, loading, error };
+  const sortedData = useMemo(() => {
+    if (sortType === 'score') {
+      return data
+        .slice()
+        .sort((a, b) => (b.totalScore ?? 0) - (a.totalScore ?? 0))
+    }
+
+    // 최신순
+    const parseDate = (d?: string) => {
+      if (!d) return 0
+      // 백엔드 LocalDateTime 형식 → JS Date 변환 (마이크로초 제거 + UTC 보정)
+      return Date.parse(d.split('.')[0] + 'Z')
+    }
+
+    return data
+      .slice()
+      .sort((a, b) => parseDate(b.createDate) - parseDate(a.createDate))
+  }, [data, sortType])
+
+  return {
+    repositories: sortedData,
+    loading,
+    error,
+    sortType,
+    setSortType,
+  }
 }