Feat: api를 사용해 data fetch 구현 #36

LIKELION-SOGANG · Sep 24, 2024 · 8786c97 · 8786c97
1 parent ead7194
commit 8786c97
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 25 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -7,7 +7,17 @@ const nextConfig = {
     })
 
     return config
-  }
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'images2.imgbox.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 }
 
 export default nextConfig
diff --git a/src/app/project/container/components/PageContent.tsx b/src/app/project/container/components/PageContent.tsx
@@ -1,11 +1,14 @@
-import chunkArray from '../utils/chunkArray'
-import { projectList, tabList } from '../utils/mockData'
+import { GET } from '@/app/api/project/route'
+import chunkArray, { Project } from '../utils/chunkArray'
+import { tabList } from '../utils/mockData'
 import ProjectItem from './ProjectItem'
 import TapBtn from './TapBtn'
+import { getAllProjects } from '@/client-api/api'
 
-export default function PageContent() {
+export default async function PageContent() {
+  const projectList= await getAllProjects();
   const slicedProjectList = chunkArray(projectList, 3)
-
+  
   return (
     <>
       <div className="hidden tablet:block w-full">
@@ -25,7 +28,7 @@ export default function PageContent() {
               className={`w-full flex gap-10  ${index % 2 === 0 ? '' : 'justify-end'}`}>
               {innerList.map(project => (
                 <ProjectItem
-                  key={project.id}
+                  key={project._id}
                   {...project}
                 />
               ))}
@@ -47,9 +50,9 @@ export default function PageContent() {
               ))}
           </div>
           <div className="flex flex-col flex-1">
-            {projectList.map(project => (
+            {projectList.map((project: Project) => (
               <ProjectItem
-                key={project.id}
+                key={project._id}
                 {...project}
               />
             ))}

diff --git a/src/app/project/container/components/ProjectItem.tsx b/src/app/project/container/components/ProjectItem.tsx
@@ -1,31 +1,25 @@
 import Image from 'next/image'
 import Link from 'next/link'
+import { Project } from '../utils/chunkArray'
 
-interface setDataType {
-  title: string
-  generation: string
-  year: string
-  imgUrl: string
-  id: number
-}
-
-export default function ProjectItem(props: setDataType) {
+export default function ProjectItem(props: Project) {
   return (
     <Link
-      href={`/project/${props.id}`}
+      href={`/project/${props._id}`}
       scroll={false}
       className={`flex flex-col text-white font-figtree tablet:leading-none leading-tight mb-[60px] tablet:mb-[78px] cursor-pointer tablet:w-1/4 hover:scale-105 transition ease-in-out duration-200`}>
-      <span className="text-[16px] tablet:text-[20px] font-bold mb-[8px]">{props.title}</span>
+      <span className="text-[16px] tablet:text-[20px] font-bold mb-[8px]">{props.project}</span>
       <span className="text-[13px] tablet:text-[16px] font-medium mb-[8px] tablet:mb-[17px]">
-        {props.generation} | {props.year}
+        {props.generation} | {props.generation+2012}
       </span>
       <Image
-        src={props.imgUrl}
+        src={props.imageUrl}
         alt="project image"
         //   layout="responsive"
         width={'360'}
         height={'202'}
-        className="w-full"
+        // fill={true}
+        className="w-full h-full object-cover"
       />
     </Link>
   )

diff --git a/src/app/project/container/utils/chunkArray.ts b/src/app/project/container/utils/chunkArray.ts
@@ -1,4 +1,15 @@
-import { Project } from './mockData'
+import { ProjectSchema } from './../../../../models/project-schema';
+
+export type Project = {
+  _id: number
+  generation: number
+  description:string
+  github:string
+  imageUrl: string
+  member: string
+  project: string
+  team: string
+}
 
 export default function chunkArray(
   array: Project[],

diff --git a/src/app/project/container/utils/mockData.ts b/src/app/project/container/utils/mockData.ts
@@ -5,7 +5,7 @@ import mockImage4 from '../mockImage/mockImg4.png'
 import mockImage5 from '../mockImage/mockImg5.png'
 import mockImage6 from '../mockImage/mockImg6.png'
 
-export type Project = {
+export type MockProject = {
   id: number
   title: string
   generation: string
@@ -22,7 +22,7 @@ export const tabList = [
   { text: '11th', isSelected: true }
 ]
 
-export const projectList: Project[] = [
+export const projectList: MockProject[] = [
   {
     id: 1,
     title: 'YouCheck',