Project 리스트

src/components/Home/Project.tsx

@@ -1,9 +1,38 @@
+import ProjectCard from "../ProjectCard";
+
+const projects = [
+    {
+        name: "🍴 오늘 인천 상정중학교",
+        description: "오늘의 급식을 인스타그램에서도 빠르게",
+        link: "https://www.instagram.com/today.isangjeong/"
+    },
+    {
+        name: "🧹 al-1s (개발중)",
+        description: "Hyper-V 웹에서도 쉽게 관리하기",
+        link: "/#project"
+    },
+    {
+        name: "🩷 Dynamic Kawaii",
+        description: "진정한 VSCode 테마",
+        link: "https://github.com/imnyang/dynamic-kawaii"
+    },
+    {
+        name: "💊 FakeAlyac",
+        description: "어? 내 시스템 트레이에 있는거 알약 아닌데?",
+        link: "https://github.com/imnyang/FakeAlyac"
+    }
+]
+
 export default function Project() {
     return (
         <div className="w-full h-screen flex flex-col items-center justify-center">
             <div className="w-full md:w-[50%] p-4">
                 <h1 className="text-2xl font-bold">📖 Project</h1>
-                <p className="mt-2">Soon™</p>
+                <div className="mt-4 gap-4 grid grid-cols-1 md:grid-cols-2">
+                    {projects.map((project, index) => (
+                        <ProjectCard key={index} name={project.name} description={project.description} link={project.link} />
+                    ))}
+                </div>
             </div>
         </div>
     );

src/components/ProjectCard.tsx

@@ -0,0 +1,31 @@
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+  } from "@/components/ui/card"
+
+import { Link } from "react-router";
+
+interface ProjectCardProps {
+    name: string;
+    description: string;
+    link: string;
+}
+
+const ProjectCard: React.FC<ProjectCardProps> = ({ name, description, link }) => {
+    return (
+        <Link to={link}>
+            <Card>
+                <CardHeader>
+                    <CardTitle>{name}</CardTitle>
+                    <CardDescription>{description}</CardDescription>
+                </CardHeader>
+            </Card>
+        </Link>
+    );
+}
+
+export default ProjectCard;