feat/#25/hyperlink 추가

package.json

@@ -25,7 +25,6 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
-    "react-redux": "^9.1.2",
     "react-spinners": "^0.14.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",

src/components/Project/Project.tsx

@@ -1,18 +1,24 @@
 import { useRouter } from "next/router";
+import * as Styles from "./styles";
 import MDEditorViewer from "./MDEditor/MdeditorViewer";
+import Link from "next/link";
 
 export default function ProjectComponents() {
   const router = useRouter();
   const { id } = router.query;
 
   return (
-    <div>
-      <h1> 프로젝트 제목: {id} </h1>
-      <h1> 사진 사진 사진 사진</h1>
-      <h1> 링크 링크 링크 </h1>
-      <h1> Markdown Viewer </h1>
-
+    <Styles.ProjectDetailContainer>
+      <Styles.ProjectDetailTitle>프로젝트 제목: {id}</Styles.ProjectDetailTitle>
+      <Styles.ProjectDetailText>
+        한 줄 소개글 우리 프로젝트 좋아요 많관부
+      </Styles.ProjectDetailText>
+      <Link href="https://github.com/team-pofo/frontend" legacyBehavior>
+        <Styles.ProjectDetailLink target="_blank">
+          https://github.com/team-pofo/frontend
+        </Styles.ProjectDetailLink>
+      </Link>
       <MDEditorViewer />
-    </div>
+    </Styles.ProjectDetailContainer>
   );
 }

src/components/Project/styles.ts

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+
+export const ProjectDetailContainer = styled.div`
+  max-width: 1200px;
+  align-items: center;
+  padding: 20px 20px 20px 20px;
+  margin: auto;
+`;
+
+export const ProjectDetailTitle = styled.p`
+  margin: 0px 0px 10px;
+  font-size: 40px;
+  font-weight: 700;
+`;
+
+export const ProjectDetailText = styled.p`
+  margin: 0px 0px 10px;
+  font-size: 20px;
+`;
+
+export const ProjectDetailLink = styled.a`
+  padding: 0 0 10px;
+  font-size: 20px;
+  cursor: pointer;
+`;