feat/#25/프로젝트 상세페이지 연동 완료

team-pofo · Dec 27, 2024 · c088907 · c088907
1 parent 329fa06
commit c088907
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 27 deletions.
diff --git a/src/components/Project/MDEditor/MdeditorViewer.tsx b/src/components/Project/MDEditor/MdeditorViewer.tsx
@@ -2,11 +2,15 @@ import "@uiw/react-md-editor/markdown-editor.css";
 import "@uiw/react-markdown-preview/markdown.css";
 import styles from "./styles.module.css";
 import dynamic from "next/dynamic";
-import { testReadme } from "./TestReadme";
+// import { testReadme } from "./TestReadme";
+
+interface ProjectContentProps {
+  content: string;
+}
 
 const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
 
-function MDEditorViewer() {
+function MDEditorViewer({ content }: ProjectContentProps) {
   return (
     <div style={{ marginTop: "20px" }}>
       <MDEditor
@@ -15,7 +19,7 @@ function MDEditorViewer() {
         hideToolbar={true}
         visiableDragbar={false}
         tabSize={2}
-        value={testReadme}
+        value={content}
       />
     </div>
   );

diff --git a/src/components/Project/Project.tsx b/src/components/Project/Project.tsx
@@ -4,37 +4,55 @@ import MDEditorViewer from "./MDEditor/MdeditorViewer";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
+import { useQuery } from "@apollo/client";
+import { gql } from "@apollo/client";
 
-const imgList: string[] = [
-  `https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_1.jpg`,
-  `https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_2.jpg`,
-  `https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_3.jpg`,
-];
+interface Project {
+  id: string;
+  bio: string;
+  category: string;
+  content: string;
+  imageUrls: string[];
+  title: string;
+  urls: string[];
+}
 
-const linkList: string[] = [
-  `https://github.com/team-pofo/frontend`,
-  `https://google.com`,
-];
+interface ProjectProps {
+  project: Project;
+}
 
-function ProjectTittle() {
-  const router = useRouter();
-  const { id } = router.query;
-  return (
-    <Styles.ProjectDetailTitle>외국민 (id:{id})</Styles.ProjectDetailTitle>
-  );
+export const getProjectById = gql`
+  query ProjectById($projectId: ID!) {
+    projectById(projectId: $projectId) {
+      id
+      title
+      bio
+      urls
+      imageUrls
+      content
+      isApproved
+      category
+    }
+  }
+`;
+
+function ProjectTittle({ project }: ProjectProps) {
+  return <Styles.ProjectDetailTitle>{project.title}</Styles.ProjectDetailTitle>;
 }
 
-function ProjectIntroduction() {
+function ProjectIntroduction({ project }: ProjectProps) {
   return (
     <div>
       <Styles.ProjectDetailIntroduction>
-        외국인 유학생 앱입니다
+        {project.bio}
       </Styles.ProjectDetailIntroduction>
     </div>
   );
 }
 
-function ProjectRepresentativeImages() {
+function ProjectRepresentativeImages({ project }: ProjectProps) {
+  const imgList: string[] = project.imageUrls;
+
   const [showModal, setShowModal] = useState(false);
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
 
@@ -81,7 +99,8 @@ function ProjectRepresentativeImages() {
   );
 }
 
-function ProjectLinks() {
+function ProjectLinks({ project }: ProjectProps) {
+  const linkList: string[] = project.urls;
   return (
     <div>
       {linkList.map((link, index) => (
@@ -98,13 +117,25 @@ function ProjectLinks() {
 }
 
 export default function ProjectComponents() {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const { data, loading, error } = useQuery(getProjectById, {
+    variables: { projectId: parseInt(id as string) },
+  });
+
+  if (loading) return;
+  if (error)
+    return <p style={{ margin: "20px 20px" }}>Error: {error.message}</p>;
+
+  const project: Project = data?.projectById;
   return (
     <Styles.ProjectDetailContainer>
-      <ProjectTittle />
-      <ProjectIntroduction />
-      <ProjectRepresentativeImages />
-      <ProjectLinks />
-      <MDEditorViewer />
+      <ProjectTittle project={project} />
+      <ProjectIntroduction project={project} />
+      <ProjectRepresentativeImages project={project} />
+      <ProjectLinks project={project} />
+      <MDEditorViewer content={project.content} />
     </Styles.ProjectDetailContainer>
   );
 }