feat(community): RepoCard UI 개선

Author: Hyeseung-OH

front/src/app/community/page.tsx

@@ -5,10 +5,6 @@ import RepositoryList from '@/components/community/RepoList';
 export default function HomePage() {
   return (
     <main 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>
       <RepositoryList />
     </main>
   );

front/src/components/community/RepoCard.tsx

@@ -3,6 +3,7 @@
 import type { RepositoryItem } from '@/types/community';
 import { useRouter } from 'next/navigation'
 import { formatRelativeTimeKST } from '@/lib/utils/formatDate'
+import { Github, ExternalLink } from "lucide-react"
 
 export default function RepositoryCard({ item }: { item: RepositoryItem }) {
   const router = useRouter();
@@ -35,12 +36,19 @@ export default function RepositoryCard({ item }: { item: RepositoryItem }) {
       </div>
 
       {/* 레포지토리 링크 */}
-      <a
-        href="#"
-        className="text-blue-600 font-semibold text-sm hover:underline"
-      >
-        {item.userName}/{item.repositoryName}
-      </a>
+      <div className="flex items-center gap-2">
+        <Github className="h-4 w-4 text-muted-foreground" />
+        <a
+          href={item.htmlUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-semibold text-primary hover:underline flex items-center gap-1"
+          onClick={(e) => e.stopPropagation()} // 부모 클릭 이벤트 방지
+        >
+          {item.repositoryName}
+          <ExternalLink className="h-3 w-3" />
+        </a>
+      </div>
 
       {/* 요약 */}
       <p className="mt-2 text-gray-700 text-sm leading-relaxed">

front/src/components/community/RepoList.tsx

@@ -18,24 +18,35 @@ export default function RepositoryList() {
 
   return (
     <section className="flex flex-col gap-6 mt-6">
-      {/* ✅ 정렬 버튼 */}
-      <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 className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">커뮤니티</h1>
+          <p className="text-muted-foreground text-sm">
+            다른 사용자의 분석 결과를 둘러보세요.
+          </p>
+        </div>
+
+        {/* 정렬 버튼 그룹 */}
+        <div className="flex 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>
       </div>
 
+
       {repositories.length === 0 ? (
         <p className="text-center text-muted-foreground">아직 공개된 분석이 없습니다.</p>
       ) : (

front/src/components/history/HistoryContent.tsx

@@ -25,32 +25,39 @@ export default function HistoryContent({ memberId, name }: HistoryContentProps)
 
     return (
         <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>
+            <div className="mb-6">
+            {/* 제목 */}
+            <h1 className="text-3xl font-bold">분석 히스토리</h1>
 
-            {/*  통계 카드 컴포넌트 */}
-            <HistoryStats repositories={repositories} />
+            {/* 설명 + 정렬 버튼 한 줄 정렬 */}
+            <div className="flex items-center justify-between">
+                <p className="text-muted-foreground text-sm">
+                시간에 따른 리포지토리 개선 사항을 추적하세요
+                </p>
 
-            {/* ✅ 정렬 버튼 */}
-            <div className="flex justify-end gap-2 mb-4">
+                {/* 정렬 버튼 그룹 */}
+                <div className="flex 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>
+            </div>
             </div>
 
+            {/*  통계 카드 컴포넌트 */}
+            <HistoryStats repositories={repositories} />
+
             <div className="w-full max-w-3xl space-y-4">
             {repositories.length === 0 ? (
                 // ✅ 분석 결과 없음 안내 카드

front/src/types/community.ts

@@ -12,6 +12,7 @@ export interface RepositoryItem {
   totalScore: number
   createDate: string // LocalDateTime → string
   viewingStatus: boolean
+  htmlUrl: string
 }