feat: project 추가

src/app/project/components/ProjectCard.tsx

@@ -0,0 +1,44 @@
+import GithubIcon from "@/components/icon/GithubIcon";
+import LinkIcon from "@/components/icon/LinkIcon";
+import { ProjectType } from "@/types/projects";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+interface ProjectCardProps extends Partial<ProjectType> {}
+
+export default function ProjectCard({
+  title,
+  description,
+  github,
+  link,
+  image,
+}: ProjectCardProps) {
+  return (
+    <section className="rounded-md border-1 p-4">
+      <div className="flex items-start justify-between gap-1 ">
+        <h2 className=" mb-1 w-full text-lg font-semibold">{title}</h2>
+        {github ? (
+          <Link target="_blank" href={github}>
+            <GithubIcon />
+          </Link>
+        ) : null}
+        {link ? (
+          <Link target="_blank" href={link}>
+            <LinkIcon />
+          </Link>
+        ) : null}
+      </div>
+      <p className=" text-sm text-subText">{description}</p>
+      <div className="mt-4 flex justify-center">
+        <Image
+          className=" rounded-md"
+          alt="project"
+          src={image!!}
+          width={150}
+          height={150}
+        />
+      </div>
+    </section>
+  );
+}

src/app/project/layout.tsx

@@ -0,0 +1,10 @@
+import PageLayout from "@/components/PageLayout";
+import React from "react";
+
+export default function layout({ children }: { children: React.ReactNode }) {
+  return (
+    <PageLayout title="프로젝트" description="개발에 참여한 프로젝트 입니다.">
+      {children}
+    </PageLayout>
+  );
+}

src/app/project/page.tsx

@@ -1,10 +1,22 @@
-import UnderConstruction from "@/components/UnderConstruction";
 import React from "react";
+import ProjectCard from "@/app/project/components/ProjectCard";
+import PROJECTS from "@/constants/projects";
 
 export default function ProjectPage() {
   return (
     <>
-      <UnderConstruction />
+      <main className=" grid grid-cols-2 gap-4">
+        {PROJECTS.map((project) => (
+          <ProjectCard
+            key={project.title}
+            title={project.title}
+            description={project.description}
+            github={project.github}
+            link={project.link}
+            image={project.image}
+          />
+        ))}
+      </main>
     </>
   );
 }

src/components/icon/GithubIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export default function GithubIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.026 2C6.517 2 2.052 6.465 2.052 11.974C2.052 16.38 4.909 20.119 8.873 21.439C9.372 21.529 9.552 21.222 9.552 20.958C9.552 20.721 9.544 20.093 9.541 19.262C6.766 19.864 6.18 17.924 6.18 17.924C5.728 16.772 5.073 16.465 5.073 16.465C4.168 15.846 5.142 15.86 5.142 15.86C6.144 15.93 6.669 16.888 6.669 16.888C7.559 18.412 9.005 17.972 9.571 17.717C9.662 17.072 9.922 16.632 10.206 16.383C7.992 16.132 5.664 15.276 5.664 11.453C5.664 10.366 6.053 9.474 6.688 8.778C6.587 8.525 6.242 7.51 6.787 6.138C6.787 6.138 7.624 5.869 9.529 7.159C10.3426 6.93767 11.1818 6.8247 12.025 6.823C12.8682 6.82437 13.7075 6.93735 14.521 7.159C16.427 5.868 17.263 6.138 17.263 6.138C17.808 7.51 17.466 8.525 17.362 8.778C18.002 9.474 18.386 10.365 18.386 11.453C18.386 15.286 16.056 16.128 13.834 16.375C14.189 16.683 14.509 17.291 14.509 18.221C14.509 19.555 14.497 20.631 14.497 20.958C14.497 21.225 14.675 21.535 15.184 21.437C19.146 20.115 22 16.379 22 11.974C22 6.465 17.535 2 12.026 2Z"
+        fill="black"
+      />
+    </svg>
+  );
+}

src/components/icon/LinkIcon.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export default function LinkIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.46502 11.293C9.59802 10.16 11.574 10.16 12.707 11.293L13.414 12L14.828 10.586L14.121 9.879C13.178 8.935 11.922 8.414 10.586 8.414C9.25002 8.414 7.99402 8.935 7.05102 9.879L4.92902 12C3.99332 12.9387 3.4679 14.2101 3.4679 15.5355C3.4679 16.8609 3.99332 18.1323 4.92902 19.071C5.3929 19.5355 5.94399 19.9038 6.55064 20.1547C7.15729 20.4056 7.80754 20.5342 8.46402 20.533C9.12068 20.5344 9.77114 20.4059 10.378 20.155C10.9848 19.9041 11.5361 19.5357 12 19.071L12.707 18.364L11.293 16.95L10.586 17.657C10.0225 18.218 9.25969 18.533 8.46452 18.533C7.66935 18.533 6.90655 18.218 6.34302 17.657C5.78153 17.0937 5.46623 16.3308 5.46623 15.5355C5.46623 14.7402 5.78153 13.9773 6.34302 13.414L8.46502 11.293Z"
+        fill="black"
+      />
+      <path
+        d="M12 4.92899L11.293 5.63599L12.707 7.04999L13.414 6.34299C13.9775 5.78198 14.7403 5.46702 15.5355 5.46702C16.3307 5.46702 17.0935 5.78198 17.657 6.34299C18.2185 6.90626 18.5338 7.66916 18.5338 8.46449C18.5338 9.25983 18.2185 10.0227 17.657 10.586L15.535 12.707C14.402 13.84 12.426 13.84 11.293 12.707L10.586 12L9.172 13.414L9.879 14.121C10.822 15.065 12.078 15.586 13.414 15.586C14.75 15.586 16.006 15.065 16.949 14.121L19.071 12C20.0067 11.0613 20.5321 9.78991 20.5321 8.46449C20.5321 7.13908 20.0067 5.86771 19.071 4.92899C18.1325 3.9928 16.8611 3.46704 15.5355 3.46704C14.2099 3.46704 12.9385 3.9928 12 4.92899Z"
+        fill="black"
+      />
+    </svg>
+  );
+}

src/constants/projects.ts

@@ -0,0 +1,29 @@
+import WaggleImage from "../../public/projects/waggle.png";
+import RotorageImage from "../../public/projects/rotorage.png";
+import TataroImage from "../../public/projects/tataro.png";
+import { ProjectType } from "@/types/projects";
+
+const PROJECTS: Partial<ProjectType>[] = [
+  {
+    title: "Waggle(개발중)",
+    description: "반려견에 대한 모든 것을 공유하고 소통하는 공간 🐾",
+    github: "https://github.com/teamWaggle/Waggle-front",
+    link: "https://waggle-pet.com/",
+    image: WaggleImage,
+  },
+  {
+    title: "Rotorage",
+    description: "한로로 팬페이지",
+    github: "https://github.com/Hellol77/rotorage",
+    link: "https://www.rotorage.site/",
+    image: RotorageImage,
+  },
+  {
+    title: "타로보는 타타로",
+    description: "ChatGPT 기반 타로점 서비스",
+    link: "https://tataro.net/",
+    image: TataroImage,
+  },
+];
+
+export default PROJECTS;

src/types/projects.ts

@@ -0,0 +1,9 @@
+import { StaticImageData } from "next/image";
+
+export interface ProjectType {
+  title: string;
+  description: string;
+  github: string;
+  link: string;
+  image: StaticImageData;
+}