프로젝트 컴포넌트 추가 및 스타일 수정

src/components/Projects.tsx

@@ -0,0 +1,40 @@
+import ProjectsComponents from "./ProjectsComponents";
+
+const projects = [
+    {
+        name: "team-neko/two_hearts",
+        url: "https://chromewebstore.google.com/detail/fhbjjhpphmigcniggnhgoepaodgoobdk?utm_source=item-share-cb",
+        description: "Two Hearts는 Chrome 확장 프로그램으로, 새탭을 더 간단명료하게 보여줍니다.",
+        techStack: ["Bun", "Chrome", "TypeScript", "React"]
+    },
+    {
+        name: "imnyang/today.isangjeong",
+        url: "https://github.com/imnyang/today.isangjeong",
+        description: "친구들과 간단하게 학교의 급식을 공유하기 위해 고안한 프로젝트입니다.\n원래 Python으로 작성되었지만 현재는 TypeScript로 재작성되었습니다.",
+        techStack: ["Bun", "TypeScript", "Instagram"]
+    },
+    {
+        name: "team-neko/dynamic-kawaii",
+        url: "https://github.com/team-neko/dynamic-kawaii",
+        description: "Dynamic Kawaii는 Visual Studio Code의 몇 안되는 핑크색 다크모드입니다.",
+        techStack: ["VSCode", "json"]
+    },
+    {
+        name: "imnyang/tsh",
+        url: "https://github.com/imnyang/tsh",
+        description: "tsh는 Rust로 작성된 CLI Trash Bin입니다.",
+        techStack: ["Rust", "trash"]
+    }
+];
+
+export default function Projects() {
+    return (
+        <div id="projects">
+            <div className="space-y-8">
+                {projects.map((project, index) => (
+                    <ProjectsComponents key={index} project={project} />
+                ))}
+            </div>
+        </div>
+    )
+}

src/components/ProjectsComponents.tsx

@@ -0,0 +1,38 @@
+type Project = {
+    name: string;
+    url: string;
+    description: string;
+    techStack: string[];
+};
+
+export default function ProjectsComponents({ project }: { project: Project }) {
+    return (
+        <div>
+            <div>
+                <h1 className="text-xl mb-2">
+                    <a href={project.url} target="_blank" rel="noopener noreferrer">
+                        {project.name}
+                    </a>
+                </h1>
+                <p className="text-sm text-muted-forceground font-light mb-2">
+                    {project.description.split('\n').map((line, idx) => (
+                        <span key={idx}>
+                            {line}
+                            <br />
+                        </span>
+                    ))}
+                </p>
+                <div>
+                    {project.techStack.map((tech, idx) => (
+                        <span
+                            key={idx}
+                            className="inline-block bg-accent text-accent-foreground text-xs mr-2 px-2.5 py-0.5 rounded select-none"
+                        >
+                            {tech}
+                        </span>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}