feat: 홈 페이지 UI 개선 및 수강생 카드 스타일 업데이트

Author: YeongseoYoon

packages/app/src/pages/home/Home.tsx

@@ -1,32 +1,41 @@
 import type { GithubUser } from "@hanghae-plus/domain";
-import { BookOpen, Github } from "lucide-react";
+import { BookOpen, Github, Users } from "lucide-react";
 import { useUsers } from "@/features";
 import { Link } from "react-router";
 import { Badge, Card } from "@/components";
 
 const CompactStudentCard = ({ id, link, image }: GithubUser) => {
   return (
-    <Card className="p-3 transition-all duration-100 hover:scale-[1.02] hover:shadow-lg group cursor-pointer">
-      <Link to={`/user/${id}`} className="flex flex-col items-center text-center space-y-2">
-        {/* 프로필 이미지 및 랭킹 */}
-        <div className="relative">
-          <div className="w-12 h-12 rounded-full overflow-hidden ring-1 ring-orange-500/30 group-hover:ring-orange-400/50 transition-all">
-            <img src={image} alt={id} className="w-full h-full object-cover" />
-          </div>
-        </div>
+    <Card className="hover:shadow-glow transition-all duration-300 cursor-pointer animate-fade-in hover:scale-[1.02] group bg-card border border-border">
+      <Link to={`/user/${id}`} className="block">
+        <div className="p-3">
+          {/* 프로필 섹션 */}
+          <div className="flex flex-col items-center text-center space-y-2">
+            <div className="relative">
+              <div className="w-12 h-12 rounded-full overflow-hidden ring-2 ring-orange-500/30 group-hover:ring-orange-400/50 transition-all">
+                <img src={image} alt={id} className="w-full h-full object-cover" />
+              </div>
+              <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 rounded-full border border-slate-800"></div>
+            </div>
 
-        {/* 이름 */}
-        <div className="space-y-0.5">
-          <h3 className="text-sm font-semibold text-white group-hover:text-orange-300 transition-colors truncate w-full">
-            {id}
-          </h3>
-        </div>
+            <div className="w-full">
+              <h3 className="text-sm font-semibold text-white group-hover:text-orange-300 transition-colors break-words leading-tight">
+                {id}
+              </h3>
+              <p className="text-xs text-slate-400 mt-1">프론트엔드 6기</p>
+            </div>
 
-        {/* 액션 버튼 */}
-        <div className="flex gap-1">
-          <Badge className=" text-slate-300 cursor-pointer" onClick={() => window.open(link, "_blank")}>
-            <Github className="w-3 h-3" />
-          </Badge>
+            <Badge
+              variant="secondary"
+              className="text-xs bg-slate-700 hover:bg-slate-600 cursor-pointer transition-colors px-2 py-1"
+              onClick={(e: React.MouseEvent) => {
+                e.preventDefault();
+                window.open(link, "_blank");
+              }}
+            >
+              <Github className="w-4 h-4" />
+            </Badge>
+          </div>
         </div>
       </Link>
     </Card>
@@ -37,27 +46,46 @@ export const Home = () => {
   const users = useUsers();
 
   return (
-    <main className="max-w-7xl mx-auto px-4 py-4">
+    <main className="max-w-7xl mx-auto px-4 py-6">
       {/* 상단 통계 */}
-      <div className="mb-4 space-y-4">
+      <div className="mb-6 space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-bold text-white">수강생 명단</h2>
+          <Badge variant="secondary" className="text-sm bg-slate-700">
+            총 {users.items.length}명
+          </Badge>
+        </div>
+
         {/* 통계 카드 */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-          <Card className="p-3">
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-orange-500/20 rounded-lg flex items-center justify-center">
-                <BookOpen className="w-4 h-4 text-orange-400" />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Card className="p-4 bg-slate-800/50 border-slate-700">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-orange-500/20 rounded-lg flex items-center justify-center">
+                <Users className="w-5 h-5 text-orange-400" />
+              </div>
+              <div>
+                <div className="text-2xl font-bold text-white">{users.items.length}</div>
+                <div className="text-sm text-slate-400">총 수강생</div>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-4 bg-slate-800/50 border-slate-700">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
+                <BookOpen className="w-5 h-5 text-green-400" />
               </div>
               <div>
-                <div className="text-lg font-bold text-white">{users.items.length}</div>
-                <div className="text-xs text-slate-400">총 수강생</div>
+                <div className="text-2xl font-bold text-white">6기</div>
+                <div className="text-sm text-slate-400">현재 기수</div>
               </div>
             </div>
           </Card>
         </div>
       </div>
 
-      {/* 수강생 그리드 - 더 많은 컬럼으로 조정 */}
-      <div className="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-6 gap-3">
+      {/* 수강생 그리드 */}
+      <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
         {users.items.map((user) => (
           <CompactStudentCard key={user.id} {...user} />
         ))}