Merge pull request #35 from team-pofo/feature/#25/projectDetailPage

Feature/#25/project detail page
team-pofo · Dec 30, 2024 · 4dd818a · 4dd818a
2 parents 329fa06 + 7c2198c
commit 4dd818a
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 53 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>
   );
 }
diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
@@ -3,6 +3,7 @@ import * as S from "./styles";
 import Image from "next/image";
 import empty_heart from "../../../public/icons/empty_heart.svg";
 import fill_heart from "../../../public/icons/fill_heart.svg";
+import Link from "next/link";
 
 type ProjectCardProps = {
   __typename: string;
@@ -33,32 +34,34 @@ const ProjectCard = forwardRef<HTMLDivElement, ProjectCardProps>(
     };
 
     return (
-      <S.Card ref={ref}>
-        <S.ImageWrapper>
-          <Image
-            src={imageUrls[0]}
-            alt={title}
-            layout="fill"
-            objectFit="cover"
-          />
-        </S.ImageWrapper>
-        <S.Content>
-          <S.Title>{title}</S.Title>
-          <S.Description>{bio}</S.Description>
-          <S.Author>{id}</S.Author>
-          <S.LikeSection>
-            <S.LikeButton onClick={handleLike}>
-              <Image
-                src={true ? fill_heart : empty_heart}
-                alt="like button"
-                width={24}
-                height={24}
-              />
-            </S.LikeButton>
-            <S.LikeCount>{100} likes</S.LikeCount>
-          </S.LikeSection>
-        </S.Content>
-      </S.Card>
+      <Link style={{ width: "100%" }} href={`/project/${id}`}>
+        <S.Card ref={ref}>
+          <S.ImageWrapper>
+            <Image
+              src={imageUrls[0]}
+              alt={title}
+              layout="fill"
+              objectFit="cover"
+            />
+          </S.ImageWrapper>
+          <S.Content>
+            <S.Title>{title}</S.Title>
+            <S.Description>{bio}</S.Description>
+            <S.Author>{id}</S.Author>
+            <S.LikeSection>
+              <S.LikeButton onClick={handleLike}>
+                <Image
+                  src={true ? fill_heart : empty_heart}
+                  alt="like button"
+                  width={24}
+                  height={24}
+                />
+              </S.LikeButton>
+              <S.LikeCount>{100} likes</S.LikeCount>
+            </S.LikeSection>
+          </S.Content>
+        </S.Card>
+      </Link>
     );
   },
 );